/* Quorum Companion — one stylesheet.
   Scriptures on a shelf: navy board, gilt page edge, crimson ribbon.

   COLOUR. Every colour is one token declared once with light-dark(), so there
   is no second dark-mode block to keep in step. `color-scheme` on :root does
   the switching; a subtree can opt out with one line, which is how the stage
   stays dark in a lit chapel whatever the app is set to.

   The pair that matters most is --chrome-*. The top bar, nav, strip, peek,
   activity pane and toast are dark-on-light in light mode. Left alone in dark
   mode they become invisible holes, because the page behind them is the same
   navy. So they get their own surface token that goes *up* in dark rather
   than down. */

:root{
  color-scheme: light dark;

  /* surfaces, always monotonic: sunk < paper < page < raised */
  --sunk:   light-dark(#F1EDE2, #10161F);
  --paper:  light-dark(#F7F5EF, #161D28);
  --page:   light-dark(#FFFEFA, #1E2733);
  --raised: light-dark(#FFFFFF, #27313F);

  /* inverted chrome */
  --chrome-bg:   light-dark(#141C27, #1E2733);
  --chrome-fg:   light-dark(#F2EEE2, #E7E3D6);
  --chrome-dim:  light-dark(rgba(242,238,226,.62), rgba(231,227,214,.55));
  --chrome-line: light-dark(rgba(242,238,226,.32), #3B4757);

  /* text */
  --text:  light-dark(#2A2A26, #E4E0D3);
  --muted: light-dark(#7A776E, #A29D90);
  --ink:   light-dark(#232E3F, #EDE9DC);
  --ink2:  light-dark(#33415A, #C9C4B5);
  --ink3:  light-dark(#141C27, #0B0F16);

  /* borders: line = quiet/structural, line2 = interactive */
  --line:  light-dark(#E4E0D4, #2B3543);
  --line2: light-dark(#D3CDBC, #3D4859);

  /* accents: solid fill, the same hue as text, and as a muted tint */
  --gilt:      light-dark(#A98A44, #C6A75E);
  --gilt-fg:   light-dark(#8A6F2E, #DCC084);
  --giltl:     light-dark(#EFE6CE, #2B2413);
  --gilt-line: light-dark(#DCC894, #4B3E1E);
  --gilt2:     light-dark(#C6A75E, #E0C88C);

  --ribbon:      light-dark(#8C3B34, #B4534A);
  --ribbon-fg:   light-dark(#8C3B34, #E8A099);
  --ribbonl:     light-dark(#FBF1EF, #2E1715);
  --ribbon-line: light-dark(#EBD3CF, #4C2622);

  --ok:      light-dark(#3F6B4A, #6FA97C);
  --ok-fg:   light-dark(#35603F, #8FC79A);
  --okl:     light-dark(#EEF4EF, #14231A);
  --ok-line: light-dark(#CBDFD0, #29402F);

  /* text on a solid fill */
  --on-ink:    light-dark(#F2EEE2, #10161F);
  --on-gilt:   #241D0C;
  --on-ribbon: #FBF1EF;

  --serif:'EB Garamond',Georgia,serif;
  --sans:'Public Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --bar:70px; --peekh:0px;
  --sh1:0 1px 2px light-dark(rgba(35,46,63,.06),rgba(0,0,0,.44));
  --sh2:0 4px 14px light-dark(rgba(35,46,63,.10),rgba(0,0,0,.52));
  --sh3:0 14px 40px light-dark(rgba(20,28,39,.24),rgba(0,0,0,.66));
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media print{:root{color-scheme:light}}

/* browsers older than mid-2024 have no light-dark() */
@supports not (color: light-dark(#fff,#000)){
  @media (prefers-color-scheme: dark){
    :root{--sunk:#10161F;--paper:#161D28;--page:#1E2733;--raised:#27313F;
      --chrome-bg:#1E2733;--chrome-fg:#E7E3D6;--chrome-dim:rgba(231,227,214,.55);--chrome-line:#3B4757;
      --text:#E4E0D3;--muted:#A29D90;--ink:#EDE9DC;--ink2:#C9C4B5;--ink3:#0B0F16;
      --line:#2B3543;--line2:#3D4859;
      --gilt:#C6A75E;--gilt-fg:#DCC084;--giltl:#2B2413;--gilt-line:#4B3E1E;--gilt2:#E0C88C;
      --ribbon:#B4534A;--ribbon-fg:#E8A099;--ribbonl:#2E1715;--ribbon-line:#4C2622;
      --ok:#6FA97C;--ok-fg:#8FC79A;--okl:#14231A;--ok-line:#29402F;--on-ink:#10161F}
  }
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{font-family:var(--sans);background:var(--paper);color:var(--text);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;padding-bottom:calc(var(--bar) + var(--peekh) + env(safe-area-inset-bottom) + 30px)}
button,input,textarea,select{font-family:var(--sans);font-size:16px;color:inherit}
button{cursor:pointer;background:none;border:none}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--gilt-fg);outline-offset:2px;border-radius:5px}
.hidden{display:none!important}
h1,h2,h3{font-weight:500}
b,strong{font-weight:700;color:var(--ink)}

/* ---------- chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--chrome-bg);color:var(--chrome-fg);box-shadow:var(--sh2)}
.tbrow{max-width:1220px;margin:0 auto;display:flex;align-items:center;gap:var(--s3);
  padding:calc(9px + env(safe-area-inset-top)) var(--s4) 9px}
.brand{font-family:var(--serif);font-size:16.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand b{color:var(--gilt2);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px light-dark(rgba(78,138,95,.22),rgba(111,169,124,.24))}
.chip{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--on-gilt);flex:none;
  background:linear-gradient(180deg,#D5B978,#A98A44);padding:5px 9px;border-radius:4px}
/* which organisation you are in. A coloured bar under the chrome as well as a
   named chip, because the mistake this prevents — writing into the wrong
   group — is one you make without looking. */
.gchip{flex:none}
.gpick{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--chrome-line);
  border-radius:14px;padding:5px 11px;font-size:11.5px;font-weight:700;color:var(--chrome-fg);white-space:nowrap}
.gpick .gname{max-width:14ch;overflow:hidden;text-overflow:ellipsis}
.gpick .cv{opacity:.6;font-size:9px}
.gdot{width:9px;height:9px;border-radius:50%;background:var(--gaccent,var(--gilt2));flex:none;
  box-shadow:0 0 0 2px light-dark(rgba(255,255,255,.18),rgba(0,0,0,.35))}
.topbar{border-bottom:3px solid var(--gaccent,transparent)}
.pmenu .gdot{width:10px;height:10px}

.idbar{display:flex;gap:6px;align-items:center;flex:none}
.who{font-size:11.5px;font-weight:700;color:var(--chrome-fg);border:1px solid var(--chrome-line);
  border-radius:14px;padding:5px 11px;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px}
.who.icon{padding:5px 8px;font-size:13px;line-height:1}
.who .ini{width:20px;height:20px;border-radius:50%;background:var(--gilt);color:var(--on-gilt);
  font-size:9.5px;display:flex;align-items:center;justify-content:center;flex:none;letter-spacing:.02em}
.who .cv{opacity:.6;font-size:9px}

/* the account menu: everything about you and this device, in one place,
   under your own name — which is where people look for it */
.pmenu{position:fixed;z-index:80;background:var(--raised);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh3);min-width:232px;max-width:280px;padding:6px}
.pmenu .pm-who{padding:9px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pmenu .pm-who b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:500}
.pmenu .pm-who span{font-size:11.5px;color:var(--muted)}
.pmenu button{display:flex;width:100%;text-align:left;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;font-size:14px;color:var(--text);line-height:1.3}
.pmenu button:hover,.pmenu button:focus-visible{background:var(--sunk)}
.pmenu button .k{margin-left:auto;font-size:11.5px;color:var(--muted)}
.pmenu hr{border:none;border-top:1px solid var(--line);margin:6px 0}
.nav{background:light-dark(#232E3F,#18202B);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.navin{max-width:1220px;margin:0 auto;display:flex;gap:2px;padding:0 var(--s3)}
.nav button{padding:11px 14px;font-size:12.5px;font-weight:700;color:var(--chrome-dim);
  white-space:nowrap;border-bottom:2.5px solid transparent}
.nav button[aria-current="true"]{color:var(--chrome-fg);border-bottom-color:var(--gilt2)}

/* ---------- layout ---------- */
.view{max-width:1160px;margin:0 auto;padding:0 var(--s4)}
.view.narrow{max-width:760px}
.head{padding:var(--s5) 0 var(--s3)}
.kick{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gilt-fg)}
.head h1{font-family:var(--serif);font-size:33px;line-height:1.1;margin-top:6px;color:var(--ink)}
.head .sub{color:var(--muted);font-size:13.5px;margin-top:var(--s2);line-height:1.55;max-width:62ch}
.sec{margin-bottom:var(--s5)}
.slabel{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s3);display:flex;gap:var(--s2);align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s3)}
.cols{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:1000px){.cols{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
  .colR{position:sticky;top:112px}}

/* ---------- bits ---------- */
.card{background:var(--page);border:1px solid var(--line);border-radius:10px;padding:var(--s4);box-shadow:var(--sh1)}
.tile{background:var(--page);border:1px solid var(--line);border-radius:10px;padding:var(--s4);
  box-shadow:var(--sh1);display:flex;flex-direction:column;gap:9px}
.tile h3{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.2}
.tile .meta{font-size:12.5px;color:var(--muted);line-height:1.5}
.tile .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:var(--s2)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:12px;border:1px solid var(--line2);
  color:var(--muted);background:var(--page)}
.pill.g{border-color:var(--gilt-line);color:var(--gilt-fg);background:var(--giltl)}
.pill.r{border-color:var(--ribbon-line);color:var(--ribbon-fg);background:var(--ribbonl)}
.pill.k{border-color:var(--ok-line);color:var(--ok-fg);background:var(--okl)}
.badge{background:var(--ribbon);color:var(--on-ribbon);font-size:11px;font-weight:700;border-radius:11px;
  min-width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.hint{font-size:12.5px;color:var(--muted);margin-top:var(--s2);line-height:1.55}
.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--muted);font-size:14px;line-height:1.6;
  border:1px dashed var(--line2);border-radius:10px;background:var(--sunk)}
.empty b{display:block;color:var(--ink);font-family:var(--serif);font-size:19px;font-weight:500;margin-bottom:6px}
.btn{border:1px solid var(--ink);color:var(--ink);border-radius:8px;padding:9px 14px;font-size:13.5px;
  font-weight:700;background:var(--page);display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn.solid{background:var(--ink);color:var(--on-ink)}
.btn.rb{border-color:var(--ribbon);color:var(--ribbon-fg)}
.btn.rb.solid{background:var(--ribbon);color:var(--on-ribbon)}
.btn.quiet{border-color:var(--line2);color:var(--muted)}
.btn.wide{width:100%;padding:13px}
.btn:disabled{opacity:.32;cursor:default}
.btnrow{display:flex;gap:var(--s2);flex-wrap:wrap}
.stat{background:var(--page);border:1px solid var(--line);border-radius:9px;padding:12px 15px;min-width:96px;box-shadow:var(--sh1)}
.stat .v{font-family:var(--serif);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.stat .l{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.statrow{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}

/* segmented control: the one-of-several control used all over */
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--muted);border-radius:6px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--page);color:var(--ink);box-shadow:var(--sh1)}

/* ---------- forms ---------- */
.fld{margin-bottom:var(--s3)}
/* DIRECT CHILD ONLY. `.fld label` also matched the checkbox pills nested
   inside a field and beat `.check` on specificity, so a row of role chips
   came out shouting in 10px capitals with the tick jammed against the word.
   A field's own caption is always its direct child; anything deeper is a
   component with its own opinions. */
.fld > label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.fld .note{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--muted);display:block;margin-top:3px}
/* tick boxes are not text fields: without the exclusion they inherit the
   full-width border, padding and background meant for typing into */
.fld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fld textarea,.fld select{width:100%;border:1px solid var(--line2);border-radius:8px;
  padding:11px 13px;background:var(--paper);line-height:1.5;color:var(--text)}
.fld input[type="file"]{font-size:13px;color:var(--muted);max-width:100%}
.fld textarea{min-height:76px;resize:vertical}
.fld input:disabled,.fld textarea:disabled{opacity:.55;cursor:not-allowed}
.two{display:flex;gap:10px;flex-wrap:wrap}
.two>*{flex:1;min-width:150px}
.two .sm{flex:0 0 108px;min-width:108px}
.checks{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
/* stated in full so it cannot be undercut by an ancestor's label rule again */
.check{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line2);border-radius:20px;
  padding:8px 14px;font-size:13.5px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;
  color:var(--ink);background:var(--page);cursor:pointer;margin:0;white-space:nowrap}
.check input{width:16px;height:16px;accent-color:var(--ribbon);flex:none;margin:0}
.check:hover{border-color:var(--gilt)}
.check[data-on="true"]{border-color:var(--gilt);background:var(--giltl);color:var(--gilt-fg)}

/* a permission, written as the sentence it is: who, what role, over what */
.asg{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--line)}
.asg:first-child{border-top:none}
.asg-who{font-weight:600;color:var(--ink);min-width:120px}
.asg-role{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:12px;border:1px solid var(--gilt-line);
  color:var(--gilt-fg);background:var(--giltl)}
.asg-role.deny{border-color:var(--ribbon-line);color:var(--ribbon-fg);background:var(--ribbonl)}
.asg-prop{font-size:12.5px;color:var(--muted);flex:1;min-width:120px}

/* people picker: a searchable list of real people, not a box you type names into */
.people{border:1px solid var(--line2);border-radius:10px;background:var(--page);overflow:hidden}
.people-search{border:none;border-bottom:1px solid var(--line);border-radius:0;width:100%;
  padding:11px 13px;background:var(--paper);color:var(--text)}
.people-list{max-height:34vh;overflow-y:auto}
.prow{display:flex;align-items:center;gap:11px;padding:10px 13px;width:100%;text-align:left;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(--sunk)}
.prow input{width:17px;height:17px;accent-color:var(--ribbon);flex:none;pointer-events:none}
.prow .pn{flex:1;min-width:0}
.prow .pn b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.25}
.prow .pn span{font-size:11.5px;color:var(--muted)}
.prow[data-on="true"]{background:var(--giltl)}
.people-none{padding:14px 13px;font-size:13px;color:var(--muted)}
.chips-out{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s2)}
.chipx{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gilt-line);background:var(--giltl);
  color:var(--gilt-fg);border-radius:16px;padding:5px 6px 5px 11px;font-size:12.5px;font-weight:600}
.chipx button{font-size:15px;line-height:1;color:var(--gilt-fg);padding:0 4px;opacity:.75}

/* ---------- builder ---------- */
.blockcard{background:var(--page);border:1px solid var(--line);border-radius:10px;padding:var(--s4);
  margin-bottom:var(--s3);box-shadow:var(--sh1);position:relative}
.blockcard[data-locked="true"]{border-color:var(--gilt);background:var(--giltl)}
.blockcard[data-locked="true"]::after{content:attr(data-lockedby);position:absolute;top:-10px;right:14px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gilt-fg);
  background:var(--giltl);border:1px solid var(--gilt);border-radius:11px;padding:3px 10px}
.bhead{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s3);flex-wrap:wrap}
.bhead .n{font-family:var(--serif);font-size:20px;color:var(--gilt-fg);flex:none;
  width:30px;height:30px;border-radius:50%;background:var(--giltl);border:1px solid var(--gilt-line);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600}
.bhead .sp{flex:1}
.bhead .btitle{font-family:var(--serif);font-size:18px;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{border:1px solid var(--line2);color:var(--muted);border-radius:7px;padding:7px 11px;
  font-size:12.5px;font-weight:700;background:var(--page)}
.mini.d{border-color:var(--ribbon);color:var(--ribbon-fg)}
.mini[aria-pressed="true"]{border-color:var(--gilt);background:var(--giltl);color:var(--gilt-fg)}
.mini[disabled]{opacity:.4;cursor:not-allowed}
/* a button that reads as a link: for the one secondary way out of a panel
   ("I have forgotten my password"), where a second solid button would
   compete with the thing we actually want pressed */
.linky{background:none;border:0;padding:0;font-size:13px;font-weight:600;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linky:hover{color:var(--ink)}
/* a cell that is also the way in: the words that state a fact are what
   somebody reaches for when they want to change it */
.clicky{cursor:pointer;border-radius:6px;margin:-3px -6px;padding:3px 6px}
.clicky:hover{background:var(--giltl);box-shadow:inset 0 0 0 1px var(--gilt-line)}

/* ---------- video ----------
   A 16:9 box that never reflows the page as it loads, and a play button big
   enough for a thumb. The poster is a real thumbnail where we have one and
   a flat panel where we do not; either way the frame itself is created on
   the press, never before. */
.vid{margin:12px 0}
.vid video,.vid .vhold{display:block;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:10px;border:1px solid var(--line);overflow:hidden}
.vid .vhold{position:relative;background-size:cover;background-position:center;cursor:pointer}
.vid .vhold iframe{width:100%;height:100%;border:0;display:block}
.vid .vhold.playing{cursor:default}
.vplay{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.vplay:hover{background:rgba(0,0,0,.44)}
.vtri{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.94);
  display:block;position:relative;box-shadow:0 3px 14px rgba(0,0,0,.4)}
.vtri::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:22px solid #111;border-top:13px solid transparent;border-bottom:13px solid transparent}
.vfrom{position:absolute;right:8px;bottom:8px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:3px 7px;border-radius:5px}
.vcap{font-size:13px;color:var(--muted);margin-top:6px}
.vlink{display:inline-block;padding:12px 16px;border:1px solid var(--line2);border-radius:9px;
  font-weight:700;color:var(--ink);text-decoration:none}
.vlink:hover{border-color:var(--gilt);background:var(--giltl)}
.vempty{padding:22px;border:1px dashed var(--line2);border-radius:9px;color:var(--muted);
  font-size:13px;text-align:center}
/* on the television it takes the room, so the caption goes under a full-bleed
   picture rather than beside a thumbnail */
.vid.big{margin:0;width:100%;max-width:min(92vw,calc(92vh*16/9))}
.vid.big video,.vid.big .vhold{border-radius:14px;border:0}
.vid.big .vcap{font-size:calc(var(--u)*1.5);color:var(--on-ink);opacity:.8;
  text-align:center;margin-top:calc(var(--u)*1.2)}
.vid.big .vtri{width:120px;height:120px}
.vid.big .vtri::after{border-left-width:38px;border-top-width:23px;border-bottom-width:23px}
/* the teacher opened this one on your phone */
.pushmark{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gilt-fg);margin:10px 0 -4px}
.itemcard{border:1px solid var(--line);border-left:4px solid var(--gilt);border-radius:8px;padding:var(--s4);
  margin-bottom:10px;background:var(--paper)}
.items{margin-top:6px}
.here{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.avatar.g{background:var(--gilt)} .avatar.r{background:var(--ribbon)} .avatar.k{background:var(--ok)}

/* the part that was hardest to understand: writing a poll */
.optlist{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.optrow{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:7px}
.optrow .letter{font-size:12px;font-weight:700;color:var(--muted);text-align:center;
  font-variant-numeric:tabular-nums}
.optrow input{width:100%;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;
  background:var(--paper);color:var(--text)}
.optrow .ox,.optrow .op{width:32px;height:32px;border:1px solid var(--line2);border-radius:8px;
  color:var(--muted);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.optrow .ox:hover{border-color:var(--ribbon);color:var(--ribbon-fg)}
.askbox{border:1px solid var(--line2);border-radius:10px;padding:var(--s4);background:var(--sunk);margin-top:6px}
.askbox.on{border-color:var(--gilt);background:var(--giltl)}
.askhead{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.askhead .t{font-size:13px;font-weight:700;color:var(--ink);flex:1}

/* the little rich-text toolbar */
.rt{display:flex;gap:4px;margin-bottom:5px}
.rt button{border:1px solid var(--line2);border-radius:6px;min-width:30px;height:28px;font-size:12.5px;
  font-weight:700;color:var(--muted);background:var(--page);padding:0 8px}
.rt button:hover{border-color:var(--gilt);color:var(--gilt-fg)}
.rt .rtb{font-weight:800} .rt .rti{font-style:italic;font-family:var(--serif);font-size:15px}

/* ---------- the noticeboard ----------
   A poster, not a table row. The picture is what makes somebody stop, so it
   leads; the date and time are next because that is the question being
   asked; the address is a link because the next thing anybody does with an
   address is try to drive to it. */
.notices{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--s3)}
.notice{background:var(--page);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--sh1);display:flex;flex-direction:column}
.notice.near{border-color:var(--gilt);box-shadow:0 0 0 1px var(--gilt-line),var(--sh2)}
.nc-img{aspect-ratio:16/9;overflow:hidden;background:var(--sunk)}
.nc-img img{width:100%;height:100%;object-fit:cover}
.nc-body{padding:var(--s4);display:flex;flex-direction:column;gap:5px}
.nc-when{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nc-kind{font-size:10px;letter-spacing:.18em;padding:3px 9px;border-radius:11px;border:1px solid currentColor}
/* whose activity it is, said plainly on the card */
.nc-org{font-size:10px;letter-spacing:.14em;padding:3px 9px;border-radius:11px;
  border:1px solid var(--line2);color:var(--muted)}
.pr-org{font-weight:700}
.nc-pin{color:var(--gilt);font-size:13px;letter-spacing:0}
/* each kind carries its own accent, so a board of five things reads as five
   different things rather than one wall of cards */
.notice.k-activity{border-top:3px solid var(--gilt)}
.notice.k-activity .nc-kind{color:var(--gilt-fg)}
.notice.k-notice{border-top:3px solid var(--ink2)}
.notice.k-notice .nc-kind{color:var(--ink2)}
.notice.k-notice h3{font-size:19px}
.notice.k-service{border-top:3px solid var(--ok)}
.notice.k-service .nc-kind{color:var(--ok-fg)}
.notice.pinned{box-shadow:0 0 0 1px var(--gilt-line),var(--sh2)}
.notice h3{font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.18;margin-top:2px}
.nc-place{font-size:14.5px;color:var(--ink2);font-weight:600}
.nc-addr{font-size:13px;color:var(--gilt-fg);text-decoration:none;border-bottom:1px solid var(--gilt-line);
  align-self:flex-start;padding-bottom:1px}
.nc-addr:hover{color:var(--ink)}
.nc-det{font-size:14px;line-height:1.55;color:var(--text);margin-top:4px}
.nc-bring{font-size:13px;color:var(--muted);background:var(--sunk);border-radius:7px;padding:8px 11px;margin-top:6px}
.nc-bring b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px}

/* when we next meet: one row per organisation, each carrying its colour */
.nextlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s3)}
.nextup{display:flex;align-items:stretch;gap:0;background:var(--page);border:1px solid var(--line);
  border-radius:11px;overflow:hidden;box-shadow:var(--sh1)}
.nu-when{background:var(--chrome-bg);color:var(--chrome-fg);padding:14px 18px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;min-width:92px;flex:none}
.nu-when b{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gilt2)}
.nu-when span{font-family:var(--serif);font-size:20px;margin-top:2px;color:var(--chrome-fg)}
.nu-what{padding:14px 18px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.nu-what b{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:500;margin-top:2px}

/* lessons we have had: a list, not cards — it is an index, and it gets long */
.pastlist{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--page)}
.pastrow{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;padding:12px 15px;
  border-bottom:1px solid var(--line);color:var(--text)}
.pastrow:last-of-type{border-bottom:none}
.pastrow:hover{background:var(--sunk)}
.pr-date{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  min-width:62px;flex:none}
.pr-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pr-t b{font-family:var(--serif);font-size:17.5px;color:var(--ink);font-weight:500;line-height:1.2}
.pr-who{font-size:12.5px;color:var(--muted);flex:none;white-space:nowrap}
@media(max-width:560px){.pr-who{display:none}}

/* a room that is live right now */
.tile.live{border-color:var(--ribbon);border-left-width:4px}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--ribbon);display:inline-block;
  margin-right:7px;animation:pulse 1.8s infinite}

/* ---------- room ---------- */
.spine{position:relative;margin:var(--s4) 0 0 10px;padding-left:var(--s5);border-left:2px solid var(--line)}
.blk{position:relative;padding:var(--s2) 0 var(--s6)}
.blk.past{opacity:.5}
.blk.now::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 12px);top:0;bottom:var(--s5);
  width:3px;background:var(--ribbon);border-radius:2px}
.blk h2{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink);margin:3px 0 var(--s2)}
.blk p{margin-bottom:10px}
.rib{position:absolute;left:-11px;top:6px;width:18px;height:52px;background:var(--ribbon);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%);box-shadow:0 2px 6px rgba(0,0,0,.24)}
.hereis{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ribbon);background:var(--ribbon);border-radius:3px;padding:3px 9px;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:10px 0 2px}
.chipb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--page);
  border-radius:20px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:var(--sh1)}
.chipb .d{width:7px;height:7px;border-radius:50%;background:var(--gilt);flex:none}
.chipb[aria-expanded="true"]{border-color:var(--gilt);background:var(--giltl)}
.chipb.pushed{border-color:var(--ribbon);background:var(--ribbonl);color:var(--ribbon-fg)}
.chipb.pushed .d{background:var(--ribbon);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.drawer{display:none;margin:10px 0 4px}
.drawer.open{display:block}
.scr{background:var(--page);border:1px solid var(--line);border-left:5px solid var(--gilt);
  border-radius:6px;padding:16px 18px;box-shadow:var(--sh1)}
.scr .ref{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gilt-fg);margin-bottom:8px}
.verse{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink);margin-bottom:10px}
.verse .vn{font-size:11px;vertical-align:super;color:var(--gilt-fg);margin-right:3px;font-family:var(--sans);font-weight:700}
.w{border-radius:3px;padding:0 1px;cursor:pointer;transition:background .18s}
.w.mine{box-shadow:inset 0 -2px 0 var(--ribbon)}
.quote{background:var(--page);border:1px solid var(--line);border-left:5px solid var(--ribbon);
  border-radius:6px;padding:16px 18px}
.quote .qt{font-family:var(--serif);font-size:19.5px;line-height:1.5;color:var(--ink);font-style:italic}
.quote .att{font-size:12px;color:var(--muted);margin-top:10px}
.fact{background:var(--giltl);border:1px solid var(--gilt-line);border-radius:6px;padding:13px 15px;font-size:14.5px}
.term{background:var(--page);border:1px solid var(--line);border-radius:6px;padding:13px 15px;font-size:14.5px}
.fig{background:var(--page);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:var(--s3) 0}
.fig figcaption{padding:10px 13px;font-size:12.5px;color:var(--muted)}
.stub{width:100%;text-align:left;background:var(--page);border:1px solid var(--ribbon);border-radius:9px;
  padding:14px;margin-top:10px;display:flex;gap:var(--s3);align-items:center;box-shadow:var(--sh1)}
.stub .t{flex:1;min-width:0}
.stub .k{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ribbon-fg)}
.stub .q{font-family:var(--serif);font-size:18.5px;color:var(--ink);margin-top:3px;line-height:1.3}
.stub .go{font-size:12.5px;font-weight:700;color:var(--on-ribbon);background:var(--ribbon);border-radius:14px;padding:7px 13px;flex:none}

/* ---------- live sheet ---------- */
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:46;background:var(--page);border-top:1px solid var(--line);
  box-shadow:0 -4px 18px light-dark(rgba(35,46,63,.10),rgba(0,0,0,.5));
  padding:11px var(--s4) calc(11px + env(safe-area-inset-bottom))}
body.hasact .bbar{bottom:44px}
body.hasact .peek{bottom:calc(var(--bar) + 44px + env(safe-area-inset-bottom))}
.bbar-in{max-width:760px;margin:0 auto;display:flex;gap:9px}
.bbar-in .btn{flex:1;padding:12px}
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.55);z-index:60;backdrop-filter:blur(2px)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--page);border-radius:18px 18px 0 0;
  max-width:760px;margin:0 auto;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:var(--sh3);touch-action:none}
.sheet.snap{transition:transform .22s cubic-bezier(.32,.72,0,1)}
.grip{padding:10px var(--s4) var(--s2);flex:none;cursor:grab;touch-action:none}
.grip .gb{display:block;width:48px;height:5px;background:var(--line2);border-radius:3px;margin:0 auto 11px}
.grip-row{display:flex;align-items:center;gap:10px}
.grip-row h3{font-family:var(--serif);font-size:21px;color:var(--ink);flex:1}
.tuck{font-size:12.5px;font-weight:700;color:var(--muted);border:1px solid var(--line2);border-radius:14px;padding:6px 13px}
.sheet-body{overflow-y:auto;padding:var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom))}
.peek{position:fixed;left:0;right:0;bottom:calc(var(--bar) + env(safe-area-inset-bottom));z-index:45;
  max-width:760px;margin:0 auto;padding:0 var(--s3) var(--s2)}
.peek-in{background:var(--chrome-bg);color:var(--chrome-fg);border-radius:11px;padding:12px 13px;display:flex;
  gap:11px;align-items:center;box-shadow:var(--sh3);border:1px solid var(--chrome-line)}
.peek-t{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek-k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gilt2);display:block}
.peek-up{border:1px solid var(--chrome-line);border-radius:13px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--chrome-fg);flex:none}
.peek-x{font-size:20px;color:var(--chrome-dim);padding:2px 6px;flex:none}
.lgrp{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s4)}
.lgrp:first-child{border-top:none;padding-top:0;margin-top:0}
.lq{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1.28;margin:10px 0 var(--s3)}
.opt{display:block;width:100%;text-align:left;margin-bottom:var(--s2);border:1px solid var(--line2);
  background:var(--paper);border-radius:8px;overflow:hidden;position:relative}
.opt .bar{position:absolute;inset:0;width:0;background:var(--giltl);transition:width .5s cubic-bezier(.32,.72,0,1)}
.opt .in{position:relative;z-index:1;padding:13px;display:flex;justify-content:space-between;gap:10px;font-size:15px;align-items:center}
.opt .mark{width:20px;height:20px;border:1.5px solid var(--line2);border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
.opt.multi .mark{border-radius:5px}
.opt .pct{font-weight:700;color:var(--gilt-fg);font-variant-numeric:tabular-nums}
.opt[data-c="true"]{border-color:var(--gilt);box-shadow:inset 0 0 0 1px var(--gilt)}
.opt[data-c="true"] .mark{background:var(--gilt);border-color:var(--gilt);color:var(--on-gilt)}
.ans{display:flex;flex-direction:column;gap:var(--s2)}
.acard{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px;
  display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.acard .tx{font-size:14.5px;line-height:1.45}
.agree{border:1px solid var(--line2);background:var(--page);border-radius:15px;font-size:12.5px;
  font-weight:700;padding:7px 12px;color:var(--muted);white-space:nowrap;flex:none}
.agree[data-on="true"]{border-color:var(--gilt);color:var(--gilt-fg);background:var(--giltl)}
.arow{display:flex;gap:var(--s2);margin-top:var(--s3)}
.arow input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:8px;padding:12px;background:var(--paper);color:var(--text)}
.share{display:flex;gap:10px;margin-top:11px;font-size:13px;color:var(--muted);line-height:1.45;align-items:flex-start}
.share input{margin-top:3px;width:18px;height:18px;accent-color:var(--ribbon);flex:none}

/* ---------- quizzes ----------
   Answer tiles are never told apart by colour alone: every one carries a
   shape and the words as well, so they work for somebody who cannot
   distinguish the red from the green and for somebody at the back who cannot
   read the screen. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:9px;margin:10px 0}
.tile-a{display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:11px;text-align:left;
  border:2px solid var(--line2);background:var(--page);color:var(--ink);font-size:16px;line-height:1.3;
  width:100%;position:relative;transition:transform .12s}
.tile-a .sh{font-size:19px;line-height:1;flex:none;width:24px;text-align:center}
.tile-a .tx{flex:1;min-width:0}
.tile-a .cnt{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);flex:none}
.tile-a .ok{font-size:17px;color:var(--ok-fg);flex:none}
button.tile-a:hover{transform:translateY(-1px)}
button.tile-a:disabled{opacity:.5}
.tile-a.c0{border-color:#8C3B34;background:light-dark(#FBF1EF,#2E1715)} .tile-a.c0 .sh{color:#B4534A}
.tile-a.c1{border-color:#3A5A8C;background:light-dark(#EDF1F8,#151D2B)} .tile-a.c1 .sh{color:#6E8FC4}
.tile-a.c2{border-color:#3F6B4A;background:light-dark(#EDF4EE,#132119)} .tile-a.c2 .sh{color:#6FA97C}
.tile-a.c3{border-color:#8A6F2E;background:light-dark(#F7F1E1,#241D0C)} .tile-a.c3 .sh{color:#C6A75E}
.tile-a.c4{border-color:#5D3A73;background:light-dark(#F2EDF6,#1E1526)} .tile-a.c4 .sh{color:#9A7BB0}
.tile-a.c5{border-color:#2F6B6B;background:light-dark(#EAF3F3,#12211F)} .tile-a.c5 .sh{color:#5FA3A3}
.tile-a.picked{box-shadow:inset 0 0 0 3px var(--ink);transform:translateY(-1px)}
.tile-a.right{box-shadow:inset 0 0 0 3px var(--ok)}
.tile-a.wrong{opacity:.35}

/* the writing side: a shape button that ticks an answer as correct */
.optrow.quizrow{grid-template-columns:38px 1fr auto}
.qshape{width:36px;height:36px;border:2px solid var(--line2);border-radius:9px;font-size:16px;
  color:var(--muted);background:var(--page);display:flex;align-items:center;justify-content:center}
.optrow.right .qshape{border-color:var(--ok);color:var(--ok-fg);background:var(--okl)}
.optrow.right input{border-color:var(--ok-line)}

/* on a phone, while playing */
.gp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.gp-score{font-family:var(--serif);font-size:20px;color:var(--ink)}
.gp-q{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1.3;margin:4px 0 10px}
.gp-clock{font-family:var(--serif);font-size:30px;color:var(--gilt-fg);text-align:center;
  font-variant-numeric:tabular-nums;margin-top:6px}
.gp-clock[data-low="true"]{color:var(--ribbon-fg)}
.gp-verdict{font-family:var(--serif);font-size:24px;padding:14px;border-radius:10px;text-align:center;margin-bottom:12px}
.gp-verdict.yes{background:var(--okl);border:1px solid var(--ok-line);color:var(--ok-fg)}
.gp-verdict.no{background:var(--ribbonl);border:1px solid var(--ribbon-line);color:var(--ribbon-fg)}

/* the leaderboard, wherever it appears */
.ladder{display:flex;flex-direction:column;gap:5px}
.lrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--page)}
.lrow.me{border-color:var(--gilt);background:var(--giltl)}
.lrow .pl{font-family:var(--serif);font-size:17px;color:var(--gilt-fg);width:24px;flex:none;text-align:center}
.lrow .nm{flex:1;min-width:0;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .sc{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);flex:none}

/* ---------- console ---------- */
.now{background:var(--page);border:1px solid var(--line);border-top:4px solid var(--ribbon);
  border-radius:10px;padding:var(--s4);margin-bottom:var(--s4);box-shadow:var(--sh2)}
.now h2{font-family:var(--serif);font-size:28px;color:var(--ink);line-height:1.14;margin:7px 0 2px}
.cues{margin-top:var(--s4);border-left:3px solid var(--gilt);padding-left:var(--s4);
  display:flex;flex-direction:column;gap:11px;font-size:calc(1em * var(--notes,1))}
.cue{font-size:16.5px;line-height:1.52;color:var(--ink2)}
.cue.say{font-family:var(--serif);font-size:20px;color:var(--ink)}
.readbox{margin-top:var(--s4);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:var(--s4)}
.readbox .h{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.push{border:1px solid var(--gilt);color:var(--gilt-fg);border-radius:15px;padding:6px 12px;font-size:12px;
  font-weight:700;white-space:nowrap;background:var(--page)}
.push[data-on="true"]{background:var(--gilt);color:var(--on-gilt)}
.push.rb{border-color:var(--ribbon);color:var(--ribbon-fg)}
.push.rb[data-on="true"]{background:var(--ribbon);color:var(--on-ribbon)}
.strip{background:var(--chrome-bg);color:var(--chrome-fg);border-radius:10px;padding:var(--s4);margin-bottom:var(--s4)}
.strip .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-dim);margin-bottom:11px}
.modes{display:flex;gap:6px;flex-wrap:wrap}
.modes button{border:1px solid var(--chrome-line);color:var(--chrome-fg);border-radius:7px;padding:8px 12px;font-size:12.5px;font-weight:700}
.modes button[aria-pressed="true"]{background:var(--chrome-fg);color:var(--chrome-bg)}
.panel{background:var(--page);border:1px solid var(--line);border-radius:10px;padding:var(--s4);margin-bottom:var(--s4);box-shadow:var(--sh1)}
.ph{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:var(--s3);flex-wrap:wrap}
.trow{position:relative;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--paper);margin-bottom:7px}
.trow .bar{position:absolute;inset:0;width:0;background:var(--giltl);transition:width .45s ease}
.trow .in{position:relative;z-index:1;padding:11px 13px;display:flex;justify-content:space-between;gap:10px;font-size:15px}
.trow .n{font-weight:700;color:var(--gilt-fg);font-variant-numeric:tabular-nums}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:13px;
  display:flex;gap:11px;align-items:flex-start;margin-bottom:var(--s2)}
.tcard.read{opacity:.45}
.tcard .b{flex:1;min-width:0}
.tcard .t{font-family:var(--serif);font-size:18.5px;color:var(--ink);line-height:1.34}
.tcard .m{font-size:11.5px;color:var(--muted);margin-top:7px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.voice{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ok-fg);
  border:1px solid var(--ok-line);background:var(--okl);border-radius:3px;padding:2px 6px}
.tick{border:1px solid var(--line2);border-radius:15px;padding:7px 11px;font-size:11.5px;font-weight:700;
  color:var(--muted);white-space:nowrap;background:var(--page)}
.tick[data-on="true"]{border-color:var(--gilt);color:var(--gilt-fg);background:var(--giltl)}
.map{display:flex;flex-direction:column;gap:6px}
.mi{display:flex;align-items:center;gap:var(--s3);background:var(--page);border:1px solid var(--line);
  border-radius:8px;padding:12px 13px;width:100%;text-align:left;color:var(--text)}
.mi[data-s="here"]{border-color:var(--ribbon);background:var(--ribbonl)}
.mi[data-s="past"]{opacity:.5}
.mi.off{background:repeating-linear-gradient(135deg,transparent,transparent 7px,var(--sunk) 7px,var(--sunk) 14px)}
.mi .nu{font-family:var(--serif);font-size:17px;color:var(--gilt-fg);width:18px;flex:none}
.mi .nm{flex:1;min-width:0;font-weight:600;color:var(--ink);font-size:14.5px}
/* what is on a block, so a quiz four blocks away is something you can pace towards */
.mi .mmk{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gilt-fg);margin-top:2px}
.mi .mn{font-size:12px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
/* program / preview, borrowed from a vision mixer: red is on air, gold is next */
.tally{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px}
.tally::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.tally.on{color:var(--ribbon-fg)} .tally.next{color:var(--gilt-fg)}
.pvbox{border:2px solid var(--line);border-radius:10px;padding:var(--s3);background:var(--page)}
.pvbox.on{border-color:var(--ribbon)} .pvbox.next{border-color:var(--gilt)}
.pvwrap{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:7px;margin-top:9px;
  background:var(--ink3);pointer-events:none}
.pvwrap .stage{position:absolute;inset:0;width:1280px;height:720px;transform-origin:top left;padding:24px 34px}
.kbd{display:inline-block;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--page);
  font-family:ui-monospace,Consolas,monospace}

/* ---------- stage ----------
   Locked to dark: it faces a room, not a person, and it must not follow
   whatever the teacher set the app to. */
.stage{color-scheme:dark;--u:min(1vw,1.72vh);--fit:1;
  position:fixed;inset:0;background:radial-gradient(125% 95% at 50% -18%,#2F3E55,#0B0F16);
  color:#F5F1E6;display:flex;flex-direction:column;
  padding:calc(var(--u)*3.4) calc(var(--u)*5) calc(var(--u)*2.6);overflow:hidden;z-index:70}
.st-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:calc(var(--u)*3);flex:none;min-height:calc(var(--u)*5)}
.st-kick{font-size:calc(var(--u)*1.45);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:#E0C88C;line-height:1.3}
.st-join{text-align:right;flex:none;line-height:1.15}
.st-join .lbl{display:block;font-family:var(--sans);font-size:calc(var(--u)*1.1);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,241,230,.5);margin-bottom:calc(var(--u)*.5)}
.st-code{font-family:var(--serif);font-size:calc(var(--u)*2.5);color:#E0C88C;letter-spacing:.02em;white-space:nowrap}
.st-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--u)*2.5) 0;overflow:hidden}
.st-body h1{font-family:var(--serif);font-weight:500;
  font-size:calc(var(--u)*5.6*var(--fit));line-height:1.06;max-width:19ch;letter-spacing:-.005em}
.st-body h1.q{font-size:calc(var(--u)*4.3*var(--fit));max-width:24ch;line-height:1.14}
.big{font-family:var(--serif);font-size:calc(var(--u)*3.15*var(--fit));line-height:1.4;
  margin-top:calc(var(--u)*2.6);max-width:26ch}
.big .vn{font-size:.46em;vertical-align:super;color:#E0C88C;font-family:var(--sans);
  font-weight:700;margin-right:.28em;letter-spacing:.04em}
.att{font-size:calc(var(--u)*1.6);color:rgba(245,241,230,.62);margin-top:calc(var(--u)*2);letter-spacing:.02em}
.spotlight{font-family:var(--serif);font-style:italic;font-size:calc(var(--u)*4.4*var(--fit));
  line-height:1.24;max-width:22ch;margin-top:calc(var(--u)*1.6)}
.spotlight::before{content:"\201C";color:#E0C88C;margin-right:.06em}
.spotlight::after{content:"\201D";color:#E0C88C}
.sbars{display:flex;flex-direction:column;gap:calc(var(--u)*1.15);margin-top:calc(var(--u)*3)}
.sbar{position:relative;border:1px solid rgba(245,241,230,.24);border-radius:calc(var(--u)*.7);overflow:hidden}
.sbar .f{position:absolute;inset:0;width:0;background:linear-gradient(90deg,rgba(198,167,94,.42),rgba(198,167,94,.22));
  transition:width .8s cubic-bezier(.32,.72,0,1)}
.sbar .in{position:relative;display:flex;justify-content:space-between;align-items:baseline;
  gap:calc(var(--u)*2);padding:calc(var(--u)*1.35) calc(var(--u)*2);
  font-size:calc(var(--u)*2.35*var(--fit));font-family:var(--serif);line-height:1.25}
.sbar .n{color:#E0C88C;font-variant-numeric:tabular-nums;font-family:var(--sans);font-size:.82em;font-weight:700;flex:none}
.sgrid{display:grid;gap:calc(var(--u)*1.15);margin-top:calc(var(--u)*2.2);min-height:0;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*26),1fr));align-content:start}
.sgrid .c{border:1px solid rgba(245,241,230,.2);border-radius:calc(var(--u)*.7);
  padding:calc(var(--u)*1.5) calc(var(--u)*1.7);background:rgba(245,241,230,.045);
  font-family:var(--serif);font-size:calc(var(--u)*2*var(--fit));line-height:1.32}
.sgrid .c .u{display:block;font-family:var(--sans);font-size:.44em;font-weight:700;color:#E0C88C;
  margin-top:.7em;letter-spacing:.12em;text-transform:uppercase}
.st-foot{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*2);
  border-top:1px solid rgba(245,241,230,.16);padding-top:calc(var(--u)*1.6);
  font-size:calc(var(--u)*1.35);color:rgba(245,241,230,.6);flex:none;letter-spacing:.03em}
.st-foot span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-pips{display:flex;gap:calc(var(--u)*.5);flex:none;align-items:center}
.st-pips i{width:calc(var(--u)*1.5);height:calc(var(--u)*.34);border-radius:calc(var(--u)*.2);
  background:rgba(245,241,230,.22);display:block}
.st-pips i.done{background:rgba(245,241,230,.5)}
.st-pips i.now{background:#E0C88C;width:calc(var(--u)*3)}
/* a quiz on the big screen */
.gs-top{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--u)*2);
  margin-bottom:calc(var(--u)*1.5)}
.gs-clock{font-family:var(--serif);font-size:calc(var(--u)*5);color:#E0C88C;
  font-variant-numeric:tabular-nums;line-height:1}
.gs-clock.low{color:#E8A099}
.stage .tiles{grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*30),1fr));
  gap:calc(var(--u)*1.1);margin-top:calc(var(--u)*2)}
.stage .tile-a{background:rgba(245,241,230,.06);border-color:rgba(245,241,230,.28);color:#F5F1E6;
  font-size:calc(var(--u)*2.2*var(--fit));padding:calc(var(--u)*1.5) calc(var(--u)*1.8);
  border-radius:calc(var(--u)*.8)}
.stage .tile-a .sh{font-size:calc(var(--u)*2.6);width:calc(var(--u)*3)}
.stage .tile-a .cnt{color:#E0C88C;font-size:calc(var(--u)*1.6)}
.stage .tile-a .ok{color:#8FC79A;font-size:calc(var(--u)*2.4)}
.stage .tile-a.c0{border-color:#B4534A} .stage .tile-a.c0 .sh{color:#E8A099}
.stage .tile-a.c1{border-color:#6E8FC4} .stage .tile-a.c1 .sh{color:#9DB6DD}
.stage .tile-a.c2{border-color:#6FA97C} .stage .tile-a.c2 .sh{color:#9CCBA6}
.stage .tile-a.c3{border-color:#C6A75E} .stage .tile-a.c3 .sh{color:#E0C88C}
.stage .tile-a.c4{border-color:#9A7BB0} .stage .tile-a.c4 .sh{color:#BFA6CE}
.stage .tile-a.c5{border-color:#5FA3A3} .stage .tile-a.c5 .sh{color:#8FC4C4}
.stage .tile-a.right{box-shadow:inset 0 0 0 calc(var(--u)*.3) #8FC79A;background:rgba(143,199,154,.14)}
.stage .tile-a.wrong{opacity:.28}
.gs-board{display:flex;flex-direction:column;gap:calc(var(--u)*.9);margin-top:calc(var(--u)*2)}
.gs-row{display:flex;align-items:center;gap:calc(var(--u)*2);border:1px solid rgba(245,241,230,.2);
  border-radius:calc(var(--u)*.7);padding:calc(var(--u)*1.2) calc(var(--u)*2);
  font-size:calc(var(--u)*2.3);background:rgba(245,241,230,.04)}
.gs-row.first{border-color:#E0C88C;background:rgba(224,200,140,.12)}
.gs-row .p{font-family:var(--serif);color:#E0C88C;width:calc(var(--u)*3);flex:none}
.gs-row .n{flex:1;min-width:0;font-family:var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-row .s{font-variant-numeric:tabular-nums;color:#E0C88C;flex:none}

.stage.blank .st-body,.stage.blank .st-foot,.stage.blank .st-head{opacity:.06}
.stage.white{background:#F5F1E6}
.stage.white .st-body,.stage.white .st-foot,.stage.white .st-head{opacity:0}
.stage-exit{position:fixed;right:16px;bottom:16px;z-index:71;border:1px solid rgba(245,241,230,.35);
  color:#F5F1E6;border-radius:20px;padding:9px 15px;font-size:12px;font-weight:700;
  background:rgba(20,28,39,.5);opacity:.25;transition:opacity .2s}
.stage-exit:hover,.stage-exit:focus-visible{opacity:1}

/* ---------- modal + toast ---------- */
.modal{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.modal-card{background:var(--raised);border-radius:16px;max-width:460px;width:100%;max-height:88vh;
  overflow-y:auto;padding:var(--s5);box-shadow:var(--sh3);border:1px solid var(--line)}
.modal-card.wide{max-width:720px}
.modal-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:var(--s3)}
.modal-head h2{font-family:var(--serif);font-size:26px;color:var(--ink);flex:1;line-height:1.15}
.modal .x{font-size:26px;line-height:1;color:var(--muted);padding:0 6px}
.tabs{display:flex;gap:6px;margin-bottom:var(--s4);border-bottom:1px solid var(--line)}
.tabs button{padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent}
.tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gilt)}
.msg{border-radius:8px;padding:11px 13px;font-size:13.5px;margin-bottom:var(--s3);line-height:1.5}
.msg.bad{background:var(--ribbonl);border:1px solid var(--ribbon-line);color:var(--ribbon-fg)}
.msg.ok{background:var(--okl);border:1px solid var(--ok-line);color:var(--ok-fg)}
.pwwrap{position:relative;display:flex;align-items:center}
.pwwrap input{padding-right:64px}
.pweye{position:absolute;right:10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line2);border-radius:12px;padding:4px 9px;background:var(--page)}
.fieldnote{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.fieldnote.ok{color:var(--ok-fg)}
.fieldnote.bad{color:var(--ribbon-fg)}
.au-dim{opacity:.42;pointer-events:none;transition:opacity .2s}
.authfoot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.55}

/* ---------- activity pane ---------- */
.act{position:fixed;left:0;right:0;bottom:0;z-index:44;background:var(--chrome-bg);color:var(--chrome-fg);
  box-shadow:0 -6px 24px light-dark(rgba(20,28,39,.28),rgba(0,0,0,.55))}
.act-head{width:100%;display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);
  color:var(--chrome-fg);text-align:left}
.act-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-dim);flex:none}
.act-latest{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--chrome-fg)}
.act-chev{font-size:15px;color:var(--chrome-dim);transition:transform .18s;flex:none}
.act.open .act-chev{transform:rotate(180deg)}
.act-list{display:none;max-height:38vh;overflow-y:auto;padding:0 var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--chrome-line)}
.act.open .act-list{display:block}
.act-row{display:flex;gap:var(--s3);padding:9px 0;border-bottom:1px solid var(--chrome-line);font-size:13.5px;line-height:1.45}
.act-row:last-child{border-bottom:none}
.act-t{flex:none;width:72px;font-size:11.5px;color:var(--gilt2);font-variant-numeric:tabular-nums;padding-top:2px}
.act-w{flex:1;min-width:0}
.act-w b{font-weight:600;color:inherit}
.act-d{color:var(--chrome-dim)}
body.hasact{padding-bottom:calc(var(--bar) + var(--peekh) + 46px + env(safe-area-inset-bottom))}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + var(--peekh) + 28px);
  z-index:90;background:var(--chrome-bg);color:var(--chrome-fg);font-size:13.5px;padding:12px 20px;
  border-radius:24px;display:none;max-width:88%;text-align:center;box-shadow:var(--sh3);border:1px solid var(--chrome-line)}
.toast.show{display:block}

@media print{
  .topbar,.nav,.bbar,.act,.toast,.btnrow,.stage-exit{display:none!important}
  body{padding:0;background:#fff}
  .card,.panel{break-inside:avoid;box-shadow:none}
}

/* ---------- permissions ----------
   One row per assignment, read left to right as the sentence it is: who,
   which role, how far it reaches. The fourth column is the action, and it is
   empty on an inherited row because there is nothing to take away here — you
   have to go where it was granted. */
.perm-head{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(90px,.8fr) minmax(140px,1.8fr) auto;
  gap:var(--s3);padding:0 0 7px;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.perm{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(90px,.8fr) minmax(140px,1.8fr) auto;
  gap:var(--s3);align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.perm:last-child{border-bottom:none}
.perm.inh{opacity:.72;background:linear-gradient(90deg,var(--sunk),transparent 60%)}
.perm.deny{background:var(--ribbonl)}
.p-who{font-weight:600;color:var(--ink);min-width:0}
.p-sub{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.35}
.p-role{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gilt-fg);align-self:start;padding-top:2px}
.perm.deny .p-role{color:var(--ribbon-fg)}
.p-cov{font-size:13px;color:var(--muted);min-width:0}
.p-act{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:620px){
  .perm-head{display:none}
  .perm{grid-template-columns:1fr auto;gap:6px}
  .p-role{grid-row:1;grid-column:2;justify-self:end}
  .p-cov{grid-column:1/-1}
  .p-act{grid-column:1/-1;justify-content:flex-start}
}