/* ════════════════════════════════════════════════════════════════════
   HEYLO · app.css · the instrument, warmed to the glow
   The hello between how your customers feel and what the world sees.
   Internal SKU stays reviews (the engine namespace); the product is Heylo.

   Dark, still, precise, editorial. Left-aligned and asymmetric. Character
   from STRUCTURE (hairlines, ruled rows, numbered sections, real figures),
   not decoration. Every color, space, and radius is a token from
   ../assets/tokens.css; raw hex here is a defect.

   EMBER is reserved for exactly three meanings:
     1. the Heylo HALO mark glyph strokes (ring + arc + core)
     2. the Heylo Score (the one large glowing figure, §command)
     3. the one gold CTA (.btn-gold)
   Plus the permitted hairline exceptions: .lbl.ember labels, the structural
   meter fills (--grad-ember), and the .btn-upgrade ember OUTLINE.
   No other element is ember-filled. The only permitted glow is the soft
   --glow-ember text-shadow on the Heylo Score figure itself.

   Radii caps: --r-card 8px / --r-control 6px / --r-chip 4px.
   One scripted motion moment per rendered state (the Heylo Score count-up /
   glow-in, OR the firstrun halo glow-in, never both).
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.app-ground {
  background: var(--obsidian);
  color: var(--platinum);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ── primitives ─────────────────────────────────────────────────────── */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.disp { font-family: var(--disp); }
.mono-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--plat-faint); }
.lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); display: block; }
.lbl.ember { color: var(--ember); }
.ember { color: var(--ember); }
.why { display: block; margin-top: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--plat-faint); text-transform: none; line-height: 1.5; }
.grow { flex: 1 1 auto; min-width: 0; }

/* the glow · the ONLY permitted glow, on the Heylo Score figure (§3.5) */
.glow { text-shadow: var(--glow-ember); }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--graphite); color: var(--platinum); padding: 8px 12px; border-radius: var(--r-control); z-index: 99; outline: 1px solid var(--ember-deep); }

/* ── shell ──────────────────────────────────────────────────────────── */
.app { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px; height: 60px;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
}
.tb-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.tb-wordmark { font-family: var(--disp); font-size: 15px; letter-spacing: .05em; color: var(--platinum); line-height: 1; }

/* the Heylo Score in miniature · platinum, NOT ember (§2.5 binding) so the
   one large glowing score (§3) stays the singular ember number */
.tb-score {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding-left: 16px; margin-left: 2px;
  border-left: 1px solid var(--line);
}
.tb-score-num { font-family: var(--disp); font-size: 14px; letter-spacing: .01em; color: var(--platinum); line-height: 1; }
.tb-score-of { color: var(--plat-faint); white-space: nowrap; }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.tb-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line-hi); border-radius: var(--r-chip); padding: 3px 8px; line-height: 1.4;
}
.tb-mode { color: var(--plat-dim); }
.tb-plan { color: var(--plat-dim); }
.tb-plan.is-pro { color: var(--ember); border-color: var(--ember-deep); }
.clock { font-family: var(--mono); font-size: 12px; color: var(--plat-dim); }
.tb-op { color: var(--plat-dim); }
.tb-reset {
  background: none; border: 1px solid var(--line-hi); color: var(--plat-dim);
  border-radius: var(--r-control); padding: 5px 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.tb-reset:hover { color: var(--platinum); border-color: var(--ember-deep); }

@media (max-width: 720px) { .tb-score-of { display: none; } }
@media (max-width: 600px) {
  .topbar { gap: 11px; }
  .tb-score { padding-left: 12px; }
  .tb-mode, .clock { display: none; }
}
@media (max-width: 440px) { .tb-score { display: none; } }

.view { flex: 1 1 auto; padding: 26px 0 44px; outline: none; }
.app-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 22px 0 32px; }
.app-foot .mono-cap { color: var(--plat-faint); }
@media (max-width: 560px) { .app-foot > span:last-child { display: none; } }

/* ════════════════════════════════════════════════════════════════════
   §10.1 THE HEYLO HALO MARK · a hairline ember ring with a brighter ember
   arc catching the light across its upper third (the glow), and a small
   ember core (the hello). Ember hairlines on obsidian, fill:none. Once per
   page. The halo is a GLYPH, never a background blur.
   ════════════════════════════════════════════════════════════════════ */
.heylo-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.heylo-mark-sm { width: 22px; height: 22px; }
.heylo-mark-lg { width: 72px; height: 72px; margin-bottom: 22px; }
.heylo-mark-svg { width: 100%; height: 100%; display: block; }
.hm-ring { stroke: var(--ember-deep); }
.hm-arc  { stroke: var(--ember); }
.hm-core { stroke: var(--ember); }

/* firstrun halo · the single scripted motion for that state (§11.5): the
   arc brightens / draws in once. Rest state is the fully-formed halo at
   opacity 1, never gated on the animation. If motion is unsupported the
   mark is already correct. */
.heylo-mark-lg .hm-arc { stroke-dasharray: 46; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .firstrun .heylo-mark-lg .hm-ring { animation: halo-glow-in var(--m-enter) var(--ease-exit) both; }
  .firstrun .heylo-mark-lg .hm-arc  { animation: halo-arc-in 360ms var(--ease-exit) 120ms both; }
  .firstrun .heylo-mark-lg .hm-core { animation: halo-glow-in var(--m-enter) var(--ease-exit) 220ms both; }
}
@keyframes halo-glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes halo-arc-in {
  from { stroke-dashoffset: 46; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   §3 COMMAND BAR · the masthead + the single gold CTA + the Heylo Score
   as a glowing certified figure with the source strip. The page's only
   .btn-gold and only large glowing ember number.
   ════════════════════════════════════════════════════════════════════ */
.command-bar {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  background: var(--graphite-2); margin-bottom: 24px;
}
.cmd-move { padding: 24px 26px 26px; display: flex; flex-direction: column; }
.cmd-move .lbl.ember { margin-bottom: 14px; }
.cmd-headline {
  font-size: clamp(22px, 3.6vw, 30px); font-weight: 700; letter-spacing: -.022em;
  line-height: 1.1; color: var(--platinum);
}
.cmd-read { color: var(--plat-dim); font-size: 14.5px; line-height: 1.58; margin-top: 12px; max-width: 48ch; }
.cmd-cta { margin-top: 22px; }
.cmd-tally { margin-top: 18px; color: var(--plat-faint); letter-spacing: .1em; }

.cmd-score {
  padding: 24px 26px; border-left: 1px solid var(--line);
  background: linear-gradient(180deg, var(--tint-row), transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.cmd-score .lbl { color: var(--plat-faint); }

/* the Heylo Score figure · the ONE large glowing certified ember number */
.score-figure { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.score-num {
  font-family: var(--disp); font-size: clamp(42px, 8.5vw, 60px); font-weight: 400;
  letter-spacing: -.01em; line-height: 1; color: var(--ember);
  font-variant-numeric: tabular-nums;
}
/* the glow rides .score-num.glow only · the single permitted glow */
.score-num.glow { text-shadow: var(--glow-ember); }
.score-of { font-size: 18px; color: var(--plat-faint); font-weight: 500; line-height: 1; }
.score-trend { margin-top: 6px; color: var(--plat-faint); letter-spacing: .08em; }
.score-trend.up { color: var(--green); }
.score-trend.down { color: var(--red); }

/* the small platinum variant · reused for the §6 internal-sentiment figure
   (NOT ember, NOT glowing) */
.score-figure-sm { margin-top: 8px; }
.score-figure-sm .sentiment-num {
  font-family: var(--disp); font-size: clamp(30px, 6vw, 40px); font-weight: 400;
  letter-spacing: -.01em; line-height: 1; color: var(--platinum);
  font-variant-numeric: tabular-nums;
}
.score-figure-sm .score-of { font-size: 14px; }

@media (max-width: 760px) {
  .command-bar { grid-template-columns: 1fr; }
  .cmd-score { border-left: none; border-top: 1px solid var(--line); }
}

/* ── §10.3 the compact source strip (masthead version) ──────────────── */
.source-strip { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 4px; }
.source-strip-row {
  display: grid; grid-template-columns: 1.1fr 2fr auto auto; gap: 11px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.source-strip-row:last-child { border-bottom: none; }
.ss-src { color: var(--plat-dim); letter-spacing: .1em; white-space: nowrap; }
.ss-meter { height: 5px; background: var(--graphite); border-radius: var(--r-pill); overflow: hidden; }
.ss-rating { font-size: 12.5px; font-weight: 600; color: var(--platinum); text-align: right; min-width: 28px; }
.ss-delta { font-size: 11.5px; color: var(--plat-faint); text-align: right; min-width: 34px; }
.ss-delta.up { color: var(--green); }
.ss-delta.down { color: var(--red); }

/* the shared meter fill · structural ember gradient (permitted exception),
   used by .source-meter wrappers on both .ss-meter and .lr-meter */
.source-meter span { display: block; height: 100%; background: var(--grad-ember); border-radius: var(--r-pill); }

/* ════════════════════════════════════════════════════════════════════
   BUTTONS · the one gold CTA, ordinary controls, the ember-outline
   upgrade. .btn-gold and .score-num are the only filled-ember surfaces.
   ════════════════════════════════════════════════════════════════════ */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ember); color: var(--ember-ink);
  font-family: var(--body); font-weight: 700; font-size: 14.5px; letter-spacing: -.005em;
  border: none; cursor: pointer; padding: 13px 22px; border-radius: var(--r-control);
  transition: background var(--m-fast) var(--ease), transform var(--m-fast) var(--ease-spring);
}
.btn-gold:hover { background: var(--ember-hi); }
.btn-gold:active { transform: translateY(1px); }
.btn-gold:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--graphite); color: var(--platinum);
  border: 1px solid var(--line-hi); border-radius: var(--r-control);
  font-family: var(--body); font-size: 13px; cursor: pointer;
  padding: 8px 13px; transition: border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
}
.btn:hover { border-color: var(--ember-deep); background: var(--tint-hover); }
.btn:focus-visible { outline: 1px solid var(--ember-deep); outline-offset: 1px; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; min-width: 30px; }
.btn-link {
  background: none; border: none; color: var(--ember); padding: 4px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color var(--m-fast) var(--ease);
}
.btn-link:hover { color: var(--ember-hi); }

/* the upgrade action · ember OUTLINE only, never a solid fill (§8.4) */
.btn-upgrade {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--graphite); color: var(--ember);
  border: 1px solid var(--ember); border-radius: var(--r-control);
  font-family: var(--body); font-weight: 600; font-size: 14px; cursor: pointer;
  padding: 12px 20px; transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.btn-upgrade:hover { background: var(--tint-hover); border-color: var(--ember-hi); color: var(--ember-hi); }
.btn-upgrade:focus-visible { outline: 1px solid var(--ember-hi); outline-offset: 2px; }

/* ── grid ───────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; margin-top: 22px; }
@media (max-width: 880px) { .grid-2 { grid-template-columns: 1fr; } }
.col-main { min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ── §9 panel · the instrument frame ────────────────────────────────── */
.panel { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite-2); overflow: hidden; }
.panel + .panel { margin-top: 22px; }
.panel-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--platinum); }
.panel-sub { margin-top: 5px; text-transform: none; letter-spacing: .02em; line-height: 1.5; color: var(--plat-faint); }
.panel-head .btn { margin-left: auto; flex: 0 0 auto; }
.panel-head .pro-lock { margin-left: auto; flex: 0 0 auto; align-self: center; }
.panel-body { padding: 4px 18px 10px; }

/* ════════════════════════════════════════════════════════════════════
   §10.4 THE RESCUE FORK · the signature figure (rendered once in the
   console head). Two lanes: LIGHT ADDED (green hairline, up) and SHADOW
   CAUGHT (red hairline, down) with the ember-labelled drafted recovery.
   ════════════════════════════════════════════════════════════════════ */
.rescue-fork { margin: 14px 18px 4px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--graphite); overflow: hidden; }
.fork-stem {
  padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--plat-dim);
  letter-spacing: .12em; background: var(--tint-row);
}
.fork-lanes { display: grid; grid-template-columns: 1fr 1fr; }
.fork-lane { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; }
.fork-lane.light { border-right: 1px solid var(--line); border-left: 2px solid var(--green); }
.fork-lane.shadow { border-left: 2px solid var(--red); }
.fl-tag { letter-spacing: .1em; }
.fork-lane.light .fl-tag { color: var(--green); }
.fork-lane.shadow .fl-tag { color: var(--red); }
.fl-read { margin-top: 0; }
@media (max-width: 560px) {
  .fork-lanes { grid-template-columns: 1fr; }
  .fork-lane.light { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ════════════════════════════════════════════════════════════════════
   §4 CONSOLE · the completed-work console. Ruled rows; each row's state is
   its light/shadow state. The light + hello vocabulary, never the old
   wording.
   ════════════════════════════════════════════════════════════════════ */
.console-list { padding: 2px 0 6px; }
.console-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.console-list > .console-row:last-of-type,
.console-list > .state-note:last-child { border-bottom: none; }
/* the light/shadow state shows as a left hairline accent, from structure */
.console-row[data-state="UNASKED"]     { box-shadow: inset 2px 0 0 var(--line-hi); padding-left: 12px; }
.console-row[data-state="REQUESTED"]   { box-shadow: inset 2px 0 0 var(--trust); padding-left: 12px; }
.console-row[data-state="POSTED"]      { box-shadow: inset 2px 0 0 var(--green); padding-left: 12px; }
.console-row[data-state="RESCUE_OPEN"] { box-shadow: inset 2px 0 0 var(--red); padding-left: 12px; }
.console-row[data-state="RESCUE_SENT"] { box-shadow: inset 2px 0 0 var(--amber); padding-left: 12px; }

.cr-id { color: var(--plat-faint); padding-top: 3px; min-width: 22px; letter-spacing: .06em; }
.cr-main { display: flex; flex-direction: column; gap: 2px; }
.cr-name { font-weight: 600; font-size: 14.5px; color: var(--platinum); }
.cr-meta { margin-top: 4px; }
.cr-right {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  max-width: 64%; padding-top: 1px;
}
.cr-sim-lbl { color: var(--plat-faint); letter-spacing: .08em; width: 100%; text-align: right; margin-bottom: 1px; }

/* the state tags · functional/platinum, never the reserved ember fill */
.state-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-chip); border: 1px solid var(--line-hi);
  color: var(--plat-dim); white-space: nowrap; line-height: 1.4;
}
.state-tag.dim { color: var(--plat-faint); }
.state-tag.info { color: var(--trust); border-color: color-mix(in srgb, var(--trust) 42%, var(--line-hi)); }
.state-tag.light { color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, var(--line-hi)); }
.state-tag.shadow { color: var(--red); border-color: color-mix(in srgb, var(--red) 42%, var(--line-hi)); }
.state-tag.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, var(--line-hi)); }

/* the public rating figure (light added) · green-leaning, NOT reserved ember */
.light-num { font-size: 14px; font-weight: 650; color: var(--green); font-variant-numeric: tabular-nums; }

/* the state note sub-row */
.state-note {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 13px; margin: 2px 0 14px;
  border-radius: var(--r-control); font-size: 13px;
}
.state-note.info { background: var(--tint-row); border-left: 1px solid var(--line-hi); align-items: center; }
.state-note.light { background: color-mix(in srgb, var(--green) 7%, transparent); border-left: 1px solid var(--green); align-items: center; }
.state-note.shadow { background: color-mix(in srgb, var(--red) 7%, transparent); border-left: 1px solid var(--red); }
.state-note .mono-cap { text-transform: none; letter-spacing: .01em; font-size: 11.5px; color: var(--plat-dim); line-height: 1.5; }
.state-note .btn-link { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }
.state-note .btn-sm { flex: 0 0 auto; align-self: center; }
.state-note .why { margin-top: 7px; }
.state-note .state-tag.ok { margin-left: auto; flex: 0 0 auto; align-self: center; }

/* the drafted-recovery block · the ONE permitted ember hairline label */
.draft-block { border-left: 1px solid var(--ember-deep); padding-left: 12px; }
.draft-block .lbl.ember { margin-bottom: 5px; }
.draft-text { font-size: 13.5px; color: var(--platinum); line-height: 1.5; display: block; }

.empty { padding: 26px 2px 28px; }
.empty p { color: var(--plat-dim); font-size: 14px; margin-bottom: 14px; line-height: 1.55; }

/* ════════════════════════════════════════════════════════════════════
   §5 THE HEYLO SCORE DASHBOARD · the source ledger, the full version.
   Four sources, rating + volume meter + trend, plus the velocity / leak read.
   ════════════════════════════════════════════════════════════════════ */
.ledger { padding: 4px 0 8px; }
.ledger-row {
  display: grid; grid-template-columns: 1.3fr 1.2fr 2fr 0.7fr 0.7fr; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-head {
  color: var(--plat-faint); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.lr-src { font-size: 13.5px; font-weight: 600; color: var(--platinum); }
.lr-rating { font-size: 14px; font-weight: 650; color: var(--platinum); display: flex; flex-direction: column; gap: 2px; }
.lr-stars { font-size: 9px; letter-spacing: 1px; color: var(--plat-dim); }
.lr-meter { height: 6px; background: var(--graphite); border-radius: var(--r-pill); overflow: hidden; }
.lr-count { font-size: 13px; color: var(--plat-dim); text-align: right; }
.lr-trend { font-size: 12.5px; text-align: right; color: var(--plat-faint); }
.lr-trend.up { color: var(--green); }
.lr-trend.down { color: var(--red); }
@media (max-width: 480px) {
  .ledger-row { grid-template-columns: 1.2fr 1fr 0.6fr; }
  .lr-meter, .ledger-head div:nth-child(3), .ledger-head div:nth-child(4) { display: none; }
}

.velocity { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.vel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; }
.vel-row .lbl { flex: 0 0 auto; color: var(--plat-faint); }
.vel-read { text-transform: none; letter-spacing: .01em; font-size: 11.5px; color: var(--plat-dim); text-align: right; line-height: 1.5; }
.velocity .btn-link { margin-top: 8px; }
@media (max-width: 480px) {
  .vel-row { flex-direction: column; gap: 3px; }
  .vel-read { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════
   §6 SIGNALS · NEW · the private pulse, the internal-feedback (Medallia)
   layer. A ruled list of recent private signals with sentiment, plus a
   small internal-sentiment figure. Pro is the real layer; Free renders a
   previewed/locked teaser. Nothing ember; the figure is platinum.
   ════════════════════════════════════════════════════════════════════ */
.signals-body { display: grid; grid-template-columns: 0.9fr 2fr; gap: 22px; padding: 6px 0 8px; align-items: start; }
@media (max-width: 760px) { .signals-body { grid-template-columns: 1fr; } }

/* the locked state · hairline-veiled, dimmed, signalling Pro (no glow) */
.signals-body.is-locked { position: relative; }
.signals-body.is-locked .signal-list { opacity: .55; filter: saturate(.6); }
.signals-body.is-locked .signal-list::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 7px, var(--hairline) 7px, var(--hairline) 8px);
  pointer-events: none; border-radius: var(--r-control);
}
.signals-body.is-locked .signal-list { position: relative; }

.signal-figure {
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--graphite);
  padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.signal-figure .lbl { color: var(--plat-faint); }

/* the internal-sentiment figure is platinum (.sentiment-num), NOT ember */

/* the tri-segment sentiment bar · functional warm / neutral / cool */
.signal-meter {
  display: flex; height: 7px; margin-top: 12px; border-radius: var(--r-pill);
  overflow: hidden; background: var(--graphite-2); border: 1px solid var(--line);
}
.signal-meter span { display: block; height: 100%; }
.sm-warm { background: var(--green); }
.sm-neutral { background: var(--plat-dim); }
.sm-cool { background: var(--red); }
.signal-legend { margin-top: 10px; text-transform: none; letter-spacing: .01em; font-size: 11px; color: var(--plat-dim); }

/* the internal-vs-public gap · the early-warning read (functional color only) */
.signal-gap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.signal-gap .sg-row { display: flex; justify-content: space-between; gap: 10px; text-transform: none; letter-spacing: .02em; color: var(--plat-dim); }
.signal-gap .sg-read { margin-top: 7px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--plat-faint); letter-spacing: .01em; }
.signal-gap.up .sg-read { color: var(--green); }
.signal-gap.down .sg-read { color: var(--red); }

/* the right column · drivers strip above the signal list */
.signal-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* drivers · what the private feedback is about, by theme (functional lean) */
.drivers { border: 1px solid var(--line); border-radius: var(--r-control); background: var(--graphite-2); padding: 12px 14px 6px; }
.drivers-head { text-transform: none; letter-spacing: .02em; color: var(--plat-faint); margin-bottom: 8px; }
.driver-row { display: grid; grid-template-columns: 1.2fr 2fr auto auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.driver-row:first-of-type { border-top: none; }
.dr-theme { font-size: 13px; font-weight: 600; color: var(--platinum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-bar { height: 6px; border-radius: var(--r-pill); background: var(--graphite); overflow: hidden; }
.dr-bar span { display: block; height: 100%; background: var(--plat-dim); border-radius: var(--r-pill); }
.dr-bar span.up { background: var(--green); }
.dr-bar span.down { background: var(--red); }
.dr-n { font-size: 12.5px; color: var(--plat-dim); text-align: right; min-width: 16px; }
.dr-lean { color: var(--plat-faint); white-space: nowrap; }
.dr-lean.up { color: var(--green); }
.dr-lean.down { color: var(--red); }
@media (max-width: 480px) {
  .driver-row { grid-template-columns: 1fr auto auto; }
  .dr-bar { display: none; }
}

.signal-list { display: flex; flex-direction: column; }
.signal-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background var(--m-fast) var(--ease);
}
.signal-row:last-child { border-bottom: none; }
.signal-row:hover { background: var(--tint-hover); }
.sig-dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: 0 0 auto; margin-top: 6px; background: var(--plat-dim); }
.signal-row[data-sentiment="warm"] .sig-dot { background: var(--green); }
.signal-row[data-sentiment="neutral"] .sig-dot { background: var(--plat-dim); }
.signal-row[data-sentiment="cool"] .sig-dot { background: var(--red); }
.sig-main { display: flex; flex-direction: column; gap: 2px; }
.sig-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sig-name { font-weight: 600; font-size: 14px; color: var(--platinum); }
.sig-theme { letter-spacing: .1em; color: var(--plat-faint); }
.sig-note { margin-top: 3px; }
.sig-meta { white-space: nowrap; color: var(--plat-faint); flex: 0 0 auto; padding-top: 2px; }
@media (max-width: 480px) {
  .signal-row { flex-wrap: wrap; }
  .sig-meta { width: 100%; margin-top: 4px; padding-left: 20px; }
}

.signals-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 4px; padding: 14px 0 6px;
}
.signals-foot .mono-cap { text-transform: none; letter-spacing: .01em; font-size: 11.5px; color: var(--plat-dim); flex: 1 1 240px; line-height: 1.5; }
.signals-foot .btn-sm { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 520px) { .signals-foot .btn-sm { margin-left: 0; } }

/* ════════════════════════════════════════════════════════════════════
   §9b THE RECORD · the closed-loop ledger. Monospace, ruled rows,
   timestamps. Functional up/down only, no ember.
   ════════════════════════════════════════════════════════════════════ */
.ledger-record { padding: 2px 0 6px; }
.record-row {
  display: flex; align-items: baseline; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.record-row:last-child { border-bottom: none; }
.rr-stamp { color: var(--plat-faint); white-space: nowrap; font-size: 10px; letter-spacing: .06em; flex: 0 0 auto; }
.rr-type { white-space: nowrap; min-width: 92px; color: var(--plat-dim); letter-spacing: .08em; flex: 0 0 auto; }
.rr-type.up { color: var(--green); }
.rr-type.down { color: var(--red); }
.rr-subj { font-size: 13px; color: var(--platinum); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-ago { white-space: nowrap; color: var(--plat-faint); flex: 0 0 auto; }
@media (max-width: 400px) { .rr-stamp { display: none; } .rr-type { min-width: 78px; } }

/* ════════════════════════════════════════════════════════════════════
   §7 THE GLOW WALL · the capture page preview + the embeddable wall of
   verified five-stars (a Pro tool, locked on Free). No .btn-gold here.
   ════════════════════════════════════════════════════════════════════ */
.wall-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 22px; padding: 6px 0 8px; align-items: start; }
@media (max-width: 760px) { .wall-split { grid-template-columns: 1fr; } }
.wall-capture { display: flex; flex-direction: column; gap: 12px; }
.wall-capture .lbl { color: var(--plat-faint); }
.capture-card {
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: linear-gradient(180deg, var(--graphite), var(--graphite-2));
  padding: 20px 18px; display: flex; flex-direction: column; gap: 10px;
}
.cc-prompt { font-size: 15px; font-weight: 600; color: var(--platinum); line-height: 1.4; }
.cc-stars { font-size: 18px; letter-spacing: 4px; color: var(--plat-dim); }
.cc-fork { text-transform: none; letter-spacing: .01em; font-size: 11.5px; color: var(--plat-faint); line-height: 1.55; }
.wall-capture .btn-sm { align-self: flex-start; }

.wall-embed { display: flex; flex-direction: column; gap: 12px; }
.wall-embed-head { display: flex; align-items: center; gap: 10px; }
.wall-embed-head .lbl { color: var(--plat-faint); }
.wall-embed-head .pro-lock { margin-left: auto; }
.wall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 980px) { .wall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wall-grid { grid-template-columns: 1fr; } }
/* the locked state · hairline-veiled, dimmed, signalling Pro (no glow) */
.wall-grid.is-locked { position: relative; opacity: .6; filter: saturate(.6); }
.wall-grid.is-locked::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 7px, var(--hairline) 7px, var(--hairline) 8px);
  pointer-events: none; border-radius: var(--r-control);
}
.wall-card {
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--graphite);
  padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 9px;
}
.wc-stars { font-size: 12px; letter-spacing: 2px; color: var(--plat-dim); }
.wc-quote { font-size: 13px; line-height: 1.5; color: var(--platinum); font-style: normal; }
.wc-by { text-transform: none; letter-spacing: .01em; font-size: 10.5px; color: var(--plat-faint); margin-top: auto; }

.wall-embed-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.wall-embed-foot .mono-cap { text-transform: none; letter-spacing: .01em; font-size: 11.5px; color: var(--plat-dim); }
.wall-embed-foot .btn-sm { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 520px) { .wall-embed-foot .btn-sm { margin-left: 0; } }

/* the PRO lock chip · amber, never the reserved ember CTA */
.pro-lock {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line-hi));
  border-radius: var(--r-chip); padding: 3px 7px; line-height: 1.4; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   §8 UPSELL · the locked Pro tools as numbered ruled rows (NOT an icon
   grid), one ember-outline upgrade action.
   ════════════════════════════════════════════════════════════════════ */
.upsell {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite-2);
  margin-top: 24px; padding: 24px 26px 26px;
}
.upsell-head { max-width: 60ch; }
.upsell-head .lbl.ember { margin-bottom: 12px; }
.upsell-title { font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; color: var(--platinum); }
.upsell-read { color: var(--plat-dim); font-size: 14px; line-height: 1.58; margin-top: 11px; }

.pro-locks { list-style: none; margin: 22px 0 0; border-top: 1px solid var(--line); }
.pro-lock-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.pl-id { color: var(--plat-faint); padding-top: 3px; min-width: 22px; letter-spacing: .06em; flex: 0 0 auto; }
.pl-main { display: flex; flex-direction: column; gap: 3px; }
.pl-name { font-weight: 600; font-size: 14.5px; color: var(--platinum); }
.pl-read { margin-top: 3px; }
.pro-lock-row .pro-lock { flex: 0 0 auto; align-self: center; }

.upsell-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.upsell-price { display: flex; align-items: baseline; gap: 7px; }
.up-amount { font-family: var(--disp); font-size: 26px; letter-spacing: .01em; color: var(--platinum); line-height: 1; }
.up-per { color: var(--plat-faint); letter-spacing: .1em; }
.upsell-foot .btn-upgrade { margin-left: auto; }
@media (max-width: 520px) {
  .upsell { padding: 22px 18px 24px; }
  .upsell-foot .btn-upgrade { margin-left: 0; width: 100%; }
}

/* the Pro confirmation strip (when on Pro) */
.upsell-active { padding: 18px 26px; }
.upsell-active .lbl.ember { margin-bottom: 8px; }
.upsell-active .upsell-read { margin-top: 0; max-width: 80ch; }

/* ════════════════════════════════════════════════════════════════════
   §11.5 FIRSTRUN · the empty / first-run state. The first run is the
   product. The large halo plays the single scripted glow-in for this state.
   Hosts the page's single gold CTA in the empty state.
   ════════════════════════════════════════════════════════════════════ */
.firstrun {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite-2);
  padding: 44px 40px 46px; max-width: 760px;
}
.firstrun .lbl.ember { margin-bottom: 14px; }
.fr-title { font-family: var(--disp); font-size: clamp(26px, 4.6vw, 38px); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; color: var(--platinum); }
.fr-read { color: var(--plat-dim); font-size: 15px; line-height: 1.62; margin-top: 16px; max-width: 56ch; }
.fr-steps { list-style: none; margin: 28px 0 0; border-top: 1px solid var(--line); max-width: 60ch; }
.fr-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fs-id { color: var(--plat-faint); padding-top: 2px; min-width: 22px; letter-spacing: .06em; flex: 0 0 auto; }
.fs-text { font-size: 14px; line-height: 1.55; color: var(--platinum); }
.fr-cta { margin-top: 28px; }
@media (max-width: 520px) { .firstrun { padding: 32px 22px 34px; } }

/* ════════════════════════════════════════════════════════════════════
   TOASTS
   ════════════════════════════════════════════════════════════════════ */
.toasts {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--graphite); border: 1px solid var(--line-hi); border-radius: var(--r-control);
  padding: 12px 16px; display: flex; gap: 12px; align-items: center; max-width: 90vw;
  box-shadow: 0 10px 40px var(--scrim); opacity: 0; pointer-events: none;
  transition: opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease-exit); z-index: 80;
}
.toasts.on { opacity: 1; transform: translate(-50%, 0); }
.toast-tag { color: var(--ember); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; flex: 0 0 auto; }
.toast-msg { font-size: 13.5px; color: var(--platinum); }

/* ════════════════════════════════════════════════════════════════════
   CHIPS · legacy, retained for Views.chip compatibility (may be unused)
   ════════════════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-chip);
  border: 1px solid var(--line-hi); color: var(--plat-dim); white-space: nowrap;
}
.chip.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--line-hi)); }
.chip.info { color: var(--trust); border-color: color-mix(in srgb, var(--trust) 40%, var(--line-hi)); }
.chip.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line-hi)); }
.chip.dim { color: var(--plat-faint); }