/* =====================================================================
   Royal Golf Club — Design Tokens & Component Utilities
   Single source of truth for the whole application.
   Import in every page:  <link rel="stylesheet" href="assets/tokens.css">
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  /* ---------- Brand greens (refined forest palette) ---------- */
  --color-brand-darkest: #0b3a26;   /* deep pine */
  --color-brand-dark:    #14573a;   /* forest */
  --color-brand:         #1f6a47;   /* fairway */
  --color-brand-accent:  #c9a45c;   /* champagne gold */
  --color-brand-accent-soft: #d9bc7e;
  --color-brand-light:   #dbe7df;
  --color-brand-bg:      #f1f5ee;   /* tinted cream */

  /* Compatibility aliases (keeps earlier .gc-* rules working) */
  --color-primary-50:  var(--color-brand-bg);
  --color-primary-100: #dbe7df;
  --color-primary-200: #b7cfbd;
  --color-primary-300: var(--color-brand-accent);
  --color-primary-500: var(--color-brand);
  --color-primary-600: var(--color-brand);
  --color-primary-700: var(--color-brand-dark);
  --color-primary-800: var(--color-brand-darkest);
  --color-primary-900: #062417;

  /* ---------- Neutrals (warm, paper-cream) ---------- */
  --color-surface:        #ffffff;
  --color-surface-muted:  #faf7f1;   /* warm cream */
  --color-surface-page:   #f4efe6;   /* aged paper */
  --color-border:         #e6dfd1;   /* warm beige border */
  --color-border-input:   #d4cab6;   /* warm beige input border */
  --color-text-primary:   #1a1d1a;   /* near-black, slight green tint */
  --color-text-body:      #3d4540;   /* warm dark gray */
  --color-text-muted:     #6a7268;   /* sage gray */
  --color-text-subtle:    #9aa094;
  --color-text-on-brand:  #faf7f1;

  /* ---------- Semantic ---------- */
  --color-info-bg:        #eef4fb;
  --color-info-border:    #c7d8ec;
  --color-info-text:      #1f497d;
  --color-info-strong:    #163763;

  --color-warn-bg:        #fbf2dd;
  --color-warn-border:    #ecd9a6;
  --color-warn-text:      #8a5a14;

  --color-danger-bg:      #fbeeee;
  --color-danger-border:  #e9c8c8;
  --color-danger-text:    #962a2a;

  --color-success-bg:     var(--color-brand-bg);
  --color-success-border: var(--color-brand-light);
  --color-success-text:   var(--color-brand-dark);

  /* ---------- Typography ---------- */
  --font-sans:  'Plus Jakarta Sans', 'Inter', 'Padauk', sans-serif;
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;

  --text-2xs:  0.6875rem;  /* 11px */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.015em;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.06em;
  --tracking-widest: 0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- Radius (slightly tighter for refined feel) ---------- */
  --radius-sm:   0.1875rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-pill: 9999px;

  /* ---------- Shadow (softer, warmer) ---------- */
  --shadow-sm: 0 1px 2px rgb(20 30 24 / 0.05);
  --shadow-md: 0 2px 4px rgb(20 30 24 / 0.06), 0 4px 12px rgb(20 30 24 / 0.05);
  --shadow-lg: 0 4px 8px rgb(20 30 24 / 0.06), 0 12px 24px rgb(20 30 24 / 0.08);
  --shadow-xl: 0 12px 24px rgb(20 30 24 / 0.10), 0 24px 48px rgb(20 30 24 / 0.12);
  --shadow-inset-gold: inset 0 1px 0 rgb(201 164 92 / 0.25);

  /* ---------- Focus ring (gold) ---------- */
  --focus-ring: 0 0 0 3px rgb(201 164 92 / 0.35);

  /* ---------- Gradients ---------- */
  --gradient-brand:       linear-gradient(140deg, #0b3a26 0%, #14573a 55%, #1f6a47 100%);
  --gradient-brand-vivid: linear-gradient(135deg, #14573a 0%, #0b3a26 100%);
  --gradient-gold:        linear-gradient(135deg, #d9bc7e 0%, #c9a45c 50%, #a8853e 100%);

  /* ---------- Hero / login backdrop layers (SVG topographic + grain) ---------- */
  --bg-topo: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1.2'%3E%3Cpath d='M0,420 C200,360 400,500 600,440 C800,380 1000,500 1200,440'/%3E%3Cpath d='M0,480 C220,420 420,560 620,500 C820,440 1020,560 1200,500'/%3E%3Cpath d='M0,540 C240,480 440,620 640,560 C840,500 1040,620 1200,560'/%3E%3Cpath d='M0,600 C260,540 460,680 660,620 C860,560 1060,680 1200,620'/%3E%3Cpath d='M0,660 C280,600 480,740 680,680 C880,620 1080,740 1200,680'/%3E%3Cpath d='M0,360 C180,300 380,440 580,380 C780,320 980,440 1200,380'/%3E%3Cpath d='M0,300 C160,240 360,380 560,320 C760,260 960,380 1200,320'/%3E%3C/g%3E%3C/svg%3E");
  --bg-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  /* ---------- Component tokens ---------- */
  --input-height:       2.375rem;
  --input-padding-x:    var(--space-3);
  --input-padding-y:    var(--space-2);
  --input-font-size:    var(--text-sm);
  --input-radius:       var(--radius-sm);
  --input-border:       var(--color-border-input);
  --input-border-focus: var(--color-brand);

  --input-sm-padding-x: var(--space-2);
  --input-sm-padding-y: 0.375rem;
  --input-sm-font-size: var(--text-xs);

  --btn-padding-x: 1.25rem;
  --btn-padding-y: var(--space-2);
  --btn-font-size: var(--text-xs);
  --btn-weight:    var(--weight-semibold);
  --btn-radius:    var(--radius-md);

  --section-bg:      var(--color-surface);
  --section-border:  var(--color-border);
  --section-radius:  var(--radius-xl);
  --section-padding: var(--space-4);
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-surface-page);
  background-image:
    radial-gradient(circle at 0% 0%, rgb(201 164 92 / 0.04), transparent 40%),
    radial-gradient(circle at 100% 100%, rgb(31 106 71 / 0.04), transparent 40%);
  color: var(--color-text-body);
  letter-spacing: -0.005em;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

::selection { background: rgb(201 164 92 / 0.35); color: var(--color-brand-darkest); }

/* =====================================================================
   Icon system (CSS mask + currentColor)
   ===================================================================== */
.gc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--gc-icon, none) center / contain no-repeat;
          mask: var(--gc-icon, none) center / contain no-repeat;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.gc-icon--lg { font-size: 1.25em; }
.gc-icon--xl { font-size: 1.5em; }
.gc-icon--2xl { font-size: 2em; }

/* Lucide-style stroke icons, 24x24, stroke-width 1.6 */
.gc-icon--user        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.gc-icon--mail        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.gc-icon--lock        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.gc-icon--search      { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.gc-icon--home        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E"); }
.gc-icon--logout      { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
.gc-icon--chevron-right { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.gc-icon--chevron-down  { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.gc-icon--arrow-right { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 5 7 7-7 7'/%3E%3C/svg%3E"); }
.gc-icon--calendar    { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E"); }
.gc-icon--trophy      { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v5a6 6 0 0 1-12 0V4Z'/%3E%3Cpath d='M6 6H4a2 2 0 0 0 0 4h2M18 6h2a2 2 0 0 1 0 4h-2'/%3E%3Cpath d='M9 19h6M10 19v-3h4v3'/%3E%3C/svg%3E"); }
.gc-icon--clipboard   { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='16' rx='2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.gc-icon--chart       { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.gc-icon--cart        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M3 4h2l2.5 12h12L22 8H6'/%3E%3C/svg%3E"); }
.gc-icon--card        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h3'/%3E%3C/svg%3E"); }
.gc-icon--people      { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-3-3.87M9 21v-2a4 4 0 0 1 4-4h0'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M14 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.gc-icon--money       { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M5 9v.01M19 15v.01'/%3E%3C/svg%3E"); }
.gc-icon--edit        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6L8 22H2v-6Z'/%3E%3C/svg%3E"); }
.gc-icon--warning     { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20Z'/%3E%3Cpath d='M12 10v5M12 18v.01'/%3E%3C/svg%3E"); }
.gc-icon--info        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v6M12 7v.01'/%3E%3C/svg%3E"); }
.gc-icon--check       { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.gc-icon--x           { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.gc-icon--utensils    { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2v8a3 3 0 0 0 6 0V2M10 10v12'/%3E%3Cpath d='M17 2c-1.7 0-3 1.5-3 3.5V12h3v10'/%3E%3C/svg%3E"); }
.gc-icon--package     { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v10l9 5 9-5V7l-9-5Z'/%3E%3Cpath d='m3 7 9 5 9-5M12 12v10'/%3E%3C/svg%3E"); }
.gc-icon--megaphone   { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a2 2 0 0 0 2 2h2l8 5V4L7 9H5a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M19 8a4 4 0 0 1 0 8'/%3E%3C/svg%3E"); }
.gc-icon--flag        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V3M5 4h13l-2.5 4L18 12H5'/%3E%3C/svg%3E"); }
.gc-icon--car         { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14h14l-2-6H7Z'/%3E%3Cpath d='M3 18v-4h18v4'/%3E%3Ccircle cx='7' cy='18' r='1.5'/%3E%3Ccircle cx='17' cy='18' r='1.5'/%3E%3C/svg%3E"); }
.gc-icon--menu        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.gc-icon--star        { --gc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 14.6 9l6.4.6-4.9 4.3L17.6 21 12 17.7 6.4 21l1.5-7L3 9.6 9.4 9Z'/%3E%3C/svg%3E"); }

/* =====================================================================
   Brand monogram (refined club logo)
   ===================================================================== */
.gc-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--gradient-brand-vivid);
  border-radius: 50%;
  color: var(--color-brand-accent);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgb(201 164 92 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.10),
    0 1px 2px rgb(0 0 0 / 0.15);
  flex-shrink: 0;
}
.gc-monogram::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgb(201 164 92 / 0.30);
  pointer-events: none;
}
.gc-monogram__letter {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.gc-monogram--sm { width: 1.875rem; height: 1.875rem; }
.gc-monogram--sm .gc-monogram__letter { font-size: 0.875rem; }
.gc-monogram--lg { width: 3.5rem; height: 3.5rem; }
.gc-monogram--lg .gc-monogram__letter { font-size: 1.5rem; }

/* =====================================================================
   Wordmark (used next to monogram)
   ===================================================================== */
.gc-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.gc-wordmark__name {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gc-wordmark__tag {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-accent-soft);
  opacity: 0.85;
}

/* =====================================================================
   Layout primitives
   ===================================================================== */
.gc-page          { padding: var(--space-4); }
@media (min-width: 768px) { .gc-page { padding: var(--space-6); } }

.gc-app           { display: flex; flex-direction: column; min-height: 100vh; }
.gc-app__main     { flex: 1; width: 100%; max-width: 80rem; margin-inline: auto; padding: var(--space-4); }
@media (min-width: 640px) { .gc-app__main { padding: var(--space-6); } }
@media (min-width: 1024px) { .gc-app__main { padding: var(--space-8); } }

.gc-container     {
  max-width: 56rem;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* =====================================================================
   Top navigation
   ===================================================================== */
.gc-navbar {
  background: var(--gradient-brand);
  color: var(--color-text-on-brand);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid rgb(201 164 92 / 0.20);
}
.gc-navbar__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 0 var(--space-4);
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px) { .gc-navbar__inner { padding: 0 var(--space-6); } }
.gc-navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-on-brand);
}
.gc-navbar__logo {
  display: block;
  height: 2.6rem;
  width: auto;
}
.gc-login-card__logo {
  display: block;
  height: 3.25rem;
  width: auto;
}
.gc-navbar__brand-icon {
  /* legacy slot — kept for backward compatibility; pages should use .gc-monogram */
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-brand-vivid);
  border-radius: 50%;
  color: var(--color-brand-accent);
  box-shadow: inset 0 0 0 1px rgb(201 164 92 / 0.40);
  font-size: var(--text-base);
}
.gc-navbar__right { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-xs); }

.gc-navbar__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  background: rgb(0 0 0 / 0.20);
  color: rgb(250 247 241 / 0.95);
  border: 1px solid rgb(201 164 92 / 0.20);
  border-radius: var(--radius-md);
  transition: background .15s, color .15s, border-color .15s;
}
.gc-navbar__link:hover {
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  border-color: rgb(201 164 92 / 0.45);
}
.gc-navbar__badge {
  color: var(--color-brand-accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}
.gc-navbar__ping  {
  width: 0.5rem; height: 0.5rem;
  background: var(--color-brand-accent);
  border-radius: var(--radius-pill);
  animation: gc-ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes gc-ping {
  0%   { transform: scale(0.9); opacity: 1; }
  75%  { transform: scale(1.6); opacity: 0.3; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* =====================================================================
   Hero / brand banner
   ===================================================================== */
.gc-hero {
  position: relative;
  background-color: var(--color-brand-darkest);
  background-image:
    radial-gradient(ellipse at 80% 10%, rgb(201 164 92 / 0.18), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgb(31 106 71 / 0.40), transparent 55%),
    var(--bg-topo),
    var(--gradient-brand);
  background-size: auto, auto, 1400px auto, auto;
  background-position: center, center, center bottom, center;
  background-repeat: no-repeat;
  color: var(--color-text-on-brand);
  padding: var(--space-12) var(--space-6);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border-bottom: 1px solid rgb(201 164 92 / 0.20);
}
.gc-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg-grain);
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@media (min-width: 768px) { .gc-hero { padding: var(--space-16) var(--space-12); } }
.gc-hero__inner { max-width: 80rem; margin-inline: auto; position: relative; z-index: 1; }
.gc-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgb(0 0 0 / 0.25);
  color: var(--color-brand-accent);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid rgb(201 164 92 / 0.30);
}
.gc-hero__chip::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--color-brand-accent);
  border-radius: 50%;
}
.gc-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: var(--space-4) 0 var(--space-3);
}
@media (min-width: 768px) { .gc-hero__title { font-size: var(--text-5xl); } }
.gc-hero__title-accent {
  color: var(--color-brand-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
}
.gc-hero__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgb(250 247 241 / 0.78);
  line-height: var(--leading-relaxed);
  max-width: 36rem;
}
@media (min-width: 768px) { .gc-hero__subtitle { font-size: var(--text-base); } }

/* Decorative serifed flourish rule */
.gc-hero__rule {
  display: inline-block;
  width: 3rem;
  height: 1px;
  background: var(--color-brand-accent);
  margin-bottom: var(--space-4);
  vertical-align: middle;
}

/* =====================================================================
   Section card
   ===================================================================== */
.gc-section {
  background: var(--section-bg);
  border: 1px solid var(--section-border);
  border-radius: var(--section-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.gc-section--padded { padding: var(--section-padding); }
@media (min-width: 768px) { .gc-section--padded { padding: var(--space-5); } }

.gc-section__head {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .gc-section__head { flex-direction: row; align-items: center; justify-content: space-between; }
}
.gc-section__eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-brand-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin: 0 0 var(--space-1) 0;
}
.gc-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-transform: none;
}
.gc-section__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.gc-subsection {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.gc-subsection__title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-brand-darkest);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin: 0 0 var(--space-3) 0;
}

/* =====================================================================
   Form controls
   ===================================================================== */
.gc-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
}

.gc-input,
.gc-select,
.gc-textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  color: var(--color-text-body);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-input:focus,
.gc-select:focus,
.gc-textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring);
}
.gc-input[readonly],
.gc-input:disabled,
.gc-select:disabled,
.gc-textarea:disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.gc-input::placeholder,
.gc-textarea::placeholder { color: var(--color-text-subtle); }

.gc-input--sm,
.gc-select--sm {
  padding: var(--input-sm-padding-y) var(--input-sm-padding-x);
  font-size: var(--input-sm-font-size);
}

.gc-input-group { position: relative; }
.gc-input-group .gc-input { padding-right: var(--space-8); }
.gc-input-group .gc-input--leading { padding-left: 2.25rem; padding-right: var(--input-padding-x); }
.gc-input-group__icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}
.gc-input-group__icon--leading { right: auto; left: var(--space-3); }

.gc-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  cursor: pointer;
}
.gc-choice--xs { font-size: var(--text-xs); color: var(--color-text-muted); }
.gc-choice input[type="radio"],
.gc-choice input[type="checkbox"] { accent-color: var(--color-brand); }

/* =====================================================================
   Buttons
   ===================================================================== */
.gc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
  font-family: inherit;
  white-space: nowrap;
}
.gc-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gc-btn:active        { transform: translateY(1px); }

.gc-btn--primary {
  background: var(--color-brand-dark);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-sm), var(--shadow-inset-gold);
  border-color: rgb(0 0 0 / 0.10);
}
.gc-btn--primary:hover { background: var(--color-brand-darkest); }

.gc-btn--accent {
  background: var(--gradient-brand-vivid);
  color: var(--color-brand-accent);
  box-shadow: var(--shadow-md), var(--shadow-inset-gold);
  border-color: rgb(201 164 92 / 0.30);
  text-transform: uppercase;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
}
.gc-btn--accent:hover { color: #fff; filter: brightness(1.08); }

.gc-btn--secondary {
  background: var(--color-surface);
  color: var(--color-text-body);
  border-color: var(--color-border-input);
}
.gc-btn--secondary:hover { background: var(--color-surface-muted); border-color: var(--color-brand); }

.gc-btn--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
  border-color: var(--color-warn-border);
}
.gc-btn--warn:hover { background: #f6e6c4; }

.gc-btn--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}
.gc-btn--danger:hover { background: #f4dada; }

.gc-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.gc-btn--ghost:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }

.gc-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-2xs); }
.gc-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
.gc-btn--block { width: 100%; }

/* Segmented control */
.gc-segmented { display: inline-flex; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }
.gc-segmented__btn {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--color-surface);
  color: var(--color-text-body);
  border: 1px solid var(--color-border-input);
  border-right-width: 0;
}
.gc-segmented__btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.gc-segmented__btn:last-child  { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); border-right-width: 1px; }
.gc-segmented__btn:hover       { background: var(--color-surface-muted); }
.gc-segmented__btn[aria-pressed="true"] {
  background: var(--color-brand-bg);
  color: var(--color-brand-dark);
  border-color: var(--color-brand);
  font-weight: var(--weight-bold);
  z-index: 1;
}

/* =====================================================================
   Tabs
   ===================================================================== */
.gc-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
.gc-tabs__tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.gc-tabs__tab:hover { color: var(--color-text-body); }
.gc-tabs__tab[aria-selected="true"] {
  color: var(--color-brand-dark);
  border-bottom-color: var(--color-brand-accent);
  font-weight: var(--weight-semibold);
}

/* =====================================================================
   Badges
   ===================================================================== */
.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.gc-badge--success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.gc-badge--warn    { background: var(--color-warn-bg);    color: var(--color-warn-text);    border: 1px solid var(--color-warn-border); }
.gc-badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  border: 1px solid var(--color-danger-border); }
.gc-badge--info    { background: var(--color-info-bg);    color: var(--color-info-text);    border: 1px solid var(--color-info-border); }
.gc-badge--neutral { background: var(--color-surface-muted); color: var(--color-text-body); border: 1px solid var(--color-border); }
.gc-badge--gold    { background: rgb(201 164 92 / 0.12); color: #8a6a2d; border: 1px solid rgb(201 164 92 / 0.35); }
.gc-badge__dot {
  width: 0.375rem; height: 0.375rem; border-radius: var(--radius-pill);
  background: currentColor;
}

/* =====================================================================
   Stat card
   ===================================================================== */
.gc-stat {
  background: var(--color-surface);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.gc-stat::before {
  content: "";
  position: absolute;
  top: 0; left: var(--space-4); right: var(--space-4);
  height: 2px;
  background: var(--gradient-gold);
  opacity: 0.6;
  border-radius: 0 0 2px 2px;
}
.gc-stat__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: block;
}
.gc-stat__value {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-1);
  display: block;
  letter-spacing: var(--tracking-tight);
}
.gc-stat--success { background: var(--color-success-bg); border-color: var(--color-success-border); }
.gc-stat--success .gc-stat__label { color: var(--color-success-text); }
.gc-stat--success .gc-stat__value { color: var(--color-brand-darkest); }
.gc-stat--warn { background: var(--color-warn-bg); border-color: var(--color-warn-border); }
.gc-stat--warn .gc-stat__label { color: var(--color-warn-text); }
.gc-stat--warn .gc-stat__value { color: #6b4513; }
.gc-stat--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.gc-stat--danger .gc-stat__label { color: var(--color-danger-text); }
.gc-stat--danger .gc-stat__value { color: #6b1f1f; }

/* =====================================================================
   Module card (used on main.html) — refined ivory/gold
   ===================================================================== */
.gc-module {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  position: relative;
}
.gc-module::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity .25s ease;
}
.gc-module:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgb(201 164 92 / 0.40);
}
.gc-module:hover::before { opacity: 1; }
.gc-module__head {
  background: linear-gradient(180deg, var(--color-surface-muted), var(--color-surface));
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.gc-module__icon {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-brand-bg);
  color: var(--color-brand-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-brand-light);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.gc-module__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.gc-module__body { padding: var(--space-4) var(--space-5) var(--space-5); flex: 1; }
.gc-module__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-module__item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-body);
  padding: var(--space-2) calc(-1 * var(--space-2));
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.gc-module__item a { color: inherit; flex: 1; display: flex; align-items: center; gap: var(--space-2); }
.gc-module__item:hover { background: var(--color-brand-bg); color: var(--color-brand-darkest); }
.gc-module__bullet {
  color: var(--color-brand-accent);
  font-size: 0.75em;
  opacity: 0.7;
}

/* =====================================================================
   Data table
   ===================================================================== */
.gc-table-wrap { overflow-x: auto; }
.gc-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.gc-table thead tr {
  background: var(--color-brand-darkest);
  color: var(--color-brand-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}
.gc-table th { padding: var(--space-3) var(--space-4); }
.gc-table th:first-child { padding-left: var(--space-5); }
.gc-table th:last-child  { padding-right: var(--space-5); }
.gc-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-body);
}
.gc-table tbody tr:hover { background: var(--color-surface-muted); }
.gc-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; }
.gc-table td:first-child { padding-left: var(--space-5); }
.gc-table td:last-child  { padding-right: var(--space-5); }

.gc-table--light thead tr {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

/* =====================================================================
   Player rows (booking form)
   ===================================================================== */
.gc-player-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  background: var(--color-surface);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  align-items: center;
}
@media (min-width: 768px) {
  .gc-player-row,
  .gc-player-row__header {
    grid-template-columns: 1fr 2fr 6fr 3fr;
    gap: var(--space-2);
  }
}
.gc-player-row__header {
  display: none;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
}
@media (min-width: 768px) { .gc-player-row__header { display: grid; } }
.gc-player-row__idx {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-body);
  padding-inline: var(--space-2);
}
.gc-player-row--inactive .gc-player-row__idx { color: var(--color-text-subtle); }
.gc-player-row--empty { background: var(--color-surface-muted); }

/* =====================================================================
   Callout panels
   ===================================================================== */
.gc-callout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
}
.gc-callout--block { display: block; }
.gc-callout--info    { background: var(--color-info-bg);    border-color: var(--color-info-border); }
.gc-callout--success { background: var(--color-success-bg); border-color: var(--color-success-border); }
.gc-callout--warn    { background: var(--color-warn-bg);    border-color: var(--color-warn-border); }
.gc-callout__icon  { font-size: var(--text-lg); line-height: 1; margin-top: 2px; }
.gc-callout--info    .gc-callout__icon { color: var(--color-info-text); }
.gc-callout--success .gc-callout__icon { color: var(--color-success-text); }
.gc-callout--warn    .gc-callout__icon { color: var(--color-warn-text); }
.gc-callout__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--space-1) 0;
}
.gc-callout--info    .gc-callout__title { color: var(--color-info-text); }
.gc-callout--success .gc-callout__title { color: var(--color-success-text); }
.gc-callout--warn    .gc-callout__title { color: var(--color-warn-text); }
.gc-callout__body    { font-size: var(--text-xs); line-height: var(--leading-relaxed); margin: 0; }

/* =====================================================================
   Breakdown / cost summary
   ===================================================================== */
.gc-breakdown { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-body); }
.gc-breakdown__row { display: flex; justify-content: space-between; }
.gc-breakdown__total {
  border-top: 1px solid var(--color-brand-light);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--color-brand-darkest);
  font-family: var(--font-serif);
}

/* =====================================================================
   Footer actions row
   ===================================================================== */
.gc-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.gc-actions__group { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
@media (min-width: 640px) {
  .gc-actions         { flex-direction: row; justify-content: space-between; align-items: center; }
  .gc-actions__group  { flex-direction: row; width: auto; }
  .gc-actions .gc-btn { width: auto; }
}
.gc-actions .gc-btn { width: 100%; }

/* =====================================================================
   Grid helpers
   ===================================================================== */
.gc-grid          { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.gc-grid--gap-sm  { gap: var(--space-3); }
.gc-grid--gap-lg  { gap: var(--space-6); }
@media (min-width: 640px) {
  .gc-grid--sm-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .gc-grid--2    { grid-template-columns: repeat(2, 1fr); }
  .gc-grid--3    { grid-template-columns: repeat(3, 1fr); }
  .gc-grid--4    { grid-template-columns: repeat(4, 1fr); }
  .gc-grid--5    { grid-template-columns: repeat(5, 1fr); }
}

/* =====================================================================
   Chip-style readonly field
   ===================================================================== */
.gc-chip-input {
  width: 100%;
  background: var(--color-brand-bg);
  color: var(--color-brand-darkest);
  border: 1px solid var(--color-brand-light);
  border-radius: var(--input-radius);
  padding: var(--input-sm-padding-y) var(--input-sm-padding-x);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* =====================================================================
   Login screen
   ===================================================================== */
.gc-login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background-color: var(--color-brand-darkest);
  background-image:
    radial-gradient(ellipse at 25% 30%, rgb(201 164 92 / 0.20), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgb(31 106 71 / 0.50), transparent 55%),
    var(--bg-topo),
    var(--gradient-brand);
  background-size: auto, auto, 1400px auto, auto;
  background-position: center, center, center bottom, center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.gc-login-screen::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg-grain);
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.gc-login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 0.35));
  pointer-events: none;
}

.gc-login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 27rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgb(201 164 92 / 0.15);
  border-top: 3px solid var(--color-brand-accent);
}
.gc-login-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  margin-bottom: var(--space-6);
}
.gc-login-card__brand-row {
  display: flex; align-items: center; gap: var(--space-3);
}
.gc-login-card__brand-icon {
  /* legacy slot — pages now use .gc-monogram inside the brand row */
  display: inline-flex;
}
.gc-login-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-4) 0 var(--space-2) 0;
  text-align: center;
}
.gc-login-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8) 0;
  text-align: center;
  line-height: var(--leading-relaxed);
}
.gc-login-card__field { margin-bottom: var(--space-4); }
.gc-login-card__hint {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  text-align: center;
}
.gc-login-card__hint strong { color: var(--color-brand-dark); font-weight: var(--weight-semibold); }
.gc-login-card__hint code {
  background: var(--color-brand-bg);
  color: var(--color-brand-darkest);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.95em;
}

/* Divider with serif "or" inside login card */
.gc-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.gc-divider::before, .gc-divider::after {
  content: ""; flex: 1; height: 1px;
  background: var(--color-border);
}

/* =====================================================================
   App footer
   ===================================================================== */
.gc-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  position: relative;
}
.gc-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 1px;
  background: var(--color-brand-accent);
}

/* =====================================================================
   Utility helpers
   ===================================================================== */
.gc-mono       { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.gc-serif      { font-family: var(--font-serif); }
.gc-truncate   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-sr-only    { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gc-stack      { display: flex; flex-direction: column; }
.gc-stack > * + * { margin-top: var(--space-4); }
.gc-stack--sm > * + * { margin-top: var(--space-2); }
.gc-stack--lg > * + * { margin-top: var(--space-6); }
.gc-row        { display: flex; align-items: center; gap: var(--space-3); }
.gc-row--end   { justify-content: flex-end; }
.gc-row--wrap  { flex-wrap: wrap; }
.gc-spacer     { flex: 1; }