/* The answer pages (/answers/<slug>) and their hub (/answers), on top of base.css and post.css (tools/answers.mjs).
   The same hand as the guides: paper and ink, Inter Light headings, small mono labels, flat tinted cards, black
   pills, colour only in the drawing. The one new thing is the figure at the top of the quick answer: the number on
   its own, in the pixel font the calculators answer in, so a phone's first screen holds the question and its answer. */

/* ---------- The head: the question, then the answer. */
.answer-page .post-head .title { font-size: clamp(32px, 4.2vw, 52px); }
.a-answer { gap: 12px; }
.a-stat { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.a-stat b { font: 400 clamp(30px, 4vw, 40px)/1.05 var(--pixel); letter-spacing: 0; -webkit-font-smoothing: none; font-variant-numeric: tabular-nums; text-wrap: balance; }
.answer .a-stat span { font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.answer-page .byline a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(20 20 18 / 0.25); }
.answer-page .byline span { white-space: normal; }

/* ---------- The body. It opens with a paragraph, so it sits closer under the head than a guide's contents do. */
.answer-page .post-grid { margin-top: clamp(28px, 4vw, 44px); }
/* The drawing is the calculator's own, made at a phone's width: on a wide screen it stays that size, centred. */
.prose figure.a-fig svg { max-width: 440px; margin-inline: auto; }
/* What the answer was worked out for: a quiet card, with the way to the calculator at its end. */
.a-for { padding: 16px 20px 18px; border-radius: 18px; background: var(--surface); font-size: 0.92em; line-height: 1.55; color: var(--muted); }
.a-for .label { display: block; margin-bottom: 6px; }
/* The link to the calculator on its own line: a 44 px target for a finger. */
.prose .a-for a { display: flex; align-items: center; width: max-content; min-height: 44px; margin: 4px 0 -10px; font-weight: 500; }
/* The working: numbered steps on hairlines, the number in the pixel font (as the style pages' signs). */
.prose ol.a-steps { padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--rule); }
.prose ol.a-steps > li { counter-increment: step; position: relative; margin: 0; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.prose ol.a-steps > li::before { content: counter(step); position: absolute; left: 2px; top: 13px; font: 400 22px/1.3 var(--pixel); color: var(--soft); -webkit-font-smoothing: none; }
/* A rule: its name, its plain sentence, then what kind of rule it is and where it comes from. */
.a-rule { padding: 18px 0; border-top: 1px solid var(--rule); }
.prose h2 + .a-rule { margin-top: 1em; }
.prose .a-rule + .a-rule { margin-top: 0; }
.prose .a-rule h3 { margin: 0; font-size: 18px; }
.prose .a-rule p { margin-top: 0.4em; }
.prose .a-src { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.a-src .label { margin-right: 6px; padding: 3px 7px; border-radius: 6px; background: var(--surface); white-space: nowrap; }
.prose .a-src a { color: var(--muted); }
/* The table of nearby sizes: this page's row is tinted. */
.prose .a-table tr.here td { background: var(--surface); }
.a-table .label { display: block; margin-top: 4px; }
.prose .a-table small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; line-height: 1.35; color: var(--muted); }
.prose .a-table a small { text-decoration: none; }
/* "Open the calculator": the site's black pill. */
.prose a.a-open { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #FFF; font-size: 16px; font-weight: 500; text-decoration: none; transition: transform 0.4s var(--press), opacity 0.2s; }
.prose a.a-open:hover { opacity: 0.86; }
.prose a.a-open:active { transform: scale(0.96); transition-duration: 0.15s; }

/* ---------- The hub: the topics as a row of jumps, then each topic's questions with their figures. */
.a-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.a-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color 0.25s, transform 0.4s var(--press); }
.a-jump a:hover { background: var(--tint); }
.a-jump a:active { transform: scale(0.96); transition-duration: 0.15s; }
/* The topics are of unequal length, so on a wide screen they fill columns, each card whole (a grid would leave a
   hole under every short one). */
.a-groups { margin-top: clamp(40px, 5vw, 64px); column-gap: 12px; font-size: 0; }
.a-group { font-size: 14px; }
@media (min-width: 760px) { .a-groups { column-count: 2; } }
@media (min-width: 1120px) { .a-groups { column-count: 3; } }
/* inline-block: a block's bottom margin is carried over a column break in WebKit, which starts the next column 8 px low. */
.a-group { display: inline-block; vertical-align: top; width: 100%; margin-bottom: 12px; padding: var(--pad) var(--pad) 12px; border-radius: var(--r); background: var(--surface); scroll-margin-top: 96px; break-inside: avoid; }
.a-group h2 { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.15; }
.a-list { margin: 10px 0 0; padding: 0; list-style: none; }
.a-list li { border-top: 1px solid var(--rule); }
.a-list a { display: grid; gap: 3px; padding: 14px 0; color: var(--ink); text-decoration: none; }
.a-q { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; transition: color 0.2s; }
.a-list a:hover .a-q { color: var(--muted); }
.a-a { font: 400 18px/1.25 var(--pixel); color: var(--muted); -webkit-font-smoothing: none; font-variant-numeric: tabular-nums; }
.a-tool { border-top: 1px solid var(--rule); }
.a-tool a { display: flex; align-items: center; min-height: 48px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.a-tool a:hover { color: var(--ink); }
.a-method { max-width: 35.1641em; margin-top: 28px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 719px) {
  .a-stat b { font-size: 30px; }
  .a-for { padding: 14px 16px 16px; }
  .a-jump a { padding: 0 14px; }
  .a-group { padding: 20px 20px 8px; }
}
@media print { .a-open, .a-jump { display: none; } }