/* The guides, tools, comparisons and hubs (made by tools/site.mjs), on top of base.css. One reading column of 68
   characters; on a wide screen the contents sit beside it, sticky. The same language as the home page: white, Inter
   Light headings in two tones, small mono labels, flat tinted cards (shadows only on objects such as a knob), one
   radius family (--r for cards, 14 px for controls, 999 px for pills), colour only in pictures and the sun.
   Hairlines are translucent (rgb with alpha), so they stay crisp on white and on a tint. */
:root { --measure: 68ch; --rule: rgb(20 20 18 / 0.09); --press: cubic-bezier(0.34, 1.56, 0.64, 1); --ctl: 14px; }

.post-page main { padding-top: clamp(116px, 13vw, 168px); }
.post, .hub { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- The head: crumbs, the two-tone H1, the quick answer, the byline. One left edge for all of them. */
.post-head, .post-grid > .prose { width: 100%; max-width: var(--measure); }
.post-head { margin-inline: auto; display: grid; gap: 24px; }
.post-head .title { font-size: clamp(36px, 4.6vw, 58px); }
.post-head .lede { max-width: 56ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.crumbs a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.crumbs a:hover { color: var(--ink); }
.answer { display: grid; gap: 10px; padding: 22px 24px 24px; border-radius: 20px; background: var(--surface); }
.answer p { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; }
.answer strong { font-weight: 600; }
.byline { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.byline span { white-space: nowrap; }

/* ---------- The body column, and the contents beside it on a wide screen. */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 5vw, 64px); }   /* minmax(0, …): a wide table must not widen the page on a phone */
.post-grid > .prose { margin-inline: auto; }
/* The contents, after LessWrong's (founder, 1 Nov 2026; tools/site.mjs, tocHtml): the title in small capitals with
   the reading time under it, then the headings in light grey down a thin line, a small tick on the line at each one,
   sub-headings indented, no numbers. The section on screen gets a thicker, darker stretch of the line (page.js, .on).
   On a phone it sits at the top of the article, plain; on a wide screen it is sticky beside the text and each entry
   is spaced by how long its section is (--w), so the list roughly maps the page. */
/* The line, the ticks and the marker sit inside the padding box (x = 0 to 3 px), so the wide screen's overflow-y: auto
   cannot clip them. */
.toc { margin: 0 auto 40px; width: 100%; max-width: var(--measure); position: relative; padding: 2px 0 2px 18px; }
.toc::before { content: ""; position: absolute; left: 1px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.toc-title { font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; font-variant-caps: small-caps; font-size: 17px; color: var(--ink); text-wrap: balance; }
.toc-time { margin-top: 4px; font-size: 13px; color: var(--soft); }
@media (max-width: 1179px) { .toc-title, .toc-time { display: none; } .toc ol { margin-top: 0; } }   /* the title and time are just above */
.toc ol { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.toc li { position: relative; }
.toc li.l3 { padding-left: 14px; }
.toc a { display: block; padding: 4px 0; font-size: 14.5px; line-height: 1.35; color: var(--soft); text-decoration: none; transition: color 0.2s; text-wrap: pretty; }
.toc li.l3 a { font-size: 13.5px; }
/* the tick on the line (2 px, a pixel of the wordmark), and the darker stretch for the section on screen */
.toc li::before { content: ""; position: absolute; left: -18px; top: 12px; width: 3px; height: 3px; background: #BDBDB7; }
.toc li::after { content: ""; position: absolute; left: -18px; top: 0; bottom: 0; width: 3px; background: var(--ink); border-radius: 2px; opacity: 0; transition: opacity 0.25s; }
.toc li.on::after { opacity: 0.8; }
.toc li.on > a, .toc a:hover { color: var(--ink); }
@media (min-width: 1180px) {
  /* Three columns: the contents, the reading column, an empty column that keeps the reading column centred. */
  .post-grid { grid-template-columns: minmax(0, 1fr) var(--measure) minmax(0, 1fr); column-gap: 56px; }
  .post-grid > .prose { grid-column: 2; grid-row: 1; }
  .toc { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 104px; width: 240px; max-width: 240px; margin: 6px 0 0; justify-self: end;
    display: flex; flex-direction: column; height: min(calc(100svh - 150px), 900px); overflow-y: auto; scrollbar-width: none; }
  /* each entry's share of the column's spare height follows its section's length */
  .toc ol { flex: 1; display: flex; flex-direction: column; gap: 0; margin-top: 40px; }
  .toc li { flex: var(--w, 0.1) 1 auto; min-height: fit-content; }
}
/* ---------- Prose: 18 px at 1.65, a rhythm in steps of 0.5 lines. */
.prose { font-size: clamp(17px, 1.25vw, 18px); line-height: 1.65; text-wrap: pretty; hanging-punctuation: first; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.6em; font-size: clamp(26px, 2.4vw, 32px); font-weight: 300; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; scroll-margin-top: 104px; }
.prose h3 { margin-top: 2em; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose strong { font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(20 20 18 / 0.3); transition: text-decoration-color 0.2s; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose ul { list-style: none; }
/* A square bullet: the pixel the wordmark is drawn from. */
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.1em; top: 0.68em; width: 6px; height: 6px; background: var(--soft); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font: 500 0.8em var(--mono); color: var(--soft); }
.prose blockquote { margin-inline: 0; padding-left: 22px; border-left: 2px solid var(--line); font-size: 1.2em; font-weight: 300; line-height: 1.45; letter-spacing: -0.015em; color: var(--muted); }
.prose hr { border: 0; height: 1px; background: var(--rule); margin-block: 2.5em; }
.prose img, .prose video { border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(20 20 18 / 0.06); }
.prose code { font: 0.88em var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--surface); }
.prose small { font-size: 14px; color: var(--muted); }

/* Diagrams: inline SVG on a tint, labelled in cm. figcaption under it, in the muted grey. */
.prose figure { margin-block: 2em; }
.prose figure.diagram { padding: clamp(16px, 3vw, 32px); border-radius: var(--r); background: var(--surface); }
.prose figure svg { display: block; width: 100%; height: auto; max-height: 460px; }
.prose figure svg text { font-family: var(--font); }
.prose figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.prose figure.diagram figcaption { text-align: center; }

/* A callout: a tinted note with one sun pixel. */
.callout { position: relative; padding: 20px 24px 20px 46px; border-radius: 18px; background: var(--surface); font-size: 0.95em; }
.callout::before { content: ""; position: absolute; left: 22px; top: calc(20px + 0.62em); width: 8px; height: 8px; background: #F2A93B; }
.callout > * + * { margin-top: 0.6em; }
.callout.warn::before { background: var(--ink); }

/* Tables: they scroll sideways inside their box on a phone, never the page. Numbers in tabular figures; put
   class="num" on a cell to right-align a column of numbers. */
.table { overflow-x: auto; margin-block: 1.8em; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.prose th, .prose td { min-width: 6.5em; padding: 13px 16px; text-align: left; vertical-align: top; }
@media (max-width: 559px) { .prose table { font-size: 14.5px; } .prose th, .prose td { padding: 11px 10px; } .prose th:first-child, .prose td:first-child { padding-left: 14px; } }
.prose th { font: 500 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--surface); white-space: nowrap; }
.prose tr + tr td, .prose tbody tr:first-child td { border-top: 1px solid var(--rule); }
.prose td:first-child { font-weight: 500; }
.prose .num { text-align: right; }
.prose caption { caption-side: bottom; padding: 12px 16px; font-size: 14px; color: var(--muted); text-align: left; }

/* ---------- Questions (FAQ), as on the home page: a + that turns to a ×. */
.post-faq { margin-top: 3.5em; }
.post-faq h2 { margin-bottom: 0.4em; }
.post-faq details { border-bottom: 1px solid var(--rule); }
.post-faq details + details { margin-top: 0; }
.post-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; transition: color 0.2s; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; flex: none; font-weight: 300; font-size: 26px; line-height: 1; color: var(--muted); transition: transform 0.35s var(--press); }
.post-faq details[open] summary::after { transform: rotate(45deg); }
.post-faq summary:hover { color: var(--muted); }
.post-faq details > div { padding: 0 0 22px; color: var(--muted); }

/* ---------- Editorial notes: who wrote it, when it was checked, the sources. */
.notes { margin-top: 3.5em; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.prose .notes h2 { margin: 0 0 10px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.notes ol { margin-top: 14px; padding-left: 1.6em; }
.notes a { color: var(--muted); word-break: break-word; }

/* ---------- The App Store ending, as on the home page. */
.post-cta { display: grid; justify-items: center; gap: 28px; margin: var(--space) auto 0; padding: 0 var(--gutter) var(--space); text-align: center; }
.post-cta .sun { width: 56px; height: 56px; }
.post-cta .title { font-size: clamp(34px, 4.2vw, 56px); }
.post-cta .title .soft { display: block; }
.post-cta .micro { margin-top: -14px; }

/* ---------- Cards: related pages and the hubs. Flat tint, a spring on press. */
.related { padding-bottom: var(--space); }
.related > .label { display: block; margin-bottom: 20px; text-align: center; }
/* One to three cards, centred under the reading column. */
@media (min-width: 640px) { .related .cards { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; } }
.hub .cards { margin-top: clamp(48px, 6vw, 80px); padding-bottom: 8px; }
.cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; min-height: 220px; padding: var(--pad); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none;
  transition: background-color 0.25s, transform 0.4s var(--press); }
.card:hover { background: var(--tint); }
.card:active { transform: scale(0.985); transition-duration: 0.15s; }
.card b { font-size: 21px; font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.card-text { font-size: 15px; line-height: 1.5; color: var(--muted); }
.card .go { font-size: 14px; font-weight: 500; transition: transform 0.3s var(--ease); }
.card:hover .go { transform: translateX(3px); }
.hub .post-head { margin-inline: 0; max-width: 860px; }

/* ---------- /about-snuug: the fact sheet. */
.facts { display: grid; margin: 1.4em 0 0; border-top: 1px solid var(--rule); }
.facts > div { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 500 11px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; }
@media (min-width: 640px) { .facts > div { grid-template-columns: 170px 1fr; } }
.facts-two { display: grid; gap: 12px; }
.facts-two > div { padding: var(--pad); border-radius: var(--r); background: var(--surface); }
.facts-two h3 { margin: 0 0 10px; }
@media (min-width: 640px) { .facts-two { grid-template-columns: 1fr 1fr; } }

/* ---------- The calculator kit (the tools agent's scripts fill it; tools.css adds what one tool needs).
   <div class="tool">: a tinted panel. .field = a label over a control. .input = a number box with its unit inside.
   .seg = a segmented control (radio inputs). .result = the answer, dark, the number in the pixel font. */
.tool { display: grid; gap: 20px; margin-block: 2em; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--surface); font-size: 16px; line-height: 1.4; }
/* A phone: the calculator reaches to 8 px from the screen's edges, so its fields and its answer get the width. */
@media (max-width: 559px) { .tool { margin-inline: calc(8px - var(--gutter)); padding: 22px 16px; border-radius: 24px; } }
.tool .row { display: grid; gap: 16px; }
@media (min-width: 560px) { .tool .row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .field-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field .hint { font-size: 13px; color: var(--muted); }
.input { position: relative; display: flex; align-items: center; }
.tool input[type="number"], .tool input[type="text"], .tool select {
  width: 100%; height: 54px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--ctl); background: #FFF; color: var(--ink);
  font: 400 20px/1 var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgb(20 20 18 / 0.1); transition: box-shadow 0.2s; appearance: none; -webkit-appearance: none; }
.input input { padding-right: 56px; }
.tool input:hover, .tool select:hover { box-shadow: inset 0 0 0 1px rgb(20 20 18 / 0.22); }
.tool input:focus-visible, .tool select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.tool input[type="number"]::-webkit-inner-spin-button, .tool input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tool input[type="number"] { -moz-appearance: textfield; }
.tool select { padding-right: 44px; background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6B66' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center; font-size: 17px; }
.unit { position: absolute; right: 16px; font: 500 13px/1 var(--mono); color: var(--muted); pointer-events: none; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--tint); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; text-align: center; white-space: nowrap; color: var(--muted);
  transition: background-color 0.25s, color 0.2s, box-shadow 0.25s, transform 0.35s var(--press); }
.seg label:hover span { color: var(--ink); }
.seg input:checked + span { background: #FFF; color: var(--ink); box-shadow: 0 1px 2px rgb(20 20 18 / 0.08), 0 4px 12px -4px rgb(20 20 18 / 0.18); }
.seg label:active span { transform: scale(0.96); transition-duration: 0.12s; }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* A slider: a thin track and a white knob with a shadow (the knob is an object). */
.tool input[type="range"] { width: 100%; height: 32px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.tool input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--tint); }
.tool input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--tint); }
.tool input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgb(20 20 18 / 0.15), 0 4px 14px rgb(20 20 18 / 0.2); transition: transform 0.35s var(--press); }
.tool input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgb(20 20 18 / 0.15), 0 4px 14px rgb(20 20 18 / 0.2); }
.tool input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.tool input[type="range"]:focus-visible { outline: none; }
.tool input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.tool button:not(.badge) { height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--tint); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 0.25s, transform 0.4s var(--press); }
.tool button:not(.badge):hover { background: #E2E2DE; }
.tool button:not(.badge):active { transform: scale(0.96); transition-duration: 0.15s; }
.result { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: var(--ink); color: #FFF; }
.result .label { color: rgb(255 255 255 / 0.6); }
.result-value { font: 400 clamp(30px, 4vw, 40px)/1.05 var(--pixel); -webkit-font-smoothing: none; font-variant-numeric: tabular-nums; }
.result-value small { font: inherit; font-size: 0.6em; opacity: 0.6; }

@media print {
  .top, .post-cta, .related, .foot, .toc { display: none; }
  .post-page main { padding-top: 0; }
  .prose a { text-decoration: none; }
  .answer, .callout, .tool, .prose figure.diagram { background: none; box-shadow: inset 0 0 0 1px #CCC; }
  .post-faq details > div { display: block; }
}