:root{
  --ink:#dfe6e9;--paper:#07090b;--panel:#0c1013;--panel-hi:#171c1e;
  --muted:#a5afb3;--signal:#ff4d3d;--cyan:#45e6d4;--yellow:#ffb020;
  --green:#4ade80;--line:#303638;--line-hi:#536064;
  /* Local humanist/interface fonts keep reading comfortable without remote assets. */
  --sans:"Segoe UI","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;min-height:100vh;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 1.25rem;
  background-image:
    radial-gradient(60rem 40rem at 50% -10%,rgba(69,230,212,.07),transparent 60%);
}
/* One short column with nothing below it sits better centred than hung from
   the top, and only the sign-in pages are that shape. */
body:has(.auth){align-items:center;padding-block:4vh}

/* Readable proportional type for headings and interface labels. */
.shell::before,.eyebrow,label,.meta,.badge,.divider,h2,
input.code,.stat strong,.stamp .meta{font-family:var(--sans)}
.shell{width:100%;max-width:44rem}
/* A roster and an audit trail do not fit in a reading column. */
.shell.wide{max-width:72rem}
.shell:has(.appbar)::before{display:none}
.shell::before{
  content:"Cyberdyne University";display:block;background:url("/assets/cyberdyne-mark.svg") left top / 32px 32px no-repeat;
  font-size:.7rem;letter-spacing:0;color:var(--cyan);
  border-bottom:1px solid var(--line);padding:.35rem 0 1rem 2.75rem;margin-bottom:2rem;
}
h1{
  font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.4;margin:0 0 1rem;
  letter-spacing:-.02em;font-weight:600;
}
h2{font-size:1.1rem;line-height:1.4;letter-spacing:0;color:var(--ink);margin:2.5rem 0 .9rem}
h3{font-size:1rem;margin:0 0 .35rem}
p{margin:0 0 1rem;color:var(--muted);max-width:60ch}
a{color:var(--cyan);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
form{margin:1.75rem 0 1.5rem;border:1px solid var(--line);border-left:2px solid var(--cyan);
  background:var(--panel);padding:1.25rem;border-radius:10px}
label{display:block;font-size:.9rem;letter-spacing:0;text-transform:none;
  color:var(--muted);margin-bottom:.5rem}
/* One control baseline; native selection and keyboard behavior are retained. */
input:not([type]),input:is([type=email],[type=text],[type=number]),textarea,select{
  display:block;width:100%;min-width:0;max-width:100%;min-height:48px;
  background-color:var(--paper);color:var(--ink);font:inherit;line-height:1.5;
  border:1px solid var(--line-hi);padding:.75rem .875rem;border-radius:8px;
}
input[type=number]{width:10rem}
:is(input,textarea,select):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:is([type=checkbox],[type=radio]){accent-color:var(--cyan);width:1.1em;height:1.1em;vertical-align:middle;margin:0 .5em .15em 0;flex-shrink:0}
select{
  appearance:none;padding-inline-end:3rem;
  background-image:linear-gradient(45deg,transparent 43%,var(--muted) 43% 57%,transparent 57%),linear-gradient(135deg,transparent 43%,var(--muted) 43% 57%,transparent 57%);
  background-position:calc(100% - 1.5rem) center,calc(100% - 1rem) center;
  background-size:.5rem .5rem;background-repeat:no-repeat;
}
select:not(:disabled):hover{border-color:var(--cyan)}
option{background:var(--paper);color:var(--ink)}
:disabled{cursor:not-allowed}
@media (forced-colors:active){select{appearance:auto;background-image:none;padding-inline-end:.875rem}}
a:focus-visible,button:focus-visible,summary:focus-visible,.wrap:focus-visible,.tablewrap:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
textarea{resize:vertical;min-height:6rem}
input:not([type=hidden]) + label,textarea + label,select + label{margin-top:1.25rem}
button{
  max-width:100%;min-height:44px;margin-top:1rem;font:inherit;font-weight:600;letter-spacing:.01em;
  background:var(--cyan);color:#04120f;border:0;padding:.75rem 1.4rem;
  border-radius:8px;cursor:pointer;
  transition:transform 140ms ease,background 140ms ease,border-color 140ms ease;
}
button:not(:disabled):hover{background:var(--ink);transform:translateY(-1px)}
button:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){button{transition:none}button:not(:disabled):hover{transform:none}}
button.quiet{background:transparent;color:var(--muted);border:1px solid var(--line-hi)}
button.quiet:not(:disabled):hover{color:var(--ink);border-color:var(--line-hi)}
button.danger{background:transparent;color:var(--signal);border:1px solid var(--signal)}
button.danger:not(:disabled):hover{background:var(--signal);color:var(--paper)}
.notice{border-left:2px solid var(--yellow);padding-left:.8rem;color:var(--ink)}
.quoted{border-left:2px solid var(--line-hi);padding-left:.9rem;color:var(--ink)}
.meta{color:var(--muted);font-size:.8rem}
.eyebrow{font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--cyan);
  display:block;margin-bottom:.4rem}
ul.queue{list-style:none;margin:0;padding:0}
ul.queue li{border:1px solid var(--line);border-radius:12px;
  background:var(--panel);padding:1rem 1.15rem;margin-bottom:1rem}
ul.queue li.aside{border-top-color:var(--line-hi);border-style:dashed}
ul.queue li.done{border-top-color:var(--green)}
ul.queue form{display:block;margin:.75rem 0 0;border:0;background:none;padding:0}
ul.queue form label{margin-top:.6rem}
ul.queue button{margin:1rem .5rem .25rem 0}
.actions button{margin:0}
/* Inputs and actions occupy separate rows, including compact lesson forms. */
form > :is(input:not([type=hidden]),textarea,select) + button{display:block;margin-top:1rem}
form > :is(input:not([type=hidden]),textarea,select) + :is(p,.field-error){margin-top:.75rem}
form + p{margin-top:1rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.actions form{display:inline-block;margin:0}

/* The numbers across the top of a dashboard. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:.75rem;margin:0 0 1.5rem}
.stat{border:1px solid var(--line);border-top:2px solid var(--cyan);
  background:var(--panel);padding:.85rem .9rem}
.stat-label{display:block;font-size:.8rem;letter-spacing:0;text-transform:none;
  color:var(--muted);margin:0 0 .35rem}
.stat-value{display:block;font-size:1.7rem;line-height:1.1;color:var(--ink)}
.stat-meta{display:block;font-size:.72rem;color:var(--muted);margin-top:.2rem}
.stat.warn{border-top-color:var(--yellow)}
.stat.warn .stat-value{color:var(--yellow)}

/* Tables, for the roster and the journal. */
table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.85rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--muted);
  border-bottom-color:var(--line-hi);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel)}
.wrap{max-width:100%;overflow-x:auto}

/* A badge says what something is; the word inside it carries the meaning, so
   colour is never the only signal. */
.badge{display:inline-block;padding:.1rem .45rem;border:1px solid var(--line-hi);
  font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.badge.ok{border-color:var(--green);color:var(--green)}
.badge.warn{border-color:var(--yellow);color:var(--yellow)}
.badge.bad{border-color:var(--signal);color:var(--signal)}

/* Progress. The number is always written out next to the bar, so this still
   reads with CSS off.

   Widths are classes, not a style attribute. style-src is 'self' with no
   style-src-attr beside it, so an inline width on these bars is refused by
   the browser and every one of them was rendering empty in anything that
   enforces the policy -- invisible to curl, which is how it survived.
   Rounded to the nearest 5, so this is 21 rules rather than 101. */
.bar{display:block;height:.4rem;background:var(--panel-hi);border:1px solid var(--line);
  margin:.4rem 0;overflow:hidden;border-radius:999px}
.bar > span{display:block;height:100%;width:0;background:var(--cyan);border-radius:999px}
.bar.done > span{background:var(--green)}
.pct-0{width:0}.pct-5{width:5%}.pct-10{width:10%}.pct-15{width:15%}
.pct-20{width:20%}.pct-25{width:25%}.pct-30{width:30%}.pct-35{width:35%}
.pct-40{width:40%}.pct-45{width:45%}.pct-50{width:50%}.pct-55{width:55%}
.pct-60{width:60%}.pct-65{width:65%}.pct-70{width:70%}.pct-75{width:75%}
.pct-80{width:80%}.pct-85{width:85%}.pct-90{width:90%}.pct-95{width:95%}
.pct-100{width:100%}

/* One bar across the top of every signed-in page. The learner side had no
   navigation at all before this: each page ended with a lone Sign Out button,
   and the only way between sections was the browser's back button. */
.appbar{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:0 0 1rem;margin:0 0 2rem;border-bottom:1px solid var(--line)}
.mark{font-family:var(--sans);font-size:1rem;letter-spacing:0;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.mark span{color:var(--cyan);margin-left:.4rem}
.mark:hover{color:var(--cyan)}
.mainnav{display:flex;gap:.25rem;flex-wrap:wrap;flex:1}
.mainnav a{font-size:.82rem;text-decoration:none;color:var(--muted);
  padding:.35rem .7rem;border-radius:7px;border:1px solid transparent}
.mainnav a:hover{color:var(--ink);background:var(--panel)}
/* The current section is named, not only tinted. */
.mainnav a[aria-current=page]{color:var(--ink);background:var(--panel);border-color:var(--line-hi)}
.account{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.account form{margin:0;border:0;background:none;padding:0}
/* The way across to the other surface, next to the account it belongs to. */
.account .switch button{border-color:var(--cyan);color:var(--cyan)}
.account .switch button:not(:disabled):hover{background:var(--cyan);color:#04120f}
:is(.reading-light,.reading-prism) .account .switch button:not(:disabled):hover{color:#fff}
.who{font-size:.78rem;color:var(--muted);max-width:14rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.small{margin:0;padding:.35rem .7rem;font-size:.78rem}

.pagehead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:0 0 1.75rem}
.pagehead h1{margin:0 0 .35rem}
.pagehead .lede{margin:0;color:var(--muted);max-width:60ch}
.pagehead-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.pagehead-actions form{margin:0;border:0;background:none;padding:0}
section{margin:0 0 2.5rem}
section > h2:first-child{margin-top:0}

/* An empty table with a header row proves the query ran. It does not say
   whether that is normal or what to do next. */
.empty{border:1px dashed var(--line-hi);border-radius:12px;background:var(--panel);
  padding:2rem 1.5rem;text-align:center;margin:0 0 1.5rem}
.empty-title{margin:0 0 .4rem;color:var(--ink);font-weight:600}
.empty p{margin:0 auto;max-width:44ch;color:var(--muted);font-size:.9rem}
.empty form{margin:1rem 0 0;border:0;background:none;padding:0;display:inline-block}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);margin:0 0 1.5rem}
.tablewrap table{margin:0}
.tablewrap caption{text-align:left;padding:.85rem 1rem 0;color:var(--muted);font-size:.8rem}
td.right,th.right{text-align:right;font-variant-numeric:tabular-nums}
td.mono{font-family:var(--mono);font-size:.82rem}
tbody tr:last-child td{border-bottom:0}

/* The one thing the learner came back to do. A whole card is the target, so
   the tap area is the card and not a four-word link inside it. */
.resume{display:block;text-decoration:none;color:inherit;margin:0 0 2rem;
  border:1px solid var(--line-hi);border-left:3px solid var(--cyan);border-radius:12px;
  background:var(--panel);padding:1.25rem 1.4rem;
  transition:border-color 140ms ease,transform 140ms ease}
.resume:hover{border-color:var(--cyan);transform:translateY(-1px)}
.resume strong{display:block;font-size:1.15rem;color:var(--ink);margin:.35rem 0 .2rem}
.resume-path{display:block;font-size:.85rem;color:var(--cyan)}
.resume .meta{display:block;margin-top:.5rem}
@media (prefers-reduced-motion: reduce){.resume{transition:none}.resume:hover{transform:none}}

.cta{display:inline-block;text-decoration:none;font-weight:600;font-size:.88rem;
  background:var(--cyan);color:#04120f;padding:.6rem 1.1rem;border-radius:8px}
.cta:hover{background:var(--ink);color:#04120f}
.cta.quiet{background:transparent;color:var(--muted);border:1px solid var(--line-hi)}
.cta.quiet:hover{color:var(--ink);border-color:var(--cyan);background:transparent}

/* The row action drawer: the one piece of real interactivity that survives
   script-src 'none'. */
details.row-menu{margin-top:.6rem}
details.row-menu > summary{cursor:pointer;font-size:.9rem;letter-spacing:0;
  color:var(--cyan);list-style:none;padding:.65rem 0;min-height:44px}
details.row-menu > summary::-webkit-details-marker{display:none}
details.row-menu > summary::before{content:"+ ";color:var(--line-hi)}
details.row-menu[open] > summary::before{content:"- "}
details.row-menu > .menu-body{border-left:1px solid var(--line-hi);padding-left:.9rem;
  margin-top:.6rem}

/* Section anchors instead of tabs: one page, no router, no script. */
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;padding:0;list-style:none}
.toc a{display:inline-block;border:1px solid var(--line-hi);padding:.3rem .7rem;
  font-size:.72rem;letter-spacing:0;text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--ink);border-color:var(--cyan)}

.stamps{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none}
.stamp{border:1px solid var(--line-hi);border-left:2px solid var(--yellow);
  background:var(--panel);padding:.45rem .7rem;font-size:.78rem}
.stamp .meta{display:block;font-size:.66rem}

/* Server-rendered SVG. No chart library, no client script, no remote asset. */
svg.spark,svg.calendar{display:block;width:100%;height:auto}
svg.spark{max-height:3rem}
.calendar-key{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--muted)}
.calendar-key i{width:.6rem;height:.6rem;display:inline-block;border:1px solid var(--line)}
.calendar-key i.band-0{background:var(--panel)}
.calendar-key i.band-1{background:var(--cyan);opacity:.25}
.calendar-key i.band-2{background:var(--cyan);opacity:.5}
.calendar-key i.band-3{background:var(--cyan);opacity:.75}
.calendar-key i.band-4{background:var(--cyan)}

.flash{border-left:2px solid var(--green);padding:.6rem .8rem;background:var(--panel);
  margin:0 0 1.5rem;color:var(--ink)}
.flash.bad{border-left-color:var(--signal)}

/* Sign-in and the pages either side of it. One column, one decision per screen.
   Borrowed from nudgetable and the volleyball portal: a brand mark, a heading
   that says where you are, a sentence explaining what will happen, then the
   form -- with any alternate route below a divider rather than competing with
   the primary one. Their provider buttons, passkeys and two-step forms all
   need JavaScript; the arrangement does not. */
.auth{max-width:25rem;margin:0 auto;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;
  padding:2.5rem 2.25rem 2.25rem;
  box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.03)}
.auth h1{margin:0 0 .5rem;font-size:1.65rem}
.auth .lede{color:var(--muted);margin:0 0 1.75rem;font-size:.94rem}
/* Inside the card the form is the card's contents, not a panel of its own. */
.auth form{margin:0;border:0;background:transparent;padding:0}
/* The alternate route is one button; panel chrome around it would imply it is
   a second thing to fill in. */
.auth form.plain{border:0;background:transparent;padding:0;margin:0}
.auth .after{margin:1.25rem 0 0;font-size:.8rem;color:var(--muted)}

/* The alternate route sits under this, never beside the primary one. */
.divider{display:flex;align-items:center;gap:.9rem;margin:1.5rem 0;
  font-size:.66rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.divider::before,.divider::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi),transparent)}

button.block{width:100%;margin-top:1rem}
/* Outlined, so the filled button stays the obvious next step. */
button.provider{width:100%;margin-top:0;background:transparent;color:var(--ink);
  border:1px solid var(--line-hi)}
button.provider:not(:disabled):hover{border-color:var(--cyan);color:var(--cyan);background:transparent}

/* A ring rather than a bare outline: it reads on the panel background at the
   1px borders these inputs use. */
.auth input:focus-visible,.auth textarea:focus-visible{
  outline:2px solid var(--cyan);outline-offset:1px;
  box-shadow:0 0 0 3px rgba(69,230,212,.18)}

/* The code from the email, spaced so eight characters read as one block. */
input.code{font-family:var(--mono);font-size:1.15rem;letter-spacing:.38em;text-align:center}

.tutor-answer{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;margin-bottom:1.25rem}
.consent{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.85rem;margin-top:1rem;line-height:1.6}
.exercise-rubric ul li{border:0;background:none;padding:.25rem 0;margin:0}
.practice-panel{padding:1.5rem;border:1px solid var(--line-hi);
  border-top:3px solid var(--cyan);border-radius:12px;background:var(--panel)}
.practice-panel h2{font-size:1.25rem;margin:0 0 .75rem}
.practice-panel ol{padding-left:1.4rem;margin:1.25rem 0}
.practice-panel li{padding-left:.35rem;margin-bottom:1rem;color:var(--muted)}
.practice-panel li strong{color:var(--ink)}
.practice-panel li::marker{font-family:var(--sans);color:var(--cyan)}
.practice-panel blockquote{margin:1rem 0;padding:1rem;border-left:2px solid var(--cyan);
  background:var(--paper);color:var(--ink);line-height:1.75}
.practice-panel .meta{font-size:.8rem;line-height:1.6}
ul.queue > li[id]{scroll-margin-top:1.5rem}
@media (max-width:540px){
  .auth{padding:1.75rem 1.25rem}
  .appbar{gap:.8rem;margin-bottom:1.5rem}
  .mark{font-size:.9rem;letter-spacing:0;width:100%}
  .mainnav{flex-basis:100%}
  .mainnav a{min-height:44px;display:inline-flex;align-items:center}
  .account{margin-left:0;max-width:100%;flex-wrap:wrap}
  button.small{min-height:44px}
  .practice-panel{padding:1.1rem}
}
/* Repeated navigation can be bypassed without scripts on every account page. */
.skip-link{position:fixed;top:.75rem;left:1rem;z-index:100;padding:.75rem 1rem;
  background:var(--cyan);color:#04120f;border-radius:8px;transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0);color:#04120f}
#main-content{scroll-margin-top:1.5rem}
#main-content:focus{outline:none}
.portal-footer{display:flex;gap:1rem 1.5rem;flex-wrap:wrap;border-top:1px solid var(--line);
  margin-top:3rem;padding-top:1.25rem;font-size:.8rem}
.portal-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.portal-footer a:hover{color:var(--cyan)}
ul.queue > .lesson-step{padding:1.5rem 1.75rem;margin-bottom:1.5rem;border-radius:12px}
ul.queue .lesson-step h2,.path-card-title{font:600 1.15rem/1.5 var(--sans);margin:0 0 .75rem}
.step-status{display:flex;gap:.4rem;flex-wrap:wrap}
.lesson-step > .row-menu{border-top:1px solid var(--line);margin-top:.75rem;padding-top:.25rem}
.lesson-step > .actions{margin-block:1.25rem}
.practice-panel > p:last-child{margin-bottom:0}
@media (max-width:540px){ul.queue > .lesson-step{padding:1.25rem}}
.private-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75}
.note-selection{border:1px solid var(--line);margin:1.5rem 0;padding:1rem;min-width:0}
.note-selection legend{padding:0 .5rem;color:var(--ink)}
.note-option{padding:1rem 0;border-top:1px solid var(--line)}
.note-option summary{cursor:pointer;padding:.65rem 0;min-height:44px;color:var(--cyan)}
.project-evidence{padding:1.5rem;border:1px solid var(--line);border-radius:12px;margin-bottom:1.25rem}
.project-evidence p:last-child{margin:0}
/* Student workspace: persistent navigation and generous, bounded reading columns. */
body:has(.student-shell){padding:0;background-image:none}
.shell.student-shell{max-width:100rem;display:grid;grid-template-columns:14rem minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:0;min-height:100vh}
.student-shell::before{display:none}
.student-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.5rem 2rem;border-top:3px solid var(--signal);border-bottom:1px solid var(--line);background:var(--panel)}
.student-brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink);font-weight:650;line-height:1.35;flex-shrink:0}
.student-brand small{display:block;color:var(--muted);font-size:.8rem;font-weight:400;margin-top:.2rem}
.brand-mark{display:block;width:40px;height:40px;flex:0 0 40px}
.mark{display:inline-flex;align-items:center;gap:.65rem}
.library-orbit .brand-mark{width:56px;height:56px}
.student-header .account{margin:0;flex-wrap:wrap;justify-content:flex-end}
.student-navigation{grid-column:1;grid-row:2/4;padding:2rem 1rem;border-right:1px solid var(--line);background:var(--panel)}
.student-mobile-menu{display:none}
.student-navigation nav{display:grid;gap:.35rem}
.nav-label{font-size:.75rem;color:var(--muted);padding:.5rem .8rem}
.student-navigation a{display:flex;align-items:center;min-height:46px;padding:.65rem .8rem;border:1px solid transparent;border-radius:8px;color:var(--muted);text-decoration:none;font-size:.9rem}
.student-navigation a:hover{background:var(--panel-hi);color:var(--ink)}
.student-navigation a[aria-current]{background:var(--panel-hi);color:var(--cyan);border-color:var(--line);font-weight:600;box-shadow:inset 3px 0 var(--cyan)}
.student-navigation .student-support-nav{margin-top:2.5rem}
.workspace-note{padding:1.75rem .8rem 0;border-top:1px solid var(--line);margin-top:2rem;font-size:.85rem}
.student-shell > main{grid-column:2;min-width:0;padding:2.75rem clamp(1.5rem,3vw,3.5rem) 0}
.student-shell > .portal-footer{grid-column:2;margin:2rem clamp(1.5rem,3vw,3.5rem);padding-top:1.5rem}
.learner-content{max-width:54rem;margin-inline:auto}
.learner-content:has(.learning-dashboard),.learner-content:has(.resource-library){max-width:none}
.student-shell .pagehead{align-items:flex-start;margin-bottom:2rem;gap:1.5rem}
.student-shell .pagehead h1{margin-bottom:.5rem;font-size:clamp(1.8rem,3vw,2.3rem)}
.student-shell .pagehead .lede{font-size:1rem;margin:0;max-width:48ch}
.learning-dashboard{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(16rem,1fr);gap:2rem;align-items:start}
.learning-primary,.learning-sidebar{min-width:0}
.learning-primary > section{margin-bottom:2.5rem}
.session-card{padding:2rem;border:1px solid var(--line-hi);border-radius:16px;background:linear-gradient(125deg,var(--panel-hi),var(--panel));position:relative;overflow:hidden}
.session-card::before{content:"";position:absolute;top:0;left:2rem;width:4rem;height:3px;background:var(--cyan)}
.session-card .resume{padding:0;margin:0;border:0;background:none;border-radius:0}
.session-card .resume strong{font-size:1.7rem;margin-block:.75rem .4rem}
.session-card .resume .meta{margin-top:1rem}
.session-card > p{margin:1.75rem 0 0}
.session-card .empty{border:0;background:none;padding:0;margin:0}
.learning-progress{border-top:1px solid var(--line);padding-top:.5rem}
.learning-progress .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.learning-progress .stat{padding:1.1rem;border-top:1px solid var(--line);border-radius:10px}
.learning-progress .stat-value{font-size:1.8rem;margin-block:.4rem}
.learning-sidebar .practice-panel{border-top-width:1px;padding:1.5rem}
.learning-sidebar .practice-panel h2{font-size:1.05rem}
.learning-sidebar form{border:0;padding:0;background:none}
.learning-sidebar select{width:100%}
.plan-settings{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:1.5rem}
.plan-settings > summary{padding:1.25rem;cursor:pointer;font-weight:600;font-size:1rem}
.plan-settings > summary span{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:.5rem}
.plan-settings .practice-panel{border:0;margin:0;padding-top:0}
.student-toolbox{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:1.5rem}
.student-toolbox h2,.student-help h2{margin:0 0 .5rem;font-size:1.1rem}
.student-toolbox p,.student-help p{font-size:.9rem}
.student-toolbox a{display:block;padding:1rem 0;border-top:1px solid var(--line);text-decoration:none}
.student-toolbox a:last-child{padding-bottom:0}
.student-toolbox strong{display:block;font-size:.95rem}
.student-toolbox a span{display:block;color:var(--muted);font-size:.85rem;margin-top:.25rem}
.student-help{padding:1.5rem .25rem}
.student-help a{display:block;padding:.5rem 0;min-height:44px;font-size:.9rem}
.student-shell ul.queue > li{border-radius:12px;border-top-color:var(--line-hi);padding:1.5rem}
.student-shell ul.queue > li.done{border-top-color:var(--green)}
.library-intro{display:grid;grid-template-columns:minmax(0,1fr) 10rem;gap:2rem;align-items:center;padding:2rem;border:1px solid var(--line-hi);border-radius:16px;background:var(--panel)}
.library-intro h2{font-size:1.65rem;margin:.5rem 0 .75rem}
.library-orbit{width:9rem;height:9rem;border:1px solid var(--line-hi);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1rem var(--panel),0 0 0 calc(1rem + 1px) var(--line);background:radial-gradient(circle,var(--panel-hi),var(--panel))}
.library-orbit span{display:grid;place-items:center;width:4rem;height:4rem;border:1px solid var(--cyan);border-radius:16px;color:var(--cyan);font-size:1.4rem}
.library-jump{margin-bottom:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.library-jump a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem}
.resource-section{scroll-margin-top:2rem;margin-bottom:2.5rem}
.resource-section > h2{font-size:1.35rem;margin-bottom:.35rem}
.resource-grid{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.resource-grid li{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.resource-grid li:hover{border-color:var(--line-hi);background:var(--panel-hi)}
.resource-tag{font-size:.8rem;color:var(--muted);margin-bottom:.85rem}
.resource-grid h3{font-size:1.15rem;margin-bottom:.65rem}
.resource-grid a{text-decoration:none;color:var(--ink)}
.resource-grid a::after{content:"";position:absolute;inset:0;border-radius:14px}
.resource-grid li:focus-within{outline:2px solid var(--cyan);outline-offset:3px}
.resource-grid p{font-size:.95rem;margin-bottom:1.5rem}
.resource-kind{font-size:.8rem;color:var(--cyan);margin-top:auto}
.library-support{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,1fr);gap:2rem;padding:2rem;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.library-support h2{margin:0 0 .75rem}
.library-support ul{list-style:none;margin:0;padding:0}
.library-support a{display:block;padding:.5rem 0;min-height:44px}
@media (max-width:1150px){.learning-dashboard{grid-template-columns:minmax(0,1fr)}.learning-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start}.learning-sidebar .plan-settings{margin-top:0}}
@media (max-width:800px){
  .shell.student-shell{display:block}
  .student-header{padding:1.25rem;flex-wrap:wrap;gap:1rem}
  .student-header .account{justify-content:flex-start;gap:.75rem}
  .student-navigation{border-right:0;border-bottom:1px solid var(--line);padding:.75rem 1.25rem}
  .student-desktop-menu{display:none}
  .student-mobile-menu{display:block}
  .student-mobile-menu > summary{cursor:pointer;min-height:44px;padding:.5rem;color:var(--ink);font-weight:600}
  .student-mobile-menu > summary span{font-weight:400;color:var(--muted);margin-left:.75rem;font-size:.85rem}
  .student-mobile-menu[open] > summary{margin-bottom:.75rem}
  .student-navigation nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem}
  .student-navigation a{font-size:.85rem;padding:.65rem .5rem}
  .nav-label,.workspace-note{display:none}
  .student-navigation .student-support-nav{margin-top:.65rem;border-top:1px solid var(--line);padding-top:.65rem}
  .student-shell > main{padding:2rem 1.25rem 0}
  .student-shell > .portal-footer{margin-inline:1.25rem}
}
@media (max-width:540px){
  .student-header .who{max-width:15rem}
  .learning-sidebar,.resource-grid,.library-support{grid-template-columns:minmax(0,1fr)}
  .student-shell .pagehead{flex-direction:column}
  .session-card,.library-intro,.library-support{padding:1.5rem}
  .library-intro{grid-template-columns:minmax(0,1fr)}
  .library-orbit{display:none}
  .student-shell ul.queue > li{padding:1.25rem}
}
@media (prefers-reduced-motion: no-preference){
  .shell::before{animation:flicker 6s ease-in-out 1}
  @keyframes flicker{0%,97%,100%{opacity:1}98%{opacity:.55}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* Settings keep related fields together and the save action on its own row. */
.settings-form{padding:1.75rem;border-left-width:1px}
.form-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.form-field{min-width:0}
.form-field label{color:var(--ink);font-weight:600}
.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.form-actions button{margin:0}
.settings-form .form-hint{margin:1.25rem 0 0;font-size:.9em;max-width:65ch}
@media (max-width:640px){.form-fields{grid-template-columns:minmax(0,1fr)}.settings-form{padding:1.25rem}.settings-form .form-actions button{width:100%}}

/* User-selected reading preferences never alter artwork or animation. */
body.reading-light{color-scheme:light;--paper:#f6f7f9;--panel:#fff;--panel-hi:#e8edf0;--ink:#172b34;--muted:#465862;--line:#bac8ce;--line-hi:#667b86;--cyan:#006b62;--signal:#b52c24;--yellow:#805600;--green:#216b39;background-image:none}
:is(.reading-light,.reading-prism) button:not(.quiet):not(.danger):not(:disabled),:is(.reading-light,.reading-prism) .cta:not(.quiet){background:var(--cyan);color:#fff}
:is(.reading-light,.reading-prism) button:not(.quiet):not(.danger):not(:disabled):hover,:is(.reading-light,.reading-prism) .cta:not(.quiet):hover{background:#174b48;color:#fff}
body.reading-large{font-size:20px}
.reading-large p,.reading-large label,.reading-large summary,.reading-large select,.reading-large input,.reading-large textarea,.reading-large button{font-size:1em}
.reading-large .meta{font-size:.95em}
.session-stages{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 2rem}
.session-stages a{padding:.6rem .9rem;border:1px solid var(--line);border-radius:8px;min-height:44px}
.session-stages a[aria-current]{border-color:var(--cyan);font-weight:600}
.field-error{color:var(--signal);font-weight:600}
button:disabled,select:disabled{color:var(--muted);background-color:var(--panel-hi);border:1px solid var(--line-hi);transform:none}
fieldset{min-width:0;border:1px solid var(--line);padding:1rem}

/* Opt-in palettes: retain the shared layout, typography, and brand artwork. */
body.reading-accessible{color-scheme:dark;--paper:#080a0c;--panel:#101418;--panel-hi:#1b232b;--ink:#ffffff;--muted:#d0d9e2;--line:#8093a3;--line-hi:#b4c4d2;--cyan:#82c5ff;--signal:#ffd875;--yellow:#ffd875;--green:#82c5ff;--cyan-text:#82c5ff;background-image:none}
body.reading-matrix{color-scheme:dark;--paper:#050a07;--panel:#0c1710;--panel-hi:#172a1d;--ink:#e4f5e8;--muted:#b1c6b7;--line:#3e5845;--line-hi:#718e78;--cyan:#7cf2a2;--signal:#ffb38c;--yellow:#ecd483;--green:#7cf2a2;--cyan-text:#7cf2a2;background-image:none}
body.reading-ocean{color-scheme:dark;--paper:#08131e;--panel:#0e2030;--panel-hi:#193348;--ink:#e7f3ff;--muted:#b1c7da;--line:#3f5c72;--line-hi:#718fa6;--cyan:#79cfff;--signal:#ffa99e;--yellow:#f5d188;--green:#8ee0ba;--cyan-text:#79cfff;background-image:none}
body.reading-aurora{color-scheme:dark;--paper:#140e21;--panel:#211830;--panel-hi:#332644;--ink:#f3eafa;--muted:#c9b9dc;--line:#615072;--line-hi:#9981ac;--cyan:#d0adff;--signal:#ffb0c4;--yellow:#f5d38b;--green:#9cdec9;--cyan-text:#d0adff;background-image:none}
body.reading-sunset{color-scheme:dark;--paper:#1c1115;--panel:#2b1b21;--panel-hi:#402b33;--ink:#fff0e8;--muted:#d9beb7;--line:#76565b;--line-hi:#ae8589;--cyan:#ffbd96;--signal:#ffabb6;--yellow:#f8d38b;--green:#a7dfbf;--cyan-text:#ffbd96;background-image:none}
body.reading-accessible a{text-decoration:underline;text-underline-offset:.2em}
body.reading-accessible :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--yellow);outline-offset:4px}

/* Prism: a bright, multicolor workspace with dark reading text. */
body.reading-prism{color-scheme:light;--paper:#faf7ff;--panel:#fff;--panel-hi:#e7ddf6;--ink:#28193f;--muted:#51466a;--line:#cec3e6;--line-hi:#84749d;--cyan:#6333bf;--cyan-text:#6333bf;--signal:#a72766;--yellow:#765100;--green:#116747;--prism-lilac:#eee5ff;--prism-rose:#ffe7ef;--prism-mint:#dbf5ed;--prism-sky:#e0efff;background-image:none}

.reading-prism .student-header{border-image:linear-gradient(90deg,#6333bf,#b12667,#195bb5,#146953) 1}
.reading-prism .student-navigation{background:linear-gradient(160deg,var(--prism-lilac),var(--prism-sky))}
.reading-prism :is(.session-card,.library-intro){background:linear-gradient(120deg,var(--prism-lilac),var(--prism-rose));border-color:#a786ce}
.reading-prism .session-card::before{width:calc(100% - 4rem);background:linear-gradient(90deg,#6333bf,#b12667,#195bb5,#146953)}
.reading-prism .student-toolbox{background:var(--prism-mint)}
.reading-prism .plan-settings{background:var(--prism-sky)}
.reading-prism button:not(.quiet):not(.danger):not(:disabled):hover,.reading-prism .cta:not(.quiet):hover{background:#4820a0;color:#fff}
.reading-prism :is(.stat,.resource-grid > li){--tile-surface:var(--prism-lilac);--tile-accent:#6333bf;background:var(--tile-surface);border-top:4px solid var(--tile-accent)}
.reading-prism :is(.stat,.resource-grid > li):nth-child(4n+2){--tile-surface:var(--prism-rose);--tile-accent:#a72766}
.reading-prism :is(.stat,.resource-grid > li):nth-child(4n+3){--tile-surface:var(--prism-mint);--tile-accent:#116747}
.reading-prism :is(.stat,.resource-grid > li):nth-child(4n){--tile-surface:var(--prism-sky);--tile-accent:#195bb5}

/* Administrator workspace: task navigation, clear queues, and room for tables. */
body:has(.admin-shell){padding:0;background-image:none}
.shell.admin-shell{max-width:104rem;min-height:100vh;display:grid;grid-template-columns:14rem minmax(0,1fr);grid-template-rows:auto 1fr auto}
.admin-shell::before{display:none}
.admin-navigation nav+nav{margin-top:1.35rem}
.admin-shell > main{grid-column:2;min-width:0;padding:2.75rem clamp(1.5rem,3vw,3.5rem) 0}
.admin-shell > .portal-footer{grid-column:2;margin:2rem clamp(1.5rem,3vw,3.5rem);padding-top:1.5rem}
.admin-content{min-width:0}
.admin-content h1{font-size:clamp(1.8rem,3vw,2.3rem);margin-bottom:.75rem}
.admin-content > p{max-width:72ch}
.admin-content .pagehead{align-items:flex-start;gap:1.5rem;margin-bottom:2rem}
.admin-content .pagehead .lede{font-size:1rem;max-width:52ch}
.admin-content h2{margin-top:2rem;margin-bottom:1rem}
.admin-priorities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.admin-priority{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;padding:1.5rem;background:var(--panel);border:1px solid var(--line-hi);border-radius:14px;text-decoration:none}
.admin-priority strong{font-size:1.1rem;color:var(--ink)}
.admin-priority > span:last-child{font-size:.9rem;color:var(--muted)}
.admin-priority:hover{background:var(--panel-hi);border-color:var(--cyan)}
.admin-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.admin-content .stat{padding:1.25rem;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.admin-content .stat-value{font-size:1.9rem}
.admin-dashboard-columns{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(17rem,1fr);gap:2rem;align-items:start}
.admin-trends{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.admin-toolkit{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:.5rem 1.5rem}
.admin-toolkit a{display:block;padding:1.2rem 0;text-decoration:none}
.admin-toolkit a+a{border-top:1px solid var(--line)}
.admin-toolkit strong,.admin-toolkit span{display:block}
.admin-toolkit span{color:var(--muted);font-size:.9rem;margin-top:.3rem}
.admin-content .wrap{border:1px solid var(--line);border-radius:12px;margin:1.25rem 0 2rem}
.admin-content .wrap table{margin:0}
.admin-content th{background:var(--panel-hi);color:var(--ink);font-weight:600}
.admin-content tbody tr:hover{background:var(--panel-hi)}
.admin-content td,.admin-content th{padding:1rem;vertical-align:top}
.admin-content > form,.admin-content > .queue{max-width:72rem}
.admin-content .queue > li{padding:1.75rem;margin-bottom:1.25rem}
.admin-content .queue form{max-width:56rem}
.admin-content .application-card > p:first-child strong,.admin-content .application-card > p:first-child .meta{display:block}
.admin-history{margin-top:2rem;border-top:1px solid var(--line);padding-top:1rem}
.admin-history > summary{cursor:pointer;min-height:44px;padding:.5rem 0;color:var(--cyan);font-weight:600}
.reading-prism .admin-priority:nth-child(3n+1){background:var(--prism-lilac)}
.reading-prism .admin-priority:nth-child(3n+2){background:var(--prism-mint)}
.reading-prism .admin-priority:nth-child(3n){background:var(--prism-rose)}
.reading-prism .admin-toolkit{background:var(--prism-sky)}
@media(max-width:1150px){.admin-priorities{grid-template-columns:minmax(0,1fr)}.admin-dashboard-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:800px){.shell.admin-shell{display:block}.admin-shell > main{padding:2rem 1.25rem 0}.admin-shell > .portal-footer{margin-inline:1.25rem}.admin-navigation nav+nav{margin-top:.75rem}}
@media(max-width:540px){.admin-summary,.admin-trends{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-content .pagehead{flex-direction:column}.admin-content .queue > li{padding:1.25rem}.admin-navigation nav{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-content .stat{padding:1rem}.admin-content .stat-value{font-size:1.6rem}}