/**
 * Atlas - Sectors view. (The Terminal | Sectors | Trend tabs are top-bar chrome now:
 * see atlas-chrome.css.)
 *
 * The view is an overlay over the chart area, not a replacement of it: the charts keep their
 * feeds and their layout underneath, so switching back is instant and nothing re-measures.
 * Colours are Atlas's own tokens; a verdict is always carried by a word AND a colour.
 */

/* -- the view -------------------------------------------------------------- */

.at-sec { position: fixed; top: var(--at-top); left: 0; right: 0; bottom: var(--at-status-h, 0px); z-index: var(--z-view);
  background: var(--at-bg); overflow-y: auto; overscroll-behavior: contain; }
.at-sec-in { display: grid; gap: var(--a-sp-5); min-width: 0;
  padding: var(--a-sp-5) max(16px, env(safe-area-inset-right)) var(--a-sp-7) max(16px, env(safe-area-inset-left)); }

.at-sec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-sp-4) var(--a-sp-6); }
.at-sec-title { display: grid; gap: var(--a-sp-2); margin-right: auto; min-width: 0; }
.at-sec-title h1 { margin: 0; font: var(--a-fw-semibold) var(--a-fs-lg)/var(--a-lh-tight) var(--at-sans); letter-spacing: .01em; color: var(--at-text); }
.at-sec-stamp { font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-tight) var(--at-mono); color: var(--at-dimmer); font-variant-numeric: tabular-nums; }
.at-sec-stamp b { color: var(--at-dim); font-weight: var(--a-fw-medium); }
.at-sec-stamp .live { display: inline-block; width: 6px; height: 6px; border-radius: var(--a-r-pill); margin-right: var(--a-sp-2);
  background: var(--at-up); box-shadow: 0 0 0 3px var(--a-up-t2); vertical-align: 1px; }
.at-sec-stamp .live.stale { background: var(--at-warn); box-shadow: 0 0 0 3px var(--a-warn-t2); }

.at-sec-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-sp-4); }
.at-seg { display: flex; padding: var(--a-sp-1); gap: var(--a-sp-1); border: 1px solid var(--at-line); border-radius: var(--a-r-md); background: var(--at-panel); }
.at-seg button { height: 23px; padding: 0 var(--a-sp-5); border: 0; border-radius: var(--a-r-md); background: transparent;
  color: var(--at-dim); font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--at-sans); cursor: pointer; }
.at-seg button:hover { color: var(--at-text); }
.at-seg button.on { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.at-fld { display: flex; align-items: center; gap: var(--a-sp-4); font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--at-sans);
  color: var(--at-dimmer); text-transform: uppercase; letter-spacing: .06em; }
.at-fld select, .at-sec-q { height: 27px; border: 1px solid var(--at-line); border-radius: var(--a-r-sm);
  background: var(--at-panel); color: var(--at-text); font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--at-sans); padding: 0 var(--a-sp-4); }
.at-fld select { padding-right: var(--a-sp-2); cursor: pointer; }
.at-sec-q { width: 150px; }
.at-sec-q::placeholder { color: var(--at-dimmer); }
.at-chk { display: flex; align-items: center; gap: var(--a-sp-4); font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--at-sans); color: var(--at-dim); cursor: pointer; }
.at-chk input { accent-color: var(--at-accent); margin: 0; }

/* -- map + cards ----------------------------------------------------------- */

.at-sec-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--a-sp-5); }
.at-sec-panel { background: var(--at-panel); border: 1px solid var(--at-line); border-radius: var(--a-r-md); min-width: 0; }
.at-sec-h { display: flex; align-items: baseline; gap: var(--a-sp-5); padding: var(--a-sp-4) var(--a-sp-5) 0;
  font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--at-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--at-dim); }
.at-sec-h span { font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-snug) var(--at-sans); letter-spacing: 0; text-transform: none; color: var(--at-dimmer); }

.at-map { position: relative; height: 318px; }
.at-map svg { display: block; width: 100%; height: 100%; }
.at-map .ax { stroke: var(--at-line-2); stroke-width: 1; }
.at-map .grid { stroke: var(--at-line); stroke-width: 1; }
.at-map .thr { stroke: var(--a-warn-t3); stroke-width: 1; stroke-dasharray: 3 4; }
.at-map .tk { fill: var(--at-dimmer); font: var(--a-fw-medium) var(--a-fs-2xs) var(--at-mono); font-variant-numeric: tabular-nums; }
.at-map .ql { fill: var(--at-dimmer); font: var(--a-fw-semibold) var(--a-fs-2xs) var(--at-sans); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.at-map .lbl { fill: var(--at-text); font: var(--a-fw-semibold) var(--a-fs-xs) var(--at-sans); paint-order: stroke; stroke: var(--at-panel); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.at-map .bub { cursor: pointer; stroke-width: 1.5; transition: opacity .12s ease; }
.at-map.focus .bub:not(.hi) { opacity: .28; }
.at-map.focus .lbl:not(.hi) { opacity: .28; }
.at-map-tip { position: absolute; pointer-events: none; z-index: 2; min-width: 170px; padding: var(--a-sp-4) var(--a-sp-5);
  background: var(--at-raised); border: 1px solid var(--at-line-2); border-radius: var(--a-r-md);
  box-shadow: var(--a-sh-2); font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-body) var(--at-sans); color: var(--at-dim); }
.at-map-tip b { display: block; color: var(--at-text); font-size: var(--a-fs-sm); margin-bottom: var(--a-sp-1); }
.at-map-tip .at-num { color: var(--at-text); }

.at-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-sp-5); }
.at-card { display: grid; align-content: start; gap: var(--a-sp-2); padding: var(--a-sp-5) var(--a-sp-5) var(--a-sp-5); text-align: left; cursor: pointer;
  background: var(--at-panel); border: 1px solid var(--at-line); border-radius: var(--a-r-md); color: var(--at-dim);
  font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-body) var(--at-sans); position: relative; overflow: hidden; }
.at-card:hover { border-color: var(--at-line-2); }
.at-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--c); opacity: .75; }
.at-card-k { font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--at-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.at-card-n { font: var(--a-fw-semibold) var(--a-fs-lg)/var(--a-lh-tight) var(--at-sans); color: var(--at-text); overflow-wrap: anywhere; }
.at-card-v { font: var(--a-fw-semibold) var(--a-fs-sm)/var(--a-lh-tight) var(--at-mono); color: var(--at-text); font-variant-numeric: tabular-nums; }
.at-card-w { color: var(--at-dimmer); }

/* -- table ----------------------------------------------------------------- */

.at-sec-tw { overflow-x: auto; }
.at-st { width: 100%; border-collapse: collapse; font-size: var(--a-fs-sm); min-width: 980px; }
.at-st th { position: sticky; top: 0; z-index: 1; background: var(--at-panel); text-align: right; white-space: nowrap;
  padding: var(--a-sp-4) var(--a-sp-5) var(--a-sp-4); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--at-sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--at-dimmer); border-bottom: 1px solid var(--at-line); user-select: none; }
.at-st th[data-k] { cursor: pointer; }
.at-st th[data-k]:hover, .at-st th.on { color: var(--at-text); }
.at-st th.on::after { content: ' \25BE'; color: var(--at-accent); }
.at-st th.on.asc::after { content: ' \25B4'; }
.at-st th:first-child, .at-st td:first-child { text-align: left; }
.at-st td { padding: var(--a-sp-4) var(--a-sp-5); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--at-line);
  font-family: var(--at-mono); font-variant-numeric: tabular-nums; color: var(--at-text); }
.at-st tr.sr { cursor: pointer; }
.at-st tr.sr:hover td, .at-st tr.sr.hi td { background: var(--a-glass); }
.at-st tr.sr.open td { background: var(--a-accent-t1); border-bottom-color: transparent; }
.at-st .nm { font: var(--a-fw-semibold) var(--a-fs-sm)/var(--a-lh-tight) var(--at-sans); color: var(--at-text); }
.at-st .nm i { font-style: normal; display: inline-block; width: 10px; color: var(--at-dimmer); transition: transform .12s ease; }
.at-st tr.open .nm i { transform: rotate(90deg); color: var(--at-accent); }
.at-st .kd { margin-left: var(--a-sp-4); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--at-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--at-dimmer); }
.at-st .pos { color: var(--at-up); } .at-st .neg { color: var(--at-down); } .at-st .dim { color: var(--at-dimmer); }

.at-br { display: inline-flex; align-items: center; gap: var(--a-sp-4); }
.at-br-t { width: 54px; height: 5px; border-radius: var(--a-r-sm); background: var(--at-raised); overflow: hidden; }
.at-br-t i { display: block; height: 100%; background: var(--at-accent); border-radius: var(--a-r-sm); }

.at-spk { display: block; margin-left: auto; }
.at-spk polyline { fill: none; stroke: var(--at-dim); stroke-width: 1.2; }
.at-spk .fill { fill: var(--a-glass-2); stroke: none; }
.at-spk circle { fill: var(--at-accent); }

.at-read { display: inline-flex; align-items: center; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-4) var(--a-sp-2) var(--a-sp-4); border-radius: var(--a-r-pill);
  font: var(--a-fw-semibold) var(--a-fs-xs)/var(--a-lh-tight) var(--at-sans); color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, transparent); }
.at-read::before { content: ''; width: 6px; height: 6px; border-radius: var(--a-r-pill); background: var(--rc); }
.r-in   { --rc: var(--at-up); }
.r-out  { --rc: var(--at-down); }
.r-one  { --rc: var(--at-warn); }
.r-mix  { --rc: var(--at-accent); }
.r-dry  { --rc: var(--a-fg-3); }
.r-norm { --rc: var(--at-dimmer); }

/* Coin rows under an open sector. */
.at-st tr.cx td { padding: 0 0 var(--a-sp-4); background: var(--a-accent-t1); }
.at-ct { width: 100%; border-collapse: collapse; font-size: var(--a-fs-xs); }
.at-ct th { position: static; background: transparent; padding: var(--a-sp-2) var(--a-sp-5); border-bottom: 1px solid var(--at-line); }
.at-ct td { padding: var(--a-sp-2) var(--a-sp-5); border-bottom: 1px solid var(--at-line); }
.at-ct tr:last-child td { border-bottom: 0; }
.at-ct td:first-child, .at-ct th:first-child { padding-left: var(--a-sp-8); }
.at-ct .cs { font: var(--a-fw-semibold) var(--a-fs-sm)/var(--a-lh-tight) var(--at-sans); color: var(--at-text); }
.at-ct .cs small { color: var(--at-dimmer); font-weight: var(--a-fw-medium); }
.at-go { height: 22px; padding: 0 var(--a-sp-4); border: 1px solid var(--a-accent-t3); border-radius: var(--a-r-md);
  background: var(--a-accent-t1); color: var(--at-accent); font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--at-sans); cursor: pointer; }
.at-go:hover { background: var(--a-accent-t2); }
.at-na { display: inline-block; height: 22px; line-height: 20px; padding: 0 var(--a-sp-4); border: 1px dashed var(--at-line-2);
  border-radius: var(--a-r-md); color: var(--at-dimmer); font: var(--a-fw-semibold) var(--a-fs-xs)/20px var(--at-sans); cursor: help; }
.at-na:hover, .at-na:focus-visible { color: var(--at-dim); }

.at-sec-note { margin: 0; font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-body) var(--at-sans); color: var(--at-dimmer); max-width: 90ch; }
.at-sec-note b { color: var(--at-dim); }
.at-sec-empty { padding: 44px var(--a-sp-6); text-align: center; color: var(--at-dim); font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-body) var(--at-sans); }
.at-sec-empty .err { color: var(--at-down); }

.at-sec-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: var(--z-toast);
  padding: var(--a-sp-4) var(--a-sp-6); border-radius: var(--a-r-md); background: var(--at-raised); border: 1px solid var(--at-line-2);
  color: var(--at-text); font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-snug) var(--at-sans); box-shadow: var(--a-sh-2); }

/* Full width, one reading order: the map and callouts on top, the sector table under them.
   Wide screens only get a taller map. */
@media (min-width: 1700px) { .at-map { height: 380px; } }
@media (min-width: 2400px) { .at-map { height: 440px; } }

@media (max-width: 1100px) {
  .at-sec-top { grid-template-columns: minmax(0, 1fr); }
  .at-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .at-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-sec-q { width: 100%; }
  .at-sec-ctl { width: 100%; }
  .at-map { height: 280px; }
  .at-fld select, .at-sec-q { font-size: var(--a-fs-ios); height: 34px; }   /* 16px stops iOS zooming */
}
@media (max-width: 420px) {
  .at-cards { grid-template-columns: minmax(0, 1fr); }
}