/* Styles for index.html. Every color is a theme token defined once at the top:
   :root is the dark theme (the default) and [data-theme="light"] is the light theme.
   css/manuscript.css, loaded after this file, sets the page in its manuscript look. */

/* ---- Theme tokens ----
   Dark (the default) is gold and silver ink on purple vellum, after the purple codices;
   light is black-and-red letterpress on laid paper, after the early printed study Bibles.
   Every color below is referenced by role. */
:root {
  color-scheme: dark;
  /* type: EB Garamond for reading, IM Fell English for titles and small capitals (fonts/fonts.css) */
  --display: "IM Fell English", "EB Garamond", Georgia, serif;
  --caps: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --text: "EB Garamond", Georgia, "Times New Roman", serif;
  --sym: "DejaVu Sans", "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif;
  --gloss-w: 21rem; /* the margin-note column in the comparison card */

  --bg: #1b1020;
  --bg-top: #2a1531;
  --bg-bottom: #120a15;
  --panel: #1f1225;
  --surface: #22142a;
  --surface-2: #28182f;
  --surface-3: #301e38;
  --surface-hover: #35223f;
  --th-bg: #2d1b35;
  --th-ink: #e4d9ea;
  --tab-bg: transparent;
  --tab-ink: #b6a5c2;
  --ink: #ece5f0;
  --muted: #b7a8c3;
  --line: #4c3558;
  --modal: #22142a;
  --shadow: rgba(0, 0, 0, 0.45);
  --lift: rgba(0, 0, 0, 0.4);
  --focus: #f3ecf8;
  --overlay: rgba(10, 5, 12, 0.75);
  --kicker-ink: #ffffff;

  /* the printer's inks: rubric (headings and marks), gilt, hairline rules, and the heavy press rules */
  --rubric: #e6bd5c; --gilt: #e9c46e; --rule: #6a4c78; --press: #9c7a45;

  /* identity colors: fill (chips), ink (text), soft/mid (diagram fills), edge (diagram outlines) */
  --heaven: #6f93d6; --heaven-ink: #a3bff1; --heaven-soft: #1f2748; --heaven-mid: #2f4276; --heaven-edge: #88a8e8;
  --earth: #c9654a;  --earth-ink: #f2a88c;  --earth-soft: #3b1a27;  --earth-mid: #5f2a35;  --earth-edge: #e9776a;
  --genA: #3f8f6c;   --genA-ink: #9bdcbb;   --genA-soft: #172d2c;   --genA-mid: #234842;   --genA-edge: #66c29c;
  --genB: #b58a2c;   --genB-ink: #efcb74;   --genB-soft: #33231b;   --genB-mid: #56401f;   --genB-edge: #e2b959;
  --beat: #8a64c0;   --beat-ink: #d4bdf5;
  --cov: #2f8080;    --cov-ink: #8fd6d2;

  --caution-edge: #c9974a; --caution-bg: #2a1a2c; --caution-ink: #eadcc6;
  --s-anchor-bg: #19302a; --s-anchor-line: #3f6a55; --s-anchor-ink: #a9dcc0;
  --s-strong-bg: #1c2645; --s-strong-line: #3d5288; --s-strong-ink: #a9c3f0;
  --s-moderate-bg: #33241f; --s-moderate-line: #75592a; --s-moderate-ink: #eccb7e;
  --s-exploratory-bg: #2b1d33; --s-exploratory-line: #564066; --s-exploratory-ink: #cdbcd8;
  --ao-glow-a: #33193a; --ao-glow-b: #1f1d45; --ao-cap-bg: #28183a; --ao-cap-line: #5a4380; --ao-tag: #d4bdf5; --ao-em: #e0c2fa;

  /* verdicts (kept / broken / both) — always shown with an icon and a word, never color alone */
  --ok: #7fd09a; --warn: #eec262; --bad: #f28472;
  --ok-soft: #1b3027; --warn-soft: #3b2c1d; --bad-soft: #3e1c27;
  --glyph-dark: #1b1020;

  /* tabernacle furnishings */
  --gold: #e6bd5c; --bronze: #cd8a52; --veil: #c08ae0;
  --room-mhp: #2b1834; --room-hp: #23142b; --frame: #7d6690; --ground: #5d4a6a; --proj: rgba(230, 189, 92, 0.08);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4efe4;
  --bg-top: #f7f3ea;
  --bg-bottom: #ede6d7;
  --panel: #f6f1e7;
  --surface: #f7f3ea;
  --surface-2: #f0eadd;
  --surface-3: #e8e0d0;
  --surface-hover: #fcf9f2;
  --th-bg: #e8e0d0;
  --th-ink: #3d352c;
  --tab-bg: transparent;
  --tab-ink: #6a6056;
  --ink: #1e1915;
  --muted: #675d52;
  --line: #cdc1ad;
  --modal: #f7f3ea;
  --shadow: rgba(40, 30, 20, 0.14);
  --lift: rgba(40, 30, 20, 0.12);
  --focus: #1e1915;
  --overlay: rgba(20, 15, 10, 0.5);
  --kicker-ink: #ffffff;

  --rubric: #b3261e; --gilt: #8a6a1f; --rule: #b9ab94; --press: #1e1915;

  --heaven: #2a4d7a; --heaven-ink: #2a4d7a; --heaven-soft: #dde3e9; --heaven-mid: #bccbdd; --heaven-edge: #2d5282;
  --earth: #9a3a24;  --earth-ink: #963822;  --earth-soft: #f1dcd2;  --earth-mid: #e3b9a6;  --earth-edge: #a2342c;
  --genA: #3b6a47;   --genA-ink: #35603f;   --genA-soft: #dde6d8;   --genA-mid: #bfd3b8;   --genA-edge: #2e6b5a;
  --genB: #8a6a1f;   --genB-ink: #7c5e17;   --genB-soft: #efe3c3;   --genB-mid: #e1ca8a;   --genB-edge: #967218;
  --beat: #5a3d7a;   --beat-ink: #5a3d7a;
  --cov: #2f6f6f;    --cov-ink: #2f6f6f;

  --caution-edge: #b78334; --caution-bg: #f3e9d4; --caution-ink: #5c4630;
  --s-anchor-bg: #e2ecdc; --s-anchor-line: #aacb9f; --s-anchor-ink: #2f5128;
  --s-strong-bg: #e2eaee; --s-strong-line: #a7c6d6; --s-strong-ink: #234c5e;
  --s-moderate-bg: #f3e7cc; --s-moderate-line: #e0c489; --s-moderate-ink: #6f5320;
  --s-exploratory-bg: #ebe4d8; --s-exploratory-line: #cdbfa9; --s-exploratory-ink: #5b4e3d;
  --ao-glow-a: #f6eedd; --ao-glow-b: #efe8f3; --ao-cap-bg: #f1eaf2; --ao-cap-line: #cdb9e0; --ao-tag: #5a3d7a; --ao-em: #6a3fa0;

  --ok: #2c7a3f; --warn: #8a5e0a; --bad: #b3261e;
  --ok-soft: #e0ebdb; --warn-soft: #f3e6c4; --bad-soft: #f4dcd6;
  --glyph-dark: #1e1915;

  --gold: #a67c1c; --bronze: #8a5429; --veil: #5f3f7d;
  --room-mhp: #ece4d4; --room-hp: #f5f0e6; --frame: #8d8171; --ground: #b2a58f; --proj: rgba(179, 38, 30, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--text);
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(circle at top, var(--bg-top) 0, var(--bg) 45%, var(--bg-bottom) 100%);
  line-height: 1.5;
}

.page {
  width: min(1200px, calc(100% - 28px));
  margin: 32px auto 56px;
}

header {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 10px 30px var(--shadow);
}

.head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

h1 {
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  line-height: 1.15;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 940px;
}

.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: bold;
  cursor: pointer;
}

.theme-toggle .ti { font-size: 1.05rem; line-height: 1; }

.theme-toggle:hover,
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  background: var(--surface-hover);
}

.legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.legend span {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface);
  font-size: 0.92rem;
  color: var(--muted);
}

.legend b { color: var(--ink); }

.table-wrap {
  margin-top: 22px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px var(--shadow);
  background: var(--panel);
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

caption {
  text-align: left;
  padding: 16px 18px 0;
  color: var(--muted);
  font-size: 0.95rem;
}

th, td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 10px;
  vertical-align: middle;
}

th:last-child, td:last-child { border-right: 0; }
tbody tr:last-child td { border-bottom: 0; }

th {
  background: var(--th-bg);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-ink);
  text-align: center;
}

td.rownum {
  width: 54px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  background: var(--surface-3);
}

.cell-btn {
  width: 100%;
  min-height: 106px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.cell-btn:hover,
.cell-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--lift);
  outline: none;
  border-color: var(--focus);
  background: var(--surface-hover);
}

/* Esau's two headings share one table cell, stacked. */
.cell-stack { display: flex; flex-direction: column; gap: 8px; }
.cell-stack .cell-btn { min-height: 49px; padding: 9px 12px; gap: 4px; }

.cell-btn .kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.75rem;
  color: var(--kicker-ink);
  font-weight: bold;
  letter-spacing: 0.025em;
}

.heaven .kicker { background: var(--heaven); }
.earth .kicker { background: var(--earth); }
.genA .kicker { background: var(--genA); }
.genB .kicker { background: var(--genB); }

.cell-btn strong {
  font-size: 1rem;
  line-height: 1.25;
}

.cell-btn small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.note {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  color: var(--muted);
}

.note b { color: var(--ink); }

/* Each table row is one unit: the four boxes, then the two pair buttons,
   then the full-width commandment-to-generation button beneath them. No
   rule sits between the boxes and the buttons, so the whole stack reads as
   one unit; only the final (cg-row) button carries the divider that closes
   the unit, and an empty gap-row sets one unit off from the next. The ROW
   column is shaded across the whole unit so there is no two-tone patch. The
   command-to-generation divider runs straight down the center, past the
   pair buttons, to meet the top of the cg button — a visual cue of what is
   being compared. */
#panel-commandments tbody tr:not(.connector-row):not(.gap-row) td { border-bottom: 0; }

.connector-row td {
  background: transparent;
  padding: 2px 10px 12px;
}

.connector-row .spacer {
  background: var(--surface-3);
  padding: 2px 0 12px;
}

/* Only the cg-row closes the unit; the pair-button row carries no bottom
   rule, so the center divider continues down to the cg button's top and the
   cg button is not boxed off on its own. */
#panel-commandments .connector-row:not(.cg-row) td { border-bottom: 0; }

#panel-commandments .gap-row td {
  border: 0;
  background: transparent;
  padding: 15px 0;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 8px 14px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--genB-ink);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.link-btn .arrow { font-size: 1.1rem; color: var(--earth-ink); }

.link-btn:hover,
.link-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--lift);
  border-color: var(--focus);
  border-style: solid;
  background: var(--surface-hover);
  outline: none;
}

.overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 22px;
  background: var(--overlay);
  z-index: 1000;
}

.overlay.open { display: grid; }

.modal {
  width: min(760px, 100%);
  max-height: min(82vh, 780px);
  overflow-y: auto;
  background: var(--modal);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  padding: 0;
  animation: rise 140ms ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px 14px;
  background: var(--modal);
  border-bottom: 1px solid var(--line);
}

.modal h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.2;
}

.close {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--ink);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.close:hover,
.close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  background: var(--surface-hover);
}

.modal-body {
  padding: 18px 22px 24px;
}

.modal-body p { margin: 0 0 14px; }
.modal-body ul { margin: 0 0 16px 1.2rem; padding: 0; }
.modal-body li { margin-bottom: 8px; }

.pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.pill {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--surface-3);
  color: var(--th-ink);
  font-size: 0.86rem;
  font-weight: bold;
}

.strength {
  background: var(--s-anchor-bg);
  border-color: var(--s-anchor-line);
  color: var(--s-anchor-ink);
}

.caution {
  margin-top: 16px;
  border-left: 4px solid var(--caution-edge);
  background: var(--caution-bg);
  padding: 12px 14px;
  color: var(--caution-ink);
  border-radius: 10px;
}

details.deeper {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
}

details.deeper > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  font-weight: bold;
  color: var(--heaven-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

details.deeper > summary::-webkit-details-marker { display: none; }

details.deeper > summary::before {
  content: "▸";
  color: var(--genB-ink);
  transition: transform 120ms ease;
}

details.deeper[open] > summary::before { transform: rotate(90deg); }

details.deeper > summary:hover,
details.deeper > summary:focus-visible {
  background: var(--surface-3);
  outline: none;
}

details.deeper .deeper-body {
  padding: 2px 16px 12px;
  border-top: 1px solid var(--line);
}

details.deeper .deeper-body ul { margin: 12px 0 4px 1.1rem; padding: 0; }
details.deeper .deeper-body li { margin-bottom: 7px; }
details.deeper .deeper-body p { margin: 10px 0 0; }

@media (max-width: 780px) {
  .page { width: min(100% - 18px, 1200px); margin-top: 14px; }
  header { padding: 18px; }
  .legend { grid-template-columns: 1fr; }
  th, td { padding: 7px; }
  .cell-btn { min-height: 92px; padding: 11px; }
  .modal-head, .modal-body { padding-left: 16px; padding-right: 16px; }
}
/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
  flex-wrap: wrap;
}

.tab {
  flex: 1 1 220px;
  border: 1px solid var(--line);
  background: var(--tab-bg);
  color: var(--tab-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  padding: 13px 16px;
  border-radius: 14px 14px 0 0;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.tab[hidden] { display: none; }

.tab:hover,
.tab:focus-visible {
  outline: none;
  background: var(--surface-hover);
  color: var(--ink);
  box-shadow: 0 -2px 10px var(--lift);
}

.tab.active {
  background: var(--panel);
  color: var(--ink);
  border-bottom-color: var(--panel);
  box-shadow: 0 -6px 18px var(--lift);
}

.tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}


/* ---- Tab panels ---- */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Beatitude / covenant cell accent colors ---- */
.beat .kicker { background: var(--beat); }
.cov .kicker { background: var(--cov); }

/* narrower min-width for the 3-column beatitude grid */
.beat-table { min-width: 680px; }

/* ---- Strength chip inside cells ---- */
.schip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* ---- Strength color families (shared by chips and modal pills) ---- */
.s-anchor { background: var(--s-anchor-bg); border-color: var(--s-anchor-line); color: var(--s-anchor-ink); }
.s-strong { background: var(--s-strong-bg); border-color: var(--s-strong-line); color: var(--s-strong-ink); }
.s-moderate { background: var(--s-moderate-bg); border-color: var(--s-moderate-line); color: var(--s-moderate-ink); }
.s-exploratory { background: var(--s-exploratory-bg); border-color: var(--s-exploratory-line); color: var(--s-exploratory-ink); }

/* ---- Alpha & Omega section ---- */
.alpha-omega {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, var(--ao-glow-a) 0, transparent 55%),
    radial-gradient(circle at bottom right, var(--ao-glow-b) 0, transparent 55%),
    var(--panel);
  box-shadow: 0 10px 30px var(--shadow);
  padding: 22px;
}

.ao-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ao-head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.2;
}

.ao-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.ao-symbol {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--beat-ink);
  font-weight: bold;
  flex: 0 0 auto;
}

.ao-bracket {
  margin: 20px 0 6px;
  display: grid;
  gap: 12px;
}

.ao-cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--ao-cap-line);
  background: var(--ao-cap-bg);
  border-radius: 14px;
  padding: 12px 16px;
}

.ao-cap .ao-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ao-tag);
  font-weight: bold;
}

.ao-cap .ao-promise {
  font-size: 1.12rem;
  font-weight: bold;
  color: var(--ink);
}

.ao-promise em,
.ao-middle li em {
  font-style: normal;
  color: var(--ao-em);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ao-cap .ao-tense {
  font-size: 0.8rem;
  color: var(--muted);
}

.ao-middle {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  background: var(--surface);
}

.ao-middle-label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.ao-middle ul {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 26px;
}

.ao-middle li {
  margin-bottom: 6px;
  break-inside: avoid;
}

.ao-middle li em { color: var(--earth-ink); text-decoration: none; }

.ao-body { margin-top: 16px; }
.ao-body p { margin: 0 0 12px; }

.ao-note {
  display: inline;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 780px) {
  .tab { flex-basis: 100%; border-radius: 12px; }
  .tab.active { border-bottom-color: var(--line); }
  .beat-table { min-width: 560px; }
  .ao-middle ul { columns: 1; }
  .alpha-omega { padding: 16px; }
  .ao-symbol { font-size: 2.2rem; }
}

/* ---- Mobile card layout ----
   On narrow screens the fixed-width tables would force horizontal
   scrolling, so each row is reflowed into a self-contained card: the
   table elements drop their table semantics and become block/grid
   boxes. Commandments rows become a 2x2 paired grid (two commandments
   on top, two generations below) with the three connector buttons
   stacked full-width beneath; Beatitudes rows put their two boxes
   side-by-side. Desktop layout is untouched. */
@media (max-width: 780px) {
  .table-wrap { overflow-x: visible; }

  table, .beat-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  thead { display: none; }
  tbody { display: block; }
  /* a caption left inside a block-level table would shrink to its longest word */
  caption { display: block; padding: 0 2px 12px; }

  /* Reset table-cell borders so they don't double up with card borders. */
  th, td { border: 0; }

  /* Slim full-width "Row N" header bar atop each card. */
  td.rownum {
    grid-column: 1 / -1;
    width: auto;
    text-align: center;
    padding: 5px 0;
    border-radius: 10px 10px 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--th-ink);
  }

  /* --- Commandments: each data row -> one card as a 2x2 grid --- */
  #panel-commandments tbody tr:not(.connector-row):not(.gap-row) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 10px 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }

  #panel-commandments tbody tr:not(.connector-row):not(.gap-row) td:not(.rownum) {
    display: block;
    padding: 0;
  }

  /* Connector buttons stack full-width below the boxes, inside the card. */
  #panel-commandments tbody tr.connector-row {
    display: block;
    padding: 0 10px;
    background: var(--surface);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  #panel-commandments tbody tr.connector-row td {
    display: block;
    width: 100%;
    padding: 8px 0 0;
    background: transparent;
  }

  #panel-commandments tbody tr.connector-row td.spacer { display: none; }

  /* The cg-row closes the card. */
  #panel-commandments tbody tr.cg-row {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
  }

  /* Gap-row becomes the spacer between cards. */
  #panel-commandments tbody tr.gap-row {
    display: block;
    padding: 9px 0;
  }
  #panel-commandments tbody tr.gap-row td { display: none; }

  /* --- Beatitudes: each row -> one card, two boxes side-by-side --- */
  #panel-beatitudes tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
  }

  #panel-beatitudes tbody tr td:not(.rownum) {
    display: block;
    padding: 0;
  }
}

/* =====================================================================
   Tabernacle Layers tab
   ===================================================================== */
.tb-card {
  margin-top: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px var(--shadow);
  padding: 22px 24px;
}

.tb-card > h2,
.tb-h2 {
  margin: 0 0 6px;
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  line-height: 1.2;
}

.tb-lede { margin: 0 0 14px; color: var(--muted); font-size: 1.02rem; max-width: 980px; }
.tb-lede b { color: var(--ink); }


.tb-kicker-line {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--genB-ink);
  margin-bottom: 4px;
}

.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-actions .link-btn { width: auto; }

/* ---- diagram card ---- */
.tb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: var(--surface-3);
}

.seg button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 7px 14px;
  cursor: pointer;
}

.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px var(--lift); }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.tb-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.84rem;
  color: var(--muted);
}

.tb-key span { display: inline-flex; align-items: center; gap: 6px; }

.sw {
  display: inline-block;
  width: 16px;
  height: 11px;
  border-radius: 3px;
  border: 2px solid transparent;
}

.sw.heaven { background: var(--heaven-soft); border-color: var(--heaven-edge); }
.sw.earth { background: var(--earth-soft); border-color: var(--earth-edge); }
.sw.genA { background: var(--genA-soft); border-color: var(--genA-edge); }
.sw.genB { background: var(--genB-soft); border-color: var(--genB-edge); }
.sw.dot { width: 10px; height: 10px; border-radius: 999px; }
.sw.gold { background: var(--gold); }
.sw.bronze { background: var(--bronze); }
.sw.veil { width: 4px; height: 14px; border-radius: 2px; background: var(--veil); }

.tb-figure { position: relative; }

.tb-view[hidden] { display: none; }

.tb-svg { display: block; width: 100%; height: auto; }

.tb-svg text { font-family: var(--text); fill: var(--ink); }
.tb-svg .t-muted { fill: var(--muted); }
.tb-svg .t-small { font-size: 11px; }
.tb-svg .t-tiny { font-size: 10px; }
.tb-svg .t-num { font-size: 13px; font-weight: bold; pointer-events: none; }
.tb-svg .t-name { font-size: 11.5px; }
.tb-svg .t-room { font-size: 12.5px; font-weight: bold; letter-spacing: 0.08em; }
.tb-svg .t-cap { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--muted); }

.tb-svg .frame { fill: none; stroke: var(--frame); stroke-width: 1.5; }
.tb-svg .room-mhp { fill: var(--room-mhp); }
.tb-svg .room-hp { fill: var(--room-hp); }
.tb-svg .room { transition: fill 160ms ease; }
.tb-svg .room.on { fill: var(--surface-hover); }
.tb-svg .groundline { stroke: var(--ground); stroke-width: 2; }
.tb-svg .veil { fill: var(--veil); }
.tb-svg .gold { fill: var(--gold); }
.tb-svg .bronze { fill: var(--bronze); }
.tb-svg .furn { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.tb-svg .furn-fill { fill: var(--gold); opacity: 0.85; }
.tb-svg .dim { stroke: var(--muted); stroke-width: 1; fill: none; }
.tb-svg .proj { fill: var(--proj); pointer-events: none; }

.tb-svg .seg-path { fill: none; stroke-linejoin: miter; cursor: pointer; pointer-events: stroke; transition: opacity 140ms ease, stroke 140ms ease; }
.tb-svg .seg-edge { fill: none; stroke-linejoin: miter; pointer-events: none; transition: opacity 140ms ease; }
.tb-svg .seg-path.heaven { stroke: var(--heaven-soft); }
.tb-svg .seg-path.earth { stroke: var(--earth-soft); }
.tb-svg .seg-path.genA { stroke: var(--genA-soft); }
.tb-svg .seg-path.genB { stroke: var(--genB-soft); }
.tb-svg .seg-edge.heaven { stroke: var(--heaven-edge); }
.tb-svg .seg-edge.earth { stroke: var(--earth-edge); }
.tb-svg .seg-edge.genA { stroke: var(--genA-edge); }
.tb-svg .seg-edge.genB { stroke: var(--genB-edge); }
.tb-svg .seg-path.heaven.hot { stroke: var(--heaven-mid); }
.tb-svg .seg-path.earth.hot { stroke: var(--earth-mid); }
.tb-svg .seg-path.genA.hot { stroke: var(--genA-mid); }
.tb-svg .seg-path.genB.hot { stroke: var(--genB-mid); }
.tb-svg .seg-path:focus { outline: none; }
.tb-svg .seg-path:focus-visible { stroke: var(--focus) !important; }
.tb-svg.has-sel .t-num.faded { opacity: 0.65; }
.tb-svg .sel-ring { fill: none; stroke: var(--focus); stroke-width: 2.5; pointer-events: none; }
.tb-svg .ov-band { fill: none; stroke: var(--focus); stroke-opacity: 0.38; pointer-events: none; }
.tb-svg .fold-line { stroke: var(--genB-edge); stroke-width: 1.5; pointer-events: none; }

.tb-svg.has-sel .seg-g { opacity: 0.55; }
.tb-svg.has-sel .seg-g.rel,
.tb-svg.has-sel .seg-g.sel { opacity: 1; }
.tb-svg.has-sel .t-name.faded { opacity: 0.6; }

/* ---- flat map ---- */
.fm {
  display: grid;
  grid-template-columns: 8.6rem repeat(44, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  row-gap: 8px;
  align-items: stretch;
}

.fm-label {
  grid-column: 1;
  grid-row: var(--r);
  align-self: center;
  padding-right: 10px;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--muted);
}

.fm-label b { display: block; color: var(--ink); font-size: 0.86rem; }

.fm-cell {
  grid-column: var(--a) / span var(--n);
  grid-row: var(--r);
  margin: 0 1px;
  min-width: 0;
  border-radius: 9px;
  border: 1px solid var(--line);
  padding: 8px 7px;
  font-family: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  line-height: 1.2;
  transition: opacity 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

button.fm-cell { cursor: pointer; }
button.fm-cell:hover { transform: translateY(-1px); box-shadow: 0 6px 14px var(--lift); }
button.fm-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.fm-k { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.25rem; padding: 0 5px; border-radius: 999px; font-size: 0.72rem; font-weight: bold; color: var(--kicker-ink); width: fit-content; }
.fm-cell.genA .fm-k { background: var(--genA); }
.fm-cell.genB .fm-k { background: var(--genB); }
.fm-cell.heaven .fm-k { background: var(--heaven); }
.fm-cell.earth .fm-k { background: var(--earth); }
.fm-n { font-size: 0.86rem; font-weight: bold; overflow-wrap: anywhere; }

.fm-cell.genA { background: var(--genA-soft); border-color: var(--genA-edge); border-top-width: 4px; }
.fm-cell.genB { background: var(--genB-soft); border-color: var(--genB-edge); border-top-width: 4px; }
.fm-cell.heaven { background: var(--heaven-soft); border-color: var(--heaven-edge); border-top-width: 4px; }
.fm-cell.earth { background: var(--earth-soft); border-color: var(--earth-edge); border-top-width: 4px; }
.fm-cell.genA.hot { background: var(--genA-mid); }
.fm-cell.genB.hot { background: var(--genB-mid); }
.fm-cell.heaven.hot { background: var(--heaven-mid); }
.fm-cell.earth.hot { background: var(--earth-mid); }
.fm-cell.sel { box-shadow: 0 0 0 2.5px var(--focus); }

.fm-empty { background: transparent; border-style: dashed; color: var(--muted); font-size: 0.72rem; align-items: center; text-align: center; }

.fm-room { background: var(--surface-2); color: var(--muted); font-size: 0.78rem; align-items: center; text-align: center; }
.fm-room b { color: var(--ink); font-size: 0.84rem; }
.fm-room.mhp, .fm-room.wall { background: var(--room-mhp); }
.fm-room.on { box-shadow: inset 0 0 0 2px var(--focus); color: var(--ink); }

.fm.has-sel button.fm-cell { opacity: 0.62; }
.fm.has-sel button.fm-cell.rel,
.fm.has-sel button.fm-cell.sel { opacity: 1; }

.fm-mark {
  z-index: 2;
  pointer-events: none;
  justify-self: start;
}

.fm-veil { grid-column: 24 / span 1; grid-row: 2 / span 2; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--veil); }
.fm-clasp { width: 12px; height: 12px; margin-left: -6px; align-self: center; border-radius: 999px; border: 2px solid var(--panel); }
.fm-clasp.gold { grid-column: 24; grid-row: 2; background: var(--gold); }
.fm-clasp.bronze { grid-column: 22; grid-row: 1; background: var(--bronze); }

.tb-hint { margin: 10px 0 0; font-size: 0.86rem; color: var(--muted); }

/* tooltip */
.tb-tip {
  position: absolute;
  z-index: 5;
  max-width: 280px;
  pointer-events: none;
  background: var(--modal);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px var(--shadow);
  padding: 8px 11px;
  font-size: 0.84rem;
  line-height: 1.35;
}

.tb-tip b { display: block; font-size: 0.9rem; }
.tb-tip span { color: var(--muted); }

/* ---- detail (comparison) card ---- */
.tb-detail { scroll-margin-top: 16px; }

.tb-d-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.tb-d-top .kicker,
.tb-cover .kicker {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  color: var(--kicker-ink);
  font-weight: bold;
  letter-spacing: 0.025em;
}

.kicker.heaven { background: var(--heaven); }
.kicker.earth { background: var(--earth); }
.kicker.genA { background: var(--genA); }
.kicker.genB { background: var(--genB); }
.kicker.over { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); }

.tb-d-pos { font-size: 0.86rem; color: var(--muted); }

.tb-d-title { margin: 0 0 4px; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.15; }
.tb-d-title span { color: var(--muted); font-weight: normal; font-size: 0.72em; }

.tb-d-ref { margin: 0 0 10px; color: var(--muted); }
.tb-d-ref b { color: var(--ink); }
.tb-d-summary { margin: 0 0 8px; max-width: 980px; }
.tb-d-place { margin: 0 0 14px; font-size: 0.9rem; color: var(--muted); max-width: 980px; }

.tb-lesson {
  border: 1px solid var(--line);
  border-left: 4px solid var(--genB-edge);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.tb-lesson.cmd-mode { border-left-color: var(--heaven-edge); }
.tb-lesson.earthy { border-left-color: var(--earth-edge); }
.tb-lesson p { margin: 0; font-size: 1.02rem; }

.tb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.tb-cover {
  border: 1px solid var(--line);
  border-top: 5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 16px 16px;
  scroll-margin-top: 16px;
}

.tb-cover.heaven { border-top-color: var(--heaven-edge); }
.tb-cover.earth { border-top-color: var(--earth-edge); }
.tb-cover.genA { border-top-color: var(--genA-edge); }
.tb-cover.genB { border-top-color: var(--genB-edge); }
.tb-cover.over { border-top-color: var(--muted); border-style: dashed; border-top-style: solid; }
.tb-cover.flash { animation: tbflash 1.1s ease-out; }

@keyframes tbflash {
  0% { box-shadow: 0 0 0 3px var(--focus); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.tb-cover-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.tb-cover-head h3 { flex: 1 1 100%; margin: 2px 0 0; font-size: 1.12rem; line-height: 1.25; }
.tb-cover-where { flex: 1 1 100%; margin: 0; font-size: 0.84rem; color: var(--muted); }
.tb-chipbtn { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; border-radius: 999px; }
.tb-chipbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px 3px 4px;
  font-size: 0.86rem;
  font-weight: bold;
  color: var(--ink);
  white-space: nowrap;
}

.vi {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: bold;
  line-height: 1;
  flex: 0 0 auto;
}

.v-kept { background: var(--ok-soft); border-color: var(--ok); }
.v-broken { background: var(--bad-soft); border-color: var(--bad); }
.v-both { background: var(--warn-soft); border-color: var(--warn); }
.v-over { background: var(--surface-3); }
.v-kept .vi, .vi.k-kept { background: var(--ok); color: var(--glyph-dark); }
.v-broken .vi, .vi.k-broken { background: var(--bad); color: #fff; }
.v-both .vi, .vi.k-both { background: linear-gradient(90deg, var(--ok) 0 50%, var(--bad) 50% 100%); color: transparent; box-shadow: inset 0 0 0 1.5px var(--warn); position: relative; }
.v-both .vi::after, .vi.k-both::after { content: ""; position: absolute; left: calc(50% - 0.75px); top: 3px; bottom: 3px; width: 1.5px; background: var(--glyph-dark); border-radius: 1px; }
.v-over .vi, .vi.k-over { background: var(--muted); color: var(--panel); }
.vi.k-note { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); font-style: italic; font-size: 0.8rem; }

.arc { font-size: 0.84rem; color: var(--muted); font-style: italic; }

.tb-cover-sum { margin: 0 0 10px; font-weight: bold; font-size: 0.98rem; }

.moments { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.moments li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; font-size: 0.95rem; }
.moments .vi { margin-top: 1px; }

.conseq { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.conseq-k { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: bold; color: var(--muted); }
.conseq p { margin: 0; font-size: 0.94rem; padding-left: 10px; border-left: 3px solid var(--line); }
.conseq p.c-kept { border-left-color: var(--ok); }
.conseq p.c-broken { border-left-color: var(--bad); }
.conseq p b { color: var(--ink); }

.tb-over-meaning { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.95rem; }

.tb-more { margin-top: 12px; }
.tb-more.link-btn { width: auto; }


.tb-d-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.tb-d-nav button { width: auto; max-width: 48%; }
.tb-d-nav .spacer { flex: 1; }

.echo-list { margin: 10px 0 4px 1.1rem; padding: 0; }
.echo-list li { margin-bottom: 6px; }
.echo-num { font-weight: bold; color: var(--ink); }

.tb-vlegend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 0.86rem; color: var(--muted); margin-top: 12px; }
.tb-vlegend > span { display: inline-flex; align-items: center; gap: 7px; }

.tb-refnote { font-size: 0.84rem; color: var(--muted); margin: 0 0 10px; }

/* ---- intro dropdowns ---- */
.tb-acc { display: grid; gap: 8px; margin-top: 14px; }

details.tb-drop {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

details.tb-drop.bridge { border-left: 4px solid var(--gold); }

details.tb-drop > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 12px 16px 12px 40px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

details.tb-drop > summary::-webkit-details-marker { display: none; }

details.tb-drop > summary::before {
  content: "▸";
  position: absolute;
  left: 17px;
  top: 12px;
  color: var(--genB-ink);
  transition: transform 120ms ease;
}

details.tb-drop[open] > summary::before { transform: rotate(90deg); }
details.tb-drop > summary:hover { background: var(--surface-3); }
details.tb-drop > summary:focus-visible { outline: none; background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--focus); }

.tb-drop-t { font-weight: bold; color: var(--ink); }
.tb-drop-s { font-size: 0.88rem; color: var(--muted); }

.tb-drop-b { padding: 2px 18px 14px 40px; border-top: 1px solid var(--line); }
.tb-drop-b ul { margin: 12px 0 2px; padding-left: 1.05rem; display: grid; gap: 8px; }
.tb-drop-b .tb-vlegend { margin-top: 14px; }
.tb-drop-b .tb-actions { margin-top: 12px; }

/* ---- ledger (kept / broken at a glance) ---- */
.lg-wrap { overflow-x: auto; margin-top: 8px; }

table.lg {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
}

table.lg th, table.lg td { border: 0; padding: 0; background: transparent; text-transform: none; letter-spacing: 0; }
table.lg thead th { font-size: 0.8rem; color: var(--muted); font-weight: bold; padding: 4px 0; text-align: center; }
table.lg thead th.lg-genh { text-align: left; }
table.lg col.lg-col-gen { width: 12.5rem; }
table.lg col.lg-col-side { width: 3.6rem; }
.lg-edge { font-size: 0.72rem; font-weight: normal; font-style: italic; }
table.lg .lg-group th { font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 4px 6px; }
table.lg .lg-group .heaven-g { color: var(--heaven-ink); border-bottom: 2px solid var(--heaven-edge); }
table.lg .lg-group .earth-g { color: var(--earth-ink); border-bottom: 2px solid var(--earth-edge); }
table.lg thead th.c-h { color: var(--heaven-ink); }
table.lg thead th.c-e { color: var(--earth-ink); }
table.lg .veil-l { box-shadow: -3px 0 0 0 var(--veil); }

.lg-row-btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  padding: 5px 6px;
  cursor: pointer;
}

.lg-row-btn .n { font-weight: bold; min-width: 1.4em; color: var(--muted); }
.lg-row-btn.genA .n { color: var(--genA-ink); }
.lg-row-btn.genB .n { color: var(--genB-ink); }
.lg-row-btn:hover, .lg-row-btn:focus-visible { background: var(--surface-3); outline: none; border-color: var(--focus); }
tr.lg-sel .lg-row-btn { background: var(--surface-3); border-color: var(--line); }

.lg-cell {
  width: 100%;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}

.lg-cell:hover, .lg-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lg-cell.v-kept { background: var(--ok-soft); border-color: var(--ok); }
.lg-cell.v-broken { background: var(--bad-soft); border-color: var(--bad); }
.lg-cell.v-both { background: var(--warn-soft); border-color: var(--warn); }
.lg-cell.v-over { background: var(--surface-3); border-style: dashed; }
.lg-empty { height: 34px; border-radius: 8px; background: var(--surface-2); opacity: 0.45; }
tr.lg-sel .lg-cell { box-shadow: 0 0 0 2px var(--focus); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (max-width: 780px) {
  .tb-card { padding: 16px; }
  details.tb-drop > summary { padding-left: 34px; }
  details.tb-drop > summary::before { left: 13px; }
  .tb-drop-b { padding: 2px 14px 12px 16px; }
  .head-row { flex-direction: column-reverse; gap: 10px; }
  .theme-toggle { align-self: flex-end; }
  .tb-pair { grid-template-columns: 1fr; }
  .tb-d-nav button { max-width: 49%; font-size: 0.82rem; }

  /* The draped drawing keeps a readable size and scrolls sideways inside its card. */
  #tbDraped { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #tbDraped .tb-svg { min-width: 760px; }

  /* The flat map turns vertical: back wall at the top, door at the bottom. */
  .fm {
    grid-template-columns: 1.2fr 1.1fr 0.8fr;
    grid-template-rows: auto repeat(44, minmax(13px, auto));
    row-gap: 0;
    column-gap: 6px;
  }
  .fm-label { grid-row: 1; grid-column: var(--r); padding: 0 0 8px; align-self: end; }
  .fm-cell { grid-row: var(--a) / span var(--n); grid-column: var(--r); margin: 1px 0; padding: 6px 8px; }
  .fm-veil { grid-row: 24 / span 1; grid-column: 2 / span 2; width: auto; height: 4px; margin: -2px 0 0; align-self: start; justify-self: stretch; }
  .fm-clasp { margin: -6px 0 0; align-self: start; justify-self: center; }
  .fm-clasp.gold { grid-row: 24; grid-column: 2; }
  .fm-clasp.bronze { grid-row: 22; grid-column: 1; }

  table.lg { display: table; border-spacing: 2px; }
  table.lg thead { display: table-header-group; }
  table.lg tbody { display: table-row-group; }
  table.lg col.lg-col-gen { width: 6.2rem; }
  table.lg col.lg-col-side { width: 1.8rem; }
  .lg-edge { font-size: 0.56rem; }
  table.lg .lg-group th { font-size: 0.64rem; }
  .lg-row-btn { font-size: 0.78rem; padding: 4px 3px; gap: 4px; }
  .lg-cell, .lg-empty { height: 28px; }
  .lg-cell .vi { width: 16px; height: 16px; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}