/* atlas.css · P37, Atlas: the layout of the map page, the page against
   Dijkstra and the data page on the design system's tokens. The buttons,
   segmented controls, fields and tables are the design system's; this file
   places them and draws what a map has that the design system does not:
   the map's canvases, the pins, the search results, the steps and the
   legend of the reach. The map view's own elements are prefixed atl-, the
   page's at-. */

.at { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); background: var(--paper); }
.at-panel { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 16px; border-right: var(--px) solid var(--line-2); }
.at-panel [data-r="segmented"] { align-self: flex-start; max-width: 100%; }
.at-modes button b { margin-left: 4px; font-weight: var(--fw-550); font-variant-numeric: tabular-nums; }
.at-tool { display: flex; flex-direction: column; gap: 10px; }
.at-tool[hidden] { display: none; }
.at-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.at-ends { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 4px; align-items: center; }
.at-ends > [data-r="button"] { grid-column: 2; grid-row: 1 / span 2; }
.at-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.at-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-round); font-size: var(--fs-11); line-height: 1; font-weight: var(--fw-550); color: var(--paper); background: var(--blue-500); }
.at-dot[data-end="end"] { background: var(--ink); }
.at-click { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.at-summary { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.at-summary b { color: var(--ink); font-weight: var(--fw-550); }
.at-note, .at-dim { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.at-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: var(--px) solid var(--line-2); }
.at-steps li { border-bottom: var(--px) solid var(--line-1); }
.at-step { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 6px 2px; border: 0; background: none; text-align: left; font: inherit; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); cursor: pointer; border-radius: var(--r-row); }
@media (hover: hover) { .at-step:hover { background: var(--paper-hover); } }
.at-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.at-step-dist { flex: none; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.at-legend { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); line-height: var(--lh-13); }
.at-legend li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; }
.at-swatch { width: 16px; height: 12px; border-radius: var(--r-key); background: var(--violet-300); opacity: 0.45; }
.at-swatch[data-band="10"] { background: var(--violet-400); opacity: 0.6; }
.at-swatch[data-band="5"] { background: var(--violet-500); opacity: 0.8; }
.at-frames { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 12px; border-top: var(--px) solid var(--line-2); }
.at-frames-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* the search boxes and their results */
.at-combo { position: relative; flex: none; min-width: 0; }
.at-end .at-combo { flex: 1; }
.at-combo [data-r="field"] { width: 100%; }
.at-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), 0 8px 24px rgb(0 0 0 / 12%); max-height: 320px; overflow: auto; }
.at-results li { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--r-row); cursor: pointer; }
.at-results li[aria-selected="true"] { background: var(--raised-selected); }
@media (hover: hover) { .at-results li:hover { background: var(--raised-hover); } }
.at-res-label { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
.at-res-sub { font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }

/* the map */
.at-map, .at-cmp-map, .at-insp-map { position: relative; min-height: 0; overflow: hidden; background: var(--ground); touch-action: none; outline: none; }
.atl-map:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.atl-gl, .atl-labels { position: absolute; left: 0; top: 0; display: block; }
.atl-labels { pointer-events: none; }
.atl-pins { position: absolute; inset: 0; pointer-events: none; }
.atl-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: auto; cursor: grab; touch-action: none; }
.atl-pin[data-drag] { cursor: grabbing; }
.atl-pin-dot { position: absolute; left: -13px; top: -34px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-round) var(--r-round) var(--r-round) 0; transform: rotate(-45deg); background: var(--blue-500); box-shadow: 0 0 0 2px var(--paper), 0 2px 6px rgb(0 0 0 / 25%); color: var(--paper); font-size: var(--fs-12); font-weight: var(--fw-550); }
.atl-pin-end .atl-pin-dot { background: var(--ink); }
.atl-pin-reach .atl-pin-dot { background: var(--violet-500); }
.atl-pin-found .atl-pin-dot { background: var(--red-400); }
.atl-pin-dot > * { transform: rotate(45deg); }
.atl-pin:focus-visible .atl-pin-dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.at-views { position: absolute; z-index: 5; top: 12px; right: 12px; display: flex; gap: 4px; padding: 4px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), 0 4px 12px rgb(0 0 0 / 10%); }
.at-attr { position: absolute; z-index: 5; right: 0; bottom: 0; padding: 2px 8px; border-top-left-radius: var(--r-key); background: color-mix(in oklab, var(--paper) 85%, transparent); font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-2); }
.at-attr a { color: inherit; }

/* the page against Dijkstra and the data page */
.at-page { flex: 1; min-height: 0; overflow: auto; background: var(--paper); }
.at-page-in { display: flex; flex-direction: column; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 24px; }
.at-page-head h1 { margin: 0 0 6px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); }
.at-page-head p { margin: 0; max-width: 760px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.at-run { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.at-seed { width: 96px; }
.at-sum { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
.at-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.at-table { min-width: 0; overflow-x: auto; }
.at-cmp-map { height: 420px; border-radius: var(--r-contain); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.at-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 24px; }
.at-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.at-stat dt { font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
.at-stat dd { margin: 0; font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink); font-variant-numeric: tabular-nums; }
.at-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.at-cols section { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.at-h { margin: 8px 0 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.at-insp { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
.at-insp-map { height: 460px; border-radius: var(--r-contain); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.at-insp-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.at-insp-pick { display: flex; align-items: flex-end; gap: 8px; }
.at-insp-pick [data-r="form-row"] { flex: 1; }
.at-tile { width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: var(--r-row); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.at-layers { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.at-layers label { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 760px) {
  .at { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56vh auto; overflow: auto; }
  .at-map { order: -1; min-height: 320px; }
  .at-panel { overflow: visible; border-right: 0; border-top: var(--px) solid var(--line-2); }
  .at-views { top: 8px; right: 8px; }
  .at-page-in { padding: 16px; }
  .at-split, .at-cols, .at-insp { grid-template-columns: minmax(0, 1fr); }
  .at-cmp-map, .at-insp-map { height: 320px; }
}