/* Parcel — design tokens (Apple HIG semantic system, adapted for the web).
   Light values on :root; dark under prefers-color-scheme (unless forced light) and again for a forced dark theme.
   Settings › Appearance sets html[data-theme="light"|"dark"]; no attribute = follow the system. */

@font-face {
  /* Inter (OFL) — fallback for non-Apple devices. Apple devices use SF via -apple-system. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---- Type ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-large: 34px;   --lh-large: 41px;   --ls-large: -0.4px;
  --fs-title1: 28px;  --lh-title1: 34px;  --ls-title1: -0.4px;
  --fs-title2: 22px;  --lh-title2: 28px;  --ls-title2: -0.3px;
  --fs-title3: 20px;  --lh-title3: 25px;  --ls-title3: -0.2px;
  --fs-headline: 17px; --lh-headline: 22px; --ls-headline: -0.2px;
  --fs-body: 17px;    --lh-body: 22px;    --ls-body: -0.2px;
  --fs-callout: 16px; --lh-callout: 21px; --ls-callout: -0.15px;
  --fs-subhead: 15px; --lh-subhead: 20px; --ls-subhead: -0.1px;
  --fs-footnote: 13px; --lh-footnote: 18px; --ls-footnote: -0.05px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-caption2: 11px; --lh-caption2: 13px;
  --fs-hero: 48px;    --lh-hero: 52px;    --ls-hero: -1px;   /* big rounded numbers */

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ---- Spacing (4pt grid) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-list: 12px;
  --r-card: 18px;
  --r-sheet: 14px;
  --r-full: 999px;
  --r-tile: 7px;        /* 29px settings icon tile */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.45, 0, .2, 1);
  --dur-press: 120ms;
  --dur-fast: 200ms;
  --dur: 350ms;
  --dur-slow: 450ms;

  /* ---- Layout ---- */
  --gutter: 16px;
  --navbar-h: 44px;
  --tabbar-h: 49px;
  /* Width the sidebar currently takes: 0 in the tab-bar layout (< 1024px), 256px beside the content at ≥ 1024px. */
  --sidebar-w: 0px;
  /* Room the shell's bottom accessory takes (the "Everything is stopped" bar): 0 unless it is showing below 1024px
     (html.has-accessory, set by js/app.js; at ≥ 1024px the bar sits in the sidebar and takes no room). It is part of
     --tabbar-space, so nothing needs to know about it. */
  --accessory-space: 0px;
  --accessory-h: 56px;  /* the accessory bar's own height */
  /* Room the bottom chrome takes: the phone/tablet tab bar + safe area, plus the bottom accessory when it shows.
     0 at ≥ 1024px (no tab bar; the stopped bar is in the sidebar).
     Use it for anything pinned to the bottom: toasts, sticky action bars, bottom padding. */
  --tabbar-space: calc(var(--tabbar-h) + var(--safe-bottom) + var(--accessory-space));
  --content-max: 1040px;
  --hit: 44px;          /* minimum touch target (HIG); the hit-slop rule in components.css uses it */
  --hairline: 1px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---- Colour: system (light) ---- */
  --blue: #007AFF;
  --green: #34C759;
  --red: #FF3B30;
  --orange: #FF9500;
  --yellow: #FFCC00;
  --indigo: #5856D6;
  --teal: #30B0C7;
  --pink: #FF2D55;
  --purple: #AF52DE;
  --mint: #00C7BE;
  --gray: #8E8E93;
  --gray2: #AEAEB2;
  --gray3: #C7C7CC;
  --gray4: #D1D1D6;
  --gray5: #E5E5EA;
  --gray6: #F2F2F7;

  /* Text-safe variants (AA, ≥ 4.6:1) on white, on the grouped background, and on their own 12–15% tint
     (tinted buttons, pills) over either. Measured by tools/scratch/fix-components/solve.mjs. */
  --blue-text: #005DC3;
  --green-text: #1B7430;
  --red-text: #C30013;
  --orange-text: #AE4600;
  --yellow-text: #856200;
  --indigo-text: #4E4CD4;
  --teal-text: #006C9C;
  --pink-text: #BE0D3E;
  --purple-text: #8843A9;
  --gray-text: #636367;

  --accent: var(--blue);
  --accent-text: var(--blue-text);
  --accent-fill: #0071E3;              /* filled buttons: white label at 4.7:1 */
  --accent-tint: rgba(0, 122, 255, .12);
  --accent-tint-hover: rgba(0, 122, 255, .16);   /* pointer hover on tinted controls; text stays ≥ 4.5:1 */
  --on-accent: #FFFFFF;

  /* Backgrounds (grouped) */
  --bg: #F2F2F7;                        /* page */
  --bg-2: #FFFFFF;                      /* cards, list cells */
  --bg-3: #F2F2F7;                      /* inside cards */
  --bg-elevated: #FFFFFF;               /* alerts */

  /* Labels. Secondary is darkened from HIG's .6 alpha to .78 so small text meets AA on white (5.6:1), on the
     grouped background (5.3:1) and on control fills over it (4.8:1). Tertiary is for placeholders, chevrons and
     disabled text only: never for text the owner needs to read. */
  --label: #000000;
  --label-2: rgba(60, 60, 67, .78);
  --label-3: rgba(60, 60, 67, .3);
  --label-4: rgba(60, 60, 67, .18);

  --sep: rgba(60, 60, 67, .29);
  --sep-opaque: #C6C6C8;

  /* Fills (control backgrounds) */
  --fill: rgba(120, 120, 128, .2);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(120, 120, 128, .12);   /* default control fill (search field, segmented track) */
  --fill-4: rgba(120, 120, 128, .08);
  --fill-hover: rgba(120, 120, 128, .16); /* pointer hover on gray controls; accent text stays ≥ 4.5:1 */

  --highlight: rgba(0, 0, 0, .06);      /* pressed list row */

  /* Materials */
  --material: rgba(249, 249, 251, .78);
  --material-thick: rgba(252, 252, 253, .9);
  --material-sidebar: rgba(255, 255, 255, .62);
  --material-filter: saturate(180%) blur(20px);
  --material-alert: rgba(246, 246, 248, .94);
  --material-toast: rgba(251, 251, 253, .97);   /* near-opaque so nothing reads through a toast */
  --backdrop: rgba(0, 0, 0, .32);
  --knockout: #FFFFFF;
  --seg-thumb: #FFFFFF;
  --row-pressed: #D1D1D6;
  --destructive-fill: #D70015;

  /* Chat bubbles (js/ui/chat.js): me = solid accent (white text 4.7:1); them = white on the grouped page (iMessage grey
     on a card: --bubble-them-card); auto = the assistant speaking for you (soft accent tint, label text). */
  --bubble-me: var(--accent-fill);
  --bubble-them: #FFFFFF;
  --bubble-them-card: #E9E9EB;
  --bubble-auto: #D7E7FB;

  /* Shadows: soft, light mode floating elements only */
  --shadow-card: none;
  --shadow-float: 0 10px 40px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .06);
  --shadow-sheet: 0 -1px 0 rgba(0, 0, 0, .04), 0 -10px 40px rgba(0, 0, 0, .08);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06), 0 0 0 .5px rgba(0, 0, 0, .04);
  --shadow-sidebar: 0 0 0 .5px rgba(0, 0, 0, .06), 0 8px 30px rgba(0, 0, 0, .06);

  /* Charts */
  --chart-pos: var(--green);
  --chart-neg: var(--red);
  --chart-bar: var(--accent);
  --chart-grid: rgba(60, 60, 67, .14);
  --chart-axis: var(--label-2);

  --skeleton: rgba(120, 120, 128, .12);
  --skeleton-shine: rgba(255, 255, 255, .55);
}

@media (min-resolution: 2dppx) {
  :root { --hairline: .5px; }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --navbar-h: 52px;
    --fs-body: 16px;     --lh-body: 21px;
    --fs-headline: 16px; --lh-headline: 21px;
    --fs-callout: 15px;  --lh-callout: 20px;
    --fs-subhead: 14px;  --lh-subhead: 19px;
  }
}
/* ≥ 1024px: sidebar layout (no tab bar). Below that, phones and tablets use the tab bar. */
@media (min-width: 1024px) {
  :root { --sidebar-w: 256px; --tabbar-space: var(--accessory-space); }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; }
}
/* Large displays: let the content column grow instead of floating as an island. */
@media (min-width: 1600px) {
  :root { --content-max: 1200px; }
}

/* ---------------------------------------------------------------- dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --blue: #0A84FF;
    --green: #30D158;
    --red: #FF453A;
    --orange: #FF9F0A;
    --yellow: #FFD60A;
    --indigo: #5E5CE6;
    --teal: #40CBE0;
    --pink: #FF375F;
    --purple: #BF5AF2;
    --mint: #63E6E2;
    --gray: #8E8E93;
    --gray2: #636366;
    --gray3: #48484A;
    --gray4: #3A3A3C;
    --gray5: #2C2C2E;
    --gray6: #1C1C1E;

    --blue-text: #5AB0FF;
    --green-text: #30D158;
    --red-text: #FF817B;
    --orange-text: #FFB340;
    --yellow-text: #FFD60A;
    --indigo-text: #9D9BFF;
    --teal-text: #5DE6FF;
    --pink-text: #FF7B95;
    --purple-text: #DA8FFF;
    --gray-text: #AEAEB2;

    --accent-fill: #0B6FE0;
    --accent-tint: rgba(10, 132, 255, .2);
    --accent-tint-hover: rgba(10, 132, 255, .24);

    --bg: #000000;
    --bg-2: #1C1C1E;
    --bg-3: #2C2C2E;
    --bg-elevated: #2C2C2E;

    --label: #FFFFFF;
    --label-2: rgba(235, 235, 245, .64);
    --label-3: rgba(235, 235, 245, .3);
    --label-4: rgba(235, 235, 245, .16);

    --sep: rgba(84, 84, 88, .65);
    --sep-opaque: #38383A;

    --fill: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(118, 118, 128, .24);
    --fill-4: rgba(118, 118, 128, .18);
    --fill-hover: rgba(118, 118, 128, .34); /* a visible step up from --fill-3 (.24); accent text on page cards ≈ 4.8:1 */

    --highlight: rgba(255, 255, 255, .08);

    --material: rgba(22, 22, 24, .78);
    --material-thick: rgba(30, 30, 32, .9);
    --material-sidebar: rgba(28, 28, 30, .72);
    --material-alert: rgba(40, 40, 42, .94);
    --material-toast: rgba(44, 44, 46, .97);
    --knockout: #1C1C1E;
    --seg-thumb: #636366;
    --row-pressed: #3A3A3C;
    --destructive-fill: #D93025;
    --bubble-them: #262629;
    --bubble-them-card: #3A3A3C;
    --bubble-auto: #16365C;
    --backdrop: rgba(0, 0, 0, .55);

    --shadow-float: 0 0 0 .5px rgba(255, 255, 255, .08), 0 10px 40px rgba(0, 0, 0, .5);
    --shadow-sheet: 0 0 0 .5px rgba(255, 255, 255, .06);
    --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .3), 0 3px 1px rgba(0, 0, 0, .1);
    --shadow-sidebar: 0 0 0 .5px rgba(255, 255, 255, .07);

    --chart-grid: rgba(235, 235, 245, .12);
    --skeleton: rgba(120, 120, 128, .2);
    --skeleton-shine: rgba(255, 255, 255, .07);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #0A84FF;
  --green: #30D158;
  --red: #FF453A;
  --orange: #FF9F0A;
  --yellow: #FFD60A;
  --indigo: #5E5CE6;
  --teal: #40CBE0;
  --pink: #FF375F;
  --purple: #BF5AF2;
  --mint: #63E6E2;
  --gray: #8E8E93;
  --gray2: #636366;
  --gray3: #48484A;
  --gray4: #3A3A3C;
  --gray5: #2C2C2E;
  --gray6: #1C1C1E;

  --blue-text: #5AB0FF;
  --green-text: #30D158;
  --red-text: #FF817B;
  --orange-text: #FFB340;
  --yellow-text: #FFD60A;
  --indigo-text: #9D9BFF;
  --teal-text: #5DE6FF;
  --pink-text: #FF7B95;
  --purple-text: #DA8FFF;
  --gray-text: #AEAEB2;

  --accent-fill: #0B6FE0;
  --accent-tint: rgba(10, 132, 255, .2);
  --accent-tint-hover: rgba(10, 132, 255, .24);

  --bg: #000000;
  --bg-2: #1C1C1E;
  --bg-3: #2C2C2E;
  --bg-elevated: #2C2C2E;

  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, .64);
  --label-3: rgba(235, 235, 245, .3);
  --label-4: rgba(235, 235, 245, .16);

  --sep: rgba(84, 84, 88, .65);
  --sep-opaque: #38383A;

  --fill: rgba(120, 120, 128, .36);
  --fill-2: rgba(120, 120, 128, .32);
  --fill-3: rgba(118, 118, 128, .24);
  --fill-4: rgba(118, 118, 128, .18);
  --fill-hover: rgba(118, 118, 128, .34); /* a visible step up from --fill-3 (.24); accent text on page cards ≈ 4.8:1 */

  --highlight: rgba(255, 255, 255, .08);

  --material: rgba(22, 22, 24, .78);
  --material-thick: rgba(30, 30, 32, .9);
  --material-sidebar: rgba(28, 28, 30, .72);
  --material-alert: rgba(40, 40, 42, .94);
  --material-toast: rgba(44, 44, 46, .97);
  --knockout: #1C1C1E;
  --seg-thumb: #636366;
  --row-pressed: #3A3A3C;
  --destructive-fill: #D93025;
  --bubble-them: #262629;
  --bubble-them-card: #3A3A3C;
  --bubble-auto: #16365C;
  --backdrop: rgba(0, 0, 0, .55);

  --shadow-float: 0 0 0 .5px rgba(255, 255, 255, .08), 0 10px 40px rgba(0, 0, 0, .5);
  --shadow-sheet: 0 0 0 .5px rgba(255, 255, 255, .06);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .3), 0 3px 1px rgba(0, 0, 0, .1);
  --shadow-sidebar: 0 0 0 .5px rgba(255, 255, 255, .07);

  --chart-grid: rgba(235, 235, 245, .12);
  --skeleton: rgba(120, 120, 128, .2);
  --skeleton-shine: rgba(255, 255, 255, .07);
}

/* Elevated surfaces in dark mode (sheets): iOS lifts grouped backgrounds one step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .elevated {
    --bg: #1C1C1E;
    --bg-2: #2C2C2E;
    --bg-3: #3A3A3C;
    --bubble-them: #2C2C2E;
    --bubble-them-card: #3A3A3C;
  }
}
:root[data-theme="dark"] .elevated {
  --bg: #1C1C1E;
  --bg-2: #2C2C2E;
  --bg-3: #3A3A3C;
  --bubble-them: #2C2C2E;
  --bubble-them-card: #3A3A3C;
}