/* CabPurser — mobile-first. Grotesk sans + monospace figures, cool paper ground,
   highway-sign green. No gradients, no glow, no external font requests. */

:root{
  --paper:#f7f6f3;
  --panel:#ffffff;
  --sunk:#eeece5;
  --ink:#14181a;
  --ink-2:#4a5257;
  --ink-3:#79838a;
  --rule:#dcdfdc;
  --rule-2:#c8ccc7;
  --green:#15603f;
  --green-2:#1d7d53;
  --on-green:#ffffff;
  --caution:#8a5a12;
  --caution-bg:#fbf6ec;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --pad:20px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101314;
    --panel:#171b1d;
    --sunk:#0b0e0f;
    --ink:#eef1f0;
    --ink-2:#aeb7ba;
    --ink-3:#7d878b;
    --rule:#282e30;
    --rule-2:#39413f;
    --green:#4bbd87;
    --green-2:#67d2a0;
    --on-green:#08110d;
    --caution:#d8a33f;
    --caution-bg:#1c1a13;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:var(--green)}
img,svg{max-width:100%}

.wrap{max-width:760px;margin:0 auto;padding:0 var(--pad)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;text-decoration:none;font-weight:700}
.skip-link:focus{left:0}

/* ---------- small-caps label, used everywhere an icon would otherwise go ---------- */
.label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;display:block;
}
.label--green{color:var(--green)}
.label--caution{color:var(--caution)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
/* .bar, .hero and .hero--tight sit on elements that ALSO carry .wrap, and .wrap is
   what supplies the horizontal padding. A `padding` shorthand here resets the sides
   to zero and runs the hero off both edges of a phone -- set the block sides only. */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand b{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.brand svg{flex:0 0 auto}
.status{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule-2);padding:5px 8px;white-space:nowrap;
}
nav.tabs{
  display:flex;gap:0;border-bottom:1px solid var(--rule);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
}
@media (min-width:640px){nav.tabs{-webkit-mask-image:none;mask-image:none}}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{
  flex:0 0 auto;padding:12px 14px;text-decoration:none;color:var(--ink-2);
  font-size:.86rem;font-weight:600;border-bottom:2px solid transparent;min-height:44px;
  display:flex;align-items:center;
}
nav.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}

/* ---------- hero ---------- */
.hero{padding-top:32px;padding-bottom:28px}
h1{
  font-size:clamp(1.75rem,7.4vw,2.6rem);line-height:1.14;letter-spacing:-.025em;
  font-weight:800;margin:0 0 16px;
}
.dek{font-size:1.02rem;color:var(--ink-2);margin:0 0 14px}
.dek b{color:var(--ink);font-weight:650}
.hero .dek:last-of-type{margin-bottom:22px}

.who{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 24px;padding:0;list-style:none}
.who li{
  font-size:.8rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--rule);padding:7px 11px;
}

/* ---------- buttons: real tap targets ---------- */
.cta{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 22px;
  font-size:1rem;font-weight:700;text-decoration:none;
  color:var(--on-green);background:var(--green);border:1px solid var(--green);
}
.cta:active{background:var(--green-2)}
.cta--ghost{background:var(--panel);color:var(--green);border:1px solid var(--green)}
.btn-row{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.cta-note{font-size:.85rem;color:var(--ink-3);margin:0}

/* ---------- deadline strip ---------- */
.deadline{
  background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--green);
  padding:16px 18px;margin:0 0 14px;
}
.deadline .when{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 4px;line-height:1.2;
}
.deadline .what{margin:0;color:var(--ink-2);font-size:.92rem}
.deadline .countdown{color:var(--green);font-weight:700}

/* ---------- sections ---------- */
section{padding:34px 0;border-top:1px solid var(--rule)}
section.sunk{background:var(--sunk)}
h2{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;line-height:1.25}
h3{font-size:1rem;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.sub{color:var(--ink-3);font-size:.94rem;margin:0 0 22px}
section > .wrap > :last-child{margin-bottom:0}

/* ---------- ledger rows ---------- */
.ledger{border-top:1px solid var(--rule);margin:0 0 16px}
.row{padding:16px 0;border-bottom:1px solid var(--rule)}
.fig{
  font-family:var(--mono);font-size:1.28rem;font-weight:700;color:var(--green);
  letter-spacing:-.02em;display:block;margin:0 0 5px;
}
.row p{margin:0;color:var(--ink-2);font-size:.93rem}

/* ---------- notes & caveats ---------- */
.note{
  font-size:.83rem;color:var(--ink-3);border-left:2px solid var(--rule-2);
  padding:2px 0 2px 13px;margin:0 0 12px;
}
.note--caution{border-left-color:var(--caution);color:var(--ink-2)}
.caveat{
  font-size:.84rem;color:var(--ink-2);background:var(--caution-bg);
  border-left:3px solid var(--caution);padding:11px 13px;margin:10px 0 0;
}
.caveat b{color:var(--ink)}

/* ---------- feature list ---------- */
.feat{padding:20px 0;border-bottom:1px solid var(--rule)}
.feat:first-of-type{border-top:1px solid var(--rule)}
.feat:last-child{border-bottom:0}
.feat > p{margin:0;color:var(--ink-2);font-size:.94rem}
.feat .label{margin-bottom:7px}

/* ---------- spec rows (how the math is done) ---------- */
.spec{list-style:none;margin:0;padding:0}
.spec li{padding:14px 0;border-bottom:1px solid var(--rule)}
.spec li:first-child{border-top:1px solid var(--rule)}
.spec .k{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green);display:block;margin:0 0 4px;
}
.spec .v{margin:0;color:var(--ink-2);font-size:.93rem}
.spec .v b{color:var(--ink);font-weight:650}

/* ---------- panel ---------- */
.panel{background:var(--panel);border:1px solid var(--rule);padding:20px 18px}
.panel h2{margin-bottom:10px}
.panel p{margin:0;color:var(--ink-2);font-size:.95rem}
.panel p + p{margin-top:12px}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--rule);background:transparent}
details:first-of-type{border-top:1px solid var(--rule)}
summary{
  cursor:pointer;list-style:none;padding:15px 30px 15px 0;position:relative;
  font-weight:650;font-size:.96rem;min-height:48px;display:flex;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.15rem;color:var(--green);font-weight:700;
}
details[open] summary::after{content:"\2212"}
details .body{padding:0 0 16px;color:var(--ink-2);font-size:.92rem}
details .body p{margin:0 0 10px}
details .body p:last-child{margin:0}

/* ---------- sticky mobile action bar ---------- */
.dock{
  position:sticky;bottom:0;z-index:15;
  background:var(--paper);border-top:1px solid var(--rule);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
}
.dock .cta{width:100%}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);padding:26px 0 34px}
.disclaimer{font-size:.79rem;line-height:1.6;color:var(--ink-3);margin:0 0 18px}
.disclaimer b{color:var(--ink-2)}
.colophon{font-size:.84rem;color:var(--ink-3)}
.colophon a{color:var(--ink-2)}
.colophon nav{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:14px}

/* ---------- wider screens ---------- */
@media (min-width:640px){
  body{font-size:17px}
  :root{--pad:26px}
  .hero{padding-top:52px;padding-bottom:42px}
  h1{max-width:20ch}
  .dek{max-width:62ch;font-size:1.08rem}
  section{padding:52px 0}
  h2{font-size:1.45rem}
  .sub,.row p,.feat > p,.spec .v,.panel p{max-width:66ch}
  .note,.caveat,.disclaimer{max-width:74ch}
  .btn-row{flex-direction:row;align-items:center}
  .cta{display:inline-flex;flex:0 0 auto}
  .row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;padding:18px 0}
  .fig{margin:0}
  .spec li{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:baseline}
  .spec .k{margin:0}
  .dock{display:none}
  .panel{padding:26px 28px}
}
@media (min-width:900px){
  .wrap{max-width:820px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- rate reference page ---------- */
.hero--tight{padding-bottom:20px}
.panel--caution{border-left:3px solid var(--caution);background:var(--caution-bg);margin:0 0 24px}
.bullets{margin:12px 0;padding-left:18px;color:var(--ink-2);font-size:.9rem}
.bullets li{margin:0 0 8px}
.bullets b{color:var(--ink)}

.filter{display:block;margin:0 0 18px}
.filter input{
  width:100%;min-height:48px;padding:11px 13px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule-2);border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.filter input:focus{outline:2px solid var(--green);outline-offset:-2px}

.tablehead{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:22px 0 8px;font-size:.95rem;
}
.tablehead span{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;
}

.scroller{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);background:var(--panel);
}
table.rates{border-collapse:collapse;width:100%;min-width:520px;font-size:.86rem}
}
table.rates thead th{
  position:sticky;top:0;background:var(--panel);z-index:1;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;text-align:right;
  padding:10px 12px;border-bottom:1px solid var(--rule-2);white-space:nowrap;
}
table.rates thead th .sm{display:none}
table.rates thead th:first-child{
  text-align:left;position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--rule-2);
}
table.rates tbody th{
  text-align:left;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--rule);
  white-space:nowrap;
  /* keep the jurisdiction visible while the rate columns scroll under it */
  position:sticky;left:0;background:var(--panel);z-index:1;
  box-shadow:1px 0 0 var(--rule);
}
table.rates tbody th b{font-family:var(--mono);color:var(--green);margin-right:8px;font-weight:700}
table.rates tbody th span{color:var(--ink-2);font-weight:500}
table.rates td{
  font-family:var(--mono);text-align:right;padding:10px 12px;
  border-bottom:1px solid var(--rule);color:var(--ink);white-space:nowrap;
}
table.rates tr:last-child th,table.rates tr:last-child td{border-bottom:0}
table.rates td.none{color:var(--ink-3)}
.sur{color:var(--caution);font-size:.78em;margin-left:6px}
table.rates td.sur-only{color:var(--caution)}
.empty{color:var(--ink-2);font-size:.9rem;padding:16px 2px;margin:0}

@media (min-width:640px){
  table.rates{font-size:.9rem}
  .bullets,.empty{max-width:70ch}
}

/* On a phone the whole table fits if the spelled-out name and the long column header
   step aside; the name stays in the row's data-j attribute, so the filter still
   matches on it. Placed last so it wins over the base table rules above. */
@media (max-width:559px){
  table.rates{min-width:0;font-size:.74rem;table-layout:fixed}
  table.rates tbody th span{display:none}
  table.rates tbody th b{margin:0}
  table.rates thead th .lg{display:none}
  table.rates thead th .sm{display:inline}
  table.rates thead th,table.rates tbody th,table.rates td{padding:9px 4px}
  table.rates thead th:first-child,table.rates tbody th{width:42px}
  table.rates thead th:last-child,table.rates td:last-child{padding-right:8px}
  table.rates thead th{letter-spacing:.05em;font-size:.6rem}
  table.rates .sur{display:block;margin:2px 0 0;font-size:.75em}
  .scroller{border-left:0;border-right:0;margin:0 calc(var(--pad) * -1);width:100vw}
}

/* ---------- deadlines table ---------- */
table.deadlines{min-width:0}
table.deadlines tbody th span{color:var(--ink-2);font-weight:500;margin-left:8px}
table.deadlines td{text-align:left;white-space:normal}
table.deadlines td.span{font-family:var(--sans);color:var(--ink-2)}
table.deadlines td.due{font-weight:600}
table.deadlines tr.past th,table.deadlines tr.past td{color:var(--ink-3);opacity:.62}
table.deadlines tr.past th b{color:var(--ink-3)}
.shifted{
  display:block;font-family:var(--sans);font-size:.76em;font-weight:400;
  color:var(--caution);margin-top:2px;
}
@media (max-width:559px){
  /* the rate table's mobile rules pin a narrow, no-wrap first column; the deadline
     table's first column holds a phrase, so it opts back out of both. */
  table.rates.deadlines thead th:first-child,
  table.rates.deadlines tbody th{width:auto;white-space:normal}
  table.rates.deadlines thead th{white-space:nowrap}
  table.deadlines tbody th span{display:block;margin:3px 0 0;margin-left:0}
  table.deadlines thead th,table.deadlines tbody th,table.deadlines td{padding:11px 8px}
  table.deadlines td.span{font-size:.9em}
  table.deadlines td.due{white-space:normal;padding-right:var(--pad)}
  table.deadlines tbody th,table.deadlines thead th:first-child{padding-left:var(--pad)}
}

/* ---------- forms: the estimator ---------- */
.field{margin:0 0 14px}
.field label{
  display:block;margin:0 0 6px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.field input,.field select{
  width:100%;min-height:50px;padding:12px 13px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule-2);border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:38px;
}
.field input:focus,.field select:focus{outline:2px solid var(--green);outline-offset:-2px}
.field input::placeholder{color:var(--ink-3);opacity:.7}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.jrow{
  border:1px solid var(--rule);border-left:3px solid var(--green);
  background:var(--panel);padding:15px 15px 8px;margin:0 0 12px;
}
.jrow .field:last-of-type{margin-bottom:10px}
.drop{
  display:block;width:100%;min-height:44px;margin:0 0 8px;
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);
  font-family:var(--sans);font-size:.86rem;cursor:pointer;border-radius:0;
}
.drop:hover{border-color:var(--caution);color:var(--caution)}
button.cta{cursor:pointer;font-family:var(--sans);width:100%}

.mpg{
  background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--green);
  padding:14px 16px;margin:0 0 26px;
}
.mpg-fig{
  font-family:var(--mono);font-size:1.9rem;font-weight:700;letter-spacing:-.02em;
  margin:0;line-height:1.1;color:var(--green);
}
.mpg-fig small{font-size:.9rem;color:var(--ink-3);font-weight:400;letter-spacing:.06em}
.mpg-note{margin:5px 0 0;font-size:.82rem;color:var(--ink-3)}

.total{
  background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--green);
  padding:18px 18px;margin:0 0 16px;
}
.total.credit{border-left-color:var(--green-2)}
.total.incomplete{border-left-color:var(--caution)}
.total-fig{
  font-family:var(--mono);font-size:2rem;font-weight:700;letter-spacing:-.03em;
  margin:0 0 6px;line-height:1.1;color:var(--ink);
}
.total.incomplete .total-fig{color:var(--caution);font-size:1.5rem}
.total-note{margin:0;color:var(--ink-2);font-size:.88rem}

table.estimate td.credit{color:var(--green)}
table.estimate tr.surrow th,table.estimate tr.surrow td{
  color:var(--caution);font-size:.92em;border-top:0;
}
table.estimate tr.surrow th span{font-family:var(--mono);font-weight:600}
#result[hidden]{display:none}

@media (min-width:640px){
  .field-row{gap:16px}
  .jrow{padding:18px 20px 10px}
  button.cta{width:auto}
  .field input,.field select{max-width:340px}
  .field-row .field input{max-width:none}
  .total-fig{font-size:2.4rem}
}

/* A surcharge row carries a dollar figure, so its label must survive the mobile rule
   that hides the spelled-out jurisdiction name -- an unlabelled money row is worse than
   a cramped one. */
table.estimate tr.surrow th b{color:var(--caution)}
.surtag{
  font-family:var(--mono);font-style:normal;font-size:.82em;color:var(--caution);
  margin-left:7px;
}
@media (max-width:559px){
  .surtag{display:block;margin:2px 0 0}
}

/* Available to a screen reader, absent from the visual design. Used for table captions
   and fieldset legends, where the visible page already conveys the structure by layout
   and a repeated heading would be noise. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
fieldset{border:0;margin:0;padding:0;min-width:0}

/* ---------- 404 destinations ---------- */
.destinations{list-style:none;margin:0 0 20px;padding:0}
.destinations li{padding:16px 0;border-bottom:1px solid var(--rule)}
.destinations li:first-child{border-top:1px solid var(--rule)}
.destinations a{
  font-size:1.02rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  display:inline-block;min-height:28px;
}
.destinations a:hover{text-decoration:underline}
.destinations p{margin:4px 0 0;color:var(--ink-2);font-size:.92rem}
@media (min-width:640px){.destinations p{max-width:64ch}}

/* ---------- checkbox + late-penalty panel ---------- */
.check{display:flex;align-items:flex-start;gap:11px;margin:0 0 20px}
.check input{
  flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;
  accent-color:var(--green);cursor:pointer;
}
.check label{font-size:.94rem;color:var(--ink-2);cursor:pointer;line-height:1.45}

.penalty{
  background:var(--caution-bg);border:1px solid var(--rule);
  border-left:3px solid var(--caution);padding:16px 18px;margin:0 0 16px;
}
.penalty-fig{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  margin:0 0 6px;line-height:1.1;color:var(--caution);
}
.penalty-note{margin:0;color:var(--ink-2);font-size:.86rem;line-height:1.55}
.penalty-note b{color:var(--ink)}
@media (min-width:640px){.penalty-note{max-width:70ch}}

/* dated rate windows inside an excluded-pair entry */
.windows{display:block;margin:7px 0 0}
.window{
  display:block;font-family:var(--mono);font-size:.8rem;color:var(--ink-2);
  padding:3px 0 3px 11px;border-left:2px solid var(--caution);margin:0 0 3px;
}
.window b{color:var(--caution);font-weight:700}

/* a date asked for only where the rate moved mid-quarter */
.whenfield{border-top:1px solid var(--rule);padding-top:13px;margin-top:4px}
.fieldnote{margin:6px 0 0;font-size:.8rem;color:var(--caution);line-height:1.5}
table.estimate td.rate{font-size:.92em;color:var(--ink-2)}
.ratedon{display:block;font-style:normal;font-size:.82em;color:var(--ink-3)}

/* raised by the page on itself once its rates are no longer the current quarter's */
.stalebar{
  background:var(--caution-bg);border-bottom:2px solid var(--caution);
  padding:14px 0;font-size:.88rem;color:var(--ink-2);line-height:1.55;
}
.stalebar b{color:var(--ink);display:block;margin:0 0 4px}
.stalebar a{color:var(--caution);font-weight:600}
@media (min-width:640px){.stalebar .wrap{max-width:820px}}