/* 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;

  --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;   --beat-soft: #2a1b3d;   --beat-edge: #b592ea;
  --cov: #2f8080;    --cov-ink: #8fd6d2;    --cov-soft: #132d30;    --cov-edge: #5cc2bb;

  --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;

  /* 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);

  /* the blueprint (css/blueprint.css): white lines on blueprint blue by night; blue lines on paper by day.
     paper, grid, ink (lines and lettering), ink-2 (hidden and secondary lines), dim (dimensions),
     hi (the chosen piece); tint is how strongly a material's color fills its shape */
  --bp-paper: #0f3764; --bp-grid: rgba(160, 200, 255, 0.07); --bp-grid-major: rgba(160, 200, 255, 0.16);
  --bp-ink: #e9f2ff; --bp-ink-2: #a7c4e8; --bp-dim: #9cc2ef; --bp-hi: #ffc94d; --bp-hi-soft: rgba(255, 201, 77, 0.2);
  --bp-tint: 0.42; --bp-tint-strong: 0.78;
  /* the materials, as the blueprint colors them */
  --bpm-gold: #f2c14e; --bpm-silver: #dce4ee; --bpm-bronze: #e08a4f; --bpm-wood: #c9965f; --bpm-linen: #f4efe0;
  --bpm-blue: #74b0ff; --bpm-purple: #c08ff0; --bpm-scarlet: #f25a4a; --bpm-hair: #121419; --bpm-ram: #d0493a;
  --bpm-tachash: #7f9ba8; --bpm-ground: #d8c49a; --bpm-bread: #e8bd7c; --bpm-water: #8fd3ff;
}

: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;   --beat-soft: #ebe3f0;   --beat-edge: #6b4a93;
  --cov: #2f6f6f;    --cov-ink: #2f6f6f;    --cov-soft: #dcebe8;    --cov-edge: #2d7872;

  --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;

  --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);

  --bp-paper: #f3efe4; --bp-grid: rgba(29, 59, 102, 0.07); --bp-grid-major: rgba(29, 59, 102, 0.15);
  --bp-ink: #1d3b66; --bp-ink-2: #4d6b96; --bp-dim: #3c6194; --bp-hi: #c2261c; --bp-hi-soft: rgba(194, 38, 28, 0.12);
  --bp-tint: 0.5; --bp-tint-strong: 0.85;
  --bpm-gold: #d9a21b; --bpm-silver: #a3aebb; --bpm-bronze: #bb6a2f; --bpm-wood: #a8733f; --bpm-linen: #fffdf5;
  --bpm-blue: #2f64b8; --bpm-purple: #6d3f97; --bpm-scarlet: #c0271d; --bpm-hair: #3b3a38; --bpm-ram: #a8352a;
  --bpm-tachash: #58788a; --bpm-ground: #eadcbf; --bpm-bread: #d6a45c; --bpm-water: #7fbde6;
}

* { 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;
}

.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; }

/* ---- 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); }

@media (max-width: 780px) {
  .tab { flex-basis: 100%; border-radius: 12px; }
  .tab.active { border-bottom-color: var(--line); }
}

/* ---- 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. Desktop layout is untouched. */
@media (max-width: 780px) {
  .table-wrap { overflow-x: visible; }

  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; }

}

/* =====================================================================
   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); }
.sw.cov { width: 12px; height: 12px; border-radius: 999px; background: var(--panel); border-color: var(--rubric); box-shadow: inset 0 0 0 2px var(--panel), inset 0 0 0 5px var(--rubric); }

/* The figure: the drawing, and beside it (in the draped view) the note on the curtain or seal in hand,
   as the blueprint keeps its notes beside its sheets; on a narrow screen the note drops under the drawing. */
.tb-figure { position: relative; }
/* the note beside the drawing where the screen is wide enough for both at full size; beneath it where it is not */
.tb-figure[data-view="draped"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.tb-figure[data-view="flat"] .tb-side { display: none; }
.tb-stage { position: relative; min-width: 0; }

/* On a larger screen the side view stands in a window of its own, set apart from the page around it: a frame across the
   page, the drawing fitted inside it with room to spare about it, and, zoomed, filling it (js/tabernacle.js, applyZoom).
   The note on the curtain in hand is beneath the frame. */
@media (min-width: 781px) {
  .tb-figure { --tb-box: clamp(420px, min(calc(100vh - 190px), 38vw), 860px); margin: 34px 0 10px; }
  .tb-figure[data-view="draped"] .tb-stage {
    box-sizing: border-box;
    height: var(--tb-box);
    padding: 24px 66px 24px 24px;          /* (the right side keeps the zoom buttons clear of the drawing) */
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--bg) 40%, transparent);
  }
  .tb-figure[data-view="draped"] #tbDraped, .tb-figure[data-view="draped"] .tb-svg { height: 100%; }
  .tb-figure[data-view="draped"] .tb-zoom { top: 12px; right: 12px; }
  .tb-figure[data-view="flat"] .tb-stage { padding: 18px 0 6px; }
  .tb-figure + .tb-hint { margin-top: 16px; }
}

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

.tb-svg { display: block; width: 100%; height: auto; }
/* zoomed, the drawing's box takes the height of the screen (less the bar and the page's head), and shows as much as fits */
.tb-svg.zoomed { touch-action: none; cursor: grab; }   /* (its height is set by js/tabernacle.js, applyZoom) */
.tb-svg.zoomed.dragging { cursor: grabbing; }
.tb-svg.zoomed.dragging .seg-path, .tb-svg.zoomed.dragging .cov { cursor: grabbing; }

/* the zoom buttons for the draped view: a small column at the drawing's top-right corner, each a fingertip's size, under
   the button that opens the drawing full screen (js/figure-view.js) */
.tb-zoom {
  position: absolute;
  z-index: 4;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface-3);
}
.tb-zoom[hidden] { display: none; }
.tb-zoom button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--caps);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.tb-zoom button + button { border-top: 1px solid var(--line); }
.tb-zoom button:hover { background: var(--panel); color: var(--ink); }
.tb-zoom button:disabled { opacity: 0.4; cursor: default; background: transparent; color: var(--muted); }
.tb-zoom button:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }

/* the side panel: the same card as the blueprint's note, with the tip's lines inside it */
.tb-side {
  min-width: 0;
  padding: 9px 13px 11px;
  background: var(--modal);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.4;
}
.tb-side.pinned { border-top-color: var(--rubric); }
.tb-side b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.08rem; line-height: 1.2; }
.tb-side span { color: var(--muted); }
.tb-side .tb-side-hint { margin: 10px 0 0; padding-top: 6px; border-top: 1px dotted var(--line); font-size: 0.8rem; font-style: italic; color: var(--muted); }

.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 .furn-bronze { fill: var(--bronze); fill-opacity: 0.55; }
.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; }

/* covenant seals: a double-ringed roundel in the margin, tied to the goat-hair curtain by a leader */
.tb-svg .cov { cursor: pointer; transition: opacity 140ms ease; }
.tb-svg .cov:focus { outline: none; }
.tb-svg .cov-lead { stroke: var(--rubric); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.tb-svg .cov-ring { fill: var(--panel); stroke: var(--rubric); stroke-width: 1.5; }
.tb-svg .cov-dot { fill: var(--rubric); }
.tb-svg .t-cov { font-size: 10.5px; font-weight: bold; fill: var(--rubric); letter-spacing: 0.02em; }
.tb-svg .cov:hover .cov-ring, .tb-svg .cov:focus-visible .cov-ring { stroke-width: 2.5; stroke: var(--focus); }
/* the side view full screen (js/figure-view.js) keeps its buttons (js/tabernacle.js, the side view full screen): the note on
   the piece under the pointer, in the window's lower left corner, clear of the zoom buttons at the right */
.tb-fv-note { position: absolute; z-index: 2; left: max(14px, env(safe-area-inset-left)); bottom: 14px; box-sizing: border-box; width: min(24rem, calc(100% - 230px)); max-height: 55%; overflow: hidden; pointer-events: none; box-shadow: 0 6px 20px var(--shadow); }
.fv-art.tb-live .seg-path, .fv-art.tb-live .cov, .fv-art.tb-live .clasp { cursor: pointer; }
.fv-canvas.dragging .fv-art.tb-live * { cursor: grabbing; }
/* the popup a tap opens (#tbPop): the note, in the sheet the reader's dialogs use (css/reader.css), then Continue reading */
.tb-pop .bb-sheet-head h3 { white-space: normal; font-size: 1.2rem; line-height: 1.2; }
.tb-pop-note { font-size: 0.95rem; line-height: 1.5; overflow-wrap: break-word; }
.tb-pop-note > span:first-child { display: block; margin-bottom: 6px; color: var(--muted); }
.tb-pop-note > span:first-child + br { display: none; }
.tb-pop .bb-sheet-btns { margin-top: 16px; }
.tb-pop .bb-btn { width: 100%; }
.tb-tip .tb-tip-k, .tb-side .tb-tip-k, .tb-pop .tb-tip-k { display: block; margin-top: 6px; font-style: normal; font-family: var(--caps, inherit); font-size: 0.78em; letter-spacing: 0.12em; color: var(--rubric); }
.tb-tip .tb-tip-ref, .tb-side .tb-tip-ref, .tb-pop .tb-tip-ref { font-weight: bold; color: var(--rubric); }
.tb-svg.has-sel .cov.faded { opacity: 0.5; }
/* the bronze clasps as a button: a transparent field around the dots, ringed to say they can be pressed */
.tb-svg .clasp { cursor: pointer; }
.tb-svg .clasp:focus { outline: none; }
.tb-svg .clasp-hit { fill: transparent; stroke: none; }
.tb-svg .clasp-ring { fill: none; stroke: var(--bronze); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0.85; }
.tb-svg .clasp.gold .clasp-ring { stroke: var(--gold); }
.tb-svg .clasp:hover .clasp-ring, .tb-svg .clasp:focus-visible .clasp-ring { stroke: var(--focus); stroke-width: 2.5; stroke-dasharray: none; opacity: 1; }
.tb-svg.zoomed.dragging .clasp { cursor: grabbing; }

/* ---- 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; }
/* the covenant's ring has a note of its own (js/tabernacle.js, wireCurtain): a field wide enough for a finger around it */
.fm-cov { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin: -4px -7px; padding: 4px 7px; border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rubric); }
@media (hover: hover) { button.fm-cell .fm-cov:hover { background: color-mix(in srgb, var(--rubric) 14%, transparent); } }
.fm-cov i { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--rubric); box-shadow: inset 0 0 0 1.5px var(--panel), inset 0 0 0 4px var(--rubric); }

.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); }
/* the clasps are buttons: a 44px field, the dot drawn in its middle, so a finger can press it */
button.fm-clasp {
  pointer-events: auto; cursor: pointer;
  width: 44px; height: 44px; margin-left: -22px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 999px; font: inherit; color: inherit;
}
button.fm-clasp::before { content: ""; width: 12px; height: 12px; box-sizing: border-box; border-radius: 999px; background: var(--bronze); border: 2px solid var(--panel); }
button.fm-clasp.gold::before { background: var(--gold); }
button.fm-clasp.gold, button.fm-clasp.bronze { background: none; }
button.fm-clasp:hover::before, button.fm-clasp:focus-visible::before { box-shadow: 0 0 0 3px var(--focus); }
button.fm-clasp:focus-visible { outline: none; }

.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-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-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-cov { margin: -4px auto 12px; font-size: 0.9rem; color: var(--muted); max-width: 980px; }
.tb-d-cov .sw { vertical-align: -1px; margin-right: 6px; }
.tb-d-cov b { color: var(--rubric); }
.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; }


/* ---- 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 > 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; grid-template-columns: minmax(0, 1fr); 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; }
  .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; its note sits below it. */
  #tbDraped { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #tbDraped .tb-svg { min-width: 940px; }
  .tb-figure[data-view="draped"] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* its zoom buttons, a fingertip's size, would cover the clasps at its right edge: they stand in a row above it */
  .tb-stage { display: flex; flex-direction: column; }
  .tb-zoom { position: static; order: -1; align-self: flex-end; flex-direction: row; margin-bottom: 6px; }
  .tb-zoom button + button { border-top: 0; border-left: 1px solid var(--line); }

  /* 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; }
  button.fm-clasp { margin: -22px 0 0; }

  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.68rem; letter-spacing: -0.02em; }
  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; }
}