/* MapFun — the left column's lower half: #toolbox, holding the overlay toggles (#extras-rail, filled by
   src/ui/truesize.js) and the navigation cluster (#nav-rail, filled by src/ui/nav.js). Loaded after
   extras.css so it speaks the same language as the skin rail above it: one --rail-w wide panel strip on the
   left edge, 40 px icon buttons, uppercase micro-labels, accent-soft for "on".

   Placement is CSS, not measurement. The box hangs under the skin rail (--skinbar-h, published by
   src/ui/truesize.js) and stops at --rail-floor, clear of #coords; the skin rail above it is capped by
   --tools-h (published here-ish, from src/ui/truesize.js too) so the two can never reach into each other.
   The old runtime "step one column in" fallback dock is gone with it. */

#toolbox {
  position: absolute; left: 12px; z-index: 12;
  top: calc(var(--topbar-h) + 12px + var(--skinbar-h, 236px) + 8px);
  width: var(--rail-w);
  display: flex; flex-direction: column; gap: 7px; padding: 6px;
}
#toolbox:empty { display: none; }

/* the two sections read as one column: a hairline, not a second panel */
#toolbox #nav-rail { border-top: 1px solid var(--panel-border); padding-top: 7px; }

/* ---------- navigation cluster: the lock, the level button, the latitude ladder -------------------------- */
#nav-rail { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
#nav-rail:empty { display: none; }
#nav-rail .rail-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--ink-muted); padding: 0 0 3px; }
#nav-rail .nav-tools { display: flex; flex-direction: row; justify-content: center; gap: 4px; }
#nav-rail .nav-btn {
  width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-muted);
  position: relative; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
#nav-rail .nav-btn:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
#nav-rail .nav-btn:active { transform: translateY(1px); }
#nav-rail .nav-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
#nav-rail .nav-btn:disabled { opacity: .35; pointer-events: none; }
#nav-rail .nav-btn svg { width: 20px; height: 20px; }
#nav-rail .nav-readout {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.2; letter-spacing: .01em;
  color: var(--ink); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; padding: 1px 0 2px;
}

/* ---------- the ladder ------------------------------------------------------------------------------------ */
/* Seven evenly spaced parallels, north at the top. The marker slides between the stop centres, so the ladder
   reads as a position even when the view sits between two of them. */
#nav-rail .nav-ladder { position: relative; display: flex; flex-direction: column; width: 100%; flex: none; padding-right: 10px; }
/* the spine the marker rides on, so "where am I" never has to borrow the "what is selected" highlight */
#nav-rail .nav-spine { position: absolute; right: 4px; top: 8px; bottom: 8px; width: 1px; border-radius: 1px; background: var(--ink); opacity: .22; pointer-events: none; }
#nav-rail .nav-stop {
  height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 0 4px 0 7px; border-radius: 5px; color: var(--ink-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}
#nav-rail .nav-stop-label { font-family: var(--font-mono); font-size: 11.5px; line-height: 1; font-variant-numeric: tabular-nums; }
#nav-rail .nav-tick { width: 13px; height: 1.5px; border-radius: 1px; background: currentColor; opacity: .55; flex: none; transition: width var(--t-fast), opacity var(--t-fast); }
#nav-rail .nav-stop.is-origin .nav-tick { width: 18px; opacity: .8; }   /* the equator is the ladder's centre */
#nav-rail .nav-stop.is-origin .nav-stop-label { color: var(--ink); }
#nav-rail .nav-stop:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
#nav-rail .nav-stop:hover .nav-tick { opacity: 1; }
#nav-rail .nav-stop[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); }
#nav-rail .nav-stop[aria-checked="true"] .nav-stop-label { font-weight: 600; color: var(--accent); }
#nav-rail .nav-stop[aria-checked="true"] .nav-tick { width: 18px; opacity: 1; }
#nav-rail .nav-stop.is-near { color: var(--ink); }                      /* off-ladder: nearest stop, not selected */
#nav-rail .nav-stop.is-near .nav-tick { opacity: .9; }

#nav-rail .nav-marker {
  position: absolute; right: 1.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--panel-solid); transform: translateY(-50%); pointer-events: none;
  transition: top 120ms linear, background-color var(--t-fast), border-radius var(--t-fast);
}
/* between stops: the marker stays (it *is* the position readout) but stops claiming to be a selection */
#nav-rail .nav-ladder.off-stop .nav-marker { background: var(--ink); border-radius: 1px; width: 7px; height: 2px; right: 1px; opacity: .75; }

/* ---------- the pole suggestion ---------------------------------------------------------------------------- */
/* Offered, never forced, and dismissible. Docked to the right of the column so it never lands on #coords. */
#nav-rail .nav-hint {
  position: absolute; left: calc(100% + 8px); bottom: 8px; width: 216px; z-index: 14;
  padding: 9px 10px 9px 11px; border-radius: 10px; animation: pop-in var(--t-med);
}
#nav-rail .nav-hint p { margin: 0; }
#nav-rail .nav-hint-title { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25; padding-right: 18px; }
#nav-rail .nav-hint-body { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); }
#nav-rail .nav-hint-actions { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; }
#nav-rail .nav-hint-go {
  flex: 1; min-width: 0; min-height: 26px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: var(--accent); color: var(--accent-ink); line-height: 1.25; text-align: center;  /* wraps: some of these names are long */
  transition: filter var(--t-fast);
}
#nav-rail .nav-hint-go:hover { filter: brightness(1.08); }
#nav-rail .nav-hint-close { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: var(--ink-muted); }
#nav-rail .nav-hint-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* ---------- fading with the rest of the floating chrome ---------------------------------------------------- */
:root.picker-open #toolbox { opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
/* Game mode owns the viewport (css/immersive.css hides every other floating rail the same way). */
:root.immersive #toolbox { display: none !important; }

/* ---------- responsive -------------------------------------------------------------------------------------- */
/* Phones keep the old treatment: the overlay toggles become a horizontal row under the top bar and the
   navigation cluster is desktop-only (they get the map itself, not a ladder). */
@media (max-width: 720px) {
  #toolbox {
    top: calc(var(--topbar-h) + 8px); left: 8px; width: auto;
    flex-direction: row; padding: 4px; gap: 2px;
  }
  #toolbox #nav-rail { border-top: 0; padding-top: 0; }
  #nav-rail { display: none !important; }
}