/* static/css/00-tokens.css */
/* Design tokens: bright + dark palettes, type, motion, layers, spacing.
   Components consume semantic tokens only — raw hex lives nowhere else. */

:root {
  color-scheme: light;

  --color-background: #F4F6F9;
  --color-surface: #FEFEFE;
  --color-surface-muted: #E8ECF1;

  --color-text-primary: #1D262F;
  --color-text-secondary: #436A88;
  --color-text-tertiary: #ACB8C6;
  --color-text-inverse: #FEFEFE;

  --color-border-subtle: #D5DBE3;
  --color-border-strong: #436A88;

  --color-signal-positive: #71B6B2;
  --color-signal-info: #9EB6C6;
  --color-signal-danger: #FD3835;
  --color-signal-sus: #C8932F;

  --color-cta-primary: #1B2731;
  --color-cta-primary-text: #FEFEFE;
  --color-cta-secondary: #436A88;

  --color-tier-goated: #8A6A10;
  --color-tier-amazing: #3A6650;
  --color-tier-verygood: #4A7560;
  --color-tier-good: #5E7040;
  --color-tier-goodish: #737040;
  --color-tier-notbad: #7A5E35;
  --color-tier-meh: #7A4830;
  --color-tier-shit: #6E3030;

  --color-map-marker-top: #71B6B2;
  --color-map-marker-info: #436A88;
  --color-map-marker-warning: #FD3835;

  --radius-card: 22px;
  --radius-control: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-card: 0 8px 24px rgba(29, 38, 47, 0.12);
  --shadow-panel: 0 16px 48px rgba(29, 38, 47, 0.18);

  /* Typography */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Chakra Petch", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  --fs-page: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --fs-section: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-card: 1rem;
  --fs-card-lg: 1.125rem;
  --fs-body: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-tiny: 0.6875rem;
  --fs-score: clamp(2.5rem, 2rem + 2vw, 3.25rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 650;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  /* Motion */
  --dur-micro: 140ms;
  --dur-panel: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decel: cubic-bezier(0, 0, 0, 1);
  --ease-accel: cubic-bezier(0.4, 0, 1, 1);

  /* Layers */
  --z-base: 0;
  --z-sticky: 50;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-sheet: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* Touch target floor */
  --tap: 44px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #04070C;
  --color-surface: #1D262F;
  --color-surface-muted: #1B2731;

  --color-text-primary: #FEFEFE;
  --color-text-secondary: #C2CBD5;
  --color-text-tertiary: #8E99A7;
  --color-text-inverse: #04070C;

  --color-border-subtle: #355D90;
  --color-border-strong: #4A7CB1;

  --color-signal-positive: #3A6D70;
  --color-signal-info: #4A7CB1;
  --color-signal-danger: #FD323E;
  --color-signal-sus: #E2B042;

  --color-cta-primary: #FEFEFE;
  --color-cta-primary-text: #04070C;
  --color-cta-secondary: #4A7CB1;

  /* Dark tier-band hex resolved by hue-locked +15% lightness. */
  --color-tier-goated: #C49A2D;
  --color-tier-amazing: #5B947B;
  --color-tier-verygood: #6CA38B;
  --color-tier-good: #8AA163;
  --color-tier-goodish: #A09D60;
  --color-tier-notbad: #AC8A57;
  --color-tier-meh: #B57250;
  --color-tier-shit: #A85252;

  --color-map-marker-top: #3A6D70;
  --color-map-marker-info: #4A7CB1;
  --color-map-marker-warning: #FD323E;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-panel: 0 16px 48px rgba(0, 0, 0, 0.44);
}

/* OS-auto follow: when no explicit override, inherit OS preference. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;

    --color-background: #04070C;
    --color-surface: #1D262F;
    --color-surface-muted: #1B2731;

    --color-text-primary: #FEFEFE;
    --color-text-secondary: #C2CBD5;
    --color-text-tertiary: #8E99A7;
    --color-text-inverse: #04070C;

    --color-border-subtle: #355D90;
    --color-border-strong: #4A7CB1;

    --color-signal-positive: #3A6D70;
    --color-signal-info: #4A7CB1;
    --color-signal-danger: #FD323E;

    --color-cta-primary: #FEFEFE;
    --color-cta-primary-text: #04070C;
    --color-cta-secondary: #4A7CB1;

    --color-tier-goated: #C49A2D;
    --color-tier-amazing: #5B947B;
    --color-tier-verygood: #6CA38B;
    --color-tier-good: #8AA163;
    --color-tier-goodish: #A09D60;
    --color-tier-notbad: #AC8A57;
    --color-tier-meh: #B57250;
    --color-tier-shit: #A85252;

    --color-map-marker-top: #3A6D70;
    --color-map-marker-info: #4A7CB1;
    --color-map-marker-warning: #FD323E;

    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-panel: 0 16px 48px rgba(0, 0, 0, 0.44);
  }
}

/* Tier classes wire to a single --tier custom property — dark redefinitions
   cascade automatically without per-class dark overrides. */
.perf-goated   { --tier: var(--color-tier-goated); }
.perf-amazing  { --tier: var(--color-tier-amazing); }
.perf-verygood { --tier: var(--color-tier-verygood); }
.perf-good     { --tier: var(--color-tier-good); }
.perf-goodish  { --tier: var(--color-tier-goodish); }
.perf-notbad   { --tier: var(--color-tier-notbad); }
.perf-meh      { --tier: var(--color-tier-meh); }
.perf-shit     { --tier: var(--color-tier-shit); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-panel: 1ms;
  }
}

/* static/css/01-reset.css */
/* Modern CSS reset. Trimmed for our needs. */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html, body { height: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; }

ul[role="list"], ol[role="list"] { list-style: none; }

a { color: inherit; }

#root, #__next { isolation: isolate; }

/* Honor reduced-motion at the reset layer too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* static/css/02-base.css */
/* Base element defaults: typography, link defaults, selection,
   focus-visible defaults, language palette. */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background: var(--color-background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--fs-body);
  background: var(--color-background);
  color: var(--color-text-primary);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Long-form rhythm — tight headings, body lines breathe. */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--fs-page); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-card-lg); }
h4 { font-size: var(--fs-card); }

p { line-height: var(--lh-body); }

/* Links — semantic, never blue-default. */
a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

a:hover { color: var(--color-text-secondary); }

::selection {
  background: var(--color-border-strong);
  color: var(--color-cta-primary-text);
}

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--color-border-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Card-internal focus ring contained — components extend this. */
.c-property-card:focus-visible,
.c-property-card a:focus-visible {
  outline-offset: 2px;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* Tabular numbers everywhere we render scores / counts / ranks. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Language colour palette — exposed as --lang-color-XX for the language stack. */
:root {
  --lang-color-en: #4A7CB1;
  --lang-color-es: #C44848;
  --lang-color-de: #2D4A6B;
  --lang-color-fr: #6B7BC4;
  --lang-color-pt: #2E8553;
  --lang-color-nl: #D8853B;
  --lang-color-it: #4F8F46;
  --lang-color-ko: #7A4080;
  --lang-color-ja: #B83448;
  --lang-color-zh: #C45A1A;
  --lang-color-pl: #B73C2A;
  --lang-color-ru: #426B96;
  --lang-color-sv: #4078B0;
  --lang-color-ar: #5C7A2E;
  --lang-color-tr: #C03A2D;
  --lang-color-hi: #C46A1A;
  --lang-color-th: #3F4480;
  --lang-color-other: #ACB8C6;
}

/* static/css/03-utilities.css */
/* Utility classes — used sparingly. Compositional helpers only,
   not a utility-first system. */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

.container--narrow { max-width: 960px; }

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-2 { gap: var(--space-2); }
.stack-4 { gap: var(--space-4); }
.stack-6 { gap: var(--space-6); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.no-pointer { pointer-events: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-modal);
}
.skip-link:focus {
  position: fixed;
  left: var(--space-4);
  top: var(--space-4);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--color-cta-primary);
  color: var(--color-cta-primary-text);
  border-radius: var(--radius-control);
  outline: 3px solid var(--color-border-strong);
  outline-offset: 2px;
}

/* static/css/10-layout/app-shell.css */
/* Top app shell: sticky header + main + footer.
   Built around safe-area insets so iOS PWA chrome doesn't bleed into content. */

.hp-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-background);
}

.hp-main {
  flex: 1;
  width: 100%;
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
}

/* HEADER */
.c-app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-top: env(safe-area-inset-top);
}

.c-app-header__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .c-app-header__inner {
    height: 64px;
    padding-inline: var(--space-6);
    gap: var(--space-4);
  }
}

.c-app-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-card);
  letter-spacing: 0;
  color: var(--color-text-primary);
  text-decoration: none;
  flex: 0 0 auto;
}

.c-app-header__logo-img {
  width: 32px;
  height: 32px;
}

/* Theme-aware logo switching */
.c-logo--dark { display: none; }

[data-theme="dark"] .c-logo--bright { display: none; }
[data-theme="dark"] .c-logo--dark   { display: inline-block; }

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .c-logo--bright { display: none; }
  [data-theme="auto"] .c-logo--dark   { display: inline-block; }
}

.c-app-header__logo-text {
  font-size: var(--fs-card);
}
@media (max-width: 479px) {
  .c-app-header__logo-text { display: none; }
}

.c-app-header__nav {
  display: none;
  flex: 1;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .c-app-header__nav { display: inline-flex; align-items: center; }
}

.c-app-header__nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
@media (hover: hover) {
  .c-app-header__nav-link:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-muted);
  }
}

.c-app-header__nav-link--cta {
  background: var(--color-cta-primary);
  color: var(--color-cta-primary-text);
}

.c-app-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.c-app-header__pwa {
  display: none;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.c-app-header__pwa[hidden] { display: none !important; }
@media (min-width: 640px) {
  .c-app-header__pwa:not([hidden]) { display: inline-flex; }
}

.c-app-header__user {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

.c-app-header__logout { display: inline-flex; }

/* THEME TOGGLE — segmented control */
.c-theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-muted);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 0;
}

.c-theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
.c-theme-toggle__btn.is-active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}
.c-theme-toggle__btn:focus-visible {
  outline: 3px solid var(--color-border-strong);
  outline-offset: 2px;
}

/* FOOTER */
.c-app-footer {
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  margin-top: var(--space-8);
  padding-bottom: env(safe-area-inset-bottom);
}
.c-app-footer__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .c-app-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-inline: var(--space-6);
  }
}
.c-app-footer__tagline {
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
}
.c-app-footer__brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
.c-app-footer__nav {
  display: inline-flex;
  gap: var(--space-4);
  font-size: var(--fs-meta);
}
.c-app-footer__nav a { color: var(--color-text-secondary); }
.c-app-footer__nav a:hover { color: var(--color-text-primary); }

/* static/css/10-layout/map-shell.css */
/* Map page split-shell: mobile = stacked w/ bottom sheet.
   Desktop ≥1024px = list left (420-520px) + map right. */

.c-map-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
}
@media (min-width: 768px) {
  .c-map-shell { height: calc(100vh - 64px); height: calc(100dvh - 64px); }
}

.c-map-shell__filterbar { flex: 0 0 auto; }

.c-map-shell__body {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 0;
}

.c-map-shell__map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--color-surface-muted);
}

.c-map-shell__list {
  display: none;
  border-right: 1px solid var(--color-border-subtle);
  overflow-y: auto;
  background: var(--color-background);
  padding: var(--space-3);
}

@media (min-width: 1024px) {
  .c-map-shell__body {
    grid-template-columns: minmax(420px, 520px) 1fr;
    grid-template-rows: 1fr;
  }
  .c-map-shell__list { display: block; }
  .c-map-shell__sheet { display: none; }
}

/* Bottom sheet (mobile only) */
.c-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: var(--color-surface);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: var(--shadow-panel);
  z-index: var(--z-sheet);
  transition: height var(--dur-panel) var(--ease-decel);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.c-bottom-sheet[data-state="half"] { height: 60vh; height: 60dvh; }
.c-bottom-sheet[data-state="full"] { height: 92vh; height: 92dvh; }

.c-bottom-sheet__handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: var(--space-3) auto var(--space-2);
  border-radius: 2px;
  background: var(--color-text-tertiary);
  cursor: ns-resize;
}

.c-bottom-sheet__body {
  height: calc(100% - 28px);
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

@media (min-width: 1024px) {
  .c-bottom-sheet { display: none; }
}

/* static/css/10-layout/page-header.css */
.c-page-header {
  width: 100%;
  padding: var(--space-6) 0 var(--space-4);
}

.c-page-header__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.c-page-header__eyebrow {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-page-header__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

.c-page-header__subtitle {
  font-size: var(--fs-card);
  color: var(--color-text-secondary);
}

.c-page-header__slot {
  margin-top: var(--space-2);
}

.c-page-header--hostel .c-page-header__inner {
  max-width: 1100px;
  text-align: left;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .c-page-header--hostel .c-page-header__inner { padding-inline: var(--space-6); }
}

/* static/css/20-primitives/badge.css */
.c-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 6px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.c-badge--positive { background: color-mix(in srgb, var(--color-signal-positive) 16%, transparent); color: var(--color-signal-positive); }
.c-badge--info     { background: color-mix(in srgb, var(--color-signal-info) 16%, transparent); color: var(--color-signal-info); }
.c-badge--danger   { background: color-mix(in srgb, var(--color-signal-danger) 16%, transparent); color: var(--color-signal-danger); }

/* static/css/20-primitives/button.css */
.c-button {
  --button-bg: var(--color-cta-primary);
  --button-fg: var(--color-cta-primary-text);
  --button-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--tap);
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-fg);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-standard),
              filter var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  white-space: nowrap;
}

.c-button--primary {
  --button-bg: var(--color-cta-primary);
  --button-fg: var(--color-cta-primary-text);
}

.c-button--secondary {
  --button-bg: transparent;
  --button-fg: var(--color-text-primary);
  --button-border: var(--color-border-strong);
}

.c-button--ghost {
  --button-bg: transparent;
  --button-fg: var(--color-text-primary);
  --button-border: transparent;
  padding: 0 var(--space-3);
}

.c-button--danger {
  --button-bg: var(--color-signal-danger);
  --button-fg: #FFFFFF;
}

.c-button--link {
  --button-bg: transparent;
  --button-fg: var(--color-text-secondary);
  --button-border: transparent;
  height: auto;
  padding: 0;
}
.c-button--link:hover { text-decoration: underline; }

.c-button--block { width: 100%; }

@media (hover: hover) {
  .c-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
  .c-button--ghost:hover {
    background: color-mix(in srgb, var(--color-surface-muted) 60%, transparent);
  }
}

.c-button:active {
  transform: translateY(0) scale(0.98);
}

.c-button:disabled,
.c-button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.c-button__label {
  display: inline-flex;
  align-items: center;
}

/* static/css/20-primitives/chip.css */
.c-chip {
  --chip-bg: transparent;
  --chip-fg: var(--color-text-secondary);
  --chip-border: var(--color-border-subtle);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard);
}

.c-chip--neutral { /* uses defaults */ }

.c-chip--positive {
  --chip-fg: var(--color-signal-positive);
  --chip-border: transparent;
  --chip-bg: color-mix(in srgb, var(--color-signal-positive) 12%, transparent);
}
.c-chip--info {
  --chip-fg: var(--color-signal-info);
  --chip-border: transparent;
  --chip-bg: color-mix(in srgb, var(--color-signal-info) 14%, transparent);
}
.c-chip--danger {
  --chip-fg: var(--color-signal-danger);
  --chip-border: transparent;
  --chip-bg: color-mix(in srgb, var(--color-signal-danger) 12%, transparent);
}

.c-chip.is-selected,
.c-chip--positive.is-selected {
  background: var(--color-signal-positive);
  color: var(--color-cta-primary-text);
  border-color: transparent;
}
.c-chip--info.is-selected {
  background: var(--color-signal-info);
  color: var(--color-cta-primary-text);
  border-color: transparent;
}
.c-chip--danger.is-selected {
  background: var(--color-signal-danger);
  color: #FFFFFF;
  border-color: transparent;
}

button.c-chip,
a.c-chip {
  cursor: pointer;
  text-decoration: none;
}

@media (hover: hover) {
  button.c-chip:hover,
  a.c-chip:hover {
    border-color: var(--color-border-strong);
  }
}

.c-chip__trailing {
  font-size: var(--fs-tiny);
  opacity: 0.85;
}

/* static/css/20-primitives/icon.css */
.c-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  color: currentColor;
}

/* static/css/20-primitives/input.css */
.c-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.c-input__field {
  width: 100%;
  height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--fs-body);
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
}

.c-input__field::placeholder { color: var(--color-text-tertiary); }

.c-input--lg .c-input__field { height: 56px; font-size: var(--fs-card-lg); padding: 14px 18px; }

.c-input--has-leading .c-input__field { padding-left: 44px; }
.c-input--has-trailing .c-input__field { padding-right: 44px; }
.c-input--lg.c-input--has-leading .c-input__field { padding-left: 52px; }
.c-input--lg.c-input--has-trailing .c-input__field { padding-right: 52px; }

.c-input__leading,
.c-input__trailing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
  display: inline-flex;
}
.c-input__leading { left: 14px; }
.c-input__trailing { right: 14px; }

.c-input__field:focus {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-strong) 22%, transparent);
}

.c-input__field:disabled {
  background: var(--color-surface-muted);
  cursor: not-allowed;
  color: var(--color-text-tertiary);
}

/* static/css/20-primitives/pill.css */
.c-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}
[data-theme="dark"] .c-pill,
[data-theme="auto"] .c-pill {
  background: color-mix(in srgb, var(--color-surface-muted) 80%, transparent);
}

/* static/css/20-primitives/skeleton.css */
.c-skeleton {
  display: block;
  background: var(--color-surface-muted);
  border-radius: var(--radius-control);
  position: relative;
  overflow: hidden;
}
.c-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, white 8%, transparent) 50%, transparent 100%);
  animation: c-skeleton-shimmer 1.5s linear infinite;
}
@keyframes c-skeleton-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .c-skeleton::after { animation: none; }
}

/* static/css/20-primitives/tooltip.css */
.c-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.c-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: var(--space-2) var(--space-3);
  background: var(--color-cta-primary);
  color: var(--color-cta-primary-text);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  border-radius: var(--radius-control);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-tooltip);
  transition: opacity var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}

.c-tooltip:hover .c-tooltip__bubble,
.c-tooltip:focus-visible .c-tooltip__bubble,
.c-tooltip:focus-within .c-tooltip__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* static/css/30-components/autocomplete.css */
/* Autocomplete dropdown — preserves .ac-dropdown / .ac-item / .ac-type-* /
   .ac-subtitle / .ac-label class hooks used by filters.js. */

.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-panel);
  max-height: 380px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
}
.ac-dropdown.open,
.ac-dropdown[data-open="true"] { display: block; }

.ac-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover,
.ac-item.selected,
.ac-item.active {
  background: var(--color-surface-muted);
}
.ac-item.selected,
.ac-item.active {
  color: var(--color-text-primary);
}

.ac-type {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ac-label {
  min-width: 0;
  font-weight: var(--fw-medium);
  justify-self: start;
  text-align: left;
}
.ac-subtitle {
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--color-text-tertiary);
  text-align: right;
}

.ac-type-property::before,
.ac-type-city::before,
.ac-type-country::before,
.ac-type-continent::before,
.ac-type-facility::before,
.ac-type-text::before {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: 6px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  margin-right: var(--space-2);
}
.ac-type-property::before  { content: "Hostel"; }
.ac-type-city::before      { content: "City"; }
.ac-type-country::before   { content: "Country"; color: var(--color-signal-info); background: color-mix(in srgb, var(--color-signal-info) 14%, transparent); }
.ac-type-continent::before { content: "Region"; }
.ac-type-facility::before  { content: "Filter"; }
.ac-type-text::before      { content: "Search"; }

/* static/css/30-components/bedbug-pill.css */
/* Bed-bug warning pill — standalone warning element.
   Two modes: <button> (detail page, opens the incident-log drawer) and
   <a class="--link"> (list card, navigates to /hostel/<id>#bedbugs).
   Use --prominent on the list card for the full-width bottom strip. */

.c-bedbug-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);

  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-signal-danger);

  background: color-mix(in oklab, var(--color-signal-danger) 10%, var(--color-surface));
  border: 1px solid color-mix(in oklab, var(--color-signal-danger) 35%, var(--color-border-subtle));
  border-radius: var(--radius-card);
  cursor: pointer;
  text-decoration: none;

  transition:
    background var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

[data-theme="dark"] .c-bedbug-pill {
  background: color-mix(in oklab, var(--color-signal-danger) 18%, transparent);
  color: #FFE6E6;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--color-signal-danger) 35%, transparent),
    0 0 0 0 transparent;
}

.c-bedbug-pill:hover,
.c-bedbug-pill:focus-visible {
  background: color-mix(in oklab, var(--color-signal-danger) 18%, var(--color-surface));
  box-shadow:
    0 14px 28px -8px color-mix(in oklab, var(--color-signal-danger) 45%, transparent),
    0 4px 10px -2px color-mix(in oklab, var(--color-signal-danger) 30%, transparent);
  outline: none;
}

[data-theme="dark"] .c-bedbug-pill:hover,
[data-theme="dark"] .c-bedbug-pill:focus-visible {
  background: color-mix(in oklab, var(--color-signal-danger) 28%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--color-signal-danger) 50%, transparent),
    0 18px 40px -10px color-mix(in oklab, var(--color-signal-danger) 55%, transparent),
    0 6px 14px -2px color-mix(in oklab, var(--color-signal-danger) 40%, transparent);
}

.c-bedbug-pill[aria-expanded="true"] {
  background: color-mix(in oklab, var(--color-signal-danger) 22%, var(--color-surface));
  box-shadow:
    inset 0 -2px 0 var(--color-signal-danger),
    0 8px 26px color-mix(in oklab, var(--color-signal-danger) 38%, transparent);
}

[data-theme="dark"] .c-bedbug-pill[aria-expanded="true"] {
  background: color-mix(in oklab, var(--color-signal-danger) 32%, transparent);
}

.c-bedbug-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-signal-danger);
}

[data-theme="dark"] .c-bedbug-pill__icon {
  color: #FF6B6B;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--color-signal-danger) 60%, transparent));
}

.c-bedbug-pill__label {
  flex-shrink: 0;
}

.c-bedbug-pill__sep {
  opacity: 0.5;
  font-weight: var(--fw-regular);
}

.c-bedbug-pill__count {
  flex: 1;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: none;
  color: inherit;
  opacity: 0.92;
}

.c-bedbug-pill__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  color: currentColor;
  opacity: 0.85;
  transition: transform var(--dur-micro) var(--ease-standard);
}

.c-bedbug-pill[aria-expanded="true"] .c-bedbug-pill__chevron {
  transform: rotate(180deg);
}

/* Prominent variant — full-width warning strip at bottom of a card.
   Border radius and side borders are dropped; the parent card's
   overflow:hidden clips corners. A top border acts as the divider. */
.c-bedbug-pill--prominent {
  min-height: 56px;
  padding: var(--space-4) var(--space-4);
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
  border-radius: 0;
  border: none;
  border-top: 1px solid color-mix(in oklab, var(--color-signal-danger) 35%, var(--color-border-subtle));
}

[data-theme="dark"] .c-bedbug-pill--prominent {
  box-shadow: none;
  border-top: 1px solid color-mix(in oklab, var(--color-signal-danger) 45%, transparent);
}

.c-bedbug-pill--prominent .c-bedbug-pill__icon .c-icon {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .c-bedbug-pill,
  .c-bedbug-pill__chevron {
    transition: none;
  }
}

/* In-pair modifier — used inside .c-hazard-pair container */
.c-bedbug-pill--in-pair {
  border-radius: 0;
  border: none;
  min-height: 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-3) var(--space-4);
}

.c-bedbug-pill--in-pair .c-bedbug-pill__line1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-bedbug-pill--in-pair .c-bedbug-pill__line2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--space-1);
}

[data-theme="dark"] .c-bedbug-pill--in-pair {
  box-shadow: none;
}

/* static/css/30-components/certainty-chip.css */
.c-certainty-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  white-space: nowrap;
  line-height: 1;
}

.c-certainty-chip__label {
  font-weight: var(--fw-medium);
}
.c-certainty-chip__count {
  opacity: 0.8;
}

.c-certainty-chip--certain,
.c-certainty-chip--confident {
  background: color-mix(in srgb, var(--color-signal-positive) 14%, transparent);
  color: var(--color-signal-positive);
}
.c-certainty-chip--low,
.c-certainty-chip--blind {
  background: color-mix(in srgb, var(--color-signal-info) 14%, transparent);
  color: var(--color-signal-info);
}

/* static/css/30-components/detected-warnings.css */
/* Detected warnings tray
   Shared attached footer band for bedbug + sus warning buttons.
   The tray owns the full-width attachment and split layout; the buttons
   keep their existing interaction and overlay behavior. */

.c-detected-warnings {
  display: grid;
  width: 100%;
}

.c-detected-warnings--count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.c-detected-warnings--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-border-subtle);
}

.c-detected-warnings__item {
  position: relative;
  min-width: 0;
  display: flex;
}

.c-detected-warnings__item > .c-bedbug-pill,
.c-detected-warnings__item > .c-sus-pill {
  width: 100%;
}

.c-detected-warnings__anchor {
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.c-detected-warnings--attached {
  overflow: hidden;
}

.c-detected-warnings--count-1 .c-bedbug-pill,
.c-detected-warnings--count-1 .c-sus-pill {
  min-height: 56px;
  padding: var(--space-4);
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.c-detected-warnings--count-1 .c-bedbug-pill {
  border-top: 1px solid color-mix(in oklab, var(--color-signal-danger) 35%, var(--color-border-subtle));
}

.c-detected-warnings--count-1 .c-sus-pill {
  border-top: 1px solid color-mix(in oklab, var(--color-signal-sus) 35%, var(--color-border-subtle));
}

[data-theme="dark"] .c-detected-warnings--count-1 .c-bedbug-pill {
  border-top-color: color-mix(in oklab, var(--color-signal-danger) 45%, transparent);
}

[data-theme="dark"] .c-detected-warnings--count-1 .c-sus-pill {
  border-top-color: color-mix(in oklab, var(--color-signal-sus) 45%, transparent);
}

.c-detected-warnings--count-1 .c-bedbug-pill__icon .c-icon,
.c-detected-warnings--count-1 .c-sus-pill__icon .c-icon {
  width: 20px;
  height: 20px;
}

.c-detected-warnings--attached .c-bedbug-pill:hover,
.c-detected-warnings--attached .c-bedbug-pill:focus-visible,
.c-detected-warnings--attached .c-bedbug-pill[aria-expanded="true"],
.c-detected-warnings--attached .c-sus-pill:hover,
.c-detected-warnings--attached .c-sus-pill:focus-visible,
.c-detected-warnings--attached .c-sus-pill[aria-expanded="true"] {
  box-shadow: none;
}

.c-detected-warnings--count-2 .c-detected-warnings__item--sus {
  border-left: 1px solid color-mix(in oklab, var(--color-signal-sus) 35%, var(--color-border-subtle));
}

[data-theme="dark"] .c-detected-warnings--count-2 .c-detected-warnings__item--sus {
  border-left-color: color-mix(in oklab, var(--color-signal-sus) 45%, transparent);
}

.c-detected-warnings--count-2 .c-bedbug-pill,
.c-detected-warnings--count-2 .c-sus-pill {
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: 0;
  border: none;
  box-shadow: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.c-detected-warnings--count-2 .c-bedbug-pill__line1,
.c-detected-warnings--count-2 .c-sus-pill__line1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-detected-warnings--count-2 .c-bedbug-pill__line2,
.c-detected-warnings--count-2 .c-sus-pill__line2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--space-1);
}

@media (max-width: 480px) {
  .c-detected-warnings--count-2 .c-bedbug-pill,
  .c-detected-warnings--count-2 .c-sus-pill {
    padding: var(--space-2) var(--space-3);
  }

  .c-detected-warnings--count-2 .c-bedbug-pill__line1,
  .c-detected-warnings--count-2 .c-sus-pill__line1 {
    gap: var(--space-1);
  }

  .c-detected-warnings--count-2 .c-bedbug-pill__icon .c-icon,
  .c-detected-warnings--count-2 .c-sus-pill__icon .c-icon {
    width: 14px;
    height: 14px;
  }

  .c-detected-warnings--count-2 .c-bedbug-pill__label,
  .c-detected-warnings--count-2 .c-sus-pill__label,
  .c-detected-warnings--count-2 .c-bedbug-pill__count,
  .c-detected-warnings--count-2 .c-sus-pill__count {
    font-size: var(--fs-tiny);
  }
}

/* static/css/30-components/empty-state.css */
.c-empty-state,
.c-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);
}

.c-empty-state__icon,
.c-error-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.c-empty-state__title,
.c-error-state__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.c-empty-state__body,
.c-error-state__body {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
}

.c-error-state__icon { color: var(--color-signal-danger); background: color-mix(in srgb, var(--color-signal-danger) 12%, transparent); }

/* static/css/30-components/filter-bar.css */
/* Filter chips bar — preserves .chip / .chip-x / .chip-type / .chip--*
   class hooks used by filters.js. */

.chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

.chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-tertiary);
  margin-left: var(--space-1);
  cursor: pointer;
}
.chip-x:hover { color: var(--color-signal-danger); }

@media (hover: hover) {
  .chip:hover { border-color: var(--color-border-strong); }
}

.chip.selected,
.chip--positive.selected {
  background: var(--color-cta-primary);
  color: var(--color-cta-primary-text);
  border-color: transparent;
}

.chip--positive {
  color: var(--color-signal-positive);
  border-color: color-mix(in srgb, var(--color-signal-positive) 30%, transparent);
  background: color-mix(in srgb, var(--color-signal-positive) 10%, transparent);
}
.chip--info {
  color: var(--color-signal-info);
  border-color: color-mix(in srgb, var(--color-signal-info) 30%, transparent);
  background: color-mix(in srgb, var(--color-signal-info) 10%, transparent);
}
.chip--danger {
  color: var(--color-signal-danger);
  border-color: color-mix(in srgb, var(--color-signal-danger) 30%, transparent);
  background: color-mix(in srgb, var(--color-signal-danger) 10%, transparent);
}

.chip-type {
  font-size: var(--fs-tiny);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Lang filter dropdown — preserves .lang-filter-* hooks used by filters.js. */
.lang-filter-wrap { position: relative; }

.lang-filter-toggle {
  /* styled by c-button; this layer only owns responsive label behavior */
  position: relative;
  min-width: 112px;
}

.lang-filter-toggle-short { display: none; }

@media (max-width: 520px) {
  .lang-filter-toggle {
    min-width: 88px;
    padding-inline: var(--space-3);
  }
  .lang-filter-toggle-full { display: none; }
  .lang-filter-toggle-short { display: inline-flex; }
}

.lang-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  width: max-content;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-panel);
  z-index: var(--z-dropdown);
  display: none;
  padding: var(--space-2);
}

@media (max-width: 520px) {
  .lang-filter-dropdown {
    left: 50%;
    right: auto;
    width: min(360px, calc(100vw - 32px));
    min-width: 0;
    transform: translateX(-50%);
  }
}
.lang-filter-dropdown.open,
.lang-filter-dropdown[data-open="true"] { display: block; }

.lang-filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.lang-filter-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}
.lang-filter-item:hover { background: var(--color-surface-muted); }
.lang-filter-item.selected { background: var(--color-surface-muted); font-weight: var(--fw-medium); }

.lang-filter-flag { font-size: 1em; }
.lang-filter-name { flex: 1; }
.lang-filter-action,
.lang-filter-action-positive,
.lang-filter-action-negative,
.lang-filter-action-up,
.lang-filter-action-down,
.lang-filter-action-hot {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: 6px;
  text-transform: uppercase;
}
.lang-filter-action-positive {
  color: var(--color-signal-positive);
  background: color-mix(in srgb, var(--color-signal-positive) 14%, transparent);
}
.lang-filter-action-up {
  color: var(--color-signal-positive);
  background: color-mix(in srgb, var(--color-signal-positive) 14%, transparent);
}
.lang-filter-action-negative,
.lang-filter-action-down {
  color: var(--color-signal-danger);
  background: color-mix(in srgb, var(--color-signal-danger) 12%, transparent);
}
.lang-filter-action-hot {
  color: var(--color-tier-goated);
  background: color-mix(in srgb, var(--color-tier-goated) 14%, transparent);
}
.lang-filter-action.active {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
.lang-filter-empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--fs-meta);
}

/* static/css/30-components/incident-log.css */
/* Incident-log iOS-style bottom sheet — slides up from bottom,
   overlays hostel page with dimmed backdrop. Click backdrop to close. */

/* Overlay/backdrop */
.c-incident-log-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-sheet);
  opacity: 0;
  transition: opacity var(--dur-panel) var(--ease-decel);
  pointer-events: none;
}

.c-incident-log-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.c-incident-log-overlay[hidden] {
  display: none !important;
}

/* Bottom sheet panel */
.c-incident-log {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-panel);
  transform: translateY(100%);
  transition: transform var(--dur-panel) var(--ease-decel);
  z-index: calc(var(--z-sheet) + 1);
}

.c-incident-log.is-visible {
  transform: translateY(0);
}

[data-theme="dark"] .c-incident-log {
  background:
    radial-gradient(circle at 0% 100%, color-mix(in oklab, var(--color-signal-danger) 8%, transparent), transparent 40%),
    linear-gradient(160deg, #0a111b 0%, #050a11 100%);
  border-top: 1px solid color-mix(in oklab, var(--color-signal-danger) 45%, rgba(160, 180, 205, 0.30));
  box-shadow:
    0 18px 56px rgba(0, 0, 0, 0.55),
    0 0 32px color-mix(in oklab, var(--color-signal-danger) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  .c-incident-log-overlay,
  .c-incident-log {
    transition: none !important;
  }
  .c-incident-log.is-visible {
    transform: none;
  }
}

/* Drag-handle decoration (visual only) */
.c-incident-log__handle {
  width: 36px;
  height: 4px;
  margin: -8px auto var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-signal-danger) 35%, var(--color-text-tertiary));
  opacity: 0.55;
  cursor: grab;
}

.c-incident-log__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.c-incident-log__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.c-incident-log__title::before {
  content: "■ ";
  color: var(--color-signal-danger);
  letter-spacing: 0.1em;
}

.c-incident-log__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.c-incident-log__close:hover,
.c-incident-log__close:focus-visible {
  background: color-mix(in oklab, var(--color-signal-danger) 12%, transparent);
  border-color: var(--color-signal-danger);
  color: var(--color-signal-danger);
  outline: none;
}

/* Filter strip */
.c-incident-log__filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-tiny);
  color: var(--color-text-tertiary);
}

.c-incident-log__filter-label {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-incident-log__filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-signal-danger);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-signal-danger) 12%, transparent);
  color: var(--color-signal-danger);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .c-incident-log__filter-chip {
  color: #FFB8B8;
  background: color-mix(in oklab, var(--color-signal-danger) 22%, transparent);
}

/* Summary */
.c-incident-log__summary {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

/* Empty state */
.c-incident-log__empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-control);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  text-align: center;
}

/* Incident rows */
.c-incident-log__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.c-incident-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.c-incident-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-signal-danger);
  opacity: 0.85;
}

.c-incident-row:has(.c-incident-row__severity--possible)::before {
  opacity: 0.35;
}

.c-incident-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-tiny);
}

.c-incident-row__severity {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.c-incident-row__severity--confirmed {
  color: var(--color-signal-danger);
}

.c-incident-row__severity--possible {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .c-incident-row__severity--confirmed {
  color: #FF6B6B;
}

.c-incident-row__source {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

.c-incident-row__source::before {
  content: "[";
  margin-right: 1px;
}
.c-incident-row__source::after {
  content: "]";
  margin-left: 1px;
}

.c-incident-row__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.c-incident-row__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

.c-incident-row__body p {
  margin: 0;
}

/* Sus overlay accent */
.c-incident-log-overlay--sus .c-incident-log__handle {
  background: color-mix(in oklab, var(--color-signal-positive) 40%, var(--color-text-tertiary));
}

.c-incident-log__filter-chip--sus {
  border-color: var(--color-signal-positive);
  background: color-mix(in oklab, var(--color-signal-positive) 12%, transparent);
  color: var(--color-signal-positive);
}

[data-theme="dark"] .c-incident-log__filter-chip--sus {
  color: #b8ffd8;
  background: color-mix(in oklab, var(--color-signal-positive) 22%, transparent);
}

/* Loading scaffold */
.c-incident-log__loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  animation: incident-spinner-fade-in var(--dur-micro) var(--ease-decel) 240ms forwards;
}

@keyframes incident-spinner-fade-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .c-incident-log__loading {
    animation: none;
    opacity: 1;
  }
}

/* Spinner ring */
.c-loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: currentColor;
  animation: incident-spin 700ms linear infinite;
  flex-shrink: 0;
}

@keyframes incident-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .c-loading-spinner {
    animation: none;
    opacity: 0.5;
  }
}

.c-loading-spinner--danger { color: var(--color-signal-danger); }
.c-loading-spinner--warn   { color: var(--color-signal-positive); }

.c-loading-text {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

/* Clickable empty/error state */
.c-incident-log__empty--clickable {
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

.c-incident-log__empty--clickable:hover,
.c-incident-log__empty--clickable:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  outline: none;
}

/* Footer */
.c-incident-log__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--fs-meta);
}

.c-incident-log__foot-prompt {
  color: var(--color-text-secondary);
}

.c-incident-log__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-signal-danger);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-signal-danger);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.c-incident-log__foot-link:hover,
.c-incident-log__foot-link:focus-visible {
  background: color-mix(in oklab, var(--color-signal-danger) 14%, transparent);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--color-signal-danger) 30%, transparent);
  outline: none;
}

[data-theme="dark"] .c-incident-log__foot-link {
  color: #FFB8B8;
}

/* static/css/30-components/language-divergence.css */
.c-lang-divergence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-lang-divergence__row {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr minmax(72px, auto);
  gap: var(--space-2);
  align-items: center;
  font-size: 12px;
  line-height: 1;
}

.c-lang-divergence__name {
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-lang-divergence__bar {
  position: relative;
  height: 6px;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
}

.c-lang-divergence__center {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--color-border-strong);
  transform: translateX(-50%);
}

.c-lang-divergence__mark {
  position: absolute;
  left: calc(50% + var(--offset, 0%));
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-text-tertiary);
}

.c-lang-divergence__bar[data-direction="pos"] .c-lang-divergence__mark {
  background: var(--color-signal-positive);
}

.c-lang-divergence__bar[data-direction="neg"] .c-lang-divergence__mark {
  background: var(--color-signal-danger);
}

.c-lang-divergence__label {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}

/* static/css/30-components/language-stack.css */
.c-lang-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.c-lang-stack__bar {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.c-lang-stack--thick .c-lang-stack__bar { height: 10px; }

.c-lang-stack__seg {
  display: block;
  height: 100%;
  background: var(--lang-color);
  transition: filter var(--dur-micro) var(--ease-standard);
}
.c-lang-stack__seg:hover { filter: brightness(1.1); }

.c-lang-stack__legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

.c-lang-stack__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.c-lang-stack__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lang-color);
}

.c-lang-stack__legend-label {
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}
.c-lang-stack__legend-pct {
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* static/css/30-components/modal.css */
.c-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: var(--z-modal);
  animation: c-modal-fade var(--dur-panel) var(--ease-decel);
}
.c-modal-overlay[hidden] { display: none !important; }

.c-modal {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
  padding: var(--space-6);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: c-modal-rise var(--dur-panel) var(--ease-decel);
}

.c-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard);
}
.c-modal__close:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

.c-modal__eyebrow {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.c-modal__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.c-modal__subtitle {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.c-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

@keyframes c-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes c-modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .c-modal-overlay,
  .c-modal { animation: none; }
}

/* Share-modal supplementary elements — used by index/hostel pages. */
.share-status {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}
.share-qr {
  background: #FFFFFF;
  padding: var(--space-3);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-self: center;
}
.share-qr[hidden] { display: none; }
.share-link {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  word-break: break-all;
  text-decoration: underline;
}
.share-link[hidden] { display: none; }

/* static/css/30-components/property-card.css */
/* PropertyCard
   - Vertical layout below 720px container width (image on top).
   - Horizontal layout at 720px+ (image left, info grid right).
   The wrapping list element should set `container-type: inline-size`
   so this query keys off the column it lives in, not the viewport.
*/

.c-property-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  isolation: isolate;
}

@media (hover: hover) {
  .c-property-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-panel);
  }
}

.c-property-card[data-certainty="low"],
.c-property-card[data-certainty="blind"] {
  border-color: var(--color-border-subtle);
}

/* MEDIA */
.c-property-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-muted);
  overflow: hidden;
}
.c-property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-property-card__media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  opacity: 0;
}
.c-property-card__media--no-img .c-property-card__media-fallback { opacity: 1; }

/* BODY */
.c-property-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  min-width: 0;
}

.c-property-card__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.c-property-card__sep {
  color: var(--color-text-tertiary);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

.c-property-card__head {
  display: block;
}
.c-property-card__name {
  font-size: var(--fs-card-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin: 0;
}
.c-property-card__name a {
  color: inherit;
  text-decoration: none;
}
.c-property-card__name a:hover,
.c-property-card__name a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  outline: none;
}
.c-property-card:focus-within {
  outline: 3px solid var(--color-border-strong);
  outline-offset: 2px;
}

.c-property-card__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-card);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  -webkit-line-clamp: 2;
}

.c-property-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.c-property-card__lang {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-property-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}
.c-property-card__price { font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.c-property-card__cta { margin-left: auto; position: relative; z-index: 1; }

/* HORIZONTAL VARIANT — kicks in when the parent .hp-list container hits 720px.
   Same partial works in the index list (wide) and the map shell list (narrow). */
@container hp-list (min-width: 720px) {
  .c-property-card {
    grid-template-columns: 240px 1fr;
  }
  .c-property-card__media {
    aspect-ratio: auto;
    height: 100%;
  }
  .c-property-card__body { padding: var(--space-4) var(--space-5); }
  .c-property-card__head {
    grid-template-columns: 1fr auto;
    align-items: flex-start;
  }
}

@container hp-list (min-width: 960px) {
  .c-property-card {
    grid-template-columns: 280px 1fr;
  }
}

/* Shared detected-warnings tray spans the full card width under media + body. */
.c-property-card > .c-detected-warnings {
  grid-column: 1 / -1;
}

/* When bedbug strip + horizontal variant collide, switch to vertical inline ribbon. */
@container hp-list (min-width: 720px) {
  .c-property-card .c-bedbug-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    height: auto;
    padding: 0;
    z-index: 2;
  }
  .c-property-card .c-bedbug-strip > * { display: none; }
  .c-property-card:has(.c-bedbug-strip) .c-property-card__media { padding-left: 4px; }
}

/* static/css/30-components/rank-badge.css */
.c-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-rank-badge__scope {
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

.c-rank-badge__n {
  font-variant-numeric: tabular-nums;
}

.c-rank-badge--goated {
  background: var(--color-tier-goated);
  color: var(--color-cta-primary-text);
  border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-tier-goated) 32%, transparent);
}
.c-rank-badge--goated .c-rank-badge__scope { color: inherit; opacity: 0.85; }

/* Text rank labels — replace the (City #1) badge format with readable strings.
   Used in property cards and hostel hero. */
.c-rank-label {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.c-rank-label--goated {
  background: var(--color-tier-goated);
  color: var(--color-cta-primary-text);
  border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-tier-goated) 32%, transparent);
}

/* static/css/30-components/review-card.css */
.c-review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-review-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

.c-review-card__author { font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.c-review-card__lang   { letter-spacing: 0.06em; }
.c-review-card__date   { color: var(--color-text-tertiary); }
.c-review-card__rating {
  margin-left: auto;
  padding: 2px var(--space-2);
  border-radius: 6px;
  background: var(--color-surface-muted);
  font-weight: var(--fw-semibold);
}

.c-review-card__body {
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  line-height: var(--lh-body);
}

.c-review-card__source {
  font-size: var(--fs-tiny);
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* static/css/30-components/score-badge.css */
.c-score-badge {
  --tier: var(--color-text-secondary);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  background: transparent;
  position: relative;
  isolation: isolate;
}

.c-score-badge__num {
  display: inline-flex;
  align-items: baseline;
  color: var(--tier);
  line-height: 1;
}

.c-score-badge__pct {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.c-score-badge__sym {
  font-size: 0.55em;
  font-weight: var(--fw-semibold);
  margin-left: 2px;
  margin-bottom: 0.2em;
  align-self: flex-end;
}

.c-score-badge__label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.c-score-badge__verdict {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 24ch;
  line-height: 1.3;
}

/* Sizes */
.c-score-badge--sm .c-score-badge__pct { font-size: 1.25rem; font-weight: var(--fw-semibold); }
.c-score-badge--sm { padding: var(--space-1) var(--space-2); }
.c-score-badge--sm .c-score-badge__label { font-size: var(--fs-tiny); }

.c-score-badge--md .c-score-badge__pct { font-size: calc(var(--fs-card-lg) * 1.6); }
.c-score-badge--md { min-width: 96px; }

.c-score-badge--lg .c-score-badge__pct { font-size: var(--fs-score); }
.c-score-badge--lg { min-width: 160px; padding: var(--space-3) var(--space-4); }

.c-score-badge__spark {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  color: var(--color-tier-goated);
  z-index: 1;
}
.c-score-badge--lg .c-score-badge__spark { top: var(--space-3); left: var(--space-3); }

/* Low-confidence treatment — single rule. */
[data-certainty="low"]  .c-score-badge,
[data-certainty="blind"] .c-score-badge {
  filter: saturate(0.7);
}

/* static/css/30-components/score-panel.css */
/* hp-score: large score panel. Coral-red score ring, cyan confidence ring, Chakra Petch typography.
   Server renders all --confidence-* vars inline; theme cascades from [data-theme="dark"] on <html>. */

/* Animatable numeric property for the score stroke reveal. */
@property --score-dash {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.hp-score {
  /* Component accent: coral-red — not in global tokens, exclusive to this panel. */
  --hp-score-accent: #ff4b4b;
  --hp-score-accent-bg: rgba(255, 75, 75, 0.12);

  /* Confidence vars — overridden per-instance via server-rendered inline style. */
  --confidence: 0;
  --confidence-ring-width: 2px;
  --confidence-ring-color: rgb(150 160 175);
  --confidence-glow-primary-opacity: 0;
  --confidence-glow-secondary-opacity: 0;

  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(var(--space-6), 5vw, 56px);
  padding: clamp(var(--space-6), 4.5vw, 52px);

  width: min(960px, 100%);
  border-radius: clamp(var(--radius-card), 4vw, 44px);
}

[data-theme="dark"] .hp-score {
  --hp-score-accent-bg: rgba(255, 75, 75, 0.16);
}

/* ── SVG circle ──────────────────────────────────────────── */

.hp-score__circle {
  flex-shrink: 0;
}

.hp-score__svg {
  display: block;
  width: clamp(140px, 21vw, 200px);
  height: clamp(140px, 21vw, 200px);
  overflow: visible;
}

.hp-score__confidence-ring,
.hp-score__score-ring-bg,
.hp-score__score-ring {
  fill: none;
  transform-origin: 60px 60px;
  transform: rotate(-90deg);
}

.hp-score__confidence-ring {
  stroke: var(--confidence-ring-color);
  stroke-width: var(--confidence-ring-width);
  filter:
    drop-shadow(0 0 var(--confidence-glow-blur-primary)   rgba(35, 231, 255, var(--confidence-glow-primary-opacity)))
    drop-shadow(0 0 var(--confidence-glow-blur-secondary) rgba(35, 231, 255, var(--confidence-glow-secondary-opacity)));
}

.hp-score__score-ring-bg {
  stroke: var(--hp-score-accent-bg);
  stroke-width: 10;
}

.hp-score__score-ring {
  --score-dash: var(--score-percent);
  stroke: var(--hp-score-accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--score-dash) 100;
  filter: drop-shadow(0 0 10px rgba(255, 75, 75, 0.30));
}

[data-theme="dark"] .hp-score__score-ring {
  filter: drop-shadow(0 0 14px rgba(255, 75, 75, 0.45));
}

.hp-score__spark {
  fill: var(--hp-score-accent);
  transform: none;
  filter: drop-shadow(0 0 8px rgba(255, 75, 75, 0.26));
}

[data-theme="dark"] .hp-score__spark {
  filter: drop-shadow(0 0 12px rgba(255, 75, 75, 0.40));
}

/* ── Hazard state (bedbugs) ──────────────────────────────── */

.hp-score[data-hazard="bedbug"] .hp-score__spark { display: none; }

.hp-score__bug {
  stroke: var(--hp-score-accent);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 10px rgba(255, 75, 75, 0.40));
}

[data-theme="dark"] .hp-score__bug {
  filter: drop-shadow(0 0 14px rgba(255, 75, 75, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hp-score-bug-twitch {
    0%, 92%, 100% { transform: translate(0, 0) rotate(0); }
    94%           { transform: translate(0.4px, -0.6px) rotate(-1.2deg); }
    96%           { transform: translate(-0.6px, 0.4px) rotate(1deg); }
    98%           { transform: translate(0.3px, -0.2px) rotate(-0.5deg); }
  }
  .hp-score__bug {
    transform-box: fill-box;
    transform-origin: center;
    animation: hp-score-bug-twitch 4s var(--ease-standard) infinite;
  }
}

.hp-score__reticle {
  stroke: var(--hp-score-accent);
  stroke-width: 1;
  fill: none;
  opacity: 0.55;
}

[data-theme="dark"] .hp-score__reticle {
  opacity: 0.75;
  filter: drop-shadow(0 0 6px rgba(255, 75, 75, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hp-score-reticle-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
  }
  .hp-score__reticle {
    animation: hp-score-reticle-pulse 3.2s var(--ease-standard) infinite;
  }
  [data-theme="dark"] .hp-score__reticle {
    animation: hp-score-reticle-pulse 3.2s var(--ease-standard) infinite;
  }
}

/* When hazard is active, the score ring desaturates very slightly so the bug
   glyph reads as the focal point — but the score number stays on accent. */
.hp-score[data-hazard="bedbug"] .hp-score__score-ring {
  opacity: 0.85;
}

/* ── Hazard state (sus / incentivized reviews) ──────────── */

.hp-score[data-hazard="sus"] .hp-score__spark { display: none; }

.hp-score__coin {
  stroke: var(--color-signal-sus);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--color-signal-sus) 40%, transparent));
}

[data-theme="dark"] .hp-score__coin {
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--color-signal-sus) 55%, transparent));
}

.hp-score__reticle--sus {
  stroke: var(--color-signal-sus);
  stroke-width: 1;
  fill: none;
  opacity: 0.55;
}

[data-theme="dark"] .hp-score__reticle--sus {
  opacity: 0.75;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--color-signal-sus) 55%, transparent));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hp-score-coin-flip {
    0%, 92%, 100% { transform: rotateY(0); }
    94%           { transform: rotateY(20deg); }
    96%           { transform: rotateY(-15deg); }
    98%           { transform: rotateY(8deg); }
  }
  .hp-score__coin {
    transform-box: fill-box;
    transform-origin: center;
    animation: hp-score-coin-flip 5s var(--ease-standard) infinite;
  }
  .hp-score__reticle--sus {
    animation: hp-score-reticle-pulse 3.2s var(--ease-standard) infinite;
  }
}

.hp-score[data-hazard="sus"] .hp-score__score-ring {
  opacity: 0.85;
}

.hp-score__hazard-note {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-signal-sus);
  opacity: 0.92;
}

[data-theme="dark"] .hp-score__hazard-note--sus {
  color: #F7DC8B;
}

/* ── Text content ────────────────────────────────────────── */

.hp-score__content {
  min-width: 0;
}

.hp-score__title {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-section), 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hp-score__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(var(--space-4), 3.5vw, 40px);
  margin-top: clamp(var(--space-3), 1.5vw, var(--space-5));
}

.hp-score__value {
  color: var(--hp-score-accent);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8.5vw, 6.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
  letter-spacing: -0.04em;
  filter: drop-shadow(0 0 8px rgba(255, 75, 75, 0.18));
}

[data-theme="dark"] .hp-score__value {
  filter: drop-shadow(0 0 16px rgba(255, 75, 75, 0.38));
}

.hp-score__level {
  color: var(--hp-score-accent);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  border: 2px solid currentColor;
  border-radius: var(--radius-control);
  padding: 0.45em 0.9em;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(255, 75, 75, 0.10);
}

[data-theme="dark"] .hp-score__level {
  box-shadow:
    0 0 20px rgba(255, 75, 75, 0.18),
    inset 0 0 14px rgba(255, 75, 75, 0.06);
}

.hp-score__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: clamp(var(--space-3), 2vw, var(--space-5));

  color: var(--color-text-secondary);
  font-size: clamp(var(--fs-meta), 1.8vw, 1.1rem);
  font-weight: var(--fw-medium);
}

.hp-score__confidence-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--confidence-ring-color);
  box-shadow: 0 0 calc(14px * var(--confidence)) var(--confidence-ring-color);
  flex-shrink: 0;
}

.hp-score__separator {
  opacity: 0.45;
}

/* ── Score stroke reveal animation ───────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  @keyframes hp-score-stroke-in {
    from { --score-dash: 0; }
  }

  .hp-score__score-ring {
    animation: hp-score-stroke-in 900ms var(--ease-decel) both;
  }

  @keyframes hp-score-glow-in {
    from { opacity: 0; }
  }

  .hp-score__confidence-ring {
    animation: hp-score-glow-in 600ms 200ms var(--ease-decel) both;
  }
}

/* ── Responsive collapse ─────────────────────────────────── */

@media (max-width: 480px) {
  .hp-score {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hp-score__main,
  .hp-score__meta {
    justify-content: center;
  }
}

/* ── Property card context — flat, tighter sizing ───────── */

.c-property-card .hp-score {
  padding: 0;
  gap: var(--space-4);
  border: none;
  box-shadow: none;
  background: transparent;
}

.c-property-card .hp-score__svg {
  width: clamp(80px, 16vw, 120px);
  height: clamp(80px, 16vw, 120px);
}

.c-property-card .hp-score__title {
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
}

.c-property-card .hp-score__value {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.c-property-card .hp-score__level {
  font-size: clamp(0.75rem, 1.8vw, 1.1rem);
  padding: 0.35em 0.75em;
}

.c-property-card .hp-score__meta {
  font-size: var(--fs-meta);
  margin-top: var(--space-2);
  gap: var(--space-2);
}

.c-property-card .hp-score__confidence-dot {
  width: 8px;
  height: 8px;
}

/* ── Hostel detail hero — flat, card-sized ───────────────── */

.hp-hostel .hp-score {
  padding: 0;
  gap: var(--space-4);
  border: none;
  box-shadow: none;
  background: transparent;
}

.hp-hostel .hp-score__svg {
  width: clamp(80px, 16vw, 120px);
  height: clamp(80px, 16vw, 120px);
}

.hp-hostel .hp-score__title {
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
}

.hp-hostel .hp-score__value {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.hp-hostel .hp-score__level {
  font-size: clamp(0.75rem, 1.8vw, 1.1rem);
  padding: 0.35em 0.75em;
}

.hp-hostel .hp-score__meta {
  font-size: var(--fs-meta);
  margin-top: var(--space-2);
  gap: var(--space-2);
}

.hp-hostel .hp-score__confidence-dot {
  width: 8px;
  height: 8px;
}

/* static/css/30-components/sus-pill.css */
/* Sus 5★ review pill — incentivized-review warning element.
   Two modes: <button> (detail page, opens the sus drawer) and
   prominent variant on list cards. Uses the amber/coin signal color. */

.c-sus-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);

  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-signal-sus);

  background: color-mix(in oklab, var(--color-signal-sus) 10%, var(--color-surface));
  border: 1px solid color-mix(in oklab, var(--color-signal-sus) 35%, var(--color-border-subtle));
  border-radius: var(--radius-card);
  cursor: pointer;
  text-decoration: none;

  transition:
    background var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

[data-theme="dark"] .c-sus-pill {
  background: color-mix(in oklab, var(--color-signal-sus) 18%, transparent);
  color: #F7DC8B;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--color-signal-sus) 35%, transparent),
    0 0 0 0 transparent;
}

.c-sus-pill:hover,
.c-sus-pill:focus-visible {
  background: color-mix(in oklab, var(--color-signal-sus) 18%, var(--color-surface));
  box-shadow:
    0 14px 28px -8px color-mix(in oklab, var(--color-signal-sus) 45%, transparent),
    0 4px 10px -2px color-mix(in oklab, var(--color-signal-sus) 30%, transparent);
  outline: none;
}

[data-theme="dark"] .c-sus-pill:hover,
[data-theme="dark"] .c-sus-pill:focus-visible {
  background: color-mix(in oklab, var(--color-signal-sus) 28%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--color-signal-sus) 50%, transparent),
    0 18px 40px -10px color-mix(in oklab, var(--color-signal-sus) 55%, transparent),
    0 6px 14px -2px color-mix(in oklab, var(--color-signal-sus) 40%, transparent);
}

.c-sus-pill[aria-expanded="true"] {
  background: color-mix(in oklab, var(--color-signal-sus) 22%, var(--color-surface));
  box-shadow:
    inset 0 -2px 0 var(--color-signal-sus),
    0 8px 26px color-mix(in oklab, var(--color-signal-sus) 38%, transparent);
}

[data-theme="dark"] .c-sus-pill[aria-expanded="true"] {
  background: color-mix(in oklab, var(--color-signal-sus) 32%, transparent);
}

.c-sus-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-signal-sus);
}

[data-theme="dark"] .c-sus-pill__icon {
  color: #F7DC8B;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--color-signal-sus) 60%, transparent));
}

.c-sus-pill__label {
  flex-shrink: 0;
}

.c-sus-pill__sep {
  opacity: 0.5;
  font-weight: var(--fw-regular);
}

.c-sus-pill__count {
  flex: 1;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: none;
  color: inherit;
  opacity: 0.92;
}

.c-sus-pill__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  color: currentColor;
  opacity: 0.85;
  transition: transform var(--dur-micro) var(--ease-standard);
}

.c-sus-pill[aria-expanded="true"] .c-sus-pill__chevron {
  transform: rotate(180deg);
}

/* Tier modifiers — high gets the strongest treatment, watch the lightest */
.c-sus-pill--watch {
  opacity: 0.92;
}

.c-sus-pill--high {
  border-width: 1.5px;
}

/* Prominent variant — full-width strip at bottom of a card. */
.c-sus-pill--prominent {
  min-height: 56px;
  padding: var(--space-4) var(--space-4);
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
  border-radius: 0;
  border: none;
  border-top: 1px solid color-mix(in oklab, var(--color-signal-sus) 35%, var(--color-border-subtle));
}

[data-theme="dark"] .c-sus-pill--prominent {
  box-shadow: none;
  border-top: 1px solid color-mix(in oklab, var(--color-signal-sus) 45%, transparent);
}

.c-sus-pill--prominent .c-sus-pill__icon .c-icon {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .c-sus-pill,
  .c-sus-pill__chevron {
    transition: none;
  }
}

/* In-pair modifier — used inside .c-hazard-pair container */
.c-sus-pill--in-pair {
  border-radius: 0;
  border: none;
  min-height: 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-3) var(--space-4);
}

.c-sus-pill--in-pair .c-sus-pill__line1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-sus-pill--in-pair .c-sus-pill__line2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--space-1);
}

[data-theme="dark"] .c-sus-pill--in-pair {
  box-shadow: none;
}

/* "Explain how it works" disclosure inside the sus drawer */
.c-sus-explain {
  margin: 0;
  border: 1px solid color-mix(in oklab, var(--color-signal-sus) 30%, var(--color-border-subtle));
  border-radius: var(--radius-control);
  background: color-mix(in oklab, var(--color-signal-sus) 6%, var(--color-surface));
}

[data-theme="dark"] .c-sus-explain {
  background: color-mix(in oklab, var(--color-signal-sus) 12%, transparent);
  border-color: color-mix(in oklab, var(--color-signal-sus) 40%, transparent);
}

.c-sus-explain__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-signal-sus);
  user-select: none;
}

[data-theme="dark"] .c-sus-explain__toggle {
  color: #F7DC8B;
}

.c-sus-explain__toggle::-webkit-details-marker { display: none; }
.c-sus-explain__toggle::marker { content: ""; }

.c-sus-explain__toggle::after {
  content: "+";
  margin-left: auto;
  font-size: 1.1em;
  opacity: 0.7;
  transition: transform var(--dur-micro) var(--ease-standard);
}

.c-sus-explain[open] .c-sus-explain__toggle::after {
  content: "−";
}

.c-sus-explain__toggle:hover,
.c-sus-explain__toggle:focus-visible {
  background: color-mix(in oklab, var(--color-signal-sus) 10%, transparent);
  outline: none;
}

.c-sus-explain__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid color-mix(in oklab, var(--color-signal-sus) 25%, var(--color-border-subtle));
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .c-sus-explain__body {
  color: var(--color-text-primary);
  border-top-color: color-mix(in oklab, var(--color-signal-sus) 35%, transparent);
}

.c-sus-explain__body p {
  margin: var(--space-3) 0 0;
}

.c-sus-explain__body strong {
  color: var(--color-signal-sus);
  font-weight: var(--fw-bold);
}

[data-theme="dark"] .c-sus-explain__body strong {
  color: #F7DC8B;
}

/* static/css/30-components/tag-chip.css */
.c-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}
[data-theme="dark"] .c-tag-chip,
[data-theme="auto"] .c-tag-chip {
  background: color-mix(in srgb, var(--color-surface-muted) 80%, transparent);
}

.c-tag-chip__emoji { font-size: 0.85em; line-height: 1; }
.c-tag-chip__count { color: var(--color-text-tertiary); font-size: var(--fs-tiny); }

/* static/css/30-components/view-toggle.css */
.c-view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-muted);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 0;
}

.c-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

.c-view-toggle__btn.is-active,
.c-view-toggle__btn[aria-current="page"] {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

@media (max-width: 479px) {
  .c-view-toggle__btn span:not([aria-hidden]) { display: none; }
  .c-view-toggle__btn { width: 44px; justify-content: center; }
}

/* static/css/40-pages/auth.css */
.auth-logo {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text-primary);
}

/* static/css/40-pages/geo.css */
/* Breadcrumb above page header on /region, /country, /city pages. */
.hp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  padding-block: var(--space-3) 0;
}

.hp-breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.hp-breadcrumb__link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}
.hp-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
  border-radius: var(--radius-control, 4px);
}

.hp-breadcrumb__sep {
  color: var(--color-text-tertiary);
}

.hp-breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}

/* Section blocks below the hostel list (Children countries, sibling cities). */
.hp-geo-section__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight, 1.2);
  color: var(--color-text-primary);
  margin: 0;
}

/* static/css/40-pages/hostel.css */
.hp-hostel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

/* HERO */
.hp-hostel__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
  .hp-hostel__hero { grid-template-columns: 280px 1fr; gap: 0; }
}
@media (min-width: 1024px) {
  .hp-hostel__hero { grid-template-columns: 320px 1fr; }
}

.hp-hostel__hero-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-muted);
  overflow: hidden;
}
@media (min-width: 768px) {
  .hp-hostel__hero-media { aspect-ratio: auto; height: 100%; }
}
.hp-hostel__hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-hostel__hero-media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  opacity: 0;
}
.hp-hostel__hero-media--no-img .hp-hostel__hero-media-fallback { opacity: 1; }

.hp-hostel__hero-info {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.hp-hostel__eyebrow {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.hp-hostel__eyebrow a {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.hp-hostel__eyebrow a:hover { color: var(--color-text-primary); }

.hp-hostel__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
}

.hp-hostel__name {
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  flex: 1;
  min-width: 0;
}

.hp-hostel__hero-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hp-hostel__rank-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.hp-hostel__hero > .c-detected-warnings {
  grid-column: 1 / -1;
}

/* SECTIONS */
.hp-hostel__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hp-hostel__section-title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

/* External link bar */
.hp-hostel__ext-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ext-link-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard);
}
.ext-link-pill:hover { border-color: var(--color-border-strong); }
.ext-link-pill .c-icon { color: var(--color-text-secondary); }

/* User tags */
.user-tags-section {
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-surface) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-radius: var(--radius-card);
}

#tag-pills-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.user-tag-status {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-signal-danger) 40%, transparent);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-signal-danger) 10%, var(--color-surface));
  color: var(--color-text-primary);
  font-size: var(--fs-meta);
}

.tp-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tp {
  --tp-bg: var(--color-surface);
  --tp-border: var(--color-border-subtle);
  --tp-text: var(--color-text-primary);
  --tp-muted: var(--color-text-secondary);
  --tp-action-bg: var(--color-cta-primary);
  --tp-action-text: var(--color-cta-primary-text);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--tp-border);
  border-radius: var(--radius-pill);
  background: var(--tp-bg);
  color: var(--tp-text);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    background var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.tp:hover,
.tp:focus-within {
  border-color: var(--tp-action-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-action-bg) 18%, transparent);
}

.tp-voted {
  border-color: var(--tp-action-bg);
  background: color-mix(in srgb, var(--tp-action-bg) 13%, var(--tp-bg));
}

.tp-icon {
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.tp-text {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: pre-line;
  word-break: break-word;
}

.tp-full {
  display: none;
  white-space: pre-line;
  word-break: break-word;
}

.tp-expanded {
  border-radius: var(--radius-control);
}
.tp-expanded .tp-text { display: none; }
.tp-expanded .tp-full { display: inline; }

.tp-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex: 0 0 auto;
}

.tp-count {
  min-width: 1.35em;
  color: var(--tp-muted);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tp-btn {
  min-width: 28px;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--tp-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--tp-muted);
  font: inherit;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
}

.tp-vote {
  border-color: var(--tp-action-bg);
  background: var(--tp-action-bg);
  color: var(--tp-action-text);
}

.tp-untag:hover {
  border-color: var(--color-signal-danger);
  color: var(--color-signal-danger);
}

.tp-input {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-height: 54px;
  padding: 12px 14px 12px 54px;
  border-style: dashed;
  cursor: text;
}

.tp-input:focus-within {
  border-style: solid;
}

.tp-textarea {
  width: 100%;
  min-height: 28px;
  max-height: 180px;
  padding: 3px 0 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.45;
  white-space: pre-wrap;
}

.tp-textarea::placeholder {
  color: var(--tp-muted);
  opacity: 0.78;
}

.tag-spray-icon {
  position: absolute;
  left: 10px;
  bottom: 7px;
  width: 34px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transform: rotate(18deg);
  transform-origin: 50% 80%;
  transition: transform var(--dur-panel) var(--ease-standard);
  filter: drop-shadow(1px 3px 4px rgba(29, 38, 47, 0.18));
}

.tag-spray-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tag-style-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.tp-input:focus-within .tag-spray-icon,
.tag-spray-icon:hover {
  transform: rotate(-8deg) scale(1.08);
}

.tp-default { --tp-action-bg: var(--color-border-strong); }
.tp-warning,
.tp-stop,
.tp-biohazard {
  --tp-bg: color-mix(in srgb, var(--color-signal-danger) 12%, var(--color-surface));
  --tp-border: color-mix(in srgb, var(--color-signal-danger) 55%, var(--color-border-subtle));
  --tp-action-bg: var(--color-signal-danger);
}
.tp-fire,
.tp-fireworks {
  --tp-bg: #fff4d1;
  --tp-border: #d79616;
  --tp-action-bg: #a46000;
}
.tp-rainbow,
.tp-party {
  --tp-bg: linear-gradient(90deg, #fff0f5, #eef7ff 52%, #effaf2);
  --tp-border: #7992b1;
  --tp-action-bg: #436a88;
}
.tp-surf,
.tp-beach {
  --tp-bg: color-mix(in srgb, var(--color-signal-info) 18%, var(--color-surface));
  --tp-border: color-mix(in srgb, var(--color-signal-info) 68%, var(--color-border-subtle));
  --tp-action-bg: var(--color-border-strong);
}
.tp-hike,
.tp-mountain,
.tp-climbing {
  --tp-bg: #edf6eb;
  --tp-border: #7b9a72;
  --tp-action-bg: #4d7451;
}
.tp-dj,
.tp-metal,
.tp-sunglasses,
.tp-motorcycle,
.tp-skateboard {
  --tp-bg: #1d262f;
  --tp-border: #5f7486;
  --tp-text: #fefefe;
  --tp-muted: #c2cbd5;
  --tp-action-bg: #fefefe;
  --tp-action-text: #1d262f;
}
.tp-bar,
.tp-beer,
.tp-cocktail {
  --tp-bg: #fbf0df;
  --tp-border: #aa7a3a;
  --tp-action-bg: #765323;
}
.tp-heart {
  --tp-bg: #fff0f2;
  --tp-border: #c77887;
  --tp-action-bg: #9d4054;
}
.tp-facepalm {
  --tp-bg: #f0f2f4;
  --tp-border: #98a4ad;
  --tp-action-bg: #5b6872;
}
.tp-bicycle {
  --tp-bg: color-mix(in srgb, var(--color-signal-positive) 18%, var(--color-surface));
  --tp-border: color-mix(in srgb, var(--color-signal-positive) 70%, var(--color-border-subtle));
  --tp-action-bg: #3a6d70;
}

@media (max-width: 520px) {
  .user-tags-section {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .tp-input {
    min-height: 56px;
  }
}

/* Perk pills */
.hp-hostel__perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hp-hostel__perk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}
.hp-hostel__perk--drip {
  background: color-mix(in srgb, var(--color-signal-positive) 14%, transparent);
  color: var(--color-signal-positive);
}
.hp-hostel__perk--special {
  background: color-mix(in srgb, var(--color-signal-info) 14%, transparent);
  color: var(--color-signal-info);
}

.hp-hostel__other-facilities {
  margin-top: var(--space-2);
}
.hp-hostel__other-facilities summary {
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  padding: var(--space-2) 0;
}
.hp-hostel__other-fac-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-top: var(--space-2);
}
.hp-hostel__other-fac {
  font-size: var(--fs-tiny);
  padding: 2px var(--space-2);
  border-radius: 6px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

/* Stat / capacity grid */
.hp-hostel__stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.hp-hostel__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
}
.hp-hostel__stat-value {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.hp-hostel__stat-label {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

/* Price grid */
.hp-hostel__price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.hp-hostel__price-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
}
.hp-hostel__price-type {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.hp-hostel__price-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.hp-hostel__price-range {
  font-size: var(--fs-card-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.hp-hostel__price-unit {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}
.hp-hostel__price-fresh {
  font-size: var(--fs-tiny);
  color: var(--color-text-tertiary);
}

.hp-hostel__description {
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  line-height: var(--lh-body);
}

/* static/css/40-pages/index.css */
.hp-index {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hp-index__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
  text-align: center;
}

.hp-index__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.hp-index__search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: stretch;
}

.hp-index__search-wrap {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 560px;
}

.hp-index__search-row .lang-filter-toggle {
  height: 56px;
}

.hp-index__filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.hp-index__filter-chips:empty { display: none; }

.hp-index__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
}

/* List container — establishes a query container so PropertyCard
   can switch to horizontal layout when the column is wide enough. */
.hp-list {
  container-type: inline-size;
  container-name: hp-list;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .hp-list { gap: var(--space-5); }
}

.hp-list__loading { padding: var(--space-6) 0; }

.hp-result-note {
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

.hp-load-more {
  display: flex;
  justify-content: center;
  padding-block: var(--space-4);
}

/* static/css/40-pages/map.css */
/* Map page — full-bleed shell. Header sticky, toolbar sticky beneath, map fills remainder. */

.hp-body--map { overflow: hidden; }
.hp-body--map .hp-main { padding: 0; flex: 1; min-height: 0; }
.hp-body--map .c-app-footer { display: none; }

.hp-map {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.hp-map__canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: var(--color-surface-muted);
}

/* TOOLBAR */
.hp-map-toolbar {
  position: sticky;
  top: 56px;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-subtle);
}
@media (min-width: 768px) {
  .hp-map-toolbar { top: 64px; }
}

.hp-map-toolbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-3);
}

.hp-map-toolbar__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 480px;
}

.hp-map-toolbar__view-toggle { margin-left: auto; }

.chips--map {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* LEGEND */
.hp-map__legend {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 5;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 220px;
  font-size: var(--fs-meta);
}

.hp-map__legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.hp-map__legend-toggle:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

.hp-map__legend-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}
.hp-map__legend.collapsed .hp-map__legend-body { display: none; }

.hp-map__legend-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--color-text-primary);
}
.legend-pct {
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-tiny);
  min-width: 56px;
}
.legend-label { font-weight: var(--fw-medium); }

.hp-map__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--tier);
  flex-shrink: 0;
}

.hp-map__legend-row[data-tier="perf-goated"] .hp-map__legend-swatch,
.hp-map__legend-row[data-tier="perf-amazing"] .hp-map__legend-swatch {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier) 40%, transparent);
}

@media (max-width: 640px) {
  .hp-map__legend { right: var(--space-3); bottom: var(--space-3); padding: var(--space-1); }
  .hp-map__legend.collapsed { padding: 0; }
}

/* MAPBOX POPUPS — restyled to use tokens. */
.mapboxgl-popup-content {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  padding: 0;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.mapboxgl-popup-tip {
  border-top-color: var(--color-surface) !important;
  border-bottom-color: var(--color-surface) !important;
}
.mapboxgl-popup-close-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 18px;
  margin: 4px;
}

.map-popup { display: flex; flex-direction: column; }
.map-popup-img-link { display: block; }
.map-popup-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.map-popup-info {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.map-popup-name {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--fs-card);
}
.map-popup-name:hover { color: var(--color-text-secondary); }
.map-popup-location { font-size: var(--fs-meta); color: var(--color-text-secondary); }
.map-popup-rank {
  font-size: var(--fs-meta);
  color: var(--color-tier-goated);
  font-weight: var(--fw-semibold);
}
.map-popup-bedbug { font-size: var(--fs-tiny); color: var(--color-signal-danger); font-weight: var(--fw-semibold); }
.map-popup-stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}
.map-popup-perf {
  font-weight: var(--fw-bold);
  color: var(--tier);
  font-variant-numeric: tabular-nums;
}
.map-popup-dialect { font-weight: var(--fw-medium); color: var(--color-text-secondary); }

.cluster-popup { display: flex; flex-direction: column; }
.cluster-popup-header {
  padding: var(--space-3);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}
.cluster-popup-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.cluster-popup-item {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  text-decoration: none;
}
.cluster-popup-item:last-child { border-bottom: none; }
.cluster-popup-item:hover { background: var(--color-surface-muted); }
.cluster-popup-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.cluster-popup-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cluster-popup-item-name {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-meta);
}
.cluster-popup-item-loc { font-size: var(--fs-tiny); color: var(--color-text-secondary); }
.cluster-popup-item-stats {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-tiny);
  color: var(--color-text-tertiary);
}
.cluster-popup-score { font-weight: var(--fw-bold); color: var(--tier); }

@keyframes legend-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-tier-amazing) 45%, transparent); }
  50%  { box-shadow: 0 0 4px 3px color-mix(in srgb, var(--color-tier-amazing) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-tier-amazing) 0%, transparent); }
}
@keyframes legend-pulse-elite {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-tier-goated) 55%, transparent); }
  50%  { box-shadow: 0 0 5px 4px color-mix(in srgb, var(--color-tier-goated) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-tier-goated) 0%, transparent); }
}
.hp-map__legend-row[data-tier="perf-amazing"] .hp-map__legend-swatch {
  animation: legend-pulse 3s ease-in-out infinite;
}
.hp-map__legend-row[data-tier="perf-goated"] .hp-map__legend-swatch {
  animation: legend-pulse-elite 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hp-map__legend-swatch { animation: none !important; }
}

/* static/css/40-pages/styleguide.css */
.sg-root { padding-block: var(--space-6); }

.sg-hero { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-4) var(--space-6); }
.sg-hero p { color: var(--color-text-secondary); }

.sg-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sg-section h2 {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
}

.sg-meta { color: var(--color-text-secondary); font-size: var(--fs-meta); }

.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sg-row--stack { flex-direction: column; align-items: stretch; }

.sg-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.sg-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--tier);
  color: var(--color-cta-primary-text);
  font-weight: var(--fw-semibold);
  text-align: center;
}
[data-theme="dark"] .sg-tier,
[data-theme="auto"] .sg-tier { color: var(--color-text-inverse); }

.sg-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}
.sg-icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  font-size: var(--fs-tiny);
  color: var(--color-text-secondary);
}

.sg-token-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .sg-token-grid { grid-template-columns: repeat(2, 1fr); }
}
.sg-token-row {
  display: grid;
  grid-template-columns: 24px auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: 6px;
  background: var(--color-surface-muted);
  font-size: var(--fs-meta);
}
.sg-token-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--color-border-subtle);
}
.sg-token-row code { font-size: var(--fs-meta); color: var(--color-text-primary); }
.sg-token-row span:last-child { color: var(--color-text-secondary); font-family: var(--font-mono); }