/* =====================================================================
   LaQuest Payroll — Base layer
   Reset, typography, accessibility primitives, and the app shell grid.
   Consumes semantic tokens only.
   ===================================================================== */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-body);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
}

/* Smooth, calm cross-fade when the theme flips. Scoped to the surfaces that
   actually change colour so the switch reads as one motion, not a flash.
   (prefers-reduced-motion neutralises this below.) */
body, .sidebar, .topbar, .card, .stat, .modal, .modal-backdrop, .input, .select,
.icon-btn, .btn--secondary, .badge, .status-pill, .anomaly-row, .table-wrap, .banner {
  transition: background-color var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard),
              color var(--dur-med) var(--ease-standard);
}

h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: var(--weight-semibold); color: var(--color-ink); letter-spacing: -0.011em; }
h1 { font-size: var(--text-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); letter-spacing: -0.017em; }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

a { color: var(--color-link); text-decoration: none; }
button { font-family: inherit; }

/* Numeric figures — tabular, aligned columns for money */
.mono, .num, .figure, .tnum, td.num, th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Accessibility: visible, never-removed focus ring */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: var(--space-2);
  background: var(--color-surface); color: var(--color-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); z-index: var(--z-toast);
}
.skip-link:focus { left: var(--space-2); }

/* --------------------------------------------------------------------- */
/* App shell — sidebar + main, responsive                                */
/* --------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-fg);
  border-right: 1px solid var(--color-sidebar-border);
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--space-4);
  gap: var(--space-5);
  z-index: var(--z-nav);
}

.main {
  min-width: 0;
  display: flex; flex-direction: column;
}

.main__scroll { padding: var(--space-6) var(--space-7) var(--space-9); flex: 1; min-width: 0; }

/* Content max width so dense tables stay readable on ultrawide */
.page { max-width: 1360px; margin: 0 auto; width: 100%; min-width: 0; }

/* Drawer scrim (mobile nav overlay) */
.scrim {
  position: fixed; inset: 0; background: var(--color-overlay);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-standard);
  z-index: 190;
}
.scrim.open { opacity: 1; pointer-events: auto; }

/* Utility layout */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.wrap    { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center  { align-items: center; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.grow  { flex: 1; }
.muted { color: var(--color-ink-muted); }
.subtle { color: var(--color-ink-subtle); }

/* minmax(0, 1fr) lets tracks shrink below content intrinsic width, so a wide
   child scrolls/wraps inside its cell instead of blowing out the page. */
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive split layouts (replace inline grid-template-columns) */
.split-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.split-form { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
/* FIXED 2026-08-19: this was a fixed two-track grid that only collapsed at a 768px VIEWPORT
   media query. .split-2 is nested inside .split-form's right column beside a 262px sidebar, so
   at a 1024px viewport its own container is only ~270px wide while the media query still reads
   "desktop" and keeps two columns. auto-fit responds to the CONTAINER: two columns whenever
   both fit at 240px, one when they do not. Measured on Payroll Calculator at 1024px: the
   Total deductions figure overflowed the card by 12px before, 0 after; unchanged at 1280+. */
.split-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }

/* --------------------------------------------------------------------- */
/* Desktop collapsed rail — burger shrinks the sidebar to an icon rail.   */
/* Only above the drawer breakpoint; below 900px the burger opens the     */
/* off-canvas drawer instead and this attribute is ignored.               */
/* --------------------------------------------------------------------- */
@media (min-width: 901px) {
  html[data-sidebar-collapsed="1"] .app { grid-template-columns: 72px 1fr; }
  html[data-sidebar-collapsed="1"] .sidebar { padding: var(--space-4) var(--space-2); gap: var(--space-3); align-items: stretch; }
  /* Collapsed = icon-only: hide labels + badges; section headers become a rule. */
  html[data-sidebar-collapsed="1"] .nav__label,
  html[data-sidebar-collapsed="1"] .nav__item .badge { display: none; }
  html[data-sidebar-collapsed="1"] .nav__section { height: 1px; padding: var(--space-3) var(--space-3) var(--space-2); overflow: hidden; color: transparent; }
  html[data-sidebar-collapsed="1"] .nav__section::after { content: ''; display: block; height: 1px; background: var(--color-border); }
  html[data-sidebar-collapsed="1"] .nav__item { justify-content: center; padding: var(--space-2); position: relative; }
  /* Floating tooltip on hover/focus (data-label set in renderNav). */
  html[data-sidebar-collapsed="1"] .nav__item[data-label]:hover::after,
  html[data-sidebar-collapsed="1"] .nav__item[data-label]:focus-visible::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--color-sidebar-bg); color: var(--color-sidebar-fg-strong);
    border: 1px solid var(--color-sidebar-border);
    padding: 6px var(--space-3); border-radius: var(--radius-sm); white-space: nowrap;
    font-size: var(--text-sm); font-weight: var(--weight-medium); box-shadow: var(--shadow-lg);
    z-index: var(--z-toast); pointer-events: none;
  }
  /* accent strip removed 2026-08-17 */
}

/* --------------------------------------------------------------------- */
/* Breakpoints: 1280 (desktop) · 1024 · 900 (nav drawer) · 768 · 480     */
/* --------------------------------------------------------------------- */

/* Tablet & down — KPI/stat grids to 2 columns; workspace split stacks. */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-main { grid-template-columns: minmax(0, 1fr); }
}

/* Sidebar collapses to an off-canvas drawer below ~900px. */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; width: 264px; max-width: 82vw;
    transform: translateX(-100%); transition: transform var(--dur-med) var(--ease-standard);
    will-change: transform;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main__scroll { padding: var(--space-5) var(--space-5) var(--space-8); }
}

/* Phone — single-column grids, single-column split forms/charts, tighter pad. */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .split-form, .split-2 { grid-template-columns: minmax(0, 1fr); }
  /* Touch targets >= 44px for anything tappable. */
  :root { --button-height: 44px; --input-height: 44px; }
  .btn--sm { height: 40px; }
  .input, .select { height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .nav__item { min-height: 44px; }
  .tab { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .chip { min-height: 40px; }
  .role-switch button { min-height: 36px; }
}

@media (max-width: 480px) {
  .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .main__scroll { padding: var(--space-4) var(--space-4) var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .sidebar { transition: none; }
}