/**
* v5-chrome.css — CS 145 layout & chrome (FA-26V5)
*
* Side-by-side with shared/core-styles.css.
*
* EVERY selector is gated by body[data-module] so this file has
* NO effect on a page until base-template.html (Phase 2) adds the
* attribute via build.py (Phase 3). Until then, this stylesheet is
* inert — safe to ship to every page.
*
* Reads variables from v5-tokens.css. Load that file FIRST.
*
* Layout (module page):
* ┌──────────┬───────────────────────────────────┐
* │ rail │ article (70ch) │ aside │
* │ (240px) │ │ (220px) │
* └──────────┴───────────────────────────────────┘
*/
/* ──────────────────────────────────────────────────────
LAYOUT VARIABLES
────────────────────────────────────────────────────── */
body[data-module] {
--rail-w: 240px;
--aside-w: 220px;
font-family: var(--v5-sans);
font-size: 16px;
color: var(--v5-text);
background: var(--v5-bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
font-feature-settings: 'cv11','ss01';
margin: 0;
}
body[data-module] a {
color: var(--accent);
text-decoration: none;
}
body[data-module] a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
body[data-module] .v5-article a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
body[data-module] .v5-article a:hover {
text-decoration-thickness: 2px;
}
/* ──────────────────────────────────────────────────────
PAGE LAYOUT
────────────────────────────────────────────────────── */
body[data-module] .v5-layout {
display: grid;
grid-template-columns: var(--rail-w) 1fr;
min-height: 100vh;
}
/* ──────────────────────────────────────────────────────
RAIL (sidebar)
────────────────────────────────────────────────────── */
body[data-module] .v5-rail {
position: fixed;
top: 0; left: 0; bottom: 0;
width: var(--rail-w);
background: var(--v5-bg);
border-right: 1px solid var(--v5-hairline);
padding: 1.25rem 1rem 2rem;
overflow-y: auto;
}
body[data-module] .v5-rail-mark {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.25rem 0.5rem 0.5rem;
margin-bottom: 0.6rem;
color: inherit;
text-decoration: none;
}
body[data-module] .v5-rail-mark:hover { text-decoration: none; }
body[data-module] .v5-rail-mark-text {
font-family: var(--v5-serif);
font-weight: 500;
font-size: 1.25rem;
letter-spacing: -0.015em;
color: var(--v5-ink);
font-variation-settings: 'opsz' 36;
}
body[data-module] .v5-rail-module {
display: flex; align-items: center; gap: 0.5rem;
margin: 0 0.5rem 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--v5-hairline);
}
body[data-module] .v5-rail-module .v5-badge {
display: inline-flex; align-items: center; gap: 0.3rem;
background: var(--accent);
color: white;
font-family: var(--v5-mono);
font-weight: 600;
font-size: 0.7rem;
padding: 3px 8px;
border-radius: var(--v5-r-sm);
}
body[data-module] .v5-rail-module .v5-badge svg { width: 12px; height: 12px; }
body[data-module] .v5-rail-module .v5-label {
font-family: var(--v5-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--v5-muted);
}
body[data-module] .v5-rail-section { margin-bottom: 1.1rem; }
body[data-module] .v5-rail-section-title {
padding: 0 0.5rem;
font-family: var(--v5-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--v5-muted);
margin-bottom: 0.3rem;
}
body[data-module] .v5-rail-link {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.32rem 0.5rem;
font-family: var(--v5-sans);
font-size: 0.875rem;
color: var(--v5-text);
border-left: 2px solid transparent;
margin-left: -2px;
border-radius: 0 var(--v5-r-sm) var(--v5-r-sm) 0;
transition: color 0.12s, background 0.12s;
line-height: 1.3;
text-decoration: none;
}
body[data-module] .v5-rail-link .v5-dot {
width: 6px; height: 6px;
border-radius: 99px;
background: transparent;
border: 1.5px solid var(--v5-hairline-2);
flex-shrink: 0;
}
body[data-module] .v5-rail-link.is-completed .v5-dot { background: var(--v5-done); border-color: var(--v5-done); }
body[data-module] .v5-rail-link.is-progress .v5-dot { background: var(--v5-warn); border-color: var(--v5-warn); }
body[data-module] .v5-rail-link:hover {
color: var(--v5-ink);
background: var(--accent-tint);
text-decoration: none;
}
body[data-module] .v5-rail-link.is-active {
color: var(--v5-ink);
background: var(--accent-tint);
border-left-color: var(--accent);
font-weight: 600;
}
body[data-module] .v5-rail-link .v5-pill-mini {
font-family: var(--v5-mono);
font-weight: 600;
font-size: 0.55rem;
background: var(--accent);
color: white;
padding: 1px 5px;
border-radius: 3px;
margin-left: auto;
letter-spacing: 0.05em;
}
body[data-module] .v5-rail-link .v5-pill-mini.is-case {
background: var(--accent-tint);
color: var(--accent);
border: 1px solid var(--accent);
}
/* ──────────────────────────────────────────────────────
MAIN + ARTICLE
────────────────────────────────────────────────────── */
body[data-module] .v5-main {
grid-column: 2;
padding: 2rem 3rem 6rem;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--aside-w);
gap: 3rem;
max-width: 1280px;
}
body[data-module] .v5-article {
/* No max-width — debug tables, side-by-side blocks, code, and SVG diagrams
all need to fill the .main column. Prose still reads at a comfortable
length because .main itself is capped at 1280px. */
min-width: 0;
}
/* ──────────────────────────────────────────────────────
PAGE HEAD (crumbs, title, meta strip, read bar)
────────────────────────────────────────────────────── */
body[data-module] .v5-crumbs {
font-family: var(--v5-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--v5-muted);
margin-bottom: 0.85rem;
display: flex; align-items: center; gap: 0.5rem;
}
body[data-module] .v5-crumbs .v5-crumb-sep { color: var(--v5-hairline-2); }
body[data-module] .v5-crumbs .v5-crumb-module {
color: white;
background: var(--accent);
font-weight: 600;
padding: 1px 6px;
border-radius: 3px;
letter-spacing: 0.05em;
}
body[data-module] .v5-crumbs .v5-crumb-here { color: var(--v5-ink); font-weight: 600; }
body[data-module] .v5-page-title {
font-family: var(--v5-serif);
font-weight: 500;
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--v5-ink);
margin: 0 0 1rem;
font-variation-settings: 'opsz' 144;
}
body[data-module] .v5-page-meta {
display: flex;
gap: 1rem;
align-items: center;
font-family: var(--v5-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--v5-muted);
padding: 0.7rem 0;
border-top: 1px solid var(--v5-hairline);
border-bottom: 1px solid var(--v5-hairline);
margin-bottom: 2rem;
}
body[data-module] .v5-page-meta b { color: var(--v5-ink); font-weight: 600; }
body[data-module] .v5-page-meta .v5-meta-sep { color: var(--v5-hairline-2); }
body[data-module] .v5-read-bar {
position: fixed;
top: 0; left: var(--rail-w); right: 0;
height: 2px;
background: transparent;
z-index: 100;
}
body[data-module] .v5-read-bar-fill {
height: 100%;
background: var(--accent);
width: 0;
transition: width 0.1s linear;
}
/* ──────────────────────────────────────────────────────
ARTICLE BODY (typography)
These rules style the markdown output the converter drops
into .v5-article — no class on individual elements needed.
────────────────────────────────────────────────────── */
body[data-module] .v5-article p {
font-family: var(--v5-sans);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--v5-text);
margin: 1rem 0;
}
body[data-module] .v5-article h2 {
font-family: var(--v5-serif);
font-weight: 500;
font-size: 1.65rem;
letter-spacing: -0.015em;
color: var(--v5-ink);
margin: 2.75rem 0 0.85rem;
line-height: 1.15;
font-variation-settings: 'opsz' 60;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--v5-hairline);
}
body[data-module] .v5-article h3 {
font-family: var(--v5-sans);
font-weight: 600;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin: 1.75rem 0 0.5rem;
}
body[data-module] .v5-article h4 {
font-family: var(--v5-sans);
font-weight: 600;
font-size: 1rem;
color: var(--v5-ink);
margin: 1.25rem 0 0.4rem;
}
body[data-module] .v5-article ul,
body[data-module] .v5-article ol {
margin: 0.6rem 0 1rem 1.25rem;
padding-left: 0;
}
body[data-module] .v5-article li {
margin: 0.35rem 0;
line-height: 1.55;
color: var(--v5-text);
}
body[data-module] .v5-article li strong { font-weight: 600; color: var(--v5-ink); }
body[data-module] .v5-article hr {
border: none;
border-top: 1px dashed var(--v5-hairline-2);
margin: 2rem 0;
}
body[data-module] .v5-article code {
font-family: var(--v5-mono);
font-size: 0.88em;
background: var(--v5-bg);
color: var(--v5-ink);
padding: 1px 5px;
border-radius: 3px;
border: 1px solid var(--v5-hairline);
}
body[data-module] .v5-article pre code {
background: transparent;
color: inherit;
padding: 0;
border: none;
border-radius: 0;
}
/* Inside tables, the cell is already monospace — drop the inline-code
badge entirely so dense formula cells (e.g. cost analyses) read as
plain text instead of "highlight everywhere" visual noise. */
body[data-module] .v5-article td code,
body[data-module] .v5-article th code,
body[data-module] .v5-data-table td code,
body[data-module] .v5-data-table th code {
background: transparent;
color: inherit;
padding: 0;
border: none;
border-radius: 0;
font-size: inherit;
}
/* ──────────────────────────────────────────────────────
CODE BLOCKS
──────────────────────────────────────────────────────
The converter currently emits ...
directly. We style that AND the richer wrapper variant
(.v5-code-block) consistently. */
body[data-module] .v5-code-block,
body[data-module] .v5-article pre {
background: var(--v5-surface);
border-radius: var(--v5-r);
box-shadow: 0 0 0 1px var(--v5-hairline);
margin: 1.25rem 0;
overflow: hidden;
}
body[data-module] .v5-code-block-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.45rem 0.85rem;
background: var(--v5-bg);
border-bottom: 1px solid var(--v5-hairline);
font-family: var(--v5-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--v5-muted);
}
body[data-module] .v5-code-block-head b { color: var(--v5-ink); font-weight: 600; }
body[data-module] .v5-code-block-head .v5-lang {
background: var(--accent-tint);
color: var(--accent);
font-weight: 600;
padding: 1px 6px;
border-radius: 3px;
}
body[data-module] .v5-code-actions { display: flex; gap: 0.4rem; }
body[data-module] .v5-code-btn {
font-family: var(--v5-mono);
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.08em;
background: transparent;
border: 1px solid var(--v5-hairline);
color: var(--v5-text);
padding: 2px 7px;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
}
body[data-module] .v5-code-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
body[data-module] .v5-code-block pre,
body[data-module] .v5-article pre {
margin: 1.25rem 0;
padding: 1rem 1.2rem;
font-family: var(--v5-mono);
font-size: 0.92rem;
line-height: 1.55;
/* Uniform dark treatment — matches the legacy pre.language-sql look so
inline-styled blocks (e.g. the FloWS
Python example) get readable light text instead of black-on-black. */
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%) !important;
color: #E6EDF3 !important;
border: 1px solid rgba(56, 139, 253, 0.18) !important;
border-radius: var(--v5-r);
box-shadow: 0 4px 6px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
/* pre-wrap so long lines and SQL comments wrap inside narrow columns
and don't slip behind right-edge overlays. Whitespace preserved. */
white-space: pre-wrap;
overflow-wrap: anywhere;
overflow-x: auto;
}
/* Plain text (no syntax-class span) inside a needs to inherit the
light foreground we just set. */
body[data-module] .v5-article pre,
body[data-module] .v5-article pre code {
color: #E6EDF3 !important;
}
/* SQL syntax tints — re-pick on the dark background. The accent-blue
(M1) on dark is fine; bumping comment + string brightness so they
don't get lost. */
body[data-module] .sql-comment { color: #8B96A6 !important; font-style: italic; }
body[data-module] .sql-string { color: #7EE787 !important; }
body[data-module] .sql-number { color: #D2A8FF !important; }
body[data-module] .sql-table { color: #FFA657 !important; font-weight: 500; }
body[data-module] .sql-operator{ color: #E6EDF3 !important; }
body[data-module] .sql-keyword,
body[data-module] .sql-function{ color: var(--accent) !important; font-weight: 600; }
/* Side-by-side code is even tighter — drop padding to give text more width */
body[data-module] .side-by-side pre {
padding: 0.7rem 0.85rem;
font-size: 0.78rem;
line-height: 1.5;
}
/* Suppress the legacy `CODE` badge from shared/components.css that pins
itself to the top-right of every and overlaps the comment text. */
body[data-module] pre::before {
content: none !important;
display: none !important;
}
/* SQL syntax classes emitted by tools/build.py's highlighter.
Mapping is intentional: keywords pick up the page accent. */
body[data-module] .sql-keyword { color: var(--accent); font-weight: 600; }
body[data-module] .sql-function { color: var(--m4); font-weight: 500; }
body[data-module] .sql-string { color: var(--v5-done); }
body[data-module] .sql-comment { color: var(--v5-muted); font-style: italic; }
body[data-module] .sql-number { color: var(--m4); }
body[data-module] .sql-operator { color: var(--v5-text); }
body[data-module] .sql-table { color: var(--m2); font-weight: 500; }
/* CALLOUTS — single canonical system defined below (search
".v5-callout — single canonical"). The older variant block with a
::before "!" badge was removed: its reserved padding-left was
overridden by the canonical block, so the badge collided with the
first letter. Severity now reads from the left-border color. */
/* ──────────────────────────────────────────────────────
DATA TABLES (with _color row bars)
The converter's process_table_with_colors() strips the
_color column and writes class="row-blue" / row-orange /
etc. on each . We render that as a 3px bar on the
first cell. */
body[data-module] .v5-article table,
body[data-module] .v5-data-table {
width: 100%;
max-width: 80%;
margin: 1rem auto 1.25rem;
border-collapse: separate;
border-spacing: 0;
background: var(--v5-surface);
border: 1px solid var(--v5-hairline);
border-radius: var(--v5-r);
overflow: hidden;
font-size: 0.875rem;
}
body[data-module] .v5-article thead th,
body[data-module] .v5-data-table thead th {
background: var(--v5-bg);
text-align: left;
padding: 0.5rem 0.85rem;
font-family: var(--v5-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--v5-ink);
font-weight: 600;
border-bottom: 1px solid var(--v5-hairline);
/* Wrap unbreakable tokens (formulas, code) so wide cells don't push
the whole table past the column width. */
word-wrap: break-word;
overflow-wrap: anywhere;
white-space: normal;
vertical-align: top;
}
body[data-module] .v5-article tbody td,
body[data-module] .v5-data-table tbody td {
padding: 0.45rem 0.85rem;
border-bottom: 1px solid var(--v5-hairline);
color: var(--v5-text);
font-family: var(--v5-mono);
font-size: 0.85rem;
/* Same wrap policy on the body cells. `anywhere` lets long monospace
tokens (e.g. C_r×P(Songs) + …) break inside the token rather than
blowing out the table width. */
word-wrap: break-word;
overflow-wrap: anywhere;
white-space: normal;
vertical-align: top;
}
/* Tables themselves: allow shrinking inside narrow columns + provide a
horizontal-scroll fallback if a single cell still overflows after
text wrapping (e.g. an unbroken URL). The wrapper handles overflow,
the inner table keeps its semantic rendering. */
body[data-module] .v5-article table {
table-layout: auto;
min-width: 0;
max-width: 100%;
}
body[data-module] .v5-article table:has(td, th) {
/* Modern browsers: cap width and let cells wrap.
The container around a markdown table doesn't get a special class,
so the table itself takes the responsibility. */
display: table;
}
/* Color-bar cells (the converter emits as a
real cell, full row height). v5 widens it to 6px for visibility. The
legacy .color-bar.blue { background: var(--color-blue) !important; }
rules in core-styles.css continue to provide the bar's color so
row-personality (Mickey blue, Minnie orange, etc.) carries across
debug tables exactly as before. */
body[data-module] .v5-article td.color-bar,
body[data-module] .v5-article th.color-bar,
body[data-module] .side-by-side td.color-bar,
body[data-module] .side-by-side th.color-bar {
width: 6px !important;
min-width: 6px !important;
max-width: 6px !important;
padding: 0 !important;
border: none;
}
/* Row fate (keep/drop): a SEPARATE channel from the _color user bar.
Authored via a `_fate` column the builder strips into a tr.row-keep /
tr.row-drop class. ONE encoding: a dropped row is greyed and crossed out;
a kept row is plain (no tint). Survivors are simply the un-struck rows.
Put `_fate` only on the clause that actually filters (WHERE/HAVING), and
have that step list its input rows. The color-bar cell keeps the user
color (Mickey blue, etc.) untouched. */
body[data-module] .v5-article tr.row-drop td:not(.color-bar),
body[data-module] .side-by-side tr.row-drop td:not(.color-bar) {
color: #6B7280;
text-decoration: line-through;
text-decoration-color: #9CA3AF;
}
/* ---- Slides mode: animate the trace on slide entry ----
Advance to a slide and its table rows redraw top-to-bottom; then, after a
short pause, the dropped rows grey out while a strikethrough draws across
them (the filter running live). Pure CSS keyed to .slide.active: because an
inactive slide is display:none, the animation restarts every time you
navigate to the slide. Docs mode keeps the static grey+strike above. */
body[data-module].slides-mode .slide tr.row-drop td:not(.color-bar) {
text-decoration: none; /* we draw an animated line instead */
color: #0E0E10;
position: relative;
}
body[data-module].slides-mode .slide.active tbody tr {
animation: traceRowIn 0.45s ease-out backwards;
}
body[data-module].slides-mode .slide.active tbody tr:nth-child(1) { animation-delay: 0.10s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(2) { animation-delay: 0.21s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(3) { animation-delay: 0.32s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(4) { animation-delay: 0.43s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(5) { animation-delay: 0.54s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(6) { animation-delay: 0.65s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(7) { animation-delay: 0.76s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(8) { animation-delay: 0.87s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(9) { animation-delay: 0.98s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(10) { animation-delay: 1.09s; }
body[data-module].slides-mode .slide.active tbody tr:nth-child(n+11) { animation-delay: 1.20s; }
/* after the rows are in, the failing rows grey out and the line draws across */
body[data-module].slides-mode .slide.active tr.row-drop td:not(.color-bar) {
animation: traceDropGrey 0.5s ease-out 2s forwards;
}
body[data-module].slides-mode .slide.active tr.row-drop td:not(.color-bar)::after {
content: "";
position: absolute;
left: 16px; right: 16px; top: 52%;
height: 2px; border-radius: 2px;
background: #9CA3AF;
transform: scaleX(0);
transform-origin: left center;
animation: traceStrike 0.55s ease-in-out 2s forwards;
}
@keyframes traceRowIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes traceDropGrey { to { color: #6B7280; } }
@keyframes traceStrike { to { transform: scaleX(1); } }
/* Keep standalone trace tables card-sized in slides mode. The base
`body.slides-mode table { max-width: 80% }` stretches them across the
full-bleed slide, leaving wide empty white columns; pin them to a centered
card instead. Side-by-side tables keep their own compact sizing. */
body[data-module].slides-mode .slide > table {
max-width: min(900px, 92%);
width: auto;
margin: 1.5rem auto;
}
@media (prefers-reduced-motion: reduce) {
body[data-module].slides-mode .slide.active tbody tr,
body[data-module].slides-mode .slide.active tr.row-drop td:not(.color-bar),
body[data-module].slides-mode .slide.active tr.row-drop td:not(.color-bar)::after {
animation: none;
}
/* reduced motion: show the final struck state immediately */
body[data-module].slides-mode .slide tr.row-drop td:not(.color-bar) {
color: #6B7280; text-decoration: line-through; text-decoration-color: #9CA3AF;
}
}
body[data-module] .v5-article tbody tr:last-child td,
body[data-module] .v5-data-table tbody tr:last-child td { border-bottom: none; }
body[data-module] .v5-article td.null,
body[data-module] .v5-data-table td.null {
color: var(--v5-muted);
font-style: italic;
}
body[data-module] .v5-table-caption {
font-family: var(--v5-sans);
font-size: 0.75rem;
font-weight: 500;
color: var(--v5-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.4rem;
display: block;
}
/* ──────────────────────────────────────────────────────
ASIDE (right marginal column)
────────────────────────────────────────────────────── */
body[data-module] .v5-aside {
position: sticky;
top: 2rem;
align-self: start;
font-size: 0.85rem;
}
body[data-module] .v5-aside-block { margin-bottom: 1.75rem; }
body[data-module] .v5-aside-title {
font-family: var(--v5-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--v5-muted);
margin-bottom: 0.55rem;
}
body[data-module] .v5-aside-link {
display: block;
padding: 0.3rem 0;
font-size: 0.875rem;
color: var(--v5-text);
border-bottom: 1px solid var(--v5-hairline);
text-decoration: none;
}
body[data-module] .v5-aside-link:last-child { border-bottom: none; }
body[data-module] .v5-aside-link:hover { color: var(--accent); text-decoration: none; }
body[data-module] .v5-aside-link .v5-aside-meta {
font-family: var(--v5-mono);
font-size: 0.6rem;
color: var(--v5-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 2px;
display: block;
}
body[data-module] .v5-aside-stub {
font-family: var(--v5-mono);
font-size: 0.7rem;
color: var(--v5-muted);
line-height: 1.55;
padding: 0.5rem 0.65rem;
border-left: 2px solid var(--v5-hairline-2);
}
body[data-module] .v5-toc-h2 {
display: block;
padding: 0.3rem 0;
font-size: 0.85rem;
color: var(--v5-text);
border-left: 2px solid transparent;
padding-left: 0.6rem;
margin-left: -0.6rem;
text-decoration: none;
}
body[data-module] .v5-toc-h2:hover,
body[data-module] .v5-toc-h2.is-active {
color: var(--v5-ink);
border-left-color: var(--accent);
text-decoration: none;
}
/* ──────────────────────────────────────────────────────
FOOTER NAV (prev / next)
────────────────────────────────────────────────────── */
body[data-module] .v5-footer-nav {
max-width: 70ch;
margin: 4rem 0 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--v5-hairline);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
body[data-module] .v5-footer-link {
display: block;
padding: 1rem 1.1rem;
background: var(--v5-surface);
border: 1px solid var(--v5-hairline);
border-radius: var(--v5-r);
transition: border-color 0.15s, transform 0.15s;
text-decoration: none;
}
body[data-module] .v5-footer-link:hover {
border-color: var(--accent);
text-decoration: none;
transform: translateY(-1px);
}
body[data-module] .v5-footer-link-eyebrow {
font-family: var(--v5-mono);
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--v5-muted);
margin-bottom: 0.3rem;
}
body[data-module] .v5-footer-link-title {
font-family: var(--v5-serif);
font-size: 1.1rem;
font-weight: 500;
color: var(--v5-ink);
font-variation-settings: 'opsz' 36;
line-height: 1.2;
}
body[data-module] .v5-footer-link.v5-next { text-align: right; }
body[data-module] .v5-footer-link.v5-next .v5-footer-link-eyebrow::after { content: ' →'; color: var(--accent); }
body[data-module] .v5-footer-link.v5-prev .v5-footer-link-eyebrow::before { content: '← '; color: var(--accent); }
/* ──────────────────────────────────────────────────────
MODE TOGGLE (Docs / Slides)
Uses the same data-mode contract as shared/slide-system.js.
Sits at top-right with room for the auth widget. */
body[data-module] .v5-mode-toggle {
position: fixed;
top: 1rem;
right: 5.5rem; /* leaves room for tracker.js auth widget at right:1rem */
z-index: 998;
background: var(--v5-surface);
border: 1px solid var(--v5-hairline);
border-radius: 999px;
padding: 3px;
display: flex;
gap: 2px;
box-shadow: 0 1px 2px rgba(14,14,16,0.05);
}
body[data-module] .v5-mode-btn {
font-family: var(--v5-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
background: transparent;
border: none;
padding: 5px 12px;
border-radius: 999px;
cursor: pointer;
color: var(--v5-muted);
transition: all 0.15s;
}
body[data-module] .v5-mode-btn:hover { color: var(--v5-ink); }
body[data-module] .v5-mode-btn.active { background: var(--v5-ink); color: white; }
/* ──────────────────────────────────────────────────────
CASE-STUDY CHROME (only used on case-study pages)
────────────────────────────────────────────────────── */
body[data-module] .v5-case-band {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.85rem;
margin-bottom: 1rem;
border-radius: var(--v5-r);
background: var(--accent-tint);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
font-family: var(--v5-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
body[data-module] .v5-case-band .v5-case-tag {
background: var(--accent);
color: white;
font-weight: 700;
padding: 3px 7px;
border-radius: 3px;
letter-spacing: 0.1em;
}
body[data-module] .v5-case-band .v5-case-meta { color: var(--accent); opacity: 0.85; }
body[data-module] .v5-case-band .v5-case-meta + .v5-case-meta::before {
content: '·';
margin: 0 0.5rem;
opacity: 0.5;
}
body[data-module] .v5-objective {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
background: var(--v5-surface);
border-left: 3px solid var(--accent);
border-radius: 0 var(--v5-r) var(--v5-r) 0;
box-shadow: 0 0 0 1px var(--v5-hairline);
}
body[data-module] .v5-objective .v5-label {
font-family: var(--v5-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
font-weight: 600;
margin-bottom: 0.35rem;
}
body[data-module] .v5-objective .v5-body {
font-family: var(--v5-serif);
font-size: 1.15rem;
line-height: 1.45;
color: var(--v5-ink);
font-variation-settings: 'opsz' 36;
}
body[data-module] .v5-conclusion {
margin: 2rem 0 1rem;
padding: 1.1rem 1.25rem;
background: linear-gradient(180deg, var(--accent-tint), transparent 100%);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: var(--v5-r);
}
body[data-module] .v5-conclusion .v5-label {
font-family: var(--v5-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
font-weight: 700;
margin-bottom: 0.4rem;
}
body[data-module] .v5-conclusion p {
margin: 0;
font-size: 1.0625rem;
color: var(--v5-ink);
}
body[data-module] .v5-figure {
margin: 1.5rem 0;
background: var(--v5-surface);
border: 1px solid var(--v5-hairline);
border-radius: var(--v5-r);
overflow: hidden;
}
body[data-module] .v5-figure img { display: block; width: 100%; height: auto; }
body[data-module] .v5-figure figcaption {
padding: 0.55rem 0.85rem;
font-family: var(--v5-sans);
font-size: 0.85rem;
color: var(--v5-muted);
border-top: 1px solid var(--v5-hairline);
background: var(--v5-bg);
}
/* ══════════════════════════════════════════════════════
SLIDES MODE — chrome + typography (one block)
══════════════════════════════════════════════════════
shared/slide-system.js toggles body.slides-mode; we hide
the chrome, fill the screen, and apply a projector
typography scale.
Typography scale (read from ~30 ft / large room):
──────────────────────────────────────────────
Page H1 (page title) 3.5rem ≈ 56px Fraunces
Section H2 2.5rem ≈ 40px Fraunces
Subsection H3 1.75rem ≈ 28px sans, accent
H4 1.4rem ≈ 22px sans
Body p / li 1.5rem ≈ 24px
Inline code 1.3rem ≈ 21px
Code block (pre) 1.7rem ≈ 27px (oversized for projection)
Side-by-side pre 1.3rem ≈ 21px (constrained, but still bumped)
Side-by-side td 1.05rem ≈ 17px (constrained)
Side-by-side th 0.9rem ≈ 14px (constrained)
──────────────────────────────────────────────
These override both the v5 docs-mode sizes (which are
tuned for desk-distance reading) and the legacy
body.slides-mode rules in core-styles.css. */
/* Chrome — hide the rail, fill the viewport */
body[data-module].slides-mode .v5-rail,
body[data-module].slides-mode .v5-aside,
body[data-module].slides-mode .v5-read-bar { display: none; }
/* Hide the prev/next "CONTINUE LEARNING" footer nav in slides mode —
it's a desk-reading aid, not a presentation element. */
body[data-module].slides-mode .footer-nav { display: none !important; }
body[data-module].slides-mode .footer-nav::before { content: none !important; }
body[data-module].slides-mode .v5-article {
max-width: none;
width: 100%;
margin: 0;
}
/* ── Typography scale ── */
body[data-module].slides-mode .v5-page-title,
body[data-module].slides-mode .v5-article > h1 {
font-size: 3.5rem;
line-height: 1.05;
margin: 0 0 1.25rem;
}
body[data-module].slides-mode .v5-article h2 {
font-size: 2.5rem;
line-height: 1.15;
margin: 2rem 0 1rem;
padding-bottom: 0.6rem;
font-family: var(--v5-serif);
font-weight: 500;
}
body[data-module].slides-mode .v5-article h3 {
font-size: 1.75rem;
line-height: 1.2;
margin: 1.5rem 0 0.75rem;
/* Drop the docs-mode uppercase-eyebrow styling — at 28px it should
read as a real subsection heading, not a tiny label. */
text-transform: none;
letter-spacing: -0.005em;
font-family: var(--v5-sans);
font-weight: 600;
color: var(--accent);
}
body[data-module].slides-mode .v5-article h4 {
font-size: 1.4rem;
line-height: 1.25;
margin: 1.2rem 0 0.5rem;
font-family: var(--v5-sans);
font-weight: 600;
color: var(--v5-ink);
}
body[data-module].slides-mode .v5-article p,
body[data-module].slides-mode .v5-article li {
font-size: 1.5rem;
line-height: 1.55;
}
body[data-module].slides-mode .v5-article ul,
body[data-module].slides-mode .v5-article ol {
margin: 1rem 0 1.25rem 1.5rem;
}
body[data-module].slides-mode .v5-article :not(pre) > code {
font-size: 1.3rem;
}
body[data-module].slides-mode .v5-article pre,
body[data-module].slides-mode .v5-code-block pre {
font-size: 1.7rem !important;
line-height: 1.5;
padding: 1.6rem 1.85rem;
}
body[data-module].slides-mode .side-by-side pre {
font-size: 1.3rem !important;
line-height: 1.5;
padding: 1.1rem 1.35rem;
}
/* ──────────────────────────────────────────────────────
RESPONSIVE
────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
body[data-module] .v5-main {
grid-template-columns: 1fr;
padding: 1.5rem 1.5rem 4rem;
}
body[data-module] .v5-aside {
position: static;
padding-top: 1.5rem;
border-top: 1px solid var(--v5-hairline);
}
}
@media (max-width: 800px) {
body[data-module] .v5-layout { grid-template-columns: 1fr; }
body[data-module] .v5-rail {
position: static;
width: 100%;
height: auto;
border-right: none;
border-bottom: 1px solid var(--v5-hairline);
}
body[data-module] .v5-read-bar { left: 0; }
}
/* ──────────────────────────────────────────────────────
LEGACY-CLASS OVERRIDES
──────────────────────────────────────────────────────
The current base-template.html uses pre-v5 structural
class names (.layout, .sidebar, .nav-section, .nav-link,
.main, .mode-toggle, .mode-btn). When the body has
data-module, these blocks override the equivalent rules
in shared/core-styles.css via higher specificity.
The legacy markup is left intact — only the styles change.
────────────────────────────────────────────────────── */
/* Outer flex grid → v5 grid layout */
body[data-module] .layout {
display: grid;
grid-template-columns: var(--rail-w) 1fr;
min-height: 100vh;
}
/* Sidebar — clean rail, pinned below the global top bar */
body[data-module] .sidebar {
width: var(--rail-w);
background: var(--v5-bg);
border-right: 1px solid var(--v5-hairline);
box-shadow: none;
padding: 1.1rem 1rem 3.25rem;
position: fixed;
top: var(--top-bar-h, 48px);
height: calc(100vh - var(--top-bar-h, 48px));
overflow-y: auto;
}
/* With the area spine present, the rail starts below BOTH chrome bars. */
body[data-module].has-area-spine .sidebar {
top: calc(var(--top-bar-h, 48px) + var(--area-spine-h, 42px));
height: calc(100vh - var(--top-bar-h, 48px) - var(--area-spine-h, 42px));
}
/* "Module M1" h3 in the rail — use the v5 mono eyebrow style */
body[data-module] .nav-section h3 {
padding: 0 0.5rem;
font-family: var(--v5-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--v5-muted);
margin-bottom: 0.6rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.4rem;
}
body[data-module] .nav-section h3 .emoji { display: none; }
body[data-module] .nav-section h3 .module-badge {
background: var(--accent) !important; /* override the inline hex from build.py */
border-color: var(--accent) !important;
font-family: var(--v5-mono);
font-size: 0.65rem;
font-weight: 600;
color: white;
padding: 2px 7px;
border-radius: var(--v5-r-sm);
letter-spacing: 0.04em;
}
/* Nav subsection wrapper — a spine segment. A continuous 2px line runs down
the left gutter (bridged across the inter-section gap), with one dot per
page link sitting on it (see .nav-link::before). */
body[data-module] .nav-subsection {
position: relative;
margin-bottom: 1.1rem;
}
/* spine segment behind this section's page links (the h4 label stays to the
left and un-dotted, so pages read as indented under their section). */
body[data-module] .nav-subsection::before {
content: '';
position: absolute;
left: 0.85rem;
top: 1.45rem;
bottom: 0.3rem;
width: 2px;
background: var(--v5-hairline);
}
body[data-module] .nav-subsection h4 {
padding: 0 0.5rem;
margin-bottom: 0.3rem;
font-family: var(--v5-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--v5-muted);
font-weight: 600;
}
/* Sidebar links — v5 spine-rail treatment: a dot on the spine, the current
page filled + ringed, completed pages green (tagged by tracker.js). */
body[data-module] .nav-link {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.32rem 0.5rem 0.32rem 1.7rem;
font-family: var(--v5-sans);
font-size: 0.875rem;
color: var(--v5-text);
text-decoration: none;
border-radius: var(--v5-r-sm);
line-height: 1.3;
transition: color 0.12s, background 0.12s;
}
body[data-module] .nav-link::before {
content: '';
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--v5-bg);
border: 2px solid var(--v5-hairline-2);
box-sizing: border-box;
transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
body[data-module] .nav-link:hover {
background: var(--accent-tint);
color: var(--v5-ink);
padding-left: 1.7rem; /* keep the page indent on hover */
padding-right: 0.5rem;
}
body[data-module] .nav-link:hover::before {
border-color: var(--accent);
}
/* completed pages — green dot, the same `completed` flag the dashboard reads */
body[data-module] .nav-link.done::before {
background: var(--v5-done);
border-color: var(--v5-done);
}
/* current page — accent dot + ring; declared last so it wins over .done */
body[data-module] .nav-link.active {
background: var(--accent-tint);
color: var(--v5-ink);
font-weight: 600;
}
body[data-module] .nav-link.active::before {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-tint);
}
/* Quiz / case-study badges already emitted by build.py — gentle restyle */
body[data-module] .nav-link .quiz-badge,
body[data-module] .nav-link .case-badge {
width: 16px;
height: 16px;
border-radius: 3px;
font-family: var(--v5-mono);
font-size: 0.55rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body[data-module] .nav-link .quiz-badge {
background: var(--accent);
color: white;
}
body[data-module] .nav-link .case-badge {
background: var(--accent-tint);
color: var(--accent);
border: 1px solid var(--accent);
}
/* ── Area-scoped rail (FA-26V5.6) ──────────────────────────────
The rail now shows the whole current AREA: every sub-module as a
collapsible group (current open, siblings collapsed). .nav-subsection
and .nav-link styling above is reused inside each module's body. */
body[data-module] .nav-area-label {
font-family: var(--v5-mono); font-size: 0.6rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--v5-muted);
margin: 0.1rem 0 0.7rem 0.2rem;
}
body[data-module] .nav-mod { --mod-accent: #64748b; margin-bottom: 0.15rem; }
body[data-module] .nav-mod + .nav-mod {
border-top: 1px solid var(--v5-hairline); margin-top: 0.35rem; padding-top: 0.45rem;
}
body[data-module] .nav-mod-head {
display: flex; align-items: center; gap: 0.45rem; width: 100%;
background: none; border: none; cursor: pointer; text-align: left;
font: inherit; color: inherit; padding: 0.3rem 0.3rem; border-radius: var(--v5-r-sm);
}
body[data-module] button.nav-mod-head:hover { background: var(--v5-surface); }
body[data-module] .nav-mod.solo .nav-mod-head { cursor: default; }
body[data-module] .nav-mod-chev {
flex: 0 0 auto; font-size: 0.7rem; color: var(--v5-muted);
transition: transform 0.15s ease;
}
body[data-module] .nav-mod.open .nav-mod-chev { transform: rotate(90deg); }
body[data-module] .nav-mod-head .module-badge {
flex: 0 0 auto; font-family: var(--v5-mono); font-weight: 600; font-size: 0.58rem;
color: #fff; padding: 1px 5px; border-radius: var(--v5-r-sm); letter-spacing: 0.02em;
}
body[data-module] .nav-mod-title {
font-family: var(--v5-serif); font-weight: 500; font-size: 0.95rem; color: var(--v5-ink);
}
body[data-module] .mod-prog {
margin-left: auto; font-family: var(--v5-mono); font-size: 0.58rem;
color: var(--v5-muted); white-space: nowrap;
}
body[data-module] .nav-mod-body { display: none; padding-left: 0.2rem; }
body[data-module] .nav-mod.open > .nav-mod-body,
body[data-module] .nav-mod.solo > .nav-mod-body { display: block; }
/* Main column — drop margin-left (parent is now grid), widen, breathe */
body[data-module] .main {
margin-left: 0;
grid-column: 2;
padding: 2rem 3rem 6rem;
max-width: 1280px;
width: 100%;
}
/* Slide-mode: hide the rail AND collapse the layout grid so the main
column reclaims the full viewport width (the sidebar column was still
reserving its 240px even with the rail display:none'd). */
body[data-module].slides-mode .sidebar { display: none; }
body[data-module].slides-mode .layout {
display: block; /* collapse the 240px + 1fr grid */
}
body[data-module].slides-mode .main {
margin-left: 0;
padding: 0.5rem 1rem;
max-width: 100vw;
width: 100%;
}
/* Override the template's inline .slide { padding: 60px 80px; } down
to a thin frame so .side-by-side can spread to (almost) the screen edge. */
body[data-module].slides-mode .slide {
padding: 1rem 1.25rem;
max-width: 100%;
}
/* Tighter gap so each of 3 columns gets more table width */
body[data-module].slides-mode .side-by-side {
gap: 0.75rem;
max-width: 100%;
width: 100%;
}
/* Mode toggle — pull it left to leave room for the auth widget at right:1rem */
body[data-module] .mode-toggle {
top: 1rem;
right: 5.5rem;
background: var(--v5-surface);
border: 1px solid var(--v5-hairline);
border-radius: 999px;
padding: 3px;
box-shadow: 0 1px 2px rgba(14,14,16,0.05);
z-index: 998; /* below the auth widget at 999 */
}
body[data-module] .mode-toggle .mode-controls {
display: flex;
gap: 2px;
background: none;
box-shadow: none;
padding: 0;
border: none;
}
body[data-module] .mode-btn {
font-family: var(--v5-mono);
font-size: 0.65rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--v5-muted);
padding: 5px 12px;
border-radius: 999px;
background: transparent;
box-shadow: none;
transition: all 0.15s;
}
body[data-module] .mode-btn:hover {
background: transparent;
color: var(--v5-ink);
}
body[data-module] .mode-btn.active {
background: var(--v5-ink);
color: white;
box-shadow: none;
}
/* ──────────────────────────────────────────────────────
PAGE H1 (the markdown's # title)
The converter drops the rendered MD straight into
.v5-article — so the first needs page-title styling.
Overrides legacy `h1` (gradient text) and `.main h1:first-of-type` (underline). */
body[data-module] .v5-article h1 {
background: none;
-webkit-text-fill-color: initial;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--v5-ink);
font-family: var(--v5-serif);
font-weight: 500;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 1.25rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--v5-hairline);
font-variation-settings: 'opsz' 144;
}
/* Be sure the legacy .main h1::after / underline don't render */
body[data-module] .v5-article h1::after,
body[data-module] .v5-article h1::before {
display: none !important;
content: none !important;
}
/* ══════════════════════════════════════════════════════
.v5-concept — the opening "Definition / Intuition /
Example" card that appears at the top of every concept
page in M1, M1B, and M2. One visually consistent
container instead of three loose paragraphs. Each
section's label (the bold leading word) is rendered as
a mono uppercase eyebrow above its paragraph.
══════════════════════════════════════════════════════ */
body[data-module] .v5-concept {
background: var(--v5-surface);
border: 1px solid var(--v5-hairline);
border-left: 4px solid var(--accent);
border-radius: var(--v5-r);
padding: 1.25rem 1.5rem;
margin: 1.25rem 0 2.25rem;
box-shadow: var(--v5-shadow-1);
}
body[data-module] .v5-concept p {
margin: 0 0 1.1rem;
font-size: 1rem;
line-height: 1.6;
color: var(--v5-ink);
}
body[data-module] .v5-concept p:last-child { margin-bottom: 0; }
body[data-module] .v5-concept p > strong:first-child {
display: block;
font-family: var(--v5-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--accent);
margin-bottom: 0.35rem;
}
body[data-module] .v5-concept code {
background: var(--accent-tint);
color: var(--accent);
padding: 1px 5px;
border-radius: 3px;
font-size: 0.9em;
}
/* Slides mode — projection-readable scale */
body[data-module].slides-mode .v5-concept {
padding: 1.75rem 2rem;
margin: 1.5rem 0 2.5rem;
}
body[data-module].slides-mode .v5-concept p {
font-size: 1.4rem;
line-height: 1.55;
}
body[data-module].slides-mode .v5-concept p > strong:first-child {
font-size: 0.85rem;
margin-bottom: 0.45rem;
}
/* ══════════════════════════════════════════════════════
.v5-callout — single canonical "callout" container,
replacing tagline-box / impact-box / intuition-box /
insight-box / control-box / integrity-explanation /
correctness-grid / .callout (and its info/warning
modifiers). One outer accent-tinted box; inner
renders as small uppercase mono eyebrow,
as a normal sub-heading; any direct child
is treated as a card-grid for breakdowns
like the "CRITICAL INSIGHT → 3 cards" pattern.
══════════════════════════════════════════════════════ */
body[data-module] .v5-callout {
background: var(--v5-surface);
border: 1px solid var(--v5-hairline);
border-left: 4px solid var(--accent);
border-radius: var(--v5-r);
padding: 1.1rem 1.4rem;
margin: 1.25rem 0 1.75rem;
box-shadow: var(--v5-shadow-1);
}
body[data-module] .v5-callout > h3 {
font-family: var(--v5-mono);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin: 0 0 0.65rem;
padding: 0;
border: none;
background: none;
}
body[data-module] .v5-callout > h4,
body[data-module] .v5-callout h4 {
font-family: var(--v5-sans);
font-size: 0.95rem;
font-weight: 600;
color: var(--v5-ink);
margin: 0 0 0.45rem;
letter-spacing: -0.005em;
}
body[data-module] .v5-callout p {
color: var(--v5-text);
margin: 0 0 0.55rem;
line-height: 1.55;
font-size: 0.95rem;
}
body[data-module] .v5-callout p:last-child { margin-bottom: 0; }
body[data-module] .v5-callout > ul,
body[data-module] .v5-callout > ol {
margin: 0 0 0.55rem 1.4rem;
padding: 0;
color: var(--v5-text);
}
body[data-module] .v5-callout li {
margin: 0.15rem 0;
line-height: 1.55;
font-size: 0.95rem;
}
body[data-module] .v5-callout code {
background: var(--accent-tint);
color: var(--accent);
padding: 1px 5px;
border-radius: 3px;
font-size: 0.9em;
}
/* Severity variants: only recolor the accent left border (no icon,
no background change) so they layer cleanly on the canonical box. */
body[data-module] .v5-callout--warn { border-left-color: var(--v5-warn); }
body[data-module] .v5-callout--danger { border-left-color: var(--v5-danger); }
body[data-module] .v5-callout--info { border-left-color: var(--accent); }
/* Note: nested divs inside .v5-callout are NOT auto-styled as a grid.
Page-specific layouts (e.g. .connection-flow, .definition-cards inside
a callout) bring their own display rules. Earlier auto-grid here
produced "callout-inside-callout" double-borders on single nested
divs and clashed with page-specific flex layouts. */
/* Slides mode — projection-readable scale */
body[data-module].slides-mode .v5-callout {
padding: 1.5rem 1.8rem;
}
body[data-module].slides-mode .v5-callout p,
body[data-module].slides-mode .v5-callout li { font-size: 1.2rem; }
body[data-module].slides-mode .v5-callout > h3 { font-size: 0.85rem; }
body[data-module].slides-mode .v5-callout > h4,
body[data-module].slides-mode .v5-callout h4 { font-size: 1.15rem; }
/* ══════════════════════════════════════════════════════
SIDE-BY-SIDE LAYOUT — coherent system, not spot fixes
══════════════════════════════════════════════════════
Design intent (this is the only block that styles
.side-by-side; don't add scattered overrides elsewhere):
• DOCS mode = compact reading at desk distance.
td font 0.78rem, tight padding,
3 columns down to ~960px viewport.
• SLIDES mode = projection from across a room.
td font ≥1rem, generous padding,
columns gracefully fall back to
2-col then 1-col on narrower screens
so text never has to shrink.
Tables inside side-by-side use table-layout:fixed so
their width is bounded by the grid cell. The .color-bar
first column keeps its 6px (its width:6px !important
wins). Word-break stays at "normal" — words break
only when truly impossible to fit. */
/* Tables fit their grid cell, never overflow into a neighbour. */
body[data-module] .side-by-side table {
table-layout: fixed;
width: 100% !important;
max-width: 100%;
margin: 0 auto;
}
body[data-module] .side-by-side th,
body[data-module] .side-by-side td {
word-break: normal;
overflow-wrap: break-word;
white-space: normal;
hyphens: none;
font-family: var(--v5-mono);
line-height: 1.4;
}
/* DOCS — compact, dense, desk-distance reading. */
body[data-module] .side-by-side th {
padding: 0.3rem 0.4rem !important;
font-size: 0.7rem !important;
}
body[data-module] .side-by-side td {
padding: 0.3rem 0.45rem !important;
font-size: 0.78rem !important;
}
/* SLIDES — projector size. Larger text, larger padding.
Same scale as the body (.slides-mode body { font-size: 24px }
gives ~17–18px for these). Don't shrink to "make 3 cols fit" —
the responsive fallback below handles narrow viewports. */
body[data-module].slides-mode .side-by-side th {
padding: 0.5rem 0.7rem !important;
font-size: 0.9rem !important;
}
body[data-module].slides-mode .side-by-side td {
padding: 0.55rem 0.75rem !important;
font-size: 1.05rem !important;
}
/* Responsive fallback — 3-col → 2-col → 1-col instead of
shrinking text. Slides projected at ≥1500px get the full
3-col layout; smaller windows degrade gracefully. */
@media (max-width: 1500px) {
body[data-module].slides-mode .side-by-side.cols-3 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1100px) {
body[data-module].slides-mode .side-by-side,
body[data-module].slides-mode .side-by-side.cols-3,
body[data-module].slides-mode .side-by-side.cols-4 {
grid-template-columns: 1fr;
}
}
|