/* The signed-in page (/app). A file of its own because /app ships a
   Content-Security-Policy with `style-src 'self'` (M18, spec §16.2): no
   inline styles anywhere on this page. Palette = the app's. */
:root {
  --bg: #F2F2F7; --surface: #FFFFFF; --label: #101013;
  --secondary: rgba(60, 60, 67, 0.60); --tertiary: rgba(60, 60, 67, 0.30);
  --sep: rgba(60, 60, 67, 0.14); --hairline: rgba(60, 60, 67, 0.18);
  --fill: rgba(118, 118, 128, 0.12);
  --climb: #C4501A; --descent: #3F6DC2;
  --climb-soft: rgba(196,80,26,0.12); --descent-soft: rgba(63,109,194,0.12);
  --terrain-fill: rgba(60,70,90,0.10); --terrain-line: #8A93A3;
  --rail-line: #D1D1D6; --rail-taper: #C7C7CC;
  --danger: #B3261E;
  --card-shadow: 0 1px 2px rgba(20, 20, 30, 0.04);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
}
a { color: var(--descent); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

nav { position: sticky; top: 0; z-index: 20; background: rgba(242,242,247,0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--sep); }
.nav-inner { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 10px; }
@media (min-width: 600px) { .nav-inner { padding: 0 24px; gap: 12px; } }
@media (max-width: 420px) { .nav-actions .btn.sm { padding: 7px 11px; font-size: 0.82rem; } }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--label); }
.brand svg { width: 28px; height: 28px; }
.nav-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-actions.end { justify-content: flex-end; }
.nav-text { color: var(--secondary); font-weight: 600; font-size: 0.9rem; text-decoration: none; padding: 6px 6px; }
.nav-text:hover { color: var(--label); }
@media (max-width: 380px) { .nav-text { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font: inherit; font-weight: 600; font-size: 0.95rem; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; background: var(--label); color: #fff; text-decoration: none; transition: filter .15s ease, transform .15s ease; white-space: nowrap; }
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
.btn.ghost { background: transparent; color: var(--label); border: 1px solid var(--hairline); }
.btn.ghost:hover { background: rgba(60,60,67,0.06); filter: none; }
.btn.link { background: transparent; color: var(--descent); padding: 6px 8px; font-weight: 500; }
.btn.link:hover { filter: none; text-decoration: underline; transform: none; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--hairline); }
.btn.sm { padding: 7px 14px; font-size: 0.88rem; }
.btn.apple { background: #000; color: #fff; }
/* Google's sign-in button, light theme (its branding guidelines): white, a grey outline, the G in its own colours. */
.btn.google { background: #fff; color: #1F1F1F; border: 1px solid #747775; }
.btn.google:hover { background: #F8F9FA; filter: none; }
.btn.lg { width: 100%; height: 48px; padding: 0 20px; font-size: 1rem; letter-spacing: -0.012em; }
/* Connect with Strava is Strava's own artwork (API Brand Guidelines §1.1): the kit's
   SVG at its own 237 × 48, centred, never redrawn, recoloured or brightened. After
   .btn.lg so the large button's side padding doesn't apply. */
.btn.strava { background: transparent; padding: 0; border-radius: 6px; width: auto; justify-self: center; margin: 0 auto; }
.btn.strava:hover { filter: none; }
.btn.strava img { display: block; width: 237px; max-width: 100%; height: auto; }


.wrap { max-width: 760px; margin: 0 auto; padding: 32px 16px 72px; }
@media (min-width: 600px) { .wrap { padding: 40px 24px 72px; } }
h1 { font-size: 1.9rem; letter-spacing: -0.025em; margin-bottom: 4px; }
h2 { font-size: 1.15rem; letter-spacing: -0.015em; margin: 0; }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.meta { color: var(--secondary); font-size: 0.95rem; }
.sync { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sync.offline { color: var(--climb); }
.card { background: var(--surface); border: 1px solid var(--sep); border-radius: 16px; padding: 18px 20px; margin: 18px 0; box-shadow: var(--card-shadow); }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stack { display: grid; gap: 14px; }
.center { text-align: center; }
.err { color: var(--danger); font-size: 0.92rem; margin-top: 8px; }
.ok { color: var(--descent); font-size: 0.92rem; margin-top: 8px; }
.hint { color: var(--tertiary); font-size: 0.8rem; font-weight: 400; }
.eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary); font-weight: 700; }
.approx { font-variant-numeric: tabular-nums; }

/* (i) */
.info { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--secondary); font: 700 0.7rem/1 Georgia, serif; cursor: pointer; display: grid; place-items: center; }
.info:hover { background: var(--fill); }

/* Empty state */
.empty { text-align: center; padding: 36px 24px; }
.empty-glyph { width: 200px; height: 88px; opacity: 0.5; fill: var(--terrain-fill); stroke: var(--terrain-line); stroke-width: 1.2; }
.empty h2 { font-size: 1.35rem; margin-top: 6px; }
.empty .meta { max-width: 300px; margin: 8px auto 20px; }
.empty .btn.link { display: block; margin: 10px auto 0; color: var(--secondary); }
.empty .empty-phone { max-width: 300px; margin: 16px auto 0; }

/* Rows */
.rows { list-style: none; display: grid; }
.rows li { display: flex; align-items: center; gap: 13px; padding: 10px 0; border-top: 1px solid var(--sep); }
.rows li:first-child { border-top: 0; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-name { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-name.untitled { color: var(--secondary); font-weight: 500; }
.row-sub { color: var(--secondary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.row-sub .up { color: var(--climb); }
.row-line { color: var(--secondary); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.row-flag { font-size: 0.78rem; font-weight: 600; color: var(--label); }
.row-flag.opener { color: var(--secondary); font-weight: 500; }
.row-end { display: flex; align-items: center; gap: 6px; flex: none; }
.countdown { color: var(--secondary); font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--sep); padding: 12px 0 4px; font: inherit; color: inherit; cursor: pointer; }
.row-button .glyph { color: var(--secondary); font-size: 1.1rem; width: 28px; text-align: center; }
.row-button .row-sub { white-space: normal; }

/* A/B/C chip: monochrome by design (orange and blue are terrain) */
.chip { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; flex: none; }
.chip.a { background: var(--label); color: #fff; }
.chip.b { background: transparent; color: var(--label); border: 1.5px solid rgba(16,16,19,0.55); }
.chip.c { background: var(--fill); color: var(--secondary); }

/* Course silhouette */
.silhouette { width: 40px; height: 22px; flex: none; }
.silhouette path { fill: var(--terrain-fill); stroke: var(--terrain-line); stroke-width: 1; }
.silhouette.none { color: var(--tertiary); font-size: 0.8rem; display: grid; place-items: center; }

/* Row menu */
.menu { position: relative; }
.menu > button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--secondary); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.menu > button:hover { background: var(--fill); }
.menu-list { position: absolute; right: 0; top: 34px; z-index: 10; min-width: 190px; background: var(--surface); border: 1px solid var(--sep); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,20,30,0.14); padding: 6px; display: grid; }
.menu-list button { text-align: left; background: transparent; border: 0; font: inherit; font-size: 0.92rem; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--label); }
.menu-list button:hover { background: var(--fill); }
.menu-list button.danger { color: var(--danger); }
.pill { font: inherit; font-size: 0.78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 0; background: var(--fill); color: var(--label); cursor: pointer; white-space: nowrap; }
.pill:hover { filter: brightness(0.95); }

/* Season: the list is the timeline (2026-10-09; the app's SeasonRail). A rail
   joins the A/B/C chips, gap rows say the days between entries, and the A-race
   taper is the wide grey stretch: neutral like the chips, since orange and
   blue mean terrain. The chip's centre sits 21px down (10px + half of 22px). */
.season-rows li { align-items: flex-start; padding: 0; border-top: 0; }
.season-rows .rail { position: relative; align-self: stretch; width: 22px; flex: none; display: flex; justify-content: center; align-items: flex-start; }
.season-rows .rail::before, .season-rows .rail::after { content: ""; position: absolute; left: 50%; }
.season-rows .rail::before { top: 0; height: 21px; }
.season-rows .rail::after { top: 21px; bottom: 0; }
.season-rows li.gap .rail::before, .season-rows li.today .rail::before { height: 50%; }
.season-rows li.gap .rail::after, .season-rows li.today .rail::after { top: 50%; }
.season-rows .rail.t-line::before, .season-rows .rail.b-line::after { width: 2px; margin-left: -1px; background: var(--rail-line); }
.season-rows .rail.t-taper::before, .season-rows .rail.b-taper::after { width: 6px; margin-left: -3px; background: var(--rail-taper); }
.season-rows .rail.b-taper:not(.t-taper)::after { border-radius: 3px 3px 0 0; }
.season-rows .rail .chip { position: relative; z-index: 1; margin-top: 10px; }
.season-rows .rail .chip.b { background: var(--surface); }
.season-rows .rail .chip.c { background: var(--surface); box-shadow: inset 0 0 0 11px var(--fill); }
.season-rows .ring { position: relative; z-index: 1; align-self: center; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--label); background: var(--surface); }
.season-rows .row-main { padding: 10px 0; }
.season-rows .row-end { align-items: flex-start; padding-top: 8px; }
.season-rows .rail-text { color: var(--secondary); font-size: 0.78rem; padding: 6px 0; font-variant-numeric: tabular-nums; }
.season-rows li.today .rail-text { font-size: 0.85rem; padding: 9px 0; }
.season-rows .rail-text b { color: var(--label); font-weight: 600; }
.when { display: grid; justify-items: end; gap: 1px; padding-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.when b { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.when span { color: var(--secondary); font-size: 0.78rem; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }

/* Forms */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .grid, .grid3 { grid-template-columns: 1fr; } }
label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--secondary); font-weight: 600; }
input, select { font: inherit; font-size: 1rem; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); color: var(--label); width: 100%; }
input:focus, select:focus { outline: none; border-color: var(--climb); box-shadow: 0 0 0 3px var(--climb-soft); }
input[type="file"] { padding: 7px; }
fieldset { border: 0; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fill); border-radius: 9px; padding: 2px; margin-top: 6px; }
.segmented label { display: block; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented span { display: block; text-align: center; padding: 6px; border-radius: 7px; font-weight: 700; color: var(--label); cursor: pointer; }
.segmented input:checked + span { background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* Preview */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 8px; }
.stat { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.stat .k { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tertiary); font-weight: 700; }
.stat .v { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat.up .v { color: var(--climb); } .stat.down .v { color: var(--descent); }
svg.profile { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--bg); }
svg.profile .area { fill: var(--terrain-fill); } svg.profile .line { fill: none; stroke: var(--terrain-line); stroke-width: 1.5; }
.profile-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--tertiary); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* Sign in: one centred panel — the mark, the two sign-ins, and what the account holds */
.signin { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 24px; }
@media (max-width: 600px) { .signin { padding-top: 0; } }
.signin-panel { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--sep); border-radius: 18px; padding: 36px 32px 26px; box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 18px 50px -24px rgba(20,30,50,0.22); display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (max-width: 420px) { .signin-panel { padding: 30px 20px 22px; } }
.signin-mark { width: 44px; height: 44px; }
.signin h1 { margin: 14px 0 6px; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.02em; }
.signin-lead { color: var(--secondary); font-size: 0.94rem; line-height: 1.35; max-width: 300px; }
.signin-intent { color: var(--label); font-size: 0.94rem; font-weight: 600; line-height: 1.35; max-width: 300px; margin-top: 4px; }
.signin-buttons { width: 100%; display: grid; gap: 10px; margin-top: 26px; }
.signin-skeleton { display: block; height: 48px; border-radius: 999px; background: var(--fill); }
/* Email first (M22): the address, then the 6-digit code; the providers below an "or" */
.signin-email { display: grid; gap: 10px; }
.signin-input { height: 48px; border-radius: 12px; padding: 0 16px; font-size: 1rem; }
.code-input { text-align: center; font-size: 1.375rem; font-weight: 600; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.code-input::placeholder { font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.signin-hint { color: var(--secondary); font-size: 0.8125rem; line-height: 1.4; }
.signin-sent { color: var(--secondary); font-size: 0.94rem; line-height: 1.4; overflow-wrap: anywhere; }
.signin-sent b { color: var(--label); font-weight: 600; }
.code-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.code-actions .btn.link { padding: 6px 2px; font-size: 0.875rem; }
.code-actions .btn.link:disabled { color: var(--secondary); text-decoration: none; }
.signin-or { display: flex; align-items: center; gap: 12px; color: var(--secondary); font-size: 0.8125rem; margin: 4px 0; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.signin-problem { width: 100%; margin-top: 26px; padding: 16px; border-radius: 12px; background: var(--bg); display: grid; justify-items: center; gap: 12px; font-size: 0.94rem; line-height: 1.35; }
.signin .err { margin-top: 12px; }
.signin-new { margin-top: 14px; color: var(--secondary); font-size: 0.8125rem; line-height: 1.4; }
.signin-sep { align-self: stretch; height: 1px; background: var(--sep); margin: 24px 0 18px; }
.signin-points { list-style: none; width: 100%; display: grid; gap: 14px; text-align: left; }
.signin-points li { display: flex; gap: 12px; align-items: flex-start; }
.point-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--bg); color: var(--secondary); display: grid; place-items: center; }
.point-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.signin-points b { display: block; font-size: 0.94rem; line-height: 1.3; font-weight: 600; }
.signin-points b + span { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--secondary); }
.signin-privacy { max-width: 400px; text-align: center; color: var(--secondary); font-size: 0.8125rem; line-height: 1.4; }
.signin-privacy a { font-weight: 600; text-decoration: none; }
.signin-privacy a:hover { text-decoration: underline; }

/* The account button and its menu (nav) */
.account-nav { position: relative; margin-left: 4px; }
.avatar-btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.avatar-btn .avatar { width: 34px; height: 34px; }
.avatar { display: block; flex: none; }
.avatar-bg { fill: rgba(118,118,128,0.16); transition: fill .15s ease; }
.avatar-fg { fill: rgba(60,60,67,0.50); }
.avatar-btn:hover .avatar-bg, .avatar-btn[aria-expanded="true"] .avatar-bg { fill: rgba(118,118,128,0.28); }
/* The Strava photo, else initials on a neutral disc (the app's ProfileAvatar). */
.avatar-slot { display: contents; }
.avatar.photo { border-radius: 50%; object-fit: cover; background: var(--fill); }
.avatar.initials { display: grid; place-items: center; border-radius: 50%; background: rgba(118,118,128,0.16); color: var(--secondary); font-weight: 600; line-height: 1; letter-spacing: 0; }
.avatar-btn .avatar.initials { font-size: 0.8rem; }
.avatar-btn:hover .avatar.initials, .avatar-btn[aria-expanded="true"] .avatar.initials { background: rgba(118,118,128,0.28); }
.avatar-btn:hover .avatar.photo, .avatar-btn[aria-expanded="true"] .avatar.photo { filter: brightness(0.92); }
.account-menu-head .avatar.initials { font-size: 0.95rem; }
.account-head .avatar.initials { font-size: 1.5rem; }
.menu-list.account-menu { top: 46px; width: 300px; }
.account-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.account-menu-head .avatar { width: 40px; height: 40px; }
.account-name { font-weight: 600; font-size: 0.94rem; line-height: 1.3; }
.account-sub { color: var(--secondary); font-size: 0.8125rem; line-height: 1.35; }
.menu-sep { height: 1px; background: var(--sep); margin: 4px; }
.menu-list a { display: flex; align-items: center; justify-content: space-between; color: var(--label); text-decoration: none; font-size: 0.92rem; padding: 8px 10px; border-radius: 8px; }
.menu-list a:hover { background: var(--fill); }
.menu-list [role="menuitem"]:focus-visible { outline: none; background: var(--fill); }
.avatar-btn:focus-visible, .signin .btn:focus-visible { outline: 2px solid var(--climb); outline-offset: 2px; }
.menu-list .chev { color: var(--tertiary); font-size: 1.15rem; line-height: 1; }
/* Signed in, the Guide link lives in the account menu on a phone. */
@media (max-width: 600px) { body:not([data-view="signin"]) .nav-text { display: none; } }
/* The smallest phones keep the buttons on one line: the mark alone, without the word. */
@media (max-width: 360px) { body:not([data-view="signin"]) .brand-word { display: none; } }

/* The Account page: grouped cards like the app's Settings → Account */
.account-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.account-head .avatar { width: 64px; height: 64px; }
.account-head h1 { margin: 0; line-height: 1.15; }
.account-head .meta { margin-top: 2px; }
@media (max-width: 420px) { .account-head .avatar { width: 56px; height: 56px; } .account-head h1 { font-size: 1.625rem; } }
.card.group { margin: 0; }
.card.group + .card.group, .group-foot[hidden] + .card.group { margin-top: 24px; }
.group-title { padding: 14px 18px 4px; }
.group-rows { list-style: none; }
.group-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 18px; min-height: 48px; }
.group-row + .group-row::before { content: ""; position: absolute; top: 0; right: 0; left: 52px; height: 1px; background: var(--sep); }
#sessions .group-row + .group-row::before { left: 64px; }
.group-row-title { flex: 1; font-weight: 500; }
.group-row-value { color: var(--secondary); font-size: 0.875rem; min-width: 0; overflow-wrap: anywhere; text-align: right; }
.row-action { padding: 4px 0 4px 8px; font-size: 0.875rem; font-weight: 600; }
.status-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--label); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status-icon.off { stroke: var(--tertiary); stroke-dasharray: 3 3; }
.device-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--bg); color: var(--secondary); display: grid; place-items: center; }
.device-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.device-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; line-height: 1.3; }
.tag { font-size: 0.72rem; font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: var(--fill); color: var(--label); }
.device-sub { color: var(--secondary); font-size: 0.8125rem; }
.group-button { display: block; width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-top: 1px solid var(--sep); background: transparent; font: inherit; font-weight: 500; text-align: left; color: var(--label); cursor: pointer; }
.group-button:hover { background: rgba(60,60,67,0.04); }
.group-button:focus-visible { outline: 2px solid var(--climb); outline-offset: -3px; }
.group-button.danger { color: var(--danger); }
.group-button.center { border-top: 0; text-align: center; font-weight: 600; }
.group-button.center + .group-button.center { border-top: 1px solid var(--sep); }
.group-foot { margin: 8px 18px 24px; color: var(--secondary); font-size: 0.8125rem; line-height: 1.4; }
.group-foot.center { margin-bottom: 0; text-align: center; }
.account-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 8px 18px 14px; }
.count { font-size: 1.375rem; line-height: 1.27; font-weight: 600; font-variant-numeric: tabular-nums; }
.count-label { color: var(--secondary); font-size: 0.8125rem; }
.account-keeps { display: grid; justify-items: start; gap: 8px; padding-top: 12px; padding-bottom: 16px; }
.account-keeps p { font-size: 0.94rem; line-height: 1.45; }
#account-error { margin-bottom: 14px; }
/* Strava's data is credited where it shows, in words (brand guidelines rule 4). */
.strava-credit { margin: -8px 0 22px; color: var(--secondary); font-size: 0.8125rem; }

/* Sheets (dialogs). Centred in the window: the reset at the top
   (`* { margin: 0 }`) takes away the browser's own `margin: auto` for a
   modal <dialog>, which pinned every sheet to the top-left corner. */
dialog.sheet { margin: auto; border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--surface); color: var(--label); box-shadow: 0 24px 64px rgba(20,20,30,0.22); }
dialog.sheet.small { width: min(420px, calc(100vw - 32px)); }
dialog.sheet::backdrop { background: rgba(16,16,19,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.sheet[open] { animation: sheet-in .2s cubic-bezier(.2,.7,.2,1); }
dialog.sheet[open]::backdrop { animation: backdrop-in .2s ease-out; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open], dialog.sheet[open]::backdrop { animation: none; } }
/* The head stays put while a long sheet scrolls, so Cancel and Done are always in reach. */
.sheet-head { position: sticky; top: 0; z-index: 2; background: var(--surface); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--sep); }
.sheet-head h2 { text-align: center; font-size: 1rem; }
.sheet-head > :last-child { justify-self: end; }
.sheet-body { padding: 18px 20px 22px; }
/* Grouped sections inside a sheet (the app's form groups). */
.sheet-section { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--sep); }
.sheet-section:first-child { padding-top: 0; border-top: 0; }
.sheet-section > .eyebrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sheet-section > .eyebrow .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sheet-section > .eyebrow.with-info { justify-content: flex-start; align-items: center; }
.sheet-intro { color: var(--secondary); font-size: 0.9rem; line-height: 1.45; }
.sheet-intro .btn.link { display: inline; padding: 0; font-size: inherit; }
.unit-label { display: flex; align-items: baseline; gap: 6px; }
.sheet-body p.hint { color: var(--secondary); font-size: 0.85rem; line-height: 1.45; }
.sheet-body .segmented { margin-top: 0; }
.sheet-body .btn.danger { justify-self: start; }
.guide-link { display: inline-flex; align-items: center; gap: 4px; color: var(--descent); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.guide-link:hover { text-decoration: underline; }
.guide-link::after { content: "→"; }
.sheet-body h2 { font-size: 1.1rem; }
.sheet-body .glossary { display: grid; gap: 10px; }
.sheet-body .glossary b { display: block; }
.sheet-body p { color: var(--label); font-size: 0.95rem; }
.sheet-body p.note { color: var(--secondary); font-size: 0.88rem; }
.sheet-body ol.steps-list { padding-left: 1.3em; display: grid; gap: 6px; font-size: 0.95rem; }
.sheet-body ol.steps-list li::marker { color: var(--secondary); font-weight: 700; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; background: var(--label); color: #fff; border-radius: 999px; padding: 10px 10px 10px 18px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(20,20,30,0.25); font-size: 0.92rem; max-width: calc(100vw - 32px); }
.toast .btn.link { color: #FFB38A; font-weight: 700; }

footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--sep); color: var(--secondary); font-size: 0.9rem; }
footer .note { font-weight: 600; color: var(--label); }
footer .footer-links { margin-top: 2px; }
#footer-race[hidden] + .footer-links { margin-top: 0; font-size: 0.8125rem; }
body[data-view="signin"] footer { margin-top: 36px; padding-top: 0; border-top: 0; text-align: center; }

/* Sign-in callback page (auth/strava.html): the sign-in panel, while the server finishes */
body.callback { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
body.callback .signin { width: 100%; padding-top: 0; }
body.callback .signin-lead { max-width: 320px; }
body.callback .err { max-width: 320px; }
.callback-back { margin-top: 20px; }

/* ---- The course page (M19, spec §17.3): the app's race detail, sections 1–3 + 5 ---- */
.back { display: inline-block; color: var(--descent); text-decoration: none; font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; }
.course-hero { margin-bottom: 18px; }
.course-title-row { display: flex; align-items: flex-start; gap: 8px; }
.course-title-row h1 { font-size: 2.1rem; line-height: 1.15; overflow-wrap: anywhere; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--secondary); font-size: 1rem; cursor: pointer; flex: none; margin-top: 6px; }
.icon-btn:hover { background: var(--fill); }
.hero-number { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.hero-number > span:first-child { font-size: 4.2rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.hero-unit { font-size: 1.5rem; font-weight: 500; color: var(--secondary); }
.hero-sub { margin-top: 10px; color: var(--secondary); font-size: 0.95rem; font-variant-numeric: tabular-nums; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-sub .up { color: var(--climb); } .hero-sub .down { color: var(--descent); }

.card.tight { padding: 0; overflow: hidden; }
.card.tight h2 { font-size: 1.05rem; }
.pad { padding: 12px 18px; }
.card-head.pad { margin-bottom: 0; justify-content: space-between; padding-bottom: 0; padding-top: 14px; }
.hairline { height: 1px; background: var(--sep); margin-left: 18px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.row-label { font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.row-value { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.meta.small { font-size: 0.8rem; }
.phone-line { color: var(--secondary); font-size: 0.85rem; }
.caveat { display: flex; align-items: baseline; gap: 10px; color: var(--secondary); font-size: 0.85rem; margin-top: 12px; }
.caveat::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--climb); flex: none; transform: translateY(1px); }

/* Elevation hero */
svg.race-profile { width: 100%; height: 188px; display: block; }
svg.race-profile .grid { stroke: var(--sep); stroke-width: 1; stroke-dasharray: 1 4; }
svg.race-profile .terrain { fill: var(--terrain-fill); }
svg.race-profile .ridge { fill: none; stroke: var(--terrain-line); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg.race-profile .climb-fill { fill: var(--climb-soft); }
svg.race-profile .desc-fill { fill: var(--descent-soft); }
svg.race-profile .climb-ridge { fill: none; stroke: var(--climb); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg.race-profile .desc-ridge { fill: none; stroke: var(--descent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg.race-profile .peak { fill: var(--label); }
svg.race-profile .hit { fill: transparent; cursor: pointer; }
.peak-label { position: relative; }
.axis-row { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--tertiary); font-variant-numeric: tabular-nums; margin-top: 4px; }
.seg-rows { list-style: none; border-top: 1px solid var(--sep); margin-left: 18px; }
.seg-rows li { display: flex; align-items: center; gap: 11px; padding: 11px 18px 11px 0; border-top: 1px solid var(--sep); cursor: pointer; }
.seg-rows li:first-child { border-top: 0; }
.seg-rows li:hover { background: rgba(60,60,67,0.03); }
.seg-rows .dot { width: 9px; height: 9px; }
.seg-rows .dot.climb { background: var(--climb); } .seg-rows .dot.desc { background: var(--descent); }
.seg-rows .name { font-weight: 500; flex: 1; }
.seg-rows .fact { color: var(--secondary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.seg-rows .chev { color: var(--tertiary); font-size: 0.8rem; }
.seg-rows li.focused .chev { color: var(--secondary); }
/* Section for your watch (M26): ink, not colour — orange and blue stay for up and down. */
svg.race-profile .section-shade { fill: var(--label); opacity: 0.1; pointer-events: none; }
svg.race-profile .section-ridge { fill: none; stroke: var(--label); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
svg.race-profile .section-bound { stroke: var(--secondary); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; pointer-events: none; }
svg.race-profile .section-handle { cursor: ew-resize; touch-action: none; outline: none; }
svg.race-profile .section-handle .hit { fill: transparent; }
svg.race-profile .section-handle .knob { fill: var(--surface); stroke: var(--label); stroke-width: 1.5; }
svg.race-profile .section-handle .grip { stroke: var(--label); stroke-width: 2; stroke-linecap: round; }
svg.race-profile .section-handle:focus-visible .knob, svg.race-profile .section-handle.dragging .knob { stroke-width: 2.5; }
.section-panel .block { display: block; font-weight: 400; }
.section-body { display: grid; gap: 12px; padding-top: 0; }
.section-ends, .section-presets { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.section-ends label { display: inline-flex; align-items: center; gap: 6px; color: var(--secondary); font-size: 0.9rem; }
.section-options { display: grid; gap: 10px; }
.section-numbers { display: grid; gap: 8px; border-top: 1px solid var(--sep); padding-top: 12px; }
.section-numbers .hero-sub { display: flex; gap: 14px; margin: 0; font-weight: 600; }
.section-numbers .s-time { font-weight: 600; }
.section-numbers .s-climb { display: flex; align-items: center; gap: 8px; }
.section-numbers .s-climb .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--climb); display: inline-block; }
.section-numbers .s-coords { display: grid; gap: 8px; }
.mono-digits { font-variant-numeric: tabular-nums; }
svg.gain-bars { width: 100%; height: 112px; display: block; margin-top: 4px; }
svg.gain-bars .bar { fill: var(--climb-soft); } svg.gain-bars .bar.max { fill: var(--climb); }
svg.gain-bars .value { font-size: 11px; font-weight: 600; fill: var(--secondary); text-anchor: middle; font-variant-numeric: tabular-nums; }
svg.gain-bars .tick { font-size: 10.5px; fill: var(--tertiary); text-anchor: middle; font-variant-numeric: tabular-nums; }
.terrain-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 8px; background: var(--fill); }
.terrain-bar span { display: block; height: 100%; }
.terrain-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 0.82rem; font-weight: 600; }
.terrain-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.terrain-legend b { color: var(--secondary); font-weight: 500; }
.terrain-bins { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.terrain-bins span { display: block; height: 100%; }
.terrain-table { margin-top: 10px; font-size: 0.85rem; }
.terrain-table summary { cursor: pointer; color: var(--secondary); font-weight: 600; }
.terrain-table ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-width: 360px; font-variant-numeric: tabular-nums; }
.terrain-table li { display: grid; grid-template-columns: 1fr auto 64px; gap: 12px; }
.terrain-table .band i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }
.terrain-table .num { text-align: right; }
.terrain-table .share { color: var(--secondary); }

/* Race day */
.date-chip { width: auto; padding: 4px 8px; font-size: 0.85rem; border-radius: 7px; background: var(--fill); border: 0; color: var(--label); }
#c-date-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(120,120,128,0.32); transition: background .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.06); transition: transform .2s; }
.switch input:checked + span { background: var(--climb); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--climb-soft); }
.segmented.compact { margin-top: 0; width: auto; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); min-width: 132px; }
.segmented.compact span { padding: 4px 8px; font-size: 0.9rem; }
.small-input { width: 90px; text-align: right; padding: 6px 10px; font-size: 1rem; }
.small-select { width: auto; padding: 6px 28px 6px 10px; font-size: 0.95rem; }

/* Fueling */
.big-number { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.big-number > span:first-child { font-size: 2.3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.big-unit { color: var(--secondary); font-weight: 500; font-size: 0.95rem; }
svg.fuel-curve { width: 100%; height: 88px; display: block; margin: 6px 0 8px; }
svg.fuel-curve .area { fill: var(--terrain-fill); }
svg.fuel-curve .line { fill: none; stroke: var(--terrain-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg.fuel-curve .node { fill: var(--terrain-line); }
svg.fuel-curve .tick { stroke-width: 1.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
svg.fuel-curve .tick.climb { stroke: var(--climb); } svg.fuel-curve .tick.desc { stroke: var(--descent); }
.timeline-details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.timeline-details summary::-webkit-details-marker { display: none; }
.timeline-details summary::after { content: "›"; color: var(--tertiary); font-size: 1.1rem; transform: rotate(0); transition: transform .15s; }
.timeline-details[open] summary::after { transform: rotate(90deg); }
.hour-rows { list-style: none; margin-left: 18px; border-top: 1px solid var(--sep); }
.hour-rows li { padding: 10px 18px 10px 0; border-top: 1px solid var(--sep); display: grid; gap: 2px; }
.hour-rows li:first-child { border-top: 0; }
.hour-rows .head { display: flex; align-items: baseline; gap: 8px; }
.hour-rows .head b { font-weight: 600; }
.hour-rows .head .to { color: var(--secondary); font-size: 0.85rem; flex: 1; font-variant-numeric: tabular-nums; }
.hour-rows .head .g { color: var(--secondary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.hour-rows .note { font-size: 0.85rem; }
.hour-rows .note.climb { color: var(--climb); } .hour-rows .note.desc { color: var(--descent); }
.row-main.link { cursor: pointer; }
@media (max-width: 480px) {
  .hero-number > span:first-child { font-size: 3.2rem; }
  .row-between { flex-wrap: wrap; }
}

/* Race plan (M20) */
.plan-intro { padding-top: 0; }
.plan-steps { list-style: none; counter-reset: step; display: grid; gap: 8px; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.plan-steps li { counter-increment: step; position: relative; padding-left: 32px; min-height: 22px; font-size: 0.88rem; color: var(--secondary); line-height: 1.45; }
.plan-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--surface); color: var(--label); border: 1px solid var(--hairline); }
.plan-steps li b { color: var(--label); font-weight: 600; }
.plan-steps li.done::before { content: "✓"; background: var(--label); border-color: var(--label); color: #fff; }
.plan-steps li.done { color: var(--tertiary); }
.plan-steps li.done b { color: var(--secondary); }
.plan-guide { padding-top: 0; padding-bottom: 4px; }
.empty .guide-link.empty-guide { margin-top: 14px; font-weight: 500; font-size: 0.85rem; }
.plan-inputs { display: grid; gap: 10px; }
.plan-inputs .inline, .wp-field .inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wp-field { display: grid; gap: 3px; }
.wp-field > .hint { line-height: 1.2; }
.wp-field > .hint.warn { color: var(--danger); }
.plan-inputs .date-chip.empty { outline: 1px dashed var(--secondary); outline-offset: -1px; }
.wp-list { list-style: none; display: grid; gap: 10px; margin: 10px 0; }
.wp-row { border: 1px solid var(--sep); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: var(--bg); }
.wp-main { display: flex; align-items: center; gap: 8px; }
.wp-main .wp-name { flex: 1; min-width: 80px; padding: 6px 10px; font-size: 0.95rem; }
.wp-glyph { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; flex: none; background: var(--fill); color: var(--label); }
.wp-glyph.aid, .wp-glyph.water { background: var(--descent-soft); color: var(--descent); }
.wp-glyph.cutoff { background: rgba(179,38,30,0.12); color: var(--danger); }
.wp-glyph.summit { background: var(--climb-soft); color: var(--climb); }
.wp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.wp-fields .wp-supplies, .wp-fields .wp-notes { width: 100%; padding: 6px 10px; font: inherit; font-size: 0.9rem; }
.wp-fields .small-input { width: 100%; text-align: left; }
.wp-fields input.bad { outline: 2px solid var(--danger); }
.wp-fields.line { display: flex; flex-wrap: wrap; align-items: flex-start; }
.wp-fields.line > .wp-field { flex: 0 1 120px; }
.wp-fields.line > .wp-field.wide { flex: 1 1 290px; }
.wp-fields .cutoff .small-input { width: 90px; flex: 0 0 auto; }
.wp-fields .cutoff .date-chip { padding: 6px 8px; font-size: 0.95rem; }
.wp-row.wp-end { background: var(--surface); border-style: dashed; }
.wp-end .wp-main { flex-wrap: wrap; }
.wp-end-name { font-size: 0.95rem; }
.wp-glyph.end { background: var(--label); color: var(--surface); font-size: 0.66rem; }

.wp-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.icon-btn.danger { color: var(--danger); margin-top: 0; width: 28px; height: 28px; font-size: 0.85rem; }
.pill.on { background: var(--label); color: #fff; }
textarea { font: inherit; font-size: 1rem; color: var(--label); background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; width: 100%; resize: vertical; }
textarea:focus { outline: none; border-color: var(--climb); box-shadow: 0 0 0 3px var(--climb-soft); }
.wp-list label { font-weight: 500; }
.table-scroll { overflow-x: auto; margin: 8px -18px 0; padding: 0 18px; }
table.legs { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; min-width: 560px; }
table.legs th { text-align: right; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); font-weight: 700; padding: 6px 0 8px 14px; border-bottom: 1px solid var(--sep); white-space: nowrap; vertical-align: bottom; }
table.legs th .sub { display: block; font-size: 0.66rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--tertiary); margin-top: 1px; }
table.legs td { padding: 9px 0 9px 14px; border-bottom: 1px solid var(--sep); vertical-align: top; text-align: right; white-space: nowrap; }
table.legs td .sub { display: block; font-size: 0.78rem; color: var(--secondary); margin-top: 2px; }
table.legs th.wp, table.legs td.wp { text-align: left; padding-left: 0; white-space: normal; min-width: 130px; max-width: 220px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.legs td.wp b { font-weight: 600; display: block; max-width: 220px; overflow-wrap: anywhere; }
table.legs td b { font-weight: 600; }
table.legs .up { color: var(--climb); } table.legs .down { color: var(--descent); }
table.legs .after { font-weight: 400; font-size: 0.78rem; color: var(--secondary); }
table.legs td.late b, table.legs td.late .margin { color: var(--danger); font-weight: 600; }
table.legs tr.finish td { border-bottom: 0; }
table.legs tr.finish td.wp b { font-weight: 700; }
table.legs tr.start td { color: var(--secondary); }
table.legs tr.start td b { color: var(--label); }
.legs-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--secondary); font-weight: 500; cursor: pointer; white-space: nowrap; flex: none; }
.legs-toggle input { width: auto; margin: 0; }
#p-legs-summary { margin: 4px 0 0; }
#p-legs-gels { margin: 2px 0 0; color: var(--label); font-weight: 600; }
#p-legs-gels:empty { display: none; }
table.legs td .sub .kind { font-weight: 600; color: var(--label); }
table.legs td .sub .bag { font-weight: 700; color: var(--label); }
/* The sticky waypoint column sits at the scroller's left edge, so nothing scrolls past it on that side. */
#p-legs-wrap .table-scroll { margin-left: 0; padding-left: 0; }
svg.race-profile.placing { cursor: crosshair; }
.plan-marker line { stroke: var(--label); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.55; }
.plan-marker circle { fill: var(--surface); stroke: var(--label); stroke-width: 1.6; cursor: grab; }
.plan-marker.cutoff circle { stroke: var(--danger); }
.plan-marker.aid circle, .plan-marker.water circle { stroke: var(--descent); }
.plan-marker.summit circle { stroke: var(--climb); }
.plan-marker text { font-size: 9.5px; font-weight: 600; fill: var(--label); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.plan-marker.dragging circle { cursor: grabbing; r: 6.5; }
.pace-card { display: none; }

/* The pace card: one printed page (M20, spec §18.3) */
@media print {
  body { background: #fff; color: #000; }
  nav, main > *:not(#course), #course > *:not(#pace-card), footer, .toast, dialog { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .pace-card { display: block !important; font-size: 10pt; }
  .pace-card h1 { font-size: 16pt; margin: 0 0 2pt; }
  .pc-sub { font-size: 9pt; color: #333; margin: 0 0 8pt; }
  .pc-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  .pc-table th { text-align: left; font-size: 7pt; letter-spacing: 0.06em; text-transform: uppercase; color: #666; border-bottom: 0.75pt solid #000; padding: 0 0 3pt 6pt; vertical-align: bottom; }
  .pc-table th.num { text-align: right; }
  .pc-table th .pc-hint { display: block; letter-spacing: 0; text-transform: none; color: #999; font-size: 6.5pt; }
  .pc-table td { padding: 4pt 0 4pt 6pt; border-bottom: 0.5pt solid #ccc; vertical-align: top; }
  .pc-table th:first-child, .pc-table td.wp { padding-left: 0; }
  .pc-table .num { text-align: right; white-space: nowrap; }
  .pc-table td .pc-hint { display: block; font-size: 8pt; color: #666; font-weight: 400; }
  .pc-table td .pc-hint b, .pc-table td .pc-hint .ink { color: #101013; font-weight: 700; }
  .pc-sub.pc-gels { color: #101013; font-weight: 700; }
  .pc-table .climb { color: #C4501A; } .pc-table .descent { color: #3F6DC2; }
  .pc-table td.late, .pc-table td.late .pc-hint { color: #B3261E; }
  .pc-table tr.finish td { border-bottom: 0.75pt solid #000; }
  .pc-notes-title { font-size: 9pt; font-weight: 700; margin: 10pt 0 2pt; }
  .pc-notes { margin: 0 0 0 14pt; font-size: 8.5pt; }
  .pc-foot { font-size: 7.5pt; color: #555; margin-top: 8pt; }
  @page { margin: 12mm; }
}

/* A course added from a race page (M27): where it came from */
.catalog-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.stat .hint { display: block; margin-top: 2px; }