/* venuepicker.css V1.3 - 2026-09-28, Nolan. One .h-vp__opt rule (the second body merged in).
   venuepicker.css V1.2 - 2026-09-28, Nolan. The rink list lives in the right slide-in panel
   (Karl); the inline .h-vp__panel box is gone, rows are phone-sized, the chosen rink is marked. */
/* venuepicker.css V1.1 — the game location picker (`GAME-06`)

   V1.1, 2026-09-06: the empty-state colour moved OFF a descendant and ONTO the
   modifier. See the note at `.h-vp__chosen--empty`; the short version is that
   the old shape painted ink no instrument in this repo could ever measure.
   ============================================================================
   TOKENS ONLY, BOTH THEMES, NO EXCEPTIONS. `.ice-tag` cost me a round by
   hard-coding one colour and shipping 2.12:1 in light mode; everything here
   inherits so neither theme can be forgotten.

   It is an INLINE PANEL, not an overlay. `Q-02` (in-place overlay navigation)
   is held and touches every overlay container, so this deliberately introduces
   none: it expands inside the form it is mounted in.
   ========================================================================== */

.h-vp { display: block; }

/* THE CHOSEN LINE. A button, not an input — the name is not hand-editable
   while it is tied to a rink (Karl's rule), and a text box would say the
   opposite of what is true. */
.h-vp__chosen {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md, 10px); padding: 10px 12px; color: var(--ink);
}
/* THE PLACEHOLDER. `--muted` on `--panel`, one step quieter than the
   `--danger` at 4.45:1 that `tests/ink-coverage.test.mjs` exists because of.

   ⚠️ IT PAINTS ON THE MODIFIER, NOT ON A DESCENDANT, AND THAT IS THE WHOLE
   POINT. V1.0 wrote `.h-vp__chosen--empty .h-vp__name { color: var(--muted) }`.
   `tools/_contrast-dom.mjs:164` credits the classes of the element that paints
   its OWN text, and :176 credits the parent only when that element is
   UNCLASSED — deliberately, so no layout wrapper gets credit for the whole
   page. `.h-vp__chosen` has no text of its own and `.h-vp__name` had a class,
   so NEITHER rule could ever fire: measured it and watched
   `h-vp__chosen--empty` come back unrecorded while its ink was on screen.
   That is the `st-empty__ic` shape kit.html already documents — a correctly
   classed box measuring nothing — and the fix is the same, put the ink where
   the walker can see it.

   The placeholder is also not a NAME. There is no rink chosen, so there is
   nothing to name; `.h-vp__name` belongs to the picked state and the empty
   state carries plain text. The weight and size are restated here so the
   placeholder is measured at the size it ships at, which is the reason
   `pg-door-ice--none` is drawn inside its host in kit.html. */
.h-vp__chosen--empty { color: var(--muted); font-weight: 600; font-size: 14px; }
.h-vp__name { font-weight: 600; font-size: 14px; }
.h-vp__area { grid-column: 1; font-size: 12px; color: var(--muted); }
.h-vp__addr { grid-column: 1; font-size: 12px; color: var(--muted); }
.h-vp__change {
  grid-row: 1; grid-column: 2; align-self: start;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--action);
}

.h-vp__search { width: 100%; }
.h-vp--panel { display: flex; flex-direction: column; gap: 10px; }
.h-vp--panel .h-vp__search { position: sticky; top: 0; z-index: 1; }
.h-vp__list { display: flex; flex-direction: column; }
.h-vp__opt {
  display: block; width: 100%; min-height: 48px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 6px; color: var(--ink);
}
.h-vp__opt:last-child { border-bottom: 0; }
.h-vp__opt.is-on { background: var(--panel2); border-radius: var(--r-sm, 8px); }
.h-vp__opt.is-on .h-vp__optname { font-weight: 700; }
.h-vp__optname { display: block; font-size: 13.5px; }
.h-vp__optarea { display: block; font-size: 11.5px; color: var(--muted); }

.h-vp__other, .h-vp__back {
  display: block; width: 100%; margin-top: 10px; cursor: pointer;
  background: none; border: 1px dashed var(--line); border-radius: var(--r-pill, 999px);
  padding: 9px 12px; font-size: 12.5px; color: var(--ink);
}
.h-vp__note { margin: 8px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* OTHER. Two fields, and the address is not optional. */
.h-vp__manual { margin-top: 8px; }
.h-vp__f { display: block; margin-bottom: 8px; }
.h-vp__fl {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}
.h-vp__req { margin: 0 2px 8px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* THE SUGGESTIONS — the rule that protects the data, so it reads as help
   rather than as a warning. Somebody typing "bell sens" has done nothing
   wrong; they are one tap from the right answer. */
.h-vp__sug {
  margin: 0 0 10px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--action);
  border-radius: var(--r-md, 10px);
}
.h-vp__sugl {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}

/* The one place a colour means "fix this". `--danger` is composited over an
   opaque surface rather than laid on its own translucent wash — the defect
   `tests/contrast.test.mjs` exists to catch. */
.h-vp__bad {
  margin: 8px 2px 0; padding: 8px 10px;
  background: var(--panel); border-left: 3px solid var(--danger-solid, var(--danger));
  border-radius: var(--r-md, 10px);
  font-size: 12px; color: var(--ink); line-height: 1.5;
}