/* Shared across the golfer kiosk (/) and the admin app (/admin).
   Design tokens live in brand.css — this file must contain no raw brand
   colours, only var() references. */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-brand);font-weight:400;color:var(--char);background:var(--light)}
h1,h2,h3{font-family:var(--font-brand);font-weight:700;margin:0}
b,strong{font-weight:700}
header{background:var(--deepnavy);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 2px 10px rgba(0,0,0,.12)}
header .logo-chip{background:#fff;border-radius:8px;padding:7px 10px;display:flex;align-items:center}
/* Sized by HEIGHT, so a logo's aspect ratio decides how wide it lands.
   The Croco mark is ~1.9:1 with the wordmark inside the oval, so it needs
   more height than a squarer logo to stay legible. Re-check this when the
   logo changes. */
header .logo-chip img{height:36px;display:block}
header .ttl{line-height:1.2}
header .ttl b{font-family:var(--font-brand);font-size:19px;font-weight:700}
header .ttl span{display:block;font-size:12px;color:var(--navy-soft)}

/* The logo's own red/navy chevrons, echoed as a rule under the header. */
.brandbar{height:5px;background:linear-gradient(to right,var(--red) 0 50%,var(--navy) 50% 100%)}

/* Primary buttons are navy, not red: they sit on the light body background
   where navy reads strongly, and red is reserved for destructive actions so
   "Delete golfer" never looks like "Save". */
.btn{background:var(--navy);color:#fff;border:none;padding:13px 26px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.btn.navy{background:var(--navy)}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.ghost:hover{filter:none;border-color:var(--navy)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.danger{background:var(--red)}
.btn.danger:hover{background:var(--deepred);filter:none}
.btn.block{display:block;width:100%}

/* The `hidden` attribute must beat layout rules. The UA stylesheet's
   [hidden]{display:none} loses to ANY author display rule — .btn.block above
   kept the kiosk's "Scan my pass" button on screen after it was hidden, so
   tapping it looked like nothing happened. */
[hidden]{display:none!important}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* loading overlay — spinner is red so it reads against the navy ground */
.loading-overlay{position:fixed;inset:0;background:var(--deepnavy);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s}
.loading-overlay.hidden{opacity:0;pointer-events:none}
.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:#fff;margin-top:16px;font-size:14px}

/* shared card/section subtitle — used by admin card headers and the kiosk scan subtitle */
.sub{color:var(--mute);font-size:14px;margin-bottom:18px}