/* style — the app rail down the side.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---- The app rail -----------------------------------------------------
   A thin column of workspaces down the far left, outside everything else.
   It is deliberately the only fixed furniture in the app: the header changes
   what it says, the workspace changes entirely, but the way between them is
   always in the same 46 pixels. Full height rather than tucked under the
   header, so the header belongs to the workspace and the rail belongs to the
   app — which is the actual relationship. */
#railnav {
  position: fixed; left: 0; top: 0; bottom: 0; width: 46px; z-index: 210;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  /* THE RAIL IS THE SAME SURFACE AS EVERYTHING ELSE. Simon: "Adjust the
     colour of the menu on the far left, and Windows header up the top so it
     mimics the rest of the design."

     It was #0b0b0c, written out in digits -- two points darker than the old
     --bg of #0d0d0e, which is what made it read as its own strip. The window
     behind it is #08080a now, so the same literal had quietly become two
     points LIGHTER: the one piece of furniture in the app that never moves,
     glowing faintly against everything that did. Through the token, with the
     hairline on its right edge doing the separating, which is all the
     separation it ever needed. */
  padding: 7px 0; background: var(--bg); border-right: 1px solid var(--border);
}
.rail-btn {
  width: 40px; padding: 6px 0 5px; border: none; border-radius: 3px;
  background: none; color: var(--text-faint); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: inherit;
}
.rail-btn svg { width: 16px; height: 16px; }
.rail-btn span { font-size: 7.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.rail-btn:hover { color: var(--text); background: var(--surface-sunk); }
.rail-btn.on { color: #fff; background: var(--accent); }
.rail-btn.soon { opacity: .45; }

/* Everything else starts after the rail, and below the fixed header.
   --hdr-h is measured from the real header in main.js; the fallback is
   only in play for the first frame. */
#app { padding-left: 68px; padding-top: var(--hdr-h, 50px); }