/* Runner pages on a desktop (1024px and wider).

   Loaded by the layout with media="(min-width: 1024px)", so a phone or a
   tablet never applies a rule here; the inner query says the same thing for
   anyone reading this file on its own. Every rule is scoped to runner pages
   (they carry the runner bottom bar) or to pieces only they draw, so the
   admin panel is untouched too. smoke.js holds both of those.

   One system, agreed from the mock on 2026-09-24:
   - corners by role: 16px holds content, 10px sits inside it, round is pressed
   - two control heights, 44px and 36px, and a 24px badge that is never pressed
   - Anton for titles and figures, Space Grotesk for the rest, the script only
     in the club's name
   - one page header on every tab: its title left, the page's own thing right
   Every corner, height and text size below is one of the tokens, so a stray
   14px corner or 42px button fails smoke rather than slipping in. */

@media (min-width: 1024px) {
  body:has(.runner-bottomnav) {
    --d-r-box: 16px; --d-r-inner: 10px; --d-r-round: 999px;
    --d-h: 44px; --d-h-sm: 36px; --d-h-badge: 24px; --d-h-bar: 64px; --d-h-row: 64px; --d-h-tile: 88px; --d-h-feature: 320px; --d-h-banner: 400px;
    --d-t-title: 44px; --d-t-fig-xl: 72px; --d-t-fig: 36px; --d-t-card: 28px; --d-t-fig-sm: 22px; --d-t-brand: 21px;
    --d-t-sec: 18px; --d-t-name: 16px; --d-t-body: 15px; --d-t-nav: 14px; --d-t-small: 13px; --d-t-label: 11px;
    --d-s1: 8px; --d-s2: 16px; --d-s3: 24px; --d-s4: 32px; --d-s5: 40px; --d-s6: 48px; --d-s8: 64px;
    --d-line-2: rgba(255, 255, 255, 0.16);
  }

  /* ── The bar: the name, the five places, the bell and Profile ── */
  body:has(.runner-bottomnav) .topbar {
    position: sticky; top: 0; z-index: 50;
    justify-content: flex-start; align-items: stretch; gap: var(--d-s5);
    height: var(--d-h-bar); padding: 0 var(--d-s5);
    background: rgba(9, 12, 18, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  body:has(.runner-bottomnav) .topbar .brand { font-size: var(--d-t-brand); align-self: center; white-space: nowrap; }
  .runner-topnav { display: flex; align-items: stretch; flex: 1 1 auto; gap: 4px; }
  .runner-topnav .reg-tab {
    display: flex; align-items: center;
    padding: 0 var(--d-s2); font-size: var(--d-t-nav); text-decoration: none;
  }
  .runner-topnav .topnav-actions, body:has(.runner-bottomnav) .topbar .hdr-actions {
    position: static; transform: none; margin-left: auto;
    display: flex; align-items: stretch; gap: 4px;
  }
  body:has(.runner-bottomnav) .topbar .hdr-actions { margin-left: 0; }
  .runner-topnav .topnav-actions .btn, body:has(.runner-bottomnav) .topbar .hdr-actions .btn {
    position: static; transform: none;
    display: inline-flex; align-items: center;
    height: 100%; padding: 0 var(--d-s2);
    border: 0; border-radius: 0; background: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--muted); font-size: var(--d-t-nav); font-weight: 600; letter-spacing: 0.02em;
    text-decoration: none;
  }
  .runner-topnav .topnav-actions .btn:hover, body:has(.runner-bottomnav) .topbar .hdr-actions .btn:hover { color: var(--text); transform: none; box-shadow: none; }
  body:has(.runner-bottomnav) .topbar .bell-btn svg { width: 18px; height: 18px; }
  body:has(.runner-bottomnav) .topbar .bell-dot { top: 14px; right: 6px; }
  body:has(.runner-bottomnav) .topbar .auth-btn.is-open { color: var(--volt); border-bottom-color: var(--volt); }
  /* The bar holds the places, so the row of tabs under it goes. */
  body:has(.runner-bottomnav) main .reg-tabs { display: none; }
  /* A crumb back to Club leads nowhere on a desktop: Club is News and Kit. */
  body:has(.runner-bottomnav) .hero-min .kicker:has(a[href="/?club=1"]) { display: none; }

  /* ── The page ── */
  /* Reading pages (a post, a poll, a voucher) keep a reading width; the
     pages of lists, runs and kit take the room. */
  body:has(.runner-bottomnav) .wrap { max-width: 800px; padding: var(--d-s6) var(--d-s5) var(--d-s8); font-size: var(--d-t-body); }
  body:has(.runner-bottomnav) .wrap:has(> #panelRun, > .kit-grid, > .kit-item, > .cal-filter, > .news-feature, > .news-article, > .poll-card, > .voucher-page:not(.voucher-shown)) { max-width: 1120px; }

  /* The page header, the same on every tab: the title, one line under it,
     and a rule under the whole row. */
  body:has(.runner-bottomnav) .hero-min { text-align: left; padding: 0 0 var(--d-s4); margin-bottom: var(--d-s4); border-bottom: 1px solid var(--line); }
  body:has(.runner-bottomnav) .hero-min h1 { font-size: var(--d-t-title); line-height: 1; letter-spacing: 0.01em; text-shadow: none; }
  body:has(.runner-bottomnav) .hero-min h1 .script-accent {
    font-family: var(--font-display); font-size: 1em; color: var(--text);
    text-transform: uppercase; letter-spacing: inherit; transform: none; display: inline;
  }
  /* The greeting's question is the one line under the title, not a second
     title in the script. */
  body:has(.runner-bottomnav) #panelRun .hero-min h1 .script-accent, body:has(.runner-bottomnav) #panelVol .hero-min h1 .script-accent {
    display: block; margin-top: 10px;
    font-family: var(--font-body); font-size: var(--d-t-name); font-weight: 400;
    color: var(--muted); text-transform: none; letter-spacing: 0;
  }
  .hero-sub { display: block; margin-top: 10px; color: var(--muted); font-size: var(--d-t-name); }
  body:has(.runner-bottomnav) .hero-min .kicker { margin-bottom: var(--d-s2); }

  /* The header's right-hand side: your numbers on Check in and My runs, the
     filter on Calendar and Kit. Both sit on the header's row and rule. */
  body:has(.runner-bottomnav) #panelRun:not([hidden]), body:has(.runner-bottomnav) #panelMe:not([hidden]), body:has(.runner-bottomnav) #panelVol:not([hidden]), body:has(.runner-bottomnav) #panelVouchers:not([hidden]),
  body:has(.runner-bottomnav) .wrap:has(> .cal-filter), body:has(.runner-bottomnav) .wrap:has(> .kit-filter) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  }
  body:has(.runner-bottomnav) :is(#panelRun, #panelMe, #panelVol, #panelVouchers) > *, body:has(.runner-bottomnav) .wrap:has(> .cal-filter) > *, body:has(.runner-bottomnav) .wrap:has(> .kit-filter) > * { grid-column: 1 / -1; }
  body:has(.runner-bottomnav) :is(#panelRun, #panelMe, #panelVol, #panelVouchers) > .hero-min, body:has(.runner-bottomnav) .wrap:has(> .cal-filter) > .hero-min, body:has(.runner-bottomnav) .wrap:has(> .kit-filter) > .hero-min { grid-column: 1; grid-row: 1; }
  body:has(.runner-bottomnav) :is(#panelRun, #panelMe, #panelVol, #panelVouchers) > .stats-strip, body:has(.runner-bottomnav) .wrap > .cal-filter, body:has(.runner-bottomnav) .wrap > .kit-filter {
    grid-column: 2; grid-row: 1; align-self: stretch; align-items: flex-end;
    padding-bottom: var(--d-s4); margin: 0 0 var(--d-s4); border-bottom: 1px solid var(--line);
  }

  /* Your numbers, as figures with a rule between them, not boxes. */
  body:has(.runner-bottomnav) .stats-strip { display: flex; gap: 0; }
  body:has(.runner-bottomnav) .stats-strip .stat { border-left: 1px solid var(--line); padding: 0 0 0 var(--d-s3); margin-left: var(--d-s3); }
  body:has(.runner-bottomnav) .stats-strip .stat:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
  body:has(.runner-bottomnav) .stats-strip .stat b { font-size: var(--d-t-fig); margin-bottom: var(--d-s1); }
  body:has(.runner-bottomnav) .stats-strip .stat span { font-size: var(--d-t-label); font-weight: 600; letter-spacing: 0.16em; }
  body:has(.runner-bottomnav) .stats-strip .stat-volt b { text-shadow: none; }

  /* ── Type: the small text roles ── */
  body:has(.runner-bottomnav) main .card-kicker { font-size: var(--d-t-label); font-weight: 600; letter-spacing: 0.16em; }
  body:has(.runner-bottomnav) main .form-note { font-size: var(--d-t-small); }
  body:has(.runner-bottomnav) main .link-btn { font-size: var(--d-t-small); }

  /* ── Controls: 44px, 36px, round ── */
  body:has(.runner-bottomnav) main .btn { height: var(--d-h); padding: 0 var(--d-s3); border-radius: var(--d-r-round); font-size: var(--d-t-nav); }
  body:has(.runner-bottomnav) main .btn-sm { height: var(--d-h-sm); padding: 0 var(--d-s2); font-size: var(--d-t-small); }
  body:has(.runner-bottomnav) main .btn-full { width: auto; }
  body:has(.runner-bottomnav) main :is(#authPanel, #bellPanel, .kit-item, .run-sticker) .btn-full { width: 100%; }
  body:has(.runner-bottomnav) main .btn-volt:hover, body:has(.runner-bottomnav) main .btn-ghost:hover { box-shadow: none; }
  body:has(.runner-bottomnav) main .pills { gap: var(--d-s1); }
  body:has(.runner-bottomnav) main .pill-wrap { flex: 0 0 auto; }
  body:has(.runner-bottomnav) main .pill:not(.pk) {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; min-width: 0; height: var(--d-h-sm); padding: 0 var(--d-s2);
    border-radius: var(--d-r-round); font-size: var(--d-t-small); font-weight: 600;
  }
  body:has(.runner-bottomnav) main .pill.is-active, body:has(.runner-bottomnav) main .pill-wrap input:checked + .pill { box-shadow: none; }
  /* A map is a place to go, so it is a link, not a tiny pill. */
  body:has(.runner-bottomnav) main :is(.map-link, .tk-map) {
    display: inline; margin-left: 0; padding: 0; border: 0; border-radius: 0;
    color: var(--text); font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none;
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(216, 255, 58, 0.6);
  }
  body:has(.runner-bottomnav) main :is(.map-link, .tk-map):hover { color: var(--volt); }

  /* Badges: a state or a fact, 24px and round, never pressed. */
  /* No id in this list: :is() weighs as much as its heaviest part, and an id
     here outweighed the colour rules below, so every badge went grey. */
  body:has(.runner-bottomnav) :is(.day-badge, .mr-badge, .sd-badge, .kit-grid .kit-out, .kit-sizes i) {
    display: inline-flex; align-items: center; height: var(--d-h-badge); margin: 0; padding: 0 12px;
    border: 1px solid var(--d-line-2); border-radius: var(--d-r-round); background: none;
    color: var(--muted); font-family: var(--font-body); font-style: normal; font-size: var(--d-t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  }
  body:has(.runner-bottomnav) :is(.day-badge.is-open, .mr-badge.is-ok, .sd-badge.is-ok) { border-color: rgba(216, 255, 58, 0.45); color: var(--volt); }
  body:has(.runner-bottomnav) :is(.mr-badge.is-warn, .sd-badge.is-asked) { border-color: rgba(255, 176, 32, 0.5); color: var(--amber); }
  body:has(.runner-bottomnav) .sd-badge.is-pending { border-color: rgba(125, 136, 255, 0.55); color: var(--cobalt); }
  body:has(.runner-bottomnav) :is(.mr-badge.is-out, .kit-grid .kit-out) { border-color: rgba(255, 77, 77, 0.6); color: #FF8A8A; }

  /* ── Boxes: 16px; what sits inside them, 10px ── */
  body:has(.runner-bottomnav) main .card { border-radius: var(--d-r-box); padding: var(--d-s3) var(--d-s4); margin-bottom: var(--d-s2); }
  body:has(.runner-bottomnav) main :is(.run-photo, .news-row-img, .gal-thumb, .gal-thumb img, .news-article-img, .popia) { border-radius: var(--d-r-inner); }
  body:has(.runner-bottomnav) main .run-photo { max-width: 480px; }

  /* ── Check in ── */
  /* The day, as a section title with its state beside it. */
  body:has(.runner-bottomnav) #panelRun > .card-kicker:has(+ .day-head) { display: none; }
  .day-head { display: flex; align-items: center; justify-content: space-between; gap: var(--d-s2); margin-bottom: var(--d-s2); }
  .day-head h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--d-t-sec); text-transform: none; letter-spacing: 0; }

  /* The runs that are not open, as rows in one box. */
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > details.vol-event:not([open]) { margin: 0; padding: 0 var(--d-s3); border-radius: 0; }
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > details.vol-event:not([open]) + details.vol-event:not([open]) { border-top-width: 0; }
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > details.vol-event:not([open]):not(details.vol-event:not([open]) + *) { border-top-left-radius: var(--d-r-box); border-top-right-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > details.vol-event:not([open]):not(:has(+ details.vol-event:not([open]))) { border-bottom-left-radius: var(--d-r-box); border-bottom-right-radius: var(--d-r-box); margin-bottom: var(--d-s2); }
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > details.vol-event:not([open]) > summary {
    display: flex; align-items: center; gap: var(--d-s3); min-height: var(--d-h-row); margin: 0;
  }
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > details.vol-event:not([open]) > summary > b { flex: 1 1 auto; font-size: var(--d-t-body); }
  /* The phone's line gives way to the desktop one: the start, the
     distance, and the state as a badge. */
  body:has(.runner-bottomnav) #panelRun > details.vol-event:not([open]) > summary > span:not(.tk-head):not(.sum-desk) { display: none; }
  body:has(.runner-bottomnav) #panelRun > details.vol-event:not([open]) .sum-desk { display: flex; align-items: center; gap: var(--d-s3); color: var(--muted); font-size: var(--d-t-nav); }

  /* The open run, as a ticket: the stub and the name, then the photo with
     the state's own block beside it, then everything else. */
  body:has(.runner-bottomnav) #panelRun > details.vol-event[open] { margin-bottom: var(--d-s2); }
  #panelRun > details.vol-event[open] > summary { display: block; margin-bottom: var(--d-s3); }
  #panelRun > details.vol-event[open] > summary > b,
  #panelRun > details.vol-event[open] > summary > span:not(.tk-head) { display: none; }
  #panelRun > details.vol-event[open] .tk-head {
    display: grid; grid-template-columns: 152px minmax(0, 1fr); align-items: stretch;
    margin: calc(-1 * var(--d-s3)) calc(-1 * var(--d-s4)) 0; border-bottom: 1px solid var(--line);
  }
  .tk-when { display: flex; flex-direction: column; justify-content: center; padding: var(--d-s3); border-right: 1px dashed var(--d-line-2); }
  .tk-day { font-size: var(--d-t-label); letter-spacing: 0.16em; color: var(--volt); font-weight: 600; }
  #panelRun > details.vol-event[open] .tk-time { font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-fig); line-height: 1; margin-top: var(--d-s1); color: var(--text); letter-spacing: 0; }
  .tk-what { display: flex; flex-direction: column; justify-content: center; padding: var(--d-s3) var(--d-s4); min-width: 0; }
  #panelRun > details.vol-event[open] .tk-name { font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-card); line-height: 1.1; letter-spacing: 0.01em; color: var(--text); }
  .tk-where { margin-top: 6px; color: var(--muted); font-size: var(--d-t-nav); }
  #panelRun > details.vol-event[open] > .tk-body > .run-meta { display: none; }
  #panelRun > details.vol-event[open] .tk-facts {
    display: flex; flex-wrap: wrap; gap: var(--d-s1) var(--d-s4);
    color: var(--muted); font-size: var(--d-t-body);
  }
  .tk-facts b { color: var(--text); font-weight: 600; }
  #panelRun > details.vol-event[open] .card-kicker:has(+ .tk-ask),
  #panelRun > details.vol-event[open] form:has(.tk-ask) > .form-note { display: none; }
  #panelRun > details.vol-event[open] .tk-ask { display: block; margin: var(--d-s4) 0 var(--d-s2); font-size: var(--d-t-sec); font-weight: 600; color: var(--text); }
  .tk-ask span { margin-left: var(--d-s2); font-size: var(--d-t-small); font-weight: 400; color: var(--muted); }
  #panelRun > details.vol-event[open] > .tk-body > form { margin-top: 0; }
  #panelRun > details.vol-event[open] .card-kicker { margin-top: var(--d-s4); }
  #panelRun > details.vol-event[open] :is(.form-note, .inline-form) { text-align: left; }

  /* The ticket's body, side by side: the photo on the left and, beside it,
     the one block its state marks tk-main (the distances, the bib, the note).
     Everything else runs full width under the two, in the page's own order,
     and Share ends it on the right. The grid places each piece, so the order
     a phone draws is untouched. A run with no photo has the club card here. */
  #panelRun > details.vol-event[open] > .tk-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--d-s5); align-items: start; }
  #panelRun > details.vol-event[open] > .tk-body > * { grid-column: 1 / -1; }
  #panelRun > details.vol-event[open] > .tk-body > .run-photo {
    grid-column: 1; grid-row: 1 / span 2; align-self: stretch;
    display: block; width: 100%; max-width: none; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0;
  }
  /* A phone's spacing above the block is inline, which only !important
     outweighs; here the block starts level with the top of the photo. */
  #panelRun > details.vol-event[open] > .tk-body > .tk-main { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; }
  #panelRun > details.vol-event[open] > .tk-body > .tk-main :is(.tk-ask, .card-kicker) { margin-top: 0; }
  /* A state with only a line to say (opens later, closed, full) says it as
     the card's heading, the way an open run asks "How far?". */
  #panelRun > details.vol-event[open] > .tk-body > p.form-note.tk-main { font-size: var(--d-t-sec); font-weight: 600; color: var(--text); }
  /* The distances beside the photo: two to a row, three in one, five or more in threes. */
  #panelRun > details.vol-event[open] > .tk-body > .tk-main .pills:has(> .pk) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panelRun > details.vol-event[open] > .tk-body > .tk-main .pills:is(:has(> .pk:nth-child(3):last-child), :has(> .pk:nth-child(5))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #panelRun > details.vol-event[open] > .tk-body > .tk-main .pills:has(> .pk:only-child) { grid-template-columns: minmax(0, 1fr); }
  #panelRun > details.vol-event[open] > .tk-body > .tk-main .pill.pk { width: auto; }
  /* Under the two: the spots line first, the rest after it, Share on the right.
     Can't make it keeps the tiles' own gap under Change your distance. */
  #panelRun > details.vol-event[open] > .tk-body > .tk-facts { margin-top: var(--d-s4); }
  #panelRun > details.vol-event[open] > .tk-body > .inline-form { margin-top: var(--d-s2); }
  #panelRun > details.vol-event[open] > .tk-body > .share-btn { justify-self: end; margin-top: var(--d-s4); }

  /* Distance tiles: the number big, the word under it. */
  #panelRun .pills:has(> .pk) { gap: var(--d-s2); }
  #panelRun .pill.pk {
    flex: 0 0 auto; width: 144px; min-width: 0; height: var(--d-h-tile);
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n u" "k k";
    align-content: center; align-items: baseline; column-gap: 6px;
    padding: 14px var(--d-s2); text-align: left;
    background: var(--bg-2); border-color: var(--d-line-2); border-radius: var(--d-r-box);
    color: var(--text); box-shadow: none;
  }
  /* The tile, not the phone's one line; its pieces are the button's grid items. */
  #panelRun .pill.pk .pk-t { display: none; }
  #panelRun .pill.pk .pk-tile { display: contents; }
  #panelRun .pill.pk .pk-n { grid-area: n; font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-fig); line-height: 1; }
  #panelRun .pill.pk .pk-word { grid-area: n / n / u / u; font-size: var(--d-t-card); }
  #panelRun .pill.pk .pk-u { grid-area: u; font-size: var(--d-t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  #panelRun .pill.pk .pk-k, #panelRun .pill.pk .pk-d { grid-area: k; display: block; margin-top: 6px; font-size: var(--d-t-small); color: var(--muted); font-weight: 500; }
  #panelRun .pill.pk.is-active { background: var(--volt); border-color: var(--volt); color: #05070B; }
  #panelRun .pill.pk.is-active :is(.pk-u, .pk-k, .pk-d) { color: rgba(5, 7, 11, 0.7); }
  @media (hover: hover) and (pointer: fine) {
    #panelRun .pill.pk:not(.is-active):hover { border-color: var(--volt); background: rgba(216, 255, 58, 0.06); color: var(--text); transform: none; }
    #panelRun .pill.pk:not(.is-active):hover .pk-n { color: var(--volt); }
  }

  /* ── My runs: a table, each row opening in place ── */
  body:has(.runner-bottomnav) #panelMe > .card-kicker:not(.kicker-amber) { display: none; }
  body:has(.runner-bottomnav) #panelMe > .kicker-amber { margin: 0 0 var(--d-s1); }
  .mr-head, #panelMe .mr-row {
    display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px 280px 120px; align-items: center; column-gap: var(--d-s2);
  }
  .mr-head { margin: var(--d-s3) 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--d-t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
  .mr-head span:last-child { text-align: right; }
  #panelMe > details.vol-event {
    background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    margin: 0; padding: 0;
  }
  #panelMe > details.vol-event > summary { display: block; margin: 0; }
  #panelMe > details.vol-event > summary > b, #panelMe > details.vol-event > summary > .sum-line { display: none; }
  #panelMe .mr-row { min-height: var(--d-h-row); font-size: var(--d-t-body); }
  /* .vol-event summary span greys every span of a row; the columns read white. */
  #panelMe .mr-row > span { color: var(--text); font-size: var(--d-t-body); }
  #panelMe .mr-date { font-variant-numeric: tabular-nums; color: var(--muted); }
  #panelMe .mr-run { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #panelMe .mr-run .mr-badge { margin-left: var(--d-s1); }
  #panelMe .mr-res, #panelMe .mr-dist { font-variant-numeric: tabular-nums; }
  #panelMe :is(.mr-none, .mr-pace) { color: var(--muted); }
  #panelMe .mr-act { text-align: right; }
  #panelMe .mr-act i {
    display: inline-flex; align-items: center; height: var(--d-h-sm); padding: 0 var(--d-s2);
    border: 1px solid var(--d-line-2); border-radius: var(--d-r-round);
    font-style: normal; font-size: var(--d-t-small); font-weight: 600; color: var(--text);
  }
  #panelMe > details.vol-event[open] .mr-run { color: var(--volt); }
  #panelMe > details.vol-event[open] .mr-act i { border-color: var(--volt); color: var(--volt); }
  #panelMe > details.vol-event[open] > :not(summary) { max-width: 640px; }
  #panelMe > details.vol-event[open] { padding-bottom: var(--d-s3); }
  @media (hover: hover) and (pointer: fine) {
    #panelMe > details.vol-event > summary:hover .mr-run { color: var(--volt); }
  }
  /* Its Vouchers half runs the page's width, as the runs half does: each
     code a row, its Open or its stamp at the right edge where the table's
     View sits, and Your perks one row of seals across (Ameer, 2026-10-02). */
  body:has(.runner-bottomnav) #panelVouchers .perks-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

  /* ── The kit, the way the club website shows its shop ── */
  body:has(.runner-bottomnav) .kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-s4) 28px; }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-card {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "photo photo" "name price";
    align-items: baseline; column-gap: var(--d-s2);
    background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-card[hidden] { display: none; }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-photo {
    grid-area: photo; aspect-ratio: 4 / 5; object-position: 50% 40%;
    border: 1px solid var(--line); border-radius: var(--d-r-box); margin: 0 0 14px;
    transition: border-color 250ms ease;
  }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-name { grid-area: name; margin: 0; font-size: var(--d-t-name); }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-price { grid-area: price; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-fig-sm); letter-spacing: 0.02em; }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-price s { font-family: var(--font-body); font-size: var(--d-t-nav); }
  /* grid-area back to auto: a positioned grid child with an area is placed
     inside that area, which put the chip under the name, not on the photo. */
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-price:has(.kit-out) { grid-area: auto; position: absolute; top: 14px; left: 14px; z-index: 1; }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-out { background: rgba(5, 7, 11, 0.75); }
  body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-card:has(.kit-price s)::after {
    content: 'SALE'; position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center; height: var(--d-h-badge); padding: 0 12px;
    border: 1px solid rgba(216, 255, 58, 0.55); border-radius: var(--d-r-round); background: rgba(5, 7, 11, 0.75);
    color: var(--volt); font-family: var(--font-body); font-size: var(--d-t-label); font-weight: 600; letter-spacing: 0.16em;
  }
  @media (hover: hover) and (pointer: fine) {
    body:has(.runner-bottomnav) :is(.kit-grid, #panelClub .kit-row) .kit-card:hover .kit-photo { border-color: rgba(216, 255, 58, 0.5); }
  }
  /* One item: the photos left in the same frame, the rest right. */
  body:has(.runner-bottomnav) main .card.kit-item {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--d-s6); align-items: start;
    background: none; border: 0; padding: 0;
  }
  body:has(.runner-bottomnav) .kit-item > .kit-shots { grid-column: 1; grid-row: 1 / span 12; margin: 0; }
  body:has(.runner-bottomnav) .kit-item > :not(.kit-shots) { grid-column: 2; }
  body:has(.runner-bottomnav) .kit-item .kit-shots img { aspect-ratio: 4 / 5; object-position: 50% 40%; border: 1px solid var(--line); border-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .kit-item .kit-price-big { font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-fig); letter-spacing: 0.02em; }
  body:has(.runner-bottomnav) .kit-item .kit-desc { font-size: var(--d-t-body); }
  body:has(.runner-bottomnav) .kit-item .kit-sizes { gap: var(--d-s1); }
  body:has(.runner-bottomnav) .kit-item .kit-sizes i { color: var(--text); letter-spacing: 0.08em; }
  body:has(.runner-bottomnav) .kit-item .inline-form { text-align: left; }

  /* ── Calendar: each month's runs as rows in one box ── */
  /* In one box the state is in the words, not the outline: a cancelled row
     keeps its red CANCELLED but not a red edge round a row of the box. */
  body:has(.runner-bottomnav) .wrap > details.cal-row { margin: 0; padding: 0 var(--d-s3); border-radius: 0; border-color: var(--line); }
  body:has(.runner-bottomnav) .wrap > details.cal-row + details.cal-row { border-top-width: 0; }
  body:has(.runner-bottomnav) .wrap > details.cal-row:not(details.cal-row + *) { border-top-left-radius: var(--d-r-box); border-top-right-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .wrap > details.cal-row:not(:has(+ details.cal-row)) { border-bottom-left-radius: var(--d-r-box); border-bottom-right-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .wrap > details.cal-row > summary { min-height: var(--d-h-row); }
  body:has(.runner-bottomnav) .wrap > details.cal-row[open] { padding-bottom: var(--d-s3); }
  body:has(.runner-bottomnav) .cal-date { font-size: var(--d-t-fig-sm); }
  body:has(.runner-bottomnav) .wrap > .cal-month { margin: var(--d-s4) 0 12px; }
  body:has(.runner-bottomnav) .wrap > .cal-weekly { margin-bottom: 0; }

  /* ── News ── */
  body:has(.runner-bottomnav) .news-feature { border-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .news-feature:has(.news-feature-img) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  body:has(.runner-bottomnav) .news-feature-body { padding: var(--d-s4); }
  body:has(.runner-bottomnav) .news-feature-title { font-size: var(--d-t-fig); }
  body:has(.runner-bottomnav) .news-article-title { font-size: var(--d-t-title); }
  body:has(.runner-bottomnav) main .news-heart { height: var(--d-h-sm); min-height: auto; padding-top: 0; padding-bottom: 0; border-radius: var(--d-r-round); }

  /* ── The first look, signed out: who this is for and the two ways in ── */
  /* The two ways in sit where a runner's numbers would: the header's right,
     on its rule. */
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > .hello-actions {
    display: flex; gap: 12px; justify-content: flex-end; align-items: flex-end;
    grid-column: 2; grid-row: 1; align-self: stretch;
    padding-bottom: var(--d-s4); margin: 0 0 var(--d-s4); border-bottom: 1px solid var(--line);
  }
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) > .hello-actions .btn { width: auto; }
  /* One Sign in, the top bar's (SpotTap 387de9b, 2026-10-21): the outline
     Sign in beside Join the crew said the same thing twice, as the line
     under it did on a phone. */
  body:has(.runner-bottomnav) .hello-alt { display: none; }

  /* The crew's cover photo as a banner (SpotTap 387de9b, 2026-10-21): edge
     to edge under the top bar, the title and Join the crew on its faded
     foot. Only a cover: a run's photo already holds half its card here. The
     banner spans the header's two rows and the title and Join the crew sit
     in the second, so they land on its foot whatever their height; the
     photo is the banner's height and the box a step taller (its bottom
     padding, outside the height), the step being the space before the day. */
  body:has(.runner-bottomnav):has(#panelRun > .visit-hero.is-cover) { overflow-x: clip; }
  body:has(.runner-bottomnav) #panelRun > .visit-hero.is-cover {
    display: block; position: relative; grid-column: 1 / -1; grid-row: 1 / span 2;
    box-sizing: content-box; width: 100vw; height: var(--d-h-banner); padding-bottom: var(--d-s5);
    margin: calc(-1 * var(--d-s6)) 0 0 calc(50% - 50vw);
  }
  body:has(.runner-bottomnav) #panelRun > .visit-hero.is-cover img { position: absolute; top: 0; left: 0; width: 100%; height: var(--d-h-banner); object-fit: cover; }
  body:has(.runner-bottomnav) #panelRun > .visit-hero.is-cover::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--d-h-banner);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 15%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--bg) 55%, transparent) 70%, var(--bg) 100%);
  }
  body:has(.runner-bottomnav) #panelRun > .visit-hello.has-cover,
  body:has(.runner-bottomnav) #panelRun > .visit-hero.is-cover ~ .hello-actions {
    grid-row: 2; position: relative; z-index: 1; align-self: end;
    border: 0; padding: 0; margin: 0 0 calc(var(--d-s5) + var(--d-s4));
  }
  body:has(.runner-bottomnav) #panelRun > .visit-hello.has-cover { grid-column: 1; }
  body:has(.runner-bottomnav) #panelRun > .visit-hero.is-cover ~ .hello-actions { grid-column: 2; }
  body:has(.runner-bottomnav) #panelRun > .visit-hello.has-cover h1 { font-size: var(--d-t-fig-xl); line-height: 0.92; }
  body:has(.runner-bottomnav) #panelRun .visit-hello.has-cover h1 .script-accent { color: var(--volt); }
  /* The welcome's title reads as one title: the script word is a phone's. */
  body:has(.runner-bottomnav) :is(#panelRun, #panelVol) .visit-hello h1 .script-accent {
    display: inline; margin: 0; transform: none;
    font-family: var(--font-display); font-size: 1em; font-weight: 400; color: var(--text);
    text-transform: uppercase; letter-spacing: inherit;
  }
  /* Sign in or Sign up as the box's heading, not a kicker (SpotTap af2159c). */
  body:has(.runner-bottomnav) main #authPanel .auth-kicker { font-size: var(--d-t-fig); letter-spacing: 0.01em; margin: 0 0 var(--d-s3); }
  /* The sheet's × (2026-10-21): a desktop's only, since here the sheet is a
     popup over the page; a phone's is a page of its own, with the bar for a
     way back. The app's sheet close, top right, and the heading keeps clear
     of it. */
  body:has(.runner-bottomnav) #authPanel .auth-x {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: var(--d-s2); right: var(--d-s2); width: var(--d-h); height: var(--d-h);
  }
  body:has(.runner-bottomnav) #authPanel .auth-head { padding-right: var(--d-s6); }
  /* Profile's × (SpotTap N61): level with its small heading, as
     Notifications' is (style.css), a float that takes no room. */
  body:has(.runner-bottomnav) #authPanel > .auth-x:has(+ .card-kicker) { position: static; float: right; margin: -14px -14px -28px 0; }
  /* Two fields a row: a label that wraps (EMERGENCY CONTACT · SURNAME) no
     longer pushes its box below its neighbour's; the boxes line up. */
  body:has(.runner-bottomnav) main #authPanel .field-row { align-items: end; }
  /* Sign up and sign in open in the middle of the page, over a dimmed one:
     a nine-field form is not a dropdown. Profile stays one. */
  body:has(.runner-bottomnav) #authPanel:has(input[name="mode"]) {
    top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
    width: 600px; max-height: calc(100vh - 64px);
    padding: var(--d-s4) var(--d-s5);
    box-shadow: 0 0 0 100vmax rgba(5, 7, 11, 0.72), 0 24px 60px rgba(0, 0, 0, 0.55);
  }
  /* The phone's nudge to add the app to a home screen: a desktop has no home
     screen to add it to. Profile keeps the Home screen row for anyone who
     wants it. */
  body:has(.runner-bottomnav) .install-strip { display: none; }

  /* ── A visitor's page: the next run, last time out, the join panel ── */
  /* No run open: the next run as the one big thing, its photo beside it. */
  body:has(.runner-bottomnav) main .card.visit-next:has(.run-photo) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: 0; overflow: hidden; }
  body:has(.runner-bottomnav) .visit-next .run-photo { max-width: none; width: 100%; height: 100%; min-height: var(--d-h-feature); aspect-ratio: auto; object-fit: cover; margin: 0; border-radius: 0; }
  body:has(.runner-bottomnav) .visit-next-body { padding: var(--d-s4); display: flex; flex-direction: column; justify-content: center; }
  body:has(.runner-bottomnav) .visit-next .next-run-title { font-size: var(--d-t-card); }
  body:has(.runner-bottomnav) .visit-when { font-size: var(--d-t-label); margin-bottom: var(--d-s1); }
  body:has(.runner-bottomnav) .visit-where { font-size: var(--d-t-nav); }
  body:has(.runner-bottomnav) .visit-dist { font-size: var(--d-t-small); }
  /* Last time out: a section title, the run and its day, the photos in a row. */
  body:has(.runner-bottomnav) .visit-last { margin-top: var(--d-s5); }
  body:has(.runner-bottomnav) .visit-last > .card-kicker { margin: 0; font-size: var(--d-t-sec); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
  body:has(.runner-bottomnav) .visit-last-title { display: inline; font-weight: 400; font-size: var(--d-t-nav); color: var(--muted); }
  body:has(.runner-bottomnav) .visit-last-when { display: inline; font-size: var(--d-t-nav); }
  body:has(.runner-bottomnav) .visit-last-when::before { content: ' · '; }
  /* With its run's card photo (SpotTap 387de9b): the photo wide, the name
     and day on its foot in the display face, not the line of words above. */
  body:has(.runner-bottomnav) .visit-last-photo { height: var(--d-h-feature); margin-top: var(--d-s2); border-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .visit-last-photo + .night-gallery { margin-top: var(--d-s2); }
  body:has(.runner-bottomnav) .vlp-cap { left: var(--d-s3); right: var(--d-s3); bottom: var(--d-s3); }
  body:has(.runner-bottomnav) .vlp-cap .visit-last-title { display: block; font-family: var(--font-display); font-size: var(--d-t-card); color: var(--text); }
  body:has(.runner-bottomnav) .vlp-cap .visit-last-when { display: block; margin-top: var(--d-s1); font-size: var(--d-t-nav); color: var(--text); }
  body:has(.runner-bottomnav) .vlp-cap .visit-last-when::before { content: none; }
  body:has(.runner-bottomnav) .visit-last .gal-grid { gap: var(--d-s2); }
  body:has(.runner-bottomnav) .visit-last .gal-thumb, body:has(.runner-bottomnav) .visit-last .gal-thumb img { aspect-ratio: 4 / 3; border-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .visit-last .gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
  /* Joining with a distance picked: what it checks them in to, first. */
  body:has(.runner-bottomnav) .pick-kicker { font-size: var(--d-t-label); }

  /* ── Check in, the rest of its states ── */
  body:has(.runner-bottomnav) #panelRun > .form-note { text-align: left; margin: 0 0 var(--d-s2); }
  body:has(.runner-bottomnav) #panelRun .next-run .run-photo { margin: 0 auto var(--d-s2); }
  body:has(.runner-bottomnav) #panelRun .next-run .next-run-title { font-size: var(--d-t-card); }
  /* A cancelled run, as one row: the badge, the run and its day, the share. */
  body:has(.runner-bottomnav) #panelRun > .cancel-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k title share" "k sub share";
    align-items: center; column-gap: var(--d-s3); row-gap: 2px;
    padding: var(--d-s2) var(--d-s6) var(--d-s2) var(--d-s3);
  }
  /* Its CANCELLED label is a red badge, set here on its own (see the badge
     rule's note on ids). */
  body:has(.runner-bottomnav) #panelRun > .cancel-card > .card-kicker {
    grid-area: k; display: inline-flex; align-items: center; height: var(--d-h-badge); margin: 0; padding: 0 12px;
    border: 1px solid rgba(255, 77, 77, 0.6); border-radius: var(--d-r-round);
    color: #FF8A8A; font-size: var(--d-t-label); font-weight: 600; letter-spacing: 0.16em;
  }
  body:has(.runner-bottomnav) #panelRun > .cancel-card > .next-run-title { grid-area: title; margin: 0; font-size: var(--d-t-fig-sm); }
  body:has(.runner-bottomnav) #panelRun > .cancel-card > .sub { grid-area: sub; margin: 0; font-size: var(--d-t-small); }
  body:has(.runner-bottomnav) #panelRun > .cancel-card > .form-note { display: none; }
  body:has(.runner-bottomnav) #panelRun > .cancel-card > .share-btn { grid-area: share; }
  /* Polls waiting, as rows in one box like the runs: the question, when it
     closes, and Answer. */
  body:has(.runner-bottomnav) #panelRun > a.poll-strip {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title meta go";
    align-items: center; column-gap: var(--d-s3); min-height: var(--d-h-row);
    margin: 0; padding: 0 var(--d-s3); border-radius: 0; border-color: var(--line);
  }
  body:has(.runner-bottomnav) #panelRun > a.poll-strip + a.poll-strip { border-top-width: 0; }
  body:has(.runner-bottomnav) #panelRun > a.poll-strip:not(a.poll-strip + *) { margin-top: var(--d-s4); border-top-left-radius: var(--d-r-box); border-top-right-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) #panelRun > a.poll-strip:not(:has(+ a.poll-strip)) { border-bottom-left-radius: var(--d-r-box); border-bottom-right-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) #panelRun > a.poll-strip .poll-strip-title { grid-area: title; font-size: var(--d-t-body); }
  body:has(.runner-bottomnav) #panelRun > a.poll-strip .card-kicker { grid-area: meta; margin: 0; }
  body:has(.runner-bottomnav) #panelRun > a.poll-strip .poll-strip-go {
    grid-area: go; display: inline-flex; align-items: center; height: var(--d-h-sm); padding: 0 var(--d-s2);
    border: 1px solid rgba(216, 255, 58, 0.45); border-radius: var(--d-r-round); font-size: var(--d-t-small); font-weight: 600;
  }
  body:has(.runner-bottomnav) main .voucher-line { border-radius: var(--d-r-inner); }

  /* ── Aid station: the runs to crew, as rows like Check in's ── */
  body:has(.runner-bottomnav) #panelVol > .card-kicker:has(+ .day-head) { display: none; }
  body:has(.runner-bottomnav) #panelVol > details.vol-event > summary > :is(b, .sum-line) { display: none; }
  body:has(.runner-bottomnav) #panelVol .vol-desk {
    flex: 1 1 auto; display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px 110px 150px;
    align-items: center; column-gap: var(--d-s2); min-height: var(--d-h-row);
  }
  body:has(.runner-bottomnav) #panelVol .vol-desk > span { color: var(--text); font-size: var(--d-t-body); }
  body:has(.runner-bottomnav) #panelVol .vol-desk > .vd-date, body:has(.runner-bottomnav) #panelVol .vol-desk > .sd-time, body:has(.runner-bottomnav) #panelVol .vol-desk > .vd-spots { color: var(--muted); font-size: var(--d-t-nav); font-variant-numeric: tabular-nums; }
  body:has(.runner-bottomnav) #panelVol .vol-desk > .vd-run { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:has(.runner-bottomnav) #panelVol .vol-desk > i { justify-self: end; }
  body:has(.runner-bottomnav) #panelVol > details.vol-event[open] { margin: 0 0 var(--d-s2); padding: 0 var(--d-s3) var(--d-s3); }
  body:has(.runner-bottomnav) #panelVol > details.vol-event[open] > summary { margin: 0 0 var(--d-s2); }
  body:has(.runner-bottomnav) #panelVol > details.vol-event[open] > .run-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--d-s4); }
  body:has(.runner-bottomnav) #panelVol > details.vol-event[open] :is(.form-note, .inline-form) { text-align: left; }

  /* ── Club, when a link lands on it: News, then Kit as the website shop ── */
  body:has(.runner-bottomnav) #panelClub > .card-kicker { margin: var(--d-s4) 0 var(--d-s2); }
  body:has(.runner-bottomnav) #panelClub > .hero-min + .card-kicker { margin-top: 0; }
  body:has(.runner-bottomnav) #panelClub .kit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-s4) 28px; overflow: visible; }

  /* ── Reading pages: a post, a poll, the vouchers ──
     The header every tab has, on the page itself: a label, the title at
     page-title size and the line under it, then a rule. The words stay a
     reading width, and nothing sits in a box it does not need. */
  body:has(.runner-bottomnav) .hero-min:not(:has(h1)) { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--d-s2); }
  body:has(.runner-bottomnav) .hero-min:empty { display: none; }

  /* A post: the header, then the cover the width of the page, then the words. */
  body:has(.runner-bottomnav) main .card.news-article { display: flex; flex-direction: column; background: none; border: 0; border-radius: 0; padding: 0; }
  body:has(.runner-bottomnav) .news-article > .card-kicker { order: 1; margin: 0 0 var(--d-s2); }
  body:has(.runner-bottomnav) .news-article > .news-article-title { order: 2; margin: 0; max-width: 900px; font-size: var(--d-t-title); line-height: 1.05; }
  body:has(.runner-bottomnav) .news-article > .news-article-sum { order: 3; margin: 10px 0 0; max-width: 680px; font-size: var(--d-t-name); }
  body:has(.runner-bottomnav) .news-article > .news-article-sum, body:has(.runner-bottomnav) .news-article:not(:has(> .news-article-sum)) > .news-article-title { padding-bottom: var(--d-s4); border-bottom: 1px solid var(--line); }
  body:has(.runner-bottomnav) .news-article > .news-article-img { order: 4; margin: var(--d-s4) 0 0; aspect-ratio: 21 / 9; border-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .news-article > .news-body { order: 5; margin-top: var(--d-s4); max-width: 680px; font-size: var(--d-t-name); line-height: 1.75; }
  body:has(.runner-bottomnav) .news-article .news-body h2 { font-size: var(--d-t-fig-sm); }
  body:has(.runner-bottomnav) .news-article > .news-article-actions { order: 6; max-width: 680px; margin-top: var(--d-s4); }
  /* The run a post is about closes the header, so the rule moves under it.
     Its photos, or the way to a run still ahead, follow the words in their
     column. */
  body:has(.runner-bottomnav) .news-article > .news-run-line { order: 3; margin: var(--d-s2) 0 0; padding-bottom: var(--d-s4); border-bottom: 1px solid var(--line); }
  body:has(.runner-bottomnav) .news-article:has(> .news-run-line) > :is(.news-article-sum, .news-article-title) { padding-bottom: 0; border-bottom: 0; }
  body:has(.runner-bottomnav) .news-article > :is(.news-photos, .news-run) { order: 5; width: 100%; max-width: 680px; margin-top: var(--d-s4); }

  /* A poll: the header, then the questions at a reading width, each one's
     answers as rows in one box. */
  body:has(.runner-bottomnav) main .card.poll-card { background: none; border: 0; border-radius: 0; padding: 0; }
  body:has(.runner-bottomnav) .poll-card > .card-kicker, body:has(.runner-bottomnav) .voucher-page:not(.voucher-shown) > .card-kicker { margin: 0 0 var(--d-s2); }
  body:has(.runner-bottomnav) .poll-card > .poll-title, body:has(.runner-bottomnav) .voucher-page:not(.voucher-shown) > .poll-title { margin: 0; font-size: var(--d-t-title); line-height: 1.05; }
  body:has(.runner-bottomnav) .poll-card > .poll-intro { margin: 10px 0 0; max-width: 680px; font-size: var(--d-t-name); }
  body:has(.runner-bottomnav) .poll-card > .poll-intro, body:has(.runner-bottomnav) .poll-card:not(:has(> .poll-intro)) > .poll-title, body:has(.runner-bottomnav) .voucher-page:not(.voucher-shown) > .poll-title {
    padding-bottom: var(--d-s4); border-bottom: 1px solid var(--line); margin-bottom: var(--d-s4);
  }
  body:has(.runner-bottomnav) .poll-card > :not(.card-kicker):not(.poll-title):not(.poll-intro) { max-width: 680px; }
  body:has(.runner-bottomnav) .poll-field { margin: 0 0 var(--d-s4); }
  body:has(.runner-bottomnav) .poll-q { font-size: var(--d-t-sec); }
  body:has(.runner-bottomnav) .poll-hint { font-size: var(--d-t-small); }
  body:has(.runner-bottomnav) .poll-options { gap: 0; border: 1px solid var(--line); border-radius: var(--d-r-box); overflow: hidden; background: var(--surface); }
  body:has(.runner-bottomnav) .poll-option { min-height: var(--d-h-row); padding: 0 var(--d-s3); border: 0; border-radius: 0; background: none; font-size: var(--d-t-body); }
  body:has(.runner-bottomnav) .poll-option + .poll-option { border-top: 1px solid var(--line); }
  body:has(.runner-bottomnav) .poll-option:has(input:checked) { background: rgba(216, 255, 58, 0.06); }
  @media (hover: hover) and (pointer: fine) {
    body:has(.runner-bottomnav) .poll-option:not(:has(input:checked)):hover { background: rgba(255, 255, 255, 0.03); }
  }
  body:has(.runner-bottomnav) .poll-field textarea { border-radius: var(--d-r-inner); }
  body:has(.runner-bottomnav) .poll-field.is-missing .poll-options { border-radius: var(--d-r-box); }
  body:has(.runner-bottomnav) .poll-field.is-missing textarea { border-radius: var(--d-r-inner); }
  body:has(.runner-bottomnav) .poll-bar { min-height: var(--d-h); align-items: center; border-radius: var(--d-r-inner); font-size: var(--d-t-body); }

  /* The vouchers: the header, then the vouchers two across. */
  body:has(.runner-bottomnav) main .card.voucher-page:not(.voucher-shown) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-s2);
    background: none; border: 0; border-radius: 0; padding: 0;
  }
  body:has(.runner-bottomnav) .voucher-page:not(.voucher-shown) > :not(.voucher-card) { grid-column: 1 / -1; }
  body:has(.runner-bottomnav) .voucher-page:not(.voucher-shown) > .poll-title { margin-bottom: var(--d-s2); }
  body:has(.runner-bottomnav) .voucher-page .voucher-card { margin: 0; padding: var(--d-s3); border-radius: var(--d-r-box); background: var(--surface); }
  body:has(.runner-bottomnav) .voucher-page .voucher-what { margin-top: 12px; font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-card); line-height: 1.1; }
  body:has(.runner-bottomnav) .voucher-page .voucher-meta { font-size: var(--d-t-small); }
  body:has(.runner-bottomnav) .voucher-page .row-actions { margin-top: var(--d-s3); }
  body:has(.runner-bottomnav) .voucher-page .row-actions .btn { height: var(--d-h); padding: 0 var(--d-s3); font-size: var(--d-t-nav); }

  /* The code, the one screen shown across a counter: in the middle, the
     code at the biggest figure size, in a frame like the bib's. */
  body:has(.runner-bottomnav) main .card.voucher-shown {
    max-width: 520px; margin: var(--d-s4) auto 0; padding: var(--d-s5) var(--d-s4);
    border: 1.5px dashed rgba(216, 255, 58, 0.6); border-radius: var(--d-r-box); text-align: center;
  }
  body:has(.runner-bottomnav) .voucher-shown .voucher-what { font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-card); line-height: 1.1; }
  body:has(.runner-bottomnav) .voucher-shown .voucher-code { font-family: var(--font-display); font-weight: 400; font-size: var(--d-t-fig-xl); line-height: 1; letter-spacing: 0.06em; padding: var(--d-s3) 0; }
  body:has(.runner-bottomnav) .voucher-shown .voucher-meta { font-size: var(--d-t-small); }
  body:has(.runner-bottomnav) .voucher-shown .btn { display: flex; width: fit-content; margin: var(--d-s3) auto 0; }

  /* ── Profile and Notifications drop down from their item in the bar ── */
  body:has(.runner-bottomnav) #authPanel, body:has(.runner-bottomnav) #bellPanel {
    position: fixed; top: 76px; right: var(--d-s5); z-index: 60;
    width: 420px; max-height: calc(100vh - 96px); overflow: auto;
    margin: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}