/* =========================================================================
   MugTuon — BASE (loaded on every page, always first)
   Tokens, reset, type, brand, buttons, forms, pills, panels, alerts, toast,
   dialog, plus components shared by more than one surface (bottom nav, auth
   screens, member strip/avatar, reward + history rows, approval cards …).
   Surface files (site.css / rewards.css / staff.css / admin.css) load AFTER this.
   Brand green is ONE token (--green) so the real HEX can be swapped in.

   Motion rules for every sheet: only transform / opacity move things, every UI transition is under 300ms, easing is the ease-out curve
   (--ease-out), never ease-in, never scale(0), never `transition: all`; hover styles live inside (hover: hover) and (pointer: fine);
   prefers-reduced-motion collapses durations. ACCEPTED EXCEPTION: colour changes (background-color, border-color, color, box-shadow
   ring) transition on hover and focus over 120-160ms. They do not move anything and they confirm the target under the pointer / keyboard.
   ========================================================================= */

/* ---------- Fonts (self-hosted, latin subset; see fonts/LICENSES.txt) ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/manrope-latin.a30ddcd3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/manrope-peso.b171abde.woff2") format("woff2"); unicode-range: U+20B1; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/fraunces-latin.7234ed86.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/fraunces-peso.7cd86803.woff2") format("woff2"); unicode-range: U+20B1; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/fraunces-italic-latin.13cd664e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallbacks so the swap does not shift layout (values measured against the web fonts). */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101.3%; ascent-override: 105.6%; descent-override: 29.6%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"), local("Times New Roman");
  size-adjust: 81.4%; ascent-override: 120%; descent-override: 32%; line-gap-override: 0%; }

:root {
  --green: #1E3A2B;         /* placeholder brand green — replace with the supplied HEX */
  --green-2: #2A4D3A;
  --green-3: #355E48;
  --cream: #F4EEE1;
  --cream-2: #EFE7D6;
  --gold: #C8A15A;
  --gold-2: #E2C68F;
  --ink: #17231C;
  --ink-2: #3A4A40;
  --muted: #5B6B60;
  --muted-on-green: #D9CFB9;
  --surface: #FFFFFF;
  --line: #E2D9C6;
  --track: #EDE5D3;
  --success-bg: #E3EDE4;
  --success-fg: #1F5B33;
  --warn-bg: #F6E7C8;
  --warn-fg: #7A5A1C;
  --error-bg: #F7E1DA;
  --error-fg: #8A2F1A;
  --redeem: #8A4B1E;
  --info-bg: #E4ECF2;
  --info-fg: #23465E;
  --muted-2: #4F5F54;        /* AA-safe secondary text on tinted (cream-2 / green-tinted) backgrounds */
  --field-line: #859488;     /* input outline on forms: >= 3:1 on white */
  --muted-off: #5F6D64;      /* closed / past / unavailable text: 5.4:1 on white, 4.7:1 on cream (4.5:1 needed) */

  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", "Manrope Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --shadow: 0 1px 2px rgba(23, 35, 28, .06), 0 8px 24px rgba(23, 35, 28, .06);
  --shadow-lg: 0 18px 50px rgba(23, 35, 28, .22);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement only; never ease-in */
  --dur-1: 120ms;
  --dur-2: 220ms;

  /* Focus rings: --focus is the live ring colour; dark (green) surfaces re-point it to --focus-on-dark below */
  --focus-on-light: var(--green);
  --focus-on-dark: var(--gold);
  --focus: var(--focus-on-light);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 23px;
  --text-2xl: 30px;
  --text-3xl: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(body:is(.staff, .admin-page)) { scroll-behavior: auto; }   /* work tools: jumps are instant */
/* Reduced motion: collapse durations to ~0 (not animation:none) so end states and :active feedback still apply. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
.icon { flex-shrink: 0; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Green / ink surfaces: gold ring */
.hero, .page-hero, .cta-band, .ticket-top, .site-footer, .panel-green, .auth-top, .staff-bar, .admin-side, .brand-on-green, .skip { --focus: var(--focus-on-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow.on-green { color: var(--gold-2); }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.01em; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 23px; }
.h3 { font-size: 16px; font-weight: 800; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 20px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--green); }
.brand-cup { display: block; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; }   /* the round logo badge (brand_mark) */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.brand-tag { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.brand-on-green { color: var(--cream); }
.brand-on-green .brand-tag { color: var(--muted-on-green); }
.brand-link { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--r-md); border: 1.5px solid transparent;
  font: 700 16px/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--green); color: var(--cream); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--line); }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: rgba(244, 238, 225, .35); }
.btn-danger { background: transparent; color: var(--error-fg); border-color: #E5C1B5; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: 14px; border-radius: var(--r-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.on-green { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--green-3); }
  .btn-primary:hover { background: var(--green-2); color: var(--cream); }
  .btn-gold:hover { background: var(--gold-2); color: var(--ink); }
  .btn-ghost:hover { background: var(--surface); color: var(--green); }
  .btn-ghost-light:hover { background: rgba(244, 238, 225, .08); color: var(--cream); }
  .btn-danger:hover { background: var(--error-bg); color: var(--error-fg); }
  .icon-btn:hover { background: var(--track); }
  .icon-btn.on-green:hover { background: rgba(244, 238, 225, .1); }
}
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

/* ---------- Pills, chips, badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--track); color: var(--ink-2); white-space: nowrap; }
.pill-gold { background: rgba(200, 161, 90, .18); color: var(--gold-2); border: 1px solid rgba(200, 161, 90, .4); }
.pill-ok { background: var(--success-bg); color: var(--success-fg); }
.pill-warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill-error { background: var(--error-bg); color: var(--error-fg); }
.pill-info { background: var(--info-bg); color: var(--info-fg); }
.pill-green { background: var(--green); color: var(--cream); }
.badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.tag-best { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(200, 161, 90, .2); color: #6E5320; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.panel-tight { padding: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-title { font-size: 15px; font-weight: 800; }
.panel-green { background: var(--green); color: var(--cream); border-color: var(--green); }

/* ---------- Alerts & toast ---------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 14.5px; font-weight: 600; margin-bottom: 14px; }
.alert .icon { margin-top: 1px; }
.alert-ok { background: var(--success-bg); color: var(--success-fg); }
.alert-error { background: var(--error-bg); color: var(--error-fg); }
.alert-warn { background: var(--warn-bg); color: var(--warn-fg); }
.alert-info { background: var(--info-bg); color: var(--info-fg); }
.toast-region { position: fixed; left: 0; right: 0; bottom: calc(84px + var(--safe-b)); display: flex; justify-content: center; pointer-events: none; z-index: 60; padding: 0 16px; }
/* Staff pages have no bottom nav. Admin has one below 1024px (layout.php), hidden from there up. */
.staff .toast-region { bottom: calc(24px + var(--safe-b)); }
@media (min-width: 1024px) { .admin-page .toast-region { bottom: calc(24px + var(--safe-b)); } }
/* Staff bookings page wears the admin chrome: below 1024px the toast clears the bottom nav. */
@media (max-width: 1023px) { .staff:has(.admin-bottom) .toast-region { bottom: calc(84px + var(--safe-b)); } }
/* Enter: @starting-style transition (opacity + 8px rise). Exit: .is-leaving, 120ms, opacity + 4px; app.js hides it on a timer.
   Replacing a toast: .is-swap snaps to the start state for one frame and the same transition plays back.
   Browsers without @starting-style simply show the toast. Only transform and opacity ever animate. */
.toast { pointer-events: auto; max-width: 420px; width: 100%; background: var(--ink); color: var(--cream); padding: 14px 16px; border-radius: var(--r-md); font-weight: 700; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: center;
  opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast.is-leaving { opacity: 0; transform: translateY(4px); transition-duration: var(--dur-1); }
.toast.is-swap { opacity: 0; transform: translateY(4px); transition: none; }
.toast.ok { background: var(--success-fg); }
.toast.error { background: var(--error-fg); }
.toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-x { flex-shrink: 0; min-height: 44px; min-width: 44px; padding: 8px 12px; margin: -8px -8px -8px 0; border: 1.5px solid rgba(244, 238, 225, .4); border-radius: var(--r-sm); background: transparent; color: inherit; font: 700 14px/1.2 var(--font-ui); cursor: pointer; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.toast-x:active { transform: scale(.97); }
.toast :focus-visible { outline-color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .toast-x:hover { background: rgba(244, 238, 225, .14); } }
/* Staff / admin: quick and still, opacity only */
:is(.staff, .admin-page) .toast, :is(.staff, .admin-page) .toast.is-leaving, :is(.staff, .admin-page) .toast.is-swap { transform: none; transition-property: opacity; transition-duration: 120ms; }
:is(.staff, .admin-page) .toast.is-swap { transition: none; }
@starting-style { :is(.staff, .admin-page) .toast { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-leaving, .toast.is-swap { transform: none; } }
[hidden] { display: none !important; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 14px; }
.label { font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.hint { font-size: 13px; color: var(--muted); }
.field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--error-fg); font-size: 13.5px; font-weight: 700; }
.field-error .icon { margin-top: 2px; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--field-line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: 500 16px var(--font-ui);
}
.textarea { min-height: 96px; resize: vertical; }
.input, .select, .textarea { transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30, 58, 43, .15); }
/* Keyboard ring (the WCAG focus indicator, >= 3:1), drawn outside the border-colour change above. */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.input-xl { font: 700 30px var(--font-display); min-height: 64px; letter-spacing: .01em; }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font: 700 24px var(--font-display); color: var(--muted); pointer-events: none; }
.input-prefix > .input { padding-left: 40px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-size: 14.5px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); flex-shrink: 0; }
.check + .check { margin-top: 10px; }
.form-grid { display: grid; gap: 14px; }
.form-grid .field + .field { margin-top: 0; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

/* Private link: <section class="private-link"> holding a .copy-row (readonly .input + [data-copy] button),
   see private_link_control() in layout.php. The row wraps to two lines on 360px phones. */
.private-link { padding: 16px; border: 1.5px dashed var(--gold); border-radius: var(--r-lg); background: var(--cream-2); }
.private-link > p, .private-link .hint { color: var(--muted-2); font-size: 14px; }
.copy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-row .input { flex: 1 1 220px; width: auto; min-width: 0; min-height: 48px; padding: 10px 12px; color: var(--ink-2); font: 600 14px/1.3 var(--font-ui); text-overflow: ellipsis; }
.copy-row .btn { flex: 0 0 auto; min-width: 112px; min-height: 48px; background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .copy-row .btn-ghost:hover { background: var(--track); } }
@media (max-width: 479px) { .copy-row .btn { flex: 1 0 100%; } }

/* ---------- Shared across surfaces ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.summary-list { display: grid; gap: 0; margin: 0; }
.summary-list div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--track); }
.summary-list div:last-child { border-bottom: 0; }
.summary-list dt { color: var(--muted); font-size: 14px; }
.summary-list dd { margin: 0; font-weight: 700; text-align: right; }
.ready-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--success-bg); color: var(--success-fg); font-size: 13px; font-weight: 800; }
.reward-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.reward-row + .reward-row { border-top: 1px solid var(--track); }
.pts-chip { min-width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; text-align: center; line-height: 1; background: var(--track); color: var(--ink-2); flex-shrink: 0; }
.pts-chip b { font-family: var(--font-display); font-size: 21px; display: block; }
.pts-chip small { font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.pts-chip.on { background: var(--green); color: var(--gold); }
.reward-main { flex: 1; min-width: 0; }
.reward-main strong { display: block; font-size: 16px; }
.reward-main span { font-size: 13px; color: var(--muted); }
.hist-row { display: flex; gap: 12px; align-items: center; padding: 13px 0; }
.hist-row + .hist-row { border-top: 1px solid var(--track); }
.hist-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--success-bg); color: var(--success-fg); }
.hist-ic.redeem { background: #F3E6DC; color: var(--redeem); }
.hist-ic.void, .hist-ic.adjust { background: var(--track); color: var(--ink-2); }
.hist-main { flex: 1; min-width: 0; }
.hist-main strong { display: block; font-size: 15px; }
.hist-main span { font-size: 12.5px; color: var(--muted); }
.hist-pts { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-pts.plus { color: var(--success-fg); }
.hist-pts.minus { color: var(--redeem); }
/* A reversed entry stays at full opacity (dimming it would drop its text below 4.5:1): strike-through and a muted colour say "reversed". */
.is-voided td { text-decoration: line-through; color: var(--muted-2); }
.is-off { color: var(--muted-2); }
.is-off strong { text-decoration: line-through; }
.tag-void { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--cream-2); border: 1px solid var(--line); color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.is-voided { color: var(--muted-2); }
.is-voided strong { text-decoration: line-through; color: var(--muted-2); }
.is-voided .hist-pts { text-decoration: line-through; color: var(--muted-2); }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding: 6px 6px calc(6px + var(--safe-b)); }
.bottom-nav a { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; min-height: 56px; border-radius: 12px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: var(--green); background: var(--success-bg); }
/* Auth screens, account menu, confirm dialog and account pages: see auth.css (not loaded on the public website). */
.center-screen { min-height: 70vh; min-height: 70dvh; display: grid; place-items: center; max-width: 440px; margin: 0 auto; padding: 24px 16px; }
.member-strip { display: flex; align-items: center; gap: 12px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 20px; flex-shrink: 0; }
.avatar-gold { background: var(--gold); color: var(--ink); width: 38px; height: 38px; font-size: 17px; }
.member-strip-main { flex: 1; min-width: 0; }
.member-strip-main strong { display: block; font-size: 17px; }
.member-strip-main span { font-size: 13px; color: var(--muted); }
.member-bal { text-align: right; }
.member-bal b { display: block; font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.member-bal small { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
dialog { border: 0; border-radius: var(--r-xl); padding: 0; width: min(440px, calc(100% - 24px)); box-shadow: var(--shadow-lg); color: var(--ink); }
dialog::backdrop { background: rgba(23, 35, 28, .55); }
.dialog-body { padding: 20px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 20px 20px; flex-wrap: wrap; }
.cards-list { display: grid; gap: 10px; }
.approval { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: var(--surface); }
.approval-actions { display: flex; gap: 8px; margin-top: 12px; }
.approval-actions form { flex: 1; }
.approval-actions .btn { width: 100%; }
.empty { text-align: center; color: var(--muted); padding: 24px 12px; font-size: 14.5px; }
.placeholder-text { background: var(--warn-bg); color: var(--warn-fg); padding: 1px 4px; border-radius: 4px; }

/* ---------- Payments (shared by the booking pages and the staff booking list) ---------- */
/* Busy submit button: still readable (not the 50% disabled look), the cursor says "working" */
.btn[aria-busy="true"] { opacity: .8; cursor: progress; }
.btn[aria-busy="true"][disabled] { opacity: .85; cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.btn[aria-busy="true"] > .icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Secondary, text-weight button: an action that must stay available but should not compete with the main one */
.btn-quiet { background: transparent; color: var(--ink-2); border-color: transparent; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* TEST MODE: a slim strip, shown only to staff/admin or on a local machine (see payments_test_banner()) */
.test-mode-banner { align-items: center; gap: 8px; padding: 6px 12px; margin-bottom: 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.35; box-shadow: inset 0 0 0 1px rgba(122, 90, 28, .22); }
.test-mode-banner .icon { width: 16px; height: 16px; margin-top: 0; }
.test-mode-banner strong { letter-spacing: .06em; }
@media (max-width: 479px) { .test-mode-banner { border-radius: var(--r-md); align-items: flex-start; } }
/* "Refund needed" flag + the PayMongo payment id, which staff copy into the dashboard search */
.pay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pay-line-flag { padding: 8px 10px; border-radius: var(--r-sm); background: var(--error-bg); box-shadow: inset 3px 0 0 var(--error-fg); }
.pay-line .refund-why { color: var(--error-fg); font-weight: 700; }
.pay-line .pay-meta { color: var(--muted-2); }
.refund-flag { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #E0B3A5; padding: 3px 10px 3px 8px; font-size: 12.5px; letter-spacing: .01em; }
.pay-id { font: 700 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--cream-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; cursor: text; }
@media (hover: hover) and (pointer: fine) { .btn-quiet:hover { background: var(--track); color: var(--ink); } }

/* ---------- Booking moves: "Moved from ..." lines (booking page, staff Room bookings) ---------- */
.move-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.move-lines li { display: flex; gap: 6px; align-items: flex-start; }
.move-lines .icon { margin-top: 3px; color: var(--muted-2); }
.move-lines .move-when, .move-lines .move-more { font-weight: 500; color: var(--muted-2); }
.bk-details .move-lines span, .summary-list .move-lines span { display: inline; font-size: inherit; }
.summary-list .move-lines { justify-items: end; text-align: right; }
.summary-list .move-lines li { justify-content: flex-end; }