/* ============================================================
   LiveGolfMaps — Component kit  (v1, Aug 2026)

   Load AFTER app-tokens.css. Every value here is a token; there are
   no literal colours below this line. Lift these classes straight
   into viewer.html / admin.html / console.html / builder.html.

   Class prefix: .lgm-
   ============================================================ */

/* ---------- BUTTON ---------- */
.lgm-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semi);
  line-height: 1;
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border-strong);
  background: transparent;
  color: var(--app-ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lgm-btn:hover { background: var(--app-panel-2); }
.lgm-btn--primary { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-ink-inverse); }
.lgm-btn--primary:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); }
.lgm-btn--danger  { background: var(--st-bad); border-color: var(--st-bad); color: var(--app-ink-inverse); }
.lgm-btn--quiet   { border-color: var(--app-border); color: var(--app-ink-dim); }
.lgm-btn[disabled] { border-color: var(--app-border); color: var(--app-ink-dim); background: transparent; cursor: default; }
.lgm-btn--block   { display: block; width: 100%; }

/* ---------- CHIP (status) ----------
   SOLID = restriction in force. HAIRLINE = normal. Always with a word. */
.lgm-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: var(--fw-semi);
  padding: 9px 14px; border-radius: var(--app-radius);
  border: 1px solid var(--app-border); color: var(--app-ink-dim);
}
.lgm-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.lgm-chip--good { border-color: var(--st-good); color: var(--st-good); }
.lgm-chip--warn { background: var(--st-warn); border-color: var(--st-warn); color: var(--app-ink-inverse); }
.lgm-chip--bad  { background: var(--st-bad);  border-color: var(--st-bad);  color: var(--app-ink-inverse); }

/* ---------- SEGMENTED CONTROL ----------
   Replaces every checkbox/select in the club admin status board. */
.lgm-seg { display: flex; border: 1px solid var(--app-border-strong); border-radius: var(--app-radius); overflow: hidden; }
.lgm-seg > button {
  flex: 1; min-height: var(--tap-min);
  font-family: var(--font-ui); font-size: 15px; font-weight: var(--fw-semi);
  background: transparent; color: var(--app-ink); border: 0; cursor: pointer;
  padding: var(--sp-4) var(--sp-2);
  transition: background var(--dur) var(--ease);
}
.lgm-seg > button + button { border-left: 1px solid var(--app-border-strong); }
.lgm-seg > button[aria-pressed="true"] { background: var(--app-accent); color: var(--app-ink-inverse); }
.lgm-seg--gloved > button { min-height: var(--tap-gloved); }

/* ---------- TOGGLE ---------- */
.lgm-toggle { width: 56px; height: 32px; border-radius: var(--app-radius); background: var(--app-border); position: relative; flex: none; cursor: pointer; transition: background var(--dur) var(--ease); }
.lgm-toggle__knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background: var(--app-panel); transition: left var(--dur) var(--ease); }
.lgm-toggle[aria-pressed="true"] { background: var(--app-accent); }
.lgm-toggle[aria-pressed="true"] .lgm-toggle__knob { left: 27px; }

/* ---------- FIELD ---------- */
.lgm-label { display: block; font-size: var(--fs-label); font-weight: var(--fw-semi); margin-bottom: var(--sp-2); }
.lgm-input, .lgm-textarea, .lgm-select {
  width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--app-ink);
  background: var(--app-panel-3); border: 1px solid var(--app-border);
  border-radius: var(--app-radius); padding: 13px 14px; min-height: var(--tap-min);
}
.lgm-textarea { min-height: 88px; resize: vertical; line-height: var(--lh-body); }
.lgm-input::placeholder, .lgm-textarea::placeholder { color: var(--app-ink-dim); }
.lgm-input:focus, .lgm-textarea:focus, .lgm-select:focus { border-color: var(--app-accent); outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---------- CARD ---------- */
.lgm-card { background: var(--app-panel); border: var(--app-hairline); border-radius: var(--app-radius); padding: var(--sp-4); box-shadow: var(--app-shadow-1); }
.lgm-card__title { font-family: var(--font-display); font-size: var(--fs-display-m); margin-bottom: var(--sp-2); }
.lgm-card--pinned { border-left: 3px solid var(--app-live); }

/* ---------- TABS ---------- */
.lgm-tabs { display: flex; background: var(--app-panel); border-bottom: var(--app-hairline); }
.lgm-tabs > button {
  flex: 1; min-height: var(--tap-min); padding: 15px 4px;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: var(--fw-med);
  color: var(--app-ink-dim); background: transparent; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lgm-tabs > button[aria-selected="true"] { color: var(--app-ink); font-weight: var(--fw-semi); border-bottom-color: var(--app-accent); }

/* ---------- TOP BAR ---------- */
.lgm-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
  background: var(--app-panel); border-bottom: var(--app-hairline);
}
.lgm-topbar--inverse { background: var(--app-ink); color: var(--app-ink-inverse); border-bottom-color: transparent; }
.lgm-topbar__club { font-family: var(--font-display); font-size: var(--fs-title); line-height: 1.15; }

/* ---------- SAVE BAR ---------- */
.lgm-savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--app-ink); color: var(--app-ink-inverse);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
}
.lgm-savebar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-live); flex: none; }
.lgm-savebar__label { font-size: 13.5px; flex: 1; }
/* the primary in the save bar is ALWAYS the dark-theme accent, on both chromes */
.lgm-savebar .lgm-btn--primary { background: #7FC49A; border-color: #7FC49A; color: #14211A; }

/* ---------- BANNER (course-level notice) ---------- */
.lgm-banner { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--app-ink-inverse); }
.lgm-banner--good { background: var(--st-good); }
.lgm-banner--warn { background: var(--st-warn); }
.lgm-banner--bad  { background: var(--st-bad); }
.lgm-banner__dot  { width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-top: 5px; flex: none; }

/* ---------- TOAST ---------- */
.lgm-toast { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--st-good); background: var(--st-good-bg); padding: var(--sp-3) var(--sp-4); border-radius: var(--app-radius); }
.lgm-toast--bad { border-color: var(--st-bad); background: var(--st-bad-bg); }

/* ---------- EMPTY STATE ---------- */
.lgm-empty { border: 1px dashed var(--app-border); padding: var(--sp-6); text-align: center; border-radius: var(--app-radius); }
.lgm-empty__title { font-family: var(--font-display); font-size: var(--fs-title); margin-bottom: var(--sp-1); }
.lgm-empty__body { font-size: 13.5px; color: var(--app-ink-dim); line-height: var(--lh-body-s); }

/* ---------- MODAL / SIGN-IN DIALOG ---------- */
.lgm-scrim { position: fixed; inset: 0; background: rgba(11,18,14,.55); z-index: 50; display: grid; place-items: center; padding: var(--sp-4); }
.lgm-modal { width: 100%; max-width: 420px; background: var(--app-panel); border: var(--app-hairline); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-2); padding: var(--sp-6); }
.lgm-modal__title { font-family: var(--font-display); font-size: var(--fs-display-m); margin-bottom: var(--sp-2); }

/* ---------- BUILDER: layer list ---------- */
.lgm-layer-group { display: flex; align-items: center; gap: 9px; padding: 11px var(--sp-4); border-bottom: 1px solid var(--app-border); font-size: 13px; cursor: pointer; }
.lgm-layer-group__name { flex: 1; font-weight: var(--fw-semi); }
.lgm-layer-group__count { font-family: var(--font-mono); font-size: 11px; color: var(--app-ink-dim); }
.lgm-layer-item { display: flex; align-items: center; gap: 9px; padding: 9px var(--sp-4) 9px 34px; border-bottom: 1px solid var(--app-border); font-size: 12.5px; cursor: pointer; }
.lgm-layer-item[aria-selected="true"] { background: var(--app-live); color: var(--app-ink-inverse); font-weight: var(--fw-semi); }
.lgm-layer-item__swatch { width: 9px; height: 9px; flex: none; }
@keyframes lgm-flash { from { background: var(--app-live); } to { background: transparent; } }
.lgm-layer-item--new { animation: lgm-flash 400ms var(--ease) 1; }

/* ---------- BUILDER: canvas action bar (attached to selection) ---------- */
.lgm-canvasbar { display: flex; gap: 1px; background: var(--app-ink); border: 1px solid var(--app-ink); border-radius: var(--app-radius); overflow: hidden; }
.lgm-canvasbar > button { background: var(--app-ink); color: var(--app-ink-inverse); border: 0; padding: 8px 12px; font-family: var(--font-ui); font-size: 12px; cursor: pointer; }
.lgm-canvasbar > button.is-primary { background: var(--app-live); font-weight: var(--fw-semi); }

/* ---------- MAP STAGE ---------- */
.lgm-mapstage { position: relative; border: var(--app-hairline); border-radius: var(--app-radius); overflow: hidden; background: var(--app-panel-2); }
.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: color-mix(in oklab, var(--app-ink) 86%, transparent);
  color: var(--app-ink-inverse);
  padding: 6px 10px; border-radius: var(--app-radius);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- PIN (live layer) ---------- */
/* default = warn ochre, moved-today = live red. 34px invisible hit target. */
.lgm-pin { cursor: grab; }
.lgm-pin__hit { fill: transparent; }
.lgm-pin__pole { stroke: var(--app-ink); stroke-width: 4; }
.lgm-pin__cloth { fill: var(--st-warn); }
.lgm-pin--moved .lgm-pin__cloth { fill: var(--app-live); }
@keyframes lgm-pin-drop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.lgm-pin--dropping { animation: lgm-pin-drop var(--dur-slow) var(--ease) 1; }