/* =========================================================================
   BASE — reset, document defaults, shared utilities
   ========================================================================= */

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

* { margin: 0; padding: 0; }

html, body { height: 100%; }
/* Native app feel: lock the document so the whole page can't be dragged /
   rubber-banded (only inner scrollers move). The native iOS wrapper also sets
   scrollView.bounces = false; this covers mobile-web + belts the wrapper. */
html, body { overscroll-behavior: none; }

/* ---- Native / touch feel (iOS app + mobile web) ---- */
html {
  -webkit-text-size-adjust: 100%;   /* iOS must not inflate our text on rotate/zoom */
  text-size-adjust: 100%;
}
* { -webkit-tap-highlight-color: transparent; }   /* no grey flash on tap */
/* Kill the double-tap-zoom delay + long-press callout on controls (keeps text
   in content/inputs selectable). */
button, a, label, summary, [role="button"], [data-route], [data-stage-set],
.btn, .nav-item, .footer-item, .kpi, .stage-trigger, .filter-opt, .kebab,
.quick-fab, .quick-sheet-action, .seg, .tab, .pill, .icon-btn, .btn-icon,
.task-row, .task-mention, .task-sec-head, .task-qa-date {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

svg { display: block; flex-shrink: 0; }

img { display: block; max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-primary);
}

/* thin, unobtrusive scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: padding-box; }
}
::-webkit-scrollbar-track { background: transparent; }

/* ---- Typography helpers --------------------------------------------- */
.t-strong { color: var(--text-strong); }
.t-muted  { color: var(--text-muted); }
.t-soft   { color: var(--text-soft); }

.heading {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

/* ---- Layout helpers -------------------------------------------------- */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.grow { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Positive / negative deltas ------------------------------------- */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}
.delta svg { width: 13px; height: 13px; }
.delta.up   { color: var(--success-600); }
.delta.down { color: var(--danger-600); }

/* ---- Divider --------------------------------------------------------- */
.divider { height: 1px; background: var(--border); border: none; }
.vdivider { width: 1px; align-self: stretch; background: var(--border); }

/* ---- Animations ------------------------------------------------------ */
@keyframes fadeUp {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
/* Screen-enter slide: a small horizontal offset reads as a native "screen
   pushed in" on each navigation. Transform-only (see note below) so content
   is never invisible if the animation can't advance. */
@keyframes viewEnter {
  from { transform: translateX(16px); }
  to   { transform: translateX(0); }
}
@keyframes viewBackEnter {
  from { transform: translateX(-16px); }
  to   { transform: translateX(0); }
}
@keyframes popIn {
  from { transform: translateY(8px) scale(0.99); }
  to   { transform: translateY(0) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Intro animates transform only — content stays fully visible even if a
   throttled/paused iframe never advances the animation past frame 0. */
.view-enter { animation: viewEnter var(--dur-slow) var(--ease-ios); }
.nav-back .view-enter { animation-name: viewBackEnter; }
@media (prefers-reduced-motion: reduce) { .view-enter { animation: none; } }