/* Elchai Tuego · Product Interface System v1.3 — tokens from H2 Variables.
   Square, ink on white, one ultramarine accent, amber only for the human gate. */
/* Archivo (SIL OFL 1.1), self-hosted: the CSP allows fonts from this origin only. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --color-bg-page:#FFFFFF; --color-bg-zone:#F5F3EF; --color-bg-placeholder:#ECE8E1;
  --color-text-primary:#0B0C0E; --color-text-secondary:#3B3D42; --color-text-muted:#62666D;
  --color-line-hairline:#DCD6CB; --color-line-strong:#0B0C0E; --color-line-field:#8C8477; --color-line-soft:#C7BFB2;
  --color-accent-rule:#1A35C4; --color-accent-pressed:#13278F; --color-accent-tint:#E7EBFB; --color-focus-ring:#1A35C4;
  --color-gate-fg:#8A5300; --color-gate-fill:#F8ECD6; --color-gate-rule:#C99A4B;
  --color-success-fg:#186A3B; --color-success-fill:#E4F1E8; --color-danger-fg:#B3261E; --color-danger-fill:#FBEAE8;
  --color-action-primary-fill:#0B0C0E; --color-action-primary-fg:#FFFFFF; --color-action-primary-hover:#1A35C4;
  --color-action-ghost-hover:#F5F3EF; --color-scrim:rgba(11,12,14,.34);
  --color-bg-surface:#FFFFFF; --color-action-disabled-fill:#ECE8E1; --color-action-disabled-fg:#8C8477;
  --border:1px; --radius:0px;
  --header:64px; --rail:200px; --assistant:376px; --drawer:440px;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dur:180ms; --ease:cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{font:400 15px/22px var(--font); color:var(--color-text-primary); background:var(--color-bg-page);
  -webkit-font-smoothing:antialiased; overflow:hidden}
button,input,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--color-focus-ring); outline-offset:2px}
[hidden]{display:none!important}
/* Tuego parts exist only for people with the channel switched on. */
body:not(.tuego) .tuegoOnly, body:not(.tuego) #approvalsBtn, body:not(.tuego) #alertsBtn{display:none!important}
/* K4: skip links first in the tab order, visible only when focused. */
.skip{position:absolute; left:8px; top:-60px; z-index:100; background:var(--color-bg-surface); border:calc(var(--border) * 2) solid var(--color-focus-ring); padding:10px 14px; font-weight:600}
.skip:focus{top:8px}
html{scroll-padding-top:80px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
svg.i{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* type roles */
.label{font-size:12.5px; line-height:16.5px; font-weight:600; font-stretch:75%; letter-spacing:.08em; text-transform:uppercase}
.eyebrow{color:var(--color-accent-rule)}
.muted{color:var(--color-text-muted)} .small{font-size:13.5px; line-height:20px}
h1,h2,h3{margin:0; font-weight:540; font-stretch:87.5%}
h1.xl{font-size:36px; line-height:40px; letter-spacing:-.01em}
h2.l{font-size:24px; line-height:29px; letter-spacing:-.01em}
h3.m{font-size:20px; line-height:25px}
.ts{font-size:17px; line-height:22px; font-weight:540; font-stretch:87.5%}

/* chips: uppercase, square, 1px solid or 1.5px dashed by kind */
.chip{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 7px; border:var(--border) solid var(--color-line-strong);
  font-size:11.5px; font-weight:600; font-stretch:75%; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; background:transparent}
.chip svg{width:12px; height:12px}
.chip.gate{color:var(--color-gate-fg); border:calc(var(--border) * 1.5) dashed var(--color-gate-rule); background:var(--color-gate-fill)}
.chip.system{color:var(--color-accent-rule); border:calc(var(--border) * 1.5) dashed var(--color-accent-rule)}
.chip.success{color:var(--color-success-fg); border-color:var(--color-success-fg)}
.chip.danger{color:var(--color-danger-fg); border-color:var(--color-danger-fg)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
  border:var(--border) solid var(--color-line-strong); background:var(--color-bg-surface); font-weight:600; font-size:15px; letter-spacing:.005em}
.btn:hover{background:var(--color-action-ghost-hover)}
.btn.primary{background:var(--color-action-primary-fill); color:var(--color-action-primary-fg)}
.btn.primary:hover{background:var(--color-action-primary-hover); border-color:var(--color-action-primary-hover)}
.btn.dense{min-height:36px; padding:0 12px; font-size:14px}
.btn[aria-pressed="true"]{background:var(--color-action-primary-fill); color:var(--color-action-primary-fg)}
.quiet{background:none; border:0; padding:0; font-weight:600; text-decoration:underline; text-underline-offset:3px}
.quiet:hover{color:var(--color-accent-rule)}
.ghost{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:none}
.ghost:hover{background:var(--color-action-ghost-hover)}

/* ============ HEADER (S0 regions 1–8) ============ */
header.top{height:var(--header); display:flex; align-items:center; gap:20px; padding:0 20px;
  border-bottom:var(--border) solid var(--color-line-strong); background:var(--color-bg-page); position:relative; z-index:30}
.brand{display:flex; align-items:center; gap:14px; min-height:44px; text-decoration:none}
.brand .logo, .lg-logo .logo{height:28px; width:auto; display:block; color:var(--color-text-primary)}
.brand .div{width:1px; height:28px; background:var(--color-line-hairline)}
.brand .prod{font-size:20px; font-weight:540; font-stretch:87.5%}
.plate{display:flex; align-items:center; gap:10px; height:46px; padding:0 12px; border:var(--border) solid var(--color-line-strong); background:var(--color-bg-page)}
button.plate{font:inherit; color:inherit; text-align:left; cursor:pointer}
.plate .k{display:block; font-size:10.5px; line-height:12px; font-weight:600; font-stretch:75%; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-muted)}
.plate .v{display:block; font-size:16px; line-height:20px; font-weight:600}
.plate .k, .plate .v{white-space:nowrap}
body[data-state="idle"] #pStop{display:none}
.search{flex:0 1 340px; display:flex; align-items:center; gap:10px; height:44px; padding:0 8px 0 12px; border:var(--border) solid var(--color-line-field)}
.search input{flex:1; border:0; outline:0; background:none; min-width:0}
/* The field draws no ring of its own: the whole box gets the usual 2px ring + 2px gap. */
.search:focus-within{outline:2px solid var(--color-focus-ring); outline-offset:2px}
.search kbd{font:600 11px var(--font); border:var(--border) solid var(--color-line-hairline); padding:2px 6px}
.hspace{flex:1}
.hitem{display:flex; align-items:center; gap:8px; height:44px; padding:0 8px; border:0; background:none; font-size:15px; font-weight:600; white-space:nowrap}
.hitem:hover{background:var(--color-action-ghost-hover)}
.hitem.status{font-weight:400; font-size:14px}
.hitem.status.off{color:var(--color-danger-fg)}
.count{min-width:22px; height:22px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.count.gate{color:var(--color-gate-fg); background:var(--color-gate-fill); border:var(--border) solid var(--color-gate-rule)}
.count.ink{color:var(--color-action-primary-fg); background:var(--color-text-primary)}
.count.zero{display:none}
.profile{display:flex; align-items:center; gap:10px; border:0; background:none; padding:4px 6px; text-align:left}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--color-text-primary); color:var(--color-action-primary-fg); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.profile .n{display:block; font-weight:600; font-size:15px; line-height:18px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.profile .r{display:block; font-size:13px; color:var(--color-text-muted)}
.menuBtn{display:none}
/* Header icon buttons and the profile: hover = the stone (on the white header, the way the
   rail items hover white on the stone rail); open (popover showing) = a darker stone. */
header.top .ghost:hover, header.top .profile:hover{background:var(--color-bg-zone)}
header.top .ghost[aria-expanded="true"], header.top .profile[aria-expanded="true"], header.top .hitem[aria-expanded="true"]{background:var(--color-bg-placeholder)}

/* ============ LAYOUT ============ */
.shell{display:grid; grid-template-columns:var(--rail) minmax(0,1fr) var(--assistant); height:calc(100% - var(--header))}
.shell.collapsed{grid-template-columns:var(--rail) minmax(0,1fr) 64px}

/* ============ RAIL ============ */
nav.rail{background:var(--color-bg-zone); border-right:var(--border) solid var(--color-line-hairline); display:flex; flex-direction:column; overflow-y:auto}
.railHead{padding:22px 20px 18px; border-bottom:var(--border) solid var(--color-line-hairline)}
.railHead .ws{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:540; font-stretch:87.5%}
.railHead .who{margin-top:8px; font-size:13.5px; line-height:20px; color:var(--color-text-secondary)}
.mods{list-style:none; margin:10px 0; padding:0}
.mods button{width:100%; display:flex; align-items:center; gap:12px; height:46px; padding:0 14px 0 18px; border:0; background:none; text-align:left; font-size:15px; position:relative}
.mods button:hover{background:var(--color-bg-page)}
.mods button[aria-current="page"]{background:var(--color-bg-page); font-weight:600}
.mods button[aria-current="page"]::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--color-accent-rule)}
.num{width:28px; height:28px; flex:none; border:var(--border) solid var(--color-line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600}
.mods button[aria-current="page"] .num{background:var(--color-text-primary); color:var(--color-action-primary-fg)}
.mods .count{margin-left:auto}
.railFoot{margin-top:auto; padding:14px 18px 20px; border-top:var(--border) solid var(--color-line-hairline); display:flex; flex-direction:column; gap:6px}
.railFoot button{display:flex; align-items:center; gap:10px; min-height:44px; border:0; background:none; padding:0 8px; margin:0 -8px; font-size:14px; text-align:left}
.railFoot button:hover{background:var(--color-bg-page)}
/* Open: these buttons carry no aria-expanded yet, so follow the popover itself. */
body:has(#helpPop:not([hidden])) .railFoot [data-open="help"],
body:has(#privacyPop:not([hidden])) .railFoot [data-open="privacy"]{background:var(--color-bg-placeholder)}
.railFoot p{margin:8px 0 0; font-size:12.5px; line-height:18px; color:var(--color-text-muted)}

/* ============ STAGE ============ */
main.stage{overflow-y:auto; padding:28px 32px 48px}
.stageIn{max-width:864px}
.hero{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:var(--border) solid var(--color-line-strong); margin-bottom:28px}
.hero .meta{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:24px}
.mod{margin-bottom:32px}
.modHead{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.modHead .num{width:30px; height:30px}
.modHead .aux{margin-left:auto}
.hero h1.xl{margin-top:6px}
.modTitle{margin-bottom:10px}
.card{border:var(--border) solid var(--color-line-hairline); padding:16px 18px; margin-bottom:10px; background:var(--color-bg-page)}
.card.gate{border:calc(var(--border) * 1.5) dashed var(--color-gate-rule)}
.card .row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.card p{margin:6px 0 0; color:var(--color-text-secondary)}
.card .cardTitle{color:var(--color-text-primary); margin-top:10px}
.card .new{color:var(--color-accent-rule)}
.card .acts{margin-top:12px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.empty{border:var(--border) solid var(--color-line-hairline); padding:18px; background:var(--color-bg-page)}
.empty .ts{display:block; margin-bottom:4px}
.empty p{margin:0; color:var(--color-text-secondary)}
.empty .checked{margin-top:10px; font-size:13.5px; color:var(--color-text-muted)}
.list{border-top:var(--border) solid var(--color-line-hairline)}
.li{display:flex; gap:14px; align-items:center; padding:12px 0; border-bottom:var(--border) solid var(--color-line-hairline)}
.li .grow{flex:1; min-width:0}
.li .t{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.li button.open{border:0; background:none; text-align:left; padding:0; width:100%}
.li button.open:hover .t{color:var(--color-accent-rule)}
.li.current .t::after{content:" · open now"; font-weight:400; color:var(--color-text-muted)}
.notice{border:calc(var(--border) * 1.5) dashed var(--color-line-field); padding:12px 14px; font-size:13.5px; line-height:20px; color:var(--color-text-secondary); margin-bottom:16px}
.li .due{font-weight:600}
/* In the stage every button and link is a 44px target (All N, Try again,
   Download, Remove, Review in Tuego, Add document), and a long title wraps
   to two lines before it is cut. Scoped to .stage: the conversation list in
   the Tuego panel shares .li, .quiet and .btn.dense and stays as it is. */
.stage .btn.dense{min-height:44px}
.stage .quiet{display:inline-flex; align-items:center; min-height:44px; min-width:44px}
.stage .more{margin-top:4px}
.stage .li .t{white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2}

/* ============ WIDTHS (S0 · 03) ============ */
/* ≤1280: Approvals / Alerts drop their words (their aria-label keeps them); the
   connection status keeps its word — a status is never shown by colour alone. */
@media (max-width:1280px){ .hitem:not(.status) .w{display:none} main.stage{padding:24px} }
@media (max-width:1200px){
  nav.rail{display:none} .menuBtn{display:inline-flex} .grid{grid-template-columns:minmax(0,1fr)}
  nav.rail.open{display:flex; position:fixed; top:var(--header); left:0; bottom:0; width:320px; z-index:41; border-right:var(--border) solid var(--color-line-strong)}
  .search{flex-basis:220px}
  .shell, .shell.collapsed{grid-template-columns:1fr}
  main.stage{padding:20px 20px 100px}
  #collapseBtn{display:none}
}
@media (max-width:900px){
  /* Search stays on tablet: the "Tuego" word beside the logo and some gap give it room.
     The status shows only when it matters — offline — and then in words. */
  .brand .div, .brand .prod, .hitem.status:not(.off), .profile .txt, .search kbd{display:none}
  header.top{gap:12px}
  .search{flex:1 1 180px; min-width:0}
}
.tabbar{display:none}
@media (max-width:600px){
  header.top{height:56px; gap:8px; padding:0 12px} :root{--header:56px}
  /* S0 · 390: tab bar; Tuego full screen above it, its bar (Stop, Mute) on every tab. */
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; height:60px; z-index:36; background:var(--color-bg-page); border-top:var(--border) solid var(--color-line-strong)}
  .tabbar button{flex:1; min-width:44px; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0;
    border-top:calc(var(--border) * 2) solid transparent; background:none; font-size:13px; line-height:16px; font-weight:500; color:var(--color-text-muted)}
  /* The open tab stands out by more than colour: a 2px ink line on top, a bold label and
     an ink icon; the other tabs are grey and regular weight. */
  .tabbar button[aria-current="page"]{color:var(--color-text-primary); border-top-color:var(--color-text-primary); font-weight:700}
  body.tuego .tabbar [data-tabbar="documents"]{display:none}
  main.stage{padding:20px 16px 160px}
  .stage h1.xl{font-size:28px; line-height:32px}
  .search, .brand .div, .brand .prod, .plate .k, .hitem:not(.status) .w, #helpBtn, #privacyBtn, .profile > svg{display:none}
  /* Offline on a phone: the status word needs the room the workspace plate had. */
  header.top:has(.hitem.status.off) .plate{display:none}
  .plate{height:40px; padding:0 8px} .plate > svg{display:none} .brand .logo{height:22px} .hitem{padding:0 4px; gap:4px}
  header.top{gap:6px} .hitem svg.i{width:17px; height:17px} .avatar{width:32px; height:32px} .profile{min-height:44px}
}
@media (max-width:360px){
  .brand{display:none}
  h1.xl{font-size:28px; line-height:32px} .hero{flex-direction:column; align-items:flex-start}
  /* S0 · 320 (and 400 % zoom): nothing sticky, one column, the composer in
     flow, reached by "Skip to Tuego". */
  html, body{height:auto} body{overflow:auto}
  header.top{position:static} .tabbar{display:none}
  .shell, .shell.collapsed{display:block; height:auto}
  main.stage{overflow:visible; padding:16px}
}
/* A module whose feed isn't connected yet: dashed, quiet, never an error. */
.empty.off{border-style:dashed; border-color:var(--color-line-field); background:var(--color-bg-zone)}
.empty.off .chip{margin-bottom:8px}
.li > .chip{flex:none}
/* Module rows: the name keeps its width; chips wrap below it in a narrow column. */
.li{flex-wrap:wrap}
.li .grow{flex:1 1 160px}

/* Client themes set --radius; boxes and controls take it. Round things (avatars) stay round. */
.skip, .chip, .plate, .search, .search kbd, .count.gate, .num, .card, .empty, .notice, .btn, .sugs button, .convList .confirm, .convList .err, .src, .composer textarea, .micAsk, .fchip, .li input.rn, .turn .imgs img, .pop{border-radius:var(--radius)}