/* ==========================================================================
   NOVIKONTAS · admin panel

   Read by an office coordinator who wants one answer quickly - is the class
   running, what is the code, what still needs doing and for which group. So
   every screen says, top to bottom: where you are, what state it is in, and
   the one thing to do next. Structure, icons and status pills carry that;
   sentences are kept for the rare thing that truly needs one, and even then
   sit behind a small (i).

   One accent. Spacing on a 4/8 grid. A small type scale. Cards only where
   they group things; lists are rows with a hairline, never boxes in boxes.
   Every colour is a token, so the dark and the light theme are one design.

   Brand: the Novikontas Academy brandbook colours (navy, Novikontas blue,
   steel blue, light grey, pitch black) and the NA symbol as given - never
   boxed, outlined, recoloured or shadowed. Not its typeface: we keep ours.

   No "AI slop" - the generic look that says nobody designed this screen.
   These rules hold for the admin panel and every classroom page:
   - Flat colour. No gradients on buttons, cards or headers; no glows or
     coloured shadows; no frosted-glass blur. A gradient only where it draws
     data (a progress ring) or a loading skeleton.
   - No coloured stripe down one side of a rounded card. A state is a whole
     hairline border or a pill, not a side bar.
   - A colour means one thing everywhere: blue = act / here, green = done or
     passed, amber = needs attention, red = failed or destructive. No colour
     for decoration, no rainbow of tints. Team colours only mark teams.
   - A pill or a dot only for a real state that changes (live, planned,
     passed). Nothing pulses except a class that is live right now.
   - Icons from the one stroke set in index.html; never emoji as icons.
   - Labels in the body font, sentence case. Monospace only for codes,
     numbers and IDs a person reads out or types. No tiny UPPERCASE
     wide-tracked "eyebrow" labels, except the sidebar section names.
   - Real words for this place: plain, specific copy ("Start day 2"), not
     marketing filler ("Empower your training"). No placeholder people.
   - Motion only to show something changed (a row arriving, a panel
     opening), short and once; nothing animates for decoration.
   - Layout follows the job of the screen, not a template: no bento grids,
     no hero sections, no card for a single line of text.
   ========================================================================== */

:root{
  color-scheme:dark;
  /* Brand colours (Novikontas Academy brandbook): navy #0a2463, Novikontas
     blue #53a7db, steel blue #415c8f, light grey #e7ebf0, pitch black #011111.
     Dark is a deep navy-black; status colours stay muted, so nothing glows. */
  --bg:#0d1420;
  --surface:#141c29;
  --surface-2:#1a2332;
  --surface-3:#222d3f;
  --line:#232e3f;
  --line-strong:#33405a;
  --ink:#e7ebf0;
  --ink-2:#c0c8d3;
  --muted:#8e99a9;
  --accent:#53a7db;
  --accent-ink:#0a2463;
  --accent-soft:rgba(83,167,219,.12);
  --accent-line:rgba(83,167,219,.38);
  --logo-a:#ffffff; --logo-b:#ffffff;
  --ok:#8fbf9f;
  --ok-soft:rgba(143,191,159,.12);
  --ok-line:rgba(143,191,159,.34);
  --warn:#d3b06a;
  --warn-soft:rgba(211,176,106,.12);
  --warn-line:rgba(211,176,106,.34);
  --bad:#de8c86;
  --bad-soft:rgba(222,140,134,.12);
  --bad-line:rgba(222,140,134,.36);
  --bad-solid:#c4625b;
  --info:#9db3d8;
  --info-soft:rgba(157,179,216,.12);
  --info-line:rgba(157,179,216,.36);
  --shadow:0 18px 50px rgba(0,0,0,.42);
  --shadow-s:0 6px 18px rgba(0,0,0,.28);
  --backdrop:rgba(10,11,13,.62);
  --placeholder:#71757b;
  /* team colours: a name per team, a shade per theme */
  --team-teal:#79b2a8; --team-amber:#d0a85e; --team-violet:#a99cd0; --team-rose:#d08f9c;
  --team-sky:#86a9cd; --team-lime:#a5b872; --team-orange:#d09b6e; --team-slate:#9ba3ad;
  /* the scrollbar's thumb: resting, under the pointer, dragged */
  --sb-thumb:rgba(83,167,219,.3); --sb-thumb-hover:rgba(83,167,219,.58); --sb-thumb-active:#53a7db;

  /* type scale: 13 / 14 / 15 / 17 / 22 / 28 */
  --t-xs:13px; --t-s:14px; --t-m:15px; --t-l:17px; --t-xl:22px; --t-2xl:28px;
  /* spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r:10px; --r-lg:14px;
  --side:264px;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-m);
  line-height:1.5;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
/* The light theme is the same design with other values. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#eef1f5;
    --surface:#ffffff;
    --surface-2:#f4f6f9;
    --surface-3:#e7ebf0;
    --line:#dde2e9;
    --line-strong:#c5cdd8;
    --ink:#011111;
    --ink-2:#34404f;
    --muted:#556172;
    --accent:#0a2463;
    --accent-ink:#ffffff;
    --accent-soft:rgba(10,36,99,.07);
    --accent-line:rgba(10,36,99,.3);
    --logo-a:#022367; --logo-b:#29a7df;
    --ok:#2f6a47;
    --ok-soft:rgba(63,122,86,.09);
    --ok-line:rgba(63,122,86,.32);
    --warn:#755310;
    --warn-soft:rgba(176,132,40,.12);
    --warn-line:rgba(150,110,30,.36);
    --bad:#ad423c;
    --bad-soft:rgba(173,66,60,.08);
    --bad-line:rgba(173,66,60,.34);
    --bad-solid:#b24a43;
    --info:#415c8f;
    --info-soft:rgba(65,92,143,.08);
    --info-line:rgba(65,92,143,.32);
    --shadow:0 18px 50px rgba(31,34,39,.12);
    --shadow-s:0 6px 18px rgba(31,34,39,.08);
    --backdrop:rgba(31,34,39,.36);
    --placeholder:#8f9399;
    --team-teal:#2f6f66; --team-amber:#7f5c14; --team-violet:#6f5fa8; --team-rose:#a8566a;
    --team-sky:#3f6f9e; --team-lime:#5f7330; --team-orange:#a5603a; --team-slate:#5a636e;
    --sb-thumb:rgba(10,36,99,.26); --sb-thumb-hover:rgba(10,36,99,.48); --sb-thumb-active:#0a2463;
  }
}

/* The NOVIKONTAS scrollbar, the same on every page (classroom/shared/ui.css has these rules
   too): a slim rounded thumb in the brand blue - navy on the light theme - on a clear track,
   brighter under the pointer, full colour while dragged. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{min-height:40px;border:3px solid transparent;border-radius:99px;background:var(--sb-thumb) padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}
::-webkit-scrollbar-thumb:active{background-color:var(--sb-thumb-active)}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb-hover) transparent}}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--bg)}
body{min-height:100vh;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:600}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em;font-weight:600}
p{margin:0}
.muted{color:var(--muted)}
.mono,code{font-family:var(--mono)}
code{font-size:var(--t-xs);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);color:var(--ink-2);font-family:var(--mono);font-size:12.5px;line-height:1.6;margin:var(--s3) 0 0}
pre:empty{display:none}
.error{color:var(--bad);margin:var(--s2) 0 0}
.error:empty{display:none}
.warn{color:var(--warn)}
.ok-text{color:var(--ok)}
.hint{color:var(--muted);font-size:var(--t-s);margin:var(--s2) 0 0}
.pad{padding:var(--s4) 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}

/* ---- icons: one 24px stroke set, drawn from the sprite in index.html ---- */
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.s{width:16px;height:16px}
svg.i.xs{width:14px;height:14px}
svg.i.l{width:22px;height:22px}

/* ==== layout: a sidebar on a computer, a bar at the bottom on a phone ==== */
.layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.main{min-width:0;padding:var(--s6) var(--s7) 96px}
.main>.tab{max-width:1240px;margin:0 auto}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s3) var(--s4);border-right:1px solid var(--line);background:var(--surface);overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 var(--s2) var(--s4)}
.logo{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;letter-spacing:-.02em}
/* the brand's NA symbol: navy and blue on light, the white version on dark, never boxed or shadowed */
svg.logo{width:44px;height:28px;border-radius:0;background:none;display:block}
.brand div>b{display:block;font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:600}
.brand div>span{display:block;font-size:var(--t-m);font-weight:600;color:var(--ink);line-height:1.25}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:var(--s4) var(--s3) var(--s1)}
.nav-item{display:flex;align-items:center;gap:var(--s3);width:100%;justify-content:flex-start;padding:11px var(--s3);border:0;border-radius:var(--r);background:none;color:var(--ink-2);font-weight:500;font-size:var(--t-m);text-align:left}
.nav-item:hover{background:var(--surface-2);color:var(--ink);border:0}
.nav-item.active{background:var(--surface-3);color:var(--ink)}
.nav-item.active svg.i{color:var(--accent)}
.nav-item .badge{margin-left:auto}
.rep{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--s4)}
.rep .rep-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:var(--t-xs);color:var(--ink-2)}
.rep .rep-text{margin:var(--s2) 0;white-space:pre-wrap}
.rep .rep-where{font-size:var(--t-s);color:var(--ink-2)}
.rep .rep-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s3)}
.rep img{width:100%;border-radius:var(--r);border:1px solid var(--line);cursor:zoom-in;display:block}
.rep-pics{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.rep-pics img:first-child{grid-column:1/-1}
.rep-pics img:not(:first-child){aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){.rep{grid-template-columns:1fr}}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line)}
.me{display:flex;align-items:center;gap:10px;padding:var(--s2)}
.me-text{min-width:0;flex:1}
.me-text b{display:block;font-size:var(--t-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-text span{display:block;font-size:var(--t-xs);color:var(--muted)}
#connection{margin:0;padding:0 var(--s2);font-size:var(--t-xs);color:var(--muted);display:flex;align-items:center;gap:6px}
#connection::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
#connection.on::before{background:var(--ok)}
.tabbar{display:none}
.scrim{display:none}

@media (max-width:900px){
  .layout{display:block}
  .main{padding:var(--s5) var(--s4) calc(88px + env(safe-area-inset-bottom))}
  /* the sidebar becomes a drawer, opened from "More" */
  .sidebar{position:fixed;z-index:30;left:0;top:0;bottom:0;width:min(300px,86vw);height:auto;transform:translateX(-102%);transition:transform .18s ease;box-shadow:var(--shadow)}
  .layout.drawer .sidebar{transform:none}
  .nav-item{min-height:44px}
  .layout.drawer .scrim{display:block;position:fixed;inset:0;z-index:29;background:var(--backdrop)}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:20;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:6px 2px;min-height:52px;color:var(--muted);font-size:11px;font-weight:500;border-radius:var(--r)}
  .tabbar button:hover{background:none;border:0;color:var(--ink)}
  .tabbar button.active{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* ---- one section at a time ---- */
.tab{display:none}
.tab.on{display:block}

/* ==== page heading: where am I, what state, what next ==== */
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--t-s);color:var(--muted);margin:0 0 var(--s3);flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink);text-decoration:none}
.crumbs svg.i{width:14px;height:14px;opacity:.7}
.crumbs span{color:var(--ink-2);overflow-wrap:anywhere}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);margin:0 0 var(--s5)}
.page-head h1{font-size:var(--t-2xl);line-height:1.25;font-weight:650;overflow-wrap:anywhere}
.page-sub{margin-top:var(--s1);color:var(--muted)}
.title-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;flex:none;align-items:center}
.meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s2);color:var(--ink-2);font-size:var(--t-s)}
.meta>span,.meta>a{display:inline-flex;align-items:center;gap:6px;min-width:0}
.meta svg.i{width:16px;height:16px;color:var(--muted)}
.meta a{color:var(--ink-2)}
.meta a:hover{color:var(--accent)}
@media (max-width:640px){
  .page-head{flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}
  .page-head h1{font-size:22px}
  .page-head>.actions{width:100%}
  .page-head>.actions>.primary{flex:1}
}

/* a section of a page: a small title, a count, an action at the end */
.section{margin:0 0 var(--s6)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s3);min-height:32px}
.section-head h2{font-size:var(--t-l);display:flex;align-items:center;gap:var(--s2)}
.section-head .actions{gap:var(--s2)}

/* ==== cards ==== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin:0 0 var(--s4)}
.card>h3,.card-head h3{font-size:var(--t-m);font-weight:600;display:flex;align-items:center;gap:var(--s2)}
.card>h3{margin:0 0 var(--s3)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s3)}
.card.flush{padding:0;overflow:hidden}
.card.flush>.card-head{padding:var(--s4) var(--s5) 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:stretch}
.grid-2>.card{margin:0}
.grid-2+*{margin-top:var(--s4)}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
@media (max-width:640px){.card{padding:var(--s4)}.card.flush>.card-head{padding:var(--s4) var(--s4) 0}}

/* ==== lists: one row per thing; the whole row opens it ==== */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.list:empty{display:none}
.list>p{margin:0;padding:var(--s4) var(--s5)}
.list.flush{background:none;border:0;border-radius:0;overflow:visible}
.list-head,.item{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.7fr) minmax(0,1.5fr) 72px 128px;gap:var(--s4);align-items:center;padding:var(--s3) var(--s5)}
.list-head{font-size:var(--t-xs);font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);padding-top:10px;padding-bottom:10px}
.list-head span:last-child{text-align:right}
.item{color:var(--ink);border-bottom:1px solid var(--line);min-height:60px}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface-2);text-decoration:none}
.item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cell{min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:1px}
.cell b{font-weight:600;font-size:var(--t-m)}
.cell-row{display:flex;align-items:center;gap:var(--s2);min-width:0}
.item-end{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2)}
.num{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.num svg.i{width:16px;height:16px;color:var(--muted)}
.chev{color:var(--muted);width:16px;height:16px}
.sub{display:block;color:var(--muted);font-size:var(--t-s);overflow-wrap:anywhere}
.sub.attn{color:var(--warn)}
.list.flush .item{padding-left:0;padding-right:0}
.list.flush .item:hover{background:none}
.list.flush .item:hover .cell b{text-decoration:underline}
#courseList .list-head,#courseList .item{grid-template-columns:minmax(0,2.4fr) minmax(0,1.4fr) minmax(0,1fr) 128px}
@media (max-width:760px){
  .list-head{display:none}
  .item,#courseList .item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a e" "b e" "c e";gap:2px var(--s3);padding:var(--s3) var(--s4)}
  .item>.cell:nth-child(1){grid-area:a}
  .item>.cell:nth-child(2){grid-area:b}
  .item>.cell:nth-child(3){grid-area:c}
  .item>.cell-people{display:none}
  .item>.item-end{grid-area:e}
  .item>.cell:nth-child(2) .sub,.item>.cell:nth-child(3) .sub{display:inline}
  .item>.cell:nth-child(n+2){flex-direction:row;flex-wrap:wrap;gap:0 6px;font-size:var(--t-s);color:var(--ink-2)}
  .item>.cell:nth-child(2) .sub::before{content:"· "}
  .item .who .avatar{width:20px;height:20px;font-size:9px}
}

/* ==== status: one pill per thing, the same words everywhere ==== */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;font-size:var(--t-xs);font-weight:600;white-space:nowrap;line-height:20px;
  background:var(--surface-3);color:var(--ink-2);vertical-align:middle;border:1px solid transparent}
.pill.small{font-size:11.5px;padding:0 8px;line-height:20px}
.pill.ok,.pill.live{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
.pill.outline{background:none;border-color:var(--line-strong)}
.pill svg.i{width:13px;height:13px;stroke-width:2.2}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
/* only a class that is live right now pulses; an online tablet is a still dot */
.pill.live .dot,.ls-state .dot{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ok-line)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.dot,.pill.live .dot,.ls-state .dot{animation:none}}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--surface-3);color:var(--ink-2);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.count:empty{display:none}
.count.warn{background:var(--warn-soft);color:var(--warn)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:700}
.badge:empty{display:none}
.tabbar .badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:16px;height:16px;font-size:10px}
.tabbar button{position:relative}

/* a person, said by their initials */
.avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-2);font-size:11px;font-weight:650;letter-spacing:.02em;border:1px solid var(--line-strong)}
.avatar.l{width:36px;height:36px;font-size:13px}
.avatar.none{background:none;border-style:dashed;color:var(--muted)}
.who{display:inline-flex;align-items:center;gap:var(--s2);min-width:0}
.who>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* a small (i): the explanation is there for whoever asks, and out of the way otherwise */
.tip{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--muted);cursor:help;vertical-align:middle;flex:none}
.tip:hover,.tip:focus-visible{color:var(--ink)}
.tip svg.i{width:16px;height:16px}
.tip::after{content:attr(data-tip);position:absolute;z-index:40;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(300px,80vw);padding:8px 10px;border-radius:var(--r);background:var(--surface-3);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-s);font-size:var(--t-s);font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;pointer-events:none;display:none}
/* drawn only while asked for: a hidden tooltip still widens the page on a phone */
.tip:hover::after,.tip:focus-visible::after,.tip:focus::after{display:none}
/* The tooltip itself floats over the page (app.js): drawn inside a card it was cut off by the
   card's edges or ran off the top of the screen. It is placed where there is room. */
#tipFloat{position:fixed;z-index:1000;max-width:min(320px,calc(100vw - 24px));padding:8px 10px;border-radius:var(--r);background:var(--surface-3);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-s);font-size:var(--t-s);font-weight:400;line-height:1.45;text-align:left;white-space:normal;pointer-events:none;display:none}
#tipFloat.on{display:block}
.tip.left::after{left:auto;right:-8px;transform:none}
.tip.right::after{left:-8px;transform:none}
.tip.below::after{bottom:auto;top:calc(100% + 8px)}

/* ==== buttons: secondary by default, one primary per place, danger in red ==== */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font:inherit;font-weight:550;font-size:var(--t-s);line-height:1.2;border-radius:var(--r);padding:0 16px;min-height:40px;margin:0;cursor:pointer;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong);transition:background .12s ease,border-color .12s ease,filter .12s ease,transform .06s ease;text-decoration:none;white-space:nowrap}
button:hover,.btn:hover{background:var(--surface-3);border-color:var(--muted);text-decoration:none}
button:active:not(:disabled),.btn:active{transform:translateY(1px)}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:650}
button.primary:hover,.btn.primary:hover{filter:brightness(1.07);background:var(--accent);border-color:transparent}
button.danger{background:transparent;color:var(--bad);border-color:var(--bad-line)}
button.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
button.danger-solid{background:var(--bad-solid);color:#fff;border-color:transparent;font-weight:650}
button.danger-solid:hover{filter:brightness(1.06);background:var(--bad-solid);border-color:transparent}
button.small,.btn.small,button.quiet{min-height:32px;padding:0 12px;font-size:var(--t-xs)}
button.ghost{background:none;border-color:transparent;color:var(--ink-2)}
button.ghost:hover{background:var(--surface-2);border-color:transparent;color:var(--ink)}
button.icon{width:40px;padding:0;min-height:40px}
button.icon.small{width:32px;min-height:32px}
button.link{background:none;border:0;padding:4px 2px;min-height:0;color:var(--accent);font-weight:500;font-size:var(--t-s)}
button.link:hover{background:none;text-decoration:underline}
button.link.danger{color:var(--bad)}
button:disabled,button:disabled:hover{opacity:.45;cursor:not-allowed;filter:none;background:var(--surface-2);border-color:var(--line-strong);transform:none}
button.primary:disabled,button.primary:disabled:hover{background:var(--surface-3);color:var(--muted);border-color:transparent;opacity:1}
button.link:disabled,button.ghost:disabled{background:none;border-color:transparent}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);align-items:center}
@media (max-width:640px){button,.btn{min-height:40px}button.small,.btn.small,button.quiet{min-height:34px}button.icon{width:40px;min-height:40px}}
/* keyboard focus: one accent ring on everything pressable */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* ==== forms ==== */
label{display:grid;gap:6px;margin:var(--s4) 0 0;color:var(--ink-2);font-size:var(--t-s);font-weight:500}
label>span:first-child{display:flex;align-items:center;gap:6px}
.opt{color:var(--muted);font-weight:400;font-size:var(--t-xs)}
input,select,textarea{background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r);padding:0 14px;min-height:44px;color:var(--ink);font:inherit;font-size:var(--t-m);min-width:0;width:100%}
textarea{padding:10px 12px;resize:vertical;line-height:1.5}
select{padding-right:8px}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;margin:0;accent-color:var(--accent);flex:none}
progress{width:100%;height:6px;border-radius:99px;overflow:hidden;accent-color:var(--accent);margin:var(--s3) 0 0;appearance:none;border:0;background:var(--surface-3)}
progress::-webkit-progress-bar{background:var(--surface-3)}
progress::-webkit-progress-value{background:var(--accent);border-radius:99px}
progress::-moz-progress-bar{background:var(--accent)}
.fields{display:grid;grid-template-columns:2fr 2fr 1fr;gap:0 var(--s3)}
.fields-2{grid-template-columns:1fr 1fr}
.inline-form{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.inline-form label{margin:0}
.inline-form .grow{flex:1 1 220px}
.big-input{font-family:var(--mono);font-size:20px;letter-spacing:.14em;text-transform:uppercase;min-height:48px}
details.more{margin-top:var(--s4)}
details.more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:var(--t-s);font-weight:500;user-select:none;min-height:32px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary svg.i{width:16px;height:16px;transition:transform .12s ease;color:var(--muted)}
details.more[open]>summary svg.i{transform:rotate(90deg)}
details.more>summary:hover{color:var(--ink)}
@media (max-width:640px){.fields,.fields-2{grid-template-columns:1fr}}

/* ==== filters and section tabs ==== */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s3)}
.filters{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:3px;flex-wrap:wrap;max-width:100%}
.seg{background:none;border:0;min-height:32px;padding:0 12px;font-size:var(--t-s);font-weight:500;color:var(--muted);border-radius:6px;gap:6px}
.seg:hover{background:var(--surface-2);color:var(--ink);border:0}
.seg.on{background:var(--surface-3);color:var(--ink)}
.seg .count{height:18px;min-width:18px;font-size:11px;background:none;color:var(--muted);padding:0 2px}
.seg.on .count{color:var(--ink-2)}
.search{position:relative;flex:0 1 260px;margin:0}
.search svg.i{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.search input{padding-left:34px;min-height:40px}
@media (max-width:640px){.search{flex:1 1 100%}.filters{width:100%;overflow-x:auto;flex-wrap:nowrap}.seg{flex:1 0 auto}}
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);margin:0 0 var(--s5)}
.tabs a{display:inline-flex;align-items:center;gap:6px;padding:10px var(--s3);color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs a:focus-visible{outline-offset:-3px;border-radius:6px}
@media (max-width:480px){.tabs{gap:0;justify-content:space-between}.tabs a{padding:10px 6px;font-size:var(--t-s)}.tabs .count{display:none}}

/* ==== empty states: what is missing, and the one thing to do about it ==== */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s2);padding:var(--s6) var(--s5)}
.empty .e-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);margin-bottom:var(--s1)}
.empty .e-ico svg.i{width:22px;height:22px}
.empty b{font-size:var(--t-l);font-weight:600}
.empty p{color:var(--muted);max-width:46ch}
.empty .btn,.empty button{margin-top:var(--s2)}
.empty.boxed{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-lg)}
.empty.small{padding:var(--s5) var(--s4)}
.inline-empty{display:flex;align-items:center;gap:var(--s2);color:var(--muted);padding:var(--s2) 0}
.inline-empty svg.i{width:16px;height:16px}

/* calm loading: grey bars where the content will be */
.skel{display:flex;flex-direction:column;gap:10px;padding:var(--s4) 0}
.skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}
.skel i:nth-child(2n){width:72%}
.skel i:nth-child(3n){width:48%}
.list>.skel{padding:var(--s4) var(--s5)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}}

/* ==== numbers ==== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3);margin:0}
.stat{min-width:0}
.stat .v{font-size:var(--t-xl);font-weight:650;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.stat .v small{font-size:var(--t-s);font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.stat .l{font-size:var(--t-xs);color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:4px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}}
/* the days of a group as one bar: done, today, still to come */
.daybar{display:flex;gap:4px;margin:var(--s3) 0 var(--s4)}
.daybar i{flex:1;height:8px;border-radius:99px;background:var(--surface-3)}
.daybar i.done{background:var(--accent)}
.daybar i.now{background:var(--ok);outline:1px solid var(--ok-line);outline-offset:2px}
.prog-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.prog-head b{font-size:var(--t-xl);font-weight:650;letter-spacing:-.02em}
.prog-head b small{font-size:var(--t-s);color:var(--muted);font-weight:500;margin-left:4px}
.meter{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:var(--s2)}
.meter i{display:block;height:100%;background:var(--accent);border-radius:99px}
.meter.ok i{background:var(--ok)}

/* a short list of what makes a group ready, each with its state and its fix */
.checklist{display:flex;flex-direction:column}
.check{display:flex;align-items:center;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);min-height:48px}
.check:last-child{border-bottom:0}
.check-ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--ok-soft);color:var(--ok)}
.check-ico svg.i{width:14px;height:14px;stroke-width:2.4}
.check.is-todo .check-ico{background:var(--warn-soft);color:var(--warn)}
.check.off .check-ico{background:var(--surface-3);color:var(--muted)}
.check-main{flex:1;min-width:0}
.check-main b{font-weight:500;display:block}
.check-main .sub{font-size:var(--t-xs)}

/* ==== Today ==== */
.today-date{color:var(--muted);margin-top:var(--s1)}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.live-card{position:relative;display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5) var(--s4);color:var(--ink);transition:border-color .12s ease,background .12s ease}
.live-card.has-link:hover{border-color:var(--line-strong);background:var(--surface-2)}
.live-card:focus-within{border-color:var(--line-strong)}
.lc-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.lc-since{color:var(--muted);font-size:var(--t-xs)}
.lc-title a{color:var(--ink);font-size:18px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.lc-title a:hover{text-decoration:none}
.lc-title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.lc-title a:focus-visible{outline:none}
.lc-title a:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.lc-title .sub{margin-top:2px}
.lc-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);color:var(--ink-2);font-size:var(--t-s)}
.lc-meta>span{display:inline-flex;align-items:center;gap:6px}
.lc-meta svg.i{width:16px;height:16px;color:var(--muted)}
.lc-code{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.lc-code .lbl{color:var(--muted);font-size:var(--t-xs);font-weight:600;display:block}
.code{font-family:var(--mono);font-weight:700;letter-spacing:.14em;color:var(--ink);line-height:1.1}
.lc-code .code{font-size:26px;color:var(--accent)}
.copy{position:relative;z-index:1}
.live-none{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted)}
.live-none svg.i{width:20px;height:20px}

/* to do: who it is about, what is missing, where it is fixed */
.todo-list{display:flex;flex-direction:column}
.todo{display:grid;grid-template-columns:32px minmax(0,1fr) auto 16px;align-items:center;gap:var(--s3);padding:10px var(--s5);color:var(--ink);border-bottom:1px solid var(--line);min-height:60px}
.todo:last-child{border-bottom:0}
.todo:hover{background:var(--surface-2);text-decoration:none}
.todo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.todo-ico{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.todo-ico svg.i{width:16px;height:16px}
.todo-main{min-width:0}
.todo-main b{display:block;overflow-wrap:anywhere}
.todo-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.todo-do{color:var(--accent);font-size:var(--t-s);font-weight:600;white-space:nowrap}
.all-set{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s5);color:var(--ok)}
.all-set svg.i{width:18px;height:18px}
@media (max-width:640px){
  .todo{grid-template-columns:32px minmax(0,1fr) 16px;padding:10px var(--s4)}
  .todo-tags{grid-column:2;justify-content:flex-start;grid-row:2}
  .todo>.chev{grid-column:3;grid-row:1/3}
}
/* coming up: a date block, then the group */
.cal{width:44px;flex:none;text-align:center;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;line-height:1.1;background:var(--surface-2)}
.cal small{display:block;font-size:var(--t-xs);font-weight:650;color:var(--bad);padding:3px 0 1px;background:var(--surface-3)}
.cal b{display:block;font-size:17px;font-weight:650;padding:3px 0 4px;font-variant-numeric:tabular-nums}
.up{display:grid;grid-template-columns:44px minmax(0,1fr) auto 16px;gap:var(--s3);align-items:center;padding:10px var(--s5);border-bottom:1px solid var(--line);color:var(--ink);min-height:64px}
.up:last-child{border-bottom:0}
.up:hover{background:var(--surface-2);text-decoration:none}
.up:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.up .when{font-size:var(--t-s);color:var(--ink-2);text-align:right;white-space:nowrap}
@media (max-width:640px){.up{padding:10px var(--s4)}}
.getting-started .check{padding:var(--s3) 0}
.step-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-2);font-size:var(--t-xs);font-weight:700}

/* ==== a group: the live strip, people and their days ==== */
.live-strip{display:flex;align-items:center;gap:var(--s4) var(--s5);flex-wrap:wrap;background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:var(--r-lg);padding:var(--s3) var(--s5);margin:0 0 var(--s5)}
.live-strip .ls-state{display:flex;align-items:center;gap:var(--s2);color:var(--ok);font-weight:600}
.live-strip .ls-text{color:var(--ink-2);font-size:var(--t-s)}
.live-strip .ls-code{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.live-strip .ls-code .lbl{font-size:var(--t-xs);color:var(--muted);font-weight:600}
.live-strip .code{font-size:28px}
@media (max-width:640px){.live-strip{padding:var(--s3) var(--s4)}.live-strip .ls-code{margin-left:0;width:100%;justify-content:space-between}.live-strip .code{font-size:26px}}
dl.facts{margin:0;display:grid}
dl.facts>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);align-items:center;min-height:44px}
dl.facts>div:last-child{border-bottom:0}
dt{color:var(--muted);font-size:var(--t-s)}
dd{margin:0;overflow-wrap:anywhere}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);margin:var(--s5) 0 0}
.danger-row>div{display:flex;align-items:center;gap:var(--s2);color:var(--ink-2)}
.legend{display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;color:var(--muted);font-size:var(--t-xs);margin:0 0 var(--s3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .d{width:18px;height:18px;font-size:10px}
.person{display:grid;grid-template-columns:minmax(0,1.5fr) auto auto;grid-template-areas:"main days actions" "extra extra extra";gap:var(--s2) var(--s5);align-items:center;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.p-main{grid-area:main;min-width:0}
.p-main>b{display:block}
.p-days{grid-area:days;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.p-actions{grid-area:actions;display:flex;align-items:center;gap:var(--s2);justify-content:flex-end}
.p-extra{grid-area:extra}
.person.off{opacity:.6}
.notes{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:6px}
.note{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:1px 7px;max-width:100%}
.note.neutral{color:var(--ink-2);background:var(--surface-3)}
.note svg.i{width:12px;height:12px;stroke-width:2.2}
@media (max-width:760px){
  .person{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main actions" "days days" "extra extra";padding:var(--s3) var(--s4)}
}
.days{display:inline-flex;gap:4px;flex-wrap:wrap}
.d{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-xs);font-weight:650;font-style:normal;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-strong);color:var(--muted);background:transparent}
.d.pass{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.d.credit{background:var(--info-soft);border-color:var(--info-line);color:var(--info)}
.d.miss{border-style:dashed}
.d.today{border-color:var(--ink-2);border-style:solid;color:var(--ink)}
.verdict{min-width:96px;display:inline-flex;justify-content:flex-end}
@media (max-width:760px){.verdict{min-width:0}}
.callout{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;background:var(--info-soft);border:1px solid var(--info-line);border-radius:var(--r);padding:var(--s2) var(--s3);margin:var(--s1) 0 0;color:var(--ink-2);font-size:var(--t-s)}
.callout.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.callout>span{flex:1 1 220px;display:flex;align-items:center;gap:var(--s2)}
.callout>span svg.i{width:16px;height:16px;color:var(--info)}
.callout.warn>span svg.i{color:var(--warn)}
.add-people{border-color:var(--line-strong)}
.add-people textarea{margin-top:var(--s2);font-family:inherit}

/* a menu of the less common actions on a row */
details.menu{position:relative}
details.menu>summary{list-style:none;cursor:pointer;width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;color:var(--muted);border:1px solid transparent}
details.menu>summary::-webkit-details-marker{display:none}
details.menu>summary:hover,details.menu[open]>summary{background:var(--surface-3);color:var(--ink)}
details.menu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.menu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:25;min-width:200px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-s);padding:4px;display:flex;flex-direction:column}
.menu-pop button{justify-content:flex-start;background:none;border:0;min-height:36px;padding:0 10px;font-weight:500;color:var(--ink);width:100%}
.menu-pop button:hover{background:var(--surface-2)}
.menu-pop button.danger{color:var(--bad)}
.menu-pop button.danger:hover{background:var(--bad-soft)}
.menu-pop button svg.i{width:16px;height:16px;color:var(--muted)}
.menu-pop button.danger svg.i{color:var(--bad)}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 0}
@media (max-width:640px){details.menu>summary{width:40px;height:40px}}

/* ==== days ==== */
.day{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--s2) var(--s4);align-items:start;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.day:last-child{border-bottom:0}
.dn{font-weight:600}
.dn .sub{font-weight:400;font-size:var(--t-xs)}
.day-mid{min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:1px}
.day-end{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.day.future{color:var(--muted);padding-top:10px;padding-bottom:10px}
.day.future .dn{color:var(--muted);font-weight:500}
.ex{margin:0;padding:0;list-style:none;color:var(--ink-2);font-size:var(--t-s);display:flex;flex-direction:column;gap:4px}
.ex li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ex svg.i{width:14px;height:14px;color:var(--warn)}
@media (max-width:640px){.day{grid-template-columns:minmax(0,1fr) auto;padding:var(--s3) var(--s4)}.day-mid{grid-column:1/-1;grid-row:2}}

/* ==== results: a grid because the question is a grid - this person, that test ==== */
.res-sum{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3)}
.res-sum .lbl{color:var(--muted);font-size:var(--t-xs);font-weight:600;margin-right:var(--s1)}
.res-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;-webkit-overflow-scrolling:touch}
table.res{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.res th,.res td{padding:10px var(--s3);border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.res thead th{font-size:var(--t-xs);font-weight:600;color:var(--muted);padding-top:9px;padding-bottom:9px;background:var(--surface)}
.res thead th:first-child,.res tbody th{text-align:left}
.res thead th:first-child{position:sticky;left:0;z-index:2}
.res tbody th{font-weight:400;position:sticky;left:0;background:var(--surface);z-index:1;min-width:190px;max-width:240px}
.res tbody tr:last-child>*{border-bottom:0}
.res-row.has{cursor:pointer}
.res-row.has:hover>*{background:var(--surface-2)}
.res-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.res .rwho{display:flex;align-items:center;gap:var(--s2);white-space:normal}
.res .rwho .chev{transition:transform .12s ease;flex:none}
.res .rwho .chev.blank{visibility:hidden}
.res-row.open .chev{transform:rotate(90deg)}
.res td.fin,.res th.fin{border-left:1px solid var(--line)}
.sc{display:inline-block;min-width:48px;padding:2px 8px;border-radius:6px;font-weight:600;font-size:var(--t-s);background:var(--surface-3);color:var(--ink-2)}
.sc.ok{background:var(--ok-soft);color:var(--ok)}
.sc.bad{background:var(--bad-soft);color:var(--bad)}
.sc.none{background:none;color:var(--muted);font-weight:400}
.sc sup{font-size:10px;margin-left:2px;opacity:.85}
.tk{color:var(--ink-2);font-weight:600}
.tk small{color:var(--muted);font-weight:500;font-size:var(--t-xs)}
.res-detail td{text-align:left;background:var(--surface-2);padding:var(--s1) var(--s5) var(--s4);white-space:normal}
.rd{position:sticky;left:var(--s5);max-width:min(760px,calc(100vw - 80px))}
.rd-mod h4{margin:var(--s3) 0 var(--s1);font-size:var(--t-xs);font-weight:600;color:var(--muted)}
ul.rl{list-style:none;margin:0;padding:0}
ul.rl li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:6px 0;border-bottom:1px solid var(--line)}
ul.rl li:last-child{border-bottom:0}
.rl-name{min-width:0;overflow-wrap:anywhere}
.rl-end{display:flex;align-items:center;gap:var(--s3);flex:none;font-size:var(--t-xs)}
@media (max-width:640px){
  .res th,.res td{padding:9px 8px}
  .res tbody th{min-width:132px;max-width:150px}
  .res-detail td{padding:4px 12px 12px}
  ul.rl li{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ==== a course ==== */
.desc{color:var(--ink-2);margin:0;max-width:75ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.desc.open{display:block}
ol.mods{margin:0;padding:0;list-style:none;counter-reset:m;columns:2;column-gap:var(--s6)}
ol.mods li{counter-increment:m;display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;border-bottom:1px solid var(--line);break-inside:avoid}
ol.mods li>span:first-child{display:flex;gap:var(--s3);min-width:0}
ol.mods li>span:first-child::before{content:counter(m);width:22px;flex:none;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:760px){ol.mods{columns:1}}
/* the ILO map: a module-by-outcome grid, then every Sub-ILO with where it is taught and checked */
.ilo-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ilo-sum{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;color:var(--ink-2);font-size:var(--t-s);margin:0 0 var(--s4)}
.ilo-sum>span:first-child{margin-right:var(--s2)}
.ilo-grid-wrap{overflow-x:auto;margin:0 0 var(--s5);padding-bottom:2px}
table.ilo-grid{border-collapse:separate;border-spacing:3px;font-size:12px;font-variant-numeric:tabular-nums}
table.ilo-grid th{color:var(--muted);font-weight:600;padding:0 4px;white-space:nowrap}
table.ilo-grid thead th{text-align:center;min-width:24px}
table.ilo-grid tbody th{text-align:left;padding-right:var(--s2)}
table.ilo-grid td{width:26px;height:24px;border-radius:5px;background:var(--surface-2);text-align:center;color:transparent}
table.ilo-grid td.on{background:var(--ok-soft);color:var(--ok);font-weight:650;box-shadow:inset 0 0 0 1px var(--ok-line)}
table.ilo-grid td.gap{background:var(--bad-soft);color:var(--bad);font-weight:650;box-shadow:inset 0 0 0 1px var(--bad-line)}
.ilo-main{margin:0 0 var(--s5)}
.ilo-main h4{display:flex;gap:var(--s3);align-items:baseline;margin:0 0 var(--s2);font-size:var(--t-m);font-weight:600;line-height:1.4}
.ilo-mid{flex:none;font-size:var(--t-xs);font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 8px;white-space:nowrap}
.ilo-head,details.ilo-row>summary{display:grid;grid-template-columns:52px minmax(0,1fr) 58px 132px 104px 96px 16px;gap:var(--s3);align-items:center}
.ilo-head{padding:0 var(--s2) 6px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
details.ilo-row{border-bottom:1px solid var(--line)}
details.ilo-row>summary{list-style:none;cursor:pointer;padding:10px var(--s2);border-radius:6px;font-size:var(--t-s)}
details.ilo-row>summary::-webkit-details-marker{display:none}
details.ilo-row>summary:hover{background:var(--surface-2)}
details.ilo-row>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
details.ilo-row>summary svg.chev{width:16px;height:16px;color:var(--muted);transition:transform .12s ease}
details.ilo-row[open]>summary svg.chev{transform:rotate(90deg)}
details.ilo-row.has-gap>summary{background:var(--bad-soft)}
.ilo-sid{color:var(--ink-2);font-size:var(--t-xs)}
.ilo-txt{color:var(--ink);line-height:1.45}
.ilo-txt .pill{margin-left:4px;vertical-align:1px}
.ilo-mod{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2)}
.ilo-ev{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ilo-flag{display:flex;justify-content:flex-end}
.ilo-flag svg.i{width:16px;height:16px}
.ilo-more{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5);padding:var(--s2) var(--s2) var(--s4) calc(52px + var(--s3) + var(--s2));font-size:var(--t-s);color:var(--ink-2)}
.ilo-more h5{margin:0 0 4px;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ilo-more ul{margin:0;padding-left:18px;line-height:1.55}
.ilo-more p{margin:0}
.ilo-prog{grid-column:1/-1;color:var(--muted)}
.ilo-prog b{font-weight:600;color:var(--ink-2);margin-right:6px}
.bad-text{color:var(--bad)}.warn-text{color:var(--warn)}
.ilo-exam{display:flex;gap:var(--s2);align-items:flex-start;margin:0 0 var(--s3);font-size:var(--t-s);color:var(--ink-2)}
.ilo-exam svg.i{flex:none;width:16px;height:16px;margin-top:2px;color:var(--muted)}
.ilo-exam b{color:var(--ink);font-weight:600;margin-right:6px}
.ilo-src{font-size:var(--t-xs);margin:0}
.ilo-add{margin-top:var(--s3)}
@media (max-width:760px){
  .ilo-head{display:none}
  details.ilo-row>summary{grid-template-columns:40px minmax(0,1fr) 16px;row-gap:4px}
  details.ilo-row>summary .ilo-mod,details.ilo-row>summary .ilo-ev,details.ilo-row>summary .ilo-flag{grid-column:2;justify-content:flex-start;font-size:var(--t-xs)}
  details.ilo-row>summary svg.chev{grid-row:1;grid-column:3}
  details.ilo-row>summary .ilo-sid,details.ilo-row>summary svg.chev{align-self:start;margin-top:2px}
  .ilo-more{grid-template-columns:1fr;padding-left:var(--s2)}
}
table.pt.ilo-p td,table.pt.ilo-p th{vertical-align:top;font-size:8pt}
table.pt.ilo-p td.pw{text-align:left;line-height:1.35}

/* ==== instructors ==== */
.inst{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) 210px;gap:var(--s2) var(--s5);align-items:center;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);min-height:68px}
.inst:last-child{border-bottom:0}
.inst-who{display:flex;align-items:center;gap:var(--s3);min-width:0}
.inst-who>div{min-width:0}
.inst-who b{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.inst-ready{display:flex;flex-direction:column;gap:4px;min-width:0}
.inst-ready .chips{align-items:center}.inst-ready .chips>.sub{font-size:var(--t-xs) !important}
.steps-mini{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted)}
.steps-mini span{display:inline-flex;align-items:center;gap:4px}
.steps-mini span.done{color:var(--ok)}
.steps-mini span.todo{color:var(--warn)}
.steps-mini svg.i{width:13px;height:13px;stroke-width:2.2}
.steps-mini i{width:10px;height:1px;background:var(--line-strong)}
.inst-act{display:flex;align-items:center;gap:var(--s2);justify-content:flex-end}
.inst.off{opacity:.55}
.role{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line-strong);border-radius:99px;padding:0 7px;line-height:18px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:var(--t-xs);color:var(--ink-2);background:var(--surface-3);border-radius:6px;padding:1px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.chip:hover{color:var(--ink);text-decoration:none}
@media (max-width:760px){
  .inst{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who act" "ready ready" "main main";padding:var(--s3) var(--s4)}
  .inst-who{grid-area:who}.inst-ready{grid-area:ready;padding-left:48px}
  .inst-act{display:contents}.inst-act>details.menu{grid-area:act;align-self:start}.inst-main{grid-area:main;padding-left:48px}.inst-main:empty{display:none}
}
.role-help{display:grid;gap:var(--s2);margin-top:var(--s3);font-size:var(--t-s);color:var(--ink-2)}
.role-help div{display:grid;grid-template-columns:96px 1fr;gap:var(--s2)}
.role-help b{color:var(--ink)}

/* ==== ENTRY ==== */
.conn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.conn>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);min-height:60px}
.conn b{display:block}
@media (max-width:640px){.conn{grid-template-columns:1fr}}
.rows{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line);min-height:56px}
.row:last-child{border-bottom:0}
.row>span:first-child{min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.row-end{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;flex:none}
.rows>div{border-bottom:1px solid var(--line)}
.rows>div>.row{border-bottom:0}
.rows>div:last-child,.rows>div:empty{border-bottom:0}
.rows.sub{padding:0 0 var(--s2) var(--s5);margin-top:-4px}
.rows.sub .row{min-height:44px;padding:6px 0;border-bottom:1px dashed var(--line)}
.rows.sub .row:last-child{border-bottom:0}
@media (max-width:640px){.row{flex-wrap:wrap}.row-end{justify-content:flex-start}.rows.sub{padding-left:var(--s3)}#entryMembers>.row{flex-wrap:nowrap}#entryMembers>.row>.row-end{justify-content:flex-end}}
.entry-pick{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.entry-pick label{flex:1 1 280px;margin:0}

/* ==== add a course: three steps, the current one lit ==== */
.stepper{display:flex;gap:var(--s2);margin:0 0 var(--s5);padding:0;list-style:none;counter-reset:st}
.stepper li{flex:1;display:flex;align-items:center;gap:var(--s2);font-size:var(--t-s);color:var(--muted);font-weight:500;min-width:0;padding-bottom:var(--s2);border-bottom:2px solid var(--line)}
.stepper li::before{counter-increment:st;content:counter(st);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-2);font-size:var(--t-xs);font-weight:700}
.stepper li.on{color:var(--ink);border-bottom-color:var(--accent)}
.stepper li.on::before{background:var(--accent);color:var(--accent-ink)}
.stepper li.done{color:var(--ink-2);border-bottom-color:var(--ok-line)}
.stepper li.done::before{content:"✓";background:var(--ok-soft);color:var(--ok)}
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:var(--s5);border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface-2);cursor:pointer;margin:0;color:var(--ink-2);min-height:132px;transition:border-color .12s ease,background .12s ease}
.dropzone:hover{border-color:var(--accent)}
.dropzone:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dropzone .e-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.dropzone b{color:var(--ink);font-size:var(--t-m)}
.dropzone .sub{font-size:var(--t-xs)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;min-height:0}
.dropzone.chosen{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft)}
#validation{font-family:inherit;font-size:var(--t-s);background:var(--surface-2)}
#validation.bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-soft)}
#validation.good{color:var(--ink);border-color:var(--ok-line);background:var(--ok-soft)}
#importSummary:empty{display:none}
#importSummary{margin-top:var(--s3);font-size:var(--t-s)}

/* ==== the sign-in screen ==== */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:var(--s5) var(--s4)}
.login{width:100%;max-width:380px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s6) var(--s5)}
.login .logo{width:44px;height:44px;font-size:20px;border-radius:12px;margin:0 auto var(--s4)}
.login svg.logo{width:72px;height:45px;border-radius:0}
.login h1{font-size:var(--t-xl);margin-bottom:var(--s1)}
.login p{color:var(--muted)}
.login button{width:100%;margin-top:var(--s5);min-height:44px}

/* ==== dialogs and toast ==== */
dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:14px;padding:0;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:var(--shadow)}
dialog::backdrop{background:var(--backdrop)}
.dlg{padding:var(--s5)}
.dlg h2{font-size:18px;font-weight:650;margin:0 0 var(--s1);padding-right:var(--s5)}
.dlg>.hint:first-of-type{margin-top:0}
.dlg-body{color:var(--ink-2)}
.dlg-body p{margin:var(--s2) 0}
.dlg-body .code{font-size:30px;margin:var(--s2) 0;text-align:center;padding:var(--s3);background:var(--surface-2);border-radius:var(--r)}
.dlg-body .consequence{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3);border-radius:var(--r);background:var(--surface-2);margin:var(--s3) 0}
.dlg-body .consequence svg.i{color:var(--warn);margin-top:2px}
.dlg-body ul{margin:var(--s2) 0;padding-left:20px}
.dlg-body li{margin:2px 0}
.dlg-actions{display:flex;justify-content:flex-end;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
@media (max-width:480px){
  dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:16px 16px 0 0;max-height:calc(100vh - 24px)}
  .dlg{padding:var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom))}
  .dlg-actions button{flex:1 1 auto;min-height:44px}
}
.ticks{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}
.ticks.col{flex-direction:column;gap:2px}
.ticks label{display:inline-flex;align-items:center;gap:var(--s2);margin:0;color:var(--ink);font-weight:400;font-size:var(--t-m);min-height:40px;padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer}
.ticks label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.ticks label:has(input:disabled){opacity:.6;cursor:not-allowed}
.ticks.col label{border:0;padding:0 var(--s2);border-radius:6px}
.ticks.col label:hover{background:var(--surface-2)}
.ticks.col label:has(input:checked){background:none}
.toast{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);display:flex;align-items:center;gap:var(--s2);background:var(--surface-3);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r);padding:10px var(--s4);box-shadow:var(--shadow-s);font-weight:500;max-width:calc(100vw - 32px);z-index:50}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.toast.bad::before{background:var(--bad)}
.toast[hidden]{display:none}
@media (max-width:900px){.toast{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* folds: one level, never nested */
details.fold{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--s2);font-weight:600;color:var(--ink-2);user-select:none;padding:var(--s3) var(--s5);min-height:48px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary svg.i{width:16px;height:16px;color:var(--muted);transition:transform .12s ease}
details.fold[open]>summary svg.i{transform:rotate(90deg)}
details.fold>summary:hover{color:var(--ink)}
details.fold>.rows{padding:0 var(--s5) var(--s2)}
details.fold pre{margin:0 var(--s4) var(--s4)}
.card details.fold{background:none;border:0;margin-top:var(--s3)}
.card details.fold>summary{padding:0}
.card details.fold pre{margin:var(--s3) 0 0}
@media (max-width:640px){details.fold>summary{padding:var(--s3) var(--s4)}details.fold>.rows{padding:0 var(--s4) var(--s2)}}

/* ==== people: the list, a profile, and how a group's list finds them ==== */
.search.wide{flex:1 1 420px;max-width:520px}
.list-foot{padding:var(--s3) var(--s5) !important;font-size:var(--t-s);border-top:1px solid var(--line)}
.avatar.xl{width:52px;height:52px;font-size:17px}
.ph-person{display:flex;align-items:center;gap:var(--s4);min-width:0}
.ph-person>div{min-width:0}
.meta a svg.i{color:var(--muted)}
a.plink{color:inherit}
a.plink:hover{color:var(--accent);text-decoration:underline}
.cell-row b{min-width:0;overflow-wrap:anywhere}
.pcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:stretch}
.pcs>.card{margin:0}
@media (max-width:980px){.pcs{grid-template-columns:1fr}}
.pc{display:flex;flex-direction:column;gap:var(--s3)}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.pc-title{min-width:0}
.pc-title>a{color:var(--ink);font-weight:650;font-size:var(--t-l);letter-spacing:-.01em}
.pc-title>a:hover{color:var(--accent)}
.pc-pills{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;flex:none}
.pc-days{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
/* label | value pairs in a two-column grid, so "Tasks" never ends up on one line and its number on the next */
.pc-res{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:var(--s2) var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.pc-k{font-size:var(--t-xs);font-weight:600;color:var(--muted)}
.pc-chks{display:inline-flex;gap:6px;flex-wrap:wrap}
.pc-chk{display:inline-flex;align-items:center;gap:4px}
.pc-chk small{font-size:11px;color:var(--muted);font-weight:600}
.pc-chk .sc{min-width:0}
.pc-none{display:flex;align-items:center;gap:6px;font-size:var(--t-s);padding-top:var(--s3);border-top:1px solid var(--line)}
/* how a day went for the person, on the day itself: a corner mark, said in words below */
.d{position:relative}
.d.att-late::after,.d.att-left::after,.d.att-away::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--surface)}
.d.att-away::after{background:var(--bad)}
@media (max-width:640px){.pc-head{flex-direction:column}.pc-pills{justify-content:flex-start}.ph-person .avatar.xl{width:44px;height:44px;font-size:15px}}

/* adding people: a search of everybody known, with "new person" as its last line */
.add-people .card-head{margin-bottom:var(--s2)}
.finder{position:relative}
.finder .search{display:block;margin:0;max-width:none}
.finder .search input{min-height:44px;font-size:var(--t-l)}
.find-list{display:flex;flex-direction:column;margin-top:6px;border-radius:var(--r);overflow:hidden}
.find-list:empty{display:none}
.find-list:not(:empty){border:1px solid var(--line-strong);background:var(--surface)}
.find-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:var(--s3);text-align:left;justify-content:stretch;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:8px var(--s3);min-height:52px;font-weight:400;white-space:normal}
.find-row:last-child{border-bottom:0}
.find-row:hover,.find-row:focus-visible{background:var(--surface-2);border-color:var(--line)}
.find-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.find-row:disabled,.find-row:disabled:hover{opacity:.6;background:none;border-color:var(--line)}
.find-row .cell b{font-size:var(--t-m)}
.find-add{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:600;font-size:var(--t-s)}
.find-row.new .cell b{color:var(--accent)}
.add-people details.more{margin-top:var(--s3)}
.add-people details.more textarea{margin-top:var(--s2)}
.add-people details.more .btn-row{margin-top:var(--s3)}
/* a question in a dialog: which of these is it */
fieldset.ask{border:0;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:0}
fieldset.ask+fieldset.ask{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
fieldset.ask legend{padding:0;margin-bottom:6px;color:var(--ink)}
label.pick{display:grid;grid-template-columns:18px 28px minmax(0,1fr);align-items:center;gap:var(--s3);margin:0;padding:8px var(--s3);border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;color:var(--ink);font-weight:400}
label.pick:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
label.pick input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--accent)}
label.pick b{display:block;font-weight:600}
.dlg-body .search{display:block;margin:var(--s3) 0 0;max-width:none}

/* ==== teams: a coloured letter, a filter, a quick picker ==== */
.c-teal{--tc:var(--team-teal)}.c-amber{--tc:var(--team-amber)}.c-violet{--tc:var(--team-violet)}.c-rose{--tc:var(--team-rose)}
.c-sky{--tc:var(--team-sky)}.c-lime{--tc:var(--team-lime)}.c-orange{--tc:var(--team-orange)}.c-slate{--tc:var(--team-slate)}
.tchip{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;
  color:var(--tc,var(--muted));background:color-mix(in srgb,var(--tc,var(--muted)) 16%,transparent);border:1px solid color-mix(in srgb,var(--tc,var(--muted)) 45%,transparent);flex:none}
.tchip.none{background:none;border-style:dashed;border-color:var(--line-strong);color:var(--muted)}
.tchip.s{min-width:18px;height:18px;font-size:10px;border-radius:5px}
.tchip.big{min-width:36px;height:36px;font-size:14px;border-radius:9px;cursor:pointer;padding:0}
.tlabel{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);min-width:0}
.teambar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s3)}
.teambar .seg{gap:6px}
.team-head{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s5);background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--t-s)}
.list>.team-head:not(:first-child){border-top:1px solid var(--line)}
details.tpick>summary{width:auto;min-width:32px;padding:0 4px}
.menu-pop button .tchip{margin-right:2px}
.menu-pop button svg.tick{margin-left:auto;color:var(--accent)}
.team-edits{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s3) 0}
.team-edit{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:var(--s2);align-items:center}
.team-edit input{min-height:40px}
/* results, team by team */
.res-sum .grow{flex:1}
.res-sum .filters .seg{gap:6px}
.res tr.team-row th{background:var(--surface-2);text-align:left;padding:8px var(--s3);position:static}
.tr-in{position:sticky;left:var(--s3);display:inline-flex;align-items:center;gap:var(--s3);flex-wrap:wrap;white-space:normal}
.tr-avg{display:inline-flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none}
.tr-avg b{color:var(--ink);font-weight:650}
@media (max-width:640px){
  .teambar>.actions{width:100%}.teambar>.actions button{flex:1}
  .team-head{padding:10px var(--s4)}
  .tf-name{display:none}
  .res-sum .grow{display:none}
}

/* ==== picking many groups: a mode, turned on with Select ==== */
.tool-end{display:flex;align-items:center;gap:var(--s2);flex:0 1 auto}
.tool-end .search{flex:0 1 260px}
.course-pick{display:block;margin:0;flex:0 1 280px;min-width:240px}
.course-pick select{min-height:40px;width:100%}
@media (max-width:640px){.tool-end,.course-pick{flex:1 1 100%}}
.selbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s2) var(--s4);margin:0 0 var(--s3);
  background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r-lg);box-shadow:var(--shadow-s)}
.selbar .sel-all{display:inline-flex;align-items:center;gap:var(--s2);margin:0;color:var(--ink);font-weight:500;cursor:pointer;min-height:32px}
.selbar .sel-count{color:var(--ink-2);font-size:var(--t-s)}
.selbar .grow{flex:1}
.list.selecting .list-head,.list.selecting .item{grid-template-columns:24px minmax(0,2.2fr) minmax(0,1.7fr) minmax(0,1.5fr) 72px 128px}
.sel-row{cursor:pointer;user-select:none}
.sel-row:hover{background:var(--surface-2)}
.sel-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sel-row.on{background:var(--accent-soft)}
.sel-box{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line-strong);display:grid;place-items:center;background:var(--bg)}
.sel-row.on .sel-box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sel-box svg.i{width:14px;height:14px;stroke-width:2.6}
@media (max-width:760px){
  .list.selecting .item{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"x a e" "x b e" "x c e"}
  .list.selecting .item>.sel-box{grid-area:x;align-self:center}
  .list.selecting .item>.cell:nth-child(2){grid-area:a;flex-direction:column;font-size:inherit;color:inherit}
  .list.selecting .item>.cell:nth-child(3){grid-area:b;flex-direction:row;flex-wrap:wrap;gap:0 6px;font-size:var(--t-s);color:var(--ink-2)}
  .list.selecting .item>.cell:nth-child(4){grid-area:c;flex-direction:row;flex-wrap:wrap;gap:0 6px;font-size:var(--t-s);color:var(--ink-2)}
  .list.selecting .item>.cell:nth-child(3) .sub{display:inline}
  .list.selecting .item>.cell:nth-child(2) .sub{display:block}.list.selecting .item>.cell:nth-child(2) .sub::before{content:none}
  .list.selecting .item>.cell:nth-child(3) .sub::before{content:"· "}
}
@media (max-width:640px){
  .tool-end{width:100%}.tool-end .search{flex:1 1 auto}
  .selbar{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));position:sticky;padding:var(--s2) var(--s3)}
  .selbar .grow{display:none}
  .selbar .sel-count{flex:1 1 auto}
}
/* the contact of a person on one line, cut rather than broken */
#personList .item>.cell:nth-child(2)>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==== Today: this month in four numbers, against the same days of last month ==== */
.month-vs{font-size:var(--t-s)}
.card.month{padding:0;overflow:hidden}
.m-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.m-tile{padding:var(--s4) var(--s5);border-left:1px solid var(--line);min-width:0}
.m-tile:first-child{border-left:0}
.m-tile .skel{padding:var(--s2) 0}
.m-l{font-size:var(--t-xs);color:var(--muted);display:flex;align-items:center;gap:6px;font-weight:500}
.m-l>svg.i{width:14px;height:14px}
.m-v{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-top:4px}
.m-v>b{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.m-v>b small{font-size:var(--t-l);font-weight:600;color:var(--ink-2);margin-left:1px}
.delta{font-size:var(--t-xs);font-weight:650;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default}
.delta.rise{color:var(--ok)}
.delta.fall{color:var(--bad)}
.m-s{font-size:var(--t-xs);color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.m-foot{display:flex;align-items:center;gap:6px;padding:var(--s2) var(--s5);border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--warn)}
.m-err{display:flex;align-items:center;gap:6px;padding:var(--s4) var(--s5);margin:0}
@media (max-width:760px){
  .m-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-tile{padding:var(--s3) var(--s4)}
  .m-tile:nth-child(3){border-left:0}
  .m-tile:nth-child(n+3){border-top:1px solid var(--line)}
  .m-v>b{font-size:22px}
}

/* ==== hardest questions: per check, the questions missed most, with a bar for the share ==== */
.hq-sec{margin-top:var(--s6)}
.hq-sec.first{margin-top:0}
.hq-sec h2 svg.i{color:var(--muted)}
.card-head h3 svg.i{color:var(--muted)}
.hq-note{font-size:var(--t-s)}
.hq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:stretch;margin:0 0 var(--s4)}
.hq-grid>.card{margin:0}
.card.hq{padding:var(--s4) var(--s5) var(--s3)}
.hq-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s2)}
.hq-code{flex:none;min-width:40px;height:24px;padding:0 7px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);font-size:11px;font-weight:700;display:inline-grid;place-items:center;letter-spacing:.02em}
.hq-title{min-width:0}
.hq-title b{display:block;overflow-wrap:anywhere;line-height:1.35}
.hq-title .sub{font-size:var(--t-xs)}
.hq-list{list-style:none;margin:0;padding:0}
.hq-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px var(--s3);padding:9px 0 10px;border-top:1px solid var(--line);align-items:baseline}
.hq-q{font-size:var(--t-s);color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hq-n{font-size:var(--t-xs);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hq-n b{font-size:var(--t-s);color:var(--ink-2);font-weight:650}
.hq-bar{grid-column:1/-1;display:block;height:4px;border-radius:99px;background:var(--surface-3);position:relative;overflow:hidden}
.hq-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:var(--muted);border-radius:99px}
.hq-list li.mid .hq-bar::before{background:var(--warn)}
.hq-list li.hi .hq-bar::before{background:var(--bad)}
.hq-list li.hi .hq-n b{color:var(--bad)}
.hq-list li.mid .hq-n b{color:var(--warn)}
.card.hq button.link{margin-top:2px;padding-left:0}
.hq-load .meter{margin:0 0 var(--s2)}
@media (max-width:820px){.hq-grid{grid-template-columns:1fr}}
@media (max-width:640px){.card.hq{padding:var(--s3) var(--s4) var(--s2)}}

/* the Report menu: a button that opens the menu of papers */
details.menu.rep{display:flex}
details.menu.rep>summary{width:auto;height:auto;min-height:40px;padding:0 12px;display:inline-flex;gap:var(--s2);align-items:center;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);font-weight:550;font-size:var(--t-s)}
details.menu.rep>summary:hover,details.menu.rep[open]>summary{background:var(--surface-3);border-color:var(--muted)}
details.menu.rep .menu-pop{min-width:248px}
@media (max-width:640px){
  details.menu.rep>summary{width:auto;height:auto;min-height:40px}
  /* on a phone the menu spans the row of buttons, so it never runs off the screen */
  .page-head>.actions{position:relative}
  details.menu.rep{position:static}
  details.menu.rep .menu-pop{left:0;right:0;min-width:0}
}

/* ==== printable reports: a sheet of paper on screen, and only the sheet on paper ==== */
body.pv-open #app{display:none}
#printView{min-height:100vh;background:var(--bg)}
.pv-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);background:var(--surface);border-bottom:1px solid var(--line)}
.pv-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--s2);overflow:hidden}
.pv-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pv-title .sub{display:inline;font-size:var(--t-xs);white-space:nowrap}
.pv-scroll{overflow-x:auto;padding:var(--s5) var(--s4) var(--s7)}
@media (max-width:640px){.pv-title .sub{display:none}.pv-scroll{padding:var(--s3) var(--s3) var(--s6)}}
/* The paper is paper in either theme: white, black, its own type. */
.paper{color-scheme:light;background:#fff;color:#111;width:210mm;min-height:297mm;margin:0 auto;padding:12mm;box-shadow:var(--shadow);border-radius:2px;
  font:9.5pt/1.4 Arial,"Helvetica Neue",Helvetica,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper.land{width:297mm;min-height:210mm}
.paper b{font-weight:700}
.p-head{display:flex;justify-content:space-between;align-items:flex-end;gap:8mm;padding-bottom:2.5mm;border-bottom:1.6pt solid #111;margin-bottom:4mm}
.p-brand{font-size:15pt;letter-spacing:.2em;font-weight:800;line-height:1}
.p-doc{text-align:right}
.p-doc h1{font-size:12.5pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0;line-height:1.2}
.p-doc span{font-size:8pt;color:#555}
.paper dl.p-facts{display:flex;flex-wrap:wrap;gap:2.5mm 10mm;margin:0 0 4mm}
.paper dl.p-facts>div{min-width:0}
.paper dt{color:#555;font-size:7pt;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.paper dd{margin:0;font-size:9.5pt;font-weight:600;overflow-wrap:break-word}
.p-legend{font-size:7.5pt;color:#333;margin:0 0 2mm}
.p-key{font-size:7.5pt;color:#333;margin:2mm 0 0;display:flex;flex-wrap:wrap;gap:1mm 5mm}
table.pt{width:100%;border-collapse:collapse;font-size:9pt;font-variant-numeric:tabular-nums}
table.pt th,table.pt td{border:.6pt solid #8a8a8a;padding:1.3mm 1.5mm;text-align:center;vertical-align:middle}
table.pt thead th{background:#ececec;font-size:7.5pt;font-weight:700;line-height:1.2}
table.pt th small,table.pt td small{display:block;font-weight:400;font-size:6.8pt;color:#444}
table.pt th.nh{color:#777;background:#f6f6f6}
table.pt .pn{width:7mm;color:#555}
table.pt .pw{text-align:left;min-width:42mm}
table.pt td.pw small{font-size:7pt;color:#555}
table.pt .ptot{width:13mm}
table.pt .psig{width:30mm}
table.pt td.m-away{font-weight:700}
table.pt td.m-none{background:#f7f7f7}
table.pt td.m-credit{color:#444}
table.pt td.np{font-weight:700}
table.pt td.fv{font-weight:700;font-size:8pt;letter-spacing:.03em}
table.reg td{height:9mm}
.paper sup{font-size:6pt;margin-left:.4mm;vertical-align:super;line-height:0}
.paper tr{break-inside:avoid}
.paper thead{display:table-header-group}
.p-sec{font-size:8pt;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin:5mm 0 1.5mm}
.p-notes{margin:0;padding-left:5mm;font-size:8pt;columns:2;column-gap:8mm}
.p-notes li{break-inside:avoid;margin:0 0 .8mm}
.p-sign{display:flex;gap:14mm;margin-top:12mm;font-size:8pt;color:#333;break-inside:avoid}
.p-sign>div{flex:0 1 70mm}
.p-sign span{display:block;border-bottom:.8pt solid #111;height:9mm;margin-bottom:1mm}
.p-end{margin-top:5mm;font-size:7.5pt;color:#555}
/* a person's record: one block per course */
.p-class{border:.8pt solid #9a9a9a;border-radius:1.5mm;padding:3mm 4mm;margin:0 0 4mm;break-inside:avoid}
.p-ctop{display:flex;justify-content:space-between;align-items:flex-start;gap:4mm}
.p-class h2{font-size:11pt;margin:0;font-weight:700;letter-spacing:0}
.p-sub{font-size:8.5pt;color:#333;margin:.6mm 0 2.5mm}
.p-status{flex:none;font-size:7.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:.8pt solid #111;border-radius:1mm;padding:.6mm 2mm}
.p-status.open{border-style:dashed;color:#333}
table.days-p{width:auto;min-width:50%}
table.days-p th,table.days-p td{min-width:16mm}
.p-cnotes{font-size:8pt;color:#333;margin:1.5mm 0 0}
.paper dl.p-res{margin:2.5mm 0 0;display:grid;gap:1mm}
.paper dl.p-res>div{display:grid;grid-template-columns:32mm minmax(0,1fr);gap:3mm;align-items:baseline}
.paper dl.p-res dd{font-weight:400}

@media print{
  :root{color-scheme:light}
  html,body{background:#fff !important}
  body.pv-open>*:not(#printView){display:none !important}
  body.pv-open #printView{background:#fff;min-height:0}
  .pv-bar{display:none !important}
  .pv-scroll{padding:0;overflow:visible}
  .paper,.paper.land{width:auto;min-height:0;margin:0;padding:0;box-shadow:none;border-radius:0}
  /* printing the panel itself, without a report: the page without its chrome */
  .sidebar,.tabbar,.scrim,.toast,dialog{display:none !important}
  .layout{display:block}
  .main{padding:0}
}

/* ==== Feedback: "How satisfied are you with today?" (migration 020) ==== */
svg.face{flex:none;display:block}
.m-l>svg.face{width:14px;height:14px}
.m-tiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:760px){
  .m-tiles.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-tiles.five .m-tile:nth-child(5){border-left:0}
}
.m-foot .link{color:var(--accent);font-size:inherit;padding:0 2px}
.fbk .card-head .btn{white-space:nowrap}
.fbk-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s5);align-items:center}
.fbk-avg{display:flex;align-items:center;gap:var(--s4);min-width:0}
.fbk-num{font-size:34px;font-weight:650;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.fbk-num small{font-size:var(--t-m);font-weight:500;color:var(--muted);margin-left:4px}
.fbk-avg .sub{display:block;margin-top:2px}
.fbk-dist{display:grid;gap:6px;min-width:0}
.fbk-row{display:grid;grid-template-columns:20px 92px minmax(0,1fr) 28px;align-items:center;gap:var(--s2);font-size:var(--t-s)}
.fbk-w{color:var(--muted);white-space:nowrap}
.fbk-bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
/* the rating faces and bars keep their meaning (green to red) but not their neon: the same colours as on the trainee tablet, calmed for a long day at this screen */
.fbk-bar i,svg.face{filter:saturate(.62)}
.fbk-bar i{display:block;height:100%;border-radius:99px;min-width:2px}
.fbk-row b{text-align:right;font-variant-numeric:tabular-nums}
.fbk-h{margin:var(--s5) 0 var(--s2);font-size:var(--t-s);font-weight:600;color:var(--muted)}
.fbk-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.fbk-list li{display:flex;gap:var(--s3);align-items:flex-start}
.fbk-list p{margin:0;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.fbk-list .sub{font-size:var(--t-xs)}
.fbk-none{margin:0}
.fbk-fail{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);padding:var(--s2) var(--s3);border-radius:var(--r);border:1px solid var(--line);color:var(--warn);font-size:var(--t-s)}
.fbk-fail span{flex:1 1 200px}
@media (max-width:640px){
  .fbk-top{grid-template-columns:1fr;gap:var(--s4)}
  .fbk .card-head{flex-wrap:wrap}
}

/* ---------------------------------------------------------------- instructor ratings (021) */
dialog.wide{width:min(760px,calc(100vw - 32px))}
.stars{position:relative;display:inline-flex;flex:none;width:max-content;vertical-align:-2px;line-height:0}
.stars svg.i{width:var(--sz,14px);height:var(--sz,14px);stroke-width:1.5}
.stars-off svg.i{color:var(--line-strong)}
.stars-on{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;display:inline-flex}
.stars-on svg.i{color:var(--warn);fill:var(--warn);flex:none}
.rt-line{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;align-self:flex-start;min-height:32px;padding:2px 10px;margin-top:2px;border:1px solid var(--line);border-radius:99px;background:var(--surface-2);color:var(--ink);font-size:var(--t-s);cursor:pointer}
.rt-line:hover{border-color:var(--line-strong)}
span.rt-line{cursor:default;background:none;border-color:transparent;padding-left:0}
.rt-line svg.i.s{width:14px;height:14px}
.rt-line .rt-more{color:var(--accent);font-weight:500}
.spark{width:64px;height:20px;overflow:visible}
.spark path{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark circle{fill:var(--accent)}
.spark.big{width:100%;height:96px;display:block}
.spark.big path{stroke-width:2.4}
.spark .mid{stroke:var(--line-strong);stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.spark-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--t-xs);margin-top:2px}
.rt-sum .rt-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s5);align-items:center}
.rt-avg{display:flex;flex-direction:column;gap:4px}
.rt-dist{display:grid;gap:6px}
.rt-dist-row{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:center;gap:var(--s2);font-size:var(--t-s)}
.rt-dist-row span:first-child{display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
.rt-dist-row svg.i{width:12px;height:12px;color:#f5b942;fill:#f5b942}
.rt-dist-row .fbk-bar i{background:#f5b942}
.rt-dist-row b{text-align:right;font-variant-numeric:tabular-nums}
.rt-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.rt-chips{display:flex;flex-wrap:wrap;gap:6px}
.rt-chip-s{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:var(--t-s);border:1px solid var(--line)}
.rt-chip-s b{font-variant-numeric:tabular-nums}
.rt-chip-s.good{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.rt-chip-s.bad{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.rt-comments{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.rt-comments li{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.rt-comments p{margin:4px 0 0;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line;color:var(--ink)}
.rt-c-head{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-xs)}
.rt-c-chips{margin-top:4px;font-size:var(--t-xs);color:var(--muted)}
.rt-note{display:flex;gap:6px;align-items:flex-start;margin-top:var(--s4)}
.rt-note svg.i{flex:none;margin-top:2px}
.rt-key{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r);border:1px solid var(--line);flex-wrap:wrap}
.rt-key>div{flex:1 1 260px;min-width:0}
.rt-key b{display:block}
.rt-key .sub{font-size:var(--t-s)}
.rt-key.ok{background:var(--ok-soft);border-color:var(--ok-line)}.rt-key.ok>svg.i{color:var(--ok)}
.rt-key.warn{background:var(--warn-soft);border-color:var(--warn-line)}.rt-key.warn>svg.i{color:var(--warn)}
.rt-stats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3);color:var(--muted);font-size:var(--t-s)}
.rt-stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.rt-older{margin-top:var(--s3)}
.rt-oldkey{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;padding:var(--s2) 0;font-size:var(--t-s)}
.rt-rows{display:grid}
.rt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s5);border-top:1px solid var(--line)}
.rt-row-meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--t-s);color:var(--ink-2)}
.rt-row p{margin:4px 0 0;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.rt-row-act{display:flex;align-items:center;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}
.rt-nokey{font-size:var(--t-s)}
.card.flush .fbk-none{padding:var(--s3) var(--s5) var(--s5)}
.rt-log-wrap{overflow-x:auto;padding:0 var(--s5) var(--s4)}
.rt-log{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.rt-log th{text-align:left;font-weight:600;color:var(--muted);padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--line);white-space:nowrap}
.rt-log td{padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--line);vertical-align:top}
.rt-log .rt-reason{min-width:220px;color:var(--ink)}
.rt-steps{margin:var(--s3) 0;padding-left:20px;display:grid;gap:var(--s3)}
.rt-steps li{line-height:1.5}
.rt-step-btns{display:inline-flex;gap:var(--s2);flex-wrap:wrap;margin:4px 0 0}
.rt-steps input[type=file]{display:block;margin-top:6px;padding:8px;min-height:44px}
.rt-check-msg{display:block;margin-top:4px;font-size:var(--t-s)}
.rt-check-msg.ok,.rt-ok{color:var(--ok)}
.rt-check-msg.bad,.rt-bad{color:var(--bad)}
.rt-paper{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0}
.rt-paper input{width:auto;min-height:0}
.rt-pick{padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);font-size:var(--t-s)}
.rt-pick p{margin:6px 0 0;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.dlg-body input[type=file]{padding:8px;min-height:44px}
.rt-identity .rt-name{font-size:26px;font-weight:650;color:var(--ink);margin:var(--s2) 0 var(--s3)}
.rt-identity dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px var(--s4);margin:0;font-size:var(--t-s)}
.rt-identity dt{color:var(--muted)}
.rt-identity dd{margin:0;font-family:var(--mono);font-size:var(--t-xs);overflow-wrap:anywhere;color:var(--ink-2)}
@media (max-width:640px){
  .rt-sum .rt-top,.rt-cols{grid-template-columns:1fr;gap:var(--s4)}
  .rt-line .spark{display:none}
  .rt-row{grid-template-columns:1fr;padding:var(--s3) var(--s4)}
  .rt-row-act{justify-content:flex-start}
  .rt-log-wrap{padding:0 var(--s4) var(--s4)}
  .card.flush .fbk-none{padding:var(--s3) var(--s4) var(--s4)}
}

/* ==== tablets (migration 023): the fleet, its commands and the app versions ==== */
.fl-sum{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s3);color:var(--ink-2);font-size:var(--t-s)}
.fl-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.fl-sum .error{margin:0}
.fl-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:visible;margin:0 0 var(--s4)}
.fl-row{display:grid;grid-template-columns:28px minmax(0,1.7fr) minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,1.35fr) minmax(0,1.7fr) 72px;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);min-height:64px}
.fl-row:last-child{border-bottom:0}
.fl-row.sel{background:var(--accent-soft)}
.fl-head{min-height:0;font-size:var(--t-xs);font-weight:600;color:var(--muted);padding-top:10px;padding-bottom:10px}
.fl-check{margin:0;display:grid;place-items:center;cursor:pointer}
.fl-name{background:none;border:0;padding:0;min-height:0;font-weight:600;font-size:var(--t-m);color:var(--ink);justify-content:flex-start;text-align:left;gap:6px;overflow-wrap:anywhere}
.fl-name svg.i{width:13px;height:13px;color:var(--muted);opacity:0;transition:opacity .12s}
.fl-name:hover{background:none;text-decoration:underline}
.fl-name:hover svg.i,.fl-name:focus-visible svg.i{opacity:1}
.fl-on{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:600;font-size:var(--t-s)}
.fl-off{color:var(--muted);font-weight:600;font-size:var(--t-s)}
.fl-bat{font-size:var(--t-s);color:var(--ink-2);display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.fl-bat.low{color:var(--bad);font-weight:600}
.fl-bat svg.i{width:14px;height:14px}
.fl-cmd{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--t-s)}
.fl-cmd .pill{white-space:normal}
.fl-err{color:var(--bad)}
/* a tablet that looks stuck (fleet.mjs stuckOf): why, and the one press most likely to help */
.fl-row.stuck{background:color-mix(in srgb,var(--bad) 6%,var(--surface))}
.fl-stuck{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 8px;margin:6px 0 0;font-size:var(--t-s);color:var(--bad);line-height:1.35}
.fl-stuck>svg.i{width:14px;height:14px;flex:none;margin-top:2px}
.fl-stuck>span{flex:1 1 160px;min-width:0;color:var(--ink-2)}
.fl-stuck b{color:var(--bad)}
.fl-stuck .fl-fix{flex:none}
.fl-bar{display:block;height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin:6px 0 0;max-width:220px}
.fl-bar>i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .3s ease}
.fl-row .item-end{gap:2px}
.fl-row .cell-row{flex-wrap:wrap;gap:4px 8px}
.fl-app{white-space:nowrap}
.fl-row .pill svg.i{width:12px;height:12px}
.fl-bar-top{background:var(--surface)}
.fl-upl{display:grid;gap:6px}
.fl-upl .fl-bar{max-width:none;height:6px}
.fl-rel{margin-top:var(--s4)}
.fl-rel .rows{padding:0 var(--s2)}
.fl-when{display:grid;gap:var(--s2);margin:var(--s3) 0 0}
.fl-opt{display:flex;align-items:flex-start;gap:var(--s3);margin:0;padding:var(--s3);border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;color:var(--ink)}
.fl-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.fl-opt input{width:18px;height:18px;min-height:0;margin:2px 0 0;accent-color:var(--accent);flex:none}
.fl-opt b{display:block;font-weight:600}
.fl-drop{min-height:110px}
.fl-info{margin:var(--s3) 0 0}
.fl-apk{display:grid;gap:2px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.fl-apk code,.fl-info code{font-size:12px}
@media (max-width:1100px){
  .fl-row{grid-template-columns:28px minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1.6fr) 72px}
  .fl-row>:nth-child(5){display:none}
}
@media (max-width:760px){
  .fl-head{display:none}
  .fl-row{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"c a e" "c b e" "c d d" "c f f";gap:4px var(--s2);padding:var(--s3)}
  .fl-row>.fl-check{grid-area:c;align-self:start;padding-top:2px}
  .fl-row>.cell:nth-child(2){grid-area:a}
  .fl-row>.cell:nth-child(3){grid-area:b}
  .fl-row>.cell:nth-child(4){grid-area:d;flex-direction:row;flex-wrap:wrap;gap:0 var(--s3);align-items:center}
  .fl-row>.cell:nth-child(5){display:flex;grid-area:f;flex-direction:row;flex-wrap:wrap;gap:0 var(--s2);align-items:center}
  .fl-row>.cell:nth-child(6){grid-column:2/4;grid-row:5}
  .fl-row>.item-end{grid-area:e;align-self:start}
  .fl-row>.cell:nth-child(6):has(.muted:only-child){display:none}
  .fl-bar-top .grow{display:none}
}