/* ==========================================================================
   VICC v68 — the rail, as a standalone component

   Every shell now emits the same rail markup, but only shell.php was
   loading the CSS for it: .rail / .rail-group / .rail-label / .rail-n all
   lived in v63.css, which the legacy shells never load. So legacy pages
   rendered raw <details> elements — disclosure triangles, no uppercase, and
   the count jammed against the label ("Main1" instead of "MAIN  1").

   This file carries the whole component and is loaded by all three shells,
   so the menu is genuinely identical everywhere.
   ========================================================================== */

/* ---- container --------------------------------------------------------- */
.rail {
  overflow-y: auto;
  padding: 12px 0 24px;
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 99px;
}

/* ---- collapsible section ----------------------------------------------- */
.rail-group { margin-bottom: 2px; }

.rail-group > summary.rail-label {
  display: flex !important;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 11px 16px 8px !important;
  list-style: none;
  font: 700 11px/1 var(--mono, ui-monospace, monospace) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--muted, #8493BC) !important;
  transition: color .14s ease;
  user-select: none;
}
/* Kill the native marker in every engine. */
.rail-group > summary::-webkit-details-marker { display: none; }
.rail-group > summary::marker { content: ""; }
.rail-group > summary.rail-label { list-style-type: none; }

.rail-group > summary.rail-label:hover { color: var(--cyan, #34E7FF) !important; }

/* Our own disclosure caret. */
.rail-group > summary.rail-label::before {
  content: "▸";
  font-size: 10px;
  color: var(--faint, #5C6A94);
  transition: transform .16s ease;
  display: inline-block;
  flex: none;
}
.rail-group[open] > summary.rail-label::before { transform: rotate(90deg); }
.rail-group[open] > summary.rail-label { color: var(--ink-dim, #B9C6E4) !important; }

/* ---- the count badge — this is what was rendering as "Main1" ------------ */
.rail-n {
  margin-left: auto !important;
  flex: none;
  font: 600 10px/1 var(--mono, ui-monospace, monospace) !important;
  color: var(--faint, #5C6A94) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--line, rgba(255,255,255,.10)) !important;
  border-radius: 99px !important;
  padding: 3px 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ---- links ------------------------------------------------------------- */
.rail a {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 26px !important;
  margin: 1px 8px;
  border-radius: 9px;
  border-left: 0 !important;
  color: var(--ink-dim, #B9C6E4);
  font-size: 15px;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
  position: relative;
}
.rail a:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
}
.rail a.on, .rail a.active {
  background: linear-gradient(90deg, rgba(52,231,255,.20), rgba(168,85,255,.10) 55%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(52,231,255,.28), 0 0 26px rgba(52,231,255,.16);
  color: #fff !important;
  font-weight: 600;
}
.rail a.on::before, .rail a.active::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--cyan, #34E7FF), var(--purple, #A855FF));
  box-shadow: 0 0 14px var(--cyan, #34E7FF);
}

/* ---- icon -------------------------------------------------------------- */
.rail-ico {
  flex: none;
  width: 20px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  opacity: .92;
}

/* ---- per-item count / tag ---------------------------------------------- */
.rail a .count {
  margin-left: auto;
  font: 600 11px/1 var(--mono, ui-monospace, monospace);
  color: var(--faint, #5C6A94);
  font-variant-numeric: tabular-nums;
}
.rail a .tag {
  font: 700 9px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan, #34E7FF);
  background: rgba(52,231,255,.14);
  border: 1px solid rgba(52,231,255,.36);
  border-radius: 4px; padding: 2px 5px; flex: none;
}

/* ---- legacy shells put the rail inside <aside>; match the new one ------- */
.shell > aside, .app > .side {
  padding: 0 !important;
}
.shell > aside .brand-wrap, .app > .side .brand {
  padding: 18px 16px 16px !important;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.055)) !important;
  margin-bottom: 4px;
}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width: 900px) {
  .rail { padding: 8px 0 14px; }
  .rail a { padding: 10px 16px 10px 24px !important; }
  .rail-group > summary.rail-label { padding: 12px 16px 8px !important; }
}