/* ═══════════════════════════════════════════════════════════════════════════
   panel-kit.css — the Baseline look, shared by poi-geopulse.html and
   street-geopulse.html. Lifted out of poi-geopulse.html on 2026-10-02 so the
   two pages cannot drift apart: a colour or a bar height changed in one of
   them is changed in both.

   Page-specific rules stay in that page's own <style> block.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   GeoPulse venue panel — the "Baseline" design (inbox/design/DESIGN.md).

   This page is the first surface on the new grammar. The rest of the product is
   on the older dark theme and on the sheet grammar before it; nav.js is written
   to take the tokens of whichever page it lands on, which is why the menu looks
   native here without being touched.

   Two rules run through everything below and are worth stating once:
     1. Venue against Ghent, everywhere a citywide figure exists.
     2. The count behind every figure is on the page. Never a share without
        its basis.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Tokens: light ---------- */
:root{
  --bg:#EDF0F2;
  --surface:#FFFFFF;
  --surface-2:#F5F7F8;
  --ink:#101C25;
  --ink-2:#37444F;
  --muted:#5B6772;          /* 5.1:1 on --bg, 5.8:1 on --surface */
  --rule:#DFE4E8;
  --rule-strong:#C3CBD1;
  --venue:#007A9A;          /* Leie petrol: the venue, over-index, growth */
  --amber:#B87A0A;          /* second categorical slot (Female, gender only) */
  --copper:#BE5C28;         /* under-index, decline, locals */
  --baseline:#2C3943;       /* the Ghent reference tick */
  --prev:#8995A0;           /* previous period, neutral segment */
  --shadow:0 1px 2px rgba(16,28,37,.06), 0 8px 24px rgba(16,28,37,.08);
  --focus:#007A9A;
  --tilefilter:none;
  color-scheme:light;
}
/* ---------- Tokens: dark (system) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1116; --surface:#121A21; --surface-2:#18222A;
    --ink:#E7EDF1; --ink-2:#B9C4CC; --muted:#8E9BA6;
    --rule:#233039; --rule-strong:#33424D;
    --venue:#1C9FB5; --amber:#BF8620; --copper:#CF6F3E;
    --baseline:#D3DCE2; --prev:#6C7985;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --focus:#4CC3D6;
    /* The basemap has no dark variant without a CARTO key (see basemap.js), so
       the tiles are turned rather than swapped. Inverting alone makes water
       orange; the hue rotation puts it back. */
    --tilefilter:invert(1) hue-rotate(180deg) saturate(.62) brightness(.86) contrast(1.05);
    color-scheme:dark;
  }
}
/* ---------- Tokens: dark (explicit) ---------- */
:root[data-theme="dark"]{
  --bg:#0B1116; --surface:#121A21; --surface-2:#18222A;
  --ink:#E7EDF1; --ink-2:#B9C4CC; --muted:#8E9BA6;
  --rule:#233039; --rule-strong:#33424D;
  --venue:#1C9FB5; --amber:#BF8620; --copper:#CF6F3E;
  --baseline:#D3DCE2; --prev:#6C7985;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --focus:#4CC3D6;
  --tilefilter:invert(1) hue-rotate(180deg) saturate(.62) brightness(.86) contrast(1.05);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:400 13.5px/1.45 "Instrument Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.num{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:11.5px;letter-spacing:0}
a{color:var(--venue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{text-wrap:balance}

/* ---------- Top bar ---------- */
.topbar{
  height:52px; display:flex; align-items:center; gap:22px;
  padding:0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  background:var(--surface); border-bottom:1px solid var(--rule); position:relative; z-index:1200;
}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:16px;letter-spacing:-.015em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{flex:none}
.brand .sub{font-weight:400;color:var(--muted);font-size:13px;letter-spacing:0;padding-left:10px;border-left:1px solid var(--rule)}
.crumbs ol{list-style:none;display:flex;align-items:center;gap:0;margin:0;padding:0;font-size:13px;white-space:nowrap}
.crumbs li{display:flex;align-items:center;color:var(--muted)}
.crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.25px solid var(--rule-strong);border-top:1.25px solid var(--rule-strong);transform:rotate(45deg);margin:0 11px 0 9px}
.crumbs a{color:var(--muted);cursor:pointer}
.crumbs [aria-current]{color:var(--ink);font-weight:500;max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.theme{display:flex;border:1px solid var(--rule);border-radius:6px;padding:2px;gap:2px}
.theme button{width:28px;height:24px;border:0;background:transparent;border-radius:4px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.theme button:hover{color:var(--ink)}
.theme button[aria-checked="true"]{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}

/* nav.js renders the product menu into [data-nav]. Its own colours are written
   as var(--paper, var(--surface, …)) so it adopts these tokens untouched. */
[data-nav]{display:flex;align-items:center}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);height:calc(100vh - 52px);height:calc(100dvh - 52px)}
.map-pane{position:relative;overflow:hidden;background:var(--surface-2);border-right:1px solid var(--rule)}
#map{position:absolute;inset:0}
.leaflet-tile-pane{filter:var(--tilefilter)}
.leaflet-container{background:var(--surface-2);font:inherit}
.leaflet-control-attribution{background:color-mix(in srgb, var(--surface) 82%, transparent)!important;color:var(--muted)!important;font-size:10.5px}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-bar a{background:var(--surface);color:var(--ink);border-color:var(--rule)}
.leaflet-bar a:hover{background:var(--surface-2)}
.leaflet-tooltip{background:var(--ink);color:var(--surface);border:0;box-shadow:var(--shadow);font-size:12px;font-weight:500}
.leaflet-tooltip-top:before{border-top-color:var(--ink)}
.panel{overflow-y:auto;overflow-x:hidden;background:var(--surface);scroll-padding-top:56px}
.panel-in{padding:24px 36px 28px}

/* Map chrome */
.map-card{position:absolute;left:16px;top:16px;z-index:500;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;max-width:250px;font-size:12.5px;color:var(--ink-2);box-shadow:var(--shadow)}
.map-card strong{display:block;font-size:13px;color:var(--ink);font-weight:600;margin-bottom:6px}
.map-card .lg{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--muted)}
.lg-dot{width:9px;height:9px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--prev);flex:none}
.lg-co{width:9px;height:9px;border-radius:50%;background:#B87A0A;box-shadow:0 0 0 1.5px var(--surface);flex:none}
.lg-sel{width:11px;height:11px;border-radius:50%;background:var(--venue);flex:none}
.lg-faint{width:7px;height:7px;border-radius:50%;background:var(--prev);opacity:.45;flex:none}

/* ---------- Panel header ---------- */
.head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 32px;padding-bottom:20px}
.basisbox{align-self:end}
@media (min-width:1100px){ .head{grid-template-columns:minmax(0,1fr) auto} .basisbox .period{text-align:right} }
.back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:12px;background:none;border:0;padding:0;cursor:pointer}
.back:hover{color:var(--ink)}
h1{font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
.meta{margin:0;color:var(--ink-2);font-size:13.5px}
.meta-cat{margin-top:2px;color:var(--muted);font-size:12.5px}
.funnel{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:0}
.funnel div{padding:0 14px 0 0;margin-right:14px;border-right:1px solid var(--rule)}
.funnel div:last-child{border-right:0;margin-right:0;padding-right:0}
.funnel dt{font-size:11.5px;color:var(--muted);margin-bottom:1px}
.funnel dd{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.period{margin:12px 0 0;color:var(--muted)}

/* ---------- Tabs ---------- */
.tabbar{position:sticky;top:0;z-index:3;background:var(--surface);display:flex;align-items:stretch;border-bottom:1px solid var(--rule);margin:0 -36px;padding:0 36px}
[role="tablist"]{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
[role="tablist"]::-webkit-scrollbar{display:none}
[role="tab"]{
  border:0;background:none;padding:14px 0 12px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
[role="tab"]:hover{color:var(--ink)}
[role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--venue)}
[role="tab"]:focus-visible{outline-offset:-2px}

/* ---------- Tab content ---------- */
[role="tabpanel"]{padding-top:22px}
[role="tabpanel"]:focus-visible{outline:none}
/* Full width, by request 2026-09-30. DESIGN.md §3 caps the summary sentence at
   68ch for measure; on a 59%-wide panel that left a third of the line empty and
   made the sentence wrap earlier than the tables under it. */
.lede{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0 0 6px;letter-spacing:-.005em}
.lede b{color:var(--ink);font-weight:600}
.rulenote{color:var(--muted);margin:0 0 20px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;font-size:12.5px}
.key{display:inline-flex;align-items:center;gap:6px}
.k-bar{width:16px;height:8px;border-radius:0 2px 2px 0;background:var(--venue)}
.k-tick{width:2px;height:13px;background:var(--baseline)}
.k-ring{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--prev)}
.k-dot{width:9px;height:9px;border-radius:50%;background:var(--venue)}
.k-dot.c{background:var(--copper)}
.k-sw{width:10px;height:10px;border-radius:2px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px 36px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px 28px}
.blk{margin:0 0 30px;min-width:0}
.blk-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;border-bottom:1px solid var(--rule-strong);padding-bottom:7px;margin-bottom:2px}
.blk-h h3{white-space:nowrap;margin:0;font-size:14px;font-weight:600;letter-spacing:-.005em}
.blk-h .basis{color:var(--muted)}
.blk-d{color:var(--muted);font-size:12.5px;margin:8px 0 4px;max-width:70ch}
.blk-d b{color:var(--ink-2);font-weight:600}
.subh{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:12px 0 2px}
.empty{color:var(--muted);font-size:12.5px;margin:10px 0 0;max-width:70ch}

/* Segmented control, for "here / everywhere" on topics and keywords */
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.seg button{border:0;background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:500;padding:3px 9px;cursor:pointer}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}

/* Comparison table: venue bar + Ghent tick + index */
.ct-row{
  display:grid;grid-template-columns:minmax(92px,32%) minmax(48px,1fr) 42px 42px 89px;column-gap:12px;align-items:center;
  min-height:31px;border-bottom:1px solid var(--rule);padding:3px 0;
}
.ct.noidx .ct-row{grid-template-columns:minmax(92px,32%) minmax(48px,1fr) 42px 42px}
.ct.noidx .c-idx{display:none}
.ct-row:not(.ct-head):hover{background:var(--surface-2)}
.ct-head{min-height:24px;color:var(--muted);border-bottom-color:var(--rule);align-items:end;padding-bottom:4px}
.ct-head > span{font-size:11.5px}
.ct-row > .c-v{text-align:center}
.ct-head .scale{display:flex;justify-content:space-between}
.ct-l{min-width:0;color:var(--ink);overflow-wrap:anywhere}
.ct-l small{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:1px}
.ct-t{position:relative;height:18px;border-left:1px solid var(--rule-strong)}
.ct-t .bar{position:absolute;left:0;top:4px;height:10px;border-radius:0 3px 3px 0;background:var(--venue)}
.ct-t .tick{position:absolute;top:0;width:2px;height:18px;margin-left:-1px;background:var(--baseline);box-shadow:0 0 0 1px var(--surface)}
.r{text-align:right}
.mu{color:var(--muted)}
.c-idx{display:flex;align-items:center;justify-content:flex-end;gap:7px;font-weight:600}
.ct.short .ct-row{grid-template-columns:52px minmax(48px,1fr) 42px 42px 89px}
@media (min-width:1100px){ .grid2.lw{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} }
.persona .ct-row{align-items:start;padding:8px 0;grid-template-columns:minmax(140px,46%) minmax(48px,1fr) 42px 42px 89px}
.persona .ct-t,.persona .r{margin-top:1px}
.persona .ct-l b{font-weight:600}

/* mini index ruler — the same log scale as the big one */
.mr{position:relative;width:52px;height:12px;flex:none;
  background:linear-gradient(var(--rule-strong),var(--rule-strong)) 0 50%/100% 1px no-repeat}
.mr::before{content:"";position:absolute;left:40%;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:var(--baseline)}
.mr .stem{position:absolute;top:5px;height:2px;background:var(--venue)}
.mr .dot{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--venue);box-shadow:0 0 0 1.5px var(--surface)}
.mr.under .stem,.mr.under .dot{background:var(--copper)}

/* Plain bars (single series) */
.bl-row{display:grid;grid-template-columns:minmax(80px,40%) minmax(40px,1fr) 3.4em;column-gap:10px;align-items:center;min-height:27px;border-bottom:1px solid var(--rule)}
.bl-row:hover,.bl-row.hl{background:var(--surface-2)}
.bl-t{position:relative;height:14px;border-left:1px solid var(--rule-strong)}
.bl-t i{position:absolute;left:0;top:3px;height:8px;border-radius:0 3px 3px 0;background:var(--venue)}
.bl-t i.neutral{background:var(--prev)}
.bl-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-l small{color:var(--muted);font-size:12px}
.bl-l .cat{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Busyness heatmap: opening hours only, day totals and hourly averages */
.hm{display:grid;gap:3px;margin-top:12px;align-items:center}
.hm .d{font-size:12px;color:var(--muted)}
.hm .d.pk{color:var(--ink);font-weight:600}
.hm .c{height:26px;border-radius:2px;background:color-mix(in srgb, var(--venue) var(--v), var(--surface-2))}
.hm .c.pk{box-shadow:0 0 0 1.5px var(--ink);position:relative;z-index:1}
.hm .rt{display:flex;align-items:center;gap:6px;padding-left:6px}
.hm .rt i{display:block;height:8px;border-radius:0 2px 2px 0;background:var(--prev)}
.hm .rt span{font-size:11.5px;color:var(--muted)}
.hm .ct{height:30px;display:flex;align-items:flex-end;margin-top:6px}
.hm .ct i{display:block;width:100%;background:var(--prev);border-radius:2px 2px 0 0}
.hm .h{font-size:11.5px;color:var(--muted);text-align:center}
.hm .lab{font-size:11.5px;color:var(--muted)}
.hm-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:12px;font-size:12px;color:var(--muted)}
.hm-scale{display:inline-flex;align-items:center;gap:6px}
.hm-scale i{display:inline-block;width:80px;height:8px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb, var(--venue) 8%, var(--surface-2)),var(--venue))}
@media (max-width:560px){ .hm .c{height:22px} }

/* 100% stacked bars — gender, reviewer mix */
.stack-row.is-venue .stack-l{font-weight:600;color:var(--ink)}
.stack-row.is-venue .stack{height:28px}
.stack-row.is-base .stack-l{color:var(--muted)}
.stack-row.is-base .stack{height:14px;opacity:.55}
.stack-row.is-base .stack span{font-size:0}
/* 6.5em clipped "Kortrijksesteenweg" to "Kortrijksesteen" on the street page,
   and would do the same to any venue with a long name. Wider, and an ellipsis
   rather than a clip, so a truncated label at least announces itself. */
.stack-row{display:grid;grid-template-columns:minmax(0,9.5em) 1fr;gap:12px;align-items:center;margin:10px 0}
.stack-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack{display:flex;height:22px;gap:2px}
.stack span{height:100%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:#fff;overflow:hidden;white-space:nowrap;min-width:0}
.stack span:first-child{border-radius:3px 0 0 3px}
.stack span:last-child{border-radius:0 3px 3px 0}
.stack .s-venue{background:var(--venue)}
.stack .s-amber{background:var(--amber)}
.stack .s-prev{background:var(--prev)}
.stack .s-copper{background:var(--copper)}
:root[data-theme="dark"] .stack span{color:#0B1116}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stack span{color:#0B1116} }
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--ink-2);font-size:12.5px;margin-top:6px}

/* Dumbbells — previous window vs last.
   The "Posts" column ("76 → 517") came off by request 2026-09-30; the two
   counts survive on each row's hover, and the dot positions still read against
   the scale printed in the header. */
.db-row{display:grid;grid-template-columns:minmax(80px,26%) minmax(60px,1fr) 89px;column-gap:12px;align-items:center;min-height:29px;border-bottom:1px solid var(--rule)}
.db-row:not(.db-head):hover{background:var(--surface-2)}
.db-head{min-height:22px;color:var(--muted);font-size:11.5px;align-items:end;padding-bottom:4px}
.db-head .scale{display:flex;justify-content:space-between}
.db-t{position:relative;height:18px;border-left:1px solid var(--rule-strong);
  background-image:linear-gradient(to right,var(--rule) 1px,transparent 1px);background-size:25% 100%}
.db-t .ln{position:absolute;top:8px;height:2px;background:var(--venue);opacity:.45}
.db-t .ln.dn{background:var(--copper)}
.db-t .p{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--prev)}
.db-t .l{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--venue);box-shadow:0 0 0 2px var(--surface)}
.db-t .l.dn{background:var(--copper)}
.db-row:hover .db-t .l{box-shadow:0 0 0 2px var(--surface-2)}
.db-v{text-align:right;color:var(--ink-2)}
.db-c{text-align:right;font-weight:600}

/* Brands */
.br-row{display:grid;grid-template-columns:minmax(110px,30%) minmax(40px,1fr) 3em 9.4em;column-gap:12px;align-items:center;min-height:31px;border-bottom:1px solid var(--rule)}
.br-row:not(.br-head):hover{background:var(--surface-2)}
.br-head{min-height:22px;color:var(--muted);font-size:11.5px;align-items:end;padding-bottom:4px}
.br-name{display:flex;align-items:center;gap:7px;min-width:0;font-weight:500}
.br-name img{width:18px;height:18px;border-radius:4px;object-fit:contain;flex:none;background:var(--surface-2)}
.br-name i{width:18px;height:18px;border-radius:4px;flex:none;display:grid;place-items:center;font-size:9px;font-style:normal;font-weight:600;background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--rule)}
.br-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pips{display:flex;gap:3px;align-items:center}
.pips i{width:8px;height:8px;border-radius:2px;background:var(--rule)}
.pips i.on{background:var(--venue)}
.tier{display:flex;align-items:center;gap:8px;justify-content:flex-end;color:var(--ink-2);font-size:12.5px;white-space:nowrap}
.cat-row{display:grid;grid-template-columns:minmax(92px,30%) minmax(40px,1fr) 42px 42px 89px;column-gap:12px;align-items:center;min-height:31px;border-bottom:1px solid var(--rule)}
.cat-row:not(.cat-head):hover{background:var(--surface-2)}
.cat-head{min-height:22px;color:var(--muted);font-size:11.5px;align-items:end;padding-bottom:4px}

/* Reviews */
.pull{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start;padding:6px 0 4px}
.pull .fig{font-size:58px;line-height:.95;font-weight:600;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:proportional-nums}
.pull .fig small{font-size:26px;letter-spacing:-.01em;color:var(--ink-2);font-weight:500;margin-left:2px}
.pull .lab{font-size:13px;font-weight:600;margin-top:10px}
.pull .rulerwrap{padding-top:4px}
.bigruler{position:relative;height:34px;margin-top:6px;
  background-image:linear-gradient(to right,var(--rule) 1px,transparent 1px);background-size:20% 100%;border-right:1px solid var(--rule)}
.bigruler::before{content:"";position:absolute;left:40%;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:var(--baseline)}
.bigruler .stem{position:absolute;top:16px;height:2px;background:var(--venue)}
.bigruler .dot{position:absolute;top:17px;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--venue);box-shadow:0 0 0 2px var(--surface)}
.bigruler.under .stem,.bigruler.under .dot{background:var(--copper)}
.bigticks{position:relative;height:16px;color:var(--muted)}
.bigticks > span{position:absolute;transform:translateX(-50%)}
.bigticks > span:first-child{transform:none}
.bigticks > span:last-child{transform:translateX(-100%)}
.scores{display:flex;gap:26px;flex-wrap:wrap;margin:12px 0 4px}
.scores div b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.scores div span{font-size:11.5px;color:var(--muted)}

/* Visit profile — label | bar | share */
.vp-row{display:grid;grid-template-columns:minmax(90px,34%) minmax(40px,1fr) 3.2em;column-gap:10px;align-items:center;min-height:26px}
.vp-row:hover{background:var(--surface-2)}
.vp-t{position:relative;height:12px;border-left:1px solid var(--rule-strong)}
.vp-t i{position:absolute;left:0;top:2px;height:8px;border-radius:0 3px 3px 0;background:var(--venue)}

.method{margin:4px 0 0;padding:12px 14px;background:var(--surface-2);border-left:2px solid var(--rule-strong);color:var(--ink-2);font-size:12.5px;max-width:78ch}
.method b{color:var(--ink);font-weight:600}
.foot{margin-top:24px;padding-top:14px;border-top:1px solid var(--rule);color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px}

/* Tooltip */
.tip{position:fixed;z-index:1500;pointer-events:none;background:var(--ink);color:var(--surface);border-radius:5px;padding:7px 10px;font-size:12px;line-height:1.45;max-width:270px;box-shadow:var(--shadow);display:none}
.tip b{font-weight:600}
.tip .t2{opacity:.78;font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:11.5px}

/* ---------- The venue picker ---------- */
.pick{padding:28px 36px 36px}
.pick h1{font-size:26px;margin-bottom:4px}
.pick .note{color:var(--muted);font-size:12.5px;margin:0 0 22px}
.pick .note strong{color:var(--ink);font-weight:600}
.field{position:relative;margin-bottom:14px}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}
.field input{width:100%;padding:9px 11px;font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:5px}
.field input:focus{outline:2px solid var(--focus);outline-offset:-1px;border-color:var(--venue)}
.sugg{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:0 0 5px 5px;max-height:320px;overflow-y:auto;box-shadow:var(--shadow);display:none}
.sugg button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 11px;cursor:pointer;font-size:13px}
.sugg button:hover,.sugg button:focus{background:var(--surface-2)}
.sugg button small{display:block;color:var(--muted);font-size:11.5px}
.pick-list{margin-top:10px}
.pick-row{display:grid;grid-template-columns:1fr minmax(40px,120px) 3.6em;column-gap:12px;align-items:center;
  min-height:32px;border-bottom:1px solid var(--rule);cursor:pointer;border-left:0;background:none;width:100%;text-align:left;padding:0}
.pick-row:hover{background:var(--surface-2)}
.pick-row b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.pick-row small{color:var(--muted);font-size:11.5px}

/* ---------- Modals (professions detail, the co-visit map) ---------- */
.modal{position:fixed;inset:0;z-index:1400;background:rgba(16,28,37,.55);display:none;padding:28px}
.modal[data-open]{display:grid;place-items:center}
.modal-panel{background:var(--surface);border:1px solid var(--rule-strong);border-radius:8px;box-shadow:var(--shadow);
  width:min(980px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--rule)}
.modal-head h2{margin:0;font-size:16px;font-weight:600;flex:1}
.modal-head .x{border:1px solid var(--rule);background:var(--surface);border-radius:5px;width:28px;height:28px;cursor:pointer;color:var(--muted)}
.modal-head .x:hover{background:var(--surface-2);color:var(--ink)}
.modal-body{padding:18px 20px 22px;overflow-y:auto}
.modal-body.map{padding:0;height:min(70vh,620px)}
#covisitMap{width:100%;height:100%}

/* ---------- Narrow ---------- */
@media (max-width:1180px){ .brand .sub{display:none} }
@media (max-width:899px){
  .shell{display:block;height:auto}
  .map-pane{height:190px;border-right:0;border-bottom:1px solid var(--rule)}
  .panel{overflow:visible}
  .panel-in{padding:18px 16px 24px}
  .pick{padding:20px 16px 28px}
  .tabbar{margin:0 -16px;padding:0 16px}
  .map-card{display:none}
}
@media (max-width:720px){
  .crumbs{display:none}
  .topbar{gap:12px;padding:0 16px}
  .tb-right{gap:8px}
  h1{font-size:26px}
  .funnel{grid-template-columns:repeat(2,auto)}
  .mr{display:none}
  .ct-row,.ct.noidx .ct-row{grid-template-columns:minmax(80px,34%) minmax(36px,1fr) 39px 39px 43px}
  .ct.noidx .ct-row{grid-template-columns:minmax(80px,34%) minmax(36px,1fr) 39px 39px}
  .ct-row{column-gap:8px}
  .persona .ct-row{grid-template-columns:minmax(80px,40%) minmax(36px,1fr) 39px 39px 43px}
  .ct.short .ct-row{grid-template-columns:46px minmax(36px,1fr) 39px 39px 43px}
  .cat-row{grid-template-columns:minmax(80px,34%) minmax(36px,1fr) 39px 39px 43px;column-gap:8px}
  .br-row{grid-template-columns:minmax(80px,36%) minmax(40px,1fr) 2.6em 5.4em}
  .tier .tl{display:none}
  .db-row{grid-template-columns:minmax(72px,28%) minmax(40px,1fr) 43px;column-gap:8px}
  .pull{grid-template-columns:1fr;gap:10px}
  .gl{display:none}
  .theme button{width:26px}
  .modal{padding:0}
  .modal-panel{border-radius:0;height:100%;width:100%}
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} }
@media (forced-colors: active){
  .ct-t .bar,.bl-t i,.stack span,.hm .c,.pips i.on{forced-color-adjust:none}
}

/* A category that Google reviewers helped carry. Deliberately a small dot and
   not a colour change: the row is still mostly Instagram authors and recolouring
   it would overstate the Google half, which is the opposite of the point. */
.src-g{color:var(--venue);font-weight:700;cursor:help;margin-left:3px}