/* =============================================================================
 * 390 FieldOps — READ ERROR CARD (canonical stylesheet)
 * -----------------------------------------------------------------------------
 * Pairs with public/js/read-error-card.js. Plan:
 * docs/plans/SILENT_READ_FAILURE_ELIMINATION.md §9.2
 *
 * ── THE SENTINEL IS LOAD-BEARING. DO NOT REMOVE IT. ────────────────────────
 * `--rec-loaded: 1` on `.read-error-card` is how read-error-card.js knows this
 * file actually applied. If the probe reads anything else the JS injects a
 * minimum readable subset instead, because a page can forget a <link> exactly as
 * easily as a <script> — and a failure card nobody can read is a failure nobody
 * screenshots. Delete the sentinel and the JS will permanently double up on
 * fallback styles.
 *
 * ── DESIGN NOTES ───────────────────────────────────────────────────────────
 * · Inline, in the region that failed. There is deliberately NO fixed/absolute
 *   positioning and NO animation here: Matthew's §7 ruling is "NEVER a toast",
 *   and a card that slides or fades is one step from one that disappears.
 *   (The single exception is `[data-read-error-orphan]` at the bottom, which
 *   exists only for the bug where a caller passed no region at all.)
 * · Mobile first. Every coach and parent hits this on a phone; the button row
 *   wraps rather than overflowing, and nothing is smaller than 12px.
 * · Reads correctly on a dark page too — see the prefers-color-scheme block.
 * ============================================================================= */

.read-error-card {
  --rec-loaded: 1;                 /* SENTINEL — see the header. */

  --rec-ink: #111827;
  --rec-accent: #b91c1c;
  --rec-accent-deep: #7f1d1d;
  --rec-bg: #fff5f5;
  --rec-chip-bg: #ffffff;
  --rec-chip-border: #d8a7a7;
  --rec-muted: #4b5563;

  margin: 10px 0;
  padding: 12px 14px;
  border: 2px solid var(--rec-accent);
  border-radius: 8px;
  background: var(--rec-bg);
  color: var(--rec-ink);
  text-align: left;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  /* Long path shapes and long reference codes must never push the page sideways. */
  overflow-wrap: anywhere;
}

.read-error-card .rec-title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 15px;
  color: var(--rec-accent-deep);
}

.read-error-card .rec-msg {
  margin: 0 0 10px;
  max-width: 62ch;                  /* a paragraph a parent will actually read */
}

/* ── the always-visible row: reference code + Copy (+ Retry, transient only) ── */
.read-error-card .rec-refrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.read-error-card .rec-reflabel {
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rec-muted);
}

.read-error-card .rec-ref {
  font: 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--rec-chip-bg);
  border: 1px solid var(--rec-chip-border);
  border-radius: 4px;
  padding: 4px 7px;
  /* Selectable in one gesture: a founder reads this out or copies it by hand. */
  user-select: all;
}

.read-error-card button {
  font: 12px/1 inherit;
  padding: 7px 11px;                /* >= 28px tall: a real phone tap target */
  border-radius: 4px;
  cursor: pointer;
}
.read-error-card button:focus-visible {
  outline: 2px solid var(--rec-accent-deep);
  outline-offset: 2px;
}

.read-error-card .rec-copy {
  border: 1px solid var(--rec-accent-deep);
  background: var(--rec-accent-deep);
  color: #fff;
}
.read-error-card .rec-copy:hover { background: #991b1b; }

.read-error-card .rec-retry {
  border: 1px solid var(--rec-accent-deep);
  background: var(--rec-chip-bg);
  color: var(--rec-accent-deep);
}
.read-error-card .rec-retry:hover { background: #fee2e2; }
.read-error-card .rec-retry[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* Shown INSTEAD of a Retry button — `.rec-noretry` on permission_denied,
 * `.rec-exhausted` once a transient code has spent its retry budget. Both sit in
 * the same flex row the button would have occupied, so the absence of the button
 * reads as a deliberate answer rather than a missing feature. */
.read-error-card .rec-noretry,
.read-error-card .rec-exhausted {
  font-size: 12px;
  color: var(--rec-muted);
  flex: 1 1 16ch;
}

/* ── the hidden half: raw code + path shape. CLOSED BY DEFAULT. ─────────────
 * `<details>` does this in plain HTML with no JavaScript, which is why it was
 * chosen: there is no code path that can accidentally leave it open. */
.read-error-card .rec-details { margin-top: 10px; }

.read-error-card .rec-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--rec-muted);
  padding: 2px 0;
}
.read-error-card .rec-details summary:hover { color: var(--rec-accent-deep); }

.read-error-card .rec-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
  font-size: 12px;
}
.read-error-card .rec-dl dt {
  color: var(--rec-muted);
  white-space: nowrap;
}
.read-error-card .rec-dl dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.read-error-card .rec-raw {
  margin: 8px 0 0;
  padding: 8px 9px;
  background: var(--rec-chip-bg);
  border: 1px solid var(--rec-chip-border);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #374151;
  max-height: 9em;
  overflow: auto;                   /* the card never grows without bound */
}

/* Narrow phones: stack the row so the Copy button is never clipped. */
@media (max-width: 380px) {
  .read-error-card .rec-refrow { gap: 6px; }
  .read-error-card .rec-reflabel { flex: 1 0 100%; }
}

/* Dark pages (the draft room, game ops) — the card must still read as an error
 * and must not become a white slab on a dark surface. */
@media (prefers-color-scheme: dark) {
  .read-error-card {
    --rec-ink: #f3f4f6;
    --rec-accent: #ef4444;
    --rec-accent-deep: #fca5a5;
    --rec-bg: #2a1416;
    --rec-chip-bg: #1f1416;
    --rec-chip-border: #7f1d1d;
    --rec-muted: #cbb7b7;
  }
  .read-error-card .rec-copy { background: #991b1b; border-color: #ef4444; color: #fff; }
  .read-error-card .rec-copy:hover { background: #b91c1c; }
  .read-error-card .rec-retry:hover { background: #3b1d1f; }
  .read-error-card .rec-raw { color: #e5e7eb; }
}

/* ── ORPHAN: a caller passed no region. A bug, and it should look like one. ──
 * The only positioned rule in this file. It exists so a failure is never
 * invisible; it is not a toast — nothing removes it. */
.read-error-card[data-read-error-orphan] {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* The dependency-free card that read-core.js renders when THIS file's JS never
 * loaded carries all of its styling inline, so it needs nothing here. This rule
 * exists only to give it the same breathing room when both happen to be present. */
.read-error-plain { overflow-wrap: anywhere; }

/* ── COMPACT FORM — a one-line failure for a badge, counter, chip or cell ─────
 *
 * Added 2026-09-14 from the Phase 1 pilot's central finding: `watch()` with no
 * region had nowhere to render, so it only console.error'd — invisible to a
 * parent — and every such site needed ~6 hand-written lines to show anything.
 * Most of the remaining `.on('value')` sites in this repo are badges and chips,
 * so without this the helper is LONGER than the code it replaces at exactly the
 * scale that matters.
 *
 * ⚠️ THE CONSTRAINT IS THAT IT MUST NOT CHANGE THE HEIGHT OF THE ROW IT SITS IN.
 * A failure notice that reflows the layout it is reporting on has caused a
 * second, more confusing bug. Hence inline-flex, `font: inherit`, nowrap, and
 * baseline alignment — it occupies the badge's own line box and nothing more.
 * The reference code stays VISIBLE (a screenshot has to be actionable); the full
 * diagnostic rides on `title` rather than spending any layout. */
.read-error-compact {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font: inherit;            /* never impose a size on someone else's badge */
  color: #b91c1c;
  white-space: nowrap;
  vertical-align: baseline;
}
.read-error-compact .rec-c-mark { font-size: 1em; line-height: 1; }
.read-error-compact .rec-c-word { font-weight: 600; }
.read-error-compact .rec-c-sep  { opacity: .6; }
.read-error-compact .rec-c-ref {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .85em;
  opacity: .85;
}