/* ══════════════════════════════════════════════════════════
   THE PEEK — the portal's hover card
   css/system/components/peek.css

   One hover card for every surface that has something to say
   about a bar without making you click it. Shaped, scannable,
   readable at a glance.

   MOVED OUT OF planner.css, arc F coda (2026-08-05), by the same
   reasoning that moved `.plx-seg` into segmented.css during arc F
   final: the planner grew a good component, a second surface
   needed it, and the answer to "a second surface needs it" is
   never a lookalike. The person calendar was showing a native
   browser tooltip — a `title` attribute — where the planner shows
   this. Same gesture, two visual languages, one of them not ours.

   Class names keep the `plx-` prefix ON PURPOSE. They are load-
   bearing in planner-board.js at a dozen call sites and in the
   peek's own innerHTML; renaming them would be churn with no
   reader benefit and a real chance of missing one. The prefix
   records where the component was born, not who owns it now.

   The chip vocabulary (`.plx-state*`) travels with it: the peek
   renders a status chip in its own markup, so the two cannot be
   separated without the card losing a row.

   Behaviour lives in PlannerShared.Peek (planner-shared.js).
   Any host loading a module that emits these classes must link
   this file — scripts/check-css-contract.py enforces it.
   ══════════════════════════════════════════════════════════ */

/* ── the hover card ────────────────────────────────────────
   Fixed-position singleton, owned by PlannerShared.Peek; sits
   above bars and below modals. `pointer-events: none` matters —
   the card must never eat the hover that summoned it. */
.plx-tip {
  position: fixed;
  z-index: 150;
  max-width: 300px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-soft);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 10%, transparent);
  font-family: var(--font-std);
  font-size: 13px;
  color: var(--ink);
  pointer-events: none;
}

/* ── the sticky posture: a TAPPED peek ─────────────────────
   On touch a tap opens the peek and the peek carries the edit
   affordance — the only route from a read to a write. That
   card has to be interactive, which the hover card must never
   be (it would eat the hover that summoned it). Same card,
   two postures, exactly as the write surface does it.
   Behaviour: PlannerShared.Peek.tap(). */
.plx-tip.is-sticky {
  pointer-events: auto;
  max-width: 340px;
  box-shadow: var(--shadow-3);
  border-color: var(--rule-3);
}
.plx-tip__t {
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.plx-tip__d {
  font-family: var(--font-cd);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.plx-tip__kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
  border-top: 1px solid var(--rule);
}
.plx-tip__kv span:first-child {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ── coverage-state chip (list views, mirrors, overlays) ── */
.plx-state {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-soft);
  border: 1px solid transparent;
  white-space: nowrap;
}
.plx-state--booked { color: var(--st-booked); border-color: var(--st-booked); background: var(--st-booked-soft); }
.plx-state--pencil { color: var(--st-pencil); border-color: color-mix(in srgb, var(--st-pencil) 55%, transparent); border-style: dashed; }
.plx-state--clash  { color: var(--st-clash); border-color: var(--st-clash); border-style: dashed; background: color-mix(in srgb, var(--st-clash) 10%, transparent); }
.plx-state--open   { color: var(--st-open); border-color: var(--st-open); background: var(--st-open-soft); }
.plx-state--done   { color: var(--ink-3); border-color: var(--rule-2); background: var(--paper-2); }