:root{--ink:#171B21;--muted:#5C6572;--line:#DCE1E7;--ctrl-line:#8A8170;--bg:#FAF8F4;--surface:#fff;--red:#DA291C;--red-d:#B71F14;--yellow:#FFC72C;
  --open:#157A3B;--open-bg:#E3F2E8;--closed:#5C6572;--closed-bg:#ECEFF3;--warn:#B54708;--radius:16px;--radius-s:10px;--shadow:0 3px 16px rgba(39,37,31,.07);
  --font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --disp:'Archivo Black','Arial Black','Helvetica Neue',Arial,sans-serif;
  --mast:64px;--on-red:#fff;--on-red-dim:rgba(255,255,255,.6);--scrim:rgba(23,27,33,.22);--focus:#27251F}
@font-face{font-family:'Archivo Black';src:url(/assets/archivo-black-latin.9e9b3ff9.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2019,U+2013-2014}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:hidden}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:9999;background:#fff;padding:8px 12px;border-radius:8px}
.mast{position:sticky;top:0;z-index:1000;height:var(--mast);display:flex;align-items:center;justify-content:space-between;
  padding:0 max(16px,env(safe-area-inset-left));background:var(--red);box-shadow:0 2px 0 var(--red-d)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
/* Header menu (Task 16). Phones/tablets: the panel is hidden by CSS from the first paint (no flash, no layout shift). The Menu control is a
   link to #site-menu: with JS off the panel opens on :target; menu.js turns it into a real button (aria-expanded) and drives data-menu. */
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:2px solid var(--on-red);border-radius:999px;background:transparent;color:var(--on-red);font:700 15px/1 var(--font);text-decoration:none;cursor:pointer;touch-action:manipulation}
.menu-btn svg{flex:none;width:24px;height:24px;fill:currentColor}
.menu-btn:hover,.mast[data-menu="open"] .menu-btn{background:var(--red-d)}   /* darker, never lighter: white text stays >= 4.5:1 */
.site-menu ul{list-style:none;margin:0;padding:0}
.site-menu li+li{border-top:1px solid var(--line)}
.site-menu a{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 16px;color:var(--ink);font:600 1rem/1.25 var(--font);text-decoration:none}
.site-menu a:hover{background:var(--bg)}
.site-menu a svg{flex:none;width:24px;height:24px;fill:currentColor;color:var(--red)}
.site-menu a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;box-shadow:none}
.site-menu .m-num{margin-left:auto;white-space:nowrap}   /* the number stays whole, on the right; the label may wrap */
.frow.xtra{display:none}
@media (max-width:1024px){
  .mast .site-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 10px 24px var(--scrim);max-height:calc(100dvh - var(--mast));overflow-y:auto}
  .mast .site-menu:target,.mast[data-menu="open"] .site-menu{display:block}
  .mast[data-menu="closed"] .site-menu{display:none}
}
@media (min-width:600px) and (max-width:1024px){.mast .site-menu{left:auto;width:360px;border-left:1px solid var(--line)}}
/* Desktop: no button, the items are one slim row of white text links inside the red mast (never wrapping). */
@media (min-width:1025px){
  .menu-btn{display:none}
  .brand{margin-right:24px}   /* a guaranteed gap between the wordmark and the row */
  .mast .site-menu{display:block;position:static;flex:0 1 auto;margin:0 0 0 auto;width:auto;max-height:none;overflow:visible;background:none;border:0;box-shadow:none}
  .site-menu ul{display:flex;align-items:center;gap:6px 16px;white-space:nowrap}
  .site-menu li+li{border-top:0}
  .site-menu a{min-height:44px;padding:0 2px;gap:0;color:var(--on-red);font:600 13px/1.25 var(--font);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--on-red-dim)}
  .site-menu a:hover{background:none;text-decoration-color:var(--on-red)}
  .site-menu a svg,.site-menu .m-num{display:none}
  .site-menu a:focus-visible{outline:2px solid var(--on-red);outline-offset:2px;box-shadow:0 0 0 5px var(--red-d)}
}
/* Nutrition + Call do not fit the row on a narrower desktop: they drop to the footer (.xtra) below a per-language width; both stay reachable.
   Widths come from measuring the full 8-item row (brand + 24px gap + row + 24px spare + 32px padding) in a wide fallback font, plus ~45px:
   EN needs ~1212, ES ~1506. Spanish at 1025-1159 px also drops "Síganos" (the footer's socials row already links /social/). */
@media (min-width:1025px) and (max-width:1259px){html:lang(en) .site-menu .m-xl{display:none}html:lang(en) .frow.xtra{display:flex}}
@media (min-width:1025px) and (max-width:1559px){html:lang(es) .site-menu .m-xl{display:none}html:lang(es) .frow.xtra{display:flex}}
@media (min-width:1025px) and (max-width:1159px){html:lang(es) .site-menu .m-fol{display:none}}
.wordmark{font:400 18px var(--disp);color:var(--on-red);letter-spacing:.3px;white-space:nowrap}
/* The Valley hero: red, white type, the county outline beside the button. Nothing is absolutely positioned, so the art can never be cropped. */
.hero{background:var(--red);color:#fff;border-bottom:4px solid var(--yellow);padding:8px 16px 10px;display:grid;gap:6px}
.hero-h1{margin:0;font:400 1.45rem/1.05 var(--disp);letter-spacing:0;text-wrap:balance}
.hero-h1 strong{color:var(--yellow);font-size:1.25em;font-weight:400;font-variant-numeric:tabular-nums}
.hero-sub{margin:0;color:#fff;font-size:1rem}
/* Phone / tablet: h1, then the heritage line full width, then one row [CTA | Valley]. The row wraps (the Valley drops under the CTA) rather than the CTA ever wrapping its label. */
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.hero-text{display:contents}
.herit{order:0;flex:0 0 100%}
.hero .cta{order:1;white-space:nowrap;max-width:100%;padding:0 14px;gap:6px;font-size:14px}
@media (max-width:340px){.hero .cta{white-space:normal;text-align:left}}   /* 320px reflow + 1.4.12 text spacing: the only width where the label may wrap, so the CTA never leaves the hero */
.valley{order:2;margin-left:auto;width:100px;height:auto;display:block}
.hero .status{order:3;flex:0 0 100%}
/* Spanish copy is longer: a slightly smaller CTA and Valley keep them on ONE row on a phone, so the hero stays short (<= 300px) */
@media (max-width:480px){:lang(es) .hero .cta{font-size:13px;padding:0 12px}:lang(es) .valley{width:88px}}
.valley .county{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:1;stroke-linejoin:round}
.valley .store{fill:var(--yellow);stroke:var(--red);stroke-width:.6}
.herit{margin:0;font-size:13px;line-height:1.25;color:#fff}
.herit .story{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}.herit .story:hover{text-decoration-thickness:2px}
.cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:999px;
  background:var(--yellow);color:var(--ink);font:700 15px var(--font);box-shadow:none;cursor:pointer;
  transition:transform .12s ease}
.cta:active{transform:translateY(2px)}
.cta .cta-icon{flex:none;width:20px;height:20px}
.cta:focus-visible,.chip:focus-visible,.btn:focus-visible,.card .name:focus-visible,.card .sms a:focus-visible,details.week summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero .cta:focus-visible{outline-color:#fff}   /* the hero is red: ink would be 3.2:1 against it, white is 4.9 */
.status{min-height:1.4em;margin:12px 0 0;color:var(--muted)}   /* #status, the live region; the card's pill is .card .status */
.hero .status{margin:0;color:#fff;font-size:.9rem}
.layout{display:grid;grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): the chip row scrolls inside the panel, it must not widen the page at 320 px */
.map-wrap{order:-1;position:relative}
#map{height:clamp(180px,24dvh,240px);min-height:180px;background:#EDE6D6}
.panel{padding:10px 16px 16px}
.filters{display:grid;gap:8px;margin-bottom:10px}
#search{width:100%;min-height:48px;padding:0 16px;border:2px solid var(--ctrl-line);border-radius:999px;font:500 1rem var(--font);background:#fff}
.chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;min-height:48px;padding:0 14px;border-radius:999px;border:1px solid var(--ctrl-line);background:#fff;color:var(--ink);font:400 13px var(--font);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border:1.5px solid var(--line);
  animation:rise .35s ease both}
.card.is-active{border-color:var(--red)}   /* 1.5px red border on the active card only (same width as the resting border: no layout shift) */
.row1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card h2{margin:0;font-size:1.15rem;line-height:1.2;min-width:0}
.card h2 .name{color:var(--ink);text-decoration:none;display:inline-block;padding:6px 0}.card h2 .name:hover{text-decoration:underline}
.card h2 .city{color:var(--muted);font-weight:600;font-size:.95rem}
.numtag{flex:none;color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.card .addr{margin:0 0 8px;color:var(--muted)}
.card .status{white-space:normal;max-width:100%;display:inline-flex;align-items:center;gap:7px;margin:0 0 8px;min-height:0;padding:4px 10px 4px 8px;border-radius:16px;font:600 15px/1.25 var(--font)}
.card .status .dot{flex:none;width:9px;height:9px;border-radius:50%;background:currentColor}
.card .status.open{color:var(--open);background:var(--open-bg)}.card .status.closed{color:var(--closed);background:var(--closed-bg)}
.hol-tag{font-weight:700;color:var(--ink)}
.holiday{margin:-4px 0 10px;font-size:.88rem;color:var(--muted,inherit)}
.holiday[hidden]{display:none}
.week .hol-name{display:block;font-size:.8em;font-weight:400}
.today{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.92rem;margin:0 0 10px}
.feats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.feat{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#FFF3D1;font-size:.8rem;font-weight:700}
.feat svg{width:14px;height:14px}
.actions{display:grid;grid-template-columns:1.25fr .8fr .9fr 1.15fr;gap:4px}   /* min-width:0 on the buttons is what stops the nowrap labels widening the page */
@media (max-width:359px){.actions{grid-template-columns:1fr 1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;font:800 .95rem var(--font);
  text-decoration:none;border:2px solid var(--ink);color:var(--ink);background:#fff;cursor:pointer}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn svg{width:18px;height:18px}
/* card actions: four iconed buttons in one row. Resting cards outline the primary; the ACTIVE card fills it red. */
.actions .btn{min-width:0;overflow:hidden;gap:3px;padding:9px 2px;border-width:1.5px;border-radius:var(--radius-s);font:600 12px/1 var(--font);white-space:nowrap}
.actions .btn svg{flex:none;width:14px;height:14px}
.actions .btn.primary{background:#fff;border-color:var(--ink);color:var(--ink)}
.card.is-active .actions .btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.card .sms{margin:8px 0 0;font-size:.85rem}.card .sms a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink)}.card .sms svg{flex:none;width:16px;height:16px;color:var(--red)}
.card .sms b{font-weight:800}
.row2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
details.week{flex:1;min-width:0}details.week summary{cursor:pointer;font-weight:700;font-size:.9rem;min-height:48px;display:flex;align-items:center;gap:6px;list-style:none}
details.week summary::-webkit-details-marker{display:none}
details.week summary svg{flex:none;width:18px;height:18px}details.week summary .chev{transition:transform .15s}details.week[open] summary .chev{transform:rotate(180deg)}
details.week[open]{flex:0 0 100%}
.wk{display:grid;gap:10px;margin:2px 0 6px}
.wk-blk{background:#FFF9EE;border-radius:14px;padding:10px 12px 6px}
.wk-blk h3{margin:0 0 2px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wk-blk ul{list-style:none;margin:0;padding:0}
.wk-blk li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px;margin:0 -8px;min-height:40px;border-radius:10px;font-size:.98rem}
.wk-d{font-weight:700;min-width:0;white-space:nowrap}.wk-t{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.wk-blk li.is-today{background:#FFE8A3;font-weight:800}
.wk-blk li.is-today .wk-d{display:flex;flex-direction:column;align-items:flex-start}
.wk-blk li.is-today .wk-d em{font-style:normal;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--ink);color:#fff;border-radius:999px;padding:2px 6px;margin-top:3px;white-space:nowrap}
.dist{font-variant-numeric:tabular-nums;margin-left:6px;white-space:nowrap;font-weight:800;color:var(--red-d);font-size:.9rem}
.pin{width:36px;height:46px;transform-origin:50% 100%;transition:transform .15s ease;filter:drop-shadow(0 2px 2.5px rgba(39,37,31,.35))}
.pin svg{display:block;overflow:visible}
.pin-body{fill:var(--red);stroke:#fff;stroke-width:2.6;stroke-linejoin:round;transition:fill .15s ease}
/* A highlighted store stays a RESTAURANT pin (red + golden ring): ink is the office's colour in the legend (owner, 2026-10-17). */
.pin.is-active,.leaflet-marker-icon:hover .pin,.leaflet-marker-icon:focus-visible .pin{transform:scale(1.25)}
.pin.is-active .pin-body,.leaflet-marker-icon:hover .pin-body,.leaflet-marker-icon:focus-visible .pin-body{fill:var(--red-d);stroke:var(--yellow);stroke-width:3.2}
.pin-office.is-active .pin-body,.leaflet-marker-icon:hover .pin-office .pin-body,.leaflet-marker-icon:focus-visible .pin-office .pin-body{fill:var(--ink);stroke:#fff}
.you{width:18px;height:18px;border-radius:50%;background:#1A73E8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(26,115,232,.25)}
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:1001;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
/* Phones lift position:fixed bars above the on-screen keyboard, so while the search field has focus the bar would sit on top of
   the store cards (owner's iPhone, 2026-10-17): hide it until typing ends. */
body:has(#search:focus) .bottom-bar{display:none}
.seg{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);min-height:48px;border-radius:12px;border:1px solid var(--ctrl-line);background:#fff;font:800 .95rem var(--font);cursor:pointer}
.seg[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
body[data-view="list"] .map-wrap{display:none}
.foot{padding:20px 16px 40px;text-align:center;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
/* one footer (Task 8): plain link rows, ink text + underline, >= 44px tap height, nothing under 12px */
.frow{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;max-width:720px;margin:0 auto}
.frow a,.frow .flang{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--ink);font:600 .95rem/1.25 var(--font);
  text-decoration:underline;text-decoration-color:var(--ctrl-line);text-underline-offset:3px;background:none;border:0;cursor:pointer}
.frow a:hover,.frow .flang:hover{text-decoration-color:var(--ink)}
.frow.social a{min-height:48px}   /* the standing 48px tap-target gate */
.frow svg{flex:none;width:20px;height:20px;fill:currentColor}
.foot .franchise{margin:14px 0 4px}
.empty{padding:24px;text-align:center;color:var(--muted)}
/* Pins drop in once, on the map's first paint: transform-free (the `translate` property composes with the pins' own scale), so the D1 layout never moves. */
.pins-drop .pin{animation:drop .5s cubic-bezier(.3,1.35,.5,1) both}
@keyframes drop{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* tablet */
@media (min-width:640px){
  .cards{grid-template-columns:1fr 1fr}
  #map{height:420px}
}
/* desktop + landscape tablet: split view */
@media (min-width:1025px),(min-width:800px) and (orientation:landscape){
  body{padding-bottom:0}.bottom-bar{display:none}
  body[data-view="list"] .map-wrap{display:block}
  /* --hero is the hero's measured height (set by app.js on load/resize), so mast + hero + split fill exactly one screen */
  .layout{grid-template-columns:minmax(360px,440px) 1fr;height:calc(100dvh - var(--mast) - var(--hero,124px));min-height:320px}
  .map-wrap{order:0;height:100%}
  #map{height:100%}
  .panel{overflow-y:auto;height:100%;overscroll-behavior:contain}
  @media (pointer:fine){.filters{gap:8px}#search{min-height:42px}.chips{gap:6px}.chip{min-height:34px;padding:0 10px;font-size:.82rem}}   /* 48px targets are for touch */
  .cards{grid-template-columns:1fr}
  .card:hover{border-color:var(--ctrl-line)}
}
/* desktop: two columns, the Valley at ~400px in its own column, vertically centred */
@media (min-width:1025px){
  .hero{grid-template-columns:1fr auto;column-gap:20px;padding:12px max(24px,2vw) 14px;align-items:center}
  .hero-home .hero-h1{grid-column:1;grid-row:1}
  .hero-home .hero-row{display:contents}
  .hero-text{display:grid;gap:8px;justify-items:start;min-width:0}
  .hero-home .hero-text{grid-column:1;grid-row:2}
  .hero-home .valley{grid-column:2;grid-row:1/3;width:220px;align-self:center}
  .hero-h1{font-size:28px;max-width:none;text-wrap:pretty}
  .hero-text{gap:6px}
  .herit{font-size:13px}
  /* the split panel is 440px wide: let the city chips wrap into a few tidy rows instead of overflowing out of sight */
  .chips{flex-wrap:wrap;overflow:visible;scroll-snap-type:none;padding-bottom:0;gap:5px 6px}
  .chip{min-height:0;padding:4px 9px;font-size:13px}
  .hero-store .hero-h1{font-size:30px;max-width:none}
  .hero-store .hero-row{grid-column:1/-1}
}
.leaflet-container{font-family:var(--font)}
/* app.js (Task 6) */
#map{z-index:0}                                    /* keep Leaflet's z-index:1000 controls under the sticky header */
.map-wrap{scroll-margin:0}   /* html scroll-padding already clears the sticky header; a margin here counted it twice (map 64px low) */
.card{scroll-margin:0}   /* html scroll-padding (mast+12 / bar+12) clears the fixed bars; a tall card must still fit the window */
.cards.settled .card{animation:none}             /* animate the first paint only, not every keystroke */
.chip .n{margin-left:2px;font-weight:600;color:var(--muted)}
.card .share{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 10px;border:1.5px solid transparent;border-radius:var(--radius-s);background:none;color:var(--ink);font:600 .9rem var(--font);cursor:pointer}
.card .share svg{width:16px;height:16px}
.card .share:hover{border-color:var(--ctrl-line)}
.card .share:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.leaflet-tooltip{font-weight:700}
/* office marker, popup, legend, footer line (Task 7b) */
.pin-office .pin-body{fill:var(--ink)}
.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:var(--shadow)}
.leaflet-popup-content{margin:12px 16px 12px 14px}
.office-pop{display:grid;gap:4px;font:500 .9rem/1.35 var(--font);color:var(--ink)}
.office-pop strong{font-size:1rem}.office-pop span{color:var(--muted)}
.office-pop .btn{margin-top:6px;min-height:48px;padding:0 14px;font-size:.88rem;color:var(--ink)}
.legend{display:flex;flex-direction:column;gap:3px;margin:0 0 6px 8px!important;padding:5px 9px;border-radius:10px;background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(39,37,31,.22);font:700 11px/14px var(--font);color:var(--ink);pointer-events:none}
.legend span{display:flex;align-items:center;gap:6px}
.legend .sw{flex:none;overflow:visible}.legend .sw path{stroke:#fff;stroke-width:2.6;stroke-linejoin:round;paint-order:stroke}
.legend .sw-store path{fill:var(--red)}.legend .sw-office path{fill:var(--ink)}
.leaflet-popup-close-button{width:48px!important;height:48px!important;display:grid;place-items:center;padding:0!important;font-size:24px!important;line-height:1}
.leaflet-popup-content{margin-right:34px}
/* CARTO's keyless placeholder tiles show a lighter tile-sized block and hairline seams at tile edges; a transparent outline hides them (harmless with real tiles) */
.leaflet-container img.leaflet-tile{outline:1px solid transparent}
.sr-only{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}
.status:empty{min-height:0;margin:0}   /* no blank gap under the button until there is a message */
/* store number, nearby alternatives, helpful links (2026-10-17) */
.nearby:empty{display:none}
.nearby{margin-top:12px;padding-top:10px;border-top:1px dashed #E7DFCF}
.nearby .nb-h{margin:0 0 6px;font-size:.82rem;font-weight:700;color:var(--muted)}
.nearby,.nearby ul,.nearby li{min-width:0;height:auto;overflow:visible}
.nearby ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nb{flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 12px;border-radius:12px;
  border:2px solid var(--ctrl-line);background:#fff;color:var(--ink);font:700 .9rem var(--font);text-align:left;cursor:pointer}
.nb:hover{border-color:var(--ink)}.nb:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.nb-meta{flex:none;font-weight:500;color:var(--muted);font-size:.82rem}
.nb-st.open{color:var(--open);font-weight:800}.nb-st.closed{color:var(--red-d);font-weight:800}
.nearby[data-mode="closed"],.nearby[data-mode="soon"]{border:0;margin-top:14px;padding:12px;border-radius:14px;background:#FFF4CC}
.nearby[data-mode="closed"] .nb-h,.nearby[data-mode="soon"] .nb-h{color:var(--ink);font-size:.9rem}

/* B2: focus ring, buttons, non-text contrast (WCAG 1.4.11 / 2.4.7 / 2.4.11 / 2.4.13) */
button{color:inherit;font:inherit;-webkit-appearance:none;appearance:none}
.chip,.nb{color:var(--ink)}
:where(a[href],button,input,summary,[tabindex="0"],.leaflet-marker-icon,.leaflet-control a):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 6px #fff}
.mast :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--red-d)}
html{scroll-padding-top:calc(var(--mast) + 12px);scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))   /* bar = 8 + 48 + 8 + the home-indicator inset */}
#search,.chip,.nb{border-color:var(--ctrl-line)}
.chip[aria-pressed="true"]{border-color:var(--yellow)}

/* D1: a map that reads at every zoom */
.map-far .store-pin,.map-far .office-pin{width:22px!important;height:28px!important;margin-left:-11px!important;margin-top:-28px!important}
.map-far .pin{position:absolute;left:50%;bottom:0;margin-left:-18px;transform:scale(.62)}
.map-far .pin.is-active,.map-far .leaflet-marker-icon:hover .pin,.map-far .leaflet-marker-icon:focus-visible .pin{transform:scale(.775)}
.map-city .store-pin:not(.m-active):not(.m-solo){display:none}
.city-bubble{display:block}
.cb{position:absolute;inset:0;display:grid;place-content:center;text-align:center;border-radius:50%;background:var(--red);color:#fff;border:3px solid #fff;
  box-shadow:0 2px 6px rgba(39,37,31,.4);line-height:1;cursor:pointer}
.cb-n{font:800 1.05rem var(--font)}
/* keyboard focus follows the shape, not the marker's square box */
.leaflet-marker-icon.store-pin:focus-visible,.leaflet-marker-icon.office-pin:focus-visible,.leaflet-marker-icon.city-bubble:focus-visible{outline:3px solid transparent;box-shadow:none}   /* transparent: the halo below is the visible ring; forced-colors paints this one */
.store-pin:focus-visible .pin,.office-pin:focus-visible .pin{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px var(--focus)) drop-shadow(0 0 3px var(--focus))}
.city-bubble:focus-visible .cb{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 6px #fff}

.legend .sw-bubble{flex:none;width:16px;height:16px;border-radius:50%;background:var(--red);border:2px solid #fff;box-shadow:0 0 0 1px rgba(39,37,31,.35)}

/* D3: phone polish */
.seg svg{flex:none;width:20px;height:20px}
/* A store page on a phone (receipt QR): its own card leads (#lead, first in the DOM too), then the map, then the filters and the other cards. */
.lead:empty{display:none}
.lead{margin:14px 16px 0}
.cards.lead{grid-template-columns:1fr;max-width:720px}   /* one card, at every width (the store page has no #list) */
/* The lead card is drawn by the script and pushes everything below it down by its own height (about 600-750px, it varies with the store). Until it exists the
   part of the page that would be pushed stays invisible (invisible boxes are not layout shifts), so the page does not jump when the card arrives (CLS). Scripting off: the static list stays visible. */
/* Failsafe, pure CSS (the CSP allows no inline script): if the script never gets to set data-ready, the content shows after 3s. The 0s visibility flip is not motion,
   so it is kept under prefers-reduced-motion too (the global animation:none rule is outranked by the !important one below). */
@keyframes es-reveal{to{visibility:visible}}
@media (scripting:enabled){body[data-focus]:not([data-focus=""]):not([data-ready]) :is(.layout,.store-body){visibility:hidden;animation:es-reveal 0s 3s forwards}}
@media (scripting:enabled) and (prefers-reduced-motion:reduce){body[data-focus]:not([data-focus=""]):not([data-ready]) :is(.layout,.store-body){animation:es-reveal 0s 3s forwards!important}}

/* C1: document pages (/legal/, /privacy/, /accessibility/, 404): no map, no bottom bar, a readable column */
body.doc-page{padding-bottom:0}
.doc{max-width:68ch;margin:0 auto;padding:clamp(20px,5vw,40px) 16px 8px;line-height:1.6;overflow-wrap:break-word}
.doc h1{margin:0 0 6px;font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.15;letter-spacing:-.01em}
.doc h2{margin:28px 0 8px;font-size:1.2rem;line-height:1.3}
.doc p,.doc ul{margin:0 0 12px}
.doc ul{padding-left:1.4em}.doc li{margin-bottom:6px}
.doc a{color:var(--ink);font-weight:700}
.doc a[href^="tel:"]{white-space:nowrap}
.doc .timeline{list-style:none;margin:32px 0 12px;padding:0 0 0 24px;border-left:3px solid var(--line)}   /* the rail; each li hangs a red dot on it */
.doc .timeline li{position:relative;margin:0 0 20px;padding:0;font-size:1rem;line-height:1.45}.doc .timeline li:last-child{margin-bottom:0}
.doc .timeline li::before{content:"";position:absolute;left:-33px;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--bg)}
.doc .timeline time{display:block;margin-bottom:2px;font:400 1.3rem/1.2 var(--disp);color:var(--ink)}
.doc .doc-date{color:var(--muted);font-size:.92rem}
.doc .doc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.doc .doc-actions .btn{padding:0 22px;text-decoration:none}.doc .doc-actions .btn.primary{color:#fff}

/* Task 15: /social/ — one big button per network, then plain links */
.doc .social-btns,.doc .social-more{list-style:none;margin:0;padding:0}
.doc .social-btns{display:grid;gap:12px;margin:20px 0 28px;max-width:480px}.doc .social-btns li{margin:0}
.doc .social-btn{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;min-height:64px;padding:8px 18px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;touch-action:manipulation}
.doc .social-btn:hover{background:var(--bg)}
.doc .social-btn svg{flex:none;width:28px;height:28px;fill:currentColor}
.doc .social-btn .sn{font-size:1.1rem}.doc .social-btn .sh{margin-left:auto;font-weight:600;font-size:.95rem;color:var(--muted);overflow-wrap:anywhere;text-align:right}
.doc .social-more li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;margin:0 0 4px}
.doc .social-more svg{flex:none;width:20px;height:20px;fill:currentColor}
.doc .social-more .apps{white-space:nowrap}
.doc .social-more a{display:inline-flex;align-items:center;min-height:44px}

/* Task 4: touch + hover on every control (hover: border to ink, background to the page tone; filled controls keep a fill) */
.btn,.chip,.cta,.seg,.flang,.nb,.name{touch-action:manipulation}
.btn:hover,.chip:hover,.seg:hover,.nb:hover{border-color:var(--ink);background:var(--bg)}
.chip[aria-pressed="true"]:hover{background:var(--yellow)}
.chip[aria-pressed="true"] .n{color:var(--ink)}
.seg[aria-pressed="true"]:hover{background:var(--ink)}
.card.is-active .actions .btn.primary:hover,.doc .doc-actions .btn.primary:hover{background:var(--red-d);border-color:var(--red-d);color:#fff}
.cta:hover{background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}

/* Task 5: a store page is a real page. Breadcrumb, the store's own card (#lead), the map, then the nearby stores, the week of hours and every other store. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;padding:6px 16px;background:var(--bg);color:var(--muted);font-size:.9rem}
.crumb a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumb a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.crumb [aria-current]{color:var(--ink);font-weight:700}
.hero-h1 .numtag{font-size:.55em;color:inherit;white-space:nowrap}
body[data-focus]:not([data-focus=""]) .panel{display:none}            /* no list to filter: the "All stores" list below replaces it */
body[data-focus]:not([data-focus=""]) .bottom-bar{display:none}
body[data-focus]:not([data-focus=""]){padding-bottom:0}
.store-body{padding:8px 16px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:760px;width:100%;box-sizing:border-box}
.blk h2{margin:0 0 10px;font-size:1.15rem;line-height:1.25}
.blk .status{display:inline-flex;align-items:center;margin:0;min-height:0;padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap}
.blk .status:empty{display:none}
.blk .status.open{color:var(--open);background:var(--open-bg)}.blk .status.closed{color:var(--closed);background:var(--closed-bg)}
.nbl,.all{list-style:none;margin:0;padding:0}
.nbl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i n d" "i s p";align-items:center;gap:2px 8px;padding:10px 0;border-top:1px solid var(--line)}
.nbl li:first-child{border-top:0}
.nbi{grid-area:i;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font:800 .8rem var(--font)}
.nbn{grid-area:n;min-width:0;color:var(--ink);font-weight:700;text-decoration:none;overflow-wrap:anywhere;padding:6px 0}.nbn:hover{text-decoration:underline}
.nbn .city{color:var(--muted);font-weight:600;font-size:.9rem}
.nbd{grid-area:d;justify-self:end;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nbl .status{padding:3px 6px;grid-area:s;justify-self:start;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.3}
.nbp{grid-area:p;justify-self:end;text-align:right;font-size:.85rem;display:inline-flex;align-items:center;min-height:32px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.nbn:focus-visible,.nbp:focus-visible,.all a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.week{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.week th,.week td{padding:8px 10px;text-align:left;border-top:1px solid var(--line)}
.week thead th{border-top:0;font-size:.85rem;color:var(--muted)}
.week tbody th{font-weight:700}
.week tr.today{display:table-row;margin:0;font-size:inherit;background:var(--open-bg)}   /* .today is also the card's flex line: undo that here */
.all{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 24px}
.all li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:2px 0;border-top:1px solid var(--line);min-width:0}
.all a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;font-weight:600;overflow-wrap:anywhere}.all a:hover{text-decoration:underline}
.all .city{color:var(--muted);font-size:.9rem}
.all .status{margin-left:auto}
/* numbered pins: the digit sits in the head of the pin, white on red (the arches step aside) */
.pin{position:relative}
.store-pin[data-n] .pin > svg > svg{opacity:0}
.pin[data-n]::after{content:attr(data-n);position:absolute;left:0;top:4px;width:36px;height:26px;line-height:26px;text-align:center;color:#fff;font:800 16px/26px var(--font);pointer-events:none}
@media (min-width:640px){.store-body{padding-inline:24px}}
/* split view: the card and the page body scroll in the left column; the map stays put beside them */
@media (min-width:1025px),(min-width:800px) and (orientation:landscape){
  body[data-focus]:not([data-focus=""]) .page{display:grid;grid-template-columns:minmax(360px,440px) 1fr;align-items:start}
  body[data-focus]:not([data-focus=""]) .hero{grid-column:1/-1}
  body[data-focus]:not([data-focus=""]) .lead{grid-column:1;grid-row:2;margin:16px;max-width:none}
  body[data-focus]:not([data-focus=""]) .layout{display:contents}
  body[data-focus]:not([data-focus=""]) .map-wrap{grid-column:2;grid-row:2/span 2;position:sticky;top:var(--mast);height:calc(100dvh - var(--mast))}
  body[data-focus]:not([data-focus=""]) .store-body{grid-column:1;grid-row:3;padding-inline:16px;max-width:none}
}
/* whitelist.ellismcd.net (unlisted staff page): the site's mast and tokens, EN only */
body.wl-page{--acc-mcd:#A8571A;--acc-mcd-bg:#F3E6DB;--acc-otp:#1E6E8C;--acc-otp-bg:#DFEDF1}   /* group colours (from the original OTP Whitelist page): MCD amber, OTP teal */
.wl{max-width:1400px}.wl [hidden]{display:none!important}
.wl > p{max-width:70ch}
.wl-meta{margin:0 0 8px}
.wl-filters{display:grid;gap:10px;margin:14px 0 8px;max-width:720px}
.wl-label{position:absolute;left:-999px}
.wl #wl-search{width:100%;min-height:48px;padding:0 16px;border:2px solid var(--ctrl-line);border-radius:999px;font:500 1rem var(--font);background:var(--surface);color:var(--ink)}
.wl #wl-search:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wl-chips{flex-wrap:wrap;overflow:visible}
.wl .empty-state{margin:16px 0;padding:16px;border:1.5px dashed var(--ctrl-line);border-radius:var(--radius-s);background:var(--surface);color:var(--muted)}

.wl h2 .n{font:600 .85rem var(--font);color:var(--muted)}
/* Cards: one column on a phone, then as many >= 300px columns as fit (2 on a tablet, 3–4 on a desktop). */
.wl .link-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.wl .wl-card{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:14px 16px 10px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);border-top:4px solid var(--ink)}

.wl .wl-name{display:block;color:var(--ink);font:700 1.05rem/1.3 var(--font);padding:4px 0;text-decoration:none;overflow-wrap:break-word}
.wl .wl-name:hover{text-decoration:underline}.wl .wl-name .nw{white-space:nowrap}
.wl .wl-name:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.wl .wl-name .ext{display:inline;width:15px;height:15px;margin-left:6px;vertical-align:-2px;fill:var(--muted)}   /* inline: stays right after the last word when the name wraps */
.wl .wl-desc{margin:0;color:var(--ink);font-size:.95rem;line-height:1.45;flex:1}
.wl .wl-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
.wl .host{flex:1 1 0;min-width:0;color:var(--muted);font-size:.85rem;line-height:1.35;overflow-wrap:break-word}   /* breaks only at the <wbr> after each dot, never mid-word */
.wl .host.full{font:500 .85rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.wl .wl-copy{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1.5px solid var(--ctrl-line);border-radius:999px;background:var(--surface);color:var(--ink);font:700 .85rem var(--font);cursor:pointer}
.wl .wl-copy svg{width:16px;height:16px;fill:currentColor}
.wl .wl-copy:hover{border-color:var(--ink)}
.wl .wl-copy.done{background:var(--open-bg,#E3F2E8);border-color:var(--open,#1E7B3E);color:var(--open,#1E7B3E)}
.wl .wl-copy:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (pointer:coarse){.wl .wl-copy{min-height:48px}}
/* whitelist.ellismcd.net dark theme: the same tokens, redefined on the page's body only (the public site stays light).
   Auto = the device setting; html[data-theme] (the toggle, saved by wl-theme.js) overrides it both ways. The red mast stays red. */
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.wl-page{
  --ink:#E8EBEF;--muted:#A6AFBB;--line:#2D333C;--ctrl-line:#808999;--bg:#101317;--surface:#1A1F26;--open:#6DD497;--open-bg:#173424;
  --shadow:0 3px 16px rgba(0,0,0,.45);--scrim:rgba(0,0,0,.55);--focus:#E8EBEF;
  --acc-mcd:#E3A863;--acc-mcd-bg:#33261A;--acc-otp:#5FBEDD;--acc-otp-bg:#172E36;color-scheme:dark}}
html[data-theme="dark"] body.wl-page{
  --ink:#E8EBEF;--muted:#A6AFBB;--line:#2D333C;--ctrl-line:#808999;--bg:#101317;--surface:#1A1F26;--open:#6DD497;--open-bg:#173424;
  --shadow:0 3px 16px rgba(0,0,0,.45);--scrim:rgba(0,0,0,.55);--focus:#E8EBEF;
  --acc-mcd:#E3A863;--acc-mcd-bg:#33261A;--acc-otp:#5FBEDD;--acc-otp-bg:#172E36;color-scheme:dark}
html[data-theme="light"] body.wl-page{color-scheme:light}
.wl-page .chip:not([aria-pressed="true"]){background:var(--surface)}
.wl-page .chip[aria-pressed="true"],.wl-page .chip[aria-pressed="true"]:hover{background:var(--yellow);color:#171B21}.wl-page .chip[aria-pressed="true"] .n{color:#171B21}   /* dark text on yellow in both themes */
.wl-page .skip:focus{background:var(--surface);color:var(--ink)}

.wl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.wl-top h1{margin:0}
.wl-page .doc.wl{padding-top:28px}   /* no red bar on this page (owner, 2026-10-19) */
.theme-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1.5px solid var(--ctrl-line);border-radius:999px;background:var(--surface);color:var(--ink);font:700 .9rem var(--font);cursor:pointer}
.theme-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.theme-btn svg{width:18px;height:18px;fill:currentColor}
.theme-btn:hover{border-color:var(--ink)}
@media (pointer:coarse){.theme-btn{min-height:48px}}
.theme-btn .i-dark{display:none}
.theme-btn[data-mode="dark"] .i-dark{display:inline}.theme-btn[data-mode="dark"] .i-light{display:none}
@media (prefers-color-scheme:dark){.theme-btn[data-mode="auto"] .i-dark{display:inline}.theme-btn[data-mode="auto"] .i-light{display:none}}
/* Two group panels, side by side on a wide screen (MCD left, OTP right), stacked below that. Each panel carries its group colour:
   a tinted ground, a coloured top rule and dot, and the same colour on its cards' top edge and on its filter chip. */
.wl .sections{display:grid;gap:18px;margin-top:20px}
@media (min-width:1100px){.wl .sections{grid-template-columns:repeat(auto-fit,minmax(0,1fr));align-items:start}}
.wl section.category{--acc:var(--acc-mcd);--acc-bg:var(--acc-mcd-bg);min-width:0;padding:14px 14px 16px;background:var(--acc-bg);border:1.5px solid var(--line);border-top:5px solid var(--acc);border-radius:var(--radius)}
.wl section.cat-otp{--acc:var(--acc-otp);--acc-bg:var(--acc-otp-bg)}
.wl .cat-head{display:flex;align-items:center;gap:10px;margin:2px 4px 14px;font-size:1.2rem}
.wl .cat-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--acc)}
.wl .cat-head .n{margin-left:auto;font:700 .85rem var(--font);color:var(--ink);background:var(--surface);border:1.5px solid var(--acc);border-radius:999px;padding:2px 10px}
.wl .wl-card{border-top:4px solid var(--acc)}
.wl-page .chip-mcd[aria-pressed="true"],.wl-page .chip-mcd[aria-pressed="true"]:hover{background:var(--acc-mcd-bg);border-color:var(--acc-mcd);color:var(--ink)}
.wl-page .chip-otp[aria-pressed="true"],.wl-page .chip-otp[aria-pressed="true"]:hover{background:var(--acc-otp-bg);border-color:var(--acc-otp);color:var(--ink)}
.wl-page .chip-mcd[aria-pressed="true"] .n,.wl-page .chip-otp[aria-pressed="true"] .n{color:var(--ink)}
.wl-page .chip-mcd::before,.wl-page .chip-otp::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:var(--acc-mcd);vertical-align:0}
.wl-page .chip-otp::before{background:var(--acc-otp)}