/*
  CuratedPrep Student Portal styles
  1. Mobile stacks login/library/admin controls in one column; desktop uses centered login cards and two-column admin forms.
  2. Spacing follows the site 8px rhythm with 44px minimum touch targets and compact library rows.
  3. Color tokens come from /assets/styles.css: paper, ivory, ink, trust/navy, green and gold.
  4. Focal point: secure access to a private student library without adding public sign-up.
*/

.portal-top{
  position:sticky;top:0;z-index:30;min-height:72px;height:auto;
  background:rgba(244,239,230,.9);backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.portal-top-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.portal-app .portal-top-inner{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
  align-items:center;
}
.portal-top .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.portal-id{display:flex;align-items:center;gap:18px;min-width:0}
.portal-id .who{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw;
}
.portal-id .who b{color:var(--ink);font-weight:500}
.portal-signout{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);border:1px solid var(--strong-line);
  border-radius:2px;min-height:44px;display:inline-grid;place-items:center;
  padding:10px 16px;transition:all .2s var(--ease);white-space:nowrap;
}
.portal-signout:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- Login ---------- */
.portal-auth{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:48px 0 80px}
.portal-auth>.shell{width:100%;max-width:516px;padding-inline:18px;margin-inline:auto}
.auth-wrap{width:100%;text-align:center}
.auth-mark{
  width:54px;height:54px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);font-family:"Source Serif 4",serif;font-size:30px;
  margin:0 auto 22px;
}
.auth-wrap h1{font-size:clamp(30px,5vw,40px);line-height:1.08;margin-bottom:10px}
.auth-wrap h1 span{color:var(--gold);font-style:italic}
.auth-sub{color:var(--muted);font-size:15px;line-height:1.65;max-width:40ch;margin:0 auto 30px}

.auth-card{
  width:100%;
  background:var(--ivory);border:1px solid rgba(23,23,19,.16);border-radius:10px;
  padding:30px 28px;text-align:left;box-shadow:0 30px 90px -54px rgba(23,23,19,.85);
}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:24px;
  background:var(--paper-deep);border-radius:8px;padding:5px}
.auth-tab{
  appearance:none;border:0;background:transparent;cursor:pointer;border-radius:6px;
  padding:11px 10px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);transition:all .2s var(--ease);
}
.auth-tab.is-active{background:var(--ivory);color:var(--ink);box-shadow:0 6px 16px -12px rgba(23,23,19,.7)}

.auth-form{display:none;flex-direction:column;gap:16px}
.auth-form.is-active{display:flex}
.portal .field{display:flex;flex-direction:column;gap:7px}
.portal label{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);
}
/*
  Layout: login/admin forms stack on mobile and stay compact in the centered card on desktop.
  Spacing/type: existing 8px rhythm with 52px inputs and inherited readable body type.
  Colors: white fields, dark ink text, gold focus ring.
  Focal point: clear, legible credential entry.
*/
.portal input{
  width:100%;height:52px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:6px;padding:0 14px;font:inherit;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
.portal input::placeholder{color:rgba(23,23,19,.52);-webkit-text-fill-color:rgba(23,23,19,.52)}
.portal input:-webkit-autofill,
.portal input:-webkit-autofill:hover,
.portal input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-in-out 0s;
}
.portal input:focus{border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(196,164,107,.18)}
.auth-form .button{width:100%;margin-top:6px;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.auth-form .button:hover{background:var(--green);border-color:var(--green)}
.auth-hint{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:2px}
.auth-status{
  display:none;margin-top:4px;padding:12px 14px;border-radius:6px;font-size:13.5px;line-height:1.55;
  border:1px solid rgba(133,97,36,.35);background:rgba(133,97,36,.08);color:var(--ink);
}
.auth-status.show{display:block}
.auth-back{display:inline-block;margin-top:24px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.auth-back:hover{color:var(--ink)}

/* ---------- Student login redesign ----------
  Layout: mobile shows a compact doodle above one centered form; desktop splits a warm welcome/doodle stage and the sign-in card.
  Spacing/type: 8px rhythm, clamp() headings, 52px inputs, 44px+ buttons and links.
  Colors: CuratedPrep paper/ivory, trust navy, muted stone, restrained gold accent.
  Focal point: the private library sign-in, softened by a playful hide-and-seek doodle.
*/
.student-login{
  --student-navy:#12324a;
  --student-blue:#eaf1f5;
  --student-card:#fffdf8;
  --student-gold:#a5711d;
  background:
    radial-gradient(circle at 18% 18%, rgba(234,241,245,.85), transparent 30%),
    radial-gradient(circle at 86% 76%, rgba(196,164,107,.17), transparent 28%),
    var(--paper);
}
.student-login .portal-top{
  background:rgba(250,247,239,.88);
}
.student-login-auth{
  min-height:calc(100vh - 72px);
  display:grid;
  align-items:center;
  padding:30px 0 54px;
}
.student-login-shell{
  width:min(1180px,calc(100% - 32px));
  margin-inline:auto;
  display:grid;
  gap:28px;
}
.student-login-copy{
  position:relative;
  text-align:center;
  display:grid;
  justify-items:center;
  gap:14px;
}
.student-login-eyebrow{
  font-family:"IBM Plex Mono",monospace;
  color:var(--student-gold);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.student-login-copy h1{
  font-size:clamp(34px,11vw,58px);
  line-height:.95;
  max-width:9.4em;
  margin:0;
  color:var(--student-navy);
}
.student-login-copy p{
  color:var(--muted);
  font-size:clamp(15px,3.8vw,18px);
  line-height:1.58;
  max-width:34ch;
  margin:0;
}
.student-login-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:4px;
}
.student-login-chips span{
  border:1px solid rgba(18,50,74,.18);
  color:var(--student-navy);
  background:rgba(255,253,248,.72);
  border-radius:999px;
  padding:8px 12px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.student-login-panel{
  position:relative;
  width:100%;
  max-width:470px;
  margin-inline:auto;
}
.student-auth-card{
  position:relative;
  overflow:visible;
  background:rgba(255,253,248,.92);
  border-radius:18px;
  border-color:rgba(18,50,74,.16);
  box-shadow:0 30px 90px -56px rgba(18,50,74,.95);
}
.student-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.student-card-head .auth-mark{
  width:44px;
  height:44px;
  font-size:25px;
  margin:0;
  flex:none;
  background:var(--student-card);
}
.student-card-head h2{
  font-family:"Source Serif 4",serif;
  color:var(--student-navy);
  font-size:clamp(26px,7vw,34px);
  line-height:1;
  margin:0 0 4px;
}
.student-card-head p{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  margin:0;
}
.student-login .auth-form .button.student-login-button{
  position:relative;
  z-index:2;
  height:56px;
  overflow:hidden;
  background:var(--student-navy);
  border-color:var(--student-navy);
  border-radius:8px;
}
.student-login .auth-form .button.student-login-button:hover{
  background:#0f2b40;
  border-color:#0f2b40;
}
.login-button-stage{
  position:relative;
  margin-top:6px;
  padding-top:22px;
  overflow:visible;
}
.login-button-stage .student-login-button{
  margin-top:0;
}
.student-login .auth-back{
  display:block;
  text-align:center;
  margin-top:18px;
}

@media (min-width:768px){
  .student-login-auth{padding:42px 0 70px}
  .student-login-shell{
    grid-template-columns:minmax(0,1.05fr) minmax(410px,.78fr);
    align-items:center;
    gap:clamp(42px,7vw,90px);
  }
  .student-login-copy{
    text-align:left;
    justify-items:start;
  }
  .student-login-copy h1{font-size:clamp(64px,7.4vw,104px);max-width:8.4em}
  .student-login-copy p{font-size:19px;max-width:38ch}
  .student-login-chips{justify-content:flex-start}
}
@media (min-width:1180px){
  .student-login-shell{width:min(1240px,calc(100% - 64px))}
  .student-login-panel{max-width:520px}
  .student-auth-card{padding:34px 34px 32px}
}
@media (max-width:520px){
  .student-login-auth{align-items:start;padding-top:22px}
  .student-login-shell{width:min(100% - 28px,430px);gap:18px}
  .student-auth-card{padding:22px 18px}
  .student-card-head{align-items:flex-start}
  .student-card-head .auth-mark{display:none}
  .student-login-panel{max-width:430px}
}
@media (prefers-reduced-motion:reduce){
  .login-button-stage{padding-top:16px}
}

/* ---------- File browser ---------- */
.library{padding:34px 0 90px}
.library-head{margin-bottom:22px}
.library-head .eyebrow{margin-bottom:12px}
.library-head h1{font-size:clamp(28px,4vw,42px);line-height:1.1}
.library-head p{color:var(--muted);font-size:15px;margin-top:8px;max-width:60ch}

.library-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px;
}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;min-width:0}
.crumbs button{
  appearance:none;background:none;border:0;cursor:pointer;color:var(--muted);
  font:inherit;padding:4px 2px;border-radius:4px;transition:color .15s var(--ease);
}
.crumbs button:hover{color:var(--ink)}
.crumbs .crumb-current{color:var(--ink);font-weight:600;cursor:default}
.crumbs .sep{color:var(--strong-line);user-select:none}

.library-search{position:relative;flex:0 1 280px}
.library-search input{
  width:100%;height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:6px;padding:0 14px 0 38px;font:inherit;outline:none;
}
.library-search input:focus{border-color:var(--gold-soft)}
.library-search .fa-magnifying-glass{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;
}

.library-section-label{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin:26px 0 14px;
}
.library-section-label:first-child{margin-top:0}

.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.folder-card{
  display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:18px 18px;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
  appearance:none;font:inherit;color:inherit;width:100%;
}
.folder-card:hover{transform:translateY(-2px);border-color:var(--gold-soft);box-shadow:0 18px 40px -30px rgba(23,23,19,.7)}
.folder-card .fa-folder{color:var(--gold);font-size:22px;flex:none}
.folder-card .f-name{font-family:"Source Serif 4",Georgia,serif;font-size:16px;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.file-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--ivory)}
.file-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.file-row:last-child{border-bottom:0}
.file-row .ico{width:30px;flex:none;text-align:center;font-size:18px}
.file-row .ico .fa-file-pdf{color:#9b2c2c}
.file-row .ico .fa-file-lines{color:#2b5c8a}
.file-row .ico .fa-file-image{color:#3f7a52}
.file-row .ico .fa-file{color:var(--muted)}
.file-meta{min-width:0;flex:1}
.file-meta .n{font-size:14.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta .s{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.04em;color:var(--muted);margin-top:3px}
.file-actions{display:flex;gap:8px;flex:none}
.file-btn{
  appearance:none;cursor:pointer;text-decoration:none;border:1px solid var(--strong-line);
  background:transparent;color:var(--ink);border-radius:4px;padding:8px 12px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  transition:all .18s var(--ease);
}
.file-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.file-btn.ghost:hover{background:var(--green);border-color:var(--green);color:var(--paper)}

.library-state{padding:60px 20px;text-align:center;color:var(--muted)}
.library-state .fa-solid{font-size:26px;color:var(--gold-soft);margin-bottom:14px}
.library-state p{font-size:14.5px;line-height:1.6;max-width:40ch;margin:0 auto}
.spinner{
  width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--gold);
  border-radius:50%;margin:0 auto 16px;animation:cp-spin .8s linear infinite;
}
@keyframes cp-spin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .portal-id .who{display:none}
  .library-search{flex:1 1 100%}
  .file-actions .file-btn{padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){
  .folder-card,.file-btn,.portal-signout{transition:none}
  .spinner{animation:none}
}

/* ---------- Student portal premium refresh ----------
  Layout: login is single-column on mobile and two-panel on desktop; library uses a compact hero + desk card + file panel.
  Spacing/type: 8px rhythm, clamp() headings, 52px inputs, 44px+ touch targets, compact folder cards.
  Colors: paper/ivory base, trust navy focal surfaces, brass accent, warm stone dividers.
  Focal point: student action - open the private library, then browse folders.
*/
.student-login{
  --portal-navy:#11324a;
  --portal-navy-2:#16445f;
  --portal-ivory:#fffdf8;
  --portal-paper:#f6f1e8;
  --portal-gold:#9b6a1c;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.72), transparent 30%),
    radial-gradient(circle at 86% 84%, rgba(155,106,28,.12), transparent 26%),
    var(--portal-paper);
}
.student-login .portal-top,
.portal-app .portal-top{
  min-height:72px;
  height:auto;
}
.student-login .portal-top{
  background:rgba(250,247,239,.9);
}
.student-login-auth{
  min-height:calc(100vh - 72px);
  display:grid;
  align-items:center;
  padding:28px 0 56px;
}
.student-login-shell{
  width:min(100% - 32px,1180px);
  margin-inline:auto;
  display:grid;
  gap:24px;
}
.student-login-copy{
  text-align:center;
  display:grid;
  justify-items:center;
  gap:14px;
}
.student-login-eyebrow{
  font-family:"IBM Plex Mono",monospace;
  color:var(--portal-gold);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.student-login-copy h1{
  color:var(--portal-navy);
  font-size:clamp(36px,10vw,62px);
  line-height:.96;
  letter-spacing:0;
  max-width:10em;
  margin:0;
}
.student-login-copy p{
  color:var(--muted);
  font-size:clamp(15px,3.9vw,18px);
  line-height:1.62;
  max-width:38ch;
  margin:0;
}
.student-login-ledger{
  width:100%;
  max-width:560px;
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr;
  border:1px solid rgba(17,50,74,.15);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,253,248,.68);
  box-shadow:0 24px 70px -58px rgba(17,50,74,.85);
}
.student-login-ledger div{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:4px 12px;
  align-items:center;
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid rgba(17,50,74,.12);
}
.student-login-ledger div:last-child{border-bottom:0}
.student-login-ledger span{
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(17,50,74,.08);
  color:var(--portal-gold);
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.06em;
}
.student-login-ledger strong{
  color:var(--portal-navy);
  font-size:15px;
  line-height:1.2;
}
.student-login-ledger small{
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
}
.student-login-panel{
  position:relative;
  width:100%;
  max-width:480px;
  margin-inline:auto;
}
.student-auth-card{
  position:relative;
  min-height:0;
  background:rgba(255,253,248,.94);
  border:1px solid rgba(17,50,74,.16);
  border-radius:16px;
  padding:24px 20px;
  box-shadow:0 30px 90px -58px rgba(17,50,74,.95);
}
.student-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.student-card-head .auth-mark{
  width:44px;
  height:44px;
  font-size:25px;
  margin:0;
  flex:none;
  background:var(--portal-ivory);
}
.student-card-head h2{
  font-family:"Source Serif 4",serif;
  color:var(--portal-navy);
  font-size:clamp(27px,7vw,36px);
  line-height:1;
  margin:0 0 4px;
}
.student-card-head p{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  margin:0;
}
.student-login .auth-form .button.student-login-button{
  height:56px;
  background:var(--portal-navy);
  border-color:var(--portal-navy);
  color:var(--paper);
  border-radius:8px;
}
.student-login .auth-form .button.student-login-button:hover,
.student-login .auth-form .button.student-login-button:focus-visible{
  background:var(--portal-navy-2);
  border-color:var(--portal-navy-2);
}
.student-login .auth-back{
  display:block;
  text-align:center;
  margin-top:18px;
}
.student-login #cp-doodle{
  color:var(--portal-navy);
}

.portal-app{
  background:
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.7), transparent 28%),
    linear-gradient(180deg, rgba(255,253,248,.34), transparent 36%),
    var(--paper);
}
.portal-id-stack{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  align-self:center;
}
.portal-clock{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:7px 15px;
  color:var(--ink);
  border:1px solid rgba(17,50,74,.16);
  border-radius:999px;
  background:rgba(255,253,248,.64);
}
.clock-meta{
  display:flex;
  align-items:baseline;
  gap:5px;
  text-align:center;
}
.clock-meta strong{
  font-family:"IBM Plex Mono",monospace;
  font-size:14px;
  letter-spacing:.04em;
  color:var(--ink);
  line-height:1;
}
.clock-meta small{
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.clock-zone{
  font-family:"IBM Plex Mono",monospace;
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.portal-app .library{
  padding:34px 0 86px;
}
.library-hero{
  display:grid;
  gap:22px;
  /* `end` bottom-aligned both columns, and a grid row is sized by its taller
     item. The card is 333px and the greeting 182px, so the greeting was pushed
     down by exactly the 151px difference. `start`, not simply absent: the
     initial value behaves as `stretch`, and between 740 and 767px the greeting
     is the TALLER item, so stretch would inflate the ivory card instead. */
  align-items:start;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.portal-app .library-head{
  margin-bottom:0;
}
.portal-app .library-head h1{
  color:var(--ink);
  font-size:clamp(34px,7.4vw,66px);
  line-height:1.02;
  /* was max-width:9.5em, which is 627px at the 66px cap - narrower than the
     864px column it sits in, so a hole opened on the right at every width. */
  max-width:none;
  text-wrap:wrap;
  text-wrap:pretty;
}
.portal-app .library-head p{
  font-size:clamp(15px,3.7vw,18px);
  max-width:52ch;
}
.library-focus-card{
  border:1px solid rgba(17,50,74,.14);
  border-radius:14px;
  background:rgba(255,253,248,.72);
  padding:20px;
  box-shadow:0 28px 70px -62px rgba(17,50,74,.9);
}
.library-focus-label{
  display:block;
  margin-bottom:10px;
  font-family:"IBM Plex Mono",monospace;
  color:var(--gold);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.library-focus-card h2{
  font-family:"Source Serif 4",serif;
  color:#11324a;
  font-size:clamp(24px,5vw,34px);
  line-height:1.04;
  margin:0 0 8px;
  /* styles.css sets a global h2{max-width:16.5ch;text-wrap:balance}. Inside a
     420px card that breaks the line early and makes the card taller than it
     needs to be, which is half of what created the band above. */
  max-width:none;
  text-wrap:wrap;
  text-wrap:pretty;
}
.library-focus-card p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
  margin:0 0 16px;
}
/* Two counts and one action. They were three identical boxes, which made the
   calculator look like a statistic and the statistics look like buttons. The
   numbers now sit unboxed, divided by a hairline; the calculator is a button. */
.library-focus-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-bottom:14px;
  border-top:1px solid rgba(17,50,74,.12);
  padding-top:14px;
}
.library-focus-grid div{
  min-width:0;
  padding:0 16px;
}
.library-focus-grid div:first-child{padding-left:0}
.library-focus-grid div + div{border-left:1px solid rgba(17,50,74,.12)}
.library-focus-grid strong{
  display:block;
  color:#11324a;
  font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;
  font-size:clamp(24px,3vw,30px);
  line-height:1;
  letter-spacing:-.03em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.library-focus-grid span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.2;
}
.portal-app .library-bar{
  margin-bottom:16px;
  border-top:0;
  padding:16px 0;
}
.library-panel{
  border:1px solid rgba(17,50,74,.1);
  border-radius:14px;
  background:rgba(255,253,248,.52);
  padding:18px;
  min-height:220px;
}
.portal-app .folder-grid{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}
.portal-app .folder-card{
  min-height:78px;
  background:rgba(255,253,248,.9);
}
.portal-app .file-list{
  background:rgba(255,253,248,.9);
}

@media (min-width:740px){
  .student-login-auth{padding:44px 0 72px}
  .student-login-shell{
    grid-template-columns:minmax(0,1fr) minmax(420px,.78fr);
    gap:clamp(44px,7vw,92px);
    align-items:center;
  }
  .student-login-copy{
    text-align:left;
    justify-items:start;
  }
  .student-login-copy h1{
    font-size:clamp(64px,7.6vw,104px);
    max-width:8.6em;
  }
  .student-login-copy p{
    font-size:19px;
    max-width:39ch;
  }
  .student-login-ledger{
    grid-template-columns:repeat(3,1fr);
    max-width:620px;
  }
  .student-login-ledger div{
    display:block;
    border-bottom:0;
    border-right:1px solid rgba(17,50,74,.12);
    padding:16px;
  }
  .student-login-ledger div:last-child{border-right:0}
  .student-login-ledger span{margin-bottom:18px}
  .student-login-ledger small{display:block;margin-top:6px}
  .student-auth-card{padding:34px}
  .library-hero{
    /* 34% resolves against .shell (min(100% - 48px, 1320px)), not the
       viewport, so the card scales with the measure instead of the window. */
    grid-template-columns:minmax(0,1fr) minmax(300px,34%);
    gap:36px;
    padding-bottom:30px;
  }
}
@media (min-width:1180px){
  .student-login-shell{width:min(1240px,calc(100% - 64px))}
  .student-login-panel{max-width:520px}
  .portal-app .library{padding-top:46px}
  .library-panel{padding:22px}
}
@media (max-width:640px){
  .portal-app .portal-top{
    min-height:112px;
  }
  .portal-app .portal-top-inner{
    min-height:112px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:9px;
    padding-top:10px;
    padding-bottom:11px;
  }
  .portal-app .portal-top .brand{
    min-width:0;
  }
  .portal-app .portal-top .wordmark{
    font-size:clamp(24px,7vw,31px);
  }
  .student-login-auth{align-items:start;padding-top:24px}
  .student-login-shell{width:min(100% - 28px,430px);gap:20px}
  .student-card-head .auth-mark{display:none}
  .student-auth-card{padding:22px 18px}
  .portal-id-stack{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    gap:8px;
  }
  .portal-id .who{display:none}
  .portal-signout{
    min-height:44px;
    padding:9px 12px;
    font-size:9.5px;
    letter-spacing:.1em;
  }
  .portal-clock{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
    align-self:center;
    min-height:36px;
    padding:6px 12px;
    margin-top:0;
  }
  .clock-meta strong{
    font-size:13px;
  }
  .clock-meta small{
    font-size:8px;
  }
  .clock-zone{display:none}
  .portal-app .library-head,
  .portal-app .library-focus-card{
    text-align:left;
  }
  .library-focus-grid{
    grid-template-columns:1fr 1fr;
  }
  .library-panel{
    padding:14px;
    min-height:180px;
  }
}

/* ---------- CAPTCHA on auth forms ---------- */
.captcha-row{display:flex;justify-content:center;margin-top:2px}
.captcha-math input{max-width:160px}

/* ---------- Admin console ---------- */
.admin-main{padding-top:30px}
.admin-notice{
  border-radius:8px;padding:13px 16px;font-size:14px;line-height:1.5;margin-bottom:18px;
  border:1px solid var(--gold-soft);background:rgba(133,97,36,.08);color:var(--ink);
}
.admin-notice.error{border-color:#c0392b;background:rgba(192,57,43,.08)}
.admin-notice.warn{border-color:#b8860b;background:rgba(184,134,11,.1)}
.admin-notice.ok{border-color:#2f7d4f;background:rgba(47,125,79,.1)}

.admin-creds{margin-bottom:26px}
.admin-creds .file-row .ico .fa-key{color:var(--gold)}
.admin-creds .s strong{color:var(--ink);font-family:"IBM Plex Mono",monospace}

.admin-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.admin-card{background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:22px 22px 24px}
.admin-form{display:flex;flex-direction:column;gap:14px}
.admin-form .field{display:flex;flex-direction:column;gap:7px}
.admin-form label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.portal .admin-form input,
.portal .admin-form textarea{
  width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;
  padding:12px 14px;font:inherit;outline:none;transition:border-color .2s var(--ease);
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
.portal .admin-form textarea::placeholder{color:rgba(23,23,19,.52);-webkit-text-fill-color:rgba(23,23,19,.52)}
.portal .admin-form input{height:50px}
.portal .admin-form textarea{min-height:150px;resize:vertical;line-height:1.5;font-family:"IBM Plex Mono",monospace;font-size:13px}
.portal .admin-form input:focus,
.portal .admin-form textarea:focus{border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(196,164,107,.16)}
.admin-form .button{width:100%;margin-top:2px}
.admin-hint{font-size:12.5px;color:var(--muted);line-height:1.55}

.admin-table-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ivory)}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table thead th{
  text-align:left;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--paper-deep);
}
.admin-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:0}
.admin-empty{text-align:center;color:var(--muted);padding:30px 16px}
.badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid}
.badge-on{color:#2f7d4f;border-color:rgba(47,125,79,.4);background:rgba(47,125,79,.08)}
.badge-off{color:#c0392b;border-color:rgba(192,57,43,.4);background:rgba(192,57,43,.08)}
.row-actions{display:flex;flex-wrap:wrap;gap:8px}
.row-actions form{display:inline}
.row-btn{
  appearance:none;cursor:pointer;border:1px solid var(--strong-line);background:transparent;color:var(--ink);
  border-radius:4px;padding:7px 11px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;transition:all .18s var(--ease);
}
.row-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.row-btn.danger{border-color:rgba(192,57,43,.5);color:#9b2c2c}
.row-btn.danger:hover{background:#9b2c2c;border-color:#9b2c2c;color:#fff}

@media (max-width:780px){
  .admin-cards{grid-template-columns:1fr}
  .admin-table thead{display:none}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table tr{border-bottom:1px solid var(--line);padding:8px 0}
  .admin-table td{border-bottom:0;padding:8px 16px;display:flex;justify-content:space-between;gap:14px}
  .admin-table td::before{content:attr(data-label);font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .admin-table td.row-actions{display:flex;justify-content:flex-start;flex-wrap:wrap}
  .admin-table td.row-actions::before{display:none}
}

/* High-contrast input text override for Safari/autofill and admin forms. */
.portal input,
.portal textarea,
.portal input[type="text"],
.portal input[type="email"],
.portal input[type="password"],
.portal input[type="number"],
.portal .admin-form input,
.portal .admin-form textarea,
/* select was missing here. styles.css forces ivory text on input, select and
   textarea inside its prefers-color-scheme:dark block, so on a machine in dark
   mode every portal <select> rendered ivory-on-cream and was unreadable. The
   same bug was fixed for the homepage enquiry form in home.css, which the
   portal does not load. */
.portal select,
.portal .admin-form select{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
  caret-color:#111111 !important;
  opacity:1 !important;
  background-color:#ffffff !important;
}
.portal select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23403b34' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:12px 8px !important;
  padding-right:38px !important;
}
.portal input::placeholder,
.portal textarea::placeholder{
  color:rgba(17,17,17,.48) !important;
  -webkit-text-fill-color:rgba(17,17,17,.48) !important;
  opacity:1 !important;
}
.portal input:-webkit-autofill,
.portal input:-webkit-autofill:hover,
.portal input:-webkit-autofill:focus,
.portal textarea:-webkit-autofill,
.portal textarea:-webkit-autofill:hover,
.portal textarea:-webkit-autofill:focus{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
  box-shadow:0 0 0 1000px #ffffff inset !important;
  caret-color:#111111 !important;
}

/* ---------- Final portal header and mobile containment ----------
  Layout: desktop keeps brand, clock and account controls in a balanced three-part header; mobile uses two rows so the brand and sign-out never collide.
  Spacing/type: 8px rhythm, 44px minimum sign-out target, compact digital clock pill.
  Colors: paper glass header, ink text, navy action states, gold AM/PM accent.
  Focal point: a calm, readable student library header with no horizontal drift.
*/
.portal-app.cp-site{
  left:auto;
  right:auto;
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}
.portal-app{
  --portal-navy:#12324a;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.portal-app .portal-top{
  width:100%;
  overflow:hidden;
}
.portal-app .portal-top-inner{
  width:min(calc(100% - 48px),1320px);
  max-width:1320px;
  margin-inline:auto;
  padding-inline:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  min-height:72px;
  gap:16px;
}
.portal-app .portal-top .brand{
  min-width:0;
  max-width:100%;
  justify-self:start;
  overflow:hidden;
}
.portal-app .portal-top .wordmark{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.portal-app .portal-clock{
  justify-self:center;
  align-self:center;
  white-space:nowrap;
}
.portal-app .portal-id-stack{
  min-width:0;
  justify-self:end;
  align-self:center;
}
.portal-app .library .shell,
.portal-app .library-hero,
.portal-app .library-head,
.portal-app .library-focus-card,
.portal-app .library-bar,
.portal-app .library-panel{
  min-width:0;
  max-width:100%;
}
.portal-app .library-head p,
.portal-app .library-focus-card p{
  overflow-wrap:break-word;
}
@media (max-width:1024px){
  .portal-app .portal-top-inner{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:12px;
  }
  .portal-app .portal-id .who{
    max-width:22vw;
  }
  .portal-app .clock-zone{
    display:none;
  }
}
@media (max-width:640px){
  .portal-app .portal-top{
    min-height:118px;
  }
  .portal-app .portal-top-inner{
    width:100%;
    max-width:100%;
    padding:10px 12px 12px;
    margin:0;
    min-height:118px;
    grid-template-columns:minmax(0,1fr) minmax(78px,auto);
    grid-template-rows:minmax(42px,auto) 36px;
    column-gap:8px;
    row-gap:10px;
  }
  .portal-app .portal-top .brand{
    grid-column:1;
    grid-row:1;
    align-self:center;
    min-width:0;
    max-width:100%;
    gap:8px;
  }
  .portal-app .portal-top .brand-mark{
    width:32px;
    height:32px;
    font-size:20px;
    flex:0 0 32px;
  }
  .portal-app .portal-top .wordmark{
    font-size:clamp(19px,6.4vw,27px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .portal-app .portal-id-stack{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    min-width:0;
    max-width:100%;
  }
  .portal-app .portal-id .who{
    display:none;
  }
  .portal-app .portal-signout{
    min-width:0;
    min-height:42px;
    padding:8px 9px;
    font-size:8.5px;
    letter-spacing:.08em;
  }
  .portal-app .portal-clock{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
    min-height:34px;
    padding:6px 12px;
    margin:0;
  }
  .portal-app .clock-meta strong{
    font-size:13px;
  }
  .portal-app .clock-meta small{
    font-size:8px;
  }
  .portal-app .library{
    padding-top:26px;
  }
  .portal-app .library .shell{
    width:100%;
    max-width:100%;
    padding-inline:18px;
    margin-inline:0;
  }
  .portal-app .library-head p,
  .portal-app .library-focus-card p{
    max-width:100%;
  }
  .portal-app .library-bar{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .portal-app .library-search{
    width:100%;
    flex-basis:auto;
  }
  .portal-app .folder-grid{
    grid-template-columns:1fr;
  }
  .portal-app .file-row{
    align-items:flex-start;
  }
}

/* ---------- Student desk calculator integration ----------
  Layout: mobile keeps a single-column library and hides the calculator; tablet/desktop expose a centered calculator tile and split the workspace into library plus right-side tool panel.
  Spacing/type: 8px grid, 44px+ calculator keys, compact 15px UI labels, serif headings only where the portal already uses them.
  Colors: CuratedPrep paper, ivory, trust navy, brass gold and warm linework; no extra accent family.
  Focal point: the student library remains primary, calculator is a secondary study tool.
*/
.portal-app .student-workspace{
  width:100%;
  min-width:0;
  transition:grid-template-columns .32s var(--ease), gap .32s var(--ease);
}
.portal-app .student-library-pane,
.portal-app .student-calculator-panel{
  min-width:0;
}
.portal-app .library-tool-card{
  appearance:none;
  width:100%;
  min-height:118px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(251,248,241,.92));
  color:var(--ink);
  cursor:pointer;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px;
  text-align:center;
  transition:border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease), color .22s var(--ease);
}
.portal-app .library-tool-card i{
  color:var(--portal-navy,#12324a);
  font-size:28px;
  line-height:1;
}
.portal-app .library-tool-card strong{
  font-family:"Inter",sans-serif;
  font-size:19px;
  line-height:1.1;
  color:var(--portal-navy,#12324a);
}
.portal-app .library-tool-card span{
  color:var(--muted);
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.portal-app .library-tool-card:hover,
.portal-app .library-tool-card:focus-visible,
.portal-app .library-tool-card.is-active{
  border-color:rgba(14,54,80,.42);
  background:var(--portal-navy,#12324a);
  color:var(--paper);
  transform:translateY(-1px);
  outline:none;
}
.portal-app .library-tool-card:hover i,
.portal-app .library-tool-card:focus-visible i,
.portal-app .library-tool-card.is-active i,
.portal-app .library-tool-card:hover strong,
.portal-app .library-tool-card:focus-visible strong,
.portal-app .library-tool-card.is-active strong,
.portal-app .library-tool-card:hover span,
.portal-app .library-tool-card:focus-visible span,
.portal-app .library-tool-card.is-active span{
  color:var(--paper);
}
.portal-app .student-calculator-panel[hidden]{display:none!important}
.portal-app .student-calculator-panel{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(251,248,241,.98));
  box-shadow:0 18px 44px rgba(23,23,19,.08);
  padding:18px;
  overflow:hidden;
}
.portal-app .student-calculator-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.portal-app .student-calculator-head h2{
  margin:5px 0 0;
  font-family:"Source Serif 4",serif;
  font-size:clamp(24px,3vw,34px);
  line-height:.98;
  color:var(--portal-navy,#12324a);
  max-width:11ch;
}
.portal-app .calculator-close{
  appearance:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--ivory);
  color:var(--ink);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all .2s var(--ease);
}
.portal-app .calculator-close:hover,
.portal-app .calculator-close:focus-visible{
  background:var(--portal-navy,#12324a);
  color:var(--paper);
  outline:none;
}
.portal-app .calculator-screen{
  border:1px solid rgba(14,54,80,.16);
  border-radius:14px;
  background:var(--portal-navy,#12324a);
  padding:12px;
  margin-bottom:12px;
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.portal-app .calculator-expression{
  min-height:18px;
  color:rgba(251,248,241,.62);
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  overflow-wrap:anywhere;
}
.portal-app input.calculator-display{
  width:100%;
  min-height:46px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--paper)!important;
  -webkit-text-fill-color:var(--paper)!important;
  caret-color:var(--paper)!important;
  font-family:"IBM Plex Mono",monospace!important;
  font-size:clamp(22px,2.4vw,31px)!important;
  line-height:1.1;
  padding:0!important;
  text-align:right;
}
.portal-app input.calculator-display.is-error{
  color:#f5b4a9!important;
  -webkit-text-fill-color:#f5b4a9!important;
}
.portal-app .calculator-mode-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.portal-app .calculator-mode-row button{
  min-height:34px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--ivory);
  color:var(--muted);
  cursor:pointer;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.08em;
  padding:7px 10px;
  transition:all .18s var(--ease);
}
.portal-app .calculator-mode-row button.is-active{
  background:var(--portal-navy,#12324a);
  border-color:var(--portal-navy,#12324a);
  color:var(--paper);
}
.portal-app .calculator-mode-row span{
  margin-left:auto;
  color:var(--muted);
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.04em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-app .calculator-keys{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.portal-app .calculator-keys button{
  min-width:0;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.62);
  color:var(--ink);
  cursor:pointer;
  font-family:"IBM Plex Mono",monospace;
  font-size:14px;
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.portal-app .calculator-keys button:hover,
.portal-app .calculator-keys button:focus-visible{
  background:var(--ivory);
  border-color:rgba(14,54,80,.34);
  transform:translateY(-1px);
  outline:none;
}
.portal-app .calculator-keys .calculator-equals{
  grid-column:span 2;
  background:var(--gold);
  border-color:var(--gold);
  color:var(--paper);
  font-weight:700;
}
/* Inside the desk panel the calculator is an ACTION, not a tile, so it reads as
   a wide button rather than a third statistic. Its display is left alone: the
   calculator is deliberately desktop-only and the rules below own that. */
.portal-app .library-focus-card .library-tool-card{
  min-height:46px;
  flex-direction:row;
  justify-content:flex-start;
  gap:11px;
  padding:0 16px;
  border-radius:999px;
  text-align:left;
}
.portal-app .library-focus-card .library-tool-card i{font-size:15px}
.portal-app .library-focus-card .library-tool-card strong{
  font-family:"Inter",system-ui,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:0
}
.portal-app .library-focus-card .library-tool-card:active{transform:scale(.985)}

@media (min-width:768px){
  .portal-app .calculator-trigger{display:flex}
}
@media (min-width:900px){
  .portal-app .student-workspace.is-calculator-open{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(312px,360px);
    gap:18px;
    align-items:start;
  }
  .portal-app .student-workspace.is-calculator-open .student-calculator-panel{
    position:sticky;
    top:94px;
  }
}
@media (min-width:1180px){
  .portal-app .student-workspace.is-calculator-open{
    grid-template-columns:minmax(0,70fr) minmax(340px,30fr);
    gap:22px;
  }
}
@media (max-width:767px){
  .portal-app .calculator-trigger,
  .portal-app .student-calculator-panel{
    display:none!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .portal-app .student-workspace,
  .portal-app .library-tool-card,
  .portal-app .calculator-keys button{
    transition:none!important;
  }
}

/* ============================================================================
   TIMED PAPERS - the dashboard section
   Appended, never edited into an existing rule. Every class name here is new,
   so no existing page can change. Tokens are the portal's own resolved set
   (--trust navy, --gold, --paper, --ivory, --ink, --muted, --line, --ease),
   because the portal does not load home.css and the brand tokens there would
   not resolve.
   ========================================================================= */
.portal-app .library-papers{padding:4px 0 18px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.library-papers-head{display:grid;gap:8px;margin-bottom:18px;max-width:62ch}
.eyebrow-dash{display:inline-flex;align-items:center;gap:10px}
.eyebrow-dash::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
.library-papers-head h2{font-family:"Source Serif 4",Georgia,serif;font-weight:500;font-size:clamp(24px,3.4vw,32px);line-height:1.1;letter-spacing:-.012em;color:var(--ink);margin:0}
/* Two sentences, two lines, at every width. Left to wrap freely it broke as
   "The same / clock. The / same marking." on a phone.
   The colour and style resets are load-bearing: styles.css:76 makes every
   "h2 span" a gold italic accent, which turned the whole headline brass. */
.library-papers-head h2 span{display:block;text-wrap:nowrap;color:inherit;font-style:normal}
@media (max-width:340px){.library-papers-head h2 span{text-wrap:pretty}}
.library-papers-head p{color:var(--muted);font-size:15px;line-height:1.6;text-wrap:pretty;margin:0}

/* ---- Timed papers: the ledger -------------------------------------------
   Not cards. A student reads this the way they read a results slip: one row
   per paper, the score set large in mono because that is what they came for,
   and the state carried by the row's own rule rather than a filled pill.
   Boxing each paper made the section shout; dividing it lets it breathe. */

.paper-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}

.paper-row{position:relative;display:grid;gap:18px 28px;align-items:center;
  grid-template-columns:minmax(0,1.7fr) minmax(0,.72fr) minmax(0,auto);
  padding:22px 4px 22px 18px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(8px);
  animation:paper-row-in .5s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms)}

@keyframes paper-row-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .paper-row{animation:none;opacity:1;transform:none}
}

/* The state rule. One pixel doing the work a badge used to do badly. */
.paper-row::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;
  background:var(--line);transition:background .2s var(--ease),top .2s var(--ease),bottom .2s var(--ease)}
.paper-row:hover::before{top:8px;bottom:8px}
.paper-row.is-open::before{background:var(--gold)}
.paper-row.is-live::before{background:var(--trust,#112f46)}
.paper-row.is-done::before{background:#2f7d4f}
.paper-row.is-shut::before{background:var(--line)}

.paper-row-id{display:grid;gap:7px;min-width:0}

.paper-status{display:inline-flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.paper-status i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.paper-row.is-open  .paper-status{color:var(--gold)}
.paper-row.is-done  .paper-status{color:#2f7d4f}
.paper-row.is-live  .paper-status{color:var(--trust,#112f46)}
.paper-row.is-live  .paper-status i{animation:paper-pulse 2.4s ease-in-out infinite}
@keyframes paper-pulse{0%,100%{opacity:1}50%{opacity:.28}}
@media (prefers-reduced-motion:reduce){.paper-row.is-live .paper-status i{animation:none}}

.paper-name{font-family:"Source Serif 4",Georgia,serif;font-weight:500;font-size:clamp(19px,2vw,22px);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.paper-variant{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;color:var(--muted)}

.paper-spec{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.03em;color:var(--muted)}
.paper-spec span{opacity:.45}

/* The figure. Mono, tabular, and the largest thing in the row. */
.paper-row-score{display:grid;gap:4px;justify-items:start}
.paper-figure{margin:0;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3.4vw,32px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.paper-figure span{font-size:13px;letter-spacing:0;color:var(--muted);margin-left:2px}
.paper-figure.is-pending{color:var(--line)}
.paper-figure-note{display:flex;flex-wrap:wrap;gap:6px;margin:0;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.paper-figure-note span{opacity:.45}

.paper-row-act{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px 14px}
/* The note takes its own line rather than fighting the buttons for width. */
.paper-note{flex-basis:100%;margin:0;text-align:right;line-height:1.5;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;color:var(--muted)}

/* The brand sheet specifies a 999px pill for primary actions. The portal's
   legacy .button is a 2px-radius mono block; both coexist deliberately, the
   pill only on this new section. */
.paper-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:999px;
  border:1px solid var(--strong-line);background:transparent;color:var(--trust,#112f46);white-space:nowrap;
  font:600 13.5px/1 "Inter",system-ui,sans-serif;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.paper-btn.primary{background:var(--trust,#112f46);border-color:var(--trust,#112f46);color:var(--paper);
  box-shadow:0 14px 26px -18px rgba(17,47,70,.9)}
.paper-btn.primary:hover{background:var(--trust-2,#16445f);border-color:var(--trust-2,#16445f);transform:translateY(-1px)}
.paper-btn:hover{border-color:var(--gold-soft)}
.paper-btn:active{transform:scale(.97)}
.paper-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Secondary action reads as a link, not a second button competing with the first. */
.paper-link{font:500 13px/1 "Inter",system-ui,sans-serif;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px;white-space:nowrap;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.paper-link:hover{color:var(--ink);border-color:var(--gold)}
.paper-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:860px){
  .paper-row{grid-template-columns:1fr;gap:14px;padding:20px 4px 20px 16px;align-items:start}
  .paper-row-score{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px}
  .paper-row-act{justify-content:flex-start}
  .paper-note{text-align:left;max-width:38ch}
}

.paper-history{margin-top:18px}
.paper-history summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px}
.paper-history summary::-webkit-details-marker{display:none}
.paper-history summary::after{content:"\f078";font:900 9px "Font Awesome 6 Free";color:var(--muted)}
.paper-history[open] summary::after{content:"\f077"}
.paper-history .file-list{margin-top:12px}

@media (max-width:640px){
  .paper-btn{width:100%}
  .paper-row-act{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .paper-btn,.paper-link{transition:none}
  .paper-btn.primary:hover,.paper-btn:active{transform:none}
}

/* ---------------------------------------------------------------------------
   TIMED PAPERS - the allotment console
   The form carries .admin-form so it inherits the console's column rhythm;
   these rules only widen that rhythm and give the briefing panel real
   structure so it is not a wall of prose in a mostly empty card.
   ------------------------------------------------------------------------ */
.admin-cards:has(.paper-brief){align-items:start}

.paper-allot-form{gap:20px}
.paper-allot-form .field{gap:9px}
.paper-allot-form .field > span{line-height:1.3}
.portal .paper-allot-form select,
.portal .paper-allot-form input{padding-top:13px;padding-bottom:13px;border-radius:8px}
.paper-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.paper-notify{gap:7px}
.paper-notify-box{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.portal .paper-notify-box input[type=checkbox]{width:17px;height:17px;padding:0;margin:0;accent-color:var(--trust);flex:none}
.paper-notify-hint{font-size:12.5px;line-height:1.5;color:var(--muted)}
.paper-allot-submit{margin-top:6px;align-self:start}

/* The briefing panel ------------------------------------------------------ */
.paper-brief{display:grid;gap:20px;align-content:start}
.paper-brief-headline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.paper-brief-headline strong{
  font-family:"Source Serif 4",Georgia,serif;font-weight:500;font-size:46px;line-height:1;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.paper-brief-headline span{font-size:15px;line-height:1.5;color:var(--muted);max-width:26ch}

.paper-brief-sections{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.paper-brief-sections > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.paper-brief-sections dt{font-size:14.5px;color:var(--ink);margin:0}
.paper-brief-sections dd{
  font-family:"Source Serif 4",Georgia,serif;font-size:20px;line-height:1;color:var(--ink);
  margin:0;font-variant-numeric:tabular-nums;
}

.paper-brief-rules{display:grid;gap:0}
.paper-brief-rule{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px dotted var(--line);
}
.paper-brief-rule:last-child{border-bottom:0}
.paper-brief-rule .k{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.paper-brief-rule .v{
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.paper-brief-rule .v.is-plus{color:#2f7d4f}
.paper-brief-rule .v.is-minus{color:#9b2c2c}

.paper-brief-steps{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.paper-brief-steps li{display:grid;grid-template-columns:26px 1fr;align-items:start;gap:12px}
.paper-brief-steps .n{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--gold-soft);
  display:grid;place-items:center;color:var(--gold);
  font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1;
}
.paper-brief-steps .t{font-size:14.5px;line-height:1.55;color:var(--muted)}

@media (max-width:900px){
  .paper-field-pair{grid-template-columns:1fr}
  .paper-brief-headline strong{font-size:38px}
}


/* A hint under a field that would otherwise be read as a third credential. */
.field-hint{display:block;margin-top:6px;font-family:"Inter",system-ui,sans-serif;
  font-size:12px;line-height:1.45;color:var(--muted)}

/* ---------------------------------------------------------------------------
   Worksheets on the dashboard (added 2026-09-15)
   The public pages have their own stylesheet; this is the portal's own take on
   the same tree, built from the file-row components already on this page.
   --------------------------------------------------------------------------- */
.library-worksheets { margin: 34px 0 10px; }
.ws-subject { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.ws-subject > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; min-height: 44px; cursor: pointer; list-style: none; transition: background-color .22s var(--ease); }
.ws-subject > summary::-webkit-details-marker { display: none; }
.ws-subject > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(45deg) translateY(-2px); transition: transform .28s var(--ease); flex: none; }
.ws-subject[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.ws-subject > summary:hover { background: var(--paper); }
.ws-subject > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ws-subject-name { font-family: "Source Serif 4", Georgia, serif; font-size: 18px; color: var(--ink); }
.ws-subject-meta { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.ws-subject .library-section-label { margin: 14px 18px 6px; }
.ws-subject .file-list { padding: 0 18px 4px; }
.ws-subject .file-list:last-child { padding-bottom: 16px; }
.ws-topic-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-chip { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; border: 1px solid var(--line); color: var(--gold); }
.ws-chip-hl { background: var(--trust, #112f46); color: #fbf8f1; border-color: transparent; }
.ws-chip-free { border-color: var(--gold-soft); }
.ws-level { display: flex; align-items: center; gap: 10px; padding: 14px 18px 2px; flex-wrap: wrap; }
.ws-level-label { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ws-level-group { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--paper); }
.ws-level-btn { appearance: none; border: 0; background: transparent; font-weight: 600; font-size: 13px; color: var(--muted); padding: 7px 16px; min-height: 40px; border-radius: 999px; cursor: pointer; transition: background-color .24s var(--ease), color .24s var(--ease); }
.ws-level-btn[aria-pressed="true"] { background: var(--trust, #112f46); color: #fbf8f1; }
.ws-level-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ws-subject > summary, .ws-subject > summary::after, .ws-level-btn { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Granting worksheet subjects (admin, added 2026-09-15)
   The console already dresses cards, fields, tables and badges. Only the tick
   list needs anything new: 21 subjects stacked one per row is a scroll, and
   .admin-form label is styled as a field caption, which a subject name is not.
   --------------------------------------------------------------------------- */
.ws-grant-group{margin-top:6px}
.ws-grant-board{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:12px 0 8px}
.ws-grant-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px}
.admin-form .ws-grant-item{display:flex;align-items:center;gap:10px;min-height:34px;cursor:pointer;
  font-family:"Inter",system-ui,sans-serif;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.portal .ws-grant-item input[type=checkbox]{width:17px;height:17px;padding:0;margin:0;
  accent-color:var(--trust,#112f46);flex:none}
.ws-grant-facts{margin:0;padding-left:18px;list-style:disc;display:grid;gap:10px;
  font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){
  .ws-grant-list{grid-template-columns:1fr}
}

/* The site stylesheet caps every bare h1 at 13.2ch, which is a good measure for
   a page headline set in 54px serif and a bad one for a console heading at 28px:
   it squeezed all three admin headings to 123px, so "Allot a paper. Read every
   result." came out five lines tall. Give the console headings room. The public
   pages are untouched; this file is only loaded inside the portal. */
.admin-main .library-head h1 { max-width: 28ch; }

/* ---------------------------------------------------------------------------
   Marking scheme reader (added 2026-09-16)
   Page images, never a document. The print rule is a courtesy block only.
   --------------------------------------------------------------------------- */
.scheme-crumbs { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.scheme-crumbs a { color: var(--gold); text-decoration: none; }
.scheme-crumbs a:hover { text-decoration: underline; }
/* The reader itself. A scheme page is white paper, so it is presented as
   paper: a narrow column at a comfortable reading width, each page on its own
   white surface with a soft shadow rather than a boxed-in card, and the page
   number as a small chip in the corner instead of a grey bar stitched under
   every single page. */
.scheme-viewer { display: flex; flex-direction: column; align-items: center;
  gap: 26px; margin: 26px 0 10px; }
.scheme-page { position: relative; margin: 0; width: 100%; max-width: 940px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; box-shadow: 0 10px 30px -18px rgba(20,19,15,.45); }
.scheme-page img {
  display: block; width: 100%; height: auto;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  pointer-events: none;            /* no drag to desktop, no long press menu */
}
.scheme-page figcaption { position: absolute; right: 10px; bottom: 10px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em;
  color: var(--muted); background: rgba(255,255,255,.92);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.scheme-page figcaption span { color: var(--ink); }
.scheme-foot { color: var(--muted); font-size: 13.5px; text-align: center;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .04em;
  margin: 22px 0 44px; }
@media (max-width: 760px) {
  .scheme-viewer { gap: 16px; }
  .scheme-page { border-radius: 4px; }
}
@media print {
  /* Printing is a save route, so the pages do not print. */
  .scheme-viewer { display: none !important; }
  .scheme-foot::after { content: " Printing is not available for marking schemes."; }
}

.ws-grant-level { margin-left: auto; font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }

/* ---------------------------------------------------------------------------
   One subject, topic by topic (added 2026-09-16)
   The dashboard reads as a list because it holds every course at once. A single
   subject is a working surface, so the subtopics become cards: a topic of ten
   is three rows of tiles rather than ten repetitions of the same file row.
   The two actions stack full width inside the card, so a tile with one button
   and a tile with two still line up across the grid.
   --------------------------------------------------------------------------- */
.ws-subject-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.ws-subject-note { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 62ch; margin: 22px 0 0; }
.ws-subject-page { margin: 8px 0 10px; }
.ws-subject-back { margin: 34px 0 48px; }

/* ---------------------------------------------------------------------------
   Courses and topics, set the way the public course pages set them
   (2026-09-25). A student who browsed curatedprep.com before signing in met a
   numbered rule per topic, the name in the serif, and what is on the row as
   pills at the right hand edge. Meeting a grid of cards after signing in read
   as a different product. The geometry here is the public page's, expressed in
   the portal's own tokens; only the pills differ, because in here everything
   has already been granted and they open rather than advertise.
   --------------------------------------------------------------------------- */
.ws-course-list, .ws-topics { list-style: none; margin: 18px 0 0; padding: 0;
  border-top: 1px solid var(--line); }
.ws-course, .ws-topic { border-bottom: 1px solid var(--line); }

.ws-num { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .1em;
  color: var(--gold); }
.ws-name { font-family: "Source Serif 4", Georgia, serif; font-weight: 500;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink); margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  /* the portal sets a reading measure on headings; a rule in a list is not
     a paragraph and wraps into two words without this */
  max-width: none; }
.ws-count { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* a course on the dashboard: the whole rule is the link */
.ws-course-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: 14px; padding: 18px 4px; min-height: 44px; text-decoration: none; color: inherit;
  transition: background-color .22s var(--ease); }
.ws-course-row:hover { background: var(--ivory); }
.ws-course-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 8px; }
.ws-course-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-course-board { font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ws-caret { width: 14px; height: 14px; color: var(--gold); flex: none;
  transition: transform .24s var(--ease); }
.ws-course-row:hover .ws-caret { transform: translateX(3px); }

/* a topic on the subject page */
.ws-topic-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px; padding: 20px 4px 12px; }
.ws-subtopics { list-style: none; margin: 0; padding: 0 4px 14px 30px; }
.ws-subtopic { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line); }
.ws-subtopics > .ws-subtopic:first-child { border-top: 0; }
.ws-sub-name { font-size: 15.5px; color: var(--ink); display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.ws-files { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.ws-file { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 36px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
a.ws-file { min-height: 44px; text-decoration: none; color: var(--gold); background: var(--ivory);
  border-color: var(--gold-soft);
  transition: background-color .24s var(--ease), color .24s var(--ease), transform .16s var(--ease); }
a.ws-file:hover { background: var(--gold); color: var(--paper); border-color: transparent; }
a.ws-file:active { transform: scale(.97); }
a.ws-file:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
a.ws-file-ghost { color: var(--muted); background: transparent; border-color: var(--line); }
a.ws-file-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Nothing attached yet is a fact, not a disabled control, so it is set as a
   line of type rather than as a button nobody can press. */
.ws-file.ws-soon { color: var(--muted); border-color: transparent; background: transparent;
  text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }

@media (max-width: 760px) {
  .ws-course-row { grid-template-columns: auto 1fr auto; row-gap: 6px; }
  .ws-course-row .ws-count { grid-column: 2 / -1; }
  .ws-topic-row { grid-template-columns: auto 1fr; }
  .ws-topic-row .ws-count { grid-column: 2; }
  .ws-subtopics { padding-left: 0; }
  .ws-subtopic { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ws-files { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-course-row, .ws-caret, a.ws-file { transition: none !important; }
  .ws-course-row:hover .ws-caret { transform: none; }
}

.ws-read-head { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px; }
.ws-read-head .library-head { margin-bottom: 0; }
.ws-read-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ws-reader { margin: 18px 0 28px; border: 1px solid var(--line, rgba(20,19,15,.14));
  border-radius: 14px; overflow: hidden; background: var(--ivory, #fbf7ef); }
.ws-reader object { display: block; width: 100%; height: min(78vh, 1000px); border: 0; }
.ws-reader-fallback { padding: 24px; font-size: 14px; color: var(--ink-soft, #34302a); }
@media (max-width: 760px) {
  .ws-reader object { height: 70vh; }
  .ws-read-acts { width: 100%; }
  .ws-read-acts .file-btn { flex: 1; justify-content: center; }
}
/* Nothing attached yet is a fact, not a disabled control, so it is set as a
   line of type rather than as a button nobody can press. */
.ws-soon { display: flex; align-items: center; min-height: 40px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }

@media (max-width: 1024px) {
  }
@media (max-width: 620px) {
    .ws-soon { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  }

/* ---------------------------------------------------------------------------
   Marking scheme on the worksheet page (added 2026-10-04)
   Loaded behind the worksheet, shown under it when asked for.
   --------------------------------------------------------------------------- */
.ws-ms { margin: 8px 0 0; scroll-margin-top: 16px; }
.ws-ms-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.ws-ms-status { margin: 0; color: var(--muted); font-size: 13px;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .04em; }
.ws-ms .scheme-viewer { margin-top: 16px; }
.ws-ms .scheme-page img { min-height: 120px; background: #fff; }
@media print {
  .ws-ms { display: none !important; }
}