/* THE PILOT VISUAL PASS (2026-09-08), from handoff/consult/astra-visual-2026-09-08.md.
   Loaded AFTER styles.css (Erin's Tailwind build) on every page. It does five things and
   nothing else: (1) viewport containment -- border-box, min-width:0 on flex/grid children,
   minmax(0,1fr) tracks, no nowrap on operational text at phone widths; (2) a readable type
   scale -- 16px body, 14px minimum metadata, 24px/700 record title, 18px/650 section heads;
   (3) one record header shape, drawn by the pages with .fn-record; (4) a flat work surface
   -- #F3F5F7 ground, white surfaces, 1px lines, 8px radius, no routine shadows, no rainbow
   tiles; (5) unmistakable actions -- 52px targets, full width on phones, text labels.
   The Tailwind utility names the pages already use are remapped here rather than rewritten
   in thirteen templates; a page that needs a new shape uses an .fn-* class from this file.
   Never hide overflow to conceal it: a 390px viewport must have scrollWidth == innerWidth. */

:root {
  color-scheme: light;
  --fn-bg: #f3f5f7;
  --fn-surface: #ffffff;
  --fn-text: #17212f;
  --fn-muted: #526174;
  --fn-line: #d5dce4;
  --fn-control-line: #738195;
  --fn-accent: #1456c0;
  --fn-accent-soft: #edf3ff;
  --fn-accent-line: #b9cdf0;
  --fn-success: #17643a;
  --fn-warning: #825000;
  --fn-warning-soft: #fff4d6;
  --fn-warning-line: #e3c36a;
  --fn-danger: #b42318;
  --fn-radius: 8px;
  --fn-target: 52px;
  /* Erin's tokens, re-pointed so the utilities the pages carry land on this palette */
  --muted: var(--fn-muted);
  --border: var(--fn-line);
}

/* ---------- 1. containment ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { margin: 0; background: var(--fn-bg); color: var(--fn-text);
  font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { background: var(--fn-bg) !important; }
main :where(section, article, div, li, a, span, p, h1, h2, h3, h4, ul, ol, details, summary, form, label) { min-width: 0; }
img, svg, video { max-width: 100%; }
table { max-width: 100%; }
.grid { grid-auto-columns: minmax(0, 1fr); }
.grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.long-id, .source, .font-mono { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .whitespace-nowrap:not(.fn-keep) { white-space: normal; }
  .truncate:not(.fn-keep) { overflow: visible; text-overflow: clip; white-space: normal; }
  .sm\:grid-cols-2, .md\:grid-cols-4, .lg\:grid-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .max-w-md { max-width: 100%; }
}

/* ---------- 2. type ---------- */
h1, h2, h3, h4 { margin: 0; }
h1, .fn-title { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--fn-text); }
h2, .fn-h2 { font-size: 1.125rem; line-height: 1.3; font-weight: 650; color: var(--fn-text); }
h3, .fn-h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--fn-text); }
.text-3xl, .text-4xl, .md\:text-4xl, .text-2xl, .md\:text-2xl, .text-xl { font-size: 1.5rem; line-height: 1.2; }
.text-lg { font-size: 1.125rem; line-height: 1.3; }
.text-sm { font-size: 1rem; line-height: 1.5; }
.text-xs { font-size: .875rem; line-height: 1.45; }
.text-\[10px\] { font-size: .75rem; }
.text-muted, .text-gray-500, .text-gray-600 { color: var(--fn-muted); }
.text-gray-700, .text-gray-800, .text-gray-900, .text-foreground { color: var(--fn-text); }
.text-primary-600, .text-primary-700, .text-primary-800, .text-secondary-600, .link { color: var(--fn-accent); }
.text-amber-700, .text-amber-800 { color: var(--fn-warning); }
.text-green-700 { color: var(--fn-success); }
a { text-underline-offset: 3px; }
.fn-meta { font-size: .875rem; line-height: 1.45; color: var(--fn-muted); }
.fn-label { display: block; font-size: .875rem; line-height: 1.3; font-weight: 600; color: var(--fn-muted); margin-bottom: 2px; }

/* ---------- 3. the record header ---------- */
.fn-back { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; color: var(--fn-accent);
  font-size: .9375rem; font-weight: 600; text-decoration: none; }
.fn-record { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 16px; border-bottom: 1px solid var(--fn-line); margin-bottom: 16px; }
.fn-record .fn-title .fn-code { color: var(--fn-accent); font-variant-numeric: tabular-nums; }
.fn-record .fn-title .fn-code::after { content: " · "; color: var(--fn-muted); font-weight: 400; }
.fn-ident { font-size: .875rem; line-height: 1.45; color: var(--fn-text); overflow-wrap: anywhere; }
.fn-ident b { font-weight: 600; }
.fn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-tag { display: inline-block; background: #e6eaf0; color: var(--fn-text); border-radius: 6px; padding: 2px 8px; font-size: .875rem; font-weight: 500; }
.fn-warn { background: var(--fn-warning-soft); border: 1px solid var(--fn-warning-line); color: #4a2d00; border-radius: var(--fn-radius);
  padding: 12px 16px; font-size: 1rem; line-height: 1.5; }
.fn-warn b { color: var(--fn-warning); }
.fn-note { background: var(--fn-accent-soft); border: 1px solid var(--fn-accent-line); border-radius: var(--fn-radius); padding: 12px 16px; font-size: 1rem; }

/* ---------- 4. the work surface ---------- */
.bg-gray-50 { background-color: var(--fn-bg); }
.bg-white, .bg-surface\/80 { background-color: var(--fn-surface); }
.bg-gray-100 { background-color: #e6eaf0; }
.bg-primary-50, .bg-primary-100, .bg-secondary-50, .bg-secondary-100 { background-color: var(--fn-accent-soft); }
.bg-primary-500 { background-color: var(--fn-accent); }
.border-border, .border-gray-200, .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fn-line); }
.border-primary-200, .border-primary-500, .border-secondary-500 { border-color: var(--fn-accent-line); }
.border-amber-300 { border-color: var(--fn-warning-line); }
.bg-amber-50 { background-color: var(--fn-warning-soft); }
.rounded-2xl, .rounded-xl, .md\:rounded-2xl, .rounded-lg { border-radius: var(--fn-radius); }
.card, .card--default { box-shadow: none; border-radius: var(--fn-radius); }
.shadow-sm { box-shadow: none; }
.brand-card, .manual-card, .flash-codes-card { transition: none; }
.brand-card:hover, .manual-card:hover, .flash-codes-card:hover { box-shadow: none; transform: none; border-color: var(--fn-control-line); }
.fn-surface { background: var(--fn-surface); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); padding: 16px; }
.fn-section { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.fn-section + .fn-section { margin-top: 24px; }
.fn-list { background: var(--fn-surface); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); overflow: hidden; display: flex; flex-direction: column; }
.fn-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--fn-line);
  text-decoration: none; color: inherit; background: var(--fn-surface); }
.fn-row:last-child { border-bottom: 0; }
a.fn-row:hover, a.fn-row:focus-visible { background: #f7f9fb; }
.fn-row .fn-row-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.fn-row .fn-row-title { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--fn-text); }
.fn-row .fn-row-sub { font-size: .875rem; line-height: 1.4; color: var(--fn-muted); }
.fn-row .fn-row-sub.fn-strong { color: var(--fn-text); }
.fn-row .fn-row-end { flex: 0 0 auto; font-size: .875rem; color: var(--fn-muted); text-align: right; }
.fn-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--fn-muted); }
.fn-mark { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 6px; background: #e6eaf0; color: var(--fn-text);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; letter-spacing: -.02em; }
.fn-pair { padding: 12px 0; border-bottom: 1px solid var(--fn-line); display: flex; flex-direction: column; gap: 6px; }
.fn-pair:last-child { border-bottom: 0; }
.fn-pair .fn-pair-cause { font-weight: 600; }
.fn-pairs { display: flex; flex-direction: column; }
.fn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .fn-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fn-list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fn-stat { background: var(--fn-surface); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); padding: 12px 16px; }
.fn-stat .fn-stat-n { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fn-stat .fn-stat-l { font-size: .875rem; color: var(--fn-muted); }
.fn-metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .875rem; color: var(--fn-muted); }
.fn-metrics b { color: var(--fn-text); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--fn-line); margin: 16px 0; }
.preview-banner { white-space: normal; text-align: left; font-size: .8125rem; line-height: 1.4; padding: 8px 16px; letter-spacing: 0; }

/* folds: native details, no framework */
details.fn-fold { border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-surface); }
details.fn-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; }
details.fn-fold > summary::-webkit-details-marker { display: none; }
details.fn-fold > summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--fn-muted); border-bottom: 2px solid var(--fn-muted);
  transform: rotate(45deg); margin-left: auto; margin-right: 4px; transition: transform .12s; }
details.fn-fold[open] > summary::after { transform: rotate(225deg); margin-top: 6px; }
details.fn-fold > summary .fn-sum-title { font-size: 1rem; font-weight: 600; flex: 1 1 auto; }
details.fn-fold > summary .fn-sum-meta { font-size: .875rem; color: var(--fn-muted); flex: 0 1 auto; }
details.fn-fold > .fn-fold-body { padding: 0 16px 16px; }
details.fn-fold.fn-fold--quiet { border: 0; background: transparent; }
details.fn-fold.fn-fold--quiet > summary { padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--fn-line); }
details.fn-fold.fn-fold--quiet > .fn-fold-body { padding-left: 0; padding-right: 0; padding-top: 12px; }

/* ---------- 5. actions ---------- */
:focus-visible { outline: 3px solid var(--fn-accent); outline-offset: 3px; }
button, input, select, textarea { font: inherit; max-width: 100%; }
input.input, input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea.input {
  min-height: var(--fn-target); border: 1px solid var(--fn-control-line); border-radius: var(--fn-radius); font-size: 1rem; background: #fff; }
textarea.input { min-height: 96px; }
input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--fn-accent); }
.fn-action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--fn-target); padding: 12px 16px;
  border-radius: var(--fn-radius); font-size: 1rem; font-weight: 600; text-decoration: none; width: 100%; cursor: pointer; border: 0; }
.fn-action--primary { background: var(--fn-accent); color: #fff; }
.fn-action--primary:hover { background: #0f479f; }
.fn-action--secondary { background: var(--fn-surface); color: var(--fn-accent); border: 1px solid var(--fn-control-line); }
.fn-action--secondary:hover { background: #f7f9fb; }
@media (min-width: 601px) { .fn-action:not(.fn-action--block) { width: auto; min-width: 220px; } }
.fn-actions { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 601px) { .fn-actions { flex-direction: row; } }
.fn-paid { background: var(--fn-surface); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.fn-paid .fn-paid-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--fn-text); }
.fn-paid .fn-paid-title .fn-lock { width: 16px; height: 16px; flex: 0 0 auto; color: var(--fn-muted); }
.fn-paid .fn-paid-desc { font-size: .875rem; line-height: 1.45; color: var(--fn-muted); }
.fn-paid .fn-action { margin-top: 4px; }
.fn-pro { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--fn-accent); border: 1px solid var(--fn-accent-line); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: middle; line-height: 1.4; }
/* the checklist */
.fn-check { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--fn-line); }
.fn-check:last-child { border-bottom: 0; }
.fn-check > label { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; cursor: pointer; }
.fn-check input[type="checkbox"] { flex: 0 0 auto; margin: 1px 0 0; }
.fn-check .fn-check-label { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.fn-check .fn-check-detail { font-size: .875rem; line-height: 1.45; color: var(--fn-muted); margin-top: 2px; }
.fn-check.is-done .fn-check-label { font-weight: 500; color: var(--fn-muted); }
.fn-check.is-done .fn-check-label::after { content: "Done"; margin-left: 8px; color: var(--fn-success); font-weight: 700; font-size: .875rem; }
.fn-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .875rem; color: var(--fn-muted); }
.fn-progress b { color: var(--fn-text); }
.fn-progress button { min-height: 32px; padding: 0 8px; background: none; border: 0; color: var(--fn-accent); font-weight: 600; cursor: pointer; }
.fn-link-btn { background: none; border: 0; color: var(--fn-accent); font-weight: 600; padding: 8px 0; min-height: 44px; cursor: pointer; }
/* the top bar */
.fn-header { min-height: 56px; background: var(--fn-surface); border-bottom: 1px solid var(--fn-line); }
.fn-header nav { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; max-width: 80rem; margin: 0 auto; }
.fn-header .fn-brandlink { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fn-text); font-weight: 600; min-height: 44px; flex: 0 0 auto; }
.fn-header .fn-brandlink img { width: 28px; height: 28px; }
.fn-header .fn-nav { display: none; align-items: center; gap: 16px; margin-left: 8px; }
.fn-header .fn-nav a { color: var(--fn-accent); text-decoration: none; font-size: .9375rem; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.fn-header .fn-nav a.is-active { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.fn-header .fn-account { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--fn-muted); flex: 0 0 auto; }
.fn-header .fn-account a { color: var(--fn-accent); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.fn-header .fn-plan { font-size: .75rem; font-weight: 700; border-radius: 4px; padding: 2px 6px; background: #e6eaf0; color: var(--fn-text); }
.fn-header .fn-plan.is-pro { background: var(--fn-accent); color: #fff; }
.fn-header form { flex: 0 1 260px; }
.fn-header form input { min-height: 40px; padding: 0 40px 0 12px; }
.fn-header form .combo-box__input-group { height: 40px; }
@media (min-width: 900px) { .fn-header .fn-nav { display: flex; } .fn-header .fn-nav--phone { display: none; } }
@media (max-width: 899px) { .fn-header .fn-nav--phone { display: none; } .fn-header form { flex: 1 1 120px; } .fn-header .fn-account .fn-who { display: none; } }
.fn-header .fn-nav a, .fn-header .fn-account a { white-space: nowrap; }
/* the breadcrumb: wide screens only; the phone has the back link in the record header */
.breadcrumbs { display: none; flex-wrap: wrap; gap: 4px 6px; font-size: .875rem; }
@media (min-width: 768px) { .breadcrumbs { display: flex; } }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs__link { color: var(--fn-accent); text-decoration: none; }
/* page gutters */
@media (max-width: 600px) {
  .px-5, .md\:px-20 { padding-left: 16px; padding-right: 16px; }
  .p-6, .p-5, .md\:p-10 { padding: 16px; }
  .py-10, .py-8 { padding-top: 16px; padding-bottom: 24px; }
  .gap-10 { gap: 24px; }
  .rounded-none { border-radius: 0; }
}
/* the toast */
#fn-toast { font-size: 1rem; }