/* ============================================================================
   BANNER STUDIO — page layer
   Thin page-specific skin over the vendored Open Field system
   (vendor/openfield/tokens/mix.css + vendor/openfield/app/pg-app.css).
   Everything visual comes from those tokens — no new colors, fonts or radii.
   ============================================================================ */

/* ── sidebar extras ─────────────────────────────────────────── */
.sb-villa { display: flex; flex-direction: column; gap: 8px; }
.sb-villa .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--ink-3); padding-left: 6px;
}
.sb-villa .villa-mark {
  border: var(--rule); border-radius: var(--r-md); background: var(--paper-0);
  padding: 10px 12px; display: flex; align-items: center; justify-content: center;
}
.sb-villa .villa-mark svg { width: 100%; height: auto; max-height: 44px; display: block; }

.sb-foot { align-items: stretch; }
.sb-art {
  height: 120px; border: var(--rule); border-radius: var(--r-md);
  padding: 8px; color: var(--ink-3); opacity: 0.45; overflow: hidden;
  font-size: 9px; background: var(--paper-0);
}
.sb-note {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.04em; line-height: 1.6; padding: 2px 6px;
}

/* nav items are view switches, not links — restore the pointer */
.sb-nav a { cursor: pointer; }

/* ── top bar ────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 44px; background: var(--paper-0); border-bottom: var(--rule);
}
.status-rail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* status pips — mono micro-labels, signal dots from the token palette */
.pip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-2); border: var(--rule); border-radius: var(--r-pill);
  padding: 3px 11px; background: var(--paper-1); white-space: nowrap;
}
.pip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.pip.ok::before   { background: var(--c-moss); }
.pip.warn::before { background: var(--c-ochre); }
.pip.bad::before  { background: var(--error); }

/* ── views ──────────────────────────────────────────────────── */
.view { display: none; }
.view.on { display: block; }

/* ── two-pane workspace (Create + Freeform) ─────────────────── */
/* The WORKSPACE scrolls, never the page: the brief rail and the results
   canvas each own their scrollbar; the Library keeps normal page scroll. */
.main.is-workspace { overflow: hidden; display: flex; flex-direction: column; }
.main.is-workspace .main-inner {
  flex: 1; min-height: 0; max-width: none; width: 100%;
  padding: 18px 28px 22px; display: flex; flex-direction: column;
}
.main.is-workspace .view.on { display: flex; flex: 1; min-height: 0; }

.ws {
  flex: 1; min-height: 0; width: 100%;
  display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 20px;
}

/* left rail — the entire brief, its own scroll, generate pinned at the foot */
.rail {
  min-height: 0; overflow-y: auto; scrollbar-width: thin;
  border: var(--rule); border-radius: var(--r-md); background: var(--paper-1);
  padding: 18px 16px 0; display: flex; flex-direction: column; gap: 16px;
}
.rail-head .eyebrow { margin-bottom: 6px; }
.rail-head h1 { font-size: 24px; margin: 0; }
.rail-go {
  position: sticky; bottom: 0; z-index: 5; margin-top: auto;
  background: var(--paper-1); border-top: var(--rule);
  padding: 12px 0 14px;
}
.rail-go .go { width: 100%; align-items: center; }

/* right pane — the results canvas */
.canvas-pane {
  min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 12px; padding-right: 2px;
}
.canvas-pane .sl { margin: 0; }

/* ── step cards ─────────────────────────────────────────────── */
.step { margin-bottom: 18px; }
.mono-note {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.03em; margin-top: 8px;
}

/* ── form fields (labeled control rows — pg-app's .field is the bare search box) */
.fld { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 160px; }
.fld > span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--ink-3);
}
.fld input, .fld select, .fld textarea {
  font: inherit; font-size: 14px; color: var(--ink-0);
  border: var(--rule); border-radius: var(--r-sm); background: var(--paper-0);
  padding: 9px 12px; outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3); }
.fld textarea { resize: vertical; line-height: 1.55; }
.fld-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.fld-row:last-child { margin-bottom: 0; }

.search-field { margin-bottom: 12px; }

/* ── override drawers (details/summary, dashed hint rule) ───── */
.odrawer {
  border: var(--rule-dashed); border-radius: var(--r-md);
  margin: 14px 0; background: var(--paper-0);
}
.odrawer summary {
  cursor: pointer; list-style: none; padding: 11px 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-2); user-select: none;
}
.odrawer summary::before { content: "↳ "; color: var(--amber); }
.odrawer[open] summary { border-bottom: var(--rule-dashed); color: var(--ink-0); }
.odrawer summary:hover { color: var(--amber-strong); }
.odrawer-sub { color: var(--ink-3); font-size: 10px; margin-left: 8px; letter-spacing: 0.03em; }
.odrawer-body {
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}

/* ── promotion summary — plain words first, raw fields below ── */
.promo-card {
  border: var(--rule); border-left: 3px solid var(--amber); border-radius: var(--r-md);
  background: var(--paper-1); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.promo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.promo-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--ink-3);
}
.promo-plain { font-size: 15px; font-weight: 600; color: var(--ink-0); line-height: 1.4; }
.promo-plain.is-miss { color: var(--ink-2); font-weight: 500; font-size: 13px; }
.promo-src { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.03em; }
.promo-rm {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-3); cursor: pointer; border-radius: var(--r-xs); padding: 2px 6px;
}
.promo-rm:hover { color: var(--error); background: var(--paper-2); }
.promo-none {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: var(--rule-dashed); border-radius: var(--r-md); background: var(--paper-0);
  padding: 11px 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: 0.03em;
}
.promo-add {
  margin-left: auto; flex: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-2); border: var(--rule); border-radius: var(--r-sm);
  background: var(--paper-1); padding: 5px 11px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.promo-add:hover { border-color: var(--line-strong); color: var(--ink-0); }

.whisper {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.03em; margin-top: 10px;
}
.whisper:empty { display: none; }

/* ── catalogue ──────────────────────────────────────────────── */
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chips:empty { display: none; }
.chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  border: var(--rule); border-radius: var(--r-pill); padding: 4px 11px;
  background: var(--paper-0); display: inline-flex; gap: 7px; align-items: baseline;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chip small { font-size: 9.5px; color: var(--ink-3); }
.chip:hover { border-color: var(--line-strong); color: var(--ink-0); }
.chip.on { background: var(--ink-0); color: var(--paper-0); border-color: var(--ink-0); }
.chip.on small { color: var(--ink-4); }

/* rail summary — compact block, the real picking happens in the overlay */
.xp-btn { transition: border-color var(--dur-fast) var(--ease); }
.xp-btn:hover { border-color: var(--line-strong); }
.prod-open {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  width: 100%; padding: 10px 13px; cursor: pointer; text-align: left;
}
.prod-open-row { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.prod-open-row .xp-sum { flex: 1; }
.prod-cta {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-2); border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.prod-open:hover .prod-cta { color: var(--ink-0); }
.prod-thumbs { display: flex; align-items: center; gap: 6px; }
.prod-thumbs:empty { display: none; }
.prod-thumbs img {
  width: 34px; height: 34px; object-fit: contain; background: #fff;
  border: var(--rule); border-radius: var(--r-xs);
}
.prod-thumbs .more { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.campaign-note { margin: 0; padding: 0 13px 10px; }

.sel-head { margin: 0; }
.sel-head .count { color: var(--amber-strong); margin-left: 4px; }

/* ── catalogue overlay — wide modal, readable cards, persistent selection ── */
.ov {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 4vh 3vw;
}
.ov-scrim { position: absolute; inset: 0; background: color-mix(in oklch, var(--ink-0) 40%, transparent); }
.ov-card {
  position: relative; width: min(1000px, 90vw); height: min(720px, 88vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper-0); border: var(--rule); border-radius: var(--r-md);
  box-shadow: 0 24px 64px color-mix(in oklch, var(--ink-0) 22%, transparent);
}
.ov-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: var(--rule);
}
.ov-x {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer;
}
.ov-x:hover { background: var(--paper-2); color: var(--ink-0); }
.ov-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.ov-main {
  min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.ov-main .search-field { margin-bottom: 0; }
.ov-main .chips { margin-bottom: 0; }
.ov-side {
  min-height: 0; display: flex; flex-direction: column; gap: 10px;
  border-left: var(--rule); background: var(--paper-1); padding: 16px 14px 14px;
}
.ov-sel-list {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 8px;
}
.ov-sel-list .empty {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); line-height: 1.6;
  border: var(--rule-dashed); border-radius: var(--r-md); padding: 12px 14px;
}

/* result grid — cards big enough to actually read: ≥96px image, 3-line name */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ovp {
  position: relative; display: flex; flex-direction: column; text-align: left;
  border: var(--rule); border-radius: var(--r-md); background: var(--paper-1);
  overflow: hidden; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.ovp:hover { border-color: var(--line-strong); }
.ovp.on { border-color: var(--ink-0); box-shadow: inset 0 0 0 1px var(--ink-0); }
.ovp-check {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  width: 20px; height: 20px; display: none; align-items: center; justify-content: center;
  background: var(--ink-0); color: var(--paper-0); border-radius: 50%; font-size: 11px;
}
.ovp.on .ovp-check { display: inline-flex; }
.ovp img {
  width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff;
  display: block; border-bottom: var(--rule);
}
.ovp-name {
  font-size: 12.5px; font-weight: 500; color: var(--ink-0); line-height: 1.35;
  padding: 9px 10px 3px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ovp-sub {
  margin-top: auto; padding: 0 10px 9px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ovp .cut {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  background: var(--c-moss-soft); color: var(--c-moss-deep);
  border-radius: var(--r-xs); padding: 2px 6px;
}

/* selection column rows — full readability, thumb + name + remove */
.ovs {
  display: flex; align-items: center; gap: 9px;
  border: var(--rule); border-radius: var(--r-sm); background: var(--paper-0); padding: 7px 8px;
}
.ovs img {
  flex: none; width: 40px; height: 40px; object-fit: contain; background: #fff;
  border: var(--rule); border-radius: var(--r-xs);
}
.ovs-nm {
  flex: 1; min-width: 0; font-size: 11.5px; font-weight: 500; color: var(--ink-0); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ovs-sub { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.ovs-x {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-xs);
  color: var(--ink-3); font-size: 14px; line-height: 1; cursor: pointer;
}
.ovs-x:hover { background: var(--paper-2); color: var(--error); }

/* occasion chips input — type free text, Enter adds a chip; several allowed,
   none required */
.chips-input {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: text;
  border: var(--rule); border-radius: var(--r-sm); background: var(--paper-0);
  padding: 5px 8px; min-height: 40px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.chips-input:focus-within { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.chips-input input {
  flex: 1; min-width: 110px; border: none; outline: none; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink-0); padding: 4px 4px;
}
.chips-input input::placeholder { color: var(--ink-3); }
/* the frame carries the focus ring — the inner input never draws its own */
.chips-input input:focus, .fld .chips-input input:focus { border: none; box-shadow: none; }
.occ-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  background: var(--ink-0); color: var(--paper-0);
  border-radius: var(--r-pill); padding: 3px 6px 3px 11px;
}
.occ-chip .occ-x {
  width: 16px; height: 16px; border-radius: 50%; color: var(--ink-4);
  font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.occ-chip .occ-x:hover { color: var(--paper-0); background: color-mix(in oklch, var(--paper-0) 20%, transparent); }
.occ-suggest { margin-top: 7px; margin-bottom: 0; }
.occ-suggest .chip { font-size: 10px; padding: 3px 9px; }

/* ── canvas picker — multi-select rows, one per unique WxH ──── */
.canvas-fld .mono-note { margin-top: 6px; }
.cv-list { display: flex; flex-direction: column; gap: 5px; }
.cvr {
  display: grid; grid-template-columns: 16px 44px minmax(0, 1fr) auto auto;
  align-items: center; gap: 9px; text-align: left; cursor: pointer;
  border: var(--rule); border-radius: var(--r-sm); background: var(--paper-0);
  padding: 7px 10px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cvr:hover { border-color: var(--line-strong); }
.cvr.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); background: var(--amber-soft); }
.cvr-check { font-family: var(--font-mono); font-size: 12px; color: var(--amber-strong); text-align: center; }
.cvr-name {
  font-size: 12px; font-weight: 600; color: var(--ink-0); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cvr-dim { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); white-space: nowrap; }
.cvr-theme { font-size: 9px; padding: 1px 6px; color: var(--c-moss-deep); background: var(--c-moss-soft); }
.cvr-custom .custom-wh input { padding: 4px 7px; width: 58px; font-size: 12px; }

.custom-wh { display: inline-flex; align-items: center; gap: 6px; }
.custom-wh input {
  width: 78px; font: inherit; font-size: 14px; color: var(--ink-0);
  border: var(--rule); border-radius: var(--r-sm); background: var(--paper-0);
  padding: 9px 10px; outline: none;
}
.custom-wh input:focus { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.custom-wh .x { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* inline expanders — collapsed pickers in the rail */
.xps { display: flex; flex-direction: column; gap: 6px; }
.xp { border: var(--rule); border-radius: var(--r-md); background: var(--paper-0); }
.xp > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: baseline; gap: 12px; padding: 10px 13px;
}
.xp > summary::-webkit-details-marker { display: none; }
.xp > summary::before { content: "▸"; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.xp[open] > summary::before { content: "▾"; }
.xp[open] > summary { border-bottom: var(--rule); }
.xp > summary:hover .xp-name { color: var(--ink-0); }
.xp-name {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--ink-2);
}
.xp-sum {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xp-body { padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }

.cat-all { max-width: 340px; }

/* ── campaign list (offer expander) ─────────────────────────── */
.offer-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ofilter {
  flex: 1; min-width: 140px; font: inherit; font-size: 12.5px;
  color: var(--ink-0); border: var(--rule); border-radius: var(--r-sm);
  background: var(--paper-0); padding: 7px 11px; outline: none;
}
.ofilter:focus { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.ofilter::placeholder { color: var(--ink-3); }

.olist { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.orow {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  text-align: left; border: var(--rule); border-radius: var(--r-sm);
  background: var(--paper-1); padding: 7px 10px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.orow:hover { border-color: var(--line-strong); transform: translateX(-3px); }
.orow.on { border-color: var(--ink-0); box-shadow: inset 0 0 0 1px var(--ink-0); }
.orow-check { font-family: var(--font-mono); font-size: 12px; color: var(--c-moss-deep); text-align: center; }
.orow-title {
  font-size: 12.5px; font-weight: 500; color: var(--ink-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orow-tags { display: inline-flex; gap: 5px; flex-wrap: nowrap; }
.orow-tags .tag { font-size: 9.5px; padding: 1px 6px; white-space: nowrap; }
.orow-date {
  grid-column: 2 / -1; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  white-space: nowrap;
}
.orow-date:empty { display: none; }

/* ── results canvas — tile grid, session only ───────────────── */
.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px; align-items: start; align-content: start;
}
.tile-grid > .dim { grid-column: 1 / -1; }
.tile {
  margin: 0; border: var(--rule); border-radius: var(--r-md);
  background: var(--paper-1); overflow: hidden;
  display: flex; flex-direction: column;
}
/* wide canvases earn two columns; extreme strips take the full row */
.tile-wide { grid-column: span 2; }
.tile-strip { grid-column: 1 / -1; }

.tile-shot { display: block; background: var(--paper-2); border-bottom: var(--rule); }
.tile-shot img { width: 100%; display: block; }
.tile .skel { border: none; border-radius: 0; max-height: 340px; }
.tile-shot-fail {
  display: flex; align-items: center; padding: 12px; min-height: 88px; max-height: 340px;
}
.tile-shot-fail .size-fail { width: 100%; }

.tile-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px;
}
.tile-cap {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2);
  letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-acts { flex: none; display: inline-flex; align-items: center; gap: 12px; }
.tile-regen {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-2); cursor: pointer; border-radius: var(--r-xs); padding: 2px 5px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tile-regen:hover { color: var(--ink-0); background: var(--paper-2); }

.size-fail {
  border: var(--rule); border-left: 3px solid var(--error); border-radius: var(--r-md);
  background: var(--paper-0); padding: 10px 14px; font-size: 12.5px; color: var(--ink-1);
}
.size-fail b { color: var(--ink-0); }
.size-fail .hint { margin-top: 4px; color: var(--ink-2); }

/* tiny true-ratio outline on format entries */
.ratio-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 22px; flex: none;
}
.ratio-box i {
  display: block; border: 1px solid var(--line-strong);
  border-radius: 1px; background: var(--paper-0);
}

/* ── toasts — the only transient messaging surface ──────────── */
.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  border: var(--rule); border-left: 3px solid var(--error); border-radius: var(--r-md);
  background: var(--paper-1); padding: 10px 12px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-1);
  line-height: 1.5; letter-spacing: 0.02em;
  animation: toast-in var(--dur) var(--ease);
}
.toast.ok { border-left-color: var(--c-moss); }
.toast b { color: var(--ink-0); }
.toast .hint { margin-top: 4px; color: var(--ink-2); }
.toast-body { flex: 1; overflow-wrap: anywhere; }
.toast-x {
  flex: none; width: 20px; height: 20px; border-radius: var(--r-xs);
  color: var(--ink-3); font-size: 13px; line-height: 1; cursor: pointer;
}
.toast-x:hover { background: var(--paper-2); color: var(--ink-0); }
.toast.out { opacity: 0; transform: translateX(8px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* ── skeletons — ASCII art + monospace loading, never a spinner SVG ── */
.skel {
  position: relative; border: var(--rule-dashed); border-radius: var(--r-md);
  background: var(--paper-0); overflow: hidden; width: 100%;
  min-height: 88px; max-height: 340px;
  display: flex; align-items: center; justify-content: center;
}
.skel-art {
  position: absolute; inset: 0; margin: 0; padding: 6px;
  font-family: var(--font-mono); font-size: 10px; line-height: 11px;
  color: var(--ink-3); opacity: 0.4; overflow: hidden; pointer-events: none;
}
.skel-stack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 8px; max-width: 100%;
}
.skel-line {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.04em;
  background: var(--paper-0); border: var(--rule); border-radius: var(--r-pill);
  padding: 6px 14px; max-width: 100%;
}
.skel-line > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skel .spin { color: var(--amber); font-size: 14px; }
.skel .tmr { color: var(--ink-3); font-size: 10.5px; }
/* the wait is intentional — say what's typical so silence never reads as broken */
.skel-note {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.05em; background: var(--paper-0); border-radius: var(--r-pill);
  padding: 2px 10px; text-align: center;
}

/* ── generate buttons ───────────────────────────────────────── */
.go { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
.go .go-sub { font-family: var(--font-mono); font-size: 9.5px; opacity: 0.75; letter-spacing: 0.06em; }
.go:disabled { opacity: 0.5; cursor: default; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ── library ────────────────────────────────────────────────── */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }

/* masonry-ish columns: each card hugs its content, short cards never
   stretch to the tallest row-mate the way grid rows made them */
.lib-grid { columns: 300px; column-gap: 12px; }
.lib-grid > .dim { column-span: all; }
.lib-card {
  display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 12px;
  border: var(--rule); border-radius: var(--r-md); background: var(--paper-1);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lib-card:hover { border-color: var(--line-strong); transform: translateX(-3px); }
.lib-shot { display: block; border-bottom: var(--rule); background: var(--paper-2); }
.lib-shot img { width: 100%; display: block; }
.lib-foot { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.lib-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.lib-badges .tag { font-size: 9.5px; padding: 1px 6px; }
.lib-meta { display: flex; align-items: center; gap: 8px; }
.lib-meta .dl-link { margin-left: auto; }
.lib-when { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dl-link {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.dl-link:hover { color: var(--amber-strong); border-bottom-color: var(--amber); }

/* ── admin page (/admin.html) ─────────────────────────────────
   Cost figures live ONLY here; the studio pages stay money-free. */
.admin-page { overflow: auto; height: auto; }
.admin-page .topbar { position: sticky; }
.admin-page .topbar a.pip:hover { border-color: var(--amber-line); color: var(--amber-strong); }
.admin-inner { padding: 36px 44px 64px; max-width: 1180px; margin: 0 auto; }

.gate { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.gate-card { max-width: 420px; width: 100%; }
.gate-title {
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  letter-spacing: -0.01em; margin: 12px 0 8px;
}
.gate-form { display: flex; gap: 12px; align-items: flex-end; margin-top: 18px; }

.range-custom { display: flex; align-items: center; gap: 8px; }
.range-custom input {
  font: inherit; font-size: 13px; font-family: var(--font-mono); color: var(--ink-0);
  border: var(--rule); border-radius: var(--r-sm); background: var(--paper-0); padding: 7px 10px;
}
.export-link { margin-left: auto; font-size: 12px; }

.admin-block { margin-bottom: 18px; }
.admin-block .eyebrow { margin-bottom: 16px; }

/* by-day bar chart — DOM bars, one amber moment */
.chart {
  display: flex; align-items: flex-end; gap: 6px; height: 180px;
  border-bottom: var(--rule); padding-bottom: 0;
}
.bar-col {
  flex: 1; min-width: 18px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 6px; height: 100%;
}
.bar-col .bar { width: 100%; max-width: 42px; background: var(--amber); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.bar-col .bar-n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.bar-col .bar-d {
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-3);
  transform: translateY(16px); white-space: nowrap;
}
.chart { margin-bottom: 22px; }

/* engine split */
.model-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: var(--rule);
}
.model-row:last-child { border-bottom: none; }
.model-name { font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); flex: 1; }
.model-n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.model-usd { font-family: var(--font-mono); font-size: 12px; color: var(--ink-0); min-width: 70px; text-align: right; }

/* runs table */
.runs-row { grid-template-columns: 96px 90px 1fr 64px 130px 80px; }
.runs-row .run-sum { font-size: 13px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runs-row .mono-cell { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-1); }
.runs-tbl .tbl-row { cursor: default; }
.runs-tbl .tbl-row:hover { background: var(--paper-1); }

/* the hidden attribute must beat component display rules */
[hidden] { display: none !important; }

.stat .num.sm { font-size: 24px; line-height: 1.4; }

.dim { color: var(--ink-3); font-size: 13px; }

/* ── responsive ─────────────────────────────────────────────── */
/* below this width two grid columns rarely fit — wide tiles fall back to one */
@media (max-width: 1400px) {
  .tile-wide { grid-column: auto; }
}
@media (max-width: 1100px) {
  .ws { grid-template-columns: 340px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 760px) {
  /* the overlay stacks: results on top, selection column below */
  .ov { padding: 2vh 2vw; }
  .ov-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ov-side { border-left: none; border-top: var(--rule); max-height: 220px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { padding-left: 20px; padding-right: 20px; }
  .main-inner { padding: 24px 20px 48px; }
  /* the workspace stacks: brief first, results under it, page scroll returns */
  .main.is-workspace { overflow-y: auto; display: block; }
  .main.is-workspace .main-inner { display: block; padding: 18px 16px 40px; }
  .main.is-workspace .view.on { display: block; }
  .ws { display: flex; flex-direction: column; }
  .rail { overflow: visible; }
  .rail-go { position: static; }
  .canvas-pane { overflow: visible; }
}

/* ── admin dashboard ── */
/* Operator billing page (/admin.html). Everything below is scoped adm-;
   never edited above this marker. */

.adm-signout { font: inherit; cursor: pointer; }
.adm-signout:hover { border-color: var(--amber-line); color: var(--amber-strong); }

.adm-gate-err {
  font-family: var(--font-mono); font-size: 11px; color: var(--error);
  margin-top: 12px; min-height: 1em;
}
.adm-err {
  font-family: var(--font-mono); font-size: 12px; color: var(--error);
  border: 1px solid var(--error); border-radius: var(--r-sm);
  padding: 10px 14px; margin-bottom: 18px;
}

/* header + range */
.adm-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.adm-title {
  font-family: var(--font-display); font-size: 36px; font-weight: 500;
  letter-spacing: -0.01em; margin-top: 6px;
}
.adm-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-range input[type="date"] {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-0);
  border: var(--rule); border-radius: var(--r-sm); background: var(--paper-0);
  padding: 7px 10px;
}
.adm-range input[type="date"]:focus { outline: none; border-color: var(--amber-line); }

.adm-stats { margin-bottom: 18px; }
.adm-block { margin-bottom: 18px; }
.adm-block > .eyebrow { display: block; margin-bottom: 16px; }

/* invoice card — the point of the page, so it gets the amber hairline */
.adm-invoice { margin-bottom: 18px; border-color: var(--amber-line); }
.adm-invoice > .eyebrow { display: block; margin-bottom: 4px; }
.adm-inv-grid {
  display: flex; gap: 36px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px;
}
.adm-unit { max-width: 190px; flex: none; }
.adm-unit input { font-family: var(--font-mono); }
.adm-inv-calc { display: flex; gap: 36px; align-items: flex-end; flex-wrap: wrap; }
.adm-inv-item { display: flex; flex-direction: column; gap: 4px; }
.adm-inv-lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2);
}
.adm-inv-total {
  font-family: var(--font-display); font-size: 46px; font-weight: 500;
  line-height: 1; color: var(--ink-0); letter-spacing: -0.01em;
}
.adm-inv-fig {
  font-family: var(--font-mono); font-size: 20px; line-height: 1.3; color: var(--ink-1);
}
.adm-inv-fig.is-moss { color: var(--c-moss-deep); }
.adm-neg { color: var(--error); }
.adm-inv-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: var(--rule);
}
.adm-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }

/* chart card: inline SVG fills the card width */
.adm-chart svg { display: block; }
.adm-chart text { font-family: var(--font-mono); }

/* cost by model */
.adm-model-row { grid-template-columns: 1fr 90px 110px 110px; }
.adm-model-row.tbl-row { min-height: 42px; cursor: default; }
.adm-model-row.tbl-row:hover { background: var(--paper-1); }

/* media ledger */
.adm-media {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.adm-cell {
  margin: 0; border: var(--rule); border-radius: var(--r-md);
  background: var(--paper-1); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.adm-cell:hover { border-color: var(--line-strong); }
.adm-cell a { display: block; background: var(--paper-2); border-bottom: var(--rule); }
.adm-cell img { display: block; width: 100%; height: 120px; object-fit: cover; }
.adm-cell a:hover img { opacity: 0.9; }
.adm-cell figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.adm-cell-fmt { font-size: 12px; color: var(--ink-1); line-height: 1.3; }
.adm-cell-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.adm-cell-usd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); }

/* runs */
.adm-runs-row { grid-template-columns: 88px 108px 88px 1fr 64px 92px; }
.adm-runs-row.tbl-row { min-height: 44px; cursor: default; }
.adm-runs-row.tbl-row:hover { background: var(--paper-1); }
.adm-run-sum {
  font-size: 13px; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-1); }

.adm-empty { padding: 22px 0; color: var(--ink-3); font-size: 13px; }
.tbl .adm-empty, .adm-media .adm-empty { padding: 22px 18px; }

.adm-foot {
  margin-top: 40px; padding-top: 14px; border-top: var(--rule);
  display: flex; align-items: center; gap: 14px;
}

@media (max-width: 700px) {
  .adm-runs-row { grid-template-columns: 80px 1fr 56px 80px; }
  .adm-runs-row > :nth-child(2), .adm-runs-row > :nth-child(3) { display: none; }
}