/* AKS Intelligent Systems testing portal: professional, structured, calm (the owner, 2026-10-21).
   Neutral light surfaces and soft grey borders; ONE accent, the AKS plum violet sampled from the logo (#784090
   family), used only for primary actions and active states; muted status colours; an 8-px spacing scale (4 px
   half-step, 12 px one-and-a-half); system fonts; no animation except a short fade. No framework, no CDN (CSP: self).
   Contrast (WCAG 2): text 16.3:1, secondary 9.1:1, muted 5.4:1 on white; white on the accent 7.3:1; every status
   chip >= 5.3:1 on its own tint, so it stays readable on a phone in daylight.
   Hierarchy: header -> greeting line -> status strip (round, attempt, next call, banner) -> two columns on desktop
   (left: scorecard, rounds, call log; right: needs and the conversation) -> one column on phones, where the project
   navigation becomes a compact top bar. */
:root{
  --bg:#F5F5F7;--surface:#FFFFFF;--surface-2:#F9F9FB;--surface-3:#EFEFF3;
  --border:#E2E3E8;--border-strong:#CDCED6;
  --text:#1E2028;--text-2:#454852;--muted:#666A75;
  --accent:#6E4293;--accent-hover:#5E3780;--accent-ink:#5B3579;--accent-soft:#F4EFF8;--accent-line:#DCCEE8;--accent-edge:#C4AED8;
  --focus:rgba(110,66,147,.22);
  --pass:#2D7049;--pass-bg:#EAF4EE;--pass-line:#CFE5D8;--pass-solid:#4E9A6C;
  --partial:#835710;--partial-bg:#FAF2E2;--partial-line:#EEDDB8;--partial-solid:#C8933A;
  --fail:#9E3A3A;--fail-bg:#FAECEC;--fail-line:#F0D4D4;--fail-solid:#C46363;
  --untested:#5A5E6A;--untested-bg:#EFF0F3;--untested-line:#DCDEE3;--untested-solid:#C3C6CE;
  --pending:#395780;--pending-bg:#EBF0F7;--pending-line:#D3DDEC;--pending-solid:#7391BA;
  --blocked:#50545F;--blocked-bg:#ECEDF0;--blocked-line:#D8DAE0;--blocked-solid:#8B909B;
  --hot-bg:#FFF9E6;--hot-line:#EBDDAE;--hot-tag:#F6ECC9;--hot-ink:#6B5112;
  --av-himani:#476C93;--av-avish:#6E4293;--av-claude:#3D756E;--av-other:#6A6E7A;
  --radius:10px;--radius-sm:8px;--radius-xs:4px;
  --shadow:0 1px 2px rgba(20,22,30,.04);--shadow-pop:0 12px 32px rgba(20,22,30,.12);
  --s05:4px;--s1:8px;--s15:12px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;
  --gutter:var(--s4);--side:240px;--max:1360px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
a{color:var(--accent-ink)}
.skip{position:absolute;left:-999px;top:var(--s1);z-index:40}
.skip:focus{left:var(--s1);padding:var(--s1) var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}

/* the only motion on the page: a short fade when a screen or a message appears */
@keyframes fade{from{opacity:0}to{opacity:1}}
.login-card,.who-wrap,.pin-form,.tabpane,.toast{animation:fade .18s ease-out}

/* ---------- frame: full-height sidebar on the left, a white header bar, the content centred beside it ---------- */
.page{display:grid;grid-template-columns:var(--side) minmax(0,1fr);align-items:start;min-height:100vh}
body.is-login .page{visibility:hidden}
.main{min-width:0}
.top-inner,.content{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.content{padding-top:var(--s3);padding-bottom:var(--s5)}

.sidebar{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s2);background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;scrollbar-width:thin}
.logo{display:block;padding:0 var(--s1)}
.logo-img{display:block;width:100%;max-width:200px;height:auto;mix-blend-mode:multiply}
.tabs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.tabs::before{content:"Projects";display:block;padding:0 var(--s15) var(--s1);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tab{position:relative;display:flex;align-items:center;width:100%;min-height:40px;padding:var(--s1) var(--s15);font:inherit;font-size:14.5px;font-weight:500;line-height:1.3;text-align:left;color:var(--text-2);background:transparent;border:0;border-radius:var(--radius-sm);cursor:pointer;overflow-wrap:anywhere}
.tab:hover{color:var(--text);background:var(--surface-3)}
.tab[aria-selected="true"]{color:var(--accent-ink);font-weight:600;background:var(--accent-soft)}
.tab[aria-selected="true"]::before{content:"";position:absolute;left:0;top:var(--s1);bottom:var(--s1);width:3px;border-radius:2px;background:var(--accent)}
.tab-short{display:none}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s05);padding:var(--s2) var(--s15) 0;font-size:13px;color:var(--muted);border-top:1px solid var(--border)}
.logout{font-size:13px}

/* header: the company wordmark (its PNG has a light-pink ground: contrast() turns that ground pure white and
   multiply lets the header show through it), the portal name, the live indicator */
.top{background:var(--surface);border-bottom:1px solid var(--border);isolation:isolate}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:64px;padding-top:var(--s15);padding-bottom:var(--s15)}
.brand{display:flex;align-items:center;gap:var(--s2);min-width:0}
.wordmark{flex:0 1 auto;width:300px;min-width:0}
.wordmark img{display:block;width:100%;height:auto;filter:contrast(1.25);mix-blend-mode:multiply}
.eyebrow{padding-left:var(--s2);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-left:1px solid var(--border)}
.sync{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s05) var(--s15);font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--surface);border:1px solid var(--border);border-radius:999px}
.sync .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.sync.ok .dot{background:var(--pass-solid)}
.sync.bad{color:var(--fail);border-color:var(--fail-line)}
.sync.bad .dot{background:var(--fail-solid)}

/* ---------- log-in screen: the first thing anyone sees; the board stays hidden until a PIN is accepted ---------- */
.login-screen{position:fixed;inset:0;z-index:50;display:flex;padding:var(--s2);background:var(--bg);overflow:auto}
.login-card{width:min(400px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4) var(--s3) var(--s3);text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop)}
.login-logo{display:block;width:min(240px,80%);height:auto;mix-blend-mode:multiply}
.login-title{margin-top:calc(-1 * var(--s1));font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.login-foot{align-self:stretch;padding-top:var(--s2);font-size:12.5px;color:var(--muted);border-top:1px solid var(--border)}
.who-wrap{width:100%}
.who-label{font-size:17px;font-weight:600;color:var(--text)}
.who-hint{margin:var(--s05) 0 var(--s2);font-size:14px;color:var(--muted)}
body:not([data-me=""]) .who-hint{display:none}
.who{display:grid;grid-template-columns:1fr 1fr;gap:var(--s15)}
.who-btn{display:flex;align-items:center;gap:var(--s15);min-height:64px;padding:var(--s15) var(--s2);font:inherit;color:var(--text);text-align:left;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer}
.who-btn:hover{background:var(--surface-2);border-color:var(--accent-edge)}
.who-btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.who-text{display:flex;flex-direction:column;line-height:1.3}
.who-name{font-size:16px;font-weight:600}
.who-role{font-size:13px;color:var(--muted)}
.pin-form{display:flex;flex-direction:column;align-items:center;gap:var(--s2);width:100%}
.pin-head{display:flex;align-items:center;gap:var(--s15);align-self:stretch;text-align:left}
.pin-title{font-size:16px;font-weight:600}
.pin-form .pin-input{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none}
.pin-dots{display:flex;gap:var(--s2)}
.pin-dots span{width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.pin-form:focus-within .pin-dots span{border-color:var(--accent-edge)}
.pin-dots span.on,.pin-form:focus-within .pin-dots span.on{background:var(--accent);border-color:var(--accent)}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:var(--s1)}
.keypad button{height:56px;font:inherit;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}
.keypad button:hover{background:var(--surface-3)}
.keypad button:active{background:var(--accent-soft);border-color:var(--accent-line)}
.keypad button.go{color:#fff;background:var(--accent);border-color:var(--accent)}
.keypad button.go:hover{background:var(--accent-hover)}
.keypad button:disabled{opacity:.5;cursor:default}
.pin-error{min-height:20px;font-size:14px;font-weight:500;color:var(--fail)}

/* identities: initials on muted circles; the owner's circle carries the accent */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%;font-size:13.5px;font-weight:600;color:#fff;background:var(--av-other)}
.avatar.sm{width:24px;height:24px;font-size:11.5px}
.who-btn .avatar,.pin-head .avatar{width:40px;height:40px;font-size:16px}
.av-himani{background:var(--av-himani)} .av-avish{background:var(--av-avish)} .av-claude{background:var(--av-claude)} .av-other{background:var(--av-other)}

/* greeting: one quiet line under the header */
.greet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2);margin-bottom:var(--s3)}
.greet-line{margin:0;font-size:16px;line-height:1.4;color:var(--text)}
.greet-hello{font-weight:600}
.greet-date{color:var(--muted)}
.greet-date:not(:empty)::before{content:"—";margin:0 var(--s1);color:var(--border-strong)}
.greet-side{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);font-size:14px;color:var(--muted)}

/* ---------- shared building blocks ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel{padding:var(--s3)}
.panel-head{margin-bottom:var(--s2)}
.panel-head-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
h1,h2{margin:0;color:var(--text)}
h2{font-size:17px;font-weight:600;line-height:1.35}
h2 .count{margin-left:var(--s1);font-size:13px;font-weight:500;color:var(--muted)}
.hint{margin:var(--s05) 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.empty{margin:0;padding:var(--s2);font-size:14px;text-align:center;color:var(--muted);background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius-sm)}
.pane-kicker{margin:0 0 var(--s1);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

textarea,input:not([type="checkbox"]),select{width:100%;min-height:40px;padding:var(--s1) var(--s15);font:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
textarea{resize:vertical;line-height:1.5}
textarea.grow{resize:none;overflow:hidden}
::placeholder{color:var(--muted);opacity:1}
textarea:disabled,input:disabled,select:disabled{color:var(--muted);-webkit-text-fill-color:var(--muted);background:var(--surface-3);opacity:1;cursor:not-allowed}
:is(a,button,summary,label):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:is(textarea,input,select):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
input[type="checkbox"]{flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}
input[type="checkbox"]:focus{box-shadow:none}
input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:40px;padding:var(--s1) var(--s2);font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer}
.btn.primary{color:#fff;background:var(--accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{color:var(--text-2);background:var(--surface);border-color:var(--border-strong)}
.btn.ghost:hover{color:var(--text);background:var(--surface-2)}
.btn.sm{min-height:32px;padding:var(--s05) var(--s15);font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default}
.link{display:inline-flex;align-items:center;min-height:32px;padding:var(--s05) 0;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-2);text-decoration:none;background:none;border:0;cursor:pointer}
.link:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.check{display:inline-flex;align-items:center;gap:var(--s1);min-height:32px;font-size:13.5px;font-weight:500;color:var(--text-2);white-space:nowrap;cursor:pointer}

.pill{display:inline-flex;align-items:center;gap:6px;padding:1px var(--s1);font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;color:var(--untested);background:var(--untested-bg);border-radius:999px}
.pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.s-pass,.pill.rs-passed{color:var(--pass);background:var(--pass-bg)}
.pill.s-partial,.pill.rs-repeating{color:var(--partial);background:var(--partial-bg)}
.pill.s-fail{color:var(--fail);background:var(--fail-bg)}
.pill.s-pending{color:var(--pending);background:var(--pending-bg)}
.pill.s-blocked{color:var(--blocked);background:var(--blocked-bg)}
.pill.rs-in_progress{color:var(--accent-ink);background:var(--accent-soft)}
.pill.is-zero{opacity:.55}
.pill.now-pill{color:var(--accent-ink);background:var(--accent-soft)}
.pill.now-pill::before{display:none}

.editor label,.meta-form label{display:flex;flex-direction:column;gap:var(--s05)}
.editor label > span,.meta-form label > span{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.editor .full,.meta-form .full{grid-column:1 / -1}
.editor .actions,.meta-form .actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s1)}
body[data-me="Himani"] .staff-only,body[data-me=""] .staff-only{display:none}

/* ---------- status strip: round, attempt, next call; the banner and the two action links underneath ---------- */
.now{margin-bottom:var(--s3);overflow:hidden}
.now-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,1.3fr)}
.now-block{min-width:0;padding:var(--s2) var(--s3)}
.now-block + .now-block{border-left:1px solid var(--border)}
.now .k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.now .big{margin-top:var(--s05);font-size:20px;font-weight:600;line-height:1.3;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.now .sub{margin-top:2px;font-size:13.5px;color:var(--text-2)}
.banner{padding:var(--s2) var(--s3);font-size:15px;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);border-top:1px solid var(--border);box-shadow:inset 3px 0 0 var(--accent)}
.now-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);padding:var(--s15) var(--s3);border-top:1px solid var(--border)}
.now-unread,.now-needs{display:inline-flex;align-items:center;gap:var(--s1);min-height:36px;padding:var(--s05) var(--s15);font-size:14px;font-weight:600;text-decoration:none;border:1px solid;border-radius:999px}
.now-unread{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.now-needs{color:var(--partial);background:var(--partial-bg);border-color:var(--partial-line)}
.now-unread::before,.now-needs::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--partial-solid)}
.now-unread::before{background:var(--accent)}
.now-unread::after,.now-needs::after{content:"→"}
.now-unread:hover,.now-needs:hover{text-decoration:underline;text-underline-offset:3px}
.now-tools{margin-left:auto}
.meta-form{display:grid;grid-template-columns:120px 120px minmax(0,1fr);gap:var(--s15);margin:var(--s2) var(--s3) var(--s3);padding:var(--s2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}

/* jump bar: only when the board is one column */
.jump{display:none}

/* ---------- the board: two columns on desktop ---------- */
.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.col{display:flex;flex-direction:column;gap:var(--s3);min-width:0}

/* scorecard: one summary line + a thin bar, then the seven groups, each a grid of compact cards */
.totals{margin-bottom:var(--s2)}
.totals-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s05) var(--s1);margin:0;font-size:14px;color:var(--text-2)}
.tot{white-space:nowrap}
.tot b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--untested)}
.tot.s-pass b{color:var(--pass)} .tot.s-partial b{color:var(--partial)} .tot.s-fail b{color:var(--fail)}
.tot.s-pending b{color:var(--pending)} .tot.s-blocked b{color:var(--blocked)}
.tot-sep{color:var(--border-strong)}
.totals-bar{display:flex;gap:2px;height:6px;margin-top:var(--s1);overflow:hidden;background:var(--surface-3);border-radius:3px}
.totals-bar > span{min-width:3px}
.tb-pass{background:var(--pass-solid)} .tb-partial{background:var(--partial-solid)} .tb-fail{background:var(--fail-solid)}
.tb-pending{background:var(--pending-solid)} .tb-blocked{background:var(--blocked-solid)} .tb-not_tested{background:var(--untested-solid)}
.groups{display:flex;flex-direction:column}
.group{border-top:1px solid var(--border)}
.group summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s15);min-height:48px;padding:var(--s1) 0;list-style:none;cursor:pointer}
.group summary::-webkit-details-marker{display:none}
.group summary:hover .group-title{color:var(--accent-ink)}
.group-title{font-size:15px;font-weight:600}
.group-sub{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s15);min-width:0}
.group-range{font-size:13px;color:var(--muted)}
.mini{display:inline-flex;gap:var(--s05);margin-left:auto}
.mini-dot{width:10px;height:10px;border-radius:50%;background:var(--untested-solid)}
.mini-dot.s-pass{background:var(--pass-solid)} .mini-dot.s-partial{background:var(--partial-solid)} .mini-dot.s-fail{background:var(--fail-solid)}
.mini-dot.s-pending{background:var(--pending-solid)} .mini-dot.s-blocked{background:var(--blocked-solid)}
.chev{flex:none;width:8px;height:8px;margin:0 var(--s05) 0 var(--s1);border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
.group[open] .chev{transform:rotate(45deg)}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s15);padding-bottom:var(--s2)}
/* one compact card: number + title + meta, result + "Check", the note (full text, grows) underneath */
.sc{display:flex;flex-direction:column;gap:var(--s1);min-width:0;padding:var(--s15);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--untested-solid);border-radius:var(--radius-sm)}
.sc.st-pass{border-left-color:var(--pass-solid)} .sc.st-partial{border-left-color:var(--partial-solid)} .sc.st-fail{border-left-color:var(--fail-solid)}
.sc.st-pending{border-left-color:var(--pending-solid)} .sc.st-blocked{border-left-color:var(--blocked-solid)}
.sc-head{display:flex;align-items:flex-start;gap:var(--s1)}
.num{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 6px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-2);background:var(--surface-3);border-radius:var(--radius-xs)}
.title-cell{display:flex;flex-direction:column;min-width:0}
.row-title{font-size:14.5px;font-weight:600;line-height:1.35}
.row-meta{margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.sc-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1)}
.sel-wrap{position:relative;display:inline-flex;color:var(--text-2)}
.sel-wrap::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.status-sel{-webkit-appearance:none;appearance:none;width:auto;min-height:32px;padding:var(--s05) 30px var(--s05) var(--s15);font-size:13.5px;font-weight:600;border:1px solid transparent;border-radius:999px;cursor:pointer}
.status-sel.s-pass{color:var(--pass);background:var(--pass-bg);border-color:var(--pass-line)}
.status-sel.s-partial{color:var(--partial);background:var(--partial-bg);border-color:var(--partial-line)}
.status-sel.s-fail{color:var(--fail);background:var(--fail-bg);border-color:var(--fail-line)}
.status-sel.s-pending{color:var(--pending);background:var(--pending-bg);border-color:var(--pending-line)}
.status-sel.s-blocked{color:var(--blocked);background:var(--blocked-bg);border-color:var(--blocked-line)}
.status-sel.s-not_tested{color:var(--untested);background:var(--untested-bg);border-color:var(--untested-line)}
.status-sel:disabled{opacity:.75;cursor:default;-webkit-text-fill-color:currentColor}
.sc .note{min-height:36px;padding:6px 10px;font-size:14px;line-height:1.5;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);border:1px solid transparent}
.sc .note:hover{border-color:var(--border)}
.sc .note:focus{color:var(--text);background:var(--surface);border-color:var(--accent)}
.sc .note[readonly]{cursor:default}

/* round progress: a vertical stepper; details for the current round (or all, on request) */
.steps{margin:0;padding:0;list-style:none}
.step{position:relative;display:flex;gap:var(--s15);padding-bottom:var(--s15)}
.step::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--border)}
.step:last-child::before{display:none}
.step-dot{flex:none;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:13px;font-weight:600;color:var(--muted);background:var(--surface);border:2px solid var(--border-strong);border-radius:50%}
.step.rs-in_progress .step-dot{color:#fff;background:var(--accent);border-color:var(--accent)}
.step.rs-repeating .step-dot{color:var(--partial);background:var(--partial-bg);border-color:var(--partial-solid)}
.step.rs-passed .step-dot{color:#fff;background:var(--pass-solid);border-color:var(--pass-solid)}
.step-body{flex:1;min-width:0;padding-top:2px}
.step.is-current .step-body{margin-top:-4px;padding:var(--s1) var(--s15);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm)}
.step-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s05) var(--s1);min-height:24px}
.now-tag{padding:1px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:var(--radius-xs)}
.step-title{font-size:14.5px;font-weight:600;line-height:1.35}
.step.is-compact .step-title{font-weight:500}
.step.is-compact.rs-not_started .step-title{color:var(--text-2)}
.step-meta{display:flex;flex-wrap:wrap;gap:var(--s05) var(--s15);margin-top:var(--s05);font-size:13px;color:var(--muted)}
.step-meta > span{white-space:nowrap}
.step-note{margin-top:var(--s05);font-size:14px;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.steps-foot{margin-top:var(--s05)}
.editor{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s15);margin-top:var(--s15);padding:var(--s15);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}

/* call log */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{padding:var(--s1) var(--s15);font-size:12px;font-weight:600;letter-spacing:.06em;text-align:left;text-transform:uppercase;white-space:nowrap;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--border)}
td{padding:10px var(--s15);vertical-align:top;border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:0}
td.what{color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}
td.num-cell{white-space:nowrap;font-variant-numeric:tabular-nums}

/* needs: a short checklist; the whole row is the tap target; long requests show five lines (the full text is
   the same message in the conversation) */
.needs{display:flex;flex-direction:column;gap:var(--s1)}
.need{display:flex;align-items:flex-start;gap:var(--s15);padding:var(--s15) var(--s2);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--partial-solid);border-radius:var(--radius-sm);cursor:pointer}
.need:hover{background:var(--surface-2)}
.need input{margin-top:3px}
.need-body{display:flex;flex-direction:column;gap:var(--s05);min-width:0}
.need-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.need-meta{font-size:12.5px;color:var(--muted)}

/* ---------- conversation ---------- */
.compose{padding:var(--s2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.compose textarea{background:var(--surface)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s15)}
.chip-btn{min-height:32px;padding:var(--s05) var(--s15);font:inherit;font-size:13.5px;font-weight:500;color:var(--text-2);background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;cursor:pointer}
.chip-btn:hover{color:var(--text);border-color:var(--accent-edge)}
.chip-btn.is-on{font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-edge)}
.compose-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s15)}
.filters{display:inline-flex;flex-wrap:wrap;gap:2px;margin:var(--s3) 0 var(--s2);padding:3px;background:var(--surface-3);border-radius:var(--radius-sm)}
.seg{min-height:32px;padding:var(--s05) var(--s15);font:inherit;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--text-2);background:transparent;border:0;border-radius:6px;cursor:pointer}
.seg:hover{color:var(--text)}
.seg.is-on{font-weight:600;color:var(--text);background:var(--surface);box-shadow:0 1px 2px rgba(20,22,30,.1)}
.thread{display:flex;flex-direction:column;gap:var(--s15)}
.post{display:flex;gap:var(--s15);padding:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.post-body{flex:1;min-width:0}
.post-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s05) var(--s1);font-size:13px;line-height:1.4;color:var(--muted)}
.post-who{font-size:14.5px;font-weight:600;color:var(--text)}
.post-role::before,.post-time::before{content:"·";margin-right:var(--s1);color:var(--border-strong)}
.post-time{font-variant-numeric:tabular-nums}
.type-label{padding:1px 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);background:var(--surface-3);border-radius:var(--radius-xs)}
.tl-need{color:var(--partial);background:var(--partial-bg)}
.tl-fix{color:var(--pass);background:var(--pass-bg)}
.tl-question{color:var(--pending);background:var(--pending-bg)}
.post-text{max-width:75ch;margin-top:6px;font-size:15px;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.post-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s05) var(--s2);margin-top:var(--s1)}
.replies{display:flex;flex-direction:column;gap:var(--s15);margin-top:var(--s15);padding-left:var(--s15);border-left:2px solid var(--border)}
.reply{display:flex;gap:var(--s1)}
.reply-body{flex:1;min-width:0}
.reply .post-text{margin-top:2px;font-size:14.5px}
.reply .post-tools{margin-top:var(--s05)}
.reply-box{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s15)}
.reply-actions{display:flex;gap:var(--s1)}
.more{margin-top:var(--s2);text-align:center}
.post.is-resolved{background:var(--surface-2)}
.post.is-resolved .post-text{color:var(--text-2)}
/* the owner's messages: a soft accent outline and his name in the accent ink */
.post.by-avish{border-color:var(--accent-edge)}
.reply.by-avish{padding:var(--s1) var(--s15);border:1px solid var(--accent-edge);border-radius:var(--radius-sm)}
.post.by-avish > .post-body > .post-head > .post-who,.post.by-avish > .post-body > .post-head > .post-role,.reply.by-avish .post-who{color:var(--accent-ink)}
/* highlighted (shared, anyone can switch it on or off): a soft tint and a small tag */
.post.is-hot{background:var(--hot-bg);border-color:var(--hot-line)}
.reply.is-hot{padding:var(--s1) var(--s15);background:var(--hot-bg);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--hot-line)}
.hot-badge{display:inline-flex;align-items:center;padding:1px var(--s1);font-size:11.5px;font-weight:600;color:var(--hot-ink);background:var(--hot-tag);border-radius:999px}
.hot-btn.is-on{color:var(--hot-ink)}
/* unread for Himani: an accent bar on the left, a small badge, and "Mark as read" */
body[data-me="Himani"] .post.is-unread{padding-left:calc(var(--s2) - 2px);border-left:3px solid var(--accent)}
body[data-me="Himani"] .reply.is-unread{padding:var(--s1) var(--s15);background:var(--accent-soft);border-radius:var(--radius-sm);box-shadow:inset 3px 0 0 var(--accent)}
.unread-badge{display:inline-flex;align-items:center;gap:6px;padding:1px var(--s1);font-size:11.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px}
.unread-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.read-btn{color:var(--accent-ink);background:var(--surface);border-color:var(--accent-edge)}
.read-btn:hover{background:var(--accent-soft)}
.read-mark{font-size:12.5px;color:var(--pass)}
.read-all{white-space:nowrap}

/* ---------- other project tabs: the tab's own page, published by its own tool, framed full width ---------- */
.project-head{margin-bottom:var(--s2)}
.project-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2)}
.project-text{flex:1;min-width:0}
.project-text h2{font-size:18px}
.project-text .hint{font-size:14px}
.project-actions{display:flex;flex-wrap:wrap;gap:var(--s1)}
.pj-host{min-height:60vh}
.pj-frame{display:block;width:100%;min-height:80vh;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
.pj-empty{padding:var(--s4) var(--s3);font-size:15px;line-height:1.6;text-align:center;color:var(--text-2);background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius)}

.foot{margin-top:var(--s4);font-size:13px;text-align:center;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:var(--s3);z-index:60;max-width:min(560px,calc(100vw - 32px));padding:var(--s15) var(--s2);font-size:14.5px;font-weight:500;color:#fff;background:#2B2D35;border-radius:var(--radius-sm);box-shadow:inset 3px 0 0 var(--fail-solid),var(--shadow-pop);transform:translateX(-50%)}

/* ---------- one column below 1100 px: what the tester acts on comes first (needs, conversation), then the cards,
   rounds and calls; a sticky jump bar ---------- */
@media (max-width:1099px){
  .board{display:flex;flex-direction:column;gap:var(--s2)}
  .col{display:contents}
  #needs{order:1} #conversation{order:2} #scorecard{order:3} #progress{order:4} #calls{order:5}
  .jump{position:sticky;top:0;z-index:5;display:flex;gap:var(--s05);margin:0 calc(-1 * var(--gutter)) var(--s2);padding:var(--s1) var(--gutter);background:rgba(245,245,247,.96);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .jump a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:40px;font-size:14px;font-weight:500;color:var(--text-2);text-decoration:none;border-radius:var(--radius-sm)}
  .jump a[aria-current]{font-weight:600;color:var(--accent-ink);background:var(--surface);box-shadow:0 0 0 1px var(--border)}
  .panel{scroll-margin-top:64px}
}
/* landscape phones and small tablets: the same sidebar, narrower */
@media (orientation:landscape) and (max-width:900px){
  :root{--side:184px;--gutter:var(--s2)}
  .sidebar{gap:var(--s2);padding:var(--s2) var(--s1)}
  .tab{min-height:36px;padding:6px var(--s1);font-size:13px}
  .top-inner{min-height:56px}
  .wordmark{width:220px}
}
/* phones and portrait tablets: the project navigation becomes a compact top bar (logo mark + tabs that scroll
   sideways), everything else is one column */
@media (max-width:640px),(orientation:portrait) and (max-width:900px){
  :root{--gutter:var(--s2)}
  body{font-size:16px}
  .page{display:block}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;gap:var(--s1);padding:0 0 0 var(--s2);overflow:visible;border-right:0;border-bottom:1px solid var(--border)}
  .logo{flex:none;padding:0}
  .logo-img{width:36px;height:36px;max-width:none;object-fit:cover;object-position:0 50%}
  .tabs{flex:1;min-width:0;flex-direction:row;gap:0;padding-right:var(--s2);overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs::before{display:none}
  .tab{flex:none;width:auto;min-height:48px;padding:var(--s1) var(--s15);font-size:14px;white-space:nowrap;border-radius:0}
  .tab:hover,.tab[aria-selected="true"]{background:transparent}
  .tab[aria-selected="true"]::before{left:var(--s15);right:var(--s15);top:auto;bottom:0;width:auto;height:2px;border-radius:2px 2px 0 0}
  .tab-full{display:none}
  .tab-short{display:inline}
  .sidebar-foot{display:none}
  .top-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"word word" "eye sync";align-items:center;gap:var(--s1) var(--s2);min-height:0}
  .brand{display:contents}
  .wordmark{grid-area:word;width:min(280px,100%)}
  .eyebrow{grid-area:eye;padding-left:0;font-size:12px;border-left:0}
  .sync{grid-area:sync;padding:2px 10px;font-size:12px}
  .content{padding-top:var(--s2)}
  .greet{margin-bottom:var(--s2)}
  .greet-line{font-size:15px}
  .panel{padding:var(--s2)}
  .now{margin-bottom:var(--s2)}
  .now-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .now-round{grid-column:1 / -1;border-bottom:1px solid var(--border)}
  .now-block{padding:var(--s15) var(--s2)}
  .now-block + .now-block{border-left:0}
  .now-block.now-next{border-left:1px solid var(--border)}
  .now .big{font-size:18px}
  .banner{padding:var(--s15) var(--s2)}
  .now-foot{padding:var(--s15) var(--s2)}
  .now-tools{margin-left:0}
  .meta-form{grid-template-columns:1fr 1fr;margin:var(--s2)}
  .meta-form .wide{grid-column:1 / -1}
  .editor{grid-template-columns:1fr}
  .compose-foot{flex-direction:column;align-items:stretch}
  .filters{display:flex}
  .seg{flex:1;padding:var(--s05) var(--s1)}
  .post{gap:var(--s1);padding:var(--s15)}
  body[data-me="Himani"] .post.is-unread{padding-left:calc(var(--s15) - 2px)}
  .post-text{font-size:16px}
  .reply .post-text,.need-text{font-size:15px}
  .login-card{padding:var(--s3) var(--s2) var(--s2)}
  .keypad{grid-template-columns:repeat(3,68px)}
  .keypad button{height:52px}
  .who-btn{flex-direction:column;align-items:center;gap:6px;padding:var(--s15) var(--s1);text-align:center}
  .who-text{align-items:center}
  /* thumb-sized targets: 44 px rows, 22 px boxes */
  input[type="checkbox"]{width:22px;height:22px}
  .check,.need{min-height:44px}
  .link{min-height:44px;padding:var(--s1);margin-left:calc(-1 * var(--s1))}
  .btn,.btn.sm,.seg,.chip-btn,.status-sel{min-height:44px}
  .group summary{min-height:52px}
  .group-title{flex:1}
  .chev{order:2}
  .group-sub{order:3;flex-basis:100%}
  table,tbody,tr,td{display:block}
  thead{display:none}
  tr{margin-bottom:var(--s15);padding:var(--s1) var(--s15);border:1px solid var(--border);border-radius:var(--radius-sm)}
  td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s1);padding:var(--s05) 0;border:0}
  td::before{content:attr(data-l);padding-top:2px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  td.empty{display:block}
  td.empty::before{display:none}
  .project-actions{width:100%}
  .project-actions a{flex:1}
  .pj-frame{min-height:75vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important}
}