/* ==========================================================================
   base.css — reset, typography, app shell, tab bar.
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--c-ink);
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  /* Text selection is noise in a one-handed workout app; re-enabled per element. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--c-brass); text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- icons ----
   Inline SVG has no intrinsic size and defaults to fill:black. Both of those
   defaults are wrong for a line-icon set, and unset they produce a 300x150 black
   shape rather than an icon. This is the floor every icon inherits; component
   rules that need a different size or a fill override it. */

.ico {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--fill { fill: currentColor; stroke: none; }

/* The disclosure chevron, everywhere it appears. */
.chev { width: 18px; height: 18px; color: var(--c-bone-3); }

/* Numerals must never reflow while a timer counts. */
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --- Type roles ---------------------------------------------------------- */

.eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-bone-3);
  font-weight: 600;
}
.eyebrow--brass { color: var(--c-brass-dim); }

.title    { font-size: var(--t-title);   font-weight: 640; letter-spacing: var(--ls-tight); }
.display  { font-size: var(--t-display); font-weight: 680; letter-spacing: -0.03em; }
.hero     { font-size: var(--t-hero);    font-weight: 700; letter-spacing: -0.035em;
            font-family: var(--font-num); }
.lead     { font-size: var(--t-lead);    font-weight: 500; }
.small    { font-size: var(--t-small);   color: var(--c-bone-2); }
.caption  { font-size: var(--t-caption); color: var(--c-bone-3); }
.muted    { color: var(--c-bone-2); }
.dim      { color: var(--c-bone-3); }

/* --- App shell ----------------------------------------------------------- */

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--safe-t) + var(--s-4)) var(--s-4)
           calc(var(--tabbar-h) + var(--safe-b) + var(--s-10));
}

/* Immersive screens (workout runner, guided flow) hide the tab bar. */
body.is-immersive .tabbar { transform: translateY(120%); pointer-events: none; }
body.is-immersive .screen { padding-bottom: calc(var(--safe-b) + var(--s-6)); }

.screen__head { margin-bottom: var(--s-6); }
.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-8); }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

.section-label {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-8) 0 var(--s-3);
}
.section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--c-line-soft);
}

/* --- Tab bar ------------------------------------------------------------- */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  background: rgba(11, 11, 12, 0.86);                         /* fallback */
  background: color-mix(in srgb, var(--c-ink) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--c-line-soft);
  transition: transform var(--d-base) var(--e-out);
}

.tabbar__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--c-bone-3);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
  transition: color var(--d-fast) var(--e-out);
  min-height: 44px;              /* touch target floor */
}
.tabbar__item svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
                    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabbar__item[aria-selected="true"] { color: var(--c-bone); }
.tabbar__item[aria-selected="true"] svg { stroke: var(--c-brass); }

/* --- Focus & motion floors ----------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Screen transitions --------------------------------------------------- */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.screen { animation: riseIn var(--d-base) var(--e-out); }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }