/* * The app shell: fixed sidebar and the main column beside it. * The sidebar collapses to an icon rail when the user asks (.sidebar-collapsed on , set by ux.js) * and always below 820px. PR 18 replaces the narrow rail with a drawer. */ .premium-shell { --sidebar-current: var(--sidebar-width); background: var(--surface-page); color: var(--text); } .sidebar-collapsed { --sidebar-current: var(--sidebar-width-collapsed); } .skip-link { position: fixed; top: -80px; left: var(--space-4); z-index: var(--z-skip-link); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--text-inverse); } .skip-link:focus { top: var(--space-3); } main { min-height: 100vh; margin-left: var(--sidebar-current); transition: margin var(--duration-base) var(--ease); } /* Sidebar */ .premium-side { position: fixed; inset: 0 auto 0 0; z-index: var(--z-sidebar); display: flex; flex-direction: column; width: var(--sidebar-current); padding: var(--space-5) var(--space-4) var(--space-4); background: var(--surface-translucent); box-shadow: 1px 0 0 var(--border); } .side-top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-0-5) var(--space-1) var(--space-4); } .premium-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; } /* The brand mark: the app shell and the sign-in pages. */ .mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: linear-gradient(145deg, var(--accent), var(--accent-hover)); box-shadow: var(--shadow-accent); color: var(--text-inverse); font-weight: var(--weight-bold); } .premium-brand .brand-copy { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); } .premium-brand small { display: block; margin-top: var(--space-0-5); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); } .side-collapse { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); cursor: pointer; } .nav-scroll { overflow: auto; padding-right: var(--space-0-5); } .navgroup { margin: var(--space-2) 0 var(--space-5); } .navgroup > span { display: block; padding: 0 var(--space-3) var(--space-1-5); color: var(--text-faint); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); } .premium-side nav a, .side-footer > a, .side-footer .signout { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-tertiary); text-decoration: none; } .premium-side nav a { min-height: 40px; margin: var(--space-0-5) 0; font-weight: var(--weight-semibold); } .premium-side nav a i, .side-footer > a i, .side-footer .signout i { width: 22px; color: var(--text-muted); font-size: var(--text-base); font-style: normal; text-align: center; } .premium-side nav a b, .side-footer > a b, .side-footer .signout b { font-weight: var(--weight-semibold); } .premium-side nav a:hover { background: var(--surface-page); color: var(--text); } .premium-side nav a.active, .premium-side nav a.active i { color: var(--text-accent); } .premium-side nav a.active { background: var(--accent-soft); } .side-footer { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); } .side-footer > a, .side-footer .signout { color: var(--text-muted); } .side-footer form { margin: 0; } .side-footer .signout { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .side-footer > a:hover, .side-footer .signout:hover { background: var(--surface-sunken); } .org-switcher { margin-top: var(--space-2); padding: 0 var(--space-1); } .org-switcher label { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); } .org-switcher-row { display: flex; gap: var(--space-1-5); } .org-switcher select, .org-switcher button { height: 32px; border: 1px solid var(--border); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); } .org-switcher select { flex: 1; min-width: 0; padding: 0 var(--space-2); background: var(--surface); color: var(--text); } .org-switcher button { padding: 0 var(--space-3); background: var(--surface-subtle); color: var(--text-secondary); font-weight: var(--weight-semibold); cursor: pointer; } .user-chip { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-subtle); } .user-chip .avatar { width: 30px; height: 30px; } .user-chip b, .user-chip small { display: block; font-size: var(--text-xs); } .user-chip small { margin-top: var(--space-0-5); color: var(--text-faint); } /* * Icon rail: wide screens, collapsed on request. Labels are hidden visually but stay readable by * screen readers (and show as tooltips), so every link keeps its name. */ @media (min-width: 821px) { .sidebar-collapsed .premium-side { padding-inline: var(--space-3); } .sidebar-collapsed .brand-copy, .sidebar-collapsed .navgroup > span, .sidebar-collapsed nav a b, .sidebar-collapsed .side-footer > a b, .sidebar-collapsed .side-footer .signout b, .sidebar-collapsed .user-chip > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sidebar-collapsed .org-switcher { display: none; } .sidebar-collapsed .side-top { flex-wrap: wrap; justify-content: center; } .sidebar-collapsed .side-collapse { position: absolute; top: var(--space-6); left: 58px; width: 24px; height: 24px; } .sidebar-collapsed nav a, .sidebar-collapsed .side-footer > a, .sidebar-collapsed .side-footer .signout, .sidebar-collapsed .user-chip { justify-content: center; padding: var(--space-2); } .sidebar-collapsed nav a i, .sidebar-collapsed .side-footer > a i, .sidebar-collapsed .side-footer .signout i { width: auto; } .sidebar-collapsed .user-chip { background: transparent; } } /* * Narrow screens: the sidebar is a drawer, opened from the header's menu button (ux.js adds * .nav-open to ). Closed, it is hidden from keyboards and screen readers as well as the eye. */ .nav-backdrop { display: none; } @media (max-width: 820px) { .premium-shell, .sidebar-collapsed { --sidebar-current: 0px; } .premium-side { width: min(var(--sidebar-width), 85vw); z-index: var(--z-modal); visibility: hidden; transform: translateX(-100%); transition: transform var(--duration-base) var(--ease), visibility var(--duration-base) var(--ease); } .nav-open .premium-side { visibility: visible; transform: none; box-shadow: var(--shadow-lg); } .side-collapse { display: none; } .nav-open .nav-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); display: block; background: var(--overlay); } .nav-open { overflow: hidden; } }