/* ============================================================ Vestigia rail

   The navigation rail, shared by every bloc so the platform reads as one
   product rather than three that happen to sit on the same server.

   A dark navy rail against a light workspace makes the navigation an
   instrument frame rather than another document region, and gives the charts
   the lighter of two clearly different surfaces to sit on.

   The rail carries its own colour scale. Each bloc's page tokens are tuned for
   a light background — text at #52514e, borders at 10% black — and inheriting
   them here would produce a dark box with barely legible labels.

   Every value below was measured against --rail-bg #141a22:

       idle label    #aab6c6    8.5:1   cool, so gold means something
       hover label   #ffd766   12.6:1   warms toward the accent
       gold chip     #f5b800    9.8:1   against the rail
       ink on chip   #141a22    9.8:1   dark on gold, never white
       group label   #6b7788    3.9:1   uppercase, secondary

   Gold is the single accent family. An earlier version put gold labels against
   a blue selected chip; measured, those two are 1.73:1 apart and read as two
   accents competing rather than as label and selection. So idle labels stay
   cool and gold appears only where it carries meaning.

   The chip takes dark ink because white on #f5b800 is 1.7:1 and fails
   outright. Gold is a light accent and behaves like one — the same reason a
   yellow warning badge is never white-on-yellow.
*/

:root {
  --rail-bg: #141a22;
  --rail-item: #1d2530;
  --rail-border: rgba(255, 255, 255, 0.09);
  --rail-ink: #aab6c6;
  --rail-ink-strong: #ffd766;
  --rail-ink-dim: #6b7788;
  --rail-accent: #f5b800;
  --rail-accent-ink: #141a22;
}

/* The rail is already dark, so a dark theme has nothing to invert here — only
   the page around it changes. */

.app { transition: grid-template-columns .18s ease; }
.app.rail { grid-template-columns: 62px 1fr; }

.sidebar {
  background: var(--rail-bg);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.18);
  padding: 16px 0 20px;
  gap: 2px;
  display: flex;
  flex-direction: column;
}

/* ---- collapse toggle ----------------------------------------------------- */

.rail-toggle {
  align-self: flex-end;
  margin: 0 14px 10px;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rail-border);
  border-radius: 8px;
  background: var(--rail-item);
  color: var(--rail-ink);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rail-toggle::before {
  content: "";
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
  /* A pane glyph drawn in CSS: the thick edge is the sidebar, so the icon
     depicts the thing it controls rather than an abstract arrow. */
  border-left-width: 6px;
}
.app.rail .rail-toggle::before { border-left-width: 2px; border-right-width: 6px; }
.rail-toggle:hover {
  color: var(--rail-accent);
  border-color: rgba(245, 184, 0, 0.4);
  background: #26303d;
}
.rail-toggle:focus-visible { outline: 2px solid var(--rail-accent); outline-offset: 2px; }
.app.rail .rail-toggle { align-self: center; margin: 0 0 10px; }

/* ---- brand --------------------------------------------------------------- */

.sidebar .brand { color: var(--rail-ink-strong); }
.sidebar .brand .parent { color: rgba(245, 184, 0, 0.8); }
.sidebar .brand small { color: var(--rail-ink-dim); }
.sidebar .brand:hover { color: var(--rail-accent); }

.app.rail .brand .parent,
.app.rail .brand small,
.app.rail .brand span:not(.parent) { display: none; }
.app.rail .brand { padding: 0 0 10px; justify-content: center; text-align: center; }

/* ---- group labels -------------------------------------------------------- */

.nav-group-label {
  padding: 16px 16px 6px;
  color: var(--rail-ink-dim);
  font-weight: 700;
}
.app.rail .nav-group-label {
  /* Collapses to a rule rather than vanishing: the grouping is information,
     and losing it would flatten the rail into one undifferentiated list. */
  height: 1px; padding: 12px 14px; overflow: hidden;
  color: transparent;
  position: relative;
}
.app.rail .nav-group-label::after {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 50%;
  border-top: 1px solid var(--rail-border);
}

/* ---- items --------------------------------------------------------------- */

.nav-item {
  margin: 0 10px;
  padding: 8px 11px;
  width: auto;
  gap: 10px;
  color: var(--rail-ink);
  border: 1px solid transparent;
  border-left: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .12s ease, color .12s ease,
              border-color .12s ease, transform .12s ease;
}
.nav-item::before {
  /* Set per page in JS. The mark is what keeps the collapsed rail navigable,
     and it carries a little gold at rest so the rail is not a column of grey. */
  content: attr(data-glyph);
  flex: 0 0 18px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: rgba(245, 184, 0, 0.72);
}
.nav-item:hover {
  background: var(--rail-item);
  border-color: rgba(245, 184, 0, 0.34);
  color: var(--rail-ink-strong);
  transform: translateX(1px);
}
.nav-item:hover::before { color: var(--rail-accent); }
.nav-item[aria-current="page"] {
  /* A filled chip rather than a 2px edge: at seventeen destinations an edge
     marker is easy to miss, and the active page is the one thing that must
     not be. The base rule sets a transparent left border, so it is cleared
     here rather than recoloured — otherwise the fill sits inside a notch. */
  background: var(--rail-accent);
  border: 1px solid var(--rail-accent);
  color: var(--rail-accent-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.4),
              0 2px 12px rgba(245, 184, 0, 0.32);
}
.nav-item[aria-current="page"]::before { color: var(--rail-accent-ink); }
.nav-item[aria-current="page"]:hover { transform: none; }
.nav-item:focus-visible { outline: 2px solid var(--rail-accent); outline-offset: 1px; }

.app.rail .nav-item {
  margin: 0 8px;
  padding: 9px 0;
  justify-content: center;
  gap: 0;
  font-size: 0;
}
.app.rail .nav-item::before { font-size: 15px; flex: none; }

/* ---- foot ---------------------------------------------------------------- */

.sidebar-foot {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--rail-border);
}
.app.rail .sidebar-foot { padding: 12px 0; text-align: center; }

.sidebar .theme-toggle,
.sidebar .lang {
  border-color: var(--rail-border);
  background: var(--rail-item);
  color: var(--rail-ink);
}
.sidebar .theme-toggle:hover,
.sidebar .lang:hover {
  color: var(--rail-accent);
  border-color: rgba(245, 184, 0, 0.4);
  background: #26303d;
}

@media (max-width: 860px) {
  /* The rail is a desktop affordance; the narrow layout already turns the nav
     into a horizontal strip, where collapsing has nothing to give back. */
  .app.rail { grid-template-columns: 1fr; }
  .rail-toggle { display: none; }
  .nav-item { margin: 0; border-radius: 6px; }
}