/* Layout: the application shell — sidebar, topbar, and the region the views are painted into. Everything here is chrome; the views themselves own nothing in this file. The shell is a two-column grid whose first track is the sidebar. Collapsing the sidebar animates that track, not a transform, so the content column is always exactly as wide as the space left over — no overlap, no dead gutter. Three modes, driven by two classes on (set by ui/Sidebar.js): (default) expanded sidebar .is-collapsed 72px icon rail .is-drawer off-canvas sidebar + hamburger (below 1024px) .is-drawer-open ... and it is currently open */ /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 100; padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--ink); border: 1px solid var(--gridline); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-base); font-weight: var(--font-weight-semibold); text-decoration: none; /* Off-screen until focused — present for the keyboard, absent for the mouse. */ transform: translateY(-200%); transition: transform var(--motion-fast) ease-out; } .skip-link:focus-visible { transform: translateY(0); } /* ---------- Focus ---------- */ /* One visible ring for every interactive element in the shell. :focus-visible only, so a mouse click never paints a ring the user did not ask for. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* ---------- Shell ---------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; } body.is-collapsed .app-shell { grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr); } body.is-drawer .app-shell { /* Off-canvas: the sidebar leaves the grid entirely and the content gets it all. */ grid-template-columns: minmax(0, 1fr); } .app-shell { transition: grid-template-columns var(--motion-shell) ease; } /* ---------- Sidebar ---------- */ .sidebar { display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; max-height: 100vh; background: var(--surface); border-right: 1px solid var(--gridline); overflow: hidden; } .sidebar-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); min-height: var(--topbar-height); border-bottom: 1px solid var(--gridline); } .sidebar-logo { display: inline-flex; flex: 0 0 auto; color: var(--color-primary); } .sidebar-brand { display: flex; flex-direction: column; min-width: 0; line-height: var(--leading-tight); } .sidebar-brand-name { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--ink); white-space: nowrap; } /* The trust signal: the data never leaves the machine. It is not decoration. */ .sidebar-brand-sub { font-size: var(--text-xs); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Only exists inside the off-canvas drawer. */ .sidebar-close { display: none; margin-left: auto; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); appearance: none; border: 1px solid transparent; background: transparent; color: var(--ink-secondary); border-radius: var(--radius-md); cursor: pointer; } .sidebar-close:hover { background: var(--page); color: var(--ink); } body.is-drawer .sidebar-close { display: inline-flex; } .sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) var(--space-3); } .nav-group + .nav-group { margin-top: var(--space-5); } .nav-group-title { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nav-link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink-secondary); text-decoration: none; font-size: var(--text-base); font-weight: var(--font-weight-medium); white-space: nowrap; transition: background var(--motion-fast) ease, color var(--motion-fast) ease; } .nav-link:hover { background: var(--page); color: var(--ink); } .nav-link .nav-icon { display: inline-flex; flex: 0 0 24px; color: var(--muted); transition: color var(--motion-fast) ease; } .nav-link:hover .nav-icon { color: var(--ink-secondary); } .nav-link .nav-label { overflow: hidden; text-overflow: ellipsis; } /* Active item: tinted background + the primary ink, and a left marker so the state survives for anyone who cannot separate the two blues. */ .nav-link.is-active { background: var(--color-primary-subtle); color: var(--color-primary); font-weight: var(--font-weight-semibold); } .nav-link.is-active .nav-icon { color: var(--color-primary); } .sidebar-foot { border-top: 1px solid var(--gridline); padding: var(--space-2) var(--space-3); } .sidebar-collapse { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap-target); padding: var(--space-2) var(--space-3); appearance: none; border: 1px solid transparent; background: transparent; border-radius: var(--radius-md); color: var(--ink-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: background var(--motion-fast) ease, color var(--motion-fast) ease; } .sidebar-collapse:hover { background: var(--page); color: var(--ink); } .sidebar-collapse .nav-icon { display: inline-flex; flex: 0 0 24px; } .sidebar-collapse[hidden] { display: none; } /* ---------- Collapsed rail ---------- */ /* Labels leave the flow but keep their accessible name: the anchor still has aria-label + title, so the link is never anonymous — it is just narrow. */ body.is-collapsed .sidebar-brand, body.is-collapsed .nav-group-title, body.is-collapsed .nav-link .nav-label, body.is-collapsed .sidebar-collapse .nav-label { display: none; } body.is-collapsed .sidebar-head { justify-content: center; padding-inline: 0; } body.is-collapsed .nav-link, body.is-collapsed .sidebar-collapse { justify-content: center; padding-inline: var(--space-2); } body.is-collapsed .nav-group + .nav-group { margin-top: var(--space-3); padding-top: var(--space-3); /* With the group titles gone, a rule is the only thing left saying "new group". */ border-top: 1px solid var(--gridline); } body.is-collapsed .sidebar-collapse .nav-icon { transform: rotate(180deg); } /* ---------- Main column ---------- */ .main-col { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-height); padding: var(--space-2) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--gridline); } .topbar-title { margin: 0; font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); appearance: none; border: 1px solid var(--gridline); background: var(--surface); color: var(--ink-secondary); border-radius: var(--radius-md); padding: 0 var(--space-2); font-size: var(--text-lg); line-height: 1; cursor: pointer; transition: background var(--motion-fast) ease, color var(--motion-fast) ease; } .icon-btn:hover { background: var(--page); color: var(--ink); } /* The hamburger only exists where the sidebar is off-canvas. */ .nav-toggle { display: none; } body.is-drawer .nav-toggle { display: inline-flex; } .logout-btn { appearance: none; min-height: var(--tap-target); border: 1px solid var(--gridline); background: var(--surface); color: var(--ink-secondary); border-radius: var(--radius-md); padding: 0 var(--space-4); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background var(--motion-fast) ease, color var(--motion-fast) ease; } .logout-btn:hover { background: var(--page); color: var(--ink); } .logout-btn[hidden] { display: none; } main#view-root { flex: 1 1 auto; max-width: 1280px; width: 100%; padding: var(--space-6) var(--space-6) var(--space-12); } .view[hidden] { display: none; } /* Shell-level error surface: belongs to the app, not to any single view, so a boot failure is visible whatever the landing route happens to be. */ #app-error[hidden] { display: none; } /* ---------- Off-canvas drawer (< 1024px) ---------- */ .nav-backdrop { display: none; } body.is-drawer .sidebar { position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: min(var(--sidebar-width), 86vw); max-height: none; box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform var(--motion-shell) ease; } body.is-drawer.is-drawer-open .sidebar { transform: translateX(0); } body.is-drawer .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(11, 11, 11, 0.45); } body.is-drawer .nav-backdrop[hidden] { display: none; } body.is-drawer main#view-root { padding: var(--space-5) var(--space-4) var(--space-11); } body.is-drawer .topbar { padding-inline: var(--space-4); } /* ---------- Reduced motion ---------- */ /* The sidebar is a navigation aid, not an animation. If the user asked for no motion, the width change and the slide are simply not animated. */ @media (prefers-reduced-motion: reduce) { .app-shell, .sidebar, .skip-link, .nav-link, .icon-btn, .logout-btn, .sidebar-collapse { transition: none; } }