/* ==========================================================================
   Tech & Mech Design Library
   Type: Saira Semi Condensed 700 (display), Saira 400/600 (text),
         IBM Plex Mono 400 (data only: codes, slugs, dimensions, hex, counts).
         Tech & Mech's own locked system. Mono never appears as decoration.
   Color: a cool graphite scale tinted to H 258 so client screenshots, which
         arrive in every hue, never fight the chrome. One accent, and it only
         ever means "this is interactive".
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --h:258;

  --s0:oklch(0.973 0.004 258);      /* page */
  --s1:oklch(1 0 0);                /* cards, panels */
  --s2:oklch(0.988 0.003 258);      /* rail, sticky bars */
  --sunken:oklch(0.941 0.006 258);  /* image wells, code */
  --line:oklch(0.903 0.007 258);
  --line-2:oklch(0.845 0.010 258);

  --ink:oklch(0.245 0.021 258);
  --ink-2:oklch(0.468 0.019 258);
  --ink-3:oklch(0.598 0.015 258);

  --accent:oklch(0.520 0.148 258);
  --accent-2:oklch(0.438 0.148 258);
  --accent-soft:oklch(0.948 0.030 258);
  --accent-ink:oklch(0.99 0.004 258);
  --ring:oklch(0.62 0.13 258 / 0.5);

  --ok:oklch(0.560 0.125 152);
  --warn:oklch(0.660 0.140 72);
  --bad:oklch(0.545 0.185 25);

  --display:"Saira Semi Condensed",system-ui,sans-serif;
  --text:"Saira","Saira Semi Condensed",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-xs:0.75rem; --t-sm:0.8125rem; --t-md:0.9375rem; --t-lg:1.0625rem;
  --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2.25rem;

  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;

  --r-1:3px;
  --r-2:6px;
  --rail:16.5rem;
  --gut:clamp(1rem,2.5vw,2rem);

  --lift:0 1px 2px oklch(0.2 0.03 258/0.06), 0 8px 24px -8px oklch(0.2 0.03 258/0.14);
  --lift-2:0 24px 64px -16px oklch(0.2 0.03 258/0.28);
  --fast:120ms cubic-bezier(.2,0,0,1);
  --mid:180ms cubic-bezier(.2,0,0,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --s0:oklch(0.186 0.014 258);
    --s1:oklch(0.228 0.015 258);
    --s2:oklch(0.208 0.014 258);
    --sunken:oklch(0.162 0.014 258);
    --line:oklch(0.312 0.015 258);
    --line-2:oklch(0.392 0.018 258);
    --ink:oklch(0.955 0.006 258);
    --ink-2:oklch(0.758 0.012 258);
    --ink-3:oklch(0.628 0.013 258);
    --accent:oklch(0.740 0.120 258);
    --accent-2:oklch(0.812 0.105 258);
    --accent-soft:oklch(0.300 0.055 258);
    --accent-ink:oklch(0.175 0.020 258);
    --ok:oklch(0.720 0.130 152);
    --warn:oklch(0.790 0.135 72);
    --bad:oklch(0.680 0.160 25);
    --lift:0 1px 2px #0006, 0 8px 24px -8px #0008;
    --lift-2:0 24px 64px -16px #000a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --s0:oklch(0.186 0.014 258);
  --s1:oklch(0.228 0.015 258);
  --s2:oklch(0.208 0.014 258);
  --sunken:oklch(0.162 0.014 258);
  --line:oklch(0.312 0.015 258);
  --line-2:oklch(0.392 0.018 258);
  --ink:oklch(0.955 0.006 258);
  --ink-2:oklch(0.758 0.012 258);
  --ink-3:oklch(0.628 0.013 258);
  --accent:oklch(0.740 0.120 258);
  --accent-2:oklch(0.812 0.105 258);
  --accent-soft:oklch(0.300 0.055 258);
  --accent-ink:oklch(0.175 0.020 258);
  --ok:oklch(0.720 0.130 152);
  --warn:oklch(0.790 0.135 72);
  --bad:oklch(0.680 0.160 25);
  --lift:0 1px 2px #0006, 0 8px 24px -8px #0008;
  --lift-2:0 24px 64px -16px #000a;
  color-scheme:dark;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--s0);color:var(--ink);
  font:400 var(--t-md)/1.55 var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-0.005em;margin:0}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg)}
h4{font:600 var(--t-md)/1.3 var(--text);margin:0}
p{margin:0 0 var(--sp-3)}
a{color:var(--accent);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
img{max-width:100%}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}
.num,td.num,.stat-value,time,.tail{font-variant-numeric:tabular-nums}
code,kbd,pre,.mono,.slug,.code{font-family:var(--mono);font-size:0.86em;font-variant-ligatures:none}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.small{font-size:var(--t-sm)}
.xs{font-size:var(--t-xs)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:-3rem;left:1rem;z-index:99;background:var(--accent);color:var(--accent-ink);padding:.5rem .9rem;border-radius:var(--r-1);transition:top var(--fast)}
.skip:focus{top:1rem}
.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* ---------------------------------------------------------------- shell */
.shell{display:flex;align-items:flex-start;min-height:100dvh}
.rail{
  width:var(--rail);flex:none;position:sticky;top:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--s2);border-right:1px solid var(--line);display:flex;flex-direction:column;
}
.rail::-webkit-scrollbar{width:10px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--s2);border-radius:99px}
.brand{display:flex;align-items:center;gap:.6rem;padding:1rem;border-bottom:1px solid var(--line);color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:30px;height:30px;flex:none;border-radius:var(--r-1);background:var(--ink);color:var(--s1);display:grid;place-items:center;font:700 0.72rem/1 var(--display);letter-spacing:.02em}
.brand-name{font:700 1rem/1.1 var(--display);letter-spacing:-.01em;display:block}
.brand-sub{font-size:var(--t-xs);color:var(--ink-3)}
.rail nav{padding:.6rem;display:flex;flex-direction:column;gap:1px}
.rail-h{font:600 var(--t-xs)/1 var(--text);color:var(--ink-3);padding:1rem .55rem .45rem}
.nav-item{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:var(--r-1);color:var(--ink-2);font-weight:500}
.nav-item:hover{background:var(--sunken);color:var(--ink);text-decoration:none}
.nav-item .i{color:var(--ink-3);flex:none}
.nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-item.on .i{color:var(--accent)}
.nav-item .tail{margin-left:auto;font:400 var(--t-xs) var(--mono);color:var(--ink-3)}
.tier-group{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.3rem}
.tier-group:first-of-type{border-top:0}
.tier-group>summary{display:flex;align-items:center;gap:.5rem;padding:.42rem .55rem;border-radius:var(--r-1);cursor:pointer;color:var(--ink-2);font-weight:600;font-size:var(--t-sm);list-style:none}
.tier-group>summary::-webkit-details-marker{display:none}
.tier-group>summary:hover{background:var(--sunken);color:var(--ink)}
.tier-group>summary .chev{margin-left:auto;color:var(--ink-3);transition:transform var(--fast)}
.tier-group[open]>summary .chev{transform:rotate(90deg)}
.tier-group ul{list-style:none;margin:0 0 .4rem;padding:0 0 0 .55rem}
.tier-group li a{display:flex;gap:.5rem;padding:.26rem .55rem .26rem .75rem;border-left:1px solid var(--line);color:var(--ink-2);font-size:var(--t-sm)}
.tier-group li a:hover{color:var(--ink);border-left-color:var(--line-2);text-decoration:none}
.tier-group li a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.tier-group li a .tail{margin-left:auto;font:400 var(--t-xs) var(--mono);color:var(--ink-3)}
.tier-group li a .tail.zero{color:var(--warn)}
.rail-foot{margin-top:auto;padding:.7rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.35rem}
.rail-foot .who{min-width:0;flex:1;font-size:var(--t-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100dvh}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);
  padding:.6rem var(--gut);background:color-mix(in oklab,var(--s0) 85%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.content{padding:var(--sp-5) var(--gut) var(--sp-8);flex:1;width:100%;max-width:92rem;margin:0 auto}
.content.narrow{max-width:46rem}
.content.reading{max-width:68rem}

.omni{flex:1;max-width:30rem;display:flex;align-items:center;gap:.55rem;padding:.42rem .7rem;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-1);color:var(--ink-3);font:400 var(--t-sm) var(--text);cursor:text;text-align:left}
.omni:hover{border-color:var(--line-2)}
.omni .i{flex:none}
.omni kbd{margin-left:auto;font-size:0.68rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:.05rem .3rem;color:var(--ink-3);background:var(--s2)}
.topbar .spacer{flex:1}
.rail-toggle{display:none}

/* ---------------------------------------------------------------- page head */
.page-head{display:flex;align-items:flex-start;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.page-head .lead{min-width:0;flex:1}
.page-head h1{font-size:var(--t-3xl);margin-bottom:.3rem}
.page-head .sub{color:var(--ink-2);max-width:70ch;margin:0}
.crumb{display:flex;align-items:center;gap:.35rem;font-size:var(--t-sm);color:var(--ink-3);margin-bottom:.45rem}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}
.crumb .i{opacity:.5}
.head-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- controls */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.25rem;padding:.4rem .85rem;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  border-radius:var(--r-1);font:600 var(--t-sm)/1 var(--text);cursor:pointer;white-space:nowrap;
  transition:background var(--fast),border-color var(--fast),transform var(--fast);
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);text-decoration:none;color:var(--accent-ink)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--s1);border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{background:var(--sunken);border-color:var(--ink-3);color:var(--ink)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.quiet:hover{background:var(--sunken);color:var(--ink)}
.btn.sm{min-height:1.9rem;padding:.25rem .6rem;font-size:var(--t-xs)}
.btn.danger{background:transparent;border-color:transparent;color:var(--bad)}
.btn.danger:hover{background:oklch(0.55 0.185 25/0.12);border-color:transparent;color:var(--bad)}
.icon-btn{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid transparent;background:transparent;color:var(--ink-2);border-radius:var(--r-1);cursor:pointer;transition:background var(--fast)}
.icon-btn:hover{background:var(--sunken);color:var(--ink)}
.link-btn{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:var(--t-xs);cursor:pointer}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--bad)}
.inline{display:inline}
.i{width:1.15em;height:1.15em;stroke-width:1.6;vertical-align:-0.2em}
.i-lg{width:1.5rem;height:1.5rem}

input[type=text],input[type=search],input[type=url],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;font:400 var(--t-md)/1.45 var(--text);color:var(--ink);background:var(--s1);
  border:1px solid var(--line-2);border-radius:var(--r-1);padding:.46rem .65rem;
  transition:border-color var(--fast),box-shadow var(--fast);
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
select{appearance:none;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
textarea{resize:vertical;min-height:5rem}
textarea[name=code],textarea[name=tokens],input[name=primary_hex]{font-family:var(--mono);font-size:var(--t-sm);line-height:1.6}
.checkline{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--t-sm);color:var(--ink-2);cursor:pointer}
.checkline input{width:auto;accent-color:var(--accent)}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:var(--sp-4)}
.card{
  display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);
  overflow:hidden;color:var(--ink);transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast);
}
.card:hover{text-decoration:none;border-color:var(--line-2);box-shadow:var(--lift);transform:translateY(-2px)}
.card:hover .card-title{color:var(--accent)}
.card-media{aspect-ratio:16/10;background:var(--sunken);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.card-blank{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:14px 14px;background-position:-1px -1px}
.card-blank span{background:var(--sunken);padding:.2rem .5rem;font-size:var(--t-xs);font-family:var(--mono);color:var(--ink-3)}
.card-body{padding:.75rem .85rem .85rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.card-title{font:600 var(--t-md)/1.25 var(--text);display:flex;gap:.4rem;align-items:baseline;transition:color var(--fast)}
.card-sum{color:var(--ink-2);font-size:var(--t-sm);line-height:1.45;margin:0}
.card-meta{margin-top:auto;padding-top:.5rem;display:flex;align-items:center;gap:.5rem;font-size:var(--t-xs);color:var(--ink-3)}
.card-meta .sep{opacity:.4}
.code{color:var(--accent);font-size:var(--t-xs);border:1px solid var(--line-2);border-radius:2px;padding:0 .25rem;flex:none}

.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;background:var(--ink-3)}
.dot.s-idea{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.dot.s-draft{background:var(--warn)}
.dot.s-approved{background:var(--accent)}
.dot.s-built{background:var(--ok)}
.dot.s-retired{background:var(--line-2)}
.status{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap}

.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);line-height:1.5;padding:.1rem .45rem;border:1px solid var(--line);border-radius:99px;color:var(--ink-2);background:var(--s1)}
a.chip:hover{border-color:var(--line-2);text-decoration:none}
.chip.tag{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 30%,var(--line))}
.chip.solid{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.chip.ok{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 35%,var(--line))}
.chip.warn{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 35%,var(--line))}

/* ---------------------------------------------------------------- panels */
.panel{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2)}
.panel+.panel{margin-top:var(--sp-4)}
.panel-head{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.panel-head h3{font:600 var(--t-sm)/1.2 var(--text);color:var(--ink-2)}
.panel-head .tail{margin-left:auto;font-size:var(--t-xs);color:var(--ink-3)}
.panel-body{padding:.9rem}
.panel-body.flush{padding:0}
.section-title{display:flex;align-items:baseline;gap:.6rem;margin:var(--sp-6) 0 var(--sp-3)}
.section-title:first-child{margin-top:0}
.section-title h2{font-size:var(--t-xl)}
.section-title .tail{margin-left:auto;font-size:var(--t-sm)}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) 21.5rem;gap:var(--sp-5);align-items:start}
.two-col>aside{position:sticky;top:4.25rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.stat{background:var(--s1);padding:.85rem 1rem}
.stat-value{font:700 var(--t-2xl)/1 var(--display);display:block}
.stat-label{font-size:var(--t-xs);color:var(--ink-3)}

dl.spec{display:grid;grid-template-columns:auto 1fr;gap:.5rem .9rem;margin:0;font-size:var(--t-sm)}
dl.spec dt{color:var(--ink-3);white-space:nowrap}
dl.spec dd{margin:0;min-width:0;overflow-wrap:anywhere}
.slug{background:var(--sunken);padding:.05rem .3rem;border-radius:2px;color:var(--ink-2)}

.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .9rem;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.list li:last-child{border-bottom:0}
.list li .tail{margin-left:auto;display:flex;align-items:center;gap:.4rem;color:var(--ink-3);font-size:var(--t-xs)}
.list.rows li{display:block}

.empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--r-2)}
.empty .i{width:1.6rem;height:1.6rem}
.empty p{margin:0;max-width:36ch}

/* ---------------------------------------------------------------- tables */
.table-wrap{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);overflow:auto}
table.table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.table thead th{
  position:sticky;top:0;z-index:1;background:var(--s2);text-align:left;font:600 var(--t-xs)/1 var(--text);
  color:var(--ink-3);padding:.6rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--fast)}
.table tbody tr:hover{background:var(--sunken)}
.table td.num,.table th.num{text-align:right;font-family:var(--mono);font-size:var(--t-xs)}
.table tr.off td{color:var(--ink-3)}
.table .strong{font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- live preview + QA */
.card-blank.live{gap:.35rem;grid-auto-flow:row;align-content:center}
.card-blank.live .i{color:var(--accent)}
.preview{border-bottom:1px solid var(--line)}
.preview-bar{display:flex;align-items:center;gap:.75rem;padding:.45rem .8rem;background:var(--s2);border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-2)}
.preview-title{display:inline-flex;align-items:center;gap:.35rem;font-weight:600}
.preview-bar .tail{margin-left:auto;display:flex;gap:.75rem;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-1);overflow:hidden}
.seg button{border:0;background:var(--s1);color:var(--ink-2);font:600 var(--t-xs)/1 var(--text);padding:.3rem .55rem;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent-soft);color:var(--accent)}
.preview-stage{background:var(--sunken);padding:.75rem;overflow:auto;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:14px 14px}
.preview-stage iframe{display:block;width:100%;max-width:100%;height:36rem;border:1px solid var(--line-2);background:#fff;margin:0 auto;transition:width var(--mid)}
.qa-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.55rem .8rem;border-bottom:1px solid var(--line);background:var(--s2)}
.qa-report{flex-basis:100%;margin:0;padding:.55rem .7rem;font-size:var(--t-xs);max-height:10rem;border-left:3px solid var(--ok);background:var(--s1)}
.qa-report.fail{border-left-color:var(--bad)}

/* ---------------------------------------------------------------- design detail */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--sp-3)}
.gallery.single{grid-template-columns:1fr}
.shot{margin:0;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.shot>button{display:block;width:100%;padding:0;border:0;background:var(--sunken);cursor:zoom-in;line-height:0}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;font-size:var(--t-xs);color:var(--ink-3);border-top:1px solid var(--line)}
.shot figcaption .tail{margin-left:auto;display:flex;gap:.5rem;align-items:center}

.dropzone{
  display:grid;place-items:center;gap:.3rem;padding:var(--sp-5);text-align:center;
  border:1.5px dashed var(--line-2);border-radius:var(--r-2);color:var(--ink-3);background:var(--s1);
  transition:border-color var(--fast),background var(--fast),color var(--fast);cursor:pointer;
}
.dropzone:hover,.dropzone.over{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.dropzone strong{color:var(--ink);font-weight:600;font-size:var(--t-sm)}
.dropzone input[type=file]{display:none}
.upload-row{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.upload-row input[type=text]{flex:1;min-width:12rem}
.upload-row select{width:auto}

.codeblock{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.codeblock+.codeblock{margin-top:var(--sp-3)}
.codeblock>summary{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;cursor:pointer;list-style:none;font-size:var(--t-sm)}
.codeblock>summary::-webkit-details-marker{display:none}
.codeblock>summary:hover{background:var(--sunken)}
.codeblock>summary .chev{color:var(--ink-3);transition:transform var(--fast);flex:none}
.codeblock[open]>summary .chev{transform:rotate(90deg)}
.codeblock[open]>summary{border-bottom:1px solid var(--line)}
.codeblock .tail{margin-left:auto;display:flex;align-items:center;gap:.5rem}
pre{
  margin:0;padding:1rem;overflow:auto;max-height:32rem;background:var(--sunken);
  font-family:var(--mono);font-size:var(--t-sm);line-height:1.6;color:var(--ink);tab-size:2;
}
.code-note{padding:.6rem .8rem;font-size:var(--t-sm);color:var(--ink-2);border-bottom:1px solid var(--line)}

details.adder{margin-top:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-2);background:var(--s1)}
details.adder>summary{display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem;cursor:pointer;color:var(--accent);font-weight:600;font-size:var(--t-sm);list-style:none}
details.adder>summary::-webkit-details-marker{display:none}
details.adder[open]>summary{border-bottom:1px solid var(--line)}
.adder .stack{padding:.85rem}

.stack{display:flex;flex-direction:column;gap:.65rem}
.stack p{margin:0}
.stack label{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-bottom:.2rem}
.stack .helptext,.stack .errorlist,.stack ul{font-size:var(--t-xs);color:var(--ink-3);margin:.2rem 0 0;padding:0;list-style:none}
.stack .errorlist{color:var(--bad)}

/* ---------------------------------------------------------------- form page */
.form-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-5)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.field.span{grid-column:1/-1}
.field>label{display:block;font-weight:600;font-size:var(--t-sm);margin-bottom:.3rem}
.field .help{display:block;margin-top:.3rem;font-size:var(--t-xs);color:var(--ink-3);line-height:1.45}
.field .errorlist{margin:.3rem 0 0;padding:0;list-style:none;font-size:var(--t-xs);color:var(--bad)}
.field.check{display:flex;gap:.55rem;align-items:center}
.field.check>label{margin:0;order:2}
.field.check input{width:auto;accent-color:var(--accent)}
.field select[multiple]{min-height:8rem}
.form-bar{position:sticky;bottom:0;display:flex;gap:.6rem;align-items:center;margin-top:var(--sp-5);padding:.85rem 0 0;border-top:1px solid var(--line);background:var(--s1)}

.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding:.7rem;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);margin-bottom:var(--sp-5)}
.filters input[type=search],.filters input[type=text]{width:auto;min-width:15rem;flex:1}
.filters select{width:auto}

/* ---------------------------------------------------------------- feed */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;padding:.55rem .9rem;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.feed li:last-child{border-bottom:0}
.feed time{color:var(--ink-3);font-size:var(--t-xs);white-space:nowrap;padding-top:.15rem}
.feed .who{font-weight:600}
.feed .what{color:var(--ink-2)}

/* ---------------------------------------------------------------- messages */
.flash{padding:0 var(--gut);max-width:92rem;margin:var(--sp-4) auto 0;width:100%}
.flash p{display:flex;gap:.5rem;align-items:center;padding:.6rem .8rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-1);background:var(--s1);margin:0 0 .5rem}
.flash p.error{border-left-color:var(--bad)}
.flash p.success{border-left-color:var(--ok)}
.notice{padding:.65rem .8rem;border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r-1);background:var(--s1);font-size:var(--t-sm)}
.notice.bad{border-left-color:var(--bad)}
.notice.good{border-left-color:var(--ok)}
.swatch{display:inline-block;width:.85rem;height:.85rem;border-radius:2px;border:1px solid var(--line-2);vertical-align:-2px}

/* ---------------------------------------------------------------- palette */
.scrim{position:fixed;inset:0;z-index:60;background:oklch(0.2 0.02 258/0.45);backdrop-filter:blur(2px);display:grid;place-items:start center;padding:12vh 1rem 1rem}
.scrim[hidden]{display:none}
.palette{width:min(38rem,100%);background:var(--s1);border:1px solid var(--line-2);border-radius:var(--r-2);box-shadow:var(--lift-2);overflow:hidden}
.palette-input{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.palette-input .i{color:var(--ink-3)}
.palette-input input{border:0;padding:0;background:transparent;font-size:var(--t-lg)}
.palette-input input:focus{box-shadow:none}
.palette-results{max-height:min(26rem,60vh);overflow:auto;padding:.35rem}
.palette-group{font:600 var(--t-xs)/1 var(--text);color:var(--ink-3);padding:.6rem .6rem .35rem}
.presult{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .6rem;border-radius:var(--r-1);color:var(--ink);text-align:left;font-size:var(--t-sm)}
.presult:hover,.presult.on{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.presult .i{color:var(--ink-3);flex:none}
.presult.on .i{color:var(--accent)}
.presult .sub{margin-left:auto;color:var(--ink-3);font-size:var(--t-xs);white-space:nowrap;padding-left:.75rem}
.palette-foot{display:flex;gap:1rem;padding:.5rem .9rem;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-3);background:var(--s2)}
.palette-foot kbd{border:1px solid var(--line-2);border-radius:3px;padding:0 .25rem;font-family:var(--mono)}

.lightbox{position:fixed;inset:0;z-index:70;background:oklch(0.15 0.02 258/0.92);display:grid;place-items:center;padding:2rem;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain;box-shadow:var(--lift-2)}
.lightbox figcaption{color:oklch(0.9 0 0);font-size:var(--t-sm);text-align:center;padding-top:.75rem}

/* ---------------------------------------------------------------- auth */
.auth{min-height:100dvh;display:grid;place-items:center;padding:2rem}
.auth-card{width:min(25rem,100%);background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-6);box-shadow:var(--lift)}
.auth-card .brand{border:0;padding:0 0 var(--sp-5)}

/* ---------------------------------------------------------------- prose */
.prose{max-width:74ch}
.prose h1{font-size:var(--t-2xl);margin:var(--sp-6) 0 var(--sp-3)}
.prose h2{font-size:var(--t-xl);margin:var(--sp-6) 0 var(--sp-2)}
.prose h3{font-size:var(--t-lg);margin:var(--sp-5) 0 var(--sp-2)}
.prose h4{margin:var(--sp-4) 0 var(--sp-2)}
.prose p,.prose li{line-height:1.65}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.3rem}
.prose table{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:var(--sp-4) 0;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:.4rem .55rem;text-align:left;vertical-align:top}
.prose th{background:var(--s2);font-weight:600}
.prose pre{border:1px solid var(--line);border-radius:var(--r-2);max-height:none}
.prose code{background:var(--sunken);padding:.1rem .3rem;border-radius:2px}
.prose pre code{background:none;padding:0}
.prose blockquote{margin:var(--sp-4) 0;padding-left:1rem;border-left:2px solid var(--accent);color:var(--ink-2)}
.prose>:first-child{margin-top:0}
.prose-wide{max-width:none}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .two-col{grid-template-columns:1fr}
  .two-col>aside{position:static}
}
@media (max-width:860px){
  .rail{position:fixed;z-index:50;transform:translateX(-100%);transition:transform var(--mid)}
  body.rail-open .rail{transform:none;box-shadow:var(--lift-2)}
  body.rail-open .main::before{content:"";position:fixed;inset:0;z-index:40;background:oklch(0.2 0.02 258/0.4)}
  .rail-toggle{display:inline-grid}
  .form-grid{grid-template-columns:1fr}
  .page-head h1{font-size:var(--t-2xl)}
  .omni kbd{display:none}
}
@media print{.rail,.topbar,.head-actions,.adder,.dropzone{display:none}.shell{display:block}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}