/* App-level additions on top of tokens.css and components.css (design system changes go through the
   shell lane). Uses tokens only, no hex. Owner: shell lane.
   Other lanes add screen-specific rules in css/screens/<area>.css (their own file). */

/* A page never scrolls sideways. `clip` (not `hidden`) keeps position: sticky working. */
body { overflow-x: clip; }

/* Sofia Sans draws its letters about 10% smaller than the old font at the same size (x-height 0.49 of the size, against 0.54), so
   every size read smaller after the switch (Grant, 15 Oct 2026). This sizes each letter as if the x-height were 0.54, so the app,
   the club and member pages and the marketing site read as before without changing any size (so a 16px field still stops a
   phone zooming in). Browsers without font-size-adjust show the font as it is. */
body { font-size-adjust: 0.54; }

/* Keyboard focus and in-page jumps must never land behind the fixed bottom navigation, the sticky top bar or the
   sticky Search and Filter bar (WCAG 2.4.11 Focus Not Obscured). The browser scrolls a focused control clear of
   these edges. Bottom: the nav plus the home-bar safe area plus a little air. Top: the top bar, plus the list tools
   bar (about 72 px) on the screens that have one. On 768 and wider the bottom nav is gone. */
html {
  scroll-padding-top: calc(var(--top-bar-h) + env(safe-area-inset-top) + var(--sp-4));
  scroll-padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--sp-4));
}
html:has(.list-tools) {
  scroll-padding-top: calc(var(--top-bar-h) + env(safe-area-inset-top) + 72px + var(--sp-4));
}
@media (min-width: 768px) {
  html { scroll-padding-bottom: var(--sp-6); }
}

/* Skip link: first thing a keyboard user tabs to, hidden until focused */
.skip-link { position: fixed; left: var(--sp-3); top: var(--sp-3); z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4);
  background: var(--primary); color: var(--on-primary); font-weight: var(--fw-semibold);
  border-radius: var(--r-md); text-decoration: none; box-shadow: var(--shadow-2);
  transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.boot, .noscript { padding: var(--sp-6) var(--gutter); color: var(--text-2); }
/* While the page loads: the Braidwood B above "Loading…", in the middle of the screen. It fades in only after a moment, so a
   page that loads quickly never flashes it. */
.boot { display: grid; justify-items: center; align-content: center; gap: var(--sp-3); min-height: 60vh; text-align: center; }
.boot__mark { font-size: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { .boot { animation: bw-boot-in .4s ease-out .35s both; } }
@keyframes bw-boot-in { from { opacity: 0; } to { opacity: 1; } }
ul.attention, ul.list { list-style: none; margin: 0; padding: 0; }

/* Stub notice used by scaffold screens until a lane builds them */
.stub-note { padding: var(--sp-4); border: 1px dashed var(--control-line); border-radius: var(--r-md); color: var(--text-2); }

/* ============================== SIGN-IN ================================ */
.signin { width: 100%; max-width: 420px; margin: var(--sp-6) auto 0; display: grid; gap: var(--sp-5); align-content: start; }
.signin__brand { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--brand-text); }
.signin__lede { color: var(--text-2); overflow-wrap: anywhere; }
.signin__lede strong { color: var(--text); font-weight: var(--fw-semibold); }
.signin__form { margin: 0; }
.signin__form .field:last-of-type { margin-bottom: 0; }
/* Quiet text buttons line their words up with the form edge. They wrap, so a long sentence stays inside the card. */
.signin__links { display: grid; gap: var(--sp-1); justify-items: start; }
.signin__again { display: grid; gap: var(--sp-1); justify-items: start; }
.signin__wait { font-size: var(--fs-sm); color: var(--text-2); padding-left: var(--sp-4); }
.signin__wait:empty { display: none; }
.signin__foot { font-size: var(--fs-sm); color: var(--text-2); }
.signin__foot a { white-space: nowrap; }
.signin__status:empty { display: none; }
.signin__notice { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-fg); font-size: var(--fs-sm); }
.signin__notice[hidden] { display: none; }
@media (min-width: 768px) {
  .signin { margin-top: 12vh; padding: var(--sp-7); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
}

/* ============================ CLUB + ACCOUNT =========================== */
.club-section { margin-top: var(--sp-6); }
.club-section > .label { display: block; margin-bottom: var(--sp-2); }
.account-id { display: grid; gap: 2px; margin-bottom: var(--sp-5); overflow-wrap: anywhere; }
.account-id__name { font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.account-id__meta { font-size: var(--fs-sm); color: var(--text-2); }
.account-block { margin-top: var(--sp-5); }
.nav-list__link[aria-current="true"]::after { display: none; }
.nav-list__link[aria-current="true"] .nav-list__note { color: var(--accent-text); font-weight: var(--fw-semibold); }
.help-list { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }

/* ===================== PASSWORD SIGN-IN (added with email + password sign-in) =====================
   Only what the existing classes cannot do: the Show / Hide button beside a password box, and the preview-mode
   "Try a sample account" list. Everything else on the sign-in screens uses the existing classes. */
.pw { display: flex; gap: var(--sp-2); align-items: stretch; }
.pw .input { flex: 1 1 auto; min-width: 0; }
.pw__toggle { flex: 0 0 auto; min-width: 72px; min-height: 44px; }
.signin__sample { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.signin__sample[hidden], .signin__sample:empty { display: none; }
.signin__sample .label { margin: 0; }
.signin__sample .hint { margin: 0; }
.signin__sample .list { margin: 0; padding: 0; list-style: none; }
/* The club name and the email share one row on the Club list. Here the name is long ("Last One Standing
   delegate, Carrickshore FC") and the email is long too, so on a phone the name was squeezed into a narrow
   column and "FC" dropped onto its own line beside the address. Stack them: the name uses the full row,
   the email sits underneath, and the chevron stays centred on the right. */
.signin__sample .nav-list__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--sp-3); row-gap: 2px; padding-block: var(--sp-3);
}
.signin__sample .nav-list__name { grid-column: 1; grid-row: 1; min-width: 0; line-height: 1.25; text-wrap: balance; }
.signin__sample .nav-list__note { grid-column: 1; grid-row: 2; margin-left: 0; min-width: 0; overflow: visible; text-overflow: unset; white-space: normal; overflow-wrap: anywhere; }
.signin__sample .nav-list__link::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-right: 0; }
.signin__links .btn, .signin__again .btn, .mem-signin__alt .btn {
  min-height: 44px; height: auto; max-width: 100%; padding-block: 10px; padding-inline: 0;
  white-space: normal; text-align: left; justify-content: flex-start;
}

/* The Features sheet (the phone's shared slot when a game and a pot are both live, Grant 20 Oct 2026) */
.features-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.features-link { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.features-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.features-link__t { display: grid; }
.features-link__t small { color: var(--text-2); }
.features-link svg { width: 20px; height: 20px; }