/* ============================================================
   Views - home, live tracker, profile, calendar, standings
   ============================================================ */

/* =========================================================
   HERO (home)
   ========================================================= */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 90% at 78% 0%, rgba(233,108,78,.12), transparent 55%),
    radial-gradient(70% 80% at 8% 18%, rgba(236,138,46,.10), transparent 50%);
}
/* layered dunes */
.hero__dunes { position: absolute; inset-block-end: -1px; inset-inline: 0; z-index: -1; height: 38vh; min-height: 240px; }
.hero__dunes svg { width: 100%; height: 100%; }
/* drifting heat-shimmer particles */
.hero__spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--sand-dim); opacity: 0; animation: drift linear infinite; box-shadow: 0 0 6px var(--sand-dim); }
@keyframes drift { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 20%{opacity:.8;} 100% { transform: translateY(-120px) scale(1); opacity: 0; } }

.hero__inner { padding-block: 120px 80px; max-width: 920px; }
.hero__edition { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero__edition .ord { color: var(--gold); font-family: var(--f-display); }
.hero h1 {
  font-size: clamp(2.7rem, 8vw, 6.4rem);
  line-height: .98; letter-spacing: -0.02em; margin-bottom: 22px;
  font-weight: 700;
}
.hero h1 .glow { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--sand); max-width: 56ch; font-weight: 300; margin-bottom: 14px; }
.hero__where { color: var(--sand-dim); font-size: .98rem; margin-bottom: 38px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero__where .pin { color: var(--sand); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* live ticker under hero cta */
.ticker {
  margin-top: 40px; display: inline-flex; align-items: center; gap: 16px;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  background: rgba(216,27,96,.06); border: 1px solid rgba(216,27,96,.30);
  max-width: 100%;
}
.ticker__label { display: inline-flex; align-items: center; gap: 8px; color: var(--crimson); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.ticker__feed { overflow: hidden; white-space: nowrap; color: var(--sand); font-size: .9rem; }
.ticker__feed b { color: var(--text-strong); }

/* =========================================================
   STATS band
   ========================================================= */
.stats { border-block: 1px solid var(--line-soft); background: linear-gradient(rgba(0,0,0,.018), transparent); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 38px 26px; text-align: center; border-inline-start: 1px solid var(--line-soft); position: relative; }
.stat:first-child { border-inline-start: none; }
.stat__num { font-family: var(--f-mono); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--text-strong); line-height: 1; }
.stat__num .unit { font-family: var(--f-display); font-size: .42em; color: var(--sand-dim); margin-inline-start: 6px; }
.stat__label { color: var(--muted); font-size: .82rem; margin-top: 10px; letter-spacing: .04em; }
@media (max-width: 720px){ .stats__grid { grid-template-columns: repeat(2,1fr);} .stat:nth-child(3){border-inline-start:none;} }

/* =========================================================
   LIVE PREVIEW card (home)
   ========================================================= */
.livecard { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; padding: 0; }
@media (max-width: 820px){ .livecard { grid-template-columns: 1fr; } }
.livecard__left { padding: clamp(26px,4vw,44px); }
.livecard__right { background: linear-gradient(150deg, rgba(233,108,78,.10), rgba(0,0,0,.02)); padding: clamp(26px,4vw,44px); border-inline-start: 1px solid var(--line-soft); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.livecard h3 { font-size: clamp(1.5rem,3vw,2.2rem); margin: 14px 0; }
.miniboard { display: flex; flex-direction: column; gap: 8px; }
.miniboard__row { display: flex; align-items: center; gap: 12px; font-size: .94rem; }
.miniboard__pos { font-family: var(--f-mono); width: 22px; color: var(--sand-dim); font-weight: 600; }
.miniboard__name { flex: 1; }
.miniboard__spd { font-family: var(--f-mono); color: var(--green-deep); }
.miniboard__row--lead { color: var(--text-strong); }

/* =========================================================
   CATEGORY grid
   ========================================================= */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.cat { padding: 28px 22px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); transition: .4s var(--ease-out); position: relative; overflow: hidden; }
.cat:hover { transform: translateY(-4px); border-color: var(--gold-deep); }
.cat::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 3px; background: var(--grad-gold); transform: scaleX(0); transform-origin: var(--end,right); transition: transform .4s var(--ease-out); }
.cat:hover::before { transform: scaleX(1); }
.cat__ord { font-family: var(--f-mono); color: var(--muted); font-size: .8rem; }
.cat__name { font-family: var(--f-display); font-size: 1.6rem; color: var(--text-strong); margin: 8px 0 4px; font-weight: 700; }
.cat__en { color: var(--sand-dim); font-size: .8rem; letter-spacing: .08em; }
.cat__meta { margin-top: 18px; display: flex; gap: 14px; color: var(--sand-dim); font-size: .84rem; }
.cat__meta .num { color: var(--green-deep); }

/* =========================================================
   FEATURED camel (home)
   ========================================================= */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; align-items: stretch; }
@media (max-width: 860px){ .feature { grid-template-columns: 1fr; } }
.feature__media { position: relative; min-height: 380px; background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); display: grid; place-items: center; overflow: hidden; }
.feature__media::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 70% at 50% 30%, rgba(233,108,78,.10), transparent 60%); }
.feature__camel { font-size: 11rem; filter: drop-shadow(0 20px 40px rgba(60,30,10,.18)); position: relative; transform: scaleX(-1); animation: bob 5s var(--ease) infinite; }
@keyframes bob { 0%,100%{ transform: scaleX(-1) translateY(0);} 50%{ transform: scaleX(-1) translateY(-12px);} }
.feature__halo { position: absolute; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(236,138,46,.35); animation: spin 26s linear infinite; }
.feature__halo::before { content:""; position:absolute; inset-block-start:-4px; inset-inline-start:50%; width:8px;height:8px;border-radius:50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
@keyframes spin { to { transform: rotate(360deg);} }
.feature__body { padding: clamp(30px,5vw,60px); display: flex; flex-direction: column; justify-content: center; }
.feature__name { font-family: var(--f-calig); font-size: clamp(2.6rem,6vw,4.4rem); color: var(--text-strong); line-height: 1; }
.feature__record { font-family: var(--f-mono); color: var(--gold); font-size: 1.4rem; margin: 6px 0 18px; }
.feature__stats { display: flex; gap: 28px; margin: 20px 0 28px; flex-wrap: wrap; }
.feature__stat .v { font-family: var(--f-mono); font-size: 1.5rem; color: var(--text-strong); }
.feature__stat .k { color: var(--muted); font-size: .8rem; }

/* =========================================================
   STANDINGS preview + HERITAGE strip
   ========================================================= */
.stand-prev { display: flex; flex-direction: column; gap: 10px; }
.stand-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 16px; align-items: center; padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); transition: .3s; }
.stand-row:hover { border-color: var(--gold-deep); }
.stand-row--1 { background: linear-gradient(120deg, rgba(236,138,46,.08), var(--surface)); border-color: rgba(236,138,46,.40); }
.stand-row__rank { font-family: var(--f-mono); font-size: 1.3rem; color: var(--gold); text-align: center; }
.stand-row__name { font-weight: 600; color: var(--text); }
.stand-row__flag { font-size: 1.1rem; }
.stand-row__pts { font-family: var(--f-mono); color: var(--green-deep); font-weight: 600; }

.heritage { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(36px,6vw,72px); border: 1px solid var(--line-soft); background: linear-gradient(150deg, rgba(233,108,78,.10), var(--surface) 60%); }
.heritage__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
@media (max-width:820px){ .heritage__grid { grid-template-columns: 1fr; } }
.heritage h2 { font-size: clamp(1.8rem,4vw,3rem); margin-bottom: 18px; }
.heritage p { color: var(--sand); font-weight: 300; max-width: 58ch; }
.telemetry-call { border: 1px solid rgba(233,108,78,.35); background: rgba(233,108,78,.05); border-radius: var(--r-lg); padding: 26px; }
.telemetry-call .eyebrow { color: var(--green-deep); }
.telemetry-call h4 { font-size: 1.3rem; margin: 10px 0; }
.telemetry-call p { font-size: .92rem; }

/* =========================================================
   LIVE RACE TRACKER  (the centerpiece)
   ========================================================= */
.live { padding-top: 32px; padding-bottom: 60px; }
/* The route view owns the page <h1> (heat title) above the LiveRace host so
   the router can focus/announce it; the host renders the meta line, clock and
   controls below. Tighten the route header so the two read as one block. */
.live--host { padding-top: 0; }
.live__head--route { margin-bottom: 14px; }
.live__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.live__heat .eyebrow { color: var(--crimson); }
.live__heat h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin-top: 6px; }
.live__heat .meta { display: flex; gap: 16px; color: var(--sand-dim); margin-top: 8px; font-size: .9rem; flex-wrap: wrap; }
.live__heat .meta .num { color: var(--green-deep); }

.live__clock { text-align: center; }
.live__clock .t { font-family: var(--f-mono); font-size: clamp(2.4rem,6vw,3.8rem); font-weight: 600; color: var(--text-strong); line-height: 1; letter-spacing: .02em; }
.live__clock .lab { color: var(--muted); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; margin-top: 6px; }

.live__controls { display: flex; gap: 10px; align-items: center; }
.ctrl { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--sand); transition: .25s; }
.ctrl:hover { border-color: var(--sand); color: var(--sand); transform: translateY(-2px); }
.ctrl svg { width: 18px; height: 18px; }
.speed-pills { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.speed-pills button { padding: 8px 13px; font-family: var(--f-mono); font-size: .82rem; color: var(--muted); transition: .2s; }
.speed-pills button.is-active { background: var(--green-deep); color: var(--on-warm); }

/* ---- the track ---- */
.track-wrap { background: linear-gradient(165deg, var(--surface-2), var(--ink)); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 22px 20px 14px; position: relative; overflow: hidden; }
.track-wrap::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 100% at 4% 50%, rgba(236,138,46,.05), transparent 50%); pointer-events:none; }
.track { position: relative; }
.lane { position: relative; height: 52px; border-radius: 10px; margin-bottom: 6px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 60px, transparent 60px 120px); border-block-end: 1px dashed rgba(0,0,0,.05); }
.lane:last-child { margin-bottom: 0; border-block-end: none; }

/* race direction is fixed (right -> left): use PHYSICAL props, not logical */
/* finish-line and finish-flag use a neutral structural color, not the honors gold */
.finish-line { position: absolute; inset-block: 4px; left: 2.5%; width: 8px; border-radius: 3px; z-index: 3;
  background: repeating-linear-gradient(45deg, var(--sand-dim) 0 5px, #3D2A0A 5px 10px); box-shadow: 0 0 16px rgba(170,130,80,.20); }
.finish-flag { position: absolute; inset-block-start: -22px; left: 2.5%; color: var(--sand-dim); font-size: .7rem; font-family: var(--f-mono); }
.start-line { position: absolute; inset-block: 4px; right: .8%; width: 2px; background: rgba(0,0,0,.24); z-index: 1; }

/* runner token (direction:ltr so the token leads, leftmost, regardless of UI language) */
.runner { position: absolute; top: 50%; transform: translateY(-50%); right: 1%; height: 36px; display: flex; align-items: center; gap: 8px; z-index: 4; transition: right .075s linear; will-change: right; direction: ltr; }
.runner__trail { position: absolute; left: 100%; top: 50%; height: 4px; width: var(--trail, 0px); transform: translateY(-50%); border-radius: 4px;
  background: linear-gradient(to right, color-mix(in srgb, var(--rc) 65%, transparent), transparent); pointer-events: none; }
.runner__token { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .9rem; color: var(--text-strong);
  background: var(--rc); box-shadow: 0 4px 14px rgba(60,30,10,.16), 0 0 0 2px color-mix(in srgb, var(--rc) 40%, transparent); position: relative; }
.runner__token .glyph { position: absolute; inset-block-start: -16px; font-size: .95rem; filter: drop-shadow(0 2px 3px rgba(60,30,10,.16)); transform: scaleX(-1); }
.runner__tag { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; text-shadow: 0 1px 4px rgba(26,20,17,.5); opacity: .92; }
.runner.is-leader .runner__token { box-shadow: 0 4px 16px rgba(236,138,46,.45), 0 0 0 3px var(--gold); }
/* focus is a live/selection state, not an honor: use green-glow */
.runner.is-focus .runner__tag { color: var(--green-deep); }
.runner.is-done .runner__token { animation: popwin .5s var(--ease-out); }
@keyframes popwin { 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }

/* distance axis */
.axis { display: flex; justify-content: space-between; direction: rtl; margin-top: 12px; padding-inline: 2.5% .8%; }
.axis span { font-family: var(--f-mono); font-size: .7rem; color: var(--muted); }

/* ---- panels under track ---- */
.live__panels { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; margin-top: 22px; }
@media (max-width: 940px){ .live__panels { grid-template-columns: 1fr; } }

/* leaderboard */
.leaderboard { background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 20px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-title h3 { font-size: 1.15rem; }
.lb-list { position: relative; }
.lb-row { position: absolute; inset-inline: 0; height: 50px; display: grid; grid-template-columns: 34px 30px 1fr auto auto; gap: 12px; align-items: center;
  padding: 0 12px; border-radius: 12px; cursor: pointer; transition: transform .55s var(--ease-out), background .3s, border-color .3s; border: 1px solid transparent; }
.lb-row:hover { background: rgba(0,0,0,.04); }
/* Keyboard focus ring for the interactive leaderboard row (WCAG 2.1.1) */
.lb-row:focus-visible { outline: 2px solid var(--green-glow); outline-offset: -2px; background: rgba(233,108,78,.06); }
.lb-row.is-focus { background: rgba(233,108,78,.08); border-color: rgba(233,108,78,.35); }
.lb-row__pos { font-family: var(--f-mono); font-size: 1.2rem; font-weight: 600; color: var(--sand-dim); text-align: center; }
.lb-row.rank-1 .lb-row__pos { color: var(--gold); }
.lb-row__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 35%, transparent); }
.lb-row__name { font-weight: 600; }
.lb-row__name small { display: block; color: var(--muted); font-weight: 400; font-size: .72rem; }
.lb-row__gap { font-family: var(--f-mono); font-size: .82rem; color: var(--sand-dim); }
.lb-row__spd { font-family: var(--f-mono); font-size: .92rem; color: var(--green-deep); min-width: 78px; text-align: end; }
.lb-row__spd small { color: var(--muted); font-size: .7rem; }

/* telemetry focus panel */
.telemetry { background:
    radial-gradient(120% 100% at 90% 0%, rgba(233,108,78,.10), transparent 50%),
    linear-gradient(165deg, var(--surface-2), var(--ink));
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 24px; position: relative; overflow: hidden; }
.telemetry__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.telemetry__who { display: flex; align-items: center; gap: 12px; }
.telemetry__who .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 35%, transparent); }
.telemetry__who .nm { font-family: var(--f-display); font-size: 1.4rem; color: var(--text-strong); font-weight: 700; }
.telemetry__who .ow { color: var(--muted); font-size: .78rem; }

.gauges { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.gauge { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 18px; background: rgba(0,0,0,.04); }
.gauge--speed { grid-column: 1 / -1; }
.gauge__lab { color: var(--muted); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.gauge__val { font-family: var(--f-mono); font-weight: 600; color: var(--text-strong); line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.gauge--speed .gauge__val { font-size: clamp(3rem, 9vw, 5rem); }
.gauge--speed .gauge__val .u { font-size: 1rem; color: var(--green-deep); font-family: var(--f-display); }
.speed-bar { height: 8px; border-radius: 8px; background: rgba(0,0,0,.08); margin-top: 14px; overflow: hidden; }
.speed-bar__fill { height: 100%; width: 0%; border-radius: 8px; background: var(--green-deep); transition: width .12s linear; box-shadow: 0 0 12px rgba(233,108,78,.35); }

.gauge--hr { display: flex; flex-direction: column; }
.gauge--hr .gauge__val { font-size: 2.2rem; color: var(--crimson); }
.gauge--hr .gauge__val .u { font-size: .8rem; color: var(--muted); font-family: var(--f-display); }
.heart { width: 26px; height: 26px; color: var(--crimson); animation: beat var(--bpm, .5s) infinite var(--ease); transform-origin: center; }
@keyframes beat { 0%,100%{ transform: scale(1);} 18%{ transform: scale(1.28);} 36%{transform:scale(.96);} }
.gauge--pos .gauge__val { font-size: 2.2rem; }
.gauge--pos .gauge__val .u { font-size: .8rem; color: var(--muted); }
.gauge--split .gauge__val { font-size: 1.7rem; color: var(--text-strong); }

.ecg { margin-top: 12px; height: 34px; }
.ecg path { fill: none; stroke: var(--crimson); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(216,27,96,.40)); stroke-dasharray: 600; animation: ecg 2.4s linear infinite; }
@keyframes ecg { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }

/* finish overlay */
.race-result { margin-top: 22px; border: 1px solid rgba(236,138,46,.40); border-radius: var(--r-lg); padding: 26px; background: linear-gradient(150deg, rgba(236,138,46,.08), var(--surface)); animation: rise .7s var(--ease-out) both; }
.race-result__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.race-result__head .trophy { font-size: 2.4rem; }
.race-result__head h3 { font-size: 1.5rem; }
.race-result__head .win-name { color: var(--gold); font-family: var(--f-calig); }
.podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.podium__item { text-align: center; padding: 16px; border-radius: var(--r-md); background: rgba(0,0,0,.04); border: 1px solid var(--line-soft); }
.podium__item .p { font-family: var(--f-mono); color: var(--gold); font-size: 1.2rem; }
.podium__item .n { font-weight: 600; margin: 4px 0; }
.podium__item .tm { font-family: var(--f-mono); color: var(--green-deep); font-size: .9rem; }

/* ---- welfare HR zone (FR-23/38/39/40) ---- */
/* green = speed/working, amber = peak ceiling. Never red, never gold. */
.hr-zone-label { margin-top: 8px; font-family: var(--f-display); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.hr-zone-bar { height: 6px; border-radius: 6px; background: rgba(0,0,0,.08); margin-top: 8px; overflow: hidden; }
.hr-zone-bar__fill { height: 100%; width: 0%; border-radius: 6px; transition: width .12s linear; }
.gauge--hr.hr-zone--green .hr-zone-label { color: var(--green-deep); }
.gauge--hr.hr-zone--green .hr-zone-bar__fill { background: var(--grad-green); }
.gauge--hr.hr-zone--amber .hr-zone-label { color: var(--amber); }
.gauge--hr.hr-zone--amber .hr-zone-bar__fill { background: linear-gradient(120deg, var(--amber-soft), var(--amber)); }
.gauge--hr.hr-zone--muted .hr-zone-label { color: var(--muted); }
.gauge--hr.hr-zone--muted .hr-zone-bar__fill { background: rgba(0,0,0,.14); }

/* welfare tooltip: visible on hover/focus of the HR gauge */
.gauge--hr { position: relative; }
.hr-welfare-tip { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px;
  font-size: .76rem; line-height: 1.5; color: var(--sand); box-shadow: var(--sh-2, 0 12px 40px -14px rgba(60,30,10,.13));
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 6; pointer-events: none; }
.gauge--hr:hover .hr-welfare-tip, .gauge--hr:focus-within .hr-welfare-tip { opacity: 1; visibility: visible; }
.hr-welfare-tip .concept-note { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: .68rem; color: var(--muted); letter-spacing: .02em; }

/* ---- mobile collapsed-track + bottom-sheet (FR-30) ---- */
/* shown only on narrow viewports; desktop keeps the full track + panels */
.collapsed-track { display: none; gap: 8px; overflow-x: auto; padding: 12px 2px; margin-top: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.runner-token { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(0,0,0,.05); color: var(--text); white-space: nowrap; }
.runner-token .runner-token__num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .78rem; color: var(--text-strong); background: var(--rc); }
.runner-token__nm { font-size: .82rem; font-weight: 600; }
.runner-token.is-focus { border-color: var(--green); background: rgba(233,108,78,.10); }

.bottom-sheet { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; background: var(--surface-2);
  border-block-start: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 20px 18px 28px;
  box-shadow: 0 -16px 50px -16px rgba(60,30,10,.16); transform: translateY(110%); transition: transform .28s var(--ease-out); }
.bottom-sheet.open { transform: translateY(0); }
.bottom-sheet__close { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); color: var(--sand); font-size: 1.2rem; line-height: 1; }
.bottom-sheet__title { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; }

@media (max-width: 600px) {
  .live .track-wrap { display: none; }
  .collapsed-track { display: flex; }
  .live__panels { grid-template-columns: 1fr; }
  .live__panels .telemetry { display: none; }
}

/* tip strip */
.live__tip { margin-top: 18px; color: var(--muted); font-size: .84rem; text-align: center; }
.live__tip b { color: var(--green-deep); }

/* =========================================================
   CAMEL PROFILE
   ========================================================= */
.profile-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding-top: 40px; }
@media (max-width: 820px){ .profile-hero { grid-template-columns: 1fr; } }
.profile-portrait { position: relative; aspect-ratio: 1; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-soft); }
.profile-portrait::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 35%, rgba(236,138,46,.15), transparent 60%); pointer-events: none; }
/* emoji-only decorators: scoped to .glyph/.ring so they do not apply to the <img> path */
.profile-portrait .glyph { font-size: 13rem; transform: scaleX(-1); filter: drop-shadow(0 24px 40px rgba(60,30,10,.14)); animation: bob 5s var(--ease) infinite; }
.profile-portrait .ring { position:absolute; width: 84%; height: 84%; border-radius: 50%; border: 1px dashed rgba(236,138,46,.40); animation: spin 32s linear infinite; }

/* ---- real photo portrait (passport + profile) ---- */
.passport__portrait { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-soft); }
.passport__portrait-img,
.profile-portrait img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-2); display: block; }

.profile-meta .breadcrumb { color: var(--muted); font-size: .82rem; margin-bottom: 14px; }
.profile-meta h1 { font-family: var(--f-calig); font-size: clamp(3rem,8vw,5.5rem); line-height: .9; }
/* F-02: secondary name at 60% of headline (clamp(3rem,8vw,5.5rem) * 0.6) */
.passport__name-secondary { color: var(--sand-dim); letter-spacing: .12em; font-size: clamp(1.8rem,4.8vw,3.3rem); }
.profile-meta .en { color: var(--sand-dim); letter-spacing: .12em; font-size: .9rem; }
.profile-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 26px; }
.profile-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width:560px){ .profile-stats { grid-template-columns: repeat(2,1fr);} }
.pstat { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 16px; background: var(--surface); }
.pstat .v { font-family: var(--f-mono); font-size: 1.5rem; color: var(--text-strong); }
.pstat .v.gold { color: var(--gold); }
.pstat .k { color: var(--muted); font-size: .76rem; margin-top: 4px; }

/* stat tiles (BEM: passport__stats / stat-tile) -- F-11 / F-12 */
.passport__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width:560px){ .passport__stats { grid-template-columns: repeat(2,1fr); } }
.stat-tile { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 16px; background: var(--surface); }
.stat-tile .v { font-family: var(--f-mono); font-size: 1.5rem; color: var(--text-strong); }
.stat-tile .k { color: var(--muted); font-size: .76rem; margin-top: 4px; }
/* F-12: gold highlight on best-time tile when camel holds a record (honors only) */
.stat-tile--gold { border-color: var(--gold-deep); background: linear-gradient(120deg, rgba(236,138,46,.08), var(--surface)); }
.stat-tile--gold .v { color: var(--gold); }

/* pedigree */
.pedigree { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
@media (max-width:680px){ .pedigree { grid-template-columns: 1fr; } }
.ped-col { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.ped-node { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); position: relative; }
.ped-node .rel { color: var(--muted); font-size: .72rem; }
.ped-node .nm { font-family: var(--f-display); font-size: 1.15rem; color: var(--text); }
.ped-node--self { border-color: var(--gold-deep); background: linear-gradient(120deg, rgba(236,138,46,.08), var(--surface)); }
.ped-node--sire { border-inline-start: 3px solid var(--green); }
.ped-node--dam { border-inline-start: 3px solid var(--crimson); }

/* BEM pedigree nodes emitted by views-passport.js renderNode() -- F-24 */
.pedigree__tree { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
@media (max-width:680px){ .pedigree__tree { grid-template-columns: 1fr; } }
.pedigree__node { display: block; border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); position: relative; text-decoration: none; color: inherit; }
.pedigree__node .ped__rel { display: block; color: var(--muted); font-size: .72rem; }
.pedigree__node .ped__name { display: block; font-family: var(--f-display); font-size: 1.15rem; color: var(--text); }
/* F-24: sire line = green accent, dam line = crimson accent */
.ped--sire { border-inline-start: 3px solid var(--green); }
.ped--dam { border-inline-start: 3px solid var(--crimson); }
a.pedigree__node:hover { border-color: var(--line); background: var(--surface-2); }

/* race history table */
.rtable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rtable th { text-align: start; color: var(--muted); font-weight: 600; font-size: .78rem; letter-spacing: .04em; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rtable td { padding: 14px; border-bottom: 1px solid var(--line-soft); }
.rtable tr:hover td { background: rgba(0,0,0,.03); }
.rtable .pos1 { color: var(--gold); font-weight: 700; }
.rtable .tm { font-family: var(--f-mono); color: var(--green-deep); }
.rtable .rec { color: var(--gold); }

/* sparkline */
.sparkcard { padding: 24px; }
.sparkcard svg { width: 100%; height: 90px; }
.sparkcard .axis-lab { display:flex; justify-content: space-between; color: var(--muted); font-size: .72rem; font-family: var(--f-mono); margin-top: 6px; }

/* trace tooltip */
.tooltip {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--text-strong);
  white-space: nowrap;
  box-shadow: var(--sh-1);
}
.tooltip__speed { color: var(--green-deep); }
.tooltip__hr { color: var(--crimson); }
.tooltip__time { color: var(--muted); }

/* =========================================================
   CALENDAR
   ========================================================= */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.cal-day { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 16px; background: var(--surface); transition: .3s; position: relative; overflow: hidden; }
.cal-day:hover { transform: translateY(-4px); border-color: var(--gold-deep); }
.cal-day--final { border-color: rgba(236,138,46,.45); background: linear-gradient(150deg, rgba(236,138,46,.12), var(--surface)); }
.cal-day__date { font-family: var(--f-mono); color: var(--sand); font-size: .9rem; }
.cal-day__date small { color: var(--muted); }
.cal-day__cat { font-family: var(--f-display); font-size: 1.3rem; color: var(--text-strong); margin: 8px 0 4px; }
.cal-day__heats { color: var(--sand-dim); font-size: .82rem; }
.cal-day__tag { margin-top: 10px; }

/* =========================================================
   STANDINGS page
   ========================================================= */
.records-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; }
@media (max-width: 860px){ .records-grid { grid-template-columns: 1fr; } }
.guinness { border: 1px solid rgba(236,138,46,.35); border-radius: var(--r-lg); padding: 26px; background: linear-gradient(160deg, rgba(236,138,46,.05), var(--surface)); }
.gline { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.gline:last-child { border-bottom: none; }
.gline__yr { font-family: var(--f-mono); color: var(--muted); width: 54px; }
.gline__bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(0,0,0,.07); overflow: hidden; }
.gline__bar > i { display: block; height: 100%; background: var(--grad-gold); border-radius: 8px; }
.gline__n { font-family: var(--f-mono); color: var(--text); width: 70px; text-align: end; font-size: .86rem; }

/* big standings table reuse stand-row, wider */
.standings-full .stand-row { grid-template-columns: 44px 1fr auto auto auto; }
.standings-full .stand-row__delta { font-family: var(--f-mono); font-size: .8rem; color: var(--green-deep); }

/* =========================================================
   generic page intro
   ========================================================= */
.page-intro { padding-top: 48px; }
.page-intro h1 { font-size: clamp(2rem,5vw,3.4rem); margin: 10px 0 12px; }
.page-intro p { color: var(--sand); max-width: 64ch; font-weight: 300; }
.concept-note { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; padding: 8px 14px; border:1px dashed var(--line); border-radius: 999px; color: var(--muted); font-size: .78rem; }

/* ============================================================
   GHOST MODE (M4). Gold is honors-reserved: the ghost token is a
   record run (an honor), so gold lives on the token, its label, the
   ghost ECG trace, and ahead-state sector/gap honors only. Green is
   live/speed, crimson is heart rate, matching the rest of the app.
   ============================================================ */

/* ghost token on the track: same size/shape as a runner, translucent
   gold, dashed trail. Physical right-to-left like the runner tokens. */
.ghost-token { position: absolute; top: 50%; transform: translateY(-50%); right: 1%; height: 36px;
  display: flex; align-items: center; z-index: 3; transition: right .075s linear; will-change: right; direction: ltr; pointer-events: none; }
.ghost-token__body { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 50%, transparent); position: relative; }
.ghost-token__body .glyph { font-size: 1rem; transform: scaleX(-1); filter: drop-shadow(0 2px 3px rgba(60,30,10,.16)); }
.ghost-token__tag { position: absolute; inset-block-start: -18px; inset-inline-end: 0; font-size: .62rem; color: var(--gold); white-space: nowrap; }
.ghost-token__time { position: absolute; inset-block-end: -16px; inset-inline-end: 0; font-size: .62rem; color: var(--gold-deep); white-space: nowrap; }
.ghost-token__trail { position: absolute; left: 100%; top: 50%; height: 3px; width: 64px; transform: translateY(-50%);
  background: repeating-linear-gradient(to right, var(--gold) 0 6px, transparent 6px 12px); opacity: .6; }

/* pre-race ghost selection dropdown (FR-12). Hidden/disabled once running. */
.ghost-pick { display: flex; flex-direction: column; gap: 6px; }
.ghost-pick.is-locked { opacity: .45; }
.ghost-label { font-size: .72rem; color: var(--muted); }
.ghost-select { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 10px; padding: 7px 10px; font-size: .85rem; min-width: 200px; }
.ghost-select:disabled { cursor: not-allowed; }

/* ghost panel: gap row + dual ECG + sector flash host */
.ghost-panel { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.ghost-gap { background: rgba(60,30,10,.13); border-radius: var(--r-lg); padding: 14px 18px; border: 1px solid var(--line-soft); }
.ghost-gap__lab { font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.ghost-gap__val { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; line-height: 1; }
.ghost-gap__val.green, .ghost-gap.green .ghost-gap__val { color: var(--green-deep); }
.ghost-gap__val.crimson, .ghost-gap.crimson .ghost-gap__val { color: var(--crimson); }

/* dual ECG: faint gold ghost line behind the live line on one SVG (FR-16). */
.ghost-ecg { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 12px 14px; }
.ghost-ecg__legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; font-size: .72rem; }
.ghost-ecg__lab--ghost { color: var(--gold); }
.ghost-ecg__lab--live { color: var(--crimson); }
.ghost-ecg .ecg-svg { width: 100%; height: 64px; display: block; }
.ghost-ecg .ecg-ghost { opacity: .55; }

/* sector split flash card (FR-21): gold ahead (honor), crimson behind. */
.sector-flash-host { min-height: 0; }
.sector-flash { border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; animation: sectorPop .3s var(--ease-out); }
.sector-flash.gold { border: 1px solid var(--gold); background: rgba(236,138,46,.08); }
.sector-flash.gold .sector-flash__delta { color: var(--gold); }
.sector-flash.crimson { border: 1px solid var(--crimson); background: rgba(216,27,96,.07); }
.sector-flash.crimson .sector-flash__delta { color: var(--crimson); }
.sector-flash__name { font-size: .82rem; color: var(--text); }
.sector-flash__delta { font-size: 1.2rem; font-weight: 600; }
@keyframes sectorPop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ghost duel mode (FR-26): two tokens only */
.track.ghost-duel .runner:not(.is-leader) { opacity: 0; }
.race-result__duel { margin-top: 16px; }

/* FR-27 divergence caption: appears in duel mode when the two positions differ
   by more than a second. Gold when the live runner leads (an honor), crimson
   when the ghost pulls ahead. Illustrative, so it carries the Concept note. */
.divergence-caption { position: absolute; inset-block-start: 8px; inset-inline-start: 50%;
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.88); border: 1px solid rgba(236,138,46,.30);
  text-align: center; pointer-events: none; z-index: 6; }
.divergence-caption.gold { border: 1px solid var(--gold); }
.divergence-caption.gold .divergence-caption__text { color: var(--gold); }
.divergence-caption.crimson { border: 1px solid var(--crimson); }
.divergence-caption.crimson .divergence-caption__text { color: var(--crimson); }
.divergence-caption__text { font-size: .92rem; font-weight: 600; }

/* FR-11 four-row telemetry block: speed, live HR, ghost HR, gap to ghost.
   Built always (so it can be fed each tick) but only shown on mobile under
   ghost mode; on desktop the full gauges + ECG + big gap gauge serve. */
.ghost-tel-rows { display: none; }
.ghost-tel-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(0,0,0,.04); }
.ghost-tel-row__lab { font-size: .82rem; color: var(--muted); }
.ghost-tel-row__val { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.ghost-tel-row__val.green { color: var(--green-deep); }
.ghost-tel-row__val.crimson { color: var(--crimson); }
.ghost-tel-row__val .u { font-size: .7rem; color: var(--muted); font-weight: 400; }

/* mobile four-row collapse (FR-11): when ghost is active under 768px the
   telemetry collapses to exactly the four ghost rows. The verbose live
   telemetry gauges, the big gap gauge, and the dual ECG are hidden so the
   panel shows only speed, live HR, ghost HR, and gap to ghost. */
@media (max-width: 768px) {
  .ghost-pick .ghost-select { min-width: 0; width: 100%; }
  .live--host.ghost-active .ghost-tel-rows { display: flex; flex-direction: column; gap: 10px; }
  .live--host.ghost-active .telemetry .gauge--pos,
  .live--host.ghost-active .telemetry .gauge--split,
  .live--host.ghost-active .ghost-panel > .ghost-gap,
  .live--host.ghost-active .ghost-panel > .ghost-ecg { display: none; }
}

/* ghost teaser on the home page */
.ghost-teaser { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; padding: 26px; }
.ghost-teaser__glyph { position: relative; display: grid; place-items: center; height: 90px; }
.ghost-teaser__camel { font-size: 3rem; opacity: .4; filter: drop-shadow(0 0 14px rgba(236,138,46,.35)); transform: scaleX(-1); }
.ghost-teaser__trail { position: absolute; inset-inline-end: 10px; top: 50%; height: 3px; width: 60px; transform: translateY(-50%);
  background: repeating-linear-gradient(to right, var(--gold) 0 6px, transparent 6px 12px); opacity: .5; }
.ghost-teaser__body h2 { margin: 6px 0 10px; }
.ghost-teaser__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; }
@media (max-width: 640px) { .ghost-teaser { grid-template-columns: 1fr; } }

/* ============================================================
   Win-probability ribbon (M5). Gold is scoped strictly to honors:
   the leader badge, the record-under-threat banner and the redline
   gold pulse. Ordinary probability lines use each runner's own hue.
   ============================================================ */
.winprob-ribbon { margin-block-start: 18px; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2); }
.winprob-ribbon__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.winprob-ribbon__title { display: flex; flex-direction: column; gap: 2px; }
.winprob-label { font-size: 1.05rem; font-weight: 700; color: var(--text-strong); }
.winprob-subtitle { color: var(--sand-dim); }
.winprob-ribbon__legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 8px; }
.winprob-legend__ghost { font-size: .82rem; }
.btn-show-all { font-size: .8rem; padding: 4px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-3); color: var(--text); cursor: pointer; }
.winprob-ribbon__chart { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 6px; }
.winprob-axis-y { display: flex; flex-direction: column; justify-content: space-between;
  font-size: .72rem; color: var(--muted); padding-block: 2px; }
.winprob-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.winprob-line { transition: opacity .25s ease; }
.winprob-ribbon.no-motion .winprob-line { transition: none; }
.winprob-line.dimmed { opacity: .3; }
.winprob-axis-x { display: flex; justify-content: space-between; font-size: .72rem;
  color: var(--muted); margin-block-start: 6px; padding-inline-start: 40px; }
.winprob-explainer { font-size: .8rem; color: var(--sand-dim); margin-block: 10px 0; }

/* redline overlay: caption + welfare framing ship together, never alarmist */
.winprob-redline-overlay { position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: rgba(50,18,8,.76); border-radius: var(--r-sm); }
.winprob-redline-overlay.active { display: flex; }
.redline-overlay__cap { font-size: 1.3rem; font-weight: 700; color: var(--crimson-soft); }
.redline-overlay__welfare { font-size: .82rem; color: var(--sand); max-width: 70%; }

/* FR-08: mobile haptic opt-in toast (no autoplay audio anywhere on mobile) */
.redline-haptic-toast { position: absolute; inset-block-end: 8px; inset-inline: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm); z-index: 4;
  background: rgba(40,14,6,.88);
  border: 1px solid var(--line); font-size: .8rem; color: var(--sand); }
.redline-haptic-toast__actions { display: flex; gap: 6px; flex-shrink: 0; }
.redline-haptic-toast .btn { padding: 4px 8px; font-size: .74rem; }

/* gold pulse ring (honor): JS removes the animating class under reduced motion */
.pulse-ring { position: absolute; inset-block-start: -6px; inset-inline-start: -6px;
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--gold);
  pointer-events: none; }
.pulse-ring.animating { animation: winprob-pulse 1.1s ease-out 2; }
.pulse-ring.no-motion { animation: none; }
@keyframes winprob-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* record-under-threat banner (honor: gold) */
.record-threat-banner { position: absolute; inset-block-start: 8px; inset-inline: 8px;
  display: none; flex-direction: column; align-items: center; padding: 8px 14px;
  border-radius: var(--r-sm); border: 1px solid #EC8A2E;
  background: rgba(154,45,8,.12); }
.record-threat-banner.active { display: flex; animation: winprob-banner-in .4s ease-out; }
.winprob-ribbon.no-motion .record-threat-banner.active { animation: none; }
@keyframes winprob-banner-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* leader probability badge (honor: gold), in the leaderboard gap slot */
.winprob-badge { font-weight: 700; color: var(--gold); }

/* post-race scrub + share */
.winprob-scrub { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-start: 12px; }
.scrub-handle { flex: 1; min-width: 140px; accent-color: var(--green); }
.btn-share-card { padding: 6px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-3); color: var(--text); cursor: pointer; }
.share-card { margin-block-start: 14px; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); }
.share-card__rows { display: flex; flex-direction: column; gap: 6px; margin-block: 10px; }
.share-card__row { display: flex; justify-content: space-between; gap: 10px; }
.share-card__prob { font-weight: 700; color: var(--text-strong); }
.share-card__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-block-start: 12px; }
.cardiac-recovery { margin-block-start: 14px; }
.cardiac-recovery__svg { width: 100%; height: 90px; display: block; }
.cardiac-recovery__note { font-size: .8rem; color: var(--sand-dim); margin-block: 6px 0; }
@media (max-width: 767px) { .winprob-svg { height: 120px; } }

/* Studbook, fan tree, ancestor drawer, compare, and ranking styles
   are in css/studbook.css (extracted to keep this file under 800 lines). */