/* ==========================================================================
   KuduDoc v6 — is-this-document-real (after pages/_feature.css).
   Only this page's own parts: the "Last checked" line, the router (picker + overview + 13 route cards) on the
   stage, the issuer ledger, the warning signs, the consent/request/answer panel extras, the checker outcomes and
   the sources list. Everything else is the kit. Prefix dr- ("document router").
   Router modes: without JS every card shows, stacked, and the menu links jump to them. The page script adds
   .is-live: one view at a time (.is-shown), a <select> on narrow screens instead of the menu.
   ========================================================================== */

/* ---------------------------------------------------------------- opening: the dated line */
.fk .dr-checked {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 26px;
  font: 500 13.5px/1.4 var(--font-sans); color: rgba(214, 238, 255, .86);
}
.fk .dr-checked > span::before { content: ""; display: inline-block; vertical-align: -2px; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px; background: var(--fk-sky); transform: skewX(-14deg); }
.fk .fk-under > span a { color: var(--fk-blue); }
html body .fk .dr-checked a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); }
html body .fk .dr-checked a:hover { text-decoration-color: #fff; }

/* ---------------------------------------------------------------- the stage heading (the router's H2 on the blue) */
.fk .dr-stage-bar { margin: 0 2px 24px; }
html body .fk .dr-stage-h {
  position: relative; max-width: 36ch; padding-left: 22px;
  font: 650 clamp(22px, 2.05vw, 28px)/1.2 var(--font-display); letter-spacing: -.022em; color: #fff; text-wrap: balance;
}
.fk .dr-stage-h::before { content: ""; position: absolute; left: 2px; top: .2em; width: 5px; height: .78em; border-radius: 3px; background: var(--fk-sky); transform: var(--fk-stroke); }
.fk .dr-stage-intro { max-width: 64ch; margin-top: 10px; padding-left: 22px; font: 400 16.5px/1.55 var(--font-sans); color: rgba(236, 244, 252, .88); }

/* ================================================================ THE ROUTER */
.fk .dr-router { font-size: 14px; overflow: clip; }   /* clip, not hidden: the picker column can stay sticky */
.fk .dr-view > * { scroll-margin-top: 104px; }
.fk .dr-body {
  display: grid; grid-template-columns: 272px minmax(0, 1fr);
  background: linear-gradient(90deg, #f8fafc 0 271px, #e8edf2 271px 272px, #fff 272px);
}
/* the picker column */
.fk .dr-pick { align-self: start; position: sticky; top: 92px; padding: 26px 16px 26px 20px; }
.fk .dr-pick-l { margin: 0 8px 14px; font: 650 16px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--fk-ink); }
.fk .dr-menu { display: flex; flex-direction: column; gap: 1px; }
.fk .dr-menu ul { display: flex; flex-direction: column; gap: 1px; }
.fk .dr-group { margin: 14px 10px 5px; font: 600 10.5px/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fk-faint); }
html body .fk .dr-menu a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px 7px 20px; border-radius: 9px; text-decoration: none;
  font: 500 13.5px/1.3 var(--font-sans); color: var(--fk-ink-2); transition: background-color 120ms, color 120ms;
}
html body .fk .dr-menu a:hover { background: #eef3f8; color: var(--fk-ink); }
html body .fk .dr-menu a.is-on { background: #e7f1fb; color: var(--fk-blue-deep); font-weight: 600; }
.fk .dr-menu a.is-on::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 3px; height: 13px; margin-top: -6.5px; border-radius: 2px;
  background: var(--fk-blue); transform: skewX(-14deg);
}
.fk .dr-menu a:focus-visible { outline: 2px solid var(--fk-blue); outline-offset: 1px; }
html body .fk .dr-menu .dr-all { font-weight: 600; color: var(--fk-ink); }
.fk .dr-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #eaf0f6; font: 600 11px/1 var(--font-sans); color: var(--fk-mute); }
.fk .dr-notlisted { margin: 18px 8px 0; padding-top: 16px; border-top: 1px solid var(--fk-line); font: 400 12.5px/1.55 var(--font-sans); color: var(--fk-mute); }
.fk .dr-notlisted b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--fk-ink); }
/* the <select> the script adds for narrow screens */
.fk .dr-select {
  display: none; width: 100%; height: 46px; padding: 0 42px 0 14px; border: 0; border-radius: 10px; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23006bcb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
  box-shadow: inset 0 0 0 1px #cfdbe7, 0 1px 2px rgba(16, 45, 73, .05);
  font: 600 15px/1.2 var(--font-sans); color: var(--fk-ink); cursor: pointer;
}
.fk .dr-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--fk-blue), 0 0 0 3px rgba(0, 107, 203, .14); }

/* the view column: the overview, then the cards */
.fk .dr-view { min-width: 0; padding: 28px 32px 32px; }
.fk .dr-view > * + * { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--fk-line); }
.fk .dr-view > :focus { outline: none; }
.fk .dr-view-head, .fk .dr-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap; }
.fk .dr-view-h { font: 650 20px/1.25 var(--font-display); letter-spacing: -.018em; color: var(--fk-ink); }
.fk .dr-date { font: 500 12px/1.3 var(--font-sans); color: var(--fk-mute); white-space: nowrap; }

/* the overview table */
.fk .dr-table { width: 100%; margin-top: 16px; border-collapse: collapse; font: 400 14px/1.5 var(--font-sans); color: var(--fk-body); }
.fk .dr-table thead th {
  padding: 0 14px 10px 0; text-align: left; border-bottom: 1px solid var(--fk-line);
  font: 600 11px/1.3 var(--font-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--fk-mute);
}
.fk .dr-table tbody :is(th, td) { padding: 11px 14px 11px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--fk-line-2); }
.fk .dr-table tbody tr:first-child :is(th, td) { border-top: 0; }
.fk .dr-table tbody th { width: 31%; font-weight: 600; }
html body .fk .dr-table tbody th a { color: var(--fk-ink); text-decoration: none; }
html body .fk .dr-table tbody th a::after { content: " →"; color: var(--fk-blue); opacity: 0; transition: opacity 120ms; }
html body .fk .dr-table tbody tr:hover th a { color: var(--fk-blue); }
html body .fk .dr-table tbody tr:hover th a::after { opacity: 1; }
.fk .dr-table tbody td:last-child { padding-right: 0; }

/* a route card (§4.2 labels) */
.fk .dr-card-group { display: inline-flex; align-items: center; font: 600 11px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fk-blue); }
.fk .dr-card-group::before { content: ""; width: 3px; height: 11px; margin-right: 8px; border-radius: 2px; background: var(--orange); transform: skewX(-14deg); }
.fk .dr-card-h { margin-top: 10px; font: 650 clamp(24px, 2.1vw, 30px)/1.14 var(--font-display); letter-spacing: -.026em; color: var(--fk-ink); text-wrap: balance; }
.fk .dr-card-lead { max-width: 64ch; margin-top: 8px; font: 400 16px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .dr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.fk .dr-facts > div { padding: 13px 16px 14px; border-radius: 12px; background: #f5f8fb; box-shadow: inset 0 0 0 1px var(--fk-line-2); }
.fk .dr-facts dt, .fk .dr-answer dt, .fk .dr-label {
  font: 600 10.5px/1.3 var(--font-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--fk-mute);
}
.fk .dr-facts dd { margin-top: 5px; font: 500 14.5px/1.45 var(--font-sans); color: var(--fk-ink); }
.fk .dr-card > .dr-label { margin: 22px 0 10px; }
.fk .dr-steps { counter-reset: dr-step; display: flex; flex-direction: column; gap: 10px; }
.fk .dr-steps > li { position: relative; counter-increment: dr-step; padding-left: 44px; min-height: 24px; font: 400 15px/1.6 var(--font-sans); color: var(--fk-ink-2); }
.fk .dr-steps > li::before { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 19px; border-radius: 2px; background: var(--fk-blue); transform: var(--fk-stroke); }
.fk .dr-steps > li::after { content: counter(dr-step, decimal-leading-zero); position: absolute; left: 18px; top: 4px; font: 650 12px/1.4 var(--font-display); letter-spacing: .06em; color: var(--fk-blue); }
.fk .dr-steps a, .fk .dr-answer a, .fk .dr-note a { color: var(--fk-blue); }
.fk .dr-answer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; margin-top: 22px; }
.fk .dr-answer > div { padding-top: 12px; border-top: 2px solid #b9d3ec; }
.fk .dr-answer > div + div { border-top-color: #d5dde6; }
.fk .dr-answer dd { margin-top: 6px; font: 400 14.5px/1.6 var(--font-sans); color: var(--fk-ink-2); }
.fk .dr-results { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.fk .dr-note { max-width: 72ch; margin-top: 16px; font: 400 14.5px/1.6 var(--font-sans); color: var(--fk-body); }
.fk .dr-card-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--fk-line-2);
}
.fk .dr-card-foot .dr-label { margin-bottom: 8px; }
.fk .dr-plain { font: 400 14px/1.5 var(--font-sans); color: var(--fk-ink-2); }
.fk .dr-act-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fk .dr-acts .dr-label { text-align: left; }
/* capture buttons that are real links here */
html body .fk a.fk-btn { height: 36px; padding: 0 15px; font-size: 13px; text-decoration: none; transition: background-color 120ms, box-shadow 120ms; }
html body .fk a.fk-btn:not(.fk-btn--primary):hover { background: #f3f7fb; box-shadow: inset 0 0 0 1px #b9cde2; }
html body .fk a.fk-btn--primary:hover { background: var(--fk-blue-deep); }
.fk a.fk-btn:focus-visible { outline: 2px solid var(--fk-blue); outline-offset: 2px; }
.fk .dr-out span { color: var(--fk-blue); }

/* the router, live (page script): one view at a time */
.fk .dr-router.is-live .dr-view > * + * { margin-top: 0; padding-top: 0; border-top: 0; }
.fk .dr-router.is-live .dr-view > .is-shown { animation: dr-in 220ms var(--v6-ease) both; }
@keyframes dr-in { from { opacity: 0; transform: translateY(4px); } }

/* ================================================================ how to check: the issuer ledger */
.fk .dr-why { display: flex; flex-direction: column; gap: 30px; }
.fk .dr-ledger { padding: 24px 28px 12px; border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); }
.fk .dr-ledger-h { font: 650 19px/1.35 var(--font-display); letter-spacing: -.015em; color: var(--fk-ink); }
.fk .dr-ledger dl { margin-top: 12px; }
.fk .dr-ledger dl > div { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 4px 20px; padding: 13px 0; border-top: 1px solid var(--fk-line-2); }
.fk .dr-ledger dt { position: relative; padding-left: 20px; font: 600 15.5px/1.45 var(--font-sans); color: var(--fk-ink); }
.fk .dr-ledger dt::before { content: ""; position: absolute; left: 3px; top: 5px; width: 4px; height: 14px; border-radius: 2px; background: var(--fk-blue); transform: var(--fk-stroke); }
.fk .dr-ledger dd { font: 400 15.5px/1.45 var(--font-sans); color: var(--fk-body); }

/* ================================================================ warning signs: a plain list, two columns */
.fk .dr-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; border-bottom: 1px solid var(--fk-line); }
.fk .dr-signs > li {
  position: relative; padding: 20px 0 20px 32px; border-top: 1px solid var(--fk-line);
  font: 400 16.5px/1.6 var(--font-sans); color: var(--fk-ink-2);
}
.fk .dr-signs > li::before { content: ""; position: absolute; left: 5px; top: 27px; width: 4px; height: 15px; border-radius: 2px; background: #8fb3d6; transform: var(--fk-stroke); }

/* ================================================================ consent, request, answer (the app panel) */
.fk .dr-shot { margin-top: 4px; }
.fk .dr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; }
.fk .dr-form { display: flex; flex-direction: column; gap: 10px; }
.fk .dr-form-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fk .dr-form-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fk .dr-consent { padding: 26px 28px 24px; }
.fk .dr-consent .fk-doc-clause { margin-top: 12px; font-size: 12.5px; line-height: 1.65; }
.fk .dr-consent .fk-doc-meta + .fk-doc-clause { margin-top: 18px; }
.fk .dr-consent-sign { display: flex; align-items: flex-end; gap: 16px; margin-top: 24px; }
.fk .dr-consent-sign .fk-doc-field { flex: 1 1 auto; min-width: 0; max-width: 220px; }
.fk .dr-consent-date { flex: 0 0 96px; padding-bottom: 6px; border-bottom: 1px solid #d8d1c4; font: 500 10.5px/1 var(--font-sans); color: var(--fk-faint); }
.fk .dr-mail { padding: 0; overflow: hidden; }
.fk .dr-mail-head > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--fk-line-2); }
.fk .dr-mail-head dt { font: 500 12.5px/1.45 var(--font-sans); color: var(--fk-mute); }
.fk .dr-mail-head dd { font: 500 13px/1.45 var(--font-sans); color: var(--fk-ink); }
.fk .dr-mail-body { padding: 16px 18px 4px; }
.fk .dr-mail-body p { font: 400 13.5px/1.62 var(--font-sans); color: var(--fk-ink-2); }
.fk .dr-mail-body p + p { margin-top: 10px; }
.fk .dr-mail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px 16px; }
.fk .dr-mail-note { font: 400 12px/1.4 var(--font-sans); color: var(--fk-mute); }
.fk .dr-kv dd .fk-chip { margin-bottom: 6px; }
.fk .dr-kv > div { grid-template-columns: 96px minmax(0, 1fr); }

/* the three actions, in words */
.fk .dr-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; margin-top: 48px; }
.fk .dr-trio > li { padding-top: 18px; border-top: 1px solid var(--fk-line); }
.fk .dr-trio h3 { display: flex; align-items: center; font: 650 19px/1.3 var(--font-display); letter-spacing: -.018em; color: var(--fk-ink); }
.fk .dr-trio h3::before { content: ""; flex: none; width: 4px; height: 16px; margin-right: 12px; border-radius: 2px; background: var(--fk-blue); transform: var(--fk-stroke); }
.fk .dr-trio p { margin-top: 10px; font: 400 15.5px/1.62 var(--font-sans); color: var(--fk-body); }
.fk .dr-trio a { color: var(--fk-blue); }
.fk .dr-trio + .fk-after { margin-top: 26px; }

/* ================================================================ the boundary: the checker's three results */
.fk .dr-bound { display: flex; flex-direction: column; gap: 28px; }
.fk .dr-outcomes { padding: 22px 26px 8px; border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); }
.fk .dr-outcomes-h { margin-bottom: 8px; font: 600 12px/1.35 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fk-mute); }
.fk .dr-outcomes li { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 8px 18px; padding: 14px 0; border-top: 1px solid var(--fk-line-2); }
.fk .dr-outcomes li .fk-chip { justify-self: start; }
.fk .dr-outcomes li p { font: 400 15px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .dr-bound-text p { max-width: 68ch; font: 400 16.5px/1.65 var(--font-sans); color: var(--fk-body); }
.fk .dr-bound-text p + p { margin-top: 14px; }
.fk .dr-bound-text p:first-child { font-weight: 500; color: var(--fk-ink-2); }
.fk .dr-bound-text a { color: var(--fk-blue); }

/* ================================================================ sources */
.fk .dr-sources { padding: 6px 26px; border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); }
.fk .dr-sources > li + li { border-top: 1px solid var(--fk-line-2); }
html body .fk .dr-sources a { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 2px 22px; padding: 14px 0; text-decoration: none; }
.fk .dr-sources b { font: 600 14.5px/1.45 var(--font-sans); color: var(--fk-ink); }
.fk .dr-sources span { font: 400 14.5px/1.45 var(--font-sans); color: var(--fk-blue); }
.fk .dr-sources span::after { content: " ↗"; }
html body .fk .dr-sources a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================ responsive */
@media (min-width: 900px) {
  /* live: every view shares one grid cell, so the panel keeps its height and nothing below jumps */
  .fk .dr-router.is-live .dr-view { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fk .dr-router.is-live .dr-view > * { grid-row: 1; grid-column: 1; }
  .fk .dr-router.is-live .dr-view > :not(.is-shown) { visibility: hidden; }
}
@media (max-width: 1180px) {
  .fk .dr-body { grid-template-columns: 244px minmax(0, 1fr); background: linear-gradient(90deg, #f8fafc 0 243px, #e8edf2 243px 244px, #fff 244px); }
  .fk .dr-view { padding: 26px 26px 28px; }
}
@media (max-width: 1000px) {
  .fk .dr-cols { grid-template-columns: 1fr; }
  .fk .dr-trio { grid-template-columns: 1fr; max-width: 640px; gap: 22px; }
}
@media (max-width: 899px) {
  .fk .dr-body { grid-template-columns: minmax(0, 1fr); background: #fff; }
  .fk .dr-pick { position: static; padding: 20px 18px 18px; background: #f8fafc; border-bottom: 1px solid #e8edf2; }
  .fk .dr-pick-l { margin: 0 2px 10px; }
  .fk .dr-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 12px; }
  .fk .dr-menu > .dr-all, .fk .dr-menu > .dr-group { grid-column: 1 / -1; }
  .fk .dr-menu > ul { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 12px; }
  .fk .dr-notlisted { margin: 14px 2px 0; padding-top: 12px; }
  .fk .dr-router.is-live .dr-select { display: block; }
  .fk .dr-router.is-live .dr-menu { display: none; }
  .fk .dr-router.is-live .dr-view > :not(.is-shown) { display: none; }
  .fk .dr-view { padding: 22px 20px 24px; }
}
@media (max-width: 760px) {
  .fk .dr-signs { grid-template-columns: 1fr; }
  .fk .dr-outcomes li { grid-template-columns: 1fr; gap: 8px; }
  html body .fk .dr-sources a { grid-template-columns: 1fr; }
  .fk .dr-ledger dl > div { grid-template-columns: 1fr; gap: 2px; }
  .fk .dr-ledger dd { padding-left: 20px; }
}
@media (max-width: 640px) {
  .fk .dr-stage-bar { margin-bottom: 18px; }
  html body .fk .dr-stage-h { padding-left: 18px; font-size: 21px; }
  .fk .dr-stage-intro { padding-left: 18px; font-size: 15.5px; }
  .fk .dr-menu, .fk .dr-menu > ul { grid-template-columns: minmax(0, 1fr); }
  .fk .dr-view { padding: 20px 16px 22px; }
  .fk .dr-view > * + * { margin-top: 28px; padding-top: 28px; }
  /* the overview reads as a list of short entries */
  .fk .dr-table, .fk .dr-table :is(tbody, tr, th, td) { display: block; width: auto; }
  .fk .dr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fk .dr-table { margin-top: 10px; }
  .fk .dr-table tbody tr { padding: 12px 0; border-top: 1px solid var(--fk-line-2); }
  .fk .dr-table tbody tr:first-child { border-top: 0; }
  .fk .dr-table tbody :is(th, td) { padding: 0; border: 0; }
  .fk .dr-table tbody th { width: auto; margin-bottom: 4px; font-size: 15px; }
  .fk .dr-table tbody td { font-size: 13.5px; line-height: 1.5; }
  .fk .dr-table tbody td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--fk-mute); }
  html body .fk .dr-table tbody th a::after { opacity: 1; }
  .fk .dr-facts { grid-template-columns: 1fr; }
  .fk .dr-steps > li { padding-left: 40px; font-size: 14.5px; }
  .fk .dr-card-foot { flex-direction: column; align-items: stretch; }
  .fk .dr-card-foot .dr-act-row { flex-direction: column; }
  html body .fk .dr-card-foot a.fk-btn { width: 100%; height: 40px; }
  .fk .dr-signs > li { font-size: 16px; }
  .fk .dr-ledger, .fk .dr-outcomes { padding-left: 20px; padding-right: 20px; }
  .fk .dr-sources { padding: 4px 20px; }
  .fk .dr-form-2 { grid-template-columns: 1fr; }
  .fk .dr-consent { padding: 22px 18px 20px; }
  .fk .dr-kv > div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fk .dr-router.is-live .dr-view > .is-shown { animation: none; }
}
/* the app panel's breadcrumb gives way on very narrow screens */
.fk .dr-shot .fk-app-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
