/* ====================================================================
   mock.css — a VERBATIM copy of the <style> block of the approved mock-up,
   /Users/ziyadakl/Desktop/hifz-wireframes/final-tree-v3.html (lines 8-983).

   Do not edit a rule in here to suit the app. Copy a newer mock-up over it
   whole, and put anything the app needs on top in app.css, which loads
   after this file. The #banner and #sitemap rules below style review
   scaffolding the app never renders; they are inert and kept only so this
   file stays a byte-for-byte copy.
   ==================================================================== */
  /* ====================================================================
     THE PAINT LAYER.
     Every colour, font stack, size, radius and shadow below is lifted
     from Mama/public/styles/tokens.css and the two approved previews
     (.impeccable/preview/desk-2.html and groups-desk.html).
     Nothing about the tree, the routes or the behaviour is touched.
     Marcellus is a web font, and this file must run offline from
     file://, so --font-display substitutes the nearest system serif.
     ==================================================================== */
  :root{
    /* ---- Colour (tokens.css) ---------------------------------------- */
    --page:        #1A1A1C;
    --ground:      #FBF7EC;
    --card:        #FFFFFF;
    --card-quiet:  rgba(255,255,255,.55);
    --ink:         #1C2320;
    --ink-soft:    #656E67;
    --ink-quiet:   #55605A;
    --green:       #0D4A32;
    --green-pale:  #EEF4F0;
    --green-deep:  linear-gradient(165deg,#17593D 0%,#0D4A32 55%,#093B28 100%);
    --green-tick:  #14653F;
    --gold:        #86641C;
    --gold-line:   rgba(160,138,86,.26);
    --gold-hair:   rgba(160,138,86,.15);
    --gold-sheen:  linear-gradient(140deg,#F0DDAA 0%,#D8B865 18%,#B28F35 46%,
                                   #E6CE90 62%,#C09A3F 82%,#EBD7A4 100%);
    --grey-line:   #D5CDB8;
    --grey-mark:   #B3AB95;
    --cream-2:     #F7F1E1;
    --red-quiet:   #8A3A2E;

    /* ---- The names this prototype's own markup still asks for -------- */
    --ink-2:var(--ink-quiet);
    --ink-3:var(--ink-soft);
    --line:var(--gold-line);
    --line-2:var(--gold-hair);
    --fill:#F4EEDE;
    --fill-2:#FCF9F0;
    --accent:var(--green);
    --accent-soft:var(--green-pale);

    /* ---- Type (tokens.css; Marcellus swapped for a system serif) ----- */
    --font-display: ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,
                    "Book Antiqua",Georgia,"Times New Roman",serif;
    --font-ui:      ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
                    Helvetica,Arial,sans-serif;
    --text-xs:11.5px; --text-sm:12.5px; --text-base:13px; --text-md:14px;
    --text-lg:17.5px; --text-xl:19px;   --text-2xl:32px;
    --track-wide:.32em; --track-mid:.16em; --track-tight:.035em;

    /* ---- Space, shape, depth ---------------------------------------- */
    --s1:4px; --s2:7px; --s3:9px; --s4:11px; --s5:13px;
    --s6:15px; --s7:18px; --s8:26px; --s9:40px;
    --r-xs:8px; --r-sm:17px; --r-md:20px; --r-lg:28px; --r-panel:30px; --r-full:50%;
    --lift-soft:  0 1px 2px rgba(90,75,35,.10), 0 3px 9px rgba(90,75,35,.07);
    --lift-quiet: 0 1px 2px rgba(90,75,35,.08), 0 5px 16px rgba(90,75,35,.08);
    --lift-green: 0 2px 5px rgba(11,63,42,.32), 0 7px 18px rgba(11,63,42,.20);
    --lift-button:0 2px 4px rgba(9,52,35,.26), 0 10px 26px rgba(9,52,35,.22),
                  inset 0 1px 0 rgba(255,255,255,.12);
    --edge-row:   inset 0 0 0 1px var(--gold-line);
    --tap-min:48px;

    --bh:76px;          /* banner height, measured at runtime */
    --rail:252px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
  body{
    font:400 16px/1.55 var(--font-ui);
    color:var(--ink);background:var(--ground);
    -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
  }
  a{color:var(--green)}
  ::selection{background:var(--green-pale)}
  :focus-visible{outline:2px solid var(--green-tick);outline-offset:2px}

  /* ---------- fixed wireframe banner + corner controls ----------
     Review scaffolding, not product. A plain dark strip, deliberately
     outside the palette so it never competes with the design. */
  /* Review scaffolding, not product. It sits out of the way, bottom right. */
  #banner{
    position:fixed;right:12px;bottom:12px;left:auto;top:auto;z-index:70;
    background:rgba(26,26,28,.92);color:#E6E3DA;padding:6px 8px;border-radius:8px;
    display:flex;align-items:center;gap:6px;font-family:var(--font-ui);
    box-shadow:0 4px 18px rgba(0,0,0,.28);opacity:.55;transition:opacity .15s;
  }
  #banner:hover{opacity:1}
  @media (max-width:879px){ #banner{bottom:auto;top:8px;right:8px} }
  #banner .bt{display:none}
  #banner .bc{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap}
  #banner button{
    font:inherit;font-size:11px;letter-spacing:.04em;
    background:transparent;color:#E6E3DA;border:1px solid #4A4A4C;border-radius:4px;
    padding:5px 9px;cursor:pointer;white-space:nowrap;
  }
  #banner button:hover{background:#2A2A2C;border-color:#6A6A6C}
  #banner button.role{border-color:#5A5A5C;color:#CFCDC5}
  #banner button.who{border-color:#4A4A4C;color:#B8B6AE;max-width:46vw;overflow:hidden;text-overflow:ellipsis}

  #navEdge{display:none}

  /* ---------- navigation rail / bar ---------- */
  #nav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--card);border-top:1px solid var(--gold-line);
    display:flex;box-shadow:0 -2px 14px rgba(90,75,35,.07);
  }
  #nav .nav-sub,#nav .nav-title{display:none}
  #nav .nav-item{
    flex:1 1 0;text-align:center;text-decoration:none;color:var(--ink-soft);
    font:400 var(--text-sm)/1.2 var(--font-ui);padding:9px 6px 11px;
    border-right:1px solid var(--gold-hair);min-height:var(--tap-min);
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  #nav .nav-item:last-child{border-right:none}
  #nav .nav-item .gl{display:block;font-size:16px;line-height:1.1;margin-bottom:2px;color:var(--gold)}
  #nav .nav-item.on{
    color:var(--green);background:var(--green-pale);
    box-shadow:inset 0 3px 0 var(--green-tick);
  }
  #nav .nav-item.on .gl{color:var(--green)}

  #shell{max-width:780px;margin:0 auto;padding:calc(var(--bh) + var(--s7)) var(--s6) 104px}


  /* ---------- the Classes list, lifted from groups-desk.html ---------- */
  .mast{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s7);padding:0 var(--s3) var(--s5)}
  .mast .eyebrow{display:block;font:400 11px/1 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold)}
  .mast .title{display:block;font:400 var(--text-2xl)/1.05 var(--font-display);color:var(--green);margin-top:var(--s3);letter-spacing:.005em}
  @media (max-width:760px){ .mast .title{font-size:26px} }
  .mast .when{display:block;font:400 var(--text-base)/1 var(--font-ui);color:var(--ink-soft);margin-top:var(--s3);font-variant-numeric:tabular-nums}
  .count{
    display:inline-flex;align-items:center;gap:var(--s3);white-space:nowrap;
    padding:var(--s3) var(--s7);border-radius:var(--r-md);background:var(--card);
    font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;color:var(--green);box-shadow:var(--lift-quiet);
  }
  .count i{width:7px;height:7px;border-radius:var(--r-full);background:var(--gold-sheen);display:block}

  .panes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);margin-top:var(--s6)}
  .pane{
    min-height:0;min-width:0;display:flex;flex-direction:column;
    background:var(--cream-2);border-radius:var(--r-panel);
    box-shadow:var(--edge-row);padding:var(--s6);
  }
  .rail .card{
    display:flex;flex-direction:column;justify-content:space-between;
    background:var(--card);border-radius:var(--r-sm);
    box-shadow:var(--edge-row);padding:var(--s6) var(--s6) var(--s5);
  }
  .rail .card + .card{margin-top:var(--s5)}
  .card-cap{
    display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin:0;
    font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;color:var(--gold);
  }
  .card-cap .of{color:var(--ink-soft);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
  .figure{display:flex;align-items:baseline;gap:var(--s4);padding-top:var(--s5);margin:0}
  .figure .big{font:400 52px/1 var(--font-display);color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:.004em}
  .figure .rest{font:400 var(--text-base)/1.25 var(--font-ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .figure-track{margin-top:var(--s5)}
  .rail .legend{list-style:none;margin:0;padding:var(--s6) 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .rail .legend li{display:flex;align-items:center;gap:var(--s4);font:400 var(--text-base)/1.2 var(--font-ui);color:var(--ink-quiet);font-variant-numeric:tabular-nums}
  .week{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s5) 0}
  .wday{
    flex:none;width:var(--tap-min,48px);height:var(--tap-min,48px);
    border:0;padding:0;cursor:pointer;border-radius:var(--r-full);
    display:grid;place-items:center;background:#FEFCF7;box-shadow:var(--edge-row);
    font:600 var(--text-md)/1 var(--font-ui);color:var(--ink-soft);
  }
  .wday[data-state="today"]{background:var(--green-deep);color:#FBF6E8;box-shadow:var(--lift-green)}
  .pair{font-size:var(--text-xs);letter-spacing:0}
  .week-note{display:block;flex:none;font:400 var(--text-sm)/1.35 var(--font-ui);color:var(--ink-soft)}
  .week{flex:none}
  .card-cap{flex:none}
  .card-mark{display:grid;place-items:center;padding-top:var(--s5);flex:none}
  .card-mark svg{max-width:240px;width:100%}
  @media (min-width:1100px){ .panes{grid-template-columns:378px minmax(0,1fr)} }
  @media (min-width:1280px){ .panes{grid-template-columns:392px minmax(0,1fr)} }

  .pane-panel{flex:1 1 auto;min-height:0}
  .year{display:block;margin-top:var(--s3);font:400 var(--text-sm)/1.3 var(--font-ui);color:var(--ink-soft)}
  .year .linkish{font-size:inherit}
  body.page-classes .archline,body.page-classes #archList,body.page-classes .note{flex:none}
  /* The Classes page fills the window, so the Class cards grow to fill it. */
  @media (min-width:880px){
    /* Fill a tall window, but grow on a short one — never clip. */
    body.page-classes #shell{
      min-height:calc(100vh - var(--bh));
      display:flex;flex-direction:column;padding-bottom:var(--s7);
    }
    body.page-classes #shell > section.page.on{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
    body.page-classes .panes{flex:1 1 auto;min-height:0;align-items:stretch}
    /* The two rail cards share the height, but each keeps a floor of its own. */
    body.page-classes .card[data-fill="day"]{flex:1.15 1 auto;min-height:268px}
    body.page-classes .card[data-fill="week"]{flex:1 1 auto;min-height:250px}
    body.page-classes .groups{flex:1 1 auto;min-height:0}
    body.page-classes .grp{flex:0 0 auto}
    body.page-classes .sect,body.page-classes .mast,body.page-classes .pane-head{flex:none}
    body.page-classes #crumb{display:none}
    body.page-classes #shell.wide{max-width:1520px}
  }
  .pane-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:0 var(--s3) var(--s4)}
  .pane-head .cap{font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--gold)}
  .pane-head .tally{font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums}

  .groups{display:flex;flex-direction:column;gap:var(--s2);padding:0 var(--s1) var(--s1)}
  .sect{display:flex;align-items:center;gap:var(--s4);margin:0;padding:var(--s4) var(--s3) var(--s3)}
  .sect:first-child{padding-top:0}
  .sect .lab{font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--gold)}
  .sect[data-tone="done"] .lab{color:var(--ink-soft)}
  .sect .n{font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums}

  .grp{
    min-height:76px;max-height:92px;width:100%;display:flex;align-items:center;gap:var(--s6);
    padding:var(--s4) var(--s6) var(--s4) var(--s4);
    border:0;border-radius:var(--r-sm);background:var(--card);
    box-shadow:var(--edge-row);text-decoration:none;color:inherit;cursor:pointer;
  }
  .grp[data-state="none"]{background:var(--cream-2)}
  .grp:hover{background:var(--green-pale)}
  .grp:hover .grp-open{color:var(--green)}
  .grp-num{
    width:46px;height:46px;flex:none;display:grid;place-items:center;
    border-radius:var(--r-full);position:relative;background:#FEFCF7;
    font:600 var(--text-lg)/1 var(--font-ui);color:var(--gold);font-variant-numeric:tabular-nums;
  }
  .grp-num::after{
    content:"";position:absolute;inset:0;border-radius:var(--r-full);padding:1.6px;
    background:var(--gold-sheen);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  .grp-id{flex:1 1 auto;min-width:0}
  .grp-name{display:block;font:400 25px/1.1 var(--font-display);color:var(--green);letter-spacing:.004em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grp-sub{display:block;margin-top:var(--s1);font:400 var(--text-sm)/1.25 var(--font-ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .grp-meter{flex:none;width:236px;min-width:0}
  .meter-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3)}
  .meter-state{display:flex;align-items:center;gap:var(--s3);min-width:0;font:400 var(--text-sm)/1.2 var(--font-ui);color:var(--ink-quiet);white-space:nowrap}
  .meter-frac{font:600 var(--text-sm)/1.2 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .grp[data-state="none"] .meter-frac{color:var(--ink-soft)}
  .track{display:block;height:10px;border-radius:var(--r-md);overflow:hidden;background:var(--green-pale);box-shadow:var(--edge-row)}
  .track .meter-fill{display:block;height:100%;width:var(--p);border-radius:var(--r-md);background:linear-gradient(165deg,#17593D 0%,#0D4A32 55%,#093B28 100%)}
  .track[data-empty="true"] .meter-fill{background:transparent}
  .dot{width:22px;height:22px;flex:none;border-radius:var(--r-full);display:grid;place-items:center}
  .dot[data-mark="done"],.dot[data-mark="part"]{background:var(--green-pale)}
  .dot[data-mark="done"] i{width:13px;height:13px;border-radius:var(--r-full);display:block;background:var(--green)}
  .dot[data-mark="part"] i{width:13px;height:13px;border-radius:var(--r-full);display:block;border:1.6px solid var(--green);background:linear-gradient(to right,var(--green) 50%,transparent 50%)}
  .dot[data-mark="none"] i{width:13px;height:13px;border-radius:var(--r-full);display:block;border:1.6px solid var(--grey-line)}
  .grp-open{
    flex:none;display:inline-flex;align-items:center;gap:var(--s3);
    padding:var(--s3) var(--s3) var(--s3) var(--s4);
    font:400 15.5px/1 var(--font-display);letter-spacing:var(--track-tight);color:var(--ink-soft);
  }
  .grp-open svg{display:block}
  #archList{flex:none}
  .archline{flex:none;margin:var(--s4) 0 0;padding:0 var(--s3);font:400 var(--text-sm)/1.3 var(--font-ui)}
  .rail-foot{font:400 var(--text-sm)/1.35 var(--font-ui);color:var(--ink-soft);padding:var(--s4) var(--s3)}

  @media (max-width:760px){
    .mast{flex-direction:column;align-items:flex-start;gap:var(--s4)}
    .grp{flex-wrap:wrap;gap:var(--s4)}
    .grp-meter{width:100%;order:3}
    .grp-open{order:2;margin-left:auto}
  }

  /* ---------- signed out: the page stands alone ---------- */
  body.no-rail #nav{display:none}
  body.signed-out #nav{display:none}
  body.signed-out #crumb{display:none}
  body.signed-out #shell{margin-left:auto;margin-right:auto;max-width:560px;text-align:center}
  body.signed-out #shell .card{text-align:left}
  body.signed-out #shell .btnrow{justify-content:center}

  @media (min-width:880px){
    #nav{
      position:fixed;top:var(--bh);bottom:0;right:auto;width:var(--rail);
      border-top:none;border-right:1px solid var(--gold-line);
      background:var(--cream-2);box-shadow:none;
      display:block;overflow:auto;padding:var(--s7) var(--s5) var(--s9);
    }
    #nav .nav-sub{display:block}
    #nav .nav-title{
      display:block;font:600 var(--text-xs)/1 var(--font-ui);
      letter-spacing:var(--track-mid);text-transform:uppercase;
      color:var(--gold);padding:var(--s5) var(--s4) var(--s4);
    }
    #nav .nav-item{
      display:block;text-align:left;flex:none;border-right:none;min-height:0;
      font:400 var(--text-md)/1.35 var(--font-ui);padding:var(--s3) var(--s4);
      border-radius:var(--r-xs);white-space:normal;color:var(--ink-quiet);
    }
    #nav .nav-item .gl{display:inline;font-size:13px;margin:0 var(--s2) 0 0}
    #nav .nav-item:hover{background:rgba(255,255,255,.7)}
    #nav .nav-item.on{
      background:var(--green-pale);color:var(--green);font-weight:600;
      box-shadow:inset 0 0 0 1px rgba(20,101,63,.18);
    }
    #nav .nav-sub .nav-item{
      font-size:var(--text-base);padding:var(--s2) var(--s4) var(--s2) var(--s7);
      color:var(--ink-soft);font-variant-numeric:tabular-nums;
    }
    #nav .nav-sub .nav-item.on{color:var(--green)}
    #nav .nav-note{
      font:400 var(--text-sm)/1.45 var(--font-ui);color:var(--ink-soft);
      padding:var(--s4) var(--s4) 0;
    }
    #shell{margin-left:var(--rail);max-width:840px;padding-bottom:var(--s9)}
    body.no-rail #shell,body.signed-out #shell{margin-left:auto;margin-right:auto}
    #shell.wide{max-width:1260px}
  }

  /* ---------- the Roster only: the menu floats in on hover ---------- */
  @media (min-width:880px){
    body.nav-hover #nav{
      display:block;transform:translateX(-100%);
      transition:transform .16s ease;z-index:62;
      box-shadow:0 0 24px rgba(90,75,35,.20);
    }
    body.nav-hover #navEdge{
      display:block;position:fixed;left:0;top:var(--bh);bottom:0;width:30px;z-index:63;
      background:var(--cream-2);border-right:1px solid var(--gold-line);
      cursor:pointer;
    }
    /* A handle the Teacher can see, so she knows a menu is hiding there. */
    body.nav-hover #navEdge::before{
      content:"\2630";
      position:absolute;left:0;right:0;top:var(--s7);
      text-align:center;font:400 16px/1 var(--font-ui);color:var(--gold);
    }
    body.nav-hover #navEdge::after{
      content:"Menu";
      position:absolute;left:50%;top:calc(var(--s7) + 34px);
      transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
      font:600 10px/1 var(--font-ui);letter-spacing:var(--track-mid);
      text-transform:uppercase;color:var(--gold);white-space:nowrap;
    }
    body.nav-hover #navEdge:hover{background:var(--green-pale)}
    body.nav-hover #navEdge:hover::before,
    body.nav-hover #navEdge:hover::after{color:var(--green)}
    /* Stop clear of the handle, so the strip never covers the words. */
    body.nav-hover #navEdge:hover + #nav,
    body.nav-hover #nav:hover,
    body.nav-hover #nav:focus-within{transform:translateX(30px)}
    body.nav-hover #shell{margin-left:auto;margin-right:auto;padding-left:44px}
  }

  /* ---------- page furniture ---------- */
  section.page{display:none}
  section.page.on{display:block}
  h1{
    font:400 27px/1.15 var(--font-display);color:var(--green);
    letter-spacing:.005em;margin:2px 0 2px;
  }
  h2{
    font:400 20px/1.25 var(--font-display);color:var(--green);
    letter-spacing:.004em;margin:var(--s8) 0 var(--s4);
  }
  h3{
    font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;color:var(--gold);margin:var(--s7) 0 var(--s3);
  }
  p{margin:var(--s3) 0}
  .sub{
    color:var(--ink-soft);font:400 var(--text-md)/1.45 var(--font-ui);
    margin:var(--s2) 0 0;font-variant-numeric:tabular-nums;
  }
  #crumb{
    font:400 var(--text-sm)/1.6 var(--font-ui);color:var(--ink-soft);
    margin:0 0 var(--s5);letter-spacing:.01em;
  }
  #crumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--gold-line)}
  #crumb a:hover{color:var(--green);border-bottom-color:var(--green-tick)}
  #crumb b{color:var(--ink);font-weight:600}
  hr{border:none;border-top:1px solid var(--gold-line);margin:var(--s8) 0}

  /* the Teacher's own divider ornament, as the approved screens carry it */
  .ornament{display:grid;place-items:center;padding:var(--s7) 0 var(--s5)}
  .ornament svg{display:block;width:100%;max-width:300px;height:auto}
  .defs{position:absolute;width:0;height:0;overflow:hidden}

  /* Reviewer commentary, not product. It must never read as a designed panel. */
  .note{
    border:0;box-shadow:none;background:none;border-radius:0;padding:0 var(--s3);
    font:400 12px/1.55 var(--font-ui);color:var(--ink-soft);opacity:.7;
    margin:var(--s5) 0 0;
  }
  .note b{color:var(--ink-quiet);font-weight:600}

  /* ---------- cards / rows ---------- */
  .card{
    border:0;box-shadow:var(--edge-row);border-radius:var(--r-panel);
    padding:var(--s7) var(--s7);margin:var(--s5) 0;background:var(--card);
  }
  .card.flat{background:var(--card-quiet)}
  .card h2,.card h3{margin-top:0}
  .rows{
    border:0;box-shadow:var(--edge-row);border-radius:var(--r-sm);
    overflow:hidden;margin:var(--s5) 0;background:var(--card);
  }
  .row{
    display:flex;align-items:center;gap:var(--s5);
    padding:var(--s5) var(--s6);min-height:var(--tap-min);
    border-bottom:1px solid var(--gold-hair);
    text-decoration:none;color:var(--ink);background:transparent;
  }
  .row:last-child{border-bottom:none}
  a.row:hover{background:var(--green-pale)}
  a.row:hover .chev{color:var(--green)}
  .row .main{flex:1;min-width:0}
  .row .name{
    display:block;font:400 var(--text-xl)/1.2 var(--font-display);
    color:var(--green);letter-spacing:.004em;
  }
  .row .meta{
    display:block;margin-top:2px;font:400 var(--text-sm)/1.35 var(--font-ui);
    color:var(--ink-soft);font-variant-numeric:tabular-nums;
  }
  .row .right{
    text-align:right;font:400 var(--text-sm)/1.5 var(--font-ui);
    color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;
  }
  .chev{color:var(--gold);font-size:16px;line-height:1}

  .yearbar{
    display:flex;flex-wrap:wrap;gap:var(--s4);align-items:baseline;justify-content:space-between;
    border:0;box-shadow:var(--edge-row);border-radius:var(--r-sm);background:var(--card-quiet);
    padding:var(--s5) var(--s7);margin:var(--s5) 0 var(--s7);
  }
  .yearbar .y{font:400 var(--text-xl)/1.2 var(--font-display);color:var(--green)}
  .yearbar .d{
    font:400 var(--text-sm)/1.4 var(--font-ui);color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }

  .tag{
    display:inline-block;font:600 10.5px/1.6 var(--font-ui);
    letter-spacing:var(--track-mid);text-transform:uppercase;
    box-shadow:inset 0 0 0 1px var(--gold-line);color:var(--ink-soft);
    background:var(--card);padding:2px 9px;border-radius:var(--r-md);
    vertical-align:middle;
  }
  .tag.done{box-shadow:inset 0 0 0 1px rgba(20,101,63,.25);background:var(--green-pale);color:var(--green)}
  .tag.todo{box-shadow:inset 0 0 0 1px var(--gold-line);background:#FAF3E2;color:var(--gold)}
  .tag.absent{box-shadow:inset 0 0 0 1px var(--grey-line);background:#F2EFE6;color:var(--ink-soft)}
  .mark{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}

  .bar{
    height:8px;background:var(--green-pale);box-shadow:var(--edge-row);
    border-radius:var(--r-md);overflow:hidden;width:96px;margin-top:5px;display:inline-block;
  }
  .bar i{display:block;height:100%;border-radius:var(--r-md);background:var(--green-deep)}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-block;font:400 var(--text-lg)/1 var(--font-display);
    letter-spacing:var(--track-tight);
    min-height:var(--tap-min);padding:var(--s5) var(--s8);
    border:0;box-shadow:var(--edge-row);border-radius:var(--r-lg);
    background:var(--card);color:var(--green);
    text-decoration:none;cursor:pointer;text-align:center;
  }
  .btn:hover{background:var(--green-pale)}
  .btn.primary{
    background:var(--green-deep);color:#FBF6E8;box-shadow:var(--lift-button);
  }
  .btn.primary:hover{background:linear-gradient(165deg,#1B6647 0%,#0F5438 55%,#0B442F 100%)}
  .btn.block{display:block;width:100%}
  .btn.small{
    font-size:var(--text-md);min-height:38px;padding:var(--s3) var(--s6);
  }
  .btn.quiet{background:transparent;color:var(--ink-quiet);box-shadow:inset 0 0 0 1px var(--grey-line)}
  .btn.quiet:hover{background:var(--card);color:var(--green)}
  /* A header action sits beside the count pill, so it is raised like one. */
  .btn.chip{
    display:inline-flex;align-items:center;
    background:var(--card);color:var(--green);
    box-shadow:var(--lift-quiet);border-radius:var(--r-md);
    min-height:38px;padding:var(--s3) var(--s7);
    font:400 15px/1 var(--font-display);letter-spacing:var(--track-tight);
  }
  .btn.chip:hover{background:var(--green-pale);box-shadow:var(--lift-soft)}
  .btn.danger{background:transparent;color:var(--red-quiet);box-shadow:inset 0 0 0 1px rgba(138,58,46,.30)}
  .btn.danger:hover{background:#FBF1EE}
  .btnrow{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s6) 0}
  .btnrow .btn{flex:0 1 auto;min-width:150px;
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s3)}
  .linkish{
    background:none;border:0;padding:0;cursor:pointer;
    font:400 var(--text-md)/1.4 var(--font-ui);color:var(--green);
    text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:var(--gold-line);
  }
  .linkish:hover{text-decoration-color:var(--green-tick)}

  /* ---------- forms ---------- */
  label{
    display:block;font:600 var(--text-xs)/1 var(--font-ui);
    letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink-soft);
    margin:var(--s7) 0 var(--s3);
  }
  input[type=text],input[type=email],input[type=password],select,textarea{
    width:100%;font:400 var(--text-lg)/1.3 var(--font-ui);color:var(--ink);
    min-height:var(--tap-min);padding:var(--s4) var(--s6);
    border:0;box-shadow:var(--edge-row);border-radius:var(--r-sm);
    background:var(--card);
  }
  input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:.7}
  select{
    appearance:none;cursor:pointer;padding-right:var(--s9);
    background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                     linear-gradient(135deg,var(--gold) 50%,transparent 50%);
    background-position:calc(100% - var(--s7)) 55%,calc(100% - var(--s5)) 55%;
    background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  }
  textarea{min-height:120px;resize:vertical;line-height:1.5}
  input:disabled,select:disabled{
    background:transparent;color:var(--ink-soft);cursor:not-allowed;
    box-shadow:inset 0 0 0 1px var(--grey-line);
  }
  .fieldnote{font:400 var(--text-sm)/1.5 var(--font-ui);color:var(--ink-soft);margin-top:var(--s2)}

  .tablewrap{
    border:0;box-shadow:var(--edge-row);border-radius:var(--r-sm);
    overflow:auto;background:var(--card);
  }
  .stable{width:100%;border-collapse:collapse;font:400 var(--text-md)/1.4 var(--font-ui)}
  .stable th{
    text-align:left;font:600 10.5px/1 var(--font-ui);text-transform:uppercase;
    letter-spacing:var(--track-mid);color:var(--gold);
    padding:var(--s5) var(--s3);border-bottom:1px solid var(--gold-line);
    white-space:nowrap;background:var(--cream-2);
  }
  .stable td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--gold-hair);vertical-align:middle}
  .stable tr:last-child td{border-bottom:none}
  .stable input,.stable select{
    box-sizing:border-box;height:36px;min-height:36px;padding:0 var(--s4);
    font-size:var(--text-base);width:100%;min-width:0;border-radius:var(--r-xs);
  }
  .stable select{padding-right:var(--s8);background-position:calc(100% - 14px) 55%,calc(100% - 8px) 55%}
  .stable{table-layout:fixed}
  .stable col.c-name{width:14%} .stable col.c-class{width:11%}
  .stable col.c-pn{width:12.5%} .stable col.c-pe{width:17%}
  .stable col.c-act{width:16%}
  .stable td.rowact{white-space:nowrap;text-align:right;display:flex;gap:var(--s2);justify-content:flex-end}
  .stable .rowbtn{
    height:36px;min-height:36px;padding:0 var(--s6);font-size:var(--text-base);
    line-height:1;flex:0 0 auto;border-radius:var(--r-md);
    display:inline-flex;align-items:center;justify-content:center;
  }
  .danger-link{color:var(--red-quiet)}
  @media (max-width:880px){
    .tablewrap{border:none;background:none;overflow:visible;box-shadow:none;border-radius:0}
    .stable,.stable tbody,.stable tr,.stable td{display:block;width:100%}
    .stable thead{display:none}
    .stable tr{
      border:0;box-shadow:var(--edge-row);border-radius:var(--r-sm);background:var(--card);
      margin-bottom:var(--s4);padding:var(--s4) var(--s6) var(--s6);
    }
    .stable td{border:none;padding:var(--s2) 0}
    .stable td[data-h]:before{
      content:attr(data-h);display:block;font:600 10.5px/1 var(--font-ui);
      text-transform:uppercase;letter-spacing:var(--track-mid);
      color:var(--gold);margin-bottom:var(--s2);
    }
    .stable td.rowact{text-align:left;padding-top:var(--s4)}
  }
  .radios label{
    display:flex;gap:var(--s4);align-items:flex-start;text-transform:none;
    letter-spacing:0;font:400 var(--text-md)/1.5 var(--font-ui);color:var(--ink);
    margin:var(--s4) 0;cursor:pointer;
  }
  .radios input{width:auto;min-height:0;box-shadow:none;background:none;margin-top:4px;accent-color:var(--green)}
  .radios b{font:400 var(--text-lg)/1.3 var(--font-display);color:var(--green);font-weight:400}

  /* ================= THE MARKING DESK ================= */
  .k{
    display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 var(--s1);
    border:1px solid var(--gold-line);border-radius:var(--s1);background:var(--card);
    font:600 var(--text-xs)/1 var(--font-ui);color:var(--gold);
    letter-spacing:0;vertical-align:middle;
  }
  .set-all .k,.btn.primary .k{border-color:rgba(251,246,232,.38);color:#FBF6E8;background:transparent}
  .deskhead{
    display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;justify-content:space-between;
    margin:2px 0 var(--s1);
  }
  .deskhead-right{display:flex;align-items:center;gap:var(--s4);flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
  .deskcount{
    display:inline-flex;align-items:center;
    border:0;box-shadow:var(--lift-quiet);border-radius:var(--r-md);background:var(--card);
    padding:var(--s3) var(--s7);
    font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;color:var(--green);white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .desk{
    display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);
    margin:var(--s6) 0 0;align-items:start;
  }
  .pane{
    border:0;box-shadow:var(--edge-row);border-radius:var(--r-panel);
    background:var(--card-quiet);padding:var(--s6);min-width:0;
  }
  .desk .pane{gap:var(--s5)}
  .pane-head{
    flex:none;display:flex;align-items:baseline;justify-content:space-between;
    gap:var(--s4);padding:0 var(--s3) var(--s4);margin:0;border:0;
    font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;color:var(--gold);
  }
  .pane-head .tally{color:var(--ink-soft);font-variant-numeric:tabular-nums}
  /* ---- Roster panel: lifted from desk-2.html ---- */
  .set-all{
    flex:none;width:100%;min-height:var(--tap-min);border:0;border-radius:var(--r-lg);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    gap:var(--s4);padding:var(--s4) var(--s6);
    font:400 var(--text-lg)/1 var(--font-display);letter-spacing:var(--track-tight);
    color:#FBF6E8;background:linear-gradient(165deg,#17593D 0%,#0D4A32 55%,#093B28 100%);
    box-shadow:var(--lift-button);
  }
  .setall-wrap{position:relative;flex:none}
  .setall-menu{
    position:absolute;left:0;right:0;top:calc(100% + var(--s2));z-index:30;
    margin:0;padding:var(--s2);list-style:none;
    background:var(--card);border-radius:var(--r-sm);
    box-shadow:var(--edge-row),var(--lift-quiet);
  }
  .setall-menu[hidden]{display:none}
  .setall-menu button{
    display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
    padding:var(--s4) var(--s6);border-radius:var(--r-sm);
  }
  .setall-menu b{
    display:block;font:400 var(--text-lg)/1.2 var(--font-display);
    color:var(--ink);letter-spacing:var(--track-tight);
  }
  .setall-menu i{
    display:block;font:400 var(--text-base)/1.35 var(--font-ui);
    color:var(--ink-soft);font-style:normal;margin-top:var(--s1);
  }
  .setall-menu button:hover,.setall-menu button:focus-visible{background:var(--green-pale)}
  .setall-menu button:hover b,.setall-menu button:focus-visible b{color:var(--green)}
  .set-all:hover{background:linear-gradient(165deg,#1B6647 0%,#0F5438 55%,#0B442F 100%)}
  .set-all .k{border-color:rgba(251,246,232,.38);color:#FBF6E8;background:transparent}
  .hint-strip{
    flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;
    padding:var(--s4) var(--s3) var(--s5);
    font:400 var(--text-sm)/1.1 var(--font-ui);color:var(--ink-soft);
  }
  .hint-strip .sep{color:var(--gold-line)}
  .foot-keys{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;flex:1 1 240px;
    font:400 var(--text-sm)/1.1 var(--font-ui);color:var(--ink-soft);
  }
  .foot-keys .sep{color:var(--gold-line)}
  /* The dissolve at the two ends, measured from look-a2.html. */
  @property --fadeT{syntax:"<length>";inherits:false;initial-value:0px}
  @property --fadeB{syntax:"<length>";inherits:false;initial-value:0px}
  .roster{
    flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;gap:var(--s2);
    padding:var(--s2) var(--s3) var(--s3);margin:0 calc(var(--s3) * -1);
    scrollbar-width:none;overscroll-behavior:contain;
    --fadeT:0px; --fadeB:0px;
    transition:--fadeT .18s linear,--fadeB .18s linear;
    -webkit-mask:linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.156) calc(var(--fadeT) * .25),
      rgba(0,0,0,.5)   calc(var(--fadeT) * .5),
      rgba(0,0,0,.844) calc(var(--fadeT) * .75),
      #000             var(--fadeT),
      #000             calc(100% - var(--fadeB)),
      rgba(0,0,0,.844) calc(100% - var(--fadeB) * .75),
      rgba(0,0,0,.5)   calc(100% - var(--fadeB) * .5),
      rgba(0,0,0,.156) calc(100% - var(--fadeB) * .25),
      rgba(0,0,0,0)    100%);
            mask:linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.156) calc(var(--fadeT) * .25),
      rgba(0,0,0,.5)   calc(var(--fadeT) * .5),
      rgba(0,0,0,.844) calc(var(--fadeT) * .75),
      #000             var(--fadeT),
      #000             calc(100% - var(--fadeB)),
      rgba(0,0,0,.844) calc(100% - var(--fadeB) * .75),
      rgba(0,0,0,.5)   calc(100% - var(--fadeB) * .5),
      rgba(0,0,0,.156) calc(100% - var(--fadeB) * .25),
      rgba(0,0,0,0)    100%);
  }
  .roster::-webkit-scrollbar{display:none}
  .grouphead{
    flex:none;font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;color:var(--gold);
    display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
    border-bottom:1px solid var(--gold-hair);
    padding:var(--s5) var(--s3) var(--s3);margin-top:var(--s1);
  }
  .grouphead span:last-child{color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .grouphead:first-child{margin-top:0;padding-top:2px}
  .st{
    flex:none;width:100%;display:flex;align-items:center;gap:var(--s5);
    min-height:var(--tap-min);padding:var(--s3) var(--s5) var(--s3) var(--s3);
    border:0;border-radius:var(--r-sm);background:var(--card);
    box-shadow:var(--edge-row);text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  }
  .st[data-state="pending"]{background:var(--card-quiet)}
  .st[data-state="pending"] .st-name{color:var(--ink-quiet)}
  .st:hover{background:var(--green-pale)}
  .st[aria-current="true"]{background:var(--green-deep);box-shadow:var(--edge-row),var(--lift-green)}
  .st[aria-current="true"] .st-name{color:#FBF6E8}
  .st[aria-current="true"] .st-note{color:rgba(251,246,232,.72)}
  .st[aria-current="true"] .st-num{background:transparent;color:#F0DDAA}
  .st[aria-current="true"] .st-num::after{background:rgba(240,221,170,.55)}
  .st-num{
    width:34px;height:34px;flex:none;display:grid;place-items:center;
    border-radius:var(--r-full);position:relative;background:#FEFCF7;
    font:600 var(--text-md)/1 var(--font-ui);color:var(--gold);
    font-variant-numeric:tabular-nums;
  }
  .st-num::after{
    content:"";position:absolute;inset:0;border-radius:var(--r-full);padding:1.6px;
    background:var(--gold-sheen);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  .st-text{flex:1;min-width:0}
  .st-name{
    display:block;font:400 var(--text-xl)/1.15 var(--font-display);color:var(--ink);
    letter-spacing:.004em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .st-note{
    display:block;margin-top:1px;font:400 var(--text-sm)/1.25 var(--font-ui);
    color:var(--ink-soft);font-variant-numeric:tabular-nums;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .st-mark{
    width:28px;height:28px;flex:none;border-radius:var(--r-full);
    display:grid;place-items:center;font-size:14px;line-height:1;color:var(--grey-line);
  }
  .st-mark[data-mark="done"]{background:var(--green-pale);color:var(--green-tick);font-weight:700}
  .st[aria-current="true"] .st-mark{background:rgba(251,246,232,.14);color:#F0DDAA}
  @media (max-width:1279px),(max-height:899px){
    .st-name{font-size:17.5px}
  }

  .entry-head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
    padding-bottom:var(--s4);border-bottom:1px solid var(--gold-hair);margin-bottom:var(--s2);
  }
  .entry-who{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--s4);flex-wrap:nowrap}
  .entry-who .who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .head-grade{flex:0 0 auto;display:flex;align-items:center;gap:var(--s3)}
  .head-grade .minilab{margin:0;white-space:nowrap}
  .head-grade input{width:62px;flex:0 0 62px;text-align:center;padding:0 var(--s1);
    font-variant-numeric:tabular-nums}
  .head-grade .grade-scale{font-size:var(--text-base);white-space:nowrap}
  @media (max-width:520px){ .entry-head{flex-wrap:wrap} }
  .who-cap{
    display:block;font:600 var(--text-xs)/1 var(--font-ui);
    letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--gold);
  }
  .who-name{font:400 26px/1.1 var(--font-display);color:var(--green);letter-spacing:.004em}
  .state-pill{
    flex:0 0 auto;font:600 10.5px/1.6 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--gold-line);
    color:var(--ink-soft);background:var(--card);
    padding:2px 9px;border-radius:var(--r-md);white-space:nowrap;
  }
  .state-pill[data-on=done]{box-shadow:inset 0 0 0 1px rgba(20,101,63,.25);background:var(--green-pale);color:var(--green)}
  .state-pill[data-on=todo]{box-shadow:inset 0 0 0 1px var(--gold-line);background:#FAF3E2;color:var(--gold)}

  .mobile-back{display:none}
  .fgrid{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
  .fgrid.two{grid-template-columns:minmax(0,1fr)}
  .field{min-width:0}
  .field label{margin-top:0}
  .lab{
    display:block;font:600 var(--text-xs)/1 var(--font-ui);
    letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink-soft);
    margin:0 0 var(--s3);
  }
  .lab .opt{
    font-weight:400;text-transform:none;letter-spacing:var(--track-tight);
    color:var(--gold);
  }
  /* ---- The picker: a text box that suggests -------------------------- */
  /* Ported from src/views/setup.ts, the control the live app already uses. */
  .picker{position:relative;display:block}
  .picker .inp{width:100%;padding-right:calc(var(--s8) + var(--s5))}
  /* The little arrow, drawn rather than typed, so it needs no icon file. */
  .picker-caret{
    position:absolute;right:var(--s6);top:50%;pointer-events:none;
    width:var(--s3);height:var(--s3);
    border-right:calc(var(--s1) / 2.5) solid var(--ink-soft);
    border-bottom:calc(var(--s1) / 2.5) solid var(--ink-soft);
    transform:translateY(-70%) rotate(45deg);
  }
  .picker-menu{
    position:absolute;left:0;right:0;top:calc(100% + var(--s2));z-index:20;
    margin:0;padding:var(--s2);list-style:none;
    max-height:calc(var(--tap-min) * 5);overflow-y:auto;overscroll-behavior:contain;
    background:var(--card);border-radius:var(--r-sm);
    box-shadow:var(--edge-row),var(--lift-quiet);
  }
  .picker-menu[hidden]{display:none}
  .picker-option{
    min-height:var(--tap-min);display:flex;align-items:center;
    padding:var(--s3) var(--s6);border-radius:var(--r-sm);cursor:pointer;
    font:400 var(--text-lg)/1.3 var(--font-ui);color:var(--ink);
  }
  .picker-option[hidden]{display:none}
  /* Hover and keyboard land on the SAME look, so the finger and the arrow
     keys never disagree about which row is about to be chosen. */
  .picker-option:hover,.picker-option.is-active{
    background:var(--green-pale);color:var(--green);
  }
  .subject-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s4);align-items:center}
  @media (max-width:640px){ .subject-row{grid-template-columns:minmax(0,1fr)} }
  .seg{display:flex;gap:var(--s2)}
  .seg button{
    flex:1;font:400 var(--text-lg)/1 var(--font-display);letter-spacing:var(--track-tight);
    cursor:pointer;border:0;border-radius:var(--r-sm);
    background:var(--card);box-shadow:var(--edge-row);color:var(--ink-quiet);
  }
  .seg button:hover{background:var(--green-pale)}
  .seg button[aria-pressed=true]{
    background:var(--green-pale);color:var(--green);
    box-shadow:inset 0 0 0 1.4px var(--green-tick);
  }
  .seg-spacer{height:var(--tap-min);margin-bottom:var(--s3)}
  .either{
    display:block;font:400 var(--text-sm)/1.45 var(--font-ui);
    color:var(--ink-soft);margin-top:var(--s3);
  }
  .desk input:disabled,.desk select:disabled{
    background:transparent;color:var(--ink-soft);cursor:not-allowed;
    box-shadow:inset 0 0 0 1px var(--grey-line);
  }
  /* every control on the Desk is the same height, so rows line up */
  .pane-entry{--ctl:46px}
  .pane-entry input[type=text],.pane-entry select,.pane-entry .seg button{
    box-sizing:border-box;height:var(--ctl);min-height:var(--ctl);
    padding:0 var(--s6);font-size:var(--text-lg);
  }
  .pane-entry select{padding-right:var(--s9)}
  .pane-entry .seg button{padding:0 var(--s5)}
  .pane-entry textarea{
    box-sizing:border-box;font-size:var(--text-lg);padding:var(--s4) var(--s6);line-height:1.45;
  }
  .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s2)}
  .pgrid input{font-variant-numeric:tabular-nums}
  .minilab{
    display:block;font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
    text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s2);
  }
  .workblock > input{margin-top:var(--s2)}
  .workblock{margin-top:var(--s7)}
  .scalecard{padding:var(--s7);margin:0 0 var(--s6)}
  .scalecard .seg{max-width:440px}
  .scalecard .seg button{
    height:var(--tap-min);min-height:var(--tap-min);padding:0 var(--s5);
    font:400 var(--text-lg)/1 var(--font-display);letter-spacing:var(--track-tight);
    border:0;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--edge-row);
    color:var(--ink-quiet);cursor:pointer;
  }
  .scalecard .seg button[aria-pressed=true]{
    background:var(--green-pale);color:var(--green);
    box-shadow:inset 0 0 0 1.4px var(--green-tick);
  }
  .scalecard .fieldnote{margin-top:var(--s4)}
  @media (max-width:520px){
    .pgrid{gap:var(--s2)}
    .pgrid input{padding:0 var(--s3);font-size:var(--text-md)}
  }
  .grade-row{display:flex;align-items:center;gap:var(--s3)}
  .grade-row input{width:100px;flex:0 0 100px;font-variant-numeric:tabular-nums}
  .grade-scale{font:400 var(--text-base)/1.3 var(--font-ui);color:var(--ink-soft);white-space:nowrap}
  .desk textarea{min-height:84px}
  .entry-foot{
    display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;
    border-top:1px solid var(--gold-hair);margin-top:var(--s6);padding-top:var(--s5);
  }
  .entry-foot .legend{margin:0;flex:1 1 240px}
  .entry-foot .btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--s3)}
  .desk .empty{
    font:400 var(--text-md)/1.6 var(--font-ui);color:var(--ink-soft);
    padding:var(--s9) var(--s6);text-align:center;
  }

  @media (min-width:880px){
    .desk{grid-template-columns:minmax(0,392px) minmax(0,1fr)}
  }
  @media (min-width:880px) and (max-width:1279px),(min-width:880px) and (max-height:899px){
    .desk{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s7)}
    .desk .pane{padding:var(--s5)}
    .roster{max-height:calc(100vh - var(--bh) - 330px);min-height:240px}
    .fgrid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  }
  @media (max-width:879px){
    .desk .pane-entry{display:none}
    body.entry-open .desk .pane-roster{display:none}
    body.entry-open .desk .pane-entry{display:block}
    body.entry-open .deskhead{display:none}
    .seg-spacer{display:none}
    .mobile-back{
      display:inline-flex;align-items:center;gap:var(--s2);
      font:400 var(--text-md)/1 var(--font-ui);
      background:none;border:none;color:var(--green);cursor:pointer;
      padding:0 0 var(--s4);text-decoration:underline;
      text-underline-offset:3px;text-decoration-color:var(--gold-line);
    }
  }

  /* ---------- timeline / stats ---------- */
  .tl{border-left:1px solid var(--gold-line);margin:var(--s4) 0;padding-left:var(--s6)}
  .tl-item{padding:var(--s5) 0;border-bottom:1px solid var(--gold-hair)}
  .tl-item:last-child{border-bottom:none}
  .tl-top{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline}
  .tl-date{
    font:600 var(--text-xs)/1 var(--font-ui);color:var(--gold);
    text-transform:uppercase;letter-spacing:var(--track-mid);
  }
  .tl-what{font:400 var(--text-xl)/1.25 var(--font-display);color:var(--green);margin-top:var(--s2)}
  .tl-note{font:400 var(--text-md)/1.5 var(--font-ui);color:var(--ink-quiet);margin-top:3px}
  .tl-note b{color:var(--ink);font-weight:600}
  .stats{display:flex;gap:var(--s4);flex-wrap:wrap;margin:var(--s6) 0}
  .stat{
    flex:1 1 140px;border:0;box-shadow:var(--edge-row);border-radius:var(--r-sm);
    background:var(--card);padding:var(--s5) var(--s6);
  }
  .stat .n{
    font:400 30px/1.05 var(--font-display);color:var(--green);
    font-variant-numeric:tabular-nums;letter-spacing:.004em;
  }
  .stat .l{font:400 var(--text-sm)/1.4 var(--font-ui);color:var(--ink-soft);margin-top:var(--s2)}

  table.months{
    width:100%;border-collapse:collapse;margin:var(--s5) 0;
    font:400 var(--text-md)/1.5 var(--font-ui);font-variant-numeric:tabular-nums;
    box-shadow:var(--edge-row);border-radius:var(--r-sm);overflow:hidden;background:var(--card);
  }
  table.months th,table.months td{border-bottom:1px solid var(--gold-hair);padding:var(--s4) var(--s5);text-align:left}
  table.months tr:last-child td{border-bottom:none}
  table.months th{
    background:var(--cream-2);font:600 var(--text-xs)/1 var(--font-ui);
    text-transform:uppercase;letter-spacing:var(--track-mid);color:var(--gold);
  }

  /* ---------- sitemap overlay (review scaffolding) ---------- */
  #sitemap{
    position:fixed;inset:0;z-index:90;background:rgba(26,26,28,.55);
    display:none;padding:20px 12px;overflow:auto;
  }
  #sitemap.on{display:block}
  #sitemap .panel{
    max-width:700px;margin:0 auto;background:var(--ground);
    border:0;box-shadow:var(--edge-row),0 30px 70px rgba(0,0,0,.35);
    border-radius:var(--r-panel);padding:var(--s7) var(--s7) var(--s8);
  }
  #sitemap .panel h2{margin:0 0 var(--s1)}
  #sitemap pre{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12.5px;line-height:1.85;white-space:pre;overflow-x:auto;
    margin:var(--s5) 0 0;color:var(--ink-quiet);
  }
  #sitemap pre a{text-decoration:none;color:var(--green)}
  #sitemap pre a:hover{text-decoration:underline;background:var(--green-pale)}
  #sitemap .cl{font:400 var(--text-sm)/1.5 var(--font-ui);color:var(--ink-soft)}
  .ok{
    border:0;box-shadow:inset 0 0 0 1px rgba(20,101,63,.25);
    background:var(--green-pale);border-radius:var(--r-sm);
    padding:var(--s6) var(--s7);margin:var(--s6) 0;
    font:400 var(--text-lg)/1.5 var(--font-ui);color:var(--ink);
  }