/* ==========================================================================
   SETL MAP — rewind-compare.css  (rewind-compare agent)
   Part 1: «Перемотать жизнь»  (.rw-)      Part 2: «Сравнить две жизни»  (.cp-)
   Only tokens from tokens.css. Hover styles live in (hover:hover) and (pointer:fine).
   ========================================================================== */

/* ═══════════════════════════ Part 1 — REWIND ═══════════════════════════ */
.rw {
  position: relative; display: grid; gap: var(--space-5);
  padding: var(--space-4); border-radius: var(--r-card);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow-card);
  color: var(--ink); text-align: left;
}
@media (min-width: 768px) { .rw { padding: var(--space-5); gap: var(--space-6); } }
@media (min-width: 1280px) { .rw { padding: var(--space-6); } }

.rw__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rw__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.rw__badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 30px; padding: 0 12px 0 9px;
  border-radius: var(--r-pill); border: 1.5px dashed var(--line-strong); color: var(--ink-2);
  font: 600 0.8125rem/1 var(--font-text);
}
.rw__badge svg { color: var(--sun-deep); }
.rw__title { font-size: var(--fs-h3); margin: 0; }

.rw__choose-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rw__choose-label { color: var(--ink-3); }
.rw__choose { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-pill {
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--card-2); color: var(--ink); font: 600 0.875rem/1.1 var(--font-text); text-align: center;
  transition: background-color var(--dur-xs) var(--ease-standard), color var(--dur-xs), border-color var(--dur-xs), scale var(--dur-press);
}
.rw-pill:active { scale: .96; }
.rw-pill[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rw-pill:focus-visible { border-radius: var(--r-pill); }
@media (hover: hover) and (pointer: fine) { .rw-pill:hover:not([aria-checked="true"]) { background: var(--paper-2); border-color: var(--line-strong); } }

/* ----- body: phones pin plan + slider together (so you see the home while you scrub); desktop puts the slider under both columns ----- */
.rw__body { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.rw__stage {
  position: sticky; top: calc(var(--header-h) + var(--safe-t) + 4px); z-index: 4;
  display: grid; gap: 0; margin-inline: calc(var(--space-4) * -1); padding: var(--space-2) var(--space-4) 0;
  background: var(--card); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 14px 20px -16px rgba(94, 60, 24, .35);
}
@media (max-height: 640px) { .rw__stage { position: static; box-shadow: none; } }
@media (min-width: 768px) { .rw__stage { margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); } }
@media (min-width: 900px) {
  .rw__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "slider slider" "plan info"; gap: var(--space-5) var(--space-6); align-items: start; }
  .rw__stage { display: contents; }
  .rw__plan { grid-area: plan; }
  .rw__info { grid-area: info; }
  /* the year slider rides above the plan and stays pinned under the header, so the apartment changes right where the hand is */
  .rw .rw-slider {
    grid-area: slider; position: sticky; top: calc(var(--header-h) + var(--safe-t) + 8px); z-index: 5;
    padding: var(--space-2) 20px 0; border-radius: var(--r-lg); background: var(--card-2); border: 1.5px solid var(--line); box-shadow: var(--shadow-soft);
  }
  .rw .rw__plan { justify-self: center; width: 100%; position: sticky; top: calc(var(--header-h) + var(--safe-t) + 8px + 7.5rem); }
}

.rw__plan {
  position: relative; margin: 0 0 var(--space-2); aspect-ratio: 740 / 520; border-radius: var(--r-lg); overflow: hidden;
  background: var(--card-2); border: 1.5px solid var(--line);
  background-image: radial-gradient(circle at 1px 1px, rgba(185, 167, 135, .28) 1px, transparent 0); background-size: 18px 18px;
}
/* laptop-height screens: cap the plan so slider, plan and the year all sit in one view */
@media (min-width: 900px) and (max-height: 800px) {
  .rw .rw__plan { width: min(100%, calc(min(46vh, 420px) * 740 / 520)); }
  .rw-hint { display: none; }
  .rw .rw-slider { padding-bottom: 2px; }
  .rw__info { gap: var(--space-3); }
  .rw-year__num { font-size: clamp(3.5rem, 11vh, 5.5rem); }
  .rw-caption { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
  .rw-room { min-height: 44px; padding: 5px 0; }
}
.rw-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ink + fills */
.rw-svg .k { fill: none; stroke: var(--ink); stroke-width: var(--sw, 1.7); stroke-linecap: round; stroke-linejoin: round; }
.rw-svg .k--thin { stroke: var(--ink-2); stroke-width: calc(var(--sw, 1.7) * .7); }
.rw-svg .k--dash { stroke-dasharray: calc(var(--sw, 1.7) * 3.2) calc(var(--sw, 1.7) * 3.2); }
.rw-svg .k--glass { stroke: var(--sky-deep); stroke-width: calc(var(--sw, 1.7) * .9); }
.rw-svg .k--rail { stroke: var(--ink-2); }
.rw-svg .wall { fill: none; stroke: var(--ink); stroke-width: var(--sw-wall, 3); stroke-linecap: round; stroke-linejoin: round; }
.rw-svg .wallbed { fill: none; stroke: var(--paper-3); stroke-width: calc(var(--sw-wall, 3) * 3.2); stroke-linecap: butt; }
.rw-svg [class^="f-"] { stroke: none; }
.rw-svg .f-paper { fill: var(--paper); } .rw-svg .f-paper2 { fill: var(--paper-2); } .rw-svg .f-paper3 { fill: var(--paper-3); }
.rw-svg .f-card { fill: var(--card); } .rw-svg .f-card2 { fill: var(--card-2); }
.rw-svg .f-sky { fill: var(--sky); } .rw-svg .f-sage { fill: var(--sage); } .rw-svg .f-sagesoft { fill: var(--sage-soft); }
.rw-svg .f-terra { fill: var(--terra); } .rw-svg .f-terrasoft { fill: var(--terra-soft); }
.rw-svg .f-sun { fill: var(--sun); } .rw-svg .f-glow { fill: var(--glow); } .rw-svg .f-ink { fill: var(--ink); } .rw-svg .f-dusk2 { fill: var(--dusk-2); }
.rw-svg .f-fig1 { fill: var(--fig-1); } .rw-svg .f-fig2 { fill: var(--fig-2); } .rw-svg .f-fig3 { fill: var(--fig-3); } .rw-svg .f-fig4 { fill: var(--fig-4); } .rw-svg .f-fig5 { fill: var(--fig-5); }
.rw-svg [data-win] rect { fill: var(--sky); stroke: var(--ink); stroke-width: var(--sw, 1.7); }
.rw-svg [data-win] path { stroke: var(--ink-2); stroke-width: calc(var(--sw, 1.7) * .7); fill: none; }
.rw-svg [data-marks] path { stroke: var(--terra); stroke-width: calc(var(--sw, 1.7) * 1.25); fill: none; stroke-linecap: round; }
.rw-svg [data-garland] .f-glow circle { stroke: var(--sun-deep); stroke-width: calc(var(--sw, 1.7) * .5); }
.rw-svg [data-wedge] { pointer-events: none; }
.rw-fig__in, [data-tree-in] { transform-box: fill-box; transform-origin: center; }

/* plan annotations (HTML, so they stay readable at any plan size) */
.rw-tag {
  position: absolute; translate: -50% -50%; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px;
  border-radius: var(--r-pill); background: var(--card); border: 1.5px solid var(--line); color: var(--ink-2);
  font: 600 0.6875rem/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  box-shadow: var(--shadow-soft);
}
.rw-tag--a { left: 42%; top: 5.4%; }
.rw-tag--b { left: 73.6%; top: 5.4%; }
.rw-tag--c { left: 42.6%; top: 95.2%; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rw-tag--c::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); margin-right: 8px; flex: none; }
@media (min-width: 900px) { .rw-tag { min-height: 30px; padding: 0 14px; font-size: 0.75rem; } }
@media (max-width: 419px) { .rw-tag--b { display: none; } }
@media (max-width: 479px) { .rw-tag { min-height: 24px; padding: 0 9px; font-size: 0.6875rem; letter-spacing: .04em; } .rw-tag--c::before { width: 5px; height: 5px; margin-right: 6px; } }

/* text morph primitives */
.rw-m-host { display: inline-grid; }
.rw-m { grid-area: 1 / 1; min-width: 0; }
.rw-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .16em; margin-block: -.16em; }
.rw-w__in { display: inline-block; will-change: transform; }

/* ----- info column ----- */
.rw__info { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.rw-year__top { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.rw-year__num {
  --odo-w: .52em; --odo-lh: 1.04;
  font: 600 clamp(4.25rem, 9vw, 7.5rem)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em;
  color: var(--ink); min-width: 4ch;
}
.rw-year__num .odo__cell { overflow: hidden; }
.rw-year__label { color: var(--sun-deep); padding-bottom: .9em; }
.rw-people { margin: 4px 0 0; display: grid; font: 600 0.9375rem/1.35 var(--font-text); color: var(--ink-2); }
.rw-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; }
.rw-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 9px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); font: 500 0.8125rem/1 var(--font-text); white-space: nowrap;
}
.rw-chip svg { color: var(--sun-deep); flex: none; }
.rw-caption {
  display: grid; margin: 0; font: 500 clamp(1.5rem, 2.3vw, 2.125rem)/1.12 var(--font-display); letter-spacing: -.01em;
  font-variant-numeric: lining-nums; color: var(--ink); text-wrap: pretty;
}
.rw-rooms { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rw-room { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rw-room__name { color: var(--ink-3); }
.rw-room__val { display: grid; font: 600 1rem/1.25 var(--font-text); color: var(--ink); }
.rw-room__chg {
  display: inline-flex; align-items: center; gap: 5px; max-width: 15rem; padding: 5px 11px 5px 8px; border-radius: var(--r-pill);
  background: var(--terra-soft); color: var(--terra-press); font: 600 0.75rem/1.15 var(--font-text);
}
.rw-room__chg svg { flex: none; }
@media (max-width: 479px) { .rw-room { grid-template-columns: 4.5rem minmax(0, 1fr); } .rw-room__chg { grid-column: 2; justify-self: start; } }
.rw-pnote { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 400 0.875rem/1.45 var(--font-text); color: var(--ink-2); }
.rw-pnote svg { flex: none; color: var(--sun-deep); margin-top: 1px; }
.rw-pnote .rw-m-host { display: grid; }

/* ----- the sun slider ----- */
.rw-slider { position: relative; display: grid; gap: 0; padding-top: var(--space-2); }
.rw-rail { position: relative; height: 52px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.is-dragging .rw-rail { cursor: grabbing; }
.rw-track { position: absolute; left: 22px; right: 22px; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.rw-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--sun); border-radius: inherit; }
.rw-ticks { position: absolute; left: 22px; right: 22px; top: 0; bottom: 0; pointer-events: none; }
.rw-tick { position: absolute; top: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; border-radius: 2px; background: var(--line-strong); }
.rw-thumb {
  position: absolute; left: 22px; top: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  will-change: transform; touch-action: none; z-index: 2;
}
.rw-thumb:focus-visible { box-shadow: none; border-radius: 50%; }
.rw-thumb__halo { position: absolute; inset: -8px; border-radius: 50%; background: var(--glow-soft); opacity: 0; scale: .7; transition: opacity var(--dur-xs), scale var(--dur-xs) var(--ease-out); pointer-events: none; }
.rw-thumb__disc {
  position: absolute; inset: 5px; border-radius: 50%; background: var(--grad-sun); border: 2px solid var(--ink);
  box-shadow: 0 6px 14px -6px rgba(94, 60, 24, .55); transition: scale var(--dur-xs) var(--ease-out), box-shadow var(--dur-xs);
}
.rw-thumb__rays { position: absolute; left: -6px; top: -6px; width: 56px; height: 56px; color: var(--ink); animation: rw-spin 24s linear infinite; pointer-events: none; }
@keyframes rw-spin { to { transform: rotate(360deg); } }
html.rm .rw-thumb__rays { animation: none; }
.is-dragging .rw-thumb__halo, .rw-thumb:focus-visible .rw-thumb__halo { opacity: 1; scale: 1; }
.is-dragging .rw-thumb__disc { scale: 1.1; }
.rw-thumb:focus-visible .rw-thumb__disc { box-shadow: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) { .rw-thumb:hover .rw-thumb__halo { opacity: 1; scale: 1; } }

.rw-labels { position: relative; height: 44px; margin: -8px 22px 0; }
.rw-lab {
  position: absolute; top: 0; translate: -50% 0; min-width: 52px; height: 44px; padding: 0 6px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-2);
}
.rw-lab__y { font: 600 0.9375rem/1 var(--font-text); font-variant-numeric: tabular-nums lining-nums; position: relative; padding-bottom: 3px; transition: color var(--dur-xs); }
.rw-lab__y::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--sun); transform: scaleX(0); transition: transform var(--dur-s) var(--ease-out); }
.rw-lab.is-active { color: var(--ink); }
.rw-lab.is-active .rw-lab__y::after { transform: scaleX(1); }
.rw-lab:active { scale: .94; }
@media (hover: hover) and (pointer: fine) { .rw-lab:hover { color: var(--ink); } }
.rw-hint { margin: 0; padding-bottom: var(--space-2); text-align: center; font: 400 0.8125rem/1.3 var(--font-text); color: var(--ink-3); }
@media (max-width: 899px) { .rw-hint { display: none; } .rw__stage { padding-bottom: var(--space-2); } }

/* ----- honest footer ----- */
.rw__foot { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .rw__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-6); } }
.rw__honest { display: flex; align-items: flex-start; gap: 10px; margin: 0; font: 400 0.875rem/1.45 var(--font-text); color: var(--ink-2); }
.rw__honest svg { flex: none; color: var(--ok); margin-top: 1px; }
.rw__honest strong { color: var(--ink); font-weight: 600; }
.rw__flex { margin: 0; font: 400 0.875rem/1.5 var(--font-text); color: var(--ink-3); }

/* ═══════════════════════════ Part 2 — COMPARE ═══════════════════════════ */
.cp {
  --cp-a: var(--fig-1); --cp-b: var(--fig-2);
  position: relative; display: grid; gap: var(--space-5);
  padding: var(--space-4); border-radius: var(--r-card);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow-card);
  color: var(--ink); text-align: left;
}
@media (min-width: 768px) { .cp { padding: var(--space-5); gap: var(--space-6); } }
@media (min-width: 1280px) { .cp { padding: var(--space-6); } }
.cp__head { display: grid; gap: 6px; }
.cp__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.cp__sub { margin: 0; font: 400 0.9375rem/1.45 var(--font-text); color: var(--ink-2); }

.cp-dot-m { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.cp-dot-m--a { background: var(--cp-a); } .cp-dot-m--b { background: var(--cp-b); }

/* ----- choosers ----- */
.cp__choosers { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .cp__choosers { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.cp-ch { display: grid; gap: 8px; align-content: start; }
.cp-ch__lab { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.cp-ch__grp { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) { .cp-ch__grp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .cp-pill { padding: 0 6px; font-size: 0.8125rem; } .cp__choosers { gap: var(--space-3); } }
@media (max-width: 419px) { .cp-ch__grp { display: flex; flex-wrap: wrap; gap: 8px; } .cp-pill { padding: 0 14px; } }
.cp-pill {
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--card-2); color: var(--ink); font: 600 0.875rem/1.1 var(--font-text); text-align: center;
  transition: background-color var(--dur-xs) var(--ease-standard), color var(--dur-xs), border-color var(--dur-xs), scale var(--dur-press), opacity var(--dur-xs);
}
.cp-pill:active { scale: .96; }
.cp-pill[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cp-pill[aria-disabled="true"] { opacity: .45; border-style: dashed; cursor: not-allowed; }
.cp-pill:focus-visible { border-radius: var(--r-pill); }
@media (hover: hover) and (pointer: fine) { .cp-pill:hover:not([aria-checked="true"]):not([aria-disabled="true"]) { background: var(--paper-2); border-color: var(--line-strong); } }

/* ----- two sheets ----- */
.cp__sheets { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (min-width: 768px) { .cp__sheets { gap: var(--space-5); } }
.cp-sheet-slot { min-width: 0; position: relative; }
.cp-sheet {
  display: grid; gap: 4px; align-content: start; height: 100%; padding: var(--space-3);
  border-radius: var(--r-lg); background: var(--card-2); border: 1.5px solid var(--line); box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) {
  .cp-sheet { padding: var(--space-4); gap: 4px var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-auto-rows: min-content; align-content: center; }
  .cp-sheet__fac { grid-column: 1; grid-row: 1 / span 6; align-self: center; }
  .cp-sheet > :not(.cp-sheet__fac) { grid-column: 2; }
}
.cp-sheet--a { border-top: 4px solid var(--cp-a); } .cp-sheet--b { border-top: 4px solid var(--cp-b); }
/* the A/B label already sits above in the chooser row; the card keeps its aria-label and the coloured top edge */
.cp-sheet__who { display: none; }
.cp-sheet__fac { aspect-ratio: 7 / 5; border-radius: var(--r-sm); overflow: hidden; border: 1.5px solid var(--ink); background: var(--paper-2); }
.cp-sheet__fac svg { width: 100%; height: 100%; display: block; }
.cp-sheet__name { margin-top: 8px; font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.05; overflow-wrap: normal; }
.cp-sheet__place { margin: 0; font: 600 0.8125rem/1.3 var(--font-text); color: var(--ink-2); }
@media (min-width: 768px) { .cp-sheet__place, .cp-sheet__tag { font-size: var(--fs-small); } }
.cp-sheet__tag { margin: 0; font: 400 0.8125rem/1.4 var(--font-text); color: var(--ink-3); }
.cp-sheet__tally {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-strong);
  font: 500 var(--fs-small)/1.3 var(--font-text); color: var(--ink-2);
}
.cp-sheet__n { flex: none; font: 500 clamp(2.5rem, 4.2vw, 4.25rem)/.9 var(--font-display); font-variant-numeric: lining-nums; color: var(--ink); margin: 0; }
.cp-sheet--a .cp-sheet__n { color: var(--terra-press); }
.cp-sheet--b .cp-sheet__n { color: var(--ok-ink); }
@media (max-width: 479px) { .cp-sheet__tag { display: none; } .cp-sheet__tally span:last-child { display: block; } }
@media (max-width: 767px) { .cp-sheet__n { font-size: 2.25rem; } .cp-sheet__tally { gap: 8px; } }

.cp-swap {
  position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 3; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-soft);
  margin-top: 62px; transition: scale var(--dur-press), background-color var(--dur-xs);
}
.cp-swap__in { display: grid; place-items: center; }
.cp-swap:active { scale: .92; }
.cp-swap:focus-visible { border-radius: 50%; box-shadow: var(--ring); }
@media (min-width: 768px) { .cp-swap { margin-top: 74px; } }
@media (hover: hover) and (pointer: fine) { .cp-swap:hover { background: var(--terra); } }

/* ----- metric rows ----- */
.cp__rows { display: grid; gap: var(--space-5); }
.cp-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 768px) { .cp-row { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .cp-row__label { grid-column: 1 / -1; justify-content: center; } }
.cp-row__label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); }
.cp-row__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2); color: var(--ink); }

.cp-cell {
  position: relative; display: grid; gap: 10px; padding: 18px 16px 14px; border-radius: var(--r-lg);
  background: var(--card-2); border: 1.5px solid var(--line); transition: background-color var(--dur-s) var(--ease-standard), border-color var(--dur-s);
}
.cp-cell.is-win { background: var(--glow-soft); border-color: var(--sun); }
.cp-cell.is-lose .cp-cell__row, .cp-cell.is-lose .cp-detail { opacity: .88; }
.cp-badge {
  position: absolute; right: 12px; top: 0; translate: 0 -50%; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 0 11px 0 8px; border-radius: var(--r-pill); background: var(--glow); color: var(--ink);
  font: 600 0.75rem/1 var(--font-text); box-shadow: 0 2px 0 rgba(94, 60, 24, .12);
}
.cp-badge--tie { background: var(--paper-2); padding: 0 11px; color: var(--ink-2); }
.cp-cell__row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 10px; }
@media (max-width: 767px) { .cp-cell__row { grid-template-columns: auto minmax(0, 1fr); } }
.cp-who {
  display: none; place-items: center; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 50%; border: 1.5px solid var(--ink);
  font: 600 0.75rem/1 var(--font-text); color: var(--paper);
}
.cp-who--a { background: var(--cp-a); } .cp-who--b { background: var(--cp-b); }
@media (max-width: 767px) { .cp-cell__row .cp-who { display: grid; } }
.cp-detail { margin: 0; font: 400 var(--fs-small)/1.4 var(--font-text); color: var(--ink-2); }

/* minutes lane: a person walks from the front door to the destination */
.cp-lane { --f: 0; min-width: 0; }
.cp-lane[data-f] { padding: 24px 15px 4px; }
.cp-track { position: relative; height: 28px; container-type: inline-size; }
.cp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: var(--r-pill); background: var(--paper-3); }
.cp-bar {
  position: absolute; left: 0; top: 50%; width: 100%; height: 8px; margin-top: -4px; border-radius: var(--r-pill);
  background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--f)); opacity: .9;
}
.cp-pin {
  position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center;
  border-radius: 50%; background: var(--card); border: 1.5px solid var(--line-strong); color: var(--ink);
}
.cp-pin--s { left: -15px; } .cp-pin--e { right: -15px; }
.cp-run { position: absolute; left: 0; top: 50%; width: 0; height: 0; translate: calc(var(--f) * 100cqw) 0; z-index: 2; }
.cp-dot { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); box-shadow: 0 3px 8px -3px rgba(42, 33, 27, .6); }
.cp-val { position: absolute; bottom: 18px; white-space: nowrap; font: 600 0.9375rem/1 var(--font-text); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.cp-run[data-side="r"] .cp-val { left: -4px; } .cp-run[data-side="l"] .cp-val { right: -4px; }

/* parking + niche lanes: a glyph and a plain-language value */
.cp-lane--glyph { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.cp-lane--glyph .cp-val { position: static; font-size: 0.9375rem; line-height: 1.25; white-space: normal; }
.cp-cars { display: inline-flex; gap: 4px; color: var(--c); flex: none; }
.cp-car svg { display: block; }
.cp-niche { position: relative; flex: none; width: 52px; height: 52px; border: 1.5px dashed var(--line-strong); border-radius: 8px; }
.cp-niche__in { position: absolute; left: 3px; bottom: 3px; width: 44px; height: 44px; transform-origin: 0 100%; background: var(--sage-soft); border: 2px solid var(--ink); border-radius: 5px; overflow: hidden; }
.cp-niche__in i { position: absolute; right: 4px; bottom: 4px; width: 55%; height: 28%; border-radius: 2px; background: var(--c); border: 1.5px solid var(--ink); }

/* ----- verdict + ask ----- */
.cp__verdict-wrap { display: grid; gap: 8px; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .cp__verdict-wrap { text-align: center; justify-items: center; padding-top: var(--space-5); } }
.cp__verdict-cap { color: var(--sun-deep); margin: 0; }
.cp__verdict { display: grid; margin: 0; max-width: 34ch; font: italic 500 var(--fs-h3)/1.18 var(--font-display); letter-spacing: -.005em; font-variant-numeric: lining-nums; color: var(--ink); text-wrap: balance; }
.cp__verdict .rw-m { text-align: inherit; }
.cp__ask { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .cp__ask { justify-items: center; text-align: center; } }
.cp__ask-t { font-size: clamp(1.625rem, 2.6vw, 2.25rem); }
.cp__ask-btns { display: grid; gap: 10px; width: 100%; }
@media (min-width: 640px) { .cp__ask-btns { grid-template-columns: 1fr 1fr; max-width: 40rem; } }
.cp-ask-btn {
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 60px; padding: 8px 18px 8px 12px;
  border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--card-2); color: var(--ink); font: 600 1rem/1.15 var(--font-text); text-align: left;
  transition: background-color var(--dur-xs) var(--ease-standard), color var(--dur-xs), box-shadow var(--dur-xs), translate var(--dur-xs) var(--ease-out), scale var(--dur-press);
}
.cp-ask-btn .cp-who { display: grid; margin: 0; width: 34px; height: 34px; font-size: 0.875rem; flex: none; }
.cp-ask-btn__t { flex: 1; min-width: 0; }
.cp-ask-btn__ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); color: var(--ink); opacity: 0; scale: .5; transition: opacity var(--dur-xs), scale var(--dur-s) var(--ease-spring); flex: none; }
.cp-ask-btn:active { scale: .98; }
.cp-ask-btn.is-chosen { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-pick); }
.cp-ask-btn.is-chosen .cp-ask-btn__ok { opacity: 1; scale: 1; }
.cp-ask-btn:focus-visible { border-radius: var(--r-pill); }
@media (hover: hover) and (pointer: fine) { .cp-ask-btn:hover:not(.is-chosen) { background: var(--glow-soft); translate: 0 -2px; } }
.cp__foot { margin: 0; text-align: center; font: 400 0.8125rem/1.4 var(--font-text); color: var(--ink-3); }
.cp-missing { padding: var(--space-5); color: var(--ink-2); }

/* ───── "what changed": spotlight on the plan when the years move on ───── */
.rw-spot__dim { fill: rgba(42, 33, 27, .38); }
.rw-spot__ring { fill: rgba(242, 169, 59, .20); stroke: var(--terra); stroke-width: 4; stroke-dasharray: 16 10; stroke-linecap: round; }
.rw-change {
  position: absolute; left: 12px; right: 12px; top: 9.5%; z-index: 3; margin-inline: auto; width: fit-content; max-width: calc(100% - 24px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 6px; padding: 5px 11px;
  border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: 0 8px 20px -8px rgba(42, 33, 27, .5);
  pointer-events: none; text-align: center; box-sizing: border-box;
}
.rw-change[hidden] { display: none; }
.rw-change__t { font: 700 .625rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--glow); white-space: nowrap; }
.rw-change__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 6px; min-width: 0; }
.rw-change__i { font: 600 .75rem/1.2 var(--font-text); white-space: normal; overflow-wrap: anywhere; padding: 3px 9px; border-radius: 99px; background: rgba(246, 239, 227, .16); }
@media (max-width: 479px) { .rw-change { top: 12%; padding: 4px 9px; } .rw-change__t { display: none; } .rw-change__i { font-size: .6875rem; } }
.rw-room__chg.is-fresh { animation: rw-fresh 2.6s ease-in-out 1; }
@keyframes rw-fresh {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 74, 50, 0); }
  18%, 58% { box-shadow: 0 0 0 7px rgba(184, 74, 50, .35); background: var(--terra); color: #fff; }
  38%, 80% { box-shadow: 0 0 0 0 rgba(184, 74, 50, 0); }
}