/* ===== DESIGN TOKENS (see design spec, section 2) ===== */
:root{
  --fs-base:1.125rem;            /* 18 px body; user control scales this */
  --ink:#1a1a1a;                 /* body text */
  --ink-2:#3d4451;               /* secondary text */
  --paper:#ffffff;
  --panel:#f4f6f8;
  --line:#8a94a3;                /* control borders, 3:1 on white */
  --rule:#c9ced6;                /* decorative dividers only */
  --brand:#205c9e;               /* links, primary buttons */
  --brand-dk:#17467a;            /* hover, pressed */
  --focus:#b35900;               /* focus ring */
  --info-bg:#eef4fb; --info-bd:#205c9e;
  --warn-bg:#fdf3df; --warn-ink:#6b4500; --warn-bd:#8a5a00;
  --end-bg:#fbeaea;  --end-ink:#8a1c1c;  --end-bd:#8a1c1c;
  --ok-bg:#e8f4ec;   --ok-ink:#1d5e33;   --ok-bd:#1d5e33;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;
  --radius:6px;
  --tap:2.75rem;                 /* 44 px minimum target */
}
html{font-size:100%}
body{margin:0;background:#fff;font-size:var(--fs-base);line-height:1.55;color:var(--ink);font-family:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
/* ===== Design-review chrome (not part of the page design) ===== */

/* ===== PAGE SHELL ===== */
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.site-head{border-bottom:2px solid var(--brand);padding:var(--s3) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.logo{font-weight:bold;font-size:1.15em;color:var(--brand);text-decoration:none}
.help{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;font-size:.95em}
.help a.call{font-weight:bold;white-space:nowrap}
.textsize{display:inline-flex;gap:2px;align-items:center}
.textsize button{min-width:var(--tap);min-height:var(--tap);border:1px solid var(--line);background:#fff;border-radius:var(--radius);font:inherit;cursor:pointer}
main{padding:var(--s4) var(--s4) var(--s6);max-width:62rem;margin:0 auto}
a{color:var(--brand)} a:hover{color:var(--brand-dk)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1{font-size:1.75em;line-height:1.2;margin:.4em 0 .3em}
h2{font-size:1.3em;line-height:1.25;margin:1.6em 0 .5em}
h3{font-size:1.1em;margin:1.2em 0 .4em}
.crumbs{font-size:.9em;margin-top:var(--s2)}
.year-badge{display:inline-block;font-family:system-ui,Arial,sans-serif;font-size:.8em;font-weight:bold;border:2px solid var(--ink);border-radius:4px;padding:0 .4em;vertical-align:middle}
.lede{font-size:1.05em;color:var(--ink-2)}
.tpmo-top{background:var(--panel);border-left:4px solid var(--brand);padding:var(--s3) var(--s4);margin:var(--s4) 0;font-size:.95em}
.zip-carry{font-size:.95em;background:var(--info-bg);border:1px solid var(--info-bd);border-radius:var(--radius);padding:var(--s2) var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:.45em 1em;border-radius:var(--radius);border:2px solid var(--brand);background:var(--brand);color:#fff;font:inherit;font-weight:bold;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--brand-dk);color:#fff}
.btn.secondary{background:#fff;color:var(--brand)}
.btn.link{background:none;border-color:transparent;color:var(--brand);text-decoration:underline;font-weight:normal;padding-left:.2em;padding-right:.2em}
label{font-weight:bold}
input[type=text],select{font:inherit;min-height:var(--tap);padding:.35em .55em;border:2px solid var(--line);border-radius:var(--radius);width:100%;max-width:22rem;background:#fff;color:var(--ink)}
.field{margin:var(--s3) 0}
.hint{display:block;font-weight:normal;color:var(--ink-2);font-size:.9em}
.err-msg{color:var(--end-ink);font-weight:bold}
.site-foot{border-top:2px solid var(--brand);background:var(--panel);padding:var(--s4);font-size:.92em}
.site-foot p{max-width:62rem;margin:.5em auto}
.freshness{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);font-size:.9em;margin-top:var(--s6);background:#fff}
.freshness h2{font-size:1em;margin:0 0 .3em}
.freshness ul{margin:0;padding-left:1.2em}
.byline{font-size:.92em;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:var(--s3);margin-top:var(--s5)}
.slot{border:2px dashed var(--warn-bd);background:var(--warn-bg);color:var(--warn-ink);padding:var(--s3);border-radius:var(--radius);font-family:system-ui,Arial,sans-serif;font-size:.85em}

/* ===== HOME: tiles ===== */
.lookup{background:var(--info-bg);border:1px solid var(--info-bd);border-radius:var(--radius);padding:var(--s4);margin:var(--s4) 0}
.lookup .row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:var(--s4) 0;padding:0;list-style:none}
.tiles a{display:block;min-height:5.5em;border:2px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink)}
.tiles a:hover{border-color:var(--brand)}
.tiles b{display:block;color:var(--brand);font-size:1.05em}
.tiles .changes{border-color:var(--end-bd);background:var(--end-bg)}
.tiles .changes b{color:var(--end-ink)}
.statelist{columns:3 12rem;padding-left:1.2em}
.statelist li{margin:.25em 0}

/* ===== RESULTS ===== */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--line);margin:var(--s4) 0 0;padding:0;list-style:none}
.tabs button{font:inherit;min-height:var(--tap);padding:.4em 1em;border:2px solid transparent;border-bottom:0;background:none;cursor:pointer;color:var(--brand)}
.tabs button[aria-selected=true]{border-color:var(--line);background:#fff;color:var(--ink);font-weight:bold;margin-bottom:-2px;border-radius:var(--radius) var(--radius) 0 0}
.results-wrap{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:var(--s5);margin-top:var(--s4)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.count{font-weight:bold}
.sorted{font-size:.95em;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s3);padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.3em;min-height:var(--tap);padding:.2em .7em;border:2px solid var(--brand);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:.92em;cursor:pointer}
.chip .x{font-family:system-ui,Arial,sans-serif;font-weight:bold}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
.card{border:2px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.card h3{margin:0 0 .15em;font-size:1.15em;overflow-wrap:anywhere}
.card .meta{font-size:.92em;color:var(--ink-2);margin:0 0 var(--s3)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:0 0 var(--s3)}
.nums div{background:var(--panel);border-radius:var(--radius);padding:var(--s2) var(--s3)}
.nums dt{font-size:.82em;color:var(--ink-2)}
.nums dd{margin:0;font-weight:bold;font-size:1.1em}
.extras{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3);padding:0;list-style:none;font-size:.9em}
.extras li{border:1px solid var(--line);border-radius:999px;padding:.1em .6em}
.extras li[aria-hidden]{display:none}
.card-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.cmp{display:inline-flex;align-items:center;gap:.4em;min-height:var(--tap);font-weight:normal}
.cmp input{width:1.4em;height:1.4em}
.sb-flag{font-size:.88em;color:var(--warn-ink)}
.compare-tray{position:sticky;bottom:0;background:#fff;border-top:3px solid var(--brand);padding:var(--s3) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;font-size:.95em}
.tw{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:.95em}
th,td{border:1px solid var(--rule);padding:.45em .6em;text-align:left;vertical-align:top}
thead th{background:var(--panel)}
caption{text-align:left;font-weight:bold;padding:.3em 0}
.view-toggle{display:inline-flex;border:2px solid var(--line);border-radius:var(--radius);overflow:hidden}
.view-toggle button{font:inherit;min-height:var(--tap);padding:.3em .9em;border:0;background:#fff;color:var(--brand);cursor:pointer}
.view-toggle button[aria-pressed=true]{background:var(--brand);color:#fff;font-weight:bold}

/* ===== FILTERS ===== */
.filters fieldset{border:0;border-top:1px solid var(--rule);margin:0;padding:var(--s3) 0}
.filters legend{font-weight:bold;padding:0}
.filters .opt{display:flex;align-items:center;gap:.5em;min-height:var(--tap)}
.filters .opt input{width:1.3em;height:1.3em;flex:none}
.filters .opt span.n{color:var(--ink-2);font-size:.9em}
.snp-toggle{margin:var(--s2) 0}
.filters-open{display:none}
.sheet{border:2px solid var(--line);border-radius:var(--radius)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);position:sticky;top:0;background:#fff}
.sheet-body{padding:0 var(--s4)}
.sheet-foot{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--rule);position:sticky;bottom:0;background:#fff}
.sheet-foot .btn{flex:1}

/* ===== PLAN DETAIL ===== */
.plan-head{border-bottom:1px solid var(--rule);padding-bottom:var(--s4)}
.plan-head h1{overflow-wrap:anywhere}
.id-line{font-family:system-ui,Arial,sans-serif;font-size:.95em}
.stars{display:inline-flex;align-items:center;gap:.4em;flex-wrap:wrap}
.stars .glyph{letter-spacing:.05em}
.low-perf{display:flex;gap:var(--s2);background:var(--end-bg);border:2px solid var(--end-bd);border-radius:var(--radius);padding:var(--s3);color:var(--end-ink);margin:var(--s3) 0}
.docs{border:2px solid var(--brand);border-radius:var(--radius);padding:var(--s4);margin:var(--s4) 0;background:var(--info-bg)}
.docs h2{margin-top:0}
.doc-main{font-size:1.05em}
.docs ul{padding-left:1.2em}
.doc-missing{background:var(--warn-bg);border:2px solid var(--warn-bd);color:var(--warn-ink);border-radius:var(--radius);padding:var(--s3) var(--s4)}
.shared-note{font-size:.92em;color:var(--ink-2)}
details{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2) var(--s3);margin:var(--s3) 0}
summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;font-weight:bold;color:var(--brand)}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.3em 1em}
dl.facts dt{font-weight:bold}
dl.facts dd{margin:0}

/* ===== COMPARE ===== */
.cmp-head{position:sticky;top:0;background:#fff;z-index:2}
.cmp-table th[scope=row]{background:var(--panel);width:12rem;position:sticky;left:0;z-index:1}
.cmp-table thead th{position:sticky;top:0;z-index:3}
.cmp-table thead th:first-child{left:0;z-index:4}
.cmp-table tr.same{display:none}
.cmp-table.all tr.same{display:table-row}
.cmp-table .sec th{background:var(--brand);color:#fff;font-size:1em}
.rm{font:inherit;font-size:.9em;min-height:var(--tap);border:0;background:none;color:var(--brand);text-decoration:underline;cursor:pointer;padding:0}
.switch{display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);font-weight:bold}
.switch input{width:1.4em;height:1.4em}

/* ===== PLAN CHANGES ROWS ===== */
.status{display:inline-block;font-family:system-ui,Arial,sans-serif;font-weight:bold;font-size:.85em;padding:.1em .5em;border-radius:4px;border:2px solid}
.st-end{background:var(--end-bg);color:var(--end-ink);border-color:var(--end-bd)}
.st-cons{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-bd)}
.st-sar{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-bd)}
.st-ren{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-bd)}
.change-row{border:2px solid var(--line);border-radius:var(--radius);padding:var(--s4);margin:var(--s4) 0}
.change-row h3{margin:0 0 .3em;overflow-wrap:anywhere}
.arrow-to{margin:var(--s3) 0;padding:var(--s3) var(--s4);background:var(--panel);border-radius:var(--radius)}
.arrow-to b.lbl{display:block;font-size:.85em;color:var(--ink-2);font-family:system-ui,Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em}

/* ===== STATES ===== */
.state-box{border:2px solid var(--line);border-radius:var(--radius);padding:var(--s5);text-align:left;margin:var(--s5) 0}
.state-box.err{border-color:var(--end-bd)}
.gloss dt{font-weight:bold;font-size:1.05em;margin-top:var(--s4)}
.gloss dd{margin:.2em 0 0}

/* ===== RESPONSIVE (container queries so the 320 px review frame behaves like a phone) ===== */
@media (max-width: 48rem){
  .results-wrap{grid-template-columns:1fr}
  .filters-desktop{display:none}
  .filters-open{display:inline-flex}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 30rem){
  h1{font-size:1.45em}
  .tiles{grid-template-columns:1fr}
  .site-head{padding:var(--s2) var(--s3)}
  main{padding:var(--s3) var(--s3) var(--s5)}
  .help{width:100%;justify-content:space-between}
  .cmp-table th[scope=row]{width:7.5rem;font-size:.9em}
  .cmp-table td{min-width:8.5rem}
  .cmp-col3{display:none}
  .phone-only{display:block!important}
  dl.facts{grid-template-columns:1fr}
  .statelist{columns:1}
}
.phone-only{display:none}
@media print{
  body{background:#fff}.frame{box-shadow:none;max-width:none}
  .cmp-table tr.same{display:table-row}.cmp-col3{display:table-cell!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}
/* ===== DTCO build additions (2026-11-11) ===== */
.preview-bar{background:#26303d;color:#fff;font-family:system-ui,Arial,sans-serif;font-size:.85em;padding:.4em 1em}
main:focus{outline:none}
.tiles.one{grid-template-columns:1fr}
/* Compliance ruling 2026-11-11: note sits directly beside the MOOP figure, same font, never a tooltip */
.moop .fig{display:block}
.moop-note{display:block;font-family:inherit;font-weight:normal;font-size:1em;line-height:1.45;margin-top:.35em;color:var(--ink)}
.nums dd.moop{font-size:1em}.nums dd.moop .fig{font-size:1.1em;font-weight:bold}
.nums .wide{grid-column:1/-1}
.nums .wide dd.moop{display:flex;gap:1em;align-items:baseline}
.nums .wide dd.moop .fig{flex:none}
.nums .wide dd.moop .moop-note{margin-top:0}
td.moop .fig{font-weight:bold}
dl.facts dd.moop .fig{font-weight:bold}
.pid{font-family:system-ui,Arial,sans-serif}
.lpi-flag,.src-note{color:var(--end-ink);font-size:.95em}
.src-note{background:var(--warn-bg);border:2px solid var(--warn-bd);color:var(--warn-ink);border-radius:var(--radius);padding:var(--s2) var(--s3);margin:var(--s3) 0}
.plan-hits{padding-left:1.2em}
html{scroll-padding-bottom:6rem;scroll-padding-top:1rem}
.sheet-wrap{position:fixed;inset:0;background:#fff;z-index:60;overflow:auto}
.sheet-wrap .filters-desktop{display:block}
.cmp-table td,.cmp-table th{min-width:11rem}
[hidden]{display:none!important}
@media (max-width: 30rem){.nums .wide dd.moop{display:block}.nums .wide dd.moop .moop-note{margin-top:.35em}}
.star-disc{font-size:.95em;color:var(--ink-2);margin:var(--s2) 0 var(--s4)}
.zip-choices{margin:.5em 0 0;padding-left:1.2em}.zip-choices li{margin:.35em 0}
.lpi-flag{border:2px solid var(--end-bd);background:var(--end-bg);border-radius:var(--radius);padding:var(--s2) var(--s3)}

/* Template merge 2026-11-12: keep tray content clear of the GHL live chat bubble (bottom right, about 58px plus 20px inset) */
.compare-tray{padding-right:calc(var(--s4) + 5rem)}
/* EAO C1 2026-11-12: on plan cards the MOOP note is the same size as the MOOP figure (both 1.1em, like the other card figures) */
.nums dd.moop{font-size:1.1em}.nums dd.moop .fig{font-size:1em}