/* Pinned and Recent sections in the explorer rail, and the pin toggle in the file head (docs/frontend-design.md §3.5).
   Tokens only. */

.rail__section {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
}

.rail__group {
    margin: 0;
    padding: var(--s-1) var(--s-2) 0;
    font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-lo);
}

.rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rail__link {
    display: block;
    min-height: var(--row-h);
    padding: var(--s-1) var(--s-2);
    overflow: hidden;
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    color: var(--paper-lo);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--r-1);
}

.rail__link:hover {
    color: var(--paper-hi);
    background-color: var(--ink-3);
}

.rail__link:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Pressed means the file is pinned; the icon fills with the accent. */
.pin-toggle[aria-pressed="true"] {
    color: var(--accent-ink);
    border-color: var(--accent);
}

.pin-toggle[aria-pressed="true"] .icon {
    color: var(--accent);
}