/* Compliance guide (2026-11-04): overview first, detail on request. Uses the site's tokens only. */
.guide-hero h1 { max-width: 20ch; }
.guide-lead { max-width: 62ch; margin-top: 14px; }
.guide-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.guide-ctas .button { white-space: normal; height: auto; min-height: 48px; padding-block: 10px; }
.guide-meta { margin-top: 18px; font-size: var(--fs-small); color: var(--ink-2); }
.guide-hero .not-official { margin-top: 10px; }
.guide-sec { padding-block: clamp(36px, 6vw, 72px); }
.guide-sec + .guide-sec { border-top: 1px solid var(--line); }
.guide-sec h2 { margin: 0 0 20px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.sec-head h2 { margin: 0; }
.sec-lead { max-width: 64ch; margin: -8px 0 16px; color: var(--ink-2); }

/* 1. Process */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.flow::before { content: ''; position: absolute; top: 21px; left: 22px; right: 12%; height: 2px; background: var(--accent-tint); }
.flow-step { position: relative; min-width: 0; }
.flow-num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.flow-step h3 { margin: 14px 0 6px; font-size: 1.1rem; }
.flow-step p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.flow-step .flow-cond { margin-top: 8px; color: var(--ink); font-weight: 600; }
.flow-warn { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: var(--r-field); background: #FBF3E4; color: #6B4A12; font-size: var(--fs-micro); text-decoration: underline; text-underline-offset: 2px; }
.flow-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-size: var(--fs-small); color: var(--accent); }

/* 2. Three routes */
.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.option-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); border-top: 4px solid var(--accent); }
.option-s34 { border-top-color: var(--ink-2); }
.option-s35 { border-top-color: var(--accent-soft); }
.option-badge { width: fit-content; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: var(--fs-micro); font-weight: 700; }
.option-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.35; }
.option-card > p:not(.option-badge):not(.cite-short) { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.option-facts { display: grid; gap: 8px; margin: 4px 0 0; font-size: var(--fs-small); }
.option-facts dt { font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2); }
.option-facts dd { margin: 2px 0 0; }
.option-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: none; }
.option-go:hover { text-decoration: underline; }
.option-combine { margin-top: 16px; color: var(--ink-2); }

/* Disclosures */
.disclose { margin-top: 12px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.disclose > summary { cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; font-weight: 600; list-style: none; }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::after { content: '+'; margin-left: auto; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.disclose[open] > summary::after { content: '−'; }
.disclose > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-card); }
.disclose > :not(summary) { margin-inline: 18px; }
.disclose > :last-child { margin-bottom: 16px; }
.disclose .table-wrap { overflow-x: auto; position: relative; }

/* Tabs */
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.seg-tabs [role='tab'] { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 var(--fs-small)/1.2 var(--text); cursor: pointer; transition: background-color var(--d-fast), color var(--d-fast); }
.seg-tabs [role='tab'][aria-selected='true'] { background: var(--ink); color: var(--surface); }
.seg-tabs [role='tab']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-sec { font-weight: 400; opacity: .8; margin-right: 2px; }

/* 3. The year */
.tl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.tl-group { min-width: 0; padding: 16px 18px 18px; border-radius: var(--r-card); }
.tl-prev { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tl-this { background: var(--surface); box-shadow: var(--sh-1); }
.tl-group-label { margin: 0 0 14px; font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.tl-this .tl-group-label { color: var(--accent); }
.tl-items { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tl-items::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line-strong); }
.tl-this .tl-items::before { background: var(--accent-tint); }
.tl-item { position: relative; min-width: 0; padding-top: 24px; }
.tl-item::before { content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 4px var(--ink-2); }
.tl-this .tl-item::before { box-shadow: inset 0 0 0 4px var(--accent); }
.tl-when { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-label { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-small); }
.tl-line { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-small); }
.tl-more summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; font-size: var(--fs-micro); color: var(--accent); }
.tl-more .cite-short { margin-top: 2px; }
.tl-rate { margin-top: 14px; font-weight: 600; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #FBF3E4; color: #6B4A12; font-size: var(--fs-micro); font-weight: 600; }

/* 4. Route checklist */
.shared-docs { margin: 0 0 22px; padding: 16px 18px; border-radius: var(--r-card); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.shared-docs h3 { margin: 0; font-size: 1rem; }
.shared-docs .hint { margin: 4px 0 0; }
.route-tabs { margin-bottom: 18px; }
.route-panel { padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--sh-1); scroll-margin-top: 96px; }
.route-panel + .route-panel { margin-top: 18px; }
.route-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.route-panel:not([hidden]) { animation: guide-in 220ms var(--ease-out, ease-out) both; }
@keyframes guide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.route-title { margin: 0 0 14px; font-family: var(--display); font-size: 1.35rem; }
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.rb { min-width: 0; }
.rb h4 { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--accent); }
.rb-what { grid-column: 1 / -1; }
.rb .route-facts { grid-template-columns: 1fr; }
.num-steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.num-steps li { counter-increment: step; position: relative; padding: 10px 12px 10px 44px; border-radius: var(--r-field); background: var(--surface-2); font-size: var(--fs-small); }
.num-steps li::before { content: counter(step); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--fs-micro); font-weight: 700; }
.rb-note { margin-top: 8px; font-size: var(--fs-micro); color: var(--ink-2); }
.cond-list { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; font-size: var(--fs-small); }
.cond-list li::marker { color: #A3271A; }
.cite-short { margin: 10px 0 0; font-size: var(--fs-micro); color: var(--ink-2); line-height: 1.6; }
.cite-short span { font-weight: 600; margin-right: 4px; }
.cite-short a { color: var(--accent); }
.anchor-compat { position: relative; top: -96px; display: block; height: 0; }
.guide-about { margin-top: 20px; font-size: var(--fs-small); color: var(--ink-2); }
.guide-v2 .gap-note { margin-top: 16px; }

@media (max-width: 960px) {
  .tl { grid-template-columns: 1fr; }
  .tl-items { grid-auto-flow: row; gap: 10px; }
  .tl-items::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; }
  .tl-item { padding: 0 0 4px 30px; }
}
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .flow-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-bottom: 22px; }
  .flow-step > :not(.flow-num) { grid-column: 2; }
  .flow-step h3 { margin-top: 10px; }
  .option-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .route-grid { grid-template-columns: 1fr; }
  .seg-tabs { display: flex; }
  .seg-tabs [role='tab'] { flex: 1 1 auto; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .seg-tabs [role='tab'] { transition: none; }
  .route-panel:not([hidden]) { animation: none; }
}
/* Where-to-file is the longest block: let it span two rows so documents and evidence stack beside it. */
.rb-where { grid-row: span 2; }
.rb-check { grid-column: 1 / -1; }
@media (max-width: 760px) { .rb-where { grid-row: auto; } }
.route-grid { grid-template-rows: auto auto 1fr auto; }
.rb-keep { align-self: start; }
@media (max-width: 760px) { .route-grid { grid-template-rows: none; } }