/* Light theme only, tokens carried over from the TasteGraph console. */
:root{
  color-scheme:light;
  --bg:#F3F5F8;--surface:#FFFFFF;--surface-2:#F7F9FB;--ink:#181818;--ink-2:#444A50;--muted:#5E6A75;
  --line:#DDE1E7;--line-2:#E9ECF0;
  --brand:#0B5CAB;--brand-hover:#014486;--brand-wash:#EEF4FF;--link:#0176D3;--on-brand:#FFFFFF;
  --success:#2E844A;--success-wash:#EAF5EE;--warning-wash:#FFF3E5;--error:#BA0517;--error-wash:#FCEBEC;
  --mark:#FFE7A3;--mark-line:#E0A800;
  --v-control:#5E6A75;--v-A:#0B6BCB;--v-B:#B8420F;--v-C:#2E7D32;--v-D:#5A4FCF;
  --shadow:0 2px 2px rgba(0,0,0,.04);
  --body:"Source Sans 3","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:4px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
:root[lang="ko"] body{line-height:1.6;word-break:keep-all}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600}
h1{font-size:22px}h2{font-size:15px}h3{font-size:13px}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
[hidden]{display:none!important}
.small{font-size:12px}.muted{color:var(--muted)}.nowrap{white-space:nowrap}.grow{flex:1;min-width:0}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;white-space:nowrap}
.spacer{flex:1}
.key{position:relative}
.key summary{list-style:none;cursor:pointer;padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;white-space:nowrap}
.key summary::-webkit-details-marker{display:none}
.key-status.ok{color:#1F6B38;border-color:#BFE3CB;background:var(--success-wash)}
.key-status.warn{color:#8A4B00;border-color:#F5CF9C;background:var(--warning-wash)}
.key .pop{position:absolute;right:0;top:calc(100% + 6px);width:300px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12);display:grid;gap:8px}
.key .pop label{display:grid;gap:4px;font-size:12px;font-weight:600}
.top .key + .key{margin-left:6px}
/* a key chip never loses its status word: a status dot leads the label, and when the header is tight the label wraps
   inside the chip ("Server key / ready") instead of being cut to "Server key re…" */
.top .key{min-width:min-content;flex:0 1 auto}
.top .key summary{display:flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px 3px 8px;line-height:1.2;white-space:normal}
.top .key summary::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;opacity:.75}
.top .key[open] summary{box-shadow:0 0 0 3px rgba(11,92,171,.14)}

/* page */
.main{padding:20px 16px 48px}
.page{max-width:1200px;margin:0 auto;display:grid;gap:16px;min-width:0}
.page-h{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;justify-content:space-between}
.page-h > div{min-width:0}
.page-h h1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.page-h p{overflow-wrap:anywhere}
.concept{max-width:720px;color:var(--ink-2);margin-top:4px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs{font-size:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.card-b{padding:16px;display:grid;gap:12px;min-width:0}
.empty{padding:16px;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--brand);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.neutral{color:var(--ink-2)}
.btn.ghost,.btn.danger-ghost{border-color:transparent;background:transparent}
.btn.danger-ghost{color:var(--error)}
.btn.small{min-height:26px;padding:0 10px;font-size:12px}
.btn.big{min-height:40px;padding:0 20px;font-size:15px;justify-self:start}
.btn.starred{color:#8A4B00;border-color:#F5CF9C;background:var(--warning-wash)}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);white-space:nowrap}
.badge.sample{color:var(--brand);border-color:#B8D3F5;background:var(--brand-wash)}
.lbl-control{--c:var(--v-control)}.lbl-A{--c:var(--v-A)}.lbl-B{--c:var(--v-B)}.lbl-C{--c:var(--v-C)}.lbl-D{--c:var(--v-D)}
.chip{display:inline-block;min-width:28px;padding:1px 8px;border-radius:999px;background:var(--c,var(--v-control));color:#fff;font-size:12px;font-weight:700;text-align:center;white-space:nowrap}
input[type=text],input[type=url],input[type=password],input:not([type]),textarea,select{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
select{width:auto;max-width:100%}
textarea{resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.6}
textarea[readonly]{background:var(--surface-2);color:var(--ink-2)}
.frozen-note{color:var(--ink-2)}
.title-input{border:0!important;padding:0!important;font-size:22px;font-weight:600;background:transparent!important}
.question-input{border:0!important;padding:2px 0!important;color:var(--ink-2);background:transparent!important;margin-top:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.seg button{border:0;background:var(--surface);padding:5px 12px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--brand);color:var(--on-brand)}
.seg a{padding:8px 14px;font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none}
.seg a.on{background:var(--brand);color:var(--on-brand)}
.drop{border:2px dashed var(--line);border-radius:8px;padding:20px;text-align:center}
.drop.over{border-color:var(--brand);background:var(--brand-wash)}
.btn[data-armed]{white-space:normal;text-align:center;padding-block:4px;max-width:100%}
.value-row{display:flex;align-items:center;gap:8px;min-width:0}
.value-row .chip{flex:none}
.control-value{font-family:var(--mono);font-size:12.5px;background:var(--mark);padding:2px 6px;border-radius:2px;word-break:break-word;overflow-wrap:anywhere;min-width:0}
.stepper{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.stepper output{min-width:16px;text-align:center;font-weight:700;color:var(--ink)}
.cost{font-size:16px;font-weight:600}

/* lists */
.list{display:grid}
.list-row{display:flex;align-items:center;gap:16px;padding:12px 16px;border-top:1px solid var(--line-2);color:var(--ink);text-decoration:none;min-width:0}
.list-row:first-child{border-top:0}
.list-row:hover{background:var(--surface-2)}
.list-row .grow{display:grid;gap:2px}
.list-row .grow > *{overflow-wrap:anywhere;min-width:0}
.thumb{width:40px;height:52px;border-radius:3px;object-fit:cover;background:var(--line-2);flex:none;display:block}

/* status and prompt */
.status{overflow-wrap:anywhere;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.status.running{border-color:#B8D3F5;background:var(--brand-wash)}
.status.error{border-color:#F2B8BE;background:var(--error-wash);color:var(--error)}
.prompt{margin:0;padding:12px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);font-family:var(--mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
mark{background:var(--mark);color:inherit;padding:1px 2px;border-radius:2px;box-shadow:inset 0 -2px 0 var(--mark-line)}
.settings{color:var(--muted)}
.settings .varied{background:var(--mark);color:var(--ink);padding:0 4px;border-radius:2px}
.settings label{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-2)}

/* grid */
.grid-wrap{overflow-x:auto}
.grid{display:grid;grid-template-columns:48px repeat(var(--cols),minmax(150px,1fr));gap:10px;align-items:start;min-width:calc(48px + var(--cols) * 160px)}
.row-h{font-size:12px;color:var(--muted);align-self:center}
.col-h{display:grid;gap:6px;padding-top:8px;border-top:3px solid var(--c)}
.diff{font-family:var(--mono);font-size:12px;line-height:1.5;word-break:break-word;overflow-wrap:anywhere;min-width:0}
/* the diff chip opens the column's full request */
button.diff{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;text-decoration:underline dotted var(--muted);text-underline-offset:3px}
button.diff:hover{color:var(--link)}
.col-f{display:grid;gap:6px}
textarea.note{font-family:var(--body);font-size:12px}
p.note{white-space:pre-wrap;color:var(--ink-2);font-size:12px;overflow-wrap:anywhere}
.shot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;aspect-ratio:3/4;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);overflow:hidden;padding:0;font-size:12px;color:var(--muted);text-align:center}
button.shot{cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:contain;display:block}
.shot.failed{background:var(--error-wash);border-color:#F2B8BE;color:var(--error);padding:8px}
.shot.empty{border-style:dashed}
.shot.none{visibility:hidden}
.shot.pending{border-color:#B8D3F5;background:var(--brand-wash);color:var(--brand)}
.tries{position:absolute;right:4px;bottom:4px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:11px}
.spinner{width:18px;height:18px;border:2px solid #B8D3F5;border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* recipe */
.run{display:grid;gap:8px}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sample-hint{color:var(--ink-2);overflow-wrap:anywhere}
.lineage{color:var(--ink-2);margin-top:4px;overflow-wrap:anywhere}

/* lightbox */
.lightbox{padding:0;border:0;border-radius:6px;width:100%;max-width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
.lightbox::backdrop{background:rgba(15,20,25,.7)}
.lb{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);max-height:calc(100vh - 32px)}
.lb img{width:100%;height:100%;max-height:calc(100vh - 32px);object-fit:contain;background:#111}
.lb-side{padding:16px;display:grid;gap:10px;align-content:start;overflow:auto}

@media (max-width:640px){
  .top{gap:8px}
  .list-row{flex-wrap:wrap;gap:6px 12px}
  .lb{grid-template-columns:1fr}
  .lb img{max-height:60vh}
  .key .pop{position:fixed;left:16px;right:16px;top:60px;width:auto}
}

.link { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; }
.correct-box { display: flex; gap: 6px; margin-top: 6px; }
.drop[data-busy]{opacity:.7;cursor:progress}

/* Task B */
.pre-wrap { white-space: pre-wrap; }

/* ==== Brand brain (Task D1): appended verbatim from docs/superpowers/sketches/brand-brain/brand-brain.css ==== */
/* ==========================================================================
   Brand brain — additive styles for experiment-bench/styles.css
   Append this whole block to the end of styles.css.

   Scope. The brand-brain screens (library, brand page with its three tabs,
   review, direction page) render their root as <div class="page bb">. Panel
   rules are under .bb. The app shell (nav, top bar) and the glass theme's
   canvas and ink apply wherever <div class="shell"> wraps #main, so every
   page shares one canvas; experiment, recipe and sample cards keep their
   shipped look inside it. To take the panel language app-wide later, drop
   the ".bb " prefix from the "panels" block — nothing else depends on it.

   Markers. [plan] matches the markup in the plan's Tasks 11–14 as written.
   [rec] needs the small markup change listed in
   docs/superpowers/specs/2026-09-30-brand-brain-ui-notes.md; every [rec]
   has a [plan] fallback, so a view built exactly from the plan still reads.

   Visual language (owner's reference, adapted): a light grey canvas with
   white floating panels (radius 16, hairline border, wide soft shadow),
   pill tabs, KPI tiles, filter chips, status pills and thin progress lines.
   The app's font stack and its blue stay; blue is the only interactive
   colour. Green, blue, red and grey appear only in status pills.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root{
  --canvas:#F3F5F8;                 /* = --bg; named for the panel language */
  --panel:#FFFFFF;
  --panel-glass:rgba(255,255,255,.82);
  --panel-line:rgba(16,24,40,.07);
  --panel-radius:16px;
  --panel-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 30px -12px rgba(16,24,40,.12);
  --panel-pad:20px;
  --inset:#F6F7F9;                  /* rows, drop zone, prompts inside a panel */
  --pill-track:#E8EBEF;
  --pill-radius:999px;
  --chip-line:#DDE1E7;
  --ok:#1F7A3E;--ok-wash:#E7F5EC;--ok-dot:#22A652;
  --info:#0B5CAB;--info-wash:#EAF2FC;
  --bad:#B3261E;--bad-wash:#FDECEA;--bad-dot:#E5484D;
  --idle:#5E6A75;--idle-wash:#EEF0F3;--idle-dot:#9AA5B1;
  --warn:#8A4B00;--warn-wash:#FFF3E5;--warn-line:#F5CF9C;
  --spark:#C9D1DA;--spark-now:#5E6A75;
}

/* --- shared, unscoped (hooks only exist on brand-brain screens) ---------- */

/* [plan] type=url is not covered by the base input rule */
input[type=url]{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}

/* layout breakpoints below respond to the width left beside the nav, not
   the viewport: .main is the size container */
.main{container:main / inline-size}

/* [plan] tab bodies and review groups hold several panels; the .page grid gap
   does not reach inside them */
#tab,#groups{display:grid;gap:16px;min-width:0}

/* [plan] text button that opens the source viewer */
.link{display:inline;padding:0;border:0;background:none;color:var(--link);font:inherit;text-align:left;text-decoration:underline;text-decoration-color:#9CC3EC;text-underline-offset:2px;cursor:pointer;overflow-wrap:anywhere}
.link:hover{text-decoration-color:currentColor}

/* ==========================================================================
   Panels — the page language, scoped to .bb
   ========================================================================== */
.bb{gap:20px}
.bb .card{border:1px solid var(--panel-line);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow);background:var(--panel);overflow:hidden}
.bb .card-h{padding:16px var(--panel-pad);border-bottom:1px solid var(--line-2)}
.bb .card-h h2{font-size:15px;font-weight:600}
.bb .card-b{padding:var(--panel-pad)}
.bb .list-row{padding:12px var(--panel-pad)}
.bb .empty{padding:20px var(--panel-pad)}
.bb .card.empty{padding:24px}
.bb .prompt{background:var(--inset);border-color:transparent;border-radius:10px}
.bb .btn{border-radius:8px}
.bb input[type=text],.bb input[type=url],.bb input:not([type]),.bb select,.bb textarea{border-radius:8px}
/* title: large, regular weight — size carries the hierarchy */
.bb .page-h h1{font-size:24px;font-weight:400;letter-spacing:-.005em}
.bb .title-input{font-size:28px!important;font-weight:400!important;letter-spacing:-.01em}

/* --- status pill (non-interactive) ------------------------------------- */
/* [rec] <span class="pill" data-tone="ok|info|bad|idle|warn">label</span> */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:var(--pill-radius);font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--idle-wash);color:var(--idle)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--idle-dot);flex:none}
.pill[data-tone="ok"]{background:var(--ok-wash);color:var(--ok)}
.pill[data-tone="ok"]::before{background:var(--ok-dot)}
.pill[data-tone="info"]{background:var(--info-wash);color:var(--info)}
.pill[data-tone="info"]::before{background:var(--info)}
.pill[data-tone="bad"]{background:var(--bad-wash);color:var(--bad)}
.pill[data-tone="bad"]::before{background:var(--bad-dot)}
.pill[data-tone="warn"]{background:var(--warn-wash);color:var(--warn)}
.pill[data-tone="warn"]::before{background:#E0A800}

/* --- filter chips (interactive) ---------------------------------------- */
/* [rec] <div class="filters" role="group"><button class="filter" aria-pressed="true">전체 <b>23</b></button>… */
.filters{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.filter{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border:1px solid var(--chip-line);border-radius:var(--pill-radius);background:var(--surface);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.filter b{font-weight:400;color:var(--muted)}
.filter:hover{border-color:#B8C2CE;color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.filter[aria-pressed="true"] b{color:rgba(255,255,255,.8)}
.filter[data-tone]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--idle-dot)}
.filter[data-tone="ok"]::before{background:var(--ok-dot)}
.filter[data-tone="info"]::before{background:var(--info)}
.filter[data-tone="bad"]::before{background:var(--bad-dot)}
.filter[data-tone="warn"]::before{background:#E0A800}
.filter[aria-pressed="true"]::before{background:currentColor}
.filter[aria-pressed="true"][data-tone]::before{background:#fff}

/* --- thin progress line with a value ----------------------------------- */
/* [rec] <span class="meter" role="progressbar" aria-valuenow…><span style="width:33%"></span></span> */
.meter{position:relative;display:block;width:100%;max-width:140px;height:3px;margin-top:6px;border-radius:2px;background:var(--line)}
.meter > span{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--brand)}
.meter > span::after{content:"";position:absolute;right:-1px;top:-3px;width:2px;height:9px;border-radius:1px;background:var(--ink-2)}
/* [rec] confidence: <span class="conf"><span class="meter"><span style="width:82%"></span></span>82%</span> */
.conf{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.conf .meter{width:64px;margin:0}
.conf .meter > span{background:var(--idle-dot)}
.conf .meter > span::after{display:none}

/* ==========================================================================
   Brand page (#/b/:id) — header, KPI tiles, pill tabs
   ========================================================================== */

/* [rec] name, notes, then one meta line: language · spend */
.brand-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:6px}
.brand-meta label{display:inline-flex;align-items:center;gap:6px}
.brand-meta select{padding:3px 8px;font-size:12px}
/* [plan] fallback: the language label directly under the spend line */
.page-h > .grow > label.small{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted)}
.page-h > .grow > label.small select{padding:3px 8px;font-size:12px}

/* [rec] KPI tiles right of the title: sources · facts · spend.
   <div class="kpis"><div class="kpi"><span class="kpi-n">7</span><span class="kpi-l">소스</span><span class="kpi-s">검토 대기 1</span></div>…
   Only spend carries a sparkline (daily spend, real usage); counts get none. */
.kpis{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.kpi{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:end;min-width:0}
.kpi-n{font-size:24px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi-l{grid-column:1 / -1;font-size:12px;color:var(--muted);margin-top:2px}
.kpi-s{grid-column:1 / -1;font-size:12px;color:var(--ink-2)}
.spark{display:inline-flex;align-items:flex-end;gap:2px;height:22px;padding-bottom:3px}
.spark > i{display:block;width:4px;min-height:2px;border-radius:1px;background:var(--spark)}
.spark > i:last-child{background:var(--spark-now)}

/* [rec] tab row: pill tabs left, page actions right */
.tabs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* [plan] override: nav.seg (the brand page links) as pill tabs. .seg stays a joined
   segmented control for settings; page tabs become separate pills on a
   track, the active one white — the owner's reference nav. */
nav.seg{display:inline-flex;gap:4px;padding:4px;border:0;border-radius:var(--pill-radius);background:var(--pill-track);overflow:visible;max-width:100%;justify-self:start}
nav.seg a{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 16px;border-radius:var(--pill-radius);color:var(--ink-2);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
nav.seg a:hover{color:var(--ink);background:rgba(255,255,255,.5)}
nav.seg a[aria-selected="true"],nav.seg a.on,nav.seg a[aria-current="page"]{background:var(--surface);color:var(--brand);box-shadow:0 1px 2px rgba(16,24,40,.08)}
/* [rec] count beside a tab name */
nav.seg .count{font-weight:400;color:var(--muted);font-size:12px}

/* ==========================================================================
   Library (#/) — brands panel
   ========================================================================== */
/* [rec] brand actions in the Brands panel head, scoped to the list they add to */
.bb .card-h .actions .btn{min-height:28px}

/* ==========================================================================
   Sources tab (#/b/:id/sources)
   ========================================================================== */

/* [plan] layout when .main is ≥ 1180 wide: the add panel is a narrow column on the left
   (sticky), the source table takes the rest — the reference's side panel. */
@container main (min-width:1180px){
  #tab:has(#drop){grid-template-columns:320px minmax(0,1fr);align-items:start}
  #tab:has(#drop) > section:has(#drop){grid-column:1;grid-row:1 / span 2;position:sticky;top:68px}
  #tab:has(#drop) > #srcStatus{grid-column:2;grid-row:1}
  #tab:has(#drop) > #srcStatus:empty{display:none}
  #tab:has(#drop) > section:has(#list){grid-column:2}
}

/* [plan] drop zone: stacked text, kinds, button */
.drop{display:grid;gap:6px;justify-items:start;padding:20px;border:1.5px dashed #B8C2CE;border-radius:12px;background:var(--inset);text-align:left}
.drop > p:first-child{font-weight:600;font-size:15px;color:var(--ink)}
.drop > .btn{order:3;margin-top:6px}
.drop:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.drop.over{border-style:solid;border-color:var(--brand);background:var(--brand-wash)}
/* [plan] URL row under it; [rec] visible label */
.url-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.url-row > label{flex-basis:100%;font-size:12px;font-weight:600;color:var(--ink-2)}
.url-row > input{flex:1;min-width:0}
#tab:has(#drop) section:has(#drop) .row[style]{margin-top:0!important}

/* [rec] status filter chips in the Sources panel head */
.card-h > .filters{justify-content:flex-end}

/* [plan] source table: one column set shared by every row (subgrid), so
   status, date and actions line up down the list */
#list{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto}
#list > .empty{grid-column:1 / -1}
#list > .list-row[data-row]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:start;column-gap:20px}
#list > .list-row[data-row]:hover{background:transparent}
/* file name and kind badge on one line; detail, errors and inline status below */
.list-row[data-row] > .grow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.list-row[data-row] > .grow > strong{overflow-wrap:anywhere;min-width:0}
.list-row[data-row] > .grow > :not(strong):not(.badge){flex-basis:100%}
.list-row[data-row] > .grow > .status{margin-top:6px;font-size:13px;border-radius:8px}
.list-row[data-row] > .grow > [data-status]:empty{display:none}
.list-row[data-row] > .grow > .badge{font-weight:600;border-radius:6px;padding:0 6px;font-size:11px}
.list-row[data-row] > .actions{justify-content:flex-end;max-width:280px}
/* a long armed label ("다시 클릭하면…") wraps inside the capped column rather than
   widening the shared actions column for every row */
.list-row[data-row] > .actions > .btn{max-width:100%;white-space:normal;text-align:left;height:auto;min-height:26px;padding-top:3px;padding-bottom:3px}
/* [rec] status cell = a pill (tone from the status, table in the notes) and,
   while extracting, the meter under it. onProgress must update the pill's
   text and the meter's width, not the cell's textContent. */
.list-row[data-state] > .grow + .nowrap{display:grid;justify-items:start;gap:0}
.list-row[data-state] > .grow + .nowrap > .pill{justify-self:start}

/* ==========================================================================
   Brain tab (#/b/:id/brain)
   ========================================================================== */

/* [plan] fallback ordering: Ask, then earlier questions, then conflicts, then
   facts — the answer lands near the box that asked it. Not needed once
   #questions moves into the Ask panel ([rec]). */
#tab > section:has(#questions){order:1}
#tab > section:has(#conflicts),#tab > section:has(#facts){order:2}
/* no questions yet: the separate "earlier questions" card has nothing to say */
#tab > section:has(> .list#questions:empty){display:none}

#askNote:empty,#askStatus:empty,#answer:empty{display:none}
/* [rec] the Ask input is the one large field on the page */
.bb #question{min-height:44px;font-size:15px;padding:10px 14px}
.bb #askBtn,.bb #propose{min-height:44px;padding:0 18px}
.bb #goal{min-height:44px;font-size:15px;padding:10px 14px}

/* [rec] the newest answer, directly under the box */
.answer{display:grid;gap:10px;padding:16px 18px;border-radius:12px;background:var(--inset)}
.answer > .q{font-weight:600}
.answer > p{white-space:pre-wrap;overflow-wrap:anywhere;max-width:78ch}

/* [rec] cited facts: clickable, wrapping references (replaces .chip for
   statements; .chip stays for variant labels). Each carries data-view /
   data-locator so the brain view's root click handler opens the viewer. */
.cites{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.cites-label{font-size:12px;color:var(--muted);margin-right:2px}
.cite{display:inline-block;max-width:100%;padding:4px 10px;border:1px solid var(--chip-line);border-radius:10px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12px;line-height:1.45;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.cite:hover{border-color:#9CC3EC;color:var(--ink)}
.cite .cat{color:var(--muted);margin-right:6px}
/* [plan] fallback: cited facts drawn with .chip must wrap, or a 60-char
   statement overflows at 390px (.chip is nowrap, filled, white text) */
#questions .chip,#answer .chip,.card-b > .chip{white-space:normal;text-align:left;overflow-wrap:anywhere;max-width:100%;background:var(--surface);color:var(--ink-2);border:1px solid var(--chip-line);border-radius:10px;font-weight:400;padding:4px 10px;margin:0 6px 6px 0}

/* [plan] earlier questions */
#questions > .list-row{align-items:flex-start}
#questions > .list-row:hover{background:transparent}
#questions > .list-row > .grow{gap:6px}
#questions > .list-row > .grow > span:not(.small):not(.cites){color:var(--ink-2);max-width:78ch}
/* [rec] when #questions sits inside the Ask panel */
.card-b > #questions{margin:0 calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad));border-top:1px solid var(--line-2)}
.card-b > .qa-h{margin-top:4px;font-size:12px;font-weight:600;color:var(--muted)}

/* [plan] conflicts: both statements side by side, topic and note across */
#conflicts > .list-row{align-items:flex-start}
#conflicts > .list-row:hover{background:transparent}
[data-conflict] > .grow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
[data-conflict] > .grow > :not(.row){grid-column:1 / -1}
[data-conflict] > .grow > .row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
[data-conflict] > .grow > .row > .grow{flex:1 1 auto;overflow-wrap:anywhere}
[data-conflict] > .grow > input[data-comment]{max-width:480px}
/* preferred side: brand border, the other side recedes to the inset tone */
[data-conflict] > .grow > .row:has(> .badge){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
[data-conflict] > .grow:has(> .row > .badge) > .row:not(:has(> .badge)){background:var(--inset);border-color:transparent;color:var(--muted)}
[data-conflict] .row > .badge{color:var(--brand);border-color:#B8D3F5;background:var(--brand-wash)}
/* [rec] source link inside each side */
[data-conflict] .row .where{font-size:12px;color:var(--muted)}

/* [plan] conflict flag badge on a fact */
.badge.conflict{color:var(--warn);border-color:var(--warn-line);background:var(--warn-wash)}

/* [plan] facts: category sub-heads inside one panel, then compact rows */
#facts > .card-h{padding:8px var(--panel-pad);background:var(--inset);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
#facts > .card-h:first-child,#facts > .filters + .card-h{border-top:0}
#facts > .card-h h3{display:flex;align-items:baseline;gap:8px}
#facts > .list > .list-row{padding:10px var(--panel-pad);align-items:flex-start}
#facts > .list > .list-row:hover{background:transparent}
#facts .list-row > .grow > .badge{justify-self:start}
/* [rec] with the statement wrapped in .statement, the source moves to a
   right-hand column at desktop: one line per fact instead of two */
#facts .list-row > .grow:has(> .statement){grid-template-columns:minmax(0,1fr) minmax(200px,340px);column-gap:24px;align-items:baseline}
#facts .list-row > .grow > .statement{overflow-wrap:anywhere}
/* [rec] category filter chips at the top of the facts panel */
#facts > .filters{padding:12px var(--panel-pad);border-bottom:1px solid var(--line-2)}

/* ==========================================================================
   Review (#/b/:id/review/:sourceId)
   ========================================================================== */
[data-fact]{align-items:flex-start}
[data-fact]:hover{background:transparent}
[data-fact] > .grow{gap:6px}
[data-fact] > .grow > .badge{justify-self:start}
[data-fact] .statement{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
[data-fact] > .actions{flex:none;gap:4px}
/* [plan] override: the inline conflict notice is a flag, not an error */
[data-fact] > .grow > .status.error,.status.flag{border-color:var(--warn-line);background:var(--warn-wash);color:#6B3A00;padding:6px 10px;border-radius:8px}
[data-fact] > .grow > .status{justify-self:start;max-width:100%}
.correct-box{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.correct-box > input{flex:1 1 240px;min-width:0}
/* [rec] row state from data-reviewed on the row; the plan's state badge
   takes the pill tone */
[data-fact][data-reviewed="kept"] > .grow > .badge{background:var(--ok-wash);border-color:transparent;color:var(--ok)}
[data-fact][data-reviewed="corrected"] > .grow > .badge{background:var(--info-wash);border-color:transparent;color:var(--info)}
[data-fact][data-reviewed="removed"] > .grow > .badge{background:var(--idle-wash);border-color:transparent;color:var(--idle)}
[data-fact][data-reviewed="removed"] .statement{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted)}
[data-fact][data-reviewed="kept"] .statement,[data-fact][data-reviewed="corrected"] .statement{color:var(--ink-2)}
/* [rec] where · confidence on one line */
[data-fact] .fact-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
[data-fact] .original{font-size:12px;color:var(--muted);text-decoration:line-through;overflow-wrap:anywhere}
/* [rec] the chosen action reads as pressed */
[data-fact] .btn[aria-pressed="true"]{background:var(--brand-wash);border-color:#B8D3F5;color:var(--brand)}

/* [rec] docked action bar: pending count, Keep all, Approve. Frosted — the
   one place translucency does something, because rows scroll under it. */
.review-bar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:12px 16px;background:var(--panel-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--panel-line);border-radius:var(--panel-radius);box-shadow:0 12px 32px -12px rgba(16,24,40,.25)}
.review-bar #pendingCount{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink)}

/* ==========================================================================
   Direction tab and direction page (#/b/:id/direction, #/d/:id)
   ========================================================================== */
#dirStatus:empty{display:none}
#dirs > .list-row{align-items:flex-start}

/* [plan] fallback: field label heads inside a panel body become plain labels */
.card-b > .card-h{padding:0;border:0}
.card-b > .card-h h3{font-size:12px;font-weight:600;color:var(--muted)}
.card-b > .card-h + p{margin-top:-8px;overflow-wrap:anywhere}
.card-b > .card-h + .prompt{margin-top:-6px}

/* [rec] main column + evidence rail when .main is ≥ 960 wide */
.split{display:grid;gap:20px;min-width:0}
.split-main,.split-side{display:grid;gap:20px;align-content:start;min-width:0}
@container main (min-width:960px){
  .split{grid-template-columns:minmax(0,1fr) 360px}
  .split-side{position:sticky;top:68px}
}

/* [rec] the four fields as a 2 × 2 grid */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.fields > div{padding:16px var(--panel-pad);border-top:1px solid var(--line-2);min-width:0}
.fields > div:nth-child(-n+2){border-top:0}
.fields > div:nth-child(2n){border-left:1px solid var(--line-2)}
.fields dt{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.fields dd{margin:0;overflow-wrap:anywhere}

/* [rec] briefs: the image brief (the one that opens as an experiment) first
   and across; copy and video side by side under it */
.briefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.brief{display:grid;gap:6px;align-content:start;min-width:0}
.brief.lead{grid-column:1 / -1}
.brief-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brief-h h3{font-size:13px}
.brief .prompt{margin:0}
/* copy and video briefs are prose for people, set in the body face; the image
   brief is a model prompt and stays mono like every prompt in the app */
.brief:not(.lead) .prompt{font-family:var(--body);font-size:13.5px;line-height:1.65}

/* ==========================================================================
   Source viewer (the shared #lightbox)
   ========================================================================== */
/* [plan] the viewer renders .lb-side first; the image lightbox renders it
   second. Side first = viewer: a narrow column, the source wide. */
.lightbox:has(> .lb > .lb-side:first-child){border-radius:var(--panel-radius)}
.lb:has(> .lb-side:first-child),.lb.viewer{grid-template-columns:minmax(220px,280px) minmax(0,1fr);height:min(calc(100vh - 32px),820px)}
.lb:has(> .lb-side:first-child) > .lb-side{padding:var(--panel-pad);border-right:1px solid var(--line-2);align-content:start}
.lb:has(> .lb-side:first-child) > .lb-side h2{overflow-wrap:anywhere}
.lb:has(> .lb-side:first-child) > .lb-side > .btn{justify-self:start;border-radius:8px}
.lb:has(> .lb-side:first-child) > :last-child{min-width:0;min-height:0;overflow:auto;background:var(--inset);display:grid;place-items:start center}
.lb:has(> .lb-side:first-child) > :last-child > img{width:auto;height:auto;max-width:100%;max-height:100%;background:#111;align-self:center}
.lb:has(> .lb-side:first-child) > :last-child > .prompt{width:100%;max-height:none!important;margin:0;border:0;border-radius:0;background:var(--inset)}
.lb:has(> .lb-side:first-child) mark{scroll-margin:40vh}
/* [rec] the fact being checked, quoted in the side column */
.lb-side .viewer-fact{padding:10px 12px;border-radius:10px;background:var(--inset);font-size:13px;overflow-wrap:anywhere}

/* ==========================================================================
   App shell — M3-style navigation around the existing #main (additive)
   index.html gains #menuBtn, .switcher and .search in .top, and wraps
   <main id="main"> in <div class="shell" data-nav="…"> with <nav class="nav"
   id="nav"> before it, plus <div class="scrim"> after it. Routes, #main,
   #tab and the .seg tabs are untouched: the nav is re-rendered from the same
   parsed route on every route() call.
   Modes by width:
     ≥ 1280   rail (80) + drawer (256) pinned; the rail's last button unpins
     641–1279 rail only; the drawer floats over the page when opened
     ≤ 640    no rail; the drawer slides in behind #menuBtn over a scrim
   ========================================================================== */

/* slim, frosted top bar: content scrolls under it */
.top{height:56px;gap:10px;background:var(--panel-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--panel-line)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:rgba(16,24,40,.06)}
.icon-btn svg{width:22px;height:22px}
#menuBtn{margin-left:-8px}
#searchBtn{display:none}

/* brand switcher: the current brand, a popover list of brands */
.switcher{position:relative;min-width:0}
.switcher > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;max-width:220px;min-height:34px;padding:0 12px;border:1px solid var(--chip-line);border-radius:var(--pill-radius);background:var(--surface);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.switcher > summary::-webkit-details-marker{display:none}
.switcher > summary > span{overflow:hidden;text-overflow:ellipsis}
.switcher > summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);flex:none}
.switcher .pop{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:260px;padding:6px;display:grid;gap:2px;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;box-shadow:0 16px 40px -12px rgba(16,24,40,.25)}
.switcher .pop a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13px}
.switcher .pop a:hover{background:var(--inset)}
.switcher .pop a[aria-current]{background:var(--brand-wash);color:var(--brand);font-weight:600}
.switcher .pop a small{color:var(--muted)}
.switcher .pop hr{border:0;border-top:1px solid var(--line-2);margin:4px 2px}

/* search: a pill field; results are a later task (see the notes) */
.search{position:relative;display:block;flex:0 1 360px;min-width:0}
.search input{width:100%;height:36px;padding:0 14px 0 36px;border:1px solid transparent;border-radius:var(--pill-radius);background:rgba(16,24,40,.05);font-size:13px}
.search input:focus{background:var(--surface);border-color:var(--chip-line)}
.search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* shell grid */
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
.shell > .main{min-width:0;padding:20px 24px 48px}
.nav{position:sticky;top:var(--top-h,56px);height:calc(100vh - var(--top-h,56px));display:flex;z-index:9}
.rail{width:80px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 16px}
.rail a,.rail button{display:grid;justify-items:center;gap:4px;width:76px;padding:0 0 4px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:12px;line-height:1.3;text-decoration:none;text-align:center;cursor:pointer}
.rail .ic{display:grid;place-items:center;width:52px;height:30px;border-radius:var(--pill-radius);transition:background-color .15s}
.rail .ic svg{width:20px;height:20px}
.rail a:hover .ic,.rail button:hover .ic{background:rgba(16,24,40,.06)}
.rail > [aria-current] .ic,.rail > [data-active] .ic{background:var(--brand-wash);color:var(--brand)}
.rail > [aria-current],.rail > [data-active]{color:var(--ink);font-weight:600}
.rail .rail-end{margin-top:auto}

/* drawer: a floating panel beside (pinned) or over (open) the page */
.drawer{width:256px;flex:none;margin:8px 0;padding:12px 10px 20px;overflow:auto;background:var(--panel-glass);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--panel-line);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow)}
.drawer h2{margin:14px 12px 6px;font-size:12px;font-weight:600;color:var(--muted)}
.drawer h2:first-child{margin-top:4px}
.nav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 12px;border-radius:var(--pill-radius);color:var(--ink-2);font-size:13px;text-decoration:none;min-width:0}
.nav-item > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav-item:hover{background:rgba(16,24,40,.05);color:var(--ink)}
.nav-item[aria-current="page"]{background:var(--brand-wash);color:var(--brand);font-weight:600}
.nav-item[aria-current="page"] small{color:var(--brand)}
.nav-item.sub{margin-left:14px;min-height:32px}
.nav-item.sub2{margin-left:28px;min-height:30px;font-size:12px}
.nav-item.add{color:var(--brand);font-weight:600}
button.nav-item{width:100%;border:0;background:none;font:inherit;font-size:13px;text-align:left;cursor:pointer}
button.nav-item:disabled{opacity:.5;cursor:default}
.nav-empty{margin:0 12px 4px;font-size:12px;color:var(--muted)}
.nav-error{margin:6px 4px 0;font-size:12px}
/* an expandable group (a brand): <details class="nav-group"><summary class="nav-item">… */
.nav-group > summary{list-style:none;cursor:pointer}
.nav-group > summary::-webkit-details-marker{display:none}
.nav-group > summary::after{content:"";width:6px;height:6px;margin-right:2px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);flex:none;transition:transform .15s}
.nav-group[open] > summary::after{transform:translateY(-2px) rotate(45deg)}
.nav-group[open] > summary{color:var(--ink);font-weight:600}
.nav-group > div{display:grid;gap:2px;padding:2px 0 6px}
.scrim{display:none}

/* ≥ 1280: drawer pinned unless the rail button unpinned it */
@media (min-width:1280px){
  #menuBtn{display:none}
  .shell[data-nav="closed"] .drawer{display:none}
}
/* 641–1279: rail only; the drawer floats over the page when open */
@media (min-width:641px) and (max-width:1279px){
  .nav{position:sticky}
  .drawer{display:none;position:absolute;left:80px;top:0;bottom:0;box-shadow:0 24px 60px -16px rgba(16,24,40,.35)}
  .shell[data-nav="open"] .drawer{display:block}
  /* #main is inert while the drawer floats over it, so the page behind is a scrim to tap it away */
  .shell[data-nav="open"] .scrim{display:block;position:fixed;inset:0;z-index:8;background:rgba(15,20,25,.22)}
  .rail .pin{display:none}
}

/* "On this page": right-hand contents column, rendered by a view into #tab
   as <nav class="toc" aria-label="이 페이지에서">. Its links are buttons with
   data-scroll="<id>", because the hash is the route. */
.toc{display:none}
@container main (min-width:900px){
  #tab:has(> .toc){grid-template-columns:minmax(0,1fr) 188px;column-gap:28px;align-items:start}
  #tab:has(> .toc) > :not(.toc){grid-column:1}
  #tab > .toc{display:grid;gap:2px;grid-column:2;grid-row:1 / span 9;position:sticky;top:80px;align-content:start}
  #tab:has(> .toc) #facts > .filters{display:none}
}
.toc > p{margin:0 0 6px 12px;font-size:12px;color:var(--muted)}
.toc button{display:flex;justify-content:space-between;gap:8px;padding:5px 12px;border:0;border-left:2px solid var(--line);background:none;color:var(--ink-2);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.toc button small{color:var(--muted);font-size:12px}
.toc button.sub{padding-left:24px;font-size:12px}
.toc button:hover{color:var(--ink)}
.toc button[aria-current="true"]{border-left-color:var(--brand);color:var(--brand);font-weight:600}

/* ==========================================================================
   Library landing — cards
   ========================================================================== */
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.section-h h2{font-size:17px;font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.bb .bcard{display:grid;gap:12px;align-content:start;padding:18px 20px;color:var(--ink);text-decoration:none;transition:box-shadow .15s,border-color .15s}
.bb a.bcard:hover{border-color:#B8D3F5;box-shadow:0 1px 2px rgba(16,24,40,.04),0 16px 36px -14px rgba(16,24,40,.22)}
.bcard h3{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.bcard .desc{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard .stats{display:flex;gap:20px;flex-wrap:wrap}
.bcard .stats b{display:block;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.bcard .stats span{font-size:12px;color:var(--muted)}
.bcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.bb .bcard.new{place-content:center;justify-items:center;min-height:180px;border:1.5px dashed #B8C2CE;background:transparent;box-shadow:none;color:var(--brand);font:inherit;font-weight:600;cursor:pointer}
.bb .bcard.new:hover{background:var(--brand-wash);border-color:var(--brand)}
.bcard.new small{font-weight:400;color:var(--muted)}
.bcard .thumbs{display:flex;gap:6px}
.bcard .thumbs img{width:44px;height:58px;border-radius:6px;object-fit:cover}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}

/* ==========================================================================
   390px (≤ 640px): rows wrap, nothing scrolls sideways
   ========================================================================== */
@media (max-width:640px){
  /* shell: no rail; the drawer slides in behind #menuBtn over a scrim */
  .top{height:auto;min-height:56px}
  .switcher,.search{display:none}
  #searchBtn{display:inline-grid;order:1;margin-left:auto}
  .shell{display:block}
  .shell > .main{padding:16px 16px 48px}
  /* closed, the drawer is hidden as well as moved: its links leave the tab order and the accessibility tree */
  .nav{position:fixed;top:0;left:0;bottom:0;height:auto;z-index:30;transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
  .shell[data-nav="open"] .nav{transform:none;visibility:visible;transition-delay:0s}
  .rail{display:none}
  .drawer{width:min(320px,calc(100vw - 72px));margin:8px;height:calc(100% - 16px)}
  .shell[data-nav="open"] .scrim{display:block;position:fixed;inset:0;z-index:29;background:rgba(15,20,25,.35)}
  .pair{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}

  /* header (Task 10): name and language on the first line, both key chips on the second */
  .top{flex-wrap:wrap;height:auto;min-height:52px;padding:8px 16px;row-gap:6px}
  .top::after{content:"";order:2;flex-basis:100%;height:0}
  #langBtn{order:1}
  .top .key{order:3}
  /* the three chips keep one row at 390: no extra margin between them, a slimmer inset, 32 px to tap */
  .top{column-gap:6px}
  .top .key + .key{margin-left:0}
  .top .key summary{min-height:32px;padding:3px 9px 3px 7px;gap:5px}
  .key .pop{top:calc(var(--top-h,56px) - 4px)} /* under the measured header, however it wraps */

  .bb{gap:16px}
  .bb .card{border-radius:12px}
  :root{--panel-pad:16px}
  .bb .title-input{font-size:24px!important}

  /* brand header: name block full width; KPI tiles in one row under it */
  .page-h > .grow:has(> #brandName){flex:1 1 100%}
  .kpis{gap:20px;width:100%}
  .kpi-n{font-size:20px}

  /* pill tabs share the width; actions wrap under them */
  .tabs-row{align-items:stretch}
  nav.seg{display:flex;width:100%}
  nav.seg a{flex:1;justify-content:center;padding:0 8px}

  /* Ask and goal: the field takes the line, the priced button goes under it */
  .bb .row > #question,.bb .row > #goal{flex:1 1 100%}
  .bb #askBtn,.bb #propose{flex:1 1 100%}

  .card-h > .filters{justify-content:flex-start}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--panel-pad));padding-right:var(--panel-pad)}
  .filters::-webkit-scrollbar{display:none}

  /* long armed labels ("Click again to remove…") wrap instead of pushing the page wide */
  .list-row[data-row] > .actions > .btn,#removeBrand{max-width:100%;white-space:normal;text-align:left;height:auto;padding-top:3px;padding-bottom:3px}

  /* source table falls back to wrapping rows: name block, then status · date, then actions */
  #list{display:block}
  #list > .list-row[data-row]{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .list-row[data-row] > .grow{flex:1 1 100%}
  .list-row[data-row] > .actions{flex-basis:100%;justify-content:flex-start;margin-top:2px}

  #facts .list-row > .grow:has(> .statement){grid-template-columns:1fr}
  [data-conflict] > .grow{grid-template-columns:1fr}
  [data-conflict] > .grow > input[data-comment]{max-width:none}

  [data-fact] > .actions{flex-basis:100%}
  .review-bar{bottom:8px}
  .review-bar .btn{flex:1}
  .review-bar #pendingCount{flex-basis:100%}

  .fields{grid-template-columns:1fr}
  .fields > div:nth-child(2){border-top:1px solid var(--line-2)}
  .fields > div:nth-child(2n){border-left:0}
  .briefs{grid-template-columns:1fr}

  .lb:has(> .lb-side:first-child),.lb.viewer{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:calc(100vh - 32px)}
  .lb:has(> .lb-side:first-child) > .lb-side{border-right:0;border-bottom:1px solid var(--line-2)}
}

@media (prefers-reduced-transparency:reduce){
  .review-bar,.top,.drawer{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .nav,.rail .ic,.nav-group > summary::after,.bcard{transition:none}
}

/* anchors scrolled to by data-scroll clear the sticky top bar */
.bb [id]{scroll-margin-top:calc(var(--top-h,56px) + 16px)}

/* ==========================================================================
   Glass theme — "morning light through frosted glass"
   Frosted panels need something behind them, so the canvas becomes soft
   light: sky, aqua and lilac fields over a pale blue-grey. The ink moves
   from neutral black to a deep navy; the blue #0B5CAB stays the only
   interactive colour; status tones shift to mint / rose / amber / slate.
   Applied wherever the shell is (body:has(> .shell)), so every page shares
   one canvas; panels are glass only inside .bb.
   ========================================================================== */
body:has(> .shell){
  --bg:#E6ECF7;
  --ink:#13203A;--ink-2:#34425C;--muted:#4A5873;
  --link:#0B5CAB;--placeholder:#66708A;--nav-current:#014486; /* AA on glass and canvas (Task A11Y1) */
  --line:rgba(19,32,58,.14);--line-2:rgba(19,32,58,.08);
  --surface-2:rgba(255,255,255,.55);
  --panel:rgba(255,255,255,.44);
  --panel-glass:rgba(255,255,255,.42);
  --panel-line:rgba(255,255,255,.72);
  --panel-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 6px rgba(28,52,110,.05),0 18px 40px -18px rgba(28,52,110,.22);
  --inset:rgba(255,255,255,.5);
  --pill-track:rgba(255,255,255,.42);
  --chip-line:rgba(19,32,58,.12);
  --ok:#08664F;--ok-wash:rgba(46,196,160,.16);--ok-dot:#22B892;
  --bad:#B42346;--bad-wash:rgba(232,84,118,.13);--bad-dot:#E5486E;
  --idle:#4F5F7A;--idle-wash:rgba(79,95,122,.10);--idle-dot:#8C9AB3;
  --warn:#8F5200;--warn-wash:rgba(255,178,62,.18);--warn-line:rgba(224,150,40,.45);
  --info-wash:rgba(11,92,171,.10);
  --brand-wash:rgba(11,92,171,.10);
  --spark:rgba(11,92,171,.22);--spark-now:#0B5CAB;
  --glass-blur:blur(22px) saturate(1.5);
  --top-glass:rgba(255,255,255,.46);--bar-glass:rgba(255,255,255,.6);
  background:var(--bg);
}
/* the light: three soft colour fields, fixed so panels slide over them */
body:has(> .shell)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(52vw 58vh at 4% -6%,rgba(92,150,238,.72),transparent 70%),
  radial-gradient(46vw 62vh at 106% 12%,rgba(78,205,182,.62),transparent 70%),
  radial-gradient(58vw 58vh at 62% 112%,rgba(160,136,244,.62),transparent 72%),
  radial-gradient(34vw 40vh at 26% 92%,rgba(255,168,196,.40),transparent 70%),
  radial-gradient(34vw 34vh at 46% 40%,rgba(255,255,255,.6),transparent 70%)}

/* glass surfaces */
.bb .card,.drawer{background:var(--panel);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--panel-line);box-shadow:var(--panel-shadow)}
/* the header's popovers sit inside .top, itself a backdrop root, so a blur there cannot see the page: they stay opaque */
.top .key .pop,.top .switcher .pop{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(19,32,58,.12);box-shadow:0 18px 44px -14px rgba(28,52,110,.32)}
.top{background:var(--top-glass);border-bottom-color:rgba(255,255,255,.6)}
.bb .card-h{border-bottom-color:var(--line-2)}
.bb .list-row{border-top-color:var(--line-2)}
.bb .list-row:hover{background:rgba(255,255,255,.4)}
#facts > .card-h{background:rgba(255,255,255,.35)}
.review-bar{background:var(--bar-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--panel-line)}

/* controls on glass: translucent white, crisp edge */
.bb .btn:not(.primary):not(.ghost):not(.danger-ghost),.shell .btn.neutral{background:rgba(255,255,255,.66);border-color:rgba(19,32,58,.12)}
.bb .btn:not(.primary):not(.ghost):not(.danger-ghost):hover{background:rgba(255,255,255,.9)}
.bb .btn.primary{background:linear-gradient(180deg,#1668BA,#0B5CAB);border-color:#0A539B;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -8px rgba(11,92,171,.7)}
.bb .btn.primary:hover{background:linear-gradient(180deg,#0B5CAB,#014486)}
.bb .btn.primary:disabled{box-shadow:none}
.bb input[type=text],.bb input[type=url],.bb input:not([type]),.bb select,.bb textarea,.search input{background:rgba(255,255,255,.72);border-color:rgba(19,32,58,.12)}
.bb input:focus,.bb select:focus,.bb textarea:focus{background:#fff}
.filter,.cite{background:rgba(255,255,255,.6)}
.filter[aria-pressed="true"]{background:linear-gradient(180deg,#1668BA,#0B5CAB)}
nav.seg{border:1px solid rgba(255,255,255,.6);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
nav.seg a[aria-selected="true"],nav.seg a.on,nav.seg a[aria-current="page"]{background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(28,52,110,.08),0 4px 12px -6px rgba(28,52,110,.25)}
.drop{background:rgba(255,255,255,.4);border-color:rgba(11,92,171,.28)}
.answer{background:linear-gradient(135deg,rgba(122,172,242,.16),rgba(118,216,196,.14));border:1px solid rgba(255,255,255,.7)}
.bb .prompt{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7)}
[data-conflict] > .grow > .row{background:rgba(255,255,255,.55);border-color:rgba(19,32,58,.1)}
.meter{background:rgba(19,32,58,.1)}
.conf .meter > span{background:linear-gradient(90deg,#7AACF2,#58CDB5)}
.spark > i{background:linear-gradient(180deg,rgba(122,172,242,.9),rgba(118,216,196,.9))}
.spark > i:last-child{background:var(--brand)}
.bb .bcard.new{background:rgba(255,255,255,.25);border-color:rgba(11,92,171,.3)}
.rail > [aria-current] .ic,.rail > [data-active] .ic{background:rgba(11,92,171,.12)}
.nav-item[aria-current="page"]{background:rgba(11,92,171,.1)}
.lightbox::backdrop{background:rgba(19,32,58,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox:has(> .lb > .lb-side:first-child){background:rgba(255,255,255,.9);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

/* no backdrop-filter support, or the viewer asked for less transparency:
   the same layout on opaque surfaces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body:has(> .shell){--panel:rgba(255,255,255,.94);--panel-glass:rgba(255,255,255,.94);--top-glass:rgba(255,255,255,.94);--bar-glass:rgba(255,255,255,.94)}
}
@media (prefers-reduced-transparency:reduce){
  body:has(> .shell){--panel:#fff;--panel-glass:#fff;--top-glass:#fff;--bar-glass:#fff;--inset:#F5F7FB}
  body:has(> .shell)::before{display:none}
  .bb .card,.drawer,.top,.review-bar,nav.seg{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Task D2 ==================================================================
   The brand-brain screens' markup (brand, sources, brain, review, direction,
   source viewer) meeting the stylesheet above. Appended only; where a rule
   here overrides one above, it does so by order.
   ========================================================================== */

/* badges inside a row's grid text block keep their own width (the base .list-row .grow is a grid, which stretched them) */
.list-row .grow > .badge{justify-self:start;width:max-content;max-width:100%}

/* --- brand header: name across, one meta line, then the notes ------------ */
.page-h > .brand-head{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;flex:1 1 320px;min-width:0}
.bb .title-input{width:100%;min-width:0;text-overflow:ellipsis}
/* the meta line: the same height on every tab (fact language and notes, or the studio's direction), so the tab strip
   below never moves between tabs */
.brand-head > .brand-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;min-height:36px;color:var(--ink-2)}
.brand-head .kpis{margin-top:8px}
/* each figure keeps its sub-line row, empty or not, so a brand with nothing waiting has the same header height */
.brand-head .kpi{font-size:12px;grid-template-rows:auto auto minmax(1.6em,auto)}
.kpi a.kpi-s{color:var(--brand);font-weight:600;text-decoration:none}
.kpi a.kpi-s:hover{text-decoration:underline}
/* notes fold to one line (a preview of their first line) and open in place */
.brand-notes{min-width:0;flex:1 1 240px;max-width:640px}
.brand-notes > summary{display:flex;align-items:center;gap:8px;min-height:32px;list-style:none;cursor:pointer}
.brand-notes > summary::-webkit-details-marker{display:none}
.brand-notes > summary::after{content:"";width:6px;height:6px;flex:none;margin-left:2px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.brand-notes[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.notes-peek{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-notes[open]{flex-basis:100%}
.brand-notes[open] .notes-peek{display:none}
.brand-notes > textarea{width:100%;min-height:72px;margin-top:6px;resize:vertical;font-family:var(--body);font-size:14px;line-height:1.6}
.export-why{align-self:center}
/* tab row: the brand's two actions sit right of the pill tabs */
.tabs-row > .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:100%}
/* the armed Remove brand label wraps inside its button instead of widening towards the header */
#removeBrand[data-armed]{max-width:240px;white-space:normal;height:auto;min-height:32px;line-height:1.3;text-align:left;padding-top:4px;padding-bottom:4px}

/* --- sources ----------------------------------------------------------- */
.drop + .url-row{margin-top:14px}
/* the reading placeholder spans the shared columns like a stored row */
#list > .list-row[data-reading]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:start;column-gap:20px}
#list > .list-row[data-reading]:hover{background:transparent}
.list-row[data-reading] > .grow > strong{color:var(--ink-2)}
/* a name column never narrower than 160 px, whatever the row's other cells ask for */
.list-row[data-row] > .grow{min-width:min(160px,100%)}
/* busy: the drop zone reads a file, a URL is fetched, a row is being read */
.drop{position:relative;overflow:hidden}
.drop[data-busy="true"]{cursor:progress;border-style:solid;border-color:rgba(11,92,171,.35)}
.drop[data-busy="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--brand),transparent) no-repeat;background-size:40% 100%;animation:bb-scan 1.2s linear infinite}
.btn[data-busy]{cursor:progress}
.list-row[data-state="reading"] .pill::before,.list-row[data-state="extracting"] .pill::before{animation:bb-blink 1s ease-in-out infinite}
@keyframes bb-scan{from{background-position:-40% 0}to{background-position:140% 0}}
@keyframes bb-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .drop[data-busy="true"]::after{animation:none;background-size:100% 100%;opacity:.5}
  .list-row[data-state] .pill::before{animation:none}
}
/* the status cell: pill, and the progress line under it while extracting */
.list-row[data-state] > .grow + .nowrap > .meter{margin-top:6px;width:120px}

/* --- brain ------------------------------------------------------------- */
/* the earlier-questions rules above ordered a separate card; the list now lives in the Ask card */
#tab > section:has(#questions){order:0}
#tab > section:has(#conflicts),#tab > section:has(#facts){order:0}
#answer + .qa-h{margin-top:16px}
.card-b > #questions{margin-top:8px}
/* settled disagreements follow the open ones under their own sub-head */
#conflicts > .conflicts-settled{padding:8px var(--panel-pad);background:var(--inset);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
#conflicts > .conflicts-settled h3{font-size:13px;display:flex;gap:8px;align-items:baseline}
#sec-conflicts h2 > span{font-weight:400;margin-left:6px}
#facts .list-row > .grow > .statement > .badge{margin-left:4px;vertical-align:1px}
/* the toc sits in the tab body grid; scroll targets clear the sticky header */
#tab [id^="sec-"],#facts > [id^="c-"]{scroll-margin-top:calc(var(--top-h,56px) + 16px)}

/* --- review ------------------------------------------------------------ */
.bb .review-bar #pendingCount:empty{display:none}
.bb .review-bar #pendingCount:empty ~ #keepAll{margin-left:auto}
[data-fact] .original{display:block;margin-top:2px}

/* --- direction page ---------------------------------------------------- */
.split-side .list-row{align-items:center}
.split-side .cites{gap:8px}

/* --- 390 --------------------------------------------------------------- */
@media (max-width:640px){
  .page-h > .brand-head{flex-basis:100%}
  .brand-notes{max-width:none}
  /* language and the folded notes share one line on a phone too; open notes take their own line */
  .brand-head > .brand-meta{flex-wrap:nowrap;column-gap:14px}
  .brand-head > .brand-meta:has(> .brand-notes[open]){flex-wrap:wrap}
  .brand-notes{flex:1 1 0}
  .tabs-row > .actions{width:100%;justify-content:flex-start}
  #removeBrand[data-armed]{max-width:100%}
  #list > .list-row[data-reading]{display:flex;flex-wrap:wrap;gap:6px 12px}
  .list-row[data-reading] > .grow{flex:1 1 100%}
}

/* Task D2 fix 1: below this width of .main the shared columns (status, date, up to 280 px of actions) would squeeze
   the name to nothing, so the table stacks as at 390: name block, then status and date, then the actions.
   820 keeps a three-button English paused row's name column at 160 px or more just above it (measured). */
@container main (max-width:819px){
  #list{display:block}
  #list > .list-row[data-row],#list > .list-row[data-reading]{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .list-row[data-row] > .grow,.list-row[data-reading] > .grow{flex:1 1 100%}
  .list-row[data-row] > .actions{flex-basis:100%;max-width:none;justify-content:flex-start;margin-top:2px}
}

/* --- Task ST8: studio tab frame, compact header, storage chip -------------------------------------------------- */
.bb.studio .brand-head .kpis{margin-top:8px}
.studio-direction{display:inline-flex;align-items:center;gap:6px;min-width:0}
.studio-direction select{max-width:220px;padding:3px 8px;font-size:12px;text-overflow:ellipsis}
.storage-chip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.storage-chip .warn{color:var(--warn);font-weight:600}
.studio-tag{margin:0 0 12px}
.studio-empty{display:grid;gap:8px;justify-items:start}
.studio-empty h2{font-size:15px;font-weight:600}
.studio-sec{scroll-margin-top:calc(var(--top-h,56px) + 16px)}
.studio-sec .st-body:empty{display:none}
.studio-chips{display:none}
/* below the toc's width the same three jumps become a chip row that stays under the header */
@container main (max-width:899px){
  .studio-sec{scroll-margin-top:calc(var(--top-h,56px) + 56px)}
  .studio-chips{display:flex;gap:6px;position:sticky;top:var(--top-h,56px);z-index:5;margin:0 0 12px;padding:8px 0;overflow-x:auto;background:var(--canvas)}
  .studio-chips button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border:1px solid var(--chip-line);border-radius:var(--pill-radius);background:var(--surface);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
  .studio-chips button small{font-size:12px;color:var(--muted)}
  .studio-chips button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
  .studio-chips button[aria-current="true"] small{color:inherit}
}

/* --- Task ST12b: Studio stylesheet, adopted once from docs/superpowers/sketches/studio/studio.css (Task DS) -------
   Changes from the delivery: no --top-h override (the shell measures the header into :root), the jump row is the
   shipped .studio-chips, the frame sections are plain (the views' panels are the cards), .studio .concept resets the
   library's .concept line, and the asset drawer sits under the measured header. */

.studio{
  --liked:var(--ok);--liked-wash:var(--ok-wash);--liked-dot:var(--ok-dot);
  --light-table:rgba(19,32,58,.045);
  --jump-h:46px;
  --mark-size:28px;
}

/* --- canvas and sections ------------------------------------------------- */
#tab.studio{gap:20px}
.studio .st-section{display:grid;gap:14px;min-width:0;scroll-margin-top:calc(var(--top-h,56px) + var(--jump-h) + 16px)}
.studio .st-h{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap}
.studio .st-h > h2{margin:0;font-size:20px;font-weight:400;letter-spacing:-.005em}
.studio .st-h > .count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.studio .st-h > .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* "On this page" is the shipped container-queried .toc at >= 900 px of .main; below it the shipped .studio-chips row
   (Task ST8) is the sticky jump list. The delivered jump row is not adopted. */
@container main (min-width:900px){ .studio .st-section{scroll-margin-top:72px} }
.studio > .toc button.sub{padding-left:24px}

/* --- brand header, Studio mode (compact) --------------------------------- */
.studio-page .page-h{align-items:center}
.studio-page .brand-head{gap:4px}
.studio-page .brand-notes{display:none}                 /* notes hidden on this tab */
.st-kpis{display:flex;gap:10px 28px;flex-wrap:wrap;align-items:flex-start}
.st-kpis .kpi{min-width:0}
.st-kpis .kpi-s{font-variant-numeric:tabular-nums}
.st-budget{display:grid;gap:4px;min-width:180px;max-width:260px}
.st-budget .meter{max-width:none;margin:0}
.st-budget .meter > span{background:var(--brand)}
.st-budget[data-level="warn"] .meter > span{background:#E0A800}
.st-budget[data-level="block"] .meter > span{background:var(--bad-dot)}
.st-budget > p{margin:0;font-size:12px;color:var(--muted)}
.st-budget[data-level="warn"] > p{color:var(--warn)}
.st-budget[data-level="block"] > p{color:var(--bad)}
.st-budget .btn{justify-self:start}
/* tab row: Direction selector, then the primary export */
.tabs-row .st-direction{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.tabs-row .st-direction select{max-width:min(320px,52vw);padding:5px 8px;font-size:13px;color:var(--ink)}

/* --- 컨셉 Concepts ------------------------------------------------------- */
/* three cards across once each gets 260 px; below that they stack */
.studio .concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:start}
.studio .concept{display:grid;gap:0;min-width:0;max-width:none;margin-top:0;color:inherit}
.studio .concept > .card-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start}
.studio .concept > .card-h h3{margin:0;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.studio .concept > .card-h .spent{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.studio .concept .idea{grid-column:1 / -1;margin:0;color:var(--ink-2);font-size:13.5px;overflow-wrap:anywhere}
.studio .concept-kv{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;padding:12px var(--panel-pad);border-bottom:1px solid var(--line-2);background:var(--liked-wash)}
.studio .concept-kv img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}
.studio .concept-kv p{margin:0;font-size:12px;color:var(--liked);font-weight:600}
.studio .concept-kv small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.studio .concept dl{margin:0;padding:14px var(--panel-pad);display:grid;gap:12px}
.studio .concept dl > div{display:grid;gap:2px;min-width:0}
.studio .concept dt{font-size:12px;font-weight:600;color:var(--muted)}
.studio .concept dd{margin:0;overflow-wrap:anywhere}
.studio .concept dd.key-line{font-size:17px;line-height:1.35;color:var(--ink)}
.studio .concept dd ol{margin:0;padding-left:18px;display:grid;gap:2px}
.studio .concept .cites{padding:0 var(--panel-pad) 14px}
.studio .concept-actions{display:flex;flex-wrap:wrap;gap:6px;padding:12px var(--panel-pad);border-top:1px solid var(--line-2)}
.studio .concept-actions .btn{min-height:30px}
/* inline edit: the same fields become inputs; nothing is paid */
.studio .concept[data-editing] dd{display:none}
.studio .concept .edit-field{display:none}
.studio .concept[data-editing] .edit-field{display:block;width:100%}
.studio .concept[data-editing] textarea.edit-field{font-family:var(--body);font-size:13px;min-height:56px}
/* More like this / Fresh set: an optional steer, then the priced button */
.studio .steer{display:grid;gap:6px;padding:12px var(--panel-pad);border-top:1px solid var(--line-2);background:var(--inset)}
.studio .steer > .row{flex-wrap:wrap}
.studio .steer input{flex:1 1 180px;min-width:0}
/* Prompts drawer: the three editable templates that become request.prompt */
.studio .prompts{border-top:1px solid var(--line-2)}
.studio .prompts > summary{list-style:none;cursor:pointer;padding:10px var(--panel-pad);font-size:13px;font-weight:600;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}
.studio .prompts > summary::-webkit-details-marker{display:none}
.studio .prompts > summary::after{content:"";width:6px;height:6px;margin-top:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.studio .prompts[open] > summary::after{transform:rotate(-135deg)}
.studio .prompts > div{display:grid;gap:10px;padding:0 var(--panel-pad) 14px}
.studio .prompts label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.studio .prompts textarea{min-height:88px;font-family:var(--body);font-size:12.5px}   /* Korean prompts read badly in the mono face */
.studio .prompts .hint{margin:0;font-size:12px;color:var(--muted)}
/* parked concepts fold into one line under the cards */
.studio .parked > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.studio .parked > summary::-webkit-details-marker{display:none}
.studio .parked > summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.studio .parked[open] > summary::before{transform:rotate(45deg)}
.studio .parked .list{margin-top:10px}
.studio .parked .list-row{align-items:center}
/* the one propose card when the section is empty */
.studio .st-empty{display:grid;gap:10px;justify-items:start;padding:28px var(--panel-pad)}
.studio .st-empty h3{margin:0;font-size:18px;font-weight:600}
.studio .st-empty p{margin:0;color:var(--ink-2);max-width:60ch}

/* --- 제작 Production: one panel per concept ------------------------------ */
.studio .prod{container:prod / inline-size;min-width:0}
.studio .prod > .card-h{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.studio .prod > .card-h h3{margin:0;font-size:16px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.studio .prod > .card-h .spent{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.studio .prod-body{display:grid;gap:16px;padding:var(--panel-pad)}

/* filters, pinned while the shelves scroll under them */
.studio .st-filters{position:sticky;top:calc(var(--top-h,56px) + var(--jump-h));z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 14px;border:1px solid var(--panel-line);border-radius:12px;background:var(--panel-glass);-webkit-backdrop-filter:var(--glass-blur,blur(14px));backdrop-filter:var(--glass-blur,blur(14px));box-shadow:0 8px 24px -16px rgba(28,52,110,.3)}
@container main (min-width:900px){ .studio .st-filters{top:var(--top-h,56px)} }
.studio .st-filters .filters{flex-wrap:nowrap}
.studio .st-filters .fgroup{display:flex;align-items:center;gap:6px;min-width:0}
.studio .st-filters .fgroup > span{font-size:12px;color:var(--muted);white-space:nowrap}
.studio .st-filters .keys{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.studio kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--surface);font:600 12px/1 var(--mono);color:var(--ink-2)}

/* the round bar: a priced receipt, three lines and one button */
.studio .round-bar{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72);overflow:hidden}
.studio .rb-head{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-bottom:1px dashed var(--line)}
.studio .rb-head strong{font-size:14px}
.studio .rb-head span{font-size:12px;color:var(--muted)}
.studio .rb-line{display:grid;grid-template-columns:7.5rem minmax(12rem,1fr) minmax(5.5rem,auto);gap:8px 16px;align-items:start;padding:10px 16px;border-bottom:1px dashed var(--line-2)}
.studio .rb-label{font-weight:600;font-size:13px}
.studio .rb-ask{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;font-size:13px;color:var(--ink-2)}
.studio .rb-ask input[type=number]{width:4.2rem;padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums}
.studio .rb-ask select{padding:4px 6px;font-size:13px}
.studio .rb-ask .chip-toggle{display:inline-flex;gap:4px}
.studio .rb-ask .chip-toggle .filter{min-height:26px;padding:0 10px}
.studio .rb-ask .from-kv{display:inline-flex;align-items:center;gap:6px}
.studio .rb-ask .from-kv img{width:26px;height:26px;border-radius:6px;object-fit:cover}
.studio .rb-cost{justify-self:end;text-align:right;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.studio .rb-cost small{display:block;font-weight:400;font-size:12px;color:var(--muted);white-space:normal;max-width:16rem}
.studio .rb-line[aria-disabled="true"] .rb-label,.studio .rb-line[aria-disabled="true"] .rb-cost{color:var(--muted)}
.studio .rb-line[aria-disabled="true"] .rb-ask > :not(.gate){opacity:.45}
.studio .rb-line .gate{flex-basis:100%;font-size:12px;color:var(--warn);font-weight:600}
.studio .rb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;background:var(--inset)}
.studio .rb-foot > p{margin:0;flex:1 1 220px;font-size:12px;color:var(--muted)}
.studio .rb-foot .btn.primary{min-height:40px;padding:0 18px;font-size:14px}
.studio .rb-foot .over{flex-basis:100%;margin:0}
/* narrow panels: the label and the price share the first line, the controls
   take the second — so the controls never get squeezed to a sliver */
@container prod (max-width:559px){
  .studio .rb-line{grid-template-columns:minmax(0,1fr) auto}
  .studio .rb-ask{grid-column:1 / -1;grid-row:2}
  .studio .rb-foot .btn.primary{flex:1 1 100%}
}

/* the queue: what is running now, honest about minutes */
.studio .queue{display:grid;gap:10px;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--light-table)}
.studio .queue-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.studio .queue-h strong{font-size:13px}
.studio .queue-h .progress{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.studio .queue-h .meter{flex:1 1 120px;max-width:260px;margin:0}
.studio .queue-h .btn{margin-left:auto}
.studio .queue-h .cant{flex-basis:100%;margin:0;font-size:12px;color:var(--muted);text-align:right}
.studio .queue ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.studio .queue li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.6);font-size:13px}
.studio .queue li > img{width:28px;height:28px;border-radius:6px;object-fit:cover}
.studio .queue li .what{min-width:0;overflow-wrap:anywhere}
.studio .queue li .when{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.studio .queue li[data-state="making"] .pill,.studio .queue li[data-state="submitting"] .pill{background:var(--info-wash);color:var(--info)}
.studio .queue li[data-state="slow"]{background:var(--warn-wash)}
.studio .queue li[data-state="slow"] .note{grid-column:2 / -1;font-size:12px;color:var(--warn)}
.studio .queue .leave{margin:0;font-size:12px;color:var(--ink-2)}
.studio .queue .resumed{margin:0;font-size:12px;font-weight:600;color:var(--info)}
/* the round's end state, and what was kept */
.studio .round-end{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;border-radius:12px;border:1px solid var(--line)}
.studio .round-end > p{margin:0;flex:1 1 260px;overflow-wrap:anywhere}
.studio .round-end[data-state="partial"],.studio .round-end[data-state="cancelled"]{border-color:var(--warn-line);background:var(--warn-wash)}
.studio .round-end[data-state="stopped"]{border-color:#F2B8BE;background:var(--bad-wash)}
.studio .round-end .detail{flex-basis:100%;font-size:12px;color:var(--ink-2)}

/* shelves: copy two columns, images 5-up at true aspect, clips 4-up */
.studio .shelf{display:grid;gap:10px;min-width:0}
.studio .shelf-h{display:flex;align-items:baseline;gap:8px}
.studio .shelf-h h4{margin:0;font-size:13px;font-weight:600}
.studio .shelf-h .count{font-size:12px;color:var(--muted)}
.studio .shelf-grid{display:grid;gap:12px;min-width:0}
.studio .shelf[data-kind="copy"] .shelf-grid{grid-template-columns:1fr;gap:8px}
.studio .shelf[data-kind="image"] .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.studio .shelf[data-kind="video"] .shelf-grid{grid-template-columns:1fr;align-items:end}
@container prod (min-width:360px){ .studio .shelf[data-kind="video"] .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container prod (min-width:480px){ .studio .shelf[data-kind="image"] .shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container prod (min-width:560px){ .studio .shelf[data-kind="video"] .shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* two copy columns only when each keeps ≥ 280 px of line (measured in the notes) */
@container prod (min-width:640px){
  .studio .shelf[data-kind="copy"] .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio .shelf[data-kind="image"] .shelf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container prod (min-width:740px){ .studio .shelf[data-kind="video"] .shelf-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@container prod (min-width:780px){ .studio .shelf[data-kind="image"] .shelf-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.studio .shelf-empty{margin:0;padding:14px;border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--muted)}

/* an asset: one card, whatever its kind */
.studio .asset{position:relative;display:grid;gap:6px;min-width:0;padding:8px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.66);outline-offset:2px}
.studio .asset:focus-visible{outline:2px solid var(--link)}
.studio .asset[data-liked]{border-color:rgba(46,196,160,.55);box-shadow:inset 0 0 0 1px rgba(46,196,160,.35)}
.studio .asset[data-shortlisted]{border-color:#9CC3EC;box-shadow:inset 0 0 0 1px #9CC3EC}
.studio .asset[data-liked][data-shortlisted]{box-shadow:inset 0 0 0 1px #9CC3EC,0 0 0 3px rgba(46,196,160,.18)}
.studio .asset-media{position:relative;display:block;overflow:hidden;border-radius:8px;background:var(--light-table)}
.studio .asset-media > img{display:block;width:100%;height:100%;object-fit:cover}
.studio .asset[data-aspect="9:16"] .asset-media{aspect-ratio:9 / 16}
.studio .asset[data-aspect="1:1"] .asset-media{aspect-ratio:1}
.studio .asset[data-aspect="16:9"] .asset-media{aspect-ratio:16 / 9}
/* clip posters play on click; the duration sits on the poster */
.studio .asset[data-kind="video"] .asset-media::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-11px 0 0 -7px;border-left:16px solid rgba(255,255,255,.95);border-top:11px solid transparent;border-bottom:11px solid transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.studio .asset[data-kind="video"] .asset-media > .dur{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:6px;background:rgba(19,32,58,.72);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.studio .asset[data-kind="video"][data-playing] .asset-media::after{display:none}
.studio .asset-media > video{display:block;width:100%;height:100%;object-fit:cover}
.studio button.asset-media{width:100%;padding:0;border:0;font:inherit;cursor:pointer}
/* copy line: the words first, then the meta, then the marks */
.studio .asset[data-kind="copy"]{padding:10px 12px}
.studio .asset .copy-text{margin:0;font-size:15px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.studio .asset-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--muted);min-width:0}
.studio .asset-meta .v{padding:0 6px;border-radius:6px;background:var(--idle-wash);color:var(--idle);font-weight:600;font-variant-numeric:tabular-nums}
.studio .asset-meta .v.exp{background:var(--info-wash);color:var(--info)}
.studio .asset-meta .liked-on{padding:0 6px;border-radius:6px;background:var(--warn-wash);color:var(--warn);font-weight:600}
.studio .asset-meta .rank{padding:0 6px;border-radius:6px;background:var(--brand-wash);color:var(--brand);font-weight:600}
.studio .asset-meta .kv{padding:0 6px;border-radius:6px;background:var(--liked-wash);color:var(--liked);font-weight:600}
.studio .asset .comment-text{margin:0;font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.studio .asset .comment-text::before{content:"“"}
.studio .asset .comment-text::after{content:"”"}

/* the marks: 킵 ♡, 셀렉, 코멘트, 제외 (순위 lives in the shortlist) */
.studio .marks{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.studio .mark{display:inline-grid;place-items:center;min-width:var(--mark-size);height:var(--mark-size);padding:0 7px;border:1px solid var(--chip-line);border-radius:var(--pill-radius);background:rgba(255,255,255,.8);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer}
.studio .mark svg{width:15px;height:15px}
.studio .mark:hover{border-color:#B8C2CE;color:var(--ink)}
.studio .mark.like{font-size:15px;padding:0}
.studio .mark.like[aria-pressed="true"]{border-color:transparent;background:var(--liked-wash);color:var(--liked)}
.studio .mark.sel[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.studio .mark.comment[aria-expanded="true"],.studio .mark.comment[data-has]{color:var(--brand);border-color:#B8D3F5}
.studio .mark.aside{margin-left:auto}
.studio .mark.more{display:none}
/* image and clip tiles are narrow at 5-up / 4-up: a tighter mark row keeps all four on one line (~127 px of a 131 px tile) */
.studio .shelf[data-kind="image"] .asset,.studio .shelf[data-kind="video"] .asset{padding:6px}
.studio .shelf[data-kind="image"] .marks,.studio .shelf[data-kind="video"] .marks{--mark-size:26px;gap:3px;flex-wrap:nowrap}
.studio .shelf[data-kind="image"] .mark.sel,.studio .shelf[data-kind="video"] .mark.sel{padding:0 6px}
.studio .comment-box{display:grid;gap:6px}
.studio .comment-box textarea{font-family:var(--body);font-size:12.5px;min-height:56px}
.studio .asset .use-kv{justify-self:start;font-size:12px}
.studio .asset .kv-help{margin:0;line-height:1.5}
/* a take that is still coming, or that failed (and what it cost) */
.studio .asset[data-state="pending"] .asset-media,.studio .asset[data-state="pending"] .copy-text{background:linear-gradient(100deg,var(--light-table) 30%,rgba(255,255,255,.7) 50%,var(--light-table) 70%) 0 0 / 300% 100%;animation:st-shimmer 1.6s linear infinite;color:transparent}
.studio .asset[data-state="pending"] .asset-media > img{visibility:hidden}
.studio .asset[data-state="failed"]{border-color:#F2B8BE;background:var(--bad-wash)}
.studio .asset[data-state="failed"] .asset-media{display:grid;place-items:center;padding:10px;background:rgba(255,255,255,.55)}
.studio .asset .fail{margin:0;font-size:12px;color:var(--bad);overflow-wrap:anywhere}
@keyframes st-shimmer{to{background-position:-150% 0}}

/* 390: Copy | Images | Clips switch above the shelves */
.studio .shelf-switch{display:none}

/* --- 셀렉 Shortlist wall -------------------------------------------------- */
.studio .wall{display:grid;gap:16px}
.studio .wall-concept > .card-h{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap}
.studio .wall-concept > .card-h h3{margin:0;font-size:16px;font-weight:600}
.studio .wall-kind{display:grid;gap:8px;padding:14px var(--panel-pad);border-top:1px solid var(--line-2)}
.studio .wall-kind:first-of-type{border-top:0}
.studio .wall-kind > h4{margin:0;font-size:13px;font-weight:600}
.studio .ranked{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.studio .ranked > li{display:grid;grid-template-columns:auto 56px minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:8px 10px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.7)}
.studio .ranked > li[data-kind="copy"]{grid-template-columns:auto minmax(0,1fr) auto}
.studio .ranked > li > img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.studio .ranked .grip{display:grid;place-items:center;width:30px;height:44px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:grab;font:inherit}
.studio .ranked .grip b{font-size:15px;color:var(--brand);font-variant-numeric:tabular-nums}
.studio .ranked .grip svg{width:14px;height:14px}
.studio .ranked .body{display:grid;gap:4px;min-width:0}
.studio .ranked .body > p{margin:0;overflow-wrap:anywhere}
.studio .ranked .body > .copy-text{font-size:15px}
.studio .ranked .comment-text{margin:0;font-size:12.5px;color:var(--ink-2)}
.studio .ranked .comment-text::before{content:"“"}
.studio .ranked .comment-text::after{content:"”"}
.studio .ranked .move{display:flex;flex-direction:column;gap:2px}
.studio .ranked .move .mark{height:22px;min-width:26px;padding:0}
.studio .ranked .move svg{width:12px;height:12px}
.studio .ranked > li[data-dragging]{opacity:.5;border-style:dashed}
.studio .ranked > li[data-drop-before]{box-shadow:0 -3px 0 var(--brand)}
.studio .ranked > li:focus-within{border-color:#9CC3EC}
/* set aside: a drawer at the end, restorable one by one */
.studio .aside-drawer{border:1px dashed var(--line);border-radius:12px;background:var(--light-table)}
.studio .aside-drawer > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;font-weight:600;color:var(--ink-2)}
.studio .aside-drawer > summary::-webkit-details-marker{display:none}
.studio .aside-drawer > summary::after{content:"";margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.studio .aside-drawer[open] > summary::after{transform:rotate(-135deg)}
.studio .aside-drawer > div{display:grid;gap:8px;padding:0 16px 14px}
.studio .aside-drawer .aside-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px}
.studio .aside-drawer .aside-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.7);font-size:12.5px}
.studio .aside-drawer .aside-item > img{width:40px;height:40px;border-radius:6px;object-fit:cover}
.studio .aside-drawer .aside-item[data-kind="copy"]{grid-template-columns:minmax(0,1fr) auto}
.studio .aside-drawer .aside-item span{min-width:0;overflow-wrap:anywhere;color:var(--muted)}
.studio .aside-drawer .empty-aside{justify-self:start}

/* --- export dialog (<dialog class="studio export-dialog">) --------------- */
.studio.export-dialog{width:min(600px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--line);border-radius:var(--panel-radius);background:#fff;color:var(--ink);box-shadow:0 30px 80px -20px rgba(19,32,58,.45);overflow:auto}
.studio.export-dialog::backdrop{background:rgba(19,32,58,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.studio.export-dialog form{display:grid;gap:0}
.studio.export-dialog header{padding:18px 20px 12px;border-bottom:1px solid var(--line-2)}
.studio.export-dialog header h2{margin:0;font-size:18px;font-weight:600}
.studio.export-dialog fieldset{margin:0;padding:14px 20px;border:0;border-bottom:1px solid var(--line-2);display:grid;gap:8px}
.studio.export-dialog legend{padding:0;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted)}
.studio.export-dialog .choice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;cursor:pointer}
.studio.export-dialog .choice:has(input:checked){border-color:var(--brand);background:var(--brand-wash)}
.studio.export-dialog .choice .n{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.studio.export-dialog .check{display:flex;gap:10px;align-items:center;font-size:13.5px}
.studio.export-dialog .what{margin:0;padding:14px 20px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.studio.export-dialog .size{margin:0;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.studio.export-dialog .nokeys{margin:0;font-size:12.5px;color:var(--ok);font-weight:600}
.studio.export-dialog .big > p{margin:0 0 8px}
.studio.export-dialog .big{margin:0 20px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--warn-line);background:var(--warn-wash);color:#6B3A00;font-size:13px}
.studio.export-dialog .packs{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.studio.export-dialog .packs li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;font-size:13px}
.studio.export-dialog footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 20px 18px}
.studio.export-dialog footer .grow{display:grid;gap:2px}
.studio.export-dialog footer .btn.primary{min-height:40px;padding:0 18px}

/* --- asset drawer (#/b/:id/studio/a/:assetId), over the canvas ------------ */
.studio.asset-drawer-wrap{position:fixed;inset:var(--top-h,56px) 0 0 0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr) min(560px,100%)}
.studio.asset-drawer-wrap > .scrim-st{background:rgba(19,32,58,.28)}
.studio .asset-drawer{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;background:#fff;border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(19,32,58,.45)}
.studio .asset-drawer > header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.studio .asset-drawer > header h2{margin:0;font-size:17px;font-weight:600;overflow-wrap:anywhere}
.studio .asset-drawer > header p{grid-column:1 / -1;margin:0;font-size:12.5px;color:var(--muted)}
.studio .asset-drawer .ad-body{overflow:auto;padding:16px 20px;display:grid;gap:18px;align-content:start}
.studio .asset-drawer .ad-preview{display:grid;justify-items:center;padding:12px;border-radius:12px;background:var(--light-table)}
.studio .asset-drawer .ad-preview img,.studio .asset-drawer .ad-preview video{max-width:100%;max-height:360px;border-radius:8px;display:block}
.studio .asset-drawer .ad-preview .copy-text{margin:0;font-size:20px;line-height:1.4;text-align:center;padding:18px 8px}
.studio .asset-drawer h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.studio .versions{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.studio .versions > li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 12px;padding:10px;border:1px solid var(--line-2);border-radius:12px}
.studio .versions > li[aria-current="true"]{border-color:#9CC3EC;background:var(--brand-wash)}
.studio .versions > li > img{grid-row:span 3;width:48px;height:48px;border-radius:6px;object-fit:cover}
.studio .versions > li[data-kind="copy"]{grid-template-columns:minmax(0,1fr)}
.studio .versions .vh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px}
.studio .versions .vh b{font-variant-numeric:tabular-nums}
.studio .versions .vh .cost{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.studio .versions .prompt{font-size:12px;max-height:7.5em;overflow:auto}
.studio .versions .exp{font-size:12.5px}
.studio .asset-drawer .ad-marks .marks{gap:6px}
.studio .asset-drawer .ad-marks .mark{--mark-size:32px;padding:0 12px}
.studio .asset-drawer .ad-marks .mark.like{padding:0 12px;font-size:13px}
.studio .asset-drawer .from{margin:0;font-size:13px}
.studio .asset-drawer .from > .kv,.studio .asset-drawer .from > .liked-on{padding:0 6px;border-radius:6px;font-weight:600}
.studio .asset-drawer .from > .kv{background:var(--liked-wash);color:var(--liked)}
.studio .asset-drawer .from > .liked-on{background:var(--warn-wash);color:var(--warn)}
.studio .asset-drawer .from-kv{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.studio .asset-drawer .from-kv img{width:32px;height:32px;border-radius:6px;object-fit:cover}
.studio .versions .vtext{margin:0;overflow-wrap:anywhere}
.studio .asset-drawer > footer{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:14px 20px;border-top:1px solid var(--line-2);background:var(--inset)}
.studio .asset-drawer > footer p{margin:0;flex:1 1 200px;font-size:12px;color:var(--muted)}

/* --- 390 ------------------------------------------------------------------ */
@media (max-width:640px){
  .studio{--mark-size:32px}                            /* thumb-sized targets; --top-h stays the measured header */
  /* filters: one line that scrolls sideways inside itself, and not pinned — at 390 only the jump row is */
  .studio .st-filters{position:static;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 10px}
  .studio .st-filters::-webkit-scrollbar{display:none}
  .studio .st-filters .fgroup{flex:none}
  .studio .shelf .marks[data-open]{flex-wrap:wrap}
  .studio .st-h > h2{font-size:18px}
  .studio .st-h > .actions{margin-left:0;width:100%}
  .studio-page .page-h{align-items:flex-start}
  .st-kpis{gap:12px 20px;width:100%}
  .st-budget{max-width:none;flex:1 1 100%}
  .tabs-row .st-direction{flex:1 1 100%}
  .tabs-row .st-direction select{flex:1;max-width:none}
  .studio .st-filters .keys{display:none}              /* no keyboard, no key legend */
  /* one shelf at a time behind the switch */
  .studio .shelf-switch{display:flex;width:100%}
  .studio .shelf-switch .filter{flex:1;justify-content:center}
  .studio .prod[data-shelf="copy"] .shelf:not([data-kind="copy"]),
  .studio .prod[data-shelf="image"] .shelf:not([data-kind="image"]),
  .studio .prod[data-shelf="video"] .shelf:not([data-kind="video"]){display:none}
  /* on a card: 셀렉 stays; ♡, 코멘트 and 제외 move behind ⋯ (a tap opens them) */
  .studio .shelf .marks > .like,.studio .shelf .marks > .comment,.studio .shelf .marks > .aside{display:none}
  .studio .shelf .marks[data-open] > .like,.studio .shelf .marks[data-open] > .comment,.studio .shelf .marks[data-open] > .aside{display:inline-grid}
  .studio .shelf .marks > .more{display:inline-grid;margin-left:auto}
  .studio .shelf .marks[data-open] > .more{margin-left:0}
  .studio .ranked > li{grid-template-columns:auto 44px minmax(0,1fr)}
  .studio .ranked > li > img{width:44px;height:44px}
  .studio .ranked > li > .move{grid-column:1 / -1;flex-direction:row;justify-content:flex-end}
  .studio .ranked > li[data-kind="copy"]{grid-template-columns:auto minmax(0,1fr)}
  .studio.asset-drawer-wrap{inset:0;grid-template-columns:1fr}
  .studio.asset-drawer-wrap > .scrim-st{display:none}
  .studio .asset-drawer{border-left:0}
  .studio.export-dialog footer .btn.primary{flex:1 1 100%}
}

/* motion and transparency */
@media (prefers-reduced-motion:reduce){
  .studio .asset[data-state="pending"] .asset-media,.studio .asset[data-state="pending"] .copy-text{animation:none}
  .studio .prompts > summary::after,.studio .parked > summary::before{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .studio .st-filters{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
  .studio .round-bar,.studio .asset,.studio .queue li,.studio .ranked > li{background:#fff}
}

/* --- integration (ST12b): budget in-flight segment, raise editor, storage reminder ------------------- */
.st-budget .meter{height:4px}
.st-budget .meter > span::after{display:none}
.st-budget .meter > span.inflight{background:repeating-linear-gradient(90deg,var(--brand) 0 4px,rgba(11,92,171,.35) 4px 7px);border-radius:0 2px 2px 0}
.st-budget[data-level="warn"] .meter > span.inflight{background:repeating-linear-gradient(90deg,#E0A800 0 4px,rgba(224,168,0,.35) 4px 7px)}
.st-budget .budget-raise{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.st-budget .budget-raise label{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.st-budget .budget-raise input{width:6.5rem;padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums}
.storage-chip .storage-remind{flex-basis:100%;margin:0;color:var(--warn);font-weight:600}

/* --- integration (ST12b): ST10's own parts, on the DS tokens ------------------------------------------------------ */
/* the priced retry of one failed asset: drawn in the card's slot or the drawer, else in its own dialog */
.studio .retry-slot:empty{display:none}
.studio .retry-confirm{display:grid;gap:8px;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.studio .retry-confirm p{margin:0}
.studio .retry-confirm .actions{display:flex;flex-wrap:wrap;gap:8px}
.studio.retry-dialog{width:min(420px,calc(100vw - 32px));padding:16px;border:1px solid var(--line);border-radius:var(--panel-radius);background:#fff;color:var(--ink);box-shadow:0 30px 80px -20px rgba(19,32,58,.45)}
.studio.retry-dialog::backdrop{background:rgba(19,32,58,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.studio.retry-dialog .retry-confirm{margin-top:0;border:0;padding:0;background:none}
/* the round's live list under a concept's form; hidden until a round is drawn in it */
.studio .round-slot{display:grid;gap:8px;margin-top:12px;min-width:0}
.studio .round-slot[hidden]{display:none}
/* a clip the store could not keep: the one way to save it is this download */
.studio [data-rescue]{margin-top:6px;align-self:start}
/* a like made on an older take: one click to like this take */
.studio .reaffirm{margin-top:6px;align-self:start}
/* the file was removed to free space: the record stays and says so */
.studio .removed{margin:4px 0 0}
/* --- Task UX1: shell, header and detail refinements (audit-brand-usability.md, 2026-10-01) ------------------------ */
/* hidden text for screen readers (the drawer's Studio figures carry their words this way) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* M2 (key chips that keep their status word) is in the header rules at the top and the ≤ 640 header block */

/* m2: skip link, first in the tab order, visible only while focused */
.skip{position:fixed;left:12px;top:8px;z-index:60;min-height:40px;padding:0 16px;border:1px solid var(--chip-line);border-radius:var(--pill-radius);background:#fff;color:var(--brand);font:inherit;font-size:14px;font-weight:600;box-shadow:0 12px 28px -12px rgba(28,52,110,.45);cursor:pointer;transform:translateY(-200%)}
.skip:focus{transform:none}
#main:focus{outline:none}

/* m3: the floating drawer's head, with a close button (it covers the menu button at phone width) */
.drawer-h{display:none}
.shell[data-nav="open"] .drawer-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-6px -2px 6px 12px}
.drawer-h strong{font-size:15px;color:var(--ink)}

/* m6: Remove brand reads as the quiet, destructive action beside Export; armed, it says so in rose */
#removeBrand:not([data-armed]){background:transparent;border-color:transparent;color:var(--bad);box-shadow:none}
#removeBrand:not([data-armed]):hover{background:var(--bad-wash)}
#removeBrand[data-armed]{background:var(--bad-wash);border-color:rgba(180,35,70,.35);color:var(--bad)}

/* m16: experiments and recipes stack when the page is too narrow for two readable panels */
@container main (max-width:899px){
  .pair{grid-template-columns:1fr}
}

/* p2: Korean prose briefs break between words, not inside them (.prompt's break-word overrode keep-all) */
:root[lang="ko"] .brief:not(.lead) .prompt{word-break:keep-all;overflow-wrap:anywhere}

/* p8: an image source (a page, a frame) sits on a dark field, so its edges read */
.lb:has(> .lb-side:first-child) > :last-child:has(> img){background:#1B2740;padding:24px}
.lb:has(> .lb-side:first-child) > :last-child > img{background:#fff;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 48px -16px rgba(0,0,0,.7)}

/* p9: the Studio's sticky section chips sit on the same frosted track as the page tabs */
.studio-chips{padding:6px;border:1px solid rgba(255,255,255,.6);border-radius:var(--pill-radius);background:var(--top-glass,rgba(255,255,255,.46));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 6px 18px -12px rgba(28,52,110,.35)}

/* p10: nothing Korean below 12 px */
.list-row[data-row] > .grow > .badge{font-size:12px}
.bcard.new small{font-size:12px}

/* m10: at phone width every control is a comfortable tap target (36 px and more) */
@media (max-width:640px){
  .btn.small,.filter,.studio-chips button,.list-row[data-row] > .actions > .btn,.bb .card-h .actions .btn{min-height:36px}
  .crumbs a,.top .brand{display:inline-flex;align-items:center;min-height:36px}
  .btn.small{padding:0 12px}
  nav.seg a{min-height:40px}
  .bb select{min-height:36px}
  .nav-item{min-height:40px}
  .nav-item.sub,.nav-item.sub2{min-height:36px}
  /* inline source links keep their line but gain height to tap */
  .bb button.link{padding-block:8px;margin-block:-8px}
  .kpi a.kpi-s{padding-block:8px;margin-block:-8px}
}
@media (prefers-reduced-transparency:reduce){
  .studio-chips{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* --- Task UX2: view-level refinements (audit-brand-usability.md) ------------------------------------------------ */
/* a past direction: experiments opened from it, then its date */
.dir-meta{display:inline-flex;align-items:center;gap:10px}
.dir-basis{margin:8px 0 0}
/* m7: the Ask running line says what is happening, beside the spinner */
#askStatus .status.running{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
/* m8: a visual fact shows the page or picture it came from; the thumbnail opens the viewer */
[data-fact] > .fact-thumb{flex:none;align-self:flex-start;width:64px;height:64px;margin-right:4px;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:10px;overflow:hidden;background:#1B2740;cursor:zoom-in;box-shadow:0 6px 16px -10px rgba(28,52,110,.5)}
[data-fact] > .fact-thumb img{display:block;width:100%;height:100%;object-fit:cover}
[data-fact] > .fact-thumb:hover{border-color:var(--brand)}
/* m17: why Keep all is off while a correction is open */
.review-bar #keepAllWhy{margin-left:auto}
.review-bar #keepAllWhy:not([hidden]) ~ #keepAll{margin-left:0}
/* m9: a sheet part in the viewer: row numbers in a sticky gutter, rows unwrapped so each number meets its row */
.lb:has(> .lb-side:first-child) > :last-child:has(> .rows){display:block;place-items:normal}
.rows{display:grid;grid-template-columns:auto minmax(0,1fr);width:max-content;min-width:100%;min-height:100%;background:var(--inset)}
.rows > pre{margin:0;padding:12px;font-family:var(--mono);font-size:12.5px;line-height:1.6;border:0;border-radius:0}
.rows > .gutter{position:sticky;left:0;z-index:1;text-align:right;color:var(--muted);background:rgba(236,241,250,.96);border-right:1px solid var(--line-2);user-select:none}
.rows > .prompt{white-space:pre;word-break:normal;background:transparent}
/* --- Task A11Y1: shell accessibility ------------------------------------ */
/* the heading or main that receives focus after a navigation is not a control, so it draws no ring */
[data-route-focus]:focus{outline:none}
/* placeholders and the current drawer item on the glass: their tokens meet 4.5:1 (see the theme block) */
body:has(> .shell) ::placeholder{color:var(--placeholder)}
.nav-item[aria-current="page"]{color:var(--nav-current)}
.nav-item[aria-current="page"] small{color:var(--nav-current)}

/* --- Task UX3: Studio polish (audit-studio-ds.md, audit-studio-a11y.md, ST13 U21) -------------------------------- */
/* no horizontal page scroll at 390: a section's grid never grows to the width of a row that scrolls inside itself */
.studio .st-section{grid-template-columns:minmax(0,1fr)}
.studio .st-section > *,.studio .st-body > *{min-width:0}
@container main (max-width:899px){ #tab.studio{grid-template-columns:minmax(0,1fr)} }
/* F1/F2: the section head's count, and the line a section shows until its view paints */
.studio .st-h > .count:empty{display:none}
.studio .st-loading{margin:0}
/* F3: the chip row is 50 px at phone width (36 px chips), so sticky filters start under it */
@media (max-width:640px){ .studio{--jump-h:52px} }
/* P2: a possible charge waits on the person: amber, not the failed rose */
.studio .asset[data-state="uncertain"]{border-color:var(--warn-line);background:var(--warn-wash)}
.studio .asset[data-state="uncertain"] .asset-media{display:grid;place-items:center;padding:10px;background:rgba(255,255,255,.55)}
.studio .asset[data-state="uncertain"] .fail{color:var(--warn)}
/* P6: a download that failed is not in progress: no shimmer, the same amber wash */
.studio .asset[data-stalled] .asset-media,.studio .asset[data-stalled] .copy-text{animation:none;background:var(--warn-wash);color:inherit}
/* P4: a clip row in the queue leads with the key visual it is made from */
.studio .queue .q-kv{width:28px;height:28px;flex:none;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px rgba(19,32,58,.12)}
/* P1: the round end's priced action */
.studio .round-end .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.studio .round-end .over{margin:6px 0 0}
/* P3: a round running for another direction, above the concepts */
.studio .round-elsewhere{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--warn-line);border-radius:12px;background:var(--warn-wash)}
.studio .round-elsewhere p{margin:0;font-size:13px;color:var(--ink)}
.studio .round-elsewhere .actions{display:flex;gap:6px}
.studio .round-elsewhere .meter{grid-column:1 / -1;height:4px}
/* S1: a shortlisted image or clip whose media is gone shows a slate tile, not a bare dash */
.studio .thumb-missing{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:8px;background:var(--idle-wash);color:var(--idle)}
/* E1: what the pack leaves out is a warning, set apart from the size line */
.export-dialog .export-notes{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--warn-line);border-radius:10px;background:var(--warn-wash)}
.export-dialog .export-notes p{margin:0;font-weight:600;color:var(--warn)}
.export-dialog .export-notes ul{margin:0;padding-left:18px;font-size:12px;color:var(--ink-2)}
/* A1: the drawer's current-version badge and the free copy editor */
.asset-drawer .current{display:inline-block;padding:0 8px;border-radius:var(--pill-radius);background:var(--brand-wash);color:var(--brand);font-size:12px;font-weight:600}
.asset-drawer .edit-copy{display:grid;gap:4px;margin-top:8px}
/* targets (ST13 U21, a11y): rank moves 22 → 26 px, summaries 19 → 29 px, export choices 13 → 18 px */
.studio .ranked .move .mark{height:26px;min-width:28px}
.studio summary{padding-block:5px}
.export-dialog input[type="radio"],.export-dialog input[type="checkbox"]{width:18px;height:18px}
/* span.v contrast on the glass: 4.46 → above 7:1 with the darker ink */
.studio .asset-meta .v{color:var(--ink-2)}
/* targets: the shortlist version link, and the export choices whose whole label is the hit area (native inputs kept) */
.studio .ranked a.v{display:inline-flex;align-items:center;min-height:24px}
.export-dialog label.choice,.export-dialog label.check{min-height:32px}

/* --- Task POLISH-DS: the Studio polish pass (audit-studio-ds.md, Polish pass 1-12) -------------------------------- */
/* 1, 6: at phone width the Studio's own sizes (26-30 px) outranked m10's 36 px and the 390 block's --mark-size:32px;
   every Studio control is a thumb-sized target again, the card marks (셀렉, ⋯ and what ⋯ opens) included */
@media (max-width:640px){
  .studio .concept-actions .btn,.studio .rb-ask .chip-toggle .filter,.studio .rb-ask input[type=number]{min-height:36px}
  .studio .shelf[data-kind="image"] .marks,.studio .shelf[data-kind="video"] .marks{--mark-size:32px}
  .studio .ranked .move .mark{height:32px;min-width:32px}
  .studio .ranked .grip{width:32px}
  .studio .ranked a.v{min-width:32px;min-height:32px;justify-content:center}
  .studio .cite{min-height:32px}
  .studio summary{padding-block:7px}
}
/* 4: the label and the price sit level with the first row of controls (align start), so they stay put when the
   controls wrap in a 560-700 px .prod; below 560 px they share line 1 on their own and need no offset */
.studio .rb-line > .rb-label,.studio .rb-line > .rb-cost{padding-top:6px}
@container prod (max-width:559px){ .studio .rb-line > .rb-label,.studio .rb-line > .rb-cost{padding-top:0} }
/* 7: the meter's sentences (spent of cap, in flight, the warn or block line) each start a line; they ran together */
.st-budget > p > span{display:block}