/* Dash Cam LINK — Dynamic Font Scale prototype
   Shared styles for the three font-scale screens (×0.85, ×1, ×1.5).

   PIXEL-PERFECT NOTE: per-screen typography (font-size / line-height /
   letter-spacing) MUST come from the corresponding Figma node — do not
   hand-tune. Tokens here cover only the chrome that's identical across
   all three scales (iPhone status bar, screen surface, MD3 colours).
   The three Figma source nodes are:
     - x0.85  →  140:5128
     - x1     →  140:5016
     - x1.5   →  140:5074
   File: BMX0MCsPbNWjSK1Txdyvo3 ("MCP-test"). */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Dash Cam LINK MD3 colour tokens (light scheme — status bar
        glyphs are dark, surface is white). Mirrored from
        mockups/dash-cam-link/design-system-carousel/_styles/dcl-md3.css
        so the prototype renders without depending on the carousel
        bundle. ── */
  --primary: #1062ad;
  --on-primary: #ffffff;
  --primary-container: #d2e4ff;
  --on-primary-container: #001d33;
  --secondary: #545f6f;
  --on-secondary: #ffffff;
  --secondary-container: #e1e6ef;
  --on-secondary-container: #101c2c;
  --error: #df0211;

  --surface: #fcfcfc;
  --surface-container-low: #f6f6f8;
  --surface-container: #f1f1f4;
  --surface-container-high: #ececee;
  --on-surface: #1a1c1e;
  --on-surface-variant: #646a76;
  --outline: #75777a;
  --outline-variant: #e6e6e6;

  /* Shape tokens */
  --corner-xs: 4px;
  --corner-sm: 8px;
  --corner-md: 12px;
  --corner-lg: 16px;
  --corner-xl: 28px;
  --corner-pill: 9999px;

  /* Spacing (4dp grid) — used only for layout chrome, not for
     Figma-driven inner content. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* iPhone 17 Pro inner-screen frame (matches XIAN prototype convention) */
  --frame-w: 450px;
  --frame-h: 920px;
  --screen-w: 402px;
  --screen-h: 874px;
  --screen-radius: 55px;

  /* Font: Noto Sans is the Dash Cam LINK type face; falls back to the
     platform system font on iOS as the design intends. */
  --font-system: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Per-screen font-scale variable. Each screen HTML overrides this
     (0.85 / 1 / 1.5). Surrounding chrome uses fixed pixel values; the
     Figma-driven inner content multiplies its base sizes by this var. */
  --font-scale: 1;
}

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

html,
body {
  height: 100%;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Lock the document so neither html nor body becomes the scroll
     container — only the inner .scr-scroll region scrolls. This keeps
     the iOS status bar and the app top bar perfectly fixed regardless
     of how far the user scrolls inside the phone. */
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Body becomes the chrome stack: status bar (62) + app top bar (60) +
   scroll region. The two top elements never move; the scroll region
   takes the remaining height and scrolls the screenshot inside. */
body.scr-body {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  /* No body-level scroll — the .scr-scroll child handles scrolling so
     the chrome above it stays put. */
  overflow: hidden;
}

/* ───── iPhone status bar (light mode, dark glyphs) ─────
   Same shared asset the XIAN prototype uses. Locked to 402×62 so it
   matches the inner screen width (--screen-w) exactly. As a flex item
   with flex-shrink:0 in a non-scrolling body, it stays pinned to the
   top of the screen viewport at all times — no `position: sticky`
   needed (and sticky was unreliable inside flex/overflow containers). */
.status-bar {
  display: block;
  width: var(--screen-w);
  height: 62px;
  background-color: #ffffff;
  background-image: url('/mockups/iphone-status-bar.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: var(--screen-w) 62px;
  flex-shrink: 0;
  z-index: 2;
}

/* ───── App top bar — always fixed below the iOS status bar ─────
   Baked into the source SVGs at 56px tall (375-wide canvas) which
   becomes 60px when the SVG is rendered at the iPhone's 402-wide
   screen viewport (56 × 402/375). We render the same bar here as
   structured HTML and crop the SVG's own copy out (via .scr-shot's
   negative margin below) so the bar stays fixed on every scroll
   position without duplicating against itself. Same headline copy
   (× / "Connection Error Guide") on every scale variant. */
.app-bar {
  position: relative;
  flex-shrink: 0;
  height: 60px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--outline-variant);
  z-index: 2;
}
.app-bar .close-btn {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #000000;
  -webkit-tap-highlight-color: transparent;
}
.app-bar .close-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.app-bar .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-system);
  /* Headline 17 / 22 / -0.43 / weight 590 (SF Pro Semibold), scaled to
     match the SVG render at 402-wide screen (1.072×). */
  font-size: 18.22px;
  line-height: 22px;
  letter-spacing: -0.43px;
  font-weight: 590;
  color: #000000;
  white-space: nowrap;
}

/* ───── Scroll region — only this box scrolls ─────────────────────
   flex:1 takes the remaining height after status bar (62) + app bar
   (60). Scrollbars hidden via the html/body rules above plus an extra
   defensive sweep here. */
.scr-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scr-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ───── Screen content scaffold ─────
   Wraps the in-app content. Per-screen HTML extends this with the
   layout extracted from Figma. Padding/margin/leading values inside
   .scr-content come from each Figma node, not from this file. */
.scr-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* ───── Pending-Figma-spec stub ─────
   Until each screen's Figma extraction lands, the body shows a quiet
   note explaining what's expected. Mono type + low-contrast so it
   reads as scaffold, not content. */
.pending-spec {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
  color: var(--on-surface-variant);
}
.pending-spec .label {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--outline);
}
.pending-spec .scale {
  font-family: var(--font-system);
  font-weight: 600;
  color: var(--on-surface);
  font-size: calc(28px * var(--font-scale));
  line-height: 1.2;
}
.pending-spec .hint {
  font-size: calc(13px * var(--font-scale));
  line-height: 1.5;
  max-width: 280px;
  color: var(--on-surface-variant);
}
.pending-spec .node-id {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--outline);
  margin-top: 8px;
}