/* 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. */
/* ---- Theme tokens ----
Dark is the default and lives on :root. The original parchment palette
is the opt-in light theme (), chosen with the
toggle in the header. Every color below is referenced by role. */
:root {
color-scheme: dark;
--bg: #13100d;
--bg-top: #1e1914;
--bg-bottom: #0d0b09;
--panel: #1b1713;
--surface: #211c17;
--surface-2: #262019;
--surface-3: #2b241d;
--surface-hover: #30291f;
--th-bg: #2a231b;
--th-ink: #d6c7b0;
--tab-bg: #1f1a15;
--tab-ink: #b3a38e;
--ink: #ede4d5;
--muted: #b4a48e;
--line: #3d342a;
--modal: #1d1915;
--shadow: rgba(0, 0, 0, 0.5);
--lift: rgba(0, 0, 0, 0.55);
--focus: #8ab4ff;
--overlay: rgba(6, 5, 4, 0.74);
--kicker-ink: #ffffff;
/* identity colors: fill (chips), ink (text), soft/mid (diagram fills), edge (diagram outlines) */
--heaven: #3b6ea6; --heaven-ink: #93bdec; --heaven-soft: #1d2834; --heaven-mid: #2a4563; --heaven-edge: #6a9fd8;
--earth: #a0492f; --earth-ink: #eca286; --earth-soft: #33201a; --earth-mid: #553121; --earth-edge: #da7b5b;
--genA: #3e7a4d; --genA-ink: #98d0a5; --genA-soft: #1a2b26; --genA-mid: #24473e; --genA-edge: #4fae8a;
--genB: #8f6c1e; --genB-ink: #e4bf6a; --genB-soft: #302619; --genB-mid: #4f3c17; --genB-edge: #d9ab45;
--beat: #6c4f95; --beat-ink: #c8adf0;
--cov: #2f7272; --cov-ink: #86d0d0;
--caution-edge: #c9974a; --caution-bg: #2a2217; --caution-ink: #e4d0b1;
--s-anchor-bg: #1c2c1a; --s-anchor-line: #3e5f37; --s-anchor-ink: #acd79f;
--s-strong-bg: #182830; --s-strong-line: #33566a; --s-strong-ink: #9fc9df;
--s-moderate-bg: #2e2615; --s-moderate-line: #6b5525; --s-moderate-ink: #e5c682;
--s-exploratory-bg: #28231d; --s-exploratory-line: #4d4337; --s-exploratory-ink: #cdbda7;
--ao-glow-a: #2a2116; --ao-glow-b: #231b2e; --ao-cap-bg: #231c2c; --ao-cap-line: #4b3b61; --ao-tag: #c9aaee; --ao-em: #cda6f4;
/* verdicts (kept / broken / both) — always shown with an icon and a word, never color alone */
--ok: #0ca30c; --warn: #fab219; --bad: #d03b3b;
--ok-soft: #152a17; --warn-soft: #33290f; --bad-soft: #361917;
--glyph-dark: #120f0c;
/* tabernacle furnishings */
--gold: #e2b84a; --bronze: #c07a3e; --veil: #8f6cc0;
--room-mhp: #2a2319; --room-hp: #1f1b16; --frame: #6b5b48; --ground: #4a3f33; --proj: rgba(255, 236, 190, 0.07);
}
:root[data-theme="light"] {
color-scheme: light;
--bg: #f6f2ea;
--bg-top: #fffdf8;
--bg-bottom: #ede3d3;
--panel: #fffaf1;
--surface: #fffdf8;
--surface-2: #fbf7ee;
--surface-3: #f2eadf;
--surface-hover: #ffffff;
--th-bg: #eee1ce;
--th-ink: #4d4034;
--tab-bg: #f1e6d4;
--tab-ink: #6a5c4c;
--ink: #27211a;
--muted: #655b50;
--line: #d5c5ae;
--modal: #fffdf8;
--shadow: rgba(34, 26, 18, 0.25);
--lift: rgba(42, 32, 23, 0.16);
--focus: #1a5fb4;
--overlay: rgba(18, 14, 10, 0.55);
--kicker-ink: #ffffff;
--heaven: #2f5f8f; --heaven-ink: #2f5f8f; --heaven-soft: #e1e9f2; --heaven-mid: #c2d4e8; --heaven-edge: #2f5f8f;
--earth: #7a3d2b; --earth-ink: #7a3d2b; --earth-soft: #f3e2da; --earth-mid: #e6c4b5; --earth-edge: #8a3f28;
--genA: #4a6741; --genA-ink: #3f5f37; --genA-soft: #dfece8; --genA-mid: #bfdcd3; --genA-edge: #27695a;
--genB: #7a5b25; --genB-ink: #6f521f; --genB-soft: #f4e8cf; --genB-mid: #e9d3a0; --genB-edge: #ad7a12;
--beat: #5a3d7a; --beat-ink: #5a3d7a;
--cov: #2f6f6f; --cov-ink: #2f6f6f;
--caution-edge: #b78334; --caution-bg: #fbf1df; --caution-ink: #5c4630;
--s-anchor-bg: #e7f3e4; --s-anchor-line: #aacb9f; --s-anchor-ink: #2f5128;
--s-strong-bg: #e6f0f4; --s-strong-line: #a7c6d6; --s-strong-ink: #234c5e;
--s-moderate-bg: #faf0db; --s-moderate-line: #e0c489; --s-moderate-ink: #6f5320;
--s-exploratory-bg: #efe9e1; --s-exploratory-line: #cdbfa9; --s-exploratory-ink: #5b4e3d;
--ao-glow-a: #fbf4e6; --ao-glow-b: #f3ecfa; --ao-cap-bg: #f6f0fb; --ao-cap-line: #cdb9e0; --ao-tag: #5a3d7a; --ao-em: #6a3fa0;
--ok-soft: #e4f3e1; --warn-soft: #fcf0d2; --bad-soft: #fae4e1;
--gold: #b8860b; --bronze: #95592a; --veil: #6b4a93;
--room-mhp: #f6ecd9; --room-hp: #fbf6ec; --frame: #b09c80; --ground: #cbb99c; --proj: rgba(120, 90, 40, 0.08);
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: Georgia, "Times New Roman", serif;
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: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; }
/* 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-steps {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
counter-reset: tbstep;
}
.tb-steps li {
position: relative;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
padding: 14px 16px 14px 50px;
color: var(--muted);
font-size: 0.95rem;
}
.tb-steps li b { color: var(--ink); }
.tb-steps li::before {
counter-increment: tbstep;
content: counter(tbstep);
position: absolute;
left: 14px;
top: 13px;
width: 26px;
height: 26px;
border-radius: 999px;
display: grid;
place-items: center;
font-weight: bold;
font-size: 0.9rem;
color: var(--kicker-ink);
background: var(--genB);
}
.tb-steps li:nth-child(1)::before { background: var(--heaven); }
.tb-steps li:nth-child(2)::before { background: var(--genA); }
.tb-bridge {
margin-top: 14px;
border: 1px solid var(--line);
border-left: 4px solid var(--gold);
border-radius: 14px;
background: var(--surface-2);
padding: 14px 16px;
}
.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-bridge p { margin: 0 0 10px; }
.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: Georgia, "Times New Roman", serif; 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-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tb-d-actions .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; }
/* ---- 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: 1020px) {
.tb-steps { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
.tb-card { padding: 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; }
}