/* Barcelona Help Map — design tokens, closed pilot v0.1 (2026-09-23).
   Copied from docs/design/tokens.css; keep both in sync. Fonts: /fonts/fonts.css (self-hosted). */
:root {
  /* Surfaces and text */
  --bhm-paper: #F6F4EF;          /* app background */
  --bhm-card: #FFFFFF;           /* panels, cards, markers */
  --bhm-ink: #1C1B18;            /* text, primary button, selected state */
  --bhm-ink-2: #57534B;          /* secondary text, 7.6:1 on white */
  --bhm-ink-3: #6F6A61;          /* captions, 5.4:1 on white */
  --bhm-line: #E6E1D7;           /* dividers */
  --bhm-field: #D6D0C4;          /* input and outline-button borders */
  --bhm-tint: #F3F0EA;           /* chips, emoji tiles, hover */
  --bhm-selected: #F1EEE7;       /* selected list row */

  /* Map (only if a custom vector style is used) */
  --bhm-map-land: #ECE7DE;
  --bhm-map-block: #E1DBCF;
  --bhm-map-park: #D3E2C8;
  --bhm-map-sea: #D6E2E7;
  --bhm-you: #2F6FDE;            /* "you are here" dot only */

  /* States */
  --bhm-confirm-bg: #FBF5E8;
  --bhm-confirm-ink: #6B3F06;
  --bhm-confirm-line: #B58A3A;   /* dashed border */
  --bhm-hours-missing: #7A4A0B;
  --bhm-error-bg: #FBEDEA;
  --bhm-error-ink: #8A2A1E;
  --bhm-retired-bg: #EFEDE8;
  --bhm-checked: #285C40;        /* "checked by our team" icon */
  --bhm-no-pin-bg: #EEF1F4;
  --bhm-no-pin-ink: #33485A;
  --bhm-demo-bg: #F4EBD3;        /* prototype only */
  --bhm-demo-ink: #634C0F;

  /* Organisation logo placeholders (monogram on tint), cycled by organisation */
  --bhm-logo-1-bg: #E6EDF8; --bhm-logo-1-ink: #2C4A7E;
  --bhm-logo-2-bg: #F5E9DF; --bhm-logo-2-ink: #80431C;
  --bhm-logo-3-bg: #E3F0E6; --bhm-logo-3-ink: #285C40;
  --bhm-logo-4-bg: #F1E6F1; --bhm-logo-4-ink: #673767;
  --bhm-logo-5-bg: #F5EED8; --bhm-logo-5-ink: #665012;
  --bhm-logo-6-bg: #E1EEF0; --bhm-logo-6-ink: #255960;

  /* Type: Onest (Latin + Cyrillic), IBM Plex Mono (dates, distances), Instrument Serif (addresses only) */
  --bhm-font: "Onest", -apple-system, system-ui, sans-serif;
  --bhm-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bhm-plaque: "Instrument Serif", Georgia, serif;
  --bhm-fs-display: 34px;  /* lh 1.08, 600, -0.025em */
  --bhm-fs-h2: 22px;       /* lh 1.2, 600, -0.015em */
  --bhm-fs-title: 17px;    /* lh 1.3, 600 */
  --bhm-fs-body: 15px;     /* lh 1.5; mobile inputs 16px */
  --bhm-fs-small: 13px;    /* lh 1.45 */
  --bhm-fs-label: 11.5px;  /* 600, uppercase, +0.08em */
  --bhm-fs-plaque: 21px;   /* mobile 20px */

  /* Shape, depth, motion */
  --bhm-r-plaque: 6px;
  --bhm-r-field: 10px;
  --bhm-r-row: 14px;
  --bhm-r-block: 16px;
  --bhm-r-panel: 22px;
  --bhm-r-sheet: 24px;
  --bhm-r-pill: 999px;
  --bhm-shadow-panel: 0 2px 6px rgba(28, 27, 24, 0.08), 0 18px 48px rgba(28, 27, 24, 0.16);
  --bhm-shadow-float: 0 1px 3px rgba(28, 27, 24, 0.10), 0 8px 24px rgba(28, 27, 24, 0.08);
  --bhm-shadow-marker: drop-shadow(0 1px 1.5px rgba(28, 27, 24, 0.22)) drop-shadow(0 4px 8px rgba(28, 27, 24, 0.10));
  --bhm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layout */
  --bhm-aside: 440px;      /* desktop list column */
  --bhm-card-w: 408px;     /* desktop place card, floats over the map */
  --bhm-touch: 44px;       /* minimum touch target on phones */
}

/* Place marker: <button class="bhm-marker" data-state="default|confirm|selected"> with the brand plaque-pin (icons.js
   pinPath: the button is the plaque, the tail hangs below it and its tip is the point), an emoji span and an optional
   count span. Selected: terracotta. */
.bhm-marker { position: relative; width: 36px; height: 36px; transform-origin: 50% 124%; padding: 0; border: 0; background: none; cursor: pointer; filter: var(--bhm-shadow-marker); transition: transform 0.15s; }
.bhm-marker svg { position: absolute; left: 0; top: 0; overflow: visible; }
.bhm-marker .bhm-shape { fill: var(--bhm-card); stroke: #3A3833; stroke-width: 1.4; }
.bhm-marker[data-state="confirm"] .bhm-shape { stroke: var(--bhm-ink-3); stroke-dasharray: 3.5 2.5; }
.bhm-marker[data-state="selected"] { transform: scale(1.14); }
.bhm-marker[data-state="selected"] .bhm-shape { fill: var(--bhm-accent, #B9432A); stroke: #FFFFFF; stroke-width: 2; }
.bhm-marker:hover .bhm-shape, .bhm-marker:focus-visible .bhm-shape { stroke-width: 2.4; }
.bhm-marker__emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; line-height: 1; }
.bhm-marker[hidden] { display: none; }
.bhm-cluster { position: absolute; z-index: 15; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  filter: var(--bhm-shadow-marker); transition: left 0.45s var(--bhm-ease), top 0.45s var(--bhm-ease), transform 0.15s; }
.bhm-cluster svg { position: absolute; inset: 0; }
.bhm-cluster .bhm-shape { fill: var(--bhm-card); stroke: #3A3833; stroke-width: 1.6; }
.bhm-cluster:hover, .bhm-cluster:focus-visible { transform: scale(1.07); }
.bhm-cluster__count { position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1 var(--bhm-font); color: var(--bhm-ink); }
.map--still .bhm-cluster { transition: none; }
@media (prefers-reduced-motion: reduce) { .bhm-cluster { transition: none; } }
.bhm-marker__icon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bhm-ink); }
.bhm-marker__icon[hidden] { display: none; }
.bhm-marker .bhm-marker__icon svg { position: static; }
.row__tile .icon-container, .peek__legend-container .icon-container { color: var(--bhm-ink); }
.bhm-marker[data-state="selected"] .bhm-marker__icon { color: #FFFFFF; }
.bhm-marker__count { position: absolute; right: -7px; top: -7px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border: 1.5px solid #FFFFFF; border-radius: 9px; background: var(--bhm-ink); color: #FFFFFF; font: 700 10.5px/15px var(--bhm-font); text-align: center; }
.bhm-marker[data-state="selected"] .bhm-marker__count { background: #FFFFFF; color: var(--bhm-ink); }
@media (prefers-reduced-motion: reduce) { .bhm-marker { transition: none; } }

/* Base */
:root { color-scheme: light; }
/* Like the prototype: content-box by default (form controls are border-box in the UA sheet);
   border-box only where the prototype sets it and on links styled as buttons. */
.btn, .side, .badge, .tab__count, .pill, .dialog, .bhm-marker__count { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The prototype relies on browser defaults (16px, line-height normal); blocks set their own sizes. */
body { margin: 0; overflow: hidden; background: var(--bhm-paper); color: var(--bhm-ink); font: 400 16px/normal var(--bhm-font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bhm-ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--bhm-mono); }
.no-shrink, .icon-confirm { flex-shrink: 0; }
.noscript { padding: 24px; }

/* Buttons and small parts shared by every layout */
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn--ink { background: var(--bhm-ink); color: #FFFFFF; }
.btn--line { border: 1px solid var(--bhm-field); background: var(--bhm-card); color: var(--bhm-ink); font-weight: 500; }
.btn--36 { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.pill-soft { height: 30px; padding: 0 11px; border: 0; border-radius: var(--bhm-r-pill); background: var(--bhm-tint); color: var(--bhm-ink); font-size: 13px; white-space: nowrap; }
.pill-soft--40 { height: 40px; padding: 0 13px; flex-shrink: 0; border-radius: 20px; font-size: 13.5px; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: var(--bhm-r-pill); background: var(--bhm-tint); color: #3A3833; white-space: nowrap; }
.tag--confirm { padding: 1px 8px; border: 1px dashed #8A847A; background: transparent; color: var(--bhm-ink-2); }
.tag--pad { padding: 3px 9px; }
.why { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: var(--bhm-r-pill); background: var(--bhm-no-pin-bg); color: var(--bhm-no-pin-ink); }
.badge { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; border: 1.5px solid #FFFFFF; border-radius: 9px; background: var(--bhm-ink); color: #FFFFFF; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.label { font-size: var(--bhm-fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bhm-ink-3); }
.handle { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--bhm-field); }
.demo-pill { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--bhm-r-pill); background: var(--bhm-demo-bg); color: var(--bhm-demo-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }