/* ============================================================
   Taily v4 — reset, stage, type.
   Every size, colour, space and radius comes from css/tokens.css.
   No literal hex anywhere in this file.

   Line-heights are the px values Figma actually renders. Figma's
   lineHeight is AUTO on nearly every node, which resolves to the
   font's own metrics and is then rounded to whole px:
     Hanken Grotesk   10→13  12→16  16→21  32→42   (≈1.31)
     Cormorant Gara.  28→34  32→39                  (≈1.21)
   These are measured from the frames, not guessed.
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Nothing in the designs is underlined — links carry their own styling. */
a {
  color: inherit;
  text-decoration: none;
}

/* Screen-reader-only, for the route announcer. */
.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;
}

/* ---------- stage ---------- */
/* The phone sits on a tinted desktop backdrop; on a real phone the
   viewport is the stage, so the backdrop never shows. */
.stage {
  width: 100%;
  max-width: var(--column);
  min-height: 100vh;
  min-height: 100dvh;   /* B5 P3-6: the dynamic viewport, like .screen */
  margin-inline: auto;
  position: relative;
}

/* B5 P3-5: only a real desktop window gets the tinted backdrop; wide phones (391-599) keep the linen ground. */
@media (min-width: 600px) {
  body { background: var(--neutral-100); }
}

/* Frames in Figma grow taller than 844 — let the page scroll rather
   than clipping the screen. */
.screen {
  width: 100%;
  max-width: var(--column);
  min-height: 100vh;
  min-height: 100dvh;   /* K-04 / AU-P2-4: the phone's own height, not the 844 of the design frame */
  position: relative;
  background: var(--neutral-50);
  /* clip, not hidden: hidden leaves a scrollable overflow (02's filter
     pills overflow to 500), and Chrome's native focus-on-click then
     scrolls the tapped pill to centre — panning the whole screen 59px.
     clip makes the frame unscrollable, full stop. */
  overflow: hidden;
  overflow: clip;
}

/* ---------- chrome ----------
   Sizes and offsets verified in Phase 0 across all 14 nav screens.
   Both are 1:1 with the Figma instances (V2/Status Bar 122:114, Top Nav 197:437). */

/* Status bar — space-between, padding-top 12, padding-inline 28. K-07 (D-222): the page ground, not white. */
.status-bar {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  max-width: var(--column);
  height: var(--status-h);
  z-index: var(--z-chrome);
  background: var(--neutral-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-12);
  padding-inline: var(--space-28);
}

.status-bar__time {
  font-family: var(--font-sans);
  font-size: var(--size-12);
  line-height: var(--lh-12);
  font-weight: 600;
  color: var(--ink);
}

/* 46x12 exported vector; currentColor keeps the fill on the ink token. */
.status-bar__icons {
  width: 46px;
  height: 12px;
  color: var(--ink);
  flex-shrink: 0;
}

/* Installed as a PWA the OS draws its own status bar. The nav then starts under the device's top inset (0 where there is no notch),
   and every offset derived from --status-h (--chrome-h, --body-top, the banner) follows (LAYOUT-PLAN P1-4 / P3-4). */
@media (display-mode: standalone) {
  :root { --status-h: var(--safe-top); }
  .status-bar { display: none; }
}
/* a8 (pre-MVP sweep, D-444): the same for a real visitor in a browser tab — the drawn 9:41 bar is prototype chrome, kept only where
   html.device-frame is set (the admin's test session = every harness / study boot, and the components gallery) */
html:not(.device-frame) { --status-h: var(--safe-top); }
html:not(.device-frame) .status-bar { display: none; }

/* Top nav — space-between, padding-inline 20. K-07 (D-222): the page ground, no permanent border; the hairline (::after, components-v5.css) fades in on scroll. */
.top-nav {
  position: absolute;
  inset: var(--status-h) auto auto 0;
  width: 100%;
  max-width: var(--column);
  height: var(--nav-h);
  z-index: var(--z-chrome);
  background: var(--neutral-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-20);
}

/* The script-wordmark logo (replaced the Cormorant text wordmark). */
.top-nav__logo {
  width: 74px;
  height: 34px;
  color: var(--ink);
  flex-shrink: 0;
}

.top-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}

/* M7 (A5.2, D-187): four 44 x 44 icon links. Inactive = graphite, active = ink + a 16 px accent stitch under the icon.
   Labels live in aria-label / title. */
.top-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--neutral-600);
}
.top-nav__link.is-active { color: var(--ink); }
.top-nav__link.is-active .nav-icon { stroke-width: 1.75; }
.top-nav__link.is-active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: 1px;
  background: var(--accent-base);
}

/* ---------- body ---------- */
/* 20 side padding measured in Phase 0. The top offset is --body-top (116 = nav bottom 100 + 16, K-04 / D-204; was 128 with the Back on its own row). */
.body {
  padding-top: var(--body-top);
  padding-inline: var(--space-20);
  /* No bottom padding: Figma frames end exactly at the last child. */
  display: flex;
  flex-direction: column;
}

/* ---------- type ----------
   Nothing outside this block sets font-size. Hierarchy comes from
   weight and colour, not from inventing sizes. */

/* Page titles are Cormorant Medium in Figma (13 nodes across 11 screens,
   e.g. "Appointment Details"); use .t-title.w-600 for the 5 SemiBold ones.
   (The nav wordmark is now the script logo, .top-nav__logo.) One outlier, "What Are We Tailoring?" on 01 Home, carries an
   explicit 110% line-height (30.8px) instead of the AUTO 34px. */
.t-title {
  font-family: var(--font-serif);
  font-size: var(--size-28);
  line-height: calc(34 / 28);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}

/* The one Figma outlier: "What Are We Tailoring?" (01 Home) carries an
   explicit 110% line-height instead of AUTO -> 30.8px. */
.t-title--tight { line-height: 1.1; }

/* v5 serif scale (the Figma type scale: 10 / 12 / 16 / 24 / 28 / 32 / 36).
   .t-display = screen / index title, .t-h2 = section header. */
.t-display {
  font-family: var(--font-serif);
  font-size: var(--size-32);
  line-height: calc(38 / 32);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}

.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--size-24);
  line-height: calc(29 / 24);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

/* K-12: ALL hero money is Hanken Grotesk (sans), never Cormorant — payouts, totals, new totals, earnings, receipts, any large dollar
   figure. Same sizes as the old serif money (.t-display 32 / .t-h2 24), weight 600 for hierarchy, tabular lining figures.
   Cormorant stays for page and overlay titles only (.t-title, .t-display / .t-h2 as titles). */
.t-money {
  font-family: var(--font-sans);
  font-size: var(--size-32);
  line-height: calc(38 / 32);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}
.t-money--md { font-size: var(--size-24); line-height: calc(29 / 24); }

/* M7 (A2): the non-money hero fact — a visit time, "2h left" — sans, not serif */
.t-figure {
  font-family: var(--font-sans);
  font-size: var(--size-24);
  line-height: calc(29 / 24);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--size-16);
  line-height: calc(21 / 16);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--size-12);
  line-height: calc(16 / 12);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}

/* 12px SemiBold uppercase, +1px tracking — Figma: "TODAY, 4:12 PM", "DELIVER TO". */
.t-caps {
  font-family: var(--font-sans);
  font-size: var(--size-12);
  line-height: calc(16 / 12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.t-micro {
  font-family: var(--font-sans);
  font-size: var(--size-10);
  line-height: calc(13 / 10);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

/* Weight modifiers — the only sanctioned way to shift emphasis. */
.w-400 { font-weight: 400; }
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }

/* Emoji glyphs: Segoe UI Emoji's advance runs ~5px wider than the
   metrics Figma rendered with — pin the advance so following text
   lands where the frames put it. */
.emoji {
  display: inline-block;
  width: 16px;
  overflow: visible;
}

/* ---------- colour utilities ---------- */
.c-ink { color: var(--ink); }
.c-white { color: var(--white); }
.c-700 { color: var(--neutral-700); }
.c-600 { color: var(--neutral-600); }
.c-500 { color: var(--neutral-500-ink); }
.c-400 { color: var(--neutral-400); }
.c-300 { color: var(--neutral-300); }
.c-accent { color: var(--accent-base); }
.c-accent-ink { color: var(--accent-ink); }
.c-sage { color: var(--sage); }
.c-success { color: var(--success-ink); }
.c-warning { color: var(--warning-ink); }
.c-error { color: var(--error-ink); }
.c-info { color: var(--accent-ink); }   /* M7: no blue anywhere */

/* ---------- test mode (/?test=1, js/app.js adds html.is-test) ----------
   The harness screenshots must be deterministic: nothing animates, no caret. */
html.is-test *, html.is-test *::before, html.is-test *::after {
  transition: none !important;
  animation: none !important;
  caret-color: transparent !important;
  scroll-behavior: auto !important;
}