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

/* ─── 1. Primitives ───────────────────────────────────────────────────── */
:root{
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --font-mono: "Geist 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:6px; --r-lg:8px; --r-panel:10px; --r-dialog:12px; --r-pill:999px;

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

  --sidebar:232px; --rail:64px; --topbar:56px; --content-max:1440px;

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

/* ─── 2. Light — Stone Olive ──────────────────────────────────────────── */
:root, [data-theme="light"]{
  color-scheme: light;
  --canvas:#F8F8F6;
  --surface:#FFFFFF;
  --subtle:#F3F3F0;
  --elevated:#FFFFFF;
  --border:#E5E5E1;
  --border-strong:#D5D6D0;

  --text:#1E211D;
  --text-2:#656A62;
  --text-3:#6F736A; /* darkened from handoff #8B8F87 (3.29:1) to pass 4.5:1 */
  --on-primary:#FFFFFF;

  --primary:#6E7A43;
  --primary-hover:#5E6939;
  --primary-subtle:#EEF0E5;
  --primary-border:#D7DCC3;
  --primary-text:#5E6939;      /* accent AS TEXT — 5.6:1 on canvas */

  --success:#4F7157;
  --warning:#A57832;
  --danger:#A64B43;
  --danger-hover:#8E3F38;
  --info:#546F86;

  --hover:#F3F3F0;
  --selected:#EEF0E5;
  --scrim:rgba(30,33,29,.42);
  --shadow-pop:0 1px 2px rgba(30,33,29,.06), 0 8px 24px rgba(30,33,29,.10);
  --shadow-dialog:0 2px 4px rgba(30,33,29,.06), 0 18px 52px rgba(30,33,29,.18);
}

/* ─── 3. Dark — Obsidian Minimal ──────────────────────────────────────── */
[data-theme="dark"]{
  color-scheme: dark;
  --canvas:#111310;
  --surface:#171A16;
  --subtle:#1D201B;
  --elevated:#22261F;
  --border:#2B3028;
  --border-strong:#383E34;

  --text:#F2F3EF;
  --text-2:#B9BDB4;
  --text-3:#858A80;
  --on-primary:#111310;

  --primary:#A7B47A;
  --primary-hover:#BAC68E;
  --primary-subtle:#252A1D;
  --primary-border:#3E4730;
  --primary-text:#A7B47A;

  --success:#83A98A;
  --warning:#C9A45F;
  --danger:#CF746C;
  --danger-hover:#DE8A83;
  --info:#82A3BD;

  --hover:#1D201B;
  --selected:#252A1D;
  --scrim:rgba(0,0,0,.62);
  --shadow-pop:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.5);
  --shadow-dialog:0 2px 4px rgba(0,0,0,.5), 0 18px 52px rgba(0,0,0,.6);
}

/* ─── 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}
.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}
.logo img{display:block; width:26px; height:26px; border-radius:6px}
.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 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)}
hr.rule{margin:var(--s4) 0; 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)}
.page-head{display:flex; align-items:flex-start; gap:var(--s6); margin-bottom:var(--s6)}
.page-head .ttl{flex:1; 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}

/* ─── 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)}
[data-theme="dark"] .btn-danger:hover{color:#111310}
.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)}
.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"]{background:var(--selected)}
table.z .cell{display:flex; align-items:center; gap:10px; min-width:0}
table.z .nm{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.z .sub{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 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} }

/* ─── 15. Console additions: charts, status modifiers ─────────────────── */
.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)}
.status.is-active::before{background:var(--primary)}
.status.is-healthy::before{background:var(--success)}
.status.is-running::before{background:var(--info)}
.status.is-standby::before{background:var(--text-3)}
.status.is-warning::before{background:var(--warning)}
.status.is-disabled{color:var(--text-3)}
.status.is-disabled::before{background:var(--text-3)}
.tl.ev-info .dot{border-color:var(--info)}
.tl.ev-primary .dot{border-color:var(--primary)}
.tl.ev-success .dot{border-color:var(--success)}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}