/* MapFun — geology / ice age / sea level UI (src/time/geology.js, iceage.js, sealevel.js). Both themes via tokens. */

/* ---------- Caption chip (period + label + confidence badge) ------------- */
.geo-caption {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 12;
  display: inline-flex; align-items: center; gap: 8px; max-width: min(92vw, 640px);
  padding: 7px 14px 7px 10px; border-radius: 999px; pointer-events: none;
  background: var(--panel); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--panel-border); box-shadow: var(--shadow); color: var(--ink);
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.geo-caption.fade { animation: geo-caption-in 260ms cubic-bezier(.2,.7,.2,1); }
@keyframes geo-caption-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.geo-caption .geo-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent), 0 0 12px currentColor; }
.geo-caption .geo-title { font-family: var(--font-display); font-weight: 600; letter-spacing: .005em; overflow: hidden; text-overflow: ellipsis; }
.geo-caption .geo-sub { color: var(--ink-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.geo-caption .geo-sub::before { content: '·'; margin-right: 8px; opacity: .5; }
.geo-caption .geo-badge {
  flex: none; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  color: #ffcf6b; background: rgba(255, 190, 80, 0.14); border: 1px solid rgba(255, 190, 80, 0.35);
}
:root[data-theme="atlas"] .geo-caption .geo-badge { color: #8a4b00; background: rgba(160, 90, 0, 0.10); border-color: rgba(160, 90, 0, 0.3); }

/* ---------- Sea-level control -------------------------------------------- */
.sealevel { color: var(--ink); font-size: 12.5px; }
.sealevel.floating { position: absolute; left: 12px; bottom: calc(46px + var(--safe-b)); z-index: 13; width: 300px; padding: 8px 12px 10px; animation: pop-in var(--t-med); transition: bottom var(--t-med); }
/* the timeline instrument owns the bottom centre: sit above it (and above the coords bar) while it is open */
:root.timeline-open .sealevel.floating { bottom: calc(var(--tl-h, 96px) + 26px + var(--safe-b)); }
.sealevel .sl-head { display: flex; align-items: center; gap: 8px; min-height: 26px; flex-wrap: nowrap; }
.sealevel .sl-head .sl-title { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.sealevel .sl-title {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 2px; margin-left: -4px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer;
}
.sealevel .sl-title:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sealevel .sl-title .sl-icon { display: inline-flex; width: 18px; height: 18px; color: var(--accent); }
.sealevel .sl-title .sl-icon svg { width: 18px; height: 18px; }
.sealevel .sl-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; min-width: 8ch; white-space: nowrap; }
.sealevel.is-flood .sl-value { color: #6fb4ff; }
:root[data-theme="atlas"] .sealevel.is-flood .sl-value { color: #1f4e79; }
.sealevel .sl-land { margin-left: auto; color: var(--ink-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sealevel.collapsed .sl-land { display: none; }
.sealevel .sl-body { padding-top: 6px; }
.sealevel .sl-track { position: relative; height: 26px; margin: 2px 0 6px; }
.sealevel .sl-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; position: relative; z-index: 2;
  --t: 12%;
}
.sealevel .sl-range:focus-visible { outline: none; }
.sealevel .sl-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.sealevel .sl-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }
/* track: flood (left) → today (12 %) → shelf sand → abyss slate */
.sealevel .sl-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #3d7fd0 0%, #3d7fd0 12%, #b9a67a 12%, #b9a67a 30%, #8c8562 46%, #5e6553 66%, #3d454b 84%, #232a30 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.sealevel .sl-range::-moz-range-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #3d7fd0 0%, #3d7fd0 12%, #b9a67a 12%, #b9a67a 30%, #8c8562 46%, #5e6553 66%, #3d454b 84%, #232a30 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
:root[data-theme="atlas"] .sealevel .sl-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, #6f9fcf 0%, #6f9fcf 12%, #d8cb9f 12%, #d8cb9f 30%, #b0a97f 46%, #878b6d 66%, #666e66 84%, #4d5450 100%); }
:root[data-theme="atlas"] .sealevel .sl-range::-moz-range-track { background: linear-gradient(90deg, #6f9fcf 0%, #6f9fcf 12%, #d8cb9f 12%, #d8cb9f 30%, #b0a97f 46%, #878b6d 66%, #666e66 84%, #4d5450 100%); }
.sealevel .sl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform var(--t-fast);
}
.sealevel .sl-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
.sealevel .sl-range:hover::-webkit-slider-thumb, .sealevel .sl-range:active::-webkit-slider-thumb { transform: scale(1.15); }
/* today's level: a hairline on the track */
.sealevel .sl-track::before { content: ''; position: absolute; left: 12%; top: 6px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .55; z-index: 1; pointer-events: none; }
.sealevel .sl-ticks { position: absolute; left: 0; right: 0; top: 19px; height: 6px; pointer-events: none; }
.sealevel .sl-ticks i { position: absolute; top: 0; width: 1px; height: 5px; margin-left: -.5px; background: var(--ink-muted); opacity: .55; }
.sealevel .sl-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.sealevel .sl-chip { height: 22px; padding: 0 9px; font-size: 11px; }
.sealevel .sl-chip[aria-pressed="true"] { font-weight: 600; }

/* phones: a compact pill above the timeline that expands to a full control on tap */
@media (max-width: 720px) {
  .sealevel.floating { left: 8px; right: auto; width: auto; max-width: calc(100vw - 16px); bottom: calc(74px + var(--safe-b)); padding: 6px 10px 7px; }
  :root.timeline-open .sealevel.floating { bottom: calc(var(--tl-h, 96px) + 18px + var(--safe-b)); }
  .sealevel.floating.collapsed { width: auto; }
  .sealevel.floating:not(.collapsed) { width: calc(100vw - 16px); }
  .sealevel .sl-presets { max-height: 26px; overflow: hidden; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sealevel .sl-presets::-webkit-scrollbar { display: none; }
  .sealevel .sl-chip { flex: none; height: 26px; }
}
/* inside a host slot: no panel chrome, fill the width */
/* ---------- The sea-level popover -------------------------------------------------------------------------- */
/* Behind the "Sea level" disclosure in #toolbox (src/ui/truesize.js owns the button and the per-session
   memory). It opens beside its trigger, one gap right of the left column, and steps a card further right
   when the true-size panel already owns that spot. */
#sealevel-slot {
  position: absolute; left: calc(12px + var(--rail-w) + 10px); z-index: 13;
  top: calc(var(--topbar-h) + 12px + var(--skinbar-h, 236px) + 8px);
  width: 272px; max-width: calc(100vw - 24px); padding: 7px 11px 9px;
  animation: pop-in var(--t-med);
}
#sealevel-slot:empty { display: none !important; }
:root:has(#truesize:not([hidden])) #sealevel-slot { left: calc(12px + var(--rail-w) + 10px + var(--extras-w) + 10px); }
#sealevel-slot .sealevel { width: 100%; }
#sealevel-slot .sealevel .sl-title { cursor: default; }
@media (max-width: 720px) {
  /* under the extras row, the way the true-size card sits there */
  #sealevel-slot { left: 8px; right: 8px; width: auto; max-width: none; top: calc(var(--topbar-h) + 8px + 48px + 8px); }
  :root:has(#truesize:not([hidden])) #sealevel-slot { left: 8px; }
}

@media (max-width: 720px) {
  .sealevel.floating { left: 8px; right: 8px; width: auto; bottom: calc(58px + var(--safe-b)); padding: 6px 10px 8px; }
  .sealevel.floating.collapsed { right: auto; padding: 4px 10px; border-radius: 999px; }
  .sealevel.floating.collapsed .sl-head { min-height: 24px; }
  .sealevel .sl-chip { height: 26px; padding: 0 11px; font-size: 12px; }
  .geo-caption { top: 10px; max-width: calc(100vw - 16px); font-size: 12px; padding: 6px 12px 6px 9px; }
  .geo-caption .geo-sub { display: none; }
}

/* ---------- Ice-age landmark pins ---------------------------------------- */
.ice-pins { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ice-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; cursor: pointer; overflow: visible; }
.ice-pin .ice-pin-dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #f4fbff; border: 2px solid var(--accent); box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform var(--t-fast);
}
.ice-pin:hover .ice-pin-dot, .ice-pin:focus-visible .ice-pin-dot, .ice-pin.open .ice-pin-dot { transform: scale(1.3); }
.ice-pin:focus-visible { outline: none; }
.ice-pin .ice-pin-name {
  position: absolute; left: 10px; top: -9px; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--label); letter-spacing: .02em;
  text-shadow: 0 0 3px var(--label-halo), 0 0 3px var(--label-halo), 0 1px 2px var(--label-halo); opacity: 0; transition: opacity var(--t-fast);
}
.ice-pin.named .ice-pin-name, .ice-pin:hover .ice-pin-name, .ice-pin.open .ice-pin-name { opacity: 1; }
.ice-pin.left .ice-pin-name { left: auto; right: 10px; }
.ice-pin .ice-tip {
  position: absolute; left: 14px; bottom: 12px; width: 250px; padding: 9px 11px 10px; border-radius: 10px; text-align: left; font-weight: 400;
  background: var(--panel-solid); color: var(--ink); border: 1px solid var(--panel-border); box-shadow: var(--shadow);
  font-size: 12px; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear var(--t-fast);
  pointer-events: none;
}
.ice-pin .ice-tip strong { font-family: var(--font-display); font-size: 13px; }
.ice-pin .ice-tip .ice-tip-region { color: var(--ink-muted); font-size: 11.5px; }
.ice-pin .ice-tip p { margin: 5px 0 0; color: var(--ink); }
.ice-pin:hover .ice-tip, .ice-pin:focus-visible .ice-tip, .ice-pin.open .ice-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ice-pin.flip .ice-tip { bottom: auto; top: 12px; }
.ice-pin.left .ice-tip { left: auto; right: 14px; }
@media (pointer: coarse) { .ice-pin:hover:not(.open) .ice-tip { opacity: 0; visibility: hidden; } }