/* ============================================================================
   AmericaPorts.com — production stylesheet.
   Source: prototype.html (design system v2). Dropped from the prototype: the
   wireframe scaffolding (.wf, .tabs, .bmark, .screen, .themebtn). Added what
   the scaffold never had: the five cell states (rule G6), the marker for an
   unwritten block, the utility navigation, the footer, in-block links.
   The data colours are carried over unchanged — they already pass contrast in
   both themes.
   ============================================================================ */
:root{
  color-scheme: light;
  --paper:#FAF7F0; --surface:#FFFFFF; --surface-2:#F4F1E9; --surface-3:#EBE6DA;
  --land:#EFE7D6;
  --mark:#B3255E; --mark-2:#8E1A49; --mark-100:#FBE9F0;
  --depth:#12456E; --depth-2:#2E6E9E; --depth-100:#E6EEF5;
  --ink:#101820; --ink-2:#3A4750; --ink-3:#5A6870; --ink-4:#616D75;
  --ink-dec:#C3BCAB; --line:#DED8CA; --line-2:#EDE8DC;
  --series-1:#2A78D6; --series-2:#EB6834; --series-3:#1BAF7A;
  --series-4:#7B5BC4; --series-5:#B3255E;
  --good:#0CA30C; --warning:#FAB219; --critical:#D03B3B;
  --good-ink:#0A7A0A; --warn-ink:#8A5D00; --crit-ink:#A22C2C;
  --good-bg:#E8F6E8; --warn-bg:#FEF5E0; --crit-bg:#FBEAEA;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(16,24,32,.06);
  --sh-2:0 2px 6px rgba(16,24,32,.07), 0 12px 28px -18px rgba(16,24,32,.30);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --tap:44px; --pad:16px; --maxw:1180px;
}
@media (prefers-color-scheme: dark){:root:where(:not([data-theme="light"])){
  color-scheme: dark;
  --paper:#14171B; --surface:#1A1E23; --surface-2:#20252B; --surface-3:#2A3037; --land:#23282E;
  --mark:#E8548A; --mark-2:#F27AA6; --mark-100:#3A1526;
  --depth:#4E9AD4; --depth-2:#79B6E4; --depth-100:#152A3B;
  --ink:#F1EFEA; --ink-2:#CBC7BE; --ink-3:#A8A49B; --ink-4:#9E998F;
  --ink-dec:#4A4740; --line:#33383F; --line-2:#262B31;
  --series-1:#3987E5; --series-2:#D95926; --series-3:#199E70; --series-4:#9B80DE; --series-5:#E8548A;
  --good-bg:#12301A; --warn-bg:#33260A; --crit-bg:#37191A;
  --good-ink:#7EE08A; --warn-ink:#EFC97F; --crit-ink:#F79797;
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#14171B; --surface:#1A1E23; --surface-2:#20252B; --surface-3:#2A3037; --land:#23282E;
  --mark:#E8548A; --mark-2:#F27AA6; --mark-100:#3A1526;
  --depth:#4E9AD4; --depth-2:#79B6E4; --depth-100:#152A3B;
  --ink:#F1EFEA; --ink-2:#CBC7BE; --ink-3:#A8A49B; --ink-4:#9E998F;
  --ink-dec:#4A4740; --line:#33383F; --line-2:#262B31;
  --series-1:#3987E5; --series-2:#D95926; --series-3:#199E70; --series-4:#9B80DE; --series-5:#E8548A;
  --good-bg:#12301A; --warn-bg:#33260A; --crit-bg:#37191A;
  --good-ink:#7EE08A; --warn-ink:#EFC97F; --crit-ink:#F79797;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.22;letter-spacing:-.018em;font-weight:700}
h1{font-size:clamp(25px,5vw,38px)} h2{font-size:clamp(20px,3.4vw,27px)} h3{font-size:clamp(16.5px,2.4vw,19px)}
p{margin:0 0 1em}
a{color:var(--depth);text-underline-offset:2px} a:hover{color:var(--mark)}
:focus-visible{outline:3px solid var(--mark);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)} .sec{padding:30px 0} .sec--tight{padding:18px 0}
hr.rule{border:0;border-top:1px solid var(--line);margin:24px 0}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 4px;border-radius:4px}
.prose{font-size:15px;max-width:72ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---- header ---- */
header.site{background:var(--surface);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:12px;min-height:58px}
.brand{display:flex;align-items:center;gap:9px;font:800 18px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand .mk{width:20px;height:20px;flex:0 0 20px;position:relative}
.brand .mk::before{content:"";position:absolute;left:1px;bottom:1px;width:17px;height:17px;
  border-left:3px solid var(--mark);border-bottom:3px solid var(--mark)}
.brand .mk::after{content:"";position:absolute;right:1px;top:1px;width:6px;height:6px;border-radius:50%;background:var(--depth)}
.brand i{font-style:normal;color:var(--ink-4);font-weight:600}
.themebtn{margin-left:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--ink-2);font:600 12px/1 var(--sans);padding:0 10px;height:32px;align-self:center;cursor:pointer}
nav.main{background:var(--surface-2);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
nav.main ul{display:flex;margin:0;padding:0;list-style:none}
nav.main a{display:flex;align-items:center;min-height:var(--tap);padding:0 13px;font:600 13.5px/1.2 var(--sans);color:var(--ink-2);
  text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent}
nav.main a[aria-current]{color:var(--mark);border-bottom-color:var(--mark);background:var(--surface)}
.crumb{font:12.5px/1.4 var(--sans);color:var(--ink-3);padding:12px var(--pad) 0}
.crumb i{font-style:normal;padding:0 6px;color:var(--ink-dec)}
.eyebrow{font:700 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mark);margin:0 0 8px}

/* ---- answer block ---- */
.answer{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--mark);
  border-radius:0 var(--r) var(--r) 0;padding:16px 18px;margin:0 0 18px;box-shadow:var(--sh-1)}
.answer .lab{display:block;font:700 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mark);margin-bottom:9px}
.answer ol{margin:0;padding-left:1.15em} .answer li{margin-bottom:.55em} .answer li:last-child{margin-bottom:0}

/* ---- plate / kpi / stamps ---- */
.plate{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);margin:0 0 16px}
.plate div{flex:1 1 128px;padding:10px 12px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.plate dt{font:600 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin:0 0 3px}
.plate dd{margin:0;font:600 15px/1.25 var(--mono);color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px}
.kpi .n{display:block;font:800 25px/1.1 var(--mono);letter-spacing:-.02em}
.kpi .l{display:block;font:600 12.5px/1.35 var(--sans);color:var(--ink-2);margin-top:5px}
.kpi .sub{display:block;font:11.5px/1.4 var(--mono);color:var(--ink-4);margin-top:4px}
.cite{font:11.5px/1.4 var(--mono);color:var(--ink-4)} .cite a{color:var(--depth-2)}
.stamp{display:inline-block;font:600 11px/1 var(--mono);border:1px solid var(--line);border-radius:999px;
  padding:5px 9px;color:var(--ink-2);background:var(--surface-2)}
.trustrow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.chips a{display:inline-block;font:600 12.5px/1 var(--sans);border:1px solid var(--line);border-radius:999px;
  padding:9px 12px;background:var(--surface);text-decoration:none;color:var(--ink-2)}
.chips a:hover{border-color:var(--mark);color:var(--mark)}

/* ---- cost stack ---- */
.stack__bar{display:flex;height:26px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.s-thc{background:var(--series-1)} .s-sto{background:var(--series-2)} .s-dray{background:var(--series-3)}
.s-chas{background:var(--series-4)} .s-loc{background:var(--series-5)}
.s-none{background:repeating-linear-gradient(135deg,var(--ink-dec) 0 3px,transparent 3px 7px);border-left:1px dashed var(--ink-3)}
.stack__key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font:11.5px/1.4 var(--mono);color:var(--ink-3)}
.stack__key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;font-style:normal}

/* ---- clock ---- */
.clock{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px 16px 12px;margin:0 0 14px}
.clock__ax{position:relative;height:58px;margin:22px 0 0}
.clock__line{position:absolute;left:0;right:0;top:26px;height:3px;background:var(--line);border-radius:2px}
.clock__free{position:absolute;top:26px;height:3px;background:var(--good)}
.clock__paid{position:absolute;top:26px;height:3px;background:var(--critical)}
.clock__pin{position:absolute;top:14px;width:3px;height:26px;background:var(--ink-2)}
.clock__pin b{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:5px;
  white-space:nowrap;font:600 11px/1.2 var(--mono);color:var(--ink-2)}
.clock__pin.hi{background:var(--mark)} .clock__pin.hi b{color:var(--mark)}
.clock__lbl{position:absolute;top:34px;font:11px/1.3 var(--mono);color:var(--ink-3)}

/* ---- atlas ---- */
.atlas{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:0 0 8px;overflow-x:auto}
.atlas svg{display:block;width:100%;min-width:560px;height:auto}
.atlas text{font-family:var(--mono);fill:var(--ink-2)}

/* ---- tables ---- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.data{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
table.data caption{text-align:left;padding:12px 14px 10px;font:600 13px/1.45 var(--sans);color:var(--ink-2);border-bottom:1px solid var(--line-2)}
table.data th,table.data td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
table.data thead th{font:700 11.5px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface-2);white-space:nowrap}
table.data td.n,table.data th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tbody tr:hover{background:var(--surface-2)}
table.data td.name{font-weight:600} table.data td.name small{display:block;font-weight:400;font-size:11.5px;font-family:var(--mono);color:var(--ink-4)}
table.data tfoot td{background:var(--surface-2);font-weight:600}
table.data td small.src{display:block;font:11px/1.4 var(--mono);color:var(--ink-4);font-weight:400;white-space:normal}
.rank{display:inline-block;min-width:22px;font:800 13px/1 var(--mono);color:var(--mark)}
.owes{font:600 12.5px/1.3 var(--sans);color:var(--crit-ink)}
.bills{font:600 12.5px/1.3 var(--sans);color:var(--depth-2)}

/* ---- the five cell states, rule G6 ----------------------------------------
   No cell on this site is left blank. A missing value is always named, and the
   four ways of naming it look different: not published is about the source,
   not checked is about us, found but unread is about the queue, and not
   applicable is about the subject. The hatching goes where a value could
   have stood. */
.state{display:inline-block;font:600 11.5px/1.35 var(--mono);border-radius:var(--r-sm);padding:2px 7px;white-space:nowrap}
.state--notpub{color:var(--crit-ink);background:var(--crit-bg);border:1px solid var(--critical)}
.state--notread{color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warning)}
.state--notchecked{color:var(--ink-3);background:repeating-linear-gradient(135deg,var(--ink-dec) 0 3px,transparent 3px 7px);
  border:1px dashed var(--ink-3)}
.state--na{color:var(--ink-4);background:var(--surface-2);border:1px solid var(--line)}
.statekey{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font:11.5px/1.5 var(--mono);color:var(--ink-3)}

/* ---- notes ---- */
.note{border:1px solid var(--line);border-left:4px solid var(--warning);background:var(--warn-bg);
  border-radius:0 var(--r) var(--r) 0;padding:13px 15px;margin:14px 0;font-size:14.5px}
.note b{color:var(--warn-ink)}
.note.gap{border-left-color:var(--critical);background:var(--crit-bg)} .note.gap b{color:var(--crit-ink)}
.note.ok{border-left-color:var(--good);background:var(--good-bg)} .note.ok b{color:var(--good-ink)}
.note.info{border-left-color:var(--depth-2);background:var(--depth-100)} .note.info b{color:var(--depth)}

/* ---- DISPUTE RIGHT — the signature call-out ---- */
.dispute{background:var(--surface);border:2px solid var(--mark);border-radius:var(--r-lg);
  padding:18px 20px;margin:16px 0;box-shadow:var(--sh-2)}
.dispute .flag{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--mark);border-radius:999px;padding:6px 11px;margin:0 0 12px}
.dispute h2,.dispute h3{margin-bottom:.4em}
.dispute ol{margin:0 0 14px;padding-left:1.2em} .dispute li{margin-bottom:.5em}
.dispute .chk{background:var(--mark-100);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
.dispute .chk p{font:700 12.5px/1.4 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mark);margin:0 0 8px}
.dispute .chk ul{margin:0;padding-left:1.15em;font-size:14.5px} .dispute .chk li{margin-bottom:.35em}

/* ---- crisis strip ---- */
.crisis{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:760px){.crisis{grid-template-columns:1fr 1fr}}
.crisis article{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--critical);
  border-radius:0 var(--r) var(--r) 0;padding:13px 15px}
.crisis h4{margin:0 0 5px;font-size:15px} .crisis p{margin:0 0 6px;font-size:14px}
.crisis .who{font:600 12px/1.35 var(--mono);color:var(--crit-ink)}

/* ---- the disclosure that sits above a table, rule G7 ---- */
.disclose{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin:0 0 14px}
.disclose p:first-child{font:700 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.disclose ul{margin:0;padding-left:1.1em;font-size:14px;color:var(--ink-2)} .disclose li{margin-bottom:.3em}

/* ---- odds and ends ---- */
.grid2{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card h3{margin-bottom:.35em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 18px;
  border-radius:var(--r-sm);background:var(--mark);color:#fff;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:15px}
.btn--2{background:transparent;color:var(--depth);border:1px solid var(--depth)}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0;margin:0 0 8px}
.faq summary{cursor:pointer;padding:13px 15px;font-weight:600;font-size:15px;min-height:var(--tap);display:flex;align-items:center}
.faq p{padding:0 15px 14px;margin:0;font-size:14.5px;color:var(--ink-2)}
.steps{counter-reset:st;list-style:none;padding:0;margin:0 0 14px}
.steps li{position:relative;padding:0 0 0 38px;margin:0 0 12px;font-size:15px}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:26px;height:26px;
  border-radius:50%;background:var(--mark);color:#fff;font:700 13px/26px var(--mono);text-align:center}
.steps li b{display:block}
.sources{margin:0;padding:0;list-style:none;font-size:14px}
.sources li{padding:9px 0;border-bottom:1px solid var(--line-2)}
.sources li:last-child{border-bottom:0}
.sources .st{display:inline-block;font:700 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:4px 8px;margin-right:8px;color:var(--ink-3);background:var(--surface-2)}
.sources .st--primary{color:var(--good-ink);border-color:var(--good)}
.sources .st--secondary{color:var(--depth-2);border-color:var(--depth-2)}
.sources .st--consensus{color:var(--warn-ink);border-color:var(--warning)}
.sources .st--own{color:var(--mark);border-color:var(--mark)}
.blocklinks{margin:12px 0 0;font-size:14px}
.blocklinks span{font:700 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-right:8px}
.blocklinks a{margin-right:14px;white-space:nowrap}

/* ---- marker for an unwritten block: draft build only ---- */
.pending{border:1px dashed var(--critical);border-radius:var(--r);background:var(--crit-bg);
  padding:12px 14px;margin:0 0 14px;font-size:14px;color:var(--crit-ink)}
.pending b{display:block;font:700 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.pending dl{margin:6px 0 0;font:12px/1.5 var(--mono);color:var(--ink-3)}
.pending dt{font-weight:700;display:inline} .pending dd{display:inline;margin:0 0 0 4px}
.pending dd::after{content:"";display:block}

/* ---- footer ---- */
footer.site{background:var(--surface-3);border-top:1px solid var(--line);margin-top:34px;padding:22px 0;font-size:13.5px;color:var(--ink-2)}
footer.site .ind{font-weight:700;color:var(--ink);margin:0 0 8px}
footer.site ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;padding:0;list-style:none}
footer.site .meta{font:11.5px/1.6 var(--mono);color:var(--ink-3)}