.atlas { max-width: 1300px; }
.atlas p { margin: 0; }
.atlas h1 { margin-top: .3em; }
.atlas h2 { font-size: 1.15rem; }
.atlas [hidden] { display: none !important; }
.atlas input, .atlas select { font: inherit; color-scheme: dark; }
.atlas input[type=search], .atlas select {
  width: 100%; min-width: 0; min-height: 42px; padding: 6px 10px;
  color: var(--ink); border: 1px solid #466374; border-radius: 8px; background: var(--bg);
}
.atlas label { color: var(--ink2); display: grid; gap: 4px; font-size: .84rem; }
.timebar { display: grid; grid-template-columns: minmax(8rem,12rem) 1fr auto; align-items: center; gap: 18px; }
.hourbox label { display: flex; align-items: baseline; justify-content: space-between; }
.hourbox output { font-weight: 650; color: var(--ink); }
.hourbox input { width: 100%; accent-color: #7dd3fc; }
.map-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(350px,1fr); gap: 16px; align-items: start; }
.map-column { display: grid; gap: 10px; min-width: 0; }
#map { isolation: isolate; border-radius: 14px; position: relative; overflow: hidden; height: clamp(370px,56vh,650px); background: #102f43; touch-action: none; cursor: grab; }
#map:active { cursor: grabbing; }
#coast, #pins { position: absolute; inset: 0; width: 100%; height: 100%; }
#pins { pointer-events: none; }
.map-actions { position:absolute; top:10px; left:10px; display:flex; gap:4px; }
.map-actions button, #locate { padding: 3px 11px; border-radius: 8px; border:1px solid #678a99; background:#142e39f2; }
#locate { position:absolute; bottom:10px; left:10px; }
.credit { position:absolute; bottom:0; right:0; padding:3px 6px; background:#0b1620db; color:var(--muted); font-size:10px; }
.pin { --signal: #657f8d; position:absolute; pointer-events:auto; cursor:pointer; transform:translate(-50%,-50%);
  width:34px; height:34px; min-height:0; padding:0; border:0; border-radius:50%; background:transparent; display:grid; place-items:center; }
.pin b { border:2px solid #10252e; background:var(--signal); color:#071a22; border-radius:50%; width:15px; height:15px; display:grid; place-items:center; font-size:12px; }
.pin.cluster b { width:30px; height:30px; background:#b7e4e8; box-shadow:0 2px 6px #051a24aa; }
.pin[aria-pressed=true] b { outline:3px solid #fff; outline-offset:2px; }
.pin:focus-visible, .atlas button:focus-visible, #map:focus-visible { outline:2px solid #f5df92; outline-offset:1px; }
#cluster-options { flex-direction: row; flex-wrap: wrap; align-items: center; gap:8px; }
#cluster-options strong { flex:1 0 100%; }
.selected { gap:5px; } .selected a { font-weight:650; }
.selected .selected-main, .sheet-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sheet { gap: 10px; } .sheet-head output { color:var(--muted); }
.filters { display:grid; grid-template-columns: 1fr minmax(8em,.85fr); gap:8px; }
.key { font-size:12px; }
#spot-list { overflow:auto; max-height: max(450px,65vh); padding-right:3px; }
#spot-list h3 { font-size:14px; margin:15px 2px 6px; }
.spot-row { background:var(--card2); display:block; color:var(--ink); text-align:left; width:100%; border-radius:10px; margin:5px 0; padding:11px; }
.spot-row[aria-pressed=true] { border-color:var(--link); }
.spot-title { display:flex; justify-content:space-between; align-items:center; gap:4px; }
.spot-title .pill { font-size:11px; padding:2px 7px; }
.strips { margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.series { position:relative; min-width:0; }
.series small { display:block; font-size:11px; font-weight:400; color:var(--ink2); }
.track { display:block; position:relative; height:8px; border-radius:4px; margin:3px 0; background:#566773; }
.track::after { content:''; position:absolute; top:-2px; left:var(--cursor); transform:translateX(-50%); width:3px; height:12px; background:white; box-shadow:0 0 0 1px #14242c; border-radius:2px; }
.arrows,.ticks { display:grid; grid-template-columns:repeat(8,1fr); justify-items:center; color:var(--muted); font-size:10px; }
.arrow { display:inline-block; color:var(--ink2); }
@media(max-width:760px) {
  .atlas { padding:10px; gap:10px; } .map-layout { grid-template-columns:minmax(0,1fr); gap:10px; }
  #map { height: clamp(230px,40vh,390px); } .timebar { grid-template-columns:6.5rem 1fr auto; padding:10px; gap:8px; }
  .timebar button { padding:0 8px; } #spot-list { max-height:60vh; } .sheet { padding:12px; }
}

.atlas .datum-switch { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.datum-switch input { width: 1.2rem; height: 1.2rem; accent-color: var(--link); }