/* =====================================================================
   BROADSHEET: the puzzle page of a morning paper.
   Newsprint, ink rules, square corners, Fraunces for reading and headlines,
   IBM Plex Mono for every label. Red is the one accent; buttons are set in ink.
   Spec: docs/themes/broadsheet.md
   ===================================================================== */
:root[data-theme="broadsheet"] {
  color-scheme: light;
  --bg: #f2ede2; --surface: #f9f6ef; --surface-2: #e8e1d2;
  --text: #161513; --muted: #5b574f; --faint: #767063; --border: #c9c0ad; --rule: #161513;
  --accent: #b3261e;
  --primary: #161513; --primary-strong: #000; --primary-contrast: #f9f6ef; --primary-soft: #e3dbc9;
  --danger: #b3261e; --danger-soft: #f1d6cd; --success: #2f6b3a;
  --radius: 0px; --r-ctl: 0px; --r-ctl-in: 0px; --r-dialog: 0px; --r-menu: 0px; --r-board: 0px; --r-cell: 0px; --r-pill: 0px;
  --content-w: 1100px;
  --shadow: none;
  --dialog-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--rule), 0 24px 60px rgba(22, 21, 19, .25);
  --menu-shadow: 5px 5px 0 var(--rule);
  --overlay: rgba(22, 21, 19, .4);
  --font: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --toast-bg: #161513; --toast-fg: #f2ede2; --toast-action: #f2d77e;
  --record-bg: #161513; --record-fg: #f9f6ef;
  /* 2048 */
  --g-board: #161513; --g-slot: #2e2b27;
  --t2: #f9f6ef; --t4: #ebe3d2; --t8: #dccaa6; --t16: #caa978; --t32: #c27a4c; --t64: #b3261e;
  --t128: #8c1c16; --t256: #23458a; --t512: #1b3566; --t1024: #5b574f; --t2048: #f2d77e;
  --t-ink: #161513; --t-paper: #f9f6ef; --t8-fg: #161513; --t16-fg: #161513; --t32-fg: #161513; --t2048-fg: #161513;
  /* memory grid */
  --flash: #161513; --tile: #e8e1d2;
  /* card table: no felt, a halftone tint box */
  --table-bg: radial-gradient(rgba(22, 21, 19, .16) .9px, transparent 1.1px) 0 0 / 4px 4px, #e6dfd0;
  --table-frame: 0 0 0 1px var(--rule);
  --slot-line: rgba(22, 21, 19, .55);
  --card-paper: #f9f6ef; --card-r: 0;
  --card-shadow: 0 0 0 1px rgba(22, 21, 19, .55);
  --court-panel: #efe8d9; --court-rule: inset 0 0 0 1px currentColor;
  --suit-red: #b3261e; --suit-black: #161513;
  --card-back-art:
    repeating-linear-gradient(45deg, rgba(249, 246, 239, .18) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(249, 246, 239, .18) 0 1px, transparent 1px 5px), #161513;
  --back-edge: #f9f6ef; --back-edge-w: .05; --back-shadow: 0 0 0 1px #161513;
  --font-card: var(--font);
  /* states, sides, the table's ink, motion (README §2.3) */
  --warn: #8a5a00; --warn-soft: #f2e3bf;
  --success-contrast: #f9f6ef; --danger-contrast: #f9f6ef;
  --table-ink: #3b3830; --table-ink-strong: #161513; --table-ink-quiet: #6b655b; --table-turn: #b3261e;
  --suit-blue: #23458a; --suit-green: #2f6b3a;
  --side-1: #b3261e; --side-1-ink: #f9f6ef; --side-2: #161513; --side-2-ink: #f9f6ef; --side-3: #23458a; --side-3-ink: #f9f6ef;
  --side-4: #caa978; --side-4-ink: #161513; --side-5: #2f6b3a; --side-5-ink: #f9f6ef; --side-6: #5b574f; --side-6-ink: #f9f6ef;
  --frame-out: 0px; --t-move: .18s;
  --panel-edge: 0 0 0 1px var(--rule);
  --confetti: #161513, #b3261e, #caa978, #f2d77e;
}
[data-theme="broadsheet"] ::selection { background: #f2d77e; }
/* the backdrop: a halftone screen with ink clouds drifting through it (js/backdrops/broadsheet.js); faint over the content column */
[data-theme="broadsheet"] .backdrop { --veil: .3; }

/* every label, button and figure: mono, small caps-style uppercase */
[data-theme="broadsheet"] :is(.btn, .segmented button, .tool, .stat-label, .game-status, .offline-badge, .theme-btn, .toast-action, .record, .main-nav a, .field label, .footer-links, .version, .t-label, .icon-tile span, .keypad button.accent, .setup-label, .tags .tag, .board-status, .board-status.cover > span) {
  font-family: var(--font-mono); font-weight: 600; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
}

/* ---------- chrome ---------- */
[data-theme="broadsheet"] .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 3px double var(--rule); }
[data-theme="broadsheet"] body[data-route="home"] .topbar { border-bottom-color: transparent; }
[data-theme="broadsheet"] .brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
[data-theme="broadsheet"] .main-nav a { color: var(--text); border-radius: 0; }
[data-theme="broadsheet"] .main-nav a:hover { background: var(--surface-2); }
[data-theme="broadsheet"] .main-nav a[aria-current="true"] { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--rule); }
[data-theme="broadsheet"] .theme-btn { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .theme-btn:hover { background: var(--surface-2); }
[data-theme="broadsheet"] .theme-btn .theme-swatch { width: 30px; height: 28px; }
[data-theme="broadsheet"] .theme-menu { border-color: var(--rule); }
[data-theme="broadsheet"] .theme-opt .ico { color: var(--accent); }
[data-theme="broadsheet"] .theme-opt .apps i { border-color: var(--rule); border-radius: 0; color: var(--text); }

/* ---------- controls ---------- */
[data-theme="broadsheet"] .btn { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .btn:hover:not(:disabled) { background: var(--surface-2); }
[data-theme="broadsheet"] .btn-primary { background: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .btn-primary:hover:not(:disabled) { background: #000; }
[data-theme="broadsheet"] .btn-danger { color: var(--accent); border-color: var(--accent); }
[data-theme="broadsheet"] .segmented { padding: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .segmented button { padding: 9px 12px; color: var(--text); }
[data-theme="broadsheet"] .segmented button[aria-pressed="true"] { background: var(--rule); color: var(--surface); box-shadow: none; }
[data-theme="broadsheet"] .stats { gap: 0; }
[data-theme="broadsheet"] .stat { align-items: flex-start; padding: 0 12px; background: transparent; border: 0; border-left: 1px solid var(--rule); }
[data-theme="broadsheet"] .stat-value { font-size: 1.3rem; font-weight: 800; }
[data-theme="broadsheet"] .tool { font-size: .64rem; color: var(--text); }
[data-theme="broadsheet"] .tool[aria-pressed="true"] { background: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .tool .badge { background: var(--accent); color: #fff; font-family: var(--font-mono); border-radius: 0; }
[data-theme="broadsheet"] .hint-text { font-size: .92rem; }
[data-theme="broadsheet"] .field :is(input, select, textarea) { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .switch { width: 44px; height: 24px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .switch::before { top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 0; background: var(--rule); box-shadow: none; }
[data-theme="broadsheet"] .switch[aria-checked="true"] { background: var(--rule); }
[data-theme="broadsheet"] .switch[aria-checked="true"]::before { transform: translateX(20px); background: var(--surface); }
[data-theme="broadsheet"] :is(.check input, .range) { accent-color: var(--rule); }

/* ---------- surfaces, dialog, toast ---------- */
[data-theme="broadsheet"] .box { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .box > :is(h2, h3) { padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
[data-theme="broadsheet"] .dialog { border: 1px solid var(--rule); }
[data-theme="broadsheet"] .dialog h2, [data-theme="broadsheet"] .settings-title { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
[data-theme="broadsheet"] .rules, [data-theme="broadsheet"] .dialog p { color: var(--text); }
[data-theme="broadsheet"] .dialog .stats .stat { padding: 4px 12px; }
[data-theme="broadsheet"] #toast { font-family: var(--font-mono); font-size: .82rem; }
[data-theme="broadsheet"] .install-banner { background: transparent; border: 1px solid var(--rule); margin-bottom: 24px; }
[data-theme="broadsheet"] .install-banner span { color: var(--text); }
[data-theme="broadsheet"] .drawer { border-left: 1px solid var(--rule); box-shadow: -14px 0 40px rgba(22, 21, 19, .18); }
[data-theme="broadsheet"] .setting { border-top-color: var(--rule); }
[data-theme="broadsheet"] .setting-text small { color: var(--text); }
[data-theme="broadsheet"] .icon-tile { border-color: var(--rule); background: transparent; color: var(--text); }
[data-theme="broadsheet"] .swatch-item i { border-radius: 0; }

/* ---------- home: masthead, dateline, ruled three-column page ---------- */
[data-theme="broadsheet"] .view { padding-top: 4px; }
[data-theme="broadsheet"] .home-hero { display: flex; flex-direction: column; text-align: center; margin-bottom: 28px; }
[data-theme="broadsheet"] .hero-title {
  display: block; order: 1;
  padding: 4px 0 12px;
  font-size: clamp(3rem, 12.4vw, 7.6rem); font-weight: 900; line-height: .92; letter-spacing: -.04em;
  font-variation-settings: "opsz" 144;
}
[data-theme="broadsheet"] .hero-meta {
  display: flex; justify-content: space-between; gap: 16px; order: 2;
  padding: 7px 2px;
  border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule);
  font: 600 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
[data-theme="broadsheet"] .date-short { display: none; }
[data-theme="broadsheet"] .intro { order: 3; max-width: 58ch; margin: 18px auto 0; color: var(--text); font-size: 1.08rem; line-height: 1.5; }

/* section heads: a headline, then the count in red mono at the right */
[data-theme="broadsheet"] .section-head { align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; }
[data-theme="broadsheet"] .section-title { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
[data-theme="broadsheet"] .section-count { display: block; margin-left: auto; color: var(--accent); font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
[data-theme="broadsheet"] .section-count::after { content: " " attr(data-unit); }
[data-theme="broadsheet"] .section-note { flex-basis: 100%; color: var(--muted); font: 600 .68rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
[data-theme="broadsheet"] .home-section + .home-section { margin-top: 40px; }

[data-theme="broadsheet"] .game-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  overflow: hidden;
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule);
}
[data-theme="broadsheet"] .game-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px;
  padding: 22px 22px 24px;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule);
  transition: none;
}
[data-theme="broadsheet"] .game-card:hover, [data-theme="broadsheet"] .game-card:active { transform: none; }
[data-theme="broadsheet"] .game-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
[data-theme="broadsheet"] .game-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-theme="broadsheet"] .game-card .game-icon { order: 2; width: 46px; height: 46px; border-radius: 0; background: var(--rule); color: var(--rule); box-shadow: none; }
[data-theme="broadsheet"] .game-icon svg { width: 34px; height: 34px; }
[data-theme="broadsheet"] .game-icon svg [fill="#fff"] { fill: var(--surface); }
[data-theme="broadsheet"] .game-icon svg [stroke="#fff"] { stroke: var(--surface); }
[data-theme="broadsheet"] .kind-line .game-card .game-icon { color: var(--surface); }
[data-theme="broadsheet"] .kind-line .game-card .game-icon svg { width: 26px; height: 26px; }
[data-theme="broadsheet"] .game-num { display: block; margin-bottom: 8px; color: var(--accent); font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; }
[data-theme="broadsheet"] .game-num::before { content: "No. "; }
[data-theme="broadsheet"]:lang(de) .game-num::before { content: "Nr. "; }
[data-theme="broadsheet"] .game-meta h3 { font-size: 1.5rem; font-weight: 750; line-height: 1.08; letter-spacing: -.02em; }
[data-theme="broadsheet"] .game-meta p { margin-top: 8px; color: var(--text); font-size: .98rem; line-height: 1.45; }
[data-theme="broadsheet"] .game-status { margin-top: 12px; color: var(--muted); font-size: .66rem; }
/* the lead story: the entry marked .lead (in an app, the first game of the page) spans two
   columns. The style guide marks the first entry of every layout so each lead can be seen. */
[data-theme="broadsheet"] .home-section .game-card.lead { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); gap: 26px; padding: 26px 26px 28px 0; }
[data-theme="broadsheet"] .home-section .game-card.lead .game-icon { order: 0; width: 120px; height: 120px; }
[data-theme="broadsheet"] .home-section .game-card.lead .game-icon svg { width: 92px; height: 92px; }
[data-theme="broadsheet"] .home-section .kind-line .game-card.lead .game-icon svg { width: 70px; height: 70px; }
[data-theme="broadsheet"] .home-section .game-card.lead h3 { font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 850; letter-spacing: -.035em; }
[data-theme="broadsheet"] .home-section .game-card.lead p { font-size: 1.15rem; max-width: 34ch; }
[data-theme="broadsheet"] .home-section .game-card.lead .game-num::after { content: " · Today's lead game"; }
[data-theme="broadsheet"]:lang(de) .home-section .game-card.lead .game-num::after { content: " · Das Spiel des Tages"; }
[data-theme="broadsheet"] .home-footer { margin-top: 18px; }

/* art panels: the art is a halftone panel with a 1px ink frame, above the text */
[data-theme="broadsheet"] .kind-art .game-card { display: flex; flex-direction: column; align-items: stretch; padding: 16px 16px 24px; }
[data-theme="broadsheet"] .kind-art .game-card .game-icon { order: 0; width: auto; height: 140px; aspect-ratio: auto; background: var(--table-bg); box-shadow: 0 0 0 1px var(--rule); --art-scale: 1.12; }
[data-theme="broadsheet"] .kind-art .game-card .game-meta { padding: 0; }
[data-theme="broadsheet"] .home-section .kind-art .game-card.lead { padding: 24px 16px 24px; }
[data-theme="broadsheet"] .home-section .kind-art .game-card.lead .game-icon { width: auto; height: 232px; --art-scale: 2.1; }

/* the icon page repeats game cards; no lead story there */

/* ---------- footer ---------- */
[data-theme="broadsheet"] .site-footer { border-top: 3px double var(--rule); color: var(--text); }
[data-theme="broadsheet"] .footer-brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
[data-theme="broadsheet"] .footer-note { font-style: italic; }

/* ---------- game pieces ---------- */
[data-theme="broadsheet"] .keypad button { border-color: var(--rule); background: transparent; font-weight: 800; }
[data-theme="broadsheet"] .keypad button:hover:not(:disabled) { background: var(--surface-2); }
[data-theme="broadsheet"] .keypad button.accent { background: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .table { margin: 0; }
[data-theme="broadsheet"] .slot { box-shadow: none; outline: 1px dashed var(--slot-line); outline-offset: -1px; }

@media (max-width: 860px) {
  [data-theme="broadsheet"] .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  [data-theme="broadsheet"] .hero-meta .meta-note { display: none; }
  [data-theme="broadsheet"] .game-list { grid-template-columns: minmax(0, 1fr); }
  [data-theme="broadsheet"] .game-card { padding: 18px 0 20px; }
  [data-theme="broadsheet"] .home-section .game-card.lead { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; padding: 22px 0; }
  [data-theme="broadsheet"] .home-section .game-card.lead .game-icon { order: 2; width: 72px; height: 72px; }
  [data-theme="broadsheet"] .home-section .game-card.lead .game-icon svg { width: 54px; height: 54px; }
  [data-theme="broadsheet"] .home-section .game-card.lead h3 { font-size: 2.1rem; }
  /* the lead's art panel: the 232px panel above is one class more specific than the rule two
     lines up, so the phone size is restated at that weight, :root on top (§5) */
  :root[data-theme="broadsheet"] .home-section .kind-art .game-card.lead .game-icon { order: 0; width: auto; height: 140px; --art-scale: 1.12; }
}

/* ---------- hover: everything clickable has to visibly react ---------- */
/* words underline like a link in the paper; boxes and keys get a heavier rule */
[data-theme="broadsheet"] :is(.btn, .segmented button, .tool, .main-nav a):hover:not(:disabled, [aria-pressed="true"], [aria-current="true"]),
[data-theme="broadsheet"] .theme-opt:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
[data-theme="broadsheet"] :is(.btn, .theme-btn, .icon-btn, .keypad button):hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .keypad button.accent:hover:not(:disabled) { background: var(--surface); color: var(--rule); }
[data-theme="broadsheet"] .btn-danger:hover:not(:disabled) { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* leaderboard: a results table - ink rules, mono ranks, the own row inked */
[data-theme="broadsheet"] :is(.lb-row, .lb-gap) { border-bottom-color: var(--border); }
[data-theme="broadsheet"] .lb-list, [data-theme="broadsheet"] .lb-list > :last-child { border-color: var(--rule); }
[data-theme="broadsheet"] .lb-score, [data-theme="broadsheet"] .lb-title { font-weight: 800; }
[data-theme="broadsheet"] .lb-title { font-size: 1.1rem; }
[data-theme="broadsheet"] .lb-row.you { background: var(--rule); color: var(--surface); box-shadow: none; }
[data-theme="broadsheet"] .lb-foot { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }

/* ---------- tabs, chips, progress, notice, table, loading (README §3) ----------
   Rules and mono labels, like the paper's section heads; the chosen one is set in ink. */
[data-theme="broadsheet"] .tabs { border-bottom: 1px solid var(--rule); }
[data-theme="broadsheet"] .tabs button { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom-width: 3px; }
[data-theme="broadsheet"] .tabs button:hover:not([aria-selected="true"]) { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; border-bottom-color: transparent; }
[data-theme="broadsheet"] .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--rule); }
[data-theme="broadsheet"] .chips .chip { height: 30px; border: 1px solid var(--rule); background: transparent; color: var(--text); font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
[data-theme="broadsheet"] .chips .chip:hover:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--rule); border-color: var(--rule); }
[data-theme="broadsheet"] .chips .chip[aria-pressed="true"] { background: var(--rule); border-color: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .progress { height: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .progress > i { background: var(--rule); }
[data-theme="broadsheet"] .notice { background: transparent; border: 1px solid var(--rule); border-left: 4px solid var(--rule); font-size: .95rem; }
[data-theme="broadsheet"] .notice .ico { color: var(--text); }
[data-theme="broadsheet"] .notice-warn { border-left-color: var(--danger); } [data-theme="broadsheet"] .notice-ok { border-left-color: var(--success); }
[data-theme="broadsheet"] .data-table th { font-family: var(--font-mono); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--rule); }
[data-theme="broadsheet"] .data-table .num, [data-theme="broadsheet"] .kv-list dd { font-weight: 800; }
[data-theme="broadsheet"] .data-table tr:last-child td { border-bottom: 1px solid var(--rule); }
[data-theme="broadsheet"] .empty-list { border: 1px solid var(--rule); background: transparent; }
[data-theme="broadsheet"] .empty-list strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
[data-theme="broadsheet"] .spinner { border-color: var(--border); border-top-color: var(--rule); }
[data-theme="broadsheet"] .stepper .icon-btn { border-color: var(--rule); }
[data-theme="broadsheet"] [data-tip]::after { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
[data-theme="broadsheet"] .prose kbd { border-color: var(--rule); }

/* ---------- game screen pieces (README §3): answer tiles, the bottom tool bar, the board's
   frame and status, tags, checklist, stat states, setup rows, the celebration ----------
   Ruled in ink like the rest of the paper: a heavier rule under the pointer, the chosen
   answer set in ink, right and wrong in the paper's green and red. */
[data-theme="broadsheet"] .choice-tile { border-color: var(--rule); background: transparent; font-weight: 750; }
[data-theme="broadsheet"] .choice-tile small { color: var(--text); font-weight: 400; font-style: italic; }
[data-theme="broadsheet"] .choice-tile:hover:not(:disabled, [aria-pressed="true"], .ok, .no, .reveal) { border-color: var(--rule); box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .choice-tile[aria-pressed="true"]:not(.ok, .no, .reveal) { border-color: var(--rule); background: var(--rule); color: var(--surface); box-shadow: none; }
[data-theme="broadsheet"] .choice-tile[aria-pressed="true"]:not(.ok, .no, .reveal) small { color: inherit; }
[data-theme="broadsheet"] .toolbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 3px double var(--rule); }
[data-theme="broadsheet"] .board-frame { box-shadow: 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] :is(.board-status:not(.cover), .board-status.cover > span) { font-size: .68rem; }
[data-theme="broadsheet"] .board-status.cover:hover > span { box-shadow: 0 0 0 3px var(--accent); }
[data-theme="broadsheet"] .tags .tag { border-color: var(--rule); background: transparent; font-size: .64rem; }
/* the stats are ruled columns: whose turn and who won are a bar under the figure */
[data-theme="broadsheet"] .stat[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
[data-theme="broadsheet"] .stat.won { box-shadow: inset 0 -3px 0 var(--success); }
[data-theme="broadsheet"] .stepper.readonly output { font-weight: 800; }
[data-theme="broadsheet"] .checklist li::before { box-shadow: inset 0 0 0 1.5px var(--rule); }
[data-theme="broadsheet"] .checklist li.done::before { box-shadow: none; }
[data-theme="broadsheet"] .segmented.wrap button { min-height: var(--ctl-h); }
[data-theme="broadsheet"] .segmented.dense button { font-size: .64rem; letter-spacing: .03em; }
@media (max-width: 560px) {
  :root[data-theme="broadsheet"] .tools.dense .tool { font-size: .58rem; }
}

/* a .btn over the table or a board: the paper button would let the felt through */
[data-theme="broadsheet"] :is(.table, .board-frame) .btn:not(.btn-primary, .btn-danger, :hover) { background: var(--surface); }
[data-theme="broadsheet"] :is(.table, .board-frame) .btn:not(.btn-primary, .btn-danger):hover:not(:disabled) { background: var(--surface-2); }

/* ---------- device list, feed, composer, drop target, code frame (README §3) ----------
   A column of correspondence: the other side's notes boxed in a rule, this side's set in
   ink; the dates and the times in small capitals of the mono face. */
[data-theme="broadsheet"] .feed-bubble { background: transparent; border: 1px solid var(--rule); }
[data-theme="broadsheet"] .feed-item.mine .feed-bubble { border-color: var(--rule); }
[data-theme="broadsheet"] :is(.feed-day, .feed-meta) { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
[data-theme="broadsheet"] .feed-day { color: var(--text); font-size: .66rem; }
[data-theme="broadsheet"] .feed-day::before, [data-theme="broadsheet"] .feed-day::after { border-top: 1px solid var(--rule); }
[data-theme="broadsheet"] .feed-meta { font-size: .62rem; }
[data-theme="broadsheet"] .device-row:hover { background: transparent; border-color: var(--rule); }
[data-theme="broadsheet"] .device-row[aria-current="true"] { background: transparent; border: 1px solid var(--rule); box-shadow: inset 4px 0 0 var(--rule); }
[data-theme="broadsheet"] .device-icon, [data-theme="broadsheet"] .feed-file-icon { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .device-count { border-radius: 0; background: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .code-frame { border-color: var(--rule); }
[data-theme="broadsheet"] .drop-veil { border: 2px dashed var(--rule); color: var(--text); }