/* copy: internal — house UI kit for internal tools (dashboards, desks, admin panes).
   Source: the Concept Brands revamp review (tools/client-review/render_app.py, Oct 2026), which Kalp chose over
   Mercury on 2026-10-20. Geist for text, PT Mono for small uppercase labels, near-black canvas, white primary
   buttons, hairline borders, no colour beyond one green for done and one red for a problem.
   Serve this folder at /kit/ and link /kit/hq.css. */
@font-face{font-family:Geist;src:url(fonts/geist.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'PT Mono';src:url(fonts/ptmono.woff2) format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:dark;--sb:248px;
  --canvas:#0a0a0a;--pane:#121212;--raise:#171717;--raise2:#1f1f1f;--ink:#f5f5f5;--ink2:rgba(255,255,255,.88);--grey:#a0a09c;
  --grey2:#858585;--line:#232323;--tile:#171717;--btn:#212121;--pri:#fff;--pri-ink:#0a0a0a;--tag:#262626;--tag-ink:#e1e1e1;
  --topbg:rgba(18,18,18,.86);--hover:#171717;--on:#1f1f1f;--scrim:rgba(0,0,0,.6);--field:#0f0f0f;
  --good:#7fcf97;--bad:#ef8a8a;
  --sans:Geist,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;--mono:'PT Mono',ui-monospace,Menlo,monospace}
:root[data-theme=light]{color-scheme:light;--canvas:#f6f6f4;--pane:#fff;--raise:#fff;--raise2:#f1f1ee;--ink:#111;--ink2:#212121;
  --grey:#a0a09c;--grey2:#6f6f6b;--line:#e9e9e6;--tile:#efefec;--btn:#ededeb;--pri:#111;--pri-ink:#fff;--tag:#fff;--tag-ink:#111;
  --topbg:rgba(255,255,255,.92);--hover:#efefec;--on:#fff;--scrim:rgba(0,0,0,.25);--field:#fff;--good:#1f8a4c;--bad:#c23b3b}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 15px/1.45 var(--sans);letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.mono{font:400 12px/1.2 var(--mono);letter-spacing:0;text-transform:uppercase}
.ic{flex:none}
.num{font-variant-numeric:tabular-nums}
.grey{color:var(--grey)}.grey2{color:var(--grey2)}.good{color:var(--good)}.bad{color:var(--bad)}

/* sidebar */
.sb{position:fixed;inset:0 auto 0 0;width:var(--sb);padding:14px 12px;display:flex;flex-direction:column;gap:18px;z-index:30;overflow-y:auto}
.sb-head{display:flex;align-items:center;gap:10px;padding:4px 6px 2px}
.sb-name{font-weight:600;font-size:14.5px;line-height:1.15}
.sb-sub{color:var(--grey);margin-top:3px}
.sb-group{display:flex;flex-direction:column;gap:2px}
.sb-label{color:var(--grey);padding:0 8px 6px}
.sb-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:4px;color:var(--grey2);font-weight:500;font-size:14px;border:1px solid transparent;cursor:pointer}
.sb-item:hover{color:var(--ink);background:var(--hover)}
.sb-item.on{color:var(--ink);background:var(--on);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sb-item .n{margin-left:auto;color:var(--grey)}
.sb-foot{margin-top:auto;padding:10px 8px 4px;border-top:1px solid var(--line);color:var(--grey);display:flex;flex-direction:column;gap:6px}

/* work pane */
.pane{margin:8px 8px 8px calc(var(--sb) + 8px);background:var(--pane);border:1px solid var(--line);border-radius:6px;min-height:calc(100vh - 16px);position:relative}
.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:36px;padding:0 16px;background:var(--topbg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);border-radius:6px 6px 0 0}
.top .mid{text-align:center}
.top .right{justify-self:end;display:flex;align-items:center;gap:14px}
.top .crumb b{font-weight:400;color:var(--grey)}
.menu-btn{display:none;background:none;border:0;padding:0;color:var(--ink);cursor:pointer}
.view{padding:48px 32px 80px}
.theme-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;color:var(--ink)}
.theme-btn .moon{display:none}
:root:not([data-theme=light]) .theme-btn .sun{display:none}
:root:not([data-theme=light]) .theme-btn .moon{display:inline}

/* headings */
.h1{font:500 46px/1.06 var(--sans);letter-spacing:-.045em;margin:0}
.h1 .soft{color:var(--grey)}
.h2{font:500 22px/1.2 var(--sans);letter-spacing:-.04em;margin:0}
.h3{font:500 16px/1.25 var(--sans);letter-spacing:-.03em;margin:0}
.lede{color:var(--grey2);max-width:620px;margin:14px 0 0;font-size:15px;line-height:1.5}
.sec{margin-top:56px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}

/* buttons */
.btns{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap;align-items:center}
.btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:4px;font-weight:500;font-size:13.5px;background:var(--btn);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn.dark{background:var(--pri);color:var(--pri-ink)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.btn:hover{filter:brightness(.94)}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
.link{color:var(--grey2);cursor:pointer}.link:hover{color:var(--ink)}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
.stat{padding:18px 16px 16px;border-left:1px solid var(--line);cursor:default}
.stat[data-href]{cursor:pointer}.stat[data-href]:hover b{color:var(--grey2)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font:500 34px/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--grey);margin-top:10px}

/* filter row */
.bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.filters{font:500 22px/1.2 var(--sans);letter-spacing:-.04em;color:var(--grey);display:flex;flex-wrap:wrap;gap:0 10px}
.filters button{all:unset;cursor:pointer}
.filters button.on,.filters button:hover{color:var(--ink)}
.filters button sup{font:400 11px var(--mono);color:var(--grey2);margin-left:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{all:unset;cursor:pointer;padding:7px 10px;color:var(--grey2)}
.seg button.on{background:var(--pri);color:var(--pri-ink)}

/* tags and status */
.tag{display:inline-block;background:var(--tag);color:var(--tag-ink);padding:5px 7px;border-radius:2px;white-space:nowrap}
.tag.pri{background:var(--pri);color:var(--pri-ink)}
.tag.good{background:transparent;color:var(--good);box-shadow:inset 0 0 0 1px var(--good)}
.tag.bad{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.tag.ghost{background:transparent;color:var(--grey2);box-shadow:inset 0 0 0 1px var(--line)}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{font:400 12px/1.2 var(--mono);text-transform:uppercase;color:var(--grey);text-align:left;padding:0 10px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:middle}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums}
table.t tr.go{cursor:pointer}
table.t tr.go:hover td{background:var(--hover)}
table.t tr.total td{font-weight:600;color:var(--ink)}
table.t .thumb{width:36px;height:36px;border-radius:2px;object-fit:cover;background:var(--tile)}
.empty-row{color:var(--grey);padding:28px 0;text-align:center}

/* key/value grid and lists */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;border:1px solid var(--line);border-radius:2px}
.kv div{padding:16px;border-left:1px solid var(--line)}
.kv div:first-child{border-left:0}
.kv b{display:block;font:500 24px/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.kv span{display:block;color:var(--grey);margin-top:9px}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 24px}
.meta dt{color:var(--grey)}
.meta dd{margin:6px 0 0;color:var(--ink2);font-size:14px;word-break:break-word}
.rsec{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:28px 0;border-top:1px solid var(--line)}
.rsec>.k{font-weight:500;font-size:15px}

/* cards */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.bcard{border:1px solid var(--line);border-radius:4px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;background:var(--raise)}
.bcard.go{cursor:pointer}.bcard.go:hover{border-color:var(--grey2)}
.bcard .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bcard b{font-weight:500;font-size:16px;letter-spacing:-.03em}
.bcard p{margin:0;color:var(--grey2);font-size:14px}
.bcard img.hero{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;background:var(--tile)}

/* forms */
.form{display:grid;gap:14px;max-width:720px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{color:var(--grey)}
.field .hint{color:var(--grey2);font-size:12.5px}
.in,select.in,textarea.in{all:unset;box-sizing:border-box;width:100%;background:var(--field);border:1px solid var(--line);border-radius:4px;padding:9px 11px;font:400 14px/1.4 var(--sans);color:var(--ink)}
textarea.in{min-height:110px;white-space:pre-wrap}
.in:focus{border-color:var(--grey2)}
.count{color:var(--grey2);font:400 11px var(--mono);text-align:right}
.count.over{color:var(--bad)}

/* notices */
.note{border:1px solid var(--line);border-radius:4px;padding:12px 14px;color:var(--grey2);font-size:14px;background:var(--raise)}
.note.bad{border-color:var(--bad);color:var(--ink2)}
.note b{color:var(--ink);font-weight:500}

/* drawer (detail panel over the pane) */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:8px;right:8px;bottom:8px;width:min(720px,calc(100vw - 16px));background:var(--pane);border:1px solid var(--line);border-radius:6px;z-index:41;display:flex;flex-direction:column;overflow:hidden}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;height:36px;padding:0 16px;border-bottom:1px solid var(--line)}
.drawer .db{padding:28px 24px 40px;overflow-y:auto;flex:1}

/* toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--pri);color:var(--pri-ink);padding:10px 14px;border-radius:4px;z-index:60;font-size:14px;max-width:min(680px,90vw)}
.toast.bad{background:var(--bad);color:#fff}

.spin{display:inline-block;width:12px;height:12px;border:1.5px solid var(--grey2);border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:900px){
  :root{--sb:280px}
  .sb{background:var(--canvas);transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 0 1px var(--line)}
  body.nav-open .sb{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:var(--scrim);z-index:25}
  .pane{margin:0;border:0;border-radius:0;min-height:100vh}
  .top{border-radius:0;padding:0 14px;grid-template-columns:1fr auto}
  .top .mid{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:6px}
  .view{padding:30px 14px 64px}
  .h1{font-size:30px}
  .stat{padding:14px 10px}.stat b{font-size:26px}
  .filters{font-size:19px}
  .rsec{grid-template-columns:1fr;gap:12px}
  .form .two{grid-template-columns:1fr}
  table.t .hide-sm{display:none}
}