/* Development Fee Index - one stylesheet.
   Token block is reference/mock/fee-page-eld-tim.html's, unchanged.
   Component CSS is reference/mock-explore-v4.html's, ported onto those tokens.
   DECISIONS 1a: Source Serif 4 on <blockquote> ONLY - quoted source text.
   Everything the site says in its own voice is Inter. */

:root{
  --ground:#F6F7F9; --surface:#FFFFFF; --raise:#FFFFFF;
  --ink:#16181D; --secondary:#464B55; --muted:#7B8090; --faint:#AEB3BF;
  --hair:#E6E8EC; --hair-strong:#D7DAE1;
  --accent:#4F5BD5; --accent-soft:#EEF0FC; --accent-ink:#3D48B8;
  --above:#D6482E; --above-soft:#FDEDE9; --below:#1C8A5A; --below-soft:#E6F6EE;
  --warn:#9A6400; --warn-soft:#FFF4D6;
  --cat:#2a78d6; --cat-soft:#E8F1FB;
  --warn-bg:#FDF3F1; --warn-line:#F0C4BA; --warn-ink:#A8351F;
  --quote-bg:#FBFBFC; --quote-rule:#D7DAE1;
  --r-card:16px; --r-ctl:10px;
  --shadow:0 1px 2px rgba(22,24,29,.04), 0 8px 24px rgba(22,24,29,.06);
  --ease:cubic-bezier(.2,.8,.2,1);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#8A96A1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1014; --surface:#171A20; --raise:#1C2027;
    --ink:#E9EBEF; --secondary:#B2B8C3; --muted:#858B99; --faint:#6C7280;
    --hair:#262A32; --hair-strong:#333844;
    --accent:#8D95EC; --accent-soft:#1E2136; --accent-ink:#A8AEF2;
    --above:#F0705A; --above-soft:#2A1714; --below:#3FB584; --below-soft:#12271F;
    --warn:#E0A94A; --warn-soft:#2A2214;
    --cat:#3987e5; --cat-soft:#16243A;
    --warn-bg:#2A1714; --warn-line:#5B2A21; --warn-ink:#F0917C;
    --quote-bg:#13161B; --quote-rule:#333844;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#78848F;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1014; --surface:#171A20; --raise:#1C2027;
  --ink:#E9EBEF; --secondary:#B2B8C3; --muted:#858B99; --faint:#6C7280;
  --hair:#262A32; --hair-strong:#333844;
  --accent:#8D95EC; --accent-soft:#1E2136; --accent-ink:#A8AEF2;
  --above:#F0705A; --above-soft:#2A1714; --below:#3FB584; --below-soft:#12271F;
  --warn:#E0A94A; --warn-soft:#2A2214;
  --cat:#3987e5; --cat-soft:#16243A;
  --warn-bg:#2A1714; --warn-line:#5B2A21; --warn-ink:#F0917C;
  --quote-bg:#13161B; --quote-rule:#333844;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#78848F;
}

*{box-sizing:border-box}
/* `hidden` must beat a component's own display rule. The Update dialog is
   display:flex and the tab panels are blocks; without this both render open
   on load, which is how DFI-114's dialog first appeared over every page. */
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
button,select,input{font:inherit}
button{cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px 96px}
.wrap.wide{max-width:1320px}
h1{font-size:34px; line-height:1.15; letter-spacing:-.025em; font-weight:700; margin:0 0 10px; text-wrap:balance}
h2{font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
   color:var(--muted); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--hair)}
section{margin-bottom:38px}
.sub{color:var(--secondary); font-size:15px; margin:0; max-width:74ch}
.sub strong{color:var(--ink); font-weight:600}
.lede{font-size:17px; line-height:1.55; color:var(--secondary); max-width:70ch}

/* ---------------------------------------------------------------- top bar */
.topbar{position:sticky; top:0; z-index:30; background:var(--surface); border-bottom:1px solid var(--hair)}
.topbar .inner{max-width:1320px; margin:0 auto; padding:0 20px; height:56px;
  display:flex; align-items:center; gap:14px}
.brand{font-weight:700; font-size:15px; display:flex; align-items:center; gap:9px;
  white-space:nowrap; color:var(--ink)}
.brand:hover{text-decoration:none}
/* DFI-113: the <i> placeholder is replaced by the quail mark. The wordmark
   stays live text beside it - bold "DevFee", regular "Finder" - so it is
   crisp at any size and selectable, which the lockup SVG is not. */
.brand img{width:24px; height:24px; display:block; flex-shrink:0}
.brand .wm{font-weight:400; letter-spacing:-.015em}
.brand .wm b{font-weight:700}
.sbtn{display:flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  width:min(360px,30vw); border:1px solid var(--hair-strong); border-radius:var(--r-ctl);
  background:var(--surface); color:var(--muted); text-align:left; white-space:nowrap; overflow:hidden}
.sbtn:hover{border-color:var(--faint)}
.sbtn kbd{margin-left:auto; font:inherit; font-size:11px; color:var(--faint);
  border:1px solid var(--hair); border-radius:5px; padding:0 6px}
.pills{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--hair);
  border-radius:999px; background:var(--ground); white-space:nowrap; flex-shrink:0}
.pills button{border:0; background:transparent; border-radius:999px; padding:5px 11px;
  font-size:12.5px; font-weight:500; color:var(--secondary); transition:background .2s,color .2s}
.pills button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.topbar nav{margin-left:auto; display:flex; gap:18px; font-weight:500; color:var(--secondary); font-size:14px}
.topbar nav a{color:inherit} .topbar nav a.on{color:var(--ink)}
/* Two navs now (DECISIONS s. 13c): browse on the left, act on the right. Only
   the FIRST takes the auto margin, or the pair would split to the two edges. */
.topbar nav.right{margin-left:0; gap:16px; padding-left:18px; border-left:1px solid var(--hair)}
.topbar nav.right a{color:var(--muted)}
.topbar nav.right.compact{border-left:0; padding-left:0; margin-left:14px}
/* The bar is brand + search + four prototype pills + two navs, and on the map
   page at 1280 that is ~19px too wide - which the flexbox spent by WRAPPING
   "Report an issue" onto three lines. The squeeze goes to the search button,
   which is built to take it (overflow:hidden, and its label is decorative);
   the nav links never wrap and never shrink. */
.topbar nav{flex-shrink:0; white-space:nowrap}
.topbar .sbtn{min-width:0}
@media(max-width:1080px){.topbar nav{display:none}}
@media(max-width:720px){
  /* Builders check fees on site, so the prototype pills must survive on a
     phone - they wrap onto their own row rather than disappearing. */
  .topbar .inner{flex-wrap:wrap; height:auto; padding:8px 16px 10px; gap:8px 10px}
  .sbtn{width:auto; flex:1} .sbtn span.lbl{display:none}
  .pills{order:5; width:100%; justify-content:space-between}
  .pills button{flex:1; text-align:center; padding:6px 4px; font-size:12px}
  .crumbs{display:flex; order:4; width:100%; font-size:12px}
}
.crumbs{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px;
  color:var(--muted); min-width:0}
.crumbs a{color:var(--secondary)} .crumbs .sep{color:var(--hair-strong)}
.crumbs .here{color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media(max-width:900px){.crumbs{display:none}}

/* --------------------------------------------------------------- headers */
header.page{padding:34px 0 22px}
.eyebrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.chip{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  letter-spacing:.02em; padding:5px 11px; border-radius:999px;
  background:var(--cat-soft); color:var(--cat)}
.chip .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.chip.plain{background:transparent; color:var(--muted); border:1px solid var(--hair-strong)}

/* --------------------------------------------------------- figure card */
.figure-card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--shadow); margin-top:26px; overflow:hidden}
.figure-main{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.figure-left{padding:26px 28px}
.figure-label{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px}
.amount{font-size:52px; font-weight:700; letter-spacing:-.035em; line-height:1; margin:0 0 12px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.amount .asc{font-size:11px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft);
  border-radius:999px; padding:3px 9px; letter-spacing:0}
.prototype{font-size:13px; color:var(--secondary); max-width:52ch}
.prototype b{color:var(--ink); font-weight:600}
.figure-right{padding:26px 28px; border-left:1px solid var(--hair); display:flex;
  flex-direction:column; gap:16px; justify-content:center}
.kv{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0}
.kv dt{font-size:13px; color:var(--muted)}
.kv dd{margin:0; font-size:14px; font-weight:600; text-align:right}
.bar{height:6px; border-radius:3px; background:var(--hair); overflow:hidden}
.bar i{display:block; height:100%; background:var(--cat); border-radius:3px}
.upto{border-top:1px solid var(--hair); background:var(--ground); padding:16px 28px;
  font-size:13.5px; color:var(--secondary)}
.upto b{color:var(--ink)}

/* flag / warning band */
.flag{border-top:1px solid var(--warn-line); background:var(--warn-bg); padding:18px 28px;
  display:flex; gap:14px; align-items:flex-start}
.flag .mark{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--warn-ink);
  color:var(--warn-bg); font-size:14px; font-weight:700; display:flex; align-items:center;
  justify-content:center; margin-top:1px}
.flag h3{margin:0 0 6px; font-size:14px; font-weight:600; color:var(--warn-ink)}
.flag p{margin:0 0 8px; font-size:13.5px; color:var(--secondary); max-width:78ch}
.flag p:last-child{margin-bottom:0}
.flag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:rgba(128,128,128,.14); padding:1px 5px; border-radius:4px}

/* ------------------------------------------------------------- two column */
.cols{display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:36px; margin-top:40px; align-items:start}
.rail{position:sticky; top:72px; display:flex; flex-direction:column; gap:18px}
.card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:18px 20px}
.card>h3{margin:0 0 13px; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted)}
.card p{margin:0 0 10px; font-size:13.5px; color:var(--secondary)} .card p:last-child{margin:0}
.doclist{list-style:none; margin:0; padding:0}
.doclist li{border-bottom:1px solid var(--hair)} .doclist li:last-child{border-bottom:none}
.doclist a,.doclist span.dead{display:flex; align-items:center; gap:9px; padding:9px 0;
  font-size:13.5px; font-weight:500}
.doclist span.dead{color:var(--muted)}
.doclist .ic{flex:0 0 auto; width:16px; text-align:center; color:var(--muted); font-size:11px}
.meta{display:flex; flex-direction:column; gap:9px; margin:0}
.meta .row{display:flex; justify-content:space-between; gap:12px; font-size:13px}
.meta .row dt{color:var(--muted)} .meta .row dd{margin:0; color:var(--ink); font-weight:500; text-align:right}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink)}
.pill.good{background:var(--below-soft); color:var(--below)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}

/* ------------------------------------------------------------------ table */
.tablewrap{overflow-x:auto; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-card); box-shadow:var(--shadow)}
table{width:100%; border-collapse:collapse; font-size:14px}
.tablewrap table{min-width:560px}
th{text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:13px 18px; border-bottom:1px solid var(--hair);
  white-space:nowrap; background:var(--surface)}
th.r,td.r{text-align:right}
td{padding:11px 18px; border-bottom:1px solid var(--hair); color:var(--secondary); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
td.num,td.amt{text-align:right; font-weight:600; color:var(--ink); white-space:nowrap}
td.zone{color:var(--ink); font-weight:500}
/* DFI-46: the land-use column, present only where a program's rows disagree
   about it. Quieter than the band beside it - it is the answer to "is this row
   mine?", which most readers need once and then stop reading. */
td.landuse{color:var(--secondary); white-space:nowrap}
tr.is-proto td{background:var(--accent-soft)}
/* The prototype's accent bar belongs on the row's LEFT EDGE, which stopped
   being td.zone when the land-use column was inserted before it. */
tr.is-proto td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.tot td{border-top:2px solid var(--ink); font-weight:700; color:var(--ink); background:var(--surface)}
.zonehead td{background:var(--ground); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding:9px 18px}
th.sortable{cursor:pointer; user-select:none} th.sortable:hover{color:var(--ink)}
th.sortable[aria-sort]{color:var(--ink)}
.tag{display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.03em;
  border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:1px; white-space:nowrap}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.ok{background:var(--below-soft); color:var(--below)}
.tag.acc{background:var(--accent-soft); color:var(--accent-ink)}
.tag.out{background:transparent; color:var(--muted); border:1px solid var(--hair-strong)}
.tag.proto{background:var(--surface); color:var(--accent-ink); border:1px solid var(--accent);
  text-transform:uppercase; margin-left:9px}
.dot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:0}
.c1{background:var(--s1)} .c2{background:var(--s2)} .c3{background:var(--s3)} .c4{background:var(--s4)}
.c5{background:var(--s5)} .c6{background:var(--s6)} .c7{background:var(--s7)} .c8{background:var(--s8)}

/* ------------------------------------------- the record: claim + quotation */
.rec{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden}
.rec-item{padding:20px 24px; border-bottom:1px solid var(--hair)}
.rec-item:last-child{border-bottom:none}
.rec-q{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px}
.claim{font-size:15px; color:var(--ink); margin:0 0 14px; max-width:68ch; font-weight:500}
blockquote{margin:0; padding:14px 18px; background:var(--quote-bg);
  border-left:2px solid var(--quote-rule); border-radius:0 var(--r-ctl) var(--r-ctl) 0;
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:15px; line-height:1.6; color:var(--secondary); max-width:76ch}
blockquote p{margin:0}
.cite{margin-top:9px; font-size:12.5px; color:var(--muted); max-width:76ch}
.cite a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.cite a:hover{color:var(--accent)}

/* --------------------------------------------- DFI-50: the quoted rate line */
/* The amount is the one value on this site that used to carry no quotation.
   When it carries one it is rendered in the same blockquote treatment the
   record section uses (DECISIONS 1a, Source Serif 4) - a rate's citation and
   a fact's citation are the same kind of claim and must not look different. */
tr.quoterow>td{padding:0 16px 16px; border-top:none}
tr.quoterow blockquote{font-size:14.5px}
details.quotefold>summary{cursor:pointer; font-size:12.5px; color:var(--muted);
  padding:2px 0 8px; list-style:none}
details.quotefold>summary::-webkit-details-marker{display:none}
details.quotefold>summary::before{content:"\203A\00a0"; display:inline-block;
  transition:transform .15s ease}
details.quotefold[open]>summary::before{transform:rotate(90deg)}
details.quotefold>summary:hover{color:var(--accent)}

/* ------------------------------------------------------------- empty states */
.empty{border-radius:var(--r-card); padding:18px 20px; margin-bottom:14px; font-size:14px}
.empty b{display:block; font-size:16px; margin-bottom:5px}
.empty.absence{background:var(--below-soft); color:var(--below)}
.empty.gap{background:var(--warn-soft); color:var(--warn)}
.empty.absence b,.empty.gap b{color:inherit}
.note{font-size:13px; color:var(--secondary); background:var(--ground); border-radius:var(--r-ctl);
  padding:11px 13px; margin-top:12px} .note b{color:var(--ink)}

/* ------------------------------------------------------------------- donut */
.donutwrap{display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; align-items:center}
@media(max-width:700px){.donutwrap{grid-template-columns:minmax(0,1fr)}}
.donut{position:relative; width:220px; height:220px}
.donut svg{width:100%; height:100%; overflow:visible}
.donut path{cursor:pointer; stroke:var(--surface); stroke-width:2; transform-origin:120px 120px;
  transform-box:view-box; transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .2s,filter .2s}
.donut.has path{opacity:.35}
.donut.has path.on{opacity:1; filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.donut path:hover{opacity:1}
.donut .sweep{fill:none; stroke:#fff; stroke-width:44; stroke-dasharray:509; stroke-dashoffset:509;
  transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.15,1)}
.donut.in .sweep{stroke-dashoffset:0}
.center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; pointer-events:none; padding:0 48px}
.center .cv{font-size:19px; font-weight:700; letter-spacing:-.02em}
.center .ck{font-size:11px; color:var(--muted)} .center .cp{font-size:11px; font-weight:600}
.detail .dh{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px}
.detail .dsub{font-size:12.5px; color:var(--muted); margin:3px 0 8px}
.sw{width:10px; height:10px; border-radius:3px; display:inline-block; flex:0 0 auto}
.dl{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid var(--hair); font-size:13px}
.dl small{display:block; color:var(--muted); font-size:11.5px}
.dl .v{font-weight:600; white-space:nowrap}
.leg{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-top:14px}
@media(max-width:700px){.leg{grid-template-columns:1fr}}
.lg{display:grid; grid-template-columns:10px minmax(0,1fr) auto 40px; gap:8px; align-items:center;
  padding:6px 0; border-top:1px solid var(--hair); font-size:12.5px; cursor:pointer;
  background:none; border-left:0; border-right:0; border-bottom:0; text-align:left; color:inherit; width:100%}
.lg:hover,.lg.on{background:var(--ground)}
.lg .v{text-align:right; font-weight:600} .lg .p{text-align:right; color:var(--muted); font-size:11.5px}

/* ----------------------------------------------------------- configurator */
.cfg{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden}
.cfg-hd{padding:16px 18px; border-bottom:1px solid var(--hair)}
.cfg-hd h3{margin:0 0 3px; font-size:14px; font-weight:600}
.cfg-hd p{margin:0; font-size:12.5px; color:var(--muted)}
.cfg-sum{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.cfg-sum div{background:var(--ground); border-radius:var(--r-ctl); padding:9px 11px}
.cfg-sum .k{font-size:11px; color:var(--muted)}
.cfg-sum .v{font-size:17px; font-weight:700; letter-spacing:-.02em}
.cfg-sum .v.acc{color:var(--accent-ink)}
.cfg-body{padding:4px 18px 18px; max-height:min(70vh,760px); overflow:auto}
.dim{padding:14px 0; border-bottom:1px solid var(--hair)} .dim:last-child{border-bottom:none}
.dim h4{margin:0 0 2px; font-size:12px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em}
.dim .prog{font-size:12px; color:var(--secondary); margin:0 0 8px}
.dim .filter{width:100%; border:1px solid var(--hair-strong); border-radius:var(--r-ctl);
  padding:6px 9px; margin-bottom:6px; background:var(--surface); color:var(--ink); font-size:13px}
.seg{display:flex; flex-direction:column; gap:4px; max-height:340px; overflow:auto}
.opt{display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--hair); border-radius:var(--r-ctl); padding:7px 10px;
  background:var(--surface); text-align:left; color:var(--ink); transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--faint)}
.opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft);
  color:var(--accent-ink); font-weight:600}
.opt .lb{min-width:0} .opt small{display:block; font-weight:400; font-size:11px; color:var(--muted)}
.opt .d{font-size:12px; font-weight:600; white-space:nowrap}
.opt .d.up{color:var(--above)} .opt .d.dn{color:var(--below)} .opt .d.z{color:var(--faint)}
/* A GAP BRANCH: the parcel may be here, the index holds no rate (DFI-18).
   Deliberately not styled like a $0 option - it is unselectable and reads
   "n/a", because a gap that looks like a dash reads as "this costs nothing". */
.opt.gap{cursor:not-allowed; opacity:.62; border-style:dashed}
.opt.gap:hover{border-color:var(--hair)}
.opt .d.na{color:var(--muted); font-weight:500; font-style:italic}
.reset{font-size:12.5px; margin-top:10px; display:inline-block}
.cfg-none{padding:18px; color:var(--muted); font-size:13px}
.cfg-note{font-size:12px; color:var(--muted); padding:12px 18px; border-top:1px solid var(--hair);
  background:var(--ground)}

/* -------------------------------------------------------------------- tabs */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--hair); margin:0 0 22px; overflow-x:auto}
.tabs button{border:0; background:transparent; padding:10px 12px; font-weight:500; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; font-size:13.5px}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink)}
[role="tabpanel"][hidden]{display:none}

/* ------------------------------------------------------------- list / rows */
.jlist{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden}
.row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 12px; padding:11px 16px;
  border-bottom:1px solid var(--hair); text-decoration:none; color:inherit}
.row:last-child{border-bottom:none}
.row:hover,.row.hot{background:var(--ground); text-decoration:none}
.row .nm{grid-column:1; grid-row:1; font-weight:600}
.row .cty{grid-column:1; grid-row:2; font-size:12px; color:var(--muted)}
.row .v{grid-column:2; grid-row:1/3; align-self:center; text-align:right; font-weight:600}
.row .v small{display:block; font-weight:400; font-size:11px; color:var(--muted)}
.row .bar2{grid-column:1/3; height:3px; border-radius:2px; background:var(--ground); margin-top:6px; overflow:hidden}
.row .bar2 i{display:block; height:100%; border-radius:2px; background:var(--hair-strong)}
.row:hover .bar2 i{background:var(--accent)}

/* ------------------------------------------------------------------- misc */
.grid{display:grid; gap:16px}
.grid.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.grid.k3,.grid.k2{grid-template-columns:minmax(0,1fr)}}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 0}
.kpi{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-ctl); padding:12px 14px}
.kpi .k{font-size:11px; color:var(--muted)}
.kpi .v{font-size:18px; font-weight:700; margin-top:3px; letter-spacing:-.02em}
.delta{display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600;
  padding:2px 8px; border-radius:999px}
.delta.up{background:var(--above-soft); color:var(--above)}
.delta.dn{background:var(--below-soft); color:var(--below)}
.delta.na{background:var(--ground); color:var(--muted); border:1px solid var(--hair)}
.li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--hair); font-size:13.5px}
.li:first-child{border-top:0}
.li small{display:block; color:var(--muted); font-size:12px}
.li .v{font-weight:600; white-space:nowrap}
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.filters input,.filters select{border:1px solid var(--hair-strong); border-radius:var(--r-ctl);
  padding:7px 10px; background:var(--surface); color:var(--ink); font-size:13.5px}
.chips{display:inline-flex; gap:4px}
.chips button{border:1px solid var(--hair); background:var(--surface); color:var(--secondary);
  border-radius:999px; padding:4px 11px; font-size:12.5px}
.chips button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.catnav{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px}
.catnav a{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--hair);
  border-radius:999px; padding:5px 12px; font-size:13px; color:var(--secondary); background:var(--surface)}
.catnav a:hover{border-color:var(--faint); text-decoration:none}
.catnav a.on{background:var(--ink); color:var(--surface); border-color:var(--ink)}

/* ------------------------------------------------------------- ad slots */
.ad{display:flex; align-items:center; justify-content:center; color:var(--faint);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--surface);
  border:1px dashed var(--hair-strong); border-radius:var(--r-card); margin:26px 0}
.ad.leaderboard{height:90px; max-width:728px}
.ad.rail{height:250px}

/* --------------------------------------------------------------- prose */
.prose{max-width:74ch; font-size:15.5px; line-height:1.65; color:var(--secondary)}
.prose h1{font-size:32px; margin:0 0 18px; color:var(--ink)}
.prose h2{font-size:21px; text-transform:none; letter-spacing:-.01em; color:var(--ink);
  border-bottom:1px solid var(--hair); padding-bottom:9px; margin:40px 0 16px; font-weight:650}
.prose h3{font-size:16px; color:var(--ink); margin:28px 0 10px; font-weight:650}
.prose p{margin:0 0 15px} .prose strong{color:var(--ink); font-weight:600}
.prose ul{margin:0 0 16px; padding-left:22px} .prose li{margin-bottom:7px}
.prose hr{border:0; border-top:1px solid var(--hair); margin:34px 0}
.prose table{margin:0 0 20px; font-size:14px}
.prose th{padding:9px 12px 9px 0} .prose td{padding:9px 12px 9px 0}
.prose blockquote{margin:0 0 18px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  background:rgba(128,128,128,.13); padding:1px 5px; border-radius:4px}

/* ------------------------------------------------------------- footer */
footer.site{border-top:1px solid var(--hair); background:var(--surface); margin-top:40px}
footer.site .inner{max-width:1320px; margin:0 auto; padding:28px 20px 40px;
  display:flex; gap:32px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
footer.site h4{margin:0 0 9px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--secondary)}
footer.site ul{list-style:none; margin:0; padding:0} footer.site li{margin-bottom:6px}
footer.site .about{max-width:38ch}
.pagefoot{margin-top:22px; padding-top:22px; border-top:1px solid var(--hair);
  font-size:12.5px; color:var(--muted); max-width:80ch}
.pagefoot p{margin:0 0 9px} .pagefoot strong{color:var(--secondary); font-weight:600}

/* --------------------------------------------------- command palette */
.pal{position:fixed; inset:0; z-index:60; background:rgba(20,24,40,.35); backdrop-filter:blur(4px);
  display:grid; place-items:start center; padding-top:12vh; opacity:0; pointer-events:none; transition:opacity .2s}
.pal.open{opacity:1; pointer-events:auto}
.palbox{width:min(560px,92vw); background:var(--surface); border-radius:14px;
  box-shadow:0 24px 80px rgba(20,24,40,.25); overflow:hidden;
  transform:translateY(-8px) scale(.98); transition:transform .25s var(--ease)}
.pal.open .palbox{transform:none}
.palbox input{width:100%; border:0; outline:0; font-size:16px; padding:16px 18px;
  border-bottom:1px solid var(--hair); background:transparent; color:var(--ink)}
.palbox ul{list-style:none; margin:0; padding:6px; max-height:50vh; overflow:auto}
.palbox li{display:flex; justify-content:space-between; align-items:center; padding:9px 12px;
  border-radius:8px; cursor:pointer}
.palbox li.on,.palbox li:hover{background:var(--accent-soft)}
.palbox li small{color:var(--muted); margin-left:8px; font-size:12px}
.palbox li .v{font-weight:600}
.palhint{padding:8px 14px; border-top:1px solid var(--hair); font-size:11.5px; color:var(--faint);
  display:flex; gap:14px}

/* ------------------------------------------------------------ explore */
.explore{display:grid; grid-template-columns:380px minmax(0,1fr); height:calc(100vh - 56px); position:relative}
@media(max-width:860px){.explore{grid-template-columns:1fr; grid-template-rows:1fr 45vh; height:auto}}
.side{background:var(--surface); border-right:1px solid var(--hair); overflow:auto; position:relative}
.hd{position:sticky; top:0; background:var(--surface); z-index:2; padding:12px 16px 10px; border-bottom:1px solid var(--hair)}
.hd .t{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--muted)}
.hd b{font-size:13px; color:var(--ink)}
.hd .chips{margin-top:9px}
.mapwrap{position:relative; overflow:hidden; min-height:420px}
#map{position:absolute; inset:0; background:var(--ground); z-index:0}
.leaflet-container{font:inherit}
.leaflet-tile-pane{filter:grayscale(1) contrast(.85) brightness(1.06) saturate(.6)}
:root[data-theme="dark"] .leaflet-tile-pane,
:root:not([data-theme="light"]) .leaflet-tile-pane{filter:grayscale(1) invert(.92) contrast(.9) brightness(1.05)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .leaflet-tile-pane{filter:grayscale(1) contrast(.85) brightness(1.06) saturate(.6)}}
.maplegend{position:absolute; left:14px; bottom:14px; z-index:5; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-ctl); padding:8px 12px; font-size:12px;
  color:var(--secondary); display:flex; gap:14px; align-items:center}
.maplegend i{display:inline-block; border-radius:50%; background:var(--accent); opacity:.6;
  vertical-align:middle; margin-right:5px}
.tip{position:absolute; z-index:6; pointer-events:none; background:var(--ink); color:var(--ground);
  font-size:12px; padding:6px 9px; border-radius:8px; transform:translate(-50%,calc(-100% - 12px));
  white-space:nowrap; opacity:0; transition:opacity .15s}
.tip.show{opacity:1}
.panel{position:absolute; top:0; right:0; bottom:0; width:min(560px,100%); background:var(--surface);
  border-left:1px solid var(--hair); box-shadow:-12px 0 40px rgba(20,24,40,.10); z-index:10;
  transform:translateX(104%); transition:transform .4s var(--ease); overflow:auto}
.panel.open{transform:none}
.ph{padding:16px 20px 0; position:sticky; top:0; background:var(--surface); z-index:2}
.ph .r1{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.ph .crumb{font-size:12px; color:var(--muted)}
.ph h2{font-size:22px; text-transform:none; letter-spacing:-.01em; color:var(--ink);
  border:0; padding:0; margin:2px 0 0; font-weight:650}
.x{border:0; background:var(--ground); width:30px; height:30px; border-radius:50%; color:var(--secondary);
  font-size:16px; line-height:1; display:grid; place-items:center}
.x:hover{background:var(--hair)}
.big{margin:12px 0 2px; font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1;
  display:flex; align-items:baseline; gap:10px}
.big .asc{font-size:11px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft);
  border-radius:999px; padding:2px 8px; letter-spacing:0}
.pline{font-size:13px; color:var(--secondary)} .pline b{font-weight:600; color:var(--ink)}
.panel .kpis{grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.panel .kpi{background:var(--ground); border:0; padding:10px 12px}
.panel .kpi .v{font-size:16px}
.pb{padding:16px 20px 28px}
.pf{padding:12px 20px; border-top:1px solid var(--hair); font-size:12px; color:var(--muted);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center}
.btn{border:1px solid var(--hair-strong); background:var(--surface); border-radius:var(--r-ctl);
  padding:6px 11px; font-weight:500; color:var(--ink); font-size:12.5px}
.btn:hover{text-decoration:none; border-color:var(--faint)}
.panel .card{box-shadow:none; padding:14px 16px; margin-bottom:10px}
.panel .card>h2{font-size:13px; margin-bottom:10px}

@media (max-width:900px){
  .cols{grid-template-columns:minmax(0,1fr); gap:28px}
  .rail{position:static}
  .figure-main{grid-template-columns:minmax(0,1fr)}
  .figure-right{border-left:none; border-top:1px solid var(--hair)}
  h1{font-size:27px} .amount{font-size:40px}
  .kpis{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ==================================================================
   THE JURISDICTION PAGE  (DFI-114, DECISIONS.md s. 13d)

   Calmer, not busier: a muted map band with the headline card over it,
   one number, one chart, generous whitespace. The rank badge, the
   "vs. the median" cell and the county table have gone to Rankings.
   ================================================================== */
/* The hero is sized by the CARD and the map fills the space behind it, so the
   two can never overlap whatever the heading wraps to. Leaflet's own panes run
   at z-index 400+; giving the map container its own stacking context is what
   keeps them under the card rather than painting straight through it. */
.jhero{position:relative; background:var(--ground); border-bottom:1px solid var(--hair);
  padding:30px 0 30px; overflow:hidden; min-height:300px}
.jmap{position:absolute; inset:0; z-index:1; background:var(--hair)}
.jmap .leaflet-container{background:var(--hair)}
/* The basemap is a backdrop, not a map to read. Desaturated and lightened so
   the card over it stays legible; in dark mode it is darkened instead. */
.jmap .leaflet-tile-pane{filter:saturate(.25) brightness(1.06) contrast(.9); opacity:.85}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jmap .leaflet-tile-pane{
    filter:saturate(.2) brightness(.55) contrast(1.05); opacity:.8}
}
:root[data-theme="dark"] .jmap .leaflet-tile-pane{
  filter:saturate(.2) brightness(.55) contrast(1.05); opacity:.8}

.jcard{position:relative; z-index:2; margin-left:max(24px,calc(50% - 660px));
  width:min(560px,calc(100% - 48px)); background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:22px 26px 18px}
.jeyebrow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.jcard h1{font-size:27px; line-height:1.18; margin:0 0 14px}
.jnum{font-size:50px; font-weight:700; letter-spacing:-.035em; line-height:1;
  margin:0 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.jnum .asc{font-size:11px; font-weight:600; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:999px; padding:3px 9px; letter-spacing:0}
.jline{font-size:13px; color:var(--secondary); margin:0 0 8px; line-height:1.5}
.jupd{margin-left:6px; border:1px solid var(--hair-strong); background:var(--surface);
  border-radius:999px; padding:2px 11px; font-size:12px; font-weight:600;
  color:var(--accent-ink); white-space:nowrap}
.jupd:hover{border-color:var(--accent)}
.jparcelline{font-size:13px; color:var(--secondary); margin:0 0 12px}
.jparcelline b{color:var(--ink)}
.jcard .srcline{margin:0; border:0; padding:0}

.jfacts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-ctl);
  overflow:hidden; margin:26px 0 12px}
.jfacts > div{background:var(--surface); padding:12px 16px; min-width:0}
.jfacts .k{display:block; font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.jfacts .v{display:block; font-size:14px; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis}
.jrankline{font-size:13px; color:var(--muted); margin:0 0 26px}

/* ---- development-stage buttons ---- */
.stages{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.stg{display:inline-flex; align-items:baseline; gap:8px; padding:7px 13px;
  border:1px solid var(--hair-strong); border-radius:999px; background:var(--surface);
  font-size:13px; font-weight:500; color:var(--secondary)}
.stg:hover{border-color:var(--faint)}
.stg[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.stg .sv{font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted)}
.stg[aria-pressed="true"] .sv{color:var(--surface); opacity:.75}
.stagenote{margin:0 0 14px; font-size:13px; color:var(--muted)}
.tag.tier{background:var(--warn-soft); color:var(--warn)}

/* ---- the Update dialog ---- */
.upd{position:fixed; inset:0; z-index:70; background:rgba(20,24,40,.4);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  padding:20px}
.updbox{width:min(440px,100%); background:var(--surface); border-radius:14px;
  box-shadow:0 24px 60px rgba(20,24,40,.3); overflow:hidden}
.updhd{display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--hair)}
.updhd h3{margin:0; font-size:15px}
.updhd .x{border:0; background:transparent; font-size:22px; line-height:1;
  color:var(--muted); padding:0 4px}
.updbody{padding:18px 20px}
.updnote{margin:0 0 16px; font-size:12.5px; color:var(--muted); line-height:1.5}
.updpresets{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.pre{border:1px solid var(--hair-strong); background:var(--surface); border-radius:var(--r-ctl);
  padding:7px 11px; font-size:12.5px; font-weight:600; color:var(--secondary); text-align:left}
.pre:hover{border-color:var(--accent); color:var(--accent-ink)}
.pre small{display:block; font-weight:400; font-size:11px; color:var(--muted)}
.updf{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13.5px}
.updf > span{width:74px; flex-shrink:0; color:var(--secondary); font-weight:500}
.updf input,.updf select{flex:1; min-width:0; height:38px; padding:0 10px;
  border:1px solid var(--hair-strong); border-radius:var(--r-ctl);
  background:var(--surface); color:var(--ink)}
.updf em{font-style:normal; font-size:12px; color:var(--muted); white-space:nowrap}
.updwarn{margin:10px 0 0; font-size:12.5px; color:var(--warn-ink);
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:var(--r-ctl); padding:9px 11px}
.updft{display:flex; justify-content:flex-end; gap:9px; padding:14px 20px;
  border-top:1px solid var(--hair); background:var(--ground)}
.btn.ghost{background:transparent; border:1px solid var(--hair-strong); color:var(--secondary)}

@media(max-width:900px){
  /* The card drops BELOW the band on a phone - overlaid on a 300px map it
     would cover the whole thing and the map would be decoration nobody sees. */
  /* The card drops BELOW the band on a phone - overlaid on a short map it
     would cover the whole thing and the map would be decoration nobody sees. */
  .jhero{padding:0 0 18px; min-height:0}
  .jmap{position:relative; inset:auto; height:150px}
  .jcard{width:auto; margin:-26px 16px 0}
  .jnum{font-size:40px}
  .jcard h1{font-size:22px}
  .jfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==================================================================
   THE LANDING PAGE  (DFI-113, DECISIONS.md s. 13b)

   A search-first start page, built on the existing token block: Inter,
   --accent #4F5BD5, the neutral greys, 10 px radii. The search box is the
   one strong element on the page; everything else is quiet. Mobile first -
   it has to read at 375 px with the nav collapsed.
   ================================================================== */
.landing-body{background:var(--ground)}
.landing{min-height:calc(100vh - 56px); display:flex; justify-content:center;
  padding:clamp(28px,9vh,104px) 20px 64px}
.lwrap{width:100%; max-width:600px; text-align:center}
.lmark{width:clamp(64px,18vw,96px); height:auto; display:block; margin:0 auto 14px}
.lwordmark{font-size:clamp(30px,8vw,42px); font-weight:400; letter-spacing:-.03em;
  line-height:1.05; margin:0 0 12px}
.lwordmark b{font-weight:700}
.lbyline{font-size:clamp(15px,4.2vw,18px); color:var(--secondary); margin:0 0 8px}
.lstat{font-size:12.5px; color:var(--muted); margin:0 0 26px}

/* the box ---------------------------------------------------------- */
.lsearch{position:relative; text-align:left; margin:0 0 20px}
.lbox{display:flex; align-items:center; gap:10px; height:56px; padding:0 18px;
  background:var(--surface); border:1px solid var(--hair-strong);
  border-radius:var(--r-ctl); box-shadow:var(--shadow);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
.lbox:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)}
.lico{width:19px; height:19px; flex-shrink:0; fill:none; stroke:var(--muted);
  stroke-width:1.9; stroke-linecap:round}
.lbox:focus-within .lico{stroke:var(--accent)}
.lbox input{flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--ink); font-size:16px}
.lbox input::placeholder{color:var(--faint)}

/* the dropdown ----------------------------------------------------- */
.lpanel{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:20;
  background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-ctl); box-shadow:var(--shadow); overflow:hidden}
.lpanel ul{list-style:none; margin:0; padding:6px; max-height:56vh; overflow:auto}
.lgrp{padding:8px 12px 5px; font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint)}
.lrow{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:8px; cursor:pointer}
.lrow.on,.lrow:hover{background:var(--accent-soft)}
.lrow .ln{min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lrow .ln small{display:block; font-weight:400; font-size:12px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis}
.lrow .lv{font-weight:600; font-size:13.5px; color:var(--secondary); white-space:nowrap}

/* THE MISS. Most visitors land here; it must not look broken. */
.lmiss{display:block; padding:18px 16px 16px}
.lmiss b{display:block; font-size:15px; margin-bottom:5px}
.lmiss span{display:block; font-size:13px; color:var(--secondary); margin-bottom:12px}

/* chips ------------------------------------------------------------ */
.lchips{display:flex; flex-wrap:wrap; justify-content:center; gap:9px}
.lchip{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  border:1px solid var(--hair-strong); border-radius:999px; background:var(--surface);
  color:var(--secondary); font-size:13.5px; font-weight:500;
  transition:border-color .18s var(--ease), color .18s var(--ease)}
.lchip:hover{text-decoration:none; border-color:var(--accent); color:var(--accent-ink)}
.lchip .ic{color:var(--faint); font-size:12px}
.lnojs{margin:22px 0 0; font-size:13px; color:var(--secondary)}

@media(max-width:480px){
  .landing{padding-top:24px}
  .lbox{height:52px; padding:0 14px}
  .lchips{gap:8px}
  .lchip{height:32px; padding:0 12px; font-size:13px}
}

/* ---------------------------------------- placeholder pages (13c) */
.srcline{font-size:12px; color:var(--muted); margin:0 0 10px;
  padding-bottom:10px; border-bottom:1px solid var(--hair)}
.place{max-width:64ch; font-size:15px; color:var(--secondary)}
.place p{margin:0 0 14px}
.place strong{color:var(--ink)}
.placecta{margin-top:20px}
.placenote{font-size:12.5px; color:var(--muted); margin-left:10px}
footer.site .privacy{grid-column:1/-1; margin:18px 0 0; padding-top:16px;
  border-top:1px solid var(--hair); font-size:12px; color:var(--muted)}

@media print{.topbar,.pal,.ad,footer.site nav,.cfg{display:none}}

/* ---------------------------------------- DFI-149: the copy-and-chrome pass */

/* The fee page's confidence disclosure (item 12). Four definitions that are the
   same on every page, then what THIS fee rests on, fact by fact. */
.conf{margin-top:14px; border-top:1px solid var(--hair); padding-top:12px}
.conf>summary{cursor:pointer; font-size:12.5px; color:var(--acc); list-style:none}
.conf>summary::-webkit-details-marker{display:none}
.conf>summary::before{content:'\25B8\00a0'; display:inline-block; transition:transform .15s}
.conf[open]>summary::before{transform:rotate(90deg)}
.conf h4{margin:16px 0 8px; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted)}
.confdefs{margin:12px 0 0; display:flex; flex-direction:column; gap:10px}
.confdefs dt{margin:0}
.confdefs dd{margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--secondary)}
.conflist{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:7px}
.conflist li{font-size:12.5px; color:var(--secondary)}
.conflist li b{color:var(--ink); font-weight:500}
.conflist li small{display:block; color:var(--muted); font-size:11.5px;
  margin-top:1px; overflow-wrap:anywhere}

/* The escalation prose, behind its own disclosure beside the plain label
   (items 3 and 10). */
.kvmore{margin-top:4px}
.kvmore>summary{cursor:pointer; font-size:11.5px; color:var(--muted); list-style:none}
.kvmore>summary::-webkit-details-marker{display:none}
.kvmore>summary::before{content:'\25B8\00a0'}
.kvmore p{margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--secondary);
  text-align:left; max-width:34ch}

/* One-line introductions that say what a tab or a list holds (items 8, 23). */
.tabintro{max-width:72ch; font-size:13.5px; color:var(--secondary); margin:0 0 16px}
.doclistnote{margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted)}
.pagefoot h3{margin:0 0 12px; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted)}

/* DFI-162(d). Matches .privacy: the two footer lines are the same kind of
   thing and must not look like different ones. */
footer.site .legal{grid-column:1/-1; margin:10px 0 0; font-size:12.5px;
  color:var(--faint)}
footer.site .legal a{color:inherit}

/* DFI-162(g). Off-screen until focused, then pinned top-left over the header.
   `top` rather than `display:none`: a hidden element cannot take focus at all,
   which is the mistake that makes most skip links do nothing. */
.skip{position:absolute; left:8px; top:-48px; z-index:1000;
  padding:10px 16px; border-radius:var(--r-ctl);
  background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  text-decoration:none; transition:top .12s var(--ease)}
.skip:focus{top:8px; outline:3px solid var(--accent-ink); outline-offset:2px}
#content{scroll-margin-top:72px}