@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");
/* Public club journeys: consistent controls without altering QR, signature,
   payment or printed-document layouts. The gate retains its admission colours. */
@media screen {
  :root { --paper: #f5f2ea; --public-focus: #1c2a44; --public-radius: 8px; }
  .equistal-public { -webkit-font-smoothing: antialiased; }
  .equistal-public .card { border-radius: var(--public-radius); box-shadow: none; }
  .equistal-public :is(button, a.go, a.btn, input:not([type=checkbox]):not([type=radio]), select) { min-height: 44px; }
  .equistal-public :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { border-radius: var(--public-radius); max-width: 100%; }
  .equistal-public :is(button, a.go, a.btn) { border-radius: var(--public-radius); }
  .equistal-public :is(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--public-focus); outline-offset: 3px; }
  /* A tick box is 20px and the label it sits in at least 24px tall, so the whole label is the target (audit F06, WCAG 2.5.8). */
  .equistal-public input[type=checkbox], .equistal-public input[type=radio] { width: 20px; height: 20px; min-width: 20px; }
  .equistal-public label:has(> input[type=checkbox]), .equistal-public label:has(> input[type=radio]) { min-height: 24px; }
  .equistal-public .doc { line-height: 1.75; }
  .equistal-public .kicker { letter-spacing: .09em; }
  .equistal-public .row .l { min-width: 0; overflow-wrap: anywhere; }
  .equistal-public .stat { flex-wrap: wrap; }
  .equistal-public .stat > div { min-width: 130px; }
  .equistal-public .wrap, .equistal-public .panel { min-width: 0; }
  .equistal-public.gate { --public-focus: #c9a35c; }
}
@media (max-width: 480px) {
  .equistal-public :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
  .equistal-public .card { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .equistal-public *, .equistal-public *::before, .equistal-public *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Revision 5 (Oct 2026): the redesign. The customer pages take the same
   deep navy, club gold and cool white as the console, and Plus Jakarta Sans
   for text; each page keeps its own layout. The gate keeps its admission
   colours (green, red), which are not touched here. */
@media screen {
  .equistal-public {
    --paper: #f3f5f9; --ground: #f3f5f9; --card: #ffffff; --surface: #ffffff;
    --ink: #0f1e2e; --soft: #5b6b7d; --muted: #5b6b7d;
    --navy: #0b1e33; --navy-deep: #13345a; --green: #0b1e33;
    --line: #e3e8ef; --line-strong: #cfd7e2;
    --sans: "Plus Jakarta Sans", "Segoe UI", -apple-system, sans-serif;
    --public-focus: #0b1e33; --public-radius: 12px;
    background: var(--paper); font-family: var(--sans);
  }
  .equistal-public .card { border-radius: 16px; }
  .equistal-public :is(button, a.go, a.btn) { border-radius: 999px; }
  .equistal-public.gate { --public-focus: #e2b865; }
}

/* The small way back to the portal, on every customer page (7 Oct 2026). */
@media screen { .equistal-public .portal-link { text-align: center; margin: 18px auto 28px; font-size: 13px; } .equistal-public .portal-link a { color: var(--navy); } }
@media print { .portal-link { display: none; } }

/* ---------- Revision 5 kit for the desk and customer apps (Oct 2026) ----------
   Opt-in with class "eq" on <body> (counter, booking, pass, station, gate,
   facility board). Pages that have not been redone keep the block above.
   Every colour is a token here, light and dark; the pages read var(--…).
   Dark follows the phone (prefers-color-scheme); the counter also honours
   the console's own choice through html.dark / html.light. */
@media screen {
  .equistal-public.eq {
    color-scheme: light;
    --bg: #f3f5f9; --ground: #f3f5f9; --paper: #f3f5f9;
    --surface: #ffffff; --card: #ffffff; --elevated: #ffffff;
    --surface-2: #f6f8fb; --raised: #f6f8fb; --hover: #eef2f7;
    --ink: #0f1e2e; --muted: #5b6b7d; --soft: #5b6b7d; --faint: #64748a;
    --line: #e3e8ef; --line-soft: #edf1f5; --line-strong: #cfd7e2;
    --band: #0b1e33; --band-ink: #ffffff; --band-muted: #c3d2e2; --band-line: rgba(255,255,255,.18);
    --band-grad: linear-gradient(120deg, #0b1e33 0%, #10304f 62%, #1f5e8c 135%);
    --navy: #0b1e33; --accent: #0b1e33; --accent-hover: #13345a; --accent-ink: #ffffff; --accent-wash: rgba(31,94,140,.10);
    --gold: #d4a24c; --gold-text: #8a6420; --gold-bright: #e2b865;
    --cta: #d4a24c; --cta-hover: #c79437; --cta-ink: #0b1e33; --cta-glow: rgba(212,162,76,.30);
    --link: #1f5e8c;
    --good: #1a7a52; --good-wash: #e1f4ea; --good-line: #b9e3cd;
    --warn: #8a5a0b; --warn-wash: #fcf1de; --warn-line: #f2d7a6;
    --bad: #b3263f; --bad-wash: #fbe9ec; --bad-line: #f3c6cf;
    --info: #1f5e8c; --info-wash: #e6f0f8; --info-line: #c4dbee;
    --qr-bg: #ffffff; --qr-ink: #0b1e33;
    --shadow-card: 0 1px 2px rgba(11,30,51,.04), 0 10px 28px rgba(11,30,51,.06);
    --shadow-float: 0 18px 48px rgba(11,30,51,.18);
    --backdrop: rgba(11,30,51,.45);
    --radius-card: 18px; --radius: 12px; --public-radius: 12px;
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans: "Plus Jakarta Sans", "Segoe UI", -apple-system, system-ui, sans-serif;
    --public-focus: #1f5e8c;
    background: var(--bg); color: var(--ink); font-family: var(--sans);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html:not(.light) .equistal-public.eq {
    color-scheme: dark;
    --bg: #0b1726; --ground: #0b1726; --paper: #0b1726;
    --surface: #12233a; --card: #12233a; --elevated: #182d47;
    --surface-2: #0f1e32; --raised: #0f1e32; --hover: #1a3150;
    --ink: #e8eef5; --muted: #a3b3c6; --soft: #a3b3c6; --faint: #8a9cb2;
    --line: #223a57; --line-soft: #1a2f49; --line-strong: #2c4a6b;
    --band: #08131f; --band-muted: #a9bacd; --band-line: rgba(255,255,255,.12);
    --band-grad: linear-gradient(120deg, #08131f 0%, #0c1c2e 55%, #10304f 125%);
    --navy: #e8eef5; --accent: #e2b865; --accent-hover: #ecc77d; --accent-ink: #0b1e33; --accent-wash: rgba(226,184,101,.16);
    --gold-text: #e2b865;
    --cta: #e2b865; --cta-hover: #ecc77d; --cta-ink: #0b1e33; --cta-glow: rgba(0,0,0,0);
    --link: #8cc2ff;
    --good: #4fe0a0; --good-wash: rgba(0,200,117,.14); --good-line: rgba(0,200,117,.32);
    --warn: #ffc46b; --warn-wash: rgba(253,171,61,.14); --warn-line: rgba(253,171,61,.35);
    --bad: #ff8b98; --bad-wash: rgba(226,68,92,.14); --bad-line: rgba(226,68,92,.38);
    --info: #8cc2ff; --info-wash: rgba(87,155,252,.14); --info-line: rgba(87,155,252,.35);
    --shadow-card: none; --shadow-float: 0 18px 48px rgba(0,0,0,.5);
    --backdrop: rgba(0,0,0,.6);
    --public-focus: #e2b865;
  }
}
@media screen {
  html.dark .equistal-public.eq {
    color-scheme: dark;
    --bg: #0b1726; --ground: #0b1726; --paper: #0b1726;
    --surface: #12233a; --card: #12233a; --elevated: #182d47;
    --surface-2: #0f1e32; --raised: #0f1e32; --hover: #1a3150;
    --ink: #e8eef5; --muted: #a3b3c6; --soft: #a3b3c6; --faint: #8a9cb2;
    --line: #223a57; --line-soft: #1a2f49; --line-strong: #2c4a6b;
    --band: #08131f; --band-muted: #a9bacd; --band-line: rgba(255,255,255,.12);
    --band-grad: linear-gradient(120deg, #08131f 0%, #0c1c2e 55%, #10304f 125%);
    --navy: #e8eef5; --accent: #e2b865; --accent-hover: #ecc77d; --accent-ink: #0b1e33; --accent-wash: rgba(226,184,101,.16);
    --gold-text: #e2b865;
    --cta: #e2b865; --cta-hover: #ecc77d; --cta-ink: #0b1e33; --cta-glow: rgba(0,0,0,0);
    --link: #8cc2ff;
    --good: #4fe0a0; --good-wash: rgba(0,200,117,.14); --good-line: rgba(0,200,117,.32);
    --warn: #ffc46b; --warn-wash: rgba(253,171,61,.14); --warn-line: rgba(253,171,61,.35);
    --bad: #ff8b98; --bad-wash: rgba(226,68,92,.14); --bad-line: rgba(226,68,92,.38);
    --info: #8cc2ff; --info-wash: rgba(87,155,252,.14); --info-line: rgba(87,155,252,.35);
    --shadow-card: none; --shadow-float: 0 18px 48px rgba(0,0,0,.5);
    --backdrop: rgba(0,0,0,.6);
    --public-focus: #e2b865;
  }

  .eq [hidden] { display: none !important; }
  .eq .num, .eq .tnum { font-variant-numeric: lining-nums tabular-nums; }

  /* The navy band across the top: crest, what this is, whose club, who. */
  .eq .eq-band {
    background: var(--band-grad); color: var(--band-ink);
    padding: 14px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
  }
  .eq .eq-band-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
  .eq .eq-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
  .eq .eq-crest { width: 40px; height: 48px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
  .eq .eq-title { min-width: 0; }
  .eq .eq-title h1, .eq .eq-title .h { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 0; color: var(--band-ink); letter-spacing: .005em; display: block; border: 0; padding: 0; }
  .eq .eq-title .over { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); }
  .eq .eq-title .sub { font-size: 13px; color: var(--band-muted); margin: 2px 0 0; overflow-wrap: anywhere; }
  .eq .eq-meta { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 13px; color: var(--band-muted); }
  .eq .eq-meta .who { color: var(--band-ink); font-weight: 600; }
  .eq .eq-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--band-line); background: rgba(255,255,255,.07); color: var(--band-ink);
    font: 600 13px/1 var(--sans); text-decoration: none; cursor: pointer;
  }
  .eq .eq-chip:hover { background: rgba(255,255,255,.15); }
  .eq .eq-band :focus-visible { outline-color: var(--gold-bright); }

  /* Cards. */
  .eq .eq-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 20px; min-width: 0; }
  .eq .eq-card-title { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0; color: var(--ink); }
  .eq .eq-kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }

  /* Buttons: pills. Gold is the one thing to do; navy outline the other. */
  .eq .eq-btn {
    appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink); font: 600 15px/1.1 var(--sans); cursor: pointer; text-decoration: none;
    transition: background .12s, border-color .12s, box-shadow .12s;
  }
  .eq .eq-btn:hover:not(:disabled) { border-color: var(--accent); }
  .eq .eq-btn.primary { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); font-weight: 700; box-shadow: 0 4px 14px var(--cta-glow); }
  .eq .eq-btn.primary:hover:not(:disabled) { background: var(--cta-hover); border-color: var(--cta-hover); }
  .eq .eq-btn.navy { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .eq .eq-btn.navy:hover:not(:disabled) { background: var(--accent-hover); }
  .eq .eq-btn.outline { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
  .eq .eq-btn.outline:hover:not(:disabled) { background: var(--accent-wash); }
  .eq .eq-btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--muted); }
  .eq .eq-btn.block { width: 100%; }
  .eq .eq-btn.lg { min-height: 54px; font-size: 16px; padding: 0 24px; }
  .eq .eq-btn.sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
  .eq .eq-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

  /* Status: a soft badge, the word always beside the colour. */
  .eq .eq-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
    font: 700 11.5px/1.5 var(--sans); letter-spacing: .02em; white-space: nowrap;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
  }
  .eq .eq-badge::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: 0 0 auto; }
  .eq .eq-badge.good { background: var(--good-wash); color: var(--good); border-color: var(--good-line); }
  .eq .eq-badge.warn { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-line); }
  .eq .eq-badge.bad { background: var(--bad-wash); color: var(--bad); border-color: var(--bad-line); }
  .eq .eq-badge.info { background: var(--info-wash); color: var(--info); border-color: var(--info-line); }

  /* Notices. */
  .eq .eq-note { border-radius: var(--radius); padding: 12px 14px; font-size: 14px; line-height: 1.5; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
  .eq .eq-note.good { background: var(--good-wash); border-color: var(--good-line); color: var(--good); }
  .eq .eq-note.warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn); }
  .eq .eq-note.bad { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad); }

  /* Fields: a visible label over every input. */
  .eq .eq-label { display: block; font: 600 13px/1.3 var(--sans); color: var(--muted); margin: 0 0 6px; }
  .eq .eq-field { margin: 0 0 14px; min-width: 0; }
  .eq .eq-field :is(input:not([type=checkbox]):not([type=radio]), select, textarea), .eq .eq-input {
    display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); font: 400 15px/1.4 var(--sans); margin: 0; box-shadow: none;
  }
  .eq .eq-field :is(input, select, textarea):focus, .eq .eq-input:focus { border-color: var(--accent); }
  .eq input[type=checkbox] { accent-color: var(--accent); width: 20px; height: 20px; min-height: 0; }

  .eq :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--public-focus); outline-offset: 2px; }
  .eq .portal-link a { color: var(--link); }
}
@media screen and (max-width: 480px) {
  .eq .eq-band { padding: 12px 16px; }
  .eq .eq-crest { width: 34px; height: 40px; }
  .eq .eq-title h1, .eq .eq-title .h { font-size: 19px; }
  .eq .eq-card { padding: 16px; }
}

/* ---------- Revision 6: the warm look (21 Oct 2026) ----------
   The customer pages and the station screens take the staff console's warm
   palette: a cream ground with an apricot wash at the top, white cards at
   20px with warm shadows, warm greys that read at 4.5:1, Playfair headings.
   The header band becomes a light band on the ground (crest, title, chips)
   instead of a navy slab; the club's gold stays the one thing to do. The
   gate screens (.gate) keep their admission colours and dark ground; the
   booking page and the portal keep the polo photograph in their masthead;
   printed pages stay white paper. Dark mode keeps the navy surfaces. */
@media screen {
  .equistal-public:not(.gate) {
    --paper: #f4efe6; --ground: #f4efe6; --card: #ffffff; --surface: #ffffff;
    --ink: #15202b; --soft: #4f5a54; --muted: #4f5a54;
    --line: #e6dfd2; --line-strong: #d2c9ba;
    --public-radius: 12px;
    --wash: radial-gradient(1000px 460px at 14% 0%, rgba(243, 190, 140, .62), rgba(243, 190, 140, 0) 70%) no-repeat,
            radial-gradient(820px 380px at 72% 0%, rgba(212, 162, 76, .26), rgba(212, 162, 76, 0) 70%) no-repeat;
    --head-bg: transparent; --head-ink: #15202b; --head-muted: #4f5a54; --head-line: #d2c9ba;
    --head-over: #8a6420; --head-chip: #ffffff; --head-chip-hover: #ece5d8;
    background: var(--wash), var(--paper);
  }
  .equistal-public:not(.gate) .card { border-radius: 20px; box-shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 10px 30px rgba(60, 40, 10, .06); }
  .equistal-public:not(.gate) :is(h1, h2) { font-family: "Playfair Display", Georgia, serif; }
  .equistal-public.eq:not(.gate) {
    --bg: #f4efe6; --ground: #f4efe6; --paper: #f4efe6;
    --surface: #ffffff; --card: #ffffff; --elevated: #fffdf9;
    --surface-2: #f7f2ea; --raised: #f7f2ea; --hover: #ece5d8;
    --ink: #15202b; --muted: #4f5a54; --soft: #4f5a54; --faint: #56625c;
    --line: #e6dfd2; --line-soft: #efe9de; --line-strong: #d2c9ba;
    --accent-wash: rgba(11, 30, 51, .08);
    --gold-text: #7d5a1c;
    --shadow-card: 0 1px 2px rgba(60, 40, 10, .05), 0 10px 30px rgba(60, 40, 10, .06);
    --shadow-float: 0 18px 48px rgba(40, 28, 8, .16);
    --radius-card: 20px;
    background: var(--wash), var(--bg);
  }
  /* The band: a light band on the ground, the crest and title in ink. */
  .equistal-public.eq:not(.gate) .eq-band { background: var(--head-bg); color: var(--head-ink); border-bottom: 1px solid var(--head-line); }
  .equistal-public.eq:not(.gate) .eq-band.top { border-bottom: 0; }
  .equistal-public.eq:not(.gate) .eq-crest { filter: none; }
  .equistal-public.eq:not(.gate) .eq-title :is(h1, .h) { color: var(--head-ink); }
  .equistal-public.eq:not(.gate) .eq-title .over { color: var(--head-over); }
  .equistal-public.eq:not(.gate) .eq-title .sub, .equistal-public.eq:not(.gate) .eq-meta { color: var(--head-muted); }
  .equistal-public.eq:not(.gate) .eq-meta .who { color: var(--head-ink); }
  .equistal-public.eq:not(.gate) .eq-chip { background: var(--head-chip); color: var(--head-ink); border-color: var(--head-line); }
  .equistal-public.eq:not(.gate) .eq-chip:hover { background: var(--head-chip-hover); }
  .equistal-public.eq:not(.gate) .eq-band :focus-visible { outline-color: var(--accent); }
  .equistal-public.eq:not(.gate) .eq-card-title { font-weight: 600; }
}
/* Dark: navy surfaces as before; the band is a hairline on the dark ground. */
@media screen and (prefers-color-scheme: dark) {
  html:not(.light) .equistal-public:not(.gate) {
    --wash: radial-gradient(900px 340px at 14% 0%, rgba(226, 184, 101, .10), rgba(226, 184, 101, 0) 70%) no-repeat;
    --head-ink: #e8eef5; --head-muted: #a3b3c6; --head-line: #2c4a6b; --head-over: #e2b865;
    --head-chip: #12233a; --head-chip-hover: #1a3150;
  }
  html:not(.light) .equistal-public.eq:not(.gate) {
    --bg: #0b1726; --ground: #0b1726; --paper: #0b1726;
    --surface: #12233a; --card: #12233a; --elevated: #182d47;
    --surface-2: #0f1e32; --raised: #0f1e32; --hover: #1a3150;
    --ink: #e8eef5; --muted: #a3b3c6; --soft: #a3b3c6; --faint: #8a9cb2;
    --line: #223a57; --line-soft: #1a2f49; --line-strong: #2c4a6b;
    --accent-wash: rgba(226, 184, 101, .16); --gold-text: #e2b865;
    --shadow-card: none; --shadow-float: 0 18px 48px rgba(0, 0, 0, .5);
  }
}
@media screen {
  html.dark .equistal-public:not(.gate) {
    --wash: radial-gradient(900px 340px at 14% 0%, rgba(226, 184, 101, .10), rgba(226, 184, 101, 0) 70%) no-repeat;
    --head-ink: #e8eef5; --head-muted: #a3b3c6; --head-line: #2c4a6b; --head-over: #e2b865;
    --head-chip: #12233a; --head-chip-hover: #1a3150;
  }
  html.dark .equistal-public.eq:not(.gate) {
    --bg: #0b1726; --ground: #0b1726; --paper: #0b1726;
    --surface: #12233a; --card: #12233a; --elevated: #182d47;
    --surface-2: #0f1e32; --raised: #0f1e32; --hover: #1a3150;
    --ink: #e8eef5; --muted: #a3b3c6; --soft: #a3b3c6; --faint: #8a9cb2;
    --line: #223a57; --line-soft: #1a2f49; --line-strong: #2c4a6b;
    --accent-wash: rgba(226, 184, 101, .16); --gold-text: #e2b865;
    --shadow-card: none; --shadow-float: 0 18px 48px rgba(0, 0, 0, .5);
  }
}
/* The ground and its wash reach the foot of the window on a short page, rather than stopping under the last card. */
@media screen { html:has(> body.equistal-public:not(.gate)) { background: var(--paper, #f4efe6); } .equistal-public:not(.gate) { min-height: 100vh; } }
@media screen and (prefers-color-scheme: dark) { html:not(.light):has(> body.equistal-public.eq:not(.gate)) { background: #0b1726; } }
@media screen { html.dark:has(> body.equistal-public.eq:not(.gate)) { background: #0b1726; } }