/* The rail's width (decision 52).

   Collapsed (the default) shows icons, each named by a tooltip; expanded,
   `html[data-rail="expanded"]` (set before paint by src/theme.ts), shows each
   icon with its name. The grid column widens, so the page's content moves
   over rather than being covered, and refits through its own observers. Icons
   keep their x in both widths, so only the names appear.

   Loaded by the Dashboard and the Studio after their own rail rules: the
   shared rules first (the Dashboard's 64px rail), then the Studio's sizes
   (its 72px rail, `.studio-page`). */

/* ---- The rail (kept from the old Studio, restyled to the design) -------- */

.st-rail .rail {
  font-family: var(--st-font);
  font-size: 13px;
  line-height: normal;
  z-index: 40;
  width: 72px;
  height: 100vh;
  gap: 0;
  padding: 20px 0;
  border-right: 1px solid var(--st-line);
  background: var(--st-panel);
}

.st-rail .rail__brand { margin-bottom: 24px; }
.st-rail .rail__brand img { width: 36px; height: 36px; border-radius: 10px; }

.st-rail .rail__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-rail .rail__link {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--st-text-faint);
}
.st-rail .rail__link svg { width: 18px; height: 18px; }
.st-rail .rail__link:hover { color: var(--st-text); background: var(--st-surface-2); }
.st-rail .rail__link[aria-current='page'] { color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 12.5%, transparent); }
/* A panel switch (Library) that is open: accent icon, no fill; the tinted fill is the current page's. */
.st-rail .rail__link[aria-pressed='true'] { color: var(--st-accent); }

.st-rail .rail__theme { margin-bottom: 16px; }

.st-rail .rail__me {
  width: 32px;
  height: 32px;
  background: var(--st-avatar-bg);
  color: var(--st-avatar-ink);
  font-family: var(--st-font);
  font-size: 13px;
  font-weight: 600;
}


.st-rail .app { grid-template-columns: 72px minmax(0, 1fr); }

.app { transition: grid-template-columns 0.2s var(--ease); }
:root[data-rail='expanded'] .app { grid-template-columns: 200px minmax(0, 1fr); }

/* Hidden but still read: a name is the item's accessible name in both widths. */
.rail__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rail__face { display: contents; }

/* The toggle sits under the logo; expanded, on the logo's row at the right. */
.rail__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}
.rail__head .rail__brand { margin-bottom: 0; }

:root[data-rail='expanded'] .rail { width: auto; align-items: stretch; padding-inline: 12px; }
:root[data-rail='expanded'] :is(.rail__brand, .rail__link, .rail__me) {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  min-width: 0;
}
:root[data-rail='expanded'] .rail__brand { padding-inline: 5px; }
:root[data-rail='expanded'] .rail__link { padding-inline: 10px; }
:root[data-rail='expanded'] .rail__link > svg { flex: none; }
:root[data-rail='expanded'] .rail__label {
  position: static;
  flex: 1;
  width: auto;
  height: auto;
  clip-path: none;
  min-width: 0;
  text-overflow: ellipsis;
  text-align: start;
}
:root[data-rail='expanded'] .rail__link[aria-current='page'] .rail__label { color: var(--st-accent-ink); }
:root[data-rail='expanded'] .rail__brand .rail__label { color: var(--text); font-size: 14px; font-weight: 600; }
/* Names are text, so they need 4.5:1 where the faint icons only need 3:1. */
:root[data-rail='expanded'] .rail__link:not(:hover, [aria-current='page']) .rail__label { color: var(--text-dim); }
/* The names are on screen, so the items' tips would only repeat them. */
:root[data-rail='expanded'] .rail :is([data-tip], .rail__theme) > .st-tip { display: none; }

/* Its open menu would sit under the account's tip. */
.rail__me[aria-expanded='true'] > .st-tip { display: none; }

/* The account: the button becomes a row, and the circle moves to its face. */
:root[data-rail='expanded'] .rail__me {
  width: 100%;
  height: 40px;
  padding: 0 2px;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font-weight: 500;
  box-shadow: none;
}
:root[data-rail='expanded'] .rail__me:hover { background: var(--ink-700); }
:root[data-rail='expanded'] .rail__face {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: #fff;
  font-weight: 600;
}
:root[data-rail='expanded'] .rail__me[aria-expanded='true'] .rail__face { box-shadow: 0 0 0 3px var(--accent-line); }

@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
}

/* Narrow windows: the expanded rail covers the page's edge instead of taking
   its width, which the content needs more than the names. */
@media (max-width: 900px) {
  :root[data-rail='expanded'] .app { grid-template-columns: 64px minmax(0, 1fr); }
  :root[data-rail='expanded'] .rail { width: 200px; box-shadow: var(--shadow-pop); }
}

/* ---- The Studio: the icons keep their x from its 72px rail, and the names
   use its type and tokens. ---- */
.st-rail .rail__head { margin-bottom: 24px; }
:root[data-rail='expanded'] .st-rail .rail { padding-inline: 16px; }
:root[data-rail='expanded'] .st-rail .rail__brand { padding-inline: 2px; }
:root[data-rail='expanded'] .st-rail .rail__brand .rail__label { color: var(--st-text); }
:root[data-rail='expanded'] .st-rail .rail__link { padding-inline: 11px; font-weight: 500; }
:root[data-rail='expanded'] .st-rail .rail__link:not(:hover, [aria-current='page']) .rail__label { color: var(--st-text-dim); }
:root[data-rail='expanded'] .st-rail .rail__link[aria-current='page'] .rail__label { color: var(--st-accent-ink); }
:root[data-rail='expanded'] .st-rail .rail__me { padding: 0 4px; color: var(--st-text); background: none; font-weight: 500; }
:root[data-rail='expanded'] .st-rail .rail__me:hover { background: var(--st-surface-2); }
:root[data-rail='expanded'] .st-rail .rail__face { width: 32px; height: 32px; background: var(--st-avatar-bg); color: var(--st-avatar-ink); }
@media (max-width: 900px) {
  :root[data-rail='expanded'] .st-rail .app { grid-template-columns: 72px minmax(0, 1fr); }
}

/* ---- The toggle, last so the items' expanded padding doesn't reach it ---- */
:root[data-rail='expanded'] .rail__head { flex-direction: row; justify-content: space-between; }
:root[data-rail='expanded'] .rail__head .rail__brand { flex: 1; gap: 8px; padding-inline-end: 0; }
/* 32px wide beside the wordmark, so "Chord Lens" fits whole. */
:root[data-rail='expanded'] .rail .rail__toggle { flex: none; justify-content: center; width: 32px; padding: 0; }
/* » expands; mirrored, « collapses. */
:root[data-rail='expanded'] .rail__toggle svg { transform: scaleX(-1); }

/* Library and History belong to the Studio, so they sit under it: indented when expanded. */
:root[data-rail='expanded'] .st-rail .rail__link--sub { width: calc(100% - 16px); margin-left: 16px; }
:root[data-rail='expanded'] .st-rail .rail__link.rail__link[aria-pressed='true'] .rail__label { color: var(--st-text); }

/* ---- Studio's items (decision 55): a group that opens and closes from the
   chevron beside Studio. `html[data-rail-studio]` holds the stored choice
   (set before paint by src/theme.ts); with none, it's open on the group's own
   pages (`body[data-rail-group='studio']`: the Studio and History) and closed
   elsewhere. ---- */
.rail__group,
.rail__sub { display: flex; flex-direction: column; gap: 6px; }
.rail__row { position: relative; display: flex; }
:root[data-rail-studio='closed'] .rail__sub,
:root:not([data-rail-studio]) body:not([data-rail-group='studio']) .rail__sub { display: none; }
/* A closed group holding the current page (History): Studio's row shows where you are. */
:root[data-rail-studio='closed'] .rail__group:has(.rail__sub [aria-current='page']) > .rail__row > .rail__link {
  color: var(--st-accent);
  background: color-mix(in srgb, var(--st-accent) 12.5%, transparent);
}
:root[data-rail-studio='closed'][data-rail='expanded'] .rail__group:has(.rail__sub [aria-current='page']) > .rail__row > .rail__link .rail__label {
  color: var(--st-accent-ink);
}
/* Icons only, there's no room for the chevron; the group keeps its state. */
.rail__disclose { display: none; }
:root[data-rail='expanded'] .rail__row .rail__link { flex: 1; padding-inline-end: 36px; }
:root[data-rail='expanded'] .rail__disclose {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--st-text-faint);
  cursor: pointer;
  translate: 0 -50%;
}
.rail__disclose:hover { color: var(--st-text); background: var(--st-surface-2); }
.rail__disclose svg { width: 16px; height: 16px; transition: transform 0.15s var(--ease); }
.rail__disclose[aria-expanded='false'] svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) {
  .rail__disclose svg { transition: none; }
}