/* Matchday Stubs: the step-by-step builder (builder-v2.js), 26 Oct 2026.
   Built only from the brand.css tokens. One question per screen: the page itself never scrolls,
   only the card in the middle does when a screen is long; the progress bar is pinned to the top
   and Next to the bottom. Phones get the full screen; wider screens get the same flow in a column. */
html.mds-app, html.mds-app body { height:100%; overflow:hidden; }
@supports (height:100dvh) { html.mds-app, html.mds-app body { height:100dvh; } }
html.mds-app body { display:flex; flex-direction:column; }
html.mds-app .site-header { flex:none; position:relative; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.flow { flex:1; min-height:0; display:flex; flex-direction:column; width:100%; max-width:600px; margin:0 auto; background:var(--paper); }
@media (min-width:760px) {
  html.mds-app body { background:var(--paper-deep); }
  .flow { border-inline:1px solid var(--line); box-shadow:var(--shadow); }
}
.fp { flex:none; padding:10px 16px 9px; border-bottom:1px solid var(--line); background:var(--paper); }
.fp-bars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.fp-seg { display:flex; flex-direction:column; gap:5px; min-width:0; }
.fp-track { height:4px; border-radius:999px; background:var(--paper-deep); overflow:hidden; }
.fp-fill { height:100%; background:var(--gold); border-radius:999px; transition:width .35s ease; }
.fp-lab { font-family:var(--f-data); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-lab.on { color:var(--ink); }
.fp-meta { display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-family:var(--f-data); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--label); }
.fp-meta b { color:var(--gold-deep); font-weight:600; }

.fb { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:14px 16px; display:flex; flex-direction:column; gap:14px; }
.fb > * { flex:none; margin:0; }
.q { font-family:var(--f-head); font-weight:800; font-size:1.45rem; line-height:1.08; letter-spacing:-.02em; color:var(--ink); margin:0; }
.qsub { font-size:var(--t-sm); color:var(--ink-700); margin:-8px 0 0 !important; }
.qblock { display:flex; flex-direction:column; gap:10px; }
.fb .toggle-paths, .fb .field, .fb .notice, .fb .missing-box, .fb .builder-summary { margin:0; }
.fb .builder-summary { padding:6px 16px; }
.fb .dropzone { padding:28px 16px; font:inherit; }
.fb .upcoming-offer { margin:0; padding:14px 14px 12px; }
.fb .upcoming-offer .uo-lead { font-size:.98rem; }
.fb .hint { margin:0; }
.fb .field .hint, .fb .field .char-count { display:block; margin-top:4px; }
.fstub .stub-flip { margin-top:10px; }
.fstub .ph { text-align:center; font-size:var(--t-xs); color:var(--label); margin:6px 0 0; }
.flow .field-row-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.flow .field-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.back-choices.one-col { grid-template-columns:1fr; }
.back-choice .bc-price { font-weight:600; }
.check-row { display:flex; gap:10px; align-items:flex-start; font-size:var(--t-sm); cursor:pointer; }
.check-row input { width:18px; height:18px; margin-top:2px; accent-color:var(--ink); flex:none; }

.fn { flex:none; border-top:1px solid var(--line); background:var(--paper); padding:10px 16px max(12px, env(safe-area-inset-bottom)); }
.fn-skip { display:block; width:100%; text-align:center; margin:0 0 8px !important; padding:2px 0 4px; }
.fn-row { display:flex; gap:10px; }
.fn-row .btn { min-height:52px; font-size:1.05rem; }
.fn-next { flex:1; }
.fn-back { flex:0 0 52px; width:52px; padding:0 !important; }
.fn-back svg { width:20px; height:20px; }

.club-pick { flex:1 1 auto !important; min-height:0; display:flex; flex-direction:column; gap:10px; }
.club-pick .club-search { margin:0; }
.club-pick .club-grid { flex:1; min-height:0; max-height:none; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; }
.pinned-links { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pinned-links .link-btn { margin:0; }
.help-link { font-family:var(--f-body); font-size:var(--t-sm); color:var(--ink-700); text-decoration:underline; text-underline-offset:3px; background:none; border:0; padding:4px 0; cursor:pointer; }

.scorer-list { display:flex; flex-direction:column; gap:10px; }
.scorer-row { display:grid; grid-template-columns:minmax(0,1.6fr) 64px minmax(0,1fr) 44px; gap:6px; align-items:center; padding-bottom:10px; border-bottom:1px dashed var(--line); }
.scorer-row select[data-sc-team] { grid-column:1 / 4; }
.scorer-row .sc-del { grid-column:4; min-height:40px; padding:6px 0; }
.scorer-row input, .scorer-row select { width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--r-tight); background:var(--paper-card); font-size:var(--t-base); }
.ko-pick { display:flex; align-items:center; gap:6px; }
.ko-pick select { width:auto !important; }
.ev-time { display:grid; grid-template-columns:auto 1fr; gap:8px; }

.another-stub { padding:14px 16px; border:2px solid var(--gold); border-radius:12px; background:rgba(202,166,74,.08); }
.another-stub-head { margin:0 0 10px; font-weight:800; color:var(--ink); }
.friend-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:var(--t-sm); padding:6px 0; border-top:1px dashed var(--line); }
.friend-row:last-of-type { margin-bottom:10px; }
.ks-car { display:flex; flex-direction:column; gap:10px; }
.ks-slide { display:none; gap:14px; align-items:center; animation:fade .35s ease; }
.ks-slide.on { display:flex; }
.ks-img { width:96px; height:auto; flex:none; border-radius:4px; }
/* "Add keepsake" on the keepsake card: a short pill, not a full-height button (Hayden 27 Oct 2026) */
.ks-add { margin-top:8px; align-self:flex-start; min-height:32px; padding:6px 14px; font-size:.85rem; line-height:1.2; }
.ks-made { aspect-ratio:2/3; background:var(--mount); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--f-data); font-size:10px; color:var(--label); padding:6px; }
.ks-nav { display:flex; align-items:center; justify-content:center; gap:14px; }
.ks-arrow { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper-card); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.ks-arrow svg { width:18px; height:18px; }
.ks-next svg { transform:rotate(180deg); }
.ks-dots { display:flex; gap:6px; }
.ks-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); display:block; }
.ks-dots i.on { background:var(--ink); }

.review-sides { grid-template-columns:1fr 1fr !important; gap:12px; margin:0 !important; }
.rv-name { font-family:var(--f-head); font-weight:700; font-size:var(--t-sm); margin:0 0 -6px !important; }
.rv-btn { display:flex; flex-direction:column; gap:6px; padding:0; background:none; border:0; text-align:center; cursor:zoom-in; }
.rv-btn iframe { pointer-events:none; }
.rv-cap { font-family:var(--f-data); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--label); }

.lb { position:fixed; inset:0; z-index:300; background:rgba(11,13,15,.94); display:flex; flex-direction:column; justify-content:center; gap:18px; padding:16px; }
.lb-stage { width:100%; max-width:900px; margin:0 auto; }
.lb-x { position:absolute; top:max(14px, env(safe-area-inset-top)); right:14px; z-index:2; width:48px; height:48px; border-radius:50%; background:rgba(244,241,234,.16); color:#F4F1EA; font-size:20px; }
.lb-nav { display:flex; align-items:center; justify-content:center; gap:16px; }
.lb-lab { font-family:var(--f-data); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#F4F1EA; text-align:center; }

.mds-toast { position:fixed; left:12px; right:12px; top:calc(var(--header-h) + 8px); z-index:400; max-width:576px; margin:0 auto; padding:12px 14px; border-radius:12px; font-size:var(--t-sm); font-weight:600; box-shadow:var(--shadow-lg); border:1px solid;
  transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .25s ease, opacity .25s ease, visibility 0s .25s; }
.mds-toast.show { transform:none; opacity:1; visibility:visible; transition:transform .25s ease, opacity .25s ease; }
.mds-toast.warn { background:#B3261E; border-color:#8C1D18; color:#fff; font-size:var(--t-base); padding:14px 16px 14px 44px; } /* red, not pale yellow: Hayden missed the yellow one on the back step (27 Oct 2026) */
.mds-toast.warn::before { content:'!'; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:#fff; color:#B3261E; font-weight:800; font-size:14px; line-height:20px; text-align:center; }
.mds-toast.ok { background:#e9f6ec; border-color:#bfe3c6; color:#1f5230; }
/* attendance: ask when the lookup didn't find it (27 Oct 2026) */
.att-ask { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; font-size:var(--t-sm); color:var(--ink-700); }
.att-ask .field { width:100%; }
.att-ask .hint { display:block; }
/* phones keep :hover after a tap, so the gold "Add to basket" arrived looking faded, like the disabled
   button (UX review 27 Oct 2026). On touch screens the buttons keep their normal colours. */
@media (hover:none) {
  .mds-app .btn-gold:hover { background:var(--gold); }
  .mds-app .btn-primary:hover { background:var(--ink); box-shadow:var(--shadow); }
  .mds-app .btn-outline:hover { background:transparent; color:var(--ink); }
  .mds-app .btn-ghost:hover { border-color:var(--line); }
}
/* disabled reads as disabled, not as a paler version of the same button */
.mds-app .btn[disabled] { opacity:1; background:var(--line); color:var(--ink-700); box-shadow:none; }
/* thumb-sized tap targets */
.mds-app .link-btn, .mds-app .help-link, .mds-app .ge-again { min-height:44px; display:inline-flex; align-items:center; }
.mds-app .fn-skip { min-height:36px; display:flex; align-items:center; justify-content:center; }
.mds-app .ks-arrow { width:44px; height:44px; flex:none; }
.mds-app .stub-flip button { min-height:44px; }
/* the attendance prompt and the inline headline error */
.field-err { display:block; color:#B3261E; font-size:var(--t-sm); margin-top:6px; }
.field.has-err input { border-color:#B3261E; }

/* Match date: iOS Safari gives a date input its own minimum width, so it ran past the boxes above it
   and the page scrolled sideways. Hold it to the column like every other field (Hayden 27 Oct 2026). */
.fb .field { min-width:0; }
.fb .field input[type=date] { -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; max-width:100%; min-height:48px; text-align:left; }
.fb .field input[type=date]::-webkit-date-and-time-value { text-align:left; }