/* ==========================================================================
   ZWORKS ARTIFACT CONSOLE — UI KIT
   Light: Stone Olive · Dark: Obsidian Minimal (olive)
   Shared by every console-*.html screen. Import once, consume tokens only.
   ========================================================================== */

/* --- 1. Nim primitives (Manrope / Newsreader / DM Mono) ---------------------- */
:root{
  --font-ui:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-display:Newsreader,Georgia,"Times New Roman",serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  --r-sm:4px; --r-md:7px; --r-lg:10px; --r-panel:10px; --r-dialog:14px; --r-pill:999px;

  --row-compact:36px; --row-default:44px; --row-comfy:52px;
  --ctl-sm:28px; --ctl-md:32px; --ctl-lg:36px; --touch:44px;

  --sidebar:252px; --rail:56px; --topbar:44px; --content-max:1440px;

  --fast:100ms; --base:150ms; --slow:240ms; --ease:cubic-bezier(.2,0,.13,1);
}

/* --- 2. Light — Nim paper/ink/lime ------------------------------------------ */
:root{
  color-scheme:light;
  --canvas:#f2f4ef;
  --surface:#fbfcf9;
  --subtle:#f6f8f3;
  --elevated:#ffffff;
  --border:#d9dfd8;
  --border-strong:#b9c6b4;

  --text:#17201f;
  --text-2:#57635d;
  --text-3:#5a665f;
  --on-primary:#c7ef4a;

  --primary:#17201f;
  --primary-hover:#28312e;
  --primary-subtle:#eaf6c8;
  --primary-border:#d9dfd8;
  --primary-text:#17201f;

  --success:#4a6b52;
  --warning:#e8a23a;
  --danger:#a4462a;
  --danger-hover:#7e3520;
  --info:#57635d;

  --hover:#dde6db;
  --selected:#eff8d8;
  --scrim:rgba(23,32,31,.45);
  --shadow-pop:0 2px 10px #17201f18;
  --shadow-dialog:0 18px 40px #17201f18;
}

/* --- 3. Dark — Nim deep ink/lime -------------------------------------------- */
html.dark{
  color-scheme:dark;
  --canvas:#0d1211;
  --surface:#171d1b;
  --subtle:#1a2220;
  --elevated:#22261f;
  --border:#28312e;
  --border-strong:#3a6b4a;

  --text:#eef4ee;
  --text-2:#92aea6;
  --text-3:#849790;
  --on-primary:#0d1211;

  --primary:#c7ef4a;
  --primary-hover:#d7f75e;
  --primary-subtle:#1a2c14;
  --primary-border:#28312e;
  --primary-text:#c7ef4a;

  --success:#8fc09a;
  --warning:#6b5327;
  --danger:#e08a7f;
  --danger-hover:#e89a90;
  --info:#92aea6;

  --hover:#1a2220;
  --selected:rgba(199,239,74,.18);
  --scrim:rgba(0,0,0,.6);
  --shadow-pop:0 2px 10px rgba(0,0,0,.35);
  --shadow-dialog:0 18px 40px rgba(0,0,0,.4);
}

/* ─── 4. Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--canvas); color:var(--text);
  font-family:var(--font-ui); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
svg{display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0}
:where(a,button,input,select,textarea,[tabindex],summary):focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--r-sm);
}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus,.skip-link:focus-visible{
  position:fixed; top:var(--s2); left:var(--s2); z-index:200; width:auto; height:auto;
  overflow:visible; clip:auto; white-space:normal; padding:8px 12px;
  background:var(--surface); color:var(--text); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}

/* ─── 5. Shell ────────────────────────────────────────────────────────── */
.app{display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:100vh}
.app[data-nav="collapsed"]{grid-template-columns:var(--rail) minmax(0,1fr)}

.side{
  position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border); overflow:hidden;
}
.side-top{display:flex; align-items:center; gap:10px; height:var(--topbar); padding:0 var(--s4); border-bottom:1px solid var(--border)}
.logo{flex:none; width:26px; height:26px}
.wordmark{font-size:13px; font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.wordmark span{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; color:var(--text-2); text-transform:uppercase; font-weight:400}

.projsel{margin:var(--s3) var(--s3) var(--s2)}
.projsel button{
  width:100%; display:flex; align-items:center; gap:var(--s2); height:var(--ctl-lg); padding:0 var(--s2) 0 var(--s2);
  background:var(--subtle); border:1px solid var(--border); border-radius:var(--r-md); text-align:left;
}
.projsel button:hover{background:var(--hover); border-color:var(--border-strong)}
.projsel .av{flex:none; width:20px;height:20px; border-radius:var(--r-sm); background:var(--primary-subtle); border:1px solid var(--primary-border); color:var(--primary-text); display:grid; place-items:center; font-size:11px; font-weight:600}
.projsel .nm{flex:1; min-width:0; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.projsel svg{flex:none; width:14px;height:14px; color:var(--text-2)}

.nav{flex:1; overflow-y:auto; padding:var(--s2) var(--s3) var(--s4); display:flex; flex-direction:column; gap:2px}
.nav section{display:contents}
.nav ul{list-style:none; margin:0; padding:0; display:contents}
.nav li{display:contents}
.nav h2.grp{font-weight:400}
.nbadge{position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; display:inline-grid; place-items:center; border-radius:var(--r-pill); background:var(--primary); color:var(--on-primary); font-size:10px; line-height:1}
.dotbadge{position:relative}
.nav a{
  display:flex; align-items:center; gap:10px; height:var(--ctl-lg); padding:0 10px; border-radius:var(--r-md);
  color:var(--text-2); font-size:13px; font-weight:500; white-space:nowrap;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav a svg{flex:none; width:17px;height:17px; stroke-width:1.75}
.nav a .cnt{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-2)}
.nav a:hover{background:var(--hover); color:var(--text)}
.nav a[aria-current="page"]{background:var(--selected); color:var(--text); font-weight:600}
.nav a[aria-current="page"] svg{color:var(--primary-text)}
.nav hr{margin:var(--s3) 10px; border:0; border-top:1px solid var(--border)}
.nav .grp{padding:var(--s3) 10px var(--s1); font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3)}

.side-user{display:flex; align-items:center; gap:var(--s2); padding:var(--s3); border-top:1px solid var(--border)}
.side-user .av{width:26px;height:26px;border-radius:var(--r-pill); background:var(--subtle); border:1px solid var(--border); display:grid; place-items:center; font-size:11px; font-weight:600}
.side-user .who{flex:1; min-width:0}
.side-user .who b{display:block; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-user .who span{display:block; font-size:11px; color:var(--text-2)}

/* rail mode */
.app[data-nav="collapsed"] .wordmark,
.app[data-nav="collapsed"] .projsel .nm,
.app[data-nav="collapsed"] .projsel svg,
.app[data-nav="collapsed"] .nav a span,
.app[data-nav="collapsed"] .nav a .cnt,
.app[data-nav="collapsed"] .nav .grp,
.app[data-nav="collapsed"] .side-user .who{display:none}
.app[data-nav="collapsed"] .nav a,
.app[data-nav="collapsed"] .projsel button{justify-content:center; padding:0}
.app[data-nav="collapsed"] .side-top{justify-content:center; padding:0}

/* topbar */
.main{min-width:0; display:flex; flex-direction:column}
.top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:var(--s3);
  height:var(--topbar); padding:0 var(--s6); background:color-mix(in oklab, var(--canvas) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.crumb{display:flex; align-items:center; gap:var(--s2); min-width:0; font-size:13px; color:var(--text-2)}
.crumb a:hover{color:var(--text); text-decoration:underline; text-underline-offset:2px}
.crumb b{font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crumb .sep{color:var(--text-3)}
.top .spacer{flex:1}

.iconbtn{
  display:inline-grid; place-items:center; width:var(--ctl-md); height:var(--ctl-md); flex:none;
  background:transparent; border:1px solid transparent; border-radius:var(--r-md); color:var(--text-2);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.iconbtn svg{width:17px;height:17px;stroke-width:1.75}
.iconbtn:hover{background:var(--hover); color:var(--text); border-color:var(--border)}
.iconbtn[aria-expanded="true"], .iconbtn.on{background:var(--selected); color:var(--text); border-color:var(--border)}

.themetoggle{display:inline-flex; gap:2px; padding:2px; background:var(--subtle); border:1px solid var(--border); border-radius:var(--r-md)}
.themetoggle button{height:26px; padding:0 9px; border:0; background:transparent; border-radius:var(--r-sm); color:var(--text-2); font-size:12px; font-weight:500}
.themetoggle button:hover{background:var(--hover); color:var(--text)}
.themetoggle button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.07)}

/* page */
.page{flex:1; width:100%; max-width:var(--content-max); margin:0 auto; padding:var(--s8) var(--s8) var(--s16); min-width:0}
.page-head{display:flex; align-items:flex-start; gap:var(--s6); margin-bottom:var(--s6); flex-wrap:wrap}
.page-head .ttl{flex:1 1 240px; min-width:0}
.page-head h1{font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.2}
.page-head p{margin-top:6px; font-size:14px; color:var(--text-2); max-width:62ch}
.page-actions{display:flex; align-items:center; gap:var(--s2); flex:none; flex-wrap:wrap; min-width:0; max-width:100%}

/* ─── 6. Buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:var(--ctl-lg); padding:0 14px;
  border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-size:13px; font-weight:500; white-space:nowrap;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn svg{width:16px;height:16px;stroke-width:1.75}
.btn:hover{background:var(--hover); border-color:var(--border-strong)}
.btn:active{background:var(--subtle)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover); border-color:var(--primary-hover); color:var(--on-primary)}
.btn-primary:active{background:var(--primary-hover)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text-2)}
.btn-ghost:hover{background:var(--hover); color:var(--text); border-color:var(--border)}
.btn-danger{background:transparent; border-color:var(--border); color:var(--danger)}
.btn-danger:hover{background:var(--danger); border-color:var(--danger); color:var(--on-primary)}
html.dark .btn-danger:hover{color:#0d1211}
.btn-sm{height:var(--ctl-sm); padding:0 10px; font-size:12px}
.btn-sm svg{width:14px;height:14px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-link{background:none;border:0;padding:0;height:auto;color:var(--primary-text);font-weight:500}
.btn-link:hover{background:none; text-decoration:underline; text-underline-offset:3px; color:var(--primary-hover)}

/* ─── 7. Fields ───────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12px; font-weight:500; color:var(--text-2)}
.field label .req{color:var(--danger)}
.field .hint{font-size:12px; color:var(--text-2)}
.input, .select, .textarea{
  width:100%; height:var(--ctl-lg); padding:0 10px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); font-size:13px;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.textarea{height:auto; min-height:84px; padding:9px 10px; line-height:1.5; resize:vertical; font-family:var(--font-ui)}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-subtle)}
.select{appearance:none; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.search{position:relative; flex:1; min-width:180px; max-width:340px}
.search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px;height:15px; stroke-width:1.75; color:var(--text-2); pointer-events:none}
.search .input{padding-left:31px}

.toolbar{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s4)}
.toolbar .sep{width:1px; height:20px; background:var(--border)}
.toolbar .right{margin-left:auto; display:flex; align-items:center; gap:var(--s2)}
.chip{
  display:inline-flex; align-items:center; gap:6px; height:var(--ctl-md); padding:0 10px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  font-size:12px; font-weight:500; color:var(--text-2);
}
.chip svg{width:13px;height:13px;stroke-width:1.75}
.chip:hover{background:var(--hover); color:var(--text); border-color:var(--border-strong)}
.chip[aria-pressed="true"], .chip.on{background:var(--selected); border-color:var(--primary-border); color:var(--text)}
.chipgroup{display:inline-flex; gap:var(--s2); flex-wrap:wrap; align-items:center}
.segment{display:inline-flex; padding:2px; gap:2px; background:var(--subtle); border:1px solid var(--border); border-radius:var(--r-md)}
.segment button{height:26px; padding:0 10px; border:0; background:transparent; border-radius:var(--r-sm); font-size:12px; font-weight:500; color:var(--text-2)}
.segment button:hover{background:var(--hover); color:var(--text)}
.segment button[aria-pressed="true"]{background:var(--surface); color:var(--text)}

/* ─── 8. Panels, cards, metrics ───────────────────────────────────────── */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel); overflow:hidden}
.panel-head{display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--border)}
.panel-head h2{font-size:14px; font-weight:600; flex:1; min-width:0}
.panel-head .sub{font-size:12px; color:var(--text-2)}
.panel-body{padding:var(--s5)}
.panel-foot{padding:var(--s3) var(--s5); border-top:1px solid var(--border); background:var(--subtle)}

.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel); overflow:hidden}
.kpi{padding:var(--s4) var(--s5); border-right:1px solid var(--border)}
.kpi:last-child{border-right:0}
.kpi .k{font-size:12px; color:var(--text-2)}
.kpi .v{margin-top:4px; font-family:var(--font-mono); font-size:22px; font-weight:500; letter-spacing:-.02em}
.kpi .d{margin-top:3px; font-size:11px; color:var(--text-2)}

.defs{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px var(--s5); font-size:13px; align-items:baseline}
.defs dt{color:var(--text-2); white-space:nowrap}
.defs dd{margin:0; min-width:0; overflow-wrap:anywhere}

/* ─── 9. Status ───────────────────────────────────────────────────────── */
.status{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px 0 7px; border-radius:var(--r-pill);
  background:var(--subtle); border:1px solid var(--border); font-size:12px; font-weight:500; color:var(--text); white-space:nowrap}
.status::before{content:""; width:6px;height:6px;border-radius:50%; background:var(--text-3); flex:none}
.status.is-approved::before{background:var(--success)}
.status.is-pending::before{background:var(--warning)}
.status.is-rejected::before{background:var(--danger)}
.status.is-draft::before{background:var(--text-3)}
.status.is-live::before{background:var(--primary)}
.status.is-info::before{background:var(--info)}
.status.lg{height:26px; padding:0 11px 0 9px; font-size:13px}
.tag{display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:var(--r-sm); background:var(--subtle);
  border:1px solid var(--border); font-family:var(--font-mono); font-size:11px; color:var(--text-2)}
.kind{font-family:var(--font-mono); font-size:12px; color:var(--text-2)}

/* ─── 10. Table ───────────────────────────────────────────────────────── */
.tablewrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel); overflow:hidden}
table.z{width:100%; border-collapse:collapse; table-layout:fixed}
table.z th{
  height:var(--row-compact); padding:0 var(--s4); text-align:left; font-size:12px; font-weight:500; color:var(--text-2);
  background:var(--subtle); border-bottom:1px solid var(--border); white-space:nowrap;
}
table.z th.sortable{cursor:pointer}
table.z th.sortable:hover{color:var(--text)}
table.z th .ar{display:inline-block; margin-left:5px; color:var(--text-3)}
table.z td{height:var(--row-default); padding:0 var(--s4); border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle}
table.z tbody tr:last-child td{border-bottom:0}
table.z tbody tr{transition:background var(--fast) var(--ease)}
table.z tbody tr:hover{background:var(--hover)}
table.z tbody tr[aria-selected="true"], table.z tbody tr[data-selected="true"]{background:var(--selected)}
table.z .cell{display:flex; align-items:center; gap:10px; min-width:0}
table.z .cell>span:last-child{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
table.z .nm{display:block; max-width:100%; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.z .sub{display:block; max-width:100%; font-size:11px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.z .ico{flex:none; width:28px;height:28px;border-radius:var(--r-md); background:var(--subtle); border:1px solid var(--border);
  display:grid; place-items:center; color:var(--text-2)}
table.z .ico svg{width:15px;height:15px;stroke-width:1.75}
table.z td.right{text-align:right}
table.z td.act{width:56px; text-align:right; padding-right:10px}
.dense table.z td{height:var(--row-compact)}
.comfy table.z td{height:var(--row-comfy)}
.trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* mobile record list — replaces the table under 768px */
.records{display:none; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel); overflow:hidden}
.record{display:flex; flex-direction:column; gap:6px; padding:var(--s4); border-bottom:1px solid var(--border); min-height:var(--touch)}
.record:last-child{border-bottom:0}
.record:hover{background:var(--hover)}
.record .r1{display:flex; align-items:center; gap:var(--s2)}
.record .r1 b{flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.record .r2{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; font-size:12px; color:var(--text-2)}

/* ─── 11. Tabs ────────────────────────────────────────────────────────── */
.tabs{display:flex; gap:var(--s5); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  position:relative; height:40px; padding:0 2px; border:0; background:none; color:var(--text-2);
  font-size:13px; font-weight:500; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text); font-weight:600; border-bottom-color:var(--primary)}
.tabs .cnt{margin-left:6px; font-family:var(--font-mono); font-size:11px; color:var(--text-2)}
.tabpanel[hidden]{display:none}

/* ─── 12. Timeline ────────────────────────────────────────────────────── */
.timeline{display:flex; flex-direction:column}
.tl{display:grid; grid-template-columns:64px 20px minmax(0,1fr); gap:var(--s3); padding:var(--s3) 0; align-items:start}
.tl:first-child{padding-top:0}
.tl .t{font-family:var(--font-mono); font-size:12px; color:var(--text-2); padding-top:1px}
.tl .rail{position:relative; justify-self:center; width:20px; height:100%}
.tl .rail::before{content:""; position:absolute; left:9px; top:16px; bottom:-18px; width:1px; background:var(--border)}
.tl:last-child .rail::before{display:none}
.tl .dot{position:absolute; left:5px; top:5px; width:9px;height:9px;border-radius:50%; background:var(--surface); border:2px solid var(--border-strong)}
.tl.ev-approved .dot{border-color:var(--success)}
.tl.ev-proposed .dot{border-color:var(--warning)}
.tl.ev-released .dot{border-color:var(--primary)}
.tl.ev-rejected .dot{border-color:var(--danger)}
.tl .b{font-size:13px; line-height:1.5}
.tl .b .m{color:var(--text-2)}

/* ─── 13. Dialog / sheet ──────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; z-index:80; background:var(--scrim); display:grid; place-items:center; padding:var(--s6)}
.scrim[hidden]{display:none}
.dialog{
  width:100%; max-width:520px; max-height:calc(100vh - 96px); display:flex; flex-direction:column;
  background:var(--elevated); border:1px solid var(--border); border-radius:var(--r-dialog); box-shadow:var(--shadow-dialog);
}
.dialog.wide{max-width:720px}
.dialog-head{display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s5) var(--s5) var(--s4)}
.dialog-head h2{font-size:16px; font-weight:600}
.dialog-head p{margin-top:4px; font-size:13px; color:var(--text-2)}
.dialog-body{padding:0 var(--s5) var(--s5); overflow-y:auto; display:flex; flex-direction:column; gap:var(--s4)}
.dialog-foot{display:flex; align-items:center; gap:var(--s2); padding:var(--s4) var(--s5); border-top:1px solid var(--border); background:var(--subtle); border-radius:0 0 var(--r-dialog) var(--r-dialog)}
.dialog-foot .spacer{flex:1}

.drawer{position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(420px,100%); display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-dialog)}

/* ─── 14. Misc blocks ─────────────────────────────────────────────────── */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); padding:var(--s16) var(--s6)}
.empty .mk{width:44px;height:44px;border-radius:var(--r-lg); background:var(--subtle); border:1px solid var(--border); display:grid; place-items:center; color:var(--text-2)}
.empty .mk svg{width:21px;height:21px;stroke-width:1.5}
.empty h3{font-family:var(--font-display); font-size:19px; font-weight:600}
.empty p{max-width:44ch; font-size:13px; color:var(--text-2)}
.empty .btn{margin-top:var(--s2)}

.notice{display:flex; gap:var(--s3); padding:var(--s3) var(--s4); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--subtle); font-size:13px}
.notice svg{flex:none; width:16px;height:16px;stroke-width:1.75; margin-top:1px; color:var(--text-2)}
.notice.attn{background:var(--primary-subtle); border-color:var(--primary-border)}
.notice.attn svg{color:var(--primary-text)}
.notice b{font-weight:600}

.bar-track{height:6px; border-radius:var(--r-pill); background:var(--subtle); border:1px solid var(--border); overflow:hidden}
.bar-fill{height:100%; background:var(--primary); border-radius:var(--r-pill)}

.skel{background:var(--subtle); border-radius:var(--r-sm); animation:pulse 1.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

.split{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s6); align-items:start}
.split-3{display:grid; grid-template-columns:280px minmax(0,1fr); gap:var(--s6); align-items:start}
.stack{display:flex; flex-direction:column; gap:var(--s6)}
.stack-sm{display:flex; flex-direction:column; gap:var(--s3)}
.row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.sticky-side{position:sticky; top:calc(var(--topbar) + var(--s6))}

/* file tree */
.tree{font-size:13px; padding:var(--s2)}
.tree .node{display:flex; align-items:center; gap:8px; height:30px; padding:0 8px; border-radius:var(--r-sm); color:var(--text-2); width:100%; border:0; background:none; text-align:left}
.tree .node svg{flex:none; width:15px;height:15px;stroke-width:1.75}
.tree .node:hover{background:var(--hover); color:var(--text)}
.tree .node[aria-current="true"]{background:var(--selected); color:var(--text); font-weight:500}
.tree .d1{padding-left:22px} .tree .d2{padding-left:36px}
.tree .sz{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-3)}

/* diff */
.diff{font-family:var(--font-mono); font-size:12px; line-height:1.65; overflow-x:auto}
.diff .ln{display:grid; grid-template-columns:44px 1fr; gap:var(--s3); padding:0 var(--s4); white-space:pre; min-height:20px}
.diff .no{color:var(--text-3); text-align:right; user-select:none}
.diff .add{background:color-mix(in oklab, var(--success) 13%, transparent)}
.diff .del{background:color-mix(in oklab, var(--danger) 13%, transparent)}
.diff .hunk{background:var(--subtle); color:var(--text-2)}

/* stepper */
.steps{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.step{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2)}
.step .n{width:22px;height:22px;border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); background:var(--surface); font-family:var(--font-mono); font-size:11px}
.step[data-state="done"] .n{background:var(--primary-subtle); border-color:var(--primary-border); color:var(--primary-text)}
.step[data-state="now"]{color:var(--text); font-weight:600}
.step[data-state="now"] .n{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.step .arw{color:var(--text-3)}

/* ─── 15. Responsive ──────────────────────────────────────────────────── */
@media (max-width:1439px){ .page{padding:var(--s6) var(--s6) var(--s12)} }

@media (max-width:1200px){
  .split{grid-template-columns:minmax(0,1fr) 288px}
}

@media (max-width:1023px){          /* tablet — sidebar becomes a rail */
  .app, .app[data-nav="collapsed"]{grid-template-columns:var(--rail) minmax(0,1fr)}
  .wordmark, .projsel .nm, .projsel svg, .nav a span, .nav a .cnt, .nav .grp, .side-user .who{display:none}
  .nav a, .projsel button{justify-content:center; padding:0}
  .side-top{justify-content:center; padding:0}
  .split, .split-3{grid-template-columns:minmax(0,1fr)}
  .sticky-side{position:static}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(2n){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--border)}
}

@media (max-width:767px){           /* mobile */
  .app, .app[data-nav="collapsed"]{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; top:0; left:0; z-index:100; width:264px; transform:translateX(-100%);
        transition:transform var(--slow) var(--ease); box-shadow:var(--shadow-dialog)}
  .app[data-drawer="open"] .side{transform:none}
  .app[data-drawer="open"]::after{content:""; position:fixed; inset:0; z-index:99; background:var(--scrim)}
  .side .wordmark, .side .projsel .nm, .side .projsel svg, .side .nav a span,
  .side .nav a .cnt, .side .nav .grp, .side .side-user .who{display:block}
  .side .nav a, .side .projsel button{justify-content:flex-start; padding:0 10px}
  .side .nav a .cnt{margin-left:auto}
  .side .side-top{justify-content:flex-start; padding:0 var(--s4)}
  .top{padding:0 var(--s4); gap:var(--s2)}
  .page{padding:var(--s5) var(--s4) var(--s16)}
  .page-head{flex-direction:column; gap:var(--s4)}
  .page-head .ttl{flex:1 1 auto}
  .page-head h1{font-size:23px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1; height:var(--touch)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tablewrap{display:none}
  .records{display:flex}
  .search{max-width:none; width:100%}
  .toolbar .right{margin-left:0; width:100%}
  .btn, .iconbtn, .chip{min-height:var(--touch)}
  .btn-sm{min-height:36px}
  .scrim{padding:0; place-items:end stretch}
  .dialog, .dialog.wide{max-width:none; max-height:100vh; height:100vh; border-radius:0; border:0}
  .dialog-foot{border-radius:0; padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
  .dialog-foot .btn{flex:1; height:var(--touch)}
  .drawer{width:100%; border-left:0}
  .defs{grid-template-columns:minmax(0,1fr); gap:2px var(--s4)}
  .defs dd{margin-bottom:var(--s3)}
  .tl{grid-template-columns:20px minmax(0,1fr)}
  .tl .t{grid-column:2; order:2; font-size:11px}
  .tl .b{grid-column:2}
  .sticky-actions{position:sticky; bottom:0; z-index:40; display:flex; gap:var(--s2);
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    margin:var(--s6) calc(var(--s4) * -1) calc(var(--s16) * -1);
    background:var(--surface); border-top:1px solid var(--border)}
  .sticky-actions .btn{flex:1; height:var(--touch)}
}
@media (min-width:768px){ .only-mobile{display:none !important} }
@media (max-width:767px){ .only-desk{display:none !important} }

/* ==========================================================================
   16. GLOBAL APP SHELL — Microsoft 365 model
   Global top bar spans full width (Zworks context).
   Local sidebar below it carries the CURRENT APP context only.
   ========================================================================== */
.shell{display:grid; grid-template-rows:var(--topbar) minmax(0,1fr); min-height:100vh}
.shell-body{display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:0}
.shell[data-nav="collapsed"] .shell-body{grid-template-columns:var(--rail) minmax(0,1fr)}

/* ─── Global top bar ─────────────────────────────────────────────────── */
.gtop{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:var(--s2);
  height:var(--topbar); padding:0 var(--s3) 0 var(--s2);
  background:var(--surface); border-bottom:1px solid var(--border);
}
.gtop .spacer{flex:1}

/* context switcher chips in the top bar */
.ctxbtn{
  display:inline-flex; align-items:center; gap:7px; height:var(--ctl-lg); padding:0 9px;
  background:transparent; border:1px solid transparent; border-radius:var(--r-md);
  color:var(--text); font-size:13px; font-weight:500; max-width:210px;
}
.ctxbtn .av{flex:none; width:20px;height:20px;border-radius:var(--r-sm); background:var(--primary-subtle);
  border:1px solid var(--primary-border); color:var(--primary-text); display:grid; place-items:center; font-size:10px; font-weight:600}
.ctxbtn .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctxbtn .cv{flex:none; width:13px;height:13px; color:var(--text-2); stroke-width:2}
.ctxbtn:hover{background:var(--hover); border-color:var(--border)}
.ctxbtn[aria-expanded="true"]{background:var(--selected); border-color:var(--border)}
.ctxbtn.sub{color:var(--text-2)}
.ctxbtn.sub:hover, .ctxbtn.sub[aria-expanded="true"]{color:var(--text)}

/* global search trigger — command-palette affordance, not an input */
.gsearch{
  display:flex; align-items:center; gap:9px; width:min(420px,38vw); height:var(--ctl-lg); padding:0 9px;
  background:var(--subtle); border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--text-2); font-size:13px; text-align:left;
}
.gsearch svg{flex:none; width:15px;height:15px;stroke-width:1.75}
.gsearch .lbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gsearch kbd{
  flex:none; font-family:var(--font-mono); font-size:11px; color:var(--text-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 5px; line-height:1;
}
.gsearch:hover{background:var(--hover); border-color:var(--border-strong); color:var(--text)}

.avbtn{
  flex:none; width:var(--ctl-lg); height:var(--ctl-lg); border-radius:var(--r-pill);
  background:var(--primary-subtle); border:1px solid var(--primary-border); color:var(--primary-text);
  display:grid; place-items:center; font-size:12px; font-weight:600;
}
.avbtn:hover{background:var(--selected); border-color:var(--primary)}
.avbtn[aria-expanded="true"]{border-color:var(--primary)}

.dotbadge{position:relative}
.dotbadge::after{content:""; position:absolute; top:5px; right:5px; width:7px;height:7px; border-radius:50%;
  background:var(--primary); border:2px solid var(--surface)}

/* ─── Popover (launcher, switchers, account, notifications) ──────────── */
.pop{
  position:absolute; z-index:70; background:var(--elevated); border:1px solid var(--border);
  border-radius:var(--r-dialog); box-shadow:var(--shadow-pop); overflow:hidden;
}
.pop[hidden]{display:none}
.pop-head{padding:var(--s4) var(--s4) var(--s3); border-bottom:1px solid var(--border)}
.pop-head h3{font-size:13px; font-weight:600}
.pop-head p{margin-top:3px; font-size:12px; color:var(--text-2)}
.pop-body{padding:var(--s3); max-height:min(64vh,520px); overflow-y:auto}
.pop-foot{padding:var(--s2) var(--s3); border-top:1px solid var(--border); background:var(--subtle)}
.pop-label{padding:var(--s3) 8px var(--s2); font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3)}
.pop-label:first-child{padding-top:4px}

.popitem{
  display:flex; align-items:center; gap:10px; width:100%; min-height:var(--ctl-lg); padding:6px 8px;
  border:0; background:none; border-radius:var(--r-md); text-align:left; color:var(--text-2); font-size:13px;
}
.popitem .ic{flex:none; width:22px;height:22px; display:grid; place-items:center; color:var(--text-2)}
.popitem .ic svg{width:16px;height:16px;stroke-width:1.75}
.popitem .tx{flex:1; min-width:0}
.popitem .tx b{display:block; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.popitem .tx span{display:block; font-size:11px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.popitem .ck{flex:none; width:15px;height:15px; color:var(--primary-text); opacity:0}
.popitem:hover{background:var(--hover); color:var(--text)}
.popitem[aria-current="true"]{background:var(--selected)}
.popitem[aria-current="true"] .ck{opacity:1}
.popitem:hover .ic{color:var(--text)}

/* ─── App launcher ───────────────────────────────────────────────────── */
.launcher{width:352px; top:calc(var(--topbar) - 6px); left:var(--s2)}
.launcher-brand{display:flex; align-items:center; gap:9px; margin-bottom:var(--s3)}
.launcher-brand-mark{width:28px; height:28px; display:grid; place-items:center; border-radius:var(--r-md);
  background:var(--primary-subtle); border:1px solid var(--primary-border); color:var(--primary-text)}
.launcher-brand-mark svg{width:15px; height:15px; stroke-width:1.7}
.launcher-brand span:last-child{display:flex; align-items:baseline; gap:6px}
.launcher-brand b{font-size:13px; font-weight:600; letter-spacing:-.01em}
.launcher-brand small{font-size:11px; color:var(--text-3)}
.applist{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2)}
.apptile{
  display:flex; flex-direction:column; align-items:center; gap:9px; padding:var(--s4) 6px;
  border:1px solid transparent; border-radius:var(--r-lg); background:none; text-align:center; color:var(--text);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.apptile .gl{
  width:40px;height:40px; border-radius:var(--r-lg); display:grid; place-items:center; flex:none;
  background:var(--subtle); border:1px solid var(--border); color:var(--text-2);
}
.apptile .gl svg{width:21px;height:21px;stroke-width:1.6}
.apptile b{font-size:12px; font-weight:500; line-height:1.3}
.apptile:hover{background:var(--hover); border-color:var(--border)}
.apptile:hover .gl{background:var(--surface); border-color:var(--border-strong); color:var(--text)}
.apptile[aria-current="page"]{background:var(--selected); border-color:var(--primary-border)}
.apptile[aria-current="page"] .gl{background:var(--primary-subtle); border-color:var(--primary-border); color:var(--primary-text)}

/* ─── Command palette ────────────────────────────────────────────────── */
.palette{
  width:100%; max-width:620px; max-height:min(74vh,560px); display:flex; flex-direction:column;
  background:var(--elevated); border:1px solid var(--border); border-radius:var(--r-dialog); box-shadow:var(--shadow-dialog);
}
.palette-in{display:flex; align-items:center; gap:10px; padding:0 var(--s4); height:52px; border-bottom:1px solid var(--border)}
.palette-in svg{flex:none; width:17px;height:17px;stroke-width:1.75; color:var(--text-2)}
.palette-in input{flex:1; min-width:0; height:100%; border:0; background:none; outline:none; font-size:15px}
.palette-in input::placeholder{color:var(--text-3)}
.palette-scopes{display:flex; gap:var(--s1); padding:var(--s3) var(--s4) 0; overflow-x:auto; scrollbar-width:none}
.palette-scopes::-webkit-scrollbar{display:none}
.palette-body{flex:1; overflow-y:auto; padding:var(--s2) var(--s3) var(--s3)}
.palette-foot{display:flex; align-items:center; gap:var(--s4); padding:var(--s2) var(--s4);
  border-top:1px solid var(--border); background:var(--subtle); font-size:11px; color:var(--text-2)}
.palette-foot kbd{font-family:var(--font-mono); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:1px 5px; font-size:10px}
.hit{display:flex; align-items:center; gap:10px; width:100%; min-height:var(--row-default); padding:6px 8px;
  border:0; background:none; border-radius:var(--r-md); text-align:left; font-size:13px; color:var(--text)}
.hit .ic{flex:none; width:26px;height:26px; border-radius:var(--r-md); background:var(--subtle);
  border:1px solid var(--border); display:grid; place-items:center; color:var(--text-2)}
.hit .ic svg{width:14px;height:14px;stroke-width:1.75}
.hit .tx{flex:1; min-width:0}
.hit .tx b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hit .tx span{display:block; font-size:11px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hit .meta{flex:none; font-family:var(--font-mono); font-size:11px; color:var(--text-3)}
.hit:hover, .hit[data-active="true"]{background:var(--hover)}
.hit[data-active="true"] .ic{background:var(--primary-subtle); border-color:var(--primary-border); color:var(--primary-text)}

/* ─── Local sidebar app header ───────────────────────────────────────── */
.app-head{display:flex; align-items:center; gap:9px; height:var(--ctl-lg); margin:var(--s3) var(--s3) var(--s1); padding:0 8px;
  border-radius:var(--r-md); color:var(--text)}
.app-head[href]:hover{background:var(--hover)}
.app-head .gl{flex:none; width:24px;height:24px;border-radius:var(--r-md); background:var(--primary-subtle);
  border:1px solid var(--primary-border); color:var(--primary-text); display:grid; place-items:center}
.app-head .gl svg{width:14px;height:14px;stroke-width:1.75}
.app-head b{font-size:13px; font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.shell[data-nav="collapsed"] .app-head{justify-content:center; padding:0; margin-left:0; margin-right:0}
.shell[data-nav="collapsed"] .app-head b{display:none}
.shell[data-nav="collapsed"] .wordmark, .shell[data-nav="collapsed"] .nav a span,
.shell[data-nav="collapsed"] .nav a .cnt, .shell[data-nav="collapsed"] .nav .grp,
.shell[data-nav="collapsed"] .side-user .who{display:none}
.shell[data-nav="collapsed"] .nav a{justify-content:center; padding:0}
.side-toggle{
  position:fixed; z-index:55; top:50%; left:calc(var(--sidebar) - 15px); transform:translateY(-50%);
  width:30px; height:30px; padding:0; display:grid; place-items:center;
  color:var(--text-2); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm); transition:left var(--slow) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.side-toggle svg{width:15px; height:15px; stroke-width:1.9; transition:transform var(--slow) var(--ease)}
.side-toggle:hover{background:var(--hover); color:var(--text); border-color:var(--primary-border)}
.shell[data-nav="collapsed"] .side-toggle{left:calc(var(--rail) - 15px)}
.shell[data-nav="collapsed"] .side-toggle svg{transform:rotate(180deg)}
.navtip{position:relative}
.shell[data-nav="collapsed"] .navtip:hover::after{
  content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  z-index:50; padding:5px 9px; border-radius:var(--r-md); background:var(--elevated);
  border:1px solid var(--border); box-shadow:var(--shadow-pop);
  font-size:12px; color:var(--text); white-space:nowrap; pointer-events:none;
}

/* the shell owns the sidebar; neutralise the artifact-console .app rules */
.shell .side{height:calc(100vh - var(--topbar)); top:var(--topbar)}

/* ─── Home greeting + app cards ──────────────────────────────────────── */
.greet{margin-bottom:var(--s8)}
.greet h1{font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.02em}
.greet p{margin-top:6px; font-size:14px; color:var(--text-2)}
.appcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4)}
.appcard{
  display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel); text-align:left;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.appcard .top-row{display:flex; align-items:center; gap:10px}
.appcard .gl{flex:none; width:34px;height:34px;border-radius:var(--r-lg); background:var(--subtle);
  border:1px solid var(--border); color:var(--text-2); display:grid; place-items:center}
.appcard .gl svg{width:18px;height:18px;stroke-width:1.6}
.appcard b{font-size:15px; font-weight:600}
.appcard p{font-size:13px; color:var(--text-2); line-height:1.5}
.appcard .facts{display:flex; gap:var(--s5); margin-top:auto; padding-top:var(--s2)}
.appcard .facts div{display:flex; flex-direction:column; gap:2px}
.appcard .facts .k{font-size:11px; color:var(--text-2)}
.appcard .facts .v{font-family:var(--font-mono); font-size:15px; font-weight:500}
.appcard:hover{background:var(--hover); border-color:var(--border-strong)}
.appcard:hover .gl{background:var(--surface); border-color:var(--primary-border); color:var(--primary-text)}

/* ─── Responsive shell ───────────────────────────────────────────────── */
@media (max-width:1200px){ .gsearch{width:260px} }

@media (max-width:1023px){
  .shell-body, .shell[data-nav="collapsed"] .shell-body{grid-template-columns:var(--rail) minmax(0,1fr)}
  .side-toggle{left:calc(var(--rail) - 15px)}
  .appcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctxbtn.sub{display:none}
  .gsearch{width:auto; flex:1; max-width:320px}
}

@media (max-width:767px){
  .shell-body, .shell[data-nav="collapsed"] .shell-body{grid-template-columns:minmax(0,1fr)}
  .shell .side{position:fixed; top:0; left:0; z-index:100; width:280px; height:100vh;
    transform:translateX(-100%); transition:transform var(--slow) var(--ease); box-shadow:var(--shadow-dialog)}
  .shell[data-drawer="open"] .side{transform:none}
  .shell[data-drawer="open"] .shell-body::after{content:""; position:fixed; inset:0; z-index:99; background:var(--scrim)}
  .shell .side .wordmark, .shell .side .nav a span, .shell .side .nav a .cnt,
  .shell .side .nav .grp, .shell .side .side-user .who, .shell .side .app-head b{display:block}
  .shell .side .nav a{justify-content:flex-start; padding:0 10px}
  .shell .side .nav a .cnt{margin-left:auto}
  .shell .side .app-head{justify-content:flex-start; padding:0 8px; margin:var(--s3) var(--s3) var(--s1)}
  .gtop{padding:0 var(--s2)}
  .ctxbtn .nm, .ctxbtn .cv{display:none}
  .ctxbtn{padding:0 6px}
  .gsearch{width:auto; flex:none; max-width:none; padding:0}
  .gsearch .lbl, .gsearch kbd{display:none}
  .gsearch{width:var(--touch); height:var(--touch); justify-content:center; background:transparent; border-color:transparent}
  .gsearch:hover{background:var(--hover)}
  .launcher{width:calc(100vw - var(--s4)); left:var(--s2); right:var(--s2)}
  .applist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .apptile{min-height:var(--touch)}
  .popitem{min-height:var(--touch)}
  .appcards{grid-template-columns:minmax(0,1fr)}
  .greet h1{font-size:24px}
  .palette{max-width:none; height:100vh; max-height:100vh; border-radius:0; border:0}
  .hit{min-height:var(--touch)}
  /* drawer separates GLOBAL nav from APP nav — never one long merged list */
  .nav .grp.global{color:var(--primary-text)}
}

/* fix: KPI value + delta must stack, not run inline */
.kpi .k{display:block}
.kpi .v{display:block}
.kpi .d{display:block}

/* fix: artifact table + header fit at ~1200px without clipping or overlap */
.main{min-width:0}
.shell-body>.main{min-width:0}
table.z td, table.z th{min-width:0}
table.z .cell,.tablewrap{min-width:0}

/* ─── 17. Component library additions (from console wireframes) ────────── */
/* eyebrow: small mono kickers above page titles */
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin:0 0 var(--s2)}
/* quality bars (zsite s12: .qbar > span + .tr > .fl + b.num) */
.qbar{display:grid; grid-template-columns:120px minmax(0,1fr) 44px; gap:var(--s3); align-items:center; font-size:13px; padding:7px 0; min-width:0}
.qbar .tr{height:6px; border-radius:var(--r-pill); background:var(--subtle); border:1px solid var(--border); overflow:hidden; min-width:0}
.qbar .fl{height:100%; background:var(--primary); border-radius:var(--r-pill)}
.qbar b.num{text-align:right}
/* skeleton line variant used in studio/editor surfaces */
.sk{height:10px; border-radius:var(--r-sm); background:var(--subtle); border:1px solid var(--border); margin:5px 0; min-width:0}
/* bar-chart placeholder (embedding console) */
.chart-area{position:relative; display:flex; align-items:flex-end; gap:6px; padding:8px 2px 0; margin-bottom:26px; min-height:120px}
.chart-area .bar{flex:1; min-width:0; min-height:4px; background:var(--primary-subtle); border-top:2px solid var(--primary); border-radius:3px 3px 0 0}
.chart-area .x-axis{position:absolute; left:0; right:0; bottom:-22px; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--text-3)}
/* graph placeholder (memory console 06-graph) */
.graph-scroll{max-width:100%; overflow-x:auto}
.graph-spacer{display:inline-block; min-width:72px}
/* console home index cards + link grid (zworks console index) */
.idx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s4); margin-bottom:var(--s8)}
.idx-card{display:flex; flex-direction:column; gap:6px; padding:var(--s5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel); min-width:0}
.idx-card:hover{border-color:var(--primary-border); background:var(--hover)}
.idx-card h3{font-size:14px; font-weight:600}
.link-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--s2); margin-bottom:var(--s2)}
.link-card{display:flex; flex-direction:column; gap:2px; padding:var(--s3) var(--s4); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text); min-width:0}
.link-card:hover{border-color:var(--primary-border); background:var(--primary-subtle)}
.link-num{font-family:var(--font-mono); font-size:11px; color:var(--text-3)}
.link-title{font-size:14px; font-weight:500}
.link-desc{font-size:12px; color:var(--text-2)}
.link-card .go{margin-left:auto; color:var(--text-3); font-size:15px; line-height:1}
/* table mono row links */
.rowlink{color:inherit; font-family:var(--font-mono); font-size:12px}
.rowlink:hover{color:var(--primary-text); text-decoration:underline; text-underline-offset:3px}
@media (max-width:767px){
  .link-grid{grid-template-columns:minmax(0,1fr)}
  .idx-grid{grid-template-columns:minmax(0,1fr)}
  .qbar{grid-template-columns:96px minmax(0,1fr) 40px}
}

/* ==========================================================================
   24. EXTENDED SHARED COMPONENTS — feedback, navigation, forms, AI chat
   ========================================================================== */

/* toast */
.toast-region{position:fixed;z-index:120;right:var(--s5);bottom:var(--s5);width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--s3);align-items:start;padding:var(--s3);background:var(--elevated);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);font-size:13px}
.toast-mark{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--info)}
.toast.is-success .toast-mark{background:var(--success)}.toast.is-warning .toast-mark{background:var(--warning)}.toast.is-danger .toast-mark{background:var(--danger)}
.toast-copy{min-width:0}.toast-copy b{display:block;font-weight:600}.toast-copy p{margin-top:2px;color:var(--text-2);line-height:1.4}.toast-close{width:28px;height:28px}.toast-close svg{width:14px;height:14px}

/* pagination */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.pg-summary{min-width:0}.pg-controls{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.pg-btn{min-width:32px;height:32px;padding:0 9px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-weight:500}
a.pg-btn:hover{background:var(--hover);border-color:var(--border-strong)}.pg-btn.is-current{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.pg-btn.is-disabled{opacity:.45;cursor:not-allowed}.pg-ellipsis{width:24px;text-align:center;color:var(--text-3)}

/* loader */
.loader{display:inline-grid;place-items:center;width:20px;height:20px}.loader>span:first-child{width:100%;height:100%;border:2px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:zw-spin .8s linear infinite}.loader.is-sm{width:14px;height:14px}.loader.is-lg{width:28px;height:28px}@keyframes zw-spin{to{transform:rotate(360deg)}}

/* choice controls */
.checkrow{display:flex;align-items:flex-start;gap:var(--s3);padding:10px 0;cursor:pointer}.checkrow input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--primary);flex:none}.checkrow:has(input:disabled){opacity:.5;cursor:not-allowed}.check-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.check-copy b,.switchrow label{font-size:13px;font-weight:500}.check-copy small{font-size:12px;color:var(--text-2);line-height:1.4}.radio-group{border:0;margin:0;padding:0}.radio-group legend{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.switchrow{display:flex;align-items:center;gap:var(--s4);justify-content:space-between;padding:10px 0}.switch{position:relative;width:36px;height:20px;padding:0;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--subtle);flex:none}.switch span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:1px solid var(--border);transition:transform var(--base) var(--ease)}.switch[aria-checked="true"]{background:var(--primary);border-color:var(--primary)}.switch[aria-checked="true"] span{transform:translateX(16px);background:var(--on-primary)}.switch:disabled{opacity:.5;cursor:not-allowed}

/* accordion + dropzone */
.accordion{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}.accordion details+details{border-top:1px solid var(--border)}.accordion summary{list-style:none;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);font-size:13px;font-weight:500;cursor:pointer}.accordion summary::-webkit-details-marker{display:none}.accordion summary span:last-child{margin-left:auto;color:var(--text-3);transition:transform var(--base) var(--ease)}.accordion details[open] summary span:last-child{transform:rotate(180deg)}.accordion-body{padding:0 var(--s4) var(--s4);color:var(--text-2);font-size:13px;line-height:1.55}
.dropzone{min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--s6);text-align:center;border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--subtle);cursor:pointer}.dropzone:hover{background:var(--hover);border-color:var(--primary)}.dropzone-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text-2)}.dropzone-icon svg{width:17px;height:17px;stroke-width:1.75}.dropzone b{font-size:13px}.dropzone>span:last-child{font-size:12px;color:var(--text-2)}

/* AI conversation — inspired by composable conversation/message patterns */
.conversation{display:flex;flex-direction:column;gap:var(--s4);min-height:220px;max-height:620px;overflow-y:auto;padding:var(--s4);scrollbar-gutter:stable}.conversation-empty{margin:auto;text-align:center;color:var(--text-2)}.conversation-empty b{display:block;color:var(--text);font-size:14px}.conversation-empty p{margin-top:4px;font-size:12px}
.chat-message{display:flex;flex-direction:column;gap:5px;max-width:min(86%,760px);min-width:0}.chat-message.is-user{align-self:flex-end}.chat-message.is-assistant,.chat-message.is-system{align-self:flex-start}.chat-message>header{display:flex;align-items:center;gap:8px;padding:0 4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}.chat-message>header time{margin-left:auto}.chat-message-body{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:10px 13px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.chat-message.is-user .chat-message-body{background:var(--primary-subtle);border-color:var(--primary-border)}.chat-message.is-system .chat-message-body{background:var(--subtle)}.chat-message[aria-busy="true"] .chat-message-body{border-style:dashed}.msg-actions{display:flex;align-items:center;gap:2px;padding:0 2px;opacity:.75}.chat-message:hover .msg-actions,.chat-message:focus-within .msg-actions{opacity:1}

/* prompt input */
.prompt-wrap{display:flex;flex-direction:column;gap:var(--s2)}.prompt-input{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.03);overflow:hidden}.prompt-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subtle)}.prompt-input textarea{width:100%;min-height:74px;max-height:220px;padding:12px 14px 8px;border:0;outline:0;resize:vertical;background:transparent;font-size:13px;line-height:1.5}.prompt-attachments{padding:var(--s2) var(--s3) 0}.prompt-tools{display:flex;align-items:center;gap:var(--s2);padding:6px 8px 8px}.prompt-tools .spacer{flex:1}.model-select{height:28px;max-width:190px;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--text-2);font-size:12px;padding:0 24px 0 8px}.model-select:hover{background:var(--hover);color:var(--text)}

/* attachments + suggestions */
.attachments{display:flex;gap:var(--s2);flex-wrap:wrap}.attachment{display:flex;align-items:center;gap:4px;min-width:0}.attachment>a,.attachment>span{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--subtle)}.attachment-icon{flex:none}.attachment-copy{display:flex;flex-direction:column;min-width:0}.attachment-copy b{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500}.attachment-copy small{font-size:10px;color:var(--text-3)}.attachment .iconbtn{width:26px;height:26px}.attachments.is-list{flex-direction:column}.attachments.is-list .attachment>a,.attachments.is-list .attachment>span{flex:1}.attachments.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));width:100%}.attachments.is-grid .attachment>a,.attachments.is-grid .attachment>span{min-height:80px;width:100%;align-items:flex-start}
.suggestions{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.suggestions::-webkit-scrollbar{display:none}.suggestions .chip{white-space:nowrap}

/* reasoning, tool calls, sources */
.reasoning,.tool-call,.sources{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--subtle);overflow:hidden;font-size:12px}.reasoning>summary,.tool-call>summary,.sources>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 10px;cursor:pointer;color:var(--text-2)}.reasoning>summary::-webkit-details-marker,.tool-call>summary::-webkit-details-marker,.sources>summary::-webkit-details-marker{display:none}.reasoning>summary>span:last-child,.tool-call>summary>span:last-child,.sources>summary>span:last-child{margin-left:auto;transition:transform var(--base) var(--ease)}.reasoning[open]>summary>span:last-child,.tool-call[open]>summary>span:last-child,.sources[open]>summary>span:last-child{transform:rotate(180deg)}.reasoning-mark{color:var(--primary-text)}.reasoning-time{margin-left:auto;color:var(--text-3)}.reasoning-time+span{margin-left:0!important}.reasoning-body{padding:0 12px 12px;color:var(--text-2);line-height:1.6;white-space:pre-wrap}
.tool-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3)}.tool-call.is-running .tool-dot,.tool-call.is-pending .tool-dot{background:var(--warning)}.tool-call.is-completed .tool-dot{background:var(--success)}.tool-call.is-error .tool-dot,.tool-call.is-denied .tool-dot{background:var(--danger)}.tool-state{margin-left:auto;color:var(--text-3)}.tool-state+span{margin-left:0!important}.tool-content{display:flex;flex-direction:column;gap:var(--s3);padding:0 10px 10px}.tool-content section>b{display:block;margin-bottom:6px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}.tool-error{padding:8px 10px;border-radius:var(--r-md);background:color-mix(in oklab,var(--danger) 10%,transparent);color:var(--danger)}
.source-list{display:flex;flex-direction:column;padding:0 8px 8px}.source-item{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:var(--r-md)}a.source-item:hover{background:var(--hover)}.source-num{width:20px;height:20px;display:grid;place-items:center;flex:none;border:1px solid var(--border);border-radius:50%;font-family:var(--font-mono);font-size:10px}.source-item b{display:block;font-size:12px;font-weight:500}.source-item small{display:block;margin-top:1px;color:var(--text-3);font-size:10px}

/* code block + typing */
.codeblock{margin:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--subtle)}.codeblock figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:6px 8px 6px 12px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text-2)}.codeblock pre{margin:0;padding:12px 14px;overflow:auto;font-family:var(--font-mono);font-size:11px;line-height:1.65;color:var(--text);background:var(--surface)}.codeblock code{font-family:inherit;white-space:pre}
.typing{display:inline-flex;align-items:center;gap:4px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.typing>span:not(.sr){width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:typing-pulse 1.1s ease-in-out infinite}.typing>span:nth-child(2){animation-delay:.14s}.typing>span:nth-child(3){animation-delay:.28s}@keyframes typing-pulse{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

@media(max-width:767px){
  .toast-region{right:var(--s4);left:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom));width:auto}.toast{grid-template-columns:auto minmax(0,1fr) auto}.toast>.btn{grid-column:2}.pagination{align-items:stretch}.pg-summary{width:100%}.pg-controls{width:100%;justify-content:space-between}.pg-controls .pg-btn{min-height:40px}.chat-message{max-width:94%}.conversation{padding:var(--s3)}.prompt-input textarea{min-height:88px}.attachments.is-grid{grid-template-columns:1fr 1fr}.msg-actions{opacity:1}
}

/* Prevent intrinsic-width children (suggestions, attachments, code) from widening
   panels and chat surfaces on narrow viewports. */
.panel,.panel-foot,.conversation,.prompt-wrap,.prompt-input,.prompt-tools,.attachments,.suggestions{min-width:0;max-width:100%}
@media(max-width:767px){.prompt-tools{flex-wrap:wrap}.model-select{max-width:150px}}


/* Embedding-console composition only. Visual tokens and primitives come from @zworks/app-shell. */
.embedding-stack{display:grid;gap:var(--s6)}
.embedding-section{display:grid;gap:var(--s4)}
.embedding-form{display:grid;gap:var(--s4)}
.embedding-form .btn{justify-self:start}
.embedding-output{margin-top:var(--s4)}
.embedding-output:empty{display:none}
.embedding-code{font-family:var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.embedding-result-table{margin-top:var(--s4)}
.embedding-page-note{max-width:72ch;color:var(--text-2)}
@media(max-width:767px){.embedding-form .btn{width:100%;justify-content:center}}