/* ─── moved from builder.html (2026-06-11 extraction wave) ───
   Preview chrome (Luke 2026-06-08): the board-header doubles as the
   deployed TOPBAR, plus a display-only sentence bar below it. Both
   carry use.html's classes (.topbar / .sb-bar / .sb-btn / .sb-empty)
   so board-themes.css `.theme-X …` skins them exactly like the real
   board → a real-life THEMED preview, not just themed tiles. Base
   look = preview-chrome.css; aria-hidden = display only (the live
   controls live on the deployed board). #boardDisplayName /
   #boardTileCount kept so the existing render code still updates.
   ─────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────────
   preview-chrome.css — make the BUILDER tablet preview a real-life mirror
   of the DEPLOYED board (use.html): a themed topbar + sentence bar, not just
   themed tiles. (Luke 2026-06-08 — "always have a real-life preview".)

   The preview chrome elements carry BOTH the deployed class (.topbar / .sb-bar
   / .sb-btn / .sb-empty — so board-themes.css `.theme-X .topbar…` skins them
   exactly like the real board) AND a `.preview-*` class (this BASE layer:
   default look + layout). board-themes.css is loaded AFTER this file, so any
   equal-specificity tie resolves to the THEME — the base never out-ranks a
   theme. Default (no theme) mirrors use.html's own defaults (dark topbar /
   cream sentence bar) so preview == deploy even unthemed.

   The preview chrome is DISPLAY-ONLY (aria-hidden, non-interactive); it shows
   what the board will look like, the real controls live on the deployed board.
   ─────────────────────────────────────────────────────────────────── */

/* ── Topbar (the editable .board-header doubles as the deployed topbar) ── */
.preview-topbar {
  background: #1A1A2E;           /* use.html default topbar */
  color: #FFFFFF;
  border-bottom: none;
  align-items: center;
  flex: 0 0 auto;               /* hold height in the landscape flex column (don't get squeezed by the grid) */
}
/* Title / tile-count / brand follow the bar's (themed-or-default) text colour,
   so a themed bar that flips to a LIGHT surface (pastel) keeps them legible
   without a per-theme rule for each. */
.preview-topbar .board-header-title,
.preview-topbar .board-header-meta,
.preview-topbar .topbar-brand { color: inherit; }
.preview-topbar .board-header-meta { opacity: 0.78; }
.preview-topbar .topbar-brand { font-weight: 800; text-decoration: none; }
.preview-topbar .topbar-brand span { color: #E8A838; }   /* themed in board-themes.css */
.preview-topbar .topbar-sep { color: currentColor; opacity: 0.4; font-weight: 400; }

/* ── Sentence bar (display-only mirror of use.html's .sb-bar) ───────── */
.preview-sbbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: #FFFBEC;           /* use.html default cream */
  border-bottom: 2px solid #E8A838;
  flex: 0 0 auto;               /* hold height in the landscape flex column */
}
.preview-sbempty { flex: 1; min-width: 0; color: #8a6f1f; font-style: italic; font-size: 0.82rem; }
.preview-sbactions { display: flex; gap: 0.4rem; margin-left: auto; }
.preview-sbbtn {
  background: #2E5090;           /* use.html default sb-btn */
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 0.3rem 0.6rem;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

/* ── Sentence-bar STYLE (color) + SIZE (density) — Luke 2026-06-19 ──
   Independent of the board theme. Mirrors the deployed rules in
   board-themes.css so the builder preview matches what ships. */
.preview-sbbar.sbstyle-blue  { background:#EEF4FF; border-bottom-color:#7C3AED; }
.preview-sbbar.sbstyle-green { background:#EAF7EE; border-bottom-color:#16A34A; }
.preview-sbbar.sbstyle-pink  { background:#FDEEF6; border-bottom-color:#DB2777; }
.preview-sbbar.sbstyle-dark  { background:#1F2937; border-bottom-color:#F59E0B; }
.preview-sbbar.sbstyle-dark .preview-sbempty { color:#E5E7EB; }
/* size / density */
.preview-sbbar.sbsize-sm { padding:0.3rem 0.6rem; font-size:0.85rem; gap:0.35rem; }
.preview-sbbar.sbsize-lg { padding:0.8rem 1.1rem; font-size:1.12rem; gap:0.7rem; }
.preview-sbbar.sbsize-lg .preview-sbbtn { padding:0.45rem 0.8rem; font-size:1.1rem; }
/* The 🎨/🔠 style+size CONTROLS are NOT here — .preview-sbbar is aria-hidden
   (display-only). They live in the accessible row-picker modal (row-picker.js
   .rp-style). This preview only mirrors the chosen color/size visually. */