/* Barlow Rota: app-specific components, built only from Obolo tokens */

/* ---------- Login ---------- */
/* Sign in: the overlap panel in the practice green, the form beside it */
.login{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px;padding:10px;overflow:hidden;background:var(--bg)}
.login-brand{min-height:0;display:flex;flex-direction:column;
  padding:clamp(28px,4.4vw,64px);border-radius:22px;background:var(--accent);color:var(--accent-ink);overflow:hidden;animation:rise .6s var(--ease) both}
.login-brand .mark{color:currentColor}
.lb-top{display:flex;align-items:center;gap:10px;font:500 16px/1 var(--font);letter-spacing:-.01em}
.lb-top .mark{width:26px;height:26px}
.lb-mid{margin:auto 0}
.lb-mark .mark{display:block;width:clamp(96px,min(19vw,30vh),280px);height:auto;aspect-ratio:1;margin-left:-4%}
.lb-head{margin:clamp(18px,4vh,44px) 0 0;max-width:9em;font:600 clamp(36px,min(5.4vw,9.5vh),84px)/.95 var(--serif);letter-spacing:-.05em;text-wrap:balance}
.lb-lede{margin:clamp(16px,2.6vh,26px) 0 0;max-width:30em;font:400 clamp(14.5px,1.2vw,17px)/1.55 var(--font);letter-spacing:-.01em;opacity:.86}
.lb-url{padding-top:28px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.78}
.login-side{min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:40px 24px 26px}
.login-by{flex:none;margin-top:40px;display:flex;justify-content:center}
.login-card{flex:none;margin:auto 0;width:min(400px,100%);display:grid;gap:18px;animation:rise .6s .1s var(--ease) both}
@media (max-width:820px){
  .login{grid-template-columns:1fr;grid-template-rows:auto;gap:0;padding:0;overflow:auto}
  .login-brand{border-radius:0 0 22px 22px;padding:20px 16px 24px}
  .lb-mark,.lb-url,.lb-lede{display:none}
  .lb-head{margin-top:26px;max-width:none;font-size:clamp(30px,8.4vw,40px)}
  .lb-lede{margin-top:10px;font-size:14px}
  .login-side{overflow:visible;padding:30px 16px 26px}
  .login-card{margin:0}
}
.login-card h1{margin:0;font:500 clamp(28px,2.6vw,38px)/1.1 var(--serif);letter-spacing:-.035em}
.login-card .sub{margin:2px 0 4px;color:var(--muted)}
.login-card .err{color:var(--danger);font-size:var(--t-small);min-height:18px}
.login-card .fine{font-size:var(--t-caption);color:var(--faint);line-height:1.5}
.login-form{display:grid;gap:18px}
.login-card .input.code{font:500 22px/1.2 var(--mono,ui-monospace,monospace);letter-spacing:.18em;text-align:center}
.login-links{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.linkish{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:var(--t-small);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--ink)}
.login-steps{margin:0;padding-left:20px;display:grid;gap:14px;color:var(--ink-2);line-height:1.5}
.login-steps li::marker{color:var(--muted)}
.login-qr{margin:10px 0 4px;width:220px;height:220px;max-width:100%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.login-qr svg{display:block;width:100%;height:100%}
.login-key summary{cursor:pointer;color:var(--muted);font-size:var(--t-small)}
.login-key p{margin:6px 0 4px;font-size:var(--t-small)}
.login-key code{font:500 14px/1.5 var(--mono,ui-monospace,monospace);word-break:break-all;user-select:all}
.login-codes{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;border-radius:12px;box-shadow:0 0 0 1px var(--line);font:500 15px/1.4 var(--mono,ui-monospace,monospace)}
@media print{.login-by,.login-brand,.login-links,.login-form>.btn{display:none}.login{display:block}}

/* ---------- Initials chips (one colour per person, as Carol colour-codes them) ---------- */
.chip{--c:#d9d6cc;--ci:#141413;display:inline-grid;place-items:center;min-width:36px;height:26px;padding:0 6px;border-radius:7px;
  background:var(--c);color:var(--ci);font:600 var(--t-small)/1 var(--font);letter-spacing:.01em}
.chip:not(.ch):not(.empty){box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
:root[data-theme="dark"] .chip:not(.ch):not(.empty){box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip:not(.ch):not(.empty){box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}}
.chip.sm{min-width:30px;height:20px;font-size:var(--t-caption);border-radius:6px}
.chip.empty{background:none;color:var(--faint);box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:500}

/* ---------- Rota toolbar ---------- */
.rota-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 16px}
.rota-bar .range{font:500 var(--t-ui) var(--font);color:var(--ink);min-width:150px;text-align:center;font-variant-numeric:tabular-nums}
.rota-bar .meta{font-size:var(--t-small);color:var(--muted)}
.rota-bar .meta b{font-weight:500;color:var(--ink-2)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;font-size:var(--t-caption);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}

/* ---------- Rota grid: one row per week, Monday to Friday, grouped like Carol's sheet ---------- */
.rota-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px 6px;scrollbar-width:thin;scrollbar-color:var(--thumb) transparent}
.rota{display:grid;grid-template-columns:128px repeat(var(--cols),minmax(42px,1fr));column-gap:3px;row-gap:3px;min-width:calc(128px + var(--cols) * 45px + 36px);font-variant-numeric:tabular-nums}
.rota .gh{font:600 var(--t-small) var(--font);color:var(--ink);padding:0 0 2px 2px;white-space:nowrap;border-bottom:2px solid var(--line-2)}
.rota .gh.first{border-bottom:0}
.rota .gh.gap,.rota .dh.gap,.rota .c.gap{margin-left:12px}
.rota .dh{font:500 var(--t-caption)/1.25 var(--font);color:var(--muted);text-align:center;padding:4px 0 6px;align-self:end;overflow-wrap:anywhere}
.rota .dh small{display:block;color:var(--faint);font-weight:400}
.rota .wk{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 6px 4px 2px;min-height:40px}
.rota .wk b{font:500 var(--t-ui)/1.1 var(--font);color:var(--ink)}
.rota .wk .ws{display:flex;align-items:center;gap:6px;font-size:var(--t-caption);color:var(--muted)}
.rota .wk .ws .linkbtn{font-size:var(--t-caption)}
.rota .row-line{grid-column:1 / -1;height:1px;background:var(--line)}
.rota .c{position:relative;display:grid;place-items:center;min-height:40px;border:0;border-radius:9px;background:none;padding:2px;cursor:pointer;transition:background .15s}
@media (hover:hover){.rota .c:hover{background:var(--hover)}}
.rota .c:disabled{cursor:default}
.rota .c.off{cursor:default}
.rota .c.idle::after{content:"";width:14px;height:1px;background:var(--line-2);transition:opacity .15s}
.rota .c.idle:hover::after,.rota .c.idle:focus-visible::after{opacity:0}
.rota .c.idle:hover::before,.rota .c.idle:focus-visible::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:500 16px var(--font);color:var(--muted)}
.rota .c.idle:hover{background:var(--hover)}
.rota .c.off::after{content:"";width:14px;height:1px;background:var(--line-2)}
.rota .c.closed{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--hover) 5px 7px);border-radius:9px}
.rota .c.closed::after{content:"BH";width:auto;height:auto;background:none;font:500 var(--t-caption) var(--font);color:var(--faint)}
.rota .c.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.rota .c.swap-target{box-shadow:inset 0 0 0 1.5px dashed var(--accent)}
.rota.swapping .c:not(.off):not(.sel){outline:1.5px dashed color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:-3px}
.rota .row.approved .c .chip{opacity:.92}
.rota .c .lock,.rota .c .flag{position:absolute;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font:700 9px/1 var(--font)}
.rota .c .lock{top:0;right:0;color:var(--muted);background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.rota .c .flag{bottom:0;right:0;color:#fff}
.rota .c.error .chip,.rota .c.error .chip.empty{box-shadow:0 0 0 2px var(--danger)}
.rota .c.error .flag{background:var(--danger)}
.rota .c.ask .chip{box-shadow:0 0 0 2px var(--warn)}
.rota .c.ask .flag{background:var(--warn)}
.rota .c.warning .flag{background:var(--muted)}
.rota .c.leave-day::before{content:"";position:absolute;left:5px;right:5px;bottom:2px;height:2px;border-radius:2px;background:var(--line-2)}
.wk-status{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:6px;font:500 var(--t-caption)/17px var(--font)}
.wk-status.draft{color:var(--muted);background:var(--hover)}
.wk-status.approved{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.wk-status.empty{color:var(--faint);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- Under the grid ---------- */
.rota-below{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-top:22px;align-items:start}
.rota-below.one{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){.rota-below{grid-template-columns:minmax(0,1fr)}}

/* ---------- Tints: a person's colour, softly, behind darker initials (as on overlap's site) ---------- */
.ch{--h:0;--s:42%;--ch-bg:hsl(var(--h) var(--s) 48% / .15);--ch-ink:hsl(var(--h) calc(var(--s) + 6%) 30%);
  display:inline-grid;place-items:center;min-width:36px;height:30px;padding:0 6px;border-radius:8px;box-sizing:border-box;
  font:500 12px/1 var(--mono);letter-spacing:.02em;background:var(--ch-bg);color:var(--ch-ink);transition:opacity .15s,box-shadow .15s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ch{--ch-bg:hsl(var(--h) var(--s) 55% / .2);--ch-ink:hsl(var(--h) calc(var(--s) + 18%) 76%)}}
:root[data-theme="dark"] .ch{--ch-bg:hsl(var(--h) var(--s) 55% / .2);--ch-ink:hsl(var(--h) calc(var(--s) + 18%) 76%)}
.ch.sm{min-width:30px;height:22px;font-size:11px;border-radius:6px}
.ch.empty{background:none;border:1.5px dashed var(--line-2);color:var(--faint)}
.ch.away{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--faint);font-weight:400}
.ch.on{box-shadow:0 0 0 1.5px var(--ch-ink)}
.ch.away.on{box-shadow:inset 0 0 0 1.5px var(--ch-ink);color:var(--ch-ink)}
.hl .ch:not(.on){opacity:.25}

/* ---------- Rota by week: one card per week, a row per slot, the days across ---------- */
/* The weeks on the left, one wide card each; what needs attention and fairness stay in view on the right */
.rota-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.rota-split>.rota-below{grid-template-columns:minmax(0,1fr);margin-top:0;position:sticky;top:64px}
@media (max-width:1180px){.rota-split{grid-template-columns:minmax(0,1fr)}.rota-split>.rota-below{position:static;margin-top:8px}}
.wk-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.wk-card{background:var(--input-bg);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm);padding:14px 16px 12px;min-width:0}
.wk-card.approved{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.wk-head{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.wk-head>b{font:500 var(--t-ui) var(--font);color:var(--ink)}
.wk-head .linkbtn{font-size:var(--t-small)}
.wk-grid{display:grid;grid-template-columns:96px repeat(5,minmax(0,1fr));gap:7px 8px;align-items:center}
.wk-grid .wd{font-size:var(--t-small);color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.wk-grid .wd.today{color:var(--accent);font-weight:500}
.wk-grid .wd.shut{color:var(--faint)}
.wk-grid .rl{font-size:var(--t-small);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}
.wk-grid .rc{position:relative;display:grid;border:0;background:none;padding:0;border-radius:8px;min-width:0;cursor:pointer}
.wk-grid .rc.core .ch{width:100%}
.wk-grid .rc.off,.wk-grid .rc.shut{height:30px;cursor:default;place-items:center}
.wk-grid .rc.off::after{content:"";width:12px;height:1px;background:var(--line-2)}
.wk-grid .rc.shut{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--hover) 5px 7px)}
@media (hover:hover){.wk-grid .rc.core:hover .ch.empty{border-color:var(--muted)}}
.wk-grid .away{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;min-width:0}
.wk-grid .away .ch{flex:1 1 30px;min-width:0;height:22px;font-size:11px;border-radius:6px}
.wk-grid .duties{display:grid;gap:3px;align-self:start;min-width:0}
.rc.duty{display:flex;align-items:center;justify-content:space-between;gap:4px;height:26px;padding:0 2px 0 7px;border-radius:7px;background:var(--hover)}
.rc.duty .dl{font-size:var(--t-caption);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .lock,.rc .flag{position:absolute;right:-5px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font:700 9px/1 var(--font);z-index:1}
.rc .lock{top:-5px;color:var(--muted);background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.rc .flag{bottom:-5px;color:#fff}
.rc.error .ch{box-shadow:0 0 0 2px var(--danger)} .rc.error .flag{background:var(--danger)}
.rc.ask .ch{box-shadow:0 0 0 2px var(--warn)} .rc.ask .flag{background:var(--warn)}
.rc.warning .flag{background:var(--muted)}
.rc.sel .ch{box-shadow:0 0 0 2px var(--accent)}
.swapping .rc:not(.off):not(.shut):not(.sel) .ch{outline:1.5px dashed color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}
.wk-card .sum{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--t-small);color:var(--muted)}
.wk-card .sum b{color:var(--ink);font-weight:500}
.wk-card .sum .bad,.wk-card .sum .bad b{color:var(--danger)}
.wk-card .sum .warn,.wk-card .sum .warn b{color:var(--warn)}
.wk-card .sum .good{color:var(--ok)}
.wk-fold{grid-column:1/-1;display:flex;align-items:center;gap:8px;border:1px dashed var(--line-2);background:none;border-radius:12px;padding:10px 14px;
  font:var(--t-small) var(--font);color:var(--muted);text-align:left;cursor:pointer;transition:background .15s}
@media (hover:hover){.wk-fold:hover{background:var(--hover)}}
.wk-fold b{color:var(--ink-2);font-weight:500}
.wk-fold .bad{color:var(--danger)}
.wk-fold .fold-act{color:var(--accent);font-weight:500}
.fair-row .pin{border:0;background:none;padding:0;cursor:pointer;border-radius:6px;display:grid}

/* ---------- Rota by person: a row each, their duties week by week ---------- */
.pv-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--thumb) transparent}
.pv{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:calc(190px + var(--n) * 118px + 120px)}
.pv th{font-weight:500;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.pv td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.pv tbody tr:hover td{background:var(--hover)}
.pv .pn{display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink-2)}
.pv .pv-ok{display:inline-grid;margin-left:5px;color:var(--ok);vertical-align:-1px}
.pv .tags{display:flex;flex-wrap:wrap;gap:3px}
.pv-tag{border:0;cursor:pointer;height:22px;padding:0 7px;border-radius:6px;font:500 11px/22px var(--font);background:var(--hover);color:var(--ink-2);white-space:nowrap}
.pv-tag.oc{background:var(--accent-soft);color:var(--accent)}
.pv-tag.error{box-shadow:inset 0 0 0 1.5px var(--danger);color:var(--danger)}
.pv-tag.ask{box-shadow:inset 0 0 0 1.5px var(--warn);color:var(--warn)}
.pv-tag.away{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--faint);cursor:default;font-weight:400}
.pv .fr{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.pv .frw{display:inline-flex;align-items:center;gap:8px}
.pv .fr .bar{width:56px;height:6px;border-radius:4px;background:var(--hover);overflow:hidden}
.pv .fr .bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.issue-list{display:grid;gap:2px;margin-top:4px}
.issue{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:start;padding:7px 6px;border-radius:10px;font-size:var(--t-small);line-height:1.45;color:var(--ink-2)}
.issue .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 10px/1 var(--font);margin-top:1px}
.issue.error .ic{background:var(--danger)}
.issue.ask .ic{background:var(--warn)}
.issue.warning .ic{background:var(--muted)}
.issue .acts{display:flex;gap:6px}
.issue .when{display:block;color:var(--faint);font-size:var(--t-caption)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:6px;font:500 var(--t-caption)/18px var(--font)}
.tag.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.tag.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.tag.danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.tag.muted{color:var(--muted);background:var(--hover)}

/* Fairness bars */
.fair{display:grid;gap:5px;margin-top:6px}
.fair-row{display:grid;grid-template-columns:42px minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:var(--t-small);color:var(--ink-2);font-variant-numeric:tabular-nums}
.fair-row .bar{height:8px;border-radius:5px;background:var(--hover);overflow:hidden;position:relative}
.fair-row .bar i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.fair-row .bar .mean{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--ink);opacity:.45}
.fair-row .n{text-align:right;color:var(--muted)}

/* ---------- Candidate list in the cell popover ---------- */
.pop .cand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.pop .cand .why{font-size:var(--t-caption);color:var(--faint);line-height:1.3;white-space:normal}
.pop .cand .cnt{font-size:var(--t-caption);color:var(--muted);font-variant-numeric:tabular-nums}
.pop .cand.no{opacity:.6}

/* ---------- Tables (settings, leave) ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-ui)}
.tbl th{font:500 var(--t-small) var(--font);color:var(--muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
.tbl tr.click{cursor:pointer}
@media (hover:hover){.tbl tr.click:hover td{background:var(--hover)}}
.tbl tr.inactive td{opacity:.5}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
.pattern-grid td{padding:4px 3px}
.pattern-grid th.day{text-align:center}
.pattern-grid .select.sm select{min-width:104px}
.sess-off{color:var(--faint)}
.yes{color:var(--ok);font-weight:600}
.no-mark{color:var(--faint)}
.chips-pick{display:flex;flex-wrap:wrap;gap:6px}
.chips-pick button{border:0;padding:0;background:none;border-radius:8px;opacity:.35;transition:opacity .15s,transform .2s var(--spring)}
.chips-pick button[aria-pressed="true"]{opacity:1}
.chips-pick button:active{transform:scale(.94)}
.days-pick{display:flex;gap:6px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form-grid .full{grid-column:1 / -1}
@media (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.section{margin:28px 0 10px;font:600 var(--t-heading) var(--font);letter-spacing:-.02em}
.section:first-child{margin-top:0}
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.note{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:var(--ink-2);font-size:var(--t-small);line-height:1.5}
.note.warn{background:color-mix(in srgb,var(--warn) 12%,transparent)}
.note.bad{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.cluster-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.kv:first-child{border-top:0}
.kv .k b{display:block;font:500 var(--t-ui) var(--font);color:var(--ink)}
.kv .k span{font-size:var(--t-small);color:var(--muted)}
.kv .input.sm{width:84px;text-align:right}
.kv:has(.cal-link.open){grid-template-columns:minmax(0,1fr)}
.cal-link{display:grid;gap:8px;justify-items:start}
.kv .cal-link{justify-items:end}
.cal-link.open{justify-items:stretch}
.cal-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cal-row .input.sm,.kv .cal-row .input.sm{flex:1 1 260px;width:auto;min-width:0;text-align:left}
.cal-link .fhint{margin:0;max-width:72ch}
.thr-row{display:grid;grid-template-columns:110px 90px auto;gap:12px;align-items:center;padding:6px 0}

/* ---------- What if (set up by hand, shown in Ask) ---------- */
.wi-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wi-week{grid-auto-flow:column;grid-template-rows:repeat(2,auto)}
.wi-arrow{color:var(--faint);font-weight:400}

/* ---------- Fairness weights ---------- */
.fair-weights{display:grid;gap:10px;margin-top:10px}
.fw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.field.fw{gap:4px}

/* ---------- Insights: daily capacity chart ---------- */
.cap-wrap{display:grid;gap:6px;margin-top:4px}
.cap-chart{display:block;width:100%;height:96px}
.cap-bar{fill:color-mix(in srgb,var(--accent) 45%,transparent)}
.cap-bar.amber{fill:var(--warn)}
.cap-bar.red{fill:var(--danger)}
.cap-thr{stroke:var(--ink);stroke-width:1.5;opacity:.55;vector-effect:non-scaling-stroke}
.cap-week{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.cap-labels{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));font-size:var(--t-caption);color:var(--faint)}
.cap-labels span{white-space:nowrap;overflow:visible}
.cap-key{width:9px;height:9px;border-radius:3px;display:inline-block}
.cap-key.green{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.cap-key.amber{background:var(--warn)}
.cap-key.red{background:var(--danger)}
.cap-key.thr{height:2px;border-radius:1px;background:var(--ink);opacity:.55}

/* ---------- Today ---------- */
.td-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:0 0 16px}
.td-slot{display:grid;gap:6px;padding:10px 12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:color-mix(in srgb,var(--glass-bg) 80%,transparent)}
.td-name{font:500 var(--t-caption) var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.td-who{display:flex;align-items:center;gap:8px;min-width:0;font:500 var(--t-ui) var(--font);color:var(--ink)}
.td-who span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-off{color:var(--danger);text-decoration:line-through}

/* ---------- EMIS changes ---------- */
.em-day{margin:18px 0 0}
.em-day h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:600 var(--t-heading) var(--font);letter-spacing:-.02em}
.em-list{display:grid}
.em-item{display:grid;grid-template-columns:22px 118px minmax(0,1fr);gap:12px;align-items:start;padding:10px 6px;border-top:1px solid var(--line);cursor:pointer;border-radius:8px}
@media (hover:hover){.em-item:hover{background:var(--hover)}}
.em-check{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.em-text{display:grid;gap:2px;min-width:0}
.em-text b{font:500 var(--t-ui) var(--font);color:var(--ink)}
.em-when{font-size:var(--t-small);color:var(--ink-2)}
.em-why{font-size:var(--t-small);color:var(--muted)}
.em-item.done .em-text b{text-decoration:line-through;color:var(--muted)}
.em-notes{margin:6px 0 0 34px}
.em-stale{margin:6px 0 0;padding-left:18px}
.em-where{align-self:start;justify-self:start;margin-top:1px;padding:1px 8px;border-radius:6px;font:500 var(--t-caption)/1.6 var(--font);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap}
.em-where.planner{color:var(--accent);background:var(--accent-soft);box-shadow:none}
.em-person h3{font-size:var(--t-body)}
.em-person.all-done{opacity:.6}
.em-chips{display:flex;flex-wrap:wrap;gap:6px}
.em-how{line-height:1.6}
.sup-tbl td{vertical-align:middle}
.sup-tbl{table-layout:fixed}
.sup-tbl th:first-child{width:96px}
.td-cards{display:grid;gap:14px;margin-bottom:8px}
.td-cards .rota-below{margin-top:0;align-items:stretch}
.td-cards .in-card{display:flex;flex-direction:column}
.td-cards .in-card h3{margin-bottom:10px}
.td-cards .in-empty{margin:0;padding:0}
.td-cover{display:flex;flex-direction:column;gap:14px}
.td-cover>.in-card:only-child{flex:1}
.td-offform{display:grid;gap:8px;margin-bottom:12px}
.td-offwho,.td-offwhy{display:flex;gap:8px;align-items:center}
.td-offwhy .input{flex:1;min-width:0}
.td-offwho>*{flex:1;min-width:0}
.td-offwho>:last-child{flex:0 0 150px}
@media (max-width:640px){.td-offwhy{flex-wrap:wrap}.td-offwhy .btn{width:100%;justify-content:center}}
.lc-money{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-small);color:var(--muted)}
.lc-money .input.sm{width:90px}
.lc-pound{color:var(--ink-2)}
.lc-list{display:grid;gap:6px;margin-top:8px}
.lc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;background:var(--hover)}
.lc-main{display:grid;gap:2px;min-width:0}
.lc-row .acts{display:flex;gap:4px;flex-wrap:wrap}
.lc-tbl td{vertical-align:top}
.lc-over{color:var(--danger);font-weight:600}
@media (max-width:640px){.lc-row{grid-template-columns:minmax(0,1fr)}}
.sup-who{display:flex;flex-wrap:wrap;gap:10px}
.sup-one{display:inline-flex;align-items:center;gap:6px}
.sup-one small{color:var(--muted);font-size:var(--t-small)}
@media (max-width:640px){.em-item{grid-template-columns:22px minmax(0,1fr)}.em-item .em-where{grid-column:2}.em-item .em-text{grid-column:2}}
.em-tmpl td{font-size:var(--t-small);white-space:nowrap}
.print-only{display:none}

/* ---------- Huddle screen ---------- */
.page.huddle-page{max-width:none;padding:64px 32px 32px}
body.screen-mode .page.huddle-page{padding:28px 32px 32px}
body.screen-mode #scroll{position:fixed}
.huddle{display:grid;gap:18px;min-height:calc(100dvh - 64px);grid-template-rows:auto auto 1fr auto}
.hd-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hd-head h1{margin:0;font:400 var(--t-display)/1.1 var(--serif);letter-spacing:-.025em}
.hd-sub{color:var(--muted);font-size:var(--t-ui);margin-top:4px}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.hd-clock{font:600 var(--t-display)/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hd-right .tag{font-size:var(--t-ui);padding:4px 12px;line-height:22px}
.hd-controls{display:flex;gap:6px;width:100%;justify-content:flex-end;margin-top:-6px}
.hd-core{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.hd-card{border-radius:22px;padding:18px 20px;box-shadow:inset 0 0 0 1px var(--line);background:color-mix(in srgb,var(--glass-bg) 80%,transparent);display:grid;gap:12px}
.hd-label{font:600 var(--t-ui) var(--font);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.hd-person{display:flex;align-items:center;gap:14px;min-width:0}
.chip.hd-chip{min-width:84px;height:56px;border-radius:14px;font:500 var(--t-display)/1 var(--mono)}
.hd-name{font:500 var(--t-heading) var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-nobody{font:600 var(--t-heading) var(--font);color:var(--danger)}
.hd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:start}
@media (max-width:900px){.hd-grid{grid-template-columns:minmax(0,1fr)}}
.hd-panel{border-radius:22px;padding:16px 20px 18px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:10px;align-content:start}
.hd-panel h2{margin:6px 0 0;font:600 var(--t-ui) var(--font);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.hd-panel h2:first-child{margin-top:0}
.hd-off{display:flex;flex-wrap:wrap;gap:8px 16px}
.hd-offitem{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-body);color:var(--ink-2)}
.hd-quiet{margin:0;color:var(--muted);font-size:var(--t-body)}
.hd-duties{display:flex;flex-wrap:wrap;gap:8px}
.hd-duty{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:12px;background:var(--hover);font-size:var(--t-body)}
.hd-duty small{color:var(--muted);font-size:var(--t-small)}
.hd-duty b{font-weight:600}
.hd-cap{font-size:var(--t-body);color:var(--ink-2)}
.hd-cap b{font:600 var(--t-display)/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.hd-why{margin-top:6px;color:var(--danger);font-size:var(--t-ui)}
.hd-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 18px}
.hd-room{display:grid;grid-template-columns:52px 1fr 1fr;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:var(--t-body);font-variant-numeric:tabular-nums}
.hd-room span:first-child{color:var(--muted)}
.hd-room span:not(:first-child){font-weight:600;color:var(--ink)}
.hd-room.up span:first-child{color:var(--warn)}
.hd-room-h{color:var(--faint);font-size:var(--t-small);border-top:0}
.hd-room-h span:not(:first-child){font-weight:500;color:var(--faint)}
.hd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:var(--t-ui);color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}
.hd-foot b{color:var(--ink-2);font-weight:500}
.hd-closed b{font:400 var(--t-display) var(--serif)}
@media (min-width:1600px){.huddle{zoom:1.3}}
@media (min-width:2200px){.huddle{zoom:1.7}}

/* ---------- Leave requests ---------- */
.req-list{display:grid;gap:0}
.req-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 4px;border-top:1px solid var(--line)}
.req-main{display:grid;gap:1px;min-width:0}
.req-main b{font:500 var(--t-ui) var(--font);color:var(--ink)}
details.req summary{list-style:none;cursor:pointer;border-radius:10px}
details.req summary::-webkit-details-marker{display:none}
@media (hover:hover){details.req summary:hover{background:var(--hover)}}
details.req[open] .req-row{background:var(--hover);border-radius:10px 10px 0 0}
.req-days{margin:0 0 6px;padding:6px 10px 8px 40px;font-size:var(--t-small);color:var(--ink-2);line-height:1.5;background:var(--hover);border-radius:0 0 10px 10px}
.req-days b{font-weight:500;color:var(--ink)}

/* ---------- Activity ---------- */
.activity{display:grid;gap:0}
.act-day{margin:18px 0 4px;font:600 var(--t-caption) var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.act-day:first-child{margin-top:0}
.act-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 6px;border-top:1px solid var(--line);font-size:var(--t-ui)}
.act-time{color:var(--faint);font-size:var(--t-small);font-variant-numeric:tabular-nums}
.act-text{color:var(--ink-2);line-height:1.45}
.act-by{color:var(--faint);font-size:var(--t-small);white-space:nowrap}
.act-row.rota .act-text::before,.act-row.leave .act-text::before,.act-row.sameday .act-text::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--accent)}
.act-row.leave .act-text::before{background:var(--warn)}
.act-row.sameday .act-text::before{background:var(--danger)}

/* ---------- Rooms ---------- */
.rota.rooms{grid-template-columns:118px repeat(var(--cols),minmax(52px,1fr));min-width:calc(118px + var(--cols) * 55px + 48px)}
.rota .floor-h{font:600 var(--t-caption) var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:14px 2px 2px}
.rota .c.fixed{cursor:default}
.rota button.c.free{cursor:pointer;border:0;background:none;font:inherit}
@media (hover:hover){.rota button.c.free:hover{background:var(--hover)}.rota button.c.free:hover::after{content:"+";color:var(--muted);font-size:16px}}
.rota button.c.booked{cursor:pointer;border:0;font:inherit;background:var(--accent-soft)}
.rota .c.booked .fixed-label{color:var(--accent)}
.rota .c .fixed-label{font:500 var(--t-caption)/1.2 var(--font);color:var(--faint);text-align:center;overflow-wrap:anywhere}
.rota .c.stack{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-content:center;cursor:default}
.rota .c.stack.error{background:color-mix(in srgb,var(--danger) 8%,transparent)}
.rota .c.stack .chip-btn{all:unset;cursor:pointer;border-radius:999px;display:inline-flex}
.rota .c.stack .chip-btn:focus-visible{outline:2px solid var(--accent,currentColor);outline-offset:1px}
.rota .wk.oncall b{color:var(--accent)}

/* ---------- Capacity flags ---------- */
.flag-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 16px}
@media (max-width:900px){.flag-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flag-day{display:grid;gap:4px;padding:10px 12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:color-mix(in srgb,var(--glass-bg) 80%,transparent)}
.flag-day.red{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--danger) 60%,transparent)}
.flag-day.amber{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 60%,transparent)}
.flag-day .fd-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.flag-day .fd-top b{font:500 var(--t-small) var(--font);color:var(--ink)}
.flag-day .fd-sub{font-size:var(--t-caption);color:var(--muted);font-variant-numeric:tabular-nums}
.flag-day .fd-why{font-size:var(--t-caption);color:var(--ink-2);line-height:1.35}
.tag b{font-weight:700}

/* ---------- Handover ---------- */
.handover-page{display:grid;gap:16px}
.ho-head h2{margin:0;font:400 var(--t-heading) var(--serif);letter-spacing:-.01em}
.ho-head p{margin:4px 0 0}
.ho-slots{display:flex;flex-wrap:wrap;gap:4px 10px}
.ho-slots span{display:inline-flex;gap:4px;align-items:baseline;font-size:var(--t-small)}
.ho-slots small{color:var(--muted);font-size:var(--t-caption)}
.ho-slots b{font-weight:600;color:var(--ink)}
.ho-notes{font-size:var(--t-small);color:var(--ink-2);line-height:1.5}
.ho-notes h3{margin:0 0 4px;font:600 var(--t-small) var(--font);color:var(--ink)}
.ho-notes ul{margin:0;padding-left:18px}

/* ---------- Print: the rota as Carol pins it up ---------- */
@media print{
  #side,header,.rota-bar,.rota-below,.tabs,.page-head .btn,.no-print,.toast{display:none!important}
  .print-only{display:block;font:600 16px var(--font);margin:0 0 8px}
  .em-item{break-inside:avoid;padding:5px 0}
  .em-day{break-inside:avoid-page}
  body.print-sheet main{display:none}
  body.print-sheet dialog.sheet{position:static;box-shadow:none;width:auto;background:#fff}
  body.print-sheet .dlg-f,body.print-sheet .dlg-h button{display:none}
  body.print-sheet .dlg-b{max-height:none;overflow:visible}
  .handover-page{font-size:11px}
  .in-tile,.in-card,.flag-day{box-shadow:inset 0 0 0 1px #ccc;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .tbl td,.tbl th{padding:4px 6px}
  @page{size:A4 landscape;margin:12mm}
  body{display:block;height:auto;overflow:visible;background:#fff}
  main,#scroll{position:static;overflow:visible}
  .page{padding:0;max-width:none}
  .rota .c .flag,.rota .c .lock{display:none}
}

/* Insights: one column of cards until there is room for two beside the sidebar */
@media (max-width:1180px){.page.insights .in-grid{grid-template-columns:minmax(0,1fr)}}

/* Ask: a chat laid out like Obolo's (styles.css: .welcome, .thread, .bubble, .content, .composer) */
.page.chat{max-width:none;padding:0;min-height:100%;display:flex;flex-direction:column;animation:none}
.chat-view{flex:1;display:flex;flex-direction:column;width:100%}
.chat-view.welcome{align-items:center;justify-content:center;padding:72px 24px 12vh}
.chat-hero{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--accent);animation:rise .9s var(--ease) both}
.hero-mark .mark{width:34px;height:34px}
.chat-hero h1{margin:0;font:420 var(--t-display)/1.1 var(--serif);letter-spacing:-.032em;color:var(--ink)}
.chat-view.welcome .chat-dock{position:relative;width:100%;max-width:720px;padding:0;animation:rise .9s .08s var(--ease) both}
.chat-view.welcome .composer{padding:12px 8px 8px 14px}
.chat-view.welcome .chat-input{min-height:44px}
.chat-sugg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;max-width:768px}
.chat-sugg button{display:flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border-radius:10px;border:0;font:var(--t-ui) var(--font);color:var(--ink-2);cursor:pointer;
  background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:inset 0 0 0 1px var(--line-2);animation:rise .8s var(--ease) both;animation-delay:calc(.16s + var(--i) * .05s);transition:background .15s,color .15s,box-shadow .15s}
.chat-sugg button svg{color:var(--muted)}
@media (hover:hover){.chat-sugg button:hover{background:var(--input-bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-sm)}.chat-sugg button:hover svg{color:var(--accent)}}
.chat-recents{width:100%;max-width:720px;margin-top:30px;animation:rise .8s .3s var(--ease) both}
.cr-head{display:flex;align-items:center;justify-content:space-between;padding:0 10px 6px;font:500 var(--t-small) var(--font);color:var(--muted)}
.chat-notes{margin-top:18px}
.cr-hint{font-weight:400;color:var(--faint);text-align:right;margin-left:12px}
.cr-note{cursor:default}
.cr-more{border:0;background:none;padding:2px 6px;border-radius:6px;font:inherit;color:var(--muted);cursor:pointer}
.cr-more:hover{color:var(--ink);background:var(--hover)}
.cr-item{display:flex;align-items:center;gap:10px;height:38px;padding:0 6px 0 12px;border-radius:10px;cursor:pointer;color:var(--ink-2);font-size:var(--t-ui);transition:background .15s}
.cr-item>svg{flex:none;color:var(--faint)}
.cr-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-when{flex:none;font-size:var(--t-small);color:var(--faint)}
.cr-del{flex:none;width:26px;height:26px;border:0;background:none;border-radius:7px;display:grid;place-items:center;color:var(--muted);opacity:0;cursor:pointer;transition:opacity .15s,background .15s}
.cr-item:hover,.cr-item:focus-visible{background:var(--hover);color:var(--ink);outline:0}
.cr-item:hover .cr-del,.cr-del:focus-visible{opacity:1}
.cr-del:hover{background:var(--press);color:var(--danger)}
@media (hover:none){.cr-del{opacity:.6}}
.chat-foot{margin:10px 0 0;text-align:center;font-size:var(--t-caption);color:var(--faint)}
.chat-view.welcome .chat-foot{margin-top:22px}

.chat-thread{flex:1;width:100%;max-width:720px;margin:0 auto;padding:72px 28px 24px;box-sizing:border-box}
.chat-turn{padding:4px 0 22px}
.chat-turn.enter{animation:rise .35s var(--ease) both}
.q-block{display:flex;flex-direction:column;align-items:flex-end}
.bubble{background:var(--q-bg);color:var(--ink);padding:8px 14px;border-radius:16px;max-width:80%;white-space:pre-wrap;overflow-wrap:anywhere;
  font:var(--t-body)/1.45 var(--font);box-shadow:inset 0 0 0 1px var(--line)}
.bubble.clamp{max-height:196px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.cmd-chip{display:inline-block;font:500 var(--t-small)/1.4 var(--font);color:var(--accent);background:var(--accent-soft);padding:1px 8px;border-radius:7px;margin-right:6px}
.ans{margin-top:14px;display:grid;gap:10px}
.content{font:400 var(--t-body)/1.6 var(--chat-font);letter-spacing:-.012em;color:var(--ink);overflow-wrap:anywhere}
.content>*{margin:0}.content>*+*{margin-top:9px}
.content ul,.content ol{padding-left:22px}.content li+li{margin-top:4px}
.content h4{font:600 var(--t-body) var(--font);margin-top:16px}
.ans .err{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 25%,transparent);
  padding:12px 16px;border-radius:14px;font:var(--t-ui)/1.55 var(--font)}

.chat-dock{position:sticky;bottom:0;z-index:5;width:100%;padding:0 24px 12px;box-sizing:border-box}
.chat-view:not(.welcome) .chat-dock::before{content:"";position:absolute;left:0;right:0;top:34px;bottom:0;background:var(--bg);z-index:-1}
:root[data-glass="all"] .chat-dock::before{display:none}
.chat-dock .composer{max-width:720px;margin:0 auto}
.composer{position:relative;border-radius:18px;padding:10px 8px 8px 12px;transition:box-shadow .3s}
.composer>*{position:relative;z-index:3}
.chat-input{display:block;width:100%;overflow-y:hidden;field-sizing:content;border:0;outline:0;resize:none;background:none;color:var(--ink);font:var(--t-body)/1.45 var(--font);max-height:240px;min-height:24px;padding:4px 6px 2px;box-sizing:border-box}
.chat-input::placeholder{color:var(--muted)}
.composer.notes .chat-input{min-height:96px}
.cbar{display:flex;align-items:center;gap:4px;margin-top:4px}
.cbtn{width:32px;height:32px;border-radius:9px;border:0;background:none;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .25s var(--spring)}
@media (hover:hover){.cbtn:hover{background:var(--hover)}}
.cbtn:active{transform:scale(.9)}
.chiprow{display:flex;gap:6px;min-width:0;overflow:hidden}
.pill{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 10px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font:500 var(--t-small) var(--font);white-space:nowrap}
.pill button{border:0;background:none;color:inherit;display:grid;place-items:center;width:18px;height:18px;padding:0;border-radius:5px;opacity:.7;cursor:pointer}
.pill button:hover{opacity:1;background:var(--accent-soft)}
.model-btn{height:32px;border:0;background:none;border-radius:9px;padding:0 10px;display:flex;align-items:center;gap:7px;font:500 var(--t-small) var(--font);color:var(--muted);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.model-btn i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.model-btn.warn i{background:var(--warn)}
.model-btn:hover{background:var(--hover);color:var(--ink)}
.send{width:34px;height:34px;flex:0 0 34px;border-radius:10px;border:0;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:background .2s,transform .3s var(--spring),opacity .2s}
.send:not(:disabled):hover{transform:scale(1.07)}
.send:not(:disabled):active{transform:scale(.92)}
.send:disabled{opacity:.38;cursor:default}
.send.stop{background:var(--ink);color:var(--bg)}
.send .stop-sq{width:11px;height:11px;border-radius:2.5px;background:currentColor}
.pop .pop-note{padding:8px 10px;max-width:280px;font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.pop.pop-people button .chip{flex:none}
@media (max-width:640px){.chat-thread{padding:64px 16px 16px}.chat-dock{padding:0 12px 10px}.model-btn span{display:none}}
.ai-steps{display:grid;gap:3px}
.ai-step{display:flex;gap:6px;align-items:center;font-size:var(--t-small);color:var(--muted)}
.ai-step svg{color:var(--ok);flex:none}.ai-step.bad svg{color:var(--danger)}
/* overlap at work: its mark draws itself over and over (obolo.css) */
.ai-thinking{display:flex;gap:8px;align-items:center;font-size:var(--t-small);color:var(--muted)}
.ai-thinking .mark{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.ai-turn.enter{animation:none}}
.ai-card{display:grid;gap:8px;padding:12px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);justify-items:start}
.ai-card-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ai-card-h svg{color:var(--accent)}
.ai-cmps{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px;width:100%}
.ai-cmp{display:flex;flex-direction:column;font-size:var(--t-small);color:var(--muted)}
.ai-cmp b{font:600 var(--t-ui) var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.ai-cmp b.worse{color:var(--danger)}.ai-cmp b.better{color:var(--ok)}
.ai-props{display:grid;gap:6px;margin-top:8px}
.ai-prop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--hover)}
.ai-prop.rejected,.ai-prop.exists{opacity:.6}
.ai-prop .ap-main{display:grid;gap:2px;min-width:0}
.ai-prop .ap-quote{font-size:var(--t-small);color:var(--faint);font-style:italic}
.ai-prop .ap-problem{font-size:var(--t-small);color:var(--warn)}
.ai-prop .acts{grid-column:2/-1;display:flex;gap:4px;flex-wrap:wrap}.ai-prop .acts:empty{display:none}
.ai-details{display:grid;gap:10px;width:100%}
.ai-details .in-card{padding:12px 14px 10px;box-shadow:inset 0 0 0 1px var(--line);background:none}
.ai-details td.num{white-space:nowrap}
.ai-sugg.hand{display:inline-flex;align-items:center;gap:5px;color:var(--accent)}

/* Learn: a short course, one video per task */
.page.learn{max-width:1240px}
.ln-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:start}
.ln-outline{position:sticky;top:76px;display:grid;gap:4px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin;padding-bottom:20px}
.ln-home{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font:600 var(--t-ui) var(--font);color:var(--ink);text-decoration:none}
.ln-home svg{color:var(--accent)}
.ln-home.on,.ln-home:hover{background:var(--hover)}
.ln-progress{display:grid;gap:5px;padding:4px 10px 10px;font-size:var(--t-small);color:var(--muted)}
.ln-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.ln-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s var(--ease)}
.ln-module{display:grid;gap:1px;margin-top:6px}
.ln-mtitle{padding:6px 10px 4px;font:500 var(--t-small) var(--font);color:var(--muted)}
.ln-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-size:var(--t-ui);transition:background .15s}
.ln-item:hover{background:var(--hover);color:var(--ink)}
.ln-item.on{background:var(--press);color:var(--ink);font-weight:500}
.ln-tick{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--accent-ink)}
.ln-item.done .ln-tick{background:var(--accent);box-shadow:none}
.ln-ititle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-dur{flex:none;font-size:var(--t-caption);color:var(--faint);font-variant-numeric:tabular-nums}
.ln-main{min-width:0;display:grid;gap:12px;align-content:start}
.ln-hero{display:grid;gap:10px;justify-items:start;margin-bottom:10px}
.ln-hero h1,.ln-title{margin:0;font:400 var(--t-display)/1.15 var(--serif);letter-spacing:-.025em}
.ln-eyebrow{margin:0;font:500 var(--t-small) var(--font);color:var(--accent)}
.ln-main .sub{margin:0}
.ln-msection{display:grid;gap:10px;margin-top:8px}
.ln-msection h2.section{margin:12px 0 0}
.ln-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ln-card{display:grid;gap:4px;text-decoration:none;color:var(--ink-2);font-size:var(--t-small);line-height:1.45}
.ln-card b{font:600 var(--t-ui) var(--font);color:var(--ink);margin-top:6px}
.ln-thumb{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--hover);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.ln-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.ln-card:hover .ln-thumb img{transform:scale(1.03)}
.ln-playbtn{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,20,19,.62);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.9;transition:transform .3s var(--spring)}
.ln-card:hover .ln-playbtn{transform:scale(1.08)}
.ln-time{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;background:rgba(20,20,19,.7);color:#fff;font:500 var(--t-caption) var(--font);font-variant-numeric:tabular-nums}
.ln-donetag{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font:500 var(--t-caption) var(--font)}
.ln-video{width:100%;aspect-ratio:16/10;border-radius:16px;background:#141413;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line);display:block}
.ln-novideo{display:grid;place-items:center;align-content:center;gap:10px;color:var(--muted);background:var(--hover);font-size:var(--t-ui)}
.ln-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ln-actions .btn.ln-isdone{color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
.ln-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:st}
.ln-steps li button{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:10px;background:none;
  font:var(--t-ui)/1.55 var(--font);color:var(--ink-2);cursor:pointer}
.ln-steps li button:hover:not(:disabled){background:var(--hover);color:var(--ink)}
.ln-steps li.now button{background:var(--accent-soft);color:var(--ink)}
.ln-at{flex:none;min-width:38px;padding:1px 6px;border-radius:6px;background:var(--hover);font:500 var(--t-caption)/1.8 var(--font);color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.ln-steps li.now .ln-at{background:var(--accent);color:var(--accent-ink)}
@media (max-width:900px){.ln-layout{grid-template-columns:minmax(0,1fr)}.ln-outline{position:static;max-height:none}}
.autofix{margin:4px 0 10px;padding:10px 12px;border-radius:12px;background:var(--accent-soft)}
.af-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 8px;margin-bottom:6px;color:var(--ink);font-size:var(--t-small)}
.af-head svg{color:var(--accent);flex:none;margin-top:2px}
.af-head b{font-weight:500;flex:1;min-width:0}
.af-head .fhint{flex-basis:100%;padding-left:22px}
.af-list{margin:0;padding:0 0 0 22px;display:grid;gap:3px;font-size:var(--t-small);color:var(--ink-2)}
.af-list b{font-weight:500;color:var(--ink)}

/* ---------- Super admin: view as, admin page ---------- */
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--danger)}
.pop .pop-sub{color:var(--faint);font-size:var(--t-small)}
.viewas-bar{position:absolute;z-index:8;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:color-mix(in srgb,var(--warn) 16%,var(--bg));box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent),0 8px 28px rgba(0,0,0,.14);font-size:var(--t-small);color:var(--ink-2);line-height:1.4}
.viewas-bar svg{flex:0 0 auto;color:var(--warn)}
.viewas-bar b{color:var(--ink)}
.viewas-bar .btn{flex:0 0 auto}
body.viewing-as #scroll{padding-bottom:72px}
@media (max-width:760px){.viewas-bar{bottom:12px;align-items:flex-start;flex-wrap:wrap}}
.admin .ad-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin .ad-viewas .fhint{margin:0 0 10px}
.admin .ad-note{margin:10px 0 0}
.admin .card .activity{margin-top:12px}
.admin .act-row.signin .act-text{color:var(--faint)}
.admin .ad-backups{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.admin .ad-bk{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-small)}
.admin .kv b.bad{color:var(--danger)}
.admin .kv b .dot{display:inline-block;vertical-align:1px}
.stack-sm{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.stack-sm.row{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.stack-sm{align-items:stretch}.stack-sm .input.sm{width:100%!important}}
.cal-warn{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--ink-2);font-size:var(--t-small);line-height:1.45}
.send-rooms textarea{width:100%;font:var(--t-small)/1.5 var(--mono, ui-monospace, monospace);resize:vertical}
.send-rooms .seg{flex-wrap:wrap}
.send-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:6px}
.send-person{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2)}
.send-person pre{margin:0;white-space:pre-wrap;font:var(--t-small)/1.45 var(--font);color:var(--ink-2)}
.send-person .sp-act{display:flex;gap:6px;align-items:center}
body.viewing-as .toast{bottom:84px}
@media (max-width:760px){body.viewing-as .toast{bottom:120px}}