/* Topo Puzzles reference components v1. Requires tokens.css.
   These are the canonical looks shown on brand-sheet.html; the site build should
   lift them as-is (class names are stable). */

/* ---------- buttons ---------- */
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-2);
  min-height: var(--tp-tap); padding: 0 var(--tp-space-5);
  border-radius: var(--tp-radius-pill); border: 1.5px solid transparent;
  font: var(--tp-weight-bold) var(--tp-text-base)/1 var(--tp-font-sans);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--tp-dur-fast) var(--tp-ease-out), color var(--tp-dur-fast) var(--tp-ease-out),
              border-color var(--tp-dur-fast) var(--tp-ease-out), transform var(--tp-dur-instant) var(--tp-ease-out);
}
.tp-btn:active { transform: translateY(1px); }
.tp-btn--primary { background: var(--tp-ink); color: var(--tp-paper); }
.tp-btn--primary:hover { background: #000; }
.tp-btn--secondary { background: var(--tp-paper-raised); color: var(--tp-ink); border-color: var(--tp-ink); }
.tp-btn--secondary:hover { background: var(--tp-paper-sunk); }
.tp-btn--ghost { background: transparent; color: var(--tp-ink); padding-inline: var(--tp-space-3); }
.tp-btn--ghost:hover { background: var(--tp-paper-sunk); }
.tp-btn[disabled], .tp-btn[aria-disabled="true"] { background: var(--tp-paper-sunk); color: var(--tp-ink-faint); border-color: transparent; cursor: not-allowed; transform: none; }
.tp-btn--lg { min-height: 52px; padding-inline: var(--tp-space-6); font-size: var(--tp-text-lg); }

/* ---------- level chip + progress ---------- */
.tp-level-chip {
  display: inline-flex; align-items: center; gap: var(--tp-space-2);
  height: 32px; padding: 0 var(--tp-space-3) 0 var(--tp-space-4);
  border-radius: var(--tp-radius-pill); border: var(--tp-border-strong); background: var(--tp-paper-raised);
  font-weight: var(--tp-weight-bold); font-size: var(--tp-text-sm);
}
.tp-pips { display: inline-flex; gap: 3px; }
.tp-pips i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tp-ink); }
.tp-pips i.on { background: var(--tp-ink); }

/* ---------- compass picker (Easy, and the facing half of Hard/Extreme) ---------- */
.tp-compass { position: relative; width: 248px; height: 248px; }
.tp-compass__rose { position: absolute; inset: 0; }
.tp-compass__opt {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  transform: rotate(var(--a)) translateY(-98px) rotate(calc(-1 * var(--a)));
  border-radius: 50%; border: 1.5px solid var(--tp-ink); background: var(--tp-paper-raised); color: var(--tp-ink);
  font: var(--tp-weight-bold) var(--tp-text-sm)/1 var(--tp-font-sans); cursor: pointer;
  transition: background-color var(--tp-dur-fast) var(--tp-ease-out), color var(--tp-dur-fast) var(--tp-ease-out);
}
.tp-compass__opt:hover { background: var(--tp-paper-sunk); }
.tp-compass__opt[aria-checked="true"] { background: var(--tp-ink); color: var(--tp-paper); }
.tp-compass__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------- point picker A-D (Medium) ---------- */
.tp-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tp-space-3); }
.tp-points__opt {
  display: flex; align-items: center; justify-content: center; gap: var(--tp-space-3);
  height: 64px; border-radius: var(--tp-radius-md); border: 1.5px solid var(--tp-ink);
  background: var(--tp-paper-raised); color: var(--tp-ink);
  font: var(--tp-weight-bold) var(--tp-text-2xl)/1 var(--tp-font-sans); cursor: pointer;
}
.tp-points__opt:hover { background: var(--tp-paper-sunk); }
.tp-points__opt[aria-checked="true"] { background: var(--tp-ink); color: var(--tp-paper); }
.tp-points__opt[aria-checked="true"] .tp-bullseye__ring { stroke: var(--tp-paper); }

/* ---------- grid-point picker (Hard / Extreme) ---------- */
.tp-grid { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 1fr 24px; gap: 6px; }
.tp-grid__rows { display: grid; grid-template-rows: repeat(10, 1fr); font-weight: var(--tp-weight-bold); font-size: var(--tp-text-caption); text-align: center; }
.tp-grid__rows span, .tp-grid__cols span { display: flex; align-items: center; justify-content: center; }
.tp-grid__cols { grid-column: 2; display: grid; grid-template-columns: repeat(10, 1fr); font-weight: var(--tp-weight-bold); font-size: var(--tp-text-caption); }
.tp-grid__field { position: relative; background: var(--tp-map); border: var(--tp-border-panel); aspect-ratio: 1; }
.tp-grid__readout {
  display: inline-flex; align-items: baseline; gap: var(--tp-space-2); padding: 6px var(--tp-space-3);
  border-radius: var(--tp-radius-pill); background: var(--tp-ink); color: var(--tp-paper);
  font: var(--tp-weight-bold) var(--tp-text-base)/1 var(--tp-font-mono);
}

/* segmented facing control (compact compass for Hard/Extreme on narrow screens) */
.tp-seg { display: grid; grid-template-columns: repeat(8, 1fr); border: 1.5px solid var(--tp-ink); border-radius: var(--tp-radius-pill); overflow: hidden; background: var(--tp-paper-raised); }
.tp-seg button { min-height: var(--tp-tap); border: 0; border-left: 1px solid var(--tp-rule-strong); background: transparent; font: var(--tp-weight-bold) var(--tp-text-sm)/1 var(--tp-font-sans); color: var(--tp-ink); cursor: pointer; }
.tp-seg button:first-child { border-left: 0; }
.tp-seg button[aria-checked="true"] { background: var(--tp-ink); color: var(--tp-paper); }

/* ---------- score chips ---------- */
.tp-score {
  display: inline-flex; align-items: center; gap: var(--tp-space-2);
  height: 34px; padding: 0 var(--tp-space-4) 0 var(--tp-space-3);
  border-radius: var(--tp-radius-pill); border: 1.5px solid transparent;
  font: var(--tp-weight-bold) var(--tp-text-sm)/1 var(--tp-font-sans);
}
.tp-score svg { width: 14px; height: 14px; flex: none; }
.tp-score b { font-variant-numeric: tabular-nums; }
.tp-score__lvl { font-weight: var(--tp-weight-semibold); }
.tp-score--summit { background: var(--tp-score-summit); color: var(--tp-score-summit-text); }
.tp-score--ridge { background: var(--tp-score-ridge); color: var(--tp-score-ridge-text); }
.tp-score--foothill { background: var(--tp-score-foothill); color: var(--tp-score-foothill-text); border-color: #C9B272; }
.tp-score--miss { background: var(--tp-score-miss); color: var(--tp-score-miss-text); border: 1.5px dashed var(--tp-score-miss-border); }

/* ---------- cards ---------- */
.tp-card { background: var(--tp-paper-raised); border: var(--tp-border-hair); border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-1); padding: var(--tp-space-5); }
.tp-card--sunk { background: var(--tp-paper-sunk); border-color: transparent; box-shadow: none; }

/* ---------- email signup ---------- */
.tp-signup { display: flex; gap: var(--tp-space-2); padding: 4px; border: var(--tp-border-input); border-radius: var(--tp-radius-pill); background: var(--tp-map); }
.tp-signup:focus-within { border-color: var(--tp-lake); box-shadow: 0 0 0 3px rgba(44, 93, 136, 0.18); }
.tp-signup input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 var(--tp-space-4); font: var(--tp-text-base) var(--tp-font-sans); color: var(--tp-ink); }
.tp-signup input::placeholder { color: var(--tp-ink-faint); }
.tp-field-help { font-size: var(--tp-text-sm); color: var(--tp-ink-soft); margin-top: var(--tp-space-2); }
.tp-field-error { font-size: var(--tp-text-sm); color: var(--tp-ink); font-weight: var(--tp-weight-semibold); display: flex; gap: 6px; align-items: center; }

/* ---------- header / footer ---------- */
.tp-header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--tp-gutter); border-bottom: var(--tp-border-hair); background: var(--tp-paper); }
.tp-header nav { display: flex; gap: var(--tp-space-5); font-size: var(--tp-text-sm); font-weight: var(--tp-weight-semibold); }
.tp-header nav a { text-decoration: none; }
.tp-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tp-footer { padding: var(--tp-space-6) var(--tp-gutter); background: var(--tp-paper-sunk); color: var(--tp-ink-map); font-size: var(--tp-text-sm); }

/* ---------- bullseye (the one marker) ---------- */
.tp-bullseye__ring { fill: var(--tp-map); stroke: var(--tp-ink); }
.tp-bullseye__dot { fill: var(--tp-marker); }