/* The icon rail: the far-left column of the Project panel (aly-workspace-rail.js).
   ALYSSIUN semantic tokens only — no brand colour, no invented shadow. The
   selected item is marked three ways (fill, colour, a 2px inner edge) so it
   reads without relying on colour alone. */
.workspace-rail {
  flex: none; width: var(--workspace-rail-width); min-width: var(--workspace-rail-width);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 0; box-sizing: border-box;
  border-right: 1px solid var(--surface-line); background: var(--surface-2); color: var(--muted);
}
.workspace-rail .dock-home { margin: 0 0 2px; }
.workspace-rail-items { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.workspace-rail-nav { display: block; }
.workspace-rail-list { display: grid; gap: 4px; justify-items: center; }
.workspace-rail-item {
  position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.workspace-rail-item svg { display: block; }
.workspace-rail-item:hover, .workspace-rail-item:focus-visible { background: var(--surface); color: var(--text); }
.workspace-rail-item:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.workspace-rail-item[aria-selected="true"] {
  background: var(--surface); color: var(--text); box-shadow: inset 2px 0 0 var(--text);
}
/* The label is for assistive technology and the tooltip; it is never drawn inline. */
.workspace-rail-item-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Tooltip to the right, for a pointer that can hover and for keyboard focus.
   Same box as the resize divider's tooltip (aly-workspace-layout.css). */
@media (hover: hover) and (pointer: fine) {
  .workspace-rail-item::after {
    content: attr(data-tooltip); position: absolute; top: 50%; left: calc(100% + 10px); width: max-content;
    transform: translate(-4px, -50%); padding: 5px 7px; border: 1px solid var(--surface-line); border-radius: 6px;
    background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); font-size: 11px; line-height: 1.25;
    opacity: 0; pointer-events: none; z-index: 6; transition: opacity .14s ease, transform .14s ease;
  }
  .workspace-rail-item:hover::after, .workspace-rail-item:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-rail-item, .workspace-rail-item::after { transition: none; }
}