/* SkyHigh Digital A&R — ar.css
   MARKED LAYER: ar-8940-20260911
   Contract: data/ar/AR_CONTRACT.md
   Visual tokens: site.css role tokens strictly honoured
   --canvas-gold: Identity (wordmarks, badges, eyebrows, marker rings)
   --canvas-red / --red-ink: Action (claim buttons, interactive hover, selected)
   --canvas-green / --green-ink: Roots, state, verification
   --salt: Foreground text (passes WCAG AA > 19:1)
   --ash: Metadata, provenance lines (passes WCAG AA > 6.5:1)
   --void / --tile: Canvas backgrounds
*/

/* Section Scaffolding */
.ar-section {
  padding-block: 40px 60px;
  position: relative;
  z-index: 1;
}

.ar-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.ar-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canvas-gold);
  margin-bottom: 8px;
}

.ar-title {
  font-family: var(--display);
  font-size: clamp(38px, 6.5vw, 76px);
  line-height: 0.95;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 14px 0;
  color: var(--salt);
}

.ar-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--salt);
  max-width: var(--measure);
  margin: 0 0 24px 0;
}

/* Controls: Roles Filter & City Jump Chips */
.ar-controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.ar-roles, .ar-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ar-chip,
.ar-jump button {
  background: var(--tile);
  border: 1px solid var(--seam);
  color: var(--salt);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ar-chip:hover,
.ar-jump button:hover {
  border-color: var(--canvas-gold);
  color: var(--canvas-gold);
}

.ar-chip.active,
.ar-chip[aria-pressed="true"],
.ar-jump button.active {
  background: rgba(226, 167, 44, 0.12);
  border-color: var(--canvas-gold);
  color: var(--canvas-gold);
}

/* Map Stage Container */
.ar-stage {
  position: relative;
  margin-bottom: 36px;
}

.ar-map {
  width: 100%;
  height: 540px;
  background: #090908;
  border: 1px solid var(--seam);
  border-radius: 0;
  position: relative;
  z-index: 1; /* Never swallow global UI clicks */
}

.ar-map.ar-map--single {
  height: 320px;
  margin: 20px 0;
}
/* fix-build-r1 patch (RB-01): no room id = no empty tile box; Leaflet adds .leaflet-container before it measures */
body[data-hub-layer] #ar-map.ar-map--single:not(.leaflet-container) { display: none }

.ar-map-fallback-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--tile);
  border: 1px solid var(--seam);
  color: var(--ash);
  padding: 14px 20px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
  text-align: center;
}

/* Floating Side Card */
/* Floating Side Card */
.ar-card {
  position: absolute;
  top: 16px;
  right: 16px;
  width: min(380px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: rgba(13, 13, 12, 0.96);
  border: 1px solid var(--seam-strong);
  border-radius: 0; /* Brand restraint: zero radius */
  box-shadow: none; /* Brand restraint: zero shadow */
  z-index: 5;
  box-sizing: border-box;
}

.ar-card[hidden] {
  display: none !important;
}

.ar-card__inner,
.ar-card-inner {
  padding: 20px;
  position: relative;
}

.ar-card__close,
.ar-card-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--ash);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.ar-card__close:hover,
.ar-card-close:hover {
  color: var(--salt);
}

.ar-card-header {
  margin-bottom: 14px;
}

.ar-card__badges,
.ar-card-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ar-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
}

.ar-badge.unclaimed {
  border: 1px solid var(--canvas-gold);
  color: var(--canvas-gold);
  background: rgba(226, 167, 44, 0.08);
}

.ar-badge.claimed {
  border: 1px solid var(--green-ink);
  color: var(--green-ink);
  background: rgba(47, 143, 91, 0.1);
}

.ar-badge.category {
  border: 1px solid var(--seam-strong);
  color: var(--ash);
}

.ar-card__name,
.ar-card-name {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--salt);
  margin: 0 0 4px 0;
}

.ar-card__place,
.ar-card-location {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ash);
  margin-bottom: 14px;
}

.ar-card__source {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ash);
  margin-bottom: 12px;
}

.ar-card__source a {
  color: var(--salt);
  text-decoration: underline;
}

.ar-card__site {
  font-family: var(--mono);
  font-size: 12px;
  margin-bottom: 14px;
}

.ar-card__site a {
  color: var(--canvas-gold);
  text-decoration: none;
}

.ar-card__site a:hover {
  text-decoration: underline;
}

.ar-card-notice {
  background: rgba(161, 47, 40, 0.08);
  border-left: 3px solid var(--red-ink);
  padding: 10px 12px;
  margin-bottom: 16px;
}

.ar-card-notice.ar-card-notice--claimed {
  background: rgba(28, 91, 58, 0.08);
  border-left-color: var(--green-ink);
}

.ar-notice-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--red-ink);
  font-weight: 500;
  margin-bottom: 2px;
}

.ar-notice-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--salt);
  margin: 0;
}

.ar-card__actions,
.ar-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ar-card__line {
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  color: var(--ash);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

/* Modal Safety Gate & System (client-core) */
.ar-modal[hidden] {
  display: none !important;
}

.ar-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ar-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.ar-modal__panel {
  position: relative;
  max-width: 520px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--tile, #0d0d0c);
  border: 1px solid var(--seam-strong, #272725);
  border-radius: 0; /* Brand restraint: zero radius */
  box-shadow: none; /* Brand restraint: zero shadow */
  padding: 24px;
  box-sizing: border-box;
}

.ar-modal__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 20px;
  color: var(--salt);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ar-modal__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ar-modal__tab {
  background: var(--tile);
  border: 1px solid var(--seam);
  border-radius: 0;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ash);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ar-modal__tab:hover {
  border-color: var(--canvas-gold);
  color: var(--salt);
}

.ar-modal__tab[aria-selected="true"],
.ar-modal__tab.active {
  border-color: var(--canvas-gold);
  color: var(--canvas-gold);
  background: rgba(226, 167, 44, 0.08);
  font-weight: 600;
}

.ar-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--ash);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.ar-modal__close:hover {
  color: var(--salt);
}

html.ar-modal-open {
  overflow: hidden;
}

.ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  text-align: center;
}

.ar-btn-claim {
  background: var(--canvas-red);
  color: var(--salt);
  border: 1px solid var(--canvas-red);
}

.ar-btn-claim:hover {
  background: var(--void);
  border-color: var(--red-ink);
  color: var(--salt);
}

.ar-btn-bid {
  background: transparent;
  border: 1px solid var(--seam-strong);
  color: var(--salt);
}

.ar-btn-bid:hover {
  border-color: var(--canvas-gold);
  color: var(--canvas-gold);
}

.ar-provenance-box {
  background: #090908;
  border: 1px solid var(--seam);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ash);
  border-radius: 0;
}

.ar-provenance-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ar-provenance-val {
  color: var(--salt);
}

/* Stat Counters */
.ar-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--seam);
  border-bottom: 1px solid var(--seam);
  margin-bottom: 40px;
}

@media (max-width: 680px) {
  .ar-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .ar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ar-row-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
}

.ar-stat-box {
  border-left: 2px solid var(--canvas-gold);
  padding-left: 12px;
}

.ar-stat-box:nth-child(2) {
  border-left-color: var(--green-ink);
}

.ar-stat-box:nth-child(3) {
  border-left-color: var(--red-ink);
}

.ar-stat-box:nth-child(4) {
  border-left-color: var(--canvas-gold);
}

.ar-stat-num {
  font-family: var(--mono);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--salt);
  line-height: 1;
  margin-bottom: 4px;
}

.ar-stat-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ash);
  letter-spacing: 0.08em;
}

/* Server-Rendered Accessible List (#ar-list) */
.ar-list {
  list-style: none;
  margin: 0 0 48px 0;
  padding: 0;
  border-top: 1px solid var(--seam);
}

.ar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--seam);
  font-family: var(--body);
}

.ar-row a {
  font-weight: 500;
  color: var(--salt);
  text-decoration: none;
  transition: color 0.2s;
}

.ar-row a:hover {
  color: var(--canvas-gold);
}

.ar-row-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ash);
  display: flex;
  align-items: center;
  gap: 12px;
}

.ar-row:focus-visible {
  outline: 2px solid var(--canvas-gold);
  outline-offset: 2px;
}

.ar-row--empty {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ash);
  padding: 16px 0;
  justify-content: flex-start;
}

/* Search Results Dropdown (#ar-search-results) */
#ar-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--tile, #0d0d0c);
  border: 1px solid var(--seam-strong, #272725);
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  box-sizing: border-box;
}

#ar-search-results[hidden] {
  display: none !important;
}

#ar-search-results li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--seam, #1f1f1d);
}

#ar-search-results li:last-child {
  border-bottom: none;
}

#ar-search-results li.is-active,
#ar-search-results li[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--canvas-red, #c0392b);
}

.ar-search__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 14px;
  color: var(--salt, #f8f8f6);
  text-align: left;
  cursor: pointer;
  font-family: var(--body, sans-serif);
  font-size: 13px;
  transition: background 0.15s ease;
}

.ar-search__result:hover {
  background: rgba(226, 167, 44, 0.08);
}

.ar-search__label {
  font-weight: 500;
}

.ar-search__sub {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--ash, #8c8c89);
}

.ar-search__result:disabled,
.ar-search__result[disabled] {
  color: var(--ash, #8c8c89);
  cursor: default;
  background: transparent;
}

/* Leaflet Custom DivIcon Markers & Shards */
.ar-marker-wrap {
  background: transparent;
  border: none;
}

.ar-marker-wrap.ar-ghost-marker,
.ar-ghost-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.ar-ghost-marker.unclaimed {
  border: 2px solid var(--canvas-gold);
  background: rgba(11, 11, 10, 0.85);
  box-shadow: none;
}

.ar-ghost-marker.unclaimed::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--canvas-gold);
}

.ar-ghost-marker.claimed {
  background: var(--canvas-gold);
  border: 2px solid var(--salt);
  box-shadow: none;
}

.ar-ghost-marker:hover {
  transform: scale(1.35);
  border-color: var(--red-ink);
  box-shadow: none;
}

.ar-ghost-marker.selected {
  transform: scale(1.4);
  border-color: var(--red-ink);
  box-shadow: none;
}

/* Role modifier hooks */
.ar-marker--venue { border-color: var(--canvas-gold); }
.ar-marker--artist { border-color: var(--canvas-red); }
.ar-marker--promoter { border-color: var(--canvas-green); }
.ar-marker--agency { border-color: var(--canvas-gold); }
.ar-marker--ticketing { border-color: var(--canvas-gold); }
.ar-marker--audience { border-color: var(--salt); }

/* World regime: one aggregate per country */
.ar-marker-wrap.ar-agg-wrap,
.ar-agg-wrap {
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar-agg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--void, #080808);
  border: 1px solid var(--canvas-gold, #e2a72c);
  color: var(--salt, #f8f8f6);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}

.ar-agg b {
  font-family: var(--mono, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--salt, #f8f8f6);
}

.ar-agg:hover {
  filter: brightness(1.25);
  border-color: var(--canvas-gold, #e2a72c);
}

/* Cell regime: cluster marker */
.ar-cluster-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(226, 167, 44, 0.15);
  border: 1px solid var(--canvas-gold, #e2a72c);
  color: var(--canvas-gold, #e2a72c);
  cursor: pointer;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}

.ar-cluster-marker b {
  font-family: var(--mono, monospace);
  font-weight: 700;
  line-height: 1;
}

.ar-cluster-marker.sm {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.ar-cluster-marker.md {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.ar-cluster-marker.lg {
  width: 46px;
  height: 46px;
  font-size: 13px;
}

.ar-cluster-marker:hover {
  filter: brightness(1.2);
  border-color: var(--canvas-gold, #e2a72c);
}

/* Near Me Marker */
.ar-you-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--salt, #f8f8f6);
  background: var(--canvas-green, #27ae60);
  box-sizing: border-box;
  box-shadow: none;
}

#ar-near-me[aria-busy="true"] {
  opacity: 0.5;
  cursor: wait;
}

/* Honest status & map notice lines */
.ar-map-notice {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(13, 13, 12, 0.92);
  border: 1px solid var(--seam-strong, #272725);
  padding: 8px 12px;
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--salt, #f8f8f6);
  z-index: 1000;
  box-sizing: border-box;
}

.ar-map-status {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--ash, #8c8c89);
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.4;
}

/* MarkerCluster custom styling */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(226, 167, 44, 0.2) !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: var(--canvas-gold) !important;
  color: var(--ink-on-gold) !important;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}

/* Leaflet Container Tuning */
.leaflet-container {
  background: #090908 !important;
  font-family: var(--body) !important;
}

.leaflet-bar a {
  background-color: var(--tile) !important;
  color: var(--salt) !important;
  border-bottom: 1px solid var(--seam) !important;
}

.leaflet-bar a:hover {
  background-color: #1a1a18 !important;
  color: var(--canvas-gold) !important;
}

.leaflet-control-attribution {
  background: rgba(11, 11, 10, 0.85) !important;
  color: var(--ash) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a {
  color: var(--ash) !important;
}

/* Leaflet Dark Popup Styles */
.leaflet-popup-content-wrapper {
  background: var(--tile, #0d0d0c) !important;
  color: var(--salt, #f8f8f6) !important;
  border: 1px solid var(--seam, #272725) !important;
  border-radius: 0 !important;
  box-shadow: none;
}

.leaflet-popup-tip {
  background: var(--tile, #0d0d0c) !important;
}

.leaflet-popup-content {
  margin: 10px 14px !important;
  line-height: 1.4 !important;
  color: var(--salt, #f8f8f6) !important;
}

.leaflet-popup-close-button {
  color: var(--ash, #8c8c89) !important;
}

/* MARKED LAYER ar-v5-20260912 (d5 tiles): OSM standard tiles rendered dark; CARTO dark_all watermarks API KEY REQUIRED since 2026-09-12 */
.ar-map .leaflet-control-attribution{background:rgba(0,0,0,.72);color:#8c8c89;font-size:10px}
.ar-map .leaflet-control-attribution a{color:#e2a72c}

/* ===========================================================================================================
   MARKED LAYER hub-brand-56 nodes-map (2026-09-14): the map ground, the vinyl nodes, the desk panel, search + roles.
   ROUND2-BRIEF paper palette (0c, 2026-09-13) refuted by owner 2026-09-14: THE ART OF THE DIGITAL A&R IS OFF BRAND, FIX THAT.
   Ground: OSM standard tiles (the ODbL line stays) turned warm black by ONE filter on the tile pane, never animated.
   Nodes: M3 vinyl + M2 45 adapter (assets/ar/markers/node-*.svg) as divIcon <svg><use>; the adapter turns at 45 rpm.
   Leaflet's own stylesheet arrives on demand AFTER this file and hub.css follows it in the bundle, so every rule that
   must win is scoped to an id (#hub-map, #ar-map, #hub-desk, #hub-home-map) instead of !important where possible.
   =========================================================================================================== */
.hub-map .leaflet-tile-pane,
.ar-map .leaflet-tile-pane { filter: grayscale(1) invert(1) sepia(.55) saturate(.85) brightness(.74) contrast(1.18); }
#hub-home-map .hub-map { border: 1px solid var(--seam-strong); background: #0b0a08; }
#hub-map [data-hub-map-state] { font: 400 .72rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }

#hub-map .leaflet-bar, #ar-map .leaflet-bar { border: 1px solid var(--seam-strong); border-radius: 0; box-shadow: none; }
#hub-map .leaflet-bar a, #ar-map .leaflet-bar a {
  width: 44px; height: 44px; border-radius: 0;
  background: var(--void) !important; color: var(--salt) !important;
  font: 400 20px/44px var(--mono); border-bottom: 1px solid var(--seam) !important;
  transition: background-color 120ms var(--ease-arrive), color 120ms var(--ease-arrive);
}
#hub-map .leaflet-bar a:last-child, #ar-map .leaflet-bar a:last-child { border-bottom: 0 !important; }
#hub-map .leaflet-bar a:hover, #hub-map .leaflet-bar a:focus-visible,
#ar-map .leaflet-bar a:hover, #ar-map .leaflet-bar a:focus-visible { background: var(--canvas-red) !important; color: var(--salt) !important; }
#hub-map .leaflet-bar a.leaflet-disabled, #ar-map .leaflet-bar a.leaflet-disabled { color: var(--ash) !important; background: var(--void) !important; }
#hub-map .leaflet-control-attribution, #ar-map .leaflet-control-attribution {
  background: rgba(0, 0, 0, .8) !important; color: var(--ash) !important;
  font: 400 10px/1.6 var(--mono) !important; letter-spacing: .04em; padding: 1px 8px;
}
#hub-map .leaflet-control-attribution a, #ar-map .leaflet-control-attribution a { color: var(--salt) !important; text-decoration: underline; text-underline-offset: 2px; }
#hub-map .leaflet-tooltip, #ar-map .leaflet-tooltip {
  background: var(--void); color: var(--salt); border: 1px solid var(--seam-strong); border-radius: 0; box-shadow: none;
  padding: 5px 8px; font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
#hub-map .leaflet-tooltip-top::before, #ar-map .leaflet-tooltip-top::before { border-top-color: var(--seam-strong); }

/* the nodes */
.hub-node-wrap { background: none; border: 0; }
.hub-node-wrap:focus { outline: none; }
.hub-node { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; transition: transform 120ms var(--ease-arrive); }
.hub-node__art { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.hub-node-wrap:hover .hub-node, .hub-node-wrap:focus-visible .hub-node { transform: scale(1.22); }
.hub-node-wrap:focus-visible .hub-node { outline: 2px solid var(--canvas-gold); outline-offset: 3px; }
.hub-node--unclaimed::after, .hub-node--claimed::after {
  content: ""; position: absolute; inset: -3px; border: 1.5px solid var(--red-ink); border-radius: 50%;
  opacity: 0; transition: opacity 120ms var(--ease-arrive); pointer-events: none;
}
.hub-node-wrap:hover .hub-node::after, .hub-node-wrap:focus-visible .hub-node::after { opacity: 1; }
.hub-node__n {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  padding: 1px 5px; background: var(--void); border: 1px solid var(--seam-strong); color: var(--salt);
  font: 500 10px/1.3 var(--mono); letter-spacing: .04em; white-space: nowrap; pointer-events: none;
}
.hub-node-wrap:hover .hub-node__n, .hub-node-wrap:focus-visible .hub-node__n { border-color: var(--red-ink); }
.hub-node.is-drop { animation: hub-node-drop 360ms var(--ease-arrive) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.hub-node--selected .hub-node__art { animation: hub-node-spin 1333ms linear infinite; }
.hub-node--selected::after {
  content: ""; position: absolute; inset: -6px; border: 2px solid var(--canvas-gold); border-radius: 50%;
  animation: hub-node-pulse 1600ms var(--ease-arrive) infinite; pointer-events: none;
}
@keyframes hub-node-drop { from { opacity: 0; transform: translateY(-18px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes hub-node-spin { to { transform: rotate(360deg); } }
@keyframes hub-node-pulse { from { transform: scale(.8); opacity: .95; } to { transform: scale(1.75); opacity: 0; } }

/* the desk: tile, tricolor top rule (a stub while empty, the full flag once a room is on it), display name, mono place */
#hub-desk { background: var(--tile); border: 1px solid var(--seam); border-radius: 0; box-shadow: none; padding: 22px 20px 20px; }
#hub-desk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--canvas-red) 0 33.33%, var(--canvas-gold) 33.33% 66.66%, var(--canvas-green) 66.66% 100%);
  transform-origin: 0 50%; transform: scaleX(.2); opacity: .55;
  transition: transform 360ms var(--ease-arrive), opacity 360ms var(--ease-arrive);
}
#hub-desk[data-filled="1"]::before { transform: none; opacity: 1; }
#hub-desk .hub-desk__eyebrow { color: var(--canvas-gold); font: 400 .7rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--seam); }
#hub-desk [data-hub-desk-state] { font: 400 .8rem/1.6 var(--mono); letter-spacing: .02em; color: var(--ash); }
#hub-desk .hub-desk__name {
  margin: 8px 0 10px; color: var(--salt); overflow-wrap: anywhere;
  font: 800 clamp(34px, 3.4vw, 50px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em;
  animation: hub-desk-in 360ms var(--ease-arrive) backwards;
}
#hub-desk .hub-desk__place { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ash); font: 400 .72rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#hub-desk .hub-desk__node { flex: none; width: 24px; height: 24px; }
#hub-desk .hub-desk__state { border-radius: 0; padding: 5px 9px; border: 1px solid var(--seam-strong); color: var(--ash); font: 400 .7rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
#hub-desk .hub-desk__state[data-state="CLAIMED"] { border-color: var(--green-ink); color: var(--green-ink); }
#hub-desk .hub-desk__state[data-state="UNCLAIMED"] { border-color: var(--canvas-gold); color: var(--canvas-gold); }
@keyframes hub-desk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { #hub-desk { position: relative; } }

/* search + role chips in the site language: zero radius, mono, 44px targets, red answers a hover, the flag marks the pressed one */
#hub-home-map .hub-search__label { color: var(--canvas-gold); font: 400 .7rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
#hub-search-input {
  min-height: 44px; padding: 10px 14px; border-radius: 0; -webkit-appearance: none; appearance: none;
  background: var(--void); color: var(--salt); border: 1px solid var(--seam-strong);
  font: 400 .92rem/1.2 var(--mono); letter-spacing: .03em; transition: border-color 120ms var(--ease-arrive);
}
#hub-search-input::placeholder { color: var(--ash); opacity: 1; }
#hub-search-input:hover { border-color: var(--salt); }
#hub-search-input:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: 2px; border-color: var(--canvas-gold); }
#hub-home-map .hub-roles { gap: 6px; }
#hub-home-map .hub-chip {
  position: relative; min-height: 44px; padding: 0 14px; border: 1px solid var(--seam); border-radius: 0; box-shadow: none;
  background: transparent; color: var(--ash); font: 400 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: color 120ms var(--ease-arrive), border-color 120ms var(--ease-arrive), transform 120ms var(--ease-arrive);
}
#hub-home-map .hub-chip:hover, #hub-home-map .hub-chip:focus-visible { color: var(--salt); border-color: var(--red-ink); }
#hub-home-map .hub-chip:active { transform: translateY(1px); }
#hub-home-map .hub-chip[aria-pressed="true"] { color: var(--salt); border-color: var(--seam-strong); box-shadow: none; }
#hub-home-map .hub-chip[aria-pressed="true"]::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--canvas-red) 0 33.33%, var(--canvas-gold) 33.33% 66.66%, var(--canvas-green) 66.66% 100%);
}
@media (max-width: 600px) {
  #hub-home-map .hub-roles { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  #hub-home-map .hub-chip { flex: none; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-node, .hub-node.is-drop, .hub-node--selected .hub-node__art, .hub-node--selected::after,
  #hub-desk::before, #hub-desk .hub-desk__name, #hub-home-map .hub-chip, #hub-search-input, #hub-map .leaflet-bar a { animation: none !important; transition: none !important; }
  .hub-node--selected::after { opacity: 1; transform: none; }
}