/* public/css/house-prices.css - the look of every /house-prices page
 * (landing, place reports, directory, district, postcode, address, the
 * styled 404 and search). Linked ONLY by propertyPagesService.shell().
 *
 * The site is dark only; these are the site's own tokens, moved here out of
 * the shell's inline <style>. Rules that keep the section honest live here
 * too: colour never encodes good or bad (no emerald or rose anywhere in
 * this file), change is ivory with a sign, and "too few sales" and "still
 * registering" are HATCHED - a texture, never a colour that could be read
 * as a value.
 *
 * Fonts: the brand pair is scoped to page content through its own family
 * names ("HP Space Grotesk", "HP Inter"), which the shell declares only for
 * the files that exist in /fonts. The header keeps its system stack, and
 * the footer and sidebar keep the site-wide tokens below unchanged, so the
 * shared chrome looks identical on every section of the site.
 */
:root{
  --navy-950:#070B14; --navy-900:#0D1526; --navy-850:#111B30; --navy-800:#15203A; --navy-line:#1E2A45; --navy-600:#2A3A5E;
  --gold-300:#F0DBA8; --gold-400:#E2C68A; --gold-500:#D4AF6A; --ivory-100:#F2F5FA; --slate-400:#8A96AC; --slate-500:#5E6B84;
  --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --radius-lg:16px;
  --hp-display:"HP Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hp-text:"HP Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:#BD8B2C; --s2:#3B82DD; --s3:#C45296; --muted:#2A3A5E;
  --hatch:repeating-linear-gradient(45deg,rgba(138,150,172,.35) 0 1.5px,transparent 1.5px 7px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--navy-950);color:var(--ivory-100);font-family:var(--font-body);min-height:100vh}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:0;border-radius:99px;padding:0 20px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;font-family:var(--font-body)}
.btn-gold{background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:#151515}
.btn-ghost{background:none;border:1px solid var(--navy-600);color:var(--ivory-100)}
.btn-ghost:hover{border-color:var(--gold-500)}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* --- Page frame --------------------------------------------------------- */
/* color-scheme: the site is dark only, so native controls (the budget
   slider, the search box's clear button) are drawn dark even when the
   visitor's system asks for light. */
.hp{max-width:1120px;margin:0 auto;padding:0 24px;font-family:var(--hp-text);font-size:15.5px;line-height:1.6;color:var(--ivory-100);container-type:inline-size;color-scheme:dark}
.hp .btn{font-family:var(--hp-text)}
.hp a{color:var(--gold-300)}
.hp a:hover{color:var(--ivory-100)}
.hp a.btn-gold,.hp a.btn-gold:hover{color:#151515}
.hp a.btn-ghost{color:var(--ivory-100)}
.hp h1,.hp h2,.hp h3,.fig,.tv,.lv{font-family:var(--hp-display);font-variant-numeric:tabular-nums}
.hp h1{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.01em;margin:8px 0 12px}
.hp h2{font-size:22px;line-height:1.25;font-weight:600;margin:0 0 6px}
.hp h3{font-size:17px;line-height:1.3;font-weight:600;margin:0}
.hp p{margin:0 0 12px}
.hp :focus-visible{outline:2px solid var(--gold-300);outline-offset:2px}
html:not(.js) .jsonly{display:none!important}
/* The hidden attribute must win over the display these components set
   (.btn and .more are inline-flex): without this a hidden "Show all" or a
   hidden calculator button stayed on screen. */
.hp [hidden]{display:none!important}
.muted,.cap{color:var(--slate-400)}
.cap{font-size:12.5px;line-height:1.5}
.sec{margin-top:44px;padding-top:36px;border-top:1px solid var(--navy-line)}
.sec>header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:14px}
.sec>header>*{min-width:0;max-width:100%}
.sec>header p{margin:0;max-width:720px}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.crumbs{font-size:12.5px;color:var(--slate-400);padding:18px 0 0;margin:0;overflow-wrap:anywhere}
.crumbs a{color:var(--slate-400);text-decoration:none}
.crumbs a:hover{color:var(--ivory-100);text-decoration:underline}
.crumbs span{margin:0 6px;color:var(--slate-500)}

/* --- Header ----------------------------------------------------------- */
.top{padding:22px 0 0}
.eyebrow{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-300);font-weight:600;margin:0}
.def{color:var(--slate-400);margin:0 0 4px;max-width:780px}
.stamps{display:flex;flex-wrap:wrap;gap:6px 8px;margin:14px 0 0;padding:0;list-style:none}
.stamps li{font-size:12.5px;line-height:1.4;color:var(--slate-400);border:1px solid var(--navy-line);border-radius:99px;padding:4px 11px}
.lede{margin:26px 0 0;max-width:860px}
.lede p{font-size:17px;line-height:1.6;color:#C9D1DF}
.lede p:first-child{font-size:20px;line-height:1.5;color:var(--ivory-100);font-family:var(--hp-display);font-weight:500}

/* --- Search and typeahead ----------------------------------------------- */
.srch{position:relative;max-width:640px;margin:22px 0 0}
.srch form{display:flex;gap:8px}
.srch input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--navy-600);background:var(--navy-850);color:var(--ivory-100);font:inherit;font-size:16px}
.srch input::placeholder{color:var(--slate-500)}
.srch input:focus{border-color:var(--gold-500);outline:none;box-shadow:0 0 0 3px rgba(212,175,106,.22)}
.srch .btn{min-height:48px}
.ta{position:absolute;left:0;right:0;top:100%;margin:6px 0 0;padding:6px;list-style:none;background:var(--navy-900);border:1px solid var(--navy-600);border-radius:12px;z-index:30;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:360px;overflow:auto}
.ta li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;min-height:40px}
.ta li[aria-selected=true],.ta li:hover{background:var(--navy-800)}
.ta small{color:var(--slate-400);font-size:12.5px;white-space:nowrap}

/* --- Explore bar: buttons only, never links, never sticky --------------- */
.xb{display:grid;gap:10px;background:var(--navy-900);border:1px solid var(--navy-line);border-radius:16px;padding:14px 16px;margin:28px 0 0}
.xg{display:flex;align-items:center;gap:12px;min-width:0}
.xl{flex:none;width:70px;font-size:12px;color:var(--slate-400);text-transform:uppercase;letter-spacing:.06em}
.xr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px}
.xr::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--navy-600);background:var(--navy-850);color:var(--ivory-100);font:500 14px var(--hp-text);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--gold-500)}
.chip[aria-pressed=true]{background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:#151515;border-color:transparent;font-weight:600}
.chip[hidden]{display:none}
.chip.vs{display:inline-flex;align-items:center;gap:8px;padding-right:6px}
.chip.vs i{width:10px;height:10px;border-radius:3px}
.chip.vs b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-weight:600}
.chip.vs b:hover{background:var(--navy-600)}
.xa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--navy-line)}
.xa .cap{margin-left:auto}
.xnote{margin:0;font-size:13px;color:var(--gold-300)}
.addbox{position:relative;flex:1;min-width:200px;max-width:320px}
.addbox input{width:100%;height:40px;padding:0 12px;border-radius:99px;border:1px solid var(--gold-500);background:var(--navy-850);color:var(--ivory-100);font:inherit;font-size:14px}

/* --- Readout ------------------------------------------------------------ */
.ro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 0}
@container (min-width:1000px){.ro{grid-template-columns:repeat(6,minmax(0,1fr))}}
@container (max-width:620px){.ro{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.tl{background:var(--navy-900);border:1px solid var(--navy-line);border-radius:14px;padding:14px 14px 12px;min-width:0}
.tk{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-400)}
.tv{font-size:34px;line-height:1.15;font-weight:700;margin:6px 0 6px;overflow-wrap:anywhere}
.tl.mid .tv{font-size:22px;line-height:1.3;padding:5px 0 3px}
@container (min-width:1000px){.tv{font-size:28px}.tl.mid .tv{font-size:19px}}
@container (max-width:620px){.tv{font-size:26px}.tl.mid .tv{font-size:17px}}
.tc{font-size:12.5px;line-height:1.45;color:var(--slate-400)}
.few{font-size:15px;font-weight:600;color:var(--slate-400);font-family:var(--hp-text)}
.cmp{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0 0;min-width:640px}
.cmp caption{text-align:left;font-size:12.5px;color:var(--slate-400);padding:0 0 8px}
.cmp th,.cmp td{padding:10px 12px 10px 0;border-bottom:1px solid var(--navy-line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp th:first-child,.cmp thead th:first-child{text-align:left}
.cmp thead th{font-size:11.5px;color:var(--slate-400);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0}
.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 0}
.cta .btn{min-height:48px;padding:0 24px;font-size:15px}

/* --- Charts --------------------------------------------------------------- */
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--hp-text);font-size:12px}
.chart .lbl{font-weight:600}
.chart:focus-visible{outline:2px solid var(--gold-300);outline-offset:4px;border-radius:6px}
.cw{position:relative}
.cw .n{display:none}
@media (max-width:699px){.cw .w{display:none}.cw .n{display:block}}
.duo{display:grid;gap:36px}
@container (min-width:1000px){.duo{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.bud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.bud label{font-size:13px;color:var(--slate-400)}
.bud input[type=range]{flex:1;min-width:160px;height:40px;accent-color:var(--gold-500);background:none}
.bud output{font:600 15px var(--hp-display);min-width:88px;font-variant-numeric:tabular-nums}
.bsent{margin:10px 0 0;font-size:15.5px;min-height:1.6em}
details.tbl{margin:12px 0 0}
details.tbl summary,.more{display:inline-flex;align-items:center;min-height:40px;cursor:pointer;color:var(--gold-300);font-size:14px;font-weight:600}
.more{background:none;border:1px solid var(--navy-600);border-radius:99px;padding:0 18px;font-family:var(--hp-text);margin:12px 0 0}
.more:hover{border-color:var(--gold-500)}
.dt{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0 0}
.dt caption{text-align:left;color:var(--slate-400);font-size:12.5px;padding-bottom:6px}
.dt th,.dt td{padding:6px 12px 6px 0;border-bottom:1px solid var(--navy-line);text-align:left;font-variant-numeric:tabular-nums}
.dt th{font-size:11.5px;color:var(--slate-400);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.tip{position:absolute;z-index:25;min-width:190px;max-width:300px;background:var(--navy-850);border:1px solid var(--navy-600);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;box-shadow:0 18px 40px rgba(0,0,0,.5);pointer-events:none}
.tip b{font-family:var(--hp-display)}
.tip .r{display:flex;justify-content:space-between;gap:14px}
.tip .r span{color:var(--slate-400)}
.tip.pin{pointer-events:auto}
.tip a{display:inline-block;margin:6px 12px 0 0}
.tip .x{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;background:none;color:var(--slate-400);font-size:18px;cursor:pointer}
.xh{position:absolute;top:0;width:1px;background:rgba(242,245,250,.55);pointer-events:none}
@media (max-width:699px){.tip{left:0!important;right:0;top:0!important;max-width:none}}
/* A district's card sits INSIDE its ladder row (so its links follow the
   row's link in the tab order): floating under the row on a desktop, and
   in the flow of the ladder, across the whole row, on a phone. */
.tip.dcard{white-space:normal;text-align:left}
@media (max-width:699px){.lr>.tip.dcard{position:static;grid-column:1/-1;margin:8px 0 4px;box-shadow:none}}

/* --- The district ladder -------------------------------------------------- */
.lctl{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 12px}
.lctl .xr{flex-wrap:nowrap}
.lad{position:relative;list-style:none;margin:0;padding:0}
.lr,.la{display:grid;grid-template-columns:62px minmax(0,1.3fr) minmax(0,2fr) 100px 60px;align-items:center;gap:0 12px;min-height:42px;border-bottom:1px solid var(--navy-line);padding:0 6px 0 8px;border-left:2px solid transparent}
.la{min-height:30px;font-size:11.5px;color:var(--slate-400);border-bottom-color:var(--navy-600)}
.la .lv,.la .ln{font:500 11.5px var(--hp-text);text-transform:uppercase;letter-spacing:.05em;color:var(--slate-400)}
.lr>a{font:600 15px var(--hp-display);text-decoration:none;padding:9px 0}
.ll{font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll small{display:block;font-size:11.5px;color:var(--slate-400);overflow:hidden;text-overflow:ellipsis}
.lt{position:relative;align-self:stretch;min-height:22px}
.lt i{position:absolute;top:50%;height:10px;margin-top:-5px;border-radius:5px;background:rgba(189,139,44,.62);transition:left .2s,width .2s}
.lt i.z{background:#8A96AC}
.lt b{position:absolute;top:50%;width:2px;height:18px;margin:-9px 0 0 -1px;border-radius:1px;background:var(--ivory-100);transition:left .2s}
.lt em{position:absolute;top:50%;transform:translate(-50%,-50%);font-style:normal;white-space:nowrap}
.la .lt em:first-child{transform:translate(0,-50%)}
.la .lt em:last-child{transform:translate(-100%,-50%)}
.lv{text-align:right;font-size:14.5px;font-weight:600}
.ln{text-align:right;font-size:12.5px;color:var(--slate-400);font-variant-numeric:tabular-nums}
.lr.sh{border-left:2px dashed var(--slate-500)}
.lr.few{background:var(--hatch)}
.lr.few .lv{font:500 12.5px var(--hp-text);color:var(--slate-400)}
.lr.dim>:not(.lt),.lr.dim .lt i,.lr.dim .lt b{opacity:.35}
.lr.hl{background:rgba(240,219,168,.08);outline:2px solid var(--gold-300);outline-offset:-2px}
.lad.bud .lt::after{content:"";position:absolute;top:0;bottom:0;left:var(--bx);width:2px;margin-left:-1px;background:var(--gold-300)}
.lr:hover{background-color:rgba(242,245,250,.03)}
/* London has 172 districts in 27 boroughs: the browser may skip laying out
   the OPEN groups that are off screen, which keeps a redraw well under a
   frame. Only open ones: a closed group (every group on a phone) is one
   45px summary, and the 420px placeholder on those made London's phone
   page report 18,203px instead of 8,051 until each group had painted. */
details.lg{border-top:1px solid var(--navy-line)}
details.lg[open]{content-visibility:auto;contain-intrinsic-size:auto 420px}
/* content-visibility:auto also contains paint, which clipped a district's
   card (it sits inside its row) at the bottom of the group; the group
   holding the card drops it while the card is open. */
details.lg.tipon[open]{content-visibility:visible}
details.lg summary{cursor:pointer;padding:12px 0;font:600 15px var(--hp-display);min-height:44px}
details.lg summary small{font:400 12.5px var(--hp-text);color:var(--slate-400);margin-left:6px}
@media (max-width:699px){
  .lr,.la{grid-template-columns:50px minmax(0,1fr) 90px;grid-template-areas:"c t v" "c l n";padding:6px 4px 6px 6px}
  .lr>a{grid-area:c}.lt{grid-area:t}.lv{grid-area:v}.ll{grid-area:l;font-size:12px}.ln{grid-area:n;font-size:11.5px}
  .la{grid-template-areas:"c t v"}.la .ll,.la .ln{display:none}
  .la .lt em:not(:first-child):not(:last-child){display:none}
  .js .lad:not(.open) .lx{display:none}
}

/* --- Mix, facts, latest sales --------------------------------------------- */
.mix{display:flex;height:18px;border-radius:9px;overflow:hidden;gap:2px;margin:12px 0 14px}
.mixl{list-style:none;padding:0;margin:0 0 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;font-size:14px}
.mixl small{color:var(--slate-400)}
.facts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.facts li{background:var(--navy-900);border:1px solid var(--navy-line);border-radius:12px;padding:10px 14px}
.facts b{display:block;font:700 22px var(--hp-display)}
.facts span{font-size:12.5px;color:var(--slate-400)}
.sales{width:100%;border-collapse:collapse;font-size:14px}
.sales th{text-align:left;font-size:11.5px;color:var(--slate-400);text-transform:uppercase;letter-spacing:.05em;font-weight:500;padding:0 12px 8px 0;border-bottom:1px solid var(--navy-600)}
.sales td{padding:11px 12px 11px 0;border-bottom:1px solid var(--navy-line);vertical-align:top}
.sales td:last-child,.sales th:last-child{text-align:right;white-space:nowrap}
.sales td:first-child{white-space:nowrap;color:var(--slate-400)}
.sales .pr{font:600 15px var(--hp-display);font-variant-numeric:tabular-nums}
.sales tr[hidden]{display:none}
.badge{display:inline-block;border:1px solid var(--navy-600);border-radius:99px;padding:1px 8px;font-size:11.5px;line-height:1.5;color:var(--slate-400);margin:3px 4px 0 0;white-space:nowrap}
.badge.pro{border-color:var(--gold-500);color:var(--gold-300);font-weight:600;letter-spacing:.04em}
/* On a phone the latest-sales table becomes compact cards: address and
   price on the first line, date, type and badges on the second. */
@media (max-width:699px){
  .latest thead{display:none}
  .latest tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"a a p" "d t t";gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--navy-line)}
  .latest td{border:0;padding:0;font-size:13px}
  .latest td:nth-child(1){grid-area:d}
  .latest td:nth-child(2){grid-area:a;font-size:14px}
  .latest td:nth-child(3){grid-area:t;color:var(--slate-400)}
  .latest td:nth-child(3) br,.latest td:nth-child(2) br{display:none}
  .latest td:nth-child(2) small{margin-left:6px}
  .latest td:nth-child(4){grid-area:p}
  .latest .badge{margin:0 0 0 6px}
  /* "past" marks the matching rows after the sixth (set by the server and
     re-set by house-prices.js on a Type filter), not a DOM position. */
  .js .latest:not(.open) tbody tr.past{display:none}
}

/* --- Around, Pro strip, method, attribution ------------------------------- */
.links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 18px}
.links a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--navy-line);border-radius:99px;background:var(--navy-900);color:var(--ivory-100);text-decoration:none;font-size:14px}
.links a:hover{border-color:var(--gold-500)}
.links small{color:var(--slate-400);margin-left:6px}
.prostrip{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;background:var(--navy-900);border:1px solid var(--navy-line);border-radius:14px;padding:14px 18px}
.prostrip a{display:inline-flex;align-items:center;gap:8px;min-height:40px;text-decoration:none}
details.meth summary{cursor:pointer;font:600 18px var(--hp-display);min-height:44px;display:flex;align-items:center}
details.meth ul{padding-left:20px;color:#C9D1DF;max-width:820px}
details.meth li{margin:0 0 8px}
.attr{font-size:12px;color:var(--slate-400);line-height:1.6;margin:48px 0 36px;padding-top:18px;border-top:1px solid var(--navy-line)}
.lcf{list-style:none;padding:0;margin:0;display:grid;gap:0}
.lcf li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--navy-line)}

/* --- Landing: cards, shelves, districts ----------------------------------- */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
@container (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{position:relative;display:grid;gap:2px;background:var(--navy-900);border:1px solid var(--navy-line);border-radius:14px;padding:14px 14px 12px;transition:border-color .15s}
.card:hover{border-color:var(--navy-600)}
.card h3 a{color:var(--ivory-100);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:14px}
.card .reg{font-size:12px;color:var(--slate-400)}
.card .fig{font-size:26px;font-weight:700;line-height:1.2;margin-top:6px}
.card .spark{width:100%;height:34px;margin:4px 0 2px}
.card .qs{margin:6px 0 4px}
.card label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:13px;color:var(--slate-400);cursor:pointer;justify-self:start}
.card input{width:18px;height:18px;accent-color:var(--gold-500)}
/* Compact cards on a phone: the compare tick, the name and the median on
   one line, the strip under the name. */
@container (max-width:520px){
  .cards{grid-template-columns:1fr;gap:6px}
  .card{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"k n f" "k q q";align-items:center;gap:2px 10px;padding:8px 12px 8px 6px}
  .card h3{grid-area:n;font-size:16px}
  .card .fig{grid-area:f;font-size:19px;margin:0;text-align:right}
  .card .qs{grid-area:q;margin:0}
  .card label{grid-area:k;min-width:40px;justify-content:center}
  .card label span,.card .reg,.card .spark,.card .cap{display:none}
}
@media (max-width:699px){.js .cards:not(.open) .card:nth-child(n+9){display:none}}
.qs{position:relative;display:block;height:14px;min-width:70px}
.qs::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--navy-600)}
.qs i{position:absolute;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:rgba(189,139,44,.62)}
.qs b{position:absolute;top:50%;width:2px;height:12px;margin:-6px 0 0 -1px;border-radius:1px;background:var(--ivory-100)}
.qs.cl::after,.qs.cr::after{content:"";position:absolute;top:50%;margin-top:-4px;border:4px solid transparent}
.qs.cl::after{left:-6px;border-right-color:var(--s1)}
.qs.cr::after{right:-6px;border-left-color:var(--s1)}
.qsax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--slate-400);max-width:320px}
.shelf{border-top:1px solid var(--navy-line)}
.shelf>summary{display:flex;align-items:baseline;gap:10px;padding:16px 0;cursor:pointer;min-height:48px}
.shelf>summary h3{display:inline;font-size:18px}
.shelf>summary small{color:var(--slate-400);font-size:13px}
/* Fixed columns so every region's table lines up with the one above it. */
.st{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 12px;table-layout:fixed}
.st th:nth-child(1){width:36%}.st th:nth-child(2){width:18%}.st th:nth-child(3){width:14%}
.st td:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st th{text-align:left;font-size:11.5px;color:var(--slate-400);text-transform:uppercase;letter-spacing:.05em;font-weight:500;padding:0 12px 8px 0;border-bottom:1px solid var(--navy-600)}
.st td{padding:8px 12px 8px 0;border-bottom:1px solid var(--navy-line)}
.st td:nth-child(2),.st td:nth-child(3),.st th:nth-child(2),.st th:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.st td:nth-child(4){width:34%}
.st a{color:var(--ivory-100);text-decoration:none}
.st a:hover{color:var(--gold-300);text-decoration:underline}
.st tr.cmpx td:first-child a::after{content:" (combined)";color:var(--slate-400);font-size:12px}
.js .shelf:not(.all) tr.more{display:none}
.st tr[hidden]{display:none}
@container (max-width:520px){
  .st td:nth-child(4),.st th:nth-child(4){display:none}
  .st th:nth-child(1){width:48%}.st th:nth-child(2){width:26%}.st th:nth-child(3){width:26%}
  .st th{white-space:normal!important;line-height:1.3}
}
.letters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.letters a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;border:1px solid var(--navy-line);border-radius:10px;text-decoration:none;color:var(--ivory-100)}
.filter{height:44px;min-width:0;width:100%;max-width:360px;padding:0 14px;border-radius:12px;border:1px solid var(--navy-600);background:var(--navy-850);color:var(--ivory-100);font:inherit;font-size:15px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;list-style:none;padding:0;margin:10px 0 0}
.dgrid a{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--navy-line);border-radius:10px;background:var(--navy-900);text-decoration:none;color:var(--ivory-100);font-size:14px}
.dgrid a:hover{border-color:var(--gold-500)}
.dgrid small{color:var(--slate-400);font-size:12px}
.area>summary{cursor:pointer;padding:14px 0;border-top:1px solid var(--navy-line);min-height:48px}
.area>summary b{font:600 17px var(--hp-display)}
.area>summary small{color:var(--slate-400);margin-left:8px}
.area .dgrid{margin-bottom:16px}
.sibs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0 0}
.sibs a{display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--navy-line);border-radius:99px;text-decoration:none;color:var(--ivory-100);font-size:13.5px;background:var(--navy-900)}
.sibs small{color:var(--slate-400)}
.note404{background:var(--navy-900);border:1px solid var(--navy-line);border-radius:16px;padding:28px;margin:28px 0 0}

@media (max-width:699px){
  .hp{padding:0 16px}
  .hp h1{font-size:30px}
  .sec{margin-top:32px;padding-top:26px}
  .lede p{font-size:16px}.lede p:first-child{font-size:18px}
  .xl{width:56px;font-size:11px}
  .xb{padding:12px}
  .tl{padding:12px 12px 10px}.tc{font-size:12px;line-height:1.4}
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.dgrid a{padding:6px 10px;font-size:13px}
  .stamps li{font-size:12px;padding:3px 10px}
  .attr{margin-top:36px}
}
/* One disclosure chevron for every <details> in the section: a flex
   summary loses the browser's own triangle, and a shelf that does not
   look openable is a shelf nobody opens. */
.shelf>summary,.area>summary,details.lg>summary,details.meth>summary{display:flex;align-items:center;gap:10px;list-style:none}
.shelf>summary::-webkit-details-marker,.area>summary::-webkit-details-marker,details.lg>summary::-webkit-details-marker,details.meth>summary::-webkit-details-marker{display:none}
.shelf>summary::after,.area>summary::after,details.lg>summary::after,details.meth>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 6px 4px auto;border-right:2px solid var(--slate-400);border-bottom:2px solid var(--slate-400);transform:rotate(45deg);transition:transform .15s}
.shelf[open]>summary::after,.area[open]>summary::after,details.lg[open]>summary::after,details.meth[open]>summary::after{transform:rotate(-135deg);margin-bottom:-4px}
@media (min-width:700px){[data-phone-only]{display:none!important}}
@media (prefers-reduced-motion:reduce){.hp *,.hp *::before,.hp *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}