/* ═════════════════════════════════════════════════════════════════════════
   Peel & Eat — the clubhouse.

   Structure is the Industry design system: 0.85 density, square corners,
   hairline rules, and its blueprint registration corners. Materials are a
   private club: green baize, engraved brass, parchment.

   The one governing idea — the app furniture is the CLUBHOUSE (dark baize,
   brass), and the scorecard itself is CARD STOCK laid on it (parchment,
   the same cream and per-game accents as the printed trifold). You are
   always looking at a real card on a real table.
   ═════════════════════════════════════════════════════════════════════ */

@import url("industry-fonts.css?v=1739ec9b7a");

:root{
  /* — materials — */
  --baize:      #10231A;   /* the ground: baize at dusk           */
  --baize-2:    #16301F;   /* raised surface                      */
  --baize-3:    #1D3D28;   /* hover / inset                       */
  --brass:      #B08D4F;   /* engraved plate — the accent         */
  --brass-lt:   #D9BC85;   /* where the light catches the cut     */
  --parchment:  #EDE7D9;   /* card stock, and type on the baize   */
  --chalk:      #8FA08F;   /* secondary type, muted sage          */
  --rule:       color-mix(in srgb, var(--brass) 34%, transparent);

  /* — Industry's spacing scale at density 0.85 — */
  --s1:3.4px; --s2:6.8px; --s3:10.2px; --s4:13.6px; --s6:20.4px; --s8:27.2px;

  --display:'Playfair Display', Georgia, serif;
  --plate:'Barlow Condensed', system-ui, sans-serif;
  --body:'Barlow', system-ui, sans-serif;
  --fig:'JetBrains Mono', ui-monospace, monospace;

  /* per-game accent; each plate overrides it */
  --accent:#B08D4F; --accent-deep:#B08D4F; --on-accent:#10231A;
  --gridline:#1F6F6B; --rule-lt:#9FC0BC; --accent-soft:#E4EBE4;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--baize); color:var(--parchment);
  font-family:var(--body); font-size:15px; line-height:1.55;
  /* faint baize weave — texture, not pattern */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
}
.wrap{ max-width:76rem; margin:0 auto; padding:var(--s8) var(--s6) 5rem; }
a{ color:var(--brass-lt); text-underline-offset:3px; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--brass-lt); outline-offset:2px; }
::selection{ background:color-mix(in srgb, var(--brass) 40%, transparent); }

/* ── engraving: Industry's registration corners, cut into brass ────────── */
.engraved{ position:relative; border:1px solid var(--rule); border-radius:0; }
.engraved > .corner{ position:absolute; width:11px; height:11px; color:var(--brass); z-index:2; }
.engraved > .corner::before,.engraved > .corner::after{ content:""; position:absolute; background:currentColor; }
.engraved > .corner::before{ left:5px; top:0; width:1px; height:100%; }
.engraved > .corner::after { top:5px; left:0; width:100%; height:1px; }
.engraved > .corner.tl{ top:-6px; left:-6px; }   .engraved > .corner.tr{ top:-6px; right:-6px; }
.engraved > .corner.bl{ bottom:-6px; left:-6px; }.engraved > .corner.br{ bottom:-6px; right:-6px; }

/* ── masthead ─────────────────────────────────────────────────────────── */
.top{ display:flex; align-items:flex-end; gap:var(--s6); flex-wrap:wrap;
      padding-bottom:var(--s4); margin-bottom:var(--s8);
      border-bottom:1px solid var(--rule); }
.top h1{ font-family:var(--display); font-weight:900; letter-spacing:-0.02em;
         font-size:clamp(2.4rem,7vw,4rem); line-height:0.9; margin:0;
         color:var(--parchment); }
.top h1 em{ font-style:normal; color:var(--brass-lt); }
.crest{ font-family:var(--plate); font-weight:600; font-size:0.66rem;
        letter-spacing:0.34em; text-transform:uppercase; color:var(--brass);
        margin-bottom:0.45rem; }
.top .sub{ font-family:var(--plate); font-weight:400; font-size:0.72rem;
           letter-spacing:0.2em; text-transform:uppercase; color:var(--chalk); }
.top .spacer{ flex:1; }
.lede{ max-width:36rem; color:var(--chalk); margin:0 0 var(--s4); }
.lede strong{ color:var(--parchment); font-weight:500; }

/* ── the honours board: nine engraved plates ──────────────────────────── */
.board{ display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); }

.plate{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(160deg, var(--baize-2), var(--baize));
  border:1px solid var(--rule); border-radius:0;
  padding:var(--s6) var(--s4) var(--s4);
  text-decoration:none; color:inherit;
  transition:border-color .25s, transform .25s;
}
/* NB: no overflow:hidden here. The registration corners are drawn 6px OUTSIDE
   the box, so clipping the plate erases the signature. Industry's own
   stylesheet flags this exact conflict — the frame has to win, so the sheen
   below animates background-position instead of translating a pseudo-element. */
/* the enamel inlay — the game's own colour, the only colour on the plate */
.plate::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
                background:var(--accent-deep); }
/* light catching the cut, on hover */
.plate::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 42%,
             color-mix(in srgb, var(--brass-lt) 22%, transparent) 50%, transparent 58%);
  background-size:280% 100%; background-position:130% 0;
  background-repeat:no-repeat; transition:opacity .25s;
}
.plate:hover{ border-color:var(--brass); transform:translateY(-2px); }
.plate:hover::after{ opacity:1; animation:sheen .8s ease-out forwards; }
@keyframes sheen{ from{ background-position:130% 0; } to{ background-position:-40% 0; } }

.plate__no{ font-family:var(--fig); font-size:0.6rem; font-weight:700;
            letter-spacing:0.2em; color:var(--brass); }
.plate__name{ font-family:var(--display); font-weight:900; letter-spacing:-0.015em;
              font-size:1.85rem; line-height:0.98; margin:var(--s3) 0 var(--s2);
              color:var(--parchment); }
.plate__hook{ font-family:var(--body); font-size:0.86rem; line-height:1.4;
              color:var(--chalk); flex:1; }
.plate__foot{ display:flex; align-items:center; justify-content:space-between;
              gap:var(--s2); margin-top:var(--s6); padding-top:var(--s3);
              border-top:1px solid var(--rule);
              font-family:var(--plate); font-size:0.68rem; letter-spacing:0.14em;
              text-transform:uppercase; color:var(--chalk); }
.plate__players{ font-family:var(--plate); font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--chalk); margin-top:var(--s6); }
.plate__foot{ margin-top:var(--s3); }
.plink{ flex:1 1 30%; text-align:center; min-height:40px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; padding:var(--s2) var(--s1);
  border:1px solid var(--rule); color:var(--parchment);
  font-family:var(--plate); font-weight:600; font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; transition:background .2s, border-color .2s, color .2s; }
.plink:hover{ border-color:var(--brass); background:color-mix(in srgb, var(--brass) 14%, transparent); }
.plink--go{ background:var(--brass); border-color:var(--brass); color:var(--baize); }
.plink--go:hover{ background:var(--brass-lt); border-color:var(--brass-lt); color:var(--baize); }

/* ── controls ─────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
      font-family:var(--plate); font-weight:600; font-size:0.82rem;
      letter-spacing:0.14em; text-transform:uppercase;
      padding:var(--s3) var(--s4); border:1px solid var(--rule); border-radius:0;
      background:transparent; color:var(--parchment); cursor:pointer;
      text-decoration:none; transition:background .2s, border-color .2s, color .2s; }
.btn:hover{ border-color:var(--brass); background:color-mix(in srgb, var(--brass) 12%, transparent); }
.btn--brass{ background:var(--brass); border-color:var(--brass); color:var(--baize); }
.btn--brass:hover{ background:var(--brass-lt); border-color:var(--brass-lt); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.bar{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; margin:var(--s6) 0; }

/* ── panels on the baize ──────────────────────────────────────────────── */
.panel{ position:relative; background:var(--baize-2); border:1px solid var(--rule);
        padding:var(--s6); margin-bottom:var(--s6); }
.panel h2{ font-family:var(--plate); font-weight:600; font-size:0.86rem;
           letter-spacing:0.24em; text-transform:uppercase; color:var(--brass);
           margin:0 0 var(--s4); }
label{ display:block; font-family:var(--plate); font-size:0.68rem; font-weight:600;
       letter-spacing:0.16em; text-transform:uppercase; color:var(--chalk);
       margin-bottom:var(--s1); }
input,select{ width:100%; min-height:38px; padding:var(--s2) var(--s3);
  font-family:var(--body); font-size:0.95rem; color:var(--parchment);
  background:var(--baize); border:1px solid var(--rule); border-radius:0;
  caret-color:var(--brass-lt); }
input::placeholder{ color:color-mix(in srgb, var(--chalk) 60%, transparent); }
input:hover,select:hover{ border-color:color-mix(in srgb, var(--brass) 60%, transparent); }
input:focus-visible,select:focus-visible{ border-color:var(--brass-lt); outline-offset:0; }
.fieldrow{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-end; }
.f-grow{ flex:1; min-width:9rem; } .f-sm{ width:6.5rem; flex:none; }
.note{ font-size:0.84rem; color:var(--chalk); margin-top:var(--s2); }
.note--warn{ border-left:2px solid var(--brass); padding-left:var(--s3); color:var(--parchment); }

.results{ margin-top:var(--s3); border:1px solid var(--rule); max-height:16rem; overflow:auto; }
.results button{ display:block; width:100%; text-align:left; background:transparent;
  border:0; border-bottom:1px solid var(--rule); padding:var(--s3);
  font-family:var(--body); font-size:0.88rem; color:var(--parchment); cursor:pointer; }
.results button:hover{ background:var(--baize-3); }
.results .c{ font-weight:600; } .results .l{ color:var(--chalk); font-size:0.78rem; }

/* ═══ the card itself — stock laid on the baize, not clubhouse furniture ═══ */
.scroll{ overflow-x:auto; background:var(--cream); border:1px solid var(--brass);
         box-shadow:0 14px 34px rgba(0,0,0,.45); }
table.card{ border-collapse:collapse; width:100%; min-width:54rem; color:var(--ink); }
table.card th,table.card td{ border-right:1px solid var(--rule-lt);
  border-bottom:1px solid var(--rule-lt); padding:0; text-align:center; }
table.card thead th{ background:var(--accent-deep); color:var(--on-accent);
  font-family:var(--plate); font-weight:600; font-size:0.74rem; letter-spacing:0.1em;
  padding:var(--s2) 2px; position:sticky; top:0; z-index:2; }
table.card th.lab,table.card td.lab{ text-align:left; padding:var(--s2) var(--s3);
  font-family:var(--plate); font-weight:600; font-size:0.78rem; letter-spacing:0.06em;
  text-transform:uppercase; white-space:nowrap; position:sticky; left:0;
  background:var(--cream); z-index:1; border-right:2px solid var(--gridline); }
table.card thead th.lab{ background:var(--accent-deep); color:var(--on-accent); z-index:3; }
tr.band td{ background:var(--cream-alt); } tr.band td.lab{ background:var(--cream-alt); }
td.tot{ background:var(--accent-soft); font-family:var(--fig); font-weight:700; }
td.ref{ font-family:var(--fig); font-size:0.78rem; color:#6B6B63; }
tr.readonly td{ font-family:var(--fig); font-weight:700; font-size:0.85rem; }
.dot{ color:var(--accent-deep); font-weight:700; }
/* the Wolf's number is printed, not written — set it apart from the boxes
   you fill in, the way it is on the card */
.wolfno{ font-family:var(--fig); font-weight:700; font-size:0.95rem; color:var(--accent-deep); }
tr.marker td{ background:color-mix(in srgb, var(--accent-soft) 55%, var(--cream)); }
tr.marker td.lab{ background:var(--accent-deep); color:var(--on-accent); }
table.card input{ width:100%; min-width:2.7rem; min-height:0; border:0; background:transparent;
  text-align:center; font-family:var(--fig); font-weight:700; font-size:1rem;
  color:var(--ink); padding:var(--s3) 1px; }
table.card input:focus-visible{ background:var(--accent-soft); outline:2px solid var(--accent-deep);
  outline-offset:-2px; }

/* ── cheat + standings ────────────────────────────────────────────────── */
.cols{ display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
       margin-top:var(--s6); }
.slab{ position:relative; border:1px solid var(--rule); background:var(--baize-2); }
.slab h3{ margin:0; font-family:var(--plate); font-weight:600; font-size:0.72rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--brass);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--rule); }
.slab .b{ padding:var(--s4); }
.slab .row{ display:flex; justify-content:space-between; gap:var(--s3);
  font-family:var(--plate); font-weight:600; font-size:0.8rem; letter-spacing:0.06em;
  text-transform:uppercase; line-height:1.75; color:var(--chalk); }
.slab .row .v{ color:var(--brass-lt); text-align:right; font-family:var(--fig);
  font-size:0.72rem; letter-spacing:0; }
.stand{ width:100%; border-collapse:collapse; }
.stand th{ font-family:var(--plate); font-weight:600; font-size:0.68rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--brass);
  padding:0 0 var(--s2); text-align:left; border-bottom:1px solid var(--rule); }
.stand th+th,.stand td+td{ text-align:right; }
.stand td{ padding:var(--s2) 0; border-bottom:1px solid color-mix(in srgb, var(--brass) 16%, transparent);
  font-family:var(--fig); font-size:0.86rem; font-weight:700; color:var(--parchment); }
.stand tr:last-child td{ border-bottom:0; }
.pos{ color:#7FBF8F; } .neg{ color:#D98A7A; }

.where{ font-family:var(--plate); font-weight:600; letter-spacing:0.14em;
        text-transform:uppercase; font-size:0.82rem; color:var(--brass-lt); }
.hide{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .plate:hover{ transform:none; }
}
@media print{ .top,.bar,.plate__foot,.no-print{ display:none !important; }
  body{ background:#fff; color:#000; } }

/* ═══ one-screen play: the round bar sits above the card, and names are
       written INTO the card the way they are on paper ═══════════════════ */
.wrap--play{ max-width:92rem; }
.top--play{ margin-bottom:var(--s4); }

.roundbar{ position:relative; display:flex; flex-wrap:wrap; gap:var(--s3);
  align-items:flex-end; background:var(--baize-2); border:1px solid var(--rule);
  padding:var(--s4); margin-bottom:var(--s6); }
.rb__field{ display:flex; flex-direction:column; min-width:7rem; }
.rb__field--wide{ flex:1; min-width:18rem; position:relative; }
.rb__field--xs{ width:5.5rem; min-width:0; }
.rb__field label{ margin-bottom:var(--s1); }
.rb__combo{ display:flex; gap:var(--s2); }
.rb__combo input{ flex:1; }
.btn--sm{ padding:var(--s2) var(--s3); font-size:0.7rem; min-height:38px; white-space:nowrap; }
.rb__note{ flex-basis:100%; font-family:var(--plate); font-size:0.72rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--brass-lt); }
.rb__field--wide .results{ position:absolute; top:100%; left:0; right:0; z-index:20;
  background:var(--baize-2); box-shadow:var(--shadow-lg, 0 12px 32px rgba(0,0,0,.5)); }

/* the seat cell — name, index, strokes, all on the card */
table.card td.lab--seat{ padding:var(--s1) var(--s2); min-width:12rem; }
.lab--seat .pname{ width:100%; min-height:0; padding:2px 4px; border:0;
  border-bottom:1px solid var(--rule-lt); background:transparent; border-radius:0;
  font-family:var(--plate); font-weight:600; font-size:0.9rem; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--ink); text-align:left; }
.lab--seat .pname::placeholder{ color:#9A9A90; text-transform:uppercase; }
.lab--seat .pnums{ display:flex; gap:var(--s1); margin-top:2px; }
.lab--seat .pnum{ width:50%; min-height:0; padding:1px 3px; border:0; background:transparent;
  font-family:var(--fig); font-size:0.68rem; font-weight:700; color:#6B6B63;
  text-align:left; border-radius:0; }
.lab--seat .pnum--ch{ color:var(--accent-deep); }
.lab--seat input:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:-1px;
  background:var(--accent-soft); }

@media (max-width:48rem){
  .rb__field--wide{ min-width:100%; }
  table.card td.lab--seat{ min-width:9.5rem; }
}

/* ═══ HOLE VIEW — the on-course instrument ════════════════════════════════
   Targets are sized for a thumb in a glove: nothing interactive is under
   44px. The full card stays one tap away for review. ═════════════════════ */
.viewtabs{ display:flex; gap:0; margin:0 0 var(--s4); border:1px solid var(--rule); width:max-content; }
.vt{ font-family:var(--plate); font-weight:600; font-size:0.76rem; letter-spacing:0.14em;
  text-transform:uppercase; padding:var(--s3) var(--s6); min-height:44px;
  background:transparent; color:var(--chalk); border:0; cursor:pointer; }
.vt + .vt{ border-left:1px solid var(--rule); }
.vt.on{ background:var(--brass); color:var(--baize); }

#holeview{ background:var(--cream); border:1px solid var(--brass); color:var(--ink);
  box-shadow:0 14px 34px rgba(0,0,0,.45); }

.hnav{ display:flex; align-items:stretch; background:var(--accent-deep); color:var(--on-accent); }
.hnav__b{ width:60px; flex:none; border:0; background:transparent; color:inherit;
  font-size:2rem; line-height:1; cursor:pointer; font-family:var(--body); }
.hnav__b:disabled{ opacity:.3; cursor:not-allowed; }
.hnav__b:active{ background:rgba(0,0,0,.16); }
.hnav__mid{ flex:1; text-align:center; padding:var(--s3) var(--s2); }
.hnav__no{ font-family:var(--display); font-weight:900; font-size:1.9rem; line-height:1; }
.hnav__meta{ display:flex; gap:var(--s4); justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:var(--s2);
  font-family:var(--plate); font-weight:600; font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; }
.hnav__meta > span{ display:inline-flex; align-items:center; gap:var(--s2); }
.hnav__wolf{ border:1px solid currentColor; padding:2px 8px; }

.hseats{ padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2); }
.hs{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3);
  border:1px solid var(--rule-lt); background:var(--cream); }
.hs:nth-child(even){ background:var(--cream-alt); }
.hs__who{ flex:1; min-width:0; display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.hs__name{ font-family:var(--plate); font-weight:600; font-size:1.05rem; letter-spacing:0.05em;
  text-transform:uppercase; }
.hs__dot{ color:var(--accent-deep); font-size:1.3rem; line-height:0.6; }
.hs__net{ font-family:var(--fig); font-size:0.7rem; color:#6B6B63; }

.step{ display:flex; align-items:stretch; border:1px solid var(--gridline); flex:none; }
.step__b{ width:52px; min-height:52px; border:0; background:var(--accent-soft);
  color:var(--accent-deep); font-size:1.5rem; line-height:1; cursor:pointer;
  font-family:var(--body); }
.step__b:active{ background:var(--accent-deep); color:var(--cream); }
.step__v{ width:64px; min-height:52px; border:0; border-left:1px solid var(--gridline);
  border-right:1px solid var(--gridline); background:var(--cream); text-align:center;
  font-family:var(--fig); font-weight:700; font-size:1.5rem; color:var(--ink);
  border-radius:0; padding:0; }
.step--sm .step__b{ width:34px; min-height:34px; font-size:1.05rem; }
.step--sm .step__v{ width:44px; min-height:34px; font-size:0.95rem; }

.hmarks{ padding:0 var(--s3) var(--s3); display:flex; flex-direction:column; gap:var(--s2); }
.hrow{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s2) var(--s3); background:var(--accent-soft); }
.hrow__k{ font-family:var(--plate); font-weight:600; font-size:0.74rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent-deep); }

.hlive{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4); background:var(--ink); color:var(--cream); }
.hl__k{ font-family:var(--plate); font-weight:600; font-size:0.72rem; letter-spacing:0.16em;
  text-transform:uppercase; opacity:.75; }
.hl__v{ font-family:var(--fig); font-weight:700; font-size:1rem; }

.hstrip{ display:flex; flex-wrap:wrap; gap:2px; padding:var(--s3); background:var(--cream-alt);
  border-top:1px solid var(--rule-lt); }
.hstrip__b{ flex:1 0 auto; min-width:42px; min-height:42px; border:1px solid var(--rule-lt);
  background:var(--cream); color:var(--ink); font-family:var(--fig); font-size:0.8rem;
  font-weight:700; cursor:pointer; }
.hstrip__b.done{ background:var(--accent-soft); }
.hstrip__b.on{ background:var(--accent-deep); color:var(--on-accent); border-color:var(--accent-deep); }

/* ═══ mobile ═════════════════════════════════════════════════════════════ */
@media (max-width:56rem){
  /* iOS zooms the page on focusing any input under 16px — on a scorecard
     that zoom fires seventy-plus times a round. 16px everywhere. */
  input, select, .step__v, table.card input{ font-size:16px; }
  .lab--seat .pname{ font-size:16px; }

  /* secondary steppers are still thumb targets on a phone — 34px is a
     mis-tap waiting to happen when you are standing on a green */
  .step--sm .step__b{ width:42px; min-height:42px; font-size:1.2rem; }
  .step--sm .step__v{ width:52px; min-height:42px; font-size:1.05rem; }
  .wrap{ padding:var(--s4) max(var(--s3), env(safe-area-inset-right, 0px))
         calc(3rem + env(safe-area-inset-bottom, 0px))
         max(var(--s3), env(safe-area-inset-left, 0px)); }

  /* one seat per line, and the Start button gets the full width of a thumb */
  .su__seats{ grid-template-columns:1fr; }
  .seat__hi{ width:4.4rem; }
  .su__start{ flex-basis:100%; order:9; }
  .top{ gap:var(--s3); margin-bottom:var(--s4); padding-bottom:var(--s3); }
  .top h1{ font-size:clamp(1.9rem,10vw,2.6rem); }
  .top .btn{ padding:var(--s2) var(--s3); font-size:0.7rem; }
  .roundbar{ padding:var(--s3); gap:var(--s2); }
  .rb__field{ min-width:0; flex:1 1 45%; }
  .rb__field--xs{ width:auto; flex:1 1 28%; }
  .board{ grid-template-columns:1fr; gap:var(--s4); }
  .cols{ grid-template-columns:1fr; }
  .hnav__no{ font-size:1.6rem; }
  .hs__name{ font-size:0.95rem; }

  /* ── one hole at a time, the way a handicap app does it ────────────────
     You enter four scores per hole and set par once for the round, so the
     score stepper gets the thumb-sized target and par/S.I. get demoted to
     a quiet line. Sizing them the same way had it backwards: the control
     you touch 70 times was smaller than the one you touch 18 times. */
  .hseats .step__b{ width:58px; min-height:58px; font-size:1.6rem; }
  .hseats .step__v{ width:66px; min-height:58px; font-size:1.5rem; font-weight:700; }
  .hs{ padding:var(--s2) var(--s3); }
  .hnav__b{ width:56px; font-size:2rem; }

  /* the hole strip wrapped to three rows and ate a third of the screen */
  .hstrip{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
           -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hstrip::-webkit-scrollbar{ display:none; }
  .hstrip__b{ flex:0 0 auto; min-width:44px; min-height:44px; scroll-snap-align:center; }
}
@media (max-width:26rem){
  .step__b{ width:44px; } .step__v{ width:54px; }
  .hseats .step__b{ width:54px; } .hseats .step__v{ width:58px; }
  .hnav__b{ width:48px; }
}

/* Score relative to par, marked the way it is on a paper card: a circle for
   a birdie or better, a square for a bogey or worse. Lets you read the hole
   without doing the subtraction. */
.hs--under .step__v{ border-radius:50%; box-shadow:inset 0 0 0 2px var(--accent-deep); }
.hs--over .step__v{ box-shadow:inset 0 0 0 2px #6B6B63; }
.hs--eagle .step__v{ border-radius:50%; box-shadow:inset 0 0 0 2px var(--accent-deep),
                                                   inset 0 0 0 5px var(--cream); }
.hs--double .step__v{ box-shadow:inset 0 0 0 2px #6B6B63, inset 0 0 0 5px var(--cream); }

/* the course bar is set once and then in the way — collapse it */
.rbwrap{ margin-bottom:var(--s6); }
.rbsum{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  cursor:pointer; list-style:none; min-height:46px; padding:var(--s2) var(--s4);
  border:1px solid var(--rule); background:var(--baize-2);
  font-family:var(--plate); font-weight:600; font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--brass-lt); }
/* the summary carries the whole flight's names — trim, never wrap */
.rbsum > span:first-child{ flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.rbsum__x{ flex:none; }

/* ═══ ROUND SETUP — names, course, stake, Start. The panel is built for the
   first minute of a round on a phone in a parking lot: stacked blocks, one
   tap for anything the device has seen before. ═══════════════════════════ */
.roundbar--setup{ flex-direction:column; align-items:stretch; gap:var(--s6); }
.su__block{ display:flex; flex-direction:column; gap:var(--s2); }
.su__block > label{ margin-bottom:0; }

.su__seats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:var(--s2); }
.seat{ display:flex; align-items:center; gap:var(--s2); }
.seat__no{ width:1.7rem; flex:none; text-align:center; font-family:var(--fig);
  font-size:0.7rem; font-weight:700; color:var(--brass); }
.seat__name{ flex:1; min-width:0; min-height:46px; }
.seat__hi{ width:5rem; flex:none; min-height:46px; text-align:center;
  font-family:var(--fig); }

/* chips: the people and places this phone already knows */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{ display:inline-flex; align-items:center; gap:var(--s2); min-height:42px;
  padding:var(--s2) var(--s3); border:1px solid var(--rule); border-radius:0;
  background:var(--baize); color:var(--parchment); cursor:pointer;
  font-family:var(--plate); font-weight:600; font-size:0.8rem; letter-spacing:0.08em;
  transition:border-color .2s, background .2s; }
.chip:hover{ border-color:var(--brass); background:var(--baize-3); }
.chip:active{ background:color-mix(in srgb, var(--brass) 20%, var(--baize)); }
.chip__hi{ font-family:var(--fig); font-size:0.68rem; color:var(--chalk); }
.chip--course{ border-color:color-mix(in srgb, var(--brass) 55%, transparent);
  color:var(--brass-lt); }

.su__course{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-end;
  margin-top:var(--s2); }
.su__course .rb__field{ flex:1 1 11rem; min-width:0; }
.su__course .rb__field--xs{ flex:1 1 5rem; width:auto; }

.su__foot{ display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:var(--s4); }
.su__foot .rb__field--xs{ width:6.5rem; }
.su__start{ flex:1; min-height:52px; font-size:0.92rem; letter-spacing:0.18em; }
.rbsum::-webkit-details-marker{ display:none; }
.rbsum__x{ color:var(--chalk); font-size:0.7rem; }
.rbwrap[open] .rbsum{ border-bottom:0; }
.rbwrap[open] .rbsum__x::after{ content:" ▲"; }
.rbwrap:not([open]) .rbsum__x::after{ content:" ▼"; }
.rbwrap .roundbar{ margin-bottom:0; border-top:0; }

/* par + S.I. are round settings, not per-hole entry — keep them quiet */
.hnav__meta{ gap:var(--s3); }
.hnav__meta .hm{ font-size:0.66rem; letter-spacing:0.1em; opacity:.9; }
.hnav__meta .step--sm .step__b{ width:30px; min-height:30px; font-size:0.95rem;
  background:rgba(255,255,255,.14); color:inherit; border:0; }
.hnav__meta .step--sm .step__v{ width:36px; min-height:30px; font-size:0.85rem;
  background:rgba(255,255,255,.9); color:var(--ink); }
.hnav__meta .step{ border-color:rgba(255,255,255,.3); }
.hnav__wolf{ margin:var(--s2) auto 0; display:inline-block; border:1px solid currentColor;
  padding:3px 10px; font-family:var(--plate); font-weight:600; font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; }
@media (max-width:56rem){
  /* everything you can tap clears 40px, header steppers included */
  .hnav__meta .step--sm .step__b{ width:42px; min-height:42px; font-size:1.15rem; }
  .hnav__meta .step--sm .step__v{ width:46px; min-height:42px; font-size:1rem; }
}