/* ============================================================================ AI SYSTEM DESIGN GUIDE — site additions Loaded AFTER book.css. book.css is frozen; this file only ADDS. Three jobs: 1. the components the guide's renderer emits that the book never needed (toc cards, task lists, Q&A, reference lists, math, dead links, …) 2. the two page types the book never had — a section hub, and a home page 3. the shell furniture shell.js builds — search, keys, pager, breadcrumb No new colours. Seven semantic hues and the paper/ink ramp, exactly as book.css defines them. Where a component needs "whatever hue this thing is", it reads --h / --h-d / --h-f / --h-l, which §0 below binds to one of the seven. ========================================================================= */ /* ------------------------------------------------------------ 0. HUE BINDING The contract puts data-hue on ; a card carries its own data-hue when it speaks for a different section than the page it sits on. Declaring --h at the element that owns the hue means every descendant inherits the right one. NOTE: .rail redefines --clay … --olive for its dark ground, so nothing inside the rail may read --h (it would inherit the page's resolution). The rail uses --g, set on rail elements themselves, exactly as book.css expects. */ :root { --h: var(--ink-3); --h-d: var(--ink-2); --h-f: var(--paper-3); --h-l: var(--line-2); } [data-hue="clay"] { --h: var(--clay); --h-d: var(--clay-d); --h-f: var(--clay-f); --h-l: var(--clay-l); } [data-hue="indigo"] { --h: var(--indigo); --h-d: var(--indigo-d); --h-f: var(--indigo-f); --h-l: var(--indigo-l); } [data-hue="teal"] { --h: var(--teal); --h-d: var(--teal-d); --h-f: var(--teal-f); --h-l: var(--teal-l); } [data-hue="amber"] { --h: var(--amber); --h-d: var(--amber-d); --h-f: var(--amber-f); --h-l: var(--amber-l); } [data-hue="crimson"] { --h: var(--crimson); --h-d: var(--crimson-d); --h-f: var(--crimson-f); --h-l: var(--crimson-l); } [data-hue="plum"] { --h: var(--plum); --h-d: var(--plum-d); --h-f: var(--plum-f); --h-l: var(--plum-l); } [data-hue="olive"] { --h: var(--olive); --h-d: var(--olive-d); --h-f: var(--olive-f); --h-l: var(--olive-l); } /* ------------------------------------------------- 0b. MOTION IS OPT-IN book.css starts .reveal at opacity:0 and shell.js reveals each block as it scrolls into view. That is correct while the script runs — and catastrophic when it does not: a blocked script, a crawler, reader mode or a stalled asset leaves every section of every page invisible, which for this site means the entire body of all 108 pages. So the hiding is armed by the script itself. shell.js puts .js-motion on as its first statement, before first paint; until then, and forever if it never runs, .reveal is simply visible. */ html:not(.js-motion) .reveal, html:not(.js-motion) figure.fig svg .fade, html:not(.js-motion) figure.fig svg .fade-el, html:not(.js-motion) figure.fig svg .fade2, html:not(.js-motion) figure.fig svg .pop { opacity: 1; } html:not(.js-motion) .reveal { transform: none; } html:not(.js-motion) .bars .bar-t > i { transform: none; } /* A page with no sections of its own gets no minimap; reclaim its gutter. */ body.no-mm .book { margin-left: 0; } body.no-mm #tg-minimap { display: none !important; } /* ============================================================================ 1 · THE RENDERER'S COMPONENTS ========================================================================= */ /* ------------------------------------------------------- 1a. h5 / h6 Below h4 the book stops using display type and switches to apparatus: h5 is a bold UI line, h6 is a label. Anything deeper than that is a list. */ h5, .h5 { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; margin: var(--sp-5) 0 var(--sp-2); color: var(--ink); letter-spacing: -.002em; } h6, .h6 { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; line-height: 1.4; margin: var(--sp-4) 0 var(--sp-2); color: var(--ink-3); } /* --------------------------------------------------------- 1b. .toc-card The in-file "## Table of Contents". The left minimap already navigates the page, so this is a compact card, not a second sidebar: numbered, two-up when there is room, quiet links that only colour on hover. */ nav.toc-card { margin: var(--sp-5) 0 var(--sp-7); max-width: var(--w-wide); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-1); } .toc-k { font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); } .toc-k::after { content: ""; flex: 1; height: 1px; background: var(--line); } nav.toc-card ul { list-style: none; margin: 0; padding: 0; max-width: none; counter-reset: toc; } nav.toc-card > ul { column-gap: var(--sp-7); } @media (min-width: 780px) { nav.toc-card > ul { column-count: 2; } } nav.toc-card li { margin: 0 0 5px; break-inside: avoid; display: grid; grid-template-columns: 1.7rem 1fr; align-items: baseline; font-size: var(--fs-sm); line-height: 1.45; } nav.toc-card > ul > li::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--fs-mono-sm); color: var(--ink-4); font-variant-numeric: tabular-nums; } nav.toc-card li li { grid-template-columns: 1rem 1fr; font-size: var(--fs-xs); } nav.toc-card li li::before { content: "\2013"; color: var(--line-3); } nav.toc-card ul ul { grid-column: 1 / -1; padding-left: 1.7rem; margin-top: 5px; } nav.toc-card a { color: var(--ink-2); background-image: none; transition: color .14s var(--ease); } nav.toc-card a:hover { color: var(--indigo); } /* ------------------------------------------------- 1c. .checks — task lists A real drawn box, not a glyph: a 13px square in the paper's own line colour, ticked in teal because a done item is a verified item. */ ul.checks { list-style: none; margin: 0 0 var(--sp-4); padding: 0; max-width: var(--measure); } li.chk { position: relative; display: grid; grid-template-columns: 1.35rem 1fr; align-items: start; margin-bottom: var(--sp-2); line-height: var(--lh-body); } li.chk::before { content: ""; width: 13px; height: 13px; margin-top: .34em; border: 1.5px solid var(--line-3); border-radius: 3px; background: var(--panel); box-sizing: border-box; } li.chk.is-done::before { background: var(--teal); border-color: var(--teal-d); } li.chk.is-done::after { content: ""; position: absolute; left: 4px; top: .52em; width: 4px; height: 8px; box-sizing: border-box; border-right: 2px solid var(--panel); border-bottom: 2px solid var(--panel); transform: rotate(41deg); } li.chk.is-done { color: var(--ink-3); } li.chk.is-done strong { color: var(--ink-2); } li.chk > ul, li.chk > ol { grid-column: 2; margin-top: var(--sp-2); } /* ------------------------------------------------- 1d. .qa — interview pairs Q is a claim being put to you (clay); A is the evidence you answer with (teal). The chips carry the hue so the prose does not have to. */ .qa { margin: var(--sp-4) 0; max-width: var(--w-wide); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--clay); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-1); } .qa + .qa { margin-top: var(--sp-3); } .qa-q, .qa-a { position: relative; padding-left: 2.1rem; max-width: none; } .qa-q::before, .qa-a::before { position: absolute; left: 0; top: .1em; font-family: var(--f-mono); font-size: var(--fs-mono-sm); font-weight: 700; width: 1.45rem; text-align: center; line-height: 1.5; border-radius: var(--r-sm); border: 1px solid; } .qa-q { font-weight: 650; color: var(--ink); margin: 0 0 var(--sp-3); font-size: var(--fs-body); line-height: 1.5; } .qa-q::before { content: "Q"; color: var(--clay-d); background: var(--clay-f); border-color: var(--clay-l); } .qa-a { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); margin: 0; } .qa-a::before { content: "A"; color: var(--teal-d); background: var(--teal-f); border-color: var(--teal-l); } .qa-a > p { max-width: none; margin: 0 0 var(--sp-2); } .qa-a > p:last-child { margin-bottom: 0; } .qa-a ul, .qa-a ol { margin: var(--sp-2) 0 0; padding-left: 1.1rem; max-width: none; } /* --------------------------------------------- 1e. .reflist — further reading A reference is a promise you can check, so the domain is shown, right-set, as a .tag. Hairlines between rows; no bullets. */ ul.reflist { list-style: none; margin: var(--sp-4) 0; padding: 0; max-width: var(--w-wide); } ul.reflist > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) 0; margin: 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.5; } ul.reflist > li:first-child { border-top: 0; padding-top: 0; } /* the anchor must not stretch: a flex-grown drags its underline gradient across the whole row, which reads as a rule, not a link */ ul.reflist > li > a, ul.reflist > li > .deadlink { flex: 0 1 auto; min-width: 0; } ul.reflist .tag { margin-left: auto; flex: none; white-space: nowrap; } /* ------------------------------------------------- 1f. .math — display maths Raw LaTeX, preserved verbatim. Centred, monospace, ruled top and bottom so it reads as a set-off equation rather than a code block. */ .math { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-4); max-width: var(--w-wide); text-align: center; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(var(--paper-2), var(--paper-2)); background-size: 100% 100%; } .math > code { font-family: var(--f-mono); font-size: var(--fs-mono); line-height: 1.7; color: var(--ink-2); background: none; border: 0; padding: 0; white-space: pre-wrap; display: inline-block; text-align: left; } /* ----------------------------------------------- 1g. .deadlink — no target A link whose file is not in the repo. It must look like an editorial decision, not a broken anchor: ink, a dotted rule, and a dagger — the printer's mark for "see note". Never blue, never underlined solid. */ .deadlink { color: var(--ink-2); border-bottom: 1px dotted var(--line-3); cursor: help; } .deadlink::after { content: "\2020"; font-size: .78em; vertical-align: .34em; color: var(--ink-4); margin-left: .12em; } /* -------------------------------------------- 1h. .ext — external link mark A hairline arrow, sized to the type. Not an emoji: the book has no emoji. */ a.ext::after { content: "\2197"; font-size: .72em; line-height: 1; vertical-align: .18em; margin-left: .18em; color: var(--ink-4); font-family: var(--f-ui); } a.ext:hover::after { color: var(--indigo); } /* ------------------------------------- 1i. .tbl--compare — pro / con columns Two columns, one claim each. Teal is what holds up, crimson is what breaks. The tint is the -f wash only; the text stays in ink so it stays readable. */ table.tbl--compare th:first-child { background: var(--teal-f); color: var(--teal-d); border-bottom-color: var(--teal-l); } table.tbl--compare th:nth-child(2) { background: var(--crimson-f); color: var(--crimson-d); border-bottom-color: var(--crimson-l); } table.tbl--compare tbody td:first-child, table.tbl--compare tbody tr:hover td:first-child { background: var(--teal-f); } table.tbl--compare tbody td:nth-child(2), table.tbl--compare tbody tr:hover td:nth-child(2) { background: var(--crimson-f); } table.tbl--compare tbody td:first-child { box-shadow: inset 3px 0 0 -1px var(--teal-l); } table.tbl--compare tbody td:nth-child(2) { box-shadow: inset 3px 0 0 -1px var(--crimson-l); } /* ---------------------------------------- 1j. .term-copy — copy the code out Lives inside the dark component, so it wears the dark component's palette. Appears on hover or keyboard focus; the title bar reserves room for it so it can never sit on top of .term-meta. */ .term { position: relative; } .term:has(.term-copy) .term-bar { padding-right: 5.6rem; } button.term-copy { position: absolute; top: 9px; right: var(--sp-4); z-index: 2; font-family: var(--f-mono); font-size: var(--fs-mono-sm); line-height: 1; padding: 6px 11px; border-radius: 6px; cursor: pointer; background: var(--t-panel); color: var(--t-dim); border: 1px solid var(--t-line); opacity: 0; transition: opacity .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .term:hover button.term-copy, button.term-copy:focus-visible { opacity: 1; } button.term-copy:hover { color: var(--t-fg); border-color: var(--t-dim); } button.term-copy.is-copied { opacity: 1; color: var(--t-green); border-color: var(--t-green); } button.term-copy.is-failed { opacity: 1; color: var(--t-red); border-color: var(--t-red); } @media (hover: none) { button.term-copy { opacity: 1; } } /* --------------------------------------- 1k. .mermaid-fig — a drawn diagram Framed exactly like figure.fig .fig-frame, because that is what it is. The diagram itself belongs to design/mermaid-init.js, which owns the theme and injects its own