/* ==========================================================================
   Ardent — spoke pages only (loaded after styles.css). Reuses the home page's
   tokens, header, canvas/panel system, cards, tables, FAQ accordion, closing
   card and footer; adds the document layout the spokes need: breadcrumb,
   intro h1, section headings and rhythm, link cards, comparison glyphs.
   ========================================================================== */

/* ---------- guards: an explicit track so a wide child cannot widen the sheet ---------- */
.spoke .panel-inner { grid-template-columns: minmax(0, 1fr); }
.spoke .panel-inner > *, .spoke section, .spoke .card-grid > *, .spoke .canvas { min-width: 0; }
.spoke .table-wrap, .spoke .excerpt-box { max-width: 100%; }

/* ---------- header ---------- */
.site-nav a[aria-current] { background: rgba(28, 24, 17, .05); }

/* ---------- breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--faint); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb [aria-current] { color: var(--ink); }

/* ---------- intro (the first section of the first sheet) ---------- */
.spoke section > .breadcrumb + * { margin-top: 28px; }
.spoke-intro h1 {
  max-width: 18em;
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(32px, 4.6vw, 46px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--ink-strong); text-wrap: pretty;
}
.spoke-intro h1 .tail { font-style: italic; font-weight: 500; color: var(--accent); }
.spoke .lede { margin: 20px 0 0; max-width: 40em; color: var(--ink); }
.spoke .byline { font-size: 13px; color: var(--faint); }
.spoke section > .byline { margin-top: 14px; }
.spoke section > .byline + .lede { margin-top: 16px; }

/* ---------- section headings ---------- */
.spoke section > h2 {
  max-width: 24em;
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 500;
  font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink-strong); text-wrap: pretty;
}
.spoke section > h2 .tail { font-style: italic; font-weight: 500; color: var(--ink-strong); }
.spoke section > h3 {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 500;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink-strong); text-wrap: pretty;
}
.spoke .eyebrow { margin-bottom: 16px; }
@media (min-width: 640px) { .spoke section > h2 { font-size: 34px; } .spoke section > h3 { font-size: 24px; } }
@media (min-width: 1024px) { .spoke section > h2 { font-size: 38px; } }

/* ---------- vertical rhythm inside a section ---------- */
.spoke section > * + * { margin-top: 16px; }
.spoke section > .eyebrow + * { margin-top: 0; }
.spoke section > h1 + *, .spoke section > h2 + * { margin-top: 20px; }
.spoke section > :not(.eyebrow) + h2 { margin-top: 40px; }
.spoke section > h3 { margin-top: 36px; }
.spoke section > .table-wrap, .spoke section > .card-grid, .spoke section > .steps, .spoke section > .faq,
.spoke section > .link-list, .spoke section > .checks-list, .spoke section > .toc, .spoke section > .sources { margin-top: 28px; }
.spoke section > .excerpt-box { margin: 28px 0 0; }
.spoke section > .cta-row { margin-top: 32px; }
.spoke section > .scroll-hint { margin-top: 8px; }
.spoke section > .caption { margin-top: 14px; }

/* ---------- prose ---------- */
.spoke section > p:not([class]), .spoke section > ul:not([class]), .spoke section > ol:not([class]) { max-width: 72ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.spoke .answer { max-width: 72ch; font-size: 17px; line-height: 1.6; color: var(--ink); }
.spoke section > p:not([class]) strong, .spoke section > ul:not([class]) strong { color: var(--ink-strong); }
.spoke section > ul:not([class]) { list-style: disc; padding-left: 1.3em; display: grid; gap: 8px; }
.spoke section > ul:not([class]) li::marker { color: var(--accent); }
.spoke .panel-inner :is(p:not(.cta-row), td, th, .checks-list li, section > ul:not([class]) li, .steps li, .sources li) a {
  color: var(--ink); text-decoration: underline; text-decoration-color: rgba(28, 24, 17, .3); text-underline-offset: 2px;
}
.spoke .panel-inner :is(p:not(.cta-row), td, th, .checks-list li, section > ul:not([class]) li, .steps li, .sources li) a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.spoke .panel-inner p.fineprint a { color: var(--muted); }
.spoke p.fineprint { display: block; max-width: 72ch; font-size: 13px; line-height: 1.55; color: var(--faint); }
.spoke .caption { max-width: none; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.spoke .sources { display: grid; gap: 8px; max-width: 72ch; padding-left: 1.3em; list-style: disc; font-size: 14px; line-height: 1.5; color: var(--muted); }
.spoke code { font: 400 .92em/1.4 var(--mono); background: rgba(28, 24, 17, .06); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.spoke pre { margin: 0; max-width: 72ch; }
.spoke .note-box code { background: none; padding: 0; font: inherit; }
.spoke .steps li strong { display: block; color: var(--ink-strong); font-weight: 600; }

/* ---------- takeaways reuse .checks-list ---------- */
.spoke .checks-list { max-width: 72ch; }
.spoke .checks-list li { color: var(--ink); }

/* ---------- link cards (.card from the home page) ---------- */
.card-grid { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .card-grid { gap: 20px; }
  .card-grid--2, .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spoke .card { gap: 10px; }
.spoke .card > h2, .spoke .card > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 16px/1.3 var(--sans); letter-spacing: -0.005em; color: var(--ink-strong); }
.spoke .card > p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.spoke .card > p.fineprint { font-size: 12px; color: var(--faint); }
.spoke .card-link { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 500; color: var(--accent-text); }
.spoke a.card:hover .card-link { text-decoration: underline; }
.spoke .card--direct { border-color: var(--accent); }

/* ---------- link list, table of contents, CTA row ---------- */
.spoke .link-list { display: grid; gap: 12px 24px; }
@media (min-width: 640px) { .spoke .link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spoke .link-list .text-link { font-size: 15px; font-weight: 500; }
.spoke .toc ol { display: flex; flex-wrap: wrap; gap: 10px; }
.spoke .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* ---------- tables: every table sits in a scrolling wrapper ---------- */
.spoke .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spoke table.matrix { min-width: 640px; }
.spoke table.fields { min-width: 560px; }
.spoke table.compare { min-width: 960px; }
.spoke .table-wrap tbody th { min-width: 140px; }
.spoke .table-wrap thead th small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); }
.spoke .col-ardent { background: var(--accent-tint); }
.spoke thead th.col-ardent { color: var(--accent-active); }
.spoke .glyph { display: inline-block; box-sizing: border-box; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; border: 1.5px solid var(--accent); }
.spoke .glyph-yes { background: var(--accent); }
.spoke .glyph-part { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.spoke .glyph-no { border-color: var(--line-strong); }

/* ---------- FAQ accordion: left-aligned under a left-aligned heading ---------- */
.spoke .faq { margin-left: 0; }

/* ---------- the sheet excerpt (settled, no JS needed) ---------- */
.spoke .excerpt-box { max-width: min(720px, 100%); margin-left: 0; }
.spoke .excerpt-box .sheet { margin: 0; }
.card-grid > li { display: flex; }
.card-grid > li > .card { flex: 1 1 auto; }

/* ---------- document pages (faq, security, guides): one centred 680px column; tables, cards and the excerpt keep the full sheet ---------- */
.spoke--doc section > :not(.table-wrap):not(.card-grid):not(.excerpt-box) { max-width: 680px; margin-inline: auto; }
.spoke--doc section > .excerpt-box { max-width: min(720px, 100%); margin-inline: auto; }