/* dentist.lat — one sheet, two editions. Paper is the default; html[data-dark] is the moon. */
:root{
  --bg:#f7f4ed; --bg2:#fffdf8; --ink:#1b1a17; --ink2:#5c5850; --ink3:#8d887c; --line:#dcd6c8; --line2:#ebe6d9;
  --acc:#0f766e; --acc2:#0b5f59; --accbg:#e3f1ee; --warn:#9a5b00; --ok:#1f7a3a; --okbg:#e2f3e7;
  --shadow:0 1px 0 rgba(0,0,0,.04),0 12px 30px -18px rgba(30,25,10,.35);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --dot:#0f766e; --dotsel:#c2410c; --grid:#e7e2d5;
  color-scheme:light;
}
html[data-dark]{
  --bg:#0c0f14; --bg2:#12161d; --ink:#e9e6dd; --ink2:#a9a496; --ink3:#6f6b62; --line:#242a34; --line2:#1a1f28;
  --acc:#5eead4; --acc2:#8ff5e6; --accbg:#0f2a2a; --warn:#f0b35a; --ok:#6fd48a; --okbg:#0f2a19;
  --shadow:0 1px 0 rgba(255,255,255,.02),0 12px 30px -18px rgba(0,0,0,.9);
  --dot:#5eead4; --dotsel:#fb923c; --grid:#161b23;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
button,input,select{font:inherit;color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--acc);color:#fff;padding:6px 10px;z-index:99}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* masthead */
.mast{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:20}
.wordmark{display:flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--serif);font-size:24px;letter-spacing:-.01em}
.wordmark b{color:var(--acc);font-weight:600}.wordmark:hover{text-decoration:none}
.tooth{width:26px;height:26px;fill:var(--acc)}
.tag{margin:0;color:var(--ink2);font-family:var(--serif);font-style:italic;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mastnav{display:flex;align-items:center;gap:6px 16px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.mastnav a{color:var(--ink2)}.mastnav a.on,.mastnav a:hover{color:var(--ink);text-decoration:none}
.pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:2px;gap:2px}
.pill button{border:0;background:transparent;border-radius:999px;padding:3px 9px;font-size:12px;cursor:pointer;color:var(--ink2);letter-spacing:.06em}
.pill button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.pill.edition{padding:0;border:1px solid var(--line);width:46px;height:24px;position:relative;cursor:pointer;background:var(--bg)}
.pill.edition svg{position:absolute;top:5px;width:13px;height:13px;color:var(--ink2)}
.pill.edition .sun{left:6px}.pill.edition .moon{right:6px}
.pill.edition::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:left .2s}
html[data-dark] .pill.edition::after{left:24px}

/* hero + search */
main{flex:1;padding:0 clamp(16px,4vw,48px) 48px;max-width:1440px;width:100%;margin:0 auto}
.hero{padding:44px 0 22px;max-width:920px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.015em;margin:0 0 10px}
.lede{color:var(--ink2);font-size:17px;margin:0 0 26px;max-width:720px}
.searchbar{position:relative;display:flex;align-items:center;background:var(--bg2);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px 6px 6px 16px}
.searchbar:focus-within{border-color:var(--acc)}
.searchbar .glass{width:20px;height:20px;color:var(--ink3);flex:none}
#q{flex:1;border:0;background:transparent;font-size:18px;padding:10px 12px;outline:0;min-width:0}
#q::-webkit-search-cancel-button{display:none}
.clear{border:0;background:transparent;color:var(--ink3);font-size:22px;line-height:1;padding:0 10px;cursor:pointer}
.go{border:0;background:var(--acc);color:#fff;border-radius:10px;padding:10px 20px;font-weight:600;cursor:pointer}
html[data-dark] .go{color:#04211d}
.go:hover{background:var(--acc2)}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:15;overflow:hidden}
.suggest button{display:flex;width:100%;text-align:left;border:0;background:transparent;padding:9px 16px;gap:10px;align-items:baseline;cursor:pointer}
.suggest button:hover,.suggest button.on{background:var(--accbg)}
.suggest .kind{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);min-width:78px}
.suggest .n{margin-left:auto;color:var(--ink3);font-family:var(--mono);font-size:12px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:18px 0 12px}
.sel{display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.sel select,.sel input{border:1px solid var(--line);background:var(--bg2);border-radius:8px;padding:7px 10px;font-size:14px;min-width:150px;text-transform:none;letter-spacing:0;color:var(--ink)}
.sel select:disabled,.sel input:disabled{opacity:.5}
.near{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg2);border-radius:8px;padding:7px 12px;cursor:pointer;height:36px}
.near.on{border-color:var(--acc);color:var(--acc);background:var(--accbg)}
.tog{display:inline-flex;align-items:center;gap:6px;height:36px;font-size:14px;cursor:pointer;color:var(--ink2)}
.tog input{accent-color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--ink2)}
.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
.chip.auto{border-style:dashed;border-color:var(--acc);color:var(--acc)}

/* region scope: the same segmented pill the language switch uses */
.scopewrap{display:flex;flex-direction:column;gap:4px}
.pill.scope{align-self:flex-start}
.pill.scope button{white-space:nowrap}
/* North America section, under the stats. Cards reuse the browse tiles. */
.north{margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.north:empty{display:none}
.north-h h2{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 4px}
.north-h p{margin:0 0 12px;color:var(--ink2);font-size:14px;max-width:70ch}
.north-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.north-cards .rg{background:var(--bg)}
.north-cards .rg.all{border-style:dashed}
html.nojs .north{display:none}
.stats{display:flex;gap:28px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0 18px}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--serif);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.stats span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:4px}
.loadbar{position:relative;height:26px;font-size:12px;color:var(--ink2);margin-bottom:12px}
.loadbar i{position:absolute;left:0;top:0;height:2px;background:var(--acc);width:0;transition:width .3s}
.loadbar span{position:absolute;top:6px;left:0}

/* results */
.results-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px;align-items:start}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.rhead h2{font-family:var(--serif);font-weight:500;font-size:20px;margin:0}
.rmeta{font-size:12px;color:var(--ink3)}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;cursor:pointer;transition:transform .12s,border-color .12s}
.card:hover{border-color:var(--ink3);transform:translateY(-1px)}
.card.sel{border-color:var(--dotsel);box-shadow:0 0 0 2px color-mix(in srgb,var(--dotsel) 30%,transparent)}
.card h3{margin:0;font-size:16px;font-weight:600;grid-column:1}
.card .dist{grid-column:2;grid-row:1/4;align-self:start;font-family:var(--mono);font-size:12px;color:var(--ink3);white-space:nowrap}
.card .addr{color:var(--ink2);font-size:14px;grid-column:1}
.card .addr .zip{font-family:var(--mono);font-size:12px;background:var(--line2);border-radius:4px;padding:1px 5px;margin-left:4px}
.card .tags{display:flex;flex-wrap:wrap;gap:4px;grid-column:1;margin-top:4px}
.tg{font-size:11px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink2)}
.tg.open{border-color:var(--ok);color:var(--ok);background:var(--okbg)}
.tg.closed{color:var(--ink3)}
.card .row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin-top:6px}
.card .row a{white-space:nowrap}
.more{margin:16px auto 0;display:block;border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:9px 22px;cursor:pointer}
.more:hover{border-color:var(--ink3)}
.empty{padding:40px 0;color:var(--ink2)}.empty .hint{font-size:13px;color:var(--ink3)}

/* map */
.mapside{position:sticky;top:78px}
.mapbox{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
#map{display:block;width:100%;height:520px;cursor:grab;touch-action:none}
#map.drag{cursor:grabbing}
.maptools{position:absolute;top:10px;right:10px;display:flex;gap:4px}
.maptools button{border:1px solid var(--line);background:var(--bg2);border-radius:6px;min-width:28px;height:28px;padding:0 8px;font-size:13px;cursor:pointer}
.maptip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;padding:4px 8px;border-radius:6px;white-space:nowrap;transform:translate(-50%,-140%)}
.mapnote{margin:0;padding:8px 12px;font-size:11px;color:var(--ink3);border-top:1px solid var(--line2)}

/* browse */
.crumbs{font-size:13px;color:var(--ink3);padding-top:28px}.crumbs a{color:var(--ink2)}
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:20px}
.rg{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink)}
.rg:hover{border-color:var(--ink3);text-decoration:none}
.rg .flag{font-size:26px;line-height:1}
.rg b{display:block;font-weight:600}.rg small{color:var(--ink3);font-family:var(--mono);font-size:12px}
.rghead{grid-column:1/-1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:14px;border-bottom:1px solid var(--line);padding-bottom:6px}
.speclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:24px}
.sp{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--ink);display:block}
.sp:hover{border-color:var(--ink3);text-decoration:none}
.sp b{font-family:var(--serif);font-size:20px;font-weight:500;display:block}.sp small{color:var(--ink3);font-family:var(--mono)}.sp p{margin:6px 0 0;color:var(--ink2);font-size:14px}
.prose{max-width:720px;color:var(--ink2);font-size:16px}.prose h2{font-family:var(--serif);font-weight:500;color:var(--ink);margin-top:28px}
.prose table{border-collapse:collapse;font-size:14px}.prose td{padding:4px 12px 4px 0;border-bottom:1px solid var(--line2)}.prose td:last-child{font-family:var(--mono);text-align:right}

/* drawer */
.drawer{position:fixed;inset:0;z-index:40}
.dscrim{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.dpanel{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--bg2);border-left:1px solid var(--line);overflow:auto;padding:28px 28px 40px;box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.dclose{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:28px;cursor:pointer;color:var(--ink3)}
.dpanel h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;margin:8px 40px 6px 0}
.dpanel .kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 14px;margin:20px 0;font-size:14px}
.dl dt{color:var(--ink3);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.dl dd{margin:0;overflow-wrap:anywhere}
.dl dd.hours{font-family:var(--mono);font-size:13px;white-space:pre-line}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.actions a{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--ink);background:var(--bg)}
.actions a.pri{background:var(--acc);border-color:var(--acc);color:#fff}html[data-dark] .actions a.pri{color:#04211d}
.actions a:hover{text-decoration:none;border-color:var(--ink3)}
.minimap{width:100%;height:200px;display:block;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.osmnote{font-size:12px;color:var(--ink3);margin-top:20px}

/* footer */
.foot{border-top:1px solid var(--line);padding:22px clamp(16px,4vw,48px);font-size:13px;color:var(--ink2);background:var(--bg2)}
.foot p{margin:4px 0}.foot .fine{font-size:12px;color:var(--ink3);max-width:820px}

/* no-js */
html.nojs .filters,html.nojs .chips,html.nojs .mapside{display:none}

@media (max-width:1000px){
  .results-wrap{grid-template-columns:minmax(0,1fr)}
  /* The map stays above the list on a narrow screen - dropping it below meant
     scrolling past forty cards (7,000px) to reach it, which is worse than the
     300px it costs up top. The actual defect was an EMPTY map sitting above
     the answer when a search found nothing; that is handled by
     body.no-results below, not by reordering. Shorter here so it orients
     without burying the count. */
  .mapside{position:static;order:-1}
  #map{height:260px}
}
@media (max-width:720px){
  .mast{grid-template-columns:1fr auto;gap:8px 12px;padding:10px 14px}
  .tag{display:none}
  /* nowrap here hid 131px of the nav off the right edge on a 375px phone -
     the language pill and the edition toggle were simply not reachable. */
  .mastnav{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap;font-size:12px;gap:4px 14px}
  .hero{padding:24px 0 14px}
  .lede{font-size:15px}
  .searchbar{padding:4px 4px 4px 12px;border-radius:12px}
  #q{font-size:16px;padding:8px 6px}
  .go{padding:9px 14px}
  .sel select,.sel input{min-width:0;width:100%;font-size:16px}
  .sel{flex:1 1 44%}
  .stats{gap:18px}.stats b{font-size:20px}
  .card{grid-template-columns:minmax(0,1fr)}.card .dist{grid-column:1;grid-row:auto}
  .dpanel{padding:20px 18px 40px}
}
@media (pointer:coarse){#q,.sel select,.sel input{font-size:16px}}

/* ============================================================================
   LAB ASSIST — the handoff.
   The question is shown in a real textarea rather than composed behind the
   user's back: the whole point is that they can see and change what they are
   about to hand to somebody else's machine.
   ========================================================================= */
.assist{margin:22px 0 4px;border:1px solid var(--line);border-radius:12px;padding:16px 18px 14px;background:var(--accbg)}
.assist-top{display:flex;align-items:center;gap:9px;margin:0 0 6px}
.assist-mark{width:22px;height:22px;flex:none;color:var(--acc)}
.assist-top h3{margin:0;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.assist-lede{margin:0 0 11px;font:400 13.5px/1.5 var(--sans);color:var(--ink);opacity:.72}
.assist-q{display:block;width:100%;box-sizing:border-box;overflow:hidden;font:400 15px/1.55 var(--serif);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;resize:vertical;min-height:74px}
.assist-q:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.assist-row{display:flex;align-items:baseline;gap:12px;margin-top:11px;flex-wrap:wrap}
.assist-tag{flex:none;font:600 10.5px/1.6 var(--sans);letter-spacing:.13em;text-transform:uppercase;opacity:.55;min-width:74px}
.assist-btns{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 240px;min-width:0}
.assist-btns button{font:500 13px/1 var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;cursor:pointer;transition:border-color .12s,color .12s,transform .12s}
.assist-btns button:hover{border-color:var(--acc);color:var(--acc)}
.assist-btns button:active{transform:translateY(1px)}
.assist-btns button small{opacity:.5;font-size:11px;margin-left:4px}
.assist-foot{display:flex;align-items:center;gap:12px;margin-top:13px;flex-wrap:wrap}
.assist-copy{font:600 13px/1 var(--sans);color:var(--bg);background:var(--acc);border:1px solid var(--acc);
  border-radius:999px;padding:8px 15px;cursor:pointer}
.assist-copy:hover{filter:brightness(1.08)}
.assist-note{font:400 12.5px/1.4 var(--sans);color:var(--acc);min-height:1em}

/* ---- the relaxation ladder: what widening the search would actually return */
.relax{margin-top:16px;text-align:left}
.relax-h{margin:0 0 9px;font:600 11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;opacity:.6}
.relax-btns{display:flex;flex-wrap:wrap;gap:8px}
.relax-btns button{display:inline-flex;align-items:baseline;gap:8px;font:400 14px/1.35 var(--sans);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:border-color .12s,color .12s}
.relax-btns button:hover{border-color:var(--acc);color:var(--acc)}
.relax-btns button b{font:600 13px/1 var(--sans);color:var(--acc);white-space:nowrap}
.relax-why{margin:11px 0 0;font:400 12.5px/1.55 var(--sans);opacity:.6;max-width:62ch}


/* An empty map is not an illustration of anything. When a search finds nothing,
   the map goes away and the explanation gets the room. */
body.no-results .mapside{display:none}

@media (max-width:720px){
  #map{height:210px}
  .assist{padding:14px 14px 12px;margin:18px 0 4px}
  .assist-row{flex-direction:column;align-items:stretch;gap:6px}
  .assist-tag{min-width:0}
  .assist-btns{flex:1 1 auto}
  .assist-btns button,.relax-btns button{padding:9px 13px;font-size:13.5px}
  .assist-q{font-size:16px}          /* under 16px iOS zooms the field on focus */
  .assist-foot{gap:9px}
  .assist-copy{width:100%;padding:11px 15px;font-size:14px}
  .relax-btns{flex-direction:column;align-items:stretch}
  .relax-btns button{justify-content:space-between;text-align:left}
}

/* ============================================================================
   TOUCH TARGETS.
   Measured on a phone: 116 controls stood under 40px tall — the nav links were
   18, the clear button 22. Those are readable and very hard to hit. The sizes
   below grow the HIT AREA, mostly with padding, so the page still looks the
   way it did; only the reachable region changes. Applied on coarse pointers
   rather than at a width, because a small window on a desktop has a mouse.
   ========================================================================= */
@media (pointer:coarse){
  .mastnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .wordmark{min-height:44px}
  .lang button,#edition{min-width:34px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  .clear{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .sel select,.sel input,#near,.go{min-height:44px}
  .chips button,.chip{min-height:38px;display:inline-flex;align-items:center}
  .maptools button{min-width:40px;min-height:40px}
  /* The phone number and the website are the two things a person actually came
     here to tap. They were 20px high. */
  .card .row a{display:inline-flex;align-items:center;min-height:40px;padding:0 2px}
  /* A 13px checkbox is a miss waiting to happen; the label is the hit area. */
  .tog{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
  .tog input[type=checkbox]{width:20px;height:20px;flex:none}
  .relax-btns button,.assist-btns button,.assist-copy{min-height:44px}
  .card{padding-top:14px;padding-bottom:14px}
}
.pill.scope{flex-wrap:wrap}
.pill.scope button{text-transform:none;letter-spacing:.02em;font-size:12px;padding:4px 10px}
@media (pointer:coarse){.pill.scope button{min-height:36px}}
.north-sep{border:0;border-top:1px solid var(--line);margin:16px 0}

/* ============================================================================
   THE FIGURES ARE MEASURED, SO THEY ARE STRUCK
   ----------------------------------------------------------------------------
   Every number in this row is counted from the register when the page loads and
   re-counted when the region changes — none of it is typed. It now says so: one
   dot that breathes for the row (they are all the same reading), and each figure
   struck like a register stamp with its own noun inside the frame, because
   "15,425 DENTISTAS" is one statement and a box around half of it reads as a box
   around half of it.
   ========================================================================= */
:root { --live: #0f766e; --live-soft: rgba(15,118,110,.16); --stamp: rgba(15,118,110,.55); }
html[data-dark] { --live: #5eead4; --live-soft: rgba(94,234,212,.18); --stamp: rgba(94,234,212,.5); }

.stats--live { align-items: center; }
.livedot {
  display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 0 var(--live-soft);
  animation: livepulse 2.4s ease-in-out infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 var(--live-soft); opacity: .95; }
  55%  { box-shadow: 0 0 0 6px transparent;    opacity: .55; }
  100% { box-shadow: 0 0 0 0 transparent;      opacity: .95; }
}
/* the frame holds the figure AND its noun */
.stats--live > div {
  flex-direction: row; align-items: baseline; gap: .4em;
  padding: .2em .5em .26em;
  border: 1.6px solid var(--stamp); border-radius: 5px;
  transform: rotate(-1.2deg);
}
.stats--live > div:nth-child(3n) { transform: rotate(.9deg); }   /* an inked row never lands in step */
.stats--live b {
  font-size: 20px; color: var(--live); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0;
}
.stats--live span {
  margin-top: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--live); opacity: .8;
}
@media (max-width: 720px){
  .stats--live { gap: 10px; }
  .stats--live b { font-size: 17px; }
  .stats--live span { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce){ .livedot { animation: none; } }

/* The homepage directory — real anchors into /us/ and /eu/. #north above it is
   filled by JavaScript, so without these the geography is unreachable to a
   crawler. Same tokens as everything else, so both editions are covered. */
.pdir { margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.pdir h2 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0 0 12px; }
.pdir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line2); border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.pdir__top { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 12px !important; }
.pdir__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.pdir li { background: var(--bg2); }
.pdir a { display: flex; align-items: baseline; justify-content: space-between; gap: .8em;
  padding: 10px 13px; text-decoration: none; color: var(--ink); }
.pdir a:hover { background: var(--accbg); color: var(--acc2); }
.pdir__n { font: 500 13.5px/1.35 var(--sans); }
.pdir__c { font: 500 12.5px/1 var(--mono); color: var(--ink3);
  font-variant-numeric: tabular-nums; flex: none; }
.pdir a:hover .pdir__c { color: var(--acc); }
.pdir__top .pdir__n { font-size: 15px; font-weight: 600; }
@media (max-width: 720px) { .pdir__grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================================
   THE CONTROL PANEL, BRAUN
   Dieter Rams' instruments are read, not decorated: a flat ground, hairline
   divisions on an exact grid, one weight of type, micro-labels in small caps,
   figures in tabular numerals, and a single unambiguous mark for what is ON.
   So the rounded pills become square keys sharing hairlines — the key bank of
   an ET66 — and the specialty chips become a tiled panel where every count
   sits on the same right edge and can be compared down the column.
   No shadow, no gradient, no ornament. Every colour is an existing token, so
   both editions follow without a second palette.
   ========================================================================= */

/* The row top-aligns: the region control now carries a note under it, and an
   end-aligned row pushed SORT down by exactly the height of that note. */
.filters{align-items:flex-start}

/* the region key bank ----------------------------------------------------- */
.pill.scope{
  border:1px solid var(--line); border-radius:2px; background:var(--bg2);
  padding:0; gap:0; overflow:hidden; align-self:flex-start; flex-wrap:wrap;
}
.pill.scope button{
  border:0; border-right:1px solid var(--line); border-radius:0;
  padding:9px 15px; background:transparent; cursor:pointer;
  font:600 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink2); transition:background .12s ease, color .12s ease;
}
.pill.scope button:last-child{border-right:0}
.pill.scope button:hover{background:var(--line2); color:var(--ink)}
.pill.scope button[aria-pressed="true"]{
  background:var(--accbg); color:var(--acc2);
  box-shadow:inset 0 0 0 2px var(--acc); position:relative; z-index:1;
}
.pill.scope button:focus-visible{outline:2px solid var(--acc); outline-offset:-2px}

/* what the choice actually costs — it is a download switch, not a filter */
.scopenote{
  margin:6px 0 0; font:400 11px/1.45 var(--mono);
  letter-spacing:.01em; text-transform:none; color:var(--ink3); max-width:52ch;
}

/* the field row ----------------------------------------------------------- */
.sel select,.sel input{border-radius:2px}
.sel select:focus-visible,.sel input:focus-visible{outline:2px solid var(--acc); outline-offset:-2px}

/* the specialty panel ----------------------------------------------------- */
/* One hairline grid: the 1px gap over a --line ground IS the rule work, so the
   dividers stay exactly one pixel at any zoom instead of doubling at seams. */
.chips{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:0; background:transparent;
  /* The grid draws its rules from the TILES (each carries its right and bottom
     hairline), not from a 1px gap over a coloured ground: a gap-drawn grid
     leaves the unfilled remainder of the last row showing as a solid block,
     which reads as a broken cell rather than the end of a list. */
  border:1px solid var(--line); border-right:0; border-bottom:0;
  border-radius:2px; overflow:hidden;
}
.chip{
  border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0; background:var(--bg2);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:10px 12px; cursor:pointer; text-align:left;
  font:500 12.5px/1.3 var(--sans); letter-spacing:0; color:var(--ink);
  transition:background .12s ease, color .12s ease;
}
.chip:hover{background:var(--line2); color:var(--ink)}
.chip i{
  font-style:normal; font-family:var(--mono); font-size:11px; opacity:1;
  font-variant-numeric:tabular-nums lining-nums; color:var(--ink3);
  flex:none; letter-spacing:-.01em;
}
.chip:hover i{color:var(--acc)}
.chip.on{
  background:var(--accbg); color:var(--acc2);
  box-shadow:inset 0 0 0 2px var(--acc);
  /* the frame must sit ABOVE the neighbouring tiles' hairlines or its right and
     bottom edges are overdrawn and the ring reads as an open bracket */
  position:relative; z-index:1;
}
.chip.on i{color:var(--acc); opacity:1}
.chip.on:hover{background:var(--accbg)}
/* a term the page inferred from the query, not one the reader pressed */
.chip.auto{box-shadow:inset 0 0 0 1px var(--acc); color:var(--acc); background:var(--bg2)}
.chip.auto i{color:var(--acc)}
.chip:focus-visible{outline:2px solid var(--acc); outline-offset:-2px}

@media (max-width:720px){
  .chips{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .chip{padding:9px 10px; font-size:12px}
  .pill.scope button{padding:8px 11px; letter-spacing:.07em}
}
/* A key you press with a thumb is 44px, whatever the type size says. */
@media (pointer:coarse){
  .pill.scope button{min-height:44px}
  /* `.chips .chip`, not `.chip`: the sheet already carries
     `@media (pointer:coarse){ .chips button, .chip { min-height:38px } }`, and
     the `.chips button` half of that selector is (0,1,1) — it out-specifies a
     bare `.chip` wherever either rule sits in the file, so a 38px key survived
     a rule that plainly said 44. */
  .chips .chip{min-height:44px; align-items:center}
}

/* the two symbol keys ------------------------------------------------------ */
/* "Open now" and "Has phone" were checkboxes with a word beside them, and the
   word is a different length in every reading — "Has phone" / "Con teléfono" /
   "Com telefone" — so the row rewrapped when the language changed. A drawn
   clock and a handset say it in all three. The words stay in the markup,
   visually hidden, so the label a screen reader announces is still the
   translated one and still changes with the language. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.togs{display:inline-flex; align-self:flex-start; margin-top:14px;
  border:1px solid var(--line); border-radius:2px; overflow:visible; background:var(--bg2)}
.togs .tog{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:38px; gap:0; padding:0; margin:0; cursor:pointer;
  color:var(--ink3); border-right:1px solid var(--line);
  transition:background .12s ease, color .12s ease, box-shadow .12s ease;
}
.togs .tog:last-child{border-right:0}
.togs .tog input{position:absolute; opacity:0; width:0; height:0}
.togs .tog:hover{background:var(--line2); color:var(--ink)}
.tog__i{width:17px; height:17px; flex:none}
.togs .tog.on, .togs #near.on{
  background:var(--accbg); color:var(--acc);
  box-shadow:inset 0 0 0 2px var(--acc); position:relative; z-index:1;
}
.togs .tog:focus-within{outline:2px solid var(--acc); outline-offset:-2px}
@media (pointer:coarse){ .togs .tog{width:48px; height:44px} }

/* the control panel on a phone --------------------------------------------- */
/* At 375px the region bank was sharing a flex line with the two symbol keys,
   which left it 231px wide and wrapped its four keys into three ragged rows —
   "AMÉRICA DO NORTE" alone is wider than half that. It takes the full line and
   lays out as an even 2x2 block: four keys of one size, which is the point of
   a key bank. */
@media (max-width:560px){
  .filters{gap:10px 12px}
  .scopewrap{flex:1 1 100%; min-width:0}
  .pill.scope{display:grid; grid-template-columns:1fr 1fr; width:100%}
  .pill.scope button{
    border-right:1px solid var(--line); border-bottom:0;
    padding:11px 8px; text-align:center; white-space:normal;
  }
  .pill.scope button:nth-child(2n){border-right:0}
  .pill.scope button:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .scopenote{max-width:none}
  /* the sort menu is a full-width row rather than a stub beside nothing */
  .sel.sort{flex:1 1 100%; min-width:0}
  .sel.sort select{width:100%}
  /* the symbol keys ride with "near me", not above the region bank */
  .togs{margin-top:0}
  .near{margin-top:0}
}
/* Two columns of tiles stay legible down to the narrowest phone; one column
   would make a 300px-tall list of fourteen. */
@media (max-width:400px){
  .chips{grid-template-columns:1fr 1fr}
  .chip{padding:9px 9px; font-size:11.5px; line-height:1.25}
  .chip i{font-size:10px}
}

/* #near joined the key bank, so it drops the pill it used to wear. Its own
   .on state is set by syncControls, which is why it is named alongside .tog.on
   above rather than restyled separately. */
.togs #near{border:0; border-right:1px solid var(--line); border-radius:0;
  background:transparent; height:38px; width:42px; padding:0}
.togs #near:last-child{border-right:0}
@media (pointer:coarse){ .togs #near{width:48px; height:44px} }

/* the edition switch, Braun ------------------------------------------------ */
/* It was a 46x24 pill with an 18px knob that slid over whichever icon was
   active — so the edition you were IN was the one you could not see, and the
   one showing was the one you were not in. Two square keys instead: both
   symbols always legible, the current edition wearing the same green frame
   that marks every other selection in the panel. */
.pill.edition{
  width:auto; height:auto; padding:0; border-radius:2px; overflow:visible;
  display:inline-flex; align-items:stretch; background:var(--bg2);
  border:1px solid var(--line);
}
.pill.edition::after{display:none}
.pill.edition svg{
  position:static; width:14px; height:14px; box-sizing:content-box;
  padding:6px 9px; color:var(--ink3);
  transition:background .12s ease, color .12s ease, box-shadow .12s ease;
}
.pill.edition .moon{border-left:1px solid var(--line)}
.pill.edition:hover svg{color:var(--ink2)}
/* paper is the default edition, so the sun is lit unless data-dark is set */
.pill.edition .sun{color:var(--acc); background:var(--accbg); box-shadow:inset 0 0 0 2px var(--acc)}
html[data-dark] .pill.edition .sun{color:var(--ink3); background:transparent; box-shadow:none}
html[data-dark] .pill.edition .moon{color:var(--acc); background:var(--accbg); box-shadow:inset 0 0 0 2px var(--acc)}
.pill.edition:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
@media (pointer:coarse){ .pill.edition svg{padding:10px 11px} }

/* ============================================================================
   THE BAND MINIMISES, AND THE ESTATE'S NOTICE
   ========================================================================= */

/* Three continents of country cards is a lot of page to scroll past on the way
   to the results, and which of them a reader wants open does not change from
   visit to visit — so each remembers. The heading keeps its tally when shut, so
   a collapsed section still says what is inside rather than becoming a lid. */
.band__t{
  display:flex; align-items:baseline; gap:12px; width:100%;
  background:none; border:0; padding:0; margin:0 0 2px; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
}
.band__t h2{margin:0; flex:0 0 auto}
.band__n{
  font:500 11.5px/1 var(--mono); color:var(--ink3);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; flex:1 1 auto;
}
.band__i{
  flex:0 0 auto; width:22px; height:22px; position:relative; border-radius:2px;
  border:1px solid var(--line); background:var(--bg2);
  transition:background .12s ease, border-color .12s ease;
}
/* a minus that becomes a plus — one element, two strokes, the second rotated */
.band__i::before,.band__i::after{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:1.6px;
  margin:-.8px 0 0 -4.5px; background:var(--ink2); border-radius:1px;
  transition:transform .16s ease, background .12s ease;
}
.band__i::after{transform:rotate(90deg); opacity:0}
.band__t:hover .band__i{background:var(--accbg); border-color:var(--acc)}
.band__t:hover .band__i::before,.band__t:hover .band__i::after{background:var(--acc)}
.band__t:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:2px}
.band.is-min .band__i::after{opacity:1}
.band.is-min .north-cards{display:none}
.band.is-min .north-h p{display:none}
@media (pointer:coarse){ .band__i{width:30px;height:30px} .band__t{padding:6px 0} }

/* the dmt toast — the estate's notice, as pro.php raises it: an uppercase
   kicker over a short coloured rule, the message in mono, bottom right. */
#toast-host{
  position:fixed; right:20px; bottom:20px; z-index:1000060;
  display:flex; flex-direction:column; align-items:flex-end; gap:9px;
  pointer-events:none; max-width:min(360px,calc(100vw - 40px));
}
#toast-host .l-toast{
  pointer-events:auto; position:relative; overflow:hidden;
  background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-left:3px solid var(--_tc);
  border-radius:2px; padding:10px 15px 11px 13px; min-width:184px; max-width:100%;
  box-shadow:var(--shadow);
  transform:translateY(8px); opacity:0; cursor:pointer;
  transition:opacity .24s cubic-bezier(.2,.9,.3,1), transform .24s cubic-bezier(.2,.9,.3,1);
}
#toast-host .l-toast.is-in{transform:none; opacity:1}
#toast-host .l-toast.is-out{opacity:0; transform:translateY(-6px)}
#toast-host .l-toast__k{
  display:flex; align-items:center; gap:8px;
  font:800 9px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink3);
}
#toast-host .l-toast__k::before{
  content:""; width:14px; height:2px; border-radius:2px;
  background:var(--_tc); flex:0 0 auto;
}
#toast-host .l-toast__v{
  margin-top:5px; font:600 13px/1.36 var(--mono); letter-spacing:-.01em;
  color:var(--ink); word-break:break-word;
}
@media (prefers-reduced-motion:reduce){
  #toast-host .l-toast{transition:opacity .01s}
  .band__i::before,.band__i::after{transition:none}
}

/* ---------- THE READOUT ---------------------------------------------------
   The same strip DMT carries above its controls: one uppercase line, dot
   separated, on a tint ground with a soft rule. It says two things — every
   option currently set, and the figures those options actually select.

   The figures are never invented. When a search has run the count is the
   number of records that matched, measured. When it has not, the count is the
   one the register can answer from its own totals: a country's, a state's, a
   city's, or a specialty's. Where a combination has no total in the data —
   a specialty inside a city, say — the strip names the filters and reports
   the place count it can stand behind, and marks the figure as a ceiling with
   "up to" rather than quietly multiplying two numbers together. */
.statusbar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:.9rem 0 0; padding:.5rem .8rem;
  background:var(--bg2); border:1px solid var(--line2); border-radius:10px;
  font-size:.56rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); line-height:1.5;
}
.statusbar__set{flex:1 1 18rem; min-width:0}
.statusbar__fig{flex:0 0 auto; color:var(--acc); font-variant-numeric:tabular-nums}
.statusbar__set .sb-k{opacity:.55; font-weight:700}
.statusbar__set .sb-v{color:var(--ink)}
.statusbar__set .sb-on{color:var(--acc)}
.statusbar__sep{opacity:.35; padding:0 .18rem}
/* the notice switch rides at the end of the strip, small and unringed */
.statusbar__toast{
  flex:0 0 auto; cursor:pointer; font:inherit; letter-spacing:inherit;
  text-transform:inherit; color:var(--ink);
  background:var(--bg); border:1px solid var(--line2);
  border-radius:999px; padding:.2rem .55rem;
}
.statusbar__toast[aria-pressed="false"]{opacity:.5}
.statusbar__toast:hover{border-color:var(--line)}
.statusbar__toast:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
@media (max-width:640px){
  .statusbar{font-size:.52rem; letter-spacing:.07em}
  .statusbar__fig{flex:1 1 100%}
}

/* one country, so the region switch is not shown; the rule stays
   rather than the markup being half-removed. */
.scopewrap{display:none}