/* Buenos Aires (Lima spec §3) in Radar's instrument look: chart paper, ink, one amber accent, Barlow.
   Phone (< 900 px): full-screen map, a three-state sheet (app/ba/sheet.js sets its height) above a bottom bar with
   the views. Laptop (≥ 900 px): the panel docked right (half the window, the grip drags it), the views as its tabs. */
body[data-tab="ba"]{
  --paper:#eef2f3;--panel:#fbfcfd;--ink:#0e2238;--slate:#4a5b6e;--line:#cbd5dc;--amber:#ffb703;--amber-d:#8a5d00;
  --open:#0f7a4f;--shut:#9b2c2c;--ev:#00838f;--ev-d:#006670;--ev-bg:#e6f3f4;--cond:'Barlow Condensed',system-ui,sans-serif;--ed:Newsreader,Georgia,serif;
  --lw:0px;--ph:calc(min(40vh,340px) + 56px);--bar:calc(56px + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--ink);font:.9375rem/1.4 Barlow,system-ui,sans-serif;
  :focus-visible{outline:3px solid var(--amber);outline-offset:2px}
  a{color:var(--ink)}

  /* main.js caps the strip's width to the room left of this right edge */
  #tabs{top:max(8px,env(safe-area-inset-top));right:calc(var(--lw) + 8px);background:var(--ink);border:0;border-radius:10px;backdrop-filter:none;font-family:var(--cond)}
  #tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:#8fa2b5;font-size:14px;font-weight:500;padding:0 10px}
  #tabs a:hover{color:#fff}
  #tabs a[aria-current]{color:#fff;font-weight:700;box-shadow:inset 0 -3px var(--amber)}
  #tabs a i{display:none} /* the phone's bar glyphs (main.js): the strip shows the labels */

  /* The base's GPS is BA's one "locate" (spec §3): the shared locate control hides here. --ph: the sheet + bar. */
  .maplibregl-ctrl-group:has(.maplibregl-ctrl-geolocate){display:none}
  .maplibregl-ctrl-bottom-right{bottom:var(--ph);right:var(--lw)}

  /* ---------- the panel: phone sheet, laptop dock ---------- */
  .l-panel{position:fixed;z-index:20;left:0;right:0;bottom:calc(var(--bar) + var(--note,0px));height:min(40vh,340px);overflow:auto;overscroll-behavior:contain;background:var(--panel);
    border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(14,34,56,.16);transition:height .25s cubic-bezier(.2,.8,.2,1);
    padding:0 max(14px,env(safe-area-inset-right)) 16px max(14px,env(safe-area-inset-left))}
  .l-panel[data-sheet="peek"]{overflow:hidden}
  .l-panel.l-dragging{transition:none}
  /* the shell's lasting storage notice (main.js) sits between the phone's bar and its sheet: --note (ba.js) is its room */
  @media (max-width:899.98px){ #notice{bottom:calc(var(--bar) + 4px)} }
  .l-handle{position:sticky;z-index:2;top:0;display:grid;place-items:center;width:calc(100% + 28px);height:44px;margin:0 -14px;background:var(--panel);touch-action:none;cursor:grab}
  .l-handle[hidden]{display:none} /* a page holds the sheet at full (app/tabs/ba.js) */
  .l-handle::before{content:"";width:44px;height:5px;border-radius:3px;background:var(--line)}
  /* phone: the head shows only the sample-data badge (spec §5; the strip names the tab), none without it */
  @media (max-width:899.98px){ .l-head{display:flex;justify-content:flex-end;padding-top:8px} .l-head:has(> .l-tag[hidden]),.l-title{display:none} }
  /* the views: a bottom bar on the phone, with the Base dialog's button (events spec §3: Radar · What's on · BA list ·
     Barrios · Base). A container, so large text (rem) in a narrow bar sets the labels smaller, on two lines. */
  .l-views{position:fixed;z-index:22;left:0;right:0;bottom:0;height:var(--bar);display:grid;grid-template-columns:repeat(5,1fr);container-type:inline-size;
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--panel);border-top:1px solid var(--line)}
  .l-views button{min-height:44px;padding:0 2px;font:600 .9375rem/1.05 var(--cond);color:var(--slate);position:relative}
  @container (max-width:20rem){ .l-views button{font-size:.8125rem;overflow-wrap:anywhere} } /* a 390 px bar from ~120 % text */
  .l-views button[aria-pressed="true"]{color:var(--ink)}
  .l-views button[aria-pressed="true"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--amber)}
  .l-badge{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 5px;border-radius:10px;background:var(--amber);color:var(--ink);font:700 .75rem Barlow}
  .l-grip{display:none} /* the phone's sheet has its own handle */
  @media (min-width:900px){
    /* half the window, or the grip's saved width (--lu, app/tabs/ba.js), in [420 px, the window − 480 px] (spec §3) */
    --lw:max(420px,min(var(--lu,50vw),calc(100vw - 480px)));--ph:0px;--bar:0px;
    .l-panel{top:0;left:auto;bottom:0;width:var(--lw);height:auto;border-radius:0;border-left:1px solid var(--line);box-shadow:-6px 0 24px rgba(14,34,56,.12);transition:none;padding:0 20px 20px;container:l-panel/inline-size}
    .l-handle{display:none}
    .l-head{display:flex;align-items:center;gap:10px;padding-top:16px}
    .l-views{position:sticky;top:0;height:auto;display:flex;margin:10px -20px 0;padding:0 20px;border-top:0;border-bottom:1px solid var(--line)}
    .l-views button{flex:1;min-height:48px}
    .l-views button[aria-pressed="true"]::before{top:auto;bottom:-1px;border-radius:3px 3px 0 0}
    /* Compare's table (L3): the panel widens, the map keeps ≥ 480 px (spec §3); a wider saved width wins */
    &.l-wide{--lw:max(420px,min(max(860px,var(--lu,50vw)),calc(100vw - 480px)))}
    /* the grip on the panel's left edge: a 44 × 88 px target around its bar, the whole edge draggable */
    .l-grip{display:block;position:fixed;z-index:21;top:0;bottom:0;right:calc(var(--lw) - 8px);width:16px;cursor:col-resize;touch-action:none}
    .l-grip::before{content:"";position:absolute;top:50%;left:-14px;right:-14px;height:88px;margin-top:-44px}
    .l-grip::after{content:"";position:absolute;top:50%;left:5px;width:6px;height:56px;margin-top:-28px;border-radius:3px;background:var(--ink);box-shadow:0 0 0 2px #fff;forced-color-adjust:none}
    .l-grip:hover::after,.l-grip.l-on::after{background:var(--amber-d)}
    .l-grip:focus-visible{outline:0}
    .l-grip:focus-visible::after{outline:3px solid var(--amber);outline-offset:2px}
  }
  .l-title{margin:0;font:700 1.5rem/1.1 var(--cond)}
  .l-tag{font:600 .75rem var(--cond);text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:10px;background:var(--amber);color:var(--ink)}

  /* ---------- reach instrument ---------- */
  .l-reach{padding:4px 0 8px}
  .l-read{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:10px}
  .l-big{grid-row:1/3;margin:0;font:700 2.5rem/1 var(--cond);font-variant-numeric:tabular-nums}
  .l-big small{font:600 1.0625rem var(--cond);color:var(--slate);margin-left:4px}
  .l-count{grid-column:1;margin:2px 0 0;font:600 .875rem var(--cond);color:var(--slate)}
  .l-count b{color:var(--ink);font-size:1rem}
  .l-mode{grid-column:2;grid-row:1/3;display:inline-flex;border:1.5px solid var(--ink);border-radius:23px;padding:1px}
  .l-mode .l-chip{border:0;min-width:64px}
  .l-read>.l-btn{grid-column:2;justify-self:end;margin-top:6px}
  .l-hist{position:relative;height:56px;margin-top:10px}
  .l-bars{position:absolute;inset:0 0 2px;display:flex;align-items:flex-end;gap:2px;pointer-events:none}
  .l-bars i{flex:1;min-height:2px;background:#c3cdd4;border-radius:1px}
  .l-bars i.in{background:var(--ink)}
  .l-hist input{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:ew-resize}
  .l-hist input::-webkit-slider-runnable-track{height:100%;background:none}
  .l-hist input::-moz-range-track{height:100%;background:none}
  .l-hist input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:56px;border:0;background:linear-gradient(90deg,transparent 9px,var(--amber) 9px 15px,transparent 15px)}
  .l-hist input::-moz-range-thumb{width:24px;height:56px;border:0;border-radius:0;background:linear-gradient(90deg,transparent 9px,var(--amber) 9px 15px,transparent 15px)}
  .l-hist input:focus-visible{outline:none}
  .l-hist:focus-within{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
  .l-ticks{display:flex;gap:2px;font:500 .75rem var(--cond);color:var(--slate)}
  .l-ticks span{flex:1;text-align:center}

  /* ---------- chips: one scrolling row on the phone, wrapped rows on the laptop ---------- */
  /* position: the .sr texts (absolute) of the price chips stay inside this scroller, not the panel's */
  .l-filters{position:relative;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:6px 14px;border-top:1px solid var(--line)}
  .l-filters::-webkit-scrollbar{display:none}
  .l-filters > div{display:flex;gap:6px;flex:none}
  .l-filters > div + div{padding-left:6px;border-left:1px solid var(--line)}
  @media (min-width:900px){
    .l-filters{display:block;overflow:visible;margin:0;padding:8px 0}
    .l-filters > div{flex-wrap:wrap;margin:0 0 6px}
    .l-filters > div + div{padding:0;border:0}
  }
  .l-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border-radius:22px;border:1.5px solid var(--line);background:#fff;font:600 .9375rem var(--cond);white-space:nowrap;min-width:44px;justify-content:center}
  .l-chip:hover{border-color:var(--slate)}
  .l-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .l-chip i{width:9px;height:9px;border-radius:50%}

  /* ---------- rows ---------- */
  .l-rows{list-style:none;margin:0 -14px;padding:0}
  .l-row{display:flex;border-bottom:1px solid #e3e8ec}
  .l-row > a{flex:1;min-width:0;display:flex;gap:12px;padding:8px 0 8px 14px;text-decoration:none;line-height:1.3}
  .l-row > a:hover,.l-row:focus-within > a{background:#f1f5f7}
  .l-min{flex:none;width:3.875rem;display:flex;flex-direction:column;border-right:3px solid var(--g);padding-right:8px;font:600 .8125rem var(--cond);color:var(--slate)}
  .l-min b{font:700 1.75rem/1 var(--cond);color:var(--ink);font-variant-numeric:tabular-nums}
  .l-min small{font:500 .78125rem var(--cond)}
  .l-main{min-width:0;display:flex;flex-direction:column}
  .l-name{font-weight:600;font-size:1rem;line-height:1.25}
  .l-meta,.l-rank,.l-beyond{font-size:.84375rem;color:var(--slate)}
  .l-line{display:flex;flex-wrap:wrap;column-gap:10px}
  /* stars (spec §2, 2026-10-16): the number in ink (≥ 14:1 on the row and page, hovered too), then the five glyphs
     with s/5 of their width filled, so a half star draws half. Filled amber-d is ≥ 5.2:1 on the row and page; the
     empty part, --line, is 3.9:1 against the filled. */
  .l-stars{flex:none;font-size:.875rem;white-space:nowrap}
  .l-stars b{font:700 .9375rem var(--cond);color:var(--ink)}
  .l-stars::after{content:"★★★★★";margin-left:4px;background:linear-gradient(90deg,var(--amber-d) calc(var(--s) * 20%),var(--line) 0);-webkit-background-clip:text;background-clip:text;color:transparent}
  @media (forced-colors:active){ .l-stars::after{content:none} } /* the gradient is dropped: five solid glyphs would read 5; the number stays */
  .l-beyond{color:var(--amber-d);font-weight:600}
  .l-open{font-size:.84375rem;font-weight:500;display:flex;align-items:center;gap:5px;color:var(--slate)}
  .l-open::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
  .l-open[data-s="open"]{color:var(--open)}.l-open[data-s="closed"]{color:var(--shut)}
  .l-price{font-weight:600;color:var(--ink)}
  .l-chip .l-price{color:inherit} /* a pressed price chip is white on ink */
  .l-keep{flex:none;width:52px;min-height:44px;font-size:1.375rem;color:var(--slate)} /* ≥ 3:1 on the row (was 2.37:1) */
  .l-keep[aria-pressed="true"]{color:var(--amber-d)}
  .l-keep svg,.l-save svg{flex:none;vertical-align:-.125em}
  .l-keep[aria-pressed="true"] path,.l-save[data-saved="true"] path{fill:currentColor} /* saved: a filled bookmark */
  .l-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:22px;border:1.5px solid var(--ink);background:#fff;font:600 .9375rem var(--cond);text-decoration:none;color:var(--ink)}
  .l-btn[data-act="stretch"]{background:var(--amber);border-color:var(--amber-d)}
  .l-save[data-saved="true"]{background:var(--amber);border-color:var(--amber-d)}
  .l-empty{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;font:600 .9375rem var(--cond);color:var(--slate)}
  .l-note{color:var(--slate);margin:8px 0}
  .l-h{margin:4px 0 8px;font:700 1.5rem/1.1 var(--cond)}
  .l-h small{font:600 .9375rem var(--cond);color:var(--slate);margin-left:6px}
  /* ---------- Barrios (L3): the index, colour-by and Compare, in Barrios' editorial voice ---------- */
  .l-metrics{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
  .l-ramp{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:500 .78125rem var(--cond);color:var(--slate)}
  .l-ramp i{flex:0 1 10rem;height:8px;border-radius:4px;background:linear-gradient(90deg,#ede6c8,#7fa6a0,#123b4e)}
  .l-barrios{list-style:none;margin:4px 0 0;padding:0}
  .l-brow{display:flex;border-top:1px solid var(--line)}
  .l-brow > a{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"sw bn bv" "sw bd bv";column-gap:10px;align-items:center;min-height:44px;padding:8px 0;text-decoration:none}
  .l-brow > a:hover .l-bn{text-decoration:underline}
  .l-sw{grid-area:sw;width:14px;height:2.25rem;border-radius:4px;border:1px solid rgba(14,34,56,.25)}
  .l-bn{grid-area:bn;font:500 1.25rem/1.15 var(--ed)}
  .l-bd{grid-area:bd;font-size:.8125rem;color:var(--slate)}
  .l-bv{grid-area:bv;text-align:right;font:700 1.125rem/1.1 var(--cond);font-variant-numeric:tabular-nums}
  .l-bv small{display:block;font:500 .75rem var(--cond);color:var(--slate)}
  .l-pick{flex:none;width:52px;min-height:44px;margin:4px 0 4px 6px;border-radius:10px;border:1.5px solid var(--ink);background:#fff;font:700 1.25rem var(--cond);color:var(--ink)}
  .l-pick[aria-pressed="true"]{background:var(--ink);color:#fff}
  .l-pick[aria-disabled="true"]{border-color:var(--line);color:#9aa8b4;cursor:not-allowed}
  .l-cmpbox{container-type:inline-size;margin:4px 0 12px}
  .l-h3{margin:6px 0 4px;font:700 1.125rem var(--cond)}
  .l-cmp{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .l-cmp th,.l-cmp td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:600}
  .l-cmp th[scope="row"]{width:8.5rem;font:600 .875rem var(--cond);color:var(--slate)}
  .l-cmp thead a{display:inline-flex;align-items:center;min-height:44px;font:500 1.25rem/1.1 var(--ed);overflow-wrap:anywhere} /* 3 names at 200 % text in 390 px */
  .l-best{font:700 .6875rem var(--cond);text-transform:uppercase;letter-spacing:.04em;background:var(--amber);color:var(--ink);border-radius:4px;padding:1px 5px}
  .l-verdict{margin:10px 0 0;padding-left:1.1em;font:1.0625rem/1.5 var(--ed)}
  /* a narrow table (the phone at any width, a 420 px panel) stacks each metric's label above the 2–3 value columns (spec §3) */
  @container (max-width:560px){
    .l-cmp,.l-cmp thead,.l-cmp tbody{display:block}
    .l-cmp tr{display:grid;grid-template-columns:repeat(var(--n),1fr)}
    .l-cmp th[scope="row"]{grid-column:1/-1;width:auto;border-bottom:0;padding-bottom:0}
    .l-cmp thead td{display:none}
  }
  @media (max-width:899.98px){
    .l-cmp,.l-cmp thead,.l-cmp tbody{display:block}
    .l-cmp tr{display:grid;grid-template-columns:repeat(var(--n),1fr)}
    .l-cmp th[scope="row"]{grid-column:1/-1;width:auto;border-bottom:0;padding-bottom:0}
    .l-cmp thead td{display:none}
  }
  .l-error p{font-weight:600;margin:12px 0 8px}

  /* ---------- What's on (events spec §3): range chips, the calendar strip, event rows, freshness ---------- */
  .l-ranges{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 4px}
  /* the strip scrolls sideways inside itself (never the page); a 44 px button per day: weekday, date, a bar for the dated
     events (--n) and a faint baseline for weekly nights; the month's name stands where a month starts */
  .l-days{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;margin:0 -14px;padding:2px 14px 6px}
  .l-month{flex:none;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);padding:0 2px;font:700 .6875rem var(--cond);text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
  .l-day{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;min-width:44px;min-height:44px;padding:4px 4px 9px;border:1.5px solid transparent;border-radius:10px;background:none;color:var(--ink);font:500 .75rem/1.1 var(--cond)}
  .l-day b{font:700 1.125rem/1.1 var(--cond);font-variant-numeric:tabular-nums}
  .l-day:hover{border-color:var(--line)}
  .l-day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .l-bar{display:block;width:8px;height:min(calc(var(--n) * 4px),20px);margin-top:auto;border-radius:2px;background:var(--ev)}
  .l-base{position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:1px;background:var(--ev);opacity:.45}
  .l-day[aria-pressed="true"] .l-bar,.l-day[aria-pressed="true"] .l-base{background:#fff}
  @media (forced-colors:active){ .l-bar,.l-base{background:CanvasText} }
  /* event rows are list rows: the minutes on the left (empty for "Venue TBA"), the events colour as their rule */
  .l-evrow{--g:var(--ev)}
  .l-time{font:700 .9375rem var(--cond);font-variant-numeric:tabular-nums}
  .l-onnow,.l-every,.l-ann{font:700 .75rem/1.6 var(--cond);text-transform:uppercase;letter-spacing:.04em}
  .l-onnow{padding:0 5px;border-radius:4px;background:var(--ev-d);color:#fff}
  .l-every{color:var(--ev-d)}
  .l-ann{color:var(--amber-d)}
  .l-fresh{margin:10px 0 0}
  /* the tonight mark on a venue row (On here, events spec §3 C) */
  .l-tonight{font-size:.84375rem;font-weight:600;color:var(--ev-d)}
  @media (min-width:900px){ .l-rows{margin:0 -20px} .l-row > a{padding-left:20px} .l-filters + *{margin-top:0} .l-days{margin:0 -20px;padding:2px 20px 6px} }

  /* ---------- venue page ---------- */
  .l-page{outline:0;padding-top:6px}
  .l-close{min-height:44px;padding:0 18px;border-radius:22px;border:1.5px solid var(--ink);background:#fff;font:600 .9375rem var(--cond)}
  .l-photos{position:relative;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:10px 0 0}
  .l-photos figure{flex:none;width:calc(100% - 28px);margin:0;scroll-snap-align:start}
  .l-photos figure:only-child{width:100%}
  .l-photos img,.l-photos .img-ph{display:grid;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;background:#dde3e7}
  .l-photos figcaption{font-size:.78125rem;color:var(--slate);padding-top:4px}
  .l-ph{display:block;width:100%;border-radius:10px;cursor:zoom-in}
  .l-ph:focus-visible{outline-offset:-3px} /* inside the strip, which clips what overflows it */
  .l-credits{display:none;font-size:.78125rem;color:var(--slate);margin:4px 0 0}
  /* a panel ≥ 640 px (its content box: less 2 × 20 px padding and the 1 px border) shows every photo at once in a fixed
     frame (spec §3, 2026-10-17): one big and the rest stacked beside it; the credits line replaces the captions */
  @container l-panel (min-width:599px){
    .l-photos{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:minmax(0,1fr);gap:6px;overflow:visible;aspect-ratio:16/9}
    .l-photos figure{width:auto;min-height:0}
    .l-ph,.l-photos img,.l-photos .img-ph{height:100%;aspect-ratio:auto;border-radius:6px}
    .l-photos figcaption{display:none}
    .l-photos[data-n="4"] figure:first-child{grid-row:span 3}
    .l-photos[data-n="3"] figure:first-child{grid-row:span 2}
    .l-photos[data-n="2"]{grid-template-columns:1fr 1fr;aspect-ratio:2/1}
    .l-photos[data-n="1"]{grid-template-columns:1fr;aspect-ratio:3/2}
    .l-credits{display:block}
    .l-page[data-kind="venue"] .l-pg > :not(.l-photos,.l-credits,.l-kick,h1,.l-sub){max-width:62ch}
  }
  .l-cr a{color:var(--slate)}
  /* inline links on a page are still 44 px targets */
  .l-cr a,.l-unk a,.l-page[data-kind="event"] a[href^="#ba/venue/"]{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .l-kick{margin:14px 0 4px;color:var(--slate);font:600 .8125rem var(--cond);text-transform:uppercase;letter-spacing:.05em}
  .l-page h1{margin:0;font:700 1.75rem/1.12 var(--cond);outline:0;text-wrap:balance}
  .l-sub{margin:2px 0 0;font-weight:600}
  .l-page .l-rank{margin:4px 0 0}
  .l-page .l-open{font-size:1rem;margin:10px 0}
  .l-gauge{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0 2px;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden}
  .l-gauge div{padding:8px 10px;border-right:1px solid var(--line)}
  .l-gauge div:last-child{border-right:0}
  .l-gauge dt{font:600 .78125rem var(--cond);color:var(--slate)}
  .l-gauge dd{margin:0;font:700 1.375rem/1.1 var(--cond);font-variant-numeric:tabular-nums}
  .l-small{font-size:.8125rem;color:var(--slate);margin:4px 0}
  .l-asof{font-size:.8125rem;font-weight:400;color:var(--slate);white-space:nowrap} /* "checked 24 Oct" beside a price (BA spec §2) */
  .l-page h3{font:700 1.0625rem var(--cond);margin:18px 0 6px}
  .l-hours{width:100%;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
  .l-hours th,.l-hours td{padding:5px 6px;border-bottom:1px solid #e3e8ec;text-align:left;font-weight:400}
  .l-hours th{width:6em;color:var(--slate)}
  .l-hours tr.now th,.l-hours tr.now td{background:#fff4d6;font-weight:600;color:var(--ink)}
  .l-hours small{color:var(--amber-d)}
  .l-dl{display:grid;grid-template-columns:minmax(7em,auto) 1fr;gap:5px 14px;margin:0;font-size:.90625rem}
  .l-dl dt{color:var(--slate)}.l-dl dd{margin:0;overflow-wrap:anywhere}
  .l-tips{margin:0;padding-left:1.1em}
  .l-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

  /* ---------- the event page and On here (events spec §3) ---------- */
  .l-ph{font:700 1.0625rem var(--cond);margin:18px 0 6px}
  .l-page .l-when .l-big{margin:10px 0 4px;font-size:1.75rem;line-height:1.1}
  .l-ended{color:var(--shut)}
  .l-dates,.l-src{margin:4px 0;padding-left:1.1em}
  .l-src a{display:inline-flex;align-items:center;min-height:44px}
  p.l-ann{font:600 .9375rem/1.4 Barlow,system-ui,sans-serif;text-transform:none;letter-spacing:0}
  .l-page .l-evn{padding:6px 10px;border-left:4px solid var(--ev);border-radius:4px;background:var(--ev-bg);font-weight:600}
  .l-onhere{list-style:none;margin:0;padding:0}
  .l-onhere li{border-bottom:1px solid #e3e8ec}
  .l-onhere a{display:flex;align-items:center;min-height:44px}
  .l-wonotes{list-style:none;margin:0 0 8px;padding:0 0 0 12px;border-left:4px solid var(--ev);border-radius:4px;background:var(--ev-bg)}
  .l-wonotes a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-weight:600} /* 44 × 44 px */

  /* ---------- the barrio page (L3): Barrios' editorial style, Newsreader ---------- */
  .l-page[data-kind="barrio"] h1{font:500 2.5rem/1.05 var(--ed);letter-spacing:-.01em}
  .l-dek{margin:6px 0 4px;font:italic 400 1.25rem/1.35 var(--ed)}
  .l-lede{margin:14px 0 0;font:400 1.0625rem/1.6 var(--ed);max-width:62ch}
  .l-h2{margin:22px 0 6px;padding-top:8px;border-top:2px solid var(--ink);font:700 1.25rem var(--cond)}
  .l-h2 small{margin-left:6px;font:500 .875rem var(--cond);color:var(--slate)}
  /* label and value on one line, the track under them: it holds at 200 % text in a 390 px sheet */
  .l-strip{display:grid;grid-template-columns:1fr auto;grid-template-areas:"sl sv" "trk trk" "why why";column-gap:10px;align-items:end;margin-top:6px}
  .l-sl{grid-area:sl;font:600 .875rem var(--cond)}
  .l-sv{grid-area:sv;text-align:right;font:700 1rem/1.1 var(--cond);font-variant-numeric:tabular-nums}
  .l-sv small{margin-left:4px;font:500 .75rem var(--cond);color:var(--slate)}
  .l-trk{grid-area:trk;position:relative;height:28px;margin:0 10px}
  .l-trk::before{content:"";position:absolute;left:-10px;right:-10px;top:13px;height:2px;background:var(--line)}
  .l-trk i{position:absolute;top:9px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#b9c3cb}
  .l-trk b{position:absolute;top:4px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--amber);border:2.5px solid #fff;box-shadow:0 0 0 1.5px var(--ink)}
  /* the sourced note under each metric: a native disclosure, its summary a 44 px target */
  .l-why{grid-area:why;margin:0 0 4px}
  .l-why summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;font:600 .875rem var(--cond);color:var(--slate)}
  .l-why summary::-webkit-details-marker{display:none}
  .l-why summary::before{content:"▸";color:var(--ink)}
  .l-why[open] summary::before{content:"▾"}
  .l-why p{margin:0 0 8px;font:1rem/1.55 var(--ed);max-width:62ch;overflow-wrap:anywhere} /* the notes cite long URLs */

  /* ---------- on the map ---------- */
  .l-ring{display:grid;place-items:center;width:44px;height:44px;cursor:ew-resize;touch-action:none}
  .l-ring span{display:grid;place-items:center;min-width:34px;min-height:26px;padding:0 6px;border-radius:13px;background:var(--amber);border:2px solid var(--ink);font:700 .8125rem var(--cond);color:var(--ink);box-shadow:0 2px 6px rgba(14,34,56,.35)}
  /* the dots' DOM twins (app/ba/dots.js): a transparent 44 px target over each canvas dot */
  .l-dot{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
  .l-dot[hidden]{display:none}
  .l-dot:focus-visible{outline:3px solid var(--amber);outline-offset:-6px}
  .l-tip .maplibregl-popup-content{font:.875rem Barlow,system-ui,sans-serif;color:var(--ink);padding:6px 10px;border-radius:8px;box-shadow:0 4px 14px rgba(14,34,56,.25)}
  .l-tip .maplibregl-popup-content:has(img){width:220px;overflow:hidden}
  .l-tip img{display:block;width:calc(100% + 20px);height:120px;margin:-6px -10px 6px;object-fit:cover;background:#e6d6b8}

  /* ---------- time (L2c) ---------- */
  /* The "Plan for…" chip floats top left over the map (spec §3), below the tab strip when the strip takes a row of its
     own (main.js placeStrip; the chip is data-strip-avoid); the notice sits under it. */
  .l-top{position:fixed;z-index:21;top:calc(max(8px,env(safe-area-inset-top)) + var(--strip-row,0px));left:max(8px,env(safe-area-inset-left));
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100vw - var(--lw) - 16px);pointer-events:none}
  .l-top > *{pointer-events:auto} /* the stack's own box (its gaps, its width) is the map's */
  .l-top[hidden]{display:none}
  .l-clock,.l-basebtn{min-height:44px;padding:0 14px;border-radius:22px;border:1.5px solid var(--ink);background:var(--panel);color:var(--ink);font:700 .9375rem var(--cond);font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(14,34,56,.18)}
  /* native dialogs (spec §3: pickers are <dialog>s with focus return) */
  .l-dlg{width:min(calc(100vw - 24px),28rem);max-height:calc(100dvh - 24px);overflow:auto;padding:18px 20px 16px;border:0;border-radius:16px;background:var(--panel);color:var(--ink);box-shadow:0 10px 40px rgba(14,34,56,.35)}
  .l-dlg::backdrop{background:rgba(14,34,56,.45)}
  .l-dlg h2{margin:0 0 4px;font:700 1.5rem/1.1 var(--cond)}
  .l-dlg h3{margin:14px 0 0;font:700 1.0625rem var(--cond)}
  /* the photo viewer (spec §3, 2026-10-17): the whole window, the photo at its largest within it */
  .l-lb{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:auto;background:rgba(8,14,22,.96);color:#fff}
  .l-lb::backdrop{background:rgba(8,14,22,.6)}
  .l-lbsay{top:0;margin:0} /* the live region, at the top: nothing below the viewer to scroll to */
  .l-lbv{height:100%;display:grid;grid-template:auto minmax(0,1fr) auto auto/minmax(0,1fr)}
  .l-lb header{display:flex;align-items:center;gap:12px;padding:10px 16px;font:600 1rem var(--cond)}
  .l-lb h2{flex:1;min-width:0;margin:0;font:700 1.125rem var(--cond)}
  .l-x{min-height:44px;padding:0 18px;border-radius:22px;border:1.5px solid #fff;font:600 .9375rem var(--cond)}
  .l-stage{position:relative;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:0 64px}
  .l-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px} /* the stage's room: the caption and thumbnails keep theirs at any text size */
  @media (max-width:899.98px){ .l-stage{padding:0} } /* the phone's photo takes the full width, under prev/next */
  .l-nav{position:absolute;top:50%;left:10px;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:rgba(255,255,255,.14);font-size:1.5rem}
  .l-nav + .l-nav{left:auto;right:10px}
  .l-nav:hover{background:rgba(255,255,255,.28)}
  .l-cap{margin:0;padding:4px 16px 0;text-align:center;font-size:.875rem;color:#dbe4ec}
  .l-lb .l-cr a{color:#fff}
  .l-thumbs{display:flex;justify-content:center;gap:8px;padding:6px 16px 14px}
  .l-thumbs button{flex:none;width:84px;height:56px;border-radius:4px;border:2px solid transparent;opacity:.6}
  .l-thumbs [aria-current]{opacity:1;border-color:var(--amber)}
  .l-thumbs img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
  .l-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
  .l-end{justify-content:flex-end;margin-top:16px}
  .l-pri{background:var(--ink);color:#fff}
  .l-fields{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
  .l-fields label{display:grid;gap:4px;font:600 .875rem var(--cond);color:var(--slate)}
  .l-fields select,.l-fields input{min-height:44px;padding:0 10px;border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:500 1rem Barlow,system-ui,sans-serif}

  /* ---------- base (L2c) ---------- */
  .l-notice{margin:0;padding:8px 12px;border-radius:10px;background:var(--ink);color:#fff;font-size:.875rem;max-width:22rem;box-shadow:0 2px 8px rgba(14,34,56,.25)}
  /* the base's status chip under the clock (spec §3), on every width; the phone's bottom bar also has Base */
  .l-basebtn{font-weight:600;text-align:left}
  /* a full phone sheet (a page, or the list pulled up) covers the map: the chip steps aside, the clock stays. Its box
     stays: the sheet's peek and half are measured under .l-top (app/ba/sheet.js), whatever the state. */
  @media (max-width:899.98px){ .l-panel[data-sheet="full"] ~ .l-top .l-basebtn{visibility:hidden} }
  @media (min-width:900px){ .l-basetab{display:none} }
  /* the first-run setup card (spec §3) */
  .l-setup{margin:8px 0;padding:10px 12px 12px;border:1.5px dashed var(--amber-d);border-radius:12px;background:#fff8e6}
  .l-setup h3{margin:0;font:700 1.125rem var(--cond)}
  .l-setup p{margin:2px 0 0;font-size:.875rem;color:var(--slate)}
  .l-bstat{margin:0;font-weight:600}
  /* the base's pin: a 44 px drag target over the drawn origin; "Set base here" popups */
  .l-pin{width:44px;height:44px;cursor:grab;touch-action:none}
  .l-tap .maplibregl-popup-content{padding:6px;border-radius:12px;box-shadow:0 4px 14px rgba(14,34,56,.25)}
  /* "Radar from here": the effective origin's banner, part of the phone's peek */
  .l-from{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0;padding:6px 6px 6px 12px;border-radius:12px;background:var(--ink);color:#fff;font:600 .9375rem var(--cond)}
  .l-from[hidden]{display:none}
  .l-from .l-btn{background:var(--amber);border-color:var(--amber)}
  /* the city-moment notices (events spec §3 E): a calm banner at the top of the panel or sheet, in every view; each
     notice's Dismiss a 44 px × at its end */
  .l-evnote{margin:8px 0 0;padding:0 0 0 12px;border-left:4px solid var(--ev);border-radius:4px;background:var(--ev-bg)}
  .l-evnote[hidden]{display:none}
  .l-evnote .l-evn{position:relative;margin:0;padding:4px 44px 4px 0;font-size:.875rem;line-height:1.4}
  .l-evnote .l-evn + .l-evn{border-top:1px solid #c9e3e6}
  .l-evnote a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;margin:-12px 0;font-weight:600} /* 44 × 44 px; the negative margin keeps the line tight */
  .l-x{position:absolute;top:50%;margin-top:-22px;right:0;width:44px;height:44px;border:0;background:none;font-size:1.375rem;color:var(--slate)}
  .l-evnote > .l-btn{margin:0 0 6px}
}