/* ═══════════════════════════════════════════════════════════════════════════
   The workspace (Atlas, 2026-09-23): one full-bleed map, chrome floating over
   it. Tokens and components are atlas.css's; this file is the layout and the
   few pieces only the workspace draws (rows, hits, marks, the sheet).

   Desktop: a 420px column on the left (search, chips, then the list or one
   card), figures top-right, the legend bottom-right. Phone: the search pinned
   at the top, the list or card in a bottom sheet at peek / half / full.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body.ws-body { height: 100%; }
body.ws-body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font: 400 var(--step-0) / var(--lh-ui) var(--font-ui);
  overflow: hidden;
}
/* Below the site's bar (`partials/_nav.html`), which the page shares. */
.ws { position: fixed; inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 0 0; }
/* Its own stacking context: whatever the map draws inside itself (the hover
   tip, MapLibre's controls) stays beneath the column and the phone's sheet,
   whatever z-index it carries within the map. */
.ws__map { position: absolute; inset: 0; isolation: isolate; }
.ws button { font: inherit; }

/* ── The left column ─────────────────────────────────────────────────────── */
.ws__col {
  position: absolute;
  top: var(--s-4); left: var(--s-4); bottom: var(--s-4);
  width: 420px;
  display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none;
  z-index: 3;
}
.ws__col > * { pointer-events: auto; }
.ws__top { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }

.ws__omnibox { display: flex; align-items: center; gap: var(--s-2); }
.ws__omnibox input { flex: 1; min-width: 0; }

.ws__chipbar { display: flex; align-items: center; gap: var(--s-1); }
.ws__chips { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex: 1; min-width: 0; }
.ws__chipbar .a-chip--filters { flex: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 1px 2px rgba(11, 27, 59, .08); border-color: transparent; background: var(--paper); }
.ws__chipbar .a-chip--filters[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.ws__overlays { border: 0; margin: 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--hairline); display: grid; gap: var(--s-2); }
.ws__note--inline { display: block; margin: 0; }
.ws__chips::-webkit-scrollbar { display: none; }
.ws__chips .a-chip { box-shadow: 0 1px 2px rgba(11, 27, 59, .08); border-color: transparent; background: var(--paper); flex: none; }
.ws__chips .a-chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

.ws__filters-pop { position: absolute; top: 100%; left: 0; right: 0; z-index: 4; margin-top: var(--s-2); padding: var(--s-4); max-height: 60vh; overflow-y: auto; }
.ws__filters { display: grid; gap: var(--s-3); }
.a-field--check { display: flex; align-items: center; gap: var(--s-2); }
.ws__locked { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); text-decoration: none; }

.ws__search { position: absolute; top: 52px; left: 0; right: 0; z-index: 6; }
.ws__search:not(:empty) { background: var(--paper); border-radius: var(--r-m); box-shadow: var(--lift-pop); padding: var(--s-2); max-height: 60vh; overflow-y: auto; }
.ws__hits, .ws__hits ul { list-style: none; margin: 0; padding: 0; }
.ws__hit-head { display: block; padding: 6px 10px 2px; font-size: var(--step--1); color: var(--ink-3); }
.ws__hit {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
}
.ws__hit:hover, .ws__hit:focus-visible { background: var(--chalk-2); outline: none; }
.ws__hit-name { font-weight: 500; }
.ws__hit-meta { font-size: var(--step--1); color: var(--ink-3); }

/* ── The panel: the list, or one card ────────────────────────────────────── */
.ws__panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.ws__handle { display: none; }

.ws__list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-2); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.ws__count { margin: 0; color: var(--ink-2); }
.ws__sort select { max-width: 11rem; }
.ws__rows { list-style: none; margin: 0; padding: 0 var(--s-2) var(--s-2); }
.ws__row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 10px var(--s-3); border: 0; border-radius: var(--r-s);
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.ws__row:hover, .ws__row:focus-visible { background: var(--chalk); outline: none; }
.ws__row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws__row-name { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws__row-meta { font-size: var(--step--1); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.ws__row-fig { flex: none; color: var(--ink-2); font-size: var(--step--1); }
.ws__row-bar { width: 56px; flex: none; }
.ws__score {
  flex: none; min-width: 2.25rem; padding: 3px 0; border-radius: var(--r-xs);
  text-align: center; font: 600 var(--step--1)/1.2 var(--font-ui); font-variant-numeric: tabular-nums;
  background: var(--chalk-2); color: var(--ink-2);
}
.ws__score[data-band="1"] { background: var(--turf-1); color: #fff; }
.ws__score[data-band="2"] { background: var(--turf-2); color: #fff; }
.ws__score[data-band="3"] { background: var(--turf-3); color: #fff; }
.ws__score[data-band="4"] { background: var(--turf-4); color: #fff; }
.ws__score[data-band="5"] { background: var(--turf-5); color: #fff; }
.ws__pager { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-5) var(--s-4); }
.ws__upsell { padding: 0 var(--s-5) var(--s-4); margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.ws__card .ws__upsell { padding: var(--s-3) 0 0; }
.ws__empty { padding: var(--s-5); margin: 0; color: var(--ink-2); }
.ws__note { margin: var(--s-2) 0 0; font-size: var(--step--1); color: var(--ink-3); }
.ws__prose { margin: 0; color: var(--ink-2); line-height: var(--lh-prose); }
.ws__prose--quote { white-space: pre-line; }

/* A card: text first, sections split by hairlines. */
.card-head { padding: var(--s-5) var(--s-5) var(--s-4); }
.card-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.card-head__text { flex: 1 1 auto; min-width: 0; }
.card-head__photo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-s); object-fit: cover; background: var(--chalk-2); }
.card-head__name { margin: 0; font-size: var(--step-4); }
.card-head__where { margin: 2px 0 0; color: var(--ink-3); }
.card-head__tools { display: flex; gap: 2px; }
.card-head .a-card__verdict { margin-top: var(--s-4); }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--chalk-2); color: var(--ink); }
.ws__star.is-on { color: var(--signal); }
.a-stats--2 { grid-template-columns: repeat(2, 1fr); }
.ws__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ws__peers { list-style: none; margin: 0; padding: 0; }
.ws__peers li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 0; }
.ws__peers li + li { border-top: 1px solid var(--hairline); }
.ws__spark { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-top: var(--s-4); }
.ws__spark span { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--occ-3); }
.ws__rhythm { display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(7, 8px); gap: 1px; }
.ws__rhythm span { border-radius: 1px; background: var(--occ-5); opacity: calc(0.12 + var(--heat, 0) * 0.88); }
.ws__rhythm span.is-peak { box-shadow: inset 0 0 0 1px var(--ink); }
.ws__status { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-weight: 500; }
.a-skel--title span { height: 26px; width: 60%; }

.ws__bands tbody tr { cursor: pointer; }
.ws__bands tbody tr:hover td { background: var(--chalk); }
.ws__bands tr.is-on td { font-weight: 600; }
.ws__band-btn { border: 0; padding: 0; background: none; color: inherit; font-weight: inherit; cursor: pointer; }
.ws__bands tr.is-on .ws__band-btn::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ink); vertical-align: 2px; }

/* The site card's sections. */
.ws__club { display: flex; align-items: center; gap: var(--s-3); padding: 8px 0; }
.ws__club + .ws__club { border-top: 1px solid var(--hairline); }
.ws__club-main { flex: 1; min-width: 0; }
.ws__club-name { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws__club-meta { font-size: var(--step--1); color: var(--ink-3); }
.ws__club-bar { width: 72px; flex: none; }
.ws__club-num { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.ws__dir { flex: none; color: var(--ink-3); font-size: var(--step-0); }
.ws__dir--up { color: var(--turf-4); }
.ws__dir--down { color: var(--signal); }
.ws__proj { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.ws__proj-in { display: flex; flex-direction: column; padding: var(--s-2) var(--s-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-s); cursor: text; }
.ws__proj-in:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.ws__proj-in input { border: 0; padding: 0; background: transparent; color: var(--ink); font-size: var(--step-1); font-weight: 600; width: 100%; -moz-appearance: textfield; }
.ws__proj-in input:focus { outline: none; }
.ws__proj-in input::-webkit-outer-spin-button, .ws__proj-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws__proj-in small { color: var(--ink-3); font-size: var(--step--1); }
.ws__proj-out { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.ws__proj-out .a-hero-figure { font-size: var(--step-4); }
.ws__proj-link { margin: var(--s-3) 0 0; }
.ws__note--signal { color: var(--signal); }
.ws__saved { display: inline-flex; align-items: center; min-height: 36px; color: var(--turf-4); font-weight: 500; }

/* The market cards. */
.ws__lede { margin: 0 0 var(--s-3); color: var(--ink); line-height: var(--lh-prose); }
.ws__chart { margin: 0 0 var(--s-3); }
.ws__chart-box { position: relative; }
.ws__chart-title { margin: var(--s-3) 0 var(--s-1); font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }
.ws__rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ws__rank li { counter-increment: rank; }
.ws__rank li + li, .ws__peers li + li { border-top: 1px solid var(--hairline); }
.ws__rank-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; padding: 8px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ws__rank .ws__rank-row::before { content: counter(rank); min-width: 1.25rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ws__rank-row > span:first-of-type { flex: 1; }
.ws__rank-row:hover { color: var(--court); }
.ws__figures-link { margin-top: var(--s-2); padding: 0; border: 0; background: none; color: var(--court); font: 500 var(--step--1)/1.4 var(--font-ui); cursor: pointer; }
.ws__figures-link:hover { text-decoration: underline; }

/* The histogram in the filters. */
.ws__hist-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; margin-top: var(--s-1); }
.ws__hist-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; border: 0; padding: 0; background: none; cursor: pointer; }
.ws__hist-bar:disabled { cursor: default; }
.ws__hist-fill { display: block; border-radius: var(--r-xs) var(--r-xs) 0 0; background: #C3CCD8; transition: background var(--dur-quick) var(--motion-ease); }
.ws__hist-bar:not(:disabled):hover .ws__hist-fill { background: var(--turf-1); }
.ws__hist-bar.is-on .ws__hist-fill { background: var(--turf-3); }
.ws__hist-label { font-size: 11px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }

/* The compare tray and table. */
.ws__tray { position: absolute; left: calc(420px + var(--s-4) * 2); right: calc(220px + var(--s-4) * 2); bottom: var(--s-4); z-index: 3; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); max-width: 720px; margin-inline: auto; }
.ws__tray-items { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ws__tray-item { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; border-radius: var(--r-s); background: var(--chalk-2); white-space: nowrap; }
.ws__tray-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; font-size: var(--step--1); }
.ws__tray-x { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.ws__tray-x:hover { color: var(--ink); }
.ws__card--compare { }
.ws__cmp-scroll { overflow-x: auto; margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
.ws__cmp { min-width: 100%; font-variant-numeric: tabular-nums; }
.ws__cmp th[scope="row"] { font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.ws__cmp td { text-align: right; white-space: nowrap; }
.ws__cmp td.is-best { font-weight: 700; color: var(--turf-5); }
.ws__cmp-name { display: block; border: 0; padding: 0; background: none; color: var(--ink); font: 600 var(--step-0)/1.3 var(--font-ui); text-align: right; cursor: pointer; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; margin-left: auto; }
.ws__cmp-name:hover { color: var(--court); }
.ws__cmp thead .a-soft { display: block; font-size: var(--step--1); text-align: right; }

/* Legend and list marks: colour plus shape, never colour alone. */
.ws__mark { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 1.5px #fff; margin-right: 6px; vertical-align: -1px; }
.ws__mark--ring { background: #fff; box-shadow: inset 0 0 0 2.5px var(--mark); }
.ws__mark--square { border-radius: 2px; }
.ws__mark--small { width: 7px; height: 7px; }

/* ── Floating over the map ───────────────────────────────────────────────── */
.ws__figures { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 3; width: 300px; padding: var(--s-3) var(--s-4); }
.ws__figures-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.ws__seg { display: inline-flex; padding: 2px; border-radius: var(--r-s); background: var(--chalk-2); }
.ws__seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 5px; font: 500 var(--step--1)/1 var(--font-ui); color: var(--ink-2); cursor: pointer; white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.ws__seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(11, 27, 59, .1); }
.ws__stats { margin-top: var(--s-3); grid-template-columns: repeat(3, 1fr); }
.ws__stats > .ws__note, .ws__stats > .a-skel { grid-column: 1 / -1; margin: 0; }

.ws__legend { position: absolute; right: var(--s-4); bottom: var(--s-8); z-index: 3; width: 220px; padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-3); }
.ws__legend:empty { display: none; }

.ws__tip { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
.ws__tip span { color: var(--ink-2); font-size: var(--step--1); }

.maplibregl-ctrl-bottom-right { margin: 0 var(--s-4) calc(var(--s-8) + 150px) 0; }
.maplibregl-ctrl-group { border-radius: var(--r-m) !important; box-shadow: var(--lift-float) !important; }

/* ── Phone: the sheet ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ws__col { top: var(--s-3); left: var(--s-3); right: var(--s-3); bottom: auto; width: auto; }
  .ws__panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 50dvh;
    border-radius: var(--r-l) var(--r-l) 0 0;
    box-shadow: 0 -8px 28px rgba(11, 27, 59, .14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: height var(--dur-move) var(--motion-ease);
  }
  .ws[data-sheet="peek"] .ws__panel { height: 12dvh; overflow: hidden; }
  .ws[data-sheet="full"] .ws__panel { height: calc(100dvh - var(--nav-h) - var(--s-3)); }
  .ws__handle { display: block; position: sticky; top: 0; z-index: 2; width: 100%; height: 24px; background: var(--paper); border: 0; cursor: grab; touch-action: none; }
  .ws__list-head { top: 24px; }
  .ws__figures, .ws__legend { display: none; }
  .ws__tray { left: var(--s-3); right: var(--s-3); top: 120px; bottom: auto; max-width: none; }
  .card-head { padding-top: var(--s-2); }
  .card-head__name { font-size: var(--step-3); }
  .maplibregl-ctrl-bottom-right { display: none; }
}

/* A comparison needs the width: the column widens while one is open. */
@media (min-width: 769px) {
  .ws__col:has(.ws__card--compare:not([hidden])) { width: min(880px, calc(100vw - 380px)); }
}
@media (min-width: 769px) {
  .ws:has(.ws__card--compare:not([hidden])) .ws__tray { display: none; }
}

/* The site's bar over the map spans the map's width, so the wordmark sits on
   the search column's left edge rather than in a centred page column. */
.ws-body .pn-nav__inner { max-width: none; }