/* ── Pathway rail ─────────────────────────────────────────────────────────────
   Replaces three stacked tab strips inside the sidebar with one navigation layer
   beside it. Explore and Assess are the two pathways and they own the rail;
   switching pathway swaps what the rail below contains.

   Uses the existing tokens only — no new palette. The redesign is an information-
   architecture change, not a repaint: both apps in the suite already share
   css/tokens.css, so the problem was never colour.
   ────────────────────────────────────────────────────────────────────────────── */

/* One source for the rail's width. Everything that used to be positioned at the
   sidebar's left edge now has to clear the rail as well. */
:root { --rail-w: 66px; }

#sc-rail {
  width: var(--rail-w);
  flex: 0 0 auto;
  background: var(--navy);
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 6;
}

/* ── The two pathways ─────────────────────────────────────────────────────── */
.rail-paths {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--s2) 0 var(--s3);
  background: var(--navy-dark);
  border-bottom: 1px solid var(--divider);
}
.rail-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 1px var(--s2);
  padding: var(--s3) 2px;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  color: var(--text-dim);
  font: var(--t-2xs) var(--font);
  letter-spacing: .3px;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
}
.rail-path svg { width: 18px; height: 18px; }
.rail-path:hover { background: var(--surface-tint); color: var(--text); }
/* .active is applied by switchMode(), which toggles every .mode-btn[data-mode].
   Nothing in topbar.js needed changing for this. */
.rail-path.active {
  background: var(--teal-dim);
  color: var(--teal);
  font-weight: 700;
}

/* ── Panel selectors for the current pathway ──────────────────────────────── */
.rail-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s3);
}
.rail-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--divider);
  padding-bottom: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s2);
}
.rail-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--s3) 2px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--text-dim);
  font: var(--t-2xs) var(--font);
  letter-spacing: .3px;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn:hover { background: var(--surface-tint); color: var(--text); }
/* .active is applied by switchTab(), which toggles every [data-tab]. */
.rail-btn.active {
  background: var(--surface-tint);
  color: var(--teal);
  border-left-color: var(--teal);
}
.rail-btn[disabled] { opacity: .32; cursor: not-allowed; }
.rail-btn[disabled]:hover { background: transparent; color: var(--text-dim); }

/* Assess reads as a sequence, so its steps are a numbered vertical spine. A
   column carries order far better than four tabs side by side, and it costs no
   panel height. */
.rail-step {
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  display: grid; place-items: center;
  font-size: var(--t-2xs);
  font-weight: 700;
}
.rail-btn.active .rail-step {
  background: var(--teal);
  border-color: var(--teal);
  color: #06231a;
}
.rail-btn[data-done="true"] .rail-step {
  background: var(--teal-dim);
  border-color: var(--teal);
  color: var(--teal);
}

/* ── Superseded navigation ────────────────────────────────────────────────────
   Hidden rather than deleted. Every switchMode()/switchTab() caller in the app
   still targets these elements, and switchTab() bails on a tab whose button does
   not exist — so removing them would break panels the rail does not yet expose
   (external searches among them). They stay in the DOM as the fallback, and as
   the revert path if the rail is backed out. */
#mode-tabs,
#explore-nav,
#util-nav,
#tab-nav { display: none !important; }

/* ── Provenance footer ────────────────────────────────────────────────────────
   Baseline carries the same line. Deliberate: the two apps should read as one
   product family, and this is the claim that separates a curated catalogue from
   a screenshot of someone else's map. */
#sc-foot {
  flex: 0 0 auto;
  height: 30px;
  display: flex; align-items: center; gap: var(--s7);
  padding: 0 var(--s5);
  background: var(--navy);
  border-top: 1px solid var(--divider);
  font-size: var(--t-sm);
  color: var(--text-dim);
}
#sc-foot a { color: var(--text-dim); text-decoration: none; }
#sc-foot a:hover { color: var(--teal); }
#sc-foot .sc-foot-prov {
  margin-left: auto;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* #app is the flex column; #body must give the footer its 30px rather than
   overrunning it. */
#app { display: flex; flex-direction: column; }

@media (max-width: 900px) {
  #sc-foot { gap: var(--s5); font-size: var(--t-2xs); }
  #sc-foot a:nth-of-type(n+3) { display: none; }
}

/* ── Clearing the rail ────────────────────────────────────────────────────────
   Three things were positioned at the sidebar's left edge with left:var(--sw),
   which was correct while the sidebar started at x=0. The rail now sits before
   it, so each of them landed exactly --rail-w short — the free-floating collapse
   arrow was this, overlapping the panel instead of hugging its edge.

   Corrected HERE rather than in base.css so the fix reverts with the feature that
   caused it: delete rail.css and the original geometry comes back intact. */
#sidebar-toggle { left: calc(var(--rail-w) + var(--sw)); }
#sidebar.collapsed ~ #sidebar-toggle { left: var(--rail-w); }
#sidebar-resize { left: calc(var(--rail-w) + var(--sw) - 8px); }
/* Fixed-position, so it needs the same offset or it slides under the sidebar. */
#attr-table-panel { left: calc(var(--rail-w) + var(--sw)); }
body:has(#sidebar.collapsed) #attr-table-panel { left: var(--rail-w); }

@media (max-width: 900px) {
  :root { --rail-w: 54px; }
  .rail-path span, .rail-btn span { font-size: var(--t-3xs); }
}