/* SpecEnvoy GDP Atlas — styles. Builds on /style.css design tokens. */

.atlas-wide { max-width: 1100px; }

.crumbs { font-size: 13px; color: var(--muted); margin: -6px 0 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; margin: 0 7px; }

.atlas { --hit: rgba(59,111,224,.30); --hit-h: rgba(59,111,224,.55);
  --sel: #3b6fe0; --match: #ff9f43; --match-soft: rgba(255,159,67,.30);
  margin-top: 8px; }

/* ---------------------------------------------------------------- controls */
.atlas-controls {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px;
}
.ctr-group { display: flex; flex-direction: column; gap: 6px; }
.ctr-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ctr-search { flex: 1 1 240px; position: relative; }

.atlas-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg-btn { background: transparent; color: var(--muted); border: 0; padding: 9px 14px;
  font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.on { background: var(--accent); color: #fff; }
.seg-btn:not(.on):hover { color: var(--ink); background: var(--accent-soft); }

.atlas-toggles { display: flex; gap: 8px; }
.tog { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; min-height: 40px;
  font-size: 14px; color: var(--ink); user-select: none; }
.tog input { accent-color: var(--accent); width: 16px; height: 16px; }
.tog:hover { border-color: var(--accent); }
.tog.is-disabled { opacity: .4; cursor: not-allowed; }
.tog.is-disabled:hover { border-color: var(--border); }
.tog input:disabled { cursor: not-allowed; }

.atlas-search { width: 100%; box-sizing: border-box; padding: 10px 14px; min-height: 42px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 15px; }
.atlas-search:focus { outline: none; border-color: var(--accent); }
.atlas-results { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 6px;
  background: #0f1830; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); max-height: 320px; overflow-y: auto; }
.res-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--ink);
  padding: 11px 14px; font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.res-row:last-child { border-bottom: 0; }
.res-row:hover { background: var(--accent-soft); }
.res-tag { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }

.atlas-play { background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 16px; min-height: 40px; font: inherit; font-size: 14px; cursor: pointer; }
.atlas-play.on { background: var(--heart); }

/* ------------------------------------------------------------ stage layout */
.atlas-stage { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .atlas-stage { grid-template-columns: 1.25fr 1fr; align-items: start; } }

.atlas-mapbox { position: relative; background: #0c1426; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; height: clamp(300px, 54vh, 560px); touch-action: none; }
.atlas-map, .atlas-svg.main { width: 100%; height: 100%; display: block; }
.atlas-svg.main { cursor: grab; }
.atlas-svg.main.grabbing { cursor: grabbing; }

.atlas-svg .nodata { fill: rgba(255,255,255,.05); stroke: #0c1426; stroke-width: .3; }
.atlas-svg .hit { fill: var(--hit); stroke: #0c1426; stroke-width: .3; cursor: pointer; transition: fill .15s; }
.atlas-svg .hit:hover { fill: var(--hit-h); }
.atlas-svg .sel { fill: var(--sel); }
.atlas-marker circle { fill: var(--sel); stroke: #fff; stroke-width: 1.2; cursor: pointer; }
.atlas-marker.sel circle { fill: var(--match); }
/* Halo = stroke painted BEHIND the fill. stroke-width is set per-frame in JS, scaled with the
   font, so the halo stays thin at every zoom. A fixed px width here renders as a bold/smeared
   blob in Firefox once the map is zoomed (Chrome happened to hide it). */
.atlas-marker text { fill: var(--ink); paint-order: stroke; stroke: #0c1426; stroke-linejoin: round;
  font-weight: 600; text-anchor: middle; pointer-events: none;
  font-family: system-ui, sans-serif; }

.atlas-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.atlas-zoom button { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border);
  background: rgba(10,16,32,.85); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.atlas-zoom button:hover { border-color: var(--accent); }
.atlas-playtag { position: absolute; left: 10px; top: 10px; background: rgba(255,93,143,.92);
  color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 8px; max-width: 70%; }

/* --------------------------------------------------------------- panel */
.atlas-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.atlas-hint { color: var(--muted); font-size: 15px; background: var(--card);
  border: 1px dashed var(--border); border-radius: 14px; padding: 22px; text-align: center; }

.atlas-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.atlas-card.subject { border-color: var(--accent); background: var(--accent-soft); }
.atlas-card.match { border-left: 3px solid var(--match); }
.card-head { margin-bottom: 10px; }
.card-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.card-title { margin: 2px 0 0; font-size: 19px; font-weight: 650; line-height: 1.25; }

.atlas-metrics { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.atlas-metrics th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13px;
  padding: 5px 0; white-space: nowrap; }
.atlas-metrics td { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px;
  font-weight: 600; padding: 5px 0; }

.atlas-co, .co-mini { font-size: 13.5px; line-height: 1.5; }
.co-list { list-style: none; margin: 3px 0 0; padding: 0; }
.co-list li { font-size: 13.5px; line-height: 1.5; padding: 1px 0; }
.co-tag, .cos-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.co-what { color: var(--muted); }
.atlas-cos { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.co-mini { color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-gdp { font-weight: 700; white-space: nowrap; }

.atlas-wealth { font-size: 13.5px; padding: 7px 10px; border-radius: 8px; margin: 2px 0 4px;
  background: rgba(255,255,255,.04); }
.atlas-wealth.up strong { color: #5ad19a; }
.atlas-wealth.down strong { color: #ff8585; }
.atlas-wealth.flat strong { color: var(--muted); }

.atlas-mini { background: #0c1426; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; margin-bottom: 10px; }
.atlas-svg.mini { width: 100%; height: 130px; display: block; }
.atlas-svg.mini .mm-dim { fill: rgba(255,255,255,.07); stroke: #0c1426; stroke-width: .3; }
.atlas-svg.mini .mm-hit { fill: var(--match); stroke: #0c1426; stroke-width: .3; }
.atlas-svg.mini .mm-marker { fill: var(--match); stroke: #fff; stroke-width: .6; }

/* --------------------------------------------------------------- footer */
.atlas-foot { color: var(--muted); font-size: 13px; margin-top: 16px; }
.atlas-foot a { color: var(--accent); }

/* --------------------------------------------------------------- modal */
.atlas-modal { position: fixed; inset: 0; z-index: 100; background: rgba(4,8,18,.7);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.atlas-modal-box { background: #0f1830; border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px; max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto; }
.atlas-modal-box h3 { margin: 0 0 10px; }
.atlas-modal-box ul { margin: 6px 0 14px; padding-left: 20px; color: var(--muted); font-size: 14px; }
.atlas-modal-box .muted { font-size: 13px; }
.atlas-modal-close { background: var(--accent); color: #fff; border: 0; border-radius: 9px;
  padding: 9px 18px; font: inherit; cursor: pointer; margin-top: 6px; }

/* ------------------------------------------- recording: kiosk + tour mode
 * Activated by ?kiosk=1 / ?tour=… (see atlas.js). Strips the site chrome so a
 * headless capture sees only the product, edge-to-edge. Not used in normal browsing. */
body.atlas-kiosk { background: #0a0f1f; }
body.atlas-kiosk .topbar,
body.atlas-kiosk .crumbs,
body.atlas-kiosk .hero-title,
body.atlas-kiosk .tagline,
body.atlas-kiosk .note,
body.atlas-kiosk .atlas-foot,
body.atlas-kiosk footer { display: none !important; }
body.atlas-kiosk .wrap.atlas-wide { max-width: none; margin: 0; padding: 20px; }
body.atlas-kiosk .atlas { margin-top: 0; }
body.atlas-kiosk .atlas-mapbox { height: clamp(360px, 92vh, 1400px); }
/* during an auto-tour the controls are noise — the tour drives the app itself */
body.atlas-tour .atlas-controls,
body.atlas-tour .atlas-playtag { display: none !important; }

/* -------------------------------------------------- overflow safeguards */
.atlas, .atlas-stage > *, .atlas-panel, .atlas-mapbox, .atlas-card { min-width: 0; }
.atlas-metrics td { overflow-wrap: anywhere; }

/* -------------------------------------------------------- mobile layout */
@media (max-width: 600px) {
  .atlas-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .ctr-group { width: 100%; }
  .atlas-seg { width: 100%; }
  .seg-btn { flex: 1; }
  .atlas-toggles { width: 100%; }
  .tog { flex: 1; justify-content: center; }
  .atlas-play { width: 100%; }
  .ctr-search { flex-basis: auto; }
}