/*
 * Console design system: the look of the admin panel (and of any future internal screen).
 * Layers: tokens -> base -> shell (sidebar, topbar) -> components. The native controls (inputs, selects, checkboxes...) come from
 * controls.css, which reads the same token names. Every component is a class; nothing is styled by page or id.
 */
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --font-b:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--font-m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --bg:#f5f6f8;--surface:#ffffff;--surface-2:#f0f2f5;--surface-3:#e6e9ef;
  --text:#12161f;--muted:#5f6b7f;--subtle:#8892a4;--line:#e3e7ee;--line-strong:#cdd4df;
  --brand:#2456e6;--brand-ink:#ffffff;--brand-soft:#e8eefd;--accent:#0e9f8e;
  --ok:#137a4b;--ok-soft:#dff4e8;--warn:#9a5700;--warn-soft:#fcefd2;--bad:#c02a1b;--bad-soft:#fde8e5;--info:#1d5fc4;--info-soft:#e3edfc;
  --side:#0e1320;--side-line:#1c2335;--side-text:#a9b3c6;--side-mute:#6f7b92;--side-on:#ffffff;--side-on-bg:rgba(255,255,255,.09);
  --ok-bg:var(--ok-soft);--warn-bg:var(--warn-soft);--bad-bg:var(--bad-soft);--r:8px;--r-lg:12px;--side-w:248px;--side-w-collapsed:68px;--top-h:56px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);--shadow-md:0 10px 30px -10px rgba(15,23,42,.22);--ring:0 0 0 3px color-mix(in srgb,var(--brand) 28%,transparent);
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0a0d14;--surface:#111623;--surface-2:#171d2c;--surface-3:#202839;--text:#e7ebf3;--muted:#98a3b8;--subtle:#6f7a90;--line:#212a3b;--line-strong:#2e3a50;
  --brand:#6f92ff;--brand-ink:#0a0d14;--brand-soft:#16224a;--accent:#3dd6c3;
  --ok:#55d28b;--ok-soft:#10301f;--warn:#f2b655;--warn-soft:#34270d;--bad:#ff8b7d;--bad-soft:#3a1b17;--info:#7aabff;--info-soft:#14274d;
  --side:#070a11;--side-line:#151b29;--shadow-md:0 10px 30px -10px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#0a0d14;--surface:#111623;--surface-2:#171d2c;--surface-3:#202839;--text:#e7ebf3;--muted:#98a3b8;--subtle:#6f7a90;--line:#212a3b;--line-strong:#2e3a50;
  --brand:#6f92ff;--brand-ink:#0a0d14;--brand-soft:#16224a;--accent:#3dd6c3;
  --ok:#55d28b;--ok-soft:#10301f;--warn:#f2b655;--warn-soft:#34270d;--bad:#ff8b7d;--bad-soft:#3a1b17;--info:#7aabff;--info-soft:#14274d;
  --side:#070a11;--side-line:#151b29;--shadow-md:0 10px 30px -10px rgba(0,0,0,.6);color-scheme:dark}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--font-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand);text-underline-offset:.18em}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em;font-weight:650}
h1{font-size:22px}h2{font-size:16px}h3{font-size:14px}
p{margin:0 0 .8em}
code,kbd,pre{font-family:var(--font-m);font-size:.88em}
code{background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
.muted{color:var(--muted)}.subtle{color:var(--subtle)}.small{font-size:12.5px}.mono{font-family:var(--font-m)}.nowrap{white-space:nowrap}.grow{flex:1}.hide{display:none!important}
.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .2s}
html[data-side=collapsed] .shell{grid-template-columns:var(--side-w-collapsed) minmax(0,1fr)}
.sidebar{background:var(--side);color:var(--side-text);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--side-line);z-index:30;overflow:hidden}
.sidebar .brand{display:flex;align-items:center;gap:10px;height:var(--top-h);padding:0 18px;color:#fff;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.01em;border-bottom:1px solid var(--side-line);flex:none}
.brand-img{width:28px;height:28px;border-radius:8px;display:block;flex:none}
.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff;font:800 14px var(--font-b);flex:none}
.side-nav{flex:1;overflow-y:auto;padding:10px 10px 16px;display:grid;gap:2px;align-content:start}
.side-group{font:600 11px var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--side-mute);padding:16px 10px 6px;white-space:nowrap}
.side-link{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r);color:var(--side-text);text-decoration:none;font-weight:500;white-space:nowrap;position:relative}
.side-link .i{width:18px;height:18px}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link.on{background:var(--side-on-bg);color:var(--side-on)}
.side-link.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.side-count{margin-left:auto;background:var(--brand);color:var(--brand-ink);border-radius:999px;font:700 11px var(--font-m);padding:1px 7px;min-width:20px;text-align:center}
.side-foot{padding:10px;border-top:1px solid var(--side-line);flex:none}
html[data-side=collapsed] .side-label,html[data-side=collapsed] .side-group,html[data-side=collapsed] .side-count,html[data-side=collapsed] .brand-text{display:none}
html[data-side=collapsed] .side-link{justify-content:center}html[data-side=collapsed] .sidebar .brand{justify-content:center;padding:0}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--top-h);display:flex;align-items:center;gap:10px;padding:0 24px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;min-width:0}.crumbs b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{width:100%;max-width:1280px;margin:0 auto;padding:28px 24px 96px}
.toasts{position:fixed;top:calc(var(--top-h) + 12px);right:16px;z-index:60;display:grid;gap:10px;width:min(380px,calc(100vw - 32px))}

/* menu (details based dropdown, works without JS) */
.menu{position:relative}.menu>summary{list-style:none;cursor:pointer}.menu>summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:6px;z-index:50}
.menu-pop .menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:6px;color:var(--text);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;text-align:left}
.menu-item:hover{background:var(--surface-2)}.menu-item .i{color:var(--muted)}.menu-item.danger{color:var(--bad)}.menu-item.danger .i{color:var(--bad)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font:700 13px var(--font-b);flex:none}

/* ---------- page head ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 22px}
.page-head p{margin:4px 0 0;color:var(--muted);max-width:70ch}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px;margin-bottom:10px}.back:hover{color:var(--text)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);font:600 13.5px var(--font-b);cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .15s,background-color .15s,border-color .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn.sm{height:30px;padding:0 11px;font-size:12.5px}.btn.lg{height:42px;padding:0 18px;font-size:14.5px}
.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong)}.btn.secondary:hover{background:var(--surface-2);filter:none}
.btn.ghost{background:transparent;color:var(--brand);border-color:transparent}.btn.ghost:hover{background:var(--brand-soft);filter:none}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--line-strong)}.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad);filter:none}
.btn.danger.solid{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.icon{width:36px;padding:0}.btn.icon.sm{width:30px}
.btn[disabled]{opacity:.5;pointer-events:none}
.link{background:none;border:0;color:var(--brand);cursor:pointer;text-decoration:underline;font:inherit;padding:0}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin:0 0 18px;min-width:0}
.card>h2,.card-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.card-head h2{font-size:15px}.card-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.card-body{padding:20px}.card-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);display:flex;gap:8px;align-items:center;justify-content:flex-end}
.card.flush .card-body{padding:0}
/* legacy: a bare .card with direct content keeps working */
.card:not(:has(>.card-body)):not(:has(>.card-head)){padding:20px}
.card:not(:has(>.card-body)):not(:has(>.card-head))>h2{padding:0;border:0;margin:0 0 12px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.g4,.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stack{display:grid;gap:14px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.span2{grid-column:span 2}.span3{grid-column:span 3}

/* ---------- stats ---------- */
.stats,.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px;margin:0 0 20px}
.stat{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);color:var(--text);text-decoration:none}
a.stat:hover{border-color:var(--brand)}
.stat .stat-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:500}
.stat .stat-value{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.stat .stat-hint{display:block;color:var(--subtle);font-size:12px;margin-top:4px}
.stat.ok .stat-value{color:var(--ok)}.stat.warn .stat-value{color:var(--warn)}.stat.bad .stat-value{color:var(--bad)}
.stats>span{display:inline-flex;gap:6px;color:var(--muted)}.stats>span b{color:var(--text)}
.stats:has(>span){display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0}

/* ---------- badges ---------- */
.badge,.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font:600 11.5px var(--font-b);background:var(--surface-3);color:var(--muted);white-space:nowrap}
.badge.dot::before,.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.badge.ok,.pill.done,.pill.ok,.pill.info,.pill.live,.pill.active,.pill.approved,.pill.completed{background:var(--ok-soft);color:var(--ok)}
.badge.warn,.pill.waiting,.pill.warn,.pill.pending,.pill.queued,.pill.running,.pill.paused,.pill.writing,.pill.publishing,.pill.parked,.pill.unverified{background:var(--warn-soft);color:var(--warn)}
.badge.bad,.pill.failed,.pill.error,.pill.blocked,.pill.rejected,.pill.missing,.pill.cancelled{background:var(--bad-soft);color:var(--bad)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.brand{background:var(--brand-soft);color:var(--brand)}
.badge.plain::before,.pill.plain::before{display:none}

/* ---------- tables ---------- */
.table-wrap,.tblwrap,.invwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);margin:0 0 18px}
.card .table-wrap,.card .tblwrap{border:0;box-shadow:none;border-radius:0;margin:0}
table.tbl,table.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th,.table th{position:sticky;top:0;z-index:1;text-align:left;font:600 11.5px var(--font-b);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td,.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td,.table tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td,.table tbody tr:hover td{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
table.tbl:not(.table-wrap *){border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin:12px 0}
.tbl .num,.table .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .acts,.table .acts{text-align:right}.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}.acts form,.inline{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.tbl td a:not(.btn){font-weight:600;text-decoration:none}.tbl td a:not(.btn):hover{text-decoration:underline}
.msg{max-width:420px;word-break:break-word}
.steps{display:flex;gap:4px;margin-bottom:4px}.steps i{width:26px;height:6px;border-radius:3px;background:var(--surface-3)}.steps i.done{background:var(--ok)}.steps i.now{background:var(--brand)}

/* ---------- tabs and toolbar ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto;flex-wrap:nowrap}
.tabs a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--text)}.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.tabs .tab-count{background:var(--surface-3);color:var(--muted);border-radius:999px;font:600 11px var(--font-m);padding:1px 7px}.tabs a.on .tab-count{background:var(--brand-soft);color:var(--brand)}
.toolbar,.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.toolbar input[type=search],.filters input[type=search]{width:min(100%,280px)}
.toolbar select,.filters select{width:auto;min-width:130px}
.toolbar .grow{flex:1}

/* ---------- forms ---------- */
label{display:grid;gap:6px;align-content:start;font-weight:600;font-size:13px}
label .muted,label .help{font-weight:400}
.help{color:var(--muted);font-size:12.5px;font-weight:400}
label.check,label.switch{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px}
input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button]),select,textarea{width:100%}
.filters input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),.toolbar input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]){width:auto}
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.field-error{color:var(--bad);font-size:12.5px}

/* ---------- feedback ---------- */
.flash,.toast,.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);border:1px solid;font-size:13.5px;margin:0 0 16px}
.flash.ok,.toast.ok,.alert.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
.flash.bad,.toast.bad,.alert.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.alert.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)}
.alert.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 35%,transparent);color:var(--info)}
.alert b{display:block;color:inherit}.alert p{margin:0}
.toast{margin:0;box-shadow:var(--shadow-md);background:var(--surface);color:var(--text);border-color:var(--line-strong);animation:toast-in .2s ease}
.toast.ok{border-left:4px solid var(--ok)}.toast.bad{border-left:4px solid var(--bad)}
.toast .toast-x{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;padding:0;line-height:1}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.empty{display:grid;justify-items:center;text-align:center;gap:6px;padding:44px 20px;color:var(--muted)}
.empty .empty-icon{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--subtle);margin-bottom:6px}.empty .empty-icon .i{width:22px;height:22px}
.empty h3{color:var(--text);font-size:15px}.empty p{margin:0;max-width:44ch}

/* ---------- key value, pager ---------- */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:10px 20px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500;min-width:0;word-break:break-word}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin:16px 0}.pager .nums{display:flex;gap:4px;flex-wrap:wrap}
.pager-info{color:var(--muted);font-size:13px}.pager-info b{color:var(--text);font-weight:600}
.pager-nav{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.pager-size{display:inline-flex;align-items:center;gap:4px}.pager-size .muted{margin-right:4px}
.pg.gap{border-color:transparent;background:transparent;min-width:22px;padding:0;color:var(--subtle)}
.pg .i{width:14px;height:14px;flex:none}.pg.step{display:inline-flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap}
@media (max-width:640px){.pager{justify-content:center}}
.pg{min-width:34px;height:34px;padding:0 11px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--text);font-weight:600;font-size:13px;background:var(--surface)}
a.pg:hover{border-color:var(--brand);color:var(--brand)}.pg.cur{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.pg.off{opacity:.45}

/* ---------- dialog (confirm) ---------- */
dialog.confirm{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-md)}
dialog.confirm::backdrop{background:rgba(8,11,18,.55);backdrop-filter:blur(2px)}
dialog.confirm .dlg-body{padding:22px 22px 8px}dialog.confirm h3{font-size:16px;margin-bottom:6px}dialog.confirm p{color:var(--muted);margin:0 0 6px}
dialog.confirm .dlg-foot{display:flex;gap:8px;justify-content:flex-end;padding:16px 22px 20px}

/* ---------- login ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(900px 500px at 50% -10%,var(--brand-soft),transparent 70%),var(--bg)}
.auth-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:28px;display:grid;gap:16px}
.auth-card .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--text);text-decoration:none}

/* ---------- responsive ---------- */
.nav-toggle{display:none}
@media(max-width:900px){
  .shell{grid-template-columns:1fr!important}
  .sidebar{position:fixed;inset:0 auto 0 0;width:var(--side-w);transform:translateX(-100%);transition:transform .2s;z-index:70}
  body.side-open .sidebar{transform:none;box-shadow:var(--shadow-md)}
  body.side-open::after{content:"";position:fixed;inset:0;background:rgba(8,11,18,.45);z-index:65}
  html[data-side=collapsed] .side-label,html[data-side=collapsed] .side-group,html[data-side=collapsed] .brand-text{display:revert}
  .nav-toggle{display:inline-flex}.topbar{padding:0 14px}.content{padding:20px 14px 80px}.g4,.grid4{grid-template-columns:1fr 1fr}.span2,.span3{grid-column:auto}
  .kv{grid-template-columns:1fr;gap:2px}.kv dd{margin-bottom:10px}
}
@media(max-width:560px){.g4,.grid4{grid-template-columns:1fr}.page-head h1{font-size:20px}.menu-pop{right:-8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the details based menus must not inherit the disclosure arrow of controls.css */
details.menu{border:0;background:none;border-radius:0}
details.menu>summary{padding:0;border:0;float:none;display:inline-flex;align-items:center;justify-content:center}
details.menu>summary::after{display:none!important}
details.menu[open]>summary{border:0}
details.menu>.menu-pop{margin:0}
details.menu>.menu-pop>*{margin-inline:0}
details.menu>summary.btn{padding:0}

/* documentation helpers */
.swatch{width:36px;height:36px;border-radius:8px;border:1px solid var(--line-strong);flex:none}
.swatch[data-token="--brand"]{background:var(--brand)}.swatch[data-token="--accent"]{background:var(--accent)}.swatch[data-token="--ok"]{background:var(--ok)}
.swatch[data-token="--warn"]{background:var(--warn)}.swatch[data-token="--bad"]{background:var(--bad)}.swatch[data-token="--info"]{background:var(--info)}
.swatch[data-token="--surface"]{background:var(--surface)}.swatch[data-token="--surface-2"]{background:var(--surface-2)}.swatch[data-token="--line"]{background:var(--line)}
.toolbar.pad{padding:14px 20px 0}

/* inline forms (several small controls in one row) and no-wrap pager buttons */
.inline select,.inline input:not([type=checkbox],[type=radio],[type=hidden]){width:auto;min-width:0}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pg{white-space:nowrap}
.tbl td .inline select{min-width:118px}