@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');/* LumeeUI — client.css — GENERATED, do not edit. * Source: tokens/*.tokens.json. Regenerate: pnpm build:tokens. * Self-contained — import exactly ONE mode file (client | admin | smartest-minds). */ :root { /* primitives — internal; never reference directly in UI */ --btly-color-base-white: #FFFFFF; --btly-color-base-black: #000000; --btly-color-gray-50: #FAFAFA; --btly-color-gray-100: #F0F0F0; --btly-color-gray-200: #DEDEDE; --btly-color-gray-300: #BEBEBE; --btly-color-gray-400: #949494; --btly-color-gray-500: #737373; --btly-color-gray-600: #636363; --btly-color-gray-700: #4F4F4F; --btly-color-gray-800: #3D3D3D; --btly-color-gray-900: #303030; --btly-color-gray-950: #1F1F1F; --btly-color-ultraviolet-50: #F9F9FF; --btly-color-ultraviolet-100: #EFEFFF; --btly-color-ultraviolet-200: #DBDBFF; --btly-color-ultraviolet-300: #B9B8FF; --btly-color-ultraviolet-400: #9085FF; --btly-color-ultraviolet-500: #7352FC; --btly-color-ultraviolet-600: #6435EE; --btly-color-ultraviolet-700: #5216CF; --btly-color-ultraviolet-800: #3E11A1; --btly-color-ultraviolet-900: #30147B; --btly-color-ultraviolet-950: #1D124B; --btly-color-blue-50: #EFF6FF; --btly-color-blue-100: #DBEAFE; --btly-color-blue-200: #BEDBFF; --btly-color-blue-300: #8EC5FF; --btly-color-blue-400: #51A2FF; --btly-color-blue-500: #2B7FFF; --btly-color-blue-600: #155DFC; --btly-color-blue-700: #1447E6; --btly-color-blue-800: #193CB8; --btly-color-blue-900: #1C398E; --btly-color-blue-950: #162456; --btly-color-sky-50: #EDF9FF; --btly-color-sky-100: #D7F1FF; --btly-color-sky-200: #AFE4FF; --btly-color-sky-300: #7FCDFF; --btly-color-sky-400: #5CBDFF; --btly-color-sky-500: #46B0F7; --btly-color-sky-600: #0491D9; --btly-color-sky-700: #006DAF; --btly-color-sky-800: #004E7F; --btly-color-sky-900: #003858; --btly-color-sky-950: #00212E; --btly-color-emerald-50: #ECFDF5; --btly-color-emerald-100: #D0FAE5; --btly-color-emerald-200: #A4F4CF; --btly-color-emerald-300: #5EE9B5; --btly-color-emerald-400: #00D492; --btly-color-emerald-500: #00BC7D; --btly-color-emerald-600: #009966; --btly-color-emerald-700: #007A55; --btly-color-emerald-800: #006045; --btly-color-emerald-900: #004F3B; --btly-color-emerald-950: #002C22; --btly-color-green-50: #ECFCEF; --btly-color-green-100: #D3F8DB; --btly-color-green-200: #A6F1B9; --btly-color-green-300: #6CE090; --btly-color-green-400: #3CD677; --btly-color-green-500: #0ACC68; --btly-color-green-600: #00AC44; --btly-color-green-700: #008522; --btly-color-green-800: #005F16; --btly-color-green-900: #004314; --btly-color-green-950: #002609; --btly-color-sunshine-50: #FFFBE2; --btly-color-sunshine-100: #FFF8D2; --btly-color-sunshine-200: #FFF0B5; --btly-color-sunshine-300: #FFE284; --btly-color-sunshine-400: #FFCE2B; --btly-color-sunshine-500: #FFB900; --btly-color-sunshine-600: #D49900; --btly-color-sunshine-700: #A27300; --btly-color-sunshine-800: #734F01; --btly-color-sunshine-900: #523704; --btly-color-sunshine-950: #271903; --btly-color-orange-50: #FFF2EC; --btly-color-orange-100: #FFE2D4; --btly-color-orange-200: #FFC6AB; --btly-color-orange-300: #FFA17B; --btly-color-orange-400: #FF8658; --btly-color-orange-500: #FF7342; --btly-color-orange-600: #E04F10; --btly-color-orange-700: #B52C00; --btly-color-orange-800: #831F00; --btly-color-orange-900: #5C1B02; --btly-color-orange-950: #390D00; --btly-color-amber-50: #FFF7ED; --btly-color-amber-100: #FFEDD5; --btly-color-amber-200: #FED7AA; --btly-color-amber-300: #FDBA74; --btly-color-amber-400: #FB923C; --btly-color-amber-500: #F97316; --btly-color-amber-600: #EA580C; --btly-color-amber-700: #C2410C; --btly-color-amber-800: #9A3412; --btly-color-amber-900: #7C2D12; --btly-color-amber-950: #431407; --btly-color-red-50: #FFF8F7; --btly-color-red-100: #FFEDEB; --btly-color-red-200: #FFD7D4; --btly-color-red-300: #FBB2AA; --btly-color-red-400: #FA766E; --btly-color-red-500: #ED3E3E; --btly-color-red-600: #D40A24; --btly-color-red-700: #AD0719; --btly-color-red-800: #830711; --btly-color-red-900: #680009; --btly-color-red-950: #400506; --btly-color-pink-50: #FFF8FA; --btly-color-pink-100: #FFF0F4; --btly-color-pink-200: #FFDFEA; --btly-color-pink-300: #FFC2D6; --btly-color-pink-400: #FC9ABE; --btly-color-pink-500: #FF6DA9; --btly-color-pink-600: #E14B8E; --btly-color-pink-700: #BA276E; --btly-color-pink-800: #8A144F; --btly-color-pink-900: #671039; --btly-color-pink-950: #38081E; --btly-color-purple-50: #FAF5FF; --btly-color-purple-100: #F3E8FF; --btly-color-purple-200: #E9D4FF; --btly-color-purple-300: #DAB2FF; --btly-color-purple-400: #C27AFF; --btly-color-purple-500: #AD46FF; --btly-color-purple-600: #9810FA; --btly-color-purple-700: #8200DB; --btly-color-purple-800: #6E11B0; --btly-color-purple-900: #59168B; --btly-color-purple-950: #3C0366; --btly-font-family-mona-sans: "Mona Sans"; --btly-font-family-inter: Inter; --btly-font-family-roboto: Roboto; --btly-font-weight-bold: 700; --btly-font-weight-semibold: 600; --btly-font-weight-medium: 500; --btly-font-weight-regular: 400; --btly-font-weight-semibold-compact: 600; --btly-number-0: 0; --btly-number-1: 1px; --btly-number-2: 2px; --btly-number-4: 4px; --btly-number-6: 6px; --btly-number-8: 8px; --btly-number-10: 10px; --btly-number-12: 12px; --btly-number-14: 14px; --btly-number-16: 16px; --btly-number-18: 18px; --btly-number-20: 20px; --btly-number-24: 24px; --btly-number-28: 28px; --btly-number-32: 32px; --btly-number-36: 36px; --btly-number-40: 40px; --btly-number-48: 48px; --btly-number-56: 56px; --btly-number-64: 64px; --btly-number-72: 72px; --btly-number-80: 80px; --btly-number-88: 88px; --btly-number-96: 96px; --btly-number-112: 112px; --btly-number-128: 128px; --btly-number-160: 160px; --btly-number-1-5: 1.5px; --btly-number-full: 9999px; /* semantic (client) — the public surface for ALL UI */ --btly-text-primary: var(--btly-color-gray-950); --btly-text-secondary: var(--btly-color-gray-800); --btly-text-tertiary: var(--btly-color-gray-500); --btly-text-disabled: var(--btly-color-gray-300); --btly-text-placeholder: var(--btly-color-gray-300); --btly-text-inverse: var(--btly-color-base-white); --btly-text-brand: var(--btly-color-ultraviolet-500); --btly-action-primary-default: var(--btly-color-ultraviolet-500); --btly-action-primary-hover: var(--btly-color-ultraviolet-600); --btly-action-primary-pressed: var(--btly-color-ultraviolet-700); --btly-action-primary-disabled: var(--btly-color-gray-200); --btly-action-primary-disabled-text: var(--btly-color-gray-400); --btly-action-accent-default: var(--btly-color-sunshine-400); --btly-action-accent-hover: var(--btly-color-sunshine-500); --btly-action-accent-pressed: var(--btly-color-sunshine-600); --btly-action-accent-disabled: var(--btly-color-gray-200); --btly-action-accent-disabled-text: var(--btly-color-gray-400); --btly-action-secondary-default: var(--btly-color-gray-700); --btly-action-secondary-hover: var(--btly-color-gray-800); --btly-action-secondary-pressed: var(--btly-color-gray-700); --btly-action-secondary-disabled: var(--btly-color-gray-200); --btly-action-secondary-disabled-text: var(--btly-color-gray-400); --btly-action-tertiary-default: var(--btly-color-gray-500); --btly-action-tertiary-hover: var(--btly-color-gray-600); --btly-action-tertiary-pressed: var(--btly-color-gray-700); --btly-action-tertiary-disabled: var(--btly-color-gray-200); --btly-action-tertiary-disabled-text: var(--btly-color-gray-400); --btly-action-destructive-default: var(--btly-color-red-500); --btly-action-destructive-hover: var(--btly-color-red-600); --btly-action-destructive-pressed: var(--btly-color-red-700); --btly-action-destructive-disabled: var(--btly-color-gray-200); --btly-action-destructive-disabled-text: var(--btly-color-gray-400); --btly-action-inverse-default: var(--btly-color-base-white); --btly-action-inverse-hover: var(--btly-color-ultraviolet-300); --btly-action-inverse-pressed: var(--btly-color-ultraviolet-400); --btly-action-inverse-disabled: var(--btly-color-ultraviolet-600); --btly-action-inverse-disabled-text: var(--btly-color-gray-400); --btly-surface-canvas: var(--btly-color-base-white); --btly-surface-card: var(--btly-color-base-white); --btly-surface-secondary: var(--btly-color-gray-50); --btly-surface-tertiary: var(--btly-color-gray-100); --btly-surface-brand: var(--btly-color-ultraviolet-100); --btly-surface-inverse: var(--btly-color-gray-700); --btly-surface-blackout: rgba(31, 31, 31, 0.4); --btly-surface-blackout-subtle: rgba(31, 31, 31, 0.2); --btly-border-default: var(--btly-color-gray-200); --btly-border-strong: var(--btly-color-gray-300); --btly-border-brand: var(--btly-color-ultraviolet-500); --btly-border-brand-subtle: var(--btly-color-ultraviolet-300); --btly-border-focus-halo: rgba(115, 82, 252, 0.25); --btly-border-inverse: var(--btly-color-base-white); --btly-icon-default: var(--btly-color-gray-500); --btly-icon-muted: var(--btly-color-gray-400); --btly-icon-disabled: var(--btly-color-gray-400); --btly-icon-brand: var(--btly-color-ultraviolet-500); --btly-icon-inverse: var(--btly-color-base-white); --btly-status-error-text: var(--btly-color-red-500); --btly-status-error-bg: var(--btly-color-red-50); --btly-status-error-bg-strong: var(--btly-color-red-100); --btly-status-error-border: var(--btly-color-red-200); --btly-status-error-accent: var(--btly-color-red-500); --btly-status-attention-text: var(--btly-color-amber-500); --btly-status-attention-bg: var(--btly-color-amber-50); --btly-status-attention-bg-strong: var(--btly-color-amber-100); --btly-status-attention-border: var(--btly-color-amber-200); --btly-status-attention-accent: var(--btly-color-amber-500); --btly-status-warning-text: var(--btly-color-sunshine-600); --btly-status-warning-bg: var(--btly-color-sunshine-50); --btly-status-warning-bg-strong: var(--btly-color-sunshine-100); --btly-status-warning-border: var(--btly-color-sunshine-200); --btly-status-warning-accent: var(--btly-color-sunshine-500); --btly-status-info-text: var(--btly-color-sky-600); --btly-status-info-bg: var(--btly-color-sky-50); --btly-status-info-bg-strong: var(--btly-color-sky-100); --btly-status-info-border: var(--btly-color-sky-200); --btly-status-info-accent: var(--btly-color-sky-500); --btly-status-success-text: var(--btly-color-green-600); --btly-status-success-bg: var(--btly-color-green-50); --btly-status-success-bg-strong: var(--btly-color-green-100); --btly-status-success-border: var(--btly-color-green-200); --btly-status-success-accent: var(--btly-color-green-500); --btly-status-neutral-text: var(--btly-color-gray-500); --btly-status-neutral-bg: var(--btly-color-gray-50); --btly-status-neutral-bg-strong: var(--btly-color-gray-100); --btly-status-neutral-border: var(--btly-color-gray-200); --btly-status-neutral-accent: var(--btly-color-gray-500); --btly-space-0: var(--btly-number-0); --btly-space-1: var(--btly-number-1); --btly-space-2: var(--btly-number-2); --btly-space-4: var(--btly-number-4); --btly-space-6: var(--btly-number-6); --btly-space-8: var(--btly-number-8); --btly-space-10: var(--btly-number-10); --btly-space-12: var(--btly-number-12); --btly-space-16: var(--btly-number-16); --btly-space-20: var(--btly-number-20); --btly-space-24: var(--btly-number-24); --btly-space-32: var(--btly-number-32); --btly-space-36: var(--btly-number-36); --btly-space-40: var(--btly-number-40); --btly-space-48: var(--btly-number-48); --btly-space-56: var(--btly-number-56); --btly-space-64: var(--btly-number-64); --btly-space-72: var(--btly-number-72); --btly-space-80: var(--btly-number-80); --btly-space-96: var(--btly-number-96); --btly-space-112: var(--btly-number-112); --btly-space-128: var(--btly-number-128); --btly-radius-0: var(--btly-number-0); --btly-radius-1: var(--btly-number-1); --btly-radius-2: var(--btly-number-2); --btly-radius-4: var(--btly-number-4); --btly-radius-6: var(--btly-number-6); --btly-radius-8: var(--btly-number-8); --btly-radius-10: var(--btly-number-10); --btly-radius-12: var(--btly-number-12); --btly-radius-16: var(--btly-number-16); --btly-radius-20: var(--btly-number-20); --btly-radius-24: var(--btly-number-24); --btly-radius-32: var(--btly-number-32); --btly-radius-40: var(--btly-number-40); --btly-radius-48: var(--btly-number-48); --btly-radius-80: var(--btly-number-80); --btly-radius-full: var(--btly-number-full); --btly-border-width-0: var(--btly-number-0); --btly-border-width-1: var(--btly-number-1); --btly-border-width-2: var(--btly-number-2); --btly-border-width-4: var(--btly-number-4); --btly-border-width-1-5: var(--btly-number-1-5); --btly-typography-display-xl-font: var(--btly-font-family-mona-sans); --btly-typography-display-xl-weight: var(--btly-font-weight-bold); --btly-typography-display-xl-size: var(--btly-number-88); --btly-typography-display-xl-line-height: var(--btly-number-96); --btly-typography-display-xl-letter-spacing: var(--btly-number-0); --btly-typography-display-l-font: var(--btly-font-family-mona-sans); --btly-typography-display-l-weight: var(--btly-font-weight-bold); --btly-typography-display-l-size: var(--btly-number-72); --btly-typography-display-l-line-height: var(--btly-number-80); --btly-typography-display-l-letter-spacing: var(--btly-number-0); --btly-typography-display-m-font: var(--btly-font-family-mona-sans); --btly-typography-display-m-weight: var(--btly-font-weight-bold); --btly-typography-display-m-size: var(--btly-number-64); --btly-typography-display-m-line-height: var(--btly-number-72); --btly-typography-display-m-letter-spacing: var(--btly-number-0); --btly-typography-heading-xl-font: var(--btly-font-family-mona-sans); --btly-typography-heading-xl-weight: var(--btly-font-weight-bold); --btly-typography-heading-xl-size: var(--btly-number-48); --btly-typography-heading-xl-line-height: var(--btly-number-56); --btly-typography-heading-xl-letter-spacing: var(--btly-number-0); --btly-typography-heading-l-font: var(--btly-font-family-mona-sans); --btly-typography-heading-l-weight: var(--btly-font-weight-bold); --btly-typography-heading-l-size: var(--btly-number-32); --btly-typography-heading-l-line-height: var(--btly-number-40); --btly-typography-heading-l-letter-spacing: var(--btly-number-0); --btly-typography-heading-m-font: var(--btly-font-family-mona-sans); --btly-typography-heading-m-weight: var(--btly-font-weight-bold); --btly-typography-heading-m-size: var(--btly-number-28); --btly-typography-heading-m-line-height: var(--btly-number-36); --btly-typography-heading-m-letter-spacing: var(--btly-number-0); --btly-typography-heading-s-font: var(--btly-font-family-mona-sans); --btly-typography-heading-s-weight: var(--btly-font-weight-bold); --btly-typography-heading-s-size: var(--btly-number-24); --btly-typography-heading-s-line-height: var(--btly-number-32); --btly-typography-heading-s-letter-spacing: var(--btly-number-0); --btly-typography-title-xl-font: var(--btly-font-family-inter); --btly-typography-title-xl-weight: var(--btly-font-weight-semibold); --btly-typography-title-xl-size: var(--btly-number-20); --btly-typography-title-xl-line-height: var(--btly-number-24); --btly-typography-title-xl-letter-spacing: var(--btly-number-0); --btly-typography-title-l-font: var(--btly-font-family-inter); --btly-typography-title-l-weight: var(--btly-font-weight-semibold); --btly-typography-title-l-size: var(--btly-number-18); --btly-typography-title-l-line-height: var(--btly-number-24); --btly-typography-title-l-letter-spacing: var(--btly-number-0); --btly-typography-title-m-font: var(--btly-font-family-inter); --btly-typography-title-m-weight: var(--btly-font-weight-semibold); --btly-typography-title-m-size: var(--btly-number-16); --btly-typography-title-m-line-height: var(--btly-number-24); --btly-typography-title-m-letter-spacing: var(--btly-number-0); --btly-typography-title-s-font: var(--btly-font-family-inter); --btly-typography-title-s-weight: var(--btly-font-weight-semibold); --btly-typography-title-s-size: var(--btly-number-14); --btly-typography-title-s-line-height: var(--btly-number-20); --btly-typography-title-s-letter-spacing: var(--btly-number-0); --btly-typography-body-xl-font: var(--btly-font-family-inter); --btly-typography-body-xl-weight: var(--btly-font-weight-regular); --btly-typography-body-xl-size: var(--btly-number-18); --btly-typography-body-xl-line-height: var(--btly-number-24); --btly-typography-body-xl-letter-spacing: var(--btly-number-0); --btly-typography-body-l-font: var(--btly-font-family-inter); --btly-typography-body-l-weight: var(--btly-font-weight-regular); --btly-typography-body-l-size: var(--btly-number-16); --btly-typography-body-l-line-height: var(--btly-number-24); --btly-typography-body-l-letter-spacing: var(--btly-number-0); --btly-typography-body-m-font: var(--btly-font-family-inter); --btly-typography-body-m-weight: var(--btly-font-weight-regular); --btly-typography-body-m-size: var(--btly-number-14); --btly-typography-body-m-line-height: var(--btly-number-20); --btly-typography-body-m-letter-spacing: var(--btly-number-0); --btly-typography-body-s-font: var(--btly-font-family-inter); --btly-typography-body-s-weight: var(--btly-font-weight-regular); --btly-typography-body-s-size: var(--btly-number-12); --btly-typography-body-s-line-height: var(--btly-number-16); --btly-typography-body-s-letter-spacing: var(--btly-number-0); --btly-typography-label-m-font: var(--btly-font-family-inter); --btly-typography-label-m-weight: var(--btly-font-weight-medium); --btly-typography-label-m-size: var(--btly-number-12); --btly-typography-label-m-line-height: var(--btly-number-16); --btly-typography-label-m-letter-spacing: var(--btly-number-0); --btly-typography-label-s-font: var(--btly-font-family-inter); --btly-typography-label-s-weight: var(--btly-font-weight-medium); --btly-typography-label-s-size: var(--btly-number-10); --btly-typography-label-s-line-height: var(--btly-number-12); --btly-typography-label-s-letter-spacing: var(--btly-number-0); --btly-discipline-math-surface: var(--btly-color-ultraviolet-50); --btly-discipline-math-surface-strong: var(--btly-color-ultraviolet-100); --btly-discipline-math-border: var(--btly-color-ultraviolet-200); --btly-discipline-math-accent: var(--btly-color-ultraviolet-500); --btly-discipline-math-text: var(--btly-color-ultraviolet-600); --btly-discipline-ela-surface: var(--btly-color-sky-50); --btly-discipline-ela-surface-strong: var(--btly-color-sky-100); --btly-discipline-ela-border: var(--btly-color-sky-200); --btly-discipline-ela-accent: var(--btly-color-sky-500); --btly-discipline-ela-text: var(--btly-color-sky-700); --btly-base-white: var(--btly-color-base-white); --btly-base-black: var(--btly-color-base-black); --btly-base-transparent: rgba(0, 0, 0, 0); --btly-effects-shadow: rgba(31, 31, 31, 0.08); --btly-effects-glass-dark: rgba(31, 31, 31, 0.2); --btly-effects-glass-light: rgba(255, 255, 255, 0.8); /* brand palette — illustration / marketing ONLY */ --btly-brand-ultraviolet-50: var(--btly-color-ultraviolet-50); --btly-brand-ultraviolet-100: var(--btly-color-ultraviolet-100); --btly-brand-ultraviolet-200: var(--btly-color-ultraviolet-200); --btly-brand-ultraviolet-300: var(--btly-color-ultraviolet-300); --btly-brand-ultraviolet-400: var(--btly-color-ultraviolet-400); --btly-brand-ultraviolet-600: var(--btly-color-ultraviolet-600); --btly-brand-ultraviolet-800: var(--btly-color-ultraviolet-800); --btly-brand-ultraviolet-950: var(--btly-color-ultraviolet-950); --btly-brand-ultraviolet-500-primary: var(--btly-color-ultraviolet-500); --btly-brand-green-50: var(--btly-color-green-50); --btly-brand-green-100: var(--btly-color-green-100); --btly-brand-green-200: var(--btly-color-green-200); --btly-brand-green-300: var(--btly-color-green-300); --btly-brand-green-400: var(--btly-color-green-400); --btly-brand-green-600: var(--btly-color-green-600); --btly-brand-green-800: var(--btly-color-green-800); --btly-brand-green-950: var(--btly-color-green-950); --btly-brand-green-500-primary: var(--btly-color-green-500); --btly-brand-sky-50: var(--btly-color-sky-50); --btly-brand-sky-100: var(--btly-color-sky-100); --btly-brand-sky-200: var(--btly-color-sky-200); --btly-brand-sky-300: var(--btly-color-sky-300); --btly-brand-sky-400: var(--btly-color-sky-400); --btly-brand-sky-600: var(--btly-color-sky-600); --btly-brand-sky-800: var(--btly-color-sky-800); --btly-brand-sky-950: var(--btly-color-sky-950); --btly-brand-sky-500-primary: var(--btly-color-sky-500); --btly-brand-pink-50: var(--btly-color-pink-50); --btly-brand-pink-100: var(--btly-color-pink-100); --btly-brand-pink-200: var(--btly-color-pink-200); --btly-brand-pink-300: var(--btly-color-pink-300); --btly-brand-pink-400: var(--btly-color-pink-400); --btly-brand-pink-600: var(--btly-color-pink-600); --btly-brand-pink-800: var(--btly-color-pink-800); --btly-brand-pink-950: var(--btly-color-pink-950); --btly-brand-pink-500-primary: var(--btly-color-pink-500); --btly-brand-orange-50: var(--btly-color-orange-50); --btly-brand-orange-100: var(--btly-color-orange-100); --btly-brand-orange-200: var(--btly-color-orange-200); --btly-brand-orange-300: var(--btly-color-orange-300); --btly-brand-orange-400: var(--btly-color-orange-400); --btly-brand-orange-600: var(--btly-color-orange-600); --btly-brand-orange-800: var(--btly-color-orange-800); --btly-brand-orange-950: var(--btly-color-orange-950); --btly-brand-orange-500-primary: var(--btly-color-orange-500); --btly-brand-sunshine-50: var(--btly-color-sunshine-50); --btly-brand-sunshine-100: var(--btly-color-sunshine-100); --btly-brand-sunshine-200: var(--btly-color-sunshine-200); --btly-brand-sunshine-300: var(--btly-color-sunshine-300); --btly-brand-sunshine-400: var(--btly-color-sunshine-400); --btly-brand-sunshine-600: var(--btly-color-sunshine-600); --btly-brand-sunshine-800: var(--btly-color-sunshine-800); --btly-brand-sunshine-950: var(--btly-color-sunshine-950); --btly-brand-sunshine-500-primary: var(--btly-color-sunshine-500); --btly-brand-gray-50: var(--btly-color-gray-50); --btly-brand-gray-100: var(--btly-color-gray-100); --btly-brand-gray-200: var(--btly-color-gray-200); --btly-brand-gray-300: var(--btly-color-gray-300); --btly-brand-gray-400: var(--btly-color-gray-400); --btly-brand-gray-500: var(--btly-color-gray-500); --btly-brand-gray-600: var(--btly-color-gray-600); --btly-brand-gray-800: var(--btly-color-gray-800); --btly-brand-gray-950: var(--btly-color-gray-950); --btly-brand-purple-50: var(--btly-color-purple-50); --btly-brand-purple-100: var(--btly-color-purple-100); --btly-brand-purple-200: var(--btly-color-purple-200); --btly-brand-purple-300: var(--btly-color-purple-300); --btly-brand-purple-400: var(--btly-color-purple-400); --btly-brand-purple-600: var(--btly-color-purple-600); --btly-brand-purple-800: var(--btly-color-purple-800); --btly-brand-purple-950: var(--btly-color-purple-950); --btly-brand-purple-500-primary: var(--btly-color-purple-500); } /* typography — apply a whole text style via one class */ .btly-text-display-xl { font-family: var(--btly-typography-display-xl-font); font-weight: var(--btly-typography-display-xl-weight); font-size: var(--btly-typography-display-xl-size); line-height: var(--btly-typography-display-xl-line-height); letter-spacing: var(--btly-typography-display-xl-letter-spacing); } .btly-text-display-l { font-family: var(--btly-typography-display-l-font); font-weight: var(--btly-typography-display-l-weight); font-size: var(--btly-typography-display-l-size); line-height: var(--btly-typography-display-l-line-height); letter-spacing: var(--btly-typography-display-l-letter-spacing); } .btly-text-display-m { font-family: var(--btly-typography-display-m-font); font-weight: var(--btly-typography-display-m-weight); font-size: var(--btly-typography-display-m-size); line-height: var(--btly-typography-display-m-line-height); letter-spacing: var(--btly-typography-display-m-letter-spacing); } .btly-text-heading-xl { font-family: var(--btly-typography-heading-xl-font); font-weight: var(--btly-typography-heading-xl-weight); font-size: var(--btly-typography-heading-xl-size); line-height: var(--btly-typography-heading-xl-line-height); letter-spacing: var(--btly-typography-heading-xl-letter-spacing); } .btly-text-heading-l { font-family: var(--btly-typography-heading-l-font); font-weight: var(--btly-typography-heading-l-weight); font-size: var(--btly-typography-heading-l-size); line-height: var(--btly-typography-heading-l-line-height); letter-spacing: var(--btly-typography-heading-l-letter-spacing); } .btly-text-heading-m { font-family: var(--btly-typography-heading-m-font); font-weight: var(--btly-typography-heading-m-weight); font-size: var(--btly-typography-heading-m-size); line-height: var(--btly-typography-heading-m-line-height); letter-spacing: var(--btly-typography-heading-m-letter-spacing); } .btly-text-heading-s { font-family: var(--btly-typography-heading-s-font); font-weight: var(--btly-typography-heading-s-weight); font-size: var(--btly-typography-heading-s-size); line-height: var(--btly-typography-heading-s-line-height); letter-spacing: var(--btly-typography-heading-s-letter-spacing); } .btly-text-title-xl { font-family: var(--btly-typography-title-xl-font); font-weight: var(--btly-typography-title-xl-weight); font-size: var(--btly-typography-title-xl-size); line-height: var(--btly-typography-title-xl-line-height); letter-spacing: var(--btly-typography-title-xl-letter-spacing); } .btly-text-title-l { font-family: var(--btly-typography-title-l-font); font-weight: var(--btly-typography-title-l-weight); font-size: var(--btly-typography-title-l-size); line-height: var(--btly-typography-title-l-line-height); letter-spacing: var(--btly-typography-title-l-letter-spacing); } .btly-text-title-m { font-family: var(--btly-typography-title-m-font); font-weight: var(--btly-typography-title-m-weight); font-size: var(--btly-typography-title-m-size); line-height: var(--btly-typography-title-m-line-height); letter-spacing: var(--btly-typography-title-m-letter-spacing); } .btly-text-title-s { font-family: var(--btly-typography-title-s-font); font-weight: var(--btly-typography-title-s-weight); font-size: var(--btly-typography-title-s-size); line-height: var(--btly-typography-title-s-line-height); letter-spacing: var(--btly-typography-title-s-letter-spacing); } .btly-text-body-xl { font-family: var(--btly-typography-body-xl-font); font-weight: var(--btly-typography-body-xl-weight); font-size: var(--btly-typography-body-xl-size); line-height: var(--btly-typography-body-xl-line-height); letter-spacing: var(--btly-typography-body-xl-letter-spacing); } .btly-text-body-l { font-family: var(--btly-typography-body-l-font); font-weight: var(--btly-typography-body-l-weight); font-size: var(--btly-typography-body-l-size); line-height: var(--btly-typography-body-l-line-height); letter-spacing: var(--btly-typography-body-l-letter-spacing); } .btly-text-body-m { font-family: var(--btly-typography-body-m-font); font-weight: var(--btly-typography-body-m-weight); font-size: var(--btly-typography-body-m-size); line-height: var(--btly-typography-body-m-line-height); letter-spacing: var(--btly-typography-body-m-letter-spacing); } .btly-text-body-s { font-family: var(--btly-typography-body-s-font); font-weight: var(--btly-typography-body-s-weight); font-size: var(--btly-typography-body-s-size); line-height: var(--btly-typography-body-s-line-height); letter-spacing: var(--btly-typography-body-s-letter-spacing); } .btly-text-label-m { font-family: var(--btly-typography-label-m-font); font-weight: var(--btly-typography-label-m-weight); font-size: var(--btly-typography-label-m-size); line-height: var(--btly-typography-label-m-line-height); letter-spacing: var(--btly-typography-label-m-letter-spacing); } .btly-text-label-s { font-family: var(--btly-typography-label-s-font); font-weight: var(--btly-typography-label-s-weight); font-size: var(--btly-typography-label-s-size); line-height: var(--btly-typography-label-s-line-height); letter-spacing: var(--btly-typography-label-s-letter-spacing); } /* responsive typography — up-breakpoint role overrides: `md:btly-text-` etc. */ @media (min-width: 740px) { .md\:btly-text-display-xl { font-family: var(--btly-typography-display-xl-font); font-weight: var(--btly-typography-display-xl-weight); font-size: var(--btly-typography-display-xl-size); line-height: var(--btly-typography-display-xl-line-height); letter-spacing: var(--btly-typography-display-xl-letter-spacing); } .md\:btly-text-display-l { font-family: var(--btly-typography-display-l-font); font-weight: var(--btly-typography-display-l-weight); font-size: var(--btly-typography-display-l-size); line-height: var(--btly-typography-display-l-line-height); letter-spacing: var(--btly-typography-display-l-letter-spacing); } .md\:btly-text-display-m { font-family: var(--btly-typography-display-m-font); font-weight: var(--btly-typography-display-m-weight); font-size: var(--btly-typography-display-m-size); line-height: var(--btly-typography-display-m-line-height); letter-spacing: var(--btly-typography-display-m-letter-spacing); } .md\:btly-text-heading-xl { font-family: var(--btly-typography-heading-xl-font); font-weight: var(--btly-typography-heading-xl-weight); font-size: var(--btly-typography-heading-xl-size); line-height: var(--btly-typography-heading-xl-line-height); letter-spacing: var(--btly-typography-heading-xl-letter-spacing); } .md\:btly-text-heading-l { font-family: var(--btly-typography-heading-l-font); font-weight: var(--btly-typography-heading-l-weight); font-size: var(--btly-typography-heading-l-size); line-height: var(--btly-typography-heading-l-line-height); letter-spacing: var(--btly-typography-heading-l-letter-spacing); } .md\:btly-text-heading-m { font-family: var(--btly-typography-heading-m-font); font-weight: var(--btly-typography-heading-m-weight); font-size: var(--btly-typography-heading-m-size); line-height: var(--btly-typography-heading-m-line-height); letter-spacing: var(--btly-typography-heading-m-letter-spacing); } .md\:btly-text-heading-s { font-family: var(--btly-typography-heading-s-font); font-weight: var(--btly-typography-heading-s-weight); font-size: var(--btly-typography-heading-s-size); line-height: var(--btly-typography-heading-s-line-height); letter-spacing: var(--btly-typography-heading-s-letter-spacing); } .md\:btly-text-title-xl { font-family: var(--btly-typography-title-xl-font); font-weight: var(--btly-typography-title-xl-weight); font-size: var(--btly-typography-title-xl-size); line-height: var(--btly-typography-title-xl-line-height); letter-spacing: var(--btly-typography-title-xl-letter-spacing); } .md\:btly-text-title-l { font-family: var(--btly-typography-title-l-font); font-weight: var(--btly-typography-title-l-weight); font-size: var(--btly-typography-title-l-size); line-height: var(--btly-typography-title-l-line-height); letter-spacing: var(--btly-typography-title-l-letter-spacing); } .md\:btly-text-title-m { font-family: var(--btly-typography-title-m-font); font-weight: var(--btly-typography-title-m-weight); font-size: var(--btly-typography-title-m-size); line-height: var(--btly-typography-title-m-line-height); letter-spacing: var(--btly-typography-title-m-letter-spacing); } .md\:btly-text-title-s { font-family: var(--btly-typography-title-s-font); font-weight: var(--btly-typography-title-s-weight); font-size: var(--btly-typography-title-s-size); line-height: var(--btly-typography-title-s-line-height); letter-spacing: var(--btly-typography-title-s-letter-spacing); } .md\:btly-text-body-xl { font-family: var(--btly-typography-body-xl-font); font-weight: var(--btly-typography-body-xl-weight); font-size: var(--btly-typography-body-xl-size); line-height: var(--btly-typography-body-xl-line-height); letter-spacing: var(--btly-typography-body-xl-letter-spacing); } .md\:btly-text-body-l { font-family: var(--btly-typography-body-l-font); font-weight: var(--btly-typography-body-l-weight); font-size: var(--btly-typography-body-l-size); line-height: var(--btly-typography-body-l-line-height); letter-spacing: var(--btly-typography-body-l-letter-spacing); } .md\:btly-text-body-m { font-family: var(--btly-typography-body-m-font); font-weight: var(--btly-typography-body-m-weight); font-size: var(--btly-typography-body-m-size); line-height: var(--btly-typography-body-m-line-height); letter-spacing: var(--btly-typography-body-m-letter-spacing); } .md\:btly-text-body-s { font-family: var(--btly-typography-body-s-font); font-weight: var(--btly-typography-body-s-weight); font-size: var(--btly-typography-body-s-size); line-height: var(--btly-typography-body-s-line-height); letter-spacing: var(--btly-typography-body-s-letter-spacing); } .md\:btly-text-label-m { font-family: var(--btly-typography-label-m-font); font-weight: var(--btly-typography-label-m-weight); font-size: var(--btly-typography-label-m-size); line-height: var(--btly-typography-label-m-line-height); letter-spacing: var(--btly-typography-label-m-letter-spacing); } .md\:btly-text-label-s { font-family: var(--btly-typography-label-s-font); font-weight: var(--btly-typography-label-s-weight); font-size: var(--btly-typography-label-s-size); line-height: var(--btly-typography-label-s-line-height); letter-spacing: var(--btly-typography-label-s-letter-spacing); } } @media (min-width: 1024px) { .lg\:btly-text-display-xl { font-family: var(--btly-typography-display-xl-font); font-weight: var(--btly-typography-display-xl-weight); font-size: var(--btly-typography-display-xl-size); line-height: var(--btly-typography-display-xl-line-height); letter-spacing: var(--btly-typography-display-xl-letter-spacing); } .lg\:btly-text-display-l { font-family: var(--btly-typography-display-l-font); font-weight: var(--btly-typography-display-l-weight); font-size: var(--btly-typography-display-l-size); line-height: var(--btly-typography-display-l-line-height); letter-spacing: var(--btly-typography-display-l-letter-spacing); } .lg\:btly-text-display-m { font-family: var(--btly-typography-display-m-font); font-weight: var(--btly-typography-display-m-weight); font-size: var(--btly-typography-display-m-size); line-height: var(--btly-typography-display-m-line-height); letter-spacing: var(--btly-typography-display-m-letter-spacing); } .lg\:btly-text-heading-xl { font-family: var(--btly-typography-heading-xl-font); font-weight: var(--btly-typography-heading-xl-weight); font-size: var(--btly-typography-heading-xl-size); line-height: var(--btly-typography-heading-xl-line-height); letter-spacing: var(--btly-typography-heading-xl-letter-spacing); } .lg\:btly-text-heading-l { font-family: var(--btly-typography-heading-l-font); font-weight: var(--btly-typography-heading-l-weight); font-size: var(--btly-typography-heading-l-size); line-height: var(--btly-typography-heading-l-line-height); letter-spacing: var(--btly-typography-heading-l-letter-spacing); } .lg\:btly-text-heading-m { font-family: var(--btly-typography-heading-m-font); font-weight: var(--btly-typography-heading-m-weight); font-size: var(--btly-typography-heading-m-size); line-height: var(--btly-typography-heading-m-line-height); letter-spacing: var(--btly-typography-heading-m-letter-spacing); } .lg\:btly-text-heading-s { font-family: var(--btly-typography-heading-s-font); font-weight: var(--btly-typography-heading-s-weight); font-size: var(--btly-typography-heading-s-size); line-height: var(--btly-typography-heading-s-line-height); letter-spacing: var(--btly-typography-heading-s-letter-spacing); } .lg\:btly-text-title-xl { font-family: var(--btly-typography-title-xl-font); font-weight: var(--btly-typography-title-xl-weight); font-size: var(--btly-typography-title-xl-size); line-height: var(--btly-typography-title-xl-line-height); letter-spacing: var(--btly-typography-title-xl-letter-spacing); } .lg\:btly-text-title-l { font-family: var(--btly-typography-title-l-font); font-weight: var(--btly-typography-title-l-weight); font-size: var(--btly-typography-title-l-size); line-height: var(--btly-typography-title-l-line-height); letter-spacing: var(--btly-typography-title-l-letter-spacing); } .lg\:btly-text-title-m { font-family: var(--btly-typography-title-m-font); font-weight: var(--btly-typography-title-m-weight); font-size: var(--btly-typography-title-m-size); line-height: var(--btly-typography-title-m-line-height); letter-spacing: var(--btly-typography-title-m-letter-spacing); } .lg\:btly-text-title-s { font-family: var(--btly-typography-title-s-font); font-weight: var(--btly-typography-title-s-weight); font-size: var(--btly-typography-title-s-size); line-height: var(--btly-typography-title-s-line-height); letter-spacing: var(--btly-typography-title-s-letter-spacing); } .lg\:btly-text-body-xl { font-family: var(--btly-typography-body-xl-font); font-weight: var(--btly-typography-body-xl-weight); font-size: var(--btly-typography-body-xl-size); line-height: var(--btly-typography-body-xl-line-height); letter-spacing: var(--btly-typography-body-xl-letter-spacing); } .lg\:btly-text-body-l { font-family: var(--btly-typography-body-l-font); font-weight: var(--btly-typography-body-l-weight); font-size: var(--btly-typography-body-l-size); line-height: var(--btly-typography-body-l-line-height); letter-spacing: var(--btly-typography-body-l-letter-spacing); } .lg\:btly-text-body-m { font-family: var(--btly-typography-body-m-font); font-weight: var(--btly-typography-body-m-weight); font-size: var(--btly-typography-body-m-size); line-height: var(--btly-typography-body-m-line-height); letter-spacing: var(--btly-typography-body-m-letter-spacing); } .lg\:btly-text-body-s { font-family: var(--btly-typography-body-s-font); font-weight: var(--btly-typography-body-s-weight); font-size: var(--btly-typography-body-s-size); line-height: var(--btly-typography-body-s-line-height); letter-spacing: var(--btly-typography-body-s-letter-spacing); } .lg\:btly-text-label-m { font-family: var(--btly-typography-label-m-font); font-weight: var(--btly-typography-label-m-weight); font-size: var(--btly-typography-label-m-size); line-height: var(--btly-typography-label-m-line-height); letter-spacing: var(--btly-typography-label-m-letter-spacing); } .lg\:btly-text-label-s { font-family: var(--btly-typography-label-s-font); font-weight: var(--btly-typography-label-s-weight); font-size: var(--btly-typography-label-s-size); line-height: var(--btly-typography-label-s-line-height); letter-spacing: var(--btly-typography-label-s-letter-spacing); } } @media (min-width: 1280px) { .xl\:btly-text-display-xl { font-family: var(--btly-typography-display-xl-font); font-weight: var(--btly-typography-display-xl-weight); font-size: var(--btly-typography-display-xl-size); line-height: var(--btly-typography-display-xl-line-height); letter-spacing: var(--btly-typography-display-xl-letter-spacing); } .xl\:btly-text-display-l { font-family: var(--btly-typography-display-l-font); font-weight: var(--btly-typography-display-l-weight); font-size: var(--btly-typography-display-l-size); line-height: var(--btly-typography-display-l-line-height); letter-spacing: var(--btly-typography-display-l-letter-spacing); } .xl\:btly-text-display-m { font-family: var(--btly-typography-display-m-font); font-weight: var(--btly-typography-display-m-weight); font-size: var(--btly-typography-display-m-size); line-height: var(--btly-typography-display-m-line-height); letter-spacing: var(--btly-typography-display-m-letter-spacing); } .xl\:btly-text-heading-xl { font-family: var(--btly-typography-heading-xl-font); font-weight: var(--btly-typography-heading-xl-weight); font-size: var(--btly-typography-heading-xl-size); line-height: var(--btly-typography-heading-xl-line-height); letter-spacing: var(--btly-typography-heading-xl-letter-spacing); } .xl\:btly-text-heading-l { font-family: var(--btly-typography-heading-l-font); font-weight: var(--btly-typography-heading-l-weight); font-size: var(--btly-typography-heading-l-size); line-height: var(--btly-typography-heading-l-line-height); letter-spacing: var(--btly-typography-heading-l-letter-spacing); } .xl\:btly-text-heading-m { font-family: var(--btly-typography-heading-m-font); font-weight: var(--btly-typography-heading-m-weight); font-size: var(--btly-typography-heading-m-size); line-height: var(--btly-typography-heading-m-line-height); letter-spacing: var(--btly-typography-heading-m-letter-spacing); } .xl\:btly-text-heading-s { font-family: var(--btly-typography-heading-s-font); font-weight: var(--btly-typography-heading-s-weight); font-size: var(--btly-typography-heading-s-size); line-height: var(--btly-typography-heading-s-line-height); letter-spacing: var(--btly-typography-heading-s-letter-spacing); } .xl\:btly-text-title-xl { font-family: var(--btly-typography-title-xl-font); font-weight: var(--btly-typography-title-xl-weight); font-size: var(--btly-typography-title-xl-size); line-height: var(--btly-typography-title-xl-line-height); letter-spacing: var(--btly-typography-title-xl-letter-spacing); } .xl\:btly-text-title-l { font-family: var(--btly-typography-title-l-font); font-weight: var(--btly-typography-title-l-weight); font-size: var(--btly-typography-title-l-size); line-height: var(--btly-typography-title-l-line-height); letter-spacing: var(--btly-typography-title-l-letter-spacing); } .xl\:btly-text-title-m { font-family: var(--btly-typography-title-m-font); font-weight: var(--btly-typography-title-m-weight); font-size: var(--btly-typography-title-m-size); line-height: var(--btly-typography-title-m-line-height); letter-spacing: var(--btly-typography-title-m-letter-spacing); } .xl\:btly-text-title-s { font-family: var(--btly-typography-title-s-font); font-weight: var(--btly-typography-title-s-weight); font-size: var(--btly-typography-title-s-size); line-height: var(--btly-typography-title-s-line-height); letter-spacing: var(--btly-typography-title-s-letter-spacing); } .xl\:btly-text-body-xl { font-family: var(--btly-typography-body-xl-font); font-weight: var(--btly-typography-body-xl-weight); font-size: var(--btly-typography-body-xl-size); line-height: var(--btly-typography-body-xl-line-height); letter-spacing: var(--btly-typography-body-xl-letter-spacing); } .xl\:btly-text-body-l { font-family: var(--btly-typography-body-l-font); font-weight: var(--btly-typography-body-l-weight); font-size: var(--btly-typography-body-l-size); line-height: var(--btly-typography-body-l-line-height); letter-spacing: var(--btly-typography-body-l-letter-spacing); } .xl\:btly-text-body-m { font-family: var(--btly-typography-body-m-font); font-weight: var(--btly-typography-body-m-weight); font-size: var(--btly-typography-body-m-size); line-height: var(--btly-typography-body-m-line-height); letter-spacing: var(--btly-typography-body-m-letter-spacing); } .xl\:btly-text-body-s { font-family: var(--btly-typography-body-s-font); font-weight: var(--btly-typography-body-s-weight); font-size: var(--btly-typography-body-s-size); line-height: var(--btly-typography-body-s-line-height); letter-spacing: var(--btly-typography-body-s-letter-spacing); } .xl\:btly-text-label-m { font-family: var(--btly-typography-label-m-font); font-weight: var(--btly-typography-label-m-weight); font-size: var(--btly-typography-label-m-size); line-height: var(--btly-typography-label-m-line-height); letter-spacing: var(--btly-typography-label-m-letter-spacing); } .xl\:btly-text-label-s { font-family: var(--btly-typography-label-s-font); font-weight: var(--btly-typography-label-s-weight); font-size: var(--btly-typography-label-s-size); line-height: var(--btly-typography-label-s-line-height); letter-spacing: var(--btly-typography-label-s-letter-spacing); } } /* Histoire playground frame — base typography + .story-page/.story-section layout. */ /* No `body { background }` here — Histoire forces body to transparent. * Canvas paint lives on .canvas-wrapper (see CanvasWrapper.vue). */ html, body { margin: 0; padding: 0; font-family: var(--btly-font-family-inter), system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: var(--btly-color-gray-900); } /* NO global reset here — the playground is the hostile-environment canary: DS components * must own their box (see docs/ARCHITECTURE.md). Playground chrome resets itself locally. */ /* Histoire renders each story's `#controls` slot by mounting the story component through the global * CanvasWrapper (addWrapper in histoire.setup.ts). That wrapper paints the canvas white + gray-900 * text for the STORY, but the same paint lands INSIDE the Controls panel too — white control rows, * dark-on-dark hover text, invisible white checkboxes, mis-themed dropdowns. Neutralise it there. * `!important` is required: this selector ties on specificity (0,2,0) with CanvasWrapper's own scoped * rule `.canvas-wrapper[data-v-*]`, so without it the component style wins the source-order tie and * the panel stays white. `.histoire-story-controls` is Histoire-internal (like `.bind-preview-bg`) — * re-check on a Histoire upgrade. Never touches the real canvas (no `.histoire-story-controls` there). */ .histoire-story-controls .canvas-wrapper { min-height: 0 !important; background: transparent !important; color: inherit !important; } /* HstSelect's option list is a floating-vue dropdown (`CustomSelect`, not a native itself — no .field wrapper (no icons/slots). The scoped * element selector outweighs the global .btly-text-heading-s class, so the letter-spacing * below wins over the text style's 0 (Figma: 4px gap between the digit glyphs). */ .input-otp input[data-v-786d8f87] { width: 100%; margin: 0; padding: var(--btly-space-12); border: var(--btly-border-width-1) solid var(--btly-border-strong); border-radius: var(--btly-radius-12); background: var(--btly-surface-canvas); /* Figma "1dp shadow" effect style — effects are not in the token export (designer flagged). */ box-shadow: 0 1px 2px 0 rgba(15, 23, 43, 0.05); color: var(--btly-text-primary); text-align: center; letter-spacing: var(--btly-space-4); outline: 0; } .input-otp input[data-v-786d8f87]::placeholder { color: var(--btly-text-placeholder); } @media (hover: hover) { .input-otp:not(.error):not(.success) input[data-v-786d8f87]:hover { border-color: var(--btly-border-brand); } } /* Scoped to "no status": a red/green field must keep its own colour and show no halo. Guarding the rule beats overriding it — the unguarded form tied `.input-otp.error input` on specificity and only lost by sitting earlier in the file. */ .input-otp:not(.error):not(.success) input[data-v-786d8f87]:focus { border-color: var(--btly-border-brand); box-shadow: 0 0 0 2px var(--btly-border-focus-halo); } .input-otp.error input[data-v-786d8f87] { border-color: var(--btly-status-error-accent); } .input-otp.success input[data-v-786d8f87] { border-color: var(--btly-status-success-accent); } /* No shadow in these states — neither the 1dp resting one nor the focus halo. */ .input-otp.error input[data-v-786d8f87], .input-otp.success input[data-v-786d8f87] { box-shadow: none; } .input-otp.disabled input[data-v-786d8f87] { background: var(--btly-surface-secondary); border-color: var(--btly-border-default); color: var(--btly-text-disabled); cursor: not-allowed; } /*

carries a UA margin-block:1em — reset it; the field→description spacing is the root gap only. */ .description[data-v-786d8f87] { margin: 0; color: var(--btly-text-tertiary); } .description.is-error[data-v-786d8f87] { color: var(--btly-status-error-text); } .cell[data-v-9a4af4d5] { display: flex; flex-direction: column; gap: 8px; } .cap[data-v-9a4af4d5] { margin: 0; font-size: 12px; color: var(--btly-text-tertiary); } .pg[data-v-9a4af4d5] { display: flex; flex-direction: column; gap: 16px; width: 260px; } /* InputPhone — geometry from the InputPhone instance in StepRegistration screenType=StepPhoneNumber. Field chrome mirrors Input/Select; the internal split ([flag ⌄] | +1 | number) is this component's own, with the asymmetric paddings Figma draws. Tokens only. */ .input-phone[data-v-5691ff8e], .input-phone[data-v-5691ff8e] * { box-sizing: border-box; } .input-phone[data-v-5691ff8e] { display: flex; flex-direction: column; gap: var(--btly-space-2); width: 100%; } .label-row[data-v-5691ff8e] { display: flex; align-items: center; justify-content: space-between; gap: var(--btly-space-8); } .label-row label[data-v-5691ff8e] { color: var(--btly-text-secondary); } .req[data-v-5691ff8e] { margin-left: var(--btly-space-2); color: var(--btly-text-brand); } .optional[data-v-5691ff8e] { color: var(--btly-text-tertiary); } /* Figma clips this box; we do not — the country panel is a child and clipping would hide it, and a 2px focus halo would be cut at the edge. Nothing else here overflows. */ .field[data-v-5691ff8e] { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; border: var(--btly-border-width-1) solid var(--btly-border-strong); border-radius: var(--btly-radius-10); background: var(--btly-surface-canvas); box-shadow: 0 1px 2px 0 rgba(15, 23, 43, 0.05); } @media (hover: hover) { .field[data-v-5691ff8e]:hover { border-color: var(--btly-border-brand); } } .field[data-v-5691ff8e]:focus-within { border-color: var(--btly-border-brand); box-shadow: 0 0 0 2px var(--btly-border-focus-halo); } /* Country trigger: pl space-12 / pr space-4, gap space-4 (Figma `prependIcon`). */ .country[data-v-5691ff8e] { display: inline-flex; align-items: center; flex-shrink: 0; gap: var(--btly-space-4); margin: 0; padding: var(--btly-space-10) var(--btly-space-4) var(--btly-space-10) var(--btly-space-12); border: 0; background: transparent; appearance: none; font: inherit; color: var(--btly-icon-muted); cursor: pointer; } .country[data-v-5691ff8e]:disabled { cursor: default; color: var(--btly-icon-disabled); } /* The focus ring belongs to the whole field; the trigger only needs to not draw a second one. */ .country[data-v-5691ff8e]:focus-visible { outline: 0; } /* 24x24 emoji box (Figma `flags` instance). Font-size drives the glyph; the box keeps the row height stable when a platform falls back to the two ISO letters. */ .flag[data-v-5691ff8e] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--btly-space-24); height: var(--btly-space-24); font-size: 18px; line-height: 1; } .chevron[data-v-5691ff8e] { flex-shrink: 0; } /* Number area: pl space-4 / pr space-8, gap space-8 (Figma `Frame 1813`). */ .number[data-v-5691ff8e] { display: flex; align-items: center; align-self: stretch; flex: 1 0 0; min-width: 0; gap: var(--btly-space-8); padding: var(--btly-space-10) var(--btly-space-8) var(--btly-space-10) var(--btly-space-4); } .dial[data-v-5691ff8e] { flex-shrink: 0; color: var(--btly-text-tertiary); } .number input[data-v-5691ff8e] { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--btly-text-primary); } .number input[data-v-5691ff8e]::placeholder { color: var(--btly-text-placeholder); } /* Figma binds `status//accent` here, not `status//border` — the latter is the pale -200 tint. */ .input-phone.error .field[data-v-5691ff8e] { border-color: var(--btly-status-error-accent); } .input-phone.success .field[data-v-5691ff8e] { border-color: var(--btly-status-success-accent); } /* No shadow at all in these states — neither the 1dp resting shadow nor the focus halo. Beats `.field:focus-within` on specificity (0,3,0 vs 0,2,0), so focusing an errored field adds nothing. */ .input-phone.error .field[data-v-5691ff8e], .input-phone.success .field[data-v-5691ff8e] { box-shadow: none; } .input-phone.disabled .field[data-v-5691ff8e] { border-color: var(--btly-border-default); background: var(--btly-surface-secondary); } .input-phone.disabled .dial[data-v-5691ff8e], .input-phone.disabled .number input[data-v-5691ff8e] { color: var(--btly-text-disabled); } .input-phone.disabled .label-row label[data-v-5691ff8e] { color: var(--btly-text-tertiary); } /*

carries a UA margin-block:1em — reset it; field→hint spacing is the root gap only. */ .description[data-v-5691ff8e] { margin: 0; color: var(--btly-text-tertiary); } .description.is-error[data-v-5691ff8e] { color: var(--btly-status-error-text); } /* Rule closing the pinned-countries group. */ .sep[data-v-5691ff8e] { display: block; height: var(--btly-border-width-1); margin: var(--btly-space-4) 0; background: var(--btly-border-default); } /* Positioning only — the visual panel is the DS Dropdown inside. */ .panel[data-v-5691ff8e] { position: absolute; top: calc(100% + var(--btly-space-4)); left: 0; right: 0; z-index: 10; } .pg[data-v-6ecffa0a] { width: 343px; } .evt[data-v-6ecffa0a] { margin-top: 8px; color: #737373; font-size: 12px; word-break: break-all; } .item[data-v-b61e85e2], .item[data-v-b61e85e2] * { box-sizing: border-box; } /* Figma draws the stroke INSIDE the 148x48 frame, where it costs no layout space. Reproduced the way `ItemAnswerHorizontal.css` and `Button.css` do it: a REAL border with its width SUBTRACTED FROM THE PADDING, so 10.5 + 1.5 = the drawn 12 and the box still measures 48 tall. A real border also makes the stroke a `border-color`, i.e. a property that TRANSITIONS — an inset box-shadow could not fade without fading the ring it shares. 1.5 in EVERY state, deliberately: the design binds `border-width/1-5` only on selected/pressed and leaves static/hover on a raw 1, which would shift the content 0.5px on select (brief §9-1). The ring stays in `box-shadow`, where it must never fade. */ .item[data-v-b61e85e2] { --item-ring: 0 0 0 0 transparent; display: inline-flex; align-items: center; gap: var(--btly-space-8); min-height: 48px; margin: 0; padding: calc(var(--btly-space-12) - var(--btly-border-width-1-5)); border: var(--btly-border-width-1-5) solid var(--btly-border-default); border-radius: var(--btly-radius-12); background: var(--btly-base-white); box-shadow: var(--item-ring); appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: left; overflow: hidden; } /* Hover fades, press is instant — the convention + why lives in ARCHITECTURE.md "States". `box-shadow` stays out of the property list: it carries the ring, and a focus ring that fades in is an a11y regression. */ @media (hover: hover) { .item[data-v-b61e85e2] { transition: background-color 80ms ease-in-out, border-color 80ms ease-in-out; } /* A tap must land instantly; `.selected` arrives while `:active` still holds, so a selection is instant end-to-end. */ .item[data-v-b61e85e2]:active { transition: none; } } @media (prefers-reduced-motion: reduce) { .item[data-v-b61e85e2] { transition: none; } } /* Hover keeps the default stroke — only the fill changes, as drawn. */ @media (hover: hover) { .item[data-v-b61e85e2]:hover { background: var(--btly-surface-brand); } } /* The design gives `selected` the same 2px halo the DS uses for focus, so the two agree by construction rather than by coincidence — no separate glow is drawn here. */ .item[data-v-b61e85e2]:active, .item.selected[data-v-b61e85e2], .item[data-v-b61e85e2]:focus-visible { border-color: var(--btly-border-brand); --item-ring: 0 0 0 2px var(--btly-border-focus-halo); } .item[data-v-b61e85e2]:active, .item.selected[data-v-b61e85e2] { background: var(--btly-surface-brand); } .item[data-v-b61e85e2]:focus-visible { outline: 2px solid transparent; } @media (forced-colors: active) { .item[data-v-b61e85e2] { outline: 1px solid; outline-offset: -1px; } } /* Present only when it has something to show — consumer content, or the check on `selected`. NOT reserved the way ItemAnswerHorizontal reserves it: an unchosen pill would otherwise carry 24px of dead space on its right, and a row of them is meant to pack tight. `min-width` rather than `width` so a taller/wider swapped-in instance can grow the box. */ .slot-box[data-v-b61e85e2] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: var(--btly-space-24); height: var(--btly-space-24); } /* A colour emoji paints from its own font, so this is inert for the drawn glyph — it exists for a text-presentation character. The design fills this layer `pink/400`, a brand entry with no visual effect (brief §9-2); black is what the sibling component ships. */ .emoji[data-v-b61e85e2] { flex-shrink: 0; color: var(--btly-base-black); white-space: nowrap; } /* One line, never two: the pill takes its width from the copy, and that is what makes a row of them wrap like chips instead of stacking. */ .title[data-v-b61e85e2] { color: var(--btly-text-primary); white-space: nowrap; } /* No opacity trick here: the box itself only exists once there is a check to put in it. */ .check[data-v-b61e85e2] { font-size: 16px; color: var(--btly-icon-brand); } .gallery[data-v-ebc71494] { display: flex; flex-direction: column; gap: var(--btly-space-24); } .cell[data-v-ebc71494] { display: flex; flex-direction: column; gap: var(--btly-space-8); } .cap[data-v-ebc71494] { margin: 0; font-size: 12px; color: var(--btly-text-tertiary); } .row[data-v-ebc71494] { display: flex; flex-wrap: wrap; gap: var(--btly-space-8); } /* The wrapping, centred row the design lays a question out in. */ .answers[data-v-ebc71494] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--btly-space-8); } /* Demo stand-ins for slot content the DS does not own — token-built, playground only. */ .demo-leading[data-v-ebc71494] { width: 24px; height: 24px; border-radius: var(--btly-radius-8); background: var(--btly-surface-tertiary); } .demo-trailing[data-v-ebc71494] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--btly-radius-full); background: var(--btly-surface-brand); color: var(--btly-text-brand); font-size: 12px; } .item[data-v-a4eaed5a], .item[data-v-a4eaed5a] * { box-sizing: border-box; } /* Figma draws the 1.5px stroke INSIDE the 343x72 frame, where it costs no layout space. This was an inset `box-shadow` until 2026-08-21 for exactly that reason — a plain `border` grew the auto height to 75 and shrank the text box, wrapping answers that fit in the design. It is a REAL border now, with the growth SUBTRACTED FROM THE PADDING — the trick `Button.css` already uses for the same inside-aligned stroke. Both axes come out identical to the shadow version (18.5 + 1.5 = the drawn 20; content 343 - 3 - 25 = the same 315), and the stroke becomes a `border-color`, i.e. a property that TRANSITIONS. Under the inset shadow it could not: the colour lived inside a `box-shadow` that also carries the focus ring, so fading it would have faded the ring — which is why this row felt abrupt on select while ItemAnswerVertical (a real border all along) felt smooth. The two are structurally the same component now. Ring and glow stay in `box-shadow`, where they belong: they must never fade. */ .item[data-v-a4eaed5a] { --item-ring: 0 0 0 0 transparent; --item-glow: 0 0 0 0 transparent; display: flex; align-items: center; width: 100%; margin: 0; gap: var(--btly-space-12); padding: calc(var(--btly-space-20) - var(--btly-border-width-1-5)) calc(var(--btly-space-12) - var(--btly-border-width-1-5)) calc(var(--btly-space-20) - var(--btly-border-width-1-5)) calc(var(--btly-space-16) - var(--btly-border-width-1-5)); border: var(--btly-border-width-1-5) solid var(--btly-border-default); border-radius: var(--btly-radius-16); background: var(--btly-base-white); box-shadow: var(--item-ring), var(--item-glow); appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: left; overflow: hidden; } /* Hover fades, press is instant — the convention + why lives in ARCHITECTURE.md "States". `box-shadow` stays OUT of the property list, as everywhere: it carries the focus ring and the selected glow, and a focus ring that fades in is an a11y regression. Since 2026-08-21 that costs nothing here — the stroke moved to a real `border`, so `border-color` fades with the fill exactly as in ItemAnswerVertical. */ @media (hover: hover) { .item[data-v-a4eaed5a] { transition: background-color 80ms ease-in-out, border-color 80ms ease-in-out, color 80ms ease-in-out; } /* A tap must land instantly; `.selected` arrives while `:active` still holds, so a selection is instant end-to-end. */ .item[data-v-a4eaed5a]:active { transition: none; } } @media (prefers-reduced-motion: reduce) { .item[data-v-a4eaed5a] { transition: none; } } /* Hover keeps the default stroke — only the fill changes, as drawn. */ @media (hover: hover) { .item[data-v-a4eaed5a]:hover { background: var(--btly-surface-brand); } } .item[data-v-a4eaed5a]:active, .item.selected[data-v-a4eaed5a], .item[data-v-a4eaed5a]:focus-visible { border-color: var(--btly-border-brand); --item-ring: 0 0 0 2px var(--btly-border-focus-halo); } .item[data-v-a4eaed5a]:active, .item.selected[data-v-a4eaed5a] { background: var(--btly-surface-brand); } .item.selected[data-v-a4eaed5a] { --item-glow: 0 0 8px 0 var(--btly-border-focus-halo); } .item[data-v-a4eaed5a]:focus-visible { outline: 2px solid transparent; } /* Kept from the inset-shadow era, when forced-colors dropped the edge entirely. A real `border` survives that mode (it takes a system colour), so this is a second guarantee now rather than the only one — harmless, costs no layout, left in place deliberately. */ @media (forced-colors: active) { .item[data-v-a4eaed5a] { outline: 1px solid; outline-offset: -1px; } } /* Hugs the slot content with the check's 24px box as the FLOOR — Figma's trailing box is an auto-layout hug, so swapping the instance (the reading-level step puts a 64px LevelDiagram here) widens the box. A fixed 24 crushed that diagram to 7px bars. */ .slot-box[data-v-a4eaed5a] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: var(--btly-space-24); height: var(--btly-space-24); } .emoji[data-v-a4eaed5a] { flex-shrink: 0; color: var(--btly-base-black); white-space: nowrap; } .text[data-v-a4eaed5a] { display: flex; flex-direction: column; gap: var(--btly-space-2); flex: 1 0 0; min-width: 1px; } .title[data-v-a4eaed5a] { color: var(--btly-text-primary); } .description[data-v-a4eaed5a] { color: var(--btly-text-secondary); } .check[data-v-a4eaed5a] { font-size: 16px; color: var(--btly-action-primary-default); opacity: 0; } .item:active .check[data-v-a4eaed5a], .item.selected .check[data-v-a4eaed5a] { opacity: 1; } /* Flex-wrap grid: ~2 cards per row (capped via max-width), wrapping to 1 on a * narrow pane. The frame's padding gives the selected/pressed focus-halo shadow * room so it isn't clipped. */ .gallery[data-v-2055417e] { display: flex; flex-wrap: wrap; gap: 16px; max-width: 760px; } .cell[data-v-2055417e] { display: flex; flex-direction: column; gap: 8px; flex: 1 1 280px; min-width: 0; max-width: 360px; } .cap[data-v-2055417e] { margin: 0; font-size: 12px; color: var(--btly-text-tertiary); } /* width:165px / height:88px are raw Figma values with no bound token (component * constants, like the Checkbox's 20px box). */ .item[data-v-00f4278d], .item[data-v-00f4278d] * { box-sizing: border-box; } .item[data-v-00f4278d] { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 165px; min-height: 72px; margin: 0; gap: var(--btly-space-8); padding: var(--btly-space-16); border: var(--btly-border-width-1-5) solid var(--btly-border-default); border-radius: var(--btly-radius-20); background: var(--btly-base-white); appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: center; overflow: hidden; } /* Hover fades, press is instant — the convention + why lives in ARCHITECTURE.md "States". `box-shadow` stays OUT of the property list, as everywhere else: it also carries the focus ring and the selected glow, and a focus ring that fades in is an a11y regression. Nothing is lost on the hover path — hover moves the FILL only. On deselect the tint fades while the ring leaves at once; at 80ms that reads as one snap. */ @media (hover: hover) { .item[data-v-00f4278d] { transition: background-color 80ms ease-in-out, border-color 80ms ease-in-out, color 80ms ease-in-out; } /* A tap must land instantly; `.selected` arrives while `:active` still holds, so a selection is instant end-to-end. */ .item[data-v-00f4278d]:active { transition: none; } } @media (prefers-reduced-motion: reduce) { .item[data-v-00f4278d] { transition: none; } } @media (hover: hover) { .item[data-v-00f4278d]:hover { background: var(--btly-surface-brand); } } /* :active and .selected share styling — matches the Figma Pressed/Selected variants. */ .item[data-v-00f4278d]:active, .item.selected[data-v-00f4278d] { background: var(--btly-surface-brand); border-color: var(--btly-border-brand); box-shadow: 0 0 0 2px var(--btly-border-focus-halo), 0 0 8px 0 var(--btly-border-focus-halo); } /* Radius stays 20 in ALL states. Figma's Selected variant still shows radius/16 — judged a * designer oversight (Pressed/Selected share every other style; the corner would visibly * morph on select). Maintainer decision 2026-07-07; flagged to the designer to fix in Figma. */ .item[data-v-00f4278d]:focus-visible { outline: 2px solid transparent; border-color: var(--btly-border-brand); box-shadow: 0 0 0 2px var(--btly-border-focus-halo), 0 0 8px 0 var(--btly-border-focus-halo); } /* Background uses brand palette — no semantic token exists for this decorative * surface, and primitives are forbidden (maintainer decision, see spec §5). * The base rule pins the `pink` default so an out-of-contract `color` (plain-JS * consumers) degrades to the default tint instead of a transparent box. * * `min-height`, not `height`: Figma models this box as the `emojiContainer` SLOT, and a slot hugs * what the consumer puts in it — the drawn 88 is padding 16 + the emoji's 56 line box, i.e. the * FLOOR, not a cap. With a glyph the box still resolves to exactly 88 (the line box is shorter, so * the floor wins), so every emoji call site is pixel-identical; a taller media child — a photo * answer tile, drawn 127 — now grows the box instead of being squashed. * `overflow: hidden` makes the declared radius load-bearing: `.item`'s own clip is the outer * radius/20 card, so without this a slot image would paint over these rounded corners. */ .emoji[data-v-00f4278d] { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 88px; border-radius: var(--btly-radius-16); background: var(--btly-brand-pink-200); overflow: hidden; } .emoji.is-pink[data-v-00f4278d] { background: var(--btly-brand-pink-200); } .emoji.is-sky[data-v-00f4278d] { background: var(--btly-brand-sky-200); } .emoji.is-green[data-v-00f4278d] { background: var(--btly-brand-green-200); } .emoji.is-sunshine[data-v-00f4278d] { background: var(--btly-brand-sunshine-200); } .emoji.is-orange[data-v-00f4278d] { background: var(--btly-brand-orange-200); } .emoji.is-ultraviolet[data-v-00f4278d] { background: var(--btly-brand-ultraviolet-200); } .emoji.is-gray[data-v-00f4278d] { background: var(--btly-brand-gray-200); } /* No gap — title/description line-heights provide the spacing (Figma gap-0). */ .text[data-v-00f4278d] { display: flex; flex-direction: column; align-items: center; width: 100%; } .title[data-v-00f4278d] { color: var(--btly-text-primary); } .description[data-v-00f4278d] { color: var(--btly-text-tertiary); } /* The frame's padding gives the selected/pressed focus-halo shadow room so it isn't clipped. */ .gallery[data-v-a0b278e7] { display: flex; flex-wrap: wrap; gap: 16px; max-width: 760px; } .cell[data-v-a0b278e7] { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .cell.wide[data-v-a0b278e7] { flex: 1 1 100%; } .row[data-v-a0b278e7] { display: flex; flex-wrap: wrap; gap: 16px; } .cap[data-v-a0b278e7] { margin: 0; font-size: 12px; color: var(--btly-text-tertiary); } /* Demo stand-in for media the DS does not ship: a 127-tall silhouette, the height the exp-139 reading tiles draw. Tokens only — it exists to make the box's hug visible, nothing else. */ .demo-photo[data-v-a0b278e7] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; height: 127px; padding-top: 16px; } .demo-photo__head[data-v-a0b278e7] { width: 40px; height: 40px; border-radius: var(--btly-radius-full); background: var(--btly-icon-muted); } .demo-photo__body[data-v-a0b278e7] { width: 72px; height: 56px; border-radius: var(--btly-radius-16) var(--btly-radius-16) 0 0; background: var(--btly-icon-muted); } /* 32/26 are raw component constants — unbound in Figma, not on the space scale (like TutorAvatar's 42 and CardReviewAvatar's 20). Figma binds radius/full directly. */ .kid-avatar[data-v-b0032a78], .kid-avatar[data-v-b0032a78] * { box-sizing: border-box; } .kid-avatar[data-v-b0032a78] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; padding: 0; border: none; border-radius: var(--btly-radius-full); appearance: none; font: inherit; color: var(--btly-text-inverse); cursor: pointer; overflow: hidden; } .kid-avatar.is-lg[data-v-b0032a78] { width: 32px; height: 32px; border: var(--btly-border-width-2) solid var(--btly-border-inverse); } /* sm ships without the ring border in Figma (which draws sm/default only); the state rings below still apply to sm — maintainer's a11y decision re-confirmed 2026-07-30. */ .kid-avatar.is-sm[data-v-b0032a78] { width: 26px; height: 26px; } .initials[data-v-b0032a78] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) { .kid-avatar[data-v-b0032a78]:hover { border-color: var(--btly-brand-ultraviolet-100); /* Figma "1dp shadow" effect style — effects are not in the token export (designer flagged). */ box-shadow: 0 1px 2px 0 rgba(15, 23, 43, 0.05); } .kid-avatar.selected[data-v-b0032a78]:hover { border-color: var(--btly-border-inverse); } } .kid-avatar[data-v-b0032a78]:active { box-shadow: 0 0 0 2px var(--btly-brand-ultraviolet-200); } .kid-avatar.selected[data-v-b0032a78] { box-shadow: 0 0 0 2px var(--btly-brand-ultraviolet-400); } .kid-avatar[data-v-b0032a78]:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--btly-border-focus-halo); } /* Circle fill per hue (brand palette — decorative surface; all bind 500-primary except gray). */ .kid-avatar.is-pink[data-v-b0032a78] { background: var(--btly-brand-pink-500-primary); } .kid-avatar.is-sky[data-v-b0032a78] { background: var(--btly-brand-sky-500-primary); } .kid-avatar.is-sunshine[data-v-b0032a78] { background: var(--btly-brand-sunshine-500-primary); } .kid-avatar.is-green[data-v-b0032a78] { background: var(--btly-brand-green-500-primary); } .kid-avatar.is-orange[data-v-b0032a78] { background: var(--btly-brand-orange-500-primary); } .kid-avatar.is-ultraviolet[data-v-b0032a78] { background: var(--btly-brand-ultraviolet-500-primary); } .kid-avatar.is-gray[data-v-b0032a78] { background: var(--btly-brand-gray-500); } .row[data-v-f083e6dc] { display: flex; align-items: center; gap: 12px; } .cell[data-v-f083e6dc] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .cap[data-v-f083e6dc] { margin: 0; font-size: 12px; color: var(--btly-text-tertiary); } .level[data-v-3eb35b53], .level[data-v-3eb35b53] * { box-sizing: border-box; } .level[data-v-3eb35b53] { /* Intrinsic geometry, like an icon glyph: it must never shrink to a host box — squeezed bars read as a different diagram. The host is expected to hug (ItemAnswerHorizontal's slot-box). */ flex-shrink: 0; display: inline-flex; align-items: flex-end; justify-content: center; gap: var(--btly-space-2); width: 64px; height: 24px; background: var(--btly-base-transparent); } .bar[data-v-3eb35b53] { flex: 1 0 0; min-width: 1px; border-radius: var(--btly-radius-4) var(--btly-radius-4) var(--btly-radius-2) var(--btly-radius-2); } /* Intrinsic diagram geometry (like an icon glyph size) — Figma binds these as raw px. */ .bar[data-v-3eb35b53]:nth-child(1) { height: 10px; } .bar[data-v-3eb35b53]:nth-child(2) { height: 18px; } .bar[data-v-3eb35b53]:nth-child(3) { height: 24px; } .bar.empty[data-v-3eb35b53] { background: var(--btly-action-primary-disabled); } .bar.filled[data-v-3eb35b53] { background: var(--btly-action-accent-default); } .level.full .bar.filled[data-v-3eb35b53] { background: var(--btly-status-success-accent); } .stack[data-v-ee97f1bf] { display: flex; flex-direction: column; gap: 16px; padding: 16px; } .row[data-v-ee97f1bf] { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .row.dark[data-v-ee97f1bf], .stack.dark[data-v-ee97f1bf] { background: var(--btly-brand-gray-950); border-radius: 8px; } .list-answers[data-v-7f269f64], .list-answers[data-v-7f269f64] * { box-sizing: border-box; } .list-answers[data-v-7f269f64] { display: flex; flex-direction: column; gap: var(--btly-space-12); } .description[data-v-7f269f64] { color: var(--btly-text-secondary); text-align: center; } .answers[data-v-7f269f64] { display: flex; gap: var(--btly-space-12); } .answers.list[data-v-7f269f64] { flex-direction: column; } .answers.grid[data-v-7f269f64] { flex-wrap: wrap; justify-content: center; } .disclaimer[data-v-7f269f64] { color: var(--btly-text-secondary); text-align: center; } /* Consumer-provided links inside the disclaimer get the brand link style. */ .disclaimer[data-v-7f269f64] a { color: var(--btly-text-brand); text-decoration: underline; } /* One

: the sentence is inline text, the links row is a block-level child. 292px in Figma is a * canvas convenience — the block fills its parent (16+2+16 = 34 at one line, 32+2+16 = 50 at two). */ .agreement[data-v-e35ea88c], .agreement[data-v-e35ea88c] * { box-sizing: border-box; } .agreement[data-v-e35ea88c] { margin: 0; width: 100%; color: var(--btly-text-secondary); text-align: center; word-break: break-word; } /* Own line, centred, carrying the root's vertical space/2 as the separation from the sentence. */ .links[data-v-e35ea88c] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--btly-space-4); margin-top: var(--btly-space-2); } .cell[data-v-19188f7d] { display: flex; flex-direction: column; gap: 8px; } .cap[data-v-19188f7d] { margin: 0; font-size: 12px; color: var(--btly-text-tertiary); } /* Playground: give the (unframed) full-width list a demo width. */ .pg[data-v-19188f7d] { width: 400px; } /* Placeholder standing in for ItemAnswerVertical (not built yet) — mirrors its Figma * frame (165px card, radius/20) so the grid layout reads correctly. Playground-only. */ .placeholder-card[data-v-19188f7d] { display: flex; align-items: center; justify-content: center; width: 165px; min-height: 72px; padding: var(--btly-space-16); border: var(--btly-border-width-1-5) solid var(--btly-border-default); border-radius: var(--btly-radius-20); background: var(--btly-base-white); color: var(--btly-text-primary); text-align: center; } .pill[data-v-99abb7ee], .pill[data-v-99abb7ee] * { box-sizing: border-box; } .pill[data-v-99abb7ee] { display: inline-flex; align-items: center; justify-content: center; gap: var(--btly-space-4); padding: var(--btly-space-4) var(--btly-space-8); border-radius: var(--btly-radius-full); } /* Brand, not semantic: the design binds {hue}/100 here (DS skill, decision-tree step 3). */ .pill.is-green[data-v-99abb7ee] { background: var(--btly-brand-green-100); } .pill.is-pink[data-v-99abb7ee] { background: var(--btly-brand-pink-100); } .pill.is-sky[data-v-99abb7ee] { background: var(--btly-brand-sky-100); } .pill.is-ultraviolet[data-v-99abb7ee] { background: var(--btly-brand-ultraviolet-100); } .pill.is-sunshine[data-v-99abb7ee] { background: var(--btly-brand-sunshine-100); } /* `space/16` per the set description; the MCP read no binding on the hidden slot (brief §9-1). */ .slot-box[data-v-99abb7ee] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--btly-space-16); height: var(--btly-space-16); } /* Colour sits on the text, not the root, so a slotted icon keeps its own fill. */ .emoji[data-v-99abb7ee], .description[data-v-99abb7ee] { flex-shrink: 0; color: var(--btly-text-secondary); white-space: nowrap; } .pill-list[data-v-4d568852], .pill-list[data-v-4d568852] * { box-sizing: border-box; } .pill-list[data-v-4d568852] { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: var(--btly-space-8); width: 100%; /* Figma's FILL, in any host: a root that hugs has no width to wrap against */ overflow: hidden; /* not `clip`: Safari 16+ only — support-floor rule (2026-08-18) */ } .gallery[data-v-d4bf3748] { display: flex; flex-direction: column; gap: var(--btly-space-24); } /* `flex-start`, not the default stretch: each host keeps its fixed width under a wider caption. */ .cell[data-v-d4bf3748] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--btly-space-8); } .cap[data-v-d4bf3748] { margin: 0; font-size: 12px; color: var(--btly-text-tertiary); } /* Story-only hosts. The list is FILL, so the host width is its wrap point; 327 is the drawn default. */ .host.is-327[data-v-d4bf3748] { width: 327px; } .host.is-480[data-v-d4bf3748] { width: 480px; } .list-progress-bar[data-v-f398906c], .list-progress-bar[data-v-f398906c] * { box-sizing: border-box; } .list-progress-bar[data-v-f398906c] { display: flex; flex-direction: column; gap: var(--btly-space-24); } .row[data-v-0d18bdd8] { display: flex; flex-direction: column; gap: 8px; } .row-head[data-v-0d18bdd8] { display: flex; justify-content: space-between; font-size: 14px; color: var(--btly-text-primary); } /* Playground: fill the framed width (PlaygroundFrame is 380px, matching the Gallery). */ .pg[data-v-0d18bdd8] { width: 100%; } .logo[data-v-a1fee6a6], .logo[data-v-a1fee6a6] * { box-sizing: border-box; } .logo[data-v-a1fee6a6] { display: inline-flex; } /* v-html'd SVG carries its own colours + intrinsic size; :deep reaches it. */ .logo[data-v-a1fee6a6] svg { display: block; flex: none; } /* Brand-asset dimensions from the Figma set — no token covers a logo box. */ /* The wrapper frame; the `main` glyph (48.24) overhangs it, as in Figma. */ .logo[data-brand='old'][data-type='mark'][data-v-a1fee6a6] { width: 48px; } .logo[data-brand='old'][data-type='mark'][data-size='md'][data-v-a1fee6a6] { padding-block: var(--btly-space-10); } /* `sm` cells served by the `md` drawing resized (exact scale). */ .logo[data-brand='new'][data-type='mark'][data-size='sm'][data-v-a1fee6a6] svg { width: 24px; height: 24px; } .logo[data-brand='lumee'][data-type='full'][data-size='sm'][data-v-a1fee6a6] svg { width: 96px; height: 21px; } .logo[data-brand='smartest-minds'][data-type='full'][data-size='sm'][data-v-a1fee6a6] svg { width: 92px; height: 23px; } .cap[data-v-90f05430] { margin: 0; color: var(--btly-text-secondary); } /* Constant inset, so toggling `color` never resizes the Playground frame. */ .row[data-v-90f05430] { display: flex; align-items: center; padding: 24px; border-radius: var(--btly-radius-16); } /* Brand backdrop so the inverse variants are visible. */ .backdrop[data-v-90f05430] { background: var(--btly-action-primary-default); } /* One grid for the whole Gallery, so the four Figma columns line up across every row. */ .matrix[data-v-90f05430] { display: grid; grid-template-columns: repeat(4, max-content); gap: 16px 48px; overflow-x: auto; } .matrix .cell[data-v-90f05430], .matrix .row[data-v-90f05430] { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; justify-items: start; } .matrix .cell[data-v-90f05430] { row-gap: 8px; } .matrix .cap[data-v-90f05430] { grid-column: 1 / -1; } /* The legacy set draws no `full sm` — its `mark sm` keeps the last column. */ .matrix .legacy[data-v-90f05430] > :last-child { grid-column: 4; } /* Figma's `deviceWidth` axis is the VIEWPORT, not a prop: `mobile` is the base and the design's two other frames are DS breakpoints — `(--md)` (tablet) and `(--xl)` (desktop), docs/TOKENS.md. Mobile-first, `min-width` only. The two breakpoints do different jobs: md switches the shell from sheet to dialog, xl unlocks `view` — the modal's orientation, a desktop-only axis (horizontal fits nowhere narrower). The unbound geometry below — 448 / 920 / 440 / 32 — carries no Figma variable and no `space/*` step matches it (brief §7). It is layout geometry, not spacing. The old pixel height clamps (664 / 482 / 800 / 400) are GONE: the designer's height contract (17.08.2026) hugs content and clamps only the scroll region — see the sections below. */ .scrim[data-v-1a7b2265], .scrim[data-v-1a7b2265] * { box-sizing: border-box; } /* Type's half of the reset above: both properties inherit, so a host's own `font-kerning: none` would lay Mona Sans out unkerned and wider than Figma draws it. Rationale in QuizLayout.css. */ .scrim[data-v-1a7b2265], .scrim[data-v-1a7b2265] * { font-kerning: normal; font-feature-settings: normal; } /* ---------- scrim ---------- */ /* A full-viewport overlay: Figma's 375 / 768 / 1440 frames are the design's viewport, not component sizes — only the padding is a contract. `surface/blackout` already carries the 40% alpha, so no `opacity` here. No z-index: the DS has no elevation scale, so stacking is the consumer's call (mount last, or teleport to ) — see README. */ .scrim[data-v-1a7b2265] { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; /* Bottom sheet: the pop-up is flush to the bottom edge with a 24px sliver of scrim above it. The other three sides bind space/0, so nothing is declared for them. `--modal-inset` names the contract's padding once; the md block overrides it. */ --modal-inset: var(--btly-space-24); /* Read by the SFC to gate swipe-to-dismiss: 1 = the bottom sheet is active. The breakpoint number stays in CSS alone — JS reading a flag can never drift from the md block below. */ --modal-sheet: 1; justify-content: flex-end; /* The designer's height contract (17.08.2026) sizes the card as a PERCENTAGE of this box, so the box itself must be the SMALL viewport: `inset: 0` alone resolves against the large one, and with a mobile toolbar showing the sheet would hide under the chrome. The contract says dvh, svh allowed where the toolbar reflow is unacceptable — svh is this repo's standing choice (the card must not resize while the toolbar animates). */ height: 100vh; /* pre-svh fallback (Safari <15.4) */ height: 100svh; padding-top: var(--modal-inset); overflow: hidden; /* not `clip`: Safari 16+ only — support-floor rule (2026-08-18) */ background: var(--btly-surface-blackout); } /* ---------- pop-up ---------- */ /* Full-bleed sheet: top corners only. HUGS its content — the designer's height contract (17.08.2026): "the sheet hugs its content when there is little of it, stops growing at the visible viewport when there is a lot, scrolls the body, and never lets the action row be pushed out". `max-height: 100%` is the whole clamp — the percentage resolves against the scrim's CONTENT box, so the inset is already subtracted and every old pixel cap (664/482/800) is retired: "do not port the pixel values". A clamp with pixels on the card was tried in Figma and removed after it clipped the action row. Shadow geometry is raw by design (the DS tokenizes effect COLOUR only, brief §4). `position: relative` anchors the two controls. */ .popup[data-v-1a7b2265] { position: relative; display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; width: 100%; max-height: 100%; padding: var(--btly-space-8) var(--btly-space-8) 0; overflow: hidden; /* not `clip`: Safari 16+ only — support-floor rule (2026-08-18) */ border-radius: var(--btly-radius-24) var(--btly-radius-24) 0 0; background: var(--btly-surface-card); box-shadow: 0 -2px 40px 0 var(--btly-effects-shadow); } /* ---------- entrance & swipe (reference: reka-ui Drawer) ---------- */ /* Ported from the reka-ui Drawer demo (docs/components/demo/Drawer/css/styles.css), the maintainer's chosen reference (2026-08-18) — SUPERSEDES two earlier entrances: the sequenced scrim-then-sheet slide (2026-08-16) and the cs-app `pop`/`fadeIn` pair at md (the overlay half of it; the card's pop survives below). One curve everywhere: 450ms cubic-bezier(0.32, 0.72, 0, 1), overlay and sheet CONCURRENT — the reference runs no delay between them. The sheet keyframes animate the standalone `translate` property, NOT `transform` — the reference's own trick, kept with its comment: the inline `transform` carries the live drag offset, and the two properties compose, so an entrance and a drag cannot fight over one value. */ @keyframes btly-modal-overlay-in-1a7b2265 { from { opacity: 0; } } @keyframes btly-modal-sheet-in-1a7b2265 { from { translate: 0 100%; } } .scrim[data-v-1a7b2265] { animation: btly-modal-overlay-in-1a7b2265 450ms cubic-bezier(0.32, 0.72, 0, 1); } /* Swipe-to-dismiss carries the sheet through this var (mobile only — the SFC gates on `--modal-sheet`). At md+ the var never changes, so transform/transition sit inert under the pop. */ .popup[data-v-1a7b2265] { transform: translateY(var(--modal-drag-y, 0)); transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; animation: btly-modal-sheet-in-1a7b2265 450ms cubic-bezier(0.32, 0.72, 0, 1); } /* While the finger is down the sheet tracks it 1:1 — the 450ms curve would lag it (reference: `.DrawerContent[data-swiping]`). */ .popup[data-swiping][data-v-1a7b2265] { transition-duration: 0ms; user-select: none; } /* The exit, set by EVERY close path — ✕, Escape, swipe (reference: `drawerOverlayHide` + `drawerSlideBottomOut`). Opacity on the scrim fades the whole subtree, dialog included, at every width; on the sheet the SFC also drives `--modal-drag-y` to full height, so it slides out while fading. `close` fires only when this transition ends. Cancelling the entrance keyframes hands the frame to the exit even when close is requested mid-entrance. */ .scrim[data-dismissing][data-v-1a7b2265], .scrim[data-dismissing] .popup[data-v-1a7b2265] { animation: none; } .scrim[data-dismissing][data-v-1a7b2265] { opacity: 0; transition: opacity 450ms cubic-bezier(0.32, 0.72, 0, 1); } /* From md up the card has no edge to travel from, so it POPS instead — kept verbatim from cs-app (`DefaultModal.scss`), as before. Its overlay half (`fadeIn` from .8) is retired: the reference overlay above now runs at every width. */ @keyframes btly-modal-pop-1a7b2265 { from { opacity: 0.85; transform: scale(0.98); } 40% { opacity: 1; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } } /* ---------- mobile, position=default — centred dialog ---------- */ /* Figma deviceWidth=mobile, position=default: scrim pt space/24, px space/16, pb 0, children centred; the pop-up keeps its 8/8/0 padding, rounds all four corners and lands at 343 (375 − 2×16). `--modal-sheet: 0` is the entire behavioural switch — the SFC reads it to drop swipe-to-dismiss and to fade rather than slide on exit. */ .scrim.pos-default[data-v-1a7b2265] { --modal-sheet: 0; justify-content: center; padding: var(--btly-space-24) var(--btly-space-16) 0; } /* A centred dialog has no edge to travel from, so it pops like the md+ card. */ .pos-default .popup[data-v-1a7b2265] { border-radius: var(--btly-radius-24); animation: btly-modal-pop-1a7b2265 280ms ease-in; } /* ---------- content column ---------- */ /* Figma's `content` wrapper exists only in the horizontal tree; elsewhere the body and the action row are direct pop-up children. */ .column[data-v-1a7b2265] { display: contents; } /* ---------- slots ---------- */ /* The master's 40 (top) and 136 (bottom) are empty-placeholder heights, not contracts (brief §7): both bands hug their content. The 32 floor is the only height the design states. */ .top[data-v-1a7b2265] { flex-shrink: 0; width: 100%; min-height: 32px; border-radius: var(--btly-radius-20); background: var(--btly-base-transparent); } /* Always rendered — Figma gives contentSlot no visibility boolean. Padding space/12 applies at EVERY width (settled by arithmetic on 2026-08-13: the design's 335 content column = 359 − 2×12). */ /* THIS is the sheet's scroll region — the band that gives way when the content is taller than the pop-up. `flex-basis: 0` already caps it at the leftover space, so without an `overflow` its content simply painted out of the box and the opaque action row below covered whatever spilled: at 375x812 this modal's offer column needed 336px against the 317px it was given, so 19px vanished under the buttons, and more on a shorter phone. The action row's upward white fade documents that content is meant to scroll UNDER it — the scroll container it needed was just never declared. `hidden` on x, because `overflow-y: auto` alone forces x to `auto` too and any child a hair too wide would add a horizontal bar. `contain` so a sheet at its scroll end never pans the page behind it. */ .body[data-v-1a7b2265] { /* HUG, not grow (height contract 17.08.2026): the card hugs, so the body takes its natural height and SHRINKS first when the card hits its 100% clamp — `min-height: 0` is what lets a flex child shrink below its content so the scroll can engage at all (the contract calls it mandatory). The bands above and below are shrink-0, so the clamp can only ever eat this box. */ flex: 0 1 auto; display: flex; flex-direction: column; /* Bound in Figma on 17.08.2026 (mobile). Tablet/desktop still draw the unbound 47 — a listed KNOWN ISSUE, so md+ INHERITS space/32 rather than hardcoding a number off the scale. */ gap: var(--btly-space-32); min-height: 0; width: 100%; padding: var(--btly-space-12); /* Longhands, not the `overflow: hidden auto` shorthand: two-value overflow is Safari 15.4+, and on older WebKit the shorthand drops WHOLE — taking the scroll region with it. */ overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--btly-base-transparent); } /* The only opaque slot — the designer flags the inconsistency with the two transparent ones as a known issue. Padding/gap moved to the BASE on 17.08.2026 (they lived only in the horizontal override before): the contract states them for the slot itself, and adds the safe-area floor so the action row clears the iPhone home indicator on the flush-to-bottom sheet. */ .bottom[data-v-1a7b2265] { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: var(--btly-space-12); width: 100%; padding: var(--btly-space-16) var(--btly-space-8); padding-bottom: max(var(--btly-space-16), env(safe-area-inset-bottom)); background: var(--btly-surface-canvas); } /* The upward white fade (`scrollFade` style, tokenized colour + raw geometry, brief §4) marks that content SCROLLS under the action row — so per the contract it is on only while the body actually scrolls; on short content it is "a decorative smudge". The SFC measures and sets the attribute. */ .popup[data-body-scrollable] .bottom[data-v-1a7b2265] { box-shadow: 0 -4px 24px 0 var(--btly-base-white); } /* ---------- dismiss controls ---------- */ /* Every offset is space/8 — the controls sit on the pop-up's own padding box. */ .ctrl[data-v-1a7b2265] { position: absolute; top: var(--btly-space-8); display: flex; } /* Mobile draws this as `left: 327` (= 375 - 40 - 8) only because the constraint was left at horizontal=MIN there; tablet and desktop use MAX. Deliberate divergence: `right` everywhere, so the control tracks the edge as the sheet resizes — README records it. */ .ctrl-close[data-v-1a7b2265] { right: var(--btly-space-8); } .ctrl-back[data-v-1a7b2265] { left: var(--btly-space-8); } /* ---------- md — centred dialog ---------- */ /* Tablet and desktop draw the SAME 448 dialog; only the scrim grows, so the design needs no second breakpoint for the vertical tree. Every mobile-only declaration is reset here, not just added to: in a cascade the bottom sheet is the floor, not a sibling. */ @media (min-width: 740px) { /* `.pos-default` is named too: it matches at (0,2,0) and a media query adds no specificity, so without it the mobile dialog's padding would outrank this block from tablet up. */ .scrim[data-v-1a7b2265], .scrim.pos-default[data-v-1a7b2265] { --modal-inset: var(--btly-space-80); --modal-sheet: 0; justify-content: center; padding: var(--modal-inset); } /* `max-width` is code's own guard so the fixed width can never overflow a narrow viewport; at the designed sizes it is inert. The dialog HUGS like the sheet (height contract 17.08.2026): the old 482 floor, 800 cap and the body's FIXED 400 are all retired — `max-height: 100%` (inherited from the base rule) is the only clamp, and the base `.body` hug/scroll applies unchanged, so no `.body` override remains here at all. */ /* Figma: space/8 sides on mobile, space/12 from tablet. */ .bottom[data-v-1a7b2265] { padding-right: var(--btly-space-12); padding-left: var(--btly-space-12); } .popup[data-v-1a7b2265] { flex: 0 0 auto; /* No fill-mode: `to` is the resting state, so nothing needs holding once it ends. */ animation: btly-modal-pop-1a7b2265 280ms ease-in; gap: var(--btly-space-8); width: 448px; max-width: 100%; padding: var(--btly-space-8); border-radius: var(--btly-radius-24); } } /* ---------- xl + view=horizontal — two columns ---------- */ /* The right column is a fixed 440 and the left one takes what is left of the 904 inner width (920 - 2x8) minus the 24 gap — i.e. 440 as well. */ @media (min-width: 1280px) { .view-horizontal .popup[data-v-1a7b2265] { --modal-column-w: 440px; flex-direction: row; align-items: flex-start; justify-content: center; gap: var(--btly-space-24); width: 920px; } .view-horizontal .column[data-v-1a7b2265] { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; gap: var(--btly-space-8); width: var(--modal-column-w); } /* The full-height left column. */ .view-horizontal .top[data-v-1a7b2265] { flex: 1 0 0; align-self: stretch; width: auto; min-width: 0; } .view-horizontal .body[data-v-1a7b2265] { display: flex; flex-direction: column; align-items: flex-start; } /* Anchored to the RIGHT column's left edge (Figma's x=472 = 8 + 440 + 24), expressed against the pop-up's box so it survives a width change. */ .view-horizontal .ctrl-back[data-v-1a7b2265] { left: calc(100% - var(--btly-space-8) - var(--modal-column-w)); } } /* Last, so it wins at every width: motion is opt-out, and an entrance is exactly what a reduced -motion setting is asking us to skip. The modal still appears, it just does not travel. */ @media (prefers-reduced-motion: reduce) { .scrim[data-v-1a7b2265], .popup[data-v-1a7b2265] { animation: none; transition: none; } } /* ModalClarify owns two subtrees: the copy column in `contentSlot` and the answer row in `bottomSlot`. The scrim, the sheet, the slot wrappers and both buttons are delegated (brief §4) — nothing from those tables is restated here. Hence two box-sizing roots rather than one. */ .text[data-v-c56bf3ba], .text[data-v-c56bf3ba] * { box-sizing: border-box; } .actions[data-v-c56bf3ba], .actions[data-v-c56bf3ba] * { box-sizing: border-box; } /* ---------- copy ---------- */ /* Figma centres the frame and its copy; the pair sits at gap space/8 with space/8 below it. */ .text[data-v-c56bf3ba] { display: flex; flex-direction: column; align-items: center; gap: var(--btly-space-8); width: 100%; padding-bottom: var(--btly-space-8); text-align: center; } /* UA margins on

/

: the DS ships no reset, so the flex gap above is the only spacing. Width stays 100%, never the drawn 335 — that is 359 - 2x12, the column measured inside ModalLayout's own contentSlot padding (ModalLayout README gap 7). */ .eyebrow[data-v-c56bf3ba] { margin: 0; color: var(--btly-text-brand); } .question[data-v-c56bf3ba] { margin: 0; color: var(--btly-text-primary); } /* ---------- answers (bottomSlot) ---------- */ /* Equal halves, never the metadata's 161.5: the design gives both instances `flex: 1 0 0` inside a 12px gap, which two `minmax(0, 1fr)` columns express without reaching into `Button` — its root is `display: contents`, so the two