/* Pipeline Tribunal · matches the Pipeline client portal design system (navy rail, copper accent, cream paper) */
:root{
  --navy:#0E2841; --copper:#B8763E; --cream:#FBF6EE;
  --bg:#F7F2EA; --surface:#FFFFFF; --sunk:#F3EEE5; --ink:#0E2841; --ink-2:#44546A; --ink-3:#7A8694;
  --line:rgba(14,40,65,.09); --line-2:rgba(14,40,65,.06);
  --accent:#B8763E; --accent-ink:#9A6030; --on-accent:#FFFFFF; --accent-bg:#F6E8DA;
  --rail:#0E2841; --rail-2:#1A3A5C; --rail-ink:#FBF6EE; --rail-dim:#A9B7C6; --rail-line:rgba(251,246,238,.12);
  --ok:#2F6B4F; --ok-bg:#E4F0E9; --warn:#9A6212; --warn-bg:#FBEFD4; --alert:#B8402A; --alert-bg:#FAE6E0; --info:#2D5B8A; --info-bg:#E4EAF1;
  --shadow:0 12px 32px rgba(14,40,65,.10); --shadow-sm:0 1px 2px rgba(14,40,65,.04),0 6px 18px rgba(14,40,65,.06); --scrim:rgba(10,24,39,.4);
  --font:Calibri,Carlito,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --display:Newsreader,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --radius:16px; --radius-sm:11px;
  --viewer-bg:#EAE4DA;
}
/* The app is designed on the cream palette only; the phone's dark setting does not change it (see color-scheme in index.html). */

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15.5px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.tap{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.mobile-only{display:none}
a{color:var(--accent-ink)}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;color:var(--ink)}
h1,h2,h3{margin:0;font-weight:500}
.display{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.mono{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.ico{width:16px;height:16px;flex:none;vertical-align:-2px}

/* ---------- shell ---------- */
#app{display:grid;grid-template-columns:196px 1fr;min-height:100vh}
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:22px 16px}
.brand{padding:6px 8px 18px;border-bottom:1px solid var(--rail-line)}
.brand .logo{height:18px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.96}
.brand .sub{font-size:12px;font-weight:600;color:var(--rail-dim);margin-top:8px}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--rail-dim);text-decoration:none;font-size:15px}
.nav a:hover{background:var(--rail-2);color:var(--rail-ink)}
.nav a.active{background:var(--rail-2);color:var(--rail-ink)}
.nav a .ico{width:18px;height:18px;flex:none;opacity:.9}
.nav a .count{margin-left:auto;background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.rail .spacer{flex:1}
.userchip{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;border:1px solid var(--rail-line)}
.userchip .name{font-size:14px;line-height:1.2}
.userchip .role{font-size:11.5px;color:var(--rail-dim);text-transform:uppercase;letter-spacing:.08em}
.userchip button{margin-left:auto;background:none;border:0;color:var(--rail-dim);cursor:pointer;font-size:12px}
.userchip button:hover{color:var(--rail-ink)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em;flex:none}
.avatar.sm{width:24px;height:24px;font-size:10.5px}
.avatar.photo{background:var(--sunk);overflow:hidden;padding:0}
.avatar.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photos{display:flex;flex-direction:column;gap:8px}
.photorow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.photorow:last-child{border-bottom:0}
.photorow .avatar{width:40px;height:40px;font-size:14px}
.avatar.ghost{background:transparent;border:1.5px dashed var(--ink-3);color:var(--ink-3)}
.avatar.ok{background:var(--ok);color:#fff}
.avatar.changes{background:var(--alert);color:#fff}
.avatar.mp{background:#0E2841;color:#FBF6EE} .avatar.sh{background:#B8763E} .avatar.jt{background:#4B6B8A;color:#fff} .avatar.lk{background:#6E5A4E;color:#fff} .avatar.ab{background:#3F6E63;color:#fff}

main{min-width:0}
.page{max-width:1180px;margin:0 auto;padding:36px 40px 80px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-head h1{font-size:34px;line-height:1.05}
.page-head .lede{color:var(--ink-2);margin-top:6px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;min-height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:14.5px;line-height:1;white-space:nowrap;transition:background .12s,border-color .12s,transform .05s}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#FBF6EE;font-weight:600}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:700}
.btn.danger{background:var(--alert-bg);border-color:transparent;color:var(--alert);font-weight:600}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--sunk)}
.btn.sm{padding:6px 12px;min-height:32px;font-size:13px;border-radius:9px}
.btn.pill-btn{border-radius:999px;padding:11px 20px;font-weight:700}
.btn.big{min-height:50px;font-size:16px}
.btn.icon{width:40px;height:40px;padding:0;border-radius:50%;justify-content:center}
.pill.tappable{cursor:pointer;border:0;font:inherit;font-size:12px;font-weight:600}
.btn .ico{width:15px;height:15px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink-2);text-transform:none}
.field .hint{font-size:12.5px;color:var(--ink-3);text-transform:none;font-weight:400;letter-spacing:0}
.input,textarea.input,select.input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);outline:none;transition:border-color .12s,box-shadow .12s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,118,62,.18)}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}
.row{display:flex;gap:12px}
.row>*{flex:1;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;cursor:pointer;color:var(--ink-2)}
.chip.active{background:var(--navy);border-color:var(--navy);color:#FBF6EE}
.chip .n{opacity:.7;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;background:var(--sunk);color:var(--ink-2)}
.pill.in_review{background:var(--info-bg);color:var(--info)}
.pill.changes_requested{background:var(--alert-bg);color:var(--alert)}
.pill.cleared{background:var(--ok-bg);color:var(--ok)}
.pill.archived{background:var(--sunk);color:var(--ink-3)}
.pill.kind{background:var(--sunk);color:var(--ink-2);text-transform:none;letter-spacing:0;font-weight:600}
.pill.round{background:var(--navy);color:#FBF6EE}
.pill.ready{background:var(--ok-bg);color:var(--ok)} .pill.minor_fixes{background:var(--warn-bg);color:var(--warn)} .pill.hold{background:var(--alert-bg);color:var(--alert)} .pill.running,.pill.queued{background:var(--sunk);color:var(--ink-2)} .pill.error{background:var(--alert-bg);color:var(--alert)}
.pill.clock{background:var(--sunk);color:var(--ink-2);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
.pill.clock.warn{background:var(--warn-bg);color:var(--warn)}
.pill.clock.over{background:var(--alert);color:#fff;animation:none}
.stat.over{border-color:var(--alert);background:var(--alert-bg)} .stat.over .n{color:var(--alert)}
.notebox{background:var(--sunk);padding:10px;border-radius:10px;margin-bottom:6px}
.logrow{display:flex;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-2);font-size:14px}
.logrow .ico{flex:none;width:22px;text-align:center}
.logrow .t{white-space:pre-wrap;line-height:1.45}
.logrow .w{font-size:12px;color:var(--ink-3);margin-top:2px}
.logrow.note{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin:6px 0}
.logrow.reminder .t{color:var(--alert)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.dot.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- cards / queue ---------- */
.card{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s,transform .08s,box-shadow .12s}
.stat:hover{border-color:var(--ink-3);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.stat.active{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.qtools{display:flex;align-items:center;gap:10px;margin:18px 0 0}
.qtools .qtitle{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;flex:1}
.qtools .search{max-width:300px;padding:8px 12px}
.stat .n{font-family:var(--display);font-size:30px;line-height:1}
.stat .l{font-size:13px;color:var(--ink-3);margin-top:2px;font-weight:500}
.stat.hot{border-color:var(--accent);background:var(--accent-bg)}
.queue{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.qrow{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .08s}
.qrow:hover{border-color:var(--ink-3);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.qrow .client{font-family:var(--display);font-size:21px;line-height:1.1}
.qrow .title{color:var(--ink-2);margin-top:2px}
.qrow .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--ink-3)}
.votes{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.vavs{display:flex}
.vav{display:inline-flex;border-radius:50%;padding:2px;margin-left:-6px;background:var(--surface);box-shadow:0 0 0 2px var(--line)}
.vav:first-child{margin-left:0}
.vav.ok{box-shadow:0 0 0 2.5px var(--ok)}
.vav.changes{box-shadow:0 0 0 2.5px var(--alert)}
.vav.ghost{opacity:.45;box-shadow:0 0 0 2px var(--line)}
.vline{font-size:12px;color:var(--ink-3);white-space:nowrap}
.avatar.md{width:36px;height:36px;font-size:13px}
.votes-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px}
.vrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.vrow:last-child{border-bottom:0}
.vrow .vinfo{flex:1;min-width:0}
.vrow .vname{font-weight:700;font-size:14px;line-height:1.2}
.vrow .vstate{font-size:12.5px;color:var(--ink-3);line-height:1.3}
.vrow .vnote{font-size:12.5px;color:var(--ink-2);font-family:var(--display);font-style:italic;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow .vmark{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vrow .vmark .ico{width:15px;height:15px}
.vrow.approved .vmark{background:var(--ok);color:#fff}
.vrow.approved .vstate{color:var(--ok);font-weight:600}
.vrow.changes .vmark{background:var(--alert);color:#fff}
.vrow.changes .vstate{color:var(--alert);font-weight:600}
.vrow.waiting .vmark{border:2px dashed var(--line)}
.dot-wait{width:8px;height:8px;border-radius:50%;background:var(--line)}
.vsum{font-size:12.5px;color:var(--ink-2);margin-bottom:10px;text-align:center}
.btn.danger-solid{background:var(--alert);border-color:var(--alert);color:#fff;font-weight:700}
.modal.confirm{width:420px}
.empty{padding:48px;text-align:center;color:var(--ink-3);border:1px dashed var(--line);border-radius:var(--radius)}
.empty .display{font-size:22px;color:var(--ink-2);margin-bottom:6px}

/* ---------- submit (DAM style) ---------- */
.page.narrow{max-width:900px}
.submit .asrow{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.input.lg{font-size:18px;padding:12px 14px}
.dam{position:relative;border:2px dashed var(--line);border-radius:var(--radius);background:var(--surface);min-height:220px;padding:14px;transition:border-color .12s,background .12s;outline:none}
.dam.over,.dam:focus-within{border-color:var(--accent);background:var(--accent-bg)}
.dam-empty{text-align:center;color:var(--ink-2);padding:34px 10px 18px;cursor:pointer}
.dam-empty .ico{width:28px;height:28px;color:var(--accent);margin-bottom:6px}
.linkish{color:var(--accent-ink);text-decoration:underline;cursor:pointer}
.dam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{position:relative;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px}
.tile .thumb{aspect-ratio:4/3;background:var(--surface);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line-2)}
.tile .thumb canvas,.tile .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.tile .thumb .ext{font-weight:800;letter-spacing:.08em;color:var(--ink-3);font-size:13px}
.tile .thumb .ico{width:26px;height:26px;color:var(--accent)}
.tile .tn{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tn .lbl{width:100%;border:0;background:transparent;font:inherit;font-size:13px;padding:0;border-bottom:1px dashed var(--line)}
.tile .ts{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}.tile .bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.tile .x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:var(--navy);color:#FBF6EE;cursor:pointer;font-size:11px;opacity:0;transition:opacity .12s}
.tile:hover .x{opacity:1}
.dam-foot{display:flex;gap:8px;margin-top:12px;align-items:center}
.dam-foot .input{flex:1}
details.more{margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px}
details.more summary{cursor:pointer;color:var(--ink-2);font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:6px}
details.more summary::before{content:"▸";font-size:11px;transition:transform .12s}
details.more[open] summary::before{transform:rotate(90deg)}
details.more>div,details.more>.field{margin-top:12px}
.submitbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:18px;position:sticky;bottom:0;background:var(--bg);padding:10px 0}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kinds .kind{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;min-height:56px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .12s,background .12s}
.kinds .kind:hover{border-color:var(--ink-3)}
.kinds .kind.active{border-color:var(--alert);background:var(--alert-bg)}
.kinds .kind .kt{font-weight:700;font-size:14.5px}.kinds .kind .ks{font-size:12px;color:var(--ink-3)}
.kinds .kind.active .ks{color:var(--alert)}
.prefrows{display:flex;flex-direction:column;margin-top:12px}
.prefrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.prefrow:last-child{border-bottom:0}
.prefrow>span{display:flex;flex-direction:column;gap:2px}
.prefrow input[type=checkbox]{appearance:none;width:46px;height:28px;border-radius:999px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .15s}
.prefrow input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.prefrow input[type=checkbox]:checked{background:var(--ok)}
.prefrow input[type=checkbox]:checked::after{transform:translateX(18px)}
#before.kinds{grid-template-columns:repeat(3,1fr)}
#before .kinds .kind{min-height:44px;justify-content:center}
#before .kinds .kind.active{border-color:var(--navy);background:var(--info-bg)}
.sent{display:flex;align-items:center;gap:8px;margin-top:10px}.sent .input.sm{padding:5px 8px;font-size:13px;max-width:160px}

/* ---------- submit form (legacy pieces) ---------- */
.form-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
.panel{padding:22px 24px}
.panel h2{font-size:18px;margin-bottom:14px;font-family:var(--display);font-weight:500}
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;color:var(--ink-3);cursor:pointer;transition:border-color .12s,background .12s}
.drop.over,.drop:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-ink)}
.filelist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.file{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--sunk);font-size:14px}
.file .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .bar{height:4px;background:var(--line);border-radius:2px;flex:0 0 90px;overflow:hidden}
.file .bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.file .x{background:none;border:0;cursor:pointer;color:var(--ink-3)}
.linkrow{display:grid;grid-template-columns:140px 1fr 32px;gap:8px;margin-bottom:8px}
.linkrow .x{background:none;border:0;cursor:pointer;color:var(--ink-3)}

/* ---------- item / review ---------- */
.item{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);height:100vh;min-width:0}
.itembar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5;flex-wrap:wrap;min-width:0}
.itembar .back{text-decoration:none;color:var(--ink-2);border-radius:50%}.itembar .back:hover{background:var(--sunk)}
.itembar .ttl{min-width:0;flex:1 1 260px}
.itembar .cluster{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.itembar .ttl .c{font-family:var(--display);font-size:21px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itembar .ttl .t{font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itembar .grow{flex:0}
.itembar .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.review{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);min-height:0}
.viewer{background:var(--viewer-bg);overflow:auto;overflow-x:hidden;position:relative;min-height:0}
.viewer-tools{position:sticky;top:0;z-index:4;display:flex;gap:8px;align-items:center;padding:10px 16px;background:color-mix(in srgb,var(--viewer-bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.viewer-tools .sel{padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;max-width:260px}
.viewer-tools .hint{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.viewer-tools .srcnav{display:flex;align-items:center;gap:4px;min-width:0}
.viewer-tools .navbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.viewer-tools .navbtn:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy)}
.viewer-tools .navbtn:disabled{opacity:.3;cursor:default}
.viewer-tools .srccount{font-size:12.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pagenav-wrap{position:sticky;top:45%;height:0;width:100%;align-self:stretch;z-index:3;pointer-events:none}
.pagenav-wrap .pagenav{pointer-events:auto;position:absolute;top:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.pagenav-wrap .pagenav:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagenav-wrap .pagenav.prev{left:-14px}.pagenav-wrap .pagenav.next{right:-14px}
@media (max-width:980px){.pagenav-wrap{top:40%}.pagenav-wrap .pagenav.prev{left:-10px}.pagenav-wrap .pagenav.next{right:-10px}}
.pages{display:flex;flex-direction:column;gap:22px;align-items:center;padding:22px 24px 80px}
.pages.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pagewrap{position:relative;background:#fff;box-shadow:var(--shadow);border-radius:3px;cursor:crosshair;max-width:100%}
.pagewrap canvas,.pagewrap img{display:block;max-width:100%;height:auto;border-radius:3px}
.pagewrap .pno{position:absolute;left:-2px;top:-24px;font-size:11.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;cursor:default}
.pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);color:#fff;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:transform .1s}
.pin span{transform:rotate(45deg);font-size:11px;font-weight:700}
.pin.resolved{background:var(--ok)}
.pin.scan{background:var(--info)}
.pin.hot,.pin:hover{transform:rotate(-45deg) scale(1.18);z-index:3}
.pin.draft{background:var(--navy);animation:pulse 1s infinite}
.composer{position:absolute;z-index:6;width:300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;cursor:default}
.composer textarea{min-height:76px}
.composer .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.copydeck{background:var(--surface);max-width:760px;width:100%;padding:40px 48px;border-radius:4px;box-shadow:var(--shadow);cursor:default}
.copydeck p{position:relative;padding:8px 12px;margin:0 0 6px;border-radius:8px;cursor:pointer;white-space:pre-wrap;line-height:1.6}
.copydeck p:hover{background:var(--sunk)}
.copydeck p.hot{background:var(--accent-bg)}
.copydeck p .pnum{position:absolute;left:-30px;top:8px;font-size:11px;color:var(--ink-3)}
.copydeck p .pins{position:absolute;right:-16px;top:6px;display:flex;flex-direction:column;gap:4px}
.linkwrap{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:8px}
.linkbar{display:flex;align-items:center;gap:10px}
.linkframe{width:100%;height:calc(100vh - 170px);border:1px solid var(--line);background:#fff;border-radius:8px;box-shadow:var(--shadow)}
.linkcard{background:var(--surface);padding:22px;border-radius:var(--radius);max-width:760px;width:100%;text-align:center;cursor:default;overflow-wrap:anywhere}

.side{background:var(--surface);border-left:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto;min-height:0;min-width:0;overflow:hidden}
.seg-wrap{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.seg{display:flex;flex:1;background:var(--sunk);border-radius:12px;padding:3px;gap:2px}
.seg button{flex:1;background:none;border:0;padding:8px 4px;border-radius:9px;cursor:pointer;color:var(--ink-2);font-size:13px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:4px;transition:background .12s,color .12s,box-shadow .12s;min-height:36px}
.seg button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(14,40,65,.14)}
.seg button .b{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--navy);color:#FBF6EE;font-size:10.5px;font-weight:700}
.seg button .b.alert{background:var(--alert);color:#fff}
.sheet-close{display:none;border:0;background:var(--sunk);border-radius:50%;width:36px;height:36px;color:var(--ink-2);cursor:pointer}
.tabpane{overflow:auto;padding:16px;min-height:0}
.votebar{border-top:1px solid var(--line);padding:14px 16px;background:var(--sunk)}
.votebar .who{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.votebar .who .v{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.votebar .acts{display:flex;gap:10px}
.votebar .acts .btn{flex:1;justify-content:center;min-width:0}
.cleared-banner{background:var(--ok-bg);color:var(--ok);padding:12px 14px;border-radius:10px;font-weight:700;margin-bottom:10px;display:flex;gap:10px;align-items:center}

/* comments */
.cmt{padding:12px 12px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--surface);transition:border-color .12s,background .12s;cursor:pointer}
.cmt:hover{border-color:var(--ink-3)}
.cmt.hot{border-color:var(--accent);background:var(--accent-bg)}
.cmt.resolved{opacity:.6}
.cmt .top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cmt .top .who{font-weight:700;font-size:13.5px}
.cmt .top .when{font-size:12px;color:var(--ink-3)}
.cmt .top .loc{margin-left:auto;font-size:11.5px;color:var(--ink-3);background:var(--sunk);padding:2px 7px;border-radius:999px;white-space:nowrap}
.cmt .txt{white-space:pre-wrap;line-height:1.5;font-size:14.5px}
.cmt .ft{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.cmt .ft button{background:none;border:0;cursor:pointer;color:var(--ink-3);padding:0;font-size:12.5px}
.cmt .ft button:hover{color:var(--accent-ink)}
.attach{margin-top:8px}
.attach .arow2{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.attach .arow2 .input.sm{flex:1;min-width:160px;padding:6px 10px;min-height:34px;font-size:14px}
.achips,.catt{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.achips:empty,.catt:empty{display:none}
.achips .chip,.catt .chip{padding:5px 10px;max-width:100%;text-decoration:none;color:var(--ink-2)}
.chip .nm{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip button{background:none;border:0;cursor:pointer;color:var(--ink-3);padding:0 0 0 2px}
.catt .cimg{display:block;width:96px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.catt .cimg img{width:100%;height:100%;object-fit:cover;display:block}
.cmt .reply{margin:8px 0 0 12px;padding:8px 10px;border-left:2px solid var(--line);font-size:13.5px}
.cmt .reply .who{font-weight:700}
.cmt.scan .top .who{color:var(--info)}
.cmt .num{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cmt.scan .num{background:var(--info)} .cmt.resolved .num{background:var(--ok)}
.sect{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:16px 0 8px}
.sect:first-child{margin-top:0}

/* scan tab */
.verdict{padding:14px;border-radius:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:6px}
.verdict.ready{background:var(--ok-bg);color:var(--ok)} .verdict.minor_fixes{background:var(--warn-bg);color:var(--warn)} .verdict.hold{background:var(--alert-bg);color:var(--alert)} .verdict.running,.verdict.queued{background:var(--sunk);color:var(--ink-2)} .verdict.error{background:var(--alert-bg);color:var(--alert)}
.verdict .h{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.verdict .s{color:var(--ink);font-size:14px;line-height:1.5}
.verdict .counts{display:flex;gap:10px;font-size:12.5px;font-weight:700}
.finding{padding:10px 12px;border:1px solid var(--line);border-left-width:4px;border-radius:9px;margin-bottom:8px;background:var(--surface)}
.finding.high{border-left-color:var(--alert)} .finding.medium{border-left-color:var(--warn)} .finding.low{border-left-color:var(--ink-3)}
.finding .top{display:flex;gap:8px;align-items:center;font-size:12px;margin-bottom:4px}
.finding .cat{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.finding.high .cat{color:var(--alert)} .finding.medium .cat{color:var(--warn)} .finding.low .cat{color:var(--ink-3)}
.finding .loc{color:var(--ink-3);margin-left:auto;text-align:right}
.finding .q{font-family:var(--display);font-style:italic;color:var(--ink-2);margin:4px 0;padding:4px 8px;border-left:2px solid var(--line);font-size:14px}
.finding .iss{font-size:14px}
.finding .sug{font-size:13.5px;color:var(--ok);margin-top:3px}
.finding .acts{display:flex;gap:10px;margin-top:6px}
.finding .acts button{background:none;border:0;padding:0;cursor:pointer;font-size:12.5px;color:var(--accent-ink);font-weight:600}
.finding.added{opacity:.55}
.finding.ignored{opacity:.5;border-left-color:var(--line)}
.finding .acts button.quiet{color:var(--ink-3);font-weight:500;margin-left:auto}
.brief-row{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px;align-items:start}
.brief-row .st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;margin-top:2px}
.st.met{background:var(--ok-bg);color:var(--ok)} .st.partial{background:var(--warn-bg);color:var(--warn)} .st.missing{background:var(--alert-bg);color:var(--alert)} .st.unclear{background:var(--sunk);color:var(--ink-3)}
.st.addressed{background:var(--ok-bg);color:var(--ok)} .st.not_addressed{background:var(--alert-bg);color:var(--alert)}
.linkchk{display:flex;gap:8px;align-items:center;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line-2)}
.linkchk .u{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkchk .s{font-weight:700} .linkchk.ok .s{color:var(--ok)} .linkchk.bad .s{color:var(--alert)}
.briefbox{white-space:pre-wrap;font-size:14px;line-height:1.55;background:var(--sunk);padding:12px;border-radius:9px;max-height:50vh;overflow:auto}
.rounds .r{padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.rounds .r.cur{border-color:var(--accent)}
.rounds .r .h{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px}
.kv .k{color:var(--ink-3)}

/* login */
.scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(4px)}
.login{width:420px;background:var(--surface);border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.login .login-logo{height:24px;width:auto;display:block}
:root[data-theme="dark"] .login .login-logo{filter:brightness(0) invert(1)}
.login .sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:10px 0 22px}
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.who{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface)}
.who:hover{border-color:var(--ink-3)}
.who.active{border-color:var(--accent);background:var(--accent-bg)}
.who .n{font-size:14px;line-height:1.1}
.who .r{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.err{color:var(--alert);font-size:13.5px;margin-top:8px}

/* toast + modal */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#FBF6EE;padding:11px 16px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transition:opacity .2s,transform .2s;z-index:60;pointer-events:none;font-size:14px}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{width:560px;max-width:calc(100vw - 32px);background:var(--surface);border-radius:18px;padding:26px 28px;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.modal.sheet{width:460px;padding:14px 14px 18px}
.sheet-handle{display:none;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.sheet-title{font-size:16px!important;font-family:var(--font)!important;font-weight:700;margin:4px 6px 12px!important}
.agroup{background:var(--sunk);border-radius:14px;overflow:hidden;margin-bottom:10px}
.agroup:empty{display:none}
.arow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;min-height:50px;background:none;border:0;border-bottom:1px solid var(--line-2);cursor:pointer;color:inherit;text-decoration:none;font:inherit;font-size:15px}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--line-2)}
.arow .ico{width:20px;height:20px;color:var(--accent-ink)}
.arow .al{flex:1;min-width:0;display:flex;flex-direction:column}
.arow .at{font-weight:600}
.arow .as{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow.danger{color:var(--alert)}.arow.danger .ico{color:var(--alert)}
.modal h2{font-family:var(--display);font-size:22px;margin-bottom:14px}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.note{padding:10px 12px;border-radius:9px;background:var(--info-bg);color:var(--info);font-size:13.5px;margin-bottom:14px}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.setup{display:flex;flex-direction:column;gap:8px;font-size:14px}
.setup .k{display:flex;align-items:center;gap:8px}
.setup .k .dot{width:9px;height:9px}
.setup .ok{color:var(--ok)} .setup .no{color:var(--alert)}
kbd{font-family:var(--font);font-size:11.5px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--sunk)}

@media (hover:none) and (pointer:coarse){ .pin{width:34px;height:34px;margin:-17px 0 0 -17px} .pin span{font-size:13px} .tile .x{opacity:1} }

@media (max-width:980px){
  html{font-size:17px;overflow-x:hidden}
  body{font-size:16.5px;overflow-x:hidden}
  .seg button{font-size:12.5px;padding:8px 2px}
  .seg{overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
  .cmt .txt,.finding .iss,.finding .q,.verdict .s,.briefbox,.logrow .t{overflow-wrap:anywhere}
  .mobile-only{display:initial}.desktop-only{display:none}
  #app{grid-template-columns:1fr;min-height:100vh}
  /* top strip + bottom tab bar */
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;align-items:stretch;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--rail) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--rail-line);z-index:30}
  .brand,.rail .spacer,.userchip{display:none}
  .nav{flex-direction:row;margin:0;gap:0;flex:1}
  .nav a{flex:1;flex-direction:column;gap:3px;padding:6px 2px 4px;font-size:11px;letter-spacing:.02em;border-radius:12px;min-height:50px;justify-content:center;position:relative}
  .nav a .ico{width:22px;height:22px}
  .nav a.active{background:transparent;color:var(--rail-ink)}
  .nav a .count{position:absolute;top:2px;right:calc(50% - 22px);margin:0;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 5px;font-size:11px}
  main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body.on-item main{padding-bottom:0}
  body.on-item .rail{display:none}
  .page{padding:18px 16px 40px;max-width:100%;overflow-x:hidden}
  .page::before{content:"";display:block;height:0}
  .page-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
  .page-head h1{font-size:30px}
  .page-head .btn{display:none}
  .submit .row{flex-direction:column;gap:0}
  .submit .field .hint{display:block;margin-top:2px}
  .dam-foot{flex-direction:column;align-items:stretch}
  .dam-foot .btn{min-height:44px;justify-content:center}
  .page-head .lede{font-size:15px}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:14px}.stat .n{font-size:28px}
  .qtools{flex-wrap:wrap}.qtools .search{max-width:none;flex:1 1 100%;order:3;min-height:44px}
  .qrow{grid-template-columns:1fr;gap:10px;padding:16px;min-height:44px}
  .qrow .client{font-size:22px}
  .qrow .votes{order:2;flex-direction:row;align-items:center;gap:10px;justify-content:flex-start}.qrow .pill{justify-self:start}
  .pill{font-size:12.5px;padding:5px 10px}
  .chips .chip{min-height:40px}
  .input,textarea.input,select.input{min-height:46px;font-size:16px;border-radius:12px}
  .btn{min-height:44px;border-radius:12px}
  .btn.sm{min-height:38px}

  /* item: document fills the screen, sheet rises from the bottom */
  .item{height:auto;min-height:100vh}
  .itembar{padding:10px 10px 10px 4px;gap:8px;flex-wrap:nowrap;align-items:flex-start}
  .itembar .ttl{flex:1 1 auto}
  .itembar .ttl .c{font-size:19px;white-space:normal}
  .itembar .ttl .t{white-space:normal;font-size:13px}
  .itembar .cluster{order:5;flex-basis:100%;padding-left:44px;margin-top:-4px}
  .itembar{flex-wrap:wrap}
  .itembar .actions{margin-left:0}
  .itembar .actions .btn.primary{display:none}
  .review{display:block}
  .viewer{min-height:0;max-height:none;overflow:visible;padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .viewer-tools{position:static;padding:8px 12px}
  .viewer-tools .hint{display:none}
  .pages{padding:12px 10px 20px;gap:18px}.pages.compare{grid-template-columns:1fr}
  .linkframe{height:calc(100vh - 260px)}
  .pagewrap .pno{top:-20px}
  .side{position:fixed;left:0;right:0;bottom:0;z-index:40;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(14,40,65,.18);display:flex;flex-direction:column;max-height:88vh;background:var(--surface);transition:transform .25s ease}
  .side .seg-wrap{padding:10px 12px 8px;border-bottom:0}
  .side .tabpane{display:none;overflow:auto;padding:4px 14px 14px;border-top:1px solid var(--line-2);flex:1;min-height:0}
  .side.open .tabpane{display:block;height:60vh}
  .side.open .sheet-close{display:inline-flex}
  .side .votebar{border-top:1px solid var(--line);padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px))}
  .votebar .who{justify-content:space-between}
  .votebar .acts .btn{min-height:52px;font-size:16px}
  .composer{width:min(320px,calc(100vw - 32px))}
  .copydeck{padding:24px 20px 24px 36px}
  .copydeck p .pnum{left:-26px}

  /* sheets & modals bottom-anchored */
  .scrim{align-items:flex-end}
  .modal{width:100%;max-width:100%;border-radius:18px 18px 0 0;max-height:92vh;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .modal.sheet{width:100%}
  .sheet-handle{display:block}
  #login.scrim{align-items:center}
  .login{width:calc(100vw - 32px);padding:24px;border-radius:18px}
  .who{min-height:56px}
  .submitbar{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .dam{min-height:160px}
  .dam-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .form-grid{grid-template-columns:1fr}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);text-align:center}
  body.on-item #toast{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Pipeline QA: stages, checklists, comment votes, team ---------- */
.stats{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){.stats{grid-template-columns:repeat(3,1fr)}} @media (max-width:420px){.stats{grid-template-columns:repeat(2,1fr)}}
.pill.stage-qa{background:var(--warn-bg);color:var(--warn)} .pill.stage-tribunal{background:var(--info-bg);color:var(--info)} .pill.stage-cleared{background:var(--ok-bg);color:var(--ok)} .pill.stage-archived{background:var(--sunk);color:var(--ink-3)}
.avgs{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:-8px 0 18px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:13.5px;color:var(--ink-2)}
.avgs .k{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.avgs b{font-family:var(--display);font-size:18px;color:var(--ink);margin-right:4px}
.prio{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;margin-right:7px;vertical-align:middle;font-family:var(--body)}
.stagestrip{display:inline-flex;align-items:center;gap:0;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.stagestrip span{padding:4px 10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-3);position:relative}
.stagestrip span:first-child{border-radius:999px 0 0 999px} .stagestrip span:last-child{border-radius:0 999px 999px 0}
.stagestrip span+span{margin-left:-1px}
.stagestrip span.done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bg)}
.stagestrip span.cur{background:var(--navy);color:#FBF6EE;border-color:var(--navy);z-index:1}
.stagestrip span.skip{text-decoration:line-through;opacity:.7}
.qaopts{margin-top:10px;padding:14px 16px;background:var(--sunk);border-radius:var(--radius)}
.kinds.tight{display:flex;flex-wrap:wrap;gap:6px} .kinds.tight .kinds .kind{padding:7px 12px;flex:none} .kinds.tight .kinds .kind .kt{font-size:13px}
.people{display:flex;flex-wrap:wrap;gap:6px}
.person{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;opacity:.7}
.person.on{border-color:var(--navy);background:var(--navy);color:#FBF6EE;opacity:1}
.people.sm .person{padding:2px 8px 2px 2px;font-size:12px} .people.sm .avatar.sm{width:20px;height:20px;font-size:9px}
.qsec{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700;margin:14px 0 6px}
.qitem{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;display:flex;flex-direction:column;gap:8px}
.qitem.pass{border-color:var(--ok-bg)} .qitem.fail{border-color:var(--alert)} .qitem.small{padding:8px 10px;gap:4px}
.qitem .qtext{font-size:14px;line-height:1.4}
.qans{display:flex;gap:6px}
.qans button{flex:1;padding:8px 6px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.qans button.on:nth-child(1){background:var(--ok);border-color:var(--ok);color:#fff}
.qans button.on:nth-child(2){background:var(--alert);border-color:var(--alert);color:#fff}
.qans button.on:nth-child(3){background:var(--ink-3);border-color:var(--ink-3);color:#fff}
.qmark{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.qmark.pass{color:var(--ok)} .qmark.fail{color:var(--alert)}
.qfail{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.qfail.ok{color:var(--ok)} .qfail .ico{width:14px;height:14px}
.qnote{font-size:13px}
.qother{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;padding:0 10px}
.qother summary{display:flex;align-items:center;gap:8px;padding:10px 0;cursor:pointer;list-style:none} .qother summary::-webkit-details-marker{display:none}
.qother summary .n{font-weight:700}
.qother .qitem{margin:0 0 8px;border:0;background:var(--sunk)}
.ctags{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 6px}
.tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--ink-2)}
.tag.req{background:var(--accent);color:#fff} .tag.cl{background:var(--alert-bg);color:var(--alert);text-transform:none;letter-spacing:0}
.cmt.required{border-left:3px solid var(--accent)}
.cmt.st-addressed{border-left:3px solid var(--warn)}
.cmt.st-declined{opacity:.6}
.cstate{font-size:12.5px;color:var(--warn);margin:4px 0 2px} .cstate.ok{color:var(--ok)}
.cvote{display:inline-flex;align-items:center;gap:2px;margin-right:6px}
.cvote button{padding:0 6px;font-size:11px;line-height:20px;border-radius:6px}
.cvote button.on{background:var(--navy);color:#FBF6EE}
.cvote b{min-width:22px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums} .cvote b.hot{color:var(--accent)}
.cmt .ft button.strong{background:var(--ok);color:#fff;border-color:var(--ok)}
.cmt .ft button.quiet{opacity:.65}
.pin.required{background:var(--accent);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.settings-seg{margin:-6px 0 18px;max-width:560px}
.people-list{display:flex;flex-direction:column}
.prow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.prow.off{opacity:.55}
.prow .pinfo{flex:1;min-width:180px} .prow .pname{font-weight:700;font-size:14.5px}
.pacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tog{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-2);cursor:pointer;padding:4px 8px;border-radius:999px;background:var(--sunk)}
.tog input{margin:0}
.addperson{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .addperson h3{font-family:var(--display);font-weight:500;font-size:18px;margin:0 0 8px}
.temppw{font-family:ui-monospace,Menlo,monospace;font-size:26px;letter-spacing:.04em;padding:16px;text-align:center;background:var(--sunk);border-radius:12px;margin-bottom:14px;user-select:all}
.cl-list .clrow{padding:8px 0;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:6px}
.clrow .cltext{font-size:14px}
.clmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.clmeta .x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:14px}
.sel.sm{font-size:12.5px;padding:4px 8px}
.input.sm{padding:6px 10px;font-size:13px}
@media (max-width:760px){.cluster .stagestrip{display:none}.prow .pacts{width:100%}}

.qaprog{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0 8px}
.qaprog .vavs{display:flex;gap:4px;flex-wrap:wrap}
.qaprog .vav .avatar.sm{width:26px;height:26px;font-size:10px}

.chips{display:flex;flex-wrap:wrap;gap:4px}
.chipt{font:inherit;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-3);cursor:pointer}
.chipt.on{background:var(--accent);border-color:var(--accent);color:#fff}
.clmeta{flex-direction:column;align-items:flex-start;gap:6px}
.clmeta .x{position:absolute;right:0;top:8px}
.cl-list .clrow{position:relative;padding-right:28px}

/* ---------- hours slider ---------- */
.hsl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.hsl-val{font-size:15px} .hsl-val b{font-family:var(--display);font-size:22px;font-weight:500;margin-right:6px}
.zone{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px}
.zone.green{background:var(--ok-bg);color:var(--ok)} .zone.yellow{background:var(--warn-bg);color:var(--warn)} .zone.red{background:var(--alert-bg);color:var(--alert)}
.hsl-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:0;margin:6px 0 2px;
  background:linear-gradient(90deg,#d9534f 0%,#d9534f 25%,#e3b341 25%,#e3b341 50%,#3f8f5f 50%,#3f8f5f 100%)}
.hsl-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:var(--shadow-sm);cursor:pointer}
.hsl-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--navy);cursor:pointer}
.hsl[data-zone=red] .hsl-range::-webkit-slider-thumb{border-color:#d9534f} .hsl[data-zone=yellow] .hsl-range::-webkit-slider-thumb{border-color:#c9951f} .hsl[data-zone=green] .hsl-range::-webkit-slider-thumb{border-color:#3f8f5f}
.hsl-marks{position:relative;height:16px;font-size:11px;color:var(--ink-3);margin:0 13px}
.hsl-marks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.hsl-marks span:first-child{transform:none} .hsl-marks span:last-child{transform:translateX(-100%)}
.hsl-zones{display:flex;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-top:2px}
.hsl-zones .z{flex:1;text-align:center} .hsl-zones .z.red{color:#c9433f;flex:1} .hsl-zones .z.yellow{color:#b8860b;flex:1} .hsl-zones .z.green{color:var(--ok);flex:2}
.hsl-dt{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap} .hsl-dt .input{max-width:260px}
/* owners per discipline */
.owners{display:flex;flex-direction:column;gap:6px}
.orow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.orow .oname{font-weight:700;font-size:13.5px;min-width:130px}
.orow .ochips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.person.add{opacity:1;color:var(--accent);border-style:dashed;padding:4px 10px}
.orow .opick{width:100%;padding-top:6px;border-top:1px dashed var(--line);margin-top:4px}
/* checklist editor */
.gedit{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.gitems{display:flex;flex-direction:column;gap:6px}
.gitem{display:flex;align-items:center;gap:8px} .gitem .gn{width:20px;font-size:12px;color:var(--ink-3);text-align:right} .gitem .input{flex:1} .gitem .x{background:none;border:0;cursor:pointer;color:var(--ink-3)}
.tmatrix{display:flex;flex-direction:column;gap:8px}
.trow{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.trow .tname{width:190px;flex:none} .trow .tchecks{display:flex;flex-wrap:wrap;gap:5px;flex:1}
.trow .x{background:none;border:0;cursor:pointer;color:var(--ink-3);padding:6px}
.tog.on{background:var(--navy);color:#FBF6EE}
@media (max-width:980px){.cl-grid{grid-template-columns:1fr}.trow{flex-wrap:wrap}.trow .tname{width:100%}}
.cl-grid{grid-template-columns:1fr 1fr}
.trow{flex-direction:column;gap:6px} .trow .tname{width:100%;display:flex;gap:8px;align-items:center} .trow .tname .input{max-width:320px}
.trow .x{position:absolute;right:0;top:8px} .trow{position:relative;padding-right:30px}
.tog{font-size:12px;padding:3px 8px}

/* ---------- comment voting ---------- */
.cm-head{display:flex;gap:8px;align-items:center;margin-bottom:12px} .cm-head .muted{flex:1} .cm-head #dlc{padding:6px 8px}
.cvote{display:inline-flex;gap:4px;margin-right:6px}
.cvote button{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-3);font:inherit;font-size:12px;cursor:pointer;line-height:1}
.cvote button .ico{width:15px;height:15px} .cvote button b{font-size:12px;font-variant-numeric:tabular-nums}
.cvote button.on.for{background:var(--ok);border-color:var(--ok);color:#fff} .cvote button.on.neutral{background:var(--ink-3);border-color:var(--ink-3);color:#fff} .cvote button.on.against{background:var(--alert);border-color:var(--alert);color:#fff}
.cvote button:active{transform:scale(.92)}
.cvote.sm button{padding:3px 7px} .cvote.sm button .ico{width:13px;height:13px}
.verdict{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;margin-right:auto}
.verdict.ok{background:var(--ok-bg);color:var(--ok)} .verdict.bad{background:var(--alert-bg);color:var(--alert)}
.cmt.contested{border-left:3px solid var(--alert)} .cmt.agreed{border-left:3px solid var(--ok-bg)}
.cmt .ft{flex-wrap:wrap;align-items:center}
.cmt .reply{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;background:var(--sunk);border-radius:10px}
.cmt .reply .rb{flex:1;min-width:0} .cmt .reply .rt{font-size:13.5px;margin:2px 0 6px} .cmt .reply .ft{margin:0;padding:0;border:0}
.cmt .rbox{margin-top:8px;padding:8px;background:var(--sunk);border-radius:10px}
.cstate.bad{color:var(--alert)} .cstate .ico{width:13px;height:13px;vertical-align:-2px}
.pin.contested{background:var(--alert)}
@media (max-width:760px){.cvote button{padding:8px 11px} .cvote button .ico{width:18px;height:18px}}

/* ---------- queue: progress bar and two bubble rows ---------- */
.qrow{position:relative;overflow:hidden}
.pbar{position:absolute;left:0;right:0;top:0;height:5px;display:flex;gap:2px;background:var(--sunk)}
.pbar .pseg{flex:1;position:relative;background:var(--line)} .pbar .pseg.cleared{flex:.5}
.pbar .pseg i{display:block;height:100%;background:var(--navy);transition:width .3s}
.pbar .pseg.tribunal i{background:var(--accent)} .pbar .pseg.cleared i{background:var(--ok)}
.pbar .pseg.cur{box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.pbar.over .pseg.cur i{background:var(--alert)}
.pbar.changes .pseg.cur{background:repeating-linear-gradient(45deg,var(--alert-bg),var(--alert-bg) 4px,#fff 4px,#fff 8px)}
.qrow .votes{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.vrow2{display:flex;align-items:center;gap:8px;opacity:.55} .vrow2.cur{opacity:1}
.vrow2 .vl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);width:54px;text-align:right}
.vrow2 .vavs{display:flex}
@media (max-width:760px){.vrow2 .vl{width:auto}}
@media (max-width:760px){.qrow .votes{flex-direction:column;align-items:flex-start;gap:4px}.vrow2 .vl{width:54px;text-align:left}}
.qrow{padding-top:20px}

/* ---------- urgency ---------- */
.pill.clock{font-size:13px;padding:6px 12px} .pill.clock b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:700;letter-spacing:.02em}
.pill.clock.warn{background:#f3c04b;color:#3a2a00}
.pill.clock.over{background:var(--alert);color:#fff}
.qrow.due-warn{background:#fff7dc;border-color:#e9c45c} .qrow.due-warn .pbar{background:#f1e2a8}
.qrow.due-over{background:#fbe3e0;border-color:var(--alert)} .qrow.due-over .client{color:var(--alert)} .qrow.due-over .pbar{background:#f0b9b3}
.qrow.due-over .pill.round{background:var(--alert)}
.itembar.due-warn{background:#fff7dc;border-bottom-color:#e9c45c} .itembar.due-over{background:#fbe3e0;border-bottom-color:var(--alert)}
.itembar.due-over .ttl .c{color:var(--alert)}

/* ---------- on the clock ---------- */
.onclock{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 6px;padding:8px 12px;border-radius:12px;background:var(--navy);color:#FBF6EE;font-weight:700;font-size:13.5px;letter-spacing:.02em}
.onclock .pill.clock{background:rgba(255,255,255,.14);color:#fff;font-size:15px;padding:6px 14px} .onclock .pill.clock b{font-size:18px}
.onclock .what{font-weight:400;opacity:.85}
.onclock.warn{background:#c9951f;color:#1b1400} .onclock.warn .pill.clock{background:rgba(0,0,0,.14);color:#1b1400}
.onclock.over{background:var(--alert);color:#fff;animation:pulse 1.6s ease-in-out infinite} .onclock.over .pill.clock{background:rgba(255,255,255,.18);color:#fff}
.onclock.bar{margin:0;border-radius:0;justify-content:center;padding:10px 16px}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
.pillcol{display:flex;flex-direction:column;gap:4px;align-items:flex-end}


/* ---------- quiet, Apple-like surfaces: white cards, hairlines, one accent, color only where it means something ---------- */
body{font-size:15px;letter-spacing:-.005em}
.page-head h1{font-size:36px;font-weight:700;letter-spacing:-.03em}
.page-head .lede{color:var(--ink-3);font-size:16px}
.btn{border-radius:12px;border-color:transparent;background:var(--sunk);font-weight:600;box-shadow:none}
.btn:hover{background:#e8e8ed}
.btn.primary{background:var(--accent);color:#fff;border-radius:980px;padding:10px 18px}
.btn.primary:hover{background:var(--accent-ink)}
.btn.ok{background:var(--ok);color:#fff;border-color:transparent} .btn.danger{background:var(--alert-bg);color:var(--alert)} .btn.danger-solid{background:var(--alert);color:#fff}
.btn.pill-btn{border-radius:980px}
.btn.ghost{background:transparent} .btn.ghost:hover{background:var(--sunk)}
.input,textarea.input,select.input,.sel{border:1px solid rgba(0,0,0,.12);border-radius:12px;background:var(--surface)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,113,227,.18)}
.stat{border:0;box-shadow:var(--shadow-sm);border-radius:16px;padding:16px 18px}
.stat:hover{transform:none;box-shadow:var(--shadow)} .stat.active{box-shadow:inset 0 0 0 2px var(--ink),var(--shadow-sm)}
.stat .n{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.03em}
.stat.hot{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-sm)} .stat.hot .n{color:var(--accent)}
.stat.over{background:var(--surface);box-shadow:inset 0 0 0 2px var(--alert),var(--shadow-sm)} .stat.over .n{color:var(--alert)}
.avgs{border:0;box-shadow:var(--shadow-sm);border-radius:14px} .avgs b{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.qtitle{font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0;text-transform:none}
.input.search{border-radius:980px;background:var(--sunk);border-color:transparent}
.qrow{border:0;box-shadow:var(--shadow-sm);border-radius:18px;padding:22px 22px 20px;gap:20px}
.qrow:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.qrow .client{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.qrow .title{color:var(--ink-3);font-size:14.5px}
.qrow .meta{font-size:13px;color:var(--ink-3);gap:8px;margin-top:10px}
.qrow .meta .pill{font-size:12px}
.qrow.needs{box-shadow:var(--shadow-sm)}
.qrow.due-warn,.qrow.due-over{background:var(--surface);border-color:transparent} .qrow.due-over .client{color:var(--ink)} .qrow.due-over .pill.round{background:var(--navy)}
.qrow.due-over .pbar,.qrow.due-warn .pbar{background:var(--sunk)}
.pbar{height:4px;background:var(--sunk);gap:3px;left:22px;right:22px;top:0;border-radius:0 0 4px 4px;overflow:hidden}
.pbar .pseg{background:transparent} .pbar .pseg i{background:var(--ink);border-radius:2px} .pbar .pseg.tribunal i{background:#5e5ce6} .pbar .pseg.cleared i{background:var(--ok)}
.pbar .pseg.cur{box-shadow:none} .pbar.over .pseg.cur i{background:var(--alert)} .pbar.changes .pseg.cur{background:repeating-linear-gradient(45deg,var(--alert-bg),var(--alert-bg) 3px,transparent 3px,transparent 6px)}
.pill.round{background:var(--navy);color:#fff} .pill.kind{background:var(--sunk);color:var(--ink-2)}
.pill.stage-qa{background:#fff3e0;color:#b25000} .pill.stage-tribunal{background:#efeefc;color:#4b48c9} .pill.stage-cleared{background:var(--ok-bg);color:var(--ok)}
.pill.clock{background:var(--sunk);color:var(--ink);font-weight:600;padding:5px 12px}
.pill.clock b{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-weight:600;font-size:14px;letter-spacing:0;font-variant-numeric:tabular-nums}
.pill.clock.warn{background:#ff9f0a;color:#1d1d1f} .pill.clock.over{background:var(--alert);color:#fff}
.onclock{background:var(--sunk);color:var(--ink);font-weight:600;font-size:14px;letter-spacing:-.01em;border-radius:14px;padding:10px 14px;margin:0 0 10px;animation:none}
.onclock .what{color:var(--ink-3);font-weight:500}
.onclock .pill.clock{background:var(--ink);color:#fff;font-size:14px} .onclock .pill.clock b{font-size:18px}
.onclock.warn{background:#fff3e0;color:#1d1d1f} .onclock.warn .pill.clock{background:#ff9f0a;color:#1d1d1f} .onclock.warn .what{color:#b25000}
.onclock.over{background:var(--alert-bg);color:#1d1d1f;animation:none} .onclock.over .pill.clock{background:var(--alert);color:#fff} .onclock.over .what{color:var(--alert)}
.onclock.bar{border-radius:0;margin:0}
.itembar.due-warn,.itembar.due-over{background:var(--surface);border-bottom-color:var(--line)} .itembar.due-over .ttl .c{color:var(--ink)}
.vrow2 .vl{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--ink-3)}
.vline{font-size:12.5px;color:var(--ink-3)}
.vav{box-shadow:0 0 0 2px var(--surface)} .vav.ok{box-shadow:0 0 0 2.5px var(--ok)} .vav.changes{box-shadow:0 0 0 2.5px var(--alert)} .vav.ghost{opacity:.4;box-shadow:0 0 0 2px var(--line)}
.rail{padding:22px 14px;border-right:1px solid var(--rail-line)}
.brand{border-bottom:0;padding-bottom:10px}
.nav a{color:var(--rail-dim);font-weight:500;border-radius:12px;padding:9px 12px}
.nav a.active{background:var(--rail-2);color:var(--rail-ink);font-weight:600}
.nav a .count{background:var(--accent);color:#fff}
.userchip{border:0;background:var(--surface);box-shadow:var(--shadow-sm);border-radius:14px}
.userchip .role{color:var(--rail-dim);text-transform:none;letter-spacing:0;font-size:12px}
.userchip button{color:var(--accent)}
.seg{background:var(--sunk);border-radius:12px;padding:3px} .seg button{font-weight:600;color:var(--ink-2)} .seg button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.seg button .b{background:var(--ink);color:#fff} .seg button .b.alert{background:var(--alert)}
.itembar{border-bottom:1px solid var(--line)}
.itembar .ttl .c{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.stagestrip span{border-color:transparent;background:var(--sunk);color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;padding:5px 11px}
.stagestrip span.cur{background:var(--ink);color:#fff} .stagestrip span.done{background:var(--ok-bg);color:var(--ok)}
.votebar{background:var(--surface);border-top:1px solid var(--line)}
.votes-card{border:0;box-shadow:var(--shadow-sm);border-radius:14px;overflow:hidden}
.vsum{color:var(--ink-3);font-size:13px}
.card.panel h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:20px}
.cmt{border:0;box-shadow:var(--shadow-sm);border-radius:14px}
.cmt.contested{border-left:0;box-shadow:inset 3px 0 0 var(--alert),var(--shadow-sm)} .cmt.agreed{border-left:0}
.cmt .num,.pin{background:var(--accent)} .pin.contested{background:var(--alert)}
.cvote button{border-color:transparent;background:var(--sunk);color:var(--ink-2)}
.cvote button.on.for{background:var(--ok)} .cvote button.on.neutral{background:#8e8e93} .cvote button.on.against{background:var(--alert)}
.verdict{text-transform:none;letter-spacing:0;font-size:12px}
.tag{text-transform:none;letter-spacing:0;font-weight:600} .tag.cl{background:var(--alert-bg);color:var(--alert)}
.qitem{border:0;box-shadow:var(--shadow-sm);border-radius:14px} .qitem.fail{box-shadow:inset 0 0 0 1.5px var(--alert),var(--shadow-sm)} .qitem.pass{box-shadow:inset 0 0 0 1.5px var(--ok-bg),var(--shadow-sm)}
.qans button{border-color:transparent;background:var(--sunk);font-weight:600}
.qsec{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ink-3)}
.qmark{text-transform:none;letter-spacing:0}
.kinds .kind{border-radius:12px;border-color:transparent;background:var(--sunk)} .kinds .kind.active{background:var(--ink);color:#fff;border-color:var(--ink)} .kinds .kind.active .ks{color:rgba(255,255,255,.7)}
.kinds.tight .kinds .kind.active{background:var(--ink);color:#fff}
.person{border-color:transparent;background:var(--sunk);opacity:.8} .person.on{background:var(--ink);color:#fff;opacity:1}
.person.add{background:transparent;border:1px dashed rgba(0,0,0,.2);color:var(--accent)}
.orow{border:0;box-shadow:var(--shadow-sm);border-radius:14px}
.qaopts{background:var(--sunk);border-radius:16px}
.hsl-range{background:linear-gradient(90deg,#ff3b30 0%,#ff3b30 25%,#ff9f0a 25%,#ff9f0a 50%,#34c759 50%,#34c759 100%)}
.hsl-range::-webkit-slider-thumb{border:0;box-shadow:0 1px 4px rgba(0,0,0,.25);width:28px;height:28px}
.hsl-zones{text-transform:none;letter-spacing:0;font-weight:600} .hsl-zones .z.red{color:#ff3b30} .hsl-zones .z.yellow{color:#b25000} .hsl-zones .z.green{color:var(--ok)}
.zone{text-transform:none;letter-spacing:0}
.hsl-val b{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.tog{background:var(--sunk)} .tog.on{background:var(--ink);color:#fff}
.prow{border-bottom:1px solid var(--line-2)}
.dam{border:1.5px dashed rgba(0,0,0,.15);border-radius:18px;background:var(--surface)}
.note{border-radius:12px} .note.warn{background:#fff3e0;color:#b25000}
.login{border-radius:22px;box-shadow:var(--shadow)}
.who{border-radius:12px} .who.active{box-shadow:inset 0 0 0 2px var(--accent)}
.modal{border-radius:22px;box-shadow:var(--shadow)}
#toast{border-radius:980px;background:var(--ink);color:#fff;font-weight:600}
.prio{background:var(--accent)}
.linkcard,.pagewrap{border-radius:12px}


/* ---------- Pipeline palette on the quiet system; compact clock; bigger bubbles; slimmer rail ---------- */
.page-head h1{font-family:var(--display);font-weight:500;letter-spacing:-.01em;font-size:34px}
.stat .n,.avgs b,.hsl-val b,.card.panel h2,.itembar .ttl .c,.qrow .client{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.qrow .client{font-size:22px}
.btn.primary{background:var(--navy);color:#FBF6EE} .btn.primary:hover{background:var(--rail-2)}
.btn.ok{background:var(--ok)} .nav a .count{background:var(--accent)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(184,118,62,.18)}
.stat.hot{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-sm)} .stat.hot .n{color:var(--accent)}
.stat.active{box-shadow:inset 0 0 0 2px var(--navy),var(--shadow-sm)}
.pbar .pseg i{background:var(--navy)} .pbar .pseg.tribunal i{background:var(--accent)}
.pill.stage-tribunal{background:var(--accent-bg);color:var(--accent-ink)}
.cmt .num,.pin,.prio{background:var(--accent)} .seg button .b{background:var(--navy)}
.who.active{box-shadow:inset 0 0 0 2px var(--accent)}
/* rail: navy, slim */
.rail{padding:18px 10px;border-right:0}
.brand{padding:4px 8px 14px}
.nav a{padding:8px 10px;font-size:14.5px;border-radius:10px}
.nav a.active{background:var(--rail-2);color:var(--rail-ink)}
.userchip{background:var(--rail-2);box-shadow:none;border-radius:12px;padding:8px}
.userchip .name{font-size:13px} .userchip .role{color:var(--rail-dim);font-size:11.5px} .userchip button{color:var(--rail-dim);font-size:12px}
/* clock: compact readout, no strip */
.onclock{display:none}
.qrow{grid-template-columns:1fr auto auto;padding:18px 20px 16px;gap:18px}
.qrow .clockcol{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:150px}
.qrow .clockcol .lbl{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.qrow .clockcol .lbl.mine{color:var(--accent)}
.qrow .clockcol .lbl.over{color:var(--alert)} .qrow .clockcol .lbl.warn{color:var(--warn)}
.pill.clock{background:transparent;padding:0;color:var(--ink);font-size:13px}
.pill.clock b{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:19px;font-weight:600;letter-spacing:-.01em}
.pill.clock.warn{background:transparent;color:var(--warn)} .pill.clock.over{background:transparent;color:var(--alert)}
.qrow .meta .pill.clock{display:none}
.itembar .cluster .pill.clock{background:var(--sunk);padding:5px 12px;color:var(--ink)} .itembar .cluster .pill.clock b{font-size:15px}
.itembar .cluster .pill.clock.warn{background:var(--warn-bg);color:var(--warn)} .itembar .cluster .pill.clock.over{background:var(--alert-bg);color:var(--alert)}
.onclock.bar{display:flex;background:var(--surface);border-bottom:1px solid var(--line);padding:6px 16px;font-size:13px;color:var(--ink-2);gap:10px}
.onclock.bar .pill.clock{background:transparent;color:var(--ink)} .onclock.bar .pill.clock b{font-size:16px}
.onclock.bar.warn{background:var(--warn-bg);color:var(--warn)} .onclock.bar.warn .pill.clock{color:var(--warn)}
.onclock.bar.over{background:var(--alert-bg);color:var(--alert)} .onclock.bar.over .pill.clock{color:var(--alert)}
/* bubbles: a notch bigger, clearer states */
.qrow .vrow2{gap:10px;opacity:1}
.qrow .vrow2 .vl{width:58px;font-size:12px}
.qrow .vav .avatar.sm{width:30px;height:30px;font-size:11.5px}
.qrow .vav{padding:2px;margin-left:-7px;background:var(--surface)}
.qrow .vav.ok{box-shadow:0 0 0 2.5px var(--ok)} .qrow .vav.changes{box-shadow:0 0 0 2.5px var(--alert)}
.qrow .vav.ghost{opacity:1;box-shadow:0 0 0 2px var(--line)} .qrow .vav.ghost .avatar{filter:grayscale(1);opacity:.45}
.qrow .vrow2:not(.cur) .vl{color:var(--ink-3);opacity:.7}
.qrow .vline{margin-top:2px}
@media (max-width:760px){
  #app{grid-template-columns:1fr}
  .qrow{grid-template-columns:1fr;padding:16px}
  .qrow .clockcol{flex-direction:row;align-items:center;justify-content:space-between;min-width:0;width:100%;order:-1;padding-bottom:8px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
  .qrow .vav .avatar.sm{width:28px;height:28px}
}
@media (max-width:760px){
  .stats{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none;margin:0 -16px 14px;padding:2px 16px 6px} .stats::-webkit-scrollbar{display:none}
  .stat{flex:0 0 auto;min-width:118px;padding:12px 14px;border-radius:14px} .stat .n{font-size:26px} .stat .l{font-size:12.5px}
  .avgs{gap:10px 14px;padding:10px 14px;font-size:13px} .avgs b{font-size:16px}
  .onclock.bar{padding:6px 12px;font-size:13px;flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap;overflow:hidden} .onclock.bar .what{overflow:hidden;text-overflow:ellipsis;flex:1}
  .onclock.bar .pill.clock b{font-size:15px}
  .item .onclock.bar + .itembar .cluster .pill.clock{display:none}
  .page-head h1{font-size:30px}
}

.userchip .signout{background:transparent;border:0;color:var(--rail-dim);cursor:pointer;padding:6px;border-radius:8px;display:inline-flex;margin-left:auto} .userchip .signout:hover{background:rgba(255,255,255,.08);color:var(--rail-ink)} .userchip .signout .ico{width:16px;height:16px}
.userchip .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px} .userchip .role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.cvote button.against.on{background:var(--alert)}
.arow .as{white-space:normal}

/* changes queue, revisions */
.chcard{padding:4px 0}
.chhead{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--alert);margin-bottom:8px} .chcard.done .chhead{color:var(--ok)} .chhead .ico{width:16px;height:16px}
.chrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .chrow .vl{font-size:12px;font-weight:600;color:var(--ink-3)} .chrow .vavs{display:flex}
.stagestrip span.warn.cur{background:var(--alert);color:#fff} .stagestrip span.warn.done{background:var(--alert-bg);color:var(--alert)}
.revlist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.revrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;padding:8px 12px;border:0;border-radius:10px;background:var(--surface);box-shadow:var(--shadow-sm);font:inherit;cursor:pointer;color:inherit}
.revrow .rc{font-weight:700} .revrow .rt{color:var(--ink-3);font-size:13px;grid-column:1} .revrow .rs{grid-column:2;grid-row:1/3;align-self:center;font-size:12px;color:var(--ink-3)} .revrow .rs.ok{color:var(--ok);font-weight:600}
.revrow:hover{box-shadow:var(--shadow)}
.cmt.prev{opacity:.92} .cmt.prev .reply .rt{color:var(--ink-2)}

/* punch list: status-keyed left edge, no top bar; role line; turnaround strip */
.pbar{display:none}
.qrow{padding-top:18px}
.userchip .role{max-width:none;white-space:normal;line-height:1.25} .userchip .name{max-width:none;white-space:normal;line-height:1.2}
.avgs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.avgs .k{display:inline-flex;align-items:center;gap:8px}
.seg.mini{display:inline-flex;padding:2px;border-radius:9px} .seg.mini button{padding:4px 10px;font-size:12px;border-radius:7px}
.avgs.wide{flex-direction:column;align-items:stretch} .avgs.wide #avgbody{width:100%;overflow:auto}
.tt{width:100%;border-collapse:collapse;font-size:13px} .tt th{text-align:left;font-weight:600;color:var(--ink-3);padding:6px 8px;border-bottom:1px solid var(--line)} .tt td{padding:7px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap} .tt td:first-child{display:flex;align-items:center;gap:6px;font-weight:600} .tt td.slow{white-space:normal}

/* ---------- review screen: one sentence, one action, comments as the spine, the work as the hero ---------- */
.itembar{gap:14px;padding:10px 18px}
.itembar .state{flex:1;min-width:0;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.itembar .state .tm{font-weight:600;color:var(--ink)} .itembar .state .tm.warn{color:var(--warn)} .itembar .state .tm.over{color:var(--alert)}
.itembar .state .mine{color:var(--accent);font-weight:600}
.scanword{font:inherit;font-size:13px;border:0;background:transparent;color:var(--info);cursor:pointer;padding:0;font-weight:600}
.scanword.hold,.scanword.error{color:var(--alert)} .scanword.minor_fixes{color:var(--warn)} .scanword.ready{color:var(--ok)}
.onclock.bar{display:none}
.itembar .cluster{display:none}
.railhead{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.railhead .seg{flex:1}
.railicons{display:flex;gap:2px}
.railicons button{position:relative;width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.railicons button .ico{width:16px;height:16px}
.railicons button:hover{background:var(--sunk);color:var(--ink)} .railicons button.active{background:var(--navy);color:#fff}
.railicons button .b{position:absolute;top:-2px;right:-2px;min-width:15px;height:15px;font-size:10px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.railicons button .b.alert{background:var(--alert)}
.cm-head{gap:6px} .cm-head .muted{flex:1}
.cmt{padding:12px 14px}
.cmt .num{width:22px;height:22px;font-size:11.5px;background:var(--navy)} .cmt .num.ok{background:var(--ok)} .cmt .num.bad{background:var(--alert)}
.cmt .top .avatar{display:none}
.cmt .ft{display:none;margin-top:8px}
.cmt:hover .ft,.cmt.hot .ft,.cmt.open .ft,.cmt:focus-within .ft{display:flex}
.cmt .verdict{background:transparent;padding:0;color:var(--ink-3);font-weight:500;text-transform:none;font-size:12px} .cmt .verdict.bad{color:var(--alert)} .cmt .verdict.ok{color:var(--ok)}
.cmt.contested{box-shadow:var(--shadow-sm)} .cmt.agreed{box-shadow:var(--shadow-sm)}
.cmt.hot{background:var(--sunk);box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-sm)}
.cmt .reply .ft{display:flex} .cmt .reply{background:rgba(14,40,65,.04)}
.viewer{background:#F4F2EE}
.pagewrap{box-shadow:0 1px 2px rgba(14,40,65,.08),0 10px 30px rgba(14,40,65,.08);border-radius:4px}
.pno{opacity:.6;font-size:11px}
.viewer-tools{background:transparent;border-bottom:0;padding:8px 20px 0}
.pin{background:var(--navy)} .pin.contested{background:var(--alert)} .pin.hot{background:var(--accent)}
.review{grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:980px){.review{grid-template-columns:1fr}}
@media (max-width:760px){.itembar{flex-wrap:wrap}.itembar .state{order:5;flex:1 1 100%;font-size:12.5px;padding:2px 0 0 36px}.cmt .ft{display:flex}}
.seg.mini{flex:none}
/* edges: a short inset pill keyed to status. Inside the card, so the corner never clips it and every card matches */
.qrow,.qrow.needs,.qrow.st-qa,.qrow.st-tribunal,.qrow.st-changes,.qrow.st-cleared,.qrow.st-archived{border:0;box-shadow:var(--shadow-sm)}
.qrow{--edge:var(--line);position:relative;overflow:hidden;padding-left:30px}
.qrow::before{content:"";position:absolute;left:13px;top:18px;bottom:18px;width:4px;border-radius:4px;background:var(--edge)}
.qrow.st-qa{--edge:var(--navy)} .qrow.st-tribunal{--edge:var(--accent)} .qrow.st-changes{--edge:var(--alert)} .qrow.st-cleared{--edge:var(--ok)} .qrow.st-archived{--edge:var(--line)}
@media (max-width:760px){.qrow{padding-left:28px} .qrow::before{left:12px;top:16px;bottom:16px}}

/* assignments */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.pcard{padding:14px 16px}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:6px} .phead .pname{font-weight:700;font-size:15px} .phead .pcount{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-3);padding:3px 9px;border-radius:999px;background:var(--sunk)} .phead .pcount.on{background:var(--navy);color:#fff}
.pstats{display:flex;gap:12px;font-size:12px;color:var(--ink-3);margin:2px 0 10px;flex-wrap:wrap} .pstats b{color:var(--ink);font-weight:600}
.plist{display:flex;flex-direction:column}
.arow2{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-2)}
.arow2 .al{flex:1;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:inherit} .arow2 .at{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .arow2 .as{font-size:12px;color:var(--ink-3)}
.arow2 .age{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.arow2.warn .age{color:var(--warn)} .arow2.over .age{color:var(--alert)} .arow2.done .age{color:var(--ink-3);font-weight:500}
.arow2 .ping{padding:4px 8px;font-size:12px}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}.page-head .seg{max-width:none}}
#avgbody{display:inline-flex;gap:18px;flex-wrap:wrap;align-items:center} .avgs.wide #avgbody{display:block}

/* ---------- phone: one column everywhere, nothing wider than the screen (this block stays last) ---------- */
@media (max-width:980px){
  html,body{overflow-x:clip}
  .page{overflow-x:clip}
  .form-grid,.form-grid.cl-grid,.cl-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .form-grid>*,.pgrid>*,.card,.card.panel,.panel{min-width:0;max-width:100%}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .pcard{overflow:hidden}
  .who-grid,.kinds,#before.kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trow{padding-right:34px}
  .trow .tname{flex-wrap:wrap;row-gap:8px} .trow .tname .input{flex:1 1 100%;max-width:none;min-width:0}
  .trow .tname label{display:inline-flex;align-items:center;gap:6px}
  .tchecks{min-width:0}
  textarea.input{max-width:100%}
  img,video,iframe,canvas,svg{max-width:100%}
  .tt-wrap{overflow:auto;max-width:100%}
  .avgs.wide #avgbody{overflow:auto;max-width:100%}
}

input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--navy)}
.mdlink{font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:none;white-space:nowrap} .mdlink .ico{width:13px;height:13px}
#f-mdbox .revlist:empty{display:none}
.revrow.proj .rt{font-style:italic}
.revrow.proj .rt{font-style:italic}
.mdmode{padding:6px 2px 2px} .mdmode .linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);cursor:pointer;text-decoration:underline}
.segrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .segrow .seg{flex:1 1 220px}
.combo{position:relative} .combo .input{padding-right:40px}
.combo-arrow{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:var(--ink-3);font-size:16px;cursor:pointer;border-radius:8px} .combo-arrow:hover{background:var(--sunk);color:var(--ink)}
.combo-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:6px;max-height:300px;overflow:auto}
.combo-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:8px;font:inherit;cursor:pointer;color:var(--ink)} .combo-opt:hover{background:var(--sunk)} .combo-opt.on{font-weight:700} .combo-opt.new{color:var(--accent-ink);font-weight:600} .combo-opt .ico{width:14px;height:14px}
#f-mdlist{max-height:340px;overflow:auto;border-radius:12px;scrollbar-width:thin}
.pill.kind.nomd{background:var(--warn-bg);color:var(--warn)}
.cmscope{margin:0 0 12px}
.cmscope button b{margin-left:6px;font-weight:600;opacity:.75}
.cmgroup{display:flex;align-items:center;gap:8px;margin:14px 0 8px;padding:6px 10px;border-radius:8px;background:var(--surface-2,rgba(0,0,0,.04));cursor:pointer;font-size:13px}
.cmgroup.here{cursor:default;background:color-mix(in srgb,var(--navy) 10%,transparent)}
.cmgroup .gname{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmgroup .gcount{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.cmgroup .gopen{font-size:12px;color:var(--navy);text-decoration:underline}
.cmgroup .gopen.muted{text-decoration:none}
.ochips .person.rm{position:relative;padding-right:26px}
.ochips .person.rm .x{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:15px;line-height:1;opacity:.55}
.ochips .person.rm:hover{background:var(--alert);border-color:var(--alert);color:#fff}
.ochips .person.rm:hover .x{opacity:1}
.qnote-done{margin:10px 0 16px;padding:10px 12px;border-radius:10px;background:var(--sunk)}