/* ============================================================
   ScaleUP — base: reset, typography, app shell, motion primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* The document scrolls, not a nested container.
   Earlier versions locked the body and scrolled an inner div. That depends on
   an unbroken chain of min-height:0 through grid and flex parents, and any
   single link failing leaves content unreachable — which is exactly what kept
   happening. Native document scroll works with every wheel, trackpad, mouse
   and assistive device without that chain existing at all. */
body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.021em; line-height: 1.22; }
h1 { font-size: var(--t-h1); letter-spacing: -0.028em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

/* Tabular figures wherever numbers must line up vertically. */
.tnum, td.num, .axis-tick { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft); color: var(--text); }

/* ---- focus: invisible until keyboard, then unmistakable ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- scrollbars: present, never loud ---- */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
.scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  /* Grows with content; the page scrolls. The columns stay put via sticky. */
  align-items: start;
  min-height: 100vh;
  min-height: 100dvh;
}
.shell.has-rail { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w); }

/* ---- sidebar ---- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-3) var(--s-4);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--glass-line);
  z-index: 20;
  /* Stays in place while the page scrolls, and scrolls internally only if it
     is taller than the window. */
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s-2) var(--s-3) var(--s-6);
}
.brand-mark {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.brand-name { font-size: 1rem; font-weight: 650; letter-spacing: -0.03em; }

.nav-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
  padding: var(--s-5) var(--s-3) var(--s-2);
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-body); font-weight: 500;
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; transition: opacity var(--dur-1) var(--ease); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { color: var(--accent); background: var(--accent-soft); font-weight: 550; }
.nav-item.active svg { opacity: 1; }
/* The active marker slides between items rather than blinking on. */
.nav-item.active::before {
  content: '';
  position: absolute; left: -12px; top: 50%;
  width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: var(--accent);
  animation: markerIn var(--dur-2) var(--ease) both;
}
@keyframes markerIn {
  from { transform: scaleY(0.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.nav-badge {
  margin-left: auto;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: var(--r-full);
  background: var(--accent); color: var(--text-on-accent);
}
.nav-badge.quiet { background: var(--surface-3); color: var(--text-2); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); }

/* ---- main column ---- */
/* min-height: 0 is load-bearing. A grid item defaults to min-height: auto,
   which refuses to shrink below its content — so a tall page pushed .main
   past 100vh and, with body overflow hidden, everything below the fold
   became unreachable. The inner .view-scroll can only scroll if its parent
   is allowed to be shorter than what it contains. */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--page);
}

/* Rides along at the top of the window as the page scrolls. */
.topbar {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-8) var(--s-4);
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--page);
}
.topbar h1 { flex-shrink: 0; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

/* Not a scroll container any more — the document scrolls. `overflow: visible`
   is stated explicitly so the legacy `.scroll` class on this element cannot
   quietly reintroduce a nested scroller. */
.view-scroll {
  flex: 1 1 auto;
  overflow: visible;
  padding: 0 var(--s-8) var(--s-16);
}

/* ---- right rail ---- */
.rail {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ============================================================
   VIEW TRANSITIONS
   Pages slide in; cards fade up in sequence behind them.
   ============================================================ */
.view { animation: viewIn var(--dur-3) var(--ease) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.view.leaving { animation: viewOut var(--dur-1) var(--ease-in) both; }
@keyframes viewOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(0, -6px, 0); }
}

/* Staggered entrance. --i is set inline by the renderer. */
.stagger {
  animation: cardIn var(--dur-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.995); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.grid { display: grid; gap: var(--s-4); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin: var(--s-8) 0 var(--s-4);
}
.section-head:first-child { margin-top: 0; }
.section-head h2 { letter-spacing: -0.022em; }
.section-head p { font-size: var(--t-sm); color: var(--text-3); }

.muted   { color: var(--text-2); }
.faint   { color: var(--text-3); }
.mono    { font-family: var(--mono); font-size: 0.9em; }

.page-sub { font-size: var(--t-body); color: var(--text-3); margin-top: 2px; }

/* ============================================================
   RESPONSIVE
   The rail folds away first, then the sidebar becomes a bar.
   ============================================================ */
@media (max-width: 1420px) {
  .shell.has-rail { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .rail { display: none; }
  .rail-toggle { display: inline-flex !important; }
}
@media (max-width: 1120px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 68px; }
  .brand-name, .nav-item span, .nav-label, .sidebar-foot .plan-card { display: none; }
  .nav-item { justify-content: center; padding: 11px; }
  .nav-badge { display: none; }
  .topbar, .view-scroll { padding-left: var(--s-4); padding-right: var(--s-4); }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PRINT — reports export to PDF through the browser, so the
   print sheet is a real deliverable, not an afterthought.
   ============================================================ */
@media print {
  :root { --page: #FFFFFF; --surface: #FFFFFF; }
  .sidebar, .rail, .topbar-end, .scaley-fab, .no-print { display: none !important; }
  .shell, .shell.has-rail { grid-template-columns: 1fr; height: auto; }
  body { overflow: visible; }
  .view-scroll { overflow: visible; padding: 0; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #E5E5E5; }
  .view, .stagger { animation: none !important; opacity: 1 !important; transform: none !important; }
}