/* ==========================================================================
   Shared "doc page" pattern -- dark header band (mirrors hero in miniature)
   + light, readable body. Used by How It Works, Pricing, Encyclopedia hub,
   and every Encyclopedia category page.
   ========================================================================== */

.page-header { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.page-header-inner { max-width: 760px; }
.page-header h1 { font-size: clamp(34px, 4.2vw, 50px); font-weight: 700; line-height: 1.08; margin-top: 16px; color: var(--dark-ink); }
.page-header p { font-size: 18.5px; color: var(--dark-slate); margin-top: 18px; max-width: 580px; line-height: 1.6; }
.page-header-wide .page-header-inner { max-width: 900px; }

.doc { max-width: 780px; margin: 0 auto; padding: 72px 32px 100px; }
.doc-wide { max-width: var(--container); margin: 0 auto; padding: var(--sec-y) 32px; }
@media (max-width: 640px) { .doc-wide { padding: var(--sec-y) 20px; } }

/* Sidebar-TOC layout for long-form doc pages -- uses the full container
   width with a sticky jump-link nav, rather than a narrow centered column
   with large dead margins on a wide screen. */
.doc-layout { max-width: var(--container); margin: 0 auto; padding: var(--sec-y) 32px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .doc-layout { padding: var(--sec-y) 20px; } }
.doc-sidebar { position: sticky; top: 100px; }
.doc-sidebar-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-light); margin-bottom: 14px; }
.doc-sidebar a { display: block; font-size: 14.5px; color: var(--slate); padding: 7px 0; border-left: 2px solid transparent; padding-left: 14px; margin-left: -14px; }
.doc-sidebar a:hover { color: var(--ink); }
.doc-sidebar a.active { color: var(--emerald); border-left-color: var(--emerald); font-weight: 600; }
@media (max-width: 900px) { .doc-sidebar { position: static; }   }
.doc-main { max-width: 760px; }

.doc-section { margin-bottom: 60px; }
.doc-section-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--emerald); margin-bottom: 10px; }
.doc-section h2 { font-size: 27px; font-weight: 700; margin-bottom: 14px; line-height: 1.2; }
.doc-section p { font-size: 17px; color: var(--slate); line-height: 1.7; }
.doc-section p + p { margin-top: 14px; }
.doc-section p b { color: var(--ink); font-weight: 700; }
.doc-divider { height: 1px; background: var(--border); margin: 60px 0; }

.callout { background: var(--emerald-tint); border: 1px solid var(--emerald-glow); border-radius: 14px; padding: 20px 24px; margin-top: 20px; }
.callout p { color: var(--ink); font-size: 15.5px; line-height: 1.6; }

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 640px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: white; }
.mode-card .mode-name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.mode-card .mode-domains { font-size: 13.5px; color: var(--emerald); font-weight: 600; margin-bottom: 10px; }
.mode-card p { font-size: 14.5px; color: var(--slate); line-height: 1.55; }

.cycle-strip { display: flex; gap: 6px; margin: 24px 0 8px; }
.cycle-day { flex: 1; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: white; }
.cycle-day.rest { background: #e2e8f0; color: var(--slate); }
.cycle-caption { font-size: 13.5px; color: var(--slate-light); }

.doc-cta { text-align: center; padding: var(--sec-y) 0; background: white; border-top: 1px solid var(--border); }
.doc-cta h2 { font-size: 32px; font-weight: 700; margin-bottom: 14px; }
.doc-cta p { color: var(--slate); font-size: 17px; margin-bottom: 30px; }

/* ---------- Methodology: cycle comparison, triage rows, integrity rules ---------- */
.doc-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald); margin-bottom: 10px; }

.cycle-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0; }
@media (max-width: 720px) { .cycle-compare { grid-template-columns: 1fr; } }
.cycle-col { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--paper-panel); }
.cycle-good { border-color: rgba(20,185,129,0.45); background: var(--emerald-tint); }
.cycle-col-head { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.cycle-mark { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.cycle-mark-bad { background: var(--amber); }
.cycle-mark-good { background: var(--emerald); }
.cycle-col ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: c; }
.cycle-col li { font-size: 14.5px; line-height: 1.5; color: var(--slate); padding-left: 16px; position: relative; }
.cycle-col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 999px; background: var(--border); }
.cycle-break { font-style: italic; }
.cycle-fail { color: var(--amber); font-weight: 700; }
.cycle-pass { color: var(--emerald-deep); font-weight: 700; }

.triage-list { display: flex; flex-direction: column; gap: 12px; margin: 26px 0; }
.triage-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; background: var(--paper-panel); }
@media (max-width: 720px) { .triage-row { grid-template-columns: 1fr; gap: 8px; } .triage-arrow { transform: rotate(90deg); justify-self: start; } }
.triage-if { font-size: 14.5px; color: var(--slate); }
.triage-if span { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--slate-light); margin-right: 6px; }
.triage-arrow { color: var(--emerald); font-size: 18px; }
.triage-then b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.triage-tag { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--emerald-deep); background: var(--emerald-tint); border-radius: 999px; padding: 4px 10px; }

.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
@media (max-width: 860px) { .rules-grid { grid-template-columns: 1fr; } }
.rule-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--paper-panel); }
.rule-num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--emerald); margin-bottom: 8px; }
.rule-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.rule-card p { font-size: 14.5px; line-height: 1.6; color: var(--slate); }

/* ---------- Enumerated reference lists inside entries ---------- */
.hallmark-list { list-style: none; padding: 0; margin: 16px 0 22px; display: flex; flex-direction: column; gap: 12px; }
.hallmark-list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.65; color: var(--slate); }
.hallmark-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 999px; background: var(--emerald); }
.hallmark-list li b { color: var(--ink); font-weight: 700; }
/* h2 is 27px and body copy is 17px. An h3 at 17.5px reads as bold text rather
   than a heading, so it sits at 21px with more space above than below, which is
   what makes a subheading look attached to what follows it. */
.doc-main h3 { font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.3;
  margin: 34px 0 10px; letter-spacing: -0.01em; }
.doc-main h2 + h3 { margin-top: 20px; }

/* Grid tracks default to minmax(auto,1fr); a wide min-content child can push the
   track past the container. min-width:0 lets the track shrink and the text wrap. */
.doc-layout > .doc-sidebar, .doc-layout > .doc-main { min-width: 0; }
@media (max-width: 640px) {
  .compare-table { table-layout: fixed; width: 100%; }
  .compare-table th, .compare-table td { overflow-wrap: anywhere; }
}

/* ---------- Named source lists ---------- */
.source-list { padding-left: 20px; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.source-list li { font-size: 14.5px; line-height: 1.6; color: var(--slate); padding-left: 4px; }
.source-list li i { font-style: italic; color: var(--ink); }

/* ---------- Inline data figures ---------- */
.doc-figure { margin: 28px 0; padding: 20px 22px 16px; background: var(--paper-panel); border: 1px solid var(--border); border-radius: 14px; }
.doc-figure .fig-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.fig-svg { display: block; width: 100%; height: auto; font-family: var(--font-sans, inherit); }
.doc-figure .fig-note { font-size: 12.5px; line-height: 1.55; color: var(--slate-light); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.source-list .src-link { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--emerald); white-space: nowrap; }
.source-list .src-link:hover { text-decoration: underline; }
.source-list a { color: var(--emerald); }

/* ---------- Entry byline in the dark hero ---------- */
.page-header .entry-meta { margin-top: 24px; color: var(--dark-slate); font-size: 13px; }
.page-header .entry-meta a { color: var(--emerald-bright); font-weight: 600; }
.page-header .entry-meta a:hover { text-decoration: underline; }
.cycle-col.cycle-bad { border-color: rgba(180,83,9,0.35); background: rgba(180,83,9,0.04); }
/* Amber variant for corrections and caveats, so they don't read as endorsements */
.callout.callout-amber { background: rgba(180,83,9,0.07); border-color: rgba(180,83,9,0.3); }

/* ---------- Calculators ---------- */
.tool-card { margin: 28px 0; padding: 24px; background: var(--paper-panel); border: 1px solid var(--border); border-radius: 16px; }
.tool-card > h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.tool-card > .tool-intro { font-size: 14.5px; color: var(--slate); margin: 0 0 18px; line-height: 1.55; }
.tool-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.tool-form-wide { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tool-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tool-field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.tool-field input, .tool-field select { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.tool-field input:focus, .tool-field select:focus { outline: 2px solid var(--emerald); outline-offset: 1px; border-color: transparent; }
.tool-hint { font-size: 12px; color: var(--slate-light); line-height: 1.4; }
.tool-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0; min-width: 0; }
.tool-fieldset legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--slate-light); font-family: var(--font-mono); padding: 0 6px; }
.tool-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ink); padding: 5px 0; cursor: pointer; line-height: 1.4; }
.tool-check input { margin-top: 2px; accent-color: var(--emerald); flex: none; }
.tool-check-wide { margin-top: 12px; }
.tool-body { min-width: 0; }
.tool-output:empty { display: none; }
.tool-result { margin-top: 20px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--paper-alt); }
.tool-result-value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.tool-result-detail { font-size: 14.5px; font-weight: 600; margin-top: 5px; color: var(--slate); }
.tool-result.is-good { background: rgba(14,150,104,0.10); border-color: rgba(14,150,104,0.35); }
.tool-result.is-good .tool-result-value, .tool-result.is-good .tool-result-detail { color: var(--emerald-deep); }
.tool-result.is-ok { background: var(--paper-alt); }
.tool-result.is-high, .tool-result.is-low { background: rgba(180,83,9,0.08); border-color: rgba(180,83,9,0.3); }
.tool-result.is-high .tool-result-value, .tool-result.is-low .tool-result-value,
.tool-result.is-high .tool-result-detail, .tool-result.is-low .tool-result-detail { color: var(--amber); }
.tool-note { font-size: 14px; line-height: 1.6; color: var(--slate); margin: 14px 0 0; }
.tool-source { font-size: 12.5px; line-height: 1.55; color: var(--slate-light); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.tool-loading { font-size: 14px; color: var(--slate-light); margin: 0; }
.tool-privacy { font-size: 12.5px; color: var(--slate-light); margin: 14px 0 0; font-family: var(--font-mono); }
.tool-bridge { font-size: 14px; line-height: 1.5; margin: 14px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--emerald, #0e9668); background: rgba(14,150,104,.06); border-radius: 0 6px 6px 0; }
.tool-bridge a { font-weight: 600; white-space: nowrap; }
.tool-bridge[hidden] { display: none; }
/* Emerald rail, matching the metric cards in the app: flat left edge, not a rounded outline */
.tool-card { border-left: 3px solid var(--emerald); border-radius: 0 16px 16px 0; }
.doc-sidebar a.doc-sidebar-tool { color: var(--emerald-deep); font-weight: 700; }
.doc-sidebar a.doc-sidebar-tool::before { content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--emerald); margin-right: 7px; vertical-align: middle; }

/* ---------- Tools page ---------- */
.tools-page { padding: var(--sec-y) 0; }
.tool-group { margin-bottom: 0; }  /* group headings removed; rows space themselves evenly */
.tool-group-head { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 28px; }
.tool-group-head h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--ink); margin: 0; }
.tool-group-head p { font-size: 15.5px; color: var(--slate); margin: 8px 0 0; max-width: 640px; line-height: 1.6; }
.tool-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; margin-bottom: 40px; }
@media (max-width: 900px) { .tool-row { grid-template-columns: 1fr; gap: 16px; } }
.tool-row-info h2, .tool-row-info h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.tool-row-info p { font-size: 15px; line-height: 1.65; color: var(--slate); margin: 0 0 14px; }
.tool-row-link { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--emerald); }
.tool-row-link:hover { text-decoration: underline; }
.tool-row-widget .tool-card { margin: 0; }
.tools-cta { background: var(--dark-bg); color: var(--dark-ink); border-radius: 20px; padding: 44px; margin: 16px 0 40px; }
.tools-cta h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: var(--dark-ink); margin: 0 0 16px; max-width: 720px; line-height: 1.2; }
.tools-cta p { font-size: 16px; line-height: 1.65; color: var(--dark-slate); margin: 0 0 14px; max-width: 720px; }
.tools-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tools-note { border-top: 1px solid var(--border); padding-top: 32px; }
.tools-note h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.tools-note p { font-size: 15px; line-height: 1.7; color: var(--slate); margin: 0 0 14px; max-width: 760px; }
@media (max-width: 640px) { .tools-cta { padding: 28px 22px; } }
.page-header-centred { text-align: center; margin-left: auto; margin-right: auto; }
.page-header-centred p { margin-left: auto; margin-right: auto; max-width: 680px; }
.tool-why { font-size: 14px; line-height: 1.6; color: var(--slate); margin: 0 0 14px;
  padding-left: 14px; border-left: 2px solid var(--emerald-glow); }
.tool-why b { color: var(--emerald-deep); }


/* Tools page: an outer panel wraps the explanation and the calculator, and the
   calculator keeps its own white card and emerald rail inside it. Radius 14px
   to match the entry cards used everywhere else. */
.tools-page .tool-row { background: var(--paper-alt); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 28px; margin-bottom: 24px; align-items: start; }
.tools-page .tool-row .tool-card { background: var(--paper-panel); border: 1px solid var(--border);
  border-left: 3px solid var(--emerald); border-radius: 0 14px 14px 0; padding: 22px 24px; margin: 0; }
.tools-page .tool-row .tool-card > h3 { font-size: 17px; font-weight: 700; color: var(--ink);
  font-family: inherit; text-transform: none; letter-spacing: normal; margin-bottom: 14px; }
/* Tools page uses the standard doc-layout sidebar, so each row stacks:
   description above, calculator below, rather than side by side. */
.tools-page .tool-row { display: block; }
.tools-page .tool-row-info { padding-right: 0; margin-bottom: 18px; }
.tools-page .doc-main { max-width: 100%; }
.tools-page .tool-row-info h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 10px; line-height: 1.3; }
@media (max-width: 900px) {
  .tools-page .tool-row { padding: 22px 18px; }
  .tools-page .tool-row .tool-card { padding: 20px 18px; }
}

/* Decision-guide tables carry a caption naming what the table compares. */
/* Base table treatment. This lived only in encyc.css, so any page that loads
   doc.css without it (methodology, pricing, about) rendered tables unstyled.
   encyc.css loads after doc.css and repeats these, so entries are unaffected. */
.compare-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.compare-table th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: white; background: var(--ink); padding: 12px 16px; }
.compare-table th:first-child { border-top-left-radius: 10px; }
.compare-table th:last-child { border-top-right-radius: 10px; }
.compare-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: top; }
.compare-table tr:nth-child(even) td { background: var(--paper-alt); }
.compare-table caption { caption-side: top; text-align: left; font-size: 13px;
  line-height: 1.5; color: var(--slate-light); padding: 0 0 10px; }
/* Narrow screens: scroll the table rather than squeezing columns to one word wide. */
@media (max-width: 640px) {
  .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table thead, .compare-table tbody { display: table; width: 100%; min-width: 460px; }
  .compare-table caption { display: block; min-width: 0; }
}

/* ---------- Benchmark sources page ---------- */
.prov { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.prov-pub { background: rgba(14,150,104,0.12); color: var(--emerald-deep); }
.prov-con { background: var(--paper-alt); color: var(--slate); }
.prov-est { background: rgba(180,83,9,0.12); color: var(--amber); }
.doc-main h2 .prov { font-size: 12px; padding: 5px 12px; vertical-align: middle; }
.bm-version { font-family: var(--font-mono); font-size: 13px; color: var(--slate); }
/* One column: marker cards vary a lot in length, and a two-column grid left
   ragged gaps wherever a long source note sat beside a short one. */
.bm-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.bm-card-head { align-items: center; }
.bm-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: var(--paper-panel); }
.bm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bm-card-head h3 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 0; }
.bm-card-head code { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate-light); }
.bm-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate-light);
  text-transform: uppercase; letter-spacing: 0.03em; margin: 4px 0 12px; }
.bm-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.bm-tiers > div { flex: 1 1 auto; min-width: 84px; background: var(--paper-alt); border-radius: 10px; padding: 8px 10px; }
.bm-tiers dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--slate-light); margin: 0; }
.bm-tiers dd { font-size: 15px; font-weight: 700; color: var(--ink); margin: 2px 0 0; }
.bm-note { font-size: 13px; line-height: 1.55; color: var(--slate); margin: 0 0 8px; }
.bm-note-sub { color: var(--slate-light); font-size: 12.5px; }
.bm-caveat { font-size: 12.5px; line-height: 1.55; color: var(--amber); margin: 10px 0 0;
  padding-left: 12px; border-left: 2px solid rgba(180,83,9,0.35); }
.bm-banded { font-size: 13px; font-style: italic; color: var(--slate-light); margin: 0 0 12px; }

/* Body links inside entries were inheriting the paragraph colour, so only the
   ones carrying an inline style read as links. Green, everywhere in the prose. */
.doc-main p a:not(.src-link):not(.btn),
.doc-main li a:not(.src-link):not(.btn),
.doc-main td a, .doc-main dd a, .doc-main .faq-mini-item a {
  color: var(--emerald-deep); font-weight: 600; }
.doc-main p a:not(.btn):hover, .doc-main li a:not(.btn):hover,
.doc-main td a:hover, .doc-main .faq-mini-item a:hover { text-decoration: underline; }


/* A sticky sidebar taller than the viewport hides its own bottom until the
   page is scrolled. Scroll it internally instead -- applies to every page. */
.doc-sidebar { max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: thin; }
/* Tools has 25 entries, so it groups them behind collapsible headings. */
.doc-sidebar-group { border-bottom: 1px solid var(--border); }
.doc-sidebar-group:last-of-type { border-bottom: none; }
.doc-sidebar-group summary { display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; list-style: none; padding: 11px 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.doc-sidebar-group summary::-webkit-details-marker { display: none; }
.doc-sidebar-group summary span { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--slate-light); background: var(--paper-alt); border-radius: 999px; padding: 2px 8px; }
.doc-sidebar-group summary:hover { color: var(--emerald-deep); }
.doc-sidebar-group[open] summary { color: var(--emerald-deep); }
.doc-sidebar-group-links { padding-bottom: 8px; }
.doc-sidebar-group-links a { font-size: 14px; padding: 5px 0 5px 14px; }
@media (max-width: 900px) {
  .doc-sidebar { max-height: none; overflow: visible; display: block; }
  .doc-sidebar-group-links { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
  .doc-sidebar-group-links a { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; }
}
.tool-group + .tool-group { margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--border); }

/* ---------- Help hub ---------- */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.help-card { display: block; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px;
  background: var(--paper-panel); transition: border-color 0.15s ease, transform 0.15s ease; }
a.help-card:hover { border-color: var(--emerald); transform: translateY(-2px); }
.help-card h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.help-card p { font-size: 14px; line-height: 1.55; color: var(--slate); margin: 0 0 12px; }
.help-card-count { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--emerald-deep); }
.help-card-soon { opacity: 0.62; }
.help-card-soon .help-card-count { color: var(--slate-light); }
/* how-to blocks */
.entry-answer-inline { font-size: 17px; line-height: 1.65; color: var(--ink); font-weight: 500;
  background: var(--emerald-tint); border-radius: 12px; padding: 16px 20px; margin: 0 0 18px; }
.howto-steps { margin: 0 0 18px; padding-left: 22px; }
.howto-steps li { font-size: 15.5px; line-height: 1.7; color: var(--slate); margin-bottom: 8px; }
.howto-note { font-size: 14px; line-height: 1.6; color: var(--slate-light); padding-left: 14px;
  border-left: 2px solid var(--border); margin: 14px 0 0; }

/* Ten-rule grid: 2 columns so the longer rule text stays readable */
.rules-grid-ten { grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 860px) { .rules-grid-ten { grid-template-columns: 1fr; } }
.rules-grid-ten .rule-card h3 { font-size: 16px; line-height: 1.35; }
.rules-grid-ten .rule-card a { color: var(--emerald); font-weight: 600; }
.rules-grid-ten .rule-card a:hover { text-decoration: underline; }

/* Links inside the dark page header inherit the muted body colour, which makes
   them indistinguishable from the surrounding text. The old markup fixed this
   with an inline style on a single link; this covers all of them. */
.page-header p a { color: var(--emerald-bright); font-weight: 600; }
.page-header p a:hover { text-decoration: underline; }

/* A .section directly after .doc-wide stacks .doc-wide's bottom padding on top
   of .section's top padding, doubling the gap to var(--sec-y) * 2. Collapse it
   to one. Currently only the what-is-longevity hub has this adjacency, but the
   rule is written generally so any hub gaining a trailing section behaves. */
.doc-wide + .section { padding-top: 0; }

/* Synthesis prose closing a card grid. Sits inside .doc-wide so it shares the
   grid's width, separated by a rule rather than by more whitespace. */
.entry-list-outro { margin: 56px 0 0; padding-top: 40px; border-top: 1px solid var(--border); }
.entry-list-outro p { max-width: 78ch; }
.entry-list-outro h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.entry-list-outro p { font-size: 16px; line-height: 1.7; color: var(--slate); margin-bottom: 18px; max-width: 78ch; }
.entry-list-outro p:last-child { margin-bottom: 0; }
.entry-list-outro strong { color: var(--ink); font-weight: 700; }
/* Links inherit the paragraph colour here, so they need restating or they
   are indistinguishable from the surrounding prose. */
.entry-list-outro a { color: var(--emerald-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.entry-list-outro a:hover { color: var(--emerald); }

/* Two-column layout for the hub synthesis and hub FAQ. Opt-in classes, because
   .faq-mini is also used on 134 entry pages where a single column is correct. */
@media (min-width: 900px) {
  /* Explicit column wrappers rather than column-count, which balances by height
     and can leave the second column longer than the first. Reading order should
     fill column one first. */
  .entry-list-outro.hub-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .entry-list-outro.hub-2col h2 { grid-column: 1 / -1; }
  .entry-list-outro.hub-2col p { max-width: none; }

  .entry-list-outro.hub-2col .hub-col > p:last-child { margin-bottom: 0; }

  .hub-faq-2col .faq-mini { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .hub-faq-2col .faq-mini-item { border-bottom: 1px solid var(--border); }
  /* the last item in each column, not just the last overall */
  .hub-faq-2col .faq-mini-item:last-child,
  .hub-faq-2col .faq-mini-item:nth-last-child(2) { border-bottom: none; padding-bottom: 0; }
}


/* ===== On-this-page =======================================================
   Desktop: always open, no summary, unchanged from before.
   Mobile: a single collapsed row. The old treatment turned long headings into
   full-width rounded blocks that cost 532px before the article began. */
.doc-toc > summary { list-style: none; cursor: pointer; }
.doc-toc > summary::-webkit-details-marker { display: none; }
@media (min-width: 901px) { .doc-toc > summary { display: none; } }
@media (max-width: 900px) {
  .doc-toc { border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: 4px; }
  .doc-toc > summary { display: flex; align-items: center; gap: 8px; padding: 13px 15px; margin: 0;
    font-size: 13px; color: var(--slate); }
  .doc-toc > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid var(--slate-light); border-bottom: 2px solid var(--slate-light);
    transform: rotate(45deg) translate(-2px,-2px); transition: transform .15s ease; }
  .doc-toc[open] > summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
  .doc-toc[open] > summary { border-bottom: 1px solid var(--border); }
  .doc-toc-count { font-variant-numeric: tabular-nums; color: var(--slate-light);
    background: var(--bg-soft, #f1f5f9); border-radius: 999px; padding: 1px 7px; font-size: 11.5px; }
  .doc-toc-links { padding: 6px 15px 12px; }
  .doc-sidebar a { display: block; padding: 9px 0; font-size: 14.5px; border: 0; border-radius: 0;
    margin: 0; border-bottom: 1px solid var(--border); }
  .doc-toc-links a:last-child { border-bottom: 0; }
}