/* SiTime Image Studio — glass style on SiTime colours (docs/DESIGN.md).
   Brand hex values arrive as CSS variables from base.html (read from the colour file at startup); nothing here hard-codes one.
   Rule of the system: one colour does the talking (Crimson, primary action + active nav); everything else is tint, glass and light.
   Contrast: text is Off Black or Dark Gray on glass (≥ 4.5:1); Mid Gray is used for hairlines and ticks only. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--offblack); }
body { margin: 0; min-height: 100vh;
  background: linear-gradient(135deg, #fff 0%, var(--lightgray) 35%, rgba(var(--sky-rgb), .12) 70%, rgba(var(--sand-rgb), .40) 100%) fixed;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 50% at 100% 0%, rgba(var(--gold-rgb), .10), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(var(--sky-rgb), .16), transparent 70%); }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; font-weight: 600; margin: 0 0 .2rem; letter-spacing: -.015em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .4rem; }
h4 { font-size: .85rem; margin: .6rem 0 .2rem; }
.h-small, legend, .table th, .lbl-up { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--darkgray); font-weight: 600; }
.h-small { margin: 1.4rem 0 .5rem; }
p { margin: .3rem 0 .6rem; }
pre { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255,255,255,.7); border: 1px solid rgba(var(--offblack-rgb),.06); padding: .75rem .9rem; border-radius: 12px; overflow: auto; max-height: 28rem; white-space: pre-wrap; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.muted { color: var(--darkgray); }
.small { font-size: .85rem; }
.tiny { font-size: .78rem; }
.bad-text { color: var(--crimson); }
.warn-text { color: var(--orange); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top-gap { margin-top: .75rem; }
.big { font-size: 44px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.big .unit { font-size: 14px; color: var(--darkgray); font-weight: 400; margin-left: .3rem; letter-spacing: 0; }

/* ---------- shell: sidebar + topbar ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; transition: grid-template-columns .16s ease-out; }
.shell.collapsed { grid-template-columns: 76px 1fr; }
.sidebar { align-self: stretch; min-height: 100vh;
  background: rgba(255,255,255,.55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-right: 1px solid rgba(255,255,255,.75); box-shadow: inset -1px 0 0 rgba(var(--offblack-rgb),.05); }
.side-inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .9rem; padding: 1rem .8rem; }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .2rem .2rem .2rem .4rem; }
.collapse { border: 0; background: transparent; color: var(--darkgray); font-size: 1.1rem; cursor: pointer; padding: .1rem .4rem; border-radius: 8px; }
.collapse:hover { background: rgba(var(--offblack-rgb),.06); }
.side-cta { display: flex; align-items: center; gap: .55rem; justify-content: center; border-radius: 999px; padding: .6rem .9rem; }
.side-cta .ico { font-size: 1.1rem; line-height: 1; }
.side-nav { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.side-nav a { display: flex; align-items: center; gap: .65rem; padding: .4rem .45rem; border-radius: 12px; color: var(--offblack); font-size: .9rem; white-space: nowrap; }
.side-nav a:hover { background: rgba(255,255,255,.7); text-decoration: none; }
.side-nav .tile { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.8); box-shadow: 0 1px 2px rgba(var(--offblack-rgb),.08), inset 0 0 0 1px rgba(var(--offblack-rgb),.05); color: var(--darkgray); }
.side-nav .tile svg { width: 18px; height: 18px; }
.side-nav a.on { background: rgba(var(--crimson-rgb),.10); color: var(--crimson); font-weight: 600; box-shadow: none; }
.side-nav a.on .tile { background: rgba(255,255,255,.9); color: var(--crimson); box-shadow: inset 0 0 0 1px rgba(var(--crimson-rgb),.25); }
.side-user { display: flex; align-items: center; gap: .6rem; color: var(--offblack); padding: .4rem; border-radius: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.side-user:hover { background: rgba(255,255,255,.7); text-decoration: none; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--cobalt), var(--offblack)); color: #fff; font-weight: 600; font-size: .85rem; }
.collapsed .lbl, .collapsed .lockup-full, .collapsed .lockup-sub { display: none; }
.collapsed .lockup-mark { display: block; }
.collapsed .lockup { padding: .5rem 0; justify-content: center; width: 100%; }
.collapsed .side-top { justify-content: center; flex-direction: column; gap: .3rem; }
.collapsed .side-cta { padding: .6rem; }
.collapsed .collapse { transform: rotate(180deg); }
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.75rem; }
.crumb { font-size: .9rem; color: var(--darkgray); }
.crumb a { color: var(--darkgray); }
.crumb strong { color: var(--offblack); font-weight: 600; }
.top-right { display: flex; align-items: center; gap: .7rem; }
.budget { display: inline-flex; align-items: center; gap: .3rem; color: var(--darkgray); }
.who { color: var(--offblack); }
main { padding: .5rem 1.75rem 3rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.narrow { max-width: 540px; margin: 2rem auto; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 1.25rem; }
.head .row { flex-shrink: 0; }
@media (max-width: 900px) { .shell, .shell.collapsed { grid-template-columns: 1fr; } .sidebar { min-height: 0; } .side-inner { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .side-nav { flex-direction: row; } main, .topbar { padding-left: 1rem; padding-right: 1rem; } }

/* ---------- layout helpers ---------- */
.row { display: flex; gap: .6rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: .9rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.two-col.wide { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 900px) { .two-col, .two-col.wide { grid-template-columns: 1fr; } }

/* ---------- glass ---------- */
.card, .pane, .kpi, .ocand, .asset, .review-card, .refcard, .tile, .strip-item img, .drop {
  background: rgba(255,255,255,.62); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 0; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(var(--offblack-rgb),.06), 0 18px 40px rgba(var(--cobalt-rgb),.10), 0 2px 6px rgba(var(--offblack-rgb),.05);
  transition: transform .16s ease-out, box-shadow .16s ease-out; }
.card { padding: 1.1rem 1.25rem; }
.card.notice, .inline-notice { background: rgba(255,255,255,.8); padding: .6rem .9rem; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.06); }
.ocand, .kpi, .asset, .refcard, .tile, .drop { border-radius: 14px; }
.strip-item img { border-radius: 10px; }
.empty { text-align: center; padding: 3rem 1rem; }
.empty h2 { margin-top: 0; }
.hero { background: linear-gradient(160deg, var(--cobalt), var(--offblack)); color: #fff; position: relative; overflow: hidden; border-radius: 20px; padding: 1.1rem 1.25rem;
  box-shadow: 0 18px 40px rgba(var(--cobalt-rgb),.25); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 55% at 100% 0%, rgba(var(--sky-rgb),.35), transparent 70%), radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: auto, 10px 10px; pointer-events: none; }
.hero > * { position: relative; }
.hero .muted, .hero .h-small, .hero .lbl-up { color: rgba(255,255,255,.72); }
.hero .big .unit { color: rgba(255,255,255,.72); }
.hero .sub { background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border-radius: 12px; padding: .5rem .7rem; color: #fff; }
.hero a { color: #fff; text-decoration: underline; }

/* ---------- controls ---------- */
button, .button { font: inherit; padding: .5rem .95rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--offblack); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.10), 0 1px 2px rgba(var(--offblack-rgb),.06); transition: transform .16s ease-out, box-shadow .16s ease-out; }
button:hover, .button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.14), 0 4px 10px rgba(var(--offblack-rgb),.08); text-decoration: none; }
button.primary, .button.primary { background: var(--crimson); color: #fff; font-weight: 600; box-shadow: 0 8px 20px rgba(var(--crimson-rgb),.28); }
button.primary:hover, .button.primary:hover { box-shadow: 0 10px 24px rgba(var(--crimson-rgb),.34); }
button.quiet, .button.quiet { background: transparent; box-shadow: none; color: var(--darkgray); }
button.bad { color: var(--crimson); box-shadow: inset 0 0 0 1px rgba(var(--crimson-rgb),.5); }
button.small, .button.small { padding: .3rem .7rem; font-size: .83rem; }
button:disabled { opacity: .5; cursor: wait; transform: none; }
input, select, textarea { font: inherit; padding: .5rem .75rem; border: 0; border-radius: 12px; background: rgba(255,255,255,.85); color: var(--offblack); width: 100%;
  box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.10); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.10), 0 0 0 2px var(--sky); }
input[type=checkbox], input[type=radio] { width: auto; box-shadow: none; accent-color: var(--crimson); }
input[type=file] { padding: .3rem 0; background: transparent; box-shadow: none; }
textarea { resize: vertical; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--darkgray); }
label.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--offblack); }
fieldset { border: 0; border-radius: 14px; padding: .8rem 1rem 1rem; margin: 0; background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.06); }
fieldset.required { box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.18); }
legend { padding: 0 .4rem; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.filters input[type=search] { flex: 2 1 320px; border-radius: 999px; }
.filters input, .filters select { width: auto; flex: 0 1 180px; border-radius: 999px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .83rem; color: var(--offblack); cursor: pointer; flex-direction: row; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.10); }
.chip:has(input:checked) { background: var(--offblack); color: #fff; font-weight: 500; }
.chip input { margin: 0; }
details.inline { display: inline-block; }
details.inline summary { list-style: none; }
details.inline summary::-webkit-details-marker { display: none; }
details.inline form { margin-top: .4rem; }
details.card summary { cursor: pointer; font-weight: 600; }
kbd { font: inherit; font-size: .72rem; background: rgba(var(--offblack-rgb),.85); color: #fff; border-radius: 6px; padding: .1rem .4rem; }

/* ---------- colour picker ---------- */
.picker { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-colour { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .4rem; border-radius: 999px; font-size: .83rem; color: var(--offblack); cursor: pointer; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.10); border: 0; }
.chip-colour input { margin: 0; }
.chip-colour .hint { color: var(--darkgray); font-size: .75rem; display: none; margin-left: .2rem; }
.chip-colour:has(input:checked), .chip-colour.on { background: #fff; box-shadow: inset 0 0 0 2px var(--offblack), 0 4px 10px rgba(var(--cobalt-rgb),.12); font-weight: 600; }
#picker .chip-colour:not(.on) { opacity: .72; }
#picker .chip-colour:not(.on):hover { opacity: 1; }
.chip-colour .dom-btn { display: none; margin-left: .35rem; width: 20px; height: 20px; border-radius: 50%; font-size: .75rem; line-height: 20px; text-align: center; background: rgba(var(--offblack-rgb),.08); color: var(--darkgray); }
.chip-colour.on .dom-btn { display: inline-block; }
.chip-colour .dom-btn:hover { background: var(--crimson); color: #fff; }
.chip-colour.on .dom-tag { display: none; }
.chip-colour.dominant.on .dom-tag { display: inline; }
.chip-colour:has(input:checked) .hint { display: inline; }
.chip-colour .dom-btn { display: none; padding: .1rem .45rem; font-size: .7rem; border-radius: 999px; }
.chip-colour:has(input:checked) .dom-btn { display: inline-block; }
.chip-colour.dominant { position: relative; }
.chip-colour.dominant::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 2px #fff; }
.chip-colour.dominant .dom-btn { background: var(--offblack); color: #fff; }
.chip-colour .dom-tag { display: none; font-size: .68rem; background: var(--offblack); color: #fff; border-radius: 999px; padding: .05rem .4rem; margin-left: .2rem; }
.chip-colour.dominant .dom-tag { display: inline; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(var(--offblack-rgb),.10); vertical-align: -2px; margin-right: .25rem; }
.dot.dom { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--crimson); }
.trio { display: flex; gap: .3rem; align-items: center; }
.swatch-facet { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.swatch { width: 22px; height: 22px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(var(--offblack-rgb),.10); }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--crimson); }

/* ---------- pills, statuses, verdicts ---------- */
.pill { font-size: .72rem; padding: .18rem .6rem; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--darkgray); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.08); }
.pill.warn { background: var(--gold); color: var(--offblack); box-shadow: none; }
.pill.bad { background: var(--crimson); color: #fff; box-shadow: none; }
.pill.live { background: var(--teal); color: #fff; box-shadow: none; }
.status { font-size: .78rem; padding: .18rem .6rem; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--darkgray); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.08); }
.s-in_review, .s-done { background: var(--gold); color: var(--offblack); box-shadow: none; }
.s-approved, .s-ready { background: var(--teal); color: #fff; box-shadow: none; }
.s-failed, .s-refused { background: var(--crimson); color: #fff; box-shadow: none; }
.s-escalated { background: var(--orange); color: var(--offblack); box-shadow: none; }
.s-generating, .s-gating, .s-compiling, .s-validating, .s-running, .s-queued, .s-judging { background: var(--cobalt); color: #fff; box-shadow: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.v { font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--darkgray); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.08); }
.v-pass, .v-PASS { background: var(--teal); color: #fff; box-shadow: none; }
.v-fail, .v-FAIL { background: var(--crimson); color: #fff; box-shadow: none; }
.v-needs_human, .v-needs_engineer, .v-TINT { background: var(--orange); color: var(--offblack); box-shadow: none; }
.verdict { font-size: 1.05rem; }
.verdict.v-pass { box-shadow: inset 4px 0 0 var(--teal), 0 0 0 1px rgba(255,255,255,.75), 0 18px 40px rgba(var(--cobalt-rgb),.10); }
.verdict.v-fail { box-shadow: inset 4px 0 0 var(--crimson), 0 0 0 1px rgba(255,255,255,.75), 0 18px 40px rgba(var(--cobalt-rgb),.10); }
.verdict.v-needs_human { box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px rgba(255,255,255,.75), 0 18px 40px rgba(var(--cobalt-rgb),.10); }
.checks { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0; }
.best-badge { background: var(--gold); color: var(--offblack); font-weight: 600; box-shadow: none; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid rgba(var(--offblack-rgb),.07); vertical-align: top; }
.table.tiny td { padding: .2rem .3rem; }
tr.draft td { color: var(--darkgray); }
.card .table tr:last-child td { border-bottom: 0; }

/* ---------- library ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.asset { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.asset:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(var(--offblack-rgb),.06), 0 24px 48px rgba(var(--cobalt-rgb),.14), 0 2px 6px rgba(var(--offblack-rgb),.05); }
.asset .thumb { display: block; aspect-ratio: 3 / 2; background: rgba(var(--offblack-rgb),.04); position: relative; }
.asset .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset .ph { display: grid; place-items: center; height: 100%; color: var(--darkgray); }
.asset .thumb .trio { position: absolute; top: .6rem; left: .6rem; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); padding: .3rem .45rem; border-radius: 999px; }
.asset .thumb .pid { position: absolute; left: .6rem; bottom: .6rem; background: rgba(var(--offblack-rgb),.75); color: #fff; font-size: .75rem; padding: .18rem .55rem; border-radius: 999px; backdrop-filter: blur(8px); }
.asset .thumb .uc { position: absolute; right: .6rem; top: .6rem; }
.asset .meta { padding: .7rem .9rem .4rem; display: flex; flex-direction: column; gap: .3rem; }
.asset .actions { padding: .5rem .9rem .8rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; border-top: 1px solid rgba(var(--offblack-rgb),.06); }
.asset .actions select { width: auto; font-size: .83rem; padding: .25rem .5rem; }

/* ---------- wizard (legacy /new) ---------- */
.steps { display: flex; gap: 2rem; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: s; }
.steps li { color: var(--darkgray); font-size: .9rem; counter-increment: s; }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--midgray); margin-right: .5rem; font-size: .75rem; }
.steps li.on { color: var(--offblack); font-weight: 600; }
.steps li.on::before { background: var(--offblack); color: #fff; box-shadow: none; }
.step { display: none; }
.step.on { display: block; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.tile { padding: 1.1rem 1.2rem; cursor: pointer; color: var(--offblack); display: block; position: relative; }
.tile input { position: absolute; opacity: 0; }
.tile h3 { margin-bottom: .4rem; }
.tile p { font-size: .9rem; color: var(--darkgray); }
.tile:hover { transform: translateY(-1px); }
.tile.on, .tile:has(input:checked) { box-shadow: 0 0 0 2px var(--crimson), 0 18px 40px rgba(var(--cobalt-rgb),.10); }
.neighbours { margin-top: .6rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.neighbours .warn { color: var(--orange); font-size: .85rem; }
.strip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .2rem; }
.strip-item { flex: 0 0 120px; }
.strip-item img { width: 120px; height: 80px; object-fit: cover; display: block; }

/* ---------- request page ---------- */
.pipeline { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pipeline li { font-size: .75rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(255,255,255,.5); color: var(--darkgray); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.06); }
.pipeline li.done { color: #fff; background: var(--cobalt); box-shadow: none; }
.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cand img { width: 100%; display: block; border-radius: 10px; margin: .5rem 0; }
.cand.best { box-shadow: 0 0 0 2px var(--gold), 0 18px 40px rgba(var(--cobalt-rgb),.10); }
.cand.rejected { opacity: .7; }
.ref-thumb { width: 160px; border-radius: 10px; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid rgba(var(--offblack-rgb),.10); }
.timeline li { padding: .25rem 0 .25rem 1rem; position: relative; font-size: .88rem; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .65rem; width: 10px; height: 10px; border-radius: 50%; background: var(--midgray); box-shadow: 0 0 0 2px #fff; }
.timeline li.ev-failed::before, .timeline li.ev-refused::before { background: var(--crimson); }
.timeline li.ev-in_review::before, .timeline li.ev-reround::before { background: var(--gold); }
.timeline li.ev-approved::before, .timeline li.ev-delivered::before, .timeline li.ev-finished::before { background: var(--teal); }
.timeline ul { margin: .2rem 0 0; padding-left: 1rem; }

/* ---------- review ---------- */
.review-card { margin-bottom: 1.25rem; padding: 1rem; }
.rc-grid { display: grid; grid-template-columns: minmax(320px, 1.1fr) 1fr; gap: 1.25rem; }
@media (max-width: 1000px) { .rc-grid { grid-template-columns: 1fr; } }
.rc-image img { width: 100%; border-radius: 14px; display: block; }
.rc-side { background: rgba(255,255,255,.55); border-radius: 14px; padding: 1rem; box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.06); display: flex; flex-direction: column; gap: .9rem; }
.rc-actions .sendback { display: flex; flex-direction: column; gap: .4rem; padding: .7rem; border-radius: 12px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.06); }
.rc-actions .result { min-height: 1.2rem; }
.full { width: 100%; display: block; border-radius: 14px; }

/* ---------- ops ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; min-height: 120px; }
.kpi strong { font-size: 40px; font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.kpi strong .unit { font-size: 14px; color: var(--darkgray); font-weight: 400; letter-spacing: 0; margin-left: .25rem; }
.bar { height: 6px; background: rgba(var(--offblack-rgb),.08); border-radius: 3px; overflow: hidden; margin-top: .4rem; }
.bar span { display: block; height: 100%; background: var(--crimson); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: .4rem; }
.spark i { flex: 1; min-width: 3px; background: rgba(var(--cobalt-rgb),.25); border-radius: 2px 2px 0 0; }
.spark i.hi { background: var(--cobalt); }
.roles { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .9rem; margin-top: 2rem; }
.roles dt { font-weight: 600; }
.roles dd { margin: 0; color: var(--darkgray); }

/* ---------- studio: two-panel workbench ---------- */
.studio-main { max-width: none; padding: .25rem 1.25rem 1rem; }
.studio { display: grid; grid-template-columns: minmax(380px, 46%) 1fr; gap: 1rem; height: calc(100vh - 4.3rem); min-height: 560px; }
@media (max-width: 1000px) { .studio { grid-template-columns: 1fr; height: auto; } .pane { max-height: none; } }
.pane { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.pane-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-bottom: 1px solid rgba(var(--offblack-rgb),.06); }
.pane-head h2 { margin: 0; font-size: 1.05rem; flex: 1; }
.pane-body { padding: 1rem 1.1rem; overflow: auto; flex: 1; min-height: 0; }
.seg { display: inline-flex; border-radius: 999px; background: rgba(var(--offblack-rgb),.06); padding: 3px; gap: 2px; }
.seg button, .seg label { border: 0; border-radius: 999px; background: transparent; padding: .3rem .75rem; font-size: .83rem; color: var(--darkgray); cursor: pointer; display: inline-flex; align-items: center; box-shadow: none; }
.seg button:hover, .seg label:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.5); }
.seg .on, .seg label.on { background: #fff; color: var(--offblack); font-weight: 600; box-shadow: 0 2px 6px rgba(var(--offblack-rgb),.10); }
.seg.tiny button { padding: .12rem .5rem; font-size: .72rem; }
.seg.usecase { display: flex; width: 100%; margin-bottom: .4rem; }
.seg.usecase label { flex: 1; justify-content: center; padding: .5rem .4rem; font-weight: 500; }
.seg.usecase input { position: absolute; opacity: 0; }
.helper { margin: 0 0 1rem; min-height: 2.4em; }
.sec { border-top: 1px solid rgba(var(--offblack-rgb),.06); padding: .6rem 0 .8rem; }
.sec > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: .95rem; list-style: none; padding: .2rem 0; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary > span:first-child::before { content: "›"; display: inline-block; width: 1rem; color: var(--darkgray); transition: transform .15s; }
.sec[open] > summary > span:first-child::before { transform: rotate(90deg); }
.sec-actions { display: inline-flex; gap: .6rem; align-items: center; font-weight: 400; }
.link { background: none; border: 0; padding: 0; color: var(--cobalt); font-size: .85rem; cursor: pointer; box-shadow: none; }
.link:hover { transform: none; box-shadow: none; text-decoration: underline; }
.info { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--midgray); font-size: .65rem; color: var(--darkgray); font-weight: 600; margin-left: .3rem; cursor: help; vertical-align: 1px; }
.sec textarea { width: 100%; margin-top: .4rem; }
.drop { padding: .8rem; margin-top: .4rem; box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.06); background: rgba(255,255,255,.4); border: 1px dashed rgba(var(--offblack-rgb),.25); }
.drop.over { border-color: var(--crimson); background: rgba(255,255,255,.8); }
.drop .row { align-items: flex-end; }
.grow { flex: 1; }
.upload-btn { cursor: pointer; display: inline-flex; }
.small-drop { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; }
.thumb-row { display: flex; gap: .6rem; align-items: center; margin-top: .6rem; }
.thumb-row img { height: 64px; border-radius: 10px; }
.params { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; padding: .6rem 0; }
.params .span2 { grid-column: 1 / -1; }
.params fieldset { padding: .6rem .8rem .8rem; }
.params label { font-size: .82rem; }
.params select[multiple] { height: auto; border-radius: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.req { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--crimson); margin-left: .3rem; }
.top-gap-s { margin-top: .3rem; }
.fact { align-self: end; padding: .45rem 0; }
.run-bar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid rgba(var(--offblack-rgb),.06); background: rgba(255,255,255,.6); position: sticky; bottom: 0; border-radius: 0 0 20px 20px; }
.run-bar .run-btn { flex: 1; padding: .75rem 1rem; font-size: 1rem; display: inline-flex; justify-content: center; gap: .8rem; align-items: center; }
#estimate { max-width: 40%; line-height: 1.3; }
#formError { padding: 0 1.1rem .6rem; }
.s-idle { background: rgba(255,255,255,.8); color: var(--darkgray); }
.empty-out { padding: 2rem 1rem; text-align: center; border: 1px dashed rgba(var(--offblack-rgb),.2); border-radius: 14px; margin-top: .5rem; }
.cands3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .6rem; }
@media (max-width: 1000px) { .cands3 { grid-template-columns: 1fr; } }
.ocand { padding: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.ocand:hover { transform: translateY(-1px); }
.ocand img { width: 100%; display: block; border-radius: 10px; aspect-ratio: 3 / 2; object-fit: cover; }
.ocand.best { box-shadow: 0 0 0 2px var(--gold), 0 18px 40px rgba(var(--cobalt-rgb),.12); }
.ocand.rejected { opacity: .65; }
.vchips { display: flex; flex-wrap: wrap; gap: .3rem; }
.vchip { font-size: .72rem; padding: .12rem .45rem; border-radius: 999px; background: rgba(255,255,255,.8); display: inline-flex; align-items: center; gap: .15rem; box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.08); }
.vchip .dot { box-shadow: 0 0 0 1.5px #fff; }
.vchip.v-PASS { background: var(--teal); color: #fff; box-shadow: none; } .vchip.v-FAIL { background: var(--crimson); color: #fff; box-shadow: none; } .vchip.v-TINT { background: var(--orange); color: var(--offblack); box-shadow: none; }
.cand-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; border-top: 1px solid rgba(var(--offblack-rgb),.06); padding-top: .4rem; }
.cand-actions input, .cand-actions select { width: auto; flex: 1 1 90px; padding: .25rem .5rem; font-size: .8rem; }
.refcard { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem; margin-bottom: .8rem; }
.refcard img { width: 120px; border-radius: 10px; }
.tree { padding: .4rem 0 0; }
.tree-group { border-top: 1px solid rgba(var(--offblack-rgb),.06); padding: .35rem 0; }
.tree-group > summary { cursor: pointer; font-size: .9rem; font-weight: 500; list-style: none; }
.tree-group > summary::-webkit-details-marker { display: none; }
.tree-group > summary::before { content: "›"; display: inline-block; width: 1rem; color: var(--darkgray); }
.tree-group[open] > summary::before { transform: rotate(90deg); }
.kv { display: grid; grid-template-columns: minmax(120px, 28%) 1fr; gap: .6rem; font-size: .85rem; padding: .2rem 0 .2rem 1rem; }
.kv .k { color: var(--darkgray); }
.kv .val .k { color: var(--darkgray); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.dl { font-size: 1rem; color: var(--darkgray); text-decoration: none; }
.sec.round { border-top: 1px dashed rgba(var(--offblack-rgb),.15); }
/* arc gauge (chain progress) */
.gauge { display: flex; align-items: center; gap: .6rem; }
.gauge svg { width: 64px; height: 44px; overflow: visible; }
.gauge .gtxt { display: flex; flex-direction: column; line-height: 1.1; }
.gauge .gnum { font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.gauge .gnum .unit { font-size: 11px; color: var(--darkgray); margin-left: .15rem; }
.gauge .gstage { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--darkgray); }

/* run stop reason callout */
.stop-reason { border-radius: 14px; padding: .8rem 1rem; margin: 0 0 .9rem; font-size: .9rem; line-height: 1.4; border: 1px solid transparent; }
.stop-reason.fail { background: rgba(var(--crimson-rgb), .07); border-color: rgba(var(--crimson-rgb), .25); color: var(--offblack); }
.stop-reason.warn { background: rgba(var(--orange-rgb), .10); border-color: rgba(var(--orange-rgb), .35); color: var(--offblack); }
.stop-reason strong { display: block; margin-bottom: .15rem; }
.stop-reason .hint { margin-top: .35rem; }

/* ---------- edit loop ---------- */
.ocand { position: relative; }
.ocand .sel { position: absolute; top: .9rem; left: .9rem; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(var(--offblack-rgb),.2), 0 2px 6px rgba(var(--offblack-rgb),.15); display: grid; place-items: center; cursor: pointer; z-index: 2; font-size: .8rem; color: transparent; }
.ocand.selected { box-shadow: 0 0 0 2px var(--gold), 0 18px 40px rgba(var(--gold-rgb),.25); }
.ocand.selected .sel { background: var(--gold); color: var(--offblack); font-weight: 700; }
.ocand.best.selected { box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(var(--gold-rgb),.35); }
.ocand img { cursor: pointer; }
.select-bar { position: sticky; bottom: .5rem; display: flex; gap: .6rem; align-items: center; padding: .55rem .9rem; margin-top: .8rem; border-radius: 999px; background: rgba(var(--offblack-rgb),.88); color: #fff; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(var(--offblack-rgb),.25); z-index: 3; }
.select-bar .small { color: #fff; }
.select-bar .link { color: var(--sky); }
.select-bar button:not(.primary):not(.link) { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.editor { margin-top: .8rem; display: flex; flex-direction: column; gap: .7rem; }
.editor .params { padding: 0; }
.editor .chips .chip { cursor: pointer; }
.editor .chips .chip.on { background: var(--offblack); color: #fff; }
.lineage { margin-top: 1rem; }
.lineage-group { border-top: 1px dashed rgba(var(--offblack-rgb),.15); padding-top: .8rem; margin-top: .8rem; }
.lineage-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.lineage-head img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px rgba(var(--offblack-rgb),.1); }
.lineage-head .arrow { color: var(--darkgray); font-size: 1.2rem; }
.lineage-line { color: var(--darkgray); }
.cand.edited { box-shadow: inset 4px 0 0 var(--sky), 0 0 0 1px rgba(255,255,255,.75), 0 18px 40px rgba(var(--cobalt-rgb),.10); }
.regen { padding: 0 1.1rem .7rem; }

/* ---------- compile / generate run bar, progressive candidates ---------- */
.run-group { flex: 1; display: flex; gap: .4rem; align-items: stretch; }
.run-group .run-btn { flex: 1; }
.run-menu { position: relative; }
.run-menu > summary { list-style: none; height: 100%; display: inline-flex; align-items: center; padding: 0 .8rem; border-radius: 999px; }
.run-menu > summary::-webkit-details-marker { display: none; }
.run-menu .menu { position: absolute; right: 0; bottom: calc(100% + .4rem); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-radius: 12px; padding: .5rem .8rem; box-shadow: 0 10px 30px rgba(var(--offblack-rgb),.18); white-space: nowrap; }
.ocand.gating img { filter: saturate(.6); opacity: .85; }
.pill.gating { background: var(--cobalt); color: #fff; box-shadow: none; animation: pulse 1.6s ease-in-out infinite; }
.s-compiled { background: var(--sky); color: var(--offblack); box-shadow: none; }
.s-needs_edit { background: var(--gold); color: var(--offblack); box-shadow: none; }
.needs-edit { margin: .6rem 0; padding: .6rem .9rem; border-radius: 12px; background: rgba(var(--gold-rgb),.35); color: var(--offblack); box-shadow: inset 4px 0 0 var(--gold); }

.poll-note { padding: .4rem 1.1rem 0; }

/* ---------- branding: the real lockup (docs/DESIGN.md branding pass). Measured from the Primary SVG (1414 wide): the file
   already carries its safe-space frame (mark starts at 12.5%), the lowercase i is 1.9% of the width (2.4 px at 128, 3.4 px at
   180) and the S of the wordmark starts at 33.2%. Padding below adds one i-width outside the file's own frame. ---------- */
.lockup { display: flex; flex-direction: column; gap: .1rem; padding: 3px; color: var(--darkgray); text-decoration: none; }
.lockup:hover { text-decoration: none; }
.lockup-full { width: 128px; height: auto; display: block; }
.lockup-mark { width: 28px; height: 28px; display: none; }
.lockup-sub { font: 13px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--darkgray); letter-spacing: .01em; padding-left: 33.2%; /* left edge of the S in the lockup file */ }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 4px 4px 1.6rem; }
.login-brand img { width: 180px; height: auto; display: block; }
.login-brand .lockup-sub { padding-left: 0; font-size: 14px; }
.hero-logo { width: 96px; height: auto; display: block; margin-bottom: .6rem; }
/* twelve-wedge spinner: the mark's ring as a CSS conic ring in Crimson, rotating; used for gating / run-in-progress */
.spin-mark { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: .3rem; animation: spin 1.6s linear infinite;
  background: repeating-conic-gradient(var(--crimson) 0deg 18deg, transparent 18deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 37%); mask: radial-gradient(circle, transparent 36%, #000 37%); }
@keyframes spin { to { transform: rotate(360deg); } }
.pill.gating { background: rgba(255,255,255,.85); color: var(--offblack); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.08); animation: none; }
.s-generating, .s-gating, .s-compiling, .s-validating, .s-running, .s-queued, .s-judging { animation: none; }

/* ---------- auto-fix chain + needs_edit callout ---------- */
.chain-steps { margin: .4rem 0 .2rem; color: var(--darkgray); display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.chain-steps .arrow { color: var(--midgray); }
.chain-steps .ok { color: var(--teal); font-weight: 600; }
.chain-steps .bad { color: var(--crimson); font-weight: 600; }
.ne-grid { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.ne-grid img { width: 140px; border-radius: 10px; box-shadow: 0 0 0 2px var(--gold); }
.ne-body { display: flex; flex-direction: column; gap: .35rem; }
.ne-list { margin: .2rem 0 0; padding-left: 1.1rem; }
.ne-list li { margin: .1rem 0; }
.needs-edit { padding: .8rem 1rem; }

/* ---------- next step ----------
   The run is a linear pipeline (brief -> candidates -> choice -> delivery) but its controls lived at the
   bottom of the Input panel, so after a compile the next action was a scroll away in the other column and
   the one button silently changed meaning between Compile, Generate and Regenerate. This states the stage
   and carries the next action where the operator is already looking. Sticky, so it survives a long Output. */
.next-step {
  position: sticky; top: 0; z-index: 4;
  margin: -1rem -1.1rem .9rem; padding: .8rem 1.1rem .75rem;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(var(--offblack-rgb),.08);
}
.ns-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin: 0 0 .45rem; padding: 0; list-style: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--midgray);
}
.ns-rail li { display: flex; align-items: center; gap: .55rem; }
.ns-rail li + li::before { content: ""; width: 16px; height: 1px; background: rgba(var(--offblack-rgb),.18); }
.ns-rail .on { color: var(--cobalt); font-weight: 600; }
.ns-rail .done { color: var(--teal); }
.ns-rail .stuck { color: var(--crimson); font-weight: 600; }
.ns-row { display: flex; align-items: center; gap: 1rem; }
.ns-say { margin: 0; flex: 1; font-size: 1rem; line-height: 1.45; color: var(--offblack); }
/* The Input footer keeps the keyboard path and the advanced menu, but it is no longer a second
   crimson call to action competing with the bar: one colour does the talking. */
.run-bar .run-btn { background: rgba(var(--offblack-rgb),.06); color: var(--offblack); font-weight: 600; box-shadow: none; }
.run-bar .run-btn:hover:not(:disabled) { background: rgba(var(--offblack-rgb),.10); box-shadow: none; }
.ns-say .cost { color: var(--darkgray); }
.ns-act { display: flex; gap: .5rem; flex-shrink: 0; }
.ns-err { margin: .5rem 0 0; }
.ns-act .button, .ns-act button { white-space: nowrap; min-height: 44px; }
@media (max-width: 880px) { .ns-row { flex-direction: column; align-items: stretch; } .ns-act button { width: 100%; } }

/* Inputs had a focus ring and buttons had none, so a keyboard user could not see where they were. Same
   Clear Sky ring, as an outline so it layers over every button variant's own shadow. */
button:focus-visible, .button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 2px;
}

/* The run spinner and the hover lift are decoration; honour the system setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .spin-mark { animation: none; }
  button:hover, .button:hover { transform: none; }
}

/* Drawn icons replace the glyphs that were standing in for them (check, cross, chevron, arrow, download,
   star). They inherit colour from the control, so .sel staying transparent until selected still works. */
.ic { vertical-align: -.15em; flex-shrink: 0; }
.chain-steps .arrow, .lineage .arrow { display: inline-flex; align-items: center; color: var(--midgray); }
.dl { display: inline-flex; align-items: center; }
.ocand .sel .ic { vertical-align: 0; }
.chip-colour .dom-btn .ic { vertical-align: -.1em; }

/* A picked colour the reference cannot carry, with the pairing that would work. */
.ns-sug { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .55rem; padding: .5rem .7rem;
  border-radius: 12px; background: rgba(var(--gold-rgb),.16); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.08); }
.ns-sug-text { flex: 1; min-width: 14rem; color: var(--offblack); }
.ns-sug-trio { display: inline-flex; gap: .25rem; }

/* Brand bans this request's own words tripped, with the option to set one aside knowingly. */
.ns-bans { margin-top: .55rem; padding: .5rem .7rem; border-radius: 12px;
  background: rgba(var(--offblack-rgb),.04); box-shadow: inset 0 0 0 1px rgba(var(--offblack-rgb),.08); }
.ns-bans summary { cursor: pointer; font-weight: 600; }
.ns-bans ul { list-style: none; margin: .5rem 0 .4rem; padding: 0; display: grid; gap: .3rem; }
.ns-bans label { display: flex; gap: .45rem; align-items: flex-start; }
.ns-bans input[type=checkbox] { margin-top: .2rem; width: auto; }
.ns-bans .row { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; }
.ns-bans input[type=text] { flex: 1; }

/* The compiled goal, in the collapsed brief summary: what the image will be, without opening the JSON. */
.sec summary .goal { display: block; font-weight: 400; margin-top: .15rem; max-width: 60ch; }