/* ============================================================
   VERRO — UI MOCKUP COMPONENTS
   Themeable, faithful recreations of the Verro product UI, for use
   in marketing pages to demonstrate the white-label branding
   feature. Not screenshots — real markup, restyled per club.

   Source of truth: design-reference/VERRO-DESIGN-SYSTEM-EXTRACTED.md
   (extracted from the live app, commit 45c2be2) and the screenshots
   alongside it. Every colour, radius and spacing value below is
   taken from that document, not invented.

   ── How theming works ──────────────────────────────────────
   Wrap any mockup in a `.vm-theme` element carrying
   data-primary / data-accent / data-on-primary (see
   assets/js/mockup-theme.js — it mirrors the product's
   resolveTheme(): a stored on-primary colour wins, otherwise it is
   derived from the primary colour by WCAG contrast, same as the
   app). An inline style with the same three --vm-* custom
   properties is also set as a no-JS fallback.

   Only --vm-primary / --vm-accent / --vm-on-primary change per
   club. Every other colour below is fixed, matching the product's
   "branded chrome, neutral data" rule: chrome (headers, sidebar,
   primary buttons) wears the club's colours; data surfaces (tables,
   forms, KPI values) stay Verro-neutral at every club.

   ── Fluid sizing ────────────────────────────────────────────
   Each frame (.vm-frame--phone / --console) is a CSS container;
   its `__scale` child sets a font-size in `cqw` so that 1em always
   equals one native design pixel at the frame's reference width
   (390px for phone, 1280px for console). Every measurement in this
   file is authored in em for that reason — the whole mockup scales
   losslessly (vector + text, no raster) at any display size or
   pixel density.
   ============================================================ */

.vm-theme {
  /* Always stretch to fill its slot. Block children default to this
     anyway, but a centering flex/grid parent (align-items/
     justify-items: center) switches children to content-based
     sizing instead — and .vm-frame's own width:100% then resolves
     against nothing and collapses. Stating it explicitly here means
     every mockup keeps working regardless of how its container
     aligns its children. */
  display: block;
  width: 100%;

  /* Verro defaults — overridden per club via inline style / JS */
  --vm-primary: #1F3A2E;
  --vm-accent: #C9A227;
  --vm-on-primary: #EDEAE2;
}

.vm-frame,
.vm-frame * {
  box-sizing: border-box;
}

.vm-frame {
  container-type: inline-size;
  width: 100%;
}

.vm-frame__scale {
  /* fixed Verro tokens, available to every mockup */
  --vm-fairway: #1F3A2E;
  --vm-bentgrass: #5C8A6E;
  --vm-brass: #C9A227;
  --vm-clay: #B5573D;
  --vm-slate: #5B6B76;
  --vm-canvas: #F7F5F0;
  --vm-paper: #FFFFFF;
  --vm-ink: #14201B;
  --vm-mist: #EDEAE2;
  --vm-hairline: #E3DED2;
  --vm-ink-70: rgba(20, 32, 27, 0.70);
  --vm-ink-60: rgba(20, 32, 27, 0.60);
  --vm-ink-45: rgba(20, 32, 27, 0.45);

  --vm-font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --vm-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --vm-shadow-sm: 0 0.0625em 0.125em rgba(20, 32, 27, 0.06);
  --vm-shadow-md: 0 0.25em 1em rgba(20, 32, 27, 0.08);
  --vm-shadow-lg: 0 0.75em 2em rgba(20, 32, 27, 0.12);

  font-family: var(--vm-font-sans);
  color: var(--vm-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.vm-frame--phone { max-width: 21.25rem; margin: 0 auto; }
.vm-frame--phone .vm-frame__scale { font-size: 4.1026cqw; } /* 16px @ 390 native */

.vm-frame--phone-lg { max-width: 23.75rem; }
.vm-frame--phone-sm { max-width: 11.25rem; }

.vm-frame--console { max-width: 68.75rem; margin: 0 auto; }
.vm-frame--console .vm-frame__scale { font-size: 1.25cqw; } /* 16px @ 1280 native */

/* ── Live theme switching ────────────────────────────────────
   Any element inside a scaled frame that reads a --vm-primary /
   --vm-accent / --vm-on-primary custom property cross-fades to its
   new value instead of flipping instantly, when a club switcher
   (see assets/js/branding-showcase.js) updates those variables on
   an ancestor .vm-theme. A transition on background-color/color/
   etc. animates from old computed value to new regardless of how
   the change was triggered, so this one rule covers every themed
   element without listing them individually. */
.vm-frame__scale,
.vm-frame__scale * {
  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .vm-frame__scale,
  .vm-frame__scale * {
    transition: none !important;
  }
}

/* ── Club switcher (segmented control) ───────────────────────
   Marketing-page chrome, not a recreated product element — styled
   with neutral rgba values so it sits on a dark section background
   rather than the vm-* product tokens. */
.vm-switcher {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.vm-switcher__option {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(237, 234, 226, 0.7);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vm-switcher__option:hover { color: rgba(237, 234, 226, 0.95); }

.vm-switcher__option.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #EDEAE2;
  font-weight: 700;
}

.vm-switcher__option:focus-visible {
  outline: 2px solid #C9A227;
  outline-offset: 2px;
}

.vm-switcher__caption {
  margin-top: 14px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(237, 234, 226, 0.55);
}

@media (min-width: 1400px) {
  /* clamp cqw growth on very wide viewports so text doesn't balloon */
  .vm-frame--phone .vm-frame__scale { font-size: min(4.1026cqw, 16px); }
  .vm-frame--console .vm-frame__scale { font-size: min(1.25cqw, 16px); }
}

/* ── Logo mark: a pin/flag, the only "logo" every club gets by
   default (real clubs without an uploaded mark fall back to this) ── */
.vm-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--vm-primary);
}

.vm-mark svg { display: block; }
.vm-mark--pole { stroke: var(--vm-on-primary); }
.vm-mark--pennant { fill: var(--vm-accent); }
.vm-mark--ball { fill: var(--vm-on-primary); }

/* ============================================================
   MEMBER APP — phone frame
   ============================================================ */

.vm-phone {
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: 2.375em;
  background: #14201b;
  padding: 0.75em;
  box-shadow: var(--vm-shadow-lg);
}

.vm-phone__notch {
  position: absolute;
  top: 0.75em;
  left: 50%;
  transform: translateX(-50%);
  width: 5.5em;
  height: 0.9em;
  border-radius: 999em;
  background: #14201b;
  z-index: 5;
}

.vm-phone__screen {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 1.75em;
  overflow: hidden;
  background: var(--vm-canvas);
  display: flex;
  flex-direction: column;
}

/* Member top bar */
.vm-m-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  height: 3.5em;
  padding: 0 1em;
  background: var(--vm-primary);
}

.vm-m-topbar__identity {
  display: flex;
  align-items: center;
  gap: 0.625em;
  min-width: 0;
}

.vm-m-topbar .vm-mark {
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.12);
}

.vm-m-topbar__name {
  font-weight: 700;
  font-size: 0.9375em;
  letter-spacing: -0.01em;
  color: var(--vm-on-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vm-m-topbar__bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  flex-shrink: 0;
  color: var(--vm-on-primary);
  opacity: 0.9;
}

.vm-m-topbar__badge {
  position: absolute;
  top: 0.4em;
  right: 0.35em;
  min-width: 1.0625em;
  height: 1.0625em;
  padding: 0 0.2em;
  border-radius: 999em;
  background: var(--vm-accent);
  color: var(--vm-primary);
  font-family: var(--vm-font-mono);
  font-size: 0.625em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Scrollable body */
.vm-m-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25em 1em 2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.vm-m-greeting {
  font-size: 2.0625em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vm-primary);
  line-height: 1.1;
}

.vm-m-subgreeting {
  margin-top: 0.3em;
  font-size: 0.9375em;
  color: var(--vm-ink-70);
}

/* Card */
.vm-m-card {
  background: var(--vm-paper);
  border: 0.0625em solid var(--vm-hairline);
  border-radius: 1em;
  padding: 1em;
}

.vm-m-eyebrow {
  font-family: var(--vm-font-mono);
  font-size: 0.6875em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vm-ink-45);
}

/* Next tee time */
.vm-m-tee {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75em;
  margin-top: 0.5em;
}

.vm-m-tee__when {
  font-size: 1.0625em;
  font-weight: 700;
  color: var(--vm-ink);
  line-height: 1.35;
}

.vm-m-tee__who {
  margin-top: 0.15em;
  font-size: 0.875em;
  color: var(--vm-ink-70);
}

.vm-m-tee__link {
  flex-shrink: 0;
  font-size: 0.8125em;
  font-weight: 500;
  color: var(--vm-primary);
  white-space: nowrap;
}

/* Balance */
.vm-m-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5em;
}

.vm-m-balance-value {
  font-family: var(--vm-font-mono);
  font-size: 1.75em;
  font-weight: 500;
  color: var(--vm-primary);
  line-height: 1;
}

/* Neutral pill button (Top up, quick actions — NOT club-coloured) */
.vm-m-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75em;
  padding: 0 1em;
  border-radius: 0.75em;
  background: var(--vm-mist);
  border: 0.0625em solid var(--vm-hairline);
  color: var(--vm-ink);
  font-size: 0.875em;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

/* Primary, club-coloured CTA (hand-rolled, matches member-app convention) */
.vm-m-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75em;
  padding: 0 1.125em;
  border-radius: 0.75em;
  background: var(--vm-primary);
  color: var(--vm-on-primary);
  font-size: 0.875em;
  font-weight: 600;
}

/* Competition entry */
.vm-m-comp {
  margin-top: 0.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
}

.vm-m-comp__name {
  font-size: 1em;
  font-weight: 700;
}

.vm-m-comp__meta {
  margin-top: 0.2em;
  font-size: 0.8125em;
  color: var(--vm-ink-70);
}

.vm-m-comp__standing {
  flex-shrink: 0;
  text-align: right;
}

.vm-m-comp__place {
  font-family: var(--vm-font-mono);
  font-size: 1.25em;
  font-weight: 700;
  color: var(--vm-bentgrass);
  line-height: 1;
}

.vm-m-comp__of {
  margin-top: 0.2em;
  font-size: 0.6875em;
  color: var(--vm-ink-60);
}

/* Badge (Badge.tsx recipe — 15% tint + solid dot) */
.vm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.2em 0.6em;
  border-radius: 999em;
  font-size: 0.6875em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: fit-content;
}

.vm-badge::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 999em;
  background: currentColor;
}

.vm-badge--active { background: rgba(92, 138, 110, 0.15); color: var(--vm-bentgrass); }
.vm-badge--pending { background: rgba(201, 162, 39, 0.15); color: var(--vm-brass); }
.vm-badge--info { background: rgba(91, 107, 118, 0.15); color: var(--vm-slate); }

/* Quick actions grid */
.vm-m-actions {
  margin-top: 0.75em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625em;
}

.vm-m-actions .vm-m-pill-btn {
  height: auto;
  min-height: 3.25em;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}

/* Recent activity row */
.vm-m-activity {
  margin-top: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.vm-m-activity__icon {
  flex-shrink: 0;
  width: 2.25em;
  height: 2.25em;
  border-radius: 999em;
  background: rgba(92, 138, 110, 0.12);
  color: var(--vm-bentgrass);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-m-activity__title {
  font-size: 0.875em;
  font-weight: 500;
  color: var(--vm-ink);
}

.vm-m-activity__meta {
  margin-top: 0.1em;
  font-size: 0.75em;
  color: var(--vm-ink-60);
}

/* Member bottom tab bar */
.vm-m-tabbar {
  flex-shrink: 0;
  display: flex;
  background: var(--vm-primary);
  box-shadow: 0 -0.0625em 0 rgba(0, 0, 0, 0.08), 0 -0.25em 1em rgba(0, 0, 0, 0.12);
}

.vm-m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  min-height: 3.5em;
  padding: 0.4em 0;
  color: var(--vm-on-primary);
  opacity: 0.65;
}

.vm-m-tab svg { width: 1.25em; height: 1.25em; }

.vm-m-tab--active {
  color: var(--vm-accent);
  opacity: 1;
}

.vm-m-tab__label {
  font-size: 0.625em;
  font-weight: 500;
  line-height: 1;
}

/* ============================================================
   MEMBER APP — tee booking screen
   ============================================================ */

.vm-book-eyebrow {
  font-family: var(--vm-font-mono);
  font-size: 0.6875em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vm-accent);
}

.vm-book-title {
  margin-top: 0.25em;
  font-size: 1.75em;
  font-weight: 700;
  color: var(--vm-primary);
  line-height: 1.15;
}

.vm-book-subtitle {
  margin-top: 0.2em;
  font-size: 0.875em;
  color: var(--vm-ink-60);
}

.vm-book-datenav {
  margin-top: 0.9em;
  display: grid;
  grid-template-columns: 2.75em 1fr 2.75em;
  gap: 0.5em;
}

.vm-book-datenav__btn,
.vm-book-datenav__current {
  height: 2.75em;
  border-radius: 0.75em;
  background: var(--vm-paper);
  border: 0.0625em solid var(--vm-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-book-datenav__current {
  font-size: 0.9375em;
  font-weight: 700;
  color: var(--vm-ink);
}

.vm-book-quickpills {
  margin-top: 0.625em;
  display: flex;
  gap: 0.5em;
}

.vm-book-quickpills .vm-m-pill-btn {
  height: 2.25em;
  padding: 0 0.9em;
  font-size: 0.8125em;
}

.vm-book-note {
  margin-top: 0.75em;
  text-align: right;
  font-size: 0.8125em;
  color: var(--vm-ink-60);
}

.vm-book-days {
  margin-top: 0.625em;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375em;
}

.vm-book-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: 0.5em 0.1em;
  border-radius: 0.75em;
  background: var(--vm-paper);
  border: 0.0625em solid var(--vm-hairline);
}

.vm-book-day__dow {
  font-family: var(--vm-font-mono);
  font-size: 0.5625em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--vm-ink-45);
}

.vm-book-day__num {
  font-size: 0.9375em;
  font-weight: 700;
  color: var(--vm-ink);
}

.vm-book-day--selected {
  background: var(--vm-primary);
  border-color: var(--vm-primary);
}

.vm-book-day--selected .vm-book-day__dow { color: rgba(255, 255, 255, 0.65); }
.vm-book-day--selected .vm-book-day__num { color: var(--vm-on-primary); }

.vm-book-section {
  margin-top: 1.125em;
  font-family: var(--vm-font-mono);
  font-size: 0.6875em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vm-ink-45);
}

.vm-book-slots {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.vm-book-slot {
  display: flex;
  align-items: center;
  gap: 0.625em;
  padding: 0.75em 0.875em;
  border-radius: 0.9em;
  min-height: 3em;
}

.vm-book-slot--open {
  border: 0.0625em dashed var(--vm-hairline);
}

.vm-book-slot--booked {
  background: var(--vm-paper);
  border: 0.0625em solid var(--vm-hairline);
}

.vm-book-slot__time {
  font-family: var(--vm-font-mono);
  font-weight: 600;
  font-size: 0.9375em;
  color: var(--vm-ink);
  flex-shrink: 0;
  width: 4.6em;
}

.vm-book-slot--open .vm-book-slot__time { color: var(--vm-ink-60); }

.vm-book-slot__tag {
  flex-shrink: 0;
}

.vm-book-slot__players {
  flex: 1;
  min-width: 0;
  font-size: 0.8125em;
  color: var(--vm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vm-book-slot__cta {
  flex: 1;
  text-align: right;
  font-size: 0.8125em;
  color: var(--vm-ink-60);
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */

.vm-login {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
}

.vm-login__card {
  width: 100%;
  background: var(--vm-paper);
  border: 0.0625em solid var(--vm-hairline);
  border-radius: 1em;
  box-shadow: var(--vm-shadow-lg);
  padding: 2em 1.75em;
  text-align: center;
}

.vm-login .vm-mark {
  width: 4em;
  height: 4em;
  border-radius: 1em;
  margin: 0 auto;
}

.vm-login__name {
  margin-top: 1.25em;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--vm-primary);
  letter-spacing: -0.01em;
}

.vm-login__subtitle {
  margin-top: 0.375em;
  font-size: 0.9375em;
  color: var(--vm-ink-60);
}

.vm-login__form {
  margin-top: 1.75em;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.125em;
}

.vm-login__field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4em;
}

.vm-login__label {
  font-size: 0.8125em;
  font-weight: 500;
  color: var(--vm-ink);
}

.vm-login__forgot {
  font-size: 0.75em;
  color: var(--vm-bentgrass);
}

.vm-login__input-wrap {
  position: relative;
}

.vm-login__input {
  width: 100%;
  height: 2.875em;
  padding: 0 1em;
  border-radius: 999em;
  background: var(--vm-canvas);
  border: 0.0625em solid var(--vm-hairline);
  font-family: var(--vm-font-sans);
  font-size: 0.875em;
  color: var(--vm-ink);
}

.vm-login__input--password { padding-right: 2.75em; }

.vm-login__eye {
  position: absolute;
  top: 50%;
  right: 0.9em;
  transform: translateY(-50%);
  color: var(--vm-ink-45);
  display: flex;
}

.vm-login__submit {
  margin-top: 0.25em;
  width: 100%;
  height: 2.875em;
  border-radius: 999em;
  background: var(--vm-primary);
  color: var(--vm-on-primary);
  font-size: 0.9375em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-login__footer {
  margin-top: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: 0.75em;
  color: var(--vm-ink-45);
}

.vm-login__footer .vm-mark {
  width: 1.125em;
  height: 1.125em;
  border-radius: 0.25em;
}

/* ============================================================
   CONSOLE — desktop frame
   ============================================================ */

.vm-console {
  aspect-ratio: 1280 / 800;
  border-radius: 0.875em;
  overflow: hidden;
  border: 0.0625em solid var(--vm-hairline);
  box-shadow: var(--vm-shadow-lg);
  display: flex;
  background: var(--vm-canvas);
}

/* Sidebar */
.vm-console__sidebar {
  flex-shrink: 0;
  width: 15em;
  background: var(--vm-primary);
  display: flex;
  flex-direction: column;
  padding: 0 0.75em;
}

.vm-console__identity {
  flex-shrink: 0;
  min-height: 4.25em;
  display: flex;
  align-items: center;
  gap: 0.625em;
  padding: 1em 0.5em;
  border-bottom: 0.0625em solid rgba(237, 234, 226, 0.08);
}

.vm-console__identity .vm-mark {
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  background: rgba(237, 234, 226, 0.12);
}

.vm-console__identity-name {
  font-size: 0.9375em;
  font-weight: 700;
  color: var(--vm-on-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vm-console__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75em 0;
  display: flex;
  flex-direction: column;
}

.vm-console__section {
  margin: 0.75em 0.5em 0.4em;
  font-family: var(--vm-font-mono);
  font-size: 0.625em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(237, 234, 226, 0.45);
}

.vm-console__item {
  display: flex;
  align-items: center;
  gap: 0.625em;
  padding: 0.5em 0.5em;
  border-radius: 0.5em;
  font-size: 0.875em;
  font-weight: 500;
  color: rgba(237, 234, 226, 0.85);
}

.vm-console__item svg { width: 1.125em; height: 1.125em; flex-shrink: 0; }

.vm-console__item--active {
  color: var(--vm-accent);
  /* Real app hardcodes this wash to brass regardless of the club's
     accent (a known inconsistency — see design doc §8.3). We use
     the club's own accent here instead: this component exists to
     sell white-label theming, and a mismatched gold wash under a
     correctly-accented label would undercut that. */
  background: rgba(201, 162, 39, 0.1); /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--vm-accent) 12%, transparent);
}

.vm-console__footer {
  flex-shrink: 0;
  padding: 0.75em 0.5em 1em;
  font-size: 0.75em;
  color: rgba(237, 234, 226, 0.55);
}

/* Main column */
.vm-console__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vm-console__topbar {
  flex-shrink: 0;
  height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75em;
  padding: 0 1.25em;
  background: var(--vm-paper);
  border-bottom: 0.0625em solid var(--vm-hairline);
}

.vm-console__search {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 12.5em;
  height: 2em;
  padding: 0 0.75em;
  border-radius: 0.5em;
  background: var(--vm-canvas);
  border: 0.0625em solid var(--vm-hairline);
  color: var(--vm-ink-45);
  font-size: 0.8125em;
}

.vm-console__search kbd {
  margin-left: auto;
  font-family: var(--vm-font-mono);
  font-size: 0.6875em;
  background: var(--vm-paper);
  border: 0.0625em solid var(--vm-hairline);
  border-radius: 0.3em;
  padding: 0.05em 0.4em;
}

.vm-console__icon-btn {
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vm-ink-60);
}

.vm-console__avatar {
  width: 2em;
  height: 2em;
  border-radius: 999em;
  background: var(--vm-primary);
  color: var(--vm-on-primary);
  font-family: var(--vm-font-mono);
  font-size: 0.6875em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-console__content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5em 1.75em 2em;
}

.vm-console__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}

.vm-console__title {
  font-size: 1.625em;
  font-weight: 700;
  color: var(--vm-ink);
  letter-spacing: -0.01em;
}

.vm-console__subtitle {
  margin-top: 0.25em;
  font-size: 0.8125em;
  color: var(--vm-ink-60);
}

.vm-console__head-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.625em;
}

.vm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  height: 2.25em;
  padding: 0 0.9em;
  border-radius: 0.5em;
  font-size: 0.8125em;
  font-weight: 500;
  border: 0.0625em solid transparent;
  white-space: nowrap;
}

.vm-btn--secondary {
  background: var(--vm-paper);
  color: var(--vm-ink);
  border-color: var(--vm-hairline);
}

/* Verro fairway green — the shared console Button is not club-themed
   (design doc §4.1); this is accurate, not an oversight. */
.vm-btn--primary {
  background: var(--vm-fairway);
  color: var(--vm-mist);
}

/* KPI cards */
.vm-kpis {
  margin-top: 1.25em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875em;
}

.vm-kpi {
  background: var(--vm-paper);
  border: 0.0625em solid var(--vm-hairline);
  border-radius: 0.75em;
  box-shadow: var(--vm-shadow-sm);
  padding: 0.9em;
}

.vm-kpi--warn {
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(201, 162, 39, 0.04);
}

.vm-kpi__label {
  font-family: var(--vm-font-mono);
  font-size: 0.6875em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vm-ink-45);
}

.vm-kpi__value-row {
  margin-top: 0.4em;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5em;
}

.vm-kpi__value {
  font-family: var(--vm-font-mono);
  font-size: 1.75em;
  font-weight: 500;
  color: var(--vm-ink);
  line-height: 1;
}

.vm-kpi__delta {
  margin-top: 0.4em;
  font-size: 0.8125em;
  font-weight: 500;
}

.vm-kpi__delta--up { color: var(--vm-bentgrass); }
.vm-kpi__delta--down { color: var(--vm-clay); }

/* Tee sheet date bar (console tee-sheet page header) */
.vm-console__datebar {
  display: flex;
  align-items: center;
  gap: 0.625em;
  flex-wrap: wrap;
}

.vm-console__datebar-btn {
  width: 2em;
  height: 2em;
  flex-shrink: 0;
  border-radius: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.0625em solid var(--vm-hairline);
  background: var(--vm-paper);
  color: var(--vm-ink-60);
}

.vm-console__datebar-current {
  font-weight: 700;
  font-size: 0.9375em;
  color: var(--vm-ink);
  white-space: nowrap;
}

.vm-console__pill {
  display: inline-flex;
  align-items: center;
  height: 2em;
  padding: 0 0.75em;
  border-radius: 999em;
  font-size: 0.8125em;
  font-weight: 500;
  color: var(--vm-ink-70);
  background: var(--vm-canvas);
  border: 0.0625em solid var(--vm-hairline);
  white-space: nowrap;
}

/* Console primary actions stay Verro fairway, not the club colour
   (design doc §4.1) — same rule as .vm-btn--primary above. */
.vm-console__pill--active {
  background: var(--vm-fairway);
  color: var(--vm-mist);
  border-color: var(--vm-fairway);
}

.vm-console__togglegroup {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.2em;
  background: var(--vm-canvas);
  border: 0.0625em solid var(--vm-hairline);
  border-radius: 999em;
  padding: 0.2em;
  flex-shrink: 0;
}

.vm-console__toggle {
  display: inline-flex;
  align-items: center;
  height: 1.75em;
  padding: 0 0.75em;
  border-radius: 999em;
  font-size: 0.8125em;
  font-weight: 600;
  color: var(--vm-ink-60);
}

.vm-console__toggle--active {
  background: var(--vm-fairway);
  color: var(--vm-mist);
}

/* Table (RefinedTable recipe) */
.vm-table-wrap {
  margin-top: 1.25em;
  overflow-x: auto;
  border-radius: 0.75em;
  border: 0.0625em solid var(--vm-hairline);
  background: var(--vm-paper);
  box-shadow: var(--vm-shadow-sm);
}

.vm-table-stats {
  padding: 0.75em 1em;
  border-bottom: 0.0625em solid var(--vm-hairline);
  font-size: 0.8125em;
  color: var(--vm-ink-70);
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

.vm-table-stats b { color: var(--vm-ink); font-weight: 700; }
.vm-table-stats .vm-dim { color: var(--vm-ink-45); }

.vm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vm-font-mono);
  font-size: 0.8125em;
}

.vm-table th {
  position: sticky;
  top: 0;
  background: var(--vm-paper);
  padding: 0.5em 0.75em;
  text-align: left;
  font-weight: 500;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vm-bentgrass);
  border-bottom: 0.125em solid var(--vm-brass);
}

.vm-table td {
  padding: 0.6em 0.75em;
  border-bottom: 0.0625em solid var(--vm-hairline);
  color: var(--vm-ink);
}

.vm-table tr:last-child td { border-bottom: none; }
.vm-table tbody tr:hover td { background: var(--vm-canvas); }

.vm-table td.vm-empty { color: var(--vm-ink-45); }

/* Icons used throughout consoles/tabs, sized to their container */
.vm-icon { width: 1em; height: 1em; }
.vm-sparkline { stroke: var(--vm-bentgrass); }

/* ============================================================
   Utility: two-up theme comparison layout for the preview page
   ============================================================ */

.vm-showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5em;
  align-items: start;
}

@media (max-width: 860px) {
  .vm-showcase-row { grid-template-columns: 1fr; }
}

.vm-showcase-row--console {
  grid-template-columns: 1fr;
  gap: 2em;
}