/* Generated by scripts/build-explains-pages.mts - edit the template there, not here. */
/* The sticky-rail fix (.doc-side align-self + .rail max-height) used to live
   here, scoped to Explains while the 30 live ID guides were left alone. It is in
   guides.css now, which both page types load, because the bug was never specific
   to these pages - it was in the shared layout the whole time. Do not add a
   second copy back: two owners of one rule is how they drift. */
.summary-top{font-size:17px;line-height:1.6;color:var(--ink-soft);border-top:1px solid var(--hairline);padding-top:18px;margin:0 0 6px}
.microlabel{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.doc-main h2{scroll-margin-top:78px}
.doc-main h3{font-size:16.5px}
/* THE DIAGRAMS GET MORE WIDTH THAN THE PROSE, and they have to. A 760px column
   is right for reading and wrong for a 2,480px drawing whose own labels are 10px
   - at 760 they render around 3px, which is not small, it is invisible. So the
   text keeps its 760 measure and the figures fill the whole content column.
   Widening the prose to match instead would fix the diagrams by making every
   page harder to read, which is the wrong half to move. */
/* Only the DETAIL pages widen (.wrap.doc), not the index. guides.css caps .wrap
   at 1120, which after padding, the 40px gap and the 280px rail leaves a 752px
   content column - narrower than the 760 measure, so the figures were being set
   by the column, not by their own rule. Lifting the cap gives roughly 1072 on a
   1440 laptop. It does not reach the 1240 these diagrams are drawn at, which is
   why "Open full size" is the real fix and this is the one that makes the page
   worth looking at before you click. */
.wrap.doc{max-width:1500px}
.doc{--measure:760px}
.doc-main{max-width:none}
.doc-main>*:not(.fig):not(.vid){max-width:var(--measure)}
.fig{margin:30px 0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--wash)}
/* zoom-in is the hint for a mouse; the caption link is the one for everyone else. */
.fig>a{display:block;line-height:0;cursor:zoom-in}
.fig img{display:block;width:100%;height:auto;background:#fff}
.fig figcaption{display:flex;gap:16px;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--ink-faint);padding:10px 14px;border-top:1px solid var(--hairline)}
.fig figcaption a{white-space:nowrap;font-weight:700;text-decoration:none;border-bottom:1px solid var(--hairline)}
/* Double backslash: this CSS lives in a TS template literal, where a bare \2197
   is a legacy octal escape and fails the build outright. */
.fig figcaption a:after{content:" \2197"}
.fig figcaption a:hover{border-bottom-color:var(--accent-ink)}
.callout{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);padding:15px 18px;margin:24px 0}
.callout h3{margin:0 0 6px;font-size:16px;color:var(--warn-ink)}
.callout p{margin:0;font-size:15px;color:var(--warn-ink)}
/* The analogy is what a beginner remembers, so it is set apart rather than
   folded into the prose. Accent rule on the left, not a filled card - a page of
   filled cards is a page where nothing stands out. */
.analogy{border-left:3px solid var(--accent);background:var(--wash);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;margin:24px 0}
.analogy p:last-child{margin:0;font-size:15.5px;color:var(--ink-soft)}
blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--hairline);background:var(--wash);border-radius:0 var(--radius) var(--radius) 0;font-size:15.5px;color:var(--ink-soft)}
blockquote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;color:var(--ink-faint)}
.code{background:#12151b;color:#e7eaf0;border-radius:var(--radius);padding:15px 17px;overflow-x:auto;font:400 13.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;margin:22px 0}
.code code{font:inherit}
code{background:var(--wash);border:1px solid var(--hairline);border-radius:6px;padding:1px 5px;font:400 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.code code{background:none;border:0;padding:0}
/* A wide table on a phone scrolls inside its own box. The page body must never
   scroll sideways. */
.tw{overflow-x:auto;margin:22px 0;border:1px solid var(--hairline);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--hairline);vertical-align:top}
thead th{background:var(--wash);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
tbody th{font-weight:700;color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.vid{margin:26px 0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.vid a{display:block;position:relative;line-height:0}
.vid img{display:block;width:100%;height:auto}
.vid .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(15,17,21,.78)}
.vid .play:after{content:"";position:absolute;left:25px;top:20px;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.vid figcaption{padding:11px 15px;border-top:1px solid var(--hairline);font-size:13.5px}
.vid figcaption b{display:block;color:var(--ink)}
.vid figcaption span{color:var(--ink-faint);font-size:12.5px}
.border-note{border-top:1px solid var(--hairline);padding-top:14px;margin-top:22px}
.defs{margin:0}
.defs div{margin:0 0 11px}
.defs dt{font-size:13.5px;font-weight:700;margin:0}
.defs dd{margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--ink-faint)}
.more{margin-top:44px;border-top:1px solid var(--hairline);padding-top:20px}
.more h4,.rail h4{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.more .cards p{font-size:13.5px}
.more .fine{margin-top:14px;font-size:13.5px}