/* --------------------------------------------------------------------------
   Rail — shared "on this page" anchor navigation (premium, context sensitive)
   ---------------------------------------------------------------------------
   One rail treatment across every zone that ships a left-hand anchor rail:
   the legal pages (.legal-sidebar) and the docs / resources pages
   (.rdoc-anchor). Loaded after those modules so it is the single source of
   truth for the rail look and its active state. Scroll position drives the
   highlight via /js/rail.js, which sets aria-current="true" and .is-current
   on the link for the section in view.
-------------------------------------------------------------------------- */

/* Shared scope: both existing rails plus any future [data-rail]. */
.legal-sidebar,
.rdoc-anchor,
.cl-toc,
.rail { --rail-line: var(--surface-border); }

/* Title ------------------------------------------------------------------ */
.legal-sidebar h2,
.rdoc-anchor-title,
.cl-toc-t,
.rail__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-sm);
    padding: 0 0 8px var(--space-md);
    border-bottom: 1px solid var(--surface-border);
}

/* List: a hairline guide runs down the left; each link paints its own
   segment of it when active, so the rail reads as a position indicator. */
.legal-sidebar ol,
.rdoc-anchor ul,
.cl-toc ol,
.rail__list {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    counter-reset: sec;
    border-left: 1px solid var(--rail-line);
}

.legal-sidebar li { counter-increment: sec; }

/* Links ------------------------------------------------------------------ */
.legal-sidebar a,
.rdoc-anchor a,
.cl-toc a,
.rail__link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-left: -1px;                 /* sit over the guide line */
    padding: 7px var(--space-md);
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--r-fine) var(--r-fine) 0;
    transition:
        color var(--dur-quick, 160ms) var(--ease, cubic-bezier(0.32,0.72,0,1)),
        background var(--dur-quick, 160ms) var(--ease, cubic-bezier(0.32,0.72,0,1)),
        border-color var(--dur-quick, 160ms) var(--ease, cubic-bezier(0.32,0.72,0,1));
}

.legal-sidebar a:hover,
.rdoc-anchor a:hover,
.cl-toc a:hover,
.rail__link:hover {
    color: var(--text);
    background: var(--surface);
    border-left-color: var(--text-muted);
}

.legal-sidebar a:focus-visible,
.rdoc-anchor a:focus-visible,
.cl-toc a:focus-visible,
.rail__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Active — the section currently in view. Accent segment on the guide,
   faint accent wash, medium weight for a clear "you are here". */
.legal-sidebar a[aria-current="true"],
.legal-sidebar a.is-current,
.rdoc-anchor a[aria-current="true"],
.rdoc-anchor a.is-current,
.rail__link[aria-current="true"],
.rail__link.is-current,
.cl-toc a.on,
.cl-toc a[aria-current="true"] {
    color: var(--color-accent);
    font-weight: 500;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    border-left-color: var(--color-accent);
}

/* Numeric / code keys harmonised with the active state. */
.legal-sidebar a::before {
    content: counter(sec, decimal-leading-zero);
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    min-width: 22px;
    transition: color var(--dur-quick, 160ms);
}
.rdoc-anchor a .k,
.cl-toc a .n { color: var(--text-muted); transition: color var(--dur-quick, 160ms); }

.legal-sidebar a[aria-current="true"]::before,
.legal-sidebar a.is-current::before,
.rdoc-anchor a[aria-current="true"] .k,
.rdoc-anchor a.is-current .k,
.cl-toc a.on .n { color: var(--color-accent); }

/* Older browsers without color-mix: fall back to the surface wash. */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
    .legal-sidebar a[aria-current="true"],
    .legal-sidebar a.is-current,
    .rdoc-anchor a[aria-current="true"],
    .rdoc-anchor a.is-current,
    .rail__link[aria-current="true"],
    .rail__link.is-current,
    .cl-toc a.on { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
    .legal-sidebar a,
    .rdoc-anchor a,
    .cl-toc a,
    .rail__link { transition: none; }
}