/* Guides, templates, tools and company pages. Loaded after styles.css and uses only its tokens. */

.page { background: var(--paper); }
.page .site-head { background: var(--surface); }
.page .topbar { gap: 32px; }

.crumbs { padding: 20px 0 0; font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The reading column: text never wider than about 7 of 12 columns. */
.article { padding: 32px 0 var(--section-y); }
.article > * { max-width: 44rem; }
.article .wide { max-width: 64rem; }

.article h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; max-width: 18em; }
.article h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 64px 0 16px; }
.article h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 32px 0 8px; }
.article p { color: var(--ink-2); }
.article p + p { margin-top: 16px; }
.article a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article a:hover { text-decoration-thickness: 2px; }
.article ul, .article ol { padding-left: 1.25em; margin: 16px 0; display: grid; gap: 8px; color: var(--ink-2); }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article strong { font-weight: 600; color: var(--ink); }
.article code { font-family: var(--font-mono); font-size: 0.82em; background: var(--surface-alt); padding: 1px 4px; border-radius: var(--radius); }

.byline { margin-top: 20px; font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta); }
.byline a { text-decoration: underline; }

/* Short answer: the first thing under the H1, visible to everyone. */
.answer { margin: 32px 0 8px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--ink); }
.answer .label { display: block; color: var(--text-meta); font-size: 11px; margin-bottom: 8px; }
.answer p { font-size: 19px; line-height: 1.55; color: var(--ink); }

/* Tables: square, ruled, scroll sideways on a phone instead of the page. */
.table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--rule); background: var(--surface); }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.article th, .article td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.article th { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); background: var(--surface-alt); }
.article tr:last-child td { border-bottom: 0; }
.article td:first-child { font-weight: 500; color: var(--ink); }

/* Template and checklist blocks. */
.sheet { margin: 24px 0; padding: 24px 28px; background: var(--surface); border: 1px solid var(--rule); }
.sheet h3 { margin-top: 0; }
.sheet h3 + p { margin-top: 0; }
.article .sheet .field-list { list-style: none; padding: 0; gap: 0; }
.sheet .field-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.sheet .field-list li:last-child { border-bottom: 0; }
.sheet .field-name { font-weight: 600; color: var(--ink); }
.article .checklist { list-style: none; padding: 0; gap: 0; }
.checklist li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--rule); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 14px; width: 16px; height: 16px; border: 1px solid var(--control-border); border-radius: var(--radius); }
.checklist li:last-child { border-bottom: 0; }

/* What Caliber does here, with its status words. */
.caliber-band { margin: 48px 0; padding: 24px 28px; background: var(--surface-alt); }
.caliber-band h2 { margin-top: 0; font-size: 22px; }
.status-word { font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; padding: 2px 6px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); white-space: nowrap; }

.faq-list h3 { margin-top: 28px; }

.sources { font-size: 14px; line-height: 1.5; }
.sources li { color: var(--text-muted); overflow-wrap: anywhere; }

.next-step { margin-top: 64px; padding: 32px; background: var(--ink); color: var(--on-dark); }
.next-step h2 { margin: 0 0 12px; color: var(--on-dark); }
.next-step p { color: var(--on-dark-muted); }
.next-step .button { margin-top: 24px; width: auto; }

.related { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 16px; max-width: 64rem; }
.related a { display: block; padding: 20px; background: var(--surface); border: 1px solid var(--rule); text-decoration: none; }
.related a:hover { border-color: var(--ink); }
.related .label { display: block; color: var(--text-meta); font-size: 11px; margin-bottom: 8px; }
.related strong { display: block; font-weight: 600; }

@media (max-width: 767px) {
  .page .topbar { gap: 16px; }
  .page .nav { display: none; }
  .answer, .sheet, .caliber-band, .next-step { padding: 20px; }
}

@media print {
  .site-head .nav, .site-head .nav-cta, .crumbs, .next-step, .related, .footer, .no-print { display: none; }
  .page, .page .site-head, .answer, .sheet, .table-wrap { background: none; }
  .article { padding: 0; }
  .article > * { max-width: none; }
  .checklist li, .sheet .field-list li { break-inside: avoid; }
}

/* Calculator: native inputs in ruled groups, results beside them on wide screens. */
.calc { display: grid; gap: 24px; margin: 32px 0; max-width: 64rem; }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.calc fieldset { margin: 0 0 16px; padding: 20px 24px; border: 1px solid var(--rule); background: var(--surface); }
.calc legend { padding: 0 6px; font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); }
.calc .field { margin-top: 12px; }
.calc .field label { font-size: 15px; }
.calc .hint { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.calc .field input { max-width: 12rem; }
.calc .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.calc .button { width: auto; min-height: 44px; }
.button-outline { background: var(--surface); color: var(--ink); border: 1px solid var(--control-border); }
.button-outline:hover { border-color: var(--ink); }
.results { position: sticky; top: 16px; padding: 24px; background: var(--ink); color: var(--on-dark); }
.results h2 { margin: 0 0 16px; font-size: 22px; color: var(--on-dark); }
.results dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; }
.results dt { color: var(--on-dark-muted); font-size: 15px; }
.results dd { margin: 0; font-family: var(--font-mono); font-size: 15px; text-align: right; }
.results .marginal { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-dark); color: var(--on-dark); }
.results .actions .button { background: var(--paper); color: var(--ink); }
.results .note { margin-top: 12px; font-size: 13px; color: var(--on-dark-muted); }
.formula { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; text-transform: none; }
html:not(.js) .js-only, .js .no-js { display: none; }