/* JibTrak website: one stylesheet, no build step, no external requests.
   Colours are the app's own (Resources/Styles/Colors.xaml in the app repo).
   Navy areas (header, hero, page banners, footer) are navy in BOTH themes;
   everything else follows the visitor's light/dark setting. */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light dark;

  /* brand, fixed */
  --navy-900: #071e30;
  --navy-800: #0b2a43;
  --navy-700: #11314b;
  --navy-600: #163a57;
  --navy-500: #1f4b6b;
  --teal: #17beb0;
  --aqua: #5ad1e3;
  --amber: #f6b53c;
  --on-navy: #eaf2f7;
  --muted-on-navy: #93aec2;
  --ink-on-accent: #06202e;

  /* light theme (default) */
  --page: #f3f7fa;
  --card: #ffffff;
  --soft: #e9eff4;
  --line: #d3dee7;
  --text: #08263a;
  --muted: #46647a;
  --link: #08706a;
  --link-hover: #05544f;
  --icon: #0e8c82;
  --chip: #0b2a43;
  --focus: #08706a;
  --btn: #0b2a43;          /* the buttons that take you to another site (the Garmin watch cards) */
  --btn-text: #eaf2f7;
  --btn-hover: #163a57;
  --shadow: 0 1px 2px rgba(7, 30, 48, .06), 0 10px 28px rgba(7, 30, 48, .07);
  --field-line: #5f7a8f;   /* the edge of a form control: 3:1 or better against the card and the page, as WCAG asks */
  --danger: #b3261e;       /* a button that deletes */
  --danger-text: #ffffff;
  --danger-ink: #b3261e;   /* the same red as text or an outline on a card */

  --radius: 16px;      /* cards (same two-step scale as the app) */
  --radius-sm: 12px;   /* small surfaces */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0b2a43;
    --card: #11314b;
    --soft: #0f3049;
    --line: #1f4b6b;
    --text: #eaf2f7;
    --muted: #93aec2;
    --link: #5ad1e3;
    --link-hover: #8fe3f0;
    --icon: #17beb0;
    --chip: #163a57;
    --focus: #5ad1e3;
    --btn: #17beb0;        /* navy would vanish into a navy card, so these are the brand teal in dark */
    --btn-text: #06202e;
    --btn-hover: #45d3c7;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .25);
    --field-line: #7596ad;
    --danger: #ff9f95;
    --danger-text: #3a0a06;
    --danger-ink: #ff9f95;
  }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }

h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible, .hero :focus-visible, .cta :focus-visible, .site-footer :focus-visible, .page-hero :focus-visible { outline-color: var(--aqua); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 24px; } }

.skip-link {
  position: absolute; left: 16px; top: -72px; z-index: 100;
  background: var(--teal); color: var(--ink-on-accent);
  padding: .65rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---------------------------------------------------------------- icons */
.icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-tile {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius-sm); background: rgba(23, 190, 176, .14); color: var(--icon);
}

/* ---------------------------------------------------------------- header */
.site-header { background: var(--navy-900); color: var(--on-navy); border-bottom: 1px solid rgba(147, 174, 194, .16); box-shadow: 0 6px 18px rgba(7, 30, 48, .14); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; line-height: 0; padding-block: 4px; }
.brand img { height: 30px; width: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.site-nav a { color: var(--on-navy); text-decoration: none; font-weight: 560; font-size: .95rem; padding-block: .7rem; }
.site-nav a:hover { color: var(--aqua); }
/* the page you are on: colour and an underline, so it does not rely on colour alone */
.site-nav a[aria-current="page"] { color: var(--aqua); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }

/* Phones and small tablets: the logo gets its own 44px row and the seven menu links a row of their own below it.
   The links share the row out equally and only wrap onto a second row if they truly do not fit (a narrow
   phone, or large text). From 640px up there is room for the logo and the menu side by side. */
@media (max-width: 639px) {
  .header-inner { display: block; padding-block: 0; }
  .brand { display: flex; width: max-content; height: 44px; padding-block: 0; }
  .brand img { height: 26px; }
  .site-nav { flex-wrap: wrap; width: calc(100% + 16px); margin-inline: -8px; gap: 0; }
  .site-nav a { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .1rem; font-size: .76rem; text-align: center; }
  .site-nav a[aria-current="page"] { text-underline-offset: 6px; }
}

/* The menu stays on screen while the page scrolls, as long as the window is tall enough to spare the room
   (so not on a phone held sideways, or at high zoom, where it would cover the page). On a phone only the
   menu row(s) stay: the 44px logo row slides away, hence the negative top. scroll-padding keeps jump links
   and keyboard focus from landing underneath the menu. */
@media (min-height: 480px) {
  .site-header { position: sticky; top: 0; z-index: 50; }
  html { scroll-padding-top: 88px; }
}
@media (min-height: 480px) and (max-width: 639px) {
  .site-header { top: -44px; }
  html { scroll-padding-top: 104px; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.3rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; font: 650 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--teal); color: var(--ink-on-accent); }
.btn-primary:hover { background: #45d3c7; color: var(--ink-on-accent); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: clip; color: var(--on-navy);
  background:
    radial-gradient(70% 90% at 85% 12%, rgba(23, 190, 176, .22), transparent 62%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}
.hero-grid { display: grid; gap: 44px; align-items: center; padding-block: clamp(40px, 7vw, 84px) clamp(84px, 10vw, 132px); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--muted-on-navy); font-size: .95rem; }
.pill {
  display: inline-block; background: var(--amber); color: var(--ink-on-accent);
  font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px;
}
.hero h1 { font-size: clamp(2.4rem, 1.15rem + 5.2vw, 4.2rem); font-weight: 800; margin-bottom: .4em; }
.hero h1 em, .cta h2 em, .page-hero h1 em { font-style: normal; color: var(--teal); }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: #d5e3ec; max-width: 36em; }

.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--muted-on-navy); font-size: .95rem; }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points .icon { width: 18px; height: 18px; color: var(--teal); }
.wave { position: absolute; left: 0; right: 0; bottom: -1px; display: block; width: 100%; height: clamp(30px, 5vw, 58px); fill: var(--page); }

/* the phone illustration (decorative, drawn in HTML/CSS), with the dim watch picture overlapping its corner */
.hero-art { position: relative; display: flex; justify-content: center; width: min(100%, 440px); margin-inline: auto; padding-bottom: 28px; }
.phone {
  width: min(100%, 292px); display: flex; flex-direction: column; gap: 10px;
  background: var(--navy-900); border: 8px solid var(--navy-600); border-radius: 40px;
  padding: 14px 14px 18px; box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}
.phone-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 2px; font-size: .8rem; color: var(--muted-on-navy); }
.phone-bar-dots { display: inline-flex; gap: 4px; }
.phone-bar-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-on-navy); opacity: .6; }
.you-card, .row-card { background: var(--navy-700); border: 1px solid var(--navy-500); border-radius: var(--radius-sm); }
.you-card { padding: 14px; border-radius: 16px; }
.you-label { display: flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--aqua); }
.you-label .icon { width: 16px; height: 16px; }
.you-count { margin: 6px 0 2px; font-size: 2.35rem; font-weight: 700; line-height: 1.05; color: var(--on-navy); }
.you-sub { font-size: .85rem; color: var(--muted-on-navy); }
.row-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 4px solid var(--amber); }
.row-card.row-next { border-left-color: var(--teal); }
.row-tag { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-on-navy); }
.row-names { font-size: .92rem; color: var(--on-navy); }
.you-alert {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--navy-500); font-size: .82rem; color: #ffdca0;
}
.you-alert .icon { width: 16px; height: 16px; color: var(--amber); }

/* The watch is a picture (assets/watch-face-dim.svg, made by tools/make_assets.py). The watch fills only 88% of the
   picture, the rest being margin and shadow, so the picture is 13% wider than the watch it shows (216px for a 190px
   watch) and is nudged down and right by its own margin (the percentages in transform are of the picture's own size). */
.hero-watch { position: absolute; right: -4px; bottom: -6px; width: clamp(145px, 41vw, 216px); height: auto; transform: translate(6%, 7%); }

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(56px, 8vw, 104px); }
.band { background: var(--soft); }
.kicker { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.section h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.7rem); font-weight: 760; max-width: 21em; }
.section h2 em { font-style: normal; color: var(--icon); }
.section-lede { max-width: 40em; margin-bottom: 0; font-size: 1.15rem; color: var(--muted); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card h3 { margin: 16px 0 6px; font-size: 1.15rem; line-height: 1.25; }
.card p { margin: 0; color: var(--muted); }
.card.value h3 { margin-top: 0; }

@media (max-width: 599px) {
  .card.feature { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 10px; align-items: center; }
  .card.feature .icon-tile { width: 44px; height: 44px; grid-row: 1; grid-column: 1; }
  .card.feature h3 { margin: 0; grid-row: 1; grid-column: 2; }
  .card.feature p { grid-column: 1 / -1; }
}

.audience { margin: 28px 0 0; color: var(--muted); max-width: 46em; }

/* how it works */
.how-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 1fr 1fr; } }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 24px; }
.steps li { counter-increment: step; position: relative; padding-left: 64px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  border-radius: 50%; background: var(--chip); border: 1px solid var(--navy-500); color: var(--teal);
  font: 700 1.1rem/42px var(--mono); text-align: center;
}
.steps h3 { margin: 0 0 4px; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--muted); }
figure { margin: 0; }
figure img { display: block; margin-inline: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
figcaption { margin-top: 14px; font-size: .9rem; text-align: center; color: var(--muted); }

/* The Garmin page's top section: the introduction, then the watch pictures, then the store tiles and the checklist.
   On a phone they follow one another in that order, so the picture is seen straight away, and only the "on watch"
   picture shows (two would be too small to read). From 600px both show, side by side, and from 900px the pictures
   move into a column of their own at the right and stay in view while the page scrolls. */
.watch-grid { display: grid; }
.watch-stage { display: grid; justify-items: center; gap: 14px; margin-top: 30px; }
.watch-pair { display: grid; grid-template-columns: minmax(0, 300px); justify-content: center; gap: 8px 12px; width: 100%; }
.watch-pair figure { display: grid; justify-items: center; gap: 0; }
.watch-pair img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.watch-pair figcaption { margin: 0; max-width: 17em; font-size: .9rem; line-height: 1.35; color: var(--muted-on-navy); }
.page-hero .watch-note { max-width: 30em; margin: 0; font-size: .85rem; line-height: 1.45; text-align: center; color: var(--muted-on-navy); }
@media (max-width: 599px) { .watch-pair .watch-asleep { display: none; } }
@media (min-width: 600px) { .watch-pair { grid-template-columns: repeat(2, minmax(0, 270px)); } }
@media (min-width: 900px) {
  .watch-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 52px; grid-template-areas: "intro stage" "rest stage"; }
  .watch-intro { grid-area: intro; }
  .watch-stage { grid-area: stage; align-self: start; position: sticky; top: 112px; margin-top: 0; padding-top: 12px; }
  .watch-rest { grid-area: rest; }
}
.checklist { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: #d5e3ec; }
.checklist strong { color: var(--on-navy); }
.checklist .icon { width: 22px; height: 22px; margin-top: 3px; color: var(--teal); }
.fineprint { margin: 28px 0 0; font-size: .9rem; color: var(--muted-on-navy); }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; font-weight: 650; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--link); border-bottom: 2px solid var(--link);
  transform: translateY(-70%) rotate(45deg);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 18px 16px; color: var(--muted); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq-more { margin: 22px 0 0; color: var(--muted); }

/* closing call to action */
.cta { text-align: center; color: var(--on-navy); padding-block: clamp(56px, 8vw, 96px); background: linear-gradient(135deg, var(--navy-800), var(--navy-900)); }
.cta h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); font-weight: 760; margin-inline: auto; max-width: 20em; }
.cta p { margin: 0 auto 26px; max-width: 34em; color: #d5e3ec; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-900); color: var(--muted-on-navy); padding-block: 44px 30px; font-size: .92rem; }
.site-footer a { color: var(--on-navy); }
.site-footer a:hover { color: var(--aqua); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.footer-brand img { height: 28px; width: auto; display: block; margin-bottom: 12px; }
.footer-brand p { margin: 0; max-width: 30em; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer-links a { display: inline-block; padding-block: .35rem; }
.legal { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(147, 174, 194, .16); font-size: .82rem; line-height: 1.55; }
.legal p { margin: 0 0 .6em; }

/* ---------------------------------------------------------------- page banners, and document pages (privacy, support, 404) */
.page-hero { background: linear-gradient(180deg, var(--navy-900), var(--navy-800)); color: var(--on-navy); padding-block: clamp(36px, 6vw, 72px); border-bottom: 1px solid rgba(147, 174, 194, .16); }
.page-hero h1 { margin: 0 0 .3em; font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); font-weight: 800; }
.page-hero p { margin: 0; max-width: 38em; color: #d5e3ec; font-size: 1.15rem; }
.page-hero .meta { margin-top: 14px; font-size: .9rem; color: var(--muted-on-navy); }
.page-hero .kicker { margin: 0 0 12px; max-width: none; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); }
.page-hero .fineprint { margin: 28px 0 0; font-size: .9rem; color: var(--muted-on-navy); }
.page-hero .checklist { margin-top: 28px; }

/* "Coming soon" app store tiles, on every page. They are not links: there is nothing to link to until a real
   store listing exists. A tile carries either the store's own official badge (.store-official: the App Store
   and Google Play so far) or, until that store's official file has been supplied, the store's mark in a chip. They sit three
   across, and two across (or one) where three would leave a badge too little room, because a badge can be neither
   squashed nor shrunk below 40px tall. The column counts are fixed by screen width on purpose: a self-wrapping
   grid made the page scroll sideways. Google Play's badge is wider than Apple's: re-measure where these switch if either changes. */
.stores { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 680px; color: var(--on-navy); }
.page-hero .stores { margin-top: 24px; }
.cta.cta-slim { padding-block: clamp(28px, 5vw, 44px); }
.cta .stores { margin-inline: auto; text-align: left; }
.stores + .hero-points { margin-top: 22px; }
.stores li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 11px; border: 1px dashed rgba(234, 242, 247, .42); border-radius: var(--radius-sm); background: rgba(234, 242, 247, .07); line-height: 1.25; cursor: default; }
/* forced-color-adjust keeps each chip's own colours if a visitor forces theirs (the white behind the Garmin mark must stay white) */
.store-chip { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; margin-bottom: 4px; padding: 0 8px; border: 1px solid #1f4b6b; border-radius: 8px; background: #163a57; forced-color-adjust: none; }
.store-chip img { display: block; height: 18px; width: auto; }
.store-chip-garmin { background: #fff; border-color: #fff; }
/* An official badge is shown exactly as the store supplies it: never recoloured, squashed, dimmed or covered, never
   under 40px tall, and with clear space of a quarter of its height on every side (Apple's rule). That is the tile's
   padding, and below the badge its margin plus the tile's 3px gap: 11px at 44px tall and 11px at 40px tall. */
.store-badge { display: block; align-self: flex-start; height: 44px; width: auto; max-width: none; margin-bottom: 8px; }
.stores li.store-official { padding: 12px; }
/* Google's badge arrives as a plain picture with a grey edge, which is trimmed off; this gives it the thin white edge and
   rounded corners Apple's badge has built in. Google's is wider than Apple's, so it is fitted inside a box the same size as
   Apple's (132 x 44) with black above and below, which is the badge's own colour; the picture itself is not stretched. */
.store-badge-play { box-sizing: border-box; width: 132px; border: 1px solid #fff; border-radius: 8px; background: #000; object-fit: contain; }
/* On the home page and the Garmin page the tiles sit in the narrower half of a two-column banner from 900px up, so
   three across would squash a badge until the screen is about 1100px wide. */
@media (min-width: 900px) and (max-width: 1099px) { .hero-copy .stores, .watch-grid .stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.store-tag { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--amber); }
.store-name { font-size: 1rem; font-weight: 700; text-wrap: balance; }
.store-for { font-size: .8rem; color: var(--muted-on-navy); }
@media (max-width: 559px) {
  .stores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stores li { padding: 9px 10px 10px; }
  .stores li.store-official { padding: 10px; }
  .store-badge { height: 40px; }
  .store-badge-play { width: 120px; border-radius: 7px; }
  .store-name { font-size: .9rem; }
  .store-for { display: none; }
}
@media (max-width: 359px) { .stores { grid-template-columns: minmax(0, 1fr); } }   /* two across would leave a badge too little room */

.prose { max-width: 760px; padding-block: clamp(36px, 6vw, 72px); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.2em 0 .5em; font-size: 1.5rem; }
.prose h3 { margin: 1.6em 0 .4em; font-size: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--icon); }
.callout { margin: 1.4em 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

.service { margin: 12px 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.service h3 { margin: 0 0 8px; font-size: 1.05rem; }
.service dl { display: grid; grid-template-columns: 1fr; gap: 6px 16px; margin: 0; }
@media (min-width: 620px) { .service dl { grid-template-columns: 9.5em 1fr; } }
.service dt { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-top: .15em; }
.service dd { margin: 0; }

.contact-card { margin: 1.4em 0; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.contact-card .address { display: block; margin: 4px 0 10px; font: 650 1.25rem/1.3 var(--mono); overflow-wrap: anywhere; }
.contact-card p:last-child { margin-bottom: 0; }

.notfound { text-align: center; padding-block: clamp(64px, 12vw, 140px); }
.notfound .code { display: block; margin-bottom: 8px; font: 700 clamp(3rem, 12vw, 6rem)/1 var(--mono); color: var(--icon); }

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .hero, .cta, .skip-link, .stores, .site-footer .footer-links { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page-hero { background: none; color: #000; padding: 0 0 12pt; }
  .page-hero p, .page-hero .meta { color: #333; }
  .site-footer { background: none; color: #333; padding: 12pt 0 0; }
  a { color: #000; }
}

/* contact card and 404 details */
.contact-card h2 { margin: 0 0 .35em; font-size: 1.25rem; }
.notfound h1 { margin-bottom: .3em; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); }
.notfound p { margin: 0 auto 24px; max-width: 30em; color: var(--muted); }

/* ---------------------------------------------------------------- building blocks for the longer pages (handicap, lists, Garmin) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* a block inside a long page; .split puts words on one side and a picture on the other */
.block { margin-top: clamp(56px, 8vw, 96px); }
.block:first-child, .section-head + .block { margin-top: 0; }
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .split.flip .split-art { order: -1; }
}
.split h2, .block-head h2 { margin: 0 0 .5em; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.8rem); font-weight: 740; }
.split-text > p, .block-head p { color: var(--muted); }
.block-head { max-width: 44em; margin-bottom: 28px; }
.block-head p:last-child { margin-bottom: 0; }
.note { margin: 18px 0 0; font-size: .9rem; color: var(--muted); }
.card .note { margin: 12px 0 0; }
.card p + p { margin-top: 12px; }
.card .more { margin-top: 12px; font-weight: 650; }

.bullets { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.bullets li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; color: var(--muted); }
.bullets .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--icon); }
.bullets strong { color: var(--text); }

.split-art figcaption { max-width: 34em; margin-inline: auto; }
.shot { width: 100%; max-width: 320px; border-radius: 28px; box-shadow: 0 26px 60px rgba(7, 30, 48, .28); }

/* the handicap ladder, drawn in HTML inside a phone: always navy, like the app, in both themes */
.phone.phone-wide { width: min(100%, 380px); margin-inline: auto; }
.phone-title { margin: 0 4px 2px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--aqua); }
.panel-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 4px 8px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--aqua); }
.panel-head span:last-child { font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted-on-navy); }
.ladder { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .8rem; color: var(--on-navy); }
.ladder .c-rank { width: 26px; }
.ladder .c-corr { width: 64px; }
.ladder .c-gap { width: 62px; }
.ladder .c-star { width: 28px; }
.ladder th { padding: 6px 3px; background: var(--navy-600); color: var(--muted-on-navy); font-size: .68rem; font-weight: 700; text-align: center; }
.ladder th small, .ladder td small { display: block; font-size: .68rem; font-weight: 500; }
.ladder td { padding: 7px 3px; background: var(--navy-700); border-top: 1px solid var(--navy-900); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ladder td small { color: var(--muted-on-navy); }
.ladder td.l { white-space: normal; }
.ladder .l { padding-left: 8px; text-align: left; }
.ladder .boatlink { color: var(--teal); font-weight: 650; text-decoration: underline; text-underline-offset: .18em; }
.ladder tr.us td { background: var(--navy-600); color: var(--amber); font-weight: 650; }
.ladder tr.us td small { color: var(--amber); }

/* the six boat pictures */

/* cards with a heading row */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.lc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lc-head h3 { margin: 0; font-size: 1.2rem; line-height: 1.2; }

/* list cards, and the smaller cards for the shorter lists */
.list-card { display: flex; flex-direction: column; }
.list-card > p { margin: 0; }
.list-card > .note { margin: 12px 0 0; }
.card.compact { padding: 18px 20px; }
.card.compact h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.25; }

/* the Garmin watch shortlist */
.score-note { max-width: 46em; margin: 22px 0 28px; color: var(--muted); }
.watch-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.watch-card { display: flex; flex-direction: column; }
.card.watch-card .wc-desc { flex: 1 1 auto; }
/* where the browser can, each card borrows five rows from the list, so titles, descriptions, scores and prices
   line up across a row (older browsers keep the plain stacked card above) */
@supports (grid-template-rows: subgrid) {
  .watch-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
}
.wc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card.watch-card h3 { margin: 0; font-size: 1.4rem; letter-spacing: -.02em; }
.wc-tag { flex: none; margin-top: .2rem; padding: .18rem .6rem; border-radius: 999px; background: rgba(23, 190, 176, .16); color: var(--link); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.card.watch-card .wc-desc { margin: 10px 0 16px; }
/* Four scores, then the total (their sum) across the whole row underneath. The number sits above its label and
   everything is packed from the top, so a label that has to wrap ("Price & looks" on a phone) cannot push its own
   number out of line with the others; two across on a phone, four across from 720px. */
.wc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin: 0; padding: 12px 0; border-block: 1px solid var(--line); }
.wc-stats > div { display: flex; flex-direction: column; min-width: 0; }
.wc-stats dt { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wc-stats dd { order: -1; margin: 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-stats .wc-total { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.wc-stats .wc-total dd { order: 0; font-size: 1.25rem; }
@media (max-width: 719px) { .wc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wc-bar { height: 8px; margin-top: 14px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.wc-bar i { display: block; height: 100%; border-radius: 8px; background: var(--teal); }
.w-51 { width: 51%; }
.w-69 { width: 69%; }
.w-76 { width: 76%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-82 { width: 82%; }
.card.watch-card .wc-price { margin: 0; padding-top: 14px; color: var(--text); }
/* Where to buy: every choice is its own button, two to a row and the retailer still to come across the bottom.
   The real links are solid (navy in light, teal in dark, so they read as buttons in both); the retailer to come
   is dashed and is not a link. The buttons sit along the bottom of each card, so they line up across a row. */
.wc-foot { display: flex; flex-direction: column; }
.card.watch-card .wc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 10px; margin: auto 0 0; padding-top: 16px; }
.wc-links a, .wc-links .wc-soon { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem 14px; border: 2px solid transparent; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 650; line-height: 1.2; text-align: center; }
.wc-links a { background: var(--btn); color: var(--btn-text); text-decoration: none; }
.wc-links a:hover { background: var(--btn-hover); color: var(--btn-text); }
.wc-links a:focus-visible { border-radius: var(--radius-sm); }
.wc-links .wc-soon { grid-column: 1 / -1; border: 1px dashed var(--muted); color: var(--muted); font-weight: 500; }
.wc-price b { margin-right: .35em; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* The "What to avoid" card ends the list: the whole width of the row, with amber down its left edge like the other
   places the site says "take care" (see .row-card). */
.avoid-card { grid-column: 1 / -1; border-left: 4px solid var(--amber); }
.card.avoid-card h3 { margin: 0 0 6px; font-size: 1.4rem; letter-spacing: -.02em; }
.card.avoid-card .avoid-intro { margin: 0 0 14px; }
.avoid-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.avoid-list li { margin: 0; color: var(--muted); }
.avoid-list strong { color: var(--text); }


/* ---------------------------------------------------------------- the club pages (clubs, club-setup, club)
   Forms, tables and status lines. The site had no form controls before these pages, so every control here keeps to
   the same rules as the rest of the site: at least 44px to tap, a visible edge (3:1), the shared focus ring, and
   colours from the same tokens in light and dark. Nothing is set inline: the Content-Security-Policy forbids it. */
[hidden] { display: none !important; }

.club-section { padding-block: clamp(28px, 5vw, 56px); }
.club-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.club-foot { max-width: 46em; margin-top: 28px; }
.club-app .grid { margin: 0; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); min-width: 0; }
@media (max-width: 599px) { .panel { padding: 18px 16px; } }
.panel > :first-child { margin-top: 0; }
.panel h2 { margin: 0 0 .35em; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.panel h3 { margin: 1.2em 0 .4em; font-size: 1.1rem; }
.panel h4 { margin: 0 0 .25em; font-size: 1rem; }
.panel p { margin: 0 0 .9em; text-wrap: pretty; }
.panel .note { margin: 0 0 1.1em; font-size: .93rem; color: var(--muted); }
.sub-card { margin: 0 0 16px; padding: 16px; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.sub-card > :first-child { margin-top: 0; }
.sub-card .note { margin-bottom: .9em; }

/* fields */
.field { display: grid; gap: 6px; margin: 0 0 16px; min-width: 0; }
.field > label, .label-line { font-weight: 650; font-size: .95rem; }
.label-line { margin: 1.2em 0 .3em; }
.hint { margin: 0; font-size: .88rem; color: var(--muted); }
.field .hint { margin-bottom: 2px; }
.club-app input[type="text"], .club-app input[type="password"], .club-app input[type="url"], .club-app input[type="email"], .club-app input[type="date"], .club-app input[type="time"], .club-app select, .club-app textarea {
  display: block; width: 100%; min-width: 0; min-height: 48px; padding: .6rem .75rem;
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--field-line); border-radius: var(--radius-sm);
}
.club-app textarea { min-height: 8rem; line-height: 1.45; resize: vertical; }
.club-app select { text-overflow: ellipsis; }
.club-app input.mono, .club-app textarea.mono { font-family: var(--mono); }
.club-app input::placeholder, .club-app textarea::placeholder { color: var(--muted); opacity: 1; }
.field-row { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--teal); }
.check label { cursor: pointer; }
.check-big label { font-weight: 650; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.sub-card .actions, .field + .actions { margin-top: 10px; }

/* more buttons (.btn and .btn-primary are above) */
.btn-secondary, .btn-small { background: transparent; color: var(--text); border-color: var(--field-line); }
.btn-secondary:hover, .btn-small:hover { background: var(--soft); color: var(--text); }
.btn-small, .btn-danger-quiet { min-height: 44px; padding: .45rem 1rem; font-size: .95rem; }
.btn-icon { min-height: 44px; min-width: 44px; padding: .4rem .7rem; background: transparent; color: var(--link); border-color: transparent; font-size: .95rem; text-decoration: underline; text-underline-offset: .18em; }
.btn-icon:hover { background: var(--soft); color: var(--link-hover); }
.btn-danger { background: var(--danger); color: var(--danger-text); }
.btn-danger:hover { filter: brightness(1.08); color: var(--danger-text); }
.btn-danger-quiet { background: transparent; color: var(--danger-ink); border-color: var(--danger-ink); }
.btn-danger-quiet:hover { background: var(--soft); color: var(--danger-ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover { filter: none; }

/* messages */
.notice { margin: 0 0 16px; padding: 12px 14px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); }
.notice-error { border-left-color: var(--danger-ink); }
.notice-warn { border-left-color: var(--amber); }
.panel .notice { margin-bottom: 1em; }
.status { min-height: 1.5em; margin: 12px 0 0; font-size: .95rem; color: var(--muted); }
.status-ok { color: var(--link); font-weight: 600; }
.status-error { color: var(--danger-ink); font-weight: 650; }
.form-errors:focus { outline: none; }
.empty { padding: 14px 16px; margin: 0 0 16px; color: var(--muted); border: 1px dashed var(--field-line); border-radius: var(--radius-sm); }

/* a banner with something beside its words: the club buttons on /clubs, and the signed-in club on /club-setup. Side by side
   from 760px wide, one under the other below that. */
.hero-split { display: grid; gap: 22px 40px; align-items: center; }
@media (min-width: 760px) { .hero-split { grid-template-columns: minmax(0, 1fr) auto; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 760px) { .hero-actions { flex-direction: column; align-items: stretch; min-width: 14rem; } }

/* the buttons that sit on the navy banner (the page's own secondary button is dark on light and would vanish there) */
.page-hero .btn-secondary { background: transparent; color: var(--on-navy); border-color: rgba(234, 242, 247, .55); }
.page-hero .btn-secondary:hover { background: rgba(234, 242, 247, .12); color: #fff; }

/* the signed-in club, in the banner at the top of the page: logo and name, the link to its public page, and who is signed in */
.club-hero-bar h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem); }
.page-hero .club-bar-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1rem; }
.club-hero-bar a { color: var(--aqua); }
.club-hero-bar a:hover { color: #8fe3f0; }
.page-hero .club-area { margin: 0 0 .3em; font-size: 1.1rem; }
.page-hero .club-address { margin: 0 0 .3em; font-size: 1rem; overflow-wrap: anywhere; }
.club-hero-public .link-line { margin: 0; font-size: 1rem; }
.page-hero .club-disclaimer { margin: .8em 0 0; font-size: .9rem; color: var(--muted-on-navy); }
.club-bar-side { display: grid; gap: 8px; justify-items: start; }
.page-hero .signed-in-as { margin: 0; font-size: .95rem; color: var(--muted-on-navy); overflow-wrap: anywhere; }
@media (min-width: 760px) { .club-bar-side { justify-items: end; } .page-hero .signed-in-as { text-align: right; } }

/* a club's logo: drawn on a canvas (the pages' policy allows no image from anywhere else), on a white tile so that a dark or
   see-through picture shows in light and dark alike */
.club-logo { display: block; flex: none; width: auto; max-width: 100%; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }
.club-logo-bar { height: 60px; max-width: 120px; }
.club-logo-head { height: 84px; max-width: 168px; }
.club-logo-card { height: 112px; max-width: 224px; }
.club-bar-title { display: flex; align-items: center; gap: 12px 16px; margin: 0 0 .4em; min-width: 0; }
.logo-card { margin: 0 0 6px; }
.logo-card .empty { margin: 0; }

/* the three views of a signed-in club: Class ratings, Races, Account */
.view-tabs { display: flex; gap: 4px; margin: 0; border-bottom: 2px solid var(--line); }
.view-tab { flex: 1 1 0; min-height: 48px; padding: .5rem .3rem; font: inherit; font-size: .95rem; font-weight: 650; color: var(--muted); background: transparent; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; }
@media (min-width: 600px) { .view-tab { flex: 0 0 auto; min-width: 9rem; padding-inline: 1.4rem; font-size: 1rem; } }
.view-tab:hover { background: var(--soft); color: var(--text); }
.view-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--link); }
.view-stack { display: grid; gap: 20px; }

/* tables */
.table-wrap { position: relative; max-width: 100%; margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.data-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.data-table th, .data-table td { padding: 8px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table th { white-space: nowrap; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--soft); }
.data-table td { color: var(--text); }
.data-table td:not(:first-child) { white-space: nowrap; }
.data-table td:first-child { min-width: 7rem; }
.band-table td input { min-height: 44px; }
.band-table td:first-child input { min-width: 9rem; }
.band-table td input.num { width: 7.5rem; }
.band-table td:last-child { width: 1%; white-space: nowrap; }
/* On a phone each class is a small block with its own labels, instead of a table that has to be scrolled sideways to reach To and Remove */
@media (max-width: 599px) {
  .band-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .band-table, .band-table tbody { display: block; }
  .band-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .band-table tr:last-child { border-bottom: 0; }
  .band-table td { display: block; padding: 0; border: 0; }
  .band-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .band-table td:first-child { grid-column: 1 / -1; }
  .band-table td:first-child input, .band-table td input.num { width: 100%; min-width: 0; }
  .band-table td:last-child { grid-column: 1 / -1; width: auto; white-space: normal; }
  .band-table td:last-child::before { content: none; }
}

/* races */
.race-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.race-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 16px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (min-width: 900px) { .race-row:not(.race-row-view) { grid-template-columns: minmax(0, 1fr) auto auto; } }
.race-main .race-name, .race-name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.race-when { margin: 2px 0 0; font-size: .93rem; color: var(--muted); }
.race-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.race-count { font-size: .9rem; color: var(--muted); }
.race-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: .18rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.chip-live { background: rgba(23, 190, 176, .16); color: var(--link); }
.chip-draft { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.start-row { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr) 9rem auto; align-items: end; }
.start-row .field { margin-bottom: 8px; }
.start-row .btn-icon { margin-bottom: 8px; }
@media (max-width: 479px) { .start-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 8px; } .start-row .btn-icon { grid-column: 1 / -1; justify-self: start; margin: -4px 0 0; } }
.course-extra > .field-row:first-child { margin-top: 0; }
.entries-box { min-height: 10rem; font-size: .88rem; white-space: pre; overflow: auto; tab-size: 4; }
.preview-count { margin: 12px 0 8px; font-weight: 600; color: var(--text); }
.entries-preview .notice { margin-bottom: 8px; font-size: .93rem; }
.file-pick { position: relative; display: inline-block; margin-top: 12px; }
.actions .file-pick { margin-top: 0; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-input:focus-visible + .file-label { outline: 3px solid var(--focus); outline-offset: 3px; }
.file-label { cursor: pointer; }
.danger-zone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.danger-zone h3 { margin-top: 0; }

/* a club's public page: each race opens in place */
.race-details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.race-row-view { padding: 0; border: 0; background: none; }
.race-details summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; overflow-wrap: anywhere; padding: 14px 48px 14px 16px; cursor: pointer; list-style: none; }
.race-details summary::-webkit-details-marker { display: none; }
.race-details summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: translateY(-70%) rotate(45deg); }
.race-details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.race-details .race-name { display: block; }
.race-details .race-when, .race-details .race-count { display: block; margin: 0; }
.race-body { padding: 0 16px 16px; }
.race-body h3 { margin: 1em 0 .4em; font-size: 1rem; }
.facts { display: grid; gap: 10px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin: 0 0 14px; }
.facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.earlier > summary { cursor: pointer; font-weight: 650; padding-block: 4px; }
.earlier[open] > summary { margin-bottom: 12px; }

/* a link that stands on a line of its own is a tap target, so it gets the room to be one */
.link-line a { display: inline-flex; align-items: center; min-height: 44px; }

/* the overview page */
.club-steps { max-width: 46em; }
.club-steps h3 { margin-bottom: 6px; }
.club-coming { max-width: 46em; margin: 28px 0 0; }
.cta .btn { margin-top: 4px; }
.cta-slim h2 { margin-bottom: .3em; }
@media print { .club-app .actions, .club-bar-side, .hero-actions { display: none; } .club-hero-bar a { color: #000; } .page-hero .club-disclaimer { color: #333; } }