/* ============================================================
   Phase B Components — Stylesheet
   Styles for shared infra + B3 / S2 / S3 across three variants.
   ============================================================ */

/* ─── Shared infra ─────────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  line-height: 1;
  background: var(--status-not-yet-bg);
  color: var(--status-not-yet-fg);
}
.status-badge--sm { padding: 3px 8px 3px 7px; font-size: var(--text-xs); gap: 5px; }
.status-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.85; flex-shrink: 0;
}
.status-badge__label { letter-spacing: 0.01em; }
.status-badge__info {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(46,46,46,0.12); color: inherit;
  font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--fw-medium);
  font-style: italic; line-height: 1; cursor: help;
}
.status-badge--qualification-not-yet         { background: var(--status-not-yet-bg);          color: var(--status-not-yet-fg); }
.status-badge--qualification-tier1            { background: var(--status-tier1-bg);             color: var(--status-tier1-fg); }
.status-badge--qualification-tier2-booked     { background: var(--status-tier2-booked-bg);      color: var(--status-tier2-booked-fg); }
.status-badge--qualification-tier2-confirmed  { background: var(--status-tier2-confirmed-bg);   color: var(--status-tier2-confirmed-fg); }
.status-badge--qualification-tier2-failed     { background: var(--status-tier2-failed-bg);      color: var(--status-tier2-failed-fg); }
.status-badge--readiness-ready                { background: var(--readiness-ready-bg);          color: var(--readiness-ready-fg); }
.status-badge--readiness-awaiting             { background: var(--readiness-awaiting-bg);       color: var(--readiness-awaiting-fg); }
.status-badge--readiness-excluded             { background: var(--readiness-excluded-bg);       color: var(--readiness-excluded-fg); }
/* Operational status — separate seven-state set (capitalised labels) */
.status-badge--operational-complete      { background: var(--op-complete-bg);     color: var(--op-complete-fg); }
.status-badge--operational-in-progress   { background: var(--op-in-progress-bg);  color: var(--op-in-progress-fg); }
.status-badge--operational-issues        { background: var(--op-issues-bg);       color: var(--op-issues-fg); }
.status-badge--operational-not-started   { background: var(--op-not-started-bg);  color: var(--op-not-started-fg); }
.status-badge--operational-awaiting      { background: var(--op-awaiting-bg);     color: var(--op-awaiting-fg); }
.status-badge--operational-scheduled     { background: var(--op-scheduled-bg);    color: var(--op-scheduled-fg); }
.status-badge--operational-not-required  { background: var(--op-not-required-bg); color: var(--op-not-required-fg); }
.status-badge--dim { opacity: 0.45; }

.config-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: var(--r-xs);
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); letter-spacing: 0.04em;
  background: rgba(46, 46, 46, 0.06);
  color: var(--tf-offblack);
  text-transform: uppercase;
  border: 1px solid transparent;
}
/* Tariff structure pair — locked semantic colours (decisions log v5).
   Solid hue fill, dark text, soft rounded corners, no border or dot.
   Matches the established 10-yr warranty style in the codebase.
   Modelled / undecided unchanged. */
.config-pill--fixed {
  background: var(--tf-fixed);
  color: var(--tf-offblack);
  border: none;
  border-radius: var(--r-sm);
  padding: 4px 10px;
}
.config-pill--dynamic {
  background: var(--tf-dynamic);
  color: var(--tf-offblack);
  border: none;
  border-radius: var(--r-sm);
  padding: 4px 10px;
}
.config-pill--undecided,
.config-pill--modelled {
  background: rgba(46,46,46,0.04);
  color: var(--tf-muted);
  border-color: var(--tf-border);
}
.config-pill--dynamic.config-pill--dim {
  /* Same hex, but blended with white to reduce saturation without going grey.
     Matches the dimmed-logo treatment for "modelled" state. Qualified to
     --dynamic so a dimmed neutral pill (modelled/undecided) is not blue-tinted. */
  background: color-mix(in srgb, var(--tf-dynamic) 55%, var(--tf-white));
}
.config-pill--fixed.config-pill--dim {
  background: color-mix(in srgb, var(--tf-fixed) 55%, var(--tf-white));
}

.caveat-icon {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  margin-left: 0; cursor: help;
  background: transparent;
  flex: 0 0 auto;
}
.caveat-icon--warning { color: var(--tf-ink); }
.caveat-icon--error   { color: var(--status-tier2-failed-fg); }
.caveat-icon svg { display: block; }

.info-explainer { position: relative; display: inline-flex; }
.info-explainer__trigger { display: inline-flex; }
.info-explainer__pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--tf-ink); color: var(--tf-offwhite);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--fw-regular);
  padding: 8px 12px; border-radius: var(--r-sm);
  white-space: normal; min-width: 180px; max-width: 240px;
  line-height: 1.4; letter-spacing: 0;
  box-shadow: var(--shadow-pop);
  z-index: 50; pointer-events: none;
  text-transform: none;
}
.info-explainer__pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--tf-ink);
}

/* ─── KPI tile ─────────────────────────────────────────────── */
.kpi-tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0;
}
.kpi-tile__head {
  display: flex; align-items: center; gap: 8px;
}
.kpi-tile__label {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--tf-muted);
}
.kpi-tile__badge {
  display: inline-flex; align-items: center;
  padding: 2px 6px; border-radius: var(--r-xs);
  background: rgba(46,46,46,0.06); color: var(--tf-muted);
  font-size: var(--text-3xs); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase;
}
.kpi-tile__value {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em; line-height: 1.04;
  color: var(--tf-offblack);
}
.kpi-tile__unit {
  font-size: 0.42em; color: var(--tf-muted);
  font-weight: var(--fw-regular); margin-left: 2px;
  letter-spacing: 0;
}
.kpi-tile__sub {
  font-size: var(--text-sm); color: var(--tf-muted);
}

/* ─── Buttons ───────────────────────────────────────────────
   System (locked Phase B v2):
     .btn--primary   solid charcoal, white text       — primary action, takes user somewhere new
     .btn--secondary outlined charcoal, charcoal text — in-place / supporting action
     .btn--text      transparent + arrow + underline  — inline tertiary link
     .btn--accent    yellow fill, charcoal text       — reserved (final CTA only)
   Modifiers: --lg (taller), --block (full width)
   .btn--ghost retained as alias of --secondary for back-compat. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 40px; padding: 8px 18px;
  font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--fw-semibold);
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; transition: all var(--dur-quick) var(--ease-out);
  white-space: nowrap;
}
.btn--primary { background: var(--tf-offblack); color: var(--tf-offwhite); border-color: var(--tf-offblack); }
.btn--primary:hover { background: var(--tf-ink); border-color: var(--tf-ink); }
.btn--secondary,
.btn--ghost   { background: transparent; color: var(--tf-offblack); border-color: var(--tf-border-strong); }
.btn--secondary:hover,
.btn--ghost:hover { background: rgba(46,46,46,0.04); border-color: var(--tf-offblack); }
.btn--text { background: transparent; color: var(--tf-offblack); padding: 6px 0; min-height: auto; border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--tf-offblack); gap: 6px; }
.btn--text:hover { box-shadow: inset 0 -1px 0 var(--tf-offblack), 0 1px 0 var(--tf-offblack); }
.btn--text-lg { font-size: var(--text-lg); padding-bottom: 4px; }
.btn--lg { min-height: 48px; padding: 10px 22px; font-size: var(--text-lg); }
.btn--block { width: 100%; }
.btn--accent { background: var(--tf-yellow); color: var(--tf-offblack); border-color: var(--tf-yellow); }
.btn--accent:hover { background: var(--tf-yellow-deep); border-color: var(--tf-yellow-deep); }
.btn__arrow { transition: transform 120ms ease; font-family: var(--font-ui); }
.btn:hover .btn__arrow { transform: translateX(2px); }

/* ═════════ B3 — REFINED ═════════ */
.b3 { font-family: var(--font-ui); color: var(--tf-offblack); }
.b3--refined {
  background: var(--tf-paper);
  border: 1px solid var(--tf-border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
}
.b3__header { margin-bottom: 28px; display: flex; flex-direction: column; gap: 8px; }
.b3__title {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-heading); margin: 4px 0 0;
}
.b3__sub { color: var(--tf-muted); font-size: var(--text-base); margin: 0; }
.b3__table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
  font-size: var(--text-base);
}
.b3__table thead th {
  text-align: left; padding: 12px 16px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-muted);
  border-bottom: 1px solid var(--tf-border-strong);
  white-space: nowrap;
}
.b3__th-num { text-align: right !important; }
.b3__th-num--left { text-align: left !important; }
.b3__th-savings { text-align: left !important; }
.b3__th-site { width: 30%; }
.b3__th-config { width: 13%; }
.b3__th-savings { width: 12%; }
.b3__col-payback { width: 10%; }
.b3__col-capex { width: 12%; }
.b3__th-status { width: 19%; }
.b3__th-action { width: 4%; }
.b3__sort-arrow { color: var(--tf-offblack); margin-left: 4px; }
.b3__row {
  background: var(--tf-white);
  cursor: pointer; transition: background var(--dur-quick) var(--ease-out);
}
.b3__row:hover { background: rgba(255,255,255,0.6); box-shadow: 0 0 0 1px var(--tf-border-strong) inset; }
.b3__row td { padding: 18px 16px; vertical-align: middle; border-top: 4px solid var(--tf-paper); border-bottom: 0; }
.b3__row td:first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.b3__row td:last-child  { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.b3__cell-site { max-width: 320px; }
.b3__site-name { font-size: var(--text-lg); font-weight: var(--fw-semibold); margin-bottom: 4px; line-height: 1.2; }
.b3__site-meta { font-size: var(--text-sm); color: var(--tf-muted); line-height: 1.4; }
.b3__cell-num { text-align: right; }
.b3__cell-capex-left { text-align: left; padding-left: 56px !important; }
.b3__col-capex { padding-left: 56px !important; }
.b3__cell-savings-left { text-align: left; }
.b3__cell-savings { font-size: var(--text-lg); }
.b3__cell-suffix { font-size: var(--text-xs); color: var(--tf-muted); margin-left: 2px; }
.b3__cell-muted { color: var(--tf-muted); }
.b3__cell-action { color: var(--tf-grey-03); font-size: var(--text-2xl); padding-right: 8px !important; padding-left: 0 !important; }
.b3__row--excluded td { opacity: 0.5; }
.b3__row--excluded td.b3__cell-status { opacity: 1; }
.b3__cell-status {
  vertical-align: middle;
  padding-left: 32px !important;
}
.b3__th-status { padding-left: 32px !important; }
.b3__cell-status-inner { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; padding-right: 8px; }

/* ═════════ B3 — EDITORIAL ═════════ */
.b3--editorial { padding-top: 8px; }
.b3-ed__header {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 32px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--tf-offblack);
  margin-bottom: 0;
}
.b3-ed__title {
  font-family: var(--font-display); margin: 8px 0 0;
  font-size: clamp(40px, 5vw, 64px); font-weight: var(--fw-regular);
  line-height: 0.96; letter-spacing: -0.03em;
}
.b3-ed__head-aggregate { text-align: right; }
.b3-ed__aggregate-value {
  display: block; font-size: var(--text-3xl); font-weight: var(--fw-regular);
  letter-spacing: -0.02em; margin-top: 6px;
}
.b3-ed__aggregate-value span { font-size: var(--text-sm); color: var(--tf-muted); margin-left: 6px; }
.b3-ed__list { list-style: none; margin: 0; padding: 0; }
.b3-ed__row {
  display: grid;
  grid-template-columns: 56px 1fr 360px 160px 24px;
  align-items: center; gap: 32px;
  padding: 28px 0; border-bottom: 1px solid var(--tf-border);
  cursor: pointer; transition: background var(--dur-quick) var(--ease-out);
}
.b3-ed__row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--tf-yellow) 8%, transparent), transparent 70%); }
.b3-ed__row--excluded { opacity: 0.45; }
.b3-ed__index { font-size: var(--text-md); color: var(--tf-muted); letter-spacing: 0.06em; }
.b3-ed__name {
  font-family: var(--font-display); margin: 0 0 4px;
  font-size: var(--text-3xl); font-weight: var(--fw-regular); letter-spacing: var(--tracking-heading);
  line-height: 1.1;
}
.b3-ed__meta { margin: 0; font-size: var(--text-sm); color: var(--tf-muted); }
.b3-ed__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.b3-ed__m-label {
  display: block; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tf-muted); margin-bottom: 6px;
}
.b3-ed__m-value { font-size: var(--text-xl); font-weight: var(--fw-regular); letter-spacing: -0.01em; }
.b3-ed__status-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.b3-ed__chevron { font-size: var(--text-2xl); color: var(--tf-offblack); }

/* ═════════ B3 — DASHBOARD ═════════ */
.b3--dash { background: var(--tf-paper); border: 1px solid var(--tf-border); border-radius: var(--r-lg); padding: 32px; }
.b3-dash__header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 28px;
}
.b3-dash__title {
  font-family: var(--font-display); margin: 8px 0 0;
  font-size: var(--text-3xl); font-weight: var(--fw-regular); letter-spacing: var(--tracking-heading);
}
.b3-dash__totals { display: flex; gap: 32px; }
.b3-dash__total { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.b3-dash__total-v { font-size: var(--text-2xl); font-weight: var(--fw-regular); letter-spacing: -0.02em; }
.b3-dash__total-v small { font-size: var(--text-xs); color: var(--tf-muted); margin-left: 2px; }
.b3-dash__table { display: grid; gap: 0; }
.b3-dash__head-row, .b3-dash__row {
  display: grid;
  grid-template-columns: 1.4fr 90px 200px 130px 130px 180px;
  align-items: center; gap: 16px;
  padding: 12px 0;
}
.b3-dash__head-row {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-muted);
  border-bottom: 1px solid var(--tf-border-strong); padding: 0 0 12px;
}
.b3-dash__num { text-align: right; font-variant-numeric: tabular-nums; }
.b3-dash__capex-col { text-align: left; font-variant-numeric: tabular-nums; }
.b3-dash__savings-col { text-align: left; font-variant-numeric: tabular-nums; }
.b3-dash__row {
  border-bottom: 1px solid var(--tf-border);
  cursor: pointer; transition: background var(--dur-quick) var(--ease-out);
  font-size: var(--text-base);
}
.b3-dash__row:hover { background: rgba(46,46,46,0.025); }
.b3-dash__row--excluded { opacity: 0.45; }
.b3-dash__site { display: flex; flex-direction: column; gap: 2px; }
.b3-dash__site-name { font-weight: var(--fw-semibold); font-size: var(--text-base); }
.b3-dash__site-meta { font-size: var(--text-xs); color: var(--tf-muted); font-family: var(--font-mono); }
.b3-dash__savings-cell { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.b3-dash__bar-bg {
  width: 90px; height: 6px; border-radius: 3px;
  background: rgba(46,46,46,0.08); overflow: hidden;
}
.b3-dash__bar-fill { height: 100%; background: var(--tf-offblack); border-radius: 3px; }
.b3-dash__savings-v { font-size: var(--text-base); font-weight: var(--fw-semibold); }
.b3-dash__unit-suffix { font-size: var(--text-xs); color: var(--tf-muted); font-weight: var(--fw-regular); margin-left: 1px; }
.b3-dash__muted { color: var(--tf-muted); }
.b3-dash__status { display: flex; align-items: center; gap: 6px; }

/* ═════════ B3 — TWO SITES (enlarged) ═════════ */
.b3-two__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.b3-two__row {
  display: grid; grid-template-columns: 1fr 540px 24px;
  gap: 32px; align-items: center;
  padding: 32px;
  background: var(--tf-white); border: 1px solid var(--tf-border); border-radius: var(--r-lg);
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
}
.b3-two__row:hover { box-shadow: var(--shadow-card-hover); border-color: var(--tf-border-strong); }
.b3-two__name {
  font-family: var(--font-display); margin: 0 0 8px;
  font-size: var(--text-3xl); font-weight: var(--fw-regular); letter-spacing: var(--tracking-heading);
}
.b3-two__meta { margin: 0 0 16px; color: var(--tf-muted); font-size: var(--text-base); }
.b3-two__sub { display: flex; gap: 8px; align-items: center; }
.b3-two__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.b3-two__metric { display: flex; flex-direction: column; gap: 8px; }
.b3-two__m-value { font-size: var(--text-2xl); font-weight: var(--fw-regular); letter-spacing: -0.02em; }
.b3-two__m-value--lead {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.025em;
}
.b3-two__m-value small { font-size: var(--text-xs); color: var(--tf-muted); margin-left: 2px; }
.b3-two__chev { font-size: var(--text-3xl); color: var(--tf-grey-03); }

/* ═════════ B3 — SINGLE COLLAPSED ═════════ */
.b3-single__header { margin-bottom: 20px; }
.b3-single__title {
  font-family: var(--font-display); margin: 6px 0 6px;
  font-size: clamp(36px, 5vw, 56px); font-weight: var(--fw-regular); letter-spacing: -0.025em;
  line-height: 1;
}
.b3-single__meta { margin: 0; color: var(--tf-muted); font-size: var(--text-base); }
.b3-single__chips { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; }
.b3-single__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 22px 0; margin-bottom: 16px;
  border-top: 1px solid var(--tf-border);
  border-bottom: 1px solid var(--tf-border);
}
.b3-single__kpis .kpi-tile {
  gap: 6px;
  padding: 0 24px 0 0;
  border-right: 1px solid var(--tf-border);
}
.b3-single__kpis .kpi-tile + .kpi-tile { padding-left: 24px; }
.b3-single__kpis .kpi-tile:last-child { border-right: none; padding-right: 0; }
.b3-single__kpis .kpi-tile:first-child { padding-left: 0; }
.b3-single__hint { color: var(--tf-muted); font-size: var(--text-sm); margin: 16px 0 0; }

/* ═══════════════════════════════════════════════════════════════
   S2 + S3 shared anatomy (locked Phase B v2)
   Both cards use a light surface so they pair without one dominating
   the other. Same internal grid: head → rule → body → foot.
   ═══════════════════════════════════════════════════════════════ */

.s2, .s3 {
  display: flex; flex-direction: column;
  background: var(--tf-white); border: 1px solid var(--tf-border); border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  min-height: 480px;
}
.s2 > .card__head, .s3 > .card__head { margin-bottom: 16px; }
.card__title {
  font-family: var(--font-display); margin: 8px 0 6px;
  font-size: var(--text-3xl); font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-heading); line-height: 1.15;
}
.card__title--sm {
  font-size: var(--text-2xl); margin: 8px 0 6px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
.card__meta {
  margin: 0; font-size: var(--text-base); color: var(--tf-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.5;
}
.card__sep { color: var(--tf-grey-03); }
.card__rule { height: 1px; background: var(--tf-border); margin: 16px 0; }
.card__foot {
  margin-top: auto; padding-top: 20px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* ─── S2 — Refined ─── */
.s2__specs { margin: 0; padding: 0; display: grid; gap: 14px; }
.s2__specs > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: baseline; }
.s2__specs dt { font-size: var(--text-base); color: var(--tf-muted); margin: 0; }
.s2__specs dd { margin: 0; font-size: var(--text-base); font-weight: var(--fw-medium); }

/* ─── S2 — Editorial (light, typographic) ─── */
.s2--editorial { padding: 32px 32px 24px; }
.s2-ed__name {
  font-family: var(--font-display); margin: 8px 0 0;
  font-size: var(--text-4xl); font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-heading); line-height: 1.05;
}
.s2-ed__hero {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 6px;
}
.s2-ed__hero-value {
  font-size: clamp(64px, 8vw, 96px); font-weight: var(--fw-regular);
  letter-spacing: -0.04em; line-height: 0.92; color: var(--tf-offblack);
}
.s2-ed__hero-unit {
  font-size: var(--text-2xl); color: var(--tf-muted);
  font-family: var(--font-display); letter-spacing: var(--tracking-heading);
}
.s2-ed__sub { margin: 0; color: var(--tf-muted); font-size: var(--text-base); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s2-ed__specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.s2-ed__specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: var(--text-base);
  padding-bottom: 10px; border-bottom: 1px solid var(--tf-border);
}
.s2-ed__specs li:last-child { border-bottom: none; padding-bottom: 0; }
.s2-ed__specs > li > span:first-child { color: var(--tf-muted); }
.s2-ed__specs b { font-weight: var(--fw-medium); color: var(--tf-offblack); text-align: right; }

/* ─── S2 — Editorial v1: Capacity hero (mirrors S3 editorial) ─── */
.s2-ed.s2-ed--v1 .s2-ed__hero,
.s2-ed.s2-ed--v2 .s2-ed__hero {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 6px;
}
.s2-ed.s2-ed--v1 .s2-ed__hero-value,
.s2-ed.s2-ed--v2 .s2-ed__hero-value {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 72px); font-weight: var(--fw-regular);
  letter-spacing: -0.04em; line-height: 0.92; color: var(--tf-offblack);
}
.s2-ed.s2-ed--v1 .s2-ed__hero-unit,
.s2-ed.s2-ed--v2 .s2-ed__hero-unit {
  font-size: var(--text-2xl); color: var(--tf-muted);
  font-family: var(--font-display); letter-spacing: var(--tracking-heading);
}

/* ─── v3: Pair display — capacity + power, equal weight ─── */
/* Flex column so spec list can push down to bottom-align with S3's last row */
.s2-ed--v3 { display: flex; flex-direction: column; }
.s2-ed--v3 .s2-ed__specs { margin-top: auto; }
.s2-ed--v3 .s2-ed__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 22px 0 6px;
  border-bottom: 1px solid var(--tf-border); padding-bottom: 22px;
}
.s2-ed--v3 .s2-ed__pair-cell { display: flex; flex-direction: column; gap: 4px; }
.s2-ed--v3 .s2-ed__pair-label {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--tf-muted);
}
.s2-ed--v3 .s2-ed__pair-value {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px); font-weight: var(--fw-regular);
  letter-spacing: -0.04em; line-height: 0.95; color: var(--tf-offblack);
}
.s2-ed--v3 .s2-ed__pair-unit {
  font-size: var(--text-xl); color: var(--tf-muted);
  font-family: var(--font-display); letter-spacing: var(--tracking-heading);
}

/* ─── v4: Footprint hero — system dimensions are the lead ─── */
.s2-ed--v4 .s2-ed__footprint {
  margin: 22px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px); font-weight: var(--fw-regular);
  letter-spacing: -0.02em; line-height: 1.1; color: var(--tf-offblack);
}
.s2-ed--v4 .s2-ed__footprint-x { color: var(--tf-muted); padding: 0 4px; font-weight: var(--fw-regular); }

/* Shared: brand mark sits in card-head top-right */
.s2-ed__brand-mark {
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tf-offblack);
  background: var(--tf-fixed);
  border: none;
  padding: 6px 10px; border-radius: var(--r-xs);
  white-space: nowrap;
}

/* ─── End S2 editorial v1–v4 ─── */

/* ─── S2 — Dashboard (compact, KPI cells) ─── */
.s2--dash { padding: 24px 24px 20px; min-height: 420px; }
.s2-dash__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0;
}
.s2-dash__cell {
  padding: 12px 14px; background: var(--tf-paper); border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.s2-dash__cell--wide { grid-column: span 2; }
.s2-dash__cell > span {
  font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  color: var(--tf-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.s2-dash__cell > b { font-size: var(--text-lg); font-weight: var(--fw-medium); }
.s2-dash__cell > b small { font-size: var(--text-sm); color: var(--tf-muted); margin-left: 2px; font-weight: var(--fw-regular); }

/* ═══════════════════════════════════════════════════════════════
   S3 — Tariff card (cost is the lede)
   ═══════════════════════════════════════════════════════════════ */

/* ─── S3 — Refined ─── */
.s3__headline-value {
  font-family: var(--font-display); margin: 8px 0 6px;
  font-size: clamp(36px, 4vw, 52px); font-weight: var(--fw-regular);
  letter-spacing: -0.02em; line-height: 1;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.s3__supplier-line { font-weight: var(--fw-medium); color: var(--tf-offblack); }
.s3__estimated-badge {
  display: inline-flex; align-items: center;
  background: var(--status-not-yet-bg);
  color: var(--status-not-yet-fg);
  padding: 4px 10px; border-radius: var(--r-xs);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  letter-spacing: 0.04em; text-transform: uppercase;
  font-family: var(--font-ui);
  align-self: center;
}

/* Supplier mark — inline logo (or wordmark fallback) used in S3 meta line.
   Sits with subtle "via" relationship to the supplier wordmark. */
.supplier-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--fw-medium); color: var(--tf-offblack);
}
.supplier-mark__logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; width: auto;
}
.supplier-mark__logo svg, .supplier-mark__logo img { height: 100%; width: auto; display: block; }
.supplier-mark__name { font-weight: var(--fw-medium); }

/* Top-right corner logo — uses negative space in the card head */
.card__head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card__head-titles { flex: 1 1 auto; min-width: 0; }
.card__head-logo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 28px; max-width: 140px;
  margin-top: 2px;
}
.card__head-logo svg, .card__head-logo img { height: 100%; width: auto; display: block; }
.card__head-logo--dim { opacity: 0.6; }

/* Larger logo treatment for editorial S3 */
.s3-ed .card__head-logo { height: 34px; max-width: 180px; }
.s3__specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.s3__specs li {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px;
  align-items: center; font-size: var(--text-base);
}
.s3__specs > li > span:first-child { color: var(--tf-muted); }
.s3__specs b { font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 8px; }
.s3__desc { margin: 16px 0 0; color: var(--tf-muted); font-size: var(--text-base); line-height: 1.55; }

/* ─── S3 — Editorial (mirrors S2 editorial; cost is hero) ─── */
.s3--editorial { padding: 32px 32px 24px; }
.s3-ed__hero {
  font-family: var(--font-display);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 6px;
  font-size: clamp(44px, 6vw, 72px); font-weight: var(--fw-regular);
  letter-spacing: -0.04em; line-height: 1;
  min-height: 1em;
}
.s3-ed__estimated-slot {
  display: flex;
  flex-basis: 100%; margin-top: 14px; align-self: flex-start;
  /* Reserves exact height of the chip so confirmed (empty slot) and modelled
     (chip-occupied slot) cards align row-for-row. */
  min-height: 26px; align-items: center;
}
.s3-ed__hero-value { letter-spacing: -0.04em; }
.s3-ed__hero-unit {
  font-size: var(--text-2xl); color: var(--tf-muted);
  letter-spacing: var(--tracking-heading);
}
.s3-ed__supplier { margin: 0; font-size: var(--text-base); color: var(--tf-muted); font-weight: var(--fw-medium); }

/* ─── S3 — Dashboard (compact) ─── */
.s3--dash { padding: 24px 24px 20px; min-height: 420px; }
.s3-dash__specs li { grid-template-columns: 110px 1fr; font-size: var(--text-sm); }
.s3-dash__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.s3-dash__chip {
  padding: 4px 10px; background: var(--tf-paper); border: 1px solid var(--tf-border);
  border-radius: var(--r-pill); font-size: var(--text-xs); color: var(--tf-muted);
}

/* Canvas/page layout helpers */
.page-shell {
  min-height: 100vh; background: var(--tf-offwhite);
}
.page-section { padding: 64px 0; }
.page-inner { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.page-divider {
  height: 1px; background: var(--tf-border-strong);
  width: 100%; margin: 64px 0;
}