/* Schools app kit: wf3/wf.css (frozen wireframe kit, copied verbatim below) + build rules for real pages (responsive, fixed bars). */
/* wf vars alias the card roles in src/layout/wf-token-map.ts WF_VARS (tests/wf-token-map.test.ts); kit roles resolve on the [data-plain-root] wrapper (shell.ts), so the aliases repeat there */
:root{--ink:var(--p-color-text-primary,#141414);--ink2:var(--p-color-text-secondary,#5e6461);--ink3:var(--p-color-text-tertiary,#64635f);--line:var(--p-color-border-subtle,#e3e3dd);--line2:var(--p-color-border-subtle,#e3e3dd);--fill:var(--p-color-surface-sunken,#f7f6f2);--fill2:var(--p-color-border-subtle,#e3e3dd);--bg:var(--p-color-bg-default,#ffffff)}
[data-plain-root]{--ink:var(--p-color-text-primary,#141414);--ink2:var(--p-color-text-secondary,#5e6461);--ink3:var(--p-color-text-tertiary,#64635f);--line:var(--p-color-border-subtle,#e3e3dd);--line2:var(--p-color-border-subtle,#e3e3dd);--fill:var(--p-color-surface-sunken,#f7f6f2);--fill2:var(--p-color-border-subtle,#e3e3dd);--bg:var(--p-color-bg-default,#ffffff)}
*{box-sizing:border-box;margin:0;padding:0}
/* the reset above is unlayered, so it would zero the kit text-field box's inline padding; restore the kit token */
.pd-field{padding-inline:var(--p-field-padding-x)}
html,body{background:var(--bg);color:var(--ink);font:16px/1.45 "Instrument Sans",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
/* kit root paints bg-panel (canvas) at body-m 14px; wf3 pages stay white at 16px, the font comes from the kit */
[data-plain-root][data-paint]{background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45;min-height:100vh;min-height:100dvh}
a{color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border:1px solid var(--ink);border-radius:4px;font-size:var(--p-type-body-m-size,14px);font-weight:600;background:var(--bg);color:var(--ink);white-space:nowrap;text-decoration:none}
.btn.pri{background:var(--ink);color:var(--bg)}
.box{background:var(--fill);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:13px;text-align:center}
.muted{color:var(--ink2)}.faint{color:var(--ink3)}
.mark{display:inline-flex;width:22px;height:22px;border-radius:var(--p-radius-full,9999px);border:1.5px solid var(--ink);align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.mark.ok{background:var(--ink);color:var(--bg)}
.mark.no{border-style:solid;background:var(--bg)}
/* top bar: Coursera course shell, 62px */
.top{height:62px;border-bottom:1px solid var(--line2);display:flex;align-items:center;padding:0 46px;gap:24px}
.logo{display:block;height:30px;color:var(--ink);text-decoration:none}.logo svg{display:block;height:100%;width:auto}
.top .sep{width:1px;height:26px;background:var(--line)}
.top .search{width:356px;display:flex;align-items:center;font-size:14px}.top .search [data-plain=field]{flex:1;min-width:0}
.top .right{margin-left:auto;display:flex;gap:20px;align-items:center;font-size:14px}
.avatar{width:34px;height:34px;border-radius:var(--p-radius-full,9999px);background:var(--fill2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
/* course shell: rail 285 at x46, main 856 at x450 */
.shell{display:grid;grid-template-columns:285px 856px;column-gap:119px;padding:0 46px}
.rail{padding-top:22px}
.rail .id .box{width:72px;height:72px;margin-bottom:14px}
.rail .id b{display:block;font-size:var(--p-type-body-m-size,14px);line-height:1.35}
.rail .id span{font-size:14px;color:var(--ink2)}
.rail .grp{margin-top:34px;font-size:var(--p-type-body-m-size,14px);font-weight:600;display:flex;gap:10px;align-items:center}
.rail ul{list-style:none;margin:8px 0 0 28px}
.rail li{display:flex;gap:10px;align-items:center;height:38px;font-size:var(--p-type-body-m-size,14px)}
.rail li .mark{width:18px;height:18px;font-size:10px}
.rail nav{margin-top:18px}
.rail nav a{display:block;height:48px;line-height:48px;padding-left:44px;font-size:var(--p-type-body-m-size,14px);font-weight:600;text-decoration:none}
.rail nav a.on{background:var(--fill);border-left:3px solid var(--ink);padding-left:41px}
.main{padding-top:36px;padding-bottom:64px}
.main h1{font-size:24px;font-weight:600;letter-spacing:-.01em}
.main .sub{font-size:14px;color:var(--ink2);margin-top:4px}
.banner{border:1px solid var(--line);margin-top:22px;padding:22px 26px;display:flex;align-items:center;gap:18px}
.banner .grow{flex:1}
.sum{display:grid;grid-template-columns:168px 1fr auto;gap:24px;align-items:center}
.sum .box{width:168px;height:126px}
.big{font-size:40px;font-weight:600;line-height:1;letter-spacing:-.02em}
.tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:var(--p-type-body-m-size,14px)}
.tbl th{text-align:left;font-weight:600;font-size:14px;padding:0 12px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:18px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tr.row td:first-child{width:46px;padding-left:16px}
.tbl .t{font-weight:600}.tbl .s{font-size:13px;color:var(--ink2);margin-top:2px}
.tbl td.num{white-space:nowrap;text-decoration:none}
.tbl a{font-weight:600}
.label{margin-top:22px;font-size:13px;color:var(--ink2);max-width:640px}
/* mobile, 390: Coursera iOS results */
.m{width:390px;min-height:844px;background:var(--fill);position:relative;padding-bottom:84px}
.m .sb{height:47px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 28px 6px;font-size:var(--p-type-body-m-size,14px);font-weight:600;background:var(--bg)}
.m .nav{height:44px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:var(--bg);border-bottom:1px solid var(--line2);font-weight:600;text-align:center}
.m .nav .x{font-size:var(--p-type-title-l-size,20px);font-weight:400}
.m .pad{padding:16px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:12px}
.card .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2)}
.card .q{font-size:var(--p-type-body-l-size,16px);font-weight:600;margin-top:6px;line-height:1.3}
.card .v{font-size:var(--p-type-body-m-size,14px);margin-top:6px}
.state{margin-top:12px;border-radius:6px;background:var(--fill);padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:var(--p-type-body-m-size,14px);font-weight:600}
.state.no{background:var(--bg);border:1px solid var(--ink)}
.m .bar{position:absolute;left:0;right:0;bottom:0;height:84px;background:var(--bg);border-top:1px solid var(--line2);display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;font-size:var(--p-type-body-l-size,16px);font-weight:600}
/* ---- build rules (not in the wireframe kit) ---- */
body{min-height:100vh}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button.btn{cursor:pointer;font-family:inherit}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--bg);padding:8px;z-index:9}
/* desktop and mobile blocks: one shown per width; display:none keeps the hidden one out of the accessibility tree */
.vm{display:none}
@media (max-width:600px){.vd{display:none}.vm{display:block}}
/* desktop shell: wireframe widths at 1440, fluid below 1352 */
@media (max-width:1352px){.shell{grid-template-columns:minmax(220px,285px) minmax(0,856px);column-gap:clamp(24px,6vw,119px)}.top .search{width:auto;flex:0 1 356px}}
@media (max-width:900px){.shell{grid-template-columns:1fr;padding:0 24px}.rail{display:none}.top{padding:0 24px}.top .search{display:none}}
/* mobile: full width, bars fixed to the viewport */
.m{width:100%;min-height:100vh;padding-bottom:0;display:flex;flex-direction:column}
/* a .m child with auto side margins is not stretched, so it sizes to its content and can run past the screen; cap it */
.m>*{max-width:100%}
.m>.pad,.m>main{flex:1}
.m .nav{position:sticky;top:0;z-index:5}
.m .nav a{text-decoration:none}
/* sticky, not fixed: it rides the viewport bottom while scrolling and sits after the content at the end (no overlap) */
.m .bar{position:sticky;bottom:0;z-index:5;margin-top:auto}
.m .bar a{text-decoration:none}

/* reference-model stills (src/layout/stills.ts) */
.box.still{padding:0;overflow:hidden;background:var(--p-color-text-primary,#141414);position:relative}
.box.still img.st{width:100%;height:100%;object-fit:cover;display:block}
.box.still .tag{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.92);color:var(--p-color-text-primary,#141414);font-size:12px;font-weight:600;padding:3px 8px;border-radius:4px;line-height:1.3;text-align:left}
.credit{font-size:var(--p-type-caption-size,12px);color:var(--ink3,#777)}
.credit a{color:inherit}
.box.tn{background:var(--p-color-text-primary,#141414);color:var(--p-color-bg-default,#fff);font-size:var(--p-type-title-l-size,20px);font-weight:700;letter-spacing:-.01em;border:0}
.box.nophoto{background:#f4f4f2;color:var(--ink2,#555);font-size:13px;padding:10px;line-height:1.35}
.still-credit{max-width:1352px;margin:8px auto 24px;padding:0 16px}
/* Guide Figure 1 (src/pages/guide-figures.ts) */
.gfig{margin:16px 0 0;border:1px solid var(--line);border-radius:var(--p-radius-card,12px);background:var(--p-color-bg-canvas,#f7f6f2);padding:12px}
.gfig svg{display:block;width:100%;height:auto;max-height:320px}
.gsteps .gsh{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.gsteps ol{margin:0;padding:0;list-style:none;counter-reset:g;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:600px){.gsteps ol{grid-template-columns:repeat(2,1fr)}}
.gsteps li{counter-increment:g;background:var(--bg);border:1px solid var(--line);border-radius:var(--p-radius-control,8px);padding:10px 12px;font-size:14px;font-weight:500;line-height:1.3}
.gsteps li::before{content:counter(g);display:block;font-size:12px;font-weight:600;color:var(--p-color-success-text,#0b7a55);margin-bottom:4px}
/* loading / error banner while a student screen loads (src/client/load-nav.ts; one per page, added on demand) */
.net[data-net-app]{display:none;position:fixed;z-index:60;left:50%;top:12px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);background:var(--bg);border:1px solid var(--ink);border-radius:8px;padding:12px 16px;font-size:var(--p-type-body-m-size,14px);font-weight:600;align-items:center;gap:14px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.net[data-net-app].show{display:flex}