:root {
      --ink:       #1a0e08;
      --paper:     #faf5e8;
      --paper2:    #f0e8d0;
      --parchment: #f4edd8;
      /* ⚠ TEXT COLOURS, NOT ONLY ACCENTS: each is used for small text on
         paper and felt, and was darkened just enough to reach 4.5:1 there
         (the contrast pass, 2026-09-28). Lighten one and re-measure. */
      --gold:      #805a0e;
      --gold2:     #8f6815;
      --gold3:     #6a4808;
      --rule:      #d0bfa0;
      --muted:     #6f5e48;
      --cut:       #956015;
      --red:       #b82828;
      --birdie:    #1a7040;

      --felt:      #ede3cc;
      --felt2:     #e5d8b8;
      --fairway:   #1a7040;

      --text-1: 0.5rem; --text-2: 0.6rem; --text-3: 0.71rem; --text-4: 0.85rem;
      --text-5: 1.02rem; --text-6: 1.21rem; --text-7: 1.45rem; --text-8: 1.7rem; --text-9: 1.7rem; --text-10: 1.7rem;

      --space-1: 4px; --space-2: 8px; --space-3: 16px;
      --space-4: 24px; --space-5: 40px; --space-6: 64px;
      --radius: 10px;
      --radius-gold: 6px;   /* gold buttons, and the ad's button */
      --edge: 5px;

      /* With the mark gone from the band the selector has the whole width to
         itself, so it is set a step larger to take it. */
      --gname-size: var(--text-6);
      --band-h: 72px;
      --mast-h: 117px;

      /* The lower third. --bar-clear is what the page keeps free at its foot:
         the banner's own height plus the lift, so the FOOTER (privacy, terms,
         the credit) comes to rest below it rather than under it. */
      --bar-inset: 12px;
      --bar-lift: 22px;
      --lt-corner: 7px;
      --bar-clear: 114px;
    }
    @media (min-width: 720px) {
      :root { --edge: 24px; --gname-size: var(--text-6); --band-h: 85px; --mast-h: 128px; }
    }
    /* Treat wide, short landscape phones as mobile. */
    @media (orientation: landscape) and (max-height: 500px) {
      :root { --edge: 5px; --band-h: 72px; --mast-h: 117px; }
    }

    :root {
      --you: #6789c5;

      /* THE ALERT (ADR 0028's "you must still do something" tier), restyled
         2026-09-30 by James from the walk's name note: the GRP column's
         yellow for the edge, a faded wash of it behind, and the darkest gold
         for the words. --amber-bg-solid is the same wash laid on --paper,
         for alerts that float over the tiled wallpaper. Information notes
         (.board-note--aside) keep the older amber-brown. */
      --amber-edge: #E8C425;
      --amber-bg: rgba(232,196,37,0.14);
      --amber-bg-solid: #f8eecd;
      --amber-rule: rgba(232,196,37,0.45);
      --amber-ink: #6a4808;

      /* Match the opaque logo asset's baked-in ground to avoid a seam. */
      --logo-ground: #050e1a;

      --stroke: var(--you);

      /* Named colours that were literals in the rules below (the tidy series,
         2026-10). Same values as before, so nothing on screen moved. */
      --medal-silver: #8a9aaa;
      --medal-bronze: #8a5d3e;  --medal-bronze-ink: #f0e8e0;
      --navy: #2a4a72;          --navy-deep: #213d60;   /* medal 4 and 5, and Track M8s' second line */
      --medal-4-ink: #a0bcd8;   --medal-5-ink: #8aadcc;
      --status-red: #a65350;    /* "unavailable" in the status dot and its message */
      --down-red: #c83c3c;      /* a place lost on the leaderboard, and the stale dot */
      --cut-name: #584b3a;      /* a golfer not playing, on the leaderboard */
      --success-ink: #1a5a35;   --success-wash: #d8eee0;  /* the walk's green header and success notes */
      --accordion-ink: #5d5748; --accordion-ink-faint: #6b6552;  /* the walk's accordion greys */
      /* Track M8s' three lines. The page's script reads these, so the chart and
         the select's coloured edge cannot drift apart. */
      --series-gold: #8a6010;   --series-gold-hover: var(--gold3);
      --series-navy: var(--navy); --series-navy-hover: var(--navy-deep);
      --series-green: var(--birdie); --series-green-hover: #14532a;
      --series-point-edge: var(--paper);
    }

    body.is-signed-out { --stroke: var(--rule); }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* The masthead's <header> (base.html) is a landmark, not a box: the bands
       inside it keep laying out against the page exactly as they did. */
    .masthead { display: contents; }
    html { scroll-behavior: smooth; }
    /* Except the Payments landing: it must arrive with the summary pinned at the top, not glide
       there from the top of the page (photographed mid-glide as a band of blank cream). */
    html:has(#member-tools:target) { scroll-behavior: auto; }

    body {
      font-family: 'Crimson Text', Georgia, serif;
      background: var(--parchment);
      color: var(--ink);
      min-height: 100vh;
    }

    /* ── The gutter paper ──────────────────────────────────────────────────
       Content is capped at 1140px, which at desktop widths left a wide margin
       of flat parchment either side and gave the page no edge at all.

       The tile carries its own strength: the linework is already flattened
       against --parchment at 35% in the file itself. That is why this is a
       plain background-image and not an overlay — it needs no stacking
       context, so there is no z-index for a future rule to lose a fight with.
       To restyle its strength, re-bake the tile rather than reaching for
       opacity here.

       Every content column already paints an opaque background of its own, so
       the tile only ever shows in the gutters. Below 768px the columns go
       full-bleed and would cover it completely, so the media query keeps
       phones from downloading 88KB they will never see. ────────── */
    @media (min-width: 768px) {
      body {
        background-image: var(--img-blackberries, url('../img/blackberries-bg.webp'));
        background-size: 680px;
        background-attachment: fixed;
      }

      /* The reading surface is one sheet of paper laid on the tile, and the
         tile is the wall it hangs on.

         header and main are siblings, not nested, so the sheet has to be built
         from both: section.site-header was a full-bleed slab of --parchment,
         which cut a hard horizontal edge across the page wherever it ended and
         the tile began. Capping it to the same 1140px column as main and
         giving it the same --paper closes that edge — the two boxes sit flush
         and read as one continuous sheet.

         --paper rather than --parchment because the tile's own ground IS
         --parchment: matching it would camouflage the column into the wall,
         and one shade lighter lifts it off instead.

         No box-shadow, deliberately. Two stacked flush boxes each casting one
         would draw exactly the seam this is meant to remove; the hairline does
         the job without a stacking order to get wrong.

         The home page neutralises main and paints .home-redesign's opaque
         ground over the whole thing, so it is unaffected by any of this. */
      main {
        background: var(--paper);
        border: 1px solid rgba(160,140,100,.28);
        border-radius: var(--radius);
      }
      /* The sheet starts below the masthead rather than flush against it, so
         the tile shows above it and the top corners have something to round
         away from.

         Both selectors here are specificity-bumped for the same reason: the
         rules they are overriding (main's 720px sizing, and site-header's own
         --parchment ground) sit LATER in this file at equal specificity, so a
         bare `main` or `section.site-header` would silently lose. Prefixing
         with `body` wins without reordering or editing those rules. Leave the
         prefixes in place — without them the two halves of the sheet drift to
         different creams and the seam this is meant to close comes back. */
      body main { margin-top: 22px; }
      body section.site-header {
        background: var(--paper);
        max-width: 1140px;
        margin: 22px auto 0;
        border: 1px solid rgba(160,140,100,.28);
        border-bottom: 0;
        border-radius: var(--radius) var(--radius) 0 0;
      }
      /* Only when the header actually rendered. It is gated on a tournament
         being in scope, so on a page without one (privacy, how-to-play) main
         is alone and keeps all four of its own corners. */
      section.site-header + main {
        margin-top: 0;
        border-top: 0;
        border-radius: 0 0 10px 10px;
      }
      /* Home opts out of the sheet entirely. It widens main to the full
         viewport and paints .home-redesign's own ground inside it, so the
         background and radius are invisible there — but the hairline is not,
         and at that width it lands hard on the screen edges. */
      body.page-home main {
        position:relative;
        background: none;
        border: 0;
        border-radius: 0;
      }
    }

    .metal {
      --metal-ground: var(--logo-ground);
      --metal-letter: #c8a96e;
      --metal-quiet:  rgba(200,169,110,0.55);

      --metal-frame:  rgba(200,169,110,0.42);
    }

    .gband {
      background: var(--metal-ground);
      width: 100%;
      position: relative;
      overflow: hidden;
    }
    .gband-inner {
      width: 100%;
      max-width: 1140px;
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      height: var(--band-h);
      min-height: var(--band-h);
      position: relative;
      z-index: 1;
    }

    /* The switch is the whole naming half: everything from the far left to the
       avatar tab. Its left padding is the inset the mark used to provide. */
    .gband-switch {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;

      background: none;
      border: 0;
      font: inherit;
      text-align: left;
      cursor: pointer;
      padding: 0 var(--space-2) 0 14px;
    }
    .gband-switch--static { cursor: default; }

    .board-notes {
      background: var(--parchment);
    }
    .board-note {
      /* A fixed 3px, not var(--edge): that is the page gutter, 24px from
         720px, and it made every note inside main a thick slab on desktop. */
      border-left: 3px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      color: var(--ink);
      font-family: 'Crimson Text', serif;
      font-size: var(--text-4);
      line-height: 1.45;
      padding: 0.55rem var(--space-3);
      /* Slice 5b: 3px corners everywhere, and the text starts 23px from the
         outer left edge (3px edge + 20px padding) in every banner. */
      border-radius: 3px;
      padding-left: 20px;
    }

    .board-note--alarm {
      --note-edge: rgba(184,40,40,0.30);
      background: rgba(184,40,40,0.08);
      border-left-color: var(--red);
      border-bottom-color: var(--note-edge);
      border-top: 1px solid var(--note-edge);
      border-right: 1px solid var(--note-edge);
      color: var(--red);
      max-width: 1140px;
      margin: 0.75rem auto 0;
      padding: 0.7rem calc(0.65rem + 1px) 0.8rem;
    }
    @media (min-width: 720px) {
      .board-note--alarm {
        padding-left: calc(1.1rem + 1px);
        padding-right: calc(1.1rem + 1px);
      }
    }
    @media (max-width: 480px) {
      .board-note--alarm { padding-left: calc(0.5rem + 1px); }
    }

    .board-note--grow {

      --note-edge: rgba(26,112,64,0.30);
      background: rgba(26,112,64,0.07);
      border-left-color: var(--birdie);
      border-bottom-color: var(--note-edge);
    }

    /* INFORMATION, in the brown (James, 2026-09-30): the Introduction and
       the board's other asides keep the original amber-brown. The yellow
       --amber-* style is for ALERTS only, the things a player must still
       do: the amber flash and the walk's hints. */
    .board-note--aside {
      background: rgba(138,96,16,0.06);
      border-left-color: var(--gold);
      border-bottom-color: rgba(138,96,16,0.28);
    }
    /* The board's link: gold with a dotted rule. Also the links on My account
       (.gold-link), How it works (.guide-back) and the Terms and Privacy copy
       (.doc-copy a), which were the browser's blue. */
    .board-note a,
    .gold-link,
    .guide-back,
    .doc-copy a {
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px dotted var(--gold);
    }
    .board-note a:hover,
    .board-note a:focus-visible,
    .gold-link:hover,
    .gold-link:focus-visible,
    .guide-back:hover,
    .guide-back:focus-visible,
    .doc-copy a:hover,
    .doc-copy a:focus-visible { border-bottom-style: solid; }

    /* ── Board notices ──────────────────────────────────
       Same box as a flash, because a notice is the same kind of thing: one
       short statement about the state of your board. The flash palette is
       reused verbatim (#f6dada / #f7e9c9 / #d8eee0, the opaque grounds
       .page-board already gives its flashes) so the two read as one family
       rather than two parallel notice systems.

       Three things change from the full-bleed original, all of them spacing:

       1. The column. Left full-bleed between the full-bleed plaque and the
          capped header/main sheet, a notice cut the same hard horizontal edge
          across the tile that capping the header was meant to close. 1140px
          and 22px of air above matches the sheet below exactly.
       2. The left rule drops from var(--edge) to the flash's 3px. A 24px slab
          was sized for a full-bleed strip; at column width it reads as an
          unexplained block, and nothing else on the page carries an edge that
          heavy.
       3. Opaque grounds. The tinted originals let the wallpaper through the
          text once there was a tile behind them.

       ⚠ Scoped to `.board-notes >` throughout, NEVER to `.board-note`. The
       aside and grow variants are also used inside main — table.html's invite
       strip, share band and field-not-confirmed card — where the column is
       already capped and this treatment would inset them a second time.

       This block must stay AFTER .board-notes' own --parchment ground and the
       variant rules above, which it overrides. ────────────────────── */
    /* Same column as a board's flash messages: inset by the page edge, capped at 1140px. */
    .board-notes {
      margin: 0.75rem auto;
      width: calc(100% - 2 * var(--edge));
      max-width: 1140px;
    }
    .board-notes > .board-note {
      border-left-width: 3px;
      border-bottom: 0;
      border-radius: 3px;
      padding: 0.9rem 1.25rem;
      position: relative;
    }
    /* One rule owns the vertical rhythm, so a variant cannot quietly set its
       own gap and break the stack. */
    .board-notes > .board-note + .board-note { margin-top: 0.75rem; }
    .board-notes > .board-note--aside { background: #f7e9c9; }
    .board-notes > .board-note--grow  { background: var(--success-wash); }
    .board-notes > .board-note--alarm {
      background: #f6dada;
      border: 0;
      border-left: 3px solid var(--red);
      border-radius: 3px;
      color: #922020;
      max-width: none;
      margin: 0;
      padding: 0.9rem 1.25rem;
    }

    /* The fee sentence, the payment choice and the button are three steps, not
       one run-on line. */
    .board-notes .board-note form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem 0.9rem;
    }
    .board-notes .board-note form > span { flex: 1 0 100%; }
    .board-notes .board-note-fee { color: var(--muted); }

    @media (min-width: 768px) {
      .board-notes {
        background: none;
        max-width: 1140px;
        /* The bottom margin collapses against the sheet's own 22px top margin
           rather than adding to it, so this number is the gap. */
        margin: 30px auto 30px;
      }
      .board-notes > .board-note + .board-note { margin-top: 1rem; }
    }

    /* ── Compact buttons inside board notices and flashes ───────────────────
       Slice 5b: the home page's gold button (body.page-home .home-btn,
       below), made compact for a banner -- 28px to look at, with an
       invisible 44px tap area (the ::before). DM Sans, loaded in <head>
       above. The ghost partner is a NEW light variant: the home hero's cream
       ghost is illegible on a pale note (1.1:1) -- see
       design/banner-inventory.html section 6. Scoped to notices/flashes
       only: the site-wide black .btn on forms and admin pages is out of
       scope for this slice. ── */
    .hb {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0.3rem 0.7rem;
      border-radius: 5px;
      font: 600 0.76rem/1 'DM Sans', sans-serif;
      text-decoration: none;
      cursor: pointer;
      border: 0;
      transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
    }
    .hb::before { content: ''; position: absolute; inset: -8px 0; }
    .hb:hover { transform: translateY(-1px); }
    .hb-gold {
      color: #0a1626;
      background: linear-gradient(#d4b887, #c4a574 48%, #a89060);
      box-shadow: 0 2px 8px rgba(138,96,16,0.2);
    }
    .hb-gold:hover { box-shadow: 0 4px 12px rgba(138,96,16,0.28); }
    .hb-ghost-light {
      color: #0a1626;
      background: rgba(255,255,255,0.35);
      border: 1px solid #8b7355;
    }
    .hb-ghost-light:hover { background: rgba(255,255,255,0.6); }
    /* .board-note a styles every <a> as a dotted gold link; a button-styled
       link has to win over that. */
    .board-note a.hb-ghost-light,
    .board-note a.hb-ghost-light:hover,
    .board-note a.hb-ghost-light:focus-visible {
      color: #0a1626;
      border: 1px solid #8b7355;
      text-decoration: none;
    }
    .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    /* The row of controls (radios, the swap's two buttons, "Yes, add my
       picks") gets extra air above it and its own baseline, rather than
       wrapping straight under the sentence. */
    .board-note-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem 0.9rem;
      margin-top: 0.85rem;
    }
    .board-notes .board-note form .btn-row { margin-top: 0.85rem; }

    .invite-strip {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }
    .invite-strip span { display: block; }
    .invite-strip span + span { margin-top: var(--space-2); }
    /* The board introduction is three rows (James, 2026-09-26): a heading
       with the ✕ in line with it, top right; the text across the full
       width; then How to play. The ✕ keeps its 44px tap target, pulled
       into the padding so the heading sits close under the top edge and
       the glyph lines up with the heading. */
    .board-introduction-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 18px;
      margin: -3px 0 8px;
    }
    .board-introduction-head .flash-close {
      position: static;
      margin: -14px -14px -13px 0;
    }

    /* The caddie's note (walk, predicted board): a lined paper slip taped
       into the dotted box. One 21px line pitch for the label and the text,
       so every line of writing sits on a ruled line. */
    .caddie-note {
      position: relative;
      margin: 16px 18px 14px;
      padding: 14px 15px 12px;
      background-color: #fffbef;
      background-image: repeating-linear-gradient(
        transparent 0 20px, rgba(59, 74, 134, .13) 20px 21px);
      background-origin: content-box;
      background-clip: padding-box;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 6px 14px -8px rgba(60, 40, 10, .45);
      transform: rotate(.6deg);
      font-family: 'Crimson Text', serif;
      font-size: 15px; /* px: sits on the 21px ruled lines; no scale step is 15px */
      line-height: 21px;
      color: var(--ink);
    }
    .caddie-note::before {
      content: '';
      position: absolute;
      top: -9px;
      left: 50%;
      width: 74px;
      height: 20px;
      margin-left: -37px;
      transform: rotate(-3deg);
      background: rgba(214, 196, 150, .62);
      box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    }
    /* Inside a walk question the question already has its own inset; in a
       board row the cell does. */
    .caddie-note--in-question { margin: 14px 4px 16px; }
    .caddie-note--in-row { margin: 14px 6px 8px; }
    /* Over the first card's golfer list (James, 2026-09-28): a zero-height
       anchor, so the note covers the list rather than pushing it down. */
    .caddie-note-over { position: relative; height: 0; z-index: 4; }
    .caddie-note-over .caddie-note {
      /* Two golfers into the OUT list (21px rows), so the top of it shows. */
      position: absolute; top: calc(7 * 21px + 8px); left: 5%; right: 5%; margin: 0;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 28px -10px rgba(60, 40, 10, .55);
    }
    /* The X shares the label's line, so the note's text keeps the full width. */
    /* Nothing is picked until the note is read and dismissed. */
    .caddie-note-over ~ .sc-walk-out { pointer-events: none; }
    .caddie-note-close {
      position: absolute; top: calc(7 * 21px + 10px); right: calc(5% + 2px); z-index: 1;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      border: 0; background: none; cursor: pointer;
      font: 700 30px/1 'DM Sans', sans-serif;
      color: var(--ink);
      transform: rotate(.6deg);
    }
    .caddie-note-close:hover { color: var(--red); }
    .caddie-note-close:focus-visible { outline: 2px solid var(--gold2); outline-offset: -6px; }
    .caddie-note-label {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: 10px; /* px: same ruled lines; the nearest step, text-2, is 9.6px */
      line-height: 21px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .gswitch-inner {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-width: 0;
    }

    .gname {
      font-family: 'Cinzel', serif;
      font-weight: 500;
      font-size: var(--gname-size);
      letter-spacing: 0.05em;
      line-height: 1.14;
      color: var(--metal-letter);
      text-shadow: 0 1px 0 rgba(0,0,0,0.55);
      min-width: 0;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-wrap: balance;
      text-overflow: clip;
      flex: 1 1 auto;
    }
    .gname--short { font-size: var(--text-7); letter-spacing: 0.06em; }
    .gname--long { font-size: var(--text-5); letter-spacing: 0.01em; }

    .crest-ghost {
      --ghost-size: 1.6;
      --ghost-op: .24;
      --ghost-left: -20px;
      --ghost-right: auto;
      --ghost-maskdir: 90deg;
      --ghost-y: 0px;
      --ghost-fade: 68%;
      position: absolute;
      z-index: 0;
      pointer-events: none;
      top: 50%;
      left: var(--ghost-left);
      right: var(--ghost-right);
      transform: translateY(calc(-50% + var(--ghost-y)));
      height: calc(var(--band-h) * var(--ghost-size));
      width: auto;
      display: grid;
      place-items: center;
      -webkit-mask-image: linear-gradient(var(--ghost-maskdir), #000 0%, #000 34%, rgba(0,0,0,.35) var(--ghost-fade), transparent 100%);
      mask-image: linear-gradient(var(--ghost-maskdir), #000 0%, #000 34%, rgba(0,0,0,.35) var(--ghost-fade), transparent 100%);
    }
    .crest-ghost img {
      height: calc(var(--band-h) * var(--ghost-size));
      width: auto;
      filter: none;
      mix-blend-mode: screen;
      opacity: var(--ghost-op);
    }
    button.gband-switch:hover .gname,
    button.gband-switch:hover .gchev { color: #e0c68c; }
    /* One focus ring for the gilt banner: the group switcher and the lower third. */
    button.gband-switch:focus-visible, .lt-head:focus-visible, .lt-tab:focus-visible { outline: 2px solid var(--metal-letter); outline-offset: -3px; }

    .gchev {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--metal-letter);
      font-size: var(--gname-size);
    }
    .gchev svg { display: block; width: 0.7em; height: 0.42em; }

    .gband-menu {
      flex: 0 0 50px;
      margin-left: var(--space-2);
      align-self: stretch;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1;
      color: var(--metal-letter);
      background: none;
      border: 0;
      cursor: pointer;
    }
    .gband-menu svg { width: 22px; height: 22px; }
    .gband-menu:focus-visible, .lt-item:focus-visible { outline: 2px solid var(--metal-letter); outline-offset: -4px; }

    .plaque-sr {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    .switcher {
      position: fixed;
      inset: 0;
      z-index: 600;
      display: flex;
      flex-direction: column;
    }
    /* Author display rules must not override the hidden attribute. */
    .switcher[hidden] { display: none; }
    .switcher-scrim {
      position: absolute;
      inset: 0;
      background: rgba(5,14,26,0.66);
      animation: switcherFade 180ms ease-out;
    }

    .switcher-panel {
      position: relative;
      background: #02070d;
      border-bottom: 1px solid rgba(200,169,110,0.25);
      padding: var(--space-3) var(--edge) var(--space-4);
      max-height: 82vh;
      overflow-y: auto;
      animation: switcherDrop 200ms ease-out;
    }
    .switcher-inner { max-width: 1140px; margin: 0 auto; }
    .switcher-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-3);
      padding: 0 calc(var(--space-4) + 1px) var(--space-3);
    }

    .switcher-title {
      font-family: 'Space Mono', monospace;
      font-weight: 400;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: rgba(200,169,110,0.75);
    }

    .switcher-head--close { cursor: pointer; }
    .switcher-close {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: rgba(200,169,110,0.75);
      background: none;
      border: 0;
      padding: 0.3rem 0;
      cursor: pointer;
    }
    .switcher-close:hover { color: #c8a96e; }
    .switcher-close:focus-visible { outline: 2px solid #c8a96e; outline-offset: 3px; }
    .switcher-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }

    .gswitch-group {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      min-height: 54px;
      padding: 0.6rem calc(var(--space-4) + 1px);
      color: #c8a96e;
      box-shadow: inset 0 0 0 1px rgba(200,169,110,0.42);
      text-decoration: none;
    }
    a.gswitch-group:hover { box-shadow: inset 0 0 0 1px #c8a96e; }
    a.gswitch-group:focus-visible { outline: 2px solid #c8a96e; outline-offset: 2px; }
    .room-code {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      letter-spacing: 0.18em;
      color: rgba(200,169,110,0.55);
      flex-shrink: 0;
    }
    .gswitch-group-name {
      font-family: 'Cinzel', serif;
      font-weight: 500;
      font-size: var(--text-5);
      letter-spacing: 0.05em;
      text-shadow: 0 1px 0 rgba(0,0,0,0.55);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .gswitch-current-mark {
      flex: 0 0 auto;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-4);
      line-height: 1;
    }

    .gswitch-group-note {
      margin-left: auto;
      flex-shrink: 0;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: rgba(200,169,110,0.55);
    }

    .gswitch-group--dim { opacity: 0.5; }

    @keyframes switcherFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes switcherDrop {
      from { opacity: 0; transform: translateY(-10px); }
      to   { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .switcher-scrim, .switcher-panel { animation: none; }
    }

    @media (min-width: 720px) {

      .switcher-head, .gswitch-group { padding-inline: calc(var(--space-5) + 1px); }
    }

    section.site-header {
      background: var(--parchment);
      padding: var(--space-3) var(--edge);
      position: relative;
      z-index: 100;
    }
    /* ═══ THE LOWER THIRD ═══════════════════════════════════════════════════
       The tournament navigation, fixed to the foot of the viewport. It never
       moves; the board scrolls underneath it.

       NO GROUND OF ITS OWN. The mark and the three links each carry it, so the
       bar is a frame holding parts at two heights rather than one block — that
       step is what a sports lower third looks like and a uniform bar does not.

       The right edge runs off the screen: the bar keeps its width and shifts
       right, so the 12px inset becomes 24px on the left and nothing on the
       right. A strip that leaves frame on one side is why a lower third reads
       as laid OVER the picture rather than placed inside it. */
    .lower-third {
      position: fixed;
      z-index: 400;
      left: 0;
      right: 0;
      max-width: 420px;
      margin: 0 auto;
      padding-left: calc(var(--bar-inset) * 2);
      bottom: calc(var(--bar-lift) + env(safe-area-inset-bottom, 0px));

      display: flex;
      align-items: stretch;
      min-height: 80px;

      /* drop-shadow, not box-shadow: the lit shape is the union of the
         children, and this element's own rectangle is transparent. Both
         offsets exceed their blurs, or the blur spills back over the top edge
         and puts a grey halo above the banner. */
      filter:
        drop-shadow(0 8px 7px rgba(5,14,26,0.42))
        drop-shadow(0 3px 3px rgba(5,14,26,0.3));

      transition: transform 450ms cubic-bezier(.4,0,.2,1);
    }

    /* Tucked during the entry walk (table.html's setWalkChrome sets
       body.walk-active; body.lt-peek is the tab's own toggle, cleared
       whenever the walk opens or ends). --lt-tuck is measured in base.html's
       inline script from the real box geometry — the viewport's right edge
       minus the mark's left edge — never guessed as a bare "100%", which
       would either send the tab off-frame or leave the bar's padded edge
       peeking out past it depending on which edge "100%" ended up meaning.
       The 250ms delay is on tuck only: the row opens first, then the bar
       visibly slides away. Peeking back in has no delay. */
    body.walk-active:not(.lt-peek) .lower-third {
      transform: translateX(var(--lt-tuck, 0px));
      transition: transform 450ms cubic-bezier(.4,0,.2,1) 250ms;
    }

    /* The tucked links go visibility:hidden, but only after the slide has
       actually finished (delay 250ms + duration 450ms), so keyboard and
       screen-reader users can't tab into a link that is still visibly
       sliding, let alone one already off-frame. The tab itself is a
       sibling, never affected by this rule, so it stays focusable
       throughout. */
    body.walk-active:not(.lt-peek) .lt-item {
      transition: visibility 0ms linear 700ms;
      visibility: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
      .lower-third,
      body.walk-active:not(.lt-peek) .lower-third,
      body.walk-active:not(.lt-peek) .lt-item {
        transition: none;
      }
    }

    /* The mark's box is taller than the links, and cut on the three edges that
       are the banner's own outside. Not on the fourth: the link strip runs INTO
       it, and cutting where they meet opens a notch that reads as two objects
       touching. */
    .lt-head {
      flex: 0 0 auto;
      width: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--metal-ground);
      border-radius: var(--lt-corner) var(--lt-corner) 0;
      text-decoration: none;
    }
    .lt-head img { display: block; height: 58px; width: auto; }
    /* The mark is a plate behind the same gilt slip as the walk tracker's
       chart (_walk_strip.html), so the nav and the tracker are visibly one
       banner, before, during and after the walk. Focus replaces the slip
       with the usual heavier ring. */
    .lt-head { outline: 1px solid rgba(200,169,110,0.55); outline-offset: -5px; }

    /* Squared off only while the walk's tab is around to sit flush against
       this edge — at rest the mark keeps its normal rounded corners. The
       real 3-value border-radius above reuses its top-right value for
       bottom-left too, so BOTH left corners are rounded and both would
       leave a notch against the tab's square edge. */
    body.walk-active .lt-head {
      border-radius: 0 var(--lt-corner) 0 0;
    }

    /* The tuck tab: only rendered while the walk is open. It sits in flow
       before .lt-head, so at rest (peeked) its default left:0 lands flush
       on the mark's own edge — fully on screen. Tucked, .lower-third's
       translateX carries the whole bar (tab included) right until the
       mark's edge — and so the tab touching it — lands at the bar's own
       right edge; nothing here moves the tab independently. */
    .lt-tab {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 80px;
      margin: 0;
      padding: 0;
      background: var(--metal-ground);
      border: 0;
      border-radius: var(--lt-corner) 0 0 var(--lt-corner);
      color: var(--metal-letter);
      font-size: 20px; /* px: a chevron glyph in a 30px-wide tab; the nearest step, text-6, is 19.4px */
      font-weight: 700;
      line-height: 1;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    body.walk-active .lt-tab { display: flex; }
    /* Peeked, the tab fills only the bar's padding, so it never covers the
       mark's gilt slip. Still 24px: a full-size target by WCAG 2.5.8. */
    body.walk-active.lt-peek .lt-tab { width: calc(var(--bar-inset) * 2); }
    .lt-tab .chev { text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

    /* Tucked: hang the tab off the bar's own LEFT edge by (padding-left −
       tab width), so its right edge lines up with the mark's left edge —
       not the bar's own padded box edge, var(--bar-inset)*2 further left,
       which is where a visible gap opened before this was measured.
       Here the tab is the JOIN between the walk tracker (_walk_strip.html)
       and the nav: the mark's full height, square on both sides, no frame
       line, so slab, tab and mark read as one piece of navy. */
    body.walk-active:not(.lt-peek) .lt-tab {
      left: calc(var(--bar-inset) * 2 - 30px);
      border-radius: 0;
    }

    /* --metal-letter on --metal-ground, the pairing the band above already
       uses, because gold-on-gold could not carry Cinzel at this size. */
    .lt-item {
      flex: 1 1 0;
      min-width: 0;
      min-height: 60px;
      padding: 12px 4px 10px;
      margin-top: 20px;
      background: var(--metal-ground);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: var(--text-4);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.2px;
      text-transform: uppercase;
      text-align: center;
      text-decoration: none;
      color: var(--metal-letter);
      text-shadow: 0 1px 0 rgba(0,0,0,0.55);
      -webkit-tap-highlight-color: transparent;
    }
    /* DIRECT children only. The lowercase s in M8s is a span inside the word's
       span, and blocking that too puts it on a line of its own. */
    .lt-item > span { display: block; white-space: nowrap; }
    /* The page you are on is the bright one. On a banner that floats over
       everything it is the only thing saying where you are. */
    .lt-item.current { color: var(--paper); font-weight: 600; }

    /* PADDING, not margin, so the parchment still runs to the bottom edge.
       What comes to rest under the banner is the FOOTER. */
    body:has(.lower-third) .site-footer-inner {
      padding-bottom: calc(var(--bar-clear) + env(safe-area-inset-bottom, 0px));
    }

    .m8s-lower { text-transform: lowercase; margin-left: -1.2px; }
    .hero-heading .m8s-lower { margin-left: -4.2px; }

    /* Portalled to body so the fixed menu escapes the header stacking context. */
    .acct-menu {
      position: fixed;
      z-index: 400;
      min-width: 228px;
      background: var(--paper);

      border: 5px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);

      padding: var(--space-2) 0 0;
      overflow: hidden;
    }
    .acct-menu[hidden] { display: none; }
    .acct-menu-item {
      display: block;
      padding: var(--space-2) var(--space-3);
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      color: var(--ink);
      text-decoration: none;
    }
    .acct-menu-item:hover, .acct-menu-item:focus-visible { background: rgba(26,14,8,0.05); }

    .acct-menu-item--group {
      background: var(--metal-ground);
      color: var(--metal-letter);
    }
    .acct-menu-item--group:hover,
    .acct-menu-item--group:focus-visible { background: #0c1930; }

    .acct-menu-hi {
      padding: var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--rule);
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      line-height: 1.5;
      color: var(--ink);
      overflow-wrap: anywhere;
    }
    .acct-menu-who {
      padding: var(--space-2) var(--space-3);
      border-top: 1px solid var(--rule);
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      line-height: 1.5;
      color: var(--muted);
      overflow-wrap: anywhere;
    }

    .acct-menu-who-label,
    .acct-menu-who-id { display: block; }
    .acct-menu-who-id { color: var(--ink); }

    .acct-menu-logo {
      display: flex;
      justify-content: center;
      background: var(--logo-ground);
      padding: var(--space-1);
      margin-top: var(--space-1);
    }

    .acct-menu-logo img { display: block; width: 210px; height: auto; }

    .site-header-status {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 var(--space-2) 0.35rem 0;
      display: flex;
      justify-content: flex-end;
    }

    .page-info-card {
      max-width: 1140px;
      margin: 0 auto;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      padding: var(--space-3) var(--space-4);
      position: relative;
    }
    .hero-eyebrow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--gold);
    }
    .page-info-card .eyebrow-text {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(1.9rem, 6vw, 2.4rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: normal;
      text-transform: none;
    }
    .eyebrow-status {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      line-height: 1.5;
      text-transform: none;
      letter-spacing: normal;
      color: var(--muted);
      flex-shrink: 0;
      white-space: nowrap;
    }

    .eyebrow-status.status-live     { color: var(--birdie); }
    /* Amber TEXT is the darker #a04c08 (4.7:1 on the card paper); the
       status dots keep the brighter #d0821e, which is not text. */
    .eyebrow-status.status-paused   { color: #a04c08; }
    .eyebrow-status.status-upcoming { color: var(--gold); }
    .eyebrow-status.status-finished { color: var(--red); }
    .eyebrow-status.status-entries_open,.eyebrow-status.status-in_play { color: var(--birdie); }
    .eyebrow-status.status-entries_closed,.eyebrow-status.status-entries_paused,.eyebrow-status.status-between_rounds { color: #a04c08; }
    .eyebrow-status.status-play_suspended { color: var(--red); }
    .eyebrow-status.status-play_unconfirmed,.eyebrow-status.status-results_pending { color: #a04c08; }
    .hero-heading {
      font-family: 'Cinzel', serif;
      font-size: var(--text-8);
      font-weight: 500;
      color: var(--ink);
      line-height: 1.15;
      letter-spacing: 0.02em;
      margin-top: 0.35rem;
    }
    .tourn-info-rows {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-3);
      color: var(--ink);
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      margin-top: 0.65rem;
      padding-top: 0.6rem;
      border-top: 1px solid var(--rule);
    }
    .tourn-info-row { line-height: 1.6; }
    /* Pause updates (templates/_live_updates.html): a quiet text button in
       whatever line it sits in, ink with a dotted gold rule like the board's
       other in-line links, and a 24px target (WCAG 2.5.8) without adding
       height to the line. */
    .live-pause {
      display: inline-flex; align-items: center; min-height: 24px;
      margin: -4px 0; padding: 0 2px;
      border: 0; background: none; cursor: pointer;
      font: inherit; color: var(--ink);
      text-decoration: underline dotted var(--gold); text-underline-offset: 3px;
    }
    .live-pause:hover { text-decoration-style: solid; }
    .live-pause-note:not(:empty) { display: block; }
    .lb-meta .live-pause { font-size: var(--text-4); }
    .tourn-info-actions {
      margin-top: auto;
      padding-top: .65rem;
      font-family: 'Space Mono', monospace;
      font-size: .74rem;
      line-height: 1.65;
    }
    /* Leave the lower-right tee illustration clear, including the pause note. */
    .hc-card .tourn-info-actions { width: 72%; }
    .tourn-info-row .k {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: var(--text-2);
      margin-right: 0.4em;
    }

    .live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--birdie); box-shadow:0 0 6px var(--birdie); animation:pulse-dot 1.8s ease-in-out infinite; flex-shrink:0; }
    .live-dot.stale { background:var(--down-red); box-shadow:0 0 6px var(--down-red); }

    .live-dot.paused { background:#d0821e; box-shadow:0 0 6px rgba(208,130,30,0.55); animation:none; }
    .status-indicator { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--muted); flex:0 0 auto; }
    .status-indicator--open,.status-indicator--live { background:var(--birdie); }
    .status-indicator--live { box-shadow:0 0 6px var(--birdie); animation:pulse-dot 1.8s ease-in-out infinite; }
    /* Entries open glows softly but holds still; the pulse means play is live. */
    .status-indicator--open { box-shadow:0 0 5px rgba(26,112,64,.55); }
    .status-indicator--warning { background:#d0821e; }
    .status-indicator--unavailable { background:var(--status-red); }
    .status-indicator--final { background:var(--gold); }
    .status-indicator--pause { position:relative; width:8px; height:8px; border-radius:0; background:linear-gradient(90deg,var(--birdie) 0 3px,transparent 3px 5px,var(--birdie) 5px 8px); }
    @media (prefers-reduced-motion:reduce) { .status-indicator--live { animation:none; } }
    .status-more { margin-top:.45rem; color:var(--muted); }
    .status-more summary { color:var(--gold); cursor:pointer; font-family:'Space Mono',monospace; font-size:var(--text-2); }
    .status-more .tourn-info-row { margin-top:.4rem; }
    @keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

    @media (min-width: 720px) {
      .hero-heading { font-size: calc(var(--text-8) * 1.2941); }
      .page-info-card { padding: var(--space-4) var(--space-5); }
    }
    @media (orientation: landscape) and (max-height: 500px) {
      .hero-heading { font-size: var(--text-8); }
      .page-info-card { padding: var(--space-3) var(--space-4); }
    }

    main {
      padding: var(--space-3) var(--edge) var(--space-6);
    }
    @media (min-width: 720px) {
      main { max-width: 1140px; margin: 0 auto; padding: var(--space-5) var(--edge) var(--space-6); }
    }

    /* One footer on every page, in the home page's night-navy band (James,
       2026-09-26). Links in the hero's warm gold, lifting to its pale gold
       on hover; 9.6px on every page, since the home page's 80% phone type
       scale made them too small to read or tap. */
    .site-footer {
      margin: 2.5rem 0 0;
      padding: 0 var(--edge);
      background: #0a1626;
    }
    .site-footer-inner {
      max-width: 1140px;
      margin: 0 auto;
      border-top: 1px solid rgba(196,165,116,.32);
      padding: 2rem 0 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
    }
    .footer-link {
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #c4a574;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      transition: color 0.15s;
    }
    .footer-link:hover { color: #e8cf99; }
    .footer-link:focus-visible { outline: 2px solid #c4a574; outline-offset: 2px; }

    .footer-link[aria-current='page'] { color: #e8cf99; pointer-events: none; }

    .footer-credit-name { color: #e8cf99; }
    .footer-link:hover .footer-credit-name { color: #f8f4e8; }

    /* Short pages (sign in, the error page, Create group, the organiser's pages): when the
       sheet is shorter than the screen the footer sits at the foot of the screen and the
       sheet fills the space above it, instead of a void of wallpaper between them. A body
       class the short pages set in their own templates, not a rule on every page: the
       settled pages keep the layout they were photographed in. */
    body.short-page { display: flex; flex-direction: column; min-height: 100dvh; }
    body.short-page main { flex: 1 0 auto; width: 100%; }

    .page-head {
      margin-bottom: 2.25rem;
    }
    .page-head-eyebrow {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--gold);
      margin-bottom: 0.6rem;
    }
    .page-head h1 {
      font-family: 'Cinzel', serif;
      font-size: var(--text-8);
      font-weight: 600;
      color: var(--ink);
      line-height: 1.15;
      letter-spacing: 0.02em;
    }
    @media (min-width: 720px) {
      .page-head h1 { font-size: calc(var(--text-8) * 1.4118); }
    }
    @media (orientation: landscape) and (max-height: 500px) {
      .page-head h1 { font-size: var(--text-8); }
    }

    .rule {
      border: none;
      border-top: 1px solid var(--rule);
      margin: 1.5rem 0;
    }

    .card {
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 3px;
    }

    .scoreboard {
      width: 100%;
      border-collapse: collapse;
    }
    .scoreboard thead tr {
      background: var(--felt);
    }
    .scoreboard th {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--gold);
      padding: 0.65rem 0.65rem;
      text-align: left;
      white-space: nowrap;
      border-bottom: 1px solid var(--rule);
    }
    .scoreboard td {
      padding: 0.65rem 0.65rem;
      border-bottom: 1px solid var(--rule);
      vertical-align: middle;
    }
    .scoreboard tbody tr:last-child td { border-bottom: none; }
    .scoreboard tbody tr { transition: background 0.1s; }

    .scoreboard .entrant-row { height: 68px; }
    .entrant-name-cell { min-width: 0; }
    .entrant-name {
      font-weight: 600;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      letter-spacing: 0.01em;
      overflow-wrap: anywhere;
    }
    /* The name is the row's button (table.html). Nothing of a button's own
       chrome shows: it reads exactly as the name did when it was a div. */
    .entrant-toggle {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      line-height: inherit;
      text-align: left;
      text-transform: inherit;
      cursor: pointer;
    }
    .entrant-statuses {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.45rem;
      margin-top: 0.18rem;
      color: var(--status-red);
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      line-height: 1.2;
      letter-spacing: 0.06em;
    }
    .entrant-status-group { display: inline-flex; align-items: center; gap: 0.16rem; }
    .entrant-status-group--pending { color: var(--you); }
    .entrant-status-label { font-weight: 700; font-size: 10px; /* px: the nearest step, text-2, is 9.6px and would move the label */ }
    .entrant-status-dot {
      display: inline-block;
      width: 0.38rem;
      height: 0.38rem;
      border-radius: 50%;
      background: currentColor;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .scoreboard tbody tr:not(.picks-row):not(.m8s-nudge-row):not(.m8s-ghost-row):not(.dotted-slot):hover td { background: rgba(26,14,8,0.04); }
    @media (min-width: 720px) {
      .scoreboard th { padding: 0.9rem 1.1rem; }
      .scoreboard td { padding: 0.8rem 1.1rem; }
    }
    @media (orientation: landscape) and (max-height: 500px) {
      .scoreboard th, .scoreboard td { padding: 0.65rem 0.65rem; }
    }

    .medal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-family: 'Cinzel', serif;
      font-weight: 600;
      font-size: var(--text-4);
    }
    /* Dark on gold is 3.5:1 at best, and no gold that still reads as gold
       gets it to 4.5, so the numeral is parchment. */
    .medal-1 { background: var(--gold); color: var(--paper); box-shadow: 0 0 12px rgba(200,169,110,0.5); }
    .medal-2 { background: var(--medal-silver); color: var(--logo-ground); }
    .medal-3 { background: var(--medal-bronze); color: var(--medal-bronze-ink); }
    .medal-4 { background: var(--navy); color: var(--medal-4-ink); font-family: 'Space Mono', monospace; font-size: var(--text-3); font-weight: 400; }
    .medal-5 { background: var(--navy-deep); color: var(--medal-5-ink); font-family: 'Space Mono', monospace; font-size: var(--text-3); font-weight: 400; }
    .medal-n { background: var(--rule); color: #5a4c3b; font-family: 'Space Mono', monospace; font-size: var(--text-3); font-weight: 400; }

    .you-row td { background: color-mix(in srgb, var(--you) 7%, transparent); }
    .you-row td:first-child { box-shadow: inset 5px 0 0 0 var(--you); }

    .lb-row-mine td { background: color-mix(in srgb, var(--you) 7%, transparent); }
    .lb-row-mine td:first-child { box-shadow: inset 5px 0 0 0 var(--you); }

    .delta-up   { color: var(--birdie); }
    .delta-down { color: var(--red); }
    .delta-flat { color: var(--muted); font-weight: 400; }

    .movers-strip {
      padding: 0.6rem 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      margin-bottom: 0.75rem;

      background: var(--parchment);
    }
    /* On a phone the three chips share the table's width exactly, edge to
       edge (James, 2026-09-29), so the strip has no side padding and only
       its label is inset. It has no rule underneath either: the tabs' top
       edge closes it. */
    @media (max-width: 719px) {
      .movers-strip { padding-left: 0; padding-right: 0; border-bottom: 0; }
      .movers-eyebrow { padding-left: calc(0.5rem + 1px); }
      .mover-chip { flex: 1 1 0; }
    }
    @media (min-width: 720px) {
      .movers-strip {
        border-left: 1px solid var(--rule);
        border-right: 1px solid var(--rule);
      }
    }
    /* Boxed in by its side rules on desktop, the label and chips need the
       same inset as the table's first column, not to sit on the rule. */
    @media (min-width: 720px) {
      .movers-strip { padding-left: 1.1rem; padding-right: 1.1rem; }
    }
    .movers-eyebrow {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      letter-spacing: 0.22em;
      color: var(--gold);
      margin-bottom: 0.4rem;
    }
    /* Three chips on one line: each stacks the climb above the name, so a
       chip is only as wide as a name. A name too long for its share of a
       small phone ends in an ellipsis rather than pushing a chip off. */
    .movers-chips {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.5rem;
    }
    .mover-chip {
      display: flex;
      flex: 0 1 11rem;
      min-width: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
      padding: 0.35rem 0.6rem 0.4rem;
      border-radius: 2px;
      background: rgba(26,112,64,0.08);
      border: 1px solid rgba(26,112,64,0.25);
      text-decoration: none;
    }
    .mover-delta {
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      font-size: var(--text-4);
      line-height: 1;
      color: var(--birdie);
    }
    .mover-name {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-4);
      line-height: 1.2;
      color: var(--ink);
    }

    .score-val {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-5);
      font-weight: 700;
    }
    .s-under { color: var(--birdie); }
    .s-over  { color: var(--red); }
    .s-even  { color: var(--ink); }

    .pill {
      display: inline-block;
      padding: 0.2rem 0.55rem;
      border-radius: 2px;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      font-weight: 400;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .pill-fin    { background: rgba(138,96,16,0.1); color: var(--gold2); border: 1px solid rgba(138,96,16,0.28); }
    .pill-grp    { background: rgba(138,96,16,0.12); color: var(--gold3); border: 1px solid rgba(138,96,16,0.22); padding: 0.15rem 0.45rem; }

    /* Native tick boxes, radios and ranges take the house gold, not the
       browser's blue. (accent-color reaches only these and progress bars.) */
    input, progress { accent-color: var(--gold); }

    .btn {
      display: inline-block;
      padding: 0.6rem 1.4rem;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-3);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      border: none;
      border-radius: 2px;
      cursor: pointer;
      text-decoration: none;
      transition: opacity 0.15s, transform 0.1s;
      white-space: nowrap;
    }
    .btn:active { transform: scale(0.97); }
    .btn-felt  { background: var(--gold); color: var(--paper); }
    .btn-felt:hover  { opacity: 0.88; }
    /* The gold button is the home page's (.home-btn-gold) at full size, the
       same face as the compact .hb-gold in notices (James, 2026-09-28): DM
       Sans in sentence case, not the spaced Space Mono capitals of .btn. */
    .btn.btn-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0.55rem 1.2rem;
      border-radius: 6px;
      font: 600 0.9rem/1 'DM Sans', sans-serif;
      letter-spacing: 0;
      text-transform: none;
      color: #0a1626;
      background: linear-gradient(#d4b887, #c4a574 48%, #a89060);
      box-shadow: 0 6px 18px rgba(138,96,16,0.22);
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .btn.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(138,96,16,0.3); }
    .btn.btn-gold:active { transform: translateY(0); }
    .btn.btn-gold:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
    .btn-red   { background: var(--red); color: white; }
    .btn-red:hover   { opacity: 0.85; }
    .btn-ghost { background: rgba(26,14,8,0.07); color: var(--muted); }
    .btn-ghost:hover { background: rgba(26,14,8,0.12); color: var(--ink); }
    .btn-sm { padding: 0.35rem 0.85rem; font-size: var(--text-2); }
    /* The tap floor: on the organiser and secondary pages (they set body class
       tap-floor) every button and sign-in door is at least 44px high. The
       board, home and the walk do not carry it, and keep their own sizes. */
    body.tap-floor .btn,
    body.tap-floor .door-btn { min-height: 44px; }
    body.tap-floor .btn { display: inline-flex; align-items: center; justify-content: center; }

    .field { margin-bottom: 1.25rem; }
    .field label {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--muted);
      margin-bottom: 0.45rem;
    }
    .input {
      width: 100%;
      padding: 0.65rem 0.9rem;
      border: 1px solid var(--rule);
      border-radius: 2px;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      background: #ffffff;
      color: var(--ink);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .input:focus {
      outline: none;
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(138,96,16,0.1);
    }

    .input:focus::placeholder { color: transparent; }
    select.input { cursor: pointer; }
    textarea.input { min-height: 90px; font-family: 'Space Mono', monospace; font-size: var(--text-3); }

    .flash {
      position: relative;
      padding: 0.9rem 2.75rem 0.9rem 1.25rem;
      border-radius: 3px;
      margin-bottom: 1.25rem;
      font-size: var(--text-5);
      font-family: 'Crimson Text', serif;
      border-left: 3px solid transparent;
    }
    .flash-success { background: rgba(26,112,64,0.08); border-left-color: var(--birdie); color: var(--success-ink); }
    .flash-error   { background: rgba(184,40,40,0.08); border-left-color: var(--red); color: #922020; }

    .flash-attention { background: var(--amber-bg); border-left-color: var(--amber-edge); color: var(--amber-ink); }

    /* D9: the grey "warning" flash takes the standard flash gold edge
       (--gold2, the amber flash's own edge) on an opaque --paper ground,
       rather than the old invisible edge / transparent ground. */
    .flash-warning { background: var(--paper); border-left-color: var(--gold2); color: var(--ink); }

    /* Every flash gets a small ✕, 44px to tap, top right (D5's "flashes still
       get a ✕" -- only the swap NOTICE, a persistent board-note, is exempt).
       Removal is plain DOM removal (base.html's inline script); no server
       round trip, since a flash is one-shot content already about to fade. */
    .flash-close {
      position: absolute;
      top: 0;
      right: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      margin: 0;
      padding: 0;
      cursor: pointer;
      font-family: 'Crimson Text', serif;
      font-size: 1rem;
      line-height: 1;
      color: var(--muted);
    }
    .flash-close:hover,
    .flash-close:focus-visible { color: var(--ink); }

    /* Like the home page's notice: just under the top strip, scrolling away
       with the page, never over the group name or the menu. */
    .page-board .flash {
      position: absolute;
      top: calc(var(--mast-h) + 0.75rem);
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      width: calc(100% - 2 * var(--edge));
      /* 1140px, not 1140 less the gutters: a flash floats over the content
         column and has to line up with its edges, not sit inset from them.
         `width` keeps the gutters on narrower screens, where the column is
         not yet at its cap. */
      max-width: 1140px;
      z-index: 400;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }

    /* The home hero owns the space behind a one-shot notice.  Keep this
       page-specific so ordinary form pages retain their in-flow feedback. */
    body.page-home .flash {
      position: absolute;
      top: 0.75rem;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      width: calc(100% - 2 * var(--edge));
      max-width: 1140px;
      z-index: 400;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }

    .page-board:has(.gband) .flash { top: calc(var(--band-h) + 0.75rem); }

    .page-board .flash-success { background: var(--success-wash); }
    .page-board .flash-error { background: #f6dada; }

    .page-board .flash-attention { background: var(--amber-bg-solid); }

    @keyframes flashFadeOut {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(-8px); }
    }

    .flash.flash-dismissing { animation: flashFadeOut 0.4s ease both; pointer-events: none; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.45s ease both; }

    @view-transition { navigation: auto; }

    /* The page dissolves between pages; its chrome does not. Blended with the
       page, the masthead went see-through over the thistle ground and showed
       two logos. Named, each band is lifted out of that dissolve and swaps at
       once. The outgoing band is kept only when the new page has none, so it
       can still fade away. */
    .gband { view-transition-name: pm-group-band; }
    .hp-band { view-transition-name: pm-masthead; }
    ::view-transition-group(pm-group-band), ::view-transition-group(pm-masthead),
    ::view-transition-new(pm-group-band), ::view-transition-new(pm-masthead) { animation: none; }
    ::view-transition-old(pm-group-band):not(:only-child),
    ::view-transition-old(pm-masthead):not(:only-child) { display: none; }

    .board-first-view { animation: fadeUp 0.5s ease both; }

    @media (prefers-reduced-motion: reduce) {
      .board-first-view { animation: none; }

      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }

    .picks-row { display: none; }
    .picks-row td {
      background: var(--paper2);
      padding: 0.9rem 1.1rem 1.1rem;
      border-bottom: 1px solid var(--rule);
    }
    .picks-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
      gap: 0.5rem;
      margin-top: 0.6rem;
    }

    .ew-picks-grid.is-collapsed .pick-card:not(.pick-card--selected) { display: none; }
    .pick-card {
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 2px;
      padding: 0.5rem 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-size: var(--text-5);
      transition: border-color 0.15s;
    }
    .pick-card:hover { border-color: var(--gold); }
    .expand-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      font-size: var(--text-4);
      padding: 0.15rem 0.3rem;
      transition: transform 0.2s, color 0.15s;
      /* Its own layer for good (James, 2026-09-26): promoting it only for
         the length of the turn made the whole page's text re-smooth, a
         1px nudge of every letter and back on each entrant click. */
      will-change: transform;
      font-family: 'Space Mono', monospace;
    }
    .expand-btn:hover { color: var(--gold); }
    .expand-btn.open { transform: rotate(180deg); }

    .scoreboard tbody tr.dotted-slot > td {
      width: auto;
      padding: var(--space-3) 0;
      border-bottom: none;
      background: transparent;
    }

    .dotted-box {
      border: 2px dashed var(--rule);
      border-left: 3px solid var(--stroke);
      border-radius: 3px;
      background: rgba(138,96,16,0.04);
      margin-left: var(--space-1);
      margin-right: var(--space-1);
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
    }
    .dotted-box:hover { background: rgba(138,96,16,0.09); border-color: var(--gold); }
    /* The house focus ring on paper controls (gold, 2px, offset 2px). */
    .dotted-box:focus-visible,
    .door-btn:focus-visible,
    button.divider-text:focus-visible,
    .pick-opt-input:focus-visible + .pick-card { outline: 2px solid var(--gold); outline-offset: 2px; }
    .dotted-box.is-pointer:focus-visible { outline: none; }
    .dotted-box.is-open { background: var(--paper2); border-color: var(--gold); }
    /* ⚠ THE GOLD EDGE IS PAINTED OVER THE CARD, NOT BESIDE IT (James,
       2026-09-26). The walk card runs a few px under the left border
       (.dotted-editor .sc-card--walk below) and this strip redraws the
       border on top, so fractional zoom or display scaling can never leave
       a light sliver between the edge and the card's paper. */
    .dotted-box { position: relative; }
    /* Same for the dashed edge on the right: the card runs under it and the
       dashes are redrawn on top, so the gaps between dashes show the card's
       paper rather than a light strip beside it. The box's own border keeps
       its width for layout but goes transparent while open. */
    .dotted-box.is-open { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
    .dotted-box.is-open::before {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      bottom: -2px;
      left: -3px;
      border: 2px dashed var(--gold);
      border-left: 0;
      border-radius: 3px;
      z-index: 2;
      pointer-events: none;
    }
    .dotted-box.is-open::after {
      content: '';
      position: absolute;
      top: -2px;
      bottom: -2px;
      left: -3px;
      width: 3px;
      border-radius: 3px 0 0 3px;
      background: var(--gold);
      z-index: 2;
      pointer-events: none;
    }

    .scoreboard tbody tr.dotted-slot--combined > td {
      background: rgba(20,14,4,0.06);
      box-shadow: inset 0 1px 4px rgba(20,14,4,0.08),
                  inset 0 -1px 4px rgba(20,14,4,0.08);
    }
    .dotted-slot--combined .dotted-box {
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
      background: var(--paper);
    }

    .dotted-trigger {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-height: 44px;
      padding: 0.5rem 0.65rem;
    }
    .dotted-marker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      border-radius: 50%;
      border: 1.5px dashed var(--gold);
      color: var(--gold2);
      /* The + is drawn, not typed: a font's + sits on its own baseline, low
         in the circle, and moves with whichever font has loaded. */
      position: relative;
      font-size: 0;
    }
    .dotted-marker::before,
    .dotted-marker::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10px;
      height: 2px;
      background: currentColor;
      transform: translate(-50%, -50%);
    }
    .dotted-marker::after { transform: translate(-50%, -50%) rotate(90deg); }
    .dotted-label {
      font-family: 'Crimson Text', serif;
      font-style: italic;
      font-size: var(--text-5);
      color: var(--gold2);
      margin-right: auto;
    }

    .dotted-label-aside {
      font-size: var(--text-3);
      color: var(--muted);
    }

    .dotted-editor {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      padding: 0.2rem 0.65rem 0.9rem;
      cursor: default;
    }
    .dotted-editor[hidden] { display: none; }
    /* ⚠ THE CARD IS FULL-BLEED, THE WALK AROUND IT IS NOT. It cancels
       the editor's own side padding, so the sign-in doors, the phone
       field, the questions and the counts all keep their gutter. Both
       values below have to match .dotted-editor's padding at that width
       or the card sits proud of the row. */
    .dotted-editor .sc-card--walk {
      margin-left: calc(-0.65rem - 3px);
      margin-right: calc(-0.65rem - 2px);
      /* James, 2026-09-26: the card sits close under "Add your picks";
         the editor's own 0.2rem top padding is the whole gap. */
      margin-top: 0;
      margin-bottom: 0.3em;
      padding-bottom: 0.4em;
    }
    .dotted-editor .field { margin-bottom: 0; }
    .field-hint {
      font-family: 'Crimson Text', serif;
      font-size: var(--text-3);
      color: var(--muted);
      margin-top: 0.3rem;
    }

    /* Slice 5b: the amber in-page note treatment (same as .board-note--aside),
       not just bold gold text -- design/banner-inventory.html 4b. `[hidden]`
       stays untouched, so the walk's own show/hide logic is unaffected. */
    .ew-hook-hint, .ew-gate-hint {
      font-family: 'Crimson Text', serif;
      font-size: var(--text-4);
      color: var(--amber-ink);
      font-weight: 700;
      margin: 15px 10px;
      border-left: 5px solid var(--amber-edge);
      border-radius: 3px;
      background: var(--amber-bg);
      padding: 0.55rem 0.8rem 0.55rem 18px;
    }
    /* The walk's first card opens as its head only (James, 2026-09-30): the
       name, then Continue. The golfers, their legend and count, and the
       sign-in doors wait until a usable name is written. */
    .walk-step.is-gated .ew-picks-body,
    .walk-step.is-gated .legend,
    .walk-step.is-gated .ew-grp-count,
    .walk-step.is-gated .ew-hook-hint { display: none; }
    .walk-step:not(.is-gated) .ew-name-gate { display: none; }
    /* The big gap sits above the whole block, so the note, when it shows,
       sits close to the button it is about, not to the Date line. */
    .ew-name-gate {
      position: relative;
      padding: 36px 14px 18px;
      text-align: center;
    }
    .ew-name-gate .ew-gate-hint { margin: 0 0 12px; text-align: left; }
    /* THE HIGHLIGHTER (James, 2026-09-30). On the walk's first card the word
       ENTRANT is marked in the GRP column's yellow, drawn OVER the ink in
       multiply the way a real highlighter goes over a printed word, and a
       degree off level because a hand did it. Press Continue with no name
       and the stroke runs the whole line. The pen lands harder than it
       lifts, so the stroke fades in over a long stretch at the start and
       lifts off quickly at the end. */
    .walk-step[data-step="hook"] .sc-fill--entrant { position: relative; }
    .walk-step[data-step="hook"] .sc-fill--entrant .sc-k-word { position: relative; }
    .walk-step[data-step="hook"] .sc-fill--entrant .sc-k-word::after,
    .walk-step[data-step="hook"] .sc-fill--entrant:has(.is-missing)::after {
      content: '';
      position: absolute;
      z-index: 2;
      pointer-events: none;
      mix-blend-mode: multiply;
      background: linear-gradient(100deg,
        rgba(232,196,37,0) 0%,
        rgba(232,196,37,.2) 8%,
        rgba(232,196,37,.6) 16%,
        rgba(232,196,37,.95) 26%,
        rgba(232,196,37,.85) 55%,
        rgba(232,196,37,.9) 95%,
        rgba(232,196,37,0) 100%);
      border-radius: 1px 3px 2px 3px;
      transform: rotate(-1deg);
    }
    /* The short stroke fades over fixed lengths: a share of one word is only
       a few pixels, and the fade James asked for would not show. */
    .walk-step[data-step="hook"] .sc-fill--entrant .sc-k-word::after {
      left: -14px; right: -6px; top: -3px; bottom: -3px;
      background: linear-gradient(100deg,
        rgba(232,196,37,0) 0,
        rgba(232,196,37,.15) 8px,
        rgba(232,196,37,.55) 18px,
        rgba(232,196,37,.95) 30px,
        rgba(232,196,37,.85) 60%,
        rgba(232,196,37,.9) calc(100% - 6px),
        rgba(232,196,37,0) 100%);
    }
    .walk-step[data-step="hook"] .sc-fill--entrant:has(.is-missing) .sc-k-word::after { display: none; }
    /* Its job is done once a name is written: the mark fades off the word
       (James, 2026-09-30), and comes back if the line is emptied. */
    .walk-step[data-step="hook"] .sc-fill--entrant .sc-k-word::after { transition: opacity .3s; }
    .walk-step[data-step="hook"] .sc-fill--entrant:not(:has(.sc-hw-in:placeholder-shown)) .sc-k-word::after { opacity: 0; }
    .walk-step[data-step="hook"] .sc-fill--entrant:has(.is-missing)::after { left: -8px; right: -6px; top: -2px; bottom: -2px; }
    /* On the card now, so it takes the card's own face rather than the
       page's Crimson, and sits tight under the 10px spacer above it. */
    .dotted-picks-heading {
      font-size: var(--text-3);
      color: var(--ink);
      margin: 2px 2px 6px 4px;
    }
    .dotted-picks-heading em { font-style: italic; color: var(--gold3); }
    .grp-tag {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      color: var(--muted);
      margin-left: 0.2rem;
    }

    .pick-card--selected {
      border-color: var(--gold);
      background: rgba(138,96,16,0.08);
    }
    .pick-check {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-4);
      font-weight: 700;
      color: var(--gold2);
      margin-left: auto;
      flex-shrink: 0;
    }

    @media (min-width: 720px) {
      .dotted-trigger { padding: 0.5rem 0.9rem; }
      .dotted-editor { padding: 0.2rem 0.9rem 1.1rem; }
      .dotted-editor .sc-card--walk { margin-left: -0.9rem; margin-right: -0.9rem; }
    }

    .walk-step { display: none; }
    .walk-step.active { display: block; }

    .signin-moment { border-top: 1px dashed var(--rule); padding-top: 0.75rem; margin-top: 0.75rem; }
    .signin-moment[hidden] { display: none; }
    .signin-prompt {
      font-family: 'Crimson Text', serif;
      font-size: var(--text-4);
      color: var(--ink);
      margin-bottom: 0.6rem;
    }
    /* The same highlighter as the walk's ENTRANT word, on each line that says
       what to do next: the pick headings and the sign-in prompt. */
    .hl-mark { position: relative; }
    .hl-mark::after {
      content: '';
      position: absolute;
      left: -10px; right: -6px; top: -1px; bottom: -1px;
      z-index: 2;
      pointer-events: none;
      mix-blend-mode: multiply;
      background: linear-gradient(100deg,
        rgba(232,196,37,0) 0,
        rgba(232,196,37,.15) 8px,
        rgba(232,196,37,.55) 18px,
        rgba(232,196,37,.95) 30px,
        rgba(232,196,37,.85) 60%,
        rgba(232,196,37,.9) calc(100% - 6px),
        rgba(232,196,37,0) 100%);
      border-radius: 1px 3px 2px 3px;
      transform: rotate(-1deg);
    }
    .door-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      width: 100%;
      background: #ffffff;
      color: #3c4043;
      border: 1px solid #dadce0;
      border-radius: 2px;
      padding: 0.55rem 0.9rem;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-4);
      cursor: pointer;
      margin-bottom: 0.5rem;
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s;
    }
    .door-btn:hover { background: #f7f7f7; border-color: #c0c0c0; }
    .door-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* The message line on both passkey-recovery pages (signin_recover.html and
       signin_recover_link.html): red by default, gold with .is-warn. */
    .recovery-message { padding: .65rem .8rem; border-left: 3px solid var(--red); background: rgba(217,80,80,.08); color: var(--red); font-size: .78rem; line-height: 1.5; }
    .recovery-message.is-warn { border-left-color: var(--gold2); background: rgba(138,96,16,.08); color: var(--gold2); }
    .door-btn svg { flex-shrink: 0; }
    .passkey-door[hidden], .pk-panel[hidden], .pk-message[hidden] {
      display: none !important;
    }
    .passkey-door {
      position: relative;
      flex-direction: column;
      gap: 0.08rem;
      padding-top: 0.48rem;
      padding-bottom: 0.48rem;
    }
    .passkey-door[aria-expanded="true"] {
      margin-bottom: 0;
      border-radius: 2px 2px 0 0;
    }
    .pk-door-main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      width: 100%;
      line-height: 1.25;
    }
    .pk-door-sub {
      color: var(--muted);
      font-size: var(--text-2);
      line-height: 1.2;
    }
    .pk-chevron {
      position: absolute;
      top: 0.48rem;
      right: 0.85rem;
      transition: transform 0.15s;
    }
    .passkey-door[aria-expanded="true"] .pk-chevron {
      transform: rotate(180deg);
    }
    .pk-panel {
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 0.5rem;
      padding: 0.85rem 1rem 1rem;
      border: 1px solid #dadce0;
      border-top: 0;
      border-radius: 0 0 2px 2px;
      background: var(--paper);
      color: var(--ink);
      overflow-wrap: anywhere;
    }
    .pk-email-form .field .pk-field-label {
      display: block;
      margin-bottom: 0.35rem;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-4);
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink);
      line-height: 1.3;
    }
    .pk-organiser-note {
      margin: 0.35rem 0 0;
      color: var(--muted);
      font-size: var(--text-2);
      line-height: 1.35;
    }
    .pk-email-form .field { margin-bottom: 0; }
    .pk-create-button { width: 100%; margin-top: 0.35rem; }
    .pk-panel-body .pk-create-button { margin-top: 0; }
    .pk-or {
      margin: 26px 0 2px;
      text-align: left;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-3);
      color: var(--muted);
    }
    .pk-login-button { margin-bottom: 0; }
    .pk-lost {
      margin: 6px 6px;
      text-align: right;
      font-size: var(--text-2);
    }
    .pk-lost a { color: var(--muted); }
    .pk-email-done {
      margin: 0 0 0.6rem;
      color: var(--birdie);
      font-family: 'Crimson Text', serif;
      font-size: var(--text-3);
    }
    .pk-email-why {
      margin: 0.3rem 0 0;
      color: var(--muted);
      font-size: var(--text-2);
      line-height: 1.35;
    }
    .pk-message {
      margin: 0.45rem 0 0;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-3);
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .pk-message.is-error { color: #8d2929; font-weight: 700; }
    .pk-message.is-hint { color: var(--gold2); }
    .pk-message-action {
      display: inline;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-decoration: underline;
      cursor: pointer;
    }
    @media (max-width: 480px) {
      .pk-panel { padding-right: 0.8rem; padding-left: 0.8rem; }
      .passkey-door { padding-right: 2.1rem; padding-left: 2.1rem; }
    }

    .divider-text {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      width: 100%;
      margin: 0.7rem 0 0;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      letter-spacing: 0.06em;
      color: var(--muted);
      text-align: center;
    }
    .divider-text::before, .divider-text::after {
      content: '';
      flex: 1;
      border-top: 1px solid var(--rule);
    }

    button.divider-text {
      background: none;
      border: none;
      padding: 0;
      min-height: 44px;
      cursor: pointer;
      transition: color 0.15s;
    }
    button.divider-text:hover { color: var(--ink); }
    button.divider-text:hover::before, button.divider-text:hover::after { border-top-color: var(--gold); }
    .divider-label, .divider-label-main { display: inline-flex; align-items: center; gap: 0.3rem; }

    .divider-label--two { flex-direction: column; gap: 0.2rem; }
    .divider-chev { display: inline-block; transition: transform 0.2s; font-size: var(--text-3); line-height: 1; }
    button.divider-text[aria-expanded="true"] .divider-chev { transform: rotate(180deg); }
    @media (prefers-reduced-motion: reduce) { .divider-chev { transition: none; } }


    /* A save that did not land, said where the player is, in the Alert
       style (yellow): something they must still do. */
    .ew-draft-error {
      margin: 8px 0; padding: 10px 12px;
      background: var(--amber-bg-solid); border-left: 5px solid var(--amber-edge);
      color: var(--amber-ink);
      font: 400 14px/1.4 'Crimson Text', serif;
    }
    .ew-draft-error .button {
      margin-left: 6px; padding: 6px 12px;
      border: 1.5px solid var(--logo-ground); border-radius: 2px;
      background: var(--logo-ground); color: #fff;
      font: 600 13px/1 'Cormorant Garamond', Georgia, serif;
      letter-spacing: .04em; text-transform: uppercase;
      cursor: pointer;
    }
    /* Draft validation uses the error tier (ADR 0028), because it is
       the same kind of answer: the thing you typed cannot be used. */
    .ew-name-error { margin-top: 0.6rem; font-family: 'Space Mono', monospace;
      font-size: var(--text-2); line-height: 1.5; color: var(--red); }
    .ew-name-error b { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }
    .ew-name-error[hidden] { display: none; }
    /* The same two messages on the cards after the hook. They sit above the
       card there, so the space goes under them rather than over. */
    .walk-step > .ew-name-taken { margin: 0 0 var(--space-2); }
    .ew-name-short[hidden] { display: none; }


    /* ⚠ FIXED, NOT ABSOLUTE, AND THAT IS THE WHOLE POINT. The checkboxes
       live in their own container above the card, so absolute positioning left
       every one of them stacked at the top of the step while the rows that
       toggle them sit hundreds of pixels below in Out. Clicking a row forwards
       focus to its checkbox, and the browser scrolled that checkbox into view:
       picking a Contender threw you back to the top of the card. Fixed keeps
       them permanently inside the viewport, so focus has nothing to scroll to.
       Still zero-size, so the container still collapses, and still focusable,
       so the keyboard order the note further down defends is untouched. */
    .pick-opt-input { position: fixed; top: 0; left: 0; opacity: 0; width: 0; height: 0; }
    .pick-opt-input:disabled + .pick-card { opacity: 0.4; cursor: not-allowed; }
    .grp-count { font-family: 'Space Mono', monospace; font-size: var(--text-2); color: var(--muted); }
    span.legend {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      color: var(--muted);
      display: block;
    }
    .grp-count.full { color: var(--birdie); font-weight: 700; }

    .walk-question { border-left: 3px solid var(--gold); padding: 0.7rem 0 0.7rem 0.9rem; margin: 0.9rem 0; }

    .ew-done { position: relative; text-align: center; padding: var(--space-2) 0; }
    /* The gold mono eyebrow: the entry walk's question, and the account page's row key. */
    .walk-question-eyebrow, .acct-k {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--gold);
      margin-bottom: var(--space-1);
    }
    .ew-done-head {
      font-family: 'Cinzel', serif;
      font-size: var(--text-6);
      font-weight: 600;
      color: var(--ink);
      margin-bottom: var(--space-3);
    }
    /* One line of what happens next, then the course map (the walk's finishing
       flourish). The map's frame reads two scorecard variables that only the
       card itself defines, so the same two are given here. */
    .ew-done-next { font-size: var(--text-5); line-height: 1.5; margin: 0 0 var(--space-3); }
    /* Same 350px column as the map below it, so the two share left and right edges. */
    .ew-done-what { width: calc(100% - 2 * var(--space-3)); max-width: 350px; margin: 0 auto var(--space-3); text-align: left; }
    .ew-done-what-head { font-size: var(--text-5); font-weight: 600; margin-bottom: var(--space-1); }
    .ew-done-what p { font-size: var(--text-5); line-height: 1.5; margin: 0; }
    .ew-done-course {
      --sc-hair: var(--ink); --sc-w-hair: 0.8px;
      /* The map is 350px wide, like the scorecard it came from: no larger on a wide
         screen, where it would blow up soft. */
      width: calc(100% - 2 * var(--space-3)); max-width: 350px; margin: var(--space-3) auto 0;
    }

    .walk-question-text { font-family: 'Crimson Text', serif; font-size: var(--text-5); line-height: 1.5; color: var(--ink); margin-bottom: 0.75rem; }
    .walk-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .walk-opt-btn {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.55rem 1rem;
      border: 1.5px solid var(--rule);
      border-radius: 2px;
      background: var(--paper);
      color: var(--ink);
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s, color 0.12s;
    }
    .walk-opt-btn:hover { border-color: var(--gold); }
    .walk-opt-btn.chosen { border-color: var(--gold); background: rgba(138,96,16,0.1); color: var(--gold3); font-weight: 700; }
    .walk-replacement-options { display: grid; grid-template-columns: minmax(0, 1fr); }
    .walk-replacement-options .walk-opt-btn {
      display: grid; gap: 0.3rem; width: 100%; min-width: 0;
      text-align: left; white-space: normal; text-transform: none;
      letter-spacing: normal; line-height: 1.4;
    }
    .walk-replacement-options .walk-opt-btn strong { font-size: var(--text-3); }
    .walk-replacement-options .walk-opt-btn span {
      font-family: 'Crimson Text', serif; font-size: var(--text-4);
      font-weight: 400;
    }
    .ew-replacement-explanation {
      font-family: 'Crimson Text', serif; font-size: var(--text-4);
      line-height: 1.45; color: var(--muted); margin: 0 0 0.75rem;
    }
    .ew-question-back {
      margin-top: 0.75rem; padding: 0.25rem 0; border: 0;
      background: transparent; color: var(--muted); text-decoration: underline;
      text-underline-offset: 0.15em; cursor: pointer; font: inherit;
    }
    .ew-field-rebased {
      margin: 0.65rem 0; padding: 0.6rem 0.75rem;
      border-left: 3px solid var(--gold); background: var(--amber-bg);
      color: var(--ink); font-family: 'Crimson Text', serif;
    }
    /* Finished: the saved entry has just been made, so a note about a stale
       draft no longer applies (the page is not reloaded between the two). */
    .dotted-editor:has(.walk-step[data-step="done"].active) .ew-field-rebased { display: none; }
    .walk-subfield { margin-top: 0.8rem; max-width: 260px; }
    .walk-subfield label { display: block; font-family: 'Crimson Text', serif; font-size: var(--text-4); color: var(--ink); margin-bottom: 0.35rem; }
    .walk-subfield .input { font-size: var(--text-4); padding: 0.5rem 0.7rem; }
    .walk-subfield-go { margin-top: 0.6rem; }

    .ew-contact-consent { display: flex !important; align-items: flex-start; gap: 0.5rem;
                          margin-top: 0.6rem !important; margin-bottom: 0 !important; }
    .ew-contact-consent input, .join-offer-consent input { margin-top: 0.2rem; flex: 0 0 auto; }
    .ew-contact-hint:empty { display: none; }
    /* Slice 5b: an amber in-page note when it has text (design/banner-
       inventory.html 4/handoff table) -- it is a nudge ("please tick the
       consent box"), not a rejection, so it takes the amber tier, not red. */
    .ew-contact-hint {
      margin-top: 0.5rem;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-4);
      color: var(--amber-ink);
      border-left: 5px solid var(--amber-edge);
      border-radius: 3px;
      background: var(--amber-bg);
      padding: 0.5rem 0.8rem 0.5rem 18px;
    }

    .join-offer { padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; }
    .join-offer-opts { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.6rem 0; }
    .join-offer-opts label { display: flex; align-items: center; gap: 0.4rem;
                             font-family: 'Crimson Text', serif; font-size: var(--text-4); }
    .join-offer-consent { display: flex; align-items: flex-start; gap: 0.5rem;
                          margin: 0.6rem 0 0.9rem; font-family: 'Crimson Text', serif;
                          font-size: var(--text-4); }

    .confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }
    .confetti-piece { position: absolute; top: -12px; width: 8px; height: 8px; border-radius: 1px; animation: confettiFall linear forwards; }
    @keyframes confettiFall {
      0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(105vh) rotate(540deg); opacity: 0.85; }
    }
    @media (prefers-reduced-motion: reduce) { .confetti-piece { animation: none; display: none; } }

    .dotted-slot.is-landing .dotted-box { animation: dropIntoGroove 0.42s ease-in forwards; }
    @keyframes dropIntoGroove {
      0%   { transform: translateY(0);   box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
      100% { transform: translateY(5px); box-shadow: 0 0 0 rgba(0,0,0,0); }
    }

    .just-landed td { animation: rowLandGlow 2.5s ease-out forwards; }
    @keyframes rowLandGlow {
      0%   { background: color-mix(in srgb, var(--you) 28%, transparent); }
      100% { background: color-mix(in srgb, var(--you) 7%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dotted-slot.is-landing .dotted-box { animation: none; }
      .just-landed td { animation: none; background: color-mix(in srgb, var(--you) 7%, transparent); }
    }

    @keyframes placardSlideOut {
      from { transform: translateY(0);     opacity: 1; }
      to   { transform: translateY(-10px); opacity: 0; }
    }
    @keyframes placardSlideIn {
      from { transform: translateY(10px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .medal.placard-out { animation: placardSlideOut 0.1s ease-in forwards; }
    .medal.placard-in  { animation: placardSlideIn 0.1s ease-out forwards; }

    .board-changed td { animation: rowChangedGlow 2.5s ease-out forwards; }
    @keyframes rowChangedGlow {
      0%   { background-image: linear-gradient(color-mix(in srgb, var(--gold) 18%, transparent),
                                               color-mix(in srgb, var(--gold) 18%, transparent)); }
      100% { background-image: linear-gradient(transparent, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
      .medal.placard-out, .medal.placard-in { animation: none; }
      .board-changed td { animation: none; }
    }

    .tabs {
      display: flex;
      gap: 0;
      border-left: 1px solid var(--rule);
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      margin-bottom: 0;
      overflow-x: auto;

      overflow-y: hidden;
    }
    .tab-btn {
      flex: 1 1 0;
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      background: none;
      border: none;
      border-right: 1px solid var(--rule);
      border-bottom: 2px solid transparent;
      padding: 0.8rem 1.1rem;
      cursor: pointer;
      white-space: nowrap;
      text-align: center;
      transition: color 0.15s, border-color 0.15s;
      margin-bottom: -1px;
    }
    .tab-btn:last-child { border-right: none; }
    .tab-btn:hover { color: var(--ink); }
    .tab-btn.active { color: var(--gold2); border-bottom-color: var(--gold); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .m8s-signin-cta { padding: 2.5rem 1.5rem; text-align: center; }
    .m8s-signin-cta-text {
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      color: var(--ink);
      max-width: 28rem;
      margin: 0 auto 1.5rem;
      line-height: 1.5;
    }

    .prize-strip {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      margin-bottom: 2rem;
      padding: 0.75rem 1rem;
      background: var(--felt);
      border-radius: 3px;
      border: 1px solid var(--rule);
    }
    .prize-head {
      flex: 0 0 100%; text-align: center; margin-bottom: 0.2rem;
      font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700;
      font-size: 1.4rem; line-height: 1.15; color: #0a1626;
    }
    @media (max-width: 719px) { .prize-head { font-size: 1.2rem; } }
    /* The small mono caption: under the leader band's headline figure (picks
       page) and over each group's table (pros page). Both pages used to carry
       an identical copy in their own <style> block. */
    .leader-band-meta,
    .lb-group-label {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--muted);
    }

    /* ── Header cards (James, 2026-09-26) ─────────────────────────────────
       The tournament card, the leader and the prizes as one row of
       home-page-style cards, each with its own drawing. The card keeps the
       drawing's own shape (1672 × 941) and the image is only ever scaled
       with cover, never stretched, so a card made taller by its text crops
       plain paper off the left rather than squashing the drawing. On a
       phone the row swipes sideways, one card at a time. */
    .header-cards--row {
      max-width: 1140px; margin: 0 auto;
      display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
      gap: 1.4rem;
      align-items: stretch; justify-items: stretch;
    }
    .hc-card {
      /* No overflow: hidden. With it the browser drops the card's automatic
         minimum height, so aspect-ratio pins the card to the drawing's shape
         and clips a third title on a phone (James's screenshot, 2026-09-26).
         Without it the card grows to fit its text; border-radius still
         rounds the background. */
      position: relative; min-width: 0;
      aspect-ratio: 1672 / 941;
      border: 1px solid rgba(168,144,96,.35); border-radius: 8px;
      /* The page's cream under the drawing: the drawing sits at 85% over it,
         which is the 15% wash towards the cream (James, 2026-09-26). */
      background-color: #f5efe0;
      /* A short, soft shadow: the swipe row scrolls, so it clips anything
         deeper than its bottom padding into a hard band under the cards. */
      box-shadow: 0 5px 12px -6px rgba(10,22,38,.3);
      display: flex; flex-direction: column;
      container-type: inline-size; isolation: isolate;
      /* Nine-slice bands, in the artwork's own pixels (all three are
         1280 x 720). Each card's markup sets --hc-art; the slices are set
         per card below. */
      --hc-top: 184; --hc-bottom: 456;
    }
    /* The drawing is split three ways, like the home cards: the top band
       (the frame's top edge) pins to the top, the bottom band (grid, drawing,
       frame bottom) pins to the bottom, and only a plain band of paper
       between them stretches. A card made taller by its text used to scale
       the whole drawing up with cover and crop it (James, 2026-09-29). Band
       heights follow the card's width, so at the drawing's own shape the
       card looks exactly as the whole image did. */
    .hc-card::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      pointer-events: none; opacity: .85;
      clip-path: inset(0 round 7px);
      border: 0 solid transparent;
      border-image-source: var(--hc-art);
      border-image-slice: var(--hc-top) 0 var(--hc-bottom) 0 fill;
      /* The layer's width: the card's content box (100cqw) plus the side
         padding the tournament card has on itself. The leader and prizes
         cards pad an inner element, so they add nothing. Without this the
         bands came out short and squashed the drawing. */
      --hc-w: calc(100cqw + var(--hc-pad-l, 0px) + var(--hc-pad-r, 0px));
      border-image-width: calc(var(--hc-w) * var(--hc-top) / 1280) 0
                          calc(var(--hc-w) * var(--hc-bottom) / 1280) 0;
      border-image-repeat: stretch;
    }
    /* The drawings were enlarged 20% in the art (James, 2026-09-29), so the
       sign and trophy reach higher and the plain band sits above them. The
       sign then grew another 15% and 10%, so its band starts higher still. */
    .hc-card--leader { --hc-top: 80; --hc-bottom: 610; }
    .hc-card--prizes { --hc-top: 240; --hc-bottom: 452; }
    .header-cards--row .page-info-card.hc-card { max-width: none; margin: 0; }
    /* The status text may run over the paper, but wraps short of the tee
       drawing (James, 2026-09-26): an invisible float shaped like the
       drawing's outline does the wrapping. The script in base.html sizes it
       to the whole text block and places the outline from the card's bottom
       edge, so the lines level with the drawing stop short whether the
       status is two lines or six. Without the script, no float. */
    .hc-card .hc-slope::before {
      content: ''; float: right; width: var(--slope-w); height: var(--slope-h);
      shape-outside: var(--slope-shape); shape-margin: 4px;
    }
    .hc-card > .leader-band, .hc-card > .prize-strip {
      flex: 1; margin: 0; border: 0; background: transparent; max-width: none;
    }
    .hc-card > .leader-band {
      padding: var(--space-4) var(--space-5);
      flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .6rem;
    }
    .hc-card .leader-band-name {
      white-space: normal; font-size: var(--text-6); line-height: 1.25;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    }
    /* The leader's name and caption wrap round the leaderboard sign the same
       way (the script in base.html), and the total shrinks to clear it. */
    .hc-card .leader-band-score { text-align: left; }
    .hc-card > .prize-strip {
      padding: var(--space-4) var(--space-5);
      flex-direction: column; flex-wrap: nowrap; align-items: center; gap: .45rem;
    }
    .hc-card > .prize-strip .prize-div { display: none; }
    /* First place is the headline and the rest fit underneath (James,
       2026-09-29). "1ST" sits over the first title, set large in the gold
       of the leader card's total so the two cards answer each other; the
       other places follow as small "2ND  Close M8" pairs that share a line
       where they fit, pinned low, level with the trophy's base. Everything
       stays in the left 74%: the trophy takes the right quarter. */
    .hc-card > .prize-strip,
    .hc-card > .prize-strip.prize-glory {
      flex-direction: column; flex-wrap: nowrap; align-items: flex-start;
      gap: 0;
    }
    .hc-card > .prize-strip .prize-head { flex: none; text-align: left; }
    .hc-card > .prize-strip .prize-item--first {
      width: auto; max-width: 74%;
      flex-direction: column; align-items: flex-start; gap: .15rem;
      margin-top: clamp(.4rem, 3.2cqi, .85rem);
    }
    /* The fit script sets --prize-first-fit only when a long title would
       otherwise run into the trophy. */
    .hc-card > .prize-strip .prize-item--first .prize-amount {
      font-size: var(--prize-first-fit, clamp(2.4rem, 17cqi, 3.6rem));
      line-height: .92; color: #8a6010; font-variant-numeric: lining-nums;
    }
    .hc-card > .prize-strip .prize-rest {
      display: flex; flex-wrap: wrap; gap: .2rem 1.1rem;
      max-width: 74%; margin-top: auto; padding-top: .55rem;
    }
    .hc-card > .prize-strip .prize-rest .prize-item {
      width: auto; flex-direction: row; align-items: baseline; gap: .45em;
    }
    .hc-card > .prize-strip .prize-rest .prize-amount {
      font-size: clamp(1rem, 5cqi, 1.2rem); line-height: 1.15;
    }
    /* Money prizes are set like the champion card (James, 2026-09-29): the
       first amount is the big gold figure with "1ST" running up its left
       side, like TOTAL beside the winner's score, and the other places
       follow as one Space Mono caption, like "Won by 51 over Paul M". */
    /* Close under the heading (James, 2026-09-29); the caption takes the
       bottom of the card instead. */
    .hc-card > .prize-strip.prize-money .prize-item--first {
      margin: .3rem 0 0; flex-direction: row; align-items: flex-end; gap: 0;
    }
    .hc-card > .prize-strip.prize-money .prize-item--first .prize-place {
      writing-mode: vertical-rl; transform: rotate(180deg);
      align-self: flex-start; text-align: right; margin: 0 .3rem 0 0;
      line-height: 1.2;
    }
    .hc-card > .prize-strip.prize-money .prize-item--first .prize-amount {
      font-size: var(--prize-first-fit, clamp(5.04rem, 45.6cqi, 9.6rem));
      line-height: .72;
    }
    /* Straight under the first amount (James, 2026-09-29): 2nd and 3rd a
       step bigger on one line, then 4th onwards as one flush-left run with
       commas, "4TH £10, 5TH £5", so a 6th place can simply join it. The
       indent is the upright "1ST" beside the first amount (its line box
       plus margin) and the pound sign's own side bearing at that size, so
       every line starts under the first amount's "£". The fit script
       still sets the places smaller (--prize-rest-fit) if a line of long
       amounts would not fit the card. */
    .hc-card > .prize-strip.prize-money .prize-rest {
      padding-left: calc(.62rem * 1.2 + .3rem + 3px);
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 0;
      margin-top: .55rem; padding-top: 0; max-width: none;
      font-size: var(--prize-rest-fit, .74rem);
    }
    .hc-card > .prize-strip.prize-money .prize-rest > .prize-item {
      order: 2; margin-right: .6rem; font-size: .9em;
    }
    .hc-card > .prize-strip.prize-money .prize-rest > .prize-item:nth-child(-n + 2 of .prize-item) {
      order: 0; font-size: 1.35em; margin-right: clamp(.9rem, 5cqi, 1.4rem);
    }
    /* The line break between 3rd and the run. */
    .hc-card > .prize-strip.prize-money .prize-rest::before {
      content: ''; order: 1; flex-basis: 100%; height: 0;
    }
    .hc-card > .prize-strip.prize-money .prize-rest > .prize-item:nth-child(n + 3 of .prize-item):not(:last-child) .prize-amount::after {
      content: ',';
    }
    .hc-card > .prize-strip.prize-money .prize-rest .prize-item { gap: .4em; }
    .hc-card > .prize-strip.prize-money .prize-rest .prize-amount {
      font-family: 'Space Mono', monospace; font-weight: 400;
      font-size: 1em; line-height: 1.65; letter-spacing: .01em;
    }
    .hc-card > .prize-strip.prize-money .prize-rest .prize-place { font-size: .84em; }
    /* width: auto undoes the old phone rule that stretched each glory place
       and title to a full, centred line (.prize-glory .prize-place). */
    .hc-card > .prize-strip .prize-amount { width: auto; white-space: nowrap; text-align: left; }
    .hc-card > .prize-strip .prize-place { width: auto; flex: none; text-align: left; }
    .header-cards-dots { display: none; }
    /* The row swipes up to 999px. Three across below that left each card
       about 220px wide on a tablet: a four-line name and a card 200px
       taller than its drawing. From 720px two cards show at once, with
       the edge of the third as the cue to swipe. */
    @media (max-width: 999px) {
      .header-cards--row {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: .75rem; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge) .9rem;
        scroll-padding: 0 var(--edge); scrollbar-width: none;
      }
      .header-cards--row::-webkit-scrollbar { display: none; }
      /* The strip is a focusable region while it scrolls (base.html), so a
         keyboard can see where it is. Inset, because it bleeds to the edges. */
      .header-cards--row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
      .header-cards--row > .hc-card { flex: 0 0 89%; scroll-snap-align: start; }
      @media (min-width: 720px) {
        .header-cards--row > .hc-card { flex-basis: calc(50% - 2rem); }
      }
      .header-cards-dots { display: flex; justify-content: center; gap: .45rem; margin: 0 0 .6rem; }
      .header-cards-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(138,96,16,.3); transition: background .2s; }
      .header-cards-dots i.on { background: #8a6010; }
    }

    /* One type system across the three cards (James, 2026-09-26): a small
       gold label, a navy Cormorant heading at the same size on every card,
       then the details in Space Mono and the figures (the
       leader's score, the prize titles) in Cormorant. Sizes follow each
       card's padded content width, so the three headings always match. The
       left padding is the same .825rem as a phone's at every width. */
    .header-cards--row .page-info-card.hc-card,
    .hc-card > .leader-band, .hc-card > .prize-strip {
      container-type: inline-size;
      /* The side padding is named so the tournament card's nine-slice can add
         it back: 100cqw is the content box, not the card. The left is the
         phone's .825rem at every width (James, 2026-09-29): the cards are
         no wider on a desktop, and 30px read as a gap. */
      --hc-pad-l: .825rem; --hc-pad-r: var(--space-5);
      padding: calc(var(--space-4) * 2 / 3) var(--hc-pad-r) var(--space-4) var(--hc-pad-l);
    }
    .hc-eyebrow, .hc-card .leader-band-eyebrow {
      font-family: 'Space Mono', monospace; font-size: .62rem; line-height: 1.2;
      text-transform: uppercase; letter-spacing: .2em; color: var(--gold);
      display: flex; align-items: center; gap: .45rem; margin: 0 0 .45rem;
    }
    /* The labels sit above each card, not in it (James, 2026-09-26): one less
       line inside keeps every card at the drawing's own shape. Their left
       edge is the card's left edge. */
    .header-cards--row { padding-top: 1.2rem; }
    .hc-card .hc-eyebrow, .hc-card .leader-band-eyebrow {
      position: absolute; top: -1.15rem; left: 6px; margin: 0; white-space: nowrap;
    }
    .hc-eyebrow .eyebrow-status { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; gap: .45rem; }
    .hc-card .hero-eyebrow { margin: 0; padding: 0; }
    /* The course and town under the tournament's name, as its subtitle. */
    .hc-venue {
      font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
      font-size: clamp(1rem, 4.6cqi, 1.2rem); line-height: 1.2;
      color: #5c4a2a; margin: .1rem 0 0;
    }
    .hc-card .hero-eyebrow .eyebrow-text,
    .hc-card .leader-band-name,
    .hc-card .prize-head {
      font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700;
      font-size: clamp(1.35rem, 7.4cqi, 1.95rem); line-height: 1.1;
      color: #0a1626; letter-spacing: 0; text-transform: none; margin: 0;
    }
    /* No rules under the headings (James, 2026-09-26). */
    .hc-card .leader-band-name { width: 100%; overflow: hidden; }
    .hc-card .leader-band-meta { padding-top: 0; width: 100%; }
    .hc-card .prize-head {
      width: 100%; padding-bottom: 0;
    }
    /* The prize list's gap would sit between the label and the heading too. */
    .hc-card > .prize-strip .hc-eyebrow { margin-bottom: calc(.45rem - clamp(.2rem, 1.6cqi, .6rem)); }
    /* The rows' own type size on the block too, so the slope's lh is a line. */
    /* A block, not the flex column it is elsewhere: a float inside a flex
       container is just another item, and the rows must wrap round it. */
    .hc-card .tourn-info-rows { display: block; margin-top: .3rem; padding-top: 0; border-top: 0;
      font-size: .74rem; line-height: 1.65; }
    .hc-card .tourn-info-rows > * + * { margin-top: .3rem; }
    .hc-card .tourn-info-row, .hc-card .leader-band-meta {
      font-family: 'Space Mono', monospace; font-size: .74rem; line-height: 1.65;
      color: #2b2419; letter-spacing: .01em; text-transform: none;
    }
    .hc-card > .leader-band { gap: 0; }
    .hc-card .leader-band-left { gap: 0; width: 100%; }
    .hc-card .leader-band-meta { margin-top: .3rem; }
    .hc-card .leader-band-vacant .leader-band-name { color: #0a1626; }
    .hc-card .leader-band-vacant .leader-band-score { display: none; }
    /* The score fills the space the drawing leaves: centred in what is left
       under the name, large, with a small label, so a one-line leader does not
       leave the card empty (James, 2026-09-26). */
    .hc-card .leader-band-score {
      font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700;
      font-size: clamp(3.6rem, 28cqi, 6rem); line-height: .72; color: var(--gold);
      font-variant-numeric: lining-nums;
      margin: auto 0; padding-top: .15rem; display: flex; flex-direction: column;
    }
    /* Joint leaders share the card, so their score is smaller; a single
       winner, the usual case, gets an enormous one (James, 2026-09-26). */
    .hc-card > .leader-band .leader-band-score { font-size: clamp(2.6rem, 18cqi, 4rem); }
    /* The score sits just under the name, not pinned to the foot of the
       card: a row made taller by the next card left a wide gap between the
       winner and the total (James, 2026-09-29). */
    /* Winners (James's sketch, 2026-09-26): names, then the score with
       TOTAL running up its left side, then the margin as a caption
       underneath, like the plate on a trophy. */
    .hc-card > .leader-band--solo .leader-band-left,
    .hc-card > .leader-band--few .leader-band-left { display: contents; }
    .hc-card > .leader-band--solo .leader-band-name,
    .hc-card > .leader-band--few .leader-band-name { order: 1; }
    .hc-card > .leader-band--solo .leader-band-score,
    .hc-card > .leader-band--few .leader-band-score {
      order: 2; margin: .35rem 0 0; align-self: flex-start;
      flex-direction: row; align-items: flex-end;
    }
    .hc-card > .leader-band--solo .leader-band-score { font-size: clamp(5rem, 42cqi, 9rem); }
    /* Joint leaders get the winner's big total too, so it fills the space
       beside the sign; the script in base.html shrinks it only where the
       sign needs the room (James, 2026-09-29). Four or more share this
       layout with two or three. */
    .hc-card > .leader-band--few .leader-band-score { font-size: clamp(5rem, 42cqi, 9rem); }
    .hc-card > .leader-band--solo .leader-band-score::before,
    .hc-card > .leader-band--few .leader-band-score::before {
      writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 .3rem 0 0;
      align-self: flex-start; text-align: right;
    }
    .hc-card > .leader-band--solo .leader-band-meta,
    .hc-card > .leader-band--few .leader-band-meta { order: 3; margin-top: .45rem; }
    .hc-card .leader-band-score::before {
      content: 'Total'; font-family: 'Space Mono', monospace; font-weight: 400;
      font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
      /* --gold3 rather than --gold: this label and the prize places sit on
         the card's lined parchment art, which is darker than plain paper
         (sampled 3.4:1 in --gold, 4.7:1 in --gold3). */
      color: var(--gold3); line-height: 1.2; margin-bottom: .1rem;
    }
    /* The live change sits top right, over the leaderboard sign and level
       with the top of the leader's name, green like the movers strip and a
       size up from its chips (James, 2026-09-29). The script in base.html
       lines it up with the sign's right post. */
    .hc-card .leader-band-delta {
      position: absolute; right: var(--space-4); top: var(--space-4); margin: 0;
      font-family: 'Space Mono', monospace; font-weight: 700;
      font-size: calc(var(--text-4) * 1.3); line-height: 1; letter-spacing: 0;
      color: var(--birdie); background: rgba(26,112,64,0.08);
      border: 1px solid rgba(26,112,64,0.25); border-radius: 2px;
      padding: .32rem .58rem;
    }
    .hc-card > .prize-strip .prize-head { margin-bottom: 0; }
    .hc-card > .prize-strip .prize-place, .hc-card > .prize-glory .prize-place {
      font-size: .62rem; letter-spacing: .2em; color: var(--gold3);
    }
    .hc-card > .prize-strip .prize-amount, .hc-card > .prize-glory .prize-amount {
      font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: #2b2419;
    }
    @media (max-width: 719px) {
      .header-cards--row .page-info-card.hc-card,
      .hc-card > .leader-band, .hc-card > .prize-strip {
        --hc-pad-l: .825rem; --hc-pad-r: 1.1rem;
        padding: .667rem var(--hc-pad-r) 1rem var(--hc-pad-l);
      }
    }

    .prize-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
    }
    .prize-place {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: rgba(138,96,16,0.55);
    }
    .prize-amount {
      font-family: 'Cinzel', serif;
      font-size: var(--text-5);
      font-weight: 600;
      color: var(--gold2);
    }

    .prize-div {
      width: 1px;
      background: rgba(212,175,85,0.2);
      margin: 0.25rem 0;
    }
    @media (min-width: 720px) {
      .prize-strip { padding: 1rem 1.5rem; gap: 0.75rem; }
    }
    @media (orientation: landscape) and (max-height: 500px) {
      .prize-strip { padding: 0.75rem 1rem; gap: 0.6rem; }
    }

    @media (max-width: 719px) {
      .prize-strip.prize-glory {
        flex-direction: column;
        gap: var(--space-3);
      }
      .prize-glory .prize-item { width: 100%; }

      .prize-glory .prize-place,
      .prize-glory .prize-amount { width: 100%; text-align: center; }
      .prize-glory .prize-div { display: none; }
    }

    body, header, .card, main,
    .scoreboard thead tr, .scoreboard th, .scoreboard td,
    .picks-row td, .pick-card,
    .input, .prize-strip, .flash,
    .nav-link {
      transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .acct-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
    .acct-row:last-child { border-bottom: none; }
    .acct-v {
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .acct-group { flex: 0 0 100%; }
    /* A whole-row tap target, so the dotted rule is the text's own underline
       rather than a border across the full width. */
    a.acct-group {
      display: flex; align-items: center; min-height: 44px; border-bottom: 0;
      text-decoration: underline dotted var(--gold); text-underline-offset: 3px;
    }
    .acct-hint {
      font-family: 'Crimson Text', serif;
      font-size: var(--text-3);
      color: var(--muted);
      margin-top: var(--space-1);
    }
    .acct-signout { margin-top: var(--space-5); }

    .acct-head { padding-left: calc(var(--space-4) + 1px); }

    @media (max-width: 480px) {
      .picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

      .pick-card {
        min-width: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.2rem;
        padding: 0.5rem 0.6rem 0.55rem;
      }
      .pick-card > .pill   { order: 1; }

      .pick-card > .pick-check { order: 2; }
      .pick-card > span:nth-child(2) {
        order: 3;
        width: 100%;
        font-size: var(--text-4) !important;
        line-height: 1.3;
        white-space: normal;
        margin-left: 0;
      }
    }

    /* Author display rules must not override the hidden attribute. */
    .page-home [hidden] { display: none !important; }

    /* Homepage ground also covers the space around the shared footer. */
    body.page-home { background: #F5F2E7; }

    .hp-band {
      margin: 0;
      height: var(--mast-h);
      padding: 0 var(--space-2);
      background: var(--logo-ground);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
    }

    .hp-brand {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      font-size: var(--text-5);
      font-weight: 400;
    }

    .hp-brand-link { display: flex; text-decoration: none; border-radius: 2px; }
    /* One focus ring (gold2, offset 3px) for the brand link and the tournament cards. */
    .hp-brand-link:focus-visible, .hp-card:focus-visible {
      outline: 2px solid var(--gold2);
      outline-offset: 3px;
    }

    .hp-mark { display: block; height: 80px; width: auto; flex: 0 0 auto; }

    .hp-actions {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      gap: var(--space-2);
      flex: 1 1 auto;
      min-width: 0;
    }
    .hp-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);

      flex: 0 0 calc((100% - var(--space-2) * 3) / 4);
      min-width: 0;
      max-width: 92px;
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      color: var(--gold2);
      text-decoration: none;
      cursor: pointer;
    }

    .hp-action-ring {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 37px;
      height: 37px;
      flex: 0 0 auto;
      border: 2px solid var(--gold2);
      border-radius: 50%;
      transition: border-color 0.18s ease, background-color 0.18s ease;
    }
    .hp-action-ring svg { display: block; width: 21px; height: 21px; }

    .hp-action-ring--id {
      font-family: 'Cinzel', serif;
      font-size: var(--text-6);
      font-weight: 600;
      line-height: 1;
      color: var(--paper);
    }
    .hp-action-label {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      text-transform: uppercase;
      letter-spacing: 0.16em;
      /* Counter the trailing letter-spacing so the label remains centred. */
      text-indent: 0.16em;
      line-height: 1.45;
      text-align: center;
      color: var(--rule);
    }
    .hp-action:hover .hp-action-ring,
    .hp-action:focus-visible .hp-action-ring {
      border-color: var(--rule);
      background: rgba(208,191,160,0.12);
    }
    .hp-action:focus-visible {
      outline: 2px solid var(--rule);
      outline-offset: 4px;
      border-radius: 4px;
    }

    .hp-action--soon { cursor: default; opacity: 0.62; }
    .hp-action--soon .hp-action-ring { border-style: dashed; }
    .hp-action--soon:hover .hp-action-ring { border-color: var(--gold2); background: none; }

    @media (min-width: 720px) {

      .hp-band {
        margin: 0;
        height: var(--mast-h);
        padding: 0 max(2rem, calc((100% - 1140px) / 2 + 2rem));
        border-radius: 0;
        gap: var(--space-4);
      }

      .hp-actions { gap: var(--space-3); }
      .hp-action-ring svg { width: 24px; height: 24px; }
      .hp-action-ring--id { font-size: var(--text-7); }
    }

    @media (min-width: 1024px) {
      .hp-band {
        padding-inline: max(3rem, calc((100% - 1140px) / 2 + 3rem));
      }
    }

    /* Same face, size and weight as the Picks page heading
       (.page-info-card .eyebrow-text), so the three board pages match. */
    .lb-page-title,
    .doc-head h1 {
      margin: 0 0 1.5rem;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(1.9rem, 6vw, 2.4rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--gold3);
    }

    .hp-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 3px;
      overflow: hidden;
      color: var(--ink);
      text-decoration: none;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .hp-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: var(--rule);
    }
    .hp-card--live::before { background: var(--birdie); }
    .hp-card--upcoming::before {
      background: repeating-linear-gradient(to bottom, var(--birdie) 0px 5px, transparent 15px 19px);
    }
    .hp-card--finished { background: var(--felt); }
    .hp-card:hover,
    .hp-card:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(28,28,26,0.14);
    }

    .hp-card-note {
      display: block;
      margin-top: var(--space-2);
      font-family: 'Space Mono', monospace;
      font-size: var(--text-2);
      line-height: 1.5;
      color: var(--gold2);
      font-weight: 700;
    }

    @media (prefers-reduced-motion: reduce) {
      .hp-card,
      .hp-action-ring { transition: none; }
      .hp-card:hover,
      .hp-card:focus-visible { transform: none; }
    }

    .cg-change {
      color: var(--gold3);
      text-decoration: none;
      border-bottom: 1px dotted currentColor;
    }
    .cg-change:hover,
    .cg-change:focus-visible { color: var(--gold2); }

    .cg-change--plain { border-bottom: 0; }

    /* The small gold-ink labels of the create screen: a label, so 13.6px, not smaller. */
    .cg-question {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-4);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--muted);
      margin: 0 0 0.45rem;
    }
    /* The chosen tournament, printed; Change (a <details> summary) swaps it for the select. */
    .cg-tournament-name,
    .cg-tournament > summary {
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      color: var(--ink);
      margin: 0;
    }
    .cg-tournament > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      min-height: 44px;
      cursor: pointer;
      list-style: none;
    }
    .cg-tournament > summary::-webkit-details-marker { display: none; }
    .cg-tournament[open] > summary { display: none; }
    .cg-pot { margin-bottom: var(--space-3); }
    /* The pound sign sits inside the field; the number starts after it. */
    .cg-money { position: relative; }
    .cg-money-sign {
      position: absolute;
      left: 0.9rem;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      color: var(--muted);
      pointer-events: none;
    }
    .cg-money .input { padding-left: 2rem; }

    /* The create screen's labels are 13.6px (the floor is 12), not .field label's 9.6px;
       the terms line is reading text, so it is the serif at 16px. Both carry .cg-form
       to outrank .field label. */
    .cg-form .field label { font-size: var(--text-4); }
    .cg-form .field label.cg-consent {
      display: flex;
      gap: 0.6rem;
      align-items: flex-start;
      margin: 0;
      text-transform: none;
      letter-spacing: 0;
      font-family: 'Crimson Text', serif;
      font-size: var(--text-5);
      line-height: 1.45;
      color: var(--muted);
      cursor: pointer;
    }
    /* Tick boxes are 1.25rem, and the whole label is the target (the tap floor). */
    .cg-consent input,
    .cg-tick input { width: 1.25rem; height: 1.25rem; margin: 0; flex: 0 0 auto; }
    .cg-tick { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin: 0; cursor: pointer; }
    .cg-tick { font-family: 'Crimson Text', serif; font-size: var(--text-5); color: var(--ink); }
    .cg-hint { margin-bottom: var(--space-3); }
    /* In-line link in the terms sentence: gold, underlined, as the board's links are. */
    .cg-consent-terms { display: inline-block; padding: 1px 0; color: var(--gold); border-bottom: 1px dotted var(--gold); text-decoration: none; }
    /* The board's gold button is 14.4px; on this page it is the one thing to press, at the 16px floor. */
    .btn.btn-gold.cg-submit { width: 100%; font-size: var(--text-5); }

    .cg-walk-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      margin-top: var(--space-4);
      padding-top: var(--space-3);
      border-top: 1px solid var(--rule);
    }

    .cg-walk-foot > form { margin-left: auto; }

    .cg-back,
    .cg-start-again {
      font-family: 'Space Mono', monospace;
      font-size: var(--text-4);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      background: none;
      border: 0;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      min-width: 44px;
      padding: 0 var(--space-1);
      text-decoration: none;
      cursor: pointer;
    }
    .cg-back:hover,
    .cg-back:focus-visible,
    .cg-start-again:hover,
    .cg-start-again:focus-visible { color: var(--gold3); }

    /* ═══════════════════════════════════════════════════════════════════
       THE SCORECARD (.sc-*)

       Ported from design/claude-design/01b-scorecard-walk.html, which is the
       design and stays the reference. Read the mock's comments before changing
       anything here: several of these rules look wrong and are not, and the
       reasons are recorded there and repeated where they are load-bearing.

       It is one object doing two jobs. While you pick, IN is the golfers in
       your team and OUT is the group you are choosing from. Once the golf
       starts, IN is your golfers still in the tournament and OUT is the ones
       cut or retired. Same two words, different work, both true golf usage.
       That is James's idea and it is what makes the form and the view the same
       thing.

       ⚠ TWO RULE WEIGHTS AND THREE INKS ON THE PRESS, PLUS ONE PEN. Not four
       inks, not a grey. A test asserts it, because the easiest way to spoil
       this is to add a colour for one small thing.

       TYPE HERE IS LITERAL PX, ON PURPOSE. The card is a fixed 350px object
       whose boxes, rules and figures are all in px, and every size was set
       against the printed original. The text scale (--text-1 to --text-8) is
       rem and would resize the type with the reader's browser setting while
       the boxes stayed put, and no step of it equals these sizes anyway. So no
       .sc-* or .dotted-editor px size is moved onto the scale.
       ═══════════════════════════════════════════════════════════════════ */
    .sc-card {
      --sc-card:    #FAF7EE;
      --sc-yellow:  #E8C425;   /* the group column */
      --sc-red:     #CF1F19;   /* WR/HOLE, and the banner */
      --sc-green:   #1B5E3A;   /* the rules panel, and the button */
      --sc-reverse: #FBF7EC;
      --sc-ink:     #17150F;
      --sc-biro:    #22366F;   /* the pen, and the only blue */
      --sc-press:   #1A1508;   /* the press's figures: a hair warmer than --sc-ink, kept as printed */
      --sc-hair:    var(--sc-ink);
      --sc-w-hair:  0.8px;
      --sc-w-rule:  1.8px;

      position: relative;
      /* Contains the paper's multiply blend (.sc-stock) to the card. Loose,
         it blended up to the page, so opening an entrant's card made the
         browser recomposite the whole page and every letter re-smoothed, a
         1px nudge (James, 2026-09-26). The card's background is opaque, so
         the paper looks the same. */
      isolation: isolate;
      margin-top: 10px;
      background: var(--sc-card);
      color: var(--sc-ink);
      font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
      /* ⚠ NOT KNOWN-OPAQUE, ON PURPOSE. Chrome only uses subpixel
         antialiasing over a guaranteed opaque backdrop, and subpixel AA paints
         coloured fringes that become the type's colour at these sizes. A card
         that is 0.999 opaque is composited on its own layer and gets greyscale
         AA instead. -webkit-font-smoothing does nothing about this on Windows.
         The mock measured 87% of a footnote's ink pixels coming back strongly
         coloured on a two-ink card before this line existed. */
      opacity: 0.999;
      overflow: hidden;
    }

    @media (min-width: 720px) {
      .sc-card,
      .dotted-editor .sc-card--walk {
        max-width: 350px;
        margin: 10px 60px;
      }
    }

    /* ── The substrate ──────────────────────────────────────────────────
       ⚠ IT SITS OVER EVERY MARK, NOT UNDER THEM. Under them it is a background
       texture and reads as one. Over them, in multiply, the fibre and the light
       modulate the INK, which is what "printed on stock" means.

       ⚠ THREE ELEMENTS, THREE MULTIPLIES. As three backgrounds on one element
       the opaque fibre hides the two beneath it and the light never reaches the
       page: the mock measured a left-to-right trend of 0.13 of a level that
       way. Multiply composes by multiplying; stacked backgrounds do not.

       The fibre is a baked 128px tile (scripts/bake_card_stock.py); the other
       two are gradients, because CSS draws a gradient for nothing and baking a
       ramp is strictly worse than describing one. ────────────────────────── */
    .sc-stock {
      position: absolute;
      inset: 0;
      pointer-events: none;
      mix-blend-mode: multiply;
    }
    .sc-stock--fibre {
      background-image: var(--img-card-fibre, url('../img/card-fibre.png'));
      background-repeat: repeat;
    }
    .sc-stock--cockle {
      background-image: radial-gradient(120% 60% at 30% 20%,
                        rgba(255,255,255,1) 0%, rgba(240,238,232,1) 100%);
    }
    /* Light from the left. An early pass darkened BOTH edges, which is a
       vignette: a photograph of paper, not paper. */
    .sc-stock--light {
      background-image: linear-gradient(100deg,
                        rgba(255,255,255,1) 0%, rgba(243,241,235,1) 100%);
    }

    /* ── The head ─────────────────────────────────────────────────────── */
    /* A masthead is printed on the stock before anybody writes on it, so it is
       set the way a club card sets its own name. The group's name arrives in
       whatever case its organiser typed. */
    .sc-club {
      font: 700 11.5px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.13em; text-transform: uppercase;
      text-align: center; padding: 20px 0 7px;
    }
    .sc-sss {
      font: 400 6.8px/1.45 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.13em; text-transform: uppercase;
      text-align: center; padding: 0 16px 6px;
    }
    .sc-pad { padding: 0 12px; }

    .sc-fill { display: flex; align-items: flex-end; gap: 8px; padding: 8px 0 3px; }
    /* More air between the head's lines while the card is a form being
       filled in (James, 2026-09-30). The board's finished cards keep 8px. */
    .dotted-editor .sc-fill { padding-top: 16px; }
    /* The Entrant line keeps its air; the two printed lines under it, which
       nobody fills in, sit closer together (James, 2026-09-30). */
    .dotted-editor .sc-fill:not(.sc-fill--entrant) { padding-top: 4px; }
    .dotted-editor .sc-fill--entrant + .sc-fill { padding-top: 16px; }
    .sc-fill .sc-k {
      font: 400 6.4px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.13em; text-transform: uppercase;
      white-space: nowrap; padding-bottom: 2px;
    }
    /* One column for the labels, so every written line on the head starts at
       the same place. 66px clears the longest of them, Competition. Only the
       first label of a row is in that column: Fee and Date sit against their
       own short fields at the right. */
    .sc-fill > .sc-k:first-child { min-width: 66px; }
    /* A printed rule does not move because somebody wrote on it.

       ⚠ THE CLIP MARGIN IS WHAT LETS A TAIL CROSS THE RULE. `overflow: hidden`
       clips at the padding edge, which on this box is the rule itself: every
       descender below the line was sliced off flat, and the hand's jog and
       slant took the tops off a long name as well. Padding cannot buy that
       room back -- the clip edge sits inside the border wherever the padding
       puts it -- so the box says how far past its own edges it will still
       draw. The hidden declaration above it is what an engine too old for
       `clip` falls back to. */
    .sc-fill .sc-v {
      flex: 1; min-width: 0; border-bottom: var(--sc-w-hair) solid var(--sc-hair);
      padding-bottom: 1px; height: 19px; white-space: nowrap;
      overflow: hidden;
      overflow: clip;
      overflow-clip-margin: 6px;
    }

    /* ── The table ────────────────────────────────────────────────────── */
    .sc-th {
      display: flex; align-items: stretch; height: 17px;
      border: var(--sc-w-rule) solid var(--sc-hair);
    }
    .sc-th span {
      font: 700 6.4px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.12em; text-transform: uppercase;
      display: flex; align-items: center; justify-content: center;
    }
    .sc-th span + span { border-left: var(--sc-w-hair) solid var(--sc-hair); }
    /* The fourth column's head is knocked out of the red, the way the Red Yards
       head is on the club card, so the plate announces itself before the first
       figure lands on it. */
    .sc-th .sc-wrh { background: var(--sc-red); color: var(--sc-reverse); }

    .sc-band {
      display: flex; align-items: center; height: 19px;
      border: var(--sc-w-hair) solid var(--sc-hair); border-top-width: 0;
      font: 700 7.5px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.15em; text-transform: uppercase; padding-left: 9px;
    }
    /* ⚠ IN AND OUT RULE OFF NOTHING, so they draw no line. James, 2026-09-07:
       "I wanted the border gone from the IN and OUT". Their sum box is empty --
       the band is a heading, not a row -- so a hairline there was dividing a
       word from a blank. Total is the exception below: its box carries the
       figure, and the rule is what separates the word from the number. */
    .sc-band .sc-sum {
      margin-left: auto; width: 40px; align-self: stretch;
      display: flex; align-items: center; justify-content: center;
    }
    .sc-band--tot .sc-sum {
      border-left: var(--sc-w-hair) solid var(--sc-hair);
    }
    .sc-band--tot {
      border-top: var(--sc-w-rule) solid var(--sc-hair);
      border-bottom: var(--sc-w-rule) solid var(--sc-hair);
      height: 24px; font-size: 8.5px;
      /* Two abutting rules stack into one 2.6px black bar without this. */
      margin-top: calc(0px - var(--sc-w-hair));
    }

    /* The banner, exactly where the club card puts it: full width, flush across
       the grid, between the two halves. Its words are that card's own and James
       kept them because they are a fun line. */
    .sc-shout {
      border: var(--sc-w-hair) solid var(--sc-hair); border-top-width: 0;
      font: 700 10px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.09em; color: var(--sc-red);
      text-transform: uppercase; text-align: center; padding: 6px 0 6px;
    }

    /* A block is one group, and the letter is ONE cell spanning every row it
       covers. James: "A should only be once". */
    .sc-blk {
      display: flex; align-items: stretch;
      border: var(--sc-w-hair) solid var(--sc-hair); border-top-width: 0;
      /* ⚠ THE YELLOW IS A PLATE AND IT IS OUT OF TRUE. As a cell background its
         boundary sat exactly on the rule on all four sides, and perfect
         registration is the most machine-looking thing a print homage can do.
         On the BLOCK's background it paints under this element's own border, so
         the black rules print OVER the yellow, the way a second pass does:
         proud at top and left, short at the bottom. */
      background-image: linear-gradient(90deg, rgba(0,0,0,0) 0 18px,
                        var(--sc-yellow) 18px 43px,
                        rgba(232,196,37,0.5) 43.6px, rgba(0,0,0,0) 44.2px);
      background-repeat: no-repeat;
      background-position: -1.3px -1.4px;
      background-size: 100% calc(100% - 0.5px);
    }
    .sc-no { width: 18px; display: flex; flex-direction: column; }
    .sc-no i {
      flex: 1; display: flex; align-items: center; justify-content: center;
      font-style: normal; font: 400 8px/1 'Libre Baskerville', Georgia, serif;
    }
    .sc-no i + i { border-top: var(--sc-w-hair) solid var(--sc-hair); }
    .sc-grp {
      width: 26px; font: 700 9.5px/1 'Libre Baskerville', Georgia, serif;
      border-left: var(--sc-w-hair) solid var(--sc-hair);
      border-right: var(--sc-w-hair) solid var(--sc-hair);
      display: flex; align-items: center; justify-content: center;
    }
    /* The red plate runs the full depth of the block over the fourth column and
       lands a shade off the black the OTHER way from the yellow: two plates,
       two passes, neither of them true. */
    .sc-rows {
      flex: 1; display: flex; flex-direction: column;
      background-image: linear-gradient(90deg,
        rgba(0,0,0,0) 0 calc(100% - 70px),
        var(--sc-red) calc(100% - 69.3px) calc(100% - 40.4px),
        rgba(0,0,0,0) calc(100% - 39.8px) 100%);
      background-repeat: no-repeat;
      background-position: 0.9px 1.2px;
      background-size: 100% calc(100% - 0.7px);
    }
    .sc-tr { display: flex; align-items: stretch; height: 21px; }
    .sc-tr + .sc-tr { border-top: var(--sc-w-hair) solid var(--sc-hair); }
    .sc-nm {
      flex: 1; min-width: 0; padding-left: 9px;
      font: 400 10px/1 'Libre Baskerville', Georgia, serif;
      /* A row, not a column: the swap arrow, the name and "(ALT)" are
         separate flex items, and a column stacked them in a 21px row. */
      display: flex; align-items: center;
      white-space: nowrap; overflow: hidden;
    }
    /* On the name only, so the swap arrow beside it stays legible. .sc-card
       outranks the plain-link rule further down. */
    .sc-card .sc-nm--cut .sc-nm-txt { text-decoration: line-through; }
    /* R10: a swap's ↳ never goes away, so the entrant's card always shows he
       came in as a swap. Only the gold colour is time-limited (show_alt,
       set from before_first_tee in app.py) -- once play starts the arrow
       reads in the card's ordinary ink and "(ALT)" becomes "(SUB)". */
    .sc-alt-arrow { margin-right: 2px; }
    .sc-alt-arrow--gold,
    .sc-alt-tag { color: var(--gold2); font-weight: 700; }
    .sc-alt-tag { margin-left: 3px; }
    /* (SUB), after the first tee: still says "came in for the DNS above",
       in the card's ordinary ink like the arrow. */
    .sc-alt-tag--sub { color: inherit; font-weight: 400; }
    .sc-c4, .sc-c5 {
      align-self: stretch; border-left: var(--sc-w-hair) solid var(--sc-hair);
      display: flex; align-items: center; justify-content: center;
    }
    .sc-c4 { width: 30px; }
    .sc-c5 { width: 40px; }
    /* Slice 6 (James, 2026-09-25): on the card you fill in, the last column
       holds Picks on In rows and Form on Out rows, so it is wide enough for
       three results ("CUT CUT CUT"). The plate is measured in from the
       rows' right edge, so it moves with the wider column. */
    .sc-card--walk .sc-c5 { width: 54px; padding: 0 2px; overflow: hidden; }
    .sc-card--walk .sc-rows {
      background-image: linear-gradient(90deg,
        rgba(0,0,0,0) 0 calc(100% - 84px),
        var(--sc-red) calc(100% - 83.3px) calc(100% - 54.4px),
        rgba(0,0,0,0) calc(100% - 53.8px) 100%);
    }
    .sc-card--walk .sc-band .sc-sum { width: 54px; }
    /* The Out band's Form label is a box of its own, ruled off like a head. */
    .sc-band .sc-sum--form {
      border-left: var(--sc-w-hair) solid var(--sc-hair);
      font: 700 6.5px/1 'Libre Baskerville', Georgia, serif; letter-spacing: 0.12em;
    }

    /* ── The two makers: a pen and a press ────────────────────────────── */
    /* ⚠ THE HAND IS DRAWN THROUGH A NOISE FIELD, which is a different kind of
       thing from per-glyph jitter. Independent jitter worked, in that every
       mark rendered distinctly, and three critics still called it a font,
       because INDEPENDENT PER-GLYPH JITTER AVERAGES OUT AT WORD SCALE. A
       displacement map is a spatially CORRELATED field: adjacent letters sample
       nearby noise, so a stroke bends the way its neighbour bends and the whole
       run drifts off together. That is what a hand does and what independent
       jitter cannot produce. It also fixed real names breaking (Fpeetwood,
       Hpjgaard) rather than trading against them.

       The filters live once in base.html and are referenced by id. Twenty-four
       of them per opened row would be twenty-four times n. */
    .sc-hw {
      font-family: 'Caveat', 'Segoe Script', cursive;
      color: var(--sc-biro); display: inline-block;
      letter-spacing: 0; white-space: nowrap;
    }
    /* ⚠ ONE PEN, ONE HAND, ONE SIZE ACROSS THE HEAD (James, 2026-09-15: the
       competition, date and fee "look different sizes (smaller) yet they have
       more room... should at least be same size"). Four fields somebody filled
       in at one sitting are written the same. A size is what a smaller field
       would need, not what it is worth: the date and the fee were set down
       because they used to share a line with something else, and each has a
       line of its own now.

       The weight was settled first, 600 rather than the mock's 500 (James,
       2026-09-06: the date read as a "slightly lighter biro than the others"
       -- a different ink rather than a smaller word). Same pen, and now the
       same hand holding it. */
    .sc-hw--n,
    .sc-hw--fee,
    .sc-hw--date { font-size: 18.5px; font-weight: 600; }
    /* A line to itself fits every tournament name PickM8 has seen at the full
       hand. Past 32 characters it would run off a 320px phone, so it drops --
       and only when scorecard.js is not there to fit it to the rule instead. */
    .sc-hw--tournament-long { font-size: 15.5px; }
    .sc-hw--f   { font-size: 14.5px; font-weight: 600; }
    /* The card's own score, and the figure the whole sheet is for. */
    .sc-hw--s, .sc-hw--sig { font-size: 18px;   font-weight: 500; }
    /* ⚠ THE PLAYER SIGNS; THE MARKER'S BOX IS STILL THE PRESS. Only the
       player's line changes face: nothing human vouches for the score here, so
       the marker's box carries PickM8's name in the card's own hand and stays
       exactly where it was.

       Caveat is a print-hand -- separate letters, which is why the same name in
       it reads as writing rather than as signing. Zeyada is joined and fast.
       The size and the drop are James's pick from the variants (2026-09-15, D
       "and can even come down a tiny bit more"): it sits over the rule rather
       than on it, and the tails come down through the wording underneath. That
       overhang is deliberate and it is why the line below it cannot be
       anything the reader needs to read.

       ⚠ THE DROP IS WHY NOTHING HERE MAY CLIP. .sc-sig .sc-l has no overflow
       of its own and must not be given one, and the foot's bottom padding is
       what keeps the tails inside the card. */
    .sc-hw--sig-player {
      font-family: 'Zeyada', 'Caveat', cursive;
      font-size: 34px; font-weight: 400;
      position: relative; top: 15px;
    }
    /* THE LINE YOU WRITE ON. An input in the same face and size as the hand,
       with nothing of a form about it: no border, no ground, no ring of its
       own. The card's rule underneath is the only line there has ever been.

       ⚠ NO INK FILTER HERE, AND THE RULE IS ENFORCED IN scorecard.js, which
       skips form controls. The filter displaces pixels and the caret is pixels:
       it would wander off the letters as you type. The written-in name gets the
       full hand the moment it appears on a card that only shows it. */
    .sc-hw-in {
      width: 100%; box-sizing: border-box;
      border: 0; background: none; padding: 0; margin: 0;
      -webkit-appearance: none; appearance: none;
      color: var(--sc-biro);
    }
    .sc-hw-in::placeholder { color: rgba(34, 54, 111, 0.34); }
    /* An empty Entrant line reads as a prompt in the site's typewriter
       capitals, not as faint handwriting that looks already written (James,
       2026-09-30). The INPUT takes the face while it is empty, not just its
       placeholder, because a placeholder cannot be moved on its own; the
       name typed into it goes back to the hand. */
    .sc-hw-in:placeholder-shown {
      font-family: 'Space Mono', monospace;
      font-size: 13px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding-bottom: 4px;
    }
    .sc-hw-in:placeholder-shown::placeholder { color: #6f6a5c; opacity: 1; }
    .sc-hw-in:focus { outline: none; }
    /* The card is the form, so the focus has to be visible ON the card.

       ⚠ INSET, NOT AN OUTLINE. .sc-v clips its overflow -- it has to, or a
       long name would run off the card -- so an outline drawn
       outside the input was CLIPPED BY THE LINE ITSELF and there was no visible
       focus at all. An inset ring is inside the box and cannot be clipped.
       Found by Codex. */
    /* ⚠ :focus-visible IS NOT KEYBOARD-ONLY ON A TEXT FIELD, which is what
       this rule was relying on. The spec has a text input match it on a plain
       mouse click too, because the field takes keyboard input, so the ring the
       card draws for tabbing came up for everybody who touched the Entrant
       line. James, 2026-09-15: "I don't really want a focus ring... only for
       keyboard tab entry". The ring is gated on a modality flag instead, set
       while the keyboard is moving focus and cleared the moment a pointer is
       used (trackFocusModality in scorecard-walk.js). No script means no
       flag, which means no ring: the fallback loses the keyboard ring rather
       than showing it to everyone. */
    html.using-keyboard .sc-hw-in:focus-visible {
      box-shadow: inset 0 0 0 2px var(--sc-red);
    }

    /* A HAND WRITES ON THE RULE, with the tails crossing it (James,
       2026-09-15: "closer to the line if not touching slightly in all cases").

       ⚠ ONE NUMBER ONLY BECAUSE THE HEAD IS ALL ONE SIZE. A span is
       baseline-aligned in a line box as deep as its tallest content, so two
       sizes at one offset do not sit at one height: a smaller hand rides
       higher off the rule. Give a head field its own size again and it will
       need its own nudge with it. This lands the baseline 1.5px above the
       rule, measured rather than guessed. */
    .sc-hw--lift { position: relative; bottom: -1px; }
    /* ⚠ THE COMPETITION RIDES HIGHER THAN THE REST OF THE HEAD, and it is the
       only line that does. It is the one field with descenders in the middle of
       a long word rather than at the end of a short one, so the same seating
       that reads as a hand resting on the rule everywhere else reads as the
       name diving through it (James, 2026-09-15). Its tails reach the rule
       instead of crossing it. */
    .sc-hw--tournament.sc-hw--lift { bottom: 1.5px; }

    /* The press, printed: the figures the golf produced. Same tray, same
       full-strength ink, but the sheet went through twice and did not land in
       the same place twice. */
    .sc-fig {
      font: 400 10.5px/1 'Libre Baskerville', Georgia, serif;
      color: var(--sc-press); transform: translate(0.4px, -0.3px); display: inline-block;
    }
    .sc-fig--wr  { color: var(--sc-reverse); font-size: 9.5px; transform: none; }
    /* Slice 6 (James's 2026-09-25 column design): printed, not handwritten
       -- same family as the other figures -- and the same size as WR's
       figure (9.5px) rather than a small note, so it reads as a real column
       and not a caption. Muted rather than full ink: it is context for the
       pick, not the pick itself. */
    .sc-fig--form {
      color: var(--muted); font-size: 9.5px; letter-spacing: 0.01em;
      transform: none; white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; max-width: 100%;
    }
    .sc-fig--cut {
      color: var(--sc-reverse);
      font: 700 6.4px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.08em; transform: none;
    }

    /* ── The foot ──────────────────────────────────────────────────────
       ⚠ STATIC, NOT ABSOLUTE. In the mock it is pinned to the bottom of a fixed
       phone frame. Here the card is as long as its contents, so pinning it
       anchors the signatures to the bottom of a box that is no longer the page.
       ─────────────────────────────────────────────────────────────────── */
    .sc-foot {
      margin: 0 12px; padding: 0 0 20px;
      /* Fit signatures to the board, rather than letting their unbroken text
         set the auto-layout table's minimum width before JS can fit them. */
      contain: inline-size;
    }
    /* ⚠ THE TOP PADDING IS HOW FAR THE SIGNATURE REACHES INTO THE TABLE, and
       it is small on purpose (James, 2026-09-15: "it would look great
       encroaching on the table a bit"). The row carries the caption with it,
       so closing this gap does not change how far the tails come down over the
       wording -- it only brings the tall strokes up across the Total rule.
       Nothing between here and the card clips, so they cross it rather than
       stopping at it. */
    .sc-sigs { display: flex; gap: 14px; align-items: flex-end; padding: 2px 0 4px; }
    /* ⚠ min-width: 0 OR THE SIGNATURE SETS THE COLUMN WIDTH. A flex item will
       not shrink below its content, and the hand is one unbreakable line, so a
       long name signed at this size shoulders the marker's box off the card
       instead of being fitted to its own. */
    .sc-sig { flex: 1; min-width: 0; }
    /* ⚠ THE TWO BOXES ARE NOT A HALF EACH. The marker's box holds one short
       word, the same one on every card ever printed; the player's holds a name
       nobody chose in advance, signed big. So the marker's line is cut to what
       PickM8 needs and the rest of the row goes to the player. */
    .sc-sig--marker { flex: 0 0 112px; }
    /* Bigger than the player's own printed name, and still the card's hand:
       the press signing off, not a person. 112px is what its caption needs to
       stay on one line; anything narrower and the two sides of the foot stop
       lining up. */
    .sc-sig--marker .sc-hw--sig {
      font-size: 21px;
      /* Seated on its rule like every other hand on the card. A span is
         baseline-aligned in a line box as deep as its tallest content, so at
         this size it floats 8px clear of the line unless it is nudged. */
      position: relative; bottom: -6.5px;
    }
    .sc-sig .sc-l {
      border-bottom: var(--sc-w-hair) solid var(--sc-hair); height: 24px;
      display: flex; align-items: flex-end; padding-bottom: 1px;
    }
    .sc-sig .sc-k {
      font: 400 7px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.13em; text-transform: uppercase; padding-top: 4px;
    }
    /* "Player since: 14 Mar 2026". The caption's own face in italic and plain case, so it
       reads as a note on the line above rather than a second caption. It is no smaller than
       the captions (its lowercase italic needs 10px to read as tall as the 7px capitals) and no fainter. It hangs from the caption's bottom edge into .sc-foot's 20px
       padding instead of taking height, so the player's and marker's captions stay level. */
    .sc-sig { position: relative; }
    .sc-sig .sc-since {
      position: absolute; left: 0; top: 100%; margin-top: 3px; max-width: 100%;
      font: italic 400 10px/1.2 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.02em; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }

    /* The one thing on the sheet you can press, and the only green on it until
       the rules panel came along and made the fourth plate earn its pass. */
    .sc-btn {
      display: block; width: 100%;
      border: var(--sc-w-rule) solid var(--sc-green);
      background: var(--sc-green); color: var(--sc-reverse);
      padding: 9px 0; text-align: center;
      font: 700 8px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
      /* 44px is the floor for a thing a thumb has to find. */
      min-height: 44px;
    }
    .sc-btn:disabled { opacity: 0.45; cursor: default; }
    /* And the one at the foot, which now follows a signature that comes down
       over its own caption. */
    .sc-foot .sc-btn { margin-top: 20px; }

    /* ── The back: the course, and the local rules ────────────────────── */
    .sc-sect {
      font: 700 8px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.17em; text-transform: uppercase;
      text-align: center; padding: 12px 0 5px;
    }
    /* Boxed on all four sides. Its heading is type on paper, not a lid, so
       without a top edge the map hung off the card rather than sitting in it. */
    .sc-map {
      border: var(--sc-w-hair) solid var(--sc-hair);
    }
    .sc-map img { display: block; width: 100%; height: auto; }

    /* THE BACK OF THE CARD, which is a sibling of the card rather than a child
       of it: the edit strip has to sit between them, and it cannot go inside a
       card that editing hides. It carries the two colours and the face it needs
       and nothing else, because it is a solid panel and never shows paper. */
    .sc-back {
      --sc-green:   #1B5E3A;
      --sc-reverse: #FBF7EC;
      font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    }
    /* ⚠ THE SAME PANEL IS INSET IN ONE PLACE AND FULL WIDTH IN THE OTHER, and
       both are right, because it is two different things.

       On the confirmation card it is a panel ON the paper, printed among the
       table and the course, so it takes the card's own margins and lines up
       with them.

       Under a card on the board it is the BACK of the card -- .sc-back is a
       sibling of .sc-card, a solid panel that never shows paper -- so there it
       runs the full width and the inset would leave a gap down each side that
       nothing else on the board has. That is what the negative margins were
       for; they only looked wrong because they were applied to both.
       (James spotted it on the board the moment the inset shipped.) */
    .sc-rules {
      background: var(--sc-green); color: var(--sc-reverse);
      margin: 12px 0; padding: 9px 10px 14px;
    }
    .sc-back .sc-rules { margin-left: -12px; margin-right: -12px; }
    .sc-rules-h {
      font: 700 14px/1 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.17em; text-transform: uppercase;
      text-align: center; padding: 0 0 8px;
    }
    .sc-rules-cols { column-count: 2; column-gap: 11px; }
    .sc-rule { break-inside: avoid; padding: 0 0 7px; }
    .sc-rule b {
      display: block; font: 700 10px/1.35 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 1px;
    }
    .sc-rule span {
      display: block;
      font: 400 9px/1.62 'Libre Baskerville', Georgia, serif;
      letter-spacing: 0.06em;
    }

    /* ── The card inside the board ─────────────────────────────────────
       ⚠ FLUSH, EDGE TO EDGE (James, 2026-09-05). No inset, no shadow, no card
       posed at an angle. The design has refused staging from the start and this
       is where it would have crept back in. The cell's own padding is what has
       to go, not the card's width. ─────────────────────────────────────── */
    .picks-row td.sc-cell { padding: 0; }

    /* A golfer's name is a name, not a link, even where the tournament makes it
       one. The only thing on the card that should look pressable is the button. */
    .sc-card .sc-link { color: inherit; text-decoration: none; }

    /* The row whose golfer just changed, so a swap is visible on a card where
       nothing else moved. */
    @keyframes scSettle {
      0%   { background: rgba(232, 196, 37, 0.55); }
      100% { background: rgba(232, 196, 37, 0); }
    }
    .sc-tr.sc-settled { animation: scSettle 0.9s ease-out; }

    /* ⚠ .sc-card--nohole IS GONE, and nothing replaces it. The card could
       once drop its Hole column, and this turned the red plate off with it:
       the plate is a gradient measured in from the rows' right edge, so with
       the column gone it painted a slab of ink over the place figures instead.
       The column no longer hides, because every box now says PRE, a hole or F
       from the moment the field is drawn, so there is nothing left to turn
       off. See the note in templates/_scorecard.html. */

    /* ── The card you fill in ─────────────────────────────────────────────
       Five columns, the same as the finished card: #, Grp, Player, WR, Picks.
       So the plate needs no override here: it lands over the fourth column
       exactly where .sc-rows already paints it. ──────────────────────────── */
    /* Every row is a label bound to a real checkbox, so this is the whole of
       what makes it feel pressable. */
    .sc-card--walk .sc-tr { cursor: pointer; }
    .sc-card--walk .sc-tr:active { background: rgba(0,0,0,0.05); }
    /* A group already holding two locks the rest of its golfers: the input is
       disabled, so the label does nothing, and the row has to say so rather
       than look tappable and ignore you. Take one out first. */
    .sc-card--walk .sc-tr.is-locked { opacity: 0.42; cursor: default; }
    .sc-card--walk .sc-tr.is-locked:active { background: none; }
    /* A slot you have not filled in yet is a ruled line and nothing more. It
       holds its 21px like every other row, so the card is its full height from
       the start, but it is bound to no checkbox and must not invite a tap. */
    .sc-card--walk .sc-tr--slot { cursor: default; }
    .sc-card--walk .sc-tr--slot:active { background: none; }
    .sc-card--walk .sc-tr--fixed { cursor: default; }
    .sc-card--walk .sc-tr--fixed:active { background: none; }

    /* ── The walk's questions, in the card's language ──────────────────────
       The questions between the pick screens are the code's own words in the
       code's own order and none of that changed. What changed is that they were
       set in Space Mono and Crimson Text with a gold rule down the side, which
       is the board's voice, so the walk switched typeface every other screen
       between a scorecard and a website.

       ⚠ SCOPED TO THE WALK. The same classes carry the join-offer form and the
       question blocks elsewhere, and those are still on the board's pages
       speaking the board's language. Only the card's own walk is restyled. */
    .dotted-editor .walk-question {
      border-left: none;
      border-top: var(--sc-w-hair, 0.8px) solid #17150F;
      padding: 0.7rem 0 0.2rem;
      margin: 0.2rem 0 0.9rem;
    }
    .dotted-editor .walk-question-eyebrow {
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: 7px;
      letter-spacing: 0.14em;
      color: #17150F;
    }
    .dotted-editor .walk-question-text {
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: 10px;
      line-height: 1.5;
      color: #17150F;
    }
    .dotted-editor .walk-opt-btn {
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: 7.5px;
      letter-spacing: 0.1em;
      border: var(--sc-w-hair, 0.8px) solid #17150F;
      border-radius: 0;              /* a printed rule has no rounded corner */
      background: transparent;
      color: #17150F;
      /* 44px is the floor for anything a thumb has to find. */
      min-height: 44px;
    }
    .dotted-editor .walk-opt-btn:hover { border-color: #17150F; }
    .dotted-editor .walk-opt-btn.chosen {
      background: #1B5E3A;           /* the card's fourth plate, as on the button */
      border-color: #1B5E3A;
      color: #FBF7EC;
      font-weight: 700;
    }
    .dotted-editor .walk-subfield label,
    .dotted-editor .field label {
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: 8px;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: #17150F;
    }
    .dotted-editor .field-hint {
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: 7px;
      color: #17150F;
    }
    /* The focus ring belongs on the row, because the checkbox it belongs to is
       invisible by design and a keyboard user would otherwise have no idea
       where they were.
       ⚠ :focus-within CANNOT DO THIS and used to be what was here. The
       checkboxes live in their own container above the card, not inside the
       row labels, so nothing a keyboard user focused was ever an ancestor of
       the row and the ring never once appeared. The class is put on by the
       walk's own focus listener instead. Found by Codex on review. */
    .sc-card--walk .sc-tr.is-focus { outline: 2px solid var(--gold); outline-offset: -2px; }
    /* ⚠ THE CHECKBOXES MUST NOT BE display:none. That would take them out of
       the tab order and off the keyboard entirely. They are already absolutely
       positioned at zero size by .pick-opt-input, so their container collapses
       on its own and needs no help. */
    @media (prefers-reduced-motion: reduce) {
      .sc-tr.sc-settled { animation: none; }
    }
    /* ── The documents: How it works, Privacy and Terms ───────────────────
       Pages people read from top to bottom, on phones as much as anywhere, so
       the floors bind them (16px text, 12px labels, 44px targets). They sit
       straight on the sheet that <main> already is: no card of their own (a
       second hairline drawn round 8,000px of text said nothing the sheet did
       not), so the running head, the title and the text share one left edge.
       Titles are the board's page title; the running head is Space Mono; the
       colophon at the foot is the one place "last updated" lives. */
    .doc-page {
      max-width: 45rem;
      padding: 0 var(--space-3);
    }
    /* The page's own bottom margin used to stack on <main>'s padding and leave a wide
       band of cream before the footer; <main>'s padding is the only gap now. */
    main:has(> .doc-page) { padding-bottom: var(--space-4); }
    /* A hyphenated word ("sign-in", "eu-west-2") stays whole: `hyphens` does not stop a
       line breaking at a hard hyphen, a no-wrap span does. */
    .nb { white-space: nowrap; }
    .doc-head { margin: 0 0 var(--space-4); }
    /* The running head: the label over a hairline, then the title. */
    .doc-head .page-head-eyebrow {
      font-size: var(--text-4);
      padding-bottom: var(--space-2);
      margin-bottom: var(--space-3);
      border-bottom: 1px solid var(--rule);
    }
    .doc-head h1 { margin: 0; }
    /* A link on its own line is a target, so it gets the 44px a thumb needs;
       inline links in the text only need 24 (the padding below). */
    .guide-back {
      display: inline-block;
      margin-top: var(--space-2);
      line-height: 44px;
      border-bottom: 0;
      text-decoration: underline dotted var(--gold);
      text-underline-offset: 6px;
    }
    .guide-back:hover, .guide-back:focus-visible { text-decoration-style: solid; }
    .doc-copy { line-height: 1.55; }
    .doc-copy p { font-size: var(--text-5); margin: 0 0 var(--space-3); }
    .doc-copy h2 {
      font-family: 'Cinzel', serif;
      font-size: var(--text-6);
      font-weight: 600;
      color: var(--gold3);
      margin: var(--space-5) 0 var(--space-2);
    }
    .doc-copy h2:first-child { margin-top: 0; }
    .doc-copy a { padding: 2px 0; }
    .doc-copy ul { margin: 0 0 var(--space-3); padding-left: var(--space-4); font-size: var(--text-5); }
    .doc-copy li { margin-bottom: var(--space-1); }
    .doc-copy li::marker { color: var(--gold); }
    /* "Last updated", at the foot where a colophon goes. */
    .doc-copy .doc-colophon {
      margin: var(--space-5) 0 0;
      padding-top: var(--space-2);
      border-top: 1px solid var(--rule);
      font-family: 'Space Mono', monospace;
      font-size: var(--text-4);
      color: var(--muted);
    }
    /* Local Rules opens like the board's disclosures (gold Space Mono) with a
       drawn chevron in place of the browser's triangle, and a 44px row. */
    .guide-rules { margin: 0 0 var(--space-4); }
    .guide-rules summary {
      display: flex; align-items: center; gap: var(--space-2);
      min-height: 44px; cursor: pointer; list-style: none;
      font-family: 'Space Mono', monospace; font-size: var(--text-4);
      text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold);
    }
    .guide-rules summary::-webkit-details-marker { display: none; }
    .guide-rules summary::after {
      content: ''; width: 0.5em; height: 0.5em; margin-top: -0.2em;
      border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
      transform: rotate(45deg); transition: transform 0.15s;
    }
    .guide-rules[open] summary::after { transform: rotate(-135deg); margin-top: 0.2em; }
    .guide-rules summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) { .guide-rules summary::after { transition: none; } }
    .guide-rules dl { margin: var(--space-3) 0 0; }
    .guide-rules dt { font-weight: 700; margin-top: var(--space-2); }
    .guide-rules dd { margin: var(--space-1) 0 0; font-size: var(--text-5); }
    /* The scorecard's red-column words, term and meaning on one line. */
    .guide-terms {
      display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3);
      margin: 0 0 var(--space-3); font-size: var(--text-5);
    }
    .guide-terms dt { font-family: 'Space Mono', monospace; font-weight: 700; }
    .guide-terms dd { margin: 0; }
    .guide-figure { margin: var(--space-5) 0; }
    .guide-figure img {
      display: block;
      width: 100%;
      max-width: 455px;
      border: 1px solid var(--rule);
    }
    /* The standings picture was taken with the floating bottom bar over its
       fifth row. Showing only the top 636 of its 817 rows ends it on the hairline
       under the fourth, so no bar and no cut-off row. (home shows the whole
       file, so the picture itself is left alone.) */
    .guide-figure--standings img { aspect-ratio: 378 / 636; object-fit: cover; object-position: top; }
    /* Captions are body text, so they run to one or two lines under the picture. */
    .guide-figure figcaption {
      max-width: 455px;
      margin: var(--space-2) 0 0;
      color: var(--muted);
      font-size: var(--text-5);
      line-height: 1.4;
    }
    /* Local Rules belongs to the figure above it, not to the gap between sections. */
    .guide-figure:has(+ .guide-rules) { margin-bottom: var(--space-2); }

/* Homepage redesign. All selectors are contained to the landing document so
   the board, group and account screens retain their established visual rules. */
body.page-home .home-redesign {
  --home-cream:#f5f2e7; --home-paper:#ede6d4; --home-navy:#0a1626;
  --home-gold:#c4a574; --home-gold-deep:#766248; --home-muted:#5c584e;
  --home-shadow:0 24px 60px rgba(10,22,38,.18),0 4px 16px rgba(10,22,38,.08);
  background:var(--home-cream); color:#1a1a18; font-family:"DM Sans",system-ui,sans-serif;
}
body.page-home .home-redesign *, body.page-home .home-redesign *::before, body.page-home .home-redesign *::after { box-sizing:border-box; }
body.page-home .home-redesign h1, body.page-home .home-redesign h2, body.page-home .home-redesign h3 { font-family:"Cormorant Garamond",Georgia,serif; line-height:1.15; margin:0; }
body.page-home .home-redesign img { display:block; max-width:100%; }
body.page-home .home-hero { position:relative; min-height:100svh; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden; color:var(--home-cream); }
body.page-home .home-hero-media { position:absolute; inset:0; background:#1a2420; }
/* A 262-byte, 24x40 copy of the hero, blurred, painted the moment the page
   arrives so a reload never shows the flat dark ground while the real image
   downloads and decodes (James, 2026-09-26). The <img> covers it. */
body.page-home .home-hero-media::before { content:''; position:absolute; inset:-8%; background:url("data:image/webp;base64,UklGRv4AAABXRUJQVlA4IPIAAACQBwCdASoYACgAPsFOnkunpCKhurZoAPAYCWIArDNg7/6mG13krsGSbhz1JN0iTT3DUHEszLgmzwyRrPmmf1hb+1uvQAAA/lXkNaqhNJzr/kq8ojREUue52TCV2InP/oVZW3EPv4Fgd6ejsj82q0M+xhAyTpJ2ZZVK+8rehR4Z9fBJLCMQQC36RHYdbMnHenE8YpAODO0Bstlx7perxP/iCBfgSDvQIa5SW6+EF9qXkRlZ5eEUD8zKdZXvunb2LXWynfQ2Oz0W5CRJaAPwNfzqy58wfSKDvoTPqBMbtha4mJfDvg+Wxa7FjpYuTsAwJqcAAA==") 68% center/cover no-repeat; filter:blur(14px); }
body.page-home .home-hero-mist { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% center; }
body.page-home .home-hero-canvas { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; opacity:.9; }
body.page-home .home-hero-scrim { position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,rgba(10,22,38,.72),transparent 28%),linear-gradient(90deg,rgba(10,22,38,.78),rgba(10,22,38,.45) 42%,rgba(10,22,38,.08) 72%,transparent),linear-gradient(0deg,rgba(10,22,38,.82),rgba(10,22,38,.35) 30%,transparent 48%); }
body.page-home .home-hero-grain { position:absolute; inset:0; z-index:2; opacity:.16; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
body.page-home .home-hero-content { position:relative; z-index:4; max-width:28rem; padding:1.25rem 1.35rem 4.3rem; animation:home-rise 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes home-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
/* A step lighter than --home-gold: the label sits over the brightest part of
   the hero photograph (4.2:1 there in --home-gold, 5.1:1 in #d4b887). */
body.page-home .home-eyebrow { margin:0; color:#d4b887; font:600 .68rem/1.3 "DM Sans",sans-serif; letter-spacing:.16em; text-transform:uppercase; }
body.page-home .home-eyebrow-dark { color:var(--home-gold-deep); }
body.page-home .home-hero h1 { margin:0 0 .7em; color:#f8f4e8; font-size:clamp(2.6rem,11vw,3.8rem); font-weight:600; }
body.page-home .home-tagline { margin:.15rem 0 4.6em; color:rgba(245,242,231,.92); font:500 clamp(1.25rem,4.5vw,1.55rem)/1.2 "Cormorant Garamond",Georgia,serif; }
body.page-home .home-lede { max-width:22rem; margin:.6rem 0 0; color:rgba(245,242,231,.82); }
body.page-home .home-hero h1, body.page-home .home-hero p { text-shadow:0 1px 2px rgba(5,12,20,.85),0 3px 10px rgba(5,12,20,.65); }
body.page-home .home-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
body.page-home .home-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.35rem; border-radius:6px; font:600 .92rem/1 "DM Sans",sans-serif; text-decoration:none; transition:transform .25s,box-shadow .25s,background .25s; }
body.page-home .home-btn:hover { transform:translateY(-1px); }
body.page-home .home-btn-gold { color:var(--home-navy); background:linear-gradient(#d4b887,var(--home-gold) 48%,#a89060); box-shadow:0 8px 28px rgba(196,165,116,.35); }
/* A dark glass, not a light one: over the photograph a light tint lifts the
   ground towards the cream text (3.8:1). Navy keeps it above 4.5. */
body.page-home .home-btn-ghost { color:var(--home-cream); background:rgba(10,22,38,.38); border:1px solid rgba(245,242,231,.35); }
body.page-home .home-btn-outline { color:var(--home-gold); border:1px solid rgba(196,165,116,.55); }
body.page-home .home-section { width:min(100%,1140px); margin:0 auto; padding:4.25rem 1.25rem 3.5rem; }
body.page-home .home-section-head { max-width:30rem; margin-bottom:2rem; }
body.page-home .home-section-head h2, body.page-home .home-empty h2 { color:var(--home-navy); font-size:clamp(2rem,7vw,2.75rem); }
body.page-home .home-section-head > p:not(.home-eyebrow), body.page-home .home-empty p { color:var(--home-muted); }
body.page-home .home-tour-grid { display:grid; gap:1.25rem; padding-top:1rem; }
body.page-home .home-card-bg { position:absolute; inset:0; background-image:var(--home-card-art); background-position:center; background-size:cover; opacity:.28; }
body.page-home .home-tour-inner { position:relative; z-index:1; padding:2.5rem 2rem 1.6rem 1.35rem; }
body.page-home .home-tour-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
body.page-home .home-tour-meta { align-items:flex-start; }
body.page-home .home-tour-date { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }
body.page-home .home-tour-meta .eyebrow-status { margin-left:auto; text-align:right; justify-content:flex-end; }
@media (min-width:720px) {
  /* Keep body copy clear of the flag, but let the status reach the card inset. */
  body.page-home [data-home-tour-card] { container-type:inline-size; }
  body.page-home .home-tour-meta { margin-right:calc(2rem - 30cqw); }
}
body.page-home .home-tour-meta time, body.page-home .home-tour-source, body.page-home .home-badge, body.page-home .home-tour-stats span { font:600 .65rem/1.3 "DM Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
body.page-home .home-tour-meta time, body.page-home .home-tour-source, body.page-home .home-tour-stats span { color:var(--home-muted); }
body.page-home .home-tour-inner h3 { color:var(--home-gold-deep); font-size:clamp(1.9rem,6vw,2.4rem); }
body.page-home .home-tour-place { margin:.35rem 0 1.1rem; color:var(--home-muted); }
body.page-home .home-text-link { color:#2b5c8a; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(43,92,138,.35); }
body.page-home .home-text-link:hover { border-bottom-color:#2b5c8a; }
body.page-home .home-card-note { margin:1rem 0 0; color:var(--home-muted); font-size:.85rem; }
body.page-home .home-empty { max-width:460px; margin-left:max(1.25rem,calc((100% - 1140px)/2 + 1.25rem)); }
body.page-home .home-how-grid { display:grid; gap:1.1rem; padding:0; list-style:none; }
body.page-home .home-how-card { position:relative; min-height:12.4rem; overflow:hidden; padding:2.2rem 12% 1.8rem 1.6rem; border:1px solid rgba(168,144,96,.35); border-radius:8px; background:#e9dfc5; box-shadow:var(--home-shadow); }
body.page-home .home-how-bg { position:absolute; inset:0; overflow:hidden; }
body.page-home .home-how-art { width:100%; height:100%; object-fit:fill; }
body.page-home .home-how-card > div:last-child { position:static; }
body.page-home .home-how-card span { position:absolute; z-index:1; top:.6rem; right:.8rem; color:var(--home-gold-deep); font-size:1rem; letter-spacing:.2em; }
body.page-home .home-how-card h3 { position:relative; z-index:1; color:var(--home-navy); font-size:1.55rem; }
body.page-home .home-how-card p { position:relative; z-index:1; margin:.45rem 1.9em 0 0; color:var(--home-muted); font-size:.8rem; line-height:1.6; }
body.page-home .home-how-link { display:inline-block; margin-top:1.5rem; }
body.page-home .home-preview-stack { display:grid; gap:1.5rem; perspective:1200px; }
body.page-home .home-preview-stack figure { overflow:hidden; margin:0; border:1px solid rgba(10,22,38,.08); border-radius:8px; box-shadow:var(--home-shadow); transform:none; }
body.page-home .home-ambient { position:relative; display:grid; align-items:end; min-height:70svh; overflow:hidden; color:var(--home-cream); }
body.page-home .home-ambient > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.page-home .home-ambient::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,22,38,.88),rgba(10,22,38,.35) 55%,rgba(10,22,38,.45)),radial-gradient(ellipse at 30% 70%,rgba(196,165,116,.18),transparent 55%); }
body.page-home .home-ambient-copy { position:relative; z-index:1; max-width:32rem; padding:3.5rem 1.35rem 2.25rem; }
body.page-home .home-ambient-copy h2, body.page-home .home-cta h2 { color:#f8f4e8; font-size:clamp(1.9rem,7vw,2.6rem); }
body.page-home .home-ambient-copy p:not(.home-eyebrow), body.page-home .home-cta p { color:rgba(245,242,231,.8); }
body.page-home .home-cta { margin:1rem 1.25rem 0; padding:2.5rem 1.35rem; border-radius:8px; text-align:center; background:radial-gradient(ellipse at 80% 20%,rgba(196,165,116,.18),transparent 50%),linear-gradient(160deg,#13233a,#0a1626); box-shadow:var(--home-shadow); }
body.page-home .home-cta .home-actions { justify-content:center; }
@media (min-width:720px) { body.page-home .home-hero-content { --home-inset:2rem; margin-left:max(var(--home-inset),calc((100% - 1140px)/2 + var(--home-inset))); padding:2rem 0 9rem; width:calc(100% - 2 * var(--home-inset)); max-width:34rem; } body.page-home .home-hero-mist { object-position:62% 42%; } body.page-home .home-section { padding:5rem 2rem 4rem; } body.page-home .home-tour-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } body.page-home .home-preview-stack { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:1.5rem; } body.page-home .home-how-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } body.page-home .home-ambient-copy { margin-left:max(2rem,calc((100% - 1140px)/2 + 2rem)); padding:4.5rem 0 4rem; width:calc(100% - 4rem); max-width:32rem; } body.page-home .home-cta { margin:1.5rem max(2rem,calc((100% - 1140px)/2 + 2rem)) 0; padding:3rem 2rem; } }
@media (min-width:1024px) { body.page-home .home-hero-content { --home-inset:3rem; } body.page-home .home-tour-inner { padding-right:30%; } body.page-home .home-ambient-copy { margin-left:max(3rem,calc((100% - 1140px)/2 + 3rem)); width:calc(100% - 6rem); } body.page-home .home-cta { margin-left:max(3rem,calc((100% - 1140px)/2 + 3rem)); margin-right:max(3rem,calc((100% - 1140px)/2 + 3rem)); } }
@media (prefers-reduced-motion:reduce) { body.page-home .home-hero-content { animation:none; } body.page-home .home-hero-canvas { opacity:0; } body.page-home .home-btn { transition:none; } }

/* Legacy card hooks remain the public contract for board-destination tests;
   this attribute gives the redesigned card its presentation without changing
   that contract. */
body.page-home .home-redesign [data-home-tour-card] { position:relative; display:block; overflow:hidden; border:1px solid rgba(168,144,96,.35); border-radius:8px; background:var(--home-paper); box-shadow:var(--home-shadow),inset 0 0 0 1px rgba(255,255,255,.35); text-decoration:none; }
body.page-home .home-redesign [data-home-tour-card]::after { content:""; position:absolute; inset:6px; border:1px solid rgba(168,144,96,.28); border-radius:4px; pointer-events:none; }
@media (min-width:1024px) { body.page-home .home-redesign [data-home-tour-card] .home-card-bg { left:auto; width:34%; background-size:auto 140%; background-position:right bottom; background-repeat:no-repeat; } }

/* The global content wrapper deliberately frames ordinary pages. The redesign's
   landscape photography owns the full viewport, while the existing hp-band
   remains outside this wrapper and keeps its account/navigation treatment. */
body.page-home main { position:relative; max-width:none; margin:0; padding:0; }
body.page-home .home-redesign [data-home-tour-card] { padding:0; gap:0; }
body.page-home .home-redesign [data-home-tour-card]::before { display:none; }
body.page-home .home-empty { margin-left:auto; margin-right:auto; }
@media (min-width:1024px) { body.page-home .home-section { padding-left:3rem; padding-right:3rem; } body.page-home .home-tour-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Individual canvas layer masks provide the soft boundaries on both layouts. */
body.page-home .home-hero-canvas { -webkit-mask-image:none; mask-image:none; }

/* Direct landing-page visual rules retained from the approved reference. */
body.page-home .home-hero-scrim { background:linear-gradient(180deg,rgba(10,22,38,.72) 0%,transparent 28%); }
body.page-home .home-hero-scrim::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,22,38,.78) 0%,rgba(10,22,38,.45) 42%,rgba(10,22,38,.08) 72%,transparent 100%),linear-gradient(0deg,rgba(10,22,38,.55) 0%,transparent 38%); }
body.page-home .home-hero-scrim::after { content:""; position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(0deg,rgba(10,22,38,.82) 0%,rgba(10,22,38,.35) 55%,transparent 100%); }
body.page-home .home-hero-grain { opacity:.18; background-size:180px; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); }
body.page-home .home-hero h1 { font-size:clamp(2.6rem,11vw,3.8rem); }
body.page-home .home-hero h1 em { color:#e8cf99; font-style:italic; font-weight:500; }
body.page-home .home-section-head { max-width:28rem; }
@media (min-width:720px) { body.page-home .home-section-head { max-width:none; } }
body.page-home .home-section-head > p:not(.home-eyebrow) { margin:.65rem 0 0; color:var(--home-muted); font-size:1.02rem; }
body.page-home .home-lede { color:rgba(245,242,231,.78); font-size:.98rem; }
body.page-home .home-btn { transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .25s,color .25s; }
body.page-home .home-btn:active { transform:scale(.98); }
body.page-home .home-btn-gold:hover { box-shadow:0 12px 32px rgba(196,165,116,.45); }
body.page-home .home-btn-ghost { backdrop-filter:blur(8px); }
body.page-home .home-btn-ghost:hover { background:rgba(10,22,38,.52); }
body.page-home .home-preview-stack figure { transition:none; }
body.page-home .home-preview-stack figure:hover { transform:none; }
body.page-home .home-ambient { margin:1rem 0 0; }
@media (min-width:720px) { body.page-home .home-ambient > img { object-position:center top; } }
body.page-home .home-cta > * { max-width:28rem; margin-left:auto; margin-right:auto; }
body.page-home .home-cta h2 { margin-bottom:.55rem; font-size:clamp(1.5rem,6vw,2.35rem); }
body.page-home .home-cta p { margin-top:0; margin-bottom:1.35rem; }

/* Preserve the reference copy spacing against the shared heading reset. */
body.page-home .home-redesign .home-ambient-copy h2 { margin:.35rem 1.3em 1.15rem 0; }
body.page-home .home-redesign .home-ambient-copy p:not(.home-eyebrow) { margin:0 4.4em 1.4rem 0; }
body.page-home .home-redesign .home-cta > * { margin-left:auto; margin-right:auto; }
body.page-home .home-redesign .home-cta h2 { margin-bottom:.55rem; text-align:center; }

/* Phone review established the landing page's type scale at 80% of the
   original. Keep controls and artwork at their designed size; only type is
   reduced, and desktop retains the original scale. */
@media (max-width:719px) {
  .page-info-card .eyebrow-text, .lb-page-title, .tracker-page-title { font-size:clamp(1.52rem,4.8vw,1.92rem); }
  body.page-home .home-hero { min-height:max(100dvh,42rem); }
  body.page-home .home-hero-content { position:absolute; inset:0; max-width:none; padding:0; }
  body.page-home .home-hero-intro { position:absolute; top:46%; left:1.35rem; right:1.35rem; }
  body.page-home .home-hero-details { position:absolute; right:1.35rem; bottom:1.3rem; left:1.35rem; padding:0 10px 10px; border-radius:10px; background:#ffffff1a; }
  body.page-home .home-hero-details-eyebrow { margin-top:13px; }
  body.page-home .home-hero-details .home-lede { margin-top:.51rem; }
  body.page-home .home-hero-details .home-actions { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
  body.page-home .home-hero-details .home-btn { min-width:0; padding:.75rem .5rem; font-size:.78rem; line-height:1.15; text-align:center; }
  body.page-home .home-hero-details .home-btn-label { display:block; width:9em; }
  body.page-home {
    --text-1:.4rem; --text-2:.48rem; --text-3:.568rem; --text-4:.68rem;
    --text-5:.816rem; --text-6:.968rem; --text-7:1.16rem;
    --text-8:1.36rem; --text-9:1.36rem; --text-10:1.36rem;
  }
  /* The group band is site chrome, not landing-page type: keep its name tiers at the site-wide scale. */
  body.page-home .gband { --text-5:1.02rem; --text-6:1.21rem; --text-7:1.45rem; }
  body.page-home .home-redesign { font-size:80%; }
  body.page-home .home-hero h1 { font-size:clamp(2.392rem,10.12vw,3.312rem); }
  body.page-home .home-tagline { margin-bottom:0; font-size:clamp(1.2rem,3.6vw,1.24rem); }
  body.page-home .home-lede { font-size:1.1rem; }
  body.page-home .home-btn { font-size:.836rem; }
  body.page-home .home-section-head h2,
  body.page-home .home-empty h2 { font-size:clamp(2rem,5.6vw,2.2rem); }
  body.page-home .home-section-head > p:not(.home-eyebrow) { font-size:.816rem; }
  body.page-home .home-tour-meta time,
  body.page-home .home-tour-source,
  body.page-home .home-badge,
  body.page-home .home-tour-stats span { font-size:.52rem; }
  body.page-home .home-tour-inner h3 { font-size:clamp(1.52rem,4.8vw,1.92rem); }
  body.page-home .home-card-note { font-size:.68rem; }
  body.page-home .home-how-card { padding:1.8rem 8% 2.3rem 1.6rem; }
  body.page-home .home-how-card span { font-size:.8rem; }
  body.page-home .home-how-card h3 { font-size:1.24rem; }
  body.page-home .home-how-card p { max-width:84%; }
  body.page-home .home-how-card p,
  body.page-home .home-fine { font-size:.74rem; }
  body.page-home .home-ambient-copy h2 { font-size:clamp(1.52rem,5.6vw,2.08rem); }
  body.page-home .home-cta h2 { font-size:clamp(1.2rem,4.8vw,1.88rem); }
}

@media (max-width: 380px) {
  body.page-home .home-redesign .home-hero h1 { font-size:clamp(1.84rem,9.516vw,2.162rem); }
}
/* Keep the real screenshots at their original proportions. */
body.page-home .home-redesign .home-preview-stack img { width:100%; height:auto; }
/* Preserve the reference cards' generous illustration space without dummy stats. */
body.page-home .home-redesign [data-home-tour-card] { min-height:38rem; }
/* The mobile card keeps at least the source artwork's 9:16 proportions so the
   full scene remains visible, then grows if copy needs more room. */
@media (max-width:719px) {
  body.page-home .home-redesign .home-tour-grid { container-type:inline-size; }
  body.page-home .home-redesign [data-home-tour-card] { min-height:calc(100cqw * 16 / 9); aspect-ratio:auto; container-type:inline-size; }
  body.page-home .home-redesign [data-home-tour-card] .home-card-bg { top:0; width:100%; height:100%; background-size:contain; background-position:center bottom; background-repeat:no-repeat; }
  body.page-home .home-redesign [data-home-tour-card] .home-tour-inner { padding-bottom:calc(88cqw + 8px); }
  body.page-home .home-redesign .eyebrow-status { white-space:normal; max-width:52%; text-align:right; justify-content:flex-end; }
  body.page-home .home-redesign .home-tour-meta { flex-wrap:wrap; align-items:flex-start; }
  body.page-home .home-redesign .home-tour-meta > * { min-width:0; overflow-wrap:anywhere; }
  body.page-home .home-redesign .home-tour-meta .eyebrow-status { margin-left:auto; }
  body.page-home .home-redesign .home-tour-inner, body.page-home .home-redesign .home-tour-inner h3, body.page-home .home-redesign .home-tour-inner p, body.page-home .home-redesign .home-tour-inner span { min-width:0; overflow-wrap:anywhere; }
}
@media (min-width:720px) {
  body.page-home .home-redesign [data-home-tour-card] { min-height:24rem; }
  body.page-home .home-redesign [data-home-tour-card] .home-card-bg { top:0; left:0; width:100%; height:100%; background-image:var(--home-card-art-wide); background-size:cover; background-position:right; background-repeat:no-repeat; }
  body.page-home .home-tour-inner { padding-right:30%; }
  body.page-home .home-hero-details { margin-right:5em; padding:0 10px 10px; border-radius:10px; background:#ffffff1a; }
  body.page-home .home-hero-details-eyebrow { padding-top:11px; }
  body.page-home .home-hero-details .home-lede { max-width:30rem; margin:.6rem 0 0; }
}

/* Tournament card art keeps its frame whatever the card's height.
   The artwork is one image with its gold frame, brush stroke, grid and flag
   painted in. Scaled whole, a card made taller by extra copy (the organiser
   note, say) pushed the painted top frame partway down the card. Instead the
   image is split three ways with border-image: the top band (frame top and
   brush stroke) pins to the top, the bottom band (grid, flag, frame bottom)
   pins to the bottom, and only the plain middle band (paper and the side
   frame lines) stretches. Slice sizes are in the artwork's own pixels; band
   heights scale with the card's width so nothing distorts. At the card's
   usual height the result matches the old whole-image look. */
body.page-home .home-redesign [data-home-tour-card] { container-type:inline-size; }
body.page-home .home-redesign [data-home-tour-card] .home-card-bg {
  top:0; left:0; width:100%; height:100%;
  background-image:none;
  border:0 solid transparent;
  border-image-source:var(--home-card-art);
  border-image-slice:560 0 1040 0 fill;              /* home-topo.webp is 1080 × 1920 */
  border-image-width:calc(100cqw * 560 / 1080) 0 calc(100cqw * 1040 / 1080) 0;
  border-image-repeat:stretch;
}
@media (min-width:720px) {
  body.page-home .home-redesign [data-home-tour-card] .home-card-bg {
    border-image-source:var(--home-card-art-wide);
    border-image-slice:360 0 624 0 fill;             /* home-topo-landscape.webp is 1536 × 1024 */
    border-image-width:calc(100cqw * 360 / 1536) 0 calc(100cqw * 624 / 1536) 0;
  }
}

/* Tighten only the two adjoining paper sections reviewed on the home page.
   Keep the spacing into the club photograph and finished tournaments intact. */
body.page-home .home-redesign #tournaments,
body.page-home .home-redesign .home-how { padding-bottom:1.5rem; }
body.page-home .home-redesign .home-how,
body.page-home .home-redesign .home-previews { padding-top:2rem; }

/* A single grid row takes its height from the tallest tournament card. The
   existing sliced art and flag clearance stay relative to each card's width. */
.home-carousel-dots { display:none; }
@media (max-width:719px) {
  body.page-home .home-redesign .home-tour-grid--carousel {
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:86%;
    align-items:stretch;
    gap:.75rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Cancel the mobile section inset so cards leave at the screen edge.
       Matching inner padding keeps the first card aligned with its heading. */
    scroll-padding-inline:1.25rem;
    padding:1.5rem 1.25rem 1.5rem;
    margin:-.5rem -1.25rem 0;
    scrollbar-width:none;
  }
  body.page-home .home-tour-grid--carousel::-webkit-scrollbar { display:none; }
  body.page-home .home-redesign .home-tour-grid--carousel > [data-home-tour-card] {
    min-height:calc(86cqw * 16 / 9);
    scroll-snap-align:start;
  }
  .home-carousel-dots {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:0;
  }
  .home-carousel-dots button {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
  }
  .home-carousel-dots button::before {
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(138,96,16,.3);
  }
  .home-carousel-dots button[aria-current="true"]::before { background:#8a6010; }
  .home-carousel-dots button:focus-visible { outline:2px solid #8a6010; outline-offset:-2px; }
}

/* Tournament card type: two families, one voice each.
   Cormorant Garamond carries the tournament (its name, and the course or
   line-up beneath it in italic); DM Sans carries everything the card tells
   you. Date, tour and status share one small-caps label so the top row reads
   as a single line of metadata. The board's Space Mono (.eyebrow-status,
   .hp-card-note) stays on the boards, where it sets data; it does not follow
   a status or a note onto the home page. */
body.page-home .home-redesign [data-home-tour-card] {
  --card-ink:#14202e; --card-label:#6b6252;
}
body.page-home .home-redesign [data-home-tour-card] .home-tour-meta time,
body.page-home .home-redesign [data-home-tour-card] .home-tour-source,
body.page-home .home-redesign [data-home-tour-card] .eyebrow-status {
  font:600 .64rem/1.35 "DM Sans",sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.page-home .home-redesign [data-home-tour-card] .home-tour-meta time { color:var(--card-ink); }
body.page-home .home-redesign [data-home-tour-card] .home-tour-source { color:var(--card-label); }
body.page-home .home-redesign [data-home-tour-card] .home-tour-meta { flex-wrap:wrap; justify-content:space-between; }
/* One line beside its dot. When the card is too narrow for the date and the
   status side by side, the status drops to its own line and starts flush left
   under the date (space-between leaves a lone item at the start), rather than
   hanging off the right edge. Flex wrapping is decided on the status's
   one-line width, so the text itself only wraps once it already has a line of
   its own and still does not fit (a 320px phone with enlarged text). */
body.page-home .home-redesign [data-home-tour-card] .home-tour-meta .eyebrow-status {
  gap:.45rem; margin-left:0; max-width:100%; white-space:normal;
  text-align:left; justify-content:flex-start;
}
body.page-home .home-redesign [data-home-tour-card] .status-indicator { width:6px; height:6px; }
body.page-home .home-redesign [data-home-tour-card] .home-tour-inner h3 {
  margin-top:.35rem;
  color:var(--card-ink);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.01em;
  text-wrap:balance;
}
body.page-home .home-redesign [data-home-tour-card] .home-tour-place {
  margin:.45rem 0 0;
  color:var(--home-gold-deep);
  font:italic 500 1.12rem/1.3 "Cormorant Garamond",Georgia,serif;
}
/* The personal line: a hairline in the card's gold sets it apart from the
   tournament above it, so it reads as being about you, not the event. */
body.page-home .home-redesign [data-home-tour-card] .home-card-note {
  display:block;
  margin:1.1rem 0 0;
  padding-top:.85rem;
  border-top:1px solid rgba(139,115,85,.3);
  color:#3a352c;
  font:400 .88rem/1.5 "DM Sans",sans-serif;
  letter-spacing:0;
  text-wrap:pretty;
}
body.page-home .home-redesign [data-home-tour-card] .home-text-link {
  display:inline-flex;
  align-items:baseline;
  gap:.35em;
  margin-top:1rem;
  color:var(--card-ink);
  font:600 .9rem/1.3 "DM Sans",sans-serif;
  border-bottom:1px solid var(--home-gold);
  padding-bottom:.1rem;
}
body.page-home .home-redesign [data-home-tour-card] .home-text-link > span { transition:transform .25s cubic-bezier(.22,1,.36,1); }
body.page-home .home-redesign [data-home-tour-card]:hover .home-text-link > span,
body.page-home .home-redesign [data-home-tour-card]:focus-visible .home-text-link > span { transform:translateX(3px); }
/* A board note (your group sat this one out) follows the link, so it keeps
   the note's type but not its divider. */
body.page-home .home-redesign [data-home-tour-card] .home-text-link ~ .home-card-note {
  border-top:0; padding-top:0; color:var(--home-muted); font-size:.82rem;
}
@media (prefers-reduced-motion:reduce) {
  body.page-home .home-redesign [data-home-tour-card] .home-text-link > span { transition:none; }
}

/* The walk's choices and its Continue, in the home page's button face (James,
   2026-09-28). The walk's px sizes are set at the card's own scale, as its
   questions are. Choices are rounded DM Sans in sentence case and keep the
   card's green for the one chosen; Continue is the gold button. */
.dotted-editor .walk-opt-btn {
  font:500 9.5px/1.2 'DM Sans', sans-serif;
  letter-spacing:0;
  text-transform:none;
  border-radius:4px;
  padding:0 0.9rem;
}
.dotted-editor .walk-opt-btn.chosen { font-weight:600; }
.dotted-editor .walk-subfield-go {
  border:0;
  border-radius:4px;
  color:#0a1626;
  background:linear-gradient(#d4b887, #c4a574 48%, #a89060);
  box-shadow:0 4px 12px rgba(138,96,16,0.22);
  font:600 10px/1 'DM Sans', sans-serif;
  padding:0 1.2rem;
  transition:transform .25s, box-shadow .25s;
}
.dotted-editor .walk-subfield-go:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(138,96,16,0.3); }
.dotted-editor label.ew-contact-consent {
  font:400 9px/1.45 'DM Sans', sans-serif;
  letter-spacing:0;
  text-transform:none;
}


/* ═══ Add your picks stands out (James, 2026-09-30) ═══════════════════════
   In user testing the row was not seen at all: on a phone it is the last
   thing on the first screen, a paper box among paper boxes. The row keeps
   its own shape (dashed edge, italic label, dashed +) and sits on a green
   strip, the scorecard's "go" green, drawn in the account's --you blue, the
   colour of everything that is yours on the board. Open, it goes back to
   paper as before. */
.scoreboard tbody tr.dotted-slot--combined > td { background: var(--paper); box-shadow: none; }
/* Coloured as the board's green flash: its fill, its ink, its solid 3px
   left edge. The dashes stay, lighter, because an empty dashed slot is
   what says "your row goes here". */
.dotted-slot--combined .dotted-box:not(.is-open) {
  background: var(--success-wash);
  border: 1.5px dashed rgba(26,112,64,0.55);
  border-left: 3px solid var(--birdie);
  box-shadow: none;
}
.dotted-slot--combined .dotted-box:not(.is-open):hover { background: #e6f4ea; }
/* The row's own face holds whether open or closed (James, 2026-09-30):
   opening it used to drop back to the old italic gold. */
.dotted-slot--combined .dotted-trigger { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.dotted-slot--combined .dotted-label {
  font-style: normal;
  font-weight: 600;
  color: var(--success-ink);
  line-height: 1.15;
}
.dotted-slot--combined .dotted-label-aside {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  line-height: 1.3;
  /* Full strength, not 80%: the fade blended it to 4.26:1 on the green slot.
     The lighter weight already sets it apart from the label above. */
  color: var(--success-ink);
}
.dotted-slot--combined .dotted-marker {
  border: 2px solid var(--success-ink);
  color: var(--success-ink);
  background: #fff;
}
.dotted-slot--combined .expand-btn { color: var(--success-ink); }
/* The + is ONE shape, a vector plus used as a mask over the marker's own
   colour. As two bars (or a bar and its rotated copy) each arm was rounded
   to the screen's pixels on its own, and at 125% or 150% Windows scaling
   the | came out shorter or softer than the - (James, 2026-09-30). A mask is
   rasterised in one go, so the arms always match, and currentColor keeps
   the pulse's colour change working. */
.dotted-slot--combined .dotted-marker { border-width: 2px; }
.dotted-slot--combined .dotted-marker::after { content: none; }
.dotted-slot--combined .dotted-marker::before {
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v5h5v2H7v5H5V7H0V5h5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v5h5v2H7v5H5V7H0V5h5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.dotted-slot--combined .dotted-box:focus-visible { outline-color: var(--birdie); }
/* Open: the head keeps the flash green, and the frame round the card is
   drawn in the same green rather than the old gold. */
.dotted-slot--combined .dotted-box.is-open .dotted-trigger { background: var(--success-wash); }
.dotted-slot--combined .dotted-box.is-open::before { border-color: rgba(26,112,64,0.55); border-width: 1.5px; border-left: 0; }
.dotted-slot--combined .dotted-box.is-open::after { background: var(--birdie); }

/* Both pulse, on one beat (James, 2026-09-30): the row glows bright green
   and the + flashes with it, so the eye is drawn first to the row and then
   to the thing to press. They stop for good once the row has been opened, and never run for
   anyone who has asked their phone for less motion. */
.dotted-slot--combined .dotted-box:not(.is-open):not(.has-opened) { animation: add-picks-glow 4s ease-out infinite; }
.dotted-box:not(.is-open):not(.has-opened) .dotted-marker { animation: add-picks-plus 4s ease-out infinite; }
/* One beat every 4s (James, 2026-09-30: 1.8s was too often). The beat keeps
   its old length; the rest of the cycle is still. */
@keyframes add-picks-glow {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.8); }
  32%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* Only the circle's fill pulses. The + stays dark green throughout: fading
   it from white while the fill faded from green left a moment mid-beat
   where it all but vanished (James's screenshot, 2026-09-30). */
@keyframes add-picks-plus {
  0%   { background: #4ade80; border-color: #22c55e; }
  28%  { background: #fff; border-color: var(--success-ink); }
  100% { background: #fff; border-color: var(--success-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .dotted-slot--combined .dotted-box:not(.is-open),
  .dotted-box:not(.is-open) .dotted-marker { animation: none; }
}
.dotted-box:not(.is-open) .expand-btn { color: var(--success-ink); }


/* THE HIGHLIGHTER DRAWS ITSELF (James, 2026-09-30). Every highlighted label
   comes into view unmarked, and after a short pause the stroke is drawn left
   to right. A CSS animation restarts whenever its element goes from hidden to
   shown, so this replays on every step, every opened walk and every error
   without any script. */
@keyframes hl-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-4px -4px -4px 0); } }
.hl-mark::after,
.walk-step[data-step="hook"] .sc-fill--entrant .sc-k-word::after,
.walk-step[data-step="hook"] .sc-fill--entrant:has(.is-missing)::after {
  animation: hl-draw .45s cubic-bezier(.3,.6,.4,1) var(--hl-pause, .4s) both;
}
/* A golfer is written onto the card once, as they are picked. */
@keyframes ew-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-4px -4px -4px 0); } }
.sc-hw.ew-writing { display: inline-block; animation: ew-write .5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .hl-mark::after,
  .walk-step[data-step="hook"] .sc-fill--entrant .sc-k-word::after,
  .walk-step[data-step="hook"] .sc-fill--entrant:has(.is-missing)::after,
  .sc-hw.ew-writing { animation: none; }
}

/* The recovery email as a screen of its own in the walk (James, 2026-09-30),
   in the golf question's voice: the ask under the highlighter, then the box,
   then the Continue button's face. passkey.js adds .is-email to the step. */
.walk-step.is-email > :not(.pk-email-screen) { display: none !important; }
.dotted-editor .pk-email-screen { padding: 18px 14px 22px; }
.pk-email-screen .pk-email-done {
  margin: 0 0 10px; padding: 0;
  text-align: left;
  font: 400 9.5px/1.4 'Libre Baskerville', Georgia, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pk-email-screen .pk-field-label {
  display: block;
  margin-bottom: 14px;
  font: 400 17px/1.4 'Crimson Text', serif;
  color: var(--ink);
}
.pk-email-screen .pk-email-why { margin: 6px 0 18px; }


/* Once a section is done its highlighter lifts (James, 2026-09-30), as the
   ENTRANT mark does once a name is written: a full group's heading, and the
   email label once the box holds a whole address. */
.hl-mark::after { transition: opacity .3s; }
.walk-step:has(.ew-grp-count.full) .dotted-picks-heading .hl-mark::after,
.pk-email-form:has(#pk-email:valid) .hl-mark::after { opacity: 0; }

/* THE WALK'S QUESTION SCREENS (James, 2026-09-30), all in the golf
   question's voice: no eyebrow, the question at 17px with its first words
   under the highlighter, the answers sharing the width. */
.dotted-editor .walk-question { padding: 18px 14px 22px; }
.dotted-editor .walk-question-text {
  font: 400 17px/1.4 'Crimson Text', serif;
  margin-bottom: 20px;
}
.dotted-editor .walk-question-text .hl-mark { white-space: nowrap; }
.dotted-editor .walk-question .walk-opts {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;
}
.dotted-editor .walk-subfield-go { width: 100%; margin-top: 14px; }

/* THE WALK'S BUTTON (James, 2026-09-30): navy with white capitals at rest,
   white with a navy rule on hover and once chosen. Every Continue, every
   answer, and Save and continue on the email screen. */
.ew-name-gate .sc-btn,
.dotted-editor .walk-question .walk-opt-btn,
.pk-email-screen .pk-create-button {
  min-height: 44px;
  padding: 0 1rem;
  border: 1.5px solid var(--logo-ground);
  border-radius: 2px;
  background: var(--logo-ground);
  box-shadow: none;
  color: #fff;
  font: 600 15px/1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: none;
  transition: background .15s, color .15s;
}
.ew-name-gate .sc-btn { margin-top: 0; }
/* Two answers share a phone's width, so they sit tighter to keep "Bank
   transfer" and "Cash in person" on one line. */
.dotted-editor .walk-question .walk-opts .walk-opt-btn {
  padding: 0 .35rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* The replacement question's three answers carry a sentence each, so they
   are cards, not one-line buttons: the walk's light answer (white, navy rule,
   navy capitals, as "Play for free") with its sentence beneath in the
   question's serif. Hover and the chosen answer fill navy, as the walk's
   buttons do. Three across when there is room, stacked on a phone. */
.dotted-editor .walk-question .walk-opts.walk-replacement-options {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 10px;
}
.dotted-editor .walk-question .walk-opts.walk-replacement-options .walk-opt-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 14px 16px 15px;
  background: #fff;
  color: var(--logo-ground);
  text-align: left;
  white-space: normal;
  letter-spacing: .04em;
  line-height: 1.15;
}
.dotted-editor .walk-question .walk-opts.walk-replacement-options .walk-opt-btn:hover,
.dotted-editor .walk-question .walk-opts.walk-replacement-options .walk-opt-btn.chosen {
  background: var(--logo-ground);
  color: #fff;
}
.dotted-editor .walk-question .walk-replacement-options .walk-opt-btn span {
  font: 400 15px/1.4 'Crimson Text', serif;
  letter-spacing: normal;
  text-transform: none;
  opacity: .85;
}
/* Its question is too long for one line on a phone, so it wraps, and the
   highlighter then covers the whole wrapped block. */
.dotted-editor [data-step="replacement-q"] .walk-question-text .hl-mark {
  display: inline-block;
  white-space: normal;
}
.ew-name-gate .sc-btn:hover,
.dotted-editor .walk-question .walk-opt-btn:hover,
.dotted-editor .walk-question .walk-opt-btn.chosen,
.pk-email-screen .pk-create-button:hover {
  background: #fff;
  box-shadow: none;
  color: var(--logo-ground);
  transform: none;
}



/* The board's "Your picks aren't entered yet" alert. (The confirm card's own
   alert, Enter my picks button and pinned bar went with that card, 2026-10-02.) */
.board-draft-alert {
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--amber-bg-solid); border-left: 5px solid var(--amber-edge);
  color: var(--amber-ink);
  font: 400 15px/1.4 'Crimson Text', serif;
}
.board-draft-alert a { color: var(--amber-ink); font-weight: 600; }

/* Group picker notes and Form sections (walk only). */
.note-text   { display: block; }
.note-actions{ display: flex; gap: 10px; margin: 10px 0 3px; position: relative; z-index: 1; }
.note-btn    { font: 700 9px/1 'Space Mono', monospace; letter-spacing: .05em; white-space: nowrap;
               text-transform: uppercase; padding: 0 4px; height: 34px; border-radius: 3px;
               cursor: pointer; flex: 1; border: 1.5px solid #17150F;
               background: transparent; color: #17150F; }
.note-btn--go{ background: #1B5E3A; border-color: #1B5E3A; color: #FBF7EC; }  /* --sc-green */
.note-btn:hover { filter: brightness(1.08); }
.note-btn:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }

.sc-surprise { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 10px 6px; }
.sc-surprise .note-btn { flex: none; width: 72%; height: 38px; font-size: 10px; /* px: scorecard type, see the note at .sc-card */ }
.sc-surprise .note-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.sc-surprise-hint { font: italic 400 10.5px/1.35 'Libre Baskerville', Georgia, serif;
                    color: var(--accordion-ink); text-align: center; }

.sc-acc { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center;
          width: 100%; height: 23px; padding-left: 9px; border: var(--sc-w-hair) solid var(--sc-hair);
          border-top-width: 0; background: rgba(255,255,255,.18);
          font: 700 8px/1 'Libre Baskerville', Georgia, serif; letter-spacing: .14em;
          text-transform: uppercase; color: var(--sc-ink); }
.sc-acc:hover .sc-acc-t { text-decoration: underline; text-underline-offset: 3px; }
.sc-acc:focus-visible { outline: 2px solid var(--gold2); outline-offset: -3px; }
.sc-acc-chev { width: 0; height: 0; margin-right: 8px; border-left: 4px solid transparent;
               border-right: 4px solid transparent; border-top: 5px solid var(--sc-ink);
               transform: rotate(-90deg); transition: transform .15s; }
.sc-acc[aria-expanded="true"] .sc-acc-chev { transform: none; }
.sc-acc-n { margin-left: auto; margin-right: 12px; font-weight: 400; letter-spacing: .05em; color: var(--accordion-ink-faint); }
.sc-acc-def { border: var(--sc-w-hair) solid var(--sc-hair); border-top-width: 0;
              padding: 4px 9px 4px 26px; font: italic 400 9.5px/1.3 'Libre Baskerville', Georgia, serif;
              color: var(--accordion-ink); }

.sc-acc-panel[hidden] { display: none !important; }
/* The editor stacks four groups, so each one is named above its tiers. */
.sc-acc-grp { display: flex; align-items: center; gap: 8px; padding: 5px 9px;
              border: var(--sc-w-hair) solid var(--sc-hair); border-top-width: 0;
              background: var(--sc-yellow);
              font: 700 9px/1 'Libre Baskerville', Georgia, serif;
              letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink); }
/* A flat editor group is one tall block, so its letter follows the scroll. */
.sc-card--edit .sc-walk-out > .sc-blk > .sc-grp { align-self: flex-start; position: sticky; top: 12px; height: 21px; }

/* Entry walk, 2026-10-02 ------------------------------------------------ */
/* The invitation strip's X, top right, 44px to tap, same as a flash's. */
.invite-strip[data-invite-strip] { position: relative; padding-right: 2.75rem; }

/* A refused name: a notice directly under the Entrant line, in the board's
   error red (the same ground as an error flash). */
.sc-fill--entrant + .ew-name-error {
  margin: 8px 0 4px; padding: 0.6rem 0.8rem 0.6rem 14px;
  border-left: 3px solid var(--red); border-radius: 3px;
  background: #f6dada; color: #922020;
  font: 400 var(--text-4)/1.4 'Crimson Text', serif;
}
.sc-fill--entrant + .ew-name-error[hidden] { display: none; }
/* The green header goes light red while a refused name is showing. */
.dotted-slot--combined .dotted-box.is-name-error .dotted-trigger,
.dotted-slot--combined .dotted-box.is-open.is-name-error .dotted-trigger { background: #f6dada; }

/* "Play for free" is the white button beside the dark "Pay to play". */
/* The answers are navy (above); this one is the white partner. */
.dotted-editor .walk-question .walk-opt-btn.walk-opt-btn--light { background: #fff; color: var(--logo-ground); }
.dotted-editor .walk-question .walk-opt-btn.walk-opt-btn--light:hover { background: var(--logo-ground); color: #fff; }
.ew-pay-how[hidden] { display: none; }
.ew-pay-how { margin-top: 14px; }

/* Prize terms and house rules: small text links that open in place. */
.walk-terms, .walk-rules { margin: 14px 4px 4px; font: 400 var(--text-3)/1.5 'Space Mono', monospace; color: var(--muted); }
.walk-terms summary, .walk-rules summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.walk-terms p, .walk-rules p { margin: 8px 0 0; }

/* The Form legend goes with the lists: once they have folded away (the second
   pick), there is nothing left for it to explain. */
.sc-card--walk .legend { display: block; margin: 12px 2px 4px; }
.sc-card--walk[data-collapsed="1"] .legend { display: none; }
.ew-money-ask[hidden] { display: none; }

/* ═══ THE WALK STRIP ═════════════════════════════════════════════════════════
   "You are here" for the entry walk: a golf hole drawn as a thin strip, one marker per step.
   Step 1 is the tee box, the last two steps are on the green, the last is the flag.
   Hidden until the walk is open and its first valid count has been applied.
   z-index 300: above the tournament header (100), below the lower third and menus (400),
   the confetti (500) and the group switcher (600).

   ONE BANNER, NOT TWO. The tracker is the lower third's other half: the same navy slab, the same
   80px height as the mark, the same shadow, and it ends flush against the nav's tab, which during
   the walk grows to the slab's full height and becomes the join. At rest the nav runs off the
   RIGHT edge of the screen; during the walk the tracker runs off the LEFT edge on a phone. The
   map is a parchment chart set into the slab like a picture behind a gilt slip, never a white
   card laid on top of it: the art is multiplied onto parchment, so its white margin IS paper.

   Every marker sits INSIDE the art's own box and is placed in % of the IMAGE, so it stays on the
   fairway at every width. States are readable by shape as well as colour:
     finished = a 19px navy tick, without an outline
     current  = a 9px pale dot with a 2.5px navy ring; no glow or animation
     next     = ONE target, the next step only (Google Material Symbols "point_scan", Apache 2.0,
                gap widened). A row of targets read as clutter (James); the hole and the flag
                already say how far there is to go, and the count says it in words.
     later    = nothing drawn; the marker is still there for the sr-only label.
   A change of state never moves a marker: all are centred on their spot. */
.walk-strip {
  --walk-navy: #14263d;
  --walk-paper: #f6eedb;
  /* The mark's own height (.lower-third's min-height), so the slab never steps at the join. */
  --walk-h: 80px;
  /* HITCHED TO THE NAV. The tracker waits just behind the nav's tab (its right edge is the tab's
     left edge, the nav's box left minus the tab's 6px overhang) and takes the nav's own tuck
     distance, so the two move as one train: the nav runs off to the right, the tracker is drawn
     in behind it from the left and ends touching the tab. Tapping the tab runs it backwards.
     One extra pixel runs on under the tab (z 400 over 300) so a fractional centre never opens a
     hairline of page between them. */
  --nav-left: max(0px, calc((100vw - 420px) / 2));
  position: fixed;
  right: calc(100% - var(--nav-left) + 6px - 1px);
  width: calc(min(390px, calc(100vw - 28px)) + 1px);
  height: var(--walk-h);
  bottom: calc(var(--bar-lift) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  padding: 7px 6px 7px 7px;
  background: var(--metal-ground);
  visibility: hidden;
  transition: transform 450ms cubic-bezier(.4,0,.2,1), visibility 0ms linear 450ms;
  z-index: 300;
  /* The nav's own shadow, so the two halves sit at one height off the page. */
  filter: drop-shadow(0 8px 7px rgba(5,14,26,0.42)) drop-shadow(0 3px 3px rgba(5,14,26,0.3));
}
/* On a phone the slab leaves the screen on the left, as the nav leaves it on the right; once there
   is room for it to stand clear, its outer end takes the nav's corner. */
@media (min-width: 419px) { .walk-strip { border-radius: var(--lt-corner) 0 0 var(--lt-corner); } }
/* Same 250ms + 450ms as the nav's own tuck. */
body.walk-active:not(.lt-peek) .walk-strip {
  transform: translateX(var(--lt-tuck, 0px));
  transition: transform 450ms cubic-bezier(.4,0,.2,1) 250ms, visibility 0ms;
}
/* The nav begins its tuck before deferred scripts finish on a resumed walk.
   Hide the strip until its count is ready, while letting its transform track
   the nav from the same instant so it appears already hitched if JS is slow. */
body.walk-active:not(.lt-peek) .walk-strip.is-ready { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .walk-strip, body.walk-active:not(.lt-peek) .walk-strip { transition: none; }
}
/* The tracker stands over the foot of the page, so the page gets room to scroll clear of it. */
body.walk-active { --walk-strip-h: calc(var(--bar-lift) + 80px + 16px); }
body.walk-active:not(.lt-peek) { padding-bottom: var(--walk-strip-h); }
.walk-strip__inner { height: 100%; margin: 0; }
/* The chart's window. A gilt slip (the metal letter, half strength) stands 2px off the paper on
   the navy, and the paper sinks a little under the frame's lip, so the frame reads as holding it. */
.walk-strip__course {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 2px;
  background:
    radial-gradient(120% 140% at 45% 45%, transparent 55%, rgba(122, 86, 34, .2) 100%),
    var(--walk-paper);
  box-shadow: inset 0 1px 3px rgba(5, 14, 26, .55), inset 0 0 0 1px rgba(5, 14, 26, .35);
  outline: 1px solid rgba(200, 169, 110, .55); outline-offset: 2px;
}
/* Placed with margin, not a transform: a transform would isolate the art and the multiply below
   would have nothing to land on. Margin % is of the window's WIDTH, and the art is 0.3335 of its
   width tall, so -14% here is the old -42% of the art's height: the flag and the fairway both fit. */
.walk-strip__art {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2000 / 667;
  margin-top: calc(-14% + 30px);
}
.walk-strip__art img { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; }
/* Where the art's compass was: the player's place in the walk, in navy, inked onto the paper. */
.walk-strip__count {
  position: absolute; left: 2.4%; top: calc(42% - 23px); z-index: 1;
  font-family: 'Space Mono', monospace; font-size: var(--text-3); font-weight: 700;
  letter-spacing: .04em; line-height: 1; color: var(--walk-navy); white-space: nowrap;
  text-shadow: 0 0 2px var(--walk-paper), 0 0 4px var(--walk-paper);
}
.walk-strip__steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.walk-strip__step { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.walk-strip__step.is-upcoming { width: 0; height: 0; }
.walk-strip__step.is-upcoming.is-next {
  width: 24px; height: 24px; border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%2314263d' d='M479.79-408Q450-408 429-429.21t-21-51Q408-510 429.21-531t51-21Q510-552 531-530.79t21 51Q552-450 530.79-429t-51 21ZM444-648v-216h72v216h-72ZM444-312v216h72v-216h-72ZM648-444v-72h216v72H648ZM96-444v-72h216v72H96Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.walk-strip__step.is-done { width: 19px; height: 19px; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11' stroke='%2314263d' stroke-width='3.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.walk-strip__step.is-current {
  width: 9px; height: 9px;
  background: var(--walk-paper);
  box-shadow: 0 0 0 2.5px var(--walk-navy);
}
.walk-strip__steps[hidden] { display: none; }

/* Reconciliation belongs to the owner's card, underneath the scorecard where
   the open slot is visible. Keep its controls inside the narrow scoreboard
   cell on phones and make the distinction readable without relying on colour. */
.sc-replacement-state {
  max-width: 420px;
  margin: 0.55rem auto 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(200, 169, 110, .45);
  border-radius: 4px;
  background: rgba(250, 247, 238, .94);
  color: var(--ink, #182536);
  font-size: var(--text-2, .82rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sc-replacement-changes { margin: 0; padding-left: 1.15rem; }
.sc-replacement-changes li + li { margin-top: .3rem; }
.sc-pending-replacement + .sc-pending-replacement {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(20, 38, 61, .12);
}
.sc-pending-replacement p { margin: 0; }
.sc-pending-tag {
  display: inline-block;
  margin-left: .25rem;
  padding: 0 .24rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 700 .62rem/1.35 'Space Mono', monospace;
  letter-spacing: .02em;
  vertical-align: .08em;
}
.sc-tr--pending { opacity: .72; }
.sc-replacement-form {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .5rem;
}
.sc-replacement-form select {
  flex: 1 1 11rem;
  min-width: 0;
  max-width: 100%;
}
.sc-replacement-form button {
  flex: 0 0 auto;
  min-height: 2.4rem;
}
.sc-pending-empty { margin-top: .4rem !important; opacity: .8; }

/* The organiser's settings page (templates/group_settings.html) ----------------
   Members, Invite, Settings, set-up and the guide, built from the board's components and
   tokens. The only page-specific block of this size; the organiser had its own stylesheet
   until the tidy series (docs/decisions/0052). Selectors that name a generic class or tag
   (.hidden, .small, the page-info-card eyebrows, tick boxes) sit under :where(.organiser):
   that keeps their specificity and stops them reaching the board. public.css zeroes every
   margin, so each block here sets its own. */

/* The member filter, the roster's rows and the panels are hidden and shown by
   organiser.js with this class. */
:where(.organiser) .hidden { display:none!important }

.organiser main { font-size:var(--text-5) }
/* public.css's phone gutter is 5px, right for the board's full-bleed tables and
   too tight for forms and prose. */
@media (max-width:719px) { .organiser main { padding-left:var(--space-3); padding-right:var(--space-3) } }
.organiser main h1,
.organiser main h2,
.organiser main h3 {
  color:var(--ink);
  font-family:'Cinzel',serif;
  font-weight:600;
  line-height:1.2
}
.organiser main h2 { margin:0 0 var(--space-2); font-size:var(--text-6) }
.organiser main p { margin:0 0 var(--space-2); line-height:1.4 }
:where(.organiser) .small { color:var(--muted) }
/* public.css's notes are the board's 13.6px; this page's are read, so 16px. */
.organiser .board-note { font-size:var(--text-5) }

/* ── Controls ──────────────────────────────────────────────────────────────
   public.css's .btn is 11px Space Mono on one line, built for the board. Here
   it is 13.6px (the label floor) and may wrap on a narrow phone. Its felt
   variant is navy on gold, 3.1:1; paper on the same gold is 5.7:1. */
.organiser .btn {
  max-width:100%;
  font-size:var(--text-4);
  text-align:center;
  white-space:normal
}
.organiser .btn.btn-gold { font-size:var(--text-5) }
/* The things that cannot be undone (Remove, Write out, Replace joining link) are red
   text at the end of their row, not red blocks: .btn-red is for blocks. They keep
   their confirm dialog; the 44px is the target, not a button face. */
.link-red {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 var(--space-1);
  border:0;
  background:none;
  color:var(--red);
  cursor:pointer;
  font:600 var(--text-5) 'Crimson Text',serif;
  text-decoration:underline;
  text-underline-offset:3px
}
.link-red:hover { text-decoration-style:double }
.link-red:focus-visible { outline:2px solid var(--red); outline-offset:2px }

.organiser select,
.organiser textarea,
.organiser .input {
  width:100%;
  min-height:44px;
  padding:var(--space-2);
  font-family:'Crimson Text',serif;
  font-size:var(--text-5)
}
.organiser select { border:1px solid var(--rule); border-radius:2px; background:var(--paper); color:var(--ink) }

/* Tick boxes and radios: 1.25rem, with the whole label as the target. */
:where(.organiser) input[type=checkbox],
:where(.organiser) input[type=radio] { width:1.25rem; height:1.25rem; margin:0 }
.inline-settings label:has(> input[type=checkbox]),
#inline-crest fieldset label {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:44px;
  margin:var(--space-2) var(--space-3) var(--space-2) 0;
  cursor:pointer
}

/* ── Links above the page: the strip as James chose it on 20 Oct 2026 (the prototype's look,
   on the tokens): Space Mono in gold at exactly the 12px label floor, a hairline bar between the two, a rule beneath. ── */
.context-links { display:flex; flex-wrap:nowrap; align-items:center; gap:0 var(--space-3); margin:0 0 var(--space-3); padding:var(--space-2) var(--space-3) 0; border-bottom:1px solid var(--rule); background:var(--paper) }
#boardLink,
#organiser-guide-link { display:inline-flex; align-items:center; height:44px; min-height:44px; color:var(--gold); font:400 .75rem 'Space Mono',monospace; white-space:nowrap; text-decoration:none }
#boardLink:hover, #organiser-guide-link:hover { text-decoration:underline; text-underline-offset:3px }
#organiser-guide-link[aria-current] { color:var(--muted) }
.context-links > * + * { position:relative }
.context-links > * + *::before { content:''; position:absolute; left:calc(var(--space-2) * -1); top:12px; bottom:12px; border-left:1px solid var(--rule) }

/* ── Which tournament (the card on the set-up review) ───────────────────── */
:where(.organiser) .page-info-card .hero-eyebrow,
:where(.organiser) .page-info-card .eyebrow-status { font-size:var(--text-4) }
:where(.organiser) .page-info-card .eyebrow-text { display:block; margin-top:var(--space-2); color:var(--gold3) }
.managing-dates { margin:var(--space-1) 0 0; color:var(--muted); font:400 var(--text-4) 'Space Mono',monospace }
.change-tournament { margin-top:var(--space-3); max-width:24rem }
.change-tournament label { display:block }
/* Above the tabs on Members, Invite, Settings and Prizes: which tournament, then the next one to
   set up. The same block on every tab, so the tab bar stays put. */
.org-foot { display:flex; flex-direction:column; align-items:flex-start; margin:0 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--rule) }
.org-rule { align-self:stretch; margin:var(--space-1) 0; border:0; border-top:1px solid var(--rule) }
.managing-line { margin:0; font-size:var(--text-5) }
/* Built like the next-tournament block under it: an eyebrow, then the name, with Change at the
   end of the name's row. A long name wraps inside its own column and never splits from the link. */
.managing-line summary, p.managing-line { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--space-3); align-items:baseline; padding:var(--space-2) 0; cursor:pointer; list-style:none }
p.managing-line { cursor:default }
.managing-line .next-eyebrow { grid-column:1 / -1 }
.managing-line .next-name { line-height:1.3; padding:var(--space-1) 0 }
.managing-change { white-space:nowrap }
.managing-line summary::-webkit-details-marker { display:none }
.managing-line summary:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
/* The next tournament, as James asked on 20 Oct 2026: an eyebrow, the name, then the offer. */
.next-line { display:flex; flex-direction:column }
.next-eyebrow { color:var(--muted); font:400 var(--text-4) 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase }
.next-name { font-size:var(--text-5); font-weight:600 }
.next-line .foot-link { gap:.3em }
.next-opt { font-weight:400; color:var(--muted) }
.foot-link { display:inline-flex; align-items:center; min-height:44px; border-bottom:0; font-size:var(--text-5); font-weight:600; text-decoration:underline dotted var(--gold); text-underline-offset:6px }
.change-tournament label > span {
  display:block;
  margin-bottom:var(--space-1);
  color:var(--muted);
  font:400 var(--text-4) 'Space Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase
}

/* The tabs are the board's, joined as the golf leaderboard's ALL / GRP bar is: one hairline
   frame, no gaps, the active segment tinted. Each segment is a 44px target. The active label
   is --gold (5.3:1 on the paper), not the board's --gold2 (4.3:1). */
.organiser .tabs { gap:0; margin-bottom:var(--space-4); border:1px solid var(--rule); overflow:visible }
.organiser .tab-btn,
.organiser .tab-btn:last-child {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:0;
  padding:0 var(--space-2);
  border:0;
  border-right:1px solid var(--rule);
  border-bottom:2px solid transparent;
  font-size:var(--text-4);
  text-decoration:none
}
.organiser .tab-btn:last-child { border-right:0 }
.organiser .tab-btn.active { border-bottom-color:var(--gold); background:var(--felt); color:var(--gold) }

.org-stack { display:flex; flex-direction:column; gap:var(--space-4) }

/* ── Settings rows: each shows what tapping it does ───────────────────────── */
.settings-head {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--rule)
}
.settings-head h2 { margin:0 }
.settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  width:100%;
  margin-bottom:var(--space-2);
  padding:var(--space-3) var(--space-2);
  border-bottom:1px solid var(--rule);
  color:inherit;
  text-decoration:none
}
.settings-row > span { flex:1; min-width:0 }
.settings-row b,
.settings-row small,
.settings-row strong { display:block }
.settings-row b { font-weight:600 }
.settings-row small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-5) }
.settings-row small:empty { display:none }
.settings-row strong { margin-top:var(--space-1); color:var(--gold); font:700 var(--text-4) 'Space Mono',monospace }
/* What a row currently says, as body text: the answer is read, not decoded. */
.settings-row .row-value { display:block; margin-top:var(--space-1); color:var(--ink); font:400 var(--text-5)/1.35 'Crimson Text',serif }
.settings-row > em {
  flex:0 0 auto;
  color:var(--gold);
  font:600 var(--text-5) 'Crimson Text',serif;
  font-style:normal;
  text-decoration:underline dotted var(--gold);
  text-underline-offset:3px;
  white-space:nowrap
}
.settings-row i { color:var(--gold); font:var(--text-7) 'Space Mono',monospace; font-style:normal }
/* The opened row and its form read as one block, like the board's entrant row. */
.settings-row[aria-expanded="true"] {
  margin-bottom:0;
  border:1px solid var(--rule);
  border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--felt)
}
.settings-row[aria-expanded="true"] + .inline-settings {
  margin-bottom:var(--space-2);
  padding:var(--space-3) var(--space-2);
  border:1px solid var(--rule);
  border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
  background:var(--felt)
}
.settings-scope {
  margin:var(--space-4) 0 var(--space-2);
  color:var(--muted);
  font:400 var(--text-4) 'Space Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase
}

/* ── The inline editors and the full-page ones ──────────────────────────── */
.inline-settings label { display:block; margin:var(--space-2) 0 }
.prize-allocation-settings { margin:var(--space-3) 0 }
.prize-allocation-settings .settings-scope { margin-top:0 }
/* A fee that cannot change is printed, not boxed: it must not look as if it could be typed in. */
.fee-fixed { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); margin:var(--space-2) 0 var(--space-1) }
.fee-fixed span { color:var(--muted); font:400 var(--text-4) 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase }
.fee-fixed b { font:600 var(--text-6) 'Cinzel',serif }
/* The detail of how the pot works: a line to open, 44px tall. */
.pot-help { margin:var(--space-2) 0 0 }
.pot-help > summary { display:flex; align-items:center; min-height:44px; color:var(--gold); cursor:pointer; font:600 var(--text-5) 'Crimson Text',serif; text-decoration:underline dotted var(--gold); text-underline-offset:3px }
.pot-help > summary:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
.settings-footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-3) }
.settings-footer small { flex:0 0 100%; color:var(--muted); font:400 var(--text-4) 'Space Mono',monospace }
.settings-footer small:empty { display:none }

.settings-editor { max-width:520px }
.editor-appbar { display:flex; align-items:center; gap:var(--space-2); min-height:48px }
.editor-appbar h2 { flex:1; margin:0 }
#settings-back {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-height:44px;
  color:var(--gold3);
  font:400 var(--text-8) 'Space Mono',monospace;
  text-decoration:none
}
.settings-editor label { display:block; margin:var(--space-2) 0 }
.settings-mode-label { display:flex!important; align-items:center; justify-content:space-between; gap:var(--space-2) }
.settings-mode-label select { width:auto; min-width:8rem }
.prize-ranks { border-top:1px solid var(--rule) }
.prize-ranks label {
  display:grid;
  grid-template-columns:3rem minmax(0,1fr);
  align-items:center;
  gap:var(--space-2);
  margin:0;
  padding:var(--space-1) 0;
  border-bottom:1px solid var(--rule)
}
.prize-ranks label > span:first-child { font-weight:700 }
.prize-ranks-money label { grid-template-columns:1fr 9rem; min-height:52px }
.prize-ranks-money .money-input {
  display:flex;
  grid-column:2;
  align-items:center;
  width:9rem;
  min-height:44px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--paper)
}
.prize-ranks-money .money-input b { padding-left:var(--space-2); color:var(--muted); font:400 var(--text-5) 'Space Mono',monospace }
.prize-ranks-money .money-input input {
  width:100%;
  min-height:44px;
  padding:var(--space-1) var(--space-2);
  border:0;
  background:transparent;
  font:400 var(--text-5) 'Space Mono',monospace;
  text-align:right
}
.prize-ranks input[type=number] { appearance:textfield }
.prize-ranks input[type=number]::-webkit-inner-spin-button,
.prize-ranks input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0 }
.prize-ranks .input { min-width:0 }

/* ── The crest tuner ──────────────────────────────────────────────────────── */
#inline-crest label,
#inline-crest fieldset { display:block; margin:var(--space-2) 0 }
#inline-crest input[type=file] { display:block; width:100%; min-height:44px; margin-top:var(--space-1); font:400 var(--text-4) 'Space Mono',monospace }
#inline-crest fieldset { display:flex; flex-wrap:wrap; padding:0; border:0 }
#inline-crest legend { flex:0 0 100%; margin-bottom:var(--space-1); color:var(--muted); font:400 var(--text-4) 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase }
#inline-crest output { float:right; color:var(--ink); font:400 var(--text-4) 'Space Mono',monospace }
#inline-crest input[type=range] { display:block; width:100%; min-height:44px; margin:0 }
.crest-preview-frame { overflow:hidden; margin:var(--space-3) 0; border:1px solid var(--rule); background:var(--parchment) }
.crest-preview-frame iframe { display:block; width:100%; height:var(--band-h); border:0; transform-origin:0 0 }
.crest-tuner-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-3) }
.crest-tuner-grid label { min-width:0 }
@media (max-width:430px) { .crest-tuner-grid { grid-template-columns:1fr } }

/* ── The set-up review ──────────────────────────────────────────────────────
   A checkout's order summary: what was true last time, printed, one line each, with
   an Edit that opens just that field in place (a <details>, so it needs no script
   to open). Open, a line shows its field and no longer its printed value. One gold
   button under the list. Built from the board's page-info-card, .btn-gold and .input. */
.review-form { max-width:520px }
.review-others { margin:var(--space-2) 0 0; font-size:var(--text-5) }
.review-list { margin:var(--space-3) 0 }
/* One card per line, 8px apart: each Edit is a target with clear space round it. */
.review-line {
  margin-bottom:var(--space-2);
  padding:0 var(--space-3);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper)
}
.review-line > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  min-height:48px;
  cursor:pointer;
  list-style:none;
  font:400 var(--text-5)/1.3 'Crimson Text',serif;
  color:var(--ink)
}
.review-line > summary::-webkit-details-marker { display:none }
.review-edit {
  flex:0 0 auto;
  padding:var(--space-2) 0;
  color:var(--gold);
  font:400 var(--text-4) 'Space Mono',monospace;
  letter-spacing:.08em;
  text-decoration:underline dotted var(--gold);
  text-underline-offset:3px;
  text-transform:uppercase
}
/* The label before a review line's value: "Entry fee: £10". */
.review-label { font-weight:600 }
.review-line[open] > summary { display:none }
.review-field { display:block; margin:var(--space-3) 0 }
.review-field[hidden] { display:none }
.review-field .input { display:block; margin-top:var(--space-1) }
.review-line .small { margin:0 0 var(--space-3) }
.review-add { width:100%; max-width:520px }
.review-form .review-note { margin:var(--space-3) 0 0; color:var(--muted); font:400 var(--text-5)/1.4 'Crimson Text',serif }

/* ── Members ─────────────────────────────────────────────────────────────── */
/* One row per person, on the board's Scoreboard pattern. The summary is pinned to
   the top while the list scrolls, with the column head pinned under it. */
.payment-summary { margin:0 0 var(--space-2); font:600 var(--text-5)/1.25 'Crimson Text',serif }
.pay-bar {
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  min-height:44px;
  padding:var(--space-1) var(--space-2) var(--space-1) 20px;
  border-left:3px solid var(--gold);
  border-bottom:1px solid var(--rule);
  border-radius:3px;
  background:var(--felt)
}
.section-heading {
  margin:0 0 var(--space-2);
  font-size:var(--text-6)
}

.tools { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-top:var(--space-3) }
.eyebrow,
.roster th {
  color:var(--muted);
  font:400 var(--text-4) 'Space Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase
}
.tools .eyebrow { display:block; margin-bottom:var(--space-1) }
.count { margin:var(--space-4) 0 var(--space-2); font-size:var(--text-5) }

.roster { width:100%; border-collapse:collapse; table-layout:fixed; background:var(--paper) }
.roster th,
.roster td {
  padding:var(--space-1);
  border-bottom:1px solid var(--rule);
  overflow-wrap:anywhere;
  text-align:left;
  vertical-align:middle
}
.roster .n { width:36% }
.roster .s { width:30% }
.roster .a { width:34% }
/* The Payments button on the board lands here: the pinned summary at the top and Show and
   Find straight under it, so nothing is half-hidden and the people who owe are below. */
#member-tools { scroll-margin-top:calc(var(--pay-bar-h,44px) + var(--space-2)) }
.roster thead th {
  position:sticky;
  top:var(--pay-bar-h,44px);
  z-index:2;
  padding-top:0;
  padding-bottom:var(--space-1); /* 8px clear of the first row's targets, with the row's own padding */
  background:var(--felt)
}
.roster .sort-btn {
  display:inline-flex;
  align-items:center;
  width:100%;
  min-height:44px;
  margin:0;
  padding:0;
  gap:var(--space-1);
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  font:inherit;
  /* A <button> resets both to normal: the head's caps and letter-spacing have to be asked for. */
  letter-spacing:inherit;
  text-align:inherit;
  text-transform:inherit;
  white-space:nowrap
}
.roster .sort-btn:hover,
.roster .sort-btn:focus-visible { text-decoration:underline }
.roster .sort-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
.roster .sort-btn::after { content:''; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; opacity:.35 }
.roster th[aria-sort="ascending"] .sort-btn::after { border-bottom:5px solid currentColor; opacity:1 }
.roster th[aria-sort="descending"] .sort-btn::after { border-top:5px solid currentColor; opacity:1 }
.roster .name {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  color:var(--ink);
  cursor:pointer;
  font:600 var(--text-5)/1.25 'Crimson Text',serif;
  text-align:left
}
.roster .name > span { min-width:0; overflow-wrap:anywhere }
/* What the name opens, said in a word as well as a chevron. */
.member-details { color:var(--gold); font:400 var(--text-5)/1.25 'Crimson Text',serif; text-decoration:underline dotted var(--gold); text-underline-offset:3px }
.member-chevron { display:inline-block; margin-left:.2em; line-height:1; text-decoration:none }

/* A member who has given no name: said plainly, in the quiet ink. */
.roster .no-name { color:var(--muted); font-style:italic }

/* Playing is the word (its colour only adds to it); Paid is a word beside its box. */
.member-status,
.mg-paid-toggle-btn,
.paid-word,
.no-fee { font:400 var(--text-5)/1.25 'Crimson Text',serif }
.member-status { display:flex; align-items:center; gap:var(--space-1); min-height:44px }
.member-status[hidden] { display:none } /* the row's note takes its place for a while */
.member-status-word--quiet,
.no-fee { color:var(--muted) }
.member-status-word--playing { color:var(--birdie) }
.member-status-word--not-playing { color:var(--red) }
.payment-mark {
  display:inline-grid;
  flex:none;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  color:var(--logo-ground);
  font:600 var(--text-5)/1 'Space Mono',monospace
}
.payment-mark--not-marked { color:var(--red) }
/* Paid, on a finished event or a settled entry: the same mark and word, not a control. */
td.a > .payment-mark { vertical-align:middle }
/* The Paid toggle: a box and its word inside one 44px target. It is a toggle, not a button face. */
.mg-paid-toggle-btn {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-width:44px;
  min-height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer
}
.mg-paid-toggle-btn[hidden] { display:none } /* "Marked paid · Undo" takes its place for a while */
.mg-paid-toggle-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
.paid-check {
  display:inline-grid;
  flex:none;
  place-items:center;
  width:20px;
  height:20px;
  border:1.5px solid var(--logo-ground);
  border-radius:3px;
  background:var(--paper);
  color:var(--paper);
  font:600 var(--text-4)/1 'Space Mono',monospace
}
.paid-check--checked { border-color:var(--birdie); background:var(--birdie) }
.mg-paid-toggle-btn:hover .paid-check { border-color:var(--gold) }
/* What the row says after a tap, in the Paid cell's place. It is as tall as the
   row already is, so nothing below it moves. Its edge is the board note's: green for
   done, red for not saved. */
.row-note {
  display:flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding:0 var(--space-1);
  border:0;
  border-left:3px solid var(--birdie);
  background:var(--paper2);
  color:var(--ink);
  font:600 var(--text-5)/1.25 'Crimson Text',serif;
  text-align:left
}
button.row-note { cursor:pointer }
button.row-note:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
.row-note-undo { color:var(--gold); text-decoration:underline; white-space:nowrap }
.row-note--failed { border-left-color:var(--red); color:var(--red) }
/* An open row's detail is the row's own drawer: the row's paper, a gold rule down its left edge
   and a hairline under it, labels in the table's mono capitals. */
.detail td { padding:var(--space-2) var(--space-3) var(--space-3); background:var(--paper); border-left:3px solid var(--gold); border-bottom:1px solid var(--rule) }
.detail p { margin:var(--space-2) 0 0; line-height:1.35 }
.detail p b { color:var(--muted); font:400 var(--text-4) 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase }
.member-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-2) }
.member-actions form { margin:0 }
#member-empty { margin-top:var(--space-3) }
/* Export is secondary and comes after the list it exports. */
.organiser main .member-export { margin:var(--space-4) 0 0 }

/* ── Panels: the guide, "No members match", an Invite that cannot yet be sent ── */
.panel {
  margin:0 0 var(--space-3);
  padding:var(--space-3);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper)
}
.panel > :last-child { margin-bottom:0 }
.panel h2 { font-size:var(--text-5) }

/* ── Invite: one card, one link, one message, one button ─────────────────── */
.invite-card { display:flex; flex-direction:column; gap:var(--space-3); margin:0 }
.invite-card > * { margin:0 }
#join { overflow-wrap:anywhere }
#new-invite {
  display:block;
  min-height:126px;
  resize:vertical;
  font-family:'Crimson Text',serif;
  font-size:var(--text-5);
  line-height:1.25;
  overflow-wrap:anywhere;
  white-space:pre-wrap
}
.invite-card .btn-gold { width:100% }
.copy-status { min-height:1.25em; color:var(--muted) }
.copy-status:empty { display:none }
/* Replace joining link sits in the Settings row, shown only while that row is open. */
.replace-link { display:none }
.settings-row[aria-expanded="true"] + .inline-settings + .replace-link {
  display:block;
  margin-bottom:var(--space-2);
  padding:var(--space-3) var(--space-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper)
}

/* ── The guide ───────────────────────────────────────────────────────────── */
/* The organiser guide is a reading page: the same column as How it works and the
   documents (.doc-page .doc-copy in public.css), with this page's own headings
   and paragraphs put back to the document's. */
.organiser-guide.doc-page { padding:0; margin-bottom:0 }
.organiser-guide .doc-head { margin-bottom:var(--space-3) }
.organiser-guide .doc-head h1 { font-size:var(--text-7) }
.organiser .doc-copy p { margin:0 0 var(--space-3); line-height:inherit }
.organiser .doc-copy h2 { margin:var(--space-5) 0 var(--space-2); color:var(--gold3); font-size:var(--text-6) }
.organiser-guide .doc-copy p a { display:inline-flex; align-items:center; min-height:44px }

/* ── Dialogs: the board's paper and rule, no shadow ──────────────────────── */
dialog.dialog {
  width:min(430px,calc(100% - 24px));
  padding:var(--space-3);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink)
}
dialog.dialog::backdrop { background:color-mix(in srgb,var(--logo-ground) 55%,transparent) }
dialog.dialog h2 { margin:0 0 var(--space-2) }
.dialog-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3) }