/* Shared C2 frame. Theme variants extend these six tokens. */
:root {
    --rail: #232019; --rail-2: #2c281f; --rail-ink: #e8e2d5;
    --rail-muted: #b7af9e; --rail-line: #3a352a; --rail-accent: #e0ad52;
    --rail-control-line: #82796b;
}
[x-cloak] { display: none !important; }
.ntools-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; background: var(--rail); }
.ntools-shell.no-rail { grid-template-columns: minmax(0, 1fr); }
.ntools-content { min-inline-size: 0; min-block-size: calc(100vh - 47px); background: var(--bg); color: var(--ink); }
.ntools-content .page { inline-size: 100%; }
.topbar { background: var(--rail); border-block-end-color: var(--rail-line); color: var(--rail-ink); }
.topbar .brand, .topbar .brand:hover, .topbar .acct { color: var(--rail-ink); }
.topbar .brand b { color: var(--rail-accent); }
.topbar .topnav a { color: var(--rail-muted); }
/* The rail is as tall as its own contents, never taller than the viewport. It
   sits below the top bar, so a fixed 100vh would push its last items - the club
   badge and the appearance picker - below the fold at scroll position zero. */
.ntools-rail { position: sticky; inset-block-start: 0; max-block-size: 100vh; overflow-y: auto; padding-block: 12px 22px; border-inline-end: 1px solid var(--rail-line); color: var(--rail-ink); --focus: var(--rail-accent); }
.rail-toggle { display: flex; align-items: center; gap: 10px; margin: 0 8px 8px; padding: 6px 8px; min-block-size: 44px; border: 1px solid var(--rail-control-line); border-radius: var(--radius); background: var(--rail-2); color: var(--rail-ink); cursor: pointer; font: inherit; font-size: 12px; }
.rail-toggle svg, .ntools-rail nav svg { inline-size: 18px; block-size: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ntools-rail .ctxbar { display: block; padding: 0 16px 6px; border: 0; background: transparent; }
.ntools-rail .ctxbar label, .rail-heading { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rail-muted); }
.ntools-rail .ctxbar label { margin-block-end: 5px; }
.ntools-rail .ctxbar select { inline-size: 100%; max-inline-size: 100%; min-block-size: 44px; background: var(--rail-2); border-color: var(--rail-control-line); color: var(--rail-ink); }
.ntools-rail .ctxbar .fine { display: block; color: var(--rail-muted); font-size: 11px; margin-block-start: 6px; }
.rail-heading { padding: 14px 16px 7px; margin: 0; }
.ntools-rail nav a { display: flex; align-items: center; gap: 11px; padding: 9px 16px; min-block-size: 44px; border-inline-start: 2px solid transparent; color: var(--rail-ink); text-decoration: none; font-size: 13px; transition: background-color 120ms, border-color 120ms; }
.ntools-rail nav a:hover { background: var(--rail-2); color: var(--rail-ink); }
.ntools-rail nav a.here { background: var(--rail-2); border-inline-start-color: var(--rail-accent); font-weight: 600; }
.ntools-rail nav a.here svg { color: var(--rail-accent); }
.rail-external { display: block; font-size: 10px; color: var(--rail-muted); }
.railclub { margin: 16px; padding: 10px 12px; border: 1px solid var(--rail-line); border-radius: var(--radius); background: var(--rail-2); color: var(--rail-ink); font-size: 12px; }
/* Padding rather than align-content: block-level align-content only reached
   browsers in 2024 and silently does nothing on anything older, which would
   leave these short of the 44px target rather than centred in it. */
.railclub summary { min-block-size: 44px; display: list-item; padding-block: 10px; cursor: pointer; color: var(--rail-accent); font-weight: 600; }
.railclub ul { padding-inline-start: 16px; }
.railclub a { color: var(--rail-accent); display: inline-block; min-block-size: 44px; padding-block: 11px; }
.club-mobile, .picker-mobile { display: none; }
@media (min-width: 821px) {
    [data-rail="collapsed"] .ntools-shell:not(.no-rail) { grid-template-columns: 56px minmax(0, 1fr); }
    [data-rail="collapsed"] .ntools-rail .ctxbar,
    [data-rail="collapsed"] .ntools-rail .rail-heading,
    [data-rail="collapsed"] .ntools-rail .railclub,
    [data-rail="collapsed"] .ntools-rail .ntools-theme-picker { display: none; }
    [data-rail="collapsed"] .ntools-rail .rail-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    [data-rail="collapsed"] .rail-toggle { padding-inline: 9px; }
}
@media (max-width: 820px) {
    .ntools-shell { grid-template-columns: minmax(0, 1fr); }
    .ntools-rail { position: static; block-size: auto; overflow: visible; min-inline-size: 0; padding-block: 8px 0; border-inline-end: 0; border-block-end: 1px solid var(--rail-line); }
    .rail-toggle, .rail-heading, .club-desktop { display: none; }
    /* On a phone the rail is a strip above the page. Reading and Appearance
       share one row so the chrome costs a single line before the content,
       and the navigation keeps the full width below them. */
    .ntools-rail { display: flex; flex-wrap: wrap; align-items: end; }
    /* min-inline-size:0 on both: a flex item defaults to its min-content width,
       and a select's min-content is its longest option, which would otherwise
       drag the row past the viewport. */
    .ntools-rail .ctxbar { flex: 1 1 190px; min-inline-size: 0; padding: 0 12px 8px; }
    .ntools-rail .ctxbar .fine { display: none; }
    .ntools-rail .ntools-theme-picker { flex: 1 1 140px; min-inline-size: 0; }
    .ntools-rail .ntools-theme-picker select, .ntools-rail .ctxbar select { max-inline-size: 100%; }
    .ntools-rail nav { flex: 1 1 100%; order: 3; }
    .ntools-rail nav { display: flex; gap: 2px; overflow-x: auto; padding-inline: 8px; }
    .ntools-rail nav a { flex: 0 0 auto; border-inline-start: 0; border-block-end: 2px solid transparent; padding: 10px 11px; white-space: nowrap; }
    .ntools-rail nav a.here { border-block-end-color: var(--rail-accent); background: transparent; }
    .ntools-rail nav svg, .rail-external { display: none; }
    .club-mobile { display: block; }
}
@media print {
    .ntools-rail, .club-mobile { display: none; }
    .ntools-shell { display: block; }
}