/* Master stylesheet — imports every layer in order. Order matters: tokens first, base next, then layout, then components. */ /* Design tokens — spacing, typography, radii, shadows, colors. Color structure: 1. :root, [data-theme="light"] — light (default + explicit) 2. [data-theme="dark"] — dark explicit 3. @media prefers-color-scheme — OS-preference catch-all (no data-theme) */ /* ─── Static tokens (theme-independent) ──────────────────────────────────── */ :root { /* Motion (2026-10-23): a section folding up/down and a pane sliding left/right share one timing — 300ms on the deceleration curve iOS sheets and folds use. Reduced motion turns each off where it's used. */ --motion-slide: 300ms; --ease-slide: cubic-bezier(0.32, 0.72, 0, 1); /* Spacing */ --sp-4xs: 2px; --sp-3xs: 4px; --sp-xxs: 6px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 20px; --sp-xl: 24px; --sp-xxl: 32px; --sp-3xl: 40px; --sp-4xl: 48px; /* Sizing */ --size-4xs: 2px; --size-3xs: 4px; --size-xxs: 6px; --size-xs: 8px; --size-sm: 12px; --size-md: 16px; --size-lg: 20px; --size-xl: 24px; --size-xxl: 32px; --size-xxxl: 44px; --size-3xl: 40px; --size-4xl: 48px; --size-5xl: 56px; /* The top inset (2026-10-27). `--safe-top` is the status bar the page is under: 59–62 in the iOS home-screen app, 0 wherever the browser owns the status bar (Safari, Chrome, Brave and Firefox in-browser; Android PWAs — Chrome draws edge-to-edge at the bottom only) and where env() is unknown. `--phone-top-inset` is what the phone chrome pads by: the status bar, or the floor where the header would otherwise run flush against the top — Brave on Android ran the 44 discs against its toolbar. The floor is 24 (Julian, 2026-11-02; 32 from 2026-10-28, the Pro Max status bar's 62 before that). iOS floors at 0 (below): Safari paints its 59–62 status region in the page's colour, so the row already sits under it as in the app. Sheets measure from `--safe-top` (the status bar); the headers and the paddings keyed to them from `--phone-top-inset`. */ --safe-top: env(safe-area-inset-top, 0px); --phone-top-floor: 24px; --phone-top-inset: max(var(--safe-top), var(--phone-top-floor)); /* The bottom inset `--safe-bottom` is the home indicator's 34 in the iOS home-screen app and 0 in a browser tab, where the browser's own bar owns the edge — so the sign-up and sign-in screens' pills, drawn 20.5 over iOS's 34 in the mocks, sat 20.5 off the glass in Safari. `--phone-bottom-inset` floors it at the home indicator, so the pills sit where the mocks put them everywhere. */ --safe-bottom: env(safe-area-inset-bottom, 0px); --phone-bottom-floor: 34px; --phone-bottom-inset: max(var(--safe-bottom), var(--phone-bottom-floor)); /* With the keyboard up (html.kb-open), every composer's bottom edge clears the keyboard's top (the visual viewport's bottom, --vvh) by this much: the formatting and capture bars, the AI drawer's row, the chats' pills (Julian, 2026-11-05: was 8 on the bars and the drawer, 18 on the chats). One number with ffi/keyboard_gap.mjs, which the drawer's geometry reads. */ --kb-gap: 10px; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: "New York", ui-serif, Georgia, serif; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; /* iOS `Title - Card` (19 / 600 / 140%, −0.5%): the toDo card's title. */ --text-title-card: 19px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 32px; /* Type styles as `font` shorthands (sheet chrome, 2026-10-26): body bold 18/120% with --tracking-body, body regular, footnote 13/18, title 20/600/25. A feature uses these, never restates the numbers. */ --type-body-bold: 700 18px/1.2 var(--font-sans); --type-body-semibold: 600 18px/1.2 var(--font-sans); --type-body: 400 18px/140% var(--font-sans); --type-footnote: 400 13px/18px var(--font-sans); --type-title: 600 20px/25px var(--font-sans); /* iOS callout regular, 16/21: the Home widget card's body. */ --type-callout: 400 16px/21px var(--font-sans); --tracking-body: -0.43px; /* Sheets (ui/sheet): the family radius; the default fill, flipped by .app-shell--surface-secondary where the page paints --background-secondary; the material blur. --display-corner and --sheet-bottom-radius are written on by ffi/dom.mjs from the device's panel (0 and the family radius where the page doesn't reach the glass). */ --sheet-radius: 32px; --sheet-fill: var(--background-elevated-secondary); --material-blur: 100px; /* Radius */ --radius-sm: 4px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* brand gradient */ --fill-gradient:linear-gradient(180deg, #62D475 0%, #58BE68 100%); /* Brand pastel — the Please-agent tint (iOS `ColorSystem.Gradients. brandPastelColors`, the single source: #F0B6F6 @0, #89C3FD @0.49, #56E06D @1). Vertical for glyphs/rings, horizontal for the glow plane, and the bare stop list for the comet's conic wheel. */ --pastel-1: #F0B6F6; --pastel-2: #89C3FD; --pastel-3: #56E06D; --gradient-pastel: linear-gradient(180deg, var(--pastel-1) 0%, var(--pastel-2) 49%, var(--pastel-3) 100%); --gradient-pastel-horizontal: linear-gradient(90deg, var(--pastel-1) 0%, var(--pastel-2) 49%, var(--pastel-3) 100%); /* The brief masthead's skies (iOS `ColorSystem.Gradients.Sky`, nine mesh stops row-major top→bottom): the middle column as the vertical run, the top-left and bottom-right stops as corner tints. Theme- invariant (iOS: "the sky is the same in light and dark"), so defined once, here; the dark scopes inherit them. White copy stays ≥ 3:1 on every palette's lower rows. --sky-scrim steadies the bottom edge. */ --sky-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%); --sky-ink: #FFFFFF; /* Copy on a solid accent fill (iOS whiteCanvas): white in both modes. */ --label-on-accent: #FFFFFF; --sky-pre-dawn: radial-gradient(90% 80% at 0% 0%, #F0B6F6 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #B5721F 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #B9BCFA 0%, #7F70D0 50%, #B45A4E 100%); --sky-dawn: radial-gradient(90% 80% at 0% 0%, #3A2F7A 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #B96A2A 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #4A3C8F 0%, #B0587A 50%, #C98332 100%); --sky-day: radial-gradient(90% 80% at 0% 0%, #6FB6F2 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #22489C 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #5FA8EE 0%, #3572D2 50%, #2650A8 100%); --sky-dusk: radial-gradient(90% 80% at 0% 0%, #5A3E9C 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #A85226 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #6E4A9E 0%, #A85C74 50%, #C46A2E 100%); --sky-night: radial-gradient(90% 80% at 0% 0%, #1A2650 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #131D42 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #1C2A5A 0%, #182450 50%, #111A3C 100%); --sky-day-overcast: radial-gradient(90% 80% at 0% 0%, #9AA9BC 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #424F60 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #91A1B5 0%, #68798F 50%, #485668 100%); --sky-dusk-overcast: radial-gradient(90% 80% at 0% 0%, #8A7A96 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #423849 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #857390 0%, #655672 50%, #473D52 100%); --sky-night-overcast: radial-gradient(90% 80% at 0% 0%, #2A3140 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #121620 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #28303E 0%, #1D222E 50%, #141822 100%); --sky-day-rain: radial-gradient(90% 80% at 0% 0%, #7C8CA0 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #344050 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #76869A 0%, #526278 50%, #384454 100%); --sky-night-rain: radial-gradient(90% 80% at 0% 0%, #232B38 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #10141B 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #222A36 0%, #191F28 50%, #11161D 100%); --sky-storm: radial-gradient(90% 80% at 0% 0%, #4E5868 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #20262E 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #4A5464 0%, #343C49 50%, #222831 100%); --sky-day-snow: radial-gradient(90% 80% at 0% 0%, #B8C6D6 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #4D5D72 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #B0BFD0 0%, #76889E 50%, #516176 100%); --sky-night-snow: radial-gradient(90% 80% at 0% 0%, #3A4458 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(90% 80% at 100% 100%, #1A202E 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #384256 0%, #293143 50%, #1B2130 100%); --neutral-white: 255, 255, 255; --neutral-01: 242, 242, 247; --neutral-02: 58, 58, 60; --neutral-03: 44, 44, 46; --neutral-04: 28, 28, 30; --neutral-05: 13, 13, 13; --neutral-black: 0, 0, 0; --neutral-01: 242, 242, 247; /* 1 */ --fill-tertiary: 237, 237, 237; /* 2 */ --fill-secondary: 224, 224, 224; /* 3 */ --fill-primary: 204, 204, 204; /* 4 */ --neutral-02: 58, 58, 60; /* 5 */ --fill-primary-inverse: 51, 51, 51; /* 6 */ --neutral-03: 44, 44, 46; /* 7 */ --fill-secondary-inverse: 31, 31, 31; /* 8 */ --neutral-04: 28, 28, 30; /* 9 */ --fill-tertiary-inverse: 18, 18, 18; /* 10 */ --neutral-05: 13, 13, 13; /* 11 */ --neutral-01: 242, 242, 247; --neutral-02: 237, 237, 237; --neutral-03: 224, 224, 224; --neutral-04: 204, 204, 204; --neutral-05: 58, 58, 60; --neutral-06: 51, 51, 51; --neutral-07: 44, 44, 46; --neutral-08: 31, 31, 31; --neutral-09: 28, 28, 30; --neutral-10: 18, 18, 18; --neutral-11: 13, 13, 13; } /* iOS (`html.ios`, ffi/dom.mjs): no floor — see the top inset above. */ html.ios { --phone-top-floor: 0px; } /* ─── Light theme — default + explicit ───────────────────────────────────── */ :root, [data-theme="light"] { --blend-mode: darken; --bg-base: var(--neutral-white); --bg-base-inverse: var(--neutral-black); --color-gray-1: var(--neutral-01); --color-gray-2: var(--neutral-05); --color-gray-3: var(--neutral-07); --color-gray-4: var(--neutral-09); --color-gray-5: var(--neutral-11); /* Background */ --background-primary: #FFFFFF; --background-secondary: #F2F2F7; --background-tertiary: #FFFFFF; --background-elevated-primary: var(--background-primary); --background-elevated-secondary: var(--background-secondary); --background-elevated-tertiary: var(--background-tertiary); /* Inverse: the dark theme's backgrounds, for surfaces that flip (2026-11-06). */ --background-primary-inverse: #000000; --background-secondary-inverse: #1C1C1E; --background-tertiary-inverse: #2C2C2E; --background-elevated-primary-inverse: #1C1C1E; --background-elevated-secondary-inverse: #2C2C2E; --background-elevated-tertiary-inverse: #3A3A3C; /* Phone chrome glass (iOS BarChrome .glass below iOS 26: ultraThin material, stood in for by the scrim tuner's fill), 2026-10-23. */ --glass-fill: rgba(255, 255, 255, 0.72); /* Sheets (ui/sheet, 2026-10-26 spec): the overlay behind every phone sheet and the material backgrounds — two layers each ("bg layer 1" is the card's own fill, "bg layer 2" sits behind it), over --material-blur. */ --overlay: rgba(0, 0, 0, 0.20); --material-ultrathin-1: rgba(255, 255, 255, 0.03); --material-ultrathin-2: rgba(255, 255, 255, 0.07); --material-thin-1: rgba(255, 255, 255, 0.40); --material-thin-2: rgba(255, 255, 255, 0.05); --material-regular-1: rgba(255, 255, 255, 0.60); --material-regular-2: rgba(255, 255, 255, 0.25); --material-thick-1: rgba(255, 255, 255, 0.84); --material-thick-2: rgba(255, 255, 255, 0.34); /* Ultra thick (2026-10-29, the desktop Messages panel): a step past thick, as Apple's ladder goes. Picked on the ladder, not measured — Figma has no ultra-thick swatch yet. */ --material-ultrathick-1: rgba(255, 255, 255, 0.92); --material-ultrathick-2: rgba(255, 255, 255, 0.50); --material-chrome-1: rgba(255, 255, 255, 0.75); --material-chrome-2: transparent; --material-chrome-blur: 50px; /* The glass surface (styles/glass.css, 2026-10-27): the slab under the link page's composer, from Julian's 358×80 mock — a material over the backdrop blur, under one recipe in both themes, measured from Julian's glass mock (2026-10-28 evening, images at 2x): a FLAT body (light 247, 3% black; dark 26, 10% white), a darker band only under the top edge (8 levels below the body, fading into it over 24px), a white glow at the foot (light 248 → 255 over ~9px; dark 27 → 50), a hairline one device pixel wide (light: 20% black; dark: a 33% white light on the top edge, a 6% ring) and a soft wide drop shadow (--glass-shadow). --glass-tint is the band and body, the first background layer over the material pair; --glass-rim the rim's inset shadows, composed before the shadow: `box-shadow: var(--glass-rim), var(--glass-shadow)`. History: the first cut graduated the tint over the whole box and in light cleared it to 0 with a 90% white foot glow and a 35% white ring, so composers dissolved into the white page; the next cut the foot with shade and a 12% black 1px ring, which read as slate. */ --glass-tint: linear-gradient(180deg, rgba(0, 0, 0, 0.065) 0px, rgba(0, 0, 0, 0.03) 24px, rgba(0, 0, 0, 0.03) 100%); --glass-rim: inset 0 0.5px 0 rgba(255, 255, 255, 0.90), inset 0 -9px 9px -4px rgba(255, 255, 255, 0.90), inset 0 0 0 0.5px rgba(0, 0, 0, 0.20); /* The glass's own drop shadow, soft and wide (the mock: ~2% fading over 15pt); --shadow-float stays the sheets' and the rest of the chrome's. */ --glass-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); --glass-shadow-disc: 0 4px 8px rgba(0, 0, 0, 0.10); /* A disc's rim (2026-10-27): the top light and the ring, without the slab's 6px bottom glow, which paints a crescent along a circle's foot and squashes it to an oval. */ --glass-rim-disc: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.35); /* iOS CountBadge brandRed (white label in both modes) and the Home header glow (EphemeralHeaderGlow: 1 light / .45 dark), 2026-10-23. */ --count-badge-fill: var(--accent-red); --count-badge-label: #FFFFFF; --home-glow-green: #62D475; --home-glow-blue: #8EC3F8; --home-glow-pink: #EABDEF; --home-glow-opacity: 1; --fill-primary: rgba(120, 120, 120, 0.20); --fill-secondary: rgba(120, 120, 128, 0.16); --fill-tertiary: rgba(118, 118, 128, 0.12); --fill-quaternary: rgba(116, 116, 128, 0.08); --fill-destructive: rgba(255, 56, 60, 0.14); --fill-vibrant-primary: #CCCCCC; --fill-vibrant-secondary: #E0E0E0; --fill-vibrant-tertiary: #EDEDED; /* Fills / UI */ --fill-tabbar-selected: #0088FF; --fill-segmented-selected: #FFFFFF; --fill-inverse-primary: rgba(120, 120, 120, 0.36); --fill-inverse-secondary: rgba(120, 120, 128, 0.32); --fill-inverse-tertiary: rgba(118, 118, 128, 0.24); --fill-inverse-quaternary: rgba(116, 116, 128, 0.18); --fill-inverse-destructive: rgba(255, 66, 69, 0.14); /* Brand gradients */ --fill-gradient-green: linear-gradient(180deg, #62D475 0%, #58BE68 100%); /* Label (Figma variables, 2026-11-06) — named as Figma names them: Label, Label / Vibrant, Label / Inverse (the other mode's ramp) and Label / Inverse / Vibrant. The base ladder is UIKit's translucent one (3C3C43 / EBEBF5 at an alpha, so it takes the surface's tint); Vibrant is the opaque ladder for copy over materials and controls. Figma's "Controls" sub-ladders are Vibrant minus quaternary, so they are not tokens here — read --label-vibrant-* / --label-inverse-vibrant-*. */ --label-primary: #000000; --label-secondary: rgba(60, 60, 67, 0.60); --label-tertiary: rgba(60, 60, 67, 0.30); --label-quaternary: rgba(60, 60, 67, 0.18); --label-vibrant-primary: #1A1A1A; --label-vibrant-secondary: #727272; --label-vibrant-tertiary: #BFBFBF; --label-vibrant-quaternary: #D9D9D9; /* PlsLabelSpecial — the reminder BODY reading colour, between primary (too heavy for a wall of copy) and secondary (too faint). */ --label-special: #454545; /* UIKit's tertiaryLabel (4b, 2026-10-25), which is not --label-tertiary: the phone notes placeholder, and 4c's completion ring. */ --label-tertiary-system: rgba(60, 60, 67, 0.30); --label-inverse-primary: #FFFFFF; --label-inverse-secondary: rgba(235, 235, 245, 0.70); --label-inverse-tertiary: rgba(235, 235, 245, 0.30); --label-inverse-quaternary: rgba(235, 235, 245, 0.16); --label-inverse-vibrant-primary: #F5F5F5; --label-inverse-vibrant-secondary: #8A8A8A; --label-inverse-vibrant-tertiary: #404040; --label-inverse-vibrant-quaternary: #262626; /* The toDo card's counts beside their glyphs (iOS TodoActionRow.Layout.countTintByAppearance): label tertiary in light. */ --action-count: var(--label-tertiary); /* The phone file row's size line ("482 KB"): tertiary, as iOS's FileAttachmentRow draws it. */ --file-size-text: var(--label-tertiary); /* Border (Figma variables, 2026-11-06): Primary, Secondary, Vibrant. The old --border, --border-strong and --border-tertiary are retired (primary, vibrant and secondary took their callers); test/border_tokens_test.mjs fails any new use. */ --border-primary: #C6C6C8; --border-secondary: rgba(0, 0, 0, 0.12); --border-vibrant: #E6E6E6; /* Accent (Figma variables, 2026-11-06): raw values — light here, dark in the two dark scopes. --accent-blue is the app's accent, which accent.css re-points when the user picks one. Accents / Elevated is the accent at 10% (red at 14%): the wash under accent-coloured ink. Accents / AX are the accessible inks the user-accent picker binds in place of the native hue (accent.css); the stock ink is the AX blue, since the native 0088FF is 3.5:1 on white. */ --accent-red: #FF383C; --accent-orange: #FF8D28; --accent-yellow: #FFCC00; --accent-green: #34C759; --accent-mint: #00C8B3; --accent-teal: #00C3D0; --accent-cyan: #00C0E8; --accent-blue: var(--accent-ax-blue); /* native #0088FF */ --accent-indigo: #6155F5; --accent-purple: #CB30E0; --accent-pink: #FF2D55; --accent-brown: #AC7F5E; /* iOS Messages' green, the Share Item sheet's Messages disc (2026-11-03); the app's own green in both themes. */ --messages-green: #34C759; --accent-red-elevated: rgba(255, 56, 60, 0.14); --accent-orange-elevated: rgba(255, 141, 40, 0.10); --accent-yellow-elevated: rgba(255, 204, 0, 0.10); --accent-green-elevated: rgba(52, 199, 89, 0.10); --accent-mint-elevated: rgba(0, 200, 179, 0.10); --accent-teal-elevated: rgba(0, 195, 208, 0.10); --accent-cyan-elevated: rgba(0, 192, 232, 0.10); --accent-blue-elevated: rgba(0, 102, 235, 0.10); --accent-indigo-elevated: rgba(97, 85, 245, 0.10); --accent-purple-elevated: rgba(203, 48, 224, 0.10); --accent-pink-elevated: rgba(255, 45, 85, 0.10); --accent-brown-elevated: rgba(172, 127, 94, 0.10); --accent-ax-orange: #783D02; --accent-ax-yellow: #5E4B07; --accent-ax-blue: #0066EB; --accent-ax-indigo: #481ADA; --accent-ax-pink: #99062B; /* Accents / Custom (Figma, 2026-11-06): the list pastels and their elevated washes. The home grid still paints a list's wire hex directly (app/buckets list_colors); these are for chrome that tints by name. */ --custom-red: #F6B4BE; --custom-yellow: #F6E7B4; --custom-orange: #FFE9B3; --custom-green: #9EDB9D; --custom-mint: #BAEBE7; --custom-blue: #A0D0FF; --custom-indigo: #C4CFF7; --custom-purple: #DAB0E9; --custom-pink: #F1CDDF; --custom-brown: #E1D8CF; --custom-slate: #DADADA; --custom-red-elevated: rgba(221, 72, 111, 0.10); --custom-yellow-elevated: rgba(160, 131, 0, 0.10); --custom-orange-elevated: rgba(166, 129, 0, 0.10); --custom-green-elevated: rgba(0, 163, 33, 0.10); --custom-mint-elevated: rgba(7, 154, 148, 0.10); --custom-blue-elevated: rgba(0, 138, 230, 0.10); --custom-indigo-elevated: rgba(102, 122, 235, 0.10); --custom-purple-elevated: rgba(184, 79, 218, 0.10); --custom-pink-elevated: rgba(203, 84, 155, 0.10); --custom-brown-elevated: rgba(163, 126, 88, 0.10); --custom-slate-elevated: rgba(134, 134, 134, 0.10); /* Text selection (2026-11-01): one opaque highlight + the label it carries, every selected run in the app (base.css ::selection). Held by test/selection_tokens_test.mjs to WCAG AAA for the text — 7:1 against the highlight — which with black text caps the highlight's own contrast against the page at 3:1 (both bounds meet at luminance 0.30), so this is the stock ink (AX blue 0,102,235) at 68.3% over white: text 7.00:1, page 3.00:1. accent.css re-points it per accent. */ --selection-bg: #5197F1; --selection-fg: var(--label-primary); /* Timeline list (iOS parity) */ --canvas-bg: #F2F2F7; --ui-borders: #C6C6C8; /* Card swipe strips (iOS TimelineListRow, round 3a 2026-10-24): Pin's indigo (Palette.indigo) and its 10% wash; Share always blue (the base channel — never --accent-blue, which the user accent re-points) and its wash; the purple wash bulk select takes in 3c. */ --swipe-pin: #481ADA; --swipe-pin-wash: rgba(72, 26, 218, 0.10); --swipe-share: var(--accent-ax-blue); --swipe-share-wash: rgba(0, 102, 235, 0.10); /* Completion confetti (iOS CompletionCelebration): piece 1 is the accent; these four are fixed, the same in both themes. */ --confetti-2: #7F77DD; --confetti-3: #1D9E75; --confetti-4: #EF9F27; --confetti-5: #D4537E; /* Collection card gradients (iOS BucketGridView, round 2 2026-10-23): each tint lifted +0.04 HSL lightness at the top-left, base at the bottom-right, both at 22%. Blue, orange, red, teal, green. */ --bucket-grad-blue-from: rgba(20, 146, 255, 0.22); --bucket-grad-blue-to: rgba(0, 136, 255, 0.22); --bucket-grad-orange-from: rgba(255, 152, 60, 0.22); --bucket-grad-orange-to: rgba(255, 141, 40, 0.22); --bucket-grad-red-from: rgba(255, 76, 80, 0.22); --bucket-grad-red-to: rgba(255, 56, 60, 0.22); --bucket-grad-teal-from: rgba(0, 220, 197, 0.22); --bucket-grad-teal-to: rgba(0, 200, 179, 0.22); --bucket-grad-green-from: rgba(66, 206, 101, 0.22); --bucket-grad-green-to: rgba(52, 199, 89, 0.22); /* Calendar card badge weekday (iOS system red). */ --calendar-weekday: #FF3B30; --brand-blue: var(--accent-ax-blue); --brand-blue-12: rgba(0, 102, 235, 0.12); /* Shadow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Floating capsule over content (the desktop detail's Messages pill, mock 2026-09-24): hairline edge + soft drop. */ --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.14); /* A floating panel over the page (the desktop Messages panel, mock 2026-10-29): a wide, soft drop. */ --shadow-panel: 0 8px 40px rgba(0, 0, 0, 0.12); /* The Home widget card (iOS AgentUpdateHeroCard, Julian 2026-10-15: "0,4,12,0 black 10%") — the same in both modes, so defined once. */ --shadow-widget: 0 4px 12px rgba(0, 0, 0, 0.10); --border-float: rgba(0, 0, 0, 0.08); /* The signed-out link page (link_page.css): the page behind the card, the card, and the two pastel tints the bar's glow is mixed from — pastel-1 and pastel-2 at an alpha that reads as a wash, not a fill. */ --link-page-bg: rgba(var(--neutral-01), 1); --link-page-card: rgba(var(--bg-base), 1); --link-page-glow-1: rgba(240, 182, 246, 0.55); --link-page-glow-2: rgba(137, 195, 253, 0.55); color-scheme: light; } /* ─── Dark theme — explicit ───────────────────────────────────────────────── */ [data-theme="dark"] { --blend-mode: plus-lighter; --bg-base: var(--neutral-black); --bg-base-inverse: var(--neutral-white); --color-gray-1: var(--neutral-01); --color-gray-2: var(--neutral-05); --color-gray-3: var(--neutral-07); --color-gray-4: var(--neutral-09); --color-gray-5: var(--neutral-11); /* Background */ --background-primary: #000000; --background-secondary: #1C1C1E; --background-tertiary: #2C2C2E; --background-elevated-primary: #1C1C1E; --background-elevated-secondary: #2C2C2E; --background-elevated-tertiary: #3A3A3C; /* Inverse: the light theme's backgrounds, for surfaces that flip (2026-11-06). */ --background-primary-inverse: #FFFFFF; --background-secondary-inverse: #F2F2F7; --background-tertiary-inverse: #FFFFFF; --background-elevated-primary-inverse: #FFFFFF; --background-elevated-secondary-inverse: #F2F2F7; --background-elevated-tertiary-inverse: #FFFFFF; --glass-fill: rgba(40, 40, 42, 0.72); /* Sheets (ui/sheet): overlay + materials, dark values. */ --overlay: rgba(0, 0, 0, 0.48); --material-ultrathin-1: rgba(0, 0, 0, 0.02); --material-ultrathin-2: transparent; --material-thin-1: rgba(0, 0, 0, 0.26); --material-thin-2: transparent; --material-regular-1: rgba(0, 0, 0, 0.41); --material-regular-2: transparent; --material-thick-1: rgba(0, 0, 0, 0.60); --material-thick-2: transparent; --material-ultrathick-1: rgba(58, 58, 60, 0.50); --material-ultrathick-2: rgba(28, 28, 30, 0.94); --material-chrome-1: rgba(72, 72, 76, 0.40); --material-chrome-2: rgba(28, 28, 28, 0.90); --material-chrome-blur: 100px; --glass-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.10) 24px, rgba(255, 255, 255, 0.10) 100%); --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.33), inset 0 -10px 10px -4px rgba(255, 255, 255, 0.10), inset 0 0 0 0.5px rgba(255, 255, 255, 0.06); --glass-shadow: 0 6px 16px rgba(0, 0, 0, 0.50); --glass-shadow-disc: 0 4px 8px rgba(0, 0, 0, 0.10); --glass-rim-disc: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08); --count-badge-fill: #FF4245; --count-badge-label: #FFFFFF; --home-glow-green: #62D475; --home-glow-blue: #8EC3F8; --home-glow-pink: #EABDEF; --home-glow-opacity: 0.45; --bg-80: rgba(var(--bg-base),.8); --bg-70-inverse: rgba(var(--bg-base-inverse),.7); --bg-80-inverse: rgba(var(--bg-base-inverse),.8); --fill-primary: rgba(120, 120, 128, 0.36); --fill-secondary: rgba(120, 120, 128, 0.32); --fill-tertiary: rgba(118, 118, 128, 0.24); --fill-quaternary: rgba(118, 118, 128, 0.18); --fill-destructive: rgba(255, 66, 69, 0.14); --fill-vibrant-primary: #333333; --fill-vibrant-secondary: #1F1F1F; --fill-vibrant-tertiary: #121212; /* Fills / UI */ --fill-tabbar-selected: #FFFFFF; --fill-segmented-selected: rgba(255, 255, 255, 0.27); --fill-inverse-primary: rgba(120, 120, 128, 0.20); --fill-inverse-secondary: rgba(120, 120, 128, 0.16); --fill-inverse-tertiary: rgba(118, 118, 128, 0.12); --fill-inverse-quaternary: rgba(118, 118, 128, 0.08); --fill-inverse-destructive: rgba(255, 56, 60, 0.14); /* Label (Figma variables, 2026-11-06) — named as Figma names them: Label, Label / Vibrant, Label / Inverse (the other mode's ramp) and Label / Inverse / Vibrant. The base ladder is UIKit's translucent one (3C3C43 / EBEBF5 at an alpha, so it takes the surface's tint); Vibrant is the opaque ladder for copy over materials and controls. Figma's "Controls" sub-ladders are Vibrant minus quaternary, so they are not tokens here — read --label-vibrant-* / --label-inverse-vibrant-*. */ --label-primary: #FFFFFF; --label-secondary: rgba(235, 235, 245, 0.70); --label-tertiary: rgba(235, 235, 245, 0.30); --label-quaternary: rgba(235, 235, 245, 0.16); --label-vibrant-primary: #F5F5F5; --label-vibrant-secondary: #8A8A8A; --label-vibrant-tertiary: #404040; --label-vibrant-quaternary: #262626; /* PlsLabelSpecial — the reminder BODY reading colour, between primary (too heavy for a wall of copy) and secondary (too faint). */ --label-special: #EBEBF5; /* UIKit's tertiaryLabel (4b, 2026-10-25), which is not --label-tertiary: the phone notes placeholder, and 4c's completion ring. */ --label-tertiary-system: rgba(235, 235, 245, 0.30); --label-inverse-primary: #000000; --label-inverse-secondary: rgba(60, 60, 67, 0.60); --label-inverse-tertiary: rgba(60, 60, 67, 0.30); --label-inverse-quaternary: rgba(60, 60, 67, 0.18); --label-inverse-vibrant-primary: #1A1A1A; --label-inverse-vibrant-secondary: #727272; --label-inverse-vibrant-tertiary: #BFBFBF; --label-inverse-vibrant-quaternary: #D9D9D9; /* The toDo card's counts beside their glyphs (iOS TodoActionRow.Layout.countTintByAppearance): label SECONDARY in dark, where tertiary all but vanishes on the card. */ --action-count: var(--label-secondary); /* The file row's size line: back on tertiary now that its dark value is the translucent ladder (2026-11-06), per the 2026-10-25 note. */ --file-size-text: var(--label-tertiary); /* Border (Figma variables, 2026-11-06): Primary, Secondary, Vibrant. */ --border-primary: #38383A; --border-secondary: rgba(255, 255, 255, 0.17); --border-vibrant: #1A1A1A; /* Accent (Figma variables, 2026-11-06): the dark values — see light. */ --accent-red: #FF4245; --accent-orange: #FF9230; --accent-yellow: #FFD600; --accent-green: #30D158; --accent-mint: #00DAC3; --accent-teal: #00D2E0; --accent-cyan: #3CD3FE; --accent-blue: var(--accent-ax-blue); /* native #0091FF */ --accent-indigo: #6D7CFF; --accent-purple: #DB34F2; --accent-pink: #FF375F; --accent-brown: #B78A66; /* iOS Messages' green, the Share Item sheet's Messages disc (2026-11-03); the app's own green in both themes. */ --messages-green: #34C759; --accent-red-elevated: rgba(255, 66, 69, 0.14); --accent-orange-elevated: rgba(255, 146, 48, 0.10); --accent-yellow-elevated: rgba(255, 214, 0, 0.10); --accent-green-elevated: rgba(48, 209, 88, 0.10); --accent-mint-elevated: rgba(0, 218, 195, 0.10); --accent-teal-elevated: rgba(0, 210, 224, 0.10); --accent-cyan-elevated: rgba(60, 211, 254, 0.10); --accent-blue-elevated: rgba(0, 145, 255, 0.10); --accent-indigo-elevated: rgba(109, 124, 255, 0.10); --accent-purple-elevated: rgba(219, 52, 242, 0.10); --accent-pink-elevated: rgba(255, 55, 95, 0.10); --accent-brown-elevated: rgba(183, 138, 102, 0.10); --accent-ax-orange: #FF9230; --accent-ax-yellow: #FFD600; --accent-ax-blue: #0091FF; --accent-ax-indigo: #B5A7FF; --accent-ax-pink: #FF90AC; /* Accents / Custom (Figma, 2026-11-06): the list pastels and their elevated washes. The home grid still paints a list's wire hex directly (app/buckets list_colors); these are for chrome that tints by name. */ --custom-red: #FFB4C0; --custom-yellow: #FEE798; --custom-orange: #FFE6A7; --custom-green: #87E687; --custom-mint: #A7F4EE; --custom-blue: #A7D3FE; --custom-indigo: #C6D2FF; --custom-purple: #E9A9FF; --custom-pink: #FFCBE5; --custom-brown: #E8DACD; --custom-slate: #DDDDDD; --custom-red-elevated: rgba(255, 108, 141, 0.10); --custom-yellow-elevated: rgba(196, 161, 0, 0.10); --custom-orange-elevated: rgba(202, 158, 0, 0.10); --custom-green-elevated: rgba(3, 199, 45, 0.10); --custom-mint-elevated: rgba(3, 189, 182, 0.10); --custom-blue-elevated: rgba(75, 170, 254, 0.10); --custom-indigo-elevated: rgba(135, 157, 254, 0.10); --custom-purple-elevated: rgba(217, 112, 252, 0.10); --custom-pink-elevated: rgba(238, 115, 186, 0.10); --custom-brown-elevated: rgba(194, 157, 117, 0.10); --custom-slate-elevated: rgba(164, 164, 164, 0.10); /* Text selection: the dark blue (0,145,255) at 62.5% over black — white text 7.01:1, highlight 3.00:1 against the page (the AAA cap, see light). */ --selection-bg: #005B9F; --selection-fg: var(--label-primary); /* Timeline list (iOS parity) */ --canvas-bg: #0C0C0C; /* iOS backgroundCanvas dark (2026-09-23): darker than the black cards so they read as lifted, as on iOS. Was #1C1C1E. */ --ui-borders: #38383A; --swipe-pin: #B5A7FF; --swipe-pin-wash: rgba(181, 167, 255, 0.10); --swipe-share: var(--accent-ax-blue); --swipe-share-wash: rgba(0, 145, 255, 0.10); --confetti-2: #7F77DD; --confetti-3: #1D9E75; --confetti-4: #EF9F27; --confetti-5: #D4537E; --bucket-grad-blue-from: rgba(20, 154, 255, 0.22); --bucket-grad-blue-to: rgba(0, 145, 255, 0.22); --bucket-grad-orange-from: rgba(255, 157, 68, 0.22); --bucket-grad-orange-to: rgba(255, 146, 48, 0.22); --bucket-grad-red-from: rgba(255, 86, 89, 0.22); --bucket-grad-red-to: rgba(255, 66, 69, 0.22); --bucket-grad-teal-from: rgba(0, 238, 213, 0.22); --bucket-grad-teal-to: rgba(0, 218, 195, 0.22); --bucket-grad-green-from: rgba(65, 213, 101, 0.22); --bucket-grad-green-to: rgba(48, 209, 88, 0.22); --calendar-weekday: #FF453A; --brand-blue: var(--accent-ax-blue); --brand-blue-12: rgba(0, 145, 255, 0.12); /* Shadow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 40px rgba(0, 0, 0, 0.5); --border-float: rgba(255, 255, 255, 0.12); /* link_page.css — see the light scope. The glow is dimmer on black so the bar stays a tint rather than a neon band. */ --link-page-bg: rgba(var(--bg-base), 1); --link-page-card: rgba(var(--color-gray-4), 1); --link-page-glow-1: rgba(240, 182, 246, 0.22); --link-page-glow-2: rgba(137, 195, 253, 0.22); color-scheme: dark; } /* ─── OS dark preference — catch-all when no data-theme is set ────────────── The [data-theme="dark"] block above, verbatim (regenerated 2026-11-06; the old copy had drifted and still carried the retired --bg-* names). Change the dark block and mirror it here. ─────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --blend-mode: plus-lighter; --bg-base: var(--neutral-black); --bg-base-inverse: var(--neutral-white); --color-gray-1: var(--neutral-01); --color-gray-2: var(--neutral-05); --color-gray-3: var(--neutral-07); --color-gray-4: var(--neutral-09); --color-gray-5: var(--neutral-11); /* Background */ --background-primary: #000000; --background-secondary: #1C1C1E; --background-tertiary: #2C2C2E; --background-elevated-primary: #1C1C1E; --background-elevated-secondary: #2C2C2E; --background-elevated-tertiary: #3A3A3C; /* Inverse: the light theme's backgrounds, for surfaces that flip (2026-11-06). */ --background-primary-inverse: #FFFFFF; --background-secondary-inverse: #F2F2F7; --background-tertiary-inverse: #FFFFFF; --background-elevated-primary-inverse: #FFFFFF; --background-elevated-secondary-inverse: #F2F2F7; --background-elevated-tertiary-inverse: #FFFFFF; --glass-fill: rgba(40, 40, 42, 0.72); /* Sheets (ui/sheet): overlay + materials, dark values. */ --overlay: rgba(0, 0, 0, 0.48); --material-ultrathin-1: rgba(0, 0, 0, 0.02); --material-ultrathin-2: transparent; --material-thin-1: rgba(0, 0, 0, 0.26); --material-thin-2: transparent; --material-regular-1: rgba(0, 0, 0, 0.41); --material-regular-2: transparent; --material-thick-1: rgba(0, 0, 0, 0.60); --material-thick-2: transparent; --material-ultrathick-1: rgba(58, 58, 60, 0.50); --material-ultrathick-2: rgba(28, 28, 30, 0.94); --material-chrome-1: rgba(72, 72, 76, 0.40); --material-chrome-2: rgba(28, 28, 28, 0.90); --material-chrome-blur: 100px; --glass-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.10) 24px, rgba(255, 255, 255, 0.10) 100%); --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.33), inset 0 -10px 10px -4px rgba(255, 255, 255, 0.10), inset 0 0 0 0.5px rgba(255, 255, 255, 0.06); --glass-shadow: 0 6px 16px rgba(0, 0, 0, 0.50); --glass-shadow-disc: 0 4px 8px rgba(0, 0, 0, 0.10); --glass-rim-disc: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08); --count-badge-fill: #FF4245; --count-badge-label: #FFFFFF; --home-glow-green: #62D475; --home-glow-blue: #8EC3F8; --home-glow-pink: #EABDEF; --home-glow-opacity: 0.45; --bg-80: rgba(var(--bg-base),.8); --bg-70-inverse: rgba(var(--bg-base-inverse),.7); --bg-80-inverse: rgba(var(--bg-base-inverse),.8); --fill-primary: rgba(120, 120, 128, 0.36); --fill-secondary: rgba(120, 120, 128, 0.32); --fill-tertiary: rgba(118, 118, 128, 0.24); --fill-quaternary: rgba(118, 118, 128, 0.18); --fill-destructive: rgba(255, 66, 69, 0.14); --fill-vibrant-primary: #333333; --fill-vibrant-secondary: #1F1F1F; --fill-vibrant-tertiary: #121212; /* Fills / UI */ --fill-tabbar-selected: #FFFFFF; --fill-segmented-selected: rgba(255, 255, 255, 0.27); --fill-inverse-primary: rgba(120, 120, 128, 0.20); --fill-inverse-secondary: rgba(120, 120, 128, 0.16); --fill-inverse-tertiary: rgba(118, 118, 128, 0.12); --fill-inverse-quaternary: rgba(118, 118, 128, 0.08); --fill-inverse-destructive: rgba(255, 56, 60, 0.14); /* Label (Figma variables, 2026-11-06) — named as Figma names them: Label, Label / Vibrant, Label / Inverse (the other mode's ramp) and Label / Inverse / Vibrant. The base ladder is UIKit's translucent one (3C3C43 / EBEBF5 at an alpha, so it takes the surface's tint); Vibrant is the opaque ladder for copy over materials and controls. Figma's "Controls" sub-ladders are Vibrant minus quaternary, so they are not tokens here — read --label-vibrant-* / --label-inverse-vibrant-*. */ --label-primary: #FFFFFF; --label-secondary: rgba(235, 235, 245, 0.70); --label-tertiary: rgba(235, 235, 245, 0.30); --label-quaternary: rgba(235, 235, 245, 0.16); --label-vibrant-primary: #F5F5F5; --label-vibrant-secondary: #8A8A8A; --label-vibrant-tertiary: #404040; --label-vibrant-quaternary: #262626; /* PlsLabelSpecial — the reminder BODY reading colour, between primary (too heavy for a wall of copy) and secondary (too faint). */ --label-special: #EBEBF5; /* UIKit's tertiaryLabel (4b, 2026-10-25), which is not --label-tertiary: the phone notes placeholder, and 4c's completion ring. */ --label-tertiary-system: rgba(235, 235, 245, 0.30); --label-inverse-primary: #000000; --label-inverse-secondary: rgba(60, 60, 67, 0.60); --label-inverse-tertiary: rgba(60, 60, 67, 0.30); --label-inverse-quaternary: rgba(60, 60, 67, 0.18); --label-inverse-vibrant-primary: #1A1A1A; --label-inverse-vibrant-secondary: #727272; --label-inverse-vibrant-tertiary: #BFBFBF; --label-inverse-vibrant-quaternary: #D9D9D9; /* The toDo card's counts beside their glyphs (iOS TodoActionRow.Layout.countTintByAppearance): label SECONDARY in dark, where tertiary all but vanishes on the card. */ --action-count: var(--label-secondary); /* The file row's size line: back on tertiary now that its dark value is the translucent ladder (2026-11-06), per the 2026-10-25 note. */ --file-size-text: var(--label-tertiary); /* Border (Figma variables, 2026-11-06): Primary, Secondary, Vibrant. */ --border-primary: #38383A; --border-secondary: rgba(255, 255, 255, 0.17); --border-vibrant: #1A1A1A; /* Accent (Figma variables, 2026-11-06): the dark values — see light. */ --accent-red: #FF4245; --accent-orange: #FF9230; --accent-yellow: #FFD600; --accent-green: #30D158; --accent-mint: #00DAC3; --accent-teal: #00D2E0; --accent-cyan: #3CD3FE; --accent-blue: var(--accent-ax-blue); /* native #0091FF */ --accent-indigo: #6D7CFF; --accent-purple: #DB34F2; --accent-pink: #FF375F; --accent-brown: #B78A66; /* iOS Messages' green, the Share Item sheet's Messages disc (2026-11-03); the app's own green in both themes. */ --messages-green: #34C759; --accent-red-elevated: rgba(255, 66, 69, 0.14); --accent-orange-elevated: rgba(255, 146, 48, 0.10); --accent-yellow-elevated: rgba(255, 214, 0, 0.10); --accent-green-elevated: rgba(48, 209, 88, 0.10); --accent-mint-elevated: rgba(0, 218, 195, 0.10); --accent-teal-elevated: rgba(0, 210, 224, 0.10); --accent-cyan-elevated: rgba(60, 211, 254, 0.10); --accent-blue-elevated: rgba(0, 145, 255, 0.10); --accent-indigo-elevated: rgba(109, 124, 255, 0.10); --accent-purple-elevated: rgba(219, 52, 242, 0.10); --accent-pink-elevated: rgba(255, 55, 95, 0.10); --accent-brown-elevated: rgba(183, 138, 102, 0.10); --accent-ax-orange: #FF9230; --accent-ax-yellow: #FFD600; --accent-ax-blue: #0091FF; --accent-ax-indigo: #B5A7FF; --accent-ax-pink: #FF90AC; /* Accents / Custom (Figma, 2026-11-06): the list pastels and their elevated washes. The home grid still paints a list's wire hex directly (app/buckets list_colors); these are for chrome that tints by name. */ --custom-red: #FFB4C0; --custom-yellow: #FEE798; --custom-orange: #FFE6A7; --custom-green: #87E687; --custom-mint: #A7F4EE; --custom-blue: #A7D3FE; --custom-indigo: #C6D2FF; --custom-purple: #E9A9FF; --custom-pink: #FFCBE5; --custom-brown: #E8DACD; --custom-slate: #DDDDDD; --custom-red-elevated: rgba(255, 108, 141, 0.10); --custom-yellow-elevated: rgba(196, 161, 0, 0.10); --custom-orange-elevated: rgba(202, 158, 0, 0.10); --custom-green-elevated: rgba(3, 199, 45, 0.10); --custom-mint-elevated: rgba(3, 189, 182, 0.10); --custom-blue-elevated: rgba(75, 170, 254, 0.10); --custom-indigo-elevated: rgba(135, 157, 254, 0.10); --custom-purple-elevated: rgba(217, 112, 252, 0.10); --custom-pink-elevated: rgba(238, 115, 186, 0.10); --custom-brown-elevated: rgba(194, 157, 117, 0.10); --custom-slate-elevated: rgba(164, 164, 164, 0.10); /* Text selection: the dark blue (0,145,255) at 62.5% over black — white text 7.01:1, highlight 3.00:1 against the page (the AAA cap, see light). */ --selection-bg: #005B9F; --selection-fg: var(--label-primary); /* Timeline list (iOS parity) */ --canvas-bg: #0C0C0C; /* iOS backgroundCanvas dark (2026-09-23): darker than the black cards so they read as lifted, as on iOS. Was #1C1C1E. */ --ui-borders: #38383A; --swipe-pin: #B5A7FF; --swipe-pin-wash: rgba(181, 167, 255, 0.10); --swipe-share: var(--accent-ax-blue); --swipe-share-wash: rgba(0, 145, 255, 0.10); --confetti-2: #7F77DD; --confetti-3: #1D9E75; --confetti-4: #EF9F27; --confetti-5: #D4537E; --bucket-grad-blue-from: rgba(20, 154, 255, 0.22); --bucket-grad-blue-to: rgba(0, 145, 255, 0.22); --bucket-grad-orange-from: rgba(255, 157, 68, 0.22); --bucket-grad-orange-to: rgba(255, 146, 48, 0.22); --bucket-grad-red-from: rgba(255, 86, 89, 0.22); --bucket-grad-red-to: rgba(255, 66, 69, 0.22); --bucket-grad-teal-from: rgba(0, 238, 213, 0.22); --bucket-grad-teal-to: rgba(0, 218, 195, 0.22); --bucket-grad-green-from: rgba(65, 213, 101, 0.22); --bucket-grad-green-to: rgba(48, 209, 88, 0.22); --calendar-weekday: #FF453A; --brand-blue: var(--accent-ax-blue); --brand-blue-12: rgba(0, 145, 255, 0.12); /* Shadow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 40px rgba(0, 0, 0, 0.5); --border-float: rgba(255, 255, 255, 0.12); /* link_page.css — see the light scope. The glow is dimmer on black so the bar stays a tint rather than a neon band. */ --link-page-bg: rgba(var(--bg-base), 1); --link-page-card: rgba(var(--color-gray-4), 1); --link-page-glow-1: rgba(240, 182, 246, 0.22); --link-page-glow-2: rgba(137, 195, 253, 0.22); color-scheme: dark; } } /* The user's accent colour over the tokens — see accent.css. */ /* The user's accent colour (Settings → Accent Color), after iOS's AccentPreference. `data-accent` on (app/settings apply_accent_effect, restored pre-paint by index.html) re-points the accent tokens the app already paints with: --accent-blue and its 10% elevated wash, and the text-selection highlight --selection-bg (the accent over the page at the alpha that keeps the selected label at WCAG AAA 7:1 — test/selection_tokens_test.mjs). No attribute = the stock accent from tokens.css. The native accents (tokens.css --accent-*) are not readable as ink — orange, yellow, blue, indigo and pink bind the Accents / AX colours (--accent-ax-*, 2026-11-06; blue is the stock ink too); green and purple keep iOS's PleaseUI Colors.xcassets inks, which have no AX row yet. Three blocks per colour, matching tokens.css's theme resolution: light (default), explicit dark, and OS-dark when no theme is forced. The .settings-accent--* classes are the swatches, which always show their own colour whatever is chosen. Pink is bound here but not yet offered by the picker (model.Accent / the PINK wire value). */ :root[data-accent="orange"], .settings-accent--orange { --accent-blue: var(--accent-ax-orange); --accent-blue-elevated: rgba(120, 61, 2, 0.10); --selection-bg: #B18F6D; --swatch: var(--accent-ax-orange); } :root[data-theme="dark"][data-accent="orange"], :root[data-theme="dark"] .settings-accent--orange { --accent-blue: var(--accent-ax-orange); --accent-blue-elevated: rgba(255, 146, 48, 0.10); --selection-bg: #834B19; --swatch: var(--accent-ax-orange); } @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="orange"], :root:not([data-theme]) .settings-accent--orange { --accent-blue: var(--accent-ax-orange); --accent-blue-elevated: rgba(255, 146, 48, 0.10); --selection-bg: #834B19; --swatch: var(--accent-ax-orange); } } :root[data-accent="yellow"], .settings-accent--yellow { --accent-blue: var(--accent-ax-yellow); --accent-blue-elevated: rgba(94, 75, 7, 0.10); --selection-bg: #A0956C; --swatch: var(--accent-ax-yellow); } :root[data-theme="dark"][data-accent="yellow"], :root[data-theme="dark"] .settings-accent--yellow { --accent-blue: var(--accent-ax-yellow); --accent-blue-elevated: rgba(255, 214, 0, 0.10); --selection-bg: #695800; --swatch: var(--accent-ax-yellow); } @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="yellow"], :root:not([data-theme]) .settings-accent--yellow { --accent-blue: var(--accent-ax-yellow); --accent-blue-elevated: rgba(255, 214, 0, 0.10); --selection-bg: #695800; --swatch: var(--accent-ax-yellow); } } :root[data-accent="green"], .settings-accent--green { --accent-blue: rgb(18, 89, 36); --accent-blue-elevated: rgba(18, 89, 36, 0.10); --selection-bg: #759F80; --swatch: rgb(18, 89, 36); } :root[data-theme="dark"][data-accent="green"], :root[data-theme="dark"] .settings-accent--green { --accent-blue: rgb(48, 209, 88); --accent-blue-elevated: rgba(48, 209, 88, 0.10); --selection-bg: #18662B; --swatch: rgb(48, 209, 88); } @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="green"], :root:not([data-theme]) .settings-accent--green { --accent-blue: rgb(48, 209, 88); --accent-blue-elevated: rgba(48, 209, 88, 0.10); --selection-bg: #18662B; --swatch: rgb(48, 209, 88); } } :root[data-accent="blue"], .settings-accent--blue { --accent-blue: var(--accent-ax-blue); --accent-blue-elevated: rgba(0, 102, 235, 0.10); --selection-bg: #5197F1; --swatch: var(--accent-ax-blue); } :root[data-theme="dark"][data-accent="blue"], :root[data-theme="dark"] .settings-accent--blue { --accent-blue: var(--accent-ax-blue); --accent-blue-elevated: rgba(0, 145, 255, 0.10); --selection-bg: #005B9F; --swatch: var(--accent-ax-blue); } @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="blue"], :root:not([data-theme]) .settings-accent--blue { --accent-blue: var(--accent-ax-blue); --accent-blue-elevated: rgba(0, 145, 255, 0.10); --selection-bg: #005B9F; --swatch: var(--accent-ax-blue); } } :root[data-accent="indigo"], .settings-accent--indigo { --accent-blue: var(--accent-ax-indigo); --accent-blue-elevated: rgba(72, 26, 218, 0.10); --selection-bg: #9E85EB; --swatch: var(--accent-ax-indigo); } :root[data-theme="dark"][data-accent="indigo"], :root[data-theme="dark"] .settings-accent--indigo { --accent-blue: var(--accent-ax-indigo); --accent-blue-elevated: rgba(181, 167, 255, 0.10); --selection-bg: #5A537F; --swatch: var(--accent-ax-indigo); } @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="indigo"], :root:not([data-theme]) .settings-accent--indigo { --accent-blue: var(--accent-ax-indigo); --accent-blue-elevated: rgba(181, 167, 255, 0.10); --selection-bg: #5A537F; --swatch: var(--accent-ax-indigo); } } :root[data-accent="purple"], .settings-accent--purple { --accent-blue: rgb(132, 1, 148); --accent-blue-elevated: rgba(132, 1, 148, 0.10); --selection-bg: #C07DC8; --swatch: rgb(132, 1, 148); } :root[data-theme="dark"][data-accent="purple"], :root[data-theme="dark"] .settings-accent--purple { --accent-blue: rgb(242, 137, 255); --accent-blue-elevated: rgba(242, 137, 255, 0.10); --selection-bg: #7A4581; --swatch: rgb(242, 137, 255); } @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="purple"], :root:not([data-theme]) .settings-accent--purple { --accent-blue: rgb(242, 137, 255); --accent-blue-elevated: rgba(242, 137, 255, 0.10); --selection-bg: #7A4581; --swatch: rgb(242, 137, 255); } } :root[data-accent="pink"], .settings-accent--pink { --accent-blue: var(--accent-ax-pink); --accent-blue-elevated: rgba(153, 6, 43, 0.10); --selection-bg: #CB8092; --swatch: var(--accent-ax-pink); } :root[data-theme="dark"][data-accent="pink"], :root[data-theme="dark"] .settings-accent--pink { --accent-blue: var(--accent-ax-pink); --accent-blue-elevated: rgba(255, 144, 172, 0.10); --selection-bg: #804857; --swatch: var(--accent-ax-pink); } @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="pink"], :root:not([data-theme]) .settings-accent--pink { --accent-blue: var(--accent-ax-pink); --accent-blue-elevated: rgba(255, 144, 172, 0.10); --selection-bg: #804857; --swatch: var(--accent-ax-pink); } } /* Reset + base element styles. Consumes tokens.css. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Text selection, everywhere (2026-11-01): the notes, the title, the chat composer and bubbles, lists, sheets — one highlight and one label from tokens.css / accent.css, held to WCAG AAA by test/selection_tokens_test.mjs. Opaque on purpose: a translucent wash reads differently over every surface and left the notes' at 1.14:1. The colour is forced to --selection-fg so secondary / special runs clear 7:1 too. No other stylesheet styles ::selection. Engines (measured 2026-11-01): Chromium and Firefox paint the tokens as written. macOS Safari paints them in light, but in dark re-alphas any opaque ::selection to 0.8 (RenderTheme), so the highlight sits at ~2.2:1 against the page there; the text still clears 7:1. iOS Safari paints its own system tint (~20% blue) over a touch selection whatever this says — no CSS reaches it. */ ::selection { background-color: var(--selection-bg); color: var(--selection-fg); } /* A picture inside a selected run: Chromium tints a selected image with the highlight at high alpha, and an opaque one turns it into a flat block, so images and video take a 30% wash instead. */ img::selection, video::selection { background-color: color-mix(in srgb, var(--selection-bg) 30%, transparent); } /* Active panel drag-resize (dom.mjs startPanelResize sets/clears this): keep the col-resize cursor everywhere the pointer wanders, stop text selection, and pin the resizing panels' width transitions off so they track the pointer 1:1. */ body.panel-resizing { user-select: none; -webkit-user-select: none; } body.panel-resizing * { cursor: col-resize !important; } body.panel-resizing .sidebar, body.panel-resizing .detail-ai-panel { transition: none !important; } /* No rubber-band/overscroll bounce anywhere, and no scroll chaining out of a scroller that hit its edge — what makes the app feel like a fixed shell rather than a page. Every scroller (overflow auto | scroll) declares `overscroll-behavior: none` in its own rule, html/body below included; test/overscroll_test.mjs holds the line. Never on `*` (2026-10-28, Julian: "mouseOver to scroll is incredibly difficult" on the desktop Home sidebar): an overflow: hidden box — a row's title, a section's clip, a card's rounded corners — is a scroll container too, always at its boundary, and `none` on it stopped a wheel or a finger that started over it from reaching the scroller behind. */ html, body { /* No background here, on purpose (2026-09-23). The app canvas lives on .app-shell (shell.css), not on body: html's colour is written at runtime by syncChromeColor (ffi/dom.mjs) to mirror the visible pane, and it is what shows in the iOS safe-area strip under the shell — a body fill would sit between the two and paint that strip the canvas colour under a white detail page. Pages outside the shell (boot, auth, share, join) keep painting their own surfaces. */ color: var(--label-primary); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; /* Ensure the body never exceeds the true visual viewport on Android */ max-height: 100dvh; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--sp-xs) var(--sp-sm); cursor: pointer; } button:hover { border-color: var(--border-primary); } :focus-visible { outline: 2px solid var(--background-secondary); outline-offset: 2px; } /* Prevent iOS Safari autozoom on field focus. The browser zooms whenever a focused field's font-size is < 16px, so floor every text-entry surface at 16px on mobile — native controls (input / textarea / select) AND the contenteditable editors (Milkdown / ProseMirror), which the bare element selectors miss. `!important` is required because component classes set sub-16px sizes that win on specificity; `max(16px, 1em)` only ever raises, never shrinks. The `:not()`s preserve the few intentionally-large fields (phone entry, reminder title) and the off-screen file-input sizing hack. This intentionally does not disable pinch-zoom. */ @media (max-width: 834px) { input:not(.auth-phone-input):not(.capture-file-input-hidden), textarea:not(.nr-title), select, [contenteditable="true"], .ProseMirror { font-size: max(16px, 1em) !important; } /* Placeholder text. Real ::placeholder inherits the (now ≥16px) field size; the editors render their placeholder as a ::before pseudo-element that carries its own font-size, so floor those too. */ .chat-composer-milkdown::before { font-size: max(16px, 1em) !important; } } /* Lucide-style icons rendered via CSS mask so they inherit currentColor. Each icon span carries a `--icon-mask` custom property pointing to an inline SVG data URI, and explicit width/height. See `ui/icons.gleam`. */ .icon { display: inline-block; background-color: currentColor; -webkit-mask-image: var(--icon-mask); mask-image: var(--icon-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex-shrink: 0; vertical-align: middle; line-height: 0; /* WebKit hit-tests against the mask alpha channel, so only painted pixels would register clicks. Opt out entirely — let the parent button/anchor be the sole click target. */ pointer-events: none; } /* Brand-gradient tint through the icon mask (the mask only reads alpha, so a background gradient shows through the glyph). Generic sibling of sidebar.css's .sidebar-row-icon-gradient-green — wrap any icon: html.span([class("icon-gradient-green")], [icons.x(size)]) */ .icon-gradient-green .icon { background: var(--fill-gradient-green); } /* ── — 1:1 audio waveform preview ────────────────────────── Canvas bars draw in `currentColor`; size by setting a width on the element (or letting a square slot like the Activity media box or .tl-row-thumb size it). */ .wf-tile { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--fill-quaternary); border-radius: var(--radius-md); color: var(--label-tertiary); overflow: hidden; pointer-events: none; /* parent anchor owns the click, like .icon */ } /* Animated inline-SVG icons (e.g. check_hollow_animated). Cannot use the mask approach — browsers don't animate SVG data URIs. Instead the SVG is injected as real DOM via unsafe_raw_html and wrapped in this span so it flows like a regular .icon. */ .icon-animated-check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; line-height: 0; pointer-events: none; } .icon-animated-check svg { display: block; } /* The iOS menu pop: springs and the .pop entrance — see ui/motion. */ /* Motion: the iOS menu pop (2026-10-30), measured off Julian's 60 fps recording of the paperclip menu; a corner pivot since 2026-11-02 (Julian's call, off the Pop Pivot Compare render). The menu is a frame morph out of what opened it: it starts as a blob a fifth of its size PIVOTED on the point it was opened from — the pointer, or the corner nearest the button (iOS `.scale(anchor: .bottomTrailing)`) — and grows to its own size about that point, width and height each on their own spring; the launched vertical spring (it shoots past and eases back, as iOS's does) reads as a small overshoot past full size. The shape goes from an ellipse to the element's own corners, the content from blurred to sharp, the whole thing from clear to opaque. Leaving, it folds back toward the same pivot, blurs and fades in ~80 ms (ffi/pop.mjs plays that on a ghost once Lustre has removed the element). Use: `ui/motion.pop(motion.menu)` on the element (the class `pop` plus any knob that differs from the defaults below, as inline custom properties), or the class alone with knobs set from a stylesheet. Every knob is a `--pop-*` custom property: --pop-corner the element's own corner radius, at rest: set it here instead of border-radius (see pop-round) --pop-anchor-x / -y the pivot: the point in the element's own box it unfolds from, one length or percentage each, with its unit (50% 50%, the default, is its centre). The FFI that places the element sets these on an ancestor (ffi/menu_place.mjs); they reach the element, not past it. --pop-from-x / -y its starting size as a fraction of its own --pop-start-x / -y the same, set by the FFI that places it on an ancestor (ffi/menu_place.mjs placeMenuOver: the trigger's box over the menu's, so it starts AS the button it covers); --pop-from-* on the element itself still wins --pop-width / -ms the width's spring (a linear() easing) and how long it runs; -height, -move-x, -move-y alike --pop-round / -ms the starting corner radius, one length or percentage (50%: an ellipse), and how long the corners take to reach --pop-corner --pop-blur / -ms the starting blur, px (CSS px are iOS points) --pop-fade-ms the fade in --pop-exit `off` to vanish at once --pop-exit-ms / -scale / -blur the way out A `.pop` element carries `scale` and `translate`, so it is a stacking context and the containing block of its fixed descendants. Its springs animate registered custom properties, which browsers run on the main thread (the fade and blur can stay on the compositor), so a long task during an entrance stalls the growth for that long. */ @property --pop-sx { syntax: ""; inherits: false; initial-value: 1; } @property --pop-sy { syntax: ""; inherits: false; initial-value: 1; } /* Travel: 0 at the anchor, 1 at home. */ @property --pop-mx { syntax: ""; inherits: false; initial-value: 1; } @property --pop-my { syntax: ""; inherits: false; initial-value: 1; } /* The corner radius in flight. WebKit 26 (Safari 26; 18.6 was fine) never plays a border-radius keyframe on an element that also animates custom properties once any var() declaration precedes its radius in the cascade, so the morph animates this registered property and border-radius only ever reads it. */ @property --pop-r { syntax: ""; inherits: false; initial-value: 0px; } /* springs:begin — generated by scripts/springs.mjs, do not edit */ :root { /* spring(duration: 0.36, bounce: 0.25) */ --spring-pop-width: linear(0, 0.0139, 0.0508, 0.1046, 0.1698, 0.2421, 0.318, 0.3946, 0.4697, 0.5416, 0.6093, 0.6717, 0.7286, 0.7796, 0.8247, 0.8642, 0.8982, 0.927, 0.9512, 0.9712, 0.9873, 1, 1.0098, 1.0171, 1.0223, 1.0257, 1.0276, 1.0283, 1.0282, 1.0273, 1.0259, 1.0241, 1.0221, 1.0199, 1.0178, 1.0156, 1.0136, 1.0116, 1.0098, 1.0081, 1.0066, 1.0053, 1.0041, 1.0031, 1.0023, 1.0016, 1); --spring-pop-width-ms: 459ms; /* spring(duration: 0.3, bounce: 0.21) */ --spring-pop-height: linear(0, 0.0188, 0.0675, 0.136, 0.2165, 0.3026, 0.3899, 0.4748, 0.5551, 0.629, 0.6957, 0.7549, 0.8064, 0.8506, 0.888, 0.919, 0.9443, 0.9646, 0.9806, 0.9928, 1.0019, 1.0085, 1.0129, 1.0156, 1.017, 1.0175, 1.0171, 1.0163, 1.0151, 1.0137, 1.0122, 1.0107, 1.0092, 1.0078, 1.0065, 1.0053, 1.0043, 1.0034, 1.0026, 1.002, 1.0014, 1); --spring-pop-height-ms: 401ms; /* spring(duration: 0.33, bounce: 0.24) */ --spring-pop-move-x: linear(0, 0.0162, 0.0586, 0.1196, 0.1924, 0.2721, 0.3543, 0.436, 0.5146, 0.5887, 0.657, 0.7188, 0.7739, 0.8222, 0.864, 0.8995, 0.9293, 0.9539, 0.9737, 0.9894, 1.0016, 1.0106, 1.0171, 1.0214, 1.024, 1.0252, 1.0253, 1.0246, 1.0234, 1.0217, 1.0198, 1.0177, 1.0156, 1.0136, 1.0116, 1.0098, 1.0081, 1.0066, 1.0053, 1.0041, 1.0031, 1.0023, 1.0015, 1); --spring-pop-move-x-ms: 426ms; /* spring(duration: 0.39, bounce: 0.36), initial velocity 25.5 */ --spring-pop-move-y: linear(0, 0.239, 0.4513, 0.6371, 0.7969, 0.9319, 1.0435, 1.1335, 1.2039, 1.2566, 1.2937, 1.3173, 1.3292, 1.3314, 1.3256, 1.3134, 1.2962, 1.2755, 1.2522, 1.2275, 1.2021, 1.1768, 1.1521, 1.1284, 1.1062, 1.0857, 1.067, 1.0501, 1.0353, 1.0224, 1.0113, 1.002, 0.9944, 0.9884, 0.9837, 0.9802, 0.9779, 0.9764, 0.9758, 0.9759, 0.9765, 0.9775, 0.9788, 0.9804, 0.9822, 0.984, 0.9859, 0.9877, 0.9895, 0.9912, 0.9928, 0.9942, 0.9955, 0.9967, 0.9978, 0.9987, 0.9994, 1.0001, 1.0006, 1.001, 1.0013, 1.0015, 1.0017, 1.0017, 1.0018, 1.0018, 1.0017, 1.0016, 1.0015, 1.0014, 1.0013, 1.0011, 1); --spring-pop-move-y-ms: 712ms; } /* springs:end */ .pop { --pop-corner: 0px; --pop-from-x: var(--pop-start-x, 0.2); --pop-from-y: var(--pop-start-y, 0.2); --pop-width: var(--spring-pop-width); --pop-width-ms: var(--spring-pop-width-ms); --pop-height: var(--spring-pop-height); --pop-height-ms: var(--spring-pop-height-ms); --pop-move-x: var(--spring-pop-move-x); --pop-move-x-ms: var(--spring-pop-move-x-ms); --pop-move-y: var(--spring-pop-move-y); --pop-move-y-ms: var(--spring-pop-move-y-ms); --pop-round: 50%; --pop-round-ms: 280ms; --pop-blur: 6px; --pop-blur-ms: 230ms; --pop-fade-ms: 150ms; --pop-exit: on; --pop-exit-ms: 80ms; --pop-exit-scale: 0.6; --pop-exit-blur: 5px; --pop-r: var(--pop-corner); border-radius: var(--pop-r); /* The pivot. No travel: the pivot is where it is at rest; the launched vertical spring (--pop-my overshoots to ~1.33) survives as an 8% swell past full size, in both axes, so the menu still "shoots past". */ transform-origin: var(--pop-anchor-x, 50%) var(--pop-anchor-y, 50%); scale: calc(var(--pop-sx) * max(1, 1 + (var(--pop-my) - 1) * 0.08)) calc(var(--pop-sy) * max(1, 1 + (var(--pop-my) - 1) * 0.08)); animation: pop-width var(--pop-width-ms) var(--pop-width) backwards, pop-height var(--pop-height-ms) var(--pop-height) backwards, pop-move-x var(--pop-move-x-ms) var(--pop-move-x) backwards, pop-move-y var(--pop-move-y-ms) var(--pop-move-y) backwards, pop-round var(--pop-round-ms) cubic-bezier(0.45, 0, 0.55, 1) backwards, pop-blur var(--pop-blur-ms) cubic-bezier(0.45, 0, 0.55, 1) backwards, pop-fade var(--pop-fade-ms) linear backwards; } /* An anchor (or a start size) set on an ancestor reaches the pop but not a pop inside it. */ .pop > * { --pop-anchor-x: initial; --pop-anchor-y: initial; --pop-start-x: initial; --pop-start-y: initial; } @keyframes pop-width { from { --pop-sx: var(--pop-from-x); } } @keyframes pop-height { from { --pop-sy: var(--pop-from-y); } } @keyframes pop-move-x { from { --pop-mx: 0; } } @keyframes pop-move-y { from { --pop-my: 0; } } /* The ellipse holds a while before it squares up (still pill-ended at 167 ms in the recording, square-cornered by ~260 ms). It ends on the underlying --pop-r: the element's --pop-corner. */ @keyframes pop-round { from { --pop-r: var(--pop-round); } 45% { --pop-r: calc(var(--pop-round) * 0.85); } } /* So does the blur: soft through ~170 ms, sharp by ~210 ms. */ @keyframes pop-blur { from { filter: blur(var(--pop-blur)); } 45% { filter: blur(calc(var(--pop-blur) * 0.9)); } } @keyframes pop-fade { from { opacity: 0; } } /* Without linear(), the springs fall back to one overshooting curve. The whole animation is restated with literal curves, so a spring knob an instance sets inline (a linear() it can't play) can't reach it. */ @supports not (animation-timing-function: linear(0, 1)) { .pop { animation: pop-width var(--pop-width-ms) cubic-bezier(0.3, 1.25, 0.5, 1) backwards, pop-height var(--pop-height-ms) cubic-bezier(0.3, 1.25, 0.5, 1) backwards, pop-move-x var(--pop-move-x-ms) cubic-bezier(0.3, 1.25, 0.5, 1) backwards, pop-move-y var(--pop-move-y-ms) cubic-bezier(0.3, 1.25, 0.5, 1) backwards, pop-round var(--pop-round-ms) cubic-bezier(0.45, 0, 0.55, 1) backwards, pop-blur var(--pop-blur-ms) cubic-bezier(0.45, 0, 0.55, 1) backwards, pop-fade var(--pop-fade-ms) linear backwards; } } /* Reduced motion: a plain fade in (and out, ffi/pop.mjs). */ @media (prefers-reduced-motion: reduce) { .pop { animation: pop-fade 160ms ease backwards; } } .pill { border: none; font: inherit; cursor: pointer; } /* iOS DueBadgePill: bell 16 + 13/500/18 label, 4px icon gap, 8px/4px padding, accentBlue on accentBlueElevated capsule. */ .due-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-full); background: var(--accent-blue-elevated); color: var(--accent-blue); } .due-pill > .due-pill-label { font-size: var(--text-sm); font-weight: 500; line-height: 18px; letter-spacing: 0; } /* Empty state ("Set alert"): same geometry, neutral/grey capsule. Carried over from feed.css's old .due-pill--empty. */ .due-pill--empty { background: var(--fill-quaternary); color: var(--label-primary); } /* Notifications off (due_pill.view_silenced, 2026-09-24): the toDo card mock's grey pill — background secondary, label-secondary bell and text. Built ahead of its data; nothing renders it until the server says an alert is muted (see the view's doc). */ .due-pill--silenced { background: var(--background-secondary); color: var(--label-secondary); } /* Spoken-only text inside a pill (view_silenced's ", notifications off"). */ .due-pill-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .button { display: flex; align-items: center; justify-content: center; background: transparent; border: none; } .button.pill { border-radius: var(--radius-full, 100px); } .button.xl, .button.xxl { padding: var(--sp-sm, 16px) var(--sp-xl, 24px); font-size: var(--text-xl, 18px); } .button.header-control { height: var(--size-xxxl, 44px); width: var(--size-xxxl, 44px); } .button.xl { height: var(--size-4xl, 48px); } .button.xxl { height: var(--size-5xl, 56px); } .button.fullWidth { width: 100%; } .button.destructive, .button.danger { color: var(--accent-red); background: var(--fill-vibrant-secondary); } .button.secondary { color: var(--label-primary); background: var(--fill-vibrant-secondary); } /* ── Sizes (sheet chrome, 2026-10-26 spec §4.4) ────────────────────────── 48px: the sheet footer's actions. A text button carries body regular; an icon button is a 48 disc around a 24 glyph. */ .button--lg { height: 48px; padding: 0 var(--sp-lg); display: inline-flex; align-items: center; justify-content: center; font: var(--type-body); } .button--icon-lg { width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); } .detail-confirm-actions { display: flex; gap: var(--sp-sm); justify-content: flex-end; } .detail-confirm-btn { padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-md); border: none; font-size: 0.9rem; font-weight: 500; cursor: pointer; } .detail-confirm-cancel { background: var(--background-secondary); color: var(--label-primary); } .detail-confirm-cancel:hover { background: var(--background-secondary); } .detail-confirm-delete { background: var(--accent-red); color: white; } .detail-confirm-delete:hover { opacity: 0.9; } /* Phone + OTP authentication screen — centered card on a muted background. */ /* Its own scroller, the height of what is visible (2026-10-27): html/body never scroll (base.css), and an in-app browser tray, or the keyboard up for the code, leaves a few hundred pixels, so a taller step lost its bottom. The card's auto margin centres it, and gives way to the top when it is taller than the screen (align-items: center would push the top off-screen). */ .auth-screen { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: none; display: flex; background: var(--background-secondary); padding: var(--sp-xl); } .auth-card { margin: auto; width: 100%; max-width: 440px; padding: var(--sp-xxl); background: var(--background-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .auth-logo { font-family: var(--font-serif); font-size: var(--text-3xl); font-style: italic; font-weight: 400; text-align: center; margin: 0 0 var(--sp-xs); color: var(--label-primary); } .auth-title { font-size: var(--text-lg); font-weight: 500; text-align: center; color: var(--label-primary); margin: 0 0 var(--sp-xl); } /* Sign-up's heading (2026-10-28): the title with a line of copy under it, the pair keeping the title's 24 above the phone row. */ .auth-heading .auth-title { margin-bottom: var(--sp-xs); } .auth-lead { margin: 0 0 var(--sp-xl); font-size: var(--text-md); line-height: 1.4; text-align: center; color: var(--label-secondary); text-wrap: balance; } .auth-form { display: flex; flex-direction: column; gap: var(--sp-md); } .auth-field { display: flex; flex-direction: column; gap: var(--sp-3xs); } .auth-label { font-size: var(--text-xs); color: var(--label-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .auth-field input, .auth-field-input { padding: var(--sp-sm); border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--background-primary); color: var(--label-primary); font: inherit; outline: none; transition: border-color 0.15s ease; width: 100%; box-sizing: border-box; } .auth-field input:focus, .auth-field-input:focus { border-color: var(--background-secondary); } .auth-error { font-size: var(--text-sm); color: var(--accent-red); text-align: center; margin: 0; } .auth-submit { padding: var(--sp-sm); border: none; border-radius: var(--radius-md); background: var(--background-secondary); color: var(--label-secondary); font-size: var(--text-sm); font-weight: 500; cursor: pointer; margin-top: var(--sp-xs); transition: background 0.15s ease, color 0.15s ease; } .auth-submit:not(:disabled) { background: var(--background-primary-inverse); color: var(--label-inverse-primary); } .auth-submit:disabled { cursor: not-allowed; } /* Phone input */ .auth-phone-input { font-size: var(--text-2xl); text-align: center; letter-spacing: 0.1em; padding: var(--sp-md); border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--background-primary); color: var(--label-primary); font-family: var(--font-sans); width: 100%; box-sizing: border-box; } .auth-phone-input:focus { border-color: var(--background-secondary); outline: none; } .auth-phone-row { display: flex; gap: 8px; width: 100%; } .auth-country-button { display: flex; align-items: center; gap: 6px; padding: 0 var(--sp-md); border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--background-primary); cursor: pointer; font: inherit; white-space: nowrap; } .auth-country-button:hover { background: var(--background-secondary); } .auth-country-flag { font-size: 18px; line-height: 1; } .auth-country-code { font-weight: 500; } .auth-country-caret { font-size: 10px; opacity: 0.6; } .auth-phone-row .auth-phone-input { flex: 1; min-width: 0; } .auth-country-picker { position: relative; margin-top: 8px; border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--background-primary); max-height: 300px; overflow: hidden; display: flex; flex-direction: column; z-index: 10; } .auth-country-search { padding: 10px 12px; border: none; border-bottom: 1px solid var(--border-primary); font: inherit; outline: none; background: transparent; } .auth-country-list { overflow-y: auto; overscroll-behavior: none; flex: 1; } .auth-country-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: none; background: transparent; cursor: pointer; font: inherit; text-align: left; } .auth-country-row:hover { background: var(--background-secondary); } .auth-country-row-flag { font-size: 18px; line-height: 1; } .auth-country-row-name { flex: 1; } .auth-country-row-code { opacity: 0.6; } /* OTP display */ .auth-otp-wrapper { position: relative; } /* "Sent to" and the number, one line under "Enter the code" (Julian's mocks, 2026-10-30; the number had its own line under the lead). */ .auth-otp-subtitle { margin: 0 0 var(--sp-xl); } /* Over the boxes, so a tap on them lands in the field. */ .auth-otp-hidden-input { position: absolute; z-index: 1; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 24px; } .auth-otp-display { display: flex; gap: var(--sp-sm); justify-content: center; } .auth-otp-box { width: 48px; height: 56px; border: 2px solid var(--border-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); font-weight: 500; color: var(--label-primary); background: var(--background-primary); } .auth-otp-box-active { border-color: var(--background-secondary); } .auth-resend { font-size: var(--text-sm); color: var(--label-tertiary); text-align: center; margin-top: var(--sp-sm); } .auth-resend-btn { background: none; border: none; color: var(--label-secondary); cursor: pointer; font: inherit; padding: 0; } .auth-resend-btn:hover:not(:disabled) { text-decoration: underline; } /* "Resend code in Ns": dimmed while the cooldown runs. */ .auth-resend-btn:disabled { color: var(--label-tertiary); cursor: default; } /* Interest picker */ .auth-interest-form { gap: var(--sp-md); } .auth-subtitle { font-size: var(--text-sm); color: var(--label-tertiary); text-align: center; margin: 0 0 var(--sp-xs); } .auth-interest-grid { display: flex; flex-wrap: wrap; gap: var(--sp-xs); justify-content: center; min-height: 80px; } .auth-interest-loading { text-align: center; color: var(--label-tertiary); font-size: var(--text-sm); padding: var(--sp-xl) 0; } .auth-interest-chip { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-primary); background: transparent; color: var(--label-primary); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .auth-interest-chip:hover { background: var(--background-secondary); } .auth-interest-chip.selected { background: var(--background-primary-inverse); color: var(--label-inverse-primary); border-color: var(--background-primary-inverse); } .auth-interest-hint { font-size: var(--text-xs); color: var(--label-tertiary); text-align: center; margin: 0; } .auth-interest-buttons { display: flex; gap: var(--sp-sm); } .auth-interest-buttons .auth-submit { flex: 1; margin-top: 0; } .auth-submit-secondary { background: transparent; color: var(--label-primary); border: 1px solid var(--border-primary); } .auth-submit-secondary:hover:not(:disabled) { background: var(--background-secondary); } /* Back link */ .auth-back { display: flex; align-items: center; gap: var(--sp-3xs); font-size: var(--text-sm); color: var(--label-primary); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: var(--sp-md); } .auth-back:hover { color: var(--label-primary); } /* The name step (iOS's NameEntryView, 2026-10-29), in the card: "Your Name" with its line under it, the "Full Name" label over the field, and a plain-text "I already have an account" under Continue. Phones lay it out the landing's way (the block at the end). */ .auth-name-title { margin: 0; } .auth-name-subtitle { margin: 0; font-size: var(--text-md); line-height: 1.4; color: var(--label-secondary); text-wrap: balance; } .auth-name-field { display: flex; flex-direction: column; gap: var(--sp-3xs); } .auth-name-label { font-size: var(--text-sm); color: var(--label-secondary); } .auth-have-account { align-self: center; padding: var(--sp-3xs) 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--label-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .auth-have-account:hover { color: var(--label-primary); } } /* "Creating your account…" (iOS's CreatingAccountView, 2026-10-29), in the card: a spinner over the line, or the warning sign, the title and the message over Try again and a plain-text Start over, all centred. Phones lay it out the landing's way (the block at the end). */ .auth-creating { align-items: center; text-align: center; } .auth-creating-copy { display: flex; flex-direction: column; gap: var(--sp-xs); } .auth-creating-title { margin: 0; } .auth-creating-art { display: inline-flex; color: var(--label-secondary); } /* iOS's large ProgressView, as a ring: 36 across. The landings' spinner (Google or Apple starting) is the same ring. */ .auth-creating-spinner, .sign-up-actions-spinner { box-sizing: border-box; width: 36px; height: 36px; border: 3px solid var(--label-tertiary); border-top-color: transparent; border-radius: 50%; animation: auth-creating-spin 800ms linear infinite; } .auth-creating-message { margin: 0; font-size: var(--text-md); line-height: 1.4; color: var(--label-secondary); text-wrap: balance; } .auth-creating .auth-submit { align-self: stretch; } @keyframes auth-creating-spin { to { transform: rotate(360deg); } } /* Under reduced motion the ring turns slowly rather than not at all: a still ring reads as stuck. */ @media (prefers-reduced-motion: reduce) { .auth-creating-spinner, .sign-up-actions-spinner { animation-duration: 2400ms; } } /* ── The sign-up landing (Julian's 1440 mock, 2026-10-28; app/auth view_sign_up_landing). Its own scroller like .auth-screen (html/body never scroll). The bar: the wordmark at 35 and Login, 24 down and 64 in. The carousel: 640 wide, each slide 432 tall, scroll-snapped, the scrollbar hidden; a pill per slide 28 under it, the title 28 under those, the three 392×48 pills 28 under the title with 10 between. Phones: 16 gutters, a 300 slide, a 32 title, full-width buttons. ── */ .sign-up { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: none; display: flex; flex-direction: column; background: var(--background-secondary); color: var(--label-primary); } .sign-up-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px 64px; } .sign-up-wordmark { display: inline-flex; color: var(--label-primary); } .sign-up-login { font-size: var(--text-xl); font-weight: 600; line-height: 1.25; color: var(--accent-blue); text-decoration: none; } .sign-up-main { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; padding: 0 16px 48px; } .sign-up-carousel { width: 100%; max-width: 640px; display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .sign-up-carousel::-webkit-scrollbar { display: none; } .sign-up-slide { flex: 0 0 100%; height: 432px; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; /* The art sizes itself against the slide (cq units), and the art's behind-fades (z-index -1) stay inside the slide, over the page. */ container-type: size; isolation: isolate; } /* The slides' art (Julian's "Carousel - " set, 2026-10-28: seven PNGs at 2x, 786×844 for a 393×422 slot, alpha), one per slide in index order, at /icons/sign-up/slide-.png on .sign-up-slide-art--. The box IS the picture — contained in its slide: at its own size on the 640×432 desktop slide, scaled to the phone's — so the fades below, in percent of the box, land on the art wherever it is drawn. Slide 4 is a px off 393 wide; slide 2 is its own canvas (below). */ .sign-up-slide-art { --sign-up-art-w: 393; --sign-up-art-h: 422; position: relative; width: min( 100cqw, 100cqh * var(--sign-up-art-w) / var(--sign-up-art-h) ); aspect-ratio: var(--sign-up-art-w) / var(--sign-up-art-h); background: center / 100% 100% no-repeat; } /* A slide in pieces: each layer is the box, one PNG each, exported on the slide's own canvas so they register without offsets; in tree order the later piece paints over the earlier one and over its scrim. */ .sign-up-slide-layer { position: absolute; inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; } .sign-up-slide-art--1 { background-image: url("/icons/sign-up/slide-1.png"); } /* Slide 2 in two pieces (Julian's "Slide 2 - Phone" / "- Camera" exports, 2026-10-30, on a 424×449 canvas at 2x): the phone with the + menu, the camera over it. */ .sign-up-slide-art--2 { --sign-up-art-w: 424; --sign-up-art-h: 449; } .sign-up-slide-layer--2-phone { background-image: url("/icons/sign-up/slide-2-phone.png"); } .sign-up-slide-layer--2-camera { background-image: url("/icons/sign-up/slide-2-camera.png"); } .sign-up-slide-art--3 { background-image: url("/icons/sign-up/slide-3.png"); } .sign-up-slide-art--4 { --sign-up-art-w: 392; background-image: url("/icons/sign-up/slide-4.png"); } /* The phone's scrim (Julian's Figma frame, 2026-10-30, measured from his screenshot: 424×449, the L of a blurred rectangle along the phone's top and left edges, under the camera). Each band's soft edge bows on Julian's ellipse — "the ellipses define the bow of each band's soft edge, like the other slides' bands": the wide one, 565×143.5 centred 27 above the frame's top at x 226, bows the top band 14 deeper in the middle than at the phone's corners; the tall one, 147×709 centred 190 down at x 40, bows the left band 11 further in at its middle than at the foot. The measured falloff (solid for 13 from the phone's edge, half-way at 46, gone by 86) rides the ellipse: the half-way level IS the ellipse's edge (the wide one's foot is 45 down in the middle), so each gradient's shape is that ellipse scaled to where the band is gone, and the stops are the same curve in percent of it. Both are the page's own colour, so they follow the theme; the camera layer, after this one, paints over them. */ .sign-up-slide-layer--2-phone::before, .sign-up-slide-layer--2-phone::after { content: ""; position: absolute; inset: 0; } /* Top: the wide ellipse, ×1.575 (445×113 at 226, −27). */ .sign-up-slide-layer--2-phone::before { background: radial-gradient( ellipse 104.95% 25.17% at 53.3% -6.01%, var(--sign-up-fade) 35.4%, color-mix(in srgb, var(--sign-up-fade) 95%, transparent) 38.9%, color-mix(in srgb, var(--sign-up-fade) 92%, transparent) 42.5%, color-mix(in srgb, var(--sign-up-fade) 88%, transparent) 45.1%, color-mix(in srgb, var(--sign-up-fade) 83%, transparent) 48.7%, color-mix(in srgb, var(--sign-up-fade) 78%, transparent) 52.2%, color-mix(in srgb, var(--sign-up-fade) 71%, transparent) 55.8%, color-mix(in srgb, var(--sign-up-fade) 64%, transparent) 58.4%, color-mix(in srgb, var(--sign-up-fade) 56%, transparent) 61.9%, color-mix(in srgb, var(--sign-up-fade) 48%, transparent) 65.5%, color-mix(in srgb, var(--sign-up-fade) 40%, transparent) 69%, color-mix(in srgb, var(--sign-up-fade) 32%, transparent) 72.6%, color-mix(in srgb, var(--sign-up-fade) 22%, transparent) 77%, color-mix(in srgb, var(--sign-up-fade) 16%, transparent) 80.5%, color-mix(in srgb, var(--sign-up-fade) 12%, transparent) 84.1%, color-mix(in srgb, var(--sign-up-fade) 8%, transparent) 87.6%, color-mix(in srgb, var(--sign-up-fade) 4%, transparent) 92%, color-mix(in srgb, var(--sign-up-fade) 2%, transparent) 95.6%, transparent ); } /* Left: the tall ellipse, ×1.446 (106.6×512.6 at 40.4, 190). */ .sign-up-slide-layer--2-phone::after { background: radial-gradient( ellipse 25.14% 114.17% at 9.53% 42.32%, var(--sign-up-fade) 31.5%, color-mix(in srgb, var(--sign-up-fade) 95%, transparent) 35.3%, color-mix(in srgb, var(--sign-up-fade) 92%, transparent) 39%, color-mix(in srgb, var(--sign-up-fade) 88%, transparent) 41.8%, color-mix(in srgb, var(--sign-up-fade) 83%, transparent) 45.6%, color-mix(in srgb, var(--sign-up-fade) 78%, transparent) 49.3%, color-mix(in srgb, var(--sign-up-fade) 71%, transparent) 53%, color-mix(in srgb, var(--sign-up-fade) 64%, transparent) 55.9%, color-mix(in srgb, var(--sign-up-fade) 56%, transparent) 59.6%, color-mix(in srgb, var(--sign-up-fade) 48%, transparent) 63.4%, color-mix(in srgb, var(--sign-up-fade) 40%, transparent) 67.1%, color-mix(in srgb, var(--sign-up-fade) 32%, transparent) 70.9%, color-mix(in srgb, var(--sign-up-fade) 22%, transparent) 75.6%, color-mix(in srgb, var(--sign-up-fade) 16%, transparent) 79.3%, color-mix(in srgb, var(--sign-up-fade) 12%, transparent) 83.1%, color-mix(in srgb, var(--sign-up-fade) 8%, transparent) 86.9%, color-mix(in srgb, var(--sign-up-fade) 4%, transparent) 91.6%, color-mix(in srgb, var(--sign-up-fade) 2%, transparent) 95.3%, transparent ); } .sign-up-slide-art--5 { background-image: url("/icons/sign-up/slide-5.png"); } .sign-up-slide-art--6 { background-image: url("/icons/sign-up/slide-6.png"); } .sign-up-slide-art--7 { background-image: url("/icons/sign-up/slide-7.png"); } /* The art's fades, from Julian's scrim frames (2026-10-30, five 393×422 frames measured off his screenshots, one or two ellipses each): the slides' edges melt into the page, the band's soft edge bowing on the ellipse as on slide 2's L. The half-way level IS the ellipse's edge, so each gradient is that ellipse scaled to where the band is gone, and the stops are the measured falloff in percent of it. Three bands recur: - top (3, 4, 6): the ellipse 565 (3) or 586 (4, 6) wide, 147 tall, centred 13 below the frame's top — solid to 45, half-way at 86, gone by 123; - bottom (1, 4, 6): the same ellipse centred 36 below the foot — 97% at the foot, half-way at 34, gone by 72; - Collections' bottom (5): centred 4 below the foot — solid to 33, half-way at 66, gone by 104. Under each bottom band a solid foot of 4 art px, melting over 8: the ellipse's bow leaves the foot's sides short of solid and the phones' bezels showed through there (measured 2026-10-30). Each band is the page's own colour, so it follows the theme. ::after sits over the art; ::before at z-index -1 behind it, where only the art's clear pixels show it (Share's top, behind its phone). Slide 2 has its own L on its phone layer; slide 7 has none. */ .sign-up-slide-art { --sign-up-fade: var(--background-secondary); --sign-up-fade-top: radial-gradient( ellipse 107.57% 26.07% at 50% 3.08%, var(--sign-up-fade) 29.1%, color-mix(in srgb, var(--sign-up-fade) 98%, transparent) 32.7%, color-mix(in srgb, var(--sign-up-fade) 97%, transparent) 36.4%, color-mix(in srgb, var(--sign-up-fade) 95%, transparent) 40.0%, color-mix(in srgb, var(--sign-up-fade) 91%, transparent) 43.6%, color-mix(in srgb, var(--sign-up-fade) 87%, transparent) 47.3%, color-mix(in srgb, var(--sign-up-fade) 82%, transparent) 50.9%, color-mix(in srgb, var(--sign-up-fade) 76%, transparent) 54.5%, color-mix(in srgb, var(--sign-up-fade) 69%, transparent) 58.2%, color-mix(in srgb, var(--sign-up-fade) 61%, transparent) 61.8%, color-mix(in srgb, var(--sign-up-fade) 52%, transparent) 65.5%, color-mix(in srgb, var(--sign-up-fade) 43%, transparent) 69.1%, color-mix(in srgb, var(--sign-up-fade) 35%, transparent) 72.7%, color-mix(in srgb, var(--sign-up-fade) 28%, transparent) 76.4%, color-mix(in srgb, var(--sign-up-fade) 21%, transparent) 80.0%, color-mix(in srgb, var(--sign-up-fade) 15%, transparent) 83.6%, color-mix(in srgb, var(--sign-up-fade) 10%, transparent) 87.3%, color-mix(in srgb, var(--sign-up-fade) 7%, transparent) 90.9%, color-mix(in srgb, var(--sign-up-fade) 4%, transparent) 94.5%, color-mix(in srgb, var(--sign-up-fade) 1%, transparent) 98.2%, transparent ); --sign-up-fade-top-wide: radial-gradient( ellipse 111.57% 26.07% at 50% 3.08%, var(--sign-up-fade) 29.1%, color-mix(in srgb, var(--sign-up-fade) 98%, transparent) 32.7%, color-mix(in srgb, var(--sign-up-fade) 97%, transparent) 36.4%, color-mix(in srgb, var(--sign-up-fade) 95%, transparent) 40.0%, color-mix(in srgb, var(--sign-up-fade) 91%, transparent) 43.6%, color-mix(in srgb, var(--sign-up-fade) 87%, transparent) 47.3%, color-mix(in srgb, var(--sign-up-fade) 82%, transparent) 50.9%, color-mix(in srgb, var(--sign-up-fade) 76%, transparent) 54.5%, color-mix(in srgb, var(--sign-up-fade) 69%, transparent) 58.2%, color-mix(in srgb, var(--sign-up-fade) 61%, transparent) 61.8%, color-mix(in srgb, var(--sign-up-fade) 52%, transparent) 65.5%, color-mix(in srgb, var(--sign-up-fade) 43%, transparent) 69.1%, color-mix(in srgb, var(--sign-up-fade) 35%, transparent) 72.7%, color-mix(in srgb, var(--sign-up-fade) 28%, transparent) 76.4%, color-mix(in srgb, var(--sign-up-fade) 21%, transparent) 80.0%, color-mix(in srgb, var(--sign-up-fade) 15%, transparent) 83.6%, color-mix(in srgb, var(--sign-up-fade) 10%, transparent) 87.3%, color-mix(in srgb, var(--sign-up-fade) 7%, transparent) 90.9%, color-mix(in srgb, var(--sign-up-fade) 4%, transparent) 94.5%, color-mix(in srgb, var(--sign-up-fade) 1%, transparent) 98.2%, transparent ); --sign-up-fade-bottom: radial-gradient( ellipse 106.10% 25.71% at 50% 108.65%, color-mix(in srgb, var(--sign-up-fade) 97%, transparent) 36.4%, color-mix(in srgb, var(--sign-up-fade) 94%, transparent) 40.1%, color-mix(in srgb, var(--sign-up-fade) 90%, transparent) 43.8%, color-mix(in srgb, var(--sign-up-fade) 85%, transparent) 47.5%, color-mix(in srgb, var(--sign-up-fade) 80%, transparent) 51.2%, color-mix(in srgb, var(--sign-up-fade) 73%, transparent) 54.8%, color-mix(in srgb, var(--sign-up-fade) 66%, transparent) 58.5%, color-mix(in srgb, var(--sign-up-fade) 58%, transparent) 62.2%, color-mix(in srgb, var(--sign-up-fade) 46%, transparent) 65.9%, color-mix(in srgb, var(--sign-up-fade) 40%, transparent) 69.6%, color-mix(in srgb, var(--sign-up-fade) 32%, transparent) 73.3%, color-mix(in srgb, var(--sign-up-fade) 25%, transparent) 77.0%, color-mix(in srgb, var(--sign-up-fade) 19%, transparent) 80.6%, color-mix(in srgb, var(--sign-up-fade) 13%, transparent) 84.3%, color-mix(in srgb, var(--sign-up-fade) 9%, transparent) 88.0%, color-mix(in srgb, var(--sign-up-fade) 5%, transparent) 91.7%, color-mix(in srgb, var(--sign-up-fade) 2%, transparent) 95.4%, transparent ); --sign-up-fade-bottom-wide: radial-gradient( ellipse 110.05% 25.71% at 50% 108.65%, color-mix(in srgb, var(--sign-up-fade) 97%, transparent) 36.4%, color-mix(in srgb, var(--sign-up-fade) 94%, transparent) 40.1%, color-mix(in srgb, var(--sign-up-fade) 90%, transparent) 43.8%, color-mix(in srgb, var(--sign-up-fade) 85%, transparent) 47.5%, color-mix(in srgb, var(--sign-up-fade) 80%, transparent) 51.2%, color-mix(in srgb, var(--sign-up-fade) 73%, transparent) 54.8%, color-mix(in srgb, var(--sign-up-fade) 66%, transparent) 58.5%, color-mix(in srgb, var(--sign-up-fade) 58%, transparent) 62.2%, color-mix(in srgb, var(--sign-up-fade) 46%, transparent) 65.9%, color-mix(in srgb, var(--sign-up-fade) 40%, transparent) 69.6%, color-mix(in srgb, var(--sign-up-fade) 32%, transparent) 73.3%, color-mix(in srgb, var(--sign-up-fade) 25%, transparent) 77.0%, color-mix(in srgb, var(--sign-up-fade) 19%, transparent) 80.6%, color-mix(in srgb, var(--sign-up-fade) 13%, transparent) 84.3%, color-mix(in srgb, var(--sign-up-fade) 9%, transparent) 88.0%, color-mix(in srgb, var(--sign-up-fade) 5%, transparent) 91.7%, color-mix(in srgb, var(--sign-up-fade) 2%, transparent) 95.4%, transparent ); --sign-up-fade-collections: radial-gradient( ellipse 106.24% 25.57% at 50% 100.92%, var(--sign-up-fade) 34.2%, color-mix(in srgb, var(--sign-up-fade) 95%, transparent) 37.9%, color-mix(in srgb, var(--sign-up-fade) 91%, transparent) 41.6%, color-mix(in srgb, var(--sign-up-fade) 87%, transparent) 45.3%, color-mix(in srgb, var(--sign-up-fade) 82%, transparent) 49.0%, color-mix(in srgb, var(--sign-up-fade) 76%, transparent) 52.7%, color-mix(in srgb, var(--sign-up-fade) 69%, transparent) 56.4%, color-mix(in srgb, var(--sign-up-fade) 61%, transparent) 60.1%, color-mix(in srgb, var(--sign-up-fade) 52%, transparent) 63.9%, color-mix(in srgb, var(--sign-up-fade) 43%, transparent) 67.6%, color-mix(in srgb, var(--sign-up-fade) 35%, transparent) 71.3%, color-mix(in srgb, var(--sign-up-fade) 27%, transparent) 75.0%, color-mix(in srgb, var(--sign-up-fade) 21%, transparent) 78.7%, color-mix(in srgb, var(--sign-up-fade) 15%, transparent) 82.4%, color-mix(in srgb, var(--sign-up-fade) 10%, transparent) 86.1%, color-mix(in srgb, var(--sign-up-fade) 7%, transparent) 89.8%, color-mix(in srgb, var(--sign-up-fade) 3%, transparent) 93.5%, color-mix(in srgb, var(--sign-up-fade) 1%, transparent) 97.2%, transparent ); --sign-up-fade-foot: linear-gradient( to top, var(--sign-up-fade) calc(100% * 4 / var(--sign-up-art-h)), transparent calc(100% * 12 / var(--sign-up-art-h)) ); } .sign-up-slide-art--1::after, .sign-up-slide-art--3::after, .sign-up-slide-art--4::before, .sign-up-slide-art--4::after, .sign-up-slide-art--5::after, .sign-up-slide-art--6::before, .sign-up-slide-art--6::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* Top: over the suitcase's icons and the cup's phone; behind Share's. */ .sign-up-slide-art--3::after { background: var(--sign-up-fade-top); } .sign-up-slide-art--4::before, .sign-up-slide-art--6::before { background: var(--sign-up-fade-top-wide); } .sign-up-slide-art--6::before { z-index: -1; } /* Bottom: over the phones of Home, the cup, Collections and Share. */ .sign-up-slide-art--1::after { background: var(--sign-up-fade-foot), var(--sign-up-fade-bottom); } .sign-up-slide-art--4::after, .sign-up-slide-art--6::after { background: var(--sign-up-fade-foot), var(--sign-up-fade-bottom-wide); } .sign-up-slide-art--5::after { background: var(--sign-up-fade-foot), var(--sign-up-fade-collections); } /* The pills follow Apple's timed dotnav (the "Get the highlights" gallery on apple.com/macbook-pro/proled-xdr-display, measured 2026-10-28): 8px dots at a 24 pitch, the current one widening to 48 over 250ms linear, and a fill that grows across it from a hidden 15% nub to 115% over the 6150ms beat, linear, driving the slide's turn. Their track is white at 36% on black; ours is the fill token on the page, and the fill is the brand gradient, mapped to the pill's full width so it never squashes. */ .sign-up-pills { --sign-up-pill-w: 48px; display: flex; align-items: center; /* The buttons' side padding makes the 24 pitch (8 + 16). */ gap: 0; /* 44 tall around the 8 dots: 18 over and under, so the row keeps the dots where the 8-tall row had them (the margins give the 18 back). */ height: 44px; margin-top: 10px; } /* A pill is a button (Julian, 2026-10-28: a tap goes to that slide) with a 44 × 24 hit area around its dot, which is the span inside. */ .sign-up-pill-button { display: inline-flex; align-items: center; padding: 18px 8px; margin: 0; border: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .sign-up-pill { position: relative; display: block; width: 8px; height: 8px; border-radius: 10px; background: var(--fill-vibrant-primary); overflow: hidden; transition: width 250ms linear; } .sign-up-pill--active { width: var(--sign-up-pill-w); } /* The fill box starts 15% left of the pill (the hidden nub) and grows to 115%, so its right edge crosses the pill over the beat. The gradient is the pill's width and is anchored to the PILL's left edge, 15% into the box — anchored to the box it ran out 7px short, and the fill never reached the end (Julian, 2026-10-28). */ .sign-up-pill--active::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; min-width: 15%; margin-left: -15%; border-radius: 10px; background: var(--gradient-pastel-horizontal) calc(var(--sign-up-pill-w) * 0.15) 0 / var(--sign-up-pill-w) 8px no-repeat; animation: sign-up-progress 6150ms linear forwards; } @keyframes sign-up-progress { from { width: 0; } to { width: 115%; } } /* A new beat on the same pill (a tap on the current one, Julian, 2026-10-29) must start the fill over, but an element that keeps its class keeps its running animation. So odd generations wear these identical keyframes under another name (auth.gleam), and a changed animation-name starts from the beginning. The pill itself is untouched, so its widening transition stays. */ .sign-up-pill--beat-b::after { animation-name: sign-up-progress-b; } @keyframes sign-up-progress-b { from { width: 0; } to { width: 115%; } } /* Autoplay paused (auth.gleam `autoplay`, Julian, 2026-10-29): no beat, so no fill to run — the current pill is simply full, as under reduced motion below. */ .sign-up-pills--paused .sign-up-pill--active::after { animation: none; width: 115%; } /* No autoplay under reduced motion (carousel.mjs), so no fill to run: the current pill is simply full. */ @media (prefers-reduced-motion: reduce) { .sign-up-pill { transition: none; } .sign-up-pill--active::after { animation: none; width: 115%; } } /* The title stack: the leaving and arriving titles share one grid cell, so the block is as tall as the taller of the two. On a turn the leaving title scrolls 16 and fades out first (260ms); only then does the next scroll 16 in from the other side and fade in (420ms, delayed by the leaving's whole run, so the two never share the cell — Julian, 2026-10-28: "time the outgoing title to not collide with the incoming"). Downward for next, upward for previous. Reduced motion keeps the fades alone, in the same order. */ .sign-up-title-stack { display: grid; /* 28 under the dots: the pills' buttons already hold 18. */ padding: 0 16px; } .sign-up-title { grid-area: 1 / 1; margin: 0; font: 700 40px/1.2 var(--font-sans); letter-spacing: var(--tracking-body); text-align: center; color: var(--label-primary); text-wrap: balance; } .sign-up-title--in-down, .sign-up-title--in-up { animation: 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 260ms both; } .sign-up-title--out-down, .sign-up-title--out-up { animation: 260ms ease-in both; pointer-events: none; } .sign-up-title--in-down { animation-name: sign-up-title-in-down; } .sign-up-title--out-down { animation-name: sign-up-title-out-down; } .sign-up-title--in-up { animation-name: sign-up-title-in-up; } .sign-up-title--out-up { animation-name: sign-up-title-out-up; } @keyframes sign-up-title-in-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } } @keyframes sign-up-title-out-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px); } } @keyframes sign-up-title-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes sign-up-title-out-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-16px); } } @keyframes sign-up-title-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sign-up-title-fade-out { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sign-up-title--in-down, .sign-up-title--in-up { animation-name: sign-up-title-fade-in; } .sign-up-title--out-down, .sign-up-title--out-up { animation-name: sign-up-title-fade-out; } } .sign-up-actions { width: 100%; max-width: 392px; margin-top: 28px; display: flex; flex-direction: column; gap: 10px; } /* Google or Apple starting (iOS SignInView's isLoading, 2026-10-29): the ring where the pills are, the pills kept unseen so nothing moves. */ .sign-up-actions--pending { position: relative; } .sign-up-actions--pending .sign-up-cta { visibility: hidden; } .sign-up-actions-spinner { position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px; } /* A failed Google or Apple sign-in, under the pills (a cancel says nothing). */ .sign-up-error { width: 100%; max-width: 392px; margin-top: 12px; text-wrap: balance; } .sign-up-cta { height: 48px; margin: 0; padding: 0 var(--sp-lg); border: 0; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--background-primary); color: var(--label-primary); font-family: inherit; font-size: var(--text-2xl); font-weight: 500; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; } .sign-up-cta--phone .icon { color: var(--accent-blue); } /* Apple's mark on its own ink: black on light, white on dark. */ .sign-up-cta--apple { background: var(--label-primary); color: var(--background-primary); } .sign-up-cta-icon, .sign-up-cta .icon { width: 24px; height: 24px; } /* Phones: no bar, and the carousel takes what the stack leaves: the pills 16 under it, the title 28 under those, the three pills 24 under the title with 8 between, 20.5 over the foot plus the home indicator's inset. A short screen scrolls. The title and the pills are sign-in's 393 mock (Julian, 2026-10-30: one framework for both doors — 600 33/41, 310-wide pills at 19/400 with 22 marks), and the carousel is 79.22vw wide (Julian, 2026-10-30: carousels and hero art on phones), 311 at 393, instead of the 10-28 mock's full bleed. */ @media (max-width: 834px) { .sign-up { background: radial-gradient(60% 220px at 38% -40px, var(--link-page-glow-1), transparent 100%), radial-gradient(55% 240px at 70% -60px, var(--link-page-glow-2), transparent 100%), var(--background-secondary); background-repeat: no-repeat; } .sign-up-bar { display: none; } /* The screen's height, not more: a failed Google or Apple sign-in's line under the pills (2026-10-29) takes its room from the art, which gives way down to its floor (iOS's VStack does the same); past that floor a short screen scrolls. */ .sign-up-main { height: 100dvh; min-height: 100dvh; padding: 0; padding-bottom: calc(20.5px + var(--phone-bottom-inset)); } /* The art at 79.22vw, under the status bar; the slot takes what the stack leaves, the art anchored to its foot (Julian, 2026-10-30: it sat at the top before), so it stays by the pills. Its floor is 240 or 34% of the screen, the smaller (2026-11-06): an SE in a browser tab (375×561) left Continue with Apple under the toolbar at a flat 240, and the art fits whatever slot it gets (.sign-up-slide-art). */ .sign-up-carousel { flex: 1 1 auto; min-height: min(240px, 34dvh); max-width: none; width: 100dvw; margin: 0 auto; } .sign-up-slide { height: auto; align-items: flex-end; } .sign-up-pills { /* 16 under the art, less the buttons' 18. */ margin-top: -2px; } .sign-up-title { font: 600 33px/41px var(--font-sans); } .sign-up-actions { padding: 0 16px; gap: 8px; } .sign-up-cta { font-size: 19px; font-weight: 400; } .sign-up-cta-icon, .sign-up-cta .icon { width: 22px; height: 22px; } } /* ── Desktop (Julian's mocks, 2026-10-29; app/auth view_sign_up_landing, view_sign_in_landing and view_card), measured off their 1440×1024 frames. The page on the canvas grey, the bar as above with Login at 20. No carousel on desktop: `/sign-up` shows one still picture, the app on a laptop and a phone (desktop-hero.png, 640×449 from 80 down), `/sign-in` the icon cluster (hero.png, 430×456 from 73 down); iOS's large title, 34/44 at 600, on two lines; the three 392×48 pills 8 apart from 685, their labels 19 at 500 and their marks 22. The phone step, both doors, drops the card: the bar's flag pill where Login was; the title and a 60-tall glass row (the flag, 88 wide, and the number at 32) where the picture was; Google and Apple exactly where the landing's last two pills sit, under a 21 line of copy. Enter sends the code (Continue stays in the form, unseen). Phones see none of it. ── */ .sign-up-hero, .auth-step-title, .auth-flag-pill, .auth-country-chevron, .auth-alt { display: none; } /* The row and its picker: the form's own gap between them. */ .auth-phone-field { display: flex; flex-direction: column; gap: var(--sp-md); } /* The auth glow (2026-10-29): Home's header glow (phone_shell.css: the green, blue and pink ellipse, full width), breathing as Home's does (its glow-breathe, 3.6 s up 24 and back). Since 2026-10-30 it is its own element, `.auth-glow` (app/auth glow, first in every auth screen and in priming), not a pseudo-element in the background: it layers OVER the art like a scrim (Julian: "that way we can adjust which layers it obscures or not"). `--auth-glow-z` is that dial, per screen or per theme: 2 (the default) sits over the art and the copy, -1 behind everything. The chrome — the bar, the phone headers — is always above it. Each width gives the ellipse its place. */ .sign-up, .auth-screen, .priming { position: relative; isolation: isolate; } .auth-glow { --auth-glow-z: 2; position: absolute; z-index: var(--auth-glow-z); left: 0; right: 0; top: calc(var(--phone-top-inset) - 165px); height: 170px; border-radius: 50%; background: radial-gradient( ellipse closest-side, var(--home-glow-green) 0%, var(--home-glow-blue) 51%, var(--home-glow-pink) 100% ); opacity: var(--home-glow-opacity); filter: blur(16px); pointer-events: none; animation: glow-breathe 3.6s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; } .sign-up-bar, .auth-nav-bar { position: relative; z-index: 3; } @media (prefers-reduced-motion: reduce) { .auth-glow { animation: none; } } @media (min-width: 835px) { .sign-up, .auth-screen--phone, .auth-screen--otp { background: var(--background-secondary); } /* The glow on desktop too (Julian, 2026-10-29: "add our breathing gradient for desktop views as well"), under the bar: the screen's width, 240 tall, its foot 44 down, blurred 24 — the phones' soft band at 1440. */ .auth-glow { top: -196px; height: 240px; filter: blur(24px); } .sign-up-bar { padding: 18px 64px 30px; } /* The phone step's bar keeps the 84 its flag pill gave it (the pill went 2026-10-29: the row carries the flag), so its column stays where the mock put it. */ .auth-screen--phone .sign-up-bar { min-height: 84px; } .sign-up-login { font-size: 20px; } .sign-up-main { padding-top: 70px; } .sign-up-carousel, .sign-up-pills, .sign-up-title-stack { display: none; } .sign-up-hero { display: flex; flex-direction: column; align-items: center; } .sign-up-hero-art { width: 380px; height: 362px; background: url("/icons/sign-up/hero.png") center / contain no-repeat; } /* `/sign-up`'s devices (desktop-hero.png, 1280×898 at 2x: the laptop's base 600 wide as in the mock): 80 down (the main's 70 less 74, its top 14 of air under the bar), 45 over the title, so the title and the pills sit where the cluster's do. */ .sign-up-hero--devices { margin-top: -74px; } .sign-up-hero--devices .sign-up-hero-art { width: 640px; height: 449px; background-image: url("/icons/sign-up/desktop-hero.png"); } .sign-up-hero--devices .sign-up-hero-title { margin-top: 45px; } /* `/sign-in`'s cluster, Julian's export (471×500, transparent, the ink 403×382 at 34/94): at the mock's 366 ink wide the box is 430×456, 73 down (the main's 70 less 81), 45 over the title, so the title and the pills sit where sign-up's do. */ .sign-up--login .sign-up-hero { margin-top: -81px; } .sign-up--login .sign-up-hero-art { width: 430px; height: 456px; } .sign-up--login .sign-up-hero-title { margin-top: 45px; } .sign-up-hero-title, .auth-screen--phone .auth-step-title { margin: 0; font: 600 34px/41px var(--font-sans); text-align: center; color: var(--label-primary); } .sign-up-hero-title { margin-top: 58px; line-height: 44px; } .sign-up-actions { margin-top: 24px; gap: 8px; } .sign-up-cta { font-size: 19px; } .sign-up-cta-icon, .sign-up-cta .icon { width: 22px; height: 22px; } /* The phone step: no card, the bar over the column. */ .auth-screen--phone { flex-direction: column; padding: 0; } .auth-screen--phone .auth-card { margin: 0 auto; padding: 70px 0 48px; max-width: 464px; background: none; border: 0; border-radius: 0; box-shadow: none; } .auth-screen--phone .auth-logo, .auth-screen--phone .auth-heading, .auth-screen--phone .auth-country-code, .auth-screen--phone .auth-country-caret { display: none; } .auth-screen--phone .auth-form { gap: 0; } .auth-screen--phone .auth-step-title { display: block; margin-top: 150px; } /* A Google or Apple sign-up waiting on the number (iOS's socialSubtitle, 2026-10-29). No mock: the alt caption's 21, in the secondary ink, 8 under the title. */ .auth-screen--phone .auth-phone-subtitle { margin: 8px 0 0; font: 400 21px/1.25 var(--font-sans); color: var(--label-secondary); } .auth-screen--phone .auth-phone-field { position: relative; margin-top: 26px; } .auth-screen--phone .auth-phone-row { gap: 10px; } /* The row's pills: glass.css's recipe, thin, written out (phones write their own pill). */ .auth-screen--phone .auth-country-button, .auth-screen--phone .auth-phone-input { border: 0; border-radius: var(--radius-full); background: var(--glass-tint), linear-gradient(var(--material-thin-1), var(--material-thin-1)), linear-gradient(var(--material-thin-2), var(--material-thin-2)); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); box-shadow: var(--glass-rim), var(--glass-shadow); color: var(--label-primary); } .auth-screen--phone .auth-phone-input:focus { box-shadow: var(--glass-rim), 0 0 0 2px var(--accent-blue), var(--glass-shadow); } .auth-screen--phone .auth-country-button { flex-shrink: 0; width: 88px; height: 60px; padding: 0; justify-content: center; gap: 8px; } .auth-screen--phone .auth-country-flag { font-size: 32px; line-height: 1; } .auth-country-chevron { color: var(--label-secondary); } .auth-screen--phone .auth-country-chevron { display: inline-flex; } .auth-screen--phone .auth-country-chevron .icon { width: 20px; height: 20px; } .auth-screen--phone .auth-phone-input { height: 60px; padding: 0 16px; font-size: 32px; text-align: left; letter-spacing: normal; } /* Drops over what follows, from the row's foot. */ .auth-screen--phone .auth-country-picker { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; box-shadow: var(--shadow); } .auth-screen--phone .auth-error { margin-top: var(--sp-md); } /* Continue, the row's width, 24 under it (Julian's mock, 2026-11-05: the step gave no sign it could go on — Continue was in the form, unseen, for Enter): the phones' 48 pill, dimmed until the number is whole, then white with the label in the accent. */ .auth-screen--phone .auth-submit { width: 100%; height: 48px; margin: 24px 0 0; padding: 0; border-radius: var(--radius-full); background: var(--fill-quaternary); color: var(--label-tertiary); font: 400 19px/1 var(--font-sans); } .auth-screen--phone .auth-submit:not(:disabled) { background: var(--background-primary); color: var(--accent-blue); box-shadow: var(--shadow); } /* Google and Apple stay on the landing's last two pills: the 252 the row's foot gave them, less Continue's 72. */ .auth-screen--phone .auth-alt { display: flex; flex-direction: column; align-items: center; margin-top: 180px; } .auth-alt-caption { margin: 0; font-size: 21px; line-height: 1.25; /* The secondary ink (Julian, 2026-10-29): the tertiary all but went in dark mode. */ color: var(--label-secondary); } .auth-alt .sign-up-actions { max-width: 392px; margin-top: 32px; } /* ── The code step (Julian's mock, 2026-11-05) on the phone step's column, no card: the bar over it, "Enter the code we sent to" and the number as two title lines where the phone step's title sits, the six boxes phones wear (iOS's OTPDigitBoxView: 55×64, 12 round, on glass) 24 under them, Resend as a plain link 32 under the boxes — "Signing in…" in its place while the code is checked — and Back under that. The card's bordered 48×56 boxes went with the card. ── */ .auth-screen--otp { flex-direction: column; padding: 0; } .auth-screen--otp .sign-up-bar { min-height: 84px; } .auth-screen--otp .auth-card { margin: 0 auto; padding: 70px 0 48px; max-width: 464px; background: none; border: 0; border-radius: 0; box-shadow: none; } .auth-screen--otp .auth-logo, .auth-screen--otp .auth-otp-lead { display: none; } .auth-screen--otp .auth-form { gap: 0; } .auth-screen--otp .auth-otp-title, .auth-screen--otp .auth-otp-subtitle { margin: 0; font: 600 34px/41px var(--font-sans); text-align: center; color: var(--label-primary); } .auth-screen--otp .auth-otp-title { margin-top: 150px; } .auth-screen--otp .auth-otp-wrapper { margin-top: 24px; } .auth-screen--otp .auth-otp-display { gap: 8px; } .auth-screen--otp .auth-otp-box { width: 55px; height: 64px; border: 0; border-radius: 12px; background: var(--glass-tint), linear-gradient(var(--material-thin-1), var(--material-thin-1)), linear-gradient(var(--material-thin-2), var(--material-thin-2)); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); box-shadow: var(--glass-rim), var(--glass-shadow); color: var(--label-primary); font: 600 26px/1 var(--font-sans); font-variant-numeric: tabular-nums; } .auth-screen--otp .auth-otp-box-active { box-shadow: var(--glass-rim), 0 0 0 1px var(--label-tertiary), var(--glass-shadow); } .auth-screen--otp .auth-otp-hidden-input:focus-visible + .auth-otp-display .auth-otp-box-active { box-shadow: var(--glass-rim), 0 0 0 2px var(--accent-blue), var(--glass-shadow); } .auth-screen--otp .auth-error { margin-top: var(--sp-md); } .auth-screen--otp .auth-resend { margin: 32px 0 0; font: 400 17px/22px var(--font-sans); color: var(--label-tertiary); } .auth-screen--otp .auth-resend-btn { color: var(--accent-blue); } .auth-screen--otp .auth-resend-btn:disabled { color: var(--label-tertiary); } .auth-screen--otp .auth-back { justify-content: center; margin: 16px 0 0; font: 400 15px/20px var(--font-sans); color: var(--label-tertiary); } /* ── The name, email and new-password steps (2026-11-06) on the phone step's column, no card — desktop was the last width on the old card: the bar over it, the title where the phone step's sits (34 on 41, 150 under the bar), the line 8 under it in the alt caption's 21, the labelled field (iOS's FormField: the 13 label, a 48 field on glass) 26 under, Continue the column's width 24 under the field — dimmed until it can go on, then white with the label in the accent, as the phone step's — and "I already have an account" (or "Forgot password?") as the ghost pill 8 under it. ── */ :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) { flex-direction: column; padding: 0; background: var(--background-secondary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .sign-up-bar { min-height: 84px; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-card { margin: 0 auto; padding: 70px 0 48px; max-width: 464px; background: none; border: 0; border-radius: 0; box-shadow: none; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-logo { display: none; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-form { gap: 0; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-title { margin: 150px 0 0; font: 600 34px/41px var(--font-sans); text-align: center; color: var(--label-primary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-subtitle { margin: 8px 0 0; font: 400 21px/1.25 var(--font-sans); text-align: center; color: var(--label-secondary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-field, :is(.auth-screen--email, .auth-screen--new-password) .auth-fields { margin-top: 26px; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-field { display: flex; flex-direction: column; gap: 5px; } :is(.auth-screen--email, .auth-screen--new-password) .auth-fields .auth-name-field { margin-top: 0; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-label { font: 400 13px/16px var(--font-sans); color: var(--label-secondary); } /* The field on the row's glass (the phone step's recipe), 48 tall. */ :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-input { height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--glass-tint), linear-gradient(var(--material-thin-1), var(--material-thin-1)), linear-gradient(var(--material-thin-2), var(--material-thin-2)); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); box-shadow: var(--glass-rim), var(--glass-shadow); font: 400 17px/22px var(--font-sans); color: var(--label-primary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-input:focus { outline: none; box-shadow: var(--glass-rim), 0 0 0 2px var(--accent-blue), var(--glass-shadow); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-error { margin-top: var(--sp-md); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-submit { width: 100%; height: 48px; margin: 24px 0 0; padding: 0; border-radius: var(--radius-full); background: var(--fill-quaternary); color: var(--label-tertiary); font: 400 19px/1 var(--font-sans); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-submit:not(:disabled) { background: var(--background-primary); color: var(--accent-blue); box-shadow: var(--shadow); } /* iOS's ghost PillButton: the pill's box, the label in the secondary ink. */ :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-have-account { width: 100%; height: 48px; margin: 8px 0 0; padding: 0; border: 0; border-radius: var(--radius-full); background: none; font: 400 17px/22px var(--font-sans); color: var(--label-secondary); } } /* ── Phones (Julian's 393 mock, 2026-10-29), measured off its 2x frames. `/sign-up` keeps its carousel (the block above). `/sign-in`'s landing (.sign-up--login) is still: the icon cluster (394×418), "Click below to / login to Please." at 33/41 600 and the three pills 310 wide, 8 apart, labels 19 — the stack anchored to the foot, 20.5 over the home indicator's inset, the picture taking what is left above it. The phone step, both doors, drops the card: the phone header (back to the landing, the flag pill trailing), a box per digit under it (the input unseen over them, as the code step does), the title where the landing's sits and Continue where its Apple pill sits. The step is the visual viewport's height (--vvh, dom.mjs), so with the keyboard up its gaps give way and Continue stays in reach. ── */ @media (max-width: 834px) { /* The canvas under the header glow (.auth-glow, above: full width, 170 tall, its foot 5 under the top inset, blurred 16). */ .sign-up--login, .auth-screen--phone, .auth-screen--otp, :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password), .auth-screen--creating { background: var(--background-secondary); } .sign-up--login .sign-up-main { padding-bottom: var(--phone-bottom-inset); } .sign-up--login .sign-up-hero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; /* Edge to edge: the main has no side gutters on a phone (the pills keep their own 16), so the full width is the screen's. It took back 16 a side it no longer had, and that overhang made the page pan sideways by 16 (Julian, Brave, 2026-11-05). */ width: 100%; margin: 0; padding-top: var(--phone-top-inset); /* Down to the art's own floor when something under the pills needs the room (the main is the screen's height). */ min-height: 0; } /* Julian's export (471×500, transparent, the cluster's ink 403×382 at 34/94): at the mock's 337.5 ink wide the box is 394×418, its foot at 481, edge to edge on a 393 phone. */ .sign-up--login .sign-up-hero-art { flex: 0 1 418px; min-height: 160px; /* 79.22vw (Julian, 2026-10-30), 311 at 393; the mock drew it 394. */ width: 79.22vw; background: url("/icons/sign-up/hero.png") center bottom / contain no-repeat; } /* The mock breaks the step's title "Enter your phone / number": no balancing. */ .sign-up--login .sign-up-hero-title, .auth-screen--phone .auth-step-title { margin: 0; font: 600 33px/41px var(--font-sans); text-align: center; color: var(--label-primary); } /* The steps' titles at 34 on 120% (Julian's mocks, 2026-10-30), 80 under the header; their input 24 under the text. */ .auth-screen--phone .auth-step-title, .auth-screen--otp .auth-otp-title { font: 600 34px/1.2 var(--font-sans); } .sign-up--login .sign-up-hero-title { margin-top: 22.5px; } /* The pills as sign-up's (Julian, 2026-10-30: full width, 16 in from the edges, in the block above); only the gap to the title is its own. */ .sign-up--login .sign-up-actions { margin-top: 52px; gap: 8px; } .sign-up--login .sign-up-cta { font-size: 19px; font-weight: 400; } /* The phone, code, name and creating-account steps: the visible height, a column under the header (the last has none). */ .auth-screen--phone, .auth-screen--otp, :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password), .auth-screen--creating { height: var(--vvh, 100dvh); flex-direction: column; padding: 0; } .auth-screen--phone .auth-card, .auth-screen--otp .auth-card, :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-card, .auth-screen--creating .auth-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 0; max-width: none; padding: 0 16px calc(20.5px + var(--phone-bottom-inset)); background: none; border: 0; border-radius: 0; box-shadow: none; } .auth-screen--phone .auth-logo, .auth-screen--phone .auth-heading, .auth-screen--otp .auth-logo, .auth-screen--otp .auth-back, :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-logo, .auth-screen--creating .auth-logo { display: none; } /* The phone step (Julian's 402 mocks, 2026-10-29, second round): the title 75 under the header, the number in one glass pill 32 under it, Continue at the foot (the landing's Apple pill's line). With the keyboard up (--vvh) the space over Continue goes first, then the gap over the title, so Continue rides just over the keyboard. */ .auth-screen--phone .auth-form { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: minmax(16px, 80px) auto auto auto auto minmax(16px, 1fr) auto; gap: 0; } .auth-screen--phone .auth-step-title { display: block; grid-row: 2; } /* A Google or Apple sign-up waiting on the number (iOS's socialSubtitle, 2026-10-29): the name step's subtitle, under the title. */ .auth-screen--phone .auth-phone-subtitle { grid-row: 3; margin: 6px 0 0; font: 400 17px/22px var(--font-sans); text-align: center; text-wrap: balance; color: var(--label-secondary); } /* The number: the mock's 48-tall glass pill, 20 in from the screen's edges (the card's 16, plus 4); the flag lives in the header. */ .auth-screen--phone .auth-phone-field { grid-row: 4; position: relative; margin: 24px 4px 0; } .auth-screen--phone .auth-error { grid-row: 5; align-self: start; margin-top: 12px; } .auth-screen--phone .auth-country-button { display: none; } /* glass.css's recipe, thin, written out as desktop's row is. 22 at regular (iOS title2), so iOS doesn't zoom on focus. */ .auth-screen--phone .auth-phone-input { width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: var(--glass-tint), linear-gradient(var(--material-thin-1), var(--material-thin-1)), linear-gradient(var(--material-thin-2), var(--material-thin-2)); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); box-shadow: var(--glass-rim), var(--glass-shadow); color: var(--label-primary); font: 400 22px/1 var(--font-sans); letter-spacing: normal; text-align: left; } .auth-screen--phone .auth-phone-input::placeholder { color: var(--label-tertiary); } .auth-screen--phone .auth-phone-input:focus { outline: none; box-shadow: var(--glass-rim), 0 0 0 2px var(--accent-blue), var(--glass-shadow); } /* The code step's six boxes (iOS's OTPDigitBoxView: 64 tall, 12 round). */ .auth-screen--otp .auth-otp-box { flex: 1 1 0; min-width: 0; max-width: 44px; width: auto; height: 64px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-secondary); border-radius: 12px; background: color-mix(in srgb, var(--fill-quaternary) 25%, transparent); color: var(--label-primary); font: 600 26px/1 var(--font-sans); font-variant-numeric: tabular-nums; } .auth-screen--otp .auth-otp-box-active { border-color: var(--label-tertiary); } .auth-screen--otp .auth-otp-hidden-input:focus-visible + .auth-otp-display .auth-otp-box-active { border-color: var(--accent-blue); } /* Drops over what follows, from the pill's foot. */ .auth-screen--phone .auth-country-picker { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 2; margin: 0; box-shadow: var(--shadow); } /* iOS's CapsuleButton (filledDark): 310×48, the fill and label dimmed while the number (the name) isn't whole. */ .auth-screen--phone .auth-submit, :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-submit, .auth-screen--creating .auth-submit { grid-row: 6; justify-self: center; width: 100%; max-width: 310px; height: 48px; margin: 0; padding: 0; border-radius: var(--radius-full); font-size: 19px; font-weight: 400; } .auth-screen--phone .auth-submit:disabled, :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-submit:disabled { background: var(--fill-quaternary); color: var(--label-tertiary); } /* The foot's track; the mock's Continue here is 286 wide. */ .auth-screen--phone .auth-submit { grid-row: 7; max-width: 286px; } /* The name step (iOS's NameEntryView, 2026-10-29) on the landing's frame: "Your Name" where the landings' titles sit (501.5 at the 393 mock), its line and the "Full Name" field under it, Continue and "I already have an account" where the landing's last two pills sit (693.5 and 749.5), 20.5 over the inset. The copy and the field sit CENTRED between the header and the buttons (Julian, 2026-11-05: they hung at the foot before, a screen of nothing above them): the two flexible tracks share the room, and both give way — to an error, or to the keyboard (--vvh) — so Continue stays in reach. The field is the pills' 310, as iOS's inset FormField is. */ :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-form { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: minmax(16px, 1fr) auto auto auto auto minmax(16px, 1fr) auto auto; gap: 0; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-title { grid-row: 2; margin: 0; font: 600 33px/41px var(--font-sans); text-align: center; color: var(--label-primary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-subtitle { grid-row: 3; margin: 6px 0 0; font: 400 17px/22px var(--font-sans); text-align: center; color: var(--label-secondary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-field { grid-row: 4; justify-self: center; width: 100%; max-width: 310px; margin-top: 16px; gap: 5px; /* The field's 17: base.css floors a phone's inputs at max(16px, 1em), the em this box's. */ font-size: 17px; } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-label { font: 400 13px/16px var(--font-sans); color: var(--label-secondary); } /* iOS's body 17, over the 16 under which iOS zooms on focus. */ :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-input { height: 48px; padding: 0 16px; border: 1px solid var(--border-secondary); border-radius: 14px; background: var(--background-primary); font: 400 17px/22px var(--font-sans); color: var(--label-primary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-name-input:focus { border-color: var(--label-tertiary); } :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-error { grid-row: 5; align-self: start; margin: 8px 0 0; } /* Continue on the foot's track, under the centred block's room. */ :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-submit { grid-row: 7; } /* iOS's ghost PillButton: the pill's box, the label in the secondary ink. */ :is(.auth-screen--name, .auth-screen--email, .auth-screen--new-password) .auth-have-account { grid-row: 8; justify-self: center; width: 100%; max-width: 310px; height: 48px; margin-top: 8px; padding: 0; border-radius: var(--radius-full); font: 400 17px/22px var(--font-sans); } /* "Creating your account…" (iOS's CreatingAccountView, 2026-10-29) on the landing's frame, no header (iOS gives it no back). The copy's top line sits where the landings' titles sit (501.5 at the 393 mock), the spinner or the warning sign 16 over it. After a failure the message follows the title, and Try again and Start over sit where the name step's Continue and "I already have an account" sit (693.5 and 749.5) — iOS's order, the plain-text one last. The foot keeps the buttons' 104 whether they show or not, and the copy's track runs to 192 (the name step's title top to Continue) so the line holds still from spinner to failure; a longer copy climbs into the space above, 16 kept over Try again. */ .auth-screen--creating .auth-form { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: minmax(16px, 1fr) auto minmax(auto, 192px) 48px 56px; justify-items: stretch; gap: 0; } .auth-screen--creating .auth-creating-art { grid-row: 2; justify-self: center; margin-bottom: 16px; } .auth-screen--creating .auth-creating-copy { grid-row: 3; align-self: start; gap: 0; padding-bottom: 16px; } .auth-screen--creating .auth-creating-title { margin: 0; font: 600 33px/41px var(--font-sans); text-align: center; color: var(--label-primary); } .auth-screen--creating .auth-creating-message { margin: 8px 0 0; font: 400 17px/22px var(--font-sans); text-align: center; color: var(--label-secondary); } .auth-screen--creating .auth-submit { grid-row: 4; align-self: auto; } /* iOS's ghost PillButton, as on the name step. */ .auth-screen--creating .auth-start-over { grid-row: 5; justify-self: center; align-self: end; width: 100%; max-width: 310px; height: 48px; margin: 0; padding: 0; border-radius: var(--radius-full); font: 400 17px/22px var(--font-sans); } /* The code step (iOS's OTPVerificationView, 2026-10-29) on the phone step's frame, so nothing moves between the two: the header (back to a fresh phone step), the six boxes where the number's sat (136 under the header), Clerk's message under them, "Enter the code sent to" and the number where the phone step's title sits, and Resend — iOS's ghost PillButton, plain text — where its Continue sits (749.5 at the 393 mock), 20.5 over the inset. The message has a track of its own, so it never runs into the title. With the keyboard up (--vvh) the space under the boxes goes first, then the other two share what is left. */ .auth-screen--otp .auth-form { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: minmax(16px, 80px) auto auto auto auto minmax(16px, 1fr) auto; gap: 0; } .auth-screen--otp .auth-otp-title { grid-row: 2; margin: 0; text-align: center; color: var(--label-primary); } /* Desktop's " we sent to": phones say "Sent to" under the title. */ .auth-screen--otp .auth-otp-title-tail { display: none; } /* "Sent to" and the number: 20 on 120% in the secondary ink, 6 under the title. */ .auth-screen--otp .auth-otp-subtitle { grid-row: 3; margin: 6px 0 0; font: 400 20px/1.2 var(--font-sans); text-align: center; color: var(--label-secondary); } .auth-screen--otp .auth-otp-wrapper { grid-row: 4; margin-top: 24px; } .auth-screen--otp .auth-otp-display { gap: 8px; width: 100%; } /* The mock's six: 55 wide (what a 402 fits with 16 insets and 8 between; a 393 shares the gap), 64 tall, 12 round, on the glass the phone step's pill wears. */ .auth-screen--otp .auth-otp-box { max-width: 55px; border: 0; background: var(--glass-tint), linear-gradient(var(--material-thin-1), var(--material-thin-1)), linear-gradient(var(--material-thin-2), var(--material-thin-2)); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); box-shadow: var(--glass-rim), var(--glass-shadow); } .auth-screen--otp .auth-otp-box-active { box-shadow: var(--glass-rim), 0 0 0 1px var(--label-tertiary), var(--glass-shadow); } .auth-screen--otp .auth-otp-hidden-input:focus-visible + .auth-otp-display .auth-otp-box-active { box-shadow: var(--glass-rim), 0 0 0 2px var(--accent-blue), var(--glass-shadow); } /* 16, so iOS doesn't zoom on focus. */ .auth-screen--otp .auth-otp-hidden-input { font-size: 16px; } .auth-screen--otp .auth-error { grid-row: 5; align-self: start; margin-top: 12px; } .auth-screen--otp .auth-resend { grid-row: 7; justify-self: center; width: 100%; max-width: 310px; margin: 0; } .auth-screen--otp .auth-resend-btn { width: 100%; height: 48px; border-radius: var(--radius-full); font: 400 17px/22px var(--font-sans); color: var(--label-secondary); -webkit-tap-highlight-color: transparent; } /* Counting down: the tertiary ink, as iOS dims it. */ .auth-screen--otp .auth-resend-btn:disabled { color: var(--label-tertiary); cursor: default; text-decoration: none; } /* "Signing in…" on Resend's line, in its pill's 48. */ .auth-screen--otp .auth-signing-in { display: flex; align-items: center; justify-content: center; height: 48px; font: 400 17px/22px var(--font-sans); color: var(--label-tertiary); } /* The mock's header: 40 discs, and the flag pill 88×40, in the discs' tinted glass with a hairline ring and no drop shadow. */ /* Scoped by the bar: glass.css loads after this sheet, and the glass surface's own shadow would win at one class. */ .auth-nav-bar .nav-bar-disc { width: 40px; } .auth-nav-bar .nav-bar-disc, .auth-nav-bar .auth-flag-pill--phone { height: 40px; box-shadow: var(--glass-rim-disc), 0 0 0 0.5px var(--border-secondary); } .auth-flag-pill--phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 88px; padding: 0; border: 0; border-radius: var(--radius-full); --glass-tint-color: var(--background-primary); color: var(--label-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .auth-flag-pill--phone .auth-country-flag { font-size: 32px; line-height: 1; } .auth-flag-pill--phone .icon { color: var(--label-secondary); } } /* Sign-up's phone canvas is plain (its 10-28 wash went 2026-10-30 when the glow became the element above; the glow is the only colour). */ @media (max-width: 834px) { .sign-up:not(.sign-up--login) { background: var(--background-secondary); } } /* ── Email + password (iOS's EmailEntryView / NewPasswordView, 2026-10-31). The email and new-password steps wear the name step's clothes (the `:is(.auth-screen--name, …)` rules above): the same title, line, field and ghost button. Two labelled fields stack inside the one field slot. */ .auth-fields { display: flex; flex-direction: column; gap: var(--sp-md); } .auth-field-stack { display: flex; flex-direction: column; gap: var(--sp-3xs); } @media (max-width: 834px) { :is(.auth-screen--email, .auth-screen--new-password) .auth-fields { gap: 12px; } :is(.auth-screen--email, .auth-screen--new-password) .auth-field-stack { gap: 5px; } } /* The permission screens on phones (iOS PermissionPriming) — app/priming. */ /* The permission screens on phones (iOS's PermissionStepView, 2026-10-29; the soft gate of Julian's mocks, 2026-11-05; app/priming), on the landing's frame: the canvas under iOS's header glow, the art at the top, the 33/41 title and its line in the secondary label over the one accent pill, and "I'll do this later" under the pill. Measured off the 393×852 mocks: the pill at 714 and the link's 19.5 line 16 under it, 20.5 over the home indicator's inset; the line of copy 84 over the pill, the title over it (539 with a line of each, 498 with a two-line title), so the copy holds its place whatever the picture; its track runs to 248 (the pill's top up), and a longer copy climbs into the art's space. Shown on phones only, but laid out at any width: a window widened mid-queue keeps a working screen. */ .priming { position: relative; isolation: isolate; box-sizing: border-box; height: var(--vvh, 100dvh); overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto 48px 35.5px; justify-items: center; padding: 0 16px calc(20.5px + var(--phone-bottom-inset)); background: var(--background-secondary); } /* Home's glow is the landing's `.auth-glow` element (auth.css; app/auth glow, drawn first here too), over the art. */ /* The art's slot: edge to edge (the 16 gutters taken back), everything above the copy less 8 — the copy hangs from the pill (its own row, 84 over it), so the slot is whatever room the window leaves. The pictures (Julian's Permissions assets, 2026-11-05, 2× over the 393 frame, in icons/priming) stack in it as iOS's ZStack of scaledToFit layers, placed off the mocks: the phones' bezels sit at 86, so calendar's frame starts at 67 and location's at 63; the Reminders icon's first dot at 190, its frame at 60; email's card title at 166, its frame at 62. Notifications runs full-bleed from the top of the screen (iOS's startsAtTopOfScreen), its bell's foot at 490, in the air over the copy. */ .priming-art { grid-row: 1; position: relative; align-self: stretch; justify-self: stretch; min-height: 0; margin: 0 -16px 8px; } .priming-art-layer { position: absolute; top: 0; right: 0; left: 0; aspect-ratio: 393 / 464; background: center top / 100% auto no-repeat; } .priming-art-layer--notifications { aspect-ratio: 393 / 526; background-image: url("/icons/priming/notifications.png"); } .priming-art-layer--calendar-screen { top: 67px; background-image: url("/icons/priming/calendar-screen.png"); } .priming-art-layer--calendar-icon { top: 67px; background-image: url("/icons/priming/calendar-icon-light.png"); } .priming-art-layer--reminders-icon { top: 60px; aspect-ratio: 393 / 463; background-image: url("/icons/priming/reminders-icon-light.png"); } .priming-art-layer--reminders-wave { top: 60px; aspect-ratio: 393 / 463; background-image: url("/icons/priming/reminders-wave.png"); } .priming-art-layer--email { top: 62px; aspect-ratio: 393 / 463; background-image: url("/icons/priming/email.png"); } .priming-art-layer--location { top: 63px; background-image: url("/icons/priming/location.png"); } /* The app icons' dark cuts under the dark theme, set or the OS's (tokens.css's three tiers). */ [data-theme="dark"] .priming-art-layer--calendar-icon { background-image: url("/icons/priming/calendar-icon-dark.png"); } [data-theme="dark"] .priming-art-layer--reminders-icon { background-image: url("/icons/priming/reminders-icon-dark.png"); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .priming-art-layer--calendar-icon { background-image: url("/icons/priming/calendar-icon-dark.png"); } :root:not([data-theme]) .priming-art-layer--reminders-icon { background-image: url("/icons/priming/reminders-icon-dark.png"); } } /* Phones (2026-11-06, Julian: "serious collision on iPhone Pro Maxes"): a screen's pictures scale together to fit the slot, the smaller of its width (393) and its height, centred. The height to fit is where the lowest picture's pixels end (--fit, in frame points: a frame's top plus its drawn foot — notifications' bell at 494, calendar's and location's phones at their frames' feet, email's card at 476), not the frame, whose foot is often clear. On the 393×852 mock every screen fits as drawn, so nothing moves there; a browser tab's toolbar or a wider phone used to keep the pictures at the width's scale while the copy rose into them. Each layer names its frame's top and height; the scale reads the slot through container units. */ @media (max-width: 834px) { .priming-art { --fit: 531; container-type: size; } .priming-art--notifications { --fit: 494; } .priming-art--reminders { --fit: 420; } .priming-art--email { --fit: 476; } .priming-art--location { --fit: 527; } .priming-art-layer { --frame-top: 0; --frame-h: 464; --k: min(calc(100cqw / 393), calc(100cqh / var(--fit))); top: calc(var(--k) * var(--frame-top)); right: auto; left: 50%; width: calc(var(--k) * 393); aspect-ratio: 393 / var(--frame-h); translate: -50% 0; } .priming-art-layer--notifications { --frame-h: 526; } .priming-art-layer--calendar-screen, .priming-art-layer--calendar-icon { --frame-top: 67; } .priming-art-layer--reminders-icon, .priming-art-layer--reminders-wave { --frame-top: 60; --frame-h: 463; } .priming-art-layer--email { --frame-top: 62; --frame-h: 463; } .priming-art-layer--location { --frame-top: 63; } } /* Calendar's and location's phone, cut off at its foot, dissolves into the page under Julian's scrim (Figma "Calendar Sync", 2026-11-06, measured off the 393×464 frame: an ellipse 564 wide and 153.5 tall, centred 447.5 down). Flatter here than the mock's outline (Julian, same day: the mock's read too elliptical, and in dark the phone's edges bled through its sides): 180% of the frame wide, centred 105% down, the mock's height — so the horizon runs nearly straight across the frame and the page's colour holds its full width. In the frame's proportions, so a narrower phone and the desktop canvases scale it with the picture; the copy stands above it (its own layer). */ .priming-art-layer--fade::after { content: ""; position: absolute; top: 105%; left: 50%; width: 180%; height: 33.08%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--background-secondary) 0%, var(--background-secondary) 45%, transparent 100%); pointer-events: none; } .priming-copy { grid-row: 2; position: relative; z-index: 1; align-self: end; display: flex; flex-direction: column; gap: 6px; width: 100%; padding-bottom: 84px; text-align: center; } .priming-title { margin: 0; font: 600 33px/41px var(--font-sans); color: var(--label-primary); text-wrap: balance; } .priming-message { margin: 0; font: 400 17px/22px var(--font-sans); color: var(--label-secondary); text-wrap: balance; } /* iOS's CapsuleButton, filled with the accent: 310×48, the label at the landing pills' 19. While the browser asks, a spinner stands in for the label (iOS's isLoading) and the button takes no second tap. */ .priming-button { grid-row: 3; position: relative; width: 100%; max-width: 310px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--accent-blue); color: var(--label-on-accent); font: 400 19px/1 var(--font-sans); cursor: pointer; } .priming-button:disabled { cursor: default; } .priming-button--requesting .priming-button-label { visibility: hidden; } .priming-button-spinner { position: absolute; top: 50%; left: 50%; box-sizing: border-box; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid var(--label-on-accent); border-top-color: transparent; border-radius: 50%; animation: priming-spin 800ms linear infinite; } /* "I'll do this later" (iOS's plain 15/19.5 in the secondary label), on its line 16 under the pill; off while the browser asks. */ .priming-later { grid-row: 4; align-self: end; margin: 0; padding: 0; border: 0; background: none; font: 400 15px/19.5px var(--font-sans); color: var(--label-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .priming-later:disabled { cursor: default; } /* Desktop (2026-11-06): the screen on the sign-up's column (auth.css's phone step, ≥835) instead of the phones' frame — the bar's wordmark over a 464 column, the picture, the title at the column's 34/41, the line 8 under it in the alt caption's 21, the phones' 310 pill, and "I'll do this later" 16 under that. The air between them is the window's, not fixed (Julian's Reminders mock, 1440×1024, later the same day: "use a ratio so things don't seem so tight"): the picture 71 under the bar, the title 79 under the picture, the pill 40 under the line — 6.9%, 7.7% and 3.9% of the 1024 — and 118 left under the link. A short window spends its air first, then shrinks the picture (its layers scale with it, as on a narrow phone), never the copy. */ @media (min-width: 835px) { .priming { --air-art: calc(var(--vvh, 100dvh) * 0.069); --air-title: calc(var(--vvh, 100dvh) * 0.077); --air-pill: calc(var(--vvh, 100dvh) * 0.039); display: flex; flex-direction: column; align-items: center; padding: 0 0 48px; overflow: auto; overscroll-behavior: none; } .priming .sign-up-bar { position: relative; z-index: 1; box-sizing: border-box; width: 100%; min-height: 84px; padding: 18px 64px 30px; } /* Julian's desktop exports (2026-11-06; the -desktop.png files in icons/priming): each picture cut to its own content at 2×, about 400 tall — the laptop-and-phone notifications scene, calendar's phone with its "Tue 1" on a canvas 2 wider and 14 taller (the tile overhangs the phone's foot), email's card with the Mail icon, location's phone. The slot is the screen's own frame (--frame-w × --frame-h, at 1×), its layers painted from its top-left corner; a short window shrinks the slot and its layers with it. */ .priming-art { --frame-w: 393; --frame-h: 464; } /* The picture's room: the window less the bar (84), the copy (41 + 8 + two lines of 21/1.25), the pill (48), the link (16 + 20), the foot's 48 and the three airs — 318 and 18.5% of the window. */ .priming-art, .priming--top .priming-art { flex: 0 0 auto; align-self: center; width: auto; height: min(calc(var(--frame-h) * 1px), calc(var(--vvh, 100dvh) * 0.815 - 318px)); min-height: 240px; aspect-ratio: var(--frame-w) / var(--frame-h); margin: var(--air-art) 0 0; overflow: hidden; } .priming-art--notifications { --frame-w: 581; --frame-h: 400; } .priming-art--calendar { --frame-w: 314; --frame-h: 414; } .priming-art--email { --frame-w: 402.5; --frame-h: 427.5; } .priming-art--location { --frame-w: 339; --frame-h: 400; } .priming-art .priming-art-layer { inset: 0; aspect-ratio: auto; background-position: left top; background-size: 100% auto; } .priming-art-layer--notifications { background-image: url("/icons/priming/notifications-desktop.png"); } /* The screen (312 wide) on the icon's 314 canvas, both from the corner. */ .priming-art .priming-art-layer--calendar-screen { background-image: url("/icons/priming/calendar-screen-desktop.png"); background-size: 99.363% auto; } .priming-art-layer--calendar-icon { background-image: url("/icons/priming/calendar-icon-light-desktop.png"); } .priming-art-layer--email { background-image: url("/icons/priming/email-desktop.png"); } .priming-art-layer--location { background-image: url("/icons/priming/location-desktop.png"); } [data-theme="dark"] .priming-art-layer--calendar-icon { background-image: url("/icons/priming/calendar-icon-dark-desktop.png"); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .priming-art-layer--calendar-icon { background-image: url("/icons/priming/calendar-icon-dark-desktop.png"); } } .priming-copy { align-self: center; width: 464px; margin-top: var(--air-title); padding-bottom: 0; gap: 8px; } .priming-title { font: 600 34px/41px var(--font-sans); } .priming-message { font: 400 21px/1.25 var(--font-sans); } .priming-button { flex-shrink: 0; align-self: center; margin-top: var(--air-pill); } .priming-later { flex-shrink: 0; align-self: center; margin-top: 16px; } } @keyframes priming-spin { to { transform: rotate(360deg); } } /* A still ring reads as stuck: under reduced motion it turns slowly. */ @media (prefers-reduced-motion: reduce) { .priming-button-spinner { animation-duration: 2400ms; } } /* Shell layout styles — app-shell root, shared page-header primitives, * main content pane, and the mobile bottom action bar. * Sidebar navigation lives in sidebar.css (imported right after this file). */ .app-shell { display: flex; height: 100vh; /* fallback: no dvh support */ height: 100dvh; /* fallback: dvh but no visualViewport JS */ height: var(--vvh, 100dvh); /* primary: set in real-time by dom.mjs from visualViewport.height — reliably shrinks when the iOS Safari keyboard appears */ overflow: hidden; /* Respect the gesture-nav bar on Android and iOS notch devices */ padding-bottom: env(safe-area-inset-bottom); /* The app canvas (2026-09-23): the rail and sidebar paint nothing and show this through; .main-pane paints bg-primary on top. --background-secondary, not --background-secondary (2026-09-25): the two are the same #F2F2F7 in light, but in dark bg-secondary is #1C1C1E while the canvas is iOS's #0C0C0C — which .settings-canvas paints, so desktop Settings (rail → main, no list pane) showed a seam at the rail's edge. Anything that paints itself to blend with the shell uses --background-secondary too. content-box, not the default border-box, so the safe-area padding above stays transparent and the runtime-mirrored html colour shows there, as it did before the canvas existed. */ background: var(--background-secondary); background-clip: content-box; } /* Keyboard up: the on-screen keyboard covers the gesture-nav zone, but env() keeps reporting the inset — collapse it so bottom-anchored UI hugs the keyboard instead of floating above it (.kb-open is set by the --vvh visualViewport updater in dom.mjs). */ .kb-open .app-shell { padding-bottom: 0; } /* ── Shared header icon button ────────────────────────────────────────── Ghost, fully-round icon button used for every header action across Activity, Messages, Please AI chat, Reminders/Timeline, Profile, and Settings — sidebar toggle, back/close, search, compose, menu, settings. Desktop: 32x32 hit box / 20px icon. Mobile: 48x48 hit box / 32px icon. Icon calls should pass size 0 so this class controls the icon size. */ /* ── Standardized page header (ui/page_header) ───────────────────────── Extracted from .chat-header (chat.css) — values mirrored exactly. [leading action] [centered flex:1 title] [trailing actions]; the leading slot swaps back-link (desktop) ↔ sidebar-toggle (≤768px). */ .page-header { width: 100%; display: flex; align-items: center; gap: var(--sp-sm); /* Top: sp-sm + sp-xs = 20px — the same two-token stack as the sidebar (.sidebar 12px + .sidebar-header 8px), so the page header and the sidebar header top-align exactly. Page roots must not add their own top padding above this. */ padding: calc(var(--sp-sm) + var(--sp-xs)) var(--sp-md) 0; flex-shrink: 0; min-height: 68px; } /* Action slots: equal flex share on both sides keeps the title truly centered regardless of how many actions each side holds; an empty slot still occupies its share. min-width reserves at least one icon-button footprint. */ .page-header-slot { flex: 1 1 0; min-width: 32px; display: flex; align-items: center; gap: var(--sp-xs); } .page-header-slot--left { justify-content: flex-start; } .page-header-slot--right { justify-content: flex-end; } .page-header-title { flex: 0 1 auto; min-width: 0; text-align: center; font-size: var(--text-lg); font-weight: 600; color: var(--label-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .page-header-title-link { text-decoration: none; cursor: pointer; } .page-header-title-link:hover { text-decoration: none; color: var(--accent-blue); } @media (max-width: 834px) { .page-header-title { font-size: var(--text-2xl); } } .header-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-full); background: transparent; color: var(--label-primary); text-decoration: none; cursor: pointer; /* Fade the ghost background in on hover/focus and back out on leave, instead of snapping instantly. */ transition: background-color 150ms ease, color 150ms ease; } .header-icon-btn:hover, .header-icon-btn:focus-visible { background: var(--background-secondary); color: var(--label-primary); text-decoration: none; } /* Quick fade-down on press for tactile feedback. */ .header-icon-btn:active { background: var(--background-secondary); transition-duration: 60ms; } .header-icon-btn .icon { width: 20px; height: 20px; } @media (max-width: 834px) { .header-icon-btn { width: 48px; height: 48px; } .header-icon-btn .icon { width: 24px; height: 24px; } } /* Main content pane beside the sidebar */ .main-pane { flex: 1; min-width: 0; min-height: 0; height: 100%; overflow: hidden; /* The one surface that is bg-primary (2026-09-23): the shell is the canvas, the rail and sidebar are transparent on it, and the content pane is the white sheet lifted off it — the mock's only white. */ background: var(--background-primary); } /* ── Breakpoint hosts ───────────────────────────────────────────────────── The home route renders two main-pane bodies and lets CSS pick one: the timeline page on mobile (where the sidebar drawer holds nav only) and the new-chat landing on desktop (where the timeline lives in the sidebar). Both hosts fill the pane so the child owns its own scroll. */ .main-mobile-only, .main-desktop-only { height: 100%; min-height: 0; } @media (min-width: 835px) { .main-mobile-only { display: none; } } @media (max-width: 834px) { .main-desktop-only { display: none; } } /* Sidebar navigation — desktop persistent rail / mobile slide-in drawer. * Extracted from shell.css for granularity (shell.css now holds only the * app-shell root, the shared page-header/header-icon-btn primitives, the * main content pane, and the mobile bottom action bar). * * Responsive breakpoints: * Mobile : max-width 834px — sidebar hidden, slide-in drawer * Desktop : min-width 835px — beside the rail, 406–480px wide; collapsed = * display:none (the rail's header then offers the expand button) */ .sidebar { /* --sidebar-width is the drag-resize override (absolute px, persisted; set inline by client.view_sidebar and live-updated by the resize FFI during a drag). The mobile drawer's own width rules below ignore it. */ /* 406 default and minimum (2026-09-24): room for the toDo card's 370px min-width inside the list's 16px inset each side (the mock's, 2026-09-25; it was the pane's 10px padding plus the list's 8px), which leaves the card 374 at the default. Was 320 default / 395 max, which left cards 284px wide. */ width: var(--sidebar-width, 406px); max-width: 480px; /* No background: like the rail, the sidebar is canvas and shows the shell's --background-secondary through. The one exception is the mobile drawer below, which slides OVER the white main pane and has to paint itself. */ flex-shrink: 0; border-right: 1px solid var(--border-secondary); display: flex; flex-direction: column; /* 10px horizontal padding: the mobile drawer's. Desktop drops it — the lists carry the pane's 16px inset themselves (see the min-width: 835px block below). */ padding: var(--sp-sm) 10px; gap: var(--sp-md); box-sizing: border-box; position: sticky; top: 0; height: 100vh; /* fallback */ height: 100dvh; /* dynamic viewport — keeps sidebar flush with the shell */ overflow-x: hidden; overflow-y: hidden; /* .sidebar-scroll owns scrolling; header/footer stay pinned */ transition: width 0.3s ease-in-out, padding 0.3s ease-in-out; } .sidebar-section { display: flex; flex-direction: column; gap: 4px; } .sidebar-section-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--sp-sm) var(--sp-xs) var(--sp-xs) var(--sp-xs); overflow: hidden; white-space: nowrap; opacity: 1; transition: opacity 0.3s ease-in-out; /* Pins to the top of .sidebar-scroll once scrolled up to it, so chat rows scroll underneath instead of the header scrolling out of view. Opaque the canvas colour, so rows scrolling under it are hidden — the sidebar itself paints nothing and shows the shell's --background-secondary through (not bg-secondary, 2026-09-25: #1C1C1E against the #0C0C0C canvas in dark; the mobile drawer, which paints bg-secondary, overrides it below). Unstuck, it's visually identical to the old static header. */ position: sticky; top: 0; z-index: 1; background: var(--background-secondary); } .sidebar-section-header__label { font-size: var(--text-lg); /* 16px */ color: var(--label-primary); } /* Collapsed-rail label swap: "Messages" ↔ "Msg". The short label hides by default; the desktop collapsed state flips both (and drops the + action, which has nowhere sane to live in the 72px rail). The mobile drawer never collapses visually, so the mobile block below restores the full set like the other collapsed resets. */ .sidebar-section-header__label--collapsed { display: none; } /* "+" action in a section header (e.g. Messages → new chat). */ .sidebar-section-header-action { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--label-primary); cursor: pointer; } @media (hover: hover) { .sidebar-section-header-action:hover { background: var(--fill-secondary); } } .sidebar-row { /* Button reset — ensures