/* Stage 1 shell boundary. Legacy page rules remain in styles.css. */
body { background: var(--ui-bg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
body.auth-mode { background: var(--ui-bg); }
.app-frame { display: grid; grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.shell { width: min(100%, var(--ui-content-max)); min-width: 0; max-width: var(--ui-content-max); margin: 0 auto; padding: 0 var(--ui-content-gutter) 48px; }
.app-sidebar { grid-row: 1; display: flex; flex-direction: column; gap: 16px; padding: 24px 12px; border-right: 1px solid var(--ui-border); background: var(--ui-surface-inset); transition: width .16s ease, padding .16s ease; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; color: var(--ui-text); text-decoration: none; }
.sidebar-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-control); color: var(--ui-accent); font-weight: 900; }
.sidebar-brand strong { display: block; font-size: 1rem; letter-spacing: .02em; }
.sidebar-brand small { display: block; margin-top: 2px; color: var(--ui-text-muted); font-size: .6875rem; letter-spacing: .08em; }
.sidebar-collapse { align-self: flex-end; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-text-muted); cursor: pointer; }
.sidebar-collapse svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .16s ease; }
.sidebar-collapse:hover { background: var(--ui-hover); color: var(--ui-text); }
.sidebar-nav { display: flex; flex: 1; flex-direction: column; gap: 20px; }
.sidebar-group { display: grid; gap: 4px; }
.sidebar-group-label { margin: 0 10px 4px; color: var(--ui-text-muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.sidebar-nav .view-nav { display: grid; gap: 2px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.sidebar-nav .nav-tab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--ui-radius-control); color: var(--ui-text-muted); font-weight: 700; text-align: left; }
.sidebar-nav .nav-tab:hover { background: var(--ui-hover); color: var(--ui-text); }
.sidebar-nav .nav-tab.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-text); box-shadow: none; }
.nav-icon { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: currentColor; }
.nav-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.app-frame { transition: grid-template-columns .16s ease; }
html[data-sidebar="compact"] .app-frame { grid-template-columns: var(--ui-sidebar-compact) minmax(0, 1fr); }
html[data-sidebar="compact"] .app-sidebar { padding-inline: 10px; align-items: stretch; }
html[data-sidebar="compact"] .sidebar-brand { justify-content: center; }
html[data-sidebar="compact"] .sidebar-brand > span:last-child,
html[data-sidebar="compact"] .sidebar-group-label,
html[data-sidebar="compact"] .sidebar-nav .nav-tab > span:last-child { display: none; }
html[data-sidebar="compact"] .sidebar-collapse { align-self: center; }
html[data-sidebar="compact"] .sidebar-collapse svg { transform: rotate(180deg); }
html[data-sidebar="compact"] .sidebar-nav .nav-tab { justify-content: center; padding-inline: 8px; }
.sidebar-footer { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ui-border); }
.sidebar-footer .status { justify-content: flex-start; border: 0; border-radius: var(--ui-radius-control); background: transparent; padding: 4px 8px; font-size: .75rem; }
.app-shell-header { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 88px; margin: 0; padding: 20px 0 16px; border-bottom: 1px solid var(--ui-border); }
.app-shell-header .brand h1 { font-size: 1.5rem; line-height: 1.1; }
.app-shell-header .brand .eyebrow { color: var(--ui-text-subtle); font-size: .6875rem; }
.app-shell-header .brand .subtitle { display: none; }
.app-shell-header .global-status { gap: 8px; }
.app-shell-header .status, .app-shell-header .status-meta, .app-shell-header .ghost { border-radius: var(--ui-radius-control); background: var(--ui-surface); }
.app-shell-header .status-meta { min-width: auto; }
.app-shell-header .auth-logout { min-height: var(--ui-control-height); }
.app-shell-header .dot, .app-shell-header .status[data-status="live"] .dot, .app-shell-header .status[data-status="stale"] .dot { box-shadow: none; }
.app-frame > .shell > :first-child:not(.app-shell-header) { margin-top: 20px; }
.page-head { margin-top: 24px; }
.nav-tab:focus-visible, .sidebar-brand:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .app-frame { display: block; }
  .app-sidebar { position: sticky; top: 0; z-index: 10; display: block; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .sidebar-brand, .sidebar-footer, .sidebar-collapse { display: none; }
  .sidebar-nav { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; }
  .sidebar-group { display: flex; flex: 0 0 auto; flex-direction: row; gap: 4px; align-items: center; }
  .sidebar-group-label { display: none; }
  .sidebar-nav .view-nav { display: flex; flex-direction: row; }
  .sidebar-nav .nav-tab { width: auto; min-width: 44px; justify-content: center; white-space: nowrap; }
  .sidebar-nav .nav-tab > span:last-child { display: inline; }
  html[data-sidebar="compact"] .sidebar-nav .nav-tab > span:last-child { display: inline; }
  html[data-sidebar="compact"] .sidebar-nav .nav-tab { width: auto; padding-inline: 8px; }
  .nav-icon { display: none; }
  .shell { width: 100%; max-width: none; padding: 0 12px 32px; }
  .app-shell-header { min-height: 72px; padding: 14px 0 12px; }
  .app-shell-header .global-status { display: grid; grid-template-columns: auto auto; }
  .app-shell-header .status { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }