/* ============================================================
   LiveGolfMaps — Component kit  v2 "Floodlit"  (Aug 2026)

   Load order:  css/tokens.css → css/app-tokens-v2.css → THIS FILE
   Every colour, radius, font, glow and type-size is a --v2-* token.
   Spacing is px, matching the design pack. Dark chrome only.

   Class prefix: .lgm-   (names kept from v1 so surfaces stay drop-in)
   ============================================================ */

/* ---------- base ---------- */
.lgm-body {
  margin: 0;
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-family: var(--v2-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; border-radius: 2px; }
.lgm-mono { font-family: var(--v2-font-mono); }

/* mono section eyebrow — "// LAYERS", "MORNING", timestamps */
.lgm-meta {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-meta-sm);
  letter-spacing: var(--v2-track-mono);
  text-transform: uppercase;
  color: var(--v2-ink-45);
}
.lgm-meta--xs { font-size: var(--v2-meta-xs); }
.lgm-meta--plain { text-transform: none; letter-spacing: 0; font-size: var(--v2-meta); }

/* ---------- BRAND MARK (option A — recoloured locked tile) ---------- */
.lgm-mark {
  display: inline-flex; align-items: stretch; gap: 0;
  background: #0E1016; color: var(--v2-ink);
  padding: 7px 9px; border-radius: 0; flex: none; line-height: .9;
}
.lgm-mark__rule { width: 2px; align-self: stretch; background: var(--v2-accent); margin-right: 6px; border-radius: 1px; }
.lgm-mark__type { font-family: 'Archivo', var(--v2-font-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.035em; font-size: 12px; line-height: .9; }
.lgm-mark--app { border-radius: 16px; }

/* ---------- BUTTON ---------- */
.lgm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--v2-font-ui); font-size: 13.5px; font-weight: 600; line-height: 1;
  min-height: var(--v2-target); padding: 10px 17px;
  border-radius: var(--v2-r-md); border: 1px solid var(--v2-line-4);
  background: var(--v2-fill-1); color: var(--v2-ink); cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
.lgm-btn:hover { background: var(--v2-fill-3); border-color: var(--v2-line-4); }
.lgm-btn--primary { background: var(--v2-grad-cta); border-color: transparent; color: var(--v2-on-accent); box-shadow: var(--v2-glow-cta); }
.lgm-btn--primary:hover { box-shadow: var(--v2-glow-cta-hi); color: var(--v2-on-accent); }
.lgm-btn--danger { background: var(--v2-grad-bad); border-color: transparent; color: #fff; box-shadow: var(--v2-glow-bad); }
.lgm-btn--quiet { border-color: var(--v2-line-3); color: var(--v2-ink-60); background: transparent; }
.lgm-btn--quiet:hover { background: var(--v2-fill-2); color: var(--v2-ink); }
.lgm-btn--ghost { border-color: transparent; background: transparent; color: var(--v2-ink-60); }
.lgm-btn--ghost:hover { background: var(--v2-fill-2); color: var(--v2-ink); }
.lgm-btn[disabled] { background: var(--v2-fill-1); border-color: var(--v2-line-2); color: var(--v2-ink-38); box-shadow: none; cursor: default; }
.lgm-btn--block { display: flex; width: 100%; }
.lgm-btn--sm { min-height: 34px; padding: 7px 12px; font-size: 12.5px; }

/* ---------- CHIP (status / meta pill) ---------- */
.lgm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--v2-font-mono); font-size: 10px; letter-spacing: var(--v2-track-mono);
  text-transform: uppercase; padding: 5px 10px; border-radius: var(--v2-r-pill);
  border: 1px solid var(--v2-line-3); color: var(--v2-ink-60); background: var(--v2-fill-1);
}
.lgm-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; box-shadow: var(--v2-dot-glow); }
.lgm-chip--good { color: var(--v2-open); border-color: rgba(62,230,139,.32); background: rgba(62,230,139,.10); }
.lgm-chip--warn { color: var(--v2-warn); border-color: rgba(245,194,78,.32); background: rgba(245,194,78,.09); }
.lgm-chip--bad  { color: var(--v2-bad-light); border-color: rgba(242,84,91,.32); background: rgba(242,84,91,.10); }
.lgm-chip--live { color: var(--v2-accent); border-color: rgba(62,230,139,.4); background: rgba(62,230,139,.12); }
.lgm-chip--live .lgm-chip__dot { animation: pulse 2.4s ease-in-out infinite; }

/* ---------- SEGMENTED CONTROL ---------- */
.lgm-seg {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--v2-line-3); border-radius: var(--v2-r-lg); background: var(--v2-fill-1);
}
.lgm-seg > button {
  flex: 1; min-height: 40px; font-family: var(--v2-font-ui); font-size: 14px; font-weight: 600;
  background: transparent; color: var(--v2-ink-60); border: 0; border-radius: var(--v2-r-md);
  cursor: pointer; transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
.lgm-seg > button:hover { color: var(--v2-ink); background: var(--v2-fill-2); }
.lgm-seg > button[aria-pressed="true"] { background: rgba(99,102,241,.3); color: #fff; }
.lgm-seg--gloved > button { min-height: var(--v2-target-seg); }

/* ---------- TOGGLE ---------- */
.lgm-toggle { width: 50px; height: 30px; border-radius: var(--v2-r-pill); background: var(--v2-line-3); position: relative; flex: none; cursor: pointer; border: 0; transition: background var(--v2-fast) var(--v2-ease); }
.lgm-toggle__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--v2-ink); transition: left var(--v2-fast) var(--v2-ease); }
.lgm-toggle[aria-pressed="true"] { background: var(--v2-accent); }
.lgm-toggle[aria-pressed="true"] .lgm-toggle__knob { left: 23px; background: var(--v2-on-accent); }

/* ---------- FIELD ---------- */
.lgm-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--v2-ink-72); margin-bottom: 6px; }
.lgm-input, .lgm-textarea, .lgm-select {
  width: 100%; box-sizing: border-box; font-family: var(--v2-font-ui); font-size: 14.5px; color: var(--v2-ink);
  background: var(--v2-fill-2); border: 1px solid var(--v2-line-3); border-radius: var(--v2-r-md);
  padding: 12px 13px; min-height: var(--v2-target);
  transition: border-color var(--v2-fast) var(--v2-ease);
}
.lgm-textarea { min-height: 88px; resize: vertical; line-height: 1.6; }
.lgm-input::placeholder, .lgm-textarea::placeholder { color: var(--v2-ink-38); }
.lgm-input:focus, .lgm-textarea:focus, .lgm-select:focus { border-color: var(--v2-accent); outline: none; }
.lgm-select { appearance: none; -webkit-appearance: none; }

/* ---------- CARD / PANEL ---------- */
.lgm-card { background: var(--v2-fill-1); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-xl); padding: 16px; }
.lgm-card__title { font-family: var(--v2-font-ui); font-size: var(--v2-title); font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.lgm-card--pinned { border-left: 3px solid var(--v2-accent); }
.lgm-panel { background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r-3xl); }
.lgm-glass { background: var(--v2-grad-glass); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-2xl); }

/* ---------- TABS ---------- */
.lgm-tabs { display: flex; border-bottom: 1px solid var(--v2-line); }
.lgm-tabs > button {
  flex: 1; min-height: var(--v2-target); padding: 14px 4px;
  font-family: var(--v2-font-ui); font-size: 13.5px; font-weight: 500;
  color: var(--v2-ink-45); background: transparent; border: 0; cursor: pointer; border-bottom: 2px solid transparent;
}
.lgm-tabs > button[aria-selected="true"] { color: var(--v2-ink); font-weight: 600; border-bottom-color: var(--v2-accent); }

/* ---------- TOP BAR ---------- */
.lgm-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; padding-top: max(11px, env(safe-area-inset-top));
  background: var(--v2-surface); border-bottom: 1px solid var(--v2-line);
}
.lgm-topbar--inverse { background: var(--v2-surface-3); }
.lgm-topbar__club { font-family: var(--v2-font-ui); font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }

/* ---------- SAVE / PUBLISH BAR ---------- */
.lgm-savebar {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  background: var(--v2-surface-3); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-xl);
  padding: 12px 14px; margin: 12px; box-shadow: var(--v2-shadow-phone);
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
}
.lgm-savebar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-bad); color: var(--v2-bad); box-shadow: var(--v2-dot-glow); flex: none; }
.lgm-savebar__dot--clean { background: var(--v2-accent); color: var(--v2-accent); }
.lgm-savebar__label { font-size: 13.5px; color: var(--v2-ink-72); flex: 1; }
.lgm-savebar .lgm-btn--primary { background: var(--v2-grad-cta); border-color: transparent; color: var(--v2-on-accent); box-shadow: var(--v2-glow-cta-hi); }
.lgm-savebar--clean .lgm-btn--primary { background: var(--v2-fill-3); color: var(--v2-ink-38); box-shadow: none; cursor: default; }

/* ---------- BANNER ---------- */
.lgm-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--v2-r-lg); font-size: 13px; line-height: 1.55; }
.lgm-banner--good { background: rgba(62,230,139,.10); border: 1px solid rgba(62,230,139,.3); color: var(--v2-open-light); }
.lgm-banner--warn { background: rgba(245,194,78,.08); border: 1px solid rgba(245,194,78,.3); color: var(--v2-warn); }
.lgm-banner--bad  { background: rgba(242,84,91,.10); border: 1px solid rgba(242,84,91,.3); color: var(--v2-bad-light); }
.lgm-banner__dot  { width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-top: 5px; flex: none; box-shadow: var(--v2-dot-glow); }

/* ---------- TOAST ---------- */
.lgm-toast { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(62,230,139,.32); background: rgba(62,230,139,.10); color: var(--v2-open-light); padding: 12px 14px; border-radius: var(--v2-r-lg); font-size: 13.5px; }
.lgm-toast--bad { border-color: rgba(242,84,91,.32); background: rgba(242,84,91,.10); color: var(--v2-bad-light); }

/* ---------- EMPTY STATE ---------- */
.lgm-empty { border: 1px dashed var(--v2-line-3); padding: 26px; text-align: center; border-radius: var(--v2-r-xl); }
.lgm-empty__title { font-family: var(--v2-font-ui); font-size: var(--v2-title-sm); font-weight: 600; margin-bottom: 4px; }
.lgm-empty__body { font-size: 13px; color: var(--v2-ink-45); line-height: 1.55; }

/* ---------- MODAL ---------- */
.lgm-scrim { position: fixed; inset: 0; background: var(--v2-scrim); backdrop-filter: blur(8px); z-index: 50; display: grid; place-items: center; padding: 18px; }
.lgm-modal { width: 100%; max-width: 420px; background: var(--v2-surface-2); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-3xl); box-shadow: var(--v2-shadow-card); padding: 24px; }
.lgm-modal__title { font-family: var(--v2-font-ui); font-size: var(--v2-h3); font-weight: 600; letter-spacing: -.03em; margin: 0 0 6px; }

/* ---------- BUILDER: layer list ---------- */
.lgm-layer-group { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 12px; cursor: pointer; color: var(--v2-ink-72); border-radius: var(--v2-r-sm); }
.lgm-layer-group:hover { background: var(--v2-fill-1); }
.lgm-layer-group__chev { width: 12px; color: var(--v2-ink-38); font-size: 10px; flex: none; }
.lgm-layer-group__name { flex: 1; font-weight: 600; }
.lgm-layer-group__count { font-family: var(--v2-font-mono); font-size: 9.5px; color: var(--v2-ink-38); }
.lgm-layer-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 24px; border-radius: var(--v2-r-sm); font-size: 12.5px; cursor: pointer; color: var(--v2-ink-72); background: var(--v2-fill-1); }
.lgm-layer-item:hover { background: var(--v2-fill-2); }
.lgm-layer-item[aria-selected="true"] { background: rgba(62,230,139,.14); border: 1px solid rgba(62,230,139,.42); color: var(--v2-ink); font-weight: 600; }
.lgm-layer-item__swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.lgm-layer-item__count { font-family: var(--v2-font-mono); font-size: 9.5px; color: var(--v2-ink-38); }
@keyframes lgm-flash { from { background: rgba(62,230,139,.4); } to { background: var(--v2-fill-1); } }
.lgm-layer-item--new { animation: lgm-flash 400ms var(--v2-ease) 1; }

/* ---------- BUILDER: tool rail ---------- */
.lgm-tool { width: 34px; height: 34px; border-radius: var(--v2-r-md); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; border: 1px solid transparent; color: var(--v2-ink-45); background: transparent; }
.lgm-tool:hover { color: var(--v2-ink); background: var(--v2-fill-2); }
.lgm-tool[aria-pressed="true"] { background: rgba(62,230,139,.18); border-color: rgba(62,230,139,.42); color: var(--v2-accent-light); }

/* ---------- BUILDER: phase stepper ---------- */
.lgm-phases { display: flex; gap: 4px; padding: 4px; border-radius: var(--v2-r-xl); background: var(--v2-fill-2); border: 1px solid var(--v2-line-2); }
.lgm-phase { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 8px; border-radius: var(--v2-r-md); font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: -.01em; color: var(--v2-ink-45); border: 1px solid transparent; }
.lgm-phase:hover { color: var(--v2-ink-72); }
.lgm-phase[aria-current="true"] { background: linear-gradient(150deg, rgba(62,230,139,.22), rgba(99,102,241,.22)); border-color: var(--v2-line-4); color: #fff; }
.lgm-phase__num { width: 19px; height: 19px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--v2-font-mono); font-size: 10px; background: var(--v2-fill-3); color: var(--v2-ink-55); }
.lgm-phase[aria-current="true"] .lgm-phase__num { background: var(--v2-accent); color: var(--v2-on-accent); }

/* ---------- BUILDER: canvas action bar ---------- */
.lgm-canvasbar { display: inline-flex; gap: 2px; background: var(--v2-surface-3); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-lg); padding: 3px; box-shadow: var(--v2-shadow-phone); }
.lgm-canvasbar > button { background: transparent; color: var(--v2-ink-72); border: 0; padding: 7px 11px; border-radius: var(--v2-r-sm); font-family: var(--v2-font-ui); font-size: 12px; cursor: pointer; }
.lgm-canvasbar > button:hover { background: var(--v2-fill-2); color: var(--v2-ink); }
.lgm-canvasbar > button.is-primary { background: rgba(62,230,139,.18); color: var(--v2-accent-light); font-weight: 600; }

/* ---------- MAP STAGE ---------- */
.lgm-mapstage { position: relative; border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-xl); overflow: hidden; background: var(--v2-surface-3); }
.lgm-mapstage > svg, .lgm-mapstage > img { display: block; width: 100%; height: auto; }
.lgm-mapstage__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.lgm-mapstage__badge {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--v2-scrim-heavy); backdrop-filter: blur(14px); color: var(--v2-ink-82);
  padding: 6px 10px; border-radius: var(--v2-r-pill); border: 1px solid var(--v2-line-3);
  font-family: var(--v2-font-mono); font-size: 9.5px; letter-spacing: var(--v2-track-caps); text-transform: uppercase;
}

/* ---------- PIN (live layer) ---------- */
.lgm-pin { cursor: grab; }
.lgm-pin__dot { fill: var(--v2-accent); }
.lgm-pin--moved .lgm-pin__dot { fill: var(--v2-warn); }
.lgm-pin__ring { fill: none; stroke: var(--v2-bg); stroke-width: 2; }

/* ---------- AURORA (hero + CTA only, max twice) ---------- */
.lgm-aurora { position: absolute; inset: -20%; background-image: var(--v2-aurora); filter: blur(var(--v2-aurora-blur)); opacity: var(--v2-aurora-op); animation: var(--v2-drift); pointer-events: none; z-index: 0; }