/* The console's shell in the Tandem look (19 Oct 2026, brief console-shell-ipad-brief.md). Loaded after app.css and
   tandem-tokens.css; <html class="tandem"> carries the Tandem tokens for the whole console, so the old pages, the Planner
   and the new load page share one palette. Nothing here changes behaviour, data, routes or permissions: the console's
   own variable names (app.css) are pointed at the Tandem roles once, the same mapping the load page uses (.lp2).
   The status colours (grey, blue, green, violet, amber, red, teal, orange, mint) stay the console's: they carry
   meaning on every page and were not part of this pass. Only token values here; literals are 1-2 px hairlines. */

html.tandem {
  --accent: var(--brand); --accent-hover: var(--brand-hover); --accent-soft: var(--brand-soft); --accent-ink: var(--brand-text);
  --on-accent: var(--on-brand);
  --line: var(--border); --line-2: var(--border-strong); --sunken: var(--surface-sunken); --surface-2: var(--bg);
  --ink: var(--text); --ink-2: var(--text-2); --ink-3: var(--text-3);
  --shadow: var(--shadow-1); --shadow-pop: var(--shadow-4); --r: var(--radius-lg); --r-sm: var(--radius-md);
}
/* --bg, --surface and --focus need no mapping: tandem-tokens.css defines them under the same names (and wins over
   app.css's :root by order in light mode and by weight in dark mode) */
html.tandem body { font-family: var(--font-sans); }
html.tandem h1 { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
html.tandem h2, html.tandem h3 { font-weight: var(--weight-semibold); }
html.tandem button.primary, html.tandem .button.primary { font-weight: var(--weight-semibold); }
html.tandem button:active:not(:disabled), html.tandem .button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { html.tandem button:active:not(:disabled), html.tandem .button:active { transform: none; } }

/* ------------------------------------------------------------------ the rail */
.shell:not(.out) > .content { grid-column: 2; }            /* the content keeps its column while the rail floats over it */
.rail { background: var(--surface); border-right-color: var(--border); }
.rail-top { display: flex; align-items: center; gap: 2px; min-width: 0; }
.rail-top .switcher { flex: 1 1 auto; min-width: 0; }
.rail-toggle { flex: none; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-md); background: none;
  color: var(--text-3); }
.rail-toggle:hover { background: var(--surface-sunken); color: var(--text); }
.rail-toggle .icon { width: 20px; height: 20px; }
.rail-slim .rail-top { flex-direction: column-reverse; gap: 4px; }
.rail-slim .rail-toggle { width: 44px; height: 40px; align-self: center; }
.rail nav a { color: var(--text-2); }
.rail nav a:hover { background: var(--surface-sunken); color: var(--text); }
/* the current page: fill and weight (and aria-current for screen readers) */
.rail nav a.on { background: var(--brand-soft); color: var(--brand-text); font-weight: var(--weight-semibold); }
.rail nav a.on .icon { stroke-width: 2.1; }
.rail .report { border-color: var(--border); color: var(--text-2); }
/* the rail's counts: the old white on amber/red was under 3:1; the Tandem solid pairs are 7:1 and more (scripts/shell-contrast.mjs) */
.nav-count.x-expired { background: var(--danger-solid); color: var(--on-solid); }
.nav-count.x-due { background: var(--warning-solid); color: var(--on-solid); }
/* focus is always visible inside the rail (its own scroll box would clip an outline drawn outside the item) */
.rail a:focus-visible, .rail button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rail a.button.primary.new:focus-visible { outline-offset: 2px; }

/* under 1100 px the wide rail opens over the page, with a scrim; Esc, a tap outside or a page change close it */
.shell.rail-over > .rail { position: fixed; left: 0; top: 0; bottom: 0; width: 248px; height: 100vh; height: 100dvh; z-index: 45;
  box-shadow: var(--shadow-5); }
.shell.rail-over::after { content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: 44; }
@media (prefers-reduced-motion: no-preference) {
  .shell.rail-over > .rail { animation: rail-in var(--duration-slow) var(--ease-standard); }
  @keyframes rail-in { from { transform: translateX(-12px); opacity: .6; } to { transform: none; opacity: 1; } }
}
@media (pointer: coarse) { .rail-toggle { min-width: 44px; min-height: 44px; } .rail-slim .rail-toggle { height: 44px; } }
@media print { .rail { display: none; } .shell:not(.out) > .content { grid-column: 1 / -1; } }