/* WF APPLE LAYER (2026-11-08, Hal approved; feat/speedy-notifs-apple-1108)
   Shared tokens + small components for "Apple-level" WatchFlow surfaces (Speedy AI panel, Notifications; later screens reuse them).
   WatchFlow's own palette (navy / blue / gold), Absans (var(--font-body)) and the bezel mark — never SF fonts or Apple assets.
   Dark mode = html[data-remodel-mode="night"] (NOT data-theme). Reduced motion turns every animation/transition here off.
   No runtime library: the springs are CSS linear() curves sampled from a damped spring (CSS Easing Level 2). */
:root {
  /* palette (WatchFlow) */
  --ap-navy: #0f1822; --ap-blue: #2967b0; --ap-blue-hi: #3a7bd0; --ap-gold: var(--gold, #b8955a);
  --ap-red: #d1453b; --ap-green: #2e8b57; --ap-qb: #2CA01C;
  /* surfaces + ink (day) */
  --ap-bg: #f4f5f7;                    /* grouped background */
  --ap-card: #ffffff;                  /* grouped cell */
  /* ink: every text tier meets AA 4.5:1 on the card, the grouped bg and the quiet fills (round 2, 11-09: .40 was 2.5:1).
     ink-3 = tertiary text (times, counts, labels, fine print); ink-4 = decorative glyphs only (chevrons, typing dots, idle send) */
  --ap-ink: #0f1822; --ap-ink-2: rgba(15, 24, 34, .78); --ap-ink-3: rgba(15, 24, 34, .68); --ap-ink-4: rgba(15, 24, 34, .40);
  --ap-hair: rgba(15, 24, 34, .09);    /* hairline separators, never boxes */
  --ap-fill: rgba(15, 24, 34, .055);   /* quiet fills: search field, segmented track, bot bubble */
  --ap-fill-2: rgba(15, 24, 34, .09);
  --ap-tint: color-mix(in srgb, var(--ap-blue) 10%, transparent);
  /* materials (frosted, saturated) */
  --ap-mat-thin: rgba(255, 255, 255, .62); --ap-mat: rgba(248, 249, 251, .78); --ap-mat-thick: rgba(250, 251, 252, .90);
  --ap-blur: saturate(180%) blur(22px); --ap-blur-strong: saturate(190%) blur(34px);
  --ap-scrim: rgba(8, 12, 18, .28);
  /* depth (soft, layered — no hard outlines) */
  --ap-sh-1: 0 1px 2px rgba(15, 24, 34, .06), 0 1px 1px rgba(15, 24, 34, .04);
  --ap-sh-2: 0 2px 6px rgba(15, 24, 34, .06), 0 8px 24px rgba(15, 24, 34, .08);
  --ap-sh-3: 0 10px 30px rgba(15, 24, 34, .14), 0 30px 80px rgba(15, 24, 34, .18), 0 0 0 .5px rgba(15, 24, 34, .08);
  /* radii */
  --ap-r-xs: 8px; --ap-r-sm: 12px; --ap-r: 16px; --ap-r-lg: 22px; --ap-r-sheet: 28px; --ap-r-bubble: 20px;
  /* type scale (Absans): large title / title / headline / body / callout / footnote / caption */
  --ap-t-large: 700 30px/36px var(--font-body); --ap-t-title: 650 20px/26px var(--font-body); --ap-t-head: 600 16px/21px var(--font-body);
  --ap-t-body: 400 15.5px/22px var(--font-body); --ap-t-callout: 500 14.5px/20px var(--font-body); --ap-t-foot: 400 13px/18px var(--font-body);
  --ap-t-cap: 600 11px/14px var(--font-body);
  /* spacing rhythm (matches --space-1..8: 4 8 12 16 20 24 28 32) */
  --ap-s1: 4px; --ap-s2: 8px; --ap-s3: 12px; --ap-s4: 16px; --ap-s5: 20px; --ap-s6: 24px; --ap-s7: 28px; --ap-s8: 32px;
  /* motion: damped springs as linear() + durations */
  --ap-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.09 24.6%, 1.083 27%, 1.024 33.6%, .99 39.5%, .984 43%, .999 52%, 1.004 59%, 1);
  --ap-spring-soft: linear(0, .02 2%, .1 5%, .45 13%, .74 21%, .9 29%, .98 38%, 1.01 46%, 1.012 54%, 1.004 66%, 1);
  --ap-ease-out: cubic-bezier(.2, .8, .2, 1); --ap-ease-in: cubic-bezier(.4, 0, 1, 1);
  --ap-d-fast: 160ms; --ap-d: 320ms; --ap-d-slow: 520ms;
  --ap-safe-b: env(safe-area-inset-bottom, 0px); --ap-safe-t: env(safe-area-inset-top, 0px);
}
html[data-remodel-mode="night"] {
  --ap-bg: #0b1016; --ap-card: #141b24;
  --ap-ink: #eef2f6; --ap-ink-2: rgba(238, 242, 246, .76); --ap-ink-3: rgba(238, 242, 246, .62); --ap-ink-4: rgba(238, 242, 246, .42);
  --ap-hair: rgba(238, 242, 246, .10); --ap-fill: rgba(238, 242, 246, .075); --ap-fill-2: rgba(238, 242, 246, .12);
  --ap-blue: #4a8ad8; --ap-blue-hi: #5d9ae2; --ap-tint: color-mix(in srgb, #4a8ad8 18%, transparent);
  --ap-mat-thin: rgba(22, 29, 38, .58); --ap-mat: rgba(18, 24, 32, .76); --ap-mat-thick: rgba(16, 22, 30, .90);
  --ap-scrim: rgba(0, 0, 0, .46);
  --ap-sh-1: 0 1px 2px rgba(0, 0, 0, .4); --ap-sh-2: 0 2px 8px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .35);
  --ap-sh-3: 0 12px 34px rgba(0, 0, 0, .5), 0 34px 90px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .08);
}

/* ── components ── */
/* grabber (sheet handle) */
.ap-grabber { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--ap-fill-2); margin: 6px auto 0; }
/* segmented control — ONE row, scrolls sideways when it must, the selected thumb slides */
.ap-seg { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--ap-fill); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.ap-seg::-webkit-scrollbar { display: none; }
.ap-seg > button { flex: 0 0 auto; scroll-snap-align: start; min-height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--ap-ink-2);
  font: var(--ap-t-callout); font-size: 13.5px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--ap-d) var(--ap-spring), color var(--ap-d-fast) ease, box-shadow var(--ap-d) ease, transform var(--ap-d-fast) var(--ap-ease-out); }
.ap-seg > button[aria-selected="true"], .ap-seg > button.active { background: var(--ap-card); color: var(--ap-ink); font-weight: 600; box-shadow: var(--ap-sh-1); }
html[data-remodel-mode="night"] .ap-seg > button[aria-selected="true"], html[data-remodel-mode="night"] .ap-seg > button.active { background: #26303c; }
/* press feel (haptic-like): everything tappable dips and springs back */
.ap-press { transition: transform var(--ap-d) var(--ap-spring); }
.ap-press:active { transform: scale(.955); transition-duration: 90ms; }
/* unread dot */
.ap-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ap-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ap-blue) 16%, transparent); }
/* pills (quiet secondary actions) */
.ap-pill { min-height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ap-fill); color: var(--ap-ink); font: var(--ap-t-callout); font-size: 13.5px; cursor: pointer; }
.ap-pill:hover { background: var(--ap-fill-2); }
/* the ONE primary action */
.ap-primary { min-height: 50px; padding: 0 22px; border-radius: 14px; border: 0; background: var(--ap-blue); color: #fff; font: var(--ap-t-head); cursor: pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--ap-blue) 28%, transparent); }
/* bezel mark */
.ap-mark { display: inline-block; background: currentColor; -webkit-mask: url(/brand/watchflow-mark.svg) center / contain no-repeat; mask: url(/brand/watchflow-mark.svg) center / contain no-repeat; }
@keyframes ap-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ap-seg > button, .ap-press, .ap-press:active { transition: none !important; transform: none !important; }
}
/* filled surfaces under white text (bubbles, primary buttons, badges, swipe "Mark read"): AA 4.5:1 in both modes.
   Day = --ap-blue (#2967b0, 5.7:1). Night's --ap-blue (#4a8ad8) is for text/tints on dark (3.6:1 under white), so fills use #2f6fbf (5.1:1). */
:root { --ap-blue-fill: var(--ap-blue); }
html[data-remodel-mode="night"] { --ap-blue-fill: #2f6fbf; }
/* blue TEXT (links, quiet buttons, pills on the blue tint) uses --ap-blue-text (round 3, 11-09): AA 4.5:1 on the card, the
   grouped bg and the tint, at rest and on hover. Day #235a9c (5.4:1 on the 18% hover tint); night #7db0ee (6.0:1 on the tint,
   was #4a8ad8 at 3.8:1). Fills and dots keep --ap-blue / --ap-blue-fill. */
:root { --ap-blue-text: #235a9c; }
html[data-remodel-mode="night"] { --ap-blue-text: #7db0ee; }
.ap-primary { background: var(--ap-blue-fill); }