/* ============================================================
   CodersHack refine — public web surface.
   Built on the codershack-design tokens (static/design/styles.css).
   ============================================================ */

/* .svc-refine (--ac := --violet) now comes from the design tokens
   (tokens/billing.css) — the violet triplet was promoted into the system as
   part of the shellv2 handoff, PR 1. No local accent constants here. */

/* ---- Notched panel border that follows the clip-path corners ---- */
.notch {
  position: relative;
  background: var(--fill-card);
  clip-path: var(--clip, var(--clip-card));
}
.notch::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--clip, var(--clip-card));
  background: var(--line-2);
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---- Layout rail ---- */
.rail { max-width: var(--rail-max); margin: 0 auto; padding: 0 var(--rail-pad); }
main { position: relative; z-index: 1; }

/* ============================================================
   shell v3 — the shared cross-product shell (templates/_shell.html).
   Spec: docs/design/shell-switcher-stub-v3/README.md §Shell + designs/Shell.dc.html.
   Fixed glass header · lockup-as-switcher product menu · credits chip · footer.
   One nav pattern at every width (the menu becomes a full-width sheet ≤720px) —
   the grid-glyph app switcher and mobile bottom product bar are both retired.
   ============================================================ */

/* The header is fixed, so the document owes it a top offset. */
body { padding-top: 64px; }

.sh-hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 28px;
  background: rgba(6, 7, 11, .72);
  -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  border-bottom: 1px solid var(--line-1);
}

/* ---- Lockup-as-switcher (v3): the lockup itself opens the product menu ---- */
.sh-lk-wrap { position: relative; min-width: 0; }
.sh-lk {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; overflow: hidden;
}
.sh-mark { width: 26px; height: 26px; display: block; flex: none; }
.sh-mark path { stroke: var(--ac); }
.sh-lockup-word {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 14px; letter-spacing: .14em; color: var(--ink-1);
}
.sh-lockup-word em { font-style: normal; letter-spacing: .06em; color: var(--ac); }
/* "/ image" (shell-suite-switcher handoff §4): the medium suffix, muted rather
   than accented — REFINE is the brand word, IMAGE is just which line you're on. */
.sh-lockup-suffix { font-weight: var(--w-semibold); letter-spacing: .06em; color: var(--ink-5); }
.sh-caret {
  font-size: 9px; line-height: 1; color: var(--ink-5); flex: none;
  transition: color var(--dur-fast) var(--ease-out), transform .18s var(--ease-out);
}
.sh-lk:hover .sh-caret { color: var(--ink-2); }
.sh-lk[aria-expanded="true"] .sh-caret { color: var(--ac); transform: translateY(1px) rotate(180deg); }

/* ---- Product menu — 330px panel anchored to the lockup ---- */
/* No overlay scrim: it breaks under the header's backdrop-filter blur (shell-
   suite-switcher handoff §2). Closing on outside click is a document-level
   listener instead — see static/shell.js. */
.sh-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 2;
  width: 330px; max-width: calc(100vw - 32px);
  background: rgba(9, 10, 16, .97); border: 1px solid var(--line-3);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.sh-mi {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 56px; padding: 14px 16px; text-decoration: none;
  border-bottom: 1px solid var(--line-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.sh-mi:hover { background: var(--surface-3); }
.sh-mi.on, .sh-mi.on:hover { background: var(--ac-soft); }
/* Ghost row (e.g. VIDEO, and AUDIO until its web UI ships): visible but inert —
   45% opacity, dashed outline dot, no hover state. */
.sh-mi.ghost { opacity: .45; cursor: default; }
.sh-mi.ghost:hover { background: none; }
/* Rows carry their OWN product accent dot; the active row takes the live accent + glow. */
.sh-mi-dot { width: 7px; height: 7px; margin-top: 5px; flex: none; }
.sh-d-refine { background: var(--violet); }
/* The audio line's radium dot (refine-audio-suite handoff: `LINE 02 · AUDIO`). */
.sh-d-audio { background: var(--radium, #b6f24a); box-shadow: 0 0 8px rgba(182, 242, 74, .55); }
.sh-mi-dot.ghost { background: none; border: 1px dashed rgba(255, 255, 255, .4); }
.sh-mi.on .sh-mi-dot { background: var(--ac); box-shadow: 0 0 10px var(--ac-glow); }
.sh-mi-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-mi-name {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-2);
}
.sh-mi.on .sh-mi-name { color: var(--ac); }
.sh-mi-role { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45; color: var(--ink-4); }

/* ---- Right rail: credits chip + account, or quota + sign-in ---- */
.sh-right { display: flex; align-items: center; gap: 12px; }
.sh-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--surface-3);
  border: 1px solid var(--line-3);
  clip-path: var(--clip-xs);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-decoration: none; white-space: nowrap; color: var(--ink-2);
}
.sh-chip b { font-weight: var(--w-bold); color: inherit; }
.sh-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--ac); animation: ch-pulse 2.4s infinite;
}
/* Low balance (<10 CR): the chip stops being decoration and starts asking. */
.sh-chip.low { border-color: rgba(255,180,84,.5); color: var(--warning); }
.sh-chip.low .sh-dot { background: var(--warning); }
/* The ask is deliberately NOT part of .sh-chip-lab: mobile hides the label, and
   that took `· TOP UP` down with it — muting the chip on the one screen where a
   low wallet is hardest to notice and topping up hardest to reach. */
.sh-chip-ask { color: var(--warning); }
/* Spend flash (G6): the island patches the value the moment a run settles —
   the number flashes --ac while the border sweeps back to rest. */
.sh-chip.is-flash { animation: sh-chip-sweep var(--dur-med) var(--ease-out); }
.sh-chip.is-flash b { animation: sh-chip-flash var(--dur-med) var(--ease-out); }
@keyframes sh-chip-flash { from { color: var(--ac); } to { color: inherit; } }
@keyframes sh-chip-sweep {
  from { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac-soft); }
  to { border-color: var(--line-3); box-shadow: none; }
}

.sh-acct {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 4px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-decoration: none; white-space: nowrap; color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.sh-acct:hover { color: var(--ink-1); }
.sh-quota {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  white-space: nowrap; color: var(--ink-4);
}
.sh-cta {
  display: inline-flex; padding: 8px 16px;
  background: var(--ac); clip-path: var(--clip-xs); box-shadow: var(--glow-cta);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--w-bold);
  letter-spacing: .12em; text-decoration: none; white-space: nowrap; color: #06070b;
  transition: filter var(--dur-fast) var(--ease-out);
}
.sh-cta:hover { filter: brightness(1.12); }

/* ---- Footer: one design, per-product slots ---- */
.sh-ftr {
  position: relative; z-index: 1;
  margin-top: var(--section-y-lg);
  border-top: 1px solid var(--line-1);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 26px var(--rail-pad);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--ink-6);
}
.sh-ftr-mark { display: flex; align-items: center; gap: 10px; }
.sh-ftr-mark svg { width: 18px; height: 18px; flex: none; }
.sh-ftr-links { display: flex; gap: 18px; flex-wrap: wrap; }
.sh-ftr-links a { color: var(--ink-6); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.sh-ftr-links a:hover { color: var(--ink-3); }
/* Sign-out is a POST form, not a link (CODE-195) — it must still read as one of
   the footer links beside it, so strip the button chrome and inherit the type. */
.sh-signout { display: inline; margin: 0; padding: 0; }
.sh-signout button {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink-6); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.sh-signout button:hover { color: var(--ink-3); }
.sh-ftr-dot { color: var(--ink-7); }

/* ---- Focus: 2px accent outline on every interactive control (CODE-187).
   Custom controls reset or obscure the default outline — the scrubber's `.rf-range`
   explicitly set `outline:none`, leaving keyboard users with no focus cue. */
.sh-lk:focus-visible,
.sh-mi:focus-visible,
.sh-chip:focus-visible,
.sh-acct:focus-visible,
.sh-cta:focus-visible,
.sh-ftr-links a:focus-visible,
.sh-signout button:focus-visible,
.rf-seg-btn:focus-visible,
.rf-new-btn:focus-visible,
.rf-view-modes button:focus-visible,
.rf-examples button:focus-visible,
.rf-pass-chip:focus-visible,
.rf-thumb:focus-visible,
.rf-variant:focus-visible,
.rf-variant-zoom:focus-visible,
.rf-linkish:focus-visible,
.rf-range:focus-visible,
.rf-dl:focus-visible,
.rf-cont-act:focus-visible,
.rf-adv-toggle:focus-visible,
.rf-drop-clear:focus-visible,
.rf-expand:focus-visible,
.rf-lbx-chip:focus-visible,
.rf-lbx-x:focus-visible,
.rf-run-open:focus-visible,
.rf-unlock:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  /* One-row header: the chip goes numeric-only and the anon quota label drops.
     The switcher menu becomes a full-width sheet fixed under the header. */
  .sh-hdr { padding: 11px 16px; gap: 10px; }
  .sh-chip-lab { display: none; }
  .sh-lockup-word { font-size: 12.5px; }
  .sh-right { gap: 10px; }
  .sh-menu {
    position: fixed; top: 50px; left: 0; right: 0; width: auto; max-width: none;
    border-left: 0; border-right: 0;
  }
  .sh-mi { min-height: 60px; padding: 16px; }
  .sh-ftr { padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-dot,
  .sh-chip.is-flash,
  .sh-chip.is-flash b {
    animation: none;
  }
  .sh-caret,
  .sh-mi,
  .sh-acct,
  .sh-cta,
  .sh-ftr-links a,
  .sh-signout button,
  .rf-variant-zoom {
    transition: none;
  }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--mono-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 13px 22px; border: 0; --clip: var(--clip-sm);
  transition: filter var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--ac); color: #04121e; box-shadow: var(--glow-cta); font-weight: var(--w-semibold); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost::before { background: var(--line-3); }
.btn-ghost:hover { color: var(--ink-0); }

/* ---- In-voice error page (CODE-188): the refusal posture as a page ---- */
.errpage {
  max-width: 620px;
  margin: clamp(48px, 12vh, 140px) auto;
  padding: 34px 32px;
  border: 1px dashed var(--line-3);
  background: var(--void-2);
  clip-path: var(--clip-card);
}
.errpage-eyebrow {
  margin: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.errpage-h {
  margin: 14px 0 0;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: clamp(28px, 5vw, 40px); line-height: 1.02; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--ink-1);
}
.errpage-body {
  margin: 16px 0 0; max-width: 52ch;
  font-size: 15px; line-height: 1.6; color: var(--ink-3);
}
.errpage-meta {
  margin: 14px 0 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-5);
}
.errpage-cta {
  display: inline-block; margin-top: 26px; padding: 12px 20px;
  font-family: var(--font-mono); font-weight: var(--w-bold); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: #06070b; background: var(--ac);
  clip-path: var(--clip-sm); box-shadow: var(--glow-cta);
}
.errpage-cta:hover { filter: brightness(1.08); }
.errpage-cta:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* ---- Eyebrow ---- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--mono-2xs);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ac);
}
.eyebrow::before { content: "// "; color: var(--ac); }

/* ---- Hero ---- */
.hero { position: relative; padding: clamp(48px, 8vw, 92px) 0 var(--section-y); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0; top: -10%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 520px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, var(--ac-soft), transparent 70%);
}
.hero-in { position: relative; z-index: 1; max-width: 760px; }
.hero h1 {
  font-family: var(--font-display); font-size: var(--display-hero);
  line-height: var(--display-leading); letter-spacing: var(--display-tracking);
  margin: 18px 0 0;
}
.hero h1 em { font-style: normal; color: var(--ac); text-shadow: var(--glow-text); }
.lede { color: var(--ink-3); font-size: var(--body-lg); line-height: var(--body-leading); margin: 18px 0 0; max-width: 60ch; }

/* ---- Estimator form ---- */
.estimator { margin-top: 30px; }
.field { --clip: var(--clip-lg); padding: 5px; background: var(--surface-3); }
.field textarea {
  display: block; width: 100%; min-height: 132px; resize: vertical;
  background: transparent; border: 0; outline: 0; color: var(--ink-1);
  font-family: var(--font-sans); font-size: var(--body-md); line-height: var(--body-leading);
  padding: 14px 16px;
}
.field textarea::placeholder { color: var(--ink-5); }
.field input {
  display: block; width: 100%; background: transparent; border: 0; outline: 0;
  color: var(--ink-1); font-family: var(--font-sans); font-size: var(--body-md);
  padding: 14px 16px;
}
.field input::placeholder { color: var(--ink-5); }
.estimator-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.estimator-meta { display: flex; align-items: center; gap: 14px; }
.link {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono);
  color: var(--ink-4); text-decoration: none; text-transform: uppercase;
}
.link:hover { color: var(--ac); }
.usage-chip {
  font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-5);
}
.usage-chip b { color: var(--ink-2); }

/* ---- How it works / honesty ---- */
.howto { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.howto span {
  font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono);
  color: var(--ink-5);
}
.howto span b { color: var(--ink-3); font-weight: var(--w-regular); }
.note {
  margin-top: 22px; padding: 12px 16px; --clip: var(--clip-md);
  background: var(--ac-soft); color: var(--ink-3);
  font-size: var(--body-sm); line-height: 1.55;
}
.note::before { background: var(--ac-glow); }

/* ============================================================
   Decision card
   ============================================================ */
.result { margin-top: 30px; }
.card { padding: clamp(22px, 3vw, 32px); --clip: var(--clip-xl); }
.card.is-low { opacity: .96; }
.card-corner { position: absolute; width: 14px; height: 14px; z-index: 2; }
.card-corner.tl { top: 9px; left: 9px; border-top: 2px solid var(--ac); border-left: 2px solid var(--ac); }
.card-corner.br { bottom: 9px; right: 9px; border-bottom: 2px solid var(--ac); border-right: 2px solid var(--ac); }

.verdict { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.verdict h2 {
  font-family: var(--font-display); font-size: var(--display-sm); text-transform: uppercase;
  color: var(--ink-0); letter-spacing: -.005em;
}
.badge {
  font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono);
  text-transform: uppercase; padding: 5px 10px; --clip: var(--clip-xs); white-space: nowrap;
}
.badge .dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-pill); margin-right: 7px; vertical-align: middle; }
.badge-high { background: var(--success-soft); color: var(--success); }
.badge-high .dot { background: var(--success); }
.badge-low { background: var(--warning-soft); color: var(--warning); }
.badge-low .dot { background: var(--warning); }
.badge-none { background: var(--surface-3); color: var(--ink-4); }
.badge-none .dot { background: var(--ink-5); }

.basis { margin-top: 6px; font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); text-transform: uppercase; }

/* metric tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }
.tile { padding: 16px 18px; --clip: var(--clip-card); background: var(--void-2); }
.tile .k { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.tile .v { margin-top: 9px; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); color: var(--ink-0); text-transform: uppercase; line-height: 1; }
.tile .v.muted { color: var(--ink-6); }
.tile.cost .v { color: var(--ac); }
.tile .sub { margin-top: 7px; font-size: var(--body-xs); color: var(--ink-5); }

.rationale { margin-top: 20px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }
.credits-left {
  margin-top: 14px; font-family: var(--font-mono); font-size: var(--mono-2xs);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5);
}
.credits-left b { color: var(--ink-2); }

details.how { margin-top: 18px; border-top: 1px solid var(--line-1); padding-top: 14px; }
details.how summary {
  cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: var(--mono-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-4);
}
details.how summary::-webkit-details-marker { display: none; }
details.how summary::before { content: "▸ "; color: var(--ac); }
details.how[open] summary::before { content: "▾ "; }
.how-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.how-grid div { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); display: flex; justify-content: space-between; gap: 12px; }
.how-grid div b { color: var(--ink-2); font-weight: var(--w-regular); }

.card-cta { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---- Cap-reached prompt ---- */
.cap { padding: clamp(22px, 3vw, 30px); --clip: var(--clip-xl); }
.cap h2 { font-family: var(--font-display); font-size: var(--display-xs); text-transform: uppercase; color: var(--ink-0); }
.cap p { margin-top: 12px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }
.cap .card-cta { margin-top: 20px; }

/* ============================================================
   Auth + account (slice 4b)
   ============================================================ */
.auth { padding: clamp(48px, 9vw, 110px) 0 var(--section-y); display: flex; justify-content: center; }
.auth-panel { position: relative; width: 100%; max-width: 460px; padding: clamp(26px, 4vw, 38px); --clip: var(--clip-xl); }
.auth-h { font-family: var(--font-display); font-size: var(--display-md); text-transform: uppercase; color: var(--ink-0); margin-top: 14px; letter-spacing: -.005em; }
.auth-p { margin-top: 14px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }
.auth-p b { color: var(--ink-1); font-weight: var(--w-regular); }
.auth-meta { margin-top: 16px; font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); }
.auth-err { margin-top: 14px; padding: 10px 14px; --clip: var(--clip-md); background: var(--danger-soft); color: var(--danger); font-size: var(--body-sm); }
/* Honeypot wrapper (app/formguard.py). Positioned off-screen rather than
   display:none or visibility:hidden — both are trivially detected by a bot that
   reads computed style, while an absolutely-positioned field looks real to a
   script and is unreachable for a human (also tabindex=-1). Screen readers skip
   it via aria-hidden on the wrapper in signin.html. */
.auth-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.auth-form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.auth-form .field { --clip: var(--clip-md); padding: 3px; background: var(--surface-3); }

.account { padding: clamp(40px, 7vw, 80px) 0 var(--section-y); }
.account-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.account-head .auth-h { margin-top: 8px; flex: 1; min-width: 0; word-break: break-word; }
.account-grid { margin-top: 30px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 720px) { .account-grid { grid-template-columns: 1fr; } }
.balance { position: relative; padding: clamp(24px, 3.4vw, 34px); --clip: var(--clip-xl); }
.balance .k { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.balance-v { margin-top: 10px; font-family: var(--font-display); font-size: clamp(54px, 9vw, 84px); line-height: 1; color: var(--ac); text-shadow: var(--glow-text); }
.balance-sub { margin-top: 12px; color: var(--ink-4); font-size: var(--body-sm); line-height: 1.5; max-width: 42ch; }
.account-side { display: flex; flex-direction: column; gap: 14px; }
.side-card { display: block; padding: 18px 20px; --clip: var(--clip-card); text-decoration: none; transition: filter var(--dur-fast) var(--ease-out); }
a.side-card:hover { filter: brightness(1.4); }
.side-card .k { font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-1); }
.side-card .k::first-letter { color: var(--ac); }
.side-card p { margin-top: 8px; color: var(--ink-4); font-size: var(--body-sm); line-height: 1.5; }
.side-card code { color: var(--ink-2); font-size: var(--mono-sm); }
.side-card.is-static { opacity: .85; }

/* ============================================================
   Pricing (slice 4c)
   ============================================================ */
.pricing { padding: clamp(40px, 7vw, 80px) 0 var(--section-y); }
.pricing .auth-h { margin-top: 14px; max-width: 18ch; }
.pricing .lede { margin-top: 16px; }
.pricing .lede b { color: var(--ink-1); font-weight: var(--w-regular); }
.price-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; padding: clamp(22px, 3vw, 30px); --clip: var(--clip-xl); display: flex; flex-direction: column; }
.price-card.is-free { background: var(--void-2); }
.price-card .k { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.price-v { margin-top: 12px; font-family: var(--font-display); font-size: clamp(38px, 5vw, 52px); line-height: 1; color: var(--ink-0); }
.is-free .price-v { color: var(--ac); }
.price-v span { font-size: var(--body-md); color: var(--ink-5); margin-left: 6px; font-family: var(--font-mono); letter-spacing: var(--track-mono); }
.price-sub { margin-top: 12px; color: var(--ink-4); font-size: var(--body-sm); line-height: 1.55; flex: 1; }
.price-sub b { color: var(--ink-1); font-weight: var(--w-regular); }
.price-card form { margin-top: 18px; }
.price-card .btn { width: 100%; justify-content: center; }

/* ============================================================
   Refiner island
   ============================================================ */
.refine-hero {
  padding-top: clamp(28px, 5vw, 56px);
}
.refine-hero .hero-in {
  max-width: 940px;
}
.refine-hero::before {
  background: radial-gradient(60% 60% at 50% 0%, rgba(167,139,255,.18), transparent 70%);
}
.rf-root {
  color: var(--ink-1);
}
.rf-root.is-workspace {
  padding-top: 4px;
}
.rf-workspace-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rf-workspace-head p {
  margin: 0;
  color: var(--ink-5);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}
.rf-kicker,
.rf-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ac);
  text-transform: uppercase;
}
.rf-title {
  font-size: clamp(32px, 5.2vw, 52px);
  line-height: .98;
  margin-top: 14px;
  text-transform: uppercase;
}
/* The workspace names the run: `Run 0412 — backlit portrait bust`. Scoped to BOTH
   classes (0,2,0) so it beats the generic `.hero h1` (0,1,1), which otherwise
   forces display-hero size onto the run title. */
.rf-title.rf-run-title {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.rf-title span {
  color: var(--ac);
  text-shadow: 0 0 28px var(--ac-glow);
}
.rf-lede {
  max-width: 580px;
  color: var(--ink-3);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 18px 0 0;
}
.rf-lede em {
  color: var(--ink-2);
  font-style: normal;
}
.rf-prompt {
  margin-top: 26px;
  padding: 22px;
  --clip: var(--clip-lg);
  background: var(--ac-soft);
  box-shadow: 0 40px 110px -70px rgba(167,139,255,.4);
}
/* Stands in for .rf-prompt until the island mounts (templates/landing.html).
   Same box, same notch, same accent field, so the swap reads as the panel
   filling in rather than the page rebuilding itself — and the min-height is what
   stops the footer leaping up the screen and back down when React lands. */
.rf-boot-panel {
  display: grid;
  place-items: center;
  min-height: 268px;
  margin-top: 26px;
  padding: 22px;
  --clip: var(--clip-lg);
  background: var(--ac-soft);
}
.rf-boot-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--ink-5);
  animation: rf-boot-breathe 1.4s ease-in-out infinite;
}
@keyframes rf-boot-breathe {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-boot-label { animation: none; }
}
.rf-prompt::before {
  background: #a78bff;
}

/* ---- Prompt-first composer (design_handoff_refine_console Part 2) ----------
   A centered column: the accent card (prompt + TRY ONE + REFINE) over a separate
   ADVANCED SETTINGS disclosure. */
.rf-composer {
  max-width: 680px;
  margin: 0 auto;
}
.rf-composer-hero {
  margin-bottom: 22px;
}
/* The card is the old .rf-prompt box: accent notch border, faint accent fill,
   soft drop-glow. */
.rf-composer-card {
  padding: 22px;
  --clip: var(--clip-card);
  background: var(--ac-soft);
  box-shadow: 0 40px 110px -70px var(--ac-glow);
}
.rf-composer-card::before {
  background: var(--ac);
}
/* The reference-image drop spot inside the card. Empty it is a dashed invitation;
   filled it is the thumbnail + filename + clear row. The card around it owns the
   drag and paste handling, and pushes `.is-over` down onto this strip so the
   highlight lands on the thing that explains itself. */
.rf-drop {
  margin-top: 12px;
  border: 1px dashed var(--line-3);
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.rf-drop.is-filled {
  border-color: var(--ac);
}
.rf-drop.is-over {
  border-color: var(--ac);
  background: var(--ac-soft);
}
/* Visually hidden, NOT display:none — the input is the real control and has to
   stay focusable and hit-testable for the label, the keyboard and assistive tech. */
.rf-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rf-drop-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  cursor: pointer;
}
.rf-drop.is-locked .rf-drop-empty {
  cursor: default;
  opacity: .62;
}
.rf-drop-ico {
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: var(--ac);
}
.rf-drop.is-locked .rf-drop-ico {
  color: var(--ink-5);
}
.rf-drop-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin-right: auto;
}
/* Looks like a button, is part of the label. The whole strip is clickable; this
   is what tells you so. */
.rf-drop-browse {
  flex: none;
  padding: 7px 12px;
  border: 1px solid rgba(167,139,255,.42);
  color: var(--ac);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.rf-drop-empty:hover .rf-drop-browse {
  border-color: var(--ac);
  color: var(--ink-1);
}
.rf-drop-copy b {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--w-semibold, 600);
  letter-spacing: .12em;
  color: var(--ink-2);
}
.rf-drop-copy small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-6);
}
.rf-drop-filled {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
}
.rf-drop-thumb {
  display: block;
  width: 44px;
  aspect-ratio: 1;
  object-fit: cover;
  background: #05060a;
}
.rf-drop-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.rf-drop-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--ac);
}
.rf-drop-name {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-drop-clear {
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.rf-drop-clear:hover {
  color: var(--ac);
}
.rf-drop-error {
  display: block;
  padding: 0 14px 12px;
}
/* The short line: one chip for what the file can prove, then what it is. */
.rf-drop-facts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-6);
}
.rf-prov-chip {
  padding: 2px 6px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  white-space: nowrap;
}
.rf-prov-chip.is-signed { color: #7fe0a8; }
.rf-prov-chip.is-altered { color: #ff8f8f; }
.rf-prov-chip.is-tagged { color: var(--ac); }
.rf-prov-chip.is-bare { color: var(--ink-6); }
.rf-drop-more {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border: 0;
  border-top: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-5);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
}
.rf-drop-more:hover { color: var(--ac); }
.rf-prov {
  padding: 12px;
  border-top: 1px solid var(--line-2);
  background: rgba(255,255,255,.02);
}
.rf-prov-list {
  display: grid;
  gap: 5px;
  margin: 0;
}
.rf-prov-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.rf-prov-row dt {
  color: var(--ink-6);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rf-prov-row dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.rf-prov-note {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-5);
}
.rf-prov-warn {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 2px solid #ff8f8f;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: #ffbcbc;
}
/* The run the file names — only ever shown for a run the viewer owns. */
.rf-prov-job {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-3);
}
.rf-prov-job-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rf-prov-job-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--ac);
}
.rf-prov-job-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink-6);
}
.rf-prov-brief {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.rf-prov-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.rf-prov-act {
  padding: 7px 11px;
  border: 1px solid rgba(167,139,255,.42);
  background: transparent;
  color: var(--ac);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.rf-prov-act:hover {
  border-color: var(--ac);
  color: var(--ink-1);
}
.rf-prov-act.is-quiet {
  border-color: var(--line-3);
  color: var(--ink-4);
}
.rf-prov-act.is-quiet:hover {
  border-color: var(--ink-5);
  color: var(--ink-2);
}
.rf-drop-more:focus-visible,
.rf-prov-act:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: -2px;
}
/* The keyboard route to the picker is the hidden input, so its focus ring has to
   be drawn by the strip that is actually visible. */
.rf-drop:focus-within {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
/* A drop anywhere on the card counts, so the card says so too. */
.rf-composer-card.is-dragover {
  border-color: var(--ac);
}
/* ADVANCED SETTINGS disclosure. Closed: full-width bar with a settings summary.
   Open: bar turns accent and merges into the panel below. */
.rf-adv {
  margin-top: 14px;
}
.rf-adv-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-semibold, 600);
  letter-spacing: .14em;
  color: var(--ink-4);
}
.rf-adv-toggle:hover {
  color: var(--ac);
  border-color: var(--ac);
}
.rf-adv-toggle.is-open {
  color: var(--ac);
  border-color: var(--ac);
  border-bottom-color: transparent;
  background: var(--ac-soft);
}
.rf-adv-summary {
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink-6);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-adv-panel {
  padding: 18px 16px;
  border: 1px solid var(--ac);
  border-top: none;
  background: var(--surface-1);
}
/* Inside the panel the moved rows keep their existing .rf-examples spacing; the
   first one shouldn't add a top margin against the panel padding. */
.rf-adv-panel > .rf-examples:first-child {
  margin-top: 0;
}
.rf-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rf-counter {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-5);
}
.rf-ta {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding: 14px;
  resize: vertical;
  color: var(--ink-1);
  background: #0d0f15;
  border: 1px solid var(--line-3);
  outline: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  clip-path: var(--clip-sm);
}
.rf-ta:focus {
  border-color: var(--ac);
}
.rf-ta::placeholder {
  color: #4d5468;
}
.rf-examples,
.rf-runbar,
.rf-run-head,
.rf-view-switch,
.rf-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rf-examples {
  margin-top: 13px;
}
.rf-examples span,
.rf-runbar span,
.rf-note,
.rf-view-switch span,
.rf-actions span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-6);
  letter-spacing: .06em;
}
.rf-examples button,
.rf-view-switch button,
.rf-actions button,
.rf-actions a,
.rf-pass-chip,
.rf-thumb,
.rf-stack-row {
  cursor: pointer;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-mono);
  text-decoration: none;
}
.rf-examples button {
  padding: 5px 10px;
  font-size: 10.5px;
}
.rf-examples button:hover,
.rf-view-switch button:hover,
.rf-actions a:hover,
.rf-actions button:hover {
  color: var(--ac);
  border-color: rgba(167,139,255,.48);
}
.rf-sizes button[aria-pressed="true"] {
  color: var(--ac);
  border-color: rgba(167,139,255,.78);
  background: rgba(167,139,255,.07);
}

/* ---- Print sizing: physical targets, the custom panel, and the plan readout ---- */
.rf-advanced-toggle[aria-expanded="true"] {
  color: var(--ac);
  border-color: rgba(167,139,255,.78);
}
.rf-print-advanced {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.rf-print-advanced label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rf-print-advanced input,
.rf-print-advanced select {
  width: 78px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-1);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
}
.rf-print-advanced input:focus,
.rf-print-advanced select:focus {
  outline: none;
  border-color: rgba(167,139,255,.78);
}
/* The honest readout: what will actually be rendered, what will actually be
   downloaded, and whether that resample holds up. Colour carries the warning so a
   soft or impossible target is not something you discover at the print shop. */
.rf-print-plan {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}
.rf-print-plan.is-crisp,
.rf-print-plan.is-good {
  color: var(--ac);
}
.rf-print-plan.is-soft {
  color: #e8b660;
}
.rf-print-plan.is-poor {
  color: #ef6f6f;
}

.rf-format button[aria-pressed="true"],
.rf-edit-mode button[aria-pressed="true"] {
  position: relative;
  padding-left: 22px;
  color: #0d0f15;
  border-color: var(--ac);
  background: var(--ac);
  box-shadow: 0 0 0 1px rgba(167,139,255,.42), 0 0 18px rgba(167,139,255,.22);
}
.rf-format button[aria-pressed="true"]::before,
.rf-edit-mode button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d0f15;
  transform: translateY(-50%);
}
.rf-format-hint {
  margin: 8px 0 0;
  color: var(--ink-5);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.rf-format-hint b {
  color: var(--ink-2);
  font-weight: 700;
}
.rf-image-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.rf-file-label,
.rf-reference-refine,
.rf-file-name,
.rf-reference-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rf-file-label {
  color: var(--ac);
}
.rf-file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-6);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-reference-refine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.rf-reference-refine input {
  accent-color: var(--ac);
}
.rf-reference-refine:has(input:disabled) {
  opacity: .4;
}
.rf-reference-hint {
  margin: -2px 0 0;
  color: var(--ink-6);
  line-height: 1.45;
  text-transform: none;
}
.rf-runbar {
  justify-content: space-between;
  margin-top: 18px;
}
.rf-note {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
  line-height: 1.7;
}
.rf-note span {
  display: inline-flex;
}
/* ---- Tab bar: NEW REFINEMENT | MY RUNS (RefineV2.dc.html:45,118) ----
   Two full-width segments in one bordered strip. The active one is the only
   accented thing on the row, underlined by an inset rule. */
/* ---- Console toolbar (design_handoff_refine_console Part 1) ----------------
   The view title on the left; a REFINING PROCESS / MY RUNS segmented switcher
   plus a primary + NEW on the right. Replaces the old NEW REFINEMENT / MY RUNS
   tab strip — "New refinement" is an action, not a tab. */
.rf-console {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding: 9px 9px 9px 16px;
  border: 1px solid var(--line-2);
  background: rgba(10, 11, 17, .85);
  clip-path: var(--clip-sm);
}
.rf-console-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.rf-console-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--ac);
  white-space: nowrap;
}
.rf-console-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-console-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rf-seg {
  display: flex;
  border: 1px solid var(--line-2);
  background: var(--surface-3);
}
.rf-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-semibold, 600);
  letter-spacing: .12em;
  color: var(--ink-4);
  white-space: nowrap;
}
.rf-seg-btn + .rf-seg-btn {
  border-left: 1px solid var(--line-1);
}
.rf-seg-btn:hover:not(:disabled) {
  color: var(--ink-2);
}
.rf-seg-btn:disabled {
  cursor: default;
}
.rf-seg-btn.is-active {
  color: var(--ac);
  background: var(--ac-soft);
  box-shadow: inset 0 -2px 0 var(--ac);
}
/* The REFINING PROCESS status chip: LIVE (shimmer) / outcome word / run id. */
.rf-seg-chip {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  padding: 3px 8px;
  border: 1px solid currentColor;
}
.rf-seg-chip.is-live {
  color: var(--ac);
  animation: rf-chip-shimmer 1.1s ease-in-out infinite;
}
.rf-seg-chip.is-firm { color: var(--ac); }
.rf-seg-chip.is-hedged { color: var(--warning); }
.rf-seg-chip.is-refused { color: var(--ink-4); }
.rf-seg-chip.is-idle { color: var(--ink-5); }
@media (prefers-reduced-motion: reduce) {
  .rf-seg-chip.is-live { animation: none; }
}
.rf-new-btn {
  padding: 10px 16px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: #06070b;
  background: var(--ac);
  clip-path: var(--clip-xs);
  box-shadow: var(--glow-cta);
  white-space: nowrap;
}
.rf-new-btn:hover {
  filter: brightness(1.08);
}
.rf-my-runs {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.rf-my-runs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rf-my-runs h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ac);
  text-transform: uppercase;
}
.rf-my-runs-head button {
  cursor: pointer;
  padding: 6px 10px;
  color: var(--ink-4);
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rf-my-runs-head button:hover {
  color: var(--ac);
  border-color: rgba(167,139,255,.48);
}
/* ---- RUN HISTORY cards (RefineV2.dc.html:133) ----
   A card is a 96x72 thumb beside a 2-line brief, a state chip, its meta, and
   what it cost. Hover is neutral, not accented: the accent on this screen means
   "this run locked", and a mouse passing over a card must not imply that. */
.rf-run-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.rf-run-item {
  padding: 13px;
  color: var(--ink-2);
  background: var(--void-2);
  border: 1px solid var(--line-2);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rf-run-item:hover {
  border-color: var(--line-3);
  background: var(--surface-1);
}
.rf-run-open {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
}
.rf-run-thumb,
.rf-run-thumb img,
.rf-run-thumb > span {
  display: block;
  width: 96px;
  height: 72px;
}
.rf-run-thumb {
  flex: none;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-1);
}
.rf-run-thumb img {
  object-fit: cover;
}
/* No render to show — and *why* there is none differs per state, so the label
   says which. Hatching means "nothing here", never specifically "expired". */
.rf-run-thumb > span {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(-45deg, #0a0b10 0 7px, #0e1016 7px 14px);
  color: #4d5468;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rf-run-copy {
  min-width: 0;
}
.rf-run-copy b {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: inherit;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.rf-run-copy small {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.rf-run-meta {
  color: var(--ink-5);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* The chip carries the state in its colour alone — border and ink, no fill.
   The five postures are the design's (.rf2-chip-*). */
.rf-verdict-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
.rf-verdict-chip.is-firm { color: var(--ac); }
.rf-verdict-chip.is-hedged { color: var(--warning); }
.rf-verdict-chip.is-refused { color: var(--ink-4); }
.rf-verdict-chip.is-live {
  color: var(--ac);
  animation: rf-chip-shimmer 1.1s ease-in-out infinite;
}
.rf-verdict-chip.is-expired {
  color: var(--ink-6);
  border-style: dashed;
}
@keyframes rf-chip-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.rf-run-cost {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rf-run-cost.is-paid { color: var(--ember); }
.rf-run-cost.is-free { color: var(--ink-5); }
.rf-unlock {
  margin: 10px 0 0 108px;
  padding: 0;
  cursor: pointer;
  color: var(--ac);
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.rf-unlock:hover {
  color: var(--ink-1);
}
.rf-run-empty {
  display: block;
  margin-top: 12px;
  color: var(--ink-6);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .rf-verdict-chip.is-live { animation: none; }
}
.rf-run {
  margin-top: 24px;
  padding: clamp(18px, 3vw, 24px);
  --clip: var(--clip-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.004));
  /* Clear the 60px sticky nav (+ breathing room) when scrolled into view after
     Refine, so the box top isn't hidden under the nav. */
  scroll-margin-top: 76px;
}
.rf-run::before {
  background: color-mix(in srgb, var(--rf-accent, var(--ac)) 52%, rgba(255,255,255,.1));
}
.rf-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--rf-accent, var(--ac));
  border: 1px solid var(--rf-accent, var(--ac));
  padding: 4px 9px;
}
.rf-error {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  color: #ff8f8f;
  border: 1px solid rgba(255, 143, 143, .45);
  background: rgba(255, 80, 80, .08);
  padding: 5px 10px;
}
.rf-run h2 {
  margin-top: 13px;
  font-size: clamp(19px, 3vw, 26px);
  line-height: 1.05;
}
/* The status badge's neighbour: why the loop is where it is. Mid-run "critique
   loop live · Δ still moving"; settled, the verdict's own basis. */
.rf-basis {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-5);
}
/* A refusal is dashed everywhere it appears, never colour-only. */
.rf-run.is-diverged .rf-status {
  border-style: dashed;
}
/* The score rides here, on the right of the bar — which is why the PROMPT MATCH /
   PASSES RUN / FINAL VERDICT tiles are gone (RefineV2.dc.html:180). */
.rf-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.rf-progress-row .rf-progress {
  flex: 1;
  margin-top: 0;
}
.rf-match {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-4);
  white-space: nowrap;
}
.rf-view-switch {
  justify-content: space-between;
  margin: 20px 0 12px;
}
.rf-view-modes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rf-view-switch button,
.rf-actions button,
.rf-actions a {
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rf-view-switch button[aria-pressed="true"] {
  color: var(--ac);
  border-color: var(--ac);
  background: var(--ac-soft);
}
/* The verdict footer: DOWNLOAD (primary, accent) · REFINE AGAIN (ghost) ·
   NEW BRIEF (quiet). The download keeps the accent for every posture — the best
   pass is yours even when the loop refused to call it finished. */
.rf-actions a {
  color: #05070d;
  background: var(--rf-accent, var(--ac));
  border-color: var(--rf-accent, var(--ac));
  clip-path: var(--clip-sm);
  font-weight: var(--w-semibold);
}
.rf-actions a:hover {
  color: #05070d;
  border-color: var(--rf-accent, var(--ac));
  filter: brightness(1.08);
}
.rf-actions button:hover {
  color: var(--ink-1);
  border-color: var(--rf-accent, var(--ac));
}
.rf-actions button.rf-quiet {
  color: var(--ink-4);
  border-color: transparent;
  background: transparent;
}
.rf-actions button.rf-quiet:hover {
  color: var(--ink-1);
  border-color: transparent;
}
.rf-frame {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: #000;
  /* The in-layout frame is a stable panel: a fixed 4:3 box that a portrait or
     widescreen render fills (object-fit:cover) so the base view never collapses
     into a tall/narrow column as the render's aspect changes. The render's true,
     full aspect is shown in the full-size lightbox (⤢ FULL), not here. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.rf-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` so the render fills the fixed panel; the lightbox is where the full,
     uncropped image is shown at its native aspect. */
  object-fit: cover;
  display: block;
  /* Start hidden; showLoadedImage() fades it in on decode (see PassViewer). */
  opacity: 0;
  transition: opacity .35s ease;
}
.rf-split {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ac);
  box-shadow: 0 0 16px rgba(167,139,255,.6);
}
.rf-pass-tag,
.rf-film-caption {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  background: rgba(6,7,11,.72);
  padding: 3px 7px;
}
.rf-pass-tag.is-first { top: 9px; left: 9px; color: var(--ink-2); }
.rf-pass-tag.is-current { top: 9px; right: 9px; color: var(--ac); }
.rf-film-caption {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  color: var(--ink-2);
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}
.rf-corner {
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
}
.rf-corner.tl {
  top: 9px;
  left: 9px;
  border-top: 1.5px solid var(--ac);
  border-left: 1.5px solid var(--ac);
}
.rf-corner.br {
  right: 9px;
  bottom: 9px;
  border-right: 1.5px solid var(--ac);
  border-bottom: 1.5px solid var(--ac);
}
/* Full-aspect lightbox: the in-layout frame matches the render's aspect but is
   bounded to the viewport, so this shows the render at full, unbounded size. */
.rf-expand {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 9px;
  cursor: pointer;
  padding: 5px 9px;
  color: var(--ink-2);
  background: rgba(6,7,11,.72);
  border: 1px solid rgba(255,255,255,.22);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rf-expand:hover {
  color: var(--ac);
  border-color: rgba(167,139,255,.55);
}
.rf-expand.is-top {
  top: 9px;
  bottom: auto;
}
/* ---- Fullscreen viewer (PassViewer) ----------------------------------------
   An opaque, edge-to-edge overlay with two mutually exclusive stage modes: FIT
   (the whole image, letterboxed, page static) and 1:1 (actual pixels, only the
   stage scrolls). Rebuilt from docs/design_handoff_refine_fullscreen_downloads
   (RefineV2.dc.html: .rf2-lbx). Backdrop click does NOT close — the image fills
   most of the overlay and clicking it toggles FIT/1:1; Esc and the ✕ close. */
.rf-lbx {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #04050a;
  display: flex;
  flex-direction: column;
  animation: rf-lbx-in .18s ease-out;
}
@keyframes rf-lbx-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.rf-lbx-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(12px, 2vw, 20px);
  background: rgba(6,7,11,.88);
  border-bottom: 1px solid var(--line-2);
}
.rf-lbx-cap {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ac);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-lbx-cap em {
  font-style: normal;
  color: var(--ink-5);
}
.rf-lbx-ctrls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-lbx-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-semibold, 600);
  letter-spacing: .1em;
  color: var(--ink-5);
  border: 1px solid var(--line-2);
  background: transparent;
  padding: 5px 10px;
  cursor: pointer;
}
.rf-lbx-chip[aria-pressed="true"] {
  color: var(--ac);
  border-color: var(--ac);
}
.rf-lbx-x {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(6,7,11,.7);
  border: 1px solid var(--line-3);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rf-lbx-x:hover {
  color: var(--ac);
  border-color: var(--ac);
  box-shadow: 0 0 14px var(--ac-glow);
}
.rf-lbx-stage {
  flex: 1;
  min-height: 0;
}
/* FIT: the whole image, centered and letterboxed on the opaque ground. Nothing
   scrolls. Click toggles to 1:1 (cursor: zoom-in). */
.rf-lbx-stage.is-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.rf-lbx-stage.is-fit img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* 1:1: the stage scrolls; the image is at its intrinsic pixel size. A centering
   wrapper keeps a smaller-than-viewport render centered while a larger one scrolls
   within the stage only. Click toggles back to FIT (cursor: zoom-out). */
.rf-lbx-stage.is-actual {
  overflow: auto;
  cursor: zoom-out;
}
.rf-lbx-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 100%;
  width: fit-content;
  height: fit-content;
}
.rf-lbx-stage.is-actual img {
  display: block;
  max-width: none;
}
@media (max-width: 720px) {
  /* The hint segment ellipsizes on desktop; below 720px drop it entirely rather
     than let it crowd the toggle chips. */
  .rf-lbx-dim { display: none; }
}
.rf-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
}
.rf-range-row span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-5);
  letter-spacing: .08em;
}
.rf-range {
  flex: 1;
  appearance: none;
  height: 3px;
  background: rgba(255,255,255,.16);
  outline: none;
  cursor: ew-resize;
}
.rf-range::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 22px;
  background: var(--ac);
  box-shadow: 0 0 14px rgba(167,139,255,.7);
  cursor: ew-resize;
}
.rf-range::-moz-range-thumb {
  width: 15px;
  height: 22px;
  border: 0;
  background: var(--ac);
  cursor: ew-resize;
}
.rf-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.rf-pass-chip {
  padding: 5px 9px;
  font-size: 9px;
  letter-spacing: .04em;
}
.rf-pass-chip.is-active {
  color: var(--ac);
  border-color: rgba(167,139,255,.55);
}
.rf-pass-chip.is-pending {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  color: #4d5468;
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(-45deg,#0a0b10 0 7px,#0e1016 7px 14px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
}
.rf-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 14px 0 6px;
}
.rf-thumb {
  position: relative;
  flex: 0 0 96px;
  padding: 0 0 20px;
  border-color: transparent;
}
.rf-thumb img {
  width: 96px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,.12);
}
.rf-thumb.is-active img {
  border-color: var(--ac);
}
.rf-thumb.is-pending {
  display: grid;
  place-items: center;
  flex: 0 0 96px;
  aspect-ratio: 4 / 3;
  padding: 0;
  cursor: default;
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(-45deg,#0a0b10 0 7px,#0e1016 7px 14px);
}
.rf-thumb.is-pending span {
  position: static;
  color: #4d5468;
  font-size: 8px;
  letter-spacing: .1em;
  text-shadow: none;
}
.rf-thumb span,
.rf-thumb small {
  position: absolute;
  font-family: var(--font-mono);
}
.rf-thumb span {
  top: 4px;
  left: 5px;
  color: var(--ink-1);
  font-size: 8px;
  text-shadow: 0 1px 3px #000;
}
.rf-thumb small {
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--ink-3);
  font-size: 8.5px;
  text-align: center;
}

/* ── Prompt tournament ───────────────────────────────────────
   Implements docs/design_handoff_prompt_tournament (design → engineering).
   Values are the handoff's; the comments record why, where it is not
   obvious from the declaration. */

/* Composer notice — under the textarea, inside the composer card. */
.rf-brief-notice {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--ink-4);
}
.rf-brief-notice::before {
  content: "\25c6 ";
  color: var(--ac);
}
/* The escape hatch is a real <button> for the semantics, so it has to be
   un-buttoned by hand — otherwise it renders as an OS button mid-paragraph
   on a dark card. */
.rf-linkish {
  font: inherit;
  letter-spacing: inherit;
  color: var(--ac);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ac-glow);
}
.rf-linkish:hover {
  text-decoration-color: var(--ac);
  text-shadow: 0 0 12px var(--ac-glow);
}

/* Variant picker — panel matches the actions-aside treatment. */
.rf-variants {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  clip-path: var(--clip-card);
}
.rf-variants-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--ink-5);
}
.rf-variants-strip {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
/* Shrink rather than scroll: up to five readings share the row, so the
   whole set stays visible and comparable — comparing them is the point. */
.rf-variants-strip li {
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
}
/* The tile is a positioned cell holding two sibling controls: the pick and the
   enlarge. Siblings because .rf-variant is itself a button. */
.rf-variant-cell {
  position: relative;
}
/* Bottom-right: the AUTO / YOUR PICK tag holds the top-right corner
   (.rf-variant.is-chosen::after). */
.rf-variant-zoom {
  position: absolute;
  right: 11px;
  bottom: 32px;
  padding: 3px 6px;
  border: 1px solid var(--line-3);
  background: rgba(6, 7, 11, .85);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--ink-4);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
/* Revealed on hover or focus, so it never competes with the thumbnail at rest —
   but always reachable by keyboard. */
.rf-variant-cell:hover .rf-variant-zoom,
.rf-variant-zoom:focus-visible {
  opacity: 1;
}
/* No hover to reveal on: a coarse pointer would otherwise leave an invisible
   but still tappable control sitting on the pick target. */
@media (hover: none) {
  .rf-variant-zoom { opacity: 1; }
}
.rf-variant-zoom:hover {
  border-color: var(--ac);
  color: var(--ac);
}
.rf-variant {
  position: relative;
  display: block;
  width: 100%;
  padding: 5px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  text-align: left;
  cursor: pointer;
}
/* Sized explicitly because this codebase has no global img reset — every
   image is sized by its own rule. Without this the picker paints
   full-resolution renders at natural size. Unchosen readings sit back at
   .72 and come forward on hover or once chosen. */
.rf-variant img,
.rf-variant .rf-variant-ph {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
  opacity: .72;
}
/* A finalist whose image failed to persist keeps its label and stays
   pickable — a lost thumbnail never fails a run. Same hatch as an expired
   run, so "nothing to show" looks the same everywhere in Refine. */
.rf-variant .rf-variant-ph {
  display: grid;
  place-items: center;
  padding: 0;
  background: repeating-linear-gradient(-45deg, #0a0b10 0 7px, #0e1016 7px 14px);
  font-size: 8px;
  letter-spacing: .1em;
  color: #4d5468;
  text-transform: uppercase;
  white-space: normal;
}
.rf-variant:hover {
  border-color: var(--line-3);
}
.rf-variant:hover img {
  opacity: 1;
}
/* Ellipsised because labels are model-written: usually a few words, but
   "reading 1" when the model omits one, and occasionally long. */
.rf-variant span {
  display: block;
  overflow: hidden;
  padding: 8px 3px 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--ink-4);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.rf-variant.is-chosen {
  border-color: var(--ac);
  background: var(--ac-soft);
}
.rf-variant.is-chosen img {
  opacity: 1;
}
.rf-variant.is-chosen span {
  color: var(--ac);
}
/* Which KIND of chosen, in words rather than colour alone: quiet "AUTO"
   for the reading we suggested, accent "YOUR PICK" once the user has
   overridden it. The text comes from data-chosen-by on the button. */
.rf-variant.is-chosen::after {
  content: attr(data-chosen-by);
  position: absolute;
  top: 11px;
  right: 11px;
  padding: 3px 6px;
  border: 1px solid var(--line-3);
  background: rgba(6, 7, 11, .85);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.rf-variant.is-chosen.is-user-pick::after {
  border-color: var(--ac);
  color: var(--ac);
}
/* Every button disables while a pick is in flight, so this is the whole
   strip waiting, not one item refusing. */
.rf-variant:disabled {
  cursor: wait;
}
.rf-variant:disabled:not(.is-chosen) {
  opacity: .55;
}
.rf-variants-error {
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--danger);
}
.rf-stacked {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}
.rf-stack-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 13px 15px;
  text-align: left;
  background: var(--void);
}
.rf-stack-row.is-active {
  border-color: rgba(167,139,255,.55);
}
.rf-stack-thumb {
  position: relative;
  flex: 0 0 118px;
}
.rf-stack-thumb img {
  width: 118px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.rf-stack-thumb b {
  position: absolute;
  top: 4px;
  left: 5px;
  font-family: var(--font-mono);
  font-size: 8.5px;
}
.rf-stack-copy {
  min-width: 0;
  color: var(--ink-3);
}
.rf-stack-copy span {
  display: block;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.rf-stack-copy em {
  color: var(--ac);
  font-style: normal;
}
.rf-stack-copy small {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
}
.rf-critique {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
}
.rf-critique b {
  color: var(--ac);
  font-family: var(--font-mono);
  font-size: 10px;
}
.rf-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* ---- Verdict exports: the download-lock buttons (RefineV2.dc.html: .rf2-dl) ---
   Row 1 of the verdict actions. Each button runs an independent idle → busy → done
   machine: idle is the styled export; busy locks it (pointer-events:none) and plays
   a progress fill that eases toward "almost done" and holds until the real file
   arrives; done flips to SAVED before reverting to idle. */
/* Exports stack full-width in the actions side panel (v3): label left, icon
   right (space-between). */
.rf-dl-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.rf-dl {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 12px 15px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
}
.rf-dl-pri {
  color: #06070b;
  background: var(--ac);
  clip-path: var(--clip-xs);
  box-shadow: var(--glow-cta);
}
.rf-dl-gho {
  color: var(--ink-2);
  background: transparent;
  border-color: var(--line-3);
}
.rf-dl-gho:hover {
  color: var(--ac);
  border-color: var(--ac);
}
.rf-dl.busy {
  pointer-events: none;
  cursor: wait;
  color: var(--ink-2);
  background: var(--surface-2);
  border-color: var(--ac);
  box-shadow: none;
  clip-path: none;
}
.rf-dl.done {
  pointer-events: none;
  color: var(--ac);
  background: var(--ac-soft);
  border-color: var(--ac);
  box-shadow: none;
  clip-path: none;
}
.rf-dl-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--ac-soft);
  pointer-events: none;
}
.rf-dl.busy .rf-dl-fill {
  animation: rf-dl-fill 2.6s cubic-bezier(.35,.15,.25,1) forwards;
  box-shadow: inset -2px 0 0 var(--ac);
}
@keyframes rf-dl-fill {
  0% { width: 3%; }
  55% { width: 64%; }
  80% { width: 84%; }
  100% { width: 97%; }
}
.rf-dl.busy .rf-dl-ico {
  animation: rf-dl-drop .9s ease-in-out infinite;
}
@keyframes rf-dl-drop {
  0%, 100% { transform: translateY(-2px); opacity: .45; }
  50% { transform: translateY(2px); opacity: 1; }
}
/* Label + icon sit above the fill. */
.rf-dl-label,
.rf-dl-ico {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* No easing/bob: show a static, honest "in progress" fill instead. */
  .rf-dl.busy .rf-dl-fill { animation: none; width: 64%; }
  .rf-dl.busy .rf-dl-ico { animation: none; }
}

/* ---- Verdict area (design_handoff_refine_console Part 3) -------------------
   The Verdict card and a sticky actions side panel sit side by side; below 920px
   they stack (verdict first, actions below, nothing sticky). */
.rf-vgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
.rf-actions-panel {
  position: sticky;
  top: 92px;
  padding: 16px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  clip-path: var(--clip-card);
}
.rf-actions-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ink-6);
}
/* The // CONTINUE label follows the exports (or the // ACTIONS label directly,
   when there are no exports). */
.rf-actions-label + .rf-actions-label,
.rf-actions-divider + .rf-actions-label {
  margin-top: 14px;
}
.rf-actions-divider {
  height: 1px;
  margin-top: 14px;
  background: var(--line-1);
}
.rf-cont-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.rf-cont-act {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-3);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rf-cont-act:hover {
  color: var(--ac);
  border-color: var(--ac);
}
.rf-cont-act.is-quiet {
  border-color: transparent;
  color: var(--ink-4);
}
.rf-cont-act.is-quiet:hover {
  color: var(--ink-1);
  border-color: transparent;
}
@media (max-width: 920px) {
  .rf-vgrid {
    grid-template-columns: 1fr;
  }
  .rf-actions-panel {
    position: static;
  }
}

/* ---- Verdict card (web/src/Verdict.tsx; shellv2 README §Verdict family) ----
   The card's own posture styling is inline in the component (the design ships
   exact values); these are the surface-side rules — the phone reflow. The verdict
   panel is never accent-only: the badge text names the posture and a refusal's
   border is dashed. */
.rf-verdict {
  margin-top: 0;
}
.rf-verdict .rf-ai-note {
  margin-top: 10px;
}
@media (max-width: 720px) {
  /* 390px: the title must not shove the badge off the row, and the padding
     the design specifies for desktop eats a phone's whole gutter. */
  .rf-verdict {
    padding: 18px 16px !important;
  }
  .rf-verdict.is-compact {
    padding: 14px 14px !important;
  }
  .rf-verdict-title {
    font-size: 22px !important;
  }
  .rf-verdict.is-compact .rf-verdict-title {
    font-size: 18px !important;
  }
}

@media (max-width: 820px) {
  .rf-stack-row {
    flex-direction: column;
  }
  .rf-stack-thumb,
  .rf-stack-thumb img {
    width: 100%;
    flex-basis: auto;
  }
}

/* Phone-width polish for the refiner workspace. */
@media (max-width: 720px) {
  /* Title + honesty strap stack instead of fighting for one row. */
  .rf-workspace-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .rf-workspace-head p {
    text-align: left;
  }
  /* The TRY ONE examples read as three boxed buttons stacked edge-to-edge on
     a phone — render them as quiet underlined suggestions instead. The SIZE /
     FORMAT rows keep their boxed chips (they fit and carry selected state). */
  .rf-try button {
    padding: 2px 0;
    border: 0;
    color: var(--ink-4);
    text-decoration: underline;
    text-decoration-color: rgba(167,139,255,.45);
    text-underline-offset: 3px;
  }
  .rf-try button:hover {
    border: 0;
  }
  /* The Auto/Prose/JSON explainer is reference copy; the buttons carry the
     same text as tooltips and the selected state is self-evident. */
  .rf-format-hint {
    display: none;
  }
}

.banner { margin-top: 22px; padding: 13px 18px; --clip: var(--clip-md); position: relative; font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); color: var(--ink-3); }
.banner.ok { background: var(--success-soft); color: var(--success); }
.banner.ok::before { background: var(--success); }

/* ============================================================
   API keys + docs (slice 4d)
   ============================================================ */
.reveal { position: relative; margin-top: 24px; padding: 22px 24px; --clip: var(--clip-lg); background: var(--ac-soft); }
.reveal::before { background: var(--ac-glow); }
.reveal .k { font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ac); }
.reveal-key { display: block; margin: 12px 0; padding: 12px 14px; --clip: var(--clip-md); background: var(--void-2); color: var(--ink-0); font-family: var(--font-mono); font-size: var(--mono-md); word-break: break-all; clip-path: var(--clip-md); }
.reveal p { color: var(--ink-3); font-size: var(--body-sm); line-height: 1.5; }

.keys-grid { margin-top: 24px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .keys-grid { grid-template-columns: 1fr; } }
.keys-list { position: relative; padding: 8px 22px; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-1); }
.key-row:last-child { border-bottom: 0; }
.key-row.is-revoked { opacity: .5; }
.key-main { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.key-main code { font-family: var(--font-mono); font-size: var(--mono-md); color: var(--ink-1); }
.key-name { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.key-state { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-6); }
.key-revoke { color: var(--danger); }
.key-revoke:hover { color: var(--danger); filter: brightness(1.3); }
.keys-empty { padding: 20px 0; color: var(--ink-4); font-size: var(--body-sm); }
.keys-empty code, .key-row code { font-family: var(--font-mono); }
.new-key { padding: 22px; --clip: var(--clip-lg); display: flex; flex-direction: column; gap: 14px; }
.new-key .k { font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-1); }
.new-key .field { --clip: var(--clip-md); padding: 3px; background: var(--surface-3); }
.new-key .btn { justify-content: center; }
.keys-meta { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); }

.docs { padding: clamp(40px, 7vw, 80px) 0 var(--section-y); max-width: 820px; }
.docs .auth-h { margin-top: 14px; }
.docs .lede { margin-top: 16px; }
.doc-block { margin-top: 38px; }
.doc-h { font-family: var(--font-display); font-size: var(--display-xs); text-transform: uppercase; color: var(--ink-0); }
.doc-p { margin-top: 12px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }
.doc-p b { color: var(--ink-1); font-weight: var(--w-regular); }
.doc-p code, .docs code { font-family: var(--font-mono); font-size: .92em; color: var(--ac); background: var(--ac-soft); padding: 1px 6px; }
pre.code { margin-top: 16px; padding: 18px 20px; --clip: var(--clip-card); background: var(--void-2); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--mono-sm); line-height: 1.6; overflow-x: auto; white-space: pre; clip-path: var(--clip-card); }
pre.code, .reveal-key { border: 1px solid var(--line-2); }
.doc-block h3.doc-h { font-size: var(--body-lg); margin-top: 26px; }
/* display:block turns the table into its own horizontal scroll container so a
   wide row scrolls inside the docs card instead of widening the page (phones). */
.doc-table { display: block; width: 100%; margin-top: 16px; border-collapse: collapse; font-size: var(--body-sm); overflow-x: auto; }
.doc-table th, .doc-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.doc-table th { color: var(--ink-1); font-weight: var(--w-regular); border-bottom-color: var(--line-1); }
.doc-table td { color: var(--ink-3); line-height: var(--body-leading); }
.doc-table code { white-space: nowrap; }

/* ---- Loading indicator ---- */
.loading {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(22px, 3vw, 32px); --clip: var(--clip-xl);
  background: var(--void-2); color: var(--ink-3);
  font-family: var(--font-mono); font-size: var(--mono-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--ink-5); border-top-color: var(--ac);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.rf-pulse {
  display: inline-block;
  animation: rf-pulse 1.2s ease-in-out infinite;
}
@keyframes rf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.rf-sizes button[aria-pressed="true"] {
  color: var(--ac);
  border-color: var(--ac);
}

/* ---- Refining state: "next pass is cooking" cues ---- */
/* The head of the run is a FINISHED pass (history only ever holds real, completed
   renders — "we never hand you a fake-finished image"), so it is shown SHARP. It
   is never blurred: blurring finished pixels made a landed pass look unfinished.
   The in-progress next pass — which has no pixels yet — is signalled by the sweep
   sheen + the REFINING… tag + the progress line, not by degrading a real render.
   The transition is kept so any residual filter resolves smoothly if toggled. */
.rf-frame > img.rf-current {
  transition: opacity .35s ease, filter .5s ease, transform .5s ease;
}
/* Always mounted; hidden until the frame is refining. Kept in the DOM (rather
   than conditionally rendered) so toggling refining never restructures the
   frame and remounts / re-flashes the images. */
.rf-refine-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
/* A single light bar swept via translateX. It starts and ends FULLY off-screen
   on both sides, so the infinite loop's wrap point (100%→0%) has nothing
   visible — no flash at the seam. (Sweeping background-position on a repeating
   gradient flashed a band in from each edge at the wrap.) */
.rf-refine-sheen::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(
    100deg,
    transparent,
    color-mix(in srgb, var(--rf-accent, var(--ac)) 32%, transparent) 50%,
    transparent
  );
  mix-blend-mode: screen;
  transform: translateX(-160%);
}
.rf-frame.is-refining .rf-refine-sheen {
  opacity: 1;
}
.rf-frame.is-refining .rf-refine-sheen::before {
  animation: rf-sheen 1.7s ease-in-out infinite;
}
@keyframes rf-sheen {
  0% { transform: translateX(-160%); }   /* right edge at -25% → fully off left */
  100% { transform: translateX(360%); }  /* left edge at 151% → fully off right */
}
/* First-pass placeholder: no image yet, so a striped frame the sheen sweeps. */
.rf-skeleton {
  margin-top: 18px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--rf-accent, var(--ac)) 12%, transparent), transparent 60%),
    repeating-linear-gradient(115deg, #0b0d14 0 12px, #0e1119 12px 24px);
}
.rf-skeleton-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--rf-accent, var(--ac));
  background: rgba(6, 7, 11, .72);
  padding: 6px 12px;
}
/* Indeterminate progress line under the running status chip. */
.rf-progress {
  position: relative;
  height: 4px;
  margin-top: 16px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.rf-progress > span {
  display: block;
  height: 100%;
  min-width: 8%;
  background: var(--rf-accent, var(--ac));
  box-shadow: 0 0 12px color-mix(in srgb, var(--rf-accent, var(--ac)) 70%, transparent);
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
/* Brighter, breathing status chip while a pass is running. */
.rf-status.is-running {
  animation: rf-status-glow 1.6s ease-in-out infinite;
}
@keyframes rf-status-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--rf-accent, var(--ac)) 24%, transparent),
      0 0 10px color-mix(in srgb, var(--rf-accent, var(--ac)) 16%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--rf-accent, var(--ac)) 46%, transparent),
      0 0 22px color-mix(in srgb, var(--rf-accent, var(--ac)) 34%, transparent);
  }
}
.rf-ai-note {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-6);
}
/* The size the expander inferred from the brief, shown only when inference
   actually fired (CODE-329). Sits with the AI-generated note rather than
   competing with the verdict's own type scale. */
.rf-inferred-size {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--ink-6);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rf-inferred-size-use {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac, #a78bff);
  background: none;
  border: 1px solid currentcolor;
  padding: 2px 7px;
  cursor: pointer;
}
.rf-inferred-size-use:hover {
  background: color-mix(in srgb, var(--ac, #a78bff) 12%, transparent);
}
/* Stands in for the advance controls the design removed: the loop drives itself,
   so this is where the user learns that, and what the wait is holding. */
.rf-handsoff {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-4);
}
@media (prefers-reduced-motion: reduce) {
  /* Every looping workspace motion stills: the scrubber sheen, the ◆ pulse, the
     status glow, the spinner, and the fullscreen fade (CODE-187). */
  .rf-frame.is-refining .rf-refine-sheen::before,
  .rf-status.is-running,
  .rf-pulse,
  .spinner,
  .rf-lbx {
    animation: none;
  }
  .rf-frame.is-refining .rf-current {
    transition: none;
  }
}

/* ---- Docs: API-key caveat note + the reader's own keys ----
   .doc-note and .your-keys-list shipped with no rules at all: the note had no
   padding, so its text collided with the absolutely-positioned .card-corner,
   and the key list fell back to a browser-default bulleted <ul>. The panel
   itself (fill, border, clip) comes from .notch — this only supplies what was
   actually missing. */
.doc-note {
  margin-top: 20px;
  padding: 18px 20px;
}
.doc-note .doc-p:first-of-type { margin-top: 0; }

.your-keys-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.your-keys-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--void);
  border: 1px solid var(--line-2);
}
/* .docs code paints an accent chip; a full key is the content, not an inline chip. */
.your-keys-list code {
  font-family: var(--font-mono);
  font-size: var(--mono-sm);
  color: var(--ink-1);
  background: transparent;
  padding: 0;
}
.your-key-name {
  font-family: var(--font-mono);
  font-size: var(--mono-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-5);
  border: 1px solid var(--line-2);
  padding: 2px 7px;
}
/* The inspection did not come back. Deliberately quiet — the attachment is fine —
   but present, because silence here is indistinguishable from "this file carries
   no provenance", which is a claim we would then be making without having looked. */
.rf-drop-unread {
  margin: 0;
  padding: 0 14px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--ink-6);
}