/* =============================================================================
   Workspace shell -- the rail.

   This page IS only the left rail: the shell window places it in a slim strip
   and hosts the real pages beside it. One item is lit -- the page on the stage;
   the rest swap the stage or open their window.

   No lockup up here any more. The identity band across the top of the window
   carries it, and a mark at the head of the rail was the same brand said twice
   within 60px of itself.

   Selection is a FILL plus a 2px indicator inset at the item's left edge, never
   a shadow -- the only shadow anywhere in the chrome is the 1px lift under the
   selected theme segment. The indicator is drawn inside the item bounds so it
   lines up with the rail's own edge rather than hanging off it.
   ========================================================================== */

html,body{margin:0;height:100%}
body{background:var(--rail);font-family:var(--ui);overflow:hidden;
  border-right:1px solid var(--rail-border)}

.rail{display:flex;flex-direction:column;align-items:stretch;height:100%;
  padding:6px 0;gap:1px}

/* Full width, no horizontal margin: the active indicator belongs on the rail's
   left edge, and an inset margin would float it in the middle of nothing. */
.item{display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;padding:8px 2px;
  color:var(--rail-ink);font-family:var(--ui);font-size:9.5px;font-weight:500}
.item:hover{background:var(--rail-hover)}
.item:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}

.item[aria-pressed="true"]{background:var(--rail-active);
  box-shadow:inset 2px 0 0 var(--accent-line);color:var(--accent-line);
  font-weight:600}

/* Not on the stage right now. Dimmed rather than hidden: the pane is one click
   away, and a rail that forgot the page would be worse than one that shows it
   quietly. 45% is the same value a genuinely disabled item would take. */
.item--off{opacity:.45}
.item--off:hover{opacity:1}

/* The Log toggle at the foot: a switch, not a destination. It is deliberately
   NOT one of the five items above -- the log is output, not a place you go --
   so it never takes the active fill or the indicator, which mean "this is the
   page you are looking at". Tinted when on, plain when off. */
.item--toggle[aria-pressed="true"],
.item--toggle:not(.item--off){background:var(--accent-soft);color:var(--accent-line);
  box-shadow:none;font-weight:600}
.item--toggle.item--off{background:none;color:var(--rail-ink);font-weight:500}

/* 17px at 1.6px stroke, inheriting the item's colour so one rule covers the
   inactive, hover and active treatments.
   non-scaling-stroke because these are the app's own icons, drawn on a 24-unit
   grid: at 17px that grid scales by 0.71, so a plain stroke-width of 1.6 would
   render as 1.1px and the set would look thinner than it was specified. This
   makes 1.6 mean 1.6 device pixels whatever the viewBox. */
.item svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  vector-effect:non-scaling-stroke}
.item svg *{vector-effect:non-scaling-stroke}
.item span{letter-spacing:.01em;line-height:1}

.sep{height:1px;background:var(--rail-border);margin:5px 10px}
.spacer{flex:1}

/* A destination the rail names but no page serves yet. Not hidden: the sidebar
   should read as the finished set rather than growing an item at a time, and an
   item that quietly did nothing when clicked would look broken. */
.item--pending{cursor:default}
.item--pending:hover{background:none;opacity:.45}