/* ---- tokens/fonts.css ---- */
/* Creflex webfont.
   The product UI stays on the platform system face — that is what keeps
   Devanagari and Gujarati matras correct on device, and it is deliberate.
   Jost is added for BRAND surfaces only (deck titles, marketing headlines,
   the tagline under the wordmark): a geometric grotesque whose single-storey
   'a', circular 'o' and even stroke are the closest widely available match to
   the wordmark's lettering. SUBSTITUTION — the wordmark's own typeface was not
   supplied; confirm or replace before print production. */

/* ---- tokens/colors.css ---- */
/* Creflex colour tokens — sage-led.
   The wordmark's sage (#91AFA5) is the origin of the whole system. It is too
   light to carry text or fills, so the ramp takes that exact hue to usable
   depths: #3C574F is the action colour, #91AFA5 stays the graphic accent.
   Neutrals are not grey — every surface, line and ink carries a trace of the
   same hue, which is what makes the product read calm rather than clinical. */
:root{
  /* --- brand --- */
  --brand-sage:#91AFA5;      /* the logo sage — graphic use only, never text */
  --brand-ink:#1A211F;       /* the logo's black, softened off pure #000 */
  --brand-paper:#FBFCFB;

  /* --- sage ramp (single hue, even steps) --- */
  --sage-25:#F7F9F8;
  --sage-50:#F1F5F3;
  --sage-100:#E3EBE7;
  --sage-200:#CBDBD4;
  --sage-300:#B2C9C1;
  --sage-400:#A1BAB1;
  --sage-500:#91AFA5;
  --sage-600:#77958B;
  --sage-700:#5C7A70;
  --sage-800:#3C574F;
  --sage-900:#25352F;

  /* --- sage-tinted neutrals --- */
  --white:#FFFFFF;
  --stone-25:#FBFCFB;
  --stone-50:#F4F6F5;
  --stone-100:#E1E8E5;
  --stone-200:#C4D2CD;
  --stone-400:#8D9C97;
  --stone-500:#6D7C77;
  --stone-600:#4A5B56;
  --stone-800:#28322F;
  --stone-900:#1A211F;

  /* --- semantic surfaces --- */
  --bg:#FBFCFB;
  --surface-card:#FFFFFF;
  --surface-subtle:#F1F5F3;
  --surface-mist:#E3EBE7;      /* full-bleed brand panel: decks, marketing, sign-in */
  --surface-inverse:#1A211F;

  /* --- semantic lines --- */
  --line:#E1E8E5;
  --line-strong:#C4D2CD;
  --hairline:1px;

  /* --- semantic text --- */
  --text-strong:#1A211F;
  --text-body:#4A5B56;
  --text-muted:#6D7C77;
  --text-inverse:#FFFFFF;
  --text-accent:#3C574F;       /* sage-toned emphasis and links */

  /* --- action: the one filled control colour --- */
  --action-bg:#3C574F;
  --action-bg-press:#334B44;
  --action-fg:#FFFFFF;

  /* --- accent (graphic sage) --- */
  --accent:#91AFA5;
  --accent-strong:#3C574F;
  --accent-soft:#E3EBE7;
  --accent-line:#CBDBD4;

  /* --- status, tuned to the same lightness family --- */
  --success:#2F6B54;
  --success-soft:#E6F0EB;
  --warning:#8A5A1C;
  --warning-soft:#F6EEE2;
  --danger:#A93B31;
  --danger-soft:#F7E9E7;
  --recording:#E5484D;

  /* --- interaction --- */
  --focus-ring:#3C574F;
  --scrim:rgba(26,33,31,0.48);
  --scrim-strong:rgba(12,16,15,0.72);
  --press-opacity:0.9; /* @kind other */
  --press-scale:0.985; /* @kind other */
  --disabled-opacity:0.4; /* @kind other */
}

[data-theme="dark"]{
  --bg:#0E1412;
  --surface-card:#161D1B;
  --surface-subtle:#1D2624;
  --surface-mist:#1C2825;
  --surface-inverse:#F1F5F3;

  --line:#263130;
  --line-strong:#35433F;

  --text-strong:#EDF2F0;
  --text-body:#BCC9C4;
  --text-muted:#8D9C97;
  --text-inverse:#12201C;
  --text-accent:#A9C3BA;

  /* on dark the action inverts to light sage with dark ink on it */
  --action-bg:#A9C3BA;
  --action-bg-press:#94B3A8;
  --action-fg:#12201C;

  --accent:#A9C3BA;
  --accent-strong:#A9C3BA;
  --accent-soft:#1C2825;
  --accent-line:#2E3D38;

  --success:#5FB68D;
  --success-soft:#132520;
  --warning:#D79E52;
  --warning-soft:#241D12;
  --danger:#E58077;
  --danger-soft:#2A1715;

  --focus-ring:#A9C3BA;
  --scrim:rgba(0,0,0,0.6);
}

/* ---- tokens/typography.css ---- */
/* Creflex type tokens.
   --font-ui is the product face on every screen (see tokens/fonts.css for why
   there is no UI webfont). --font-display is Jost, and it is only ever used
   uppercase with wide tracking, echoing the wordmark: deck titles, marketing
   headlines, the tagline. Never for body copy, never inside product chrome.
   The UI scale below is the shipping scale from
   apps/client/src/constants/theme.ts, verbatim. */
:root{
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  --font-display:"Jost",var(--font-ui);
  --font-numeric:var(--font-ui);
  --numeric-tabular:tabular-nums; /* @kind other */

  /* --- product UI scale --- */
  --type-large-title-size:34px;
  --type-large-title-line:41px;
  --type-large-title-weight:700;
  --type-large-title-tracking:-0.4px;

  --type-title1-size:28px;
  --type-title1-line:34px;
  --type-title1-weight:700;
  --type-title1-tracking:-0.3px;

  --type-title2-size:22px;
  --type-title2-line:28px;
  --type-title2-weight:600;
  --type-title2-tracking:-0.2px;

  --type-headline-size:17px;
  --type-headline-line:22px;
  --type-headline-weight:600;

  --type-body-size:17px;
  --type-body-line:24px;
  --type-body-weight:400;

  --type-subhead-size:15px;
  --type-subhead-line:20px;
  --type-subhead-weight:400;

  --type-footnote-size:13px;
  --type-footnote-line:18px;
  --type-footnote-weight:400;

  --type-caption-size:12px;
  --type-caption-line:16px;
  --type-caption-weight:500;

  /* eyebrow / group header: footnote, 600, uppercase, +0.5 tracking */
  --type-eyebrow-tracking:0.5px;

  /* --- brand display scale: decks, marketing, sign-in --- */
  --type-display1-size:76px;
  --type-display1-line:82px;
  --type-display2-size:48px;
  --type-display2-line:56px;
  --type-display3-size:30px;
  --type-display3-line:38px;
  --type-display-weight:300;
  --type-display-tracking:0.16em;
  --type-lede-size:21px;
  --type-lede-line:30px;

  --line-height-factor-devanagari:1.15;
  --line-height-factor-gujarati:1.15;
}

/* ---- tokens/spacing.css ---- */
/* Creflex spacing + layout tokens — apps/client/src/constants/theme.ts
   `spacing`, `maxContentWidth`, `maxShellWidth`, plus the hit-target and
   chrome heights the product components hard-code. */
:root{
  --space-xxs:2px;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-xxl:32px;
  --space-xxxl:48px;

  /* layout */
  --content-width-narrow:680px;
  --content-width-wide:1180px;
  --rail-width:220px;
  --screen-padding:16px;

  /* fixed chrome + hit targets */
  --hit-target:44px;
  --control-height:50px;
  --row-min-height:52px;
  --tab-bar-item-height:49px;
  --top-bar-height:56px;
  --compact-header-height:48px;
  --field-height:50px;
  --code-box-size:52px;
  --code-box-height:56px;
  --icon-button-size:44px;
  --stage-control-height:60px;
  --progress-track-height:3px;
  --grabber-width:36px;
  --grabber-height:5px;
}

/* ---- tokens/shape.css ---- */
/* Creflex shape, border and elevation tokens.
   Radii are one step softer than the original product build — the calm comes
   partly from geometry. Separation is still a hairline first; the two soft
   shadows exist only for surfaces that float (hero card, sheet, toast). */
:root{
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:28px;
  --radius-pill:999px;
  --radius-tile:22%;        /* app-icon squircle */

  --border-hairline:1px solid var(--line);
  --border-strong:1px solid var(--line-strong);
  --border-accent:1px solid var(--accent-line);
  --border-focus:2px solid var(--focus-ring);

  --shadow-none:none;
  --shadow-soft:0 1px 2px rgba(26,33,31,0.04),0 10px 28px rgba(26,33,31,0.055);
  --shadow-float:0 6px 24px rgba(26,33,31,0.18);

  --icon-xs:17px;
  --icon-sm:18px;
  --icon-md:20px;
  --icon-lg:22px;
  --icon-xl:24px;
  --icon-back:26px;

  /* the open arc lifted from the mark, for brand surfaces */
  --arc-stroke:1.5px;
  --arc-color:var(--accent-line);
}

/* ---- tokens/motion.css ---- */
/* Creflex motion tokens — apps/client/src/constants/theme.ts `motion`.
   Creflex motion is short, linear-ish and non-decorative: opacity fades, a
   2% press shrink, a 12px toast rise. No bounce, no spring, no parallax.
   Everything respects reduced motion (hooks/use-reduced-motion.ts): the
   animation is skipped, never merely shortened. */
:root{
  --motion-fast:150ms; /* @kind other */
  --motion-base:250ms; /* @kind other */
  --motion-slow:350ms; /* @kind other */
  --motion-skeleton-pulse:600ms; /* @kind other */
  --toast-duration:3200ms; /* @kind other */

  --ease-standard:ease-out; /* @kind other */
  --ease-linear:linear; /* @kind other */

  --toast-rise:12px;
}

@media (prefers-reduced-motion:reduce){
  :root{
    --motion-fast:0ms; /* @kind other */
    --motion-base:0ms; /* @kind other */
    --motion-slow:0ms; /* @kind other */
  }
}

/* ---- tokens/base.css ---- */
/* Creflex base layer — reset, defaults, and the brand type helpers that deck
   and marketing surfaces reach for. */
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%;margin:0}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text-strong);font-family:var(--font-ui);font-size:var(--type-body-size);line-height:var(--type-body-line);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
a{color:var(--text-accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--accent-line)}
a:hover{color:var(--text-strong);text-decoration-color:var(--text-strong)}
a:active{color:var(--text-accent);opacity:var(--press-opacity)}
:where(h1,h2,h3,h4,p,figure,blockquote){margin:0}
:where(img,svg){display:block;max-width:100%}
.cx-tnum{font-variant-numeric:var(--numeric-tabular)}
.cx-eyebrow{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);font-weight:600;text-transform:uppercase;letter-spacing:var(--type-eyebrow-tracking);color:var(--text-muted)}
/* brand display helpers — uppercase and wide-tracked, echoing the wordmark */
.cx-display{font-family:var(--font-display);font-weight:var(--type-display-weight);text-transform:uppercase;letter-spacing:var(--type-display-tracking);color:var(--text-strong)}
.cx-display--1{font-size:var(--type-display1-size);line-height:var(--type-display1-line)}
.cx-display--2{font-size:var(--type-display2-size);line-height:var(--type-display2-line)}
.cx-display--3{font-size:var(--type-display3-size);line-height:var(--type-display3-line)}
.cx-lede{font-size:var(--type-lede-size);line-height:var(--type-lede-line);color:var(--text-body);text-wrap:pretty}
.cx-mist{background:var(--surface-mist)}

/* ---- components/components.css ---- */
/* Creflex component styles.
   Every rule here mirrors a real style block in
   apps/client/src/components/product/*.tsx. Values are copied, not rounded.
   The React components in components/** attach these class names; consumers
   get them for free by linking styles.css. */

/* ---------- Button (product/button.tsx) ---------- */
.cx-btn{min-height:var(--control-height);border-radius:var(--radius-md);padding:0 var(--space-lg);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);position:relative;border:0;background:none;cursor:pointer;font-size:var(--type-headline-size);line-height:var(--type-headline-line);font-weight:600;text-align:center;transition:opacity var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}
.cx-btn--block{display:flex;width:100%}
.cx-btn--primary{background:var(--action-bg);color:var(--action-fg)}
.cx-btn--primary:not(:disabled):active{background:var(--action-bg-press)}
.cx-btn--secondary{background:var(--surface-card);color:var(--text-accent);border:1px solid var(--line-strong)}
.cx-btn--secondary:not(:disabled):active{background:var(--accent-soft);border-color:var(--accent-line)}
.cx-btn--danger{background:var(--danger);color:var(--text-inverse)}
.cx-btn--quiet{background:transparent;color:var(--text-accent);min-height:var(--hit-target);padding:0 var(--space-sm)}
.cx-btn:not(:disabled):active{opacity:var(--press-opacity);transform:scale(var(--press-scale))}
.cx-btn--quiet:not(:disabled):active{transform:none}
.cx-btn:disabled{opacity:var(--disabled-opacity);cursor:default}
.cx-btn__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);white-space:nowrap}
.cx-btn__content--hidden{opacity:0}
.cx-btn__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cx-spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:cx-spin 800ms linear infinite}
@keyframes cx-spin{to{transform:rotate(360deg)}}
.cx-icon-btn{width:var(--icon-button-size);height:var(--icon-button-size);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface-card);color:var(--text-accent);cursor:pointer}
.cx-icon-btn:not(:disabled):active{background:var(--accent-soft);border-color:var(--accent-line)}
.cx-icon-btn:not(:disabled):active{opacity:var(--press-opacity)}
.cx-icon-btn:disabled{opacity:var(--disabled-opacity);cursor:default}
.cx-bare-btn{background:none;border:0;padding:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center}
.cx-bare-btn:active{opacity:0.6}

/* ---------- Card (product/card.tsx) ---------- */
.cx-card{background:var(--surface-card);border:var(--hairline) solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}
.cx-card--hero{border-radius:var(--radius-xl);padding:var(--space-xl);gap:var(--space-lg);box-shadow:var(--shadow-soft)}
.cx-card--mist{background:var(--surface-mist);border-color:var(--accent-line)}
.cx-card--accent{background:var(--accent-soft);border-color:var(--accent-line)}

/* ---------- Headings (product/text.tsx) ---------- */
.cx-heading-block{display:flex;flex-direction:column;gap:var(--space-xs)}
.cx-h1{font-size:var(--type-title1-size);line-height:var(--type-title1-line);font-weight:var(--type-title1-weight);letter-spacing:var(--type-title1-tracking);color:var(--text-strong)}
.cx-h2{font-size:var(--type-title2-size);line-height:var(--type-title2-line);font-weight:var(--type-title2-weight);letter-spacing:var(--type-title2-tracking);color:var(--text-strong)}
.cx-h3{font-size:var(--type-headline-size);line-height:var(--type-headline-line);font-weight:var(--type-headline-weight);color:var(--text-strong)}
.cx-heading-detail{font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);color:var(--text-body)}
.cx-section-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:28px}
.cx-section-title{font-size:var(--type-headline-size);line-height:var(--type-headline-line);font-weight:600;color:var(--text-strong)}

/* ---------- Loading (product/loading.tsx) ---------- */
.cx-loading{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);color:var(--text-body)}
.cx-loading__label{font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);color:var(--text-body)}

/* ---------- Field (product/field.tsx) ---------- */
.cx-field{display:flex;flex-direction:column;gap:var(--space-xs)}
.cx-field__label{font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);font-weight:600;color:var(--text-strong)}
.cx-field__frame{min-height:var(--field-height);display:flex;align-items:center;background:var(--surface-card);border:1px solid var(--line-strong);border-radius:var(--radius-md)}
.cx-field__frame:focus-within{border-width:2px;border-color:var(--focus-ring)}
.cx-field__frame--error,.cx-field__frame--error:focus-within{border-width:2px;border-color:var(--danger)}
.cx-field__frame--disabled{background:var(--surface-subtle);opacity:0.7}
.cx-field__prefix{font-size:var(--type-body-size);line-height:var(--type-body-line);font-weight:600;color:var(--text-strong);padding:0 var(--space-sm) 0 var(--space-lg);border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.cx-field__input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--type-body-size);line-height:var(--type-body-line);color:var(--text-strong);padding:var(--space-md)}
.cx-field__input::placeholder{color:var(--text-muted)}
.cx-field__error{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);color:var(--danger)}
.cx-field__helper{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);color:var(--text-muted)}

/* ---------- CodeField (product/code-field.tsx) ---------- */
.cx-code{display:flex;gap:var(--space-sm);justify-content:center}
.cx-code__box{flex:1;max-width:var(--code-box-size);height:var(--code-box-height);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface-card);display:flex;align-items:center;justify-content:center;font-size:24px;line-height:30px;font-weight:600;color:var(--text-accent);font-variant-numeric:var(--numeric-tabular)}
.cx-code__box--filled{border-color:var(--accent);background:var(--accent-soft)}
.cx-code__box--active{border-width:2px;border-color:var(--action-bg)}
.cx-code__box--error{border-width:2px;border-color:var(--danger)}

/* ---------- Toggle (product/toggle.tsx) ---------- */
.cx-switch{width:51px;height:31px;border-radius:var(--radius-pill);background:var(--line-strong);border:0;padding:2px;display:inline-flex;align-items:center;cursor:pointer;transition:background var(--motion-fast) var(--ease-standard);flex:none}
.cx-switch__thumb{width:27px;height:27px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,0.25);transition:transform var(--motion-fast) var(--ease-standard)}
.cx-switch--on{background:var(--action-bg)}
.cx-switch--on .cx-switch__thumb{transform:translateX(20px)}
.cx-switch:disabled{opacity:0.5;cursor:default}
.cx-toggle-row{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-sm) 0;min-height:var(--hit-target);width:100%;background:none;border:0;text-align:left;cursor:pointer}
.cx-toggle-row--disabled{opacity:0.5;cursor:default}
.cx-toggle-row__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xxs)}
.cx-toggle-row__label{font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);font-weight:600;color:var(--text-strong)}
.cx-toggle-row__detail{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);color:var(--text-body)}

/* ---------- SegmentedControl (product/segmented-control.tsx) ---------- */
.cx-seg{display:flex;background:var(--surface-subtle);border-radius:var(--radius-md);padding:var(--space-xxs);gap:var(--space-xxs)}
.cx-seg--disabled{opacity:var(--disabled-opacity)}
.cx-seg__item{flex:1;min-height:40px;border:0;border-radius:var(--radius-md);background:transparent;display:flex;align-items:center;justify-content:center;padding:0 var(--space-sm);cursor:pointer;font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);font-weight:600;color:var(--text-body);white-space:nowrap}
.cx-seg__item--selected{background:var(--action-bg);color:var(--action-fg)}
.cx-seg__item:not(.cx-seg__item--selected):active{opacity:0.7}

/* ---------- List (product/list-row.tsx) ---------- */
.cx-list-block{display:flex;flex-direction:column;gap:var(--space-sm)}
.cx-list-header{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);font-weight:600;text-transform:uppercase;letter-spacing:var(--type-eyebrow-tracking);color:var(--text-muted);padding:0 var(--space-xs)}
.cx-list{border-radius:var(--radius-lg);border:var(--hairline) solid var(--line);background:var(--surface-card);overflow:hidden}
.cx-row{min-height:var(--row-min-height);display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);background:var(--surface-card);width:100%;border:0;text-align:left;color:var(--text-strong)}
.cx-row--divider{border-bottom:var(--hairline) solid var(--line)}
.cx-row--pressable{cursor:pointer}
.cx-row--pressable:active{background:var(--accent-soft)}
.cx-row--disabled{opacity:var(--disabled-opacity);cursor:default}
.cx-row__leading{min-width:24px;display:flex;align-items:center;justify-content:center;color:var(--accent-strong)}
.cx-row__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xxs)}
.cx-row__title{font-size:var(--type-body-size);line-height:var(--type-body-line);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-row__title--destructive{color:var(--danger)}
.cx-row__caption{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);color:var(--text-body)}
.cx-row__value{font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);color:var(--text-muted);font-variant-numeric:var(--numeric-tabular);flex:none}
.cx-row__chevron{color:var(--accent);flex:none;display:flex}

/* ---------- Stat / Status / Badge (product/stat.tsx) ---------- */
.cx-stat{flex:1;min-width:100px;padding:var(--space-sm) 0;border-top:var(--hairline) solid var(--line-strong);display:flex;flex-direction:column;gap:var(--space-xxs)}
.cx-stat__label{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);font-weight:600;color:var(--text-muted)}
.cx-stat__value{font-size:var(--type-title2-size);line-height:var(--type-title2-line);font-weight:var(--type-title2-weight);letter-spacing:var(--type-title2-tracking);color:var(--text-strong);font-variant-numeric:var(--numeric-tabular)}
.cx-stat__detail{font-size:var(--type-caption-size);line-height:var(--type-caption-line);color:var(--text-muted)}
.cx-status{display:inline-flex;align-items:center;gap:6px;flex:none}
.cx-status__dot{width:6px;height:6px;border-radius:3px;background:var(--stone-400)}
.cx-status__dot--good{background:var(--success)}
.cx-status__dot--warning{background:var(--warning)}
.cx-status__dot--danger{background:var(--danger)}
.cx-status__label{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);color:var(--text-body);white-space:nowrap}
.cx-badge{min-width:18px;height:18px;border-radius:var(--radius-pill);background:var(--action-bg);color:var(--action-fg);display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-size:11px;line-height:13px;font-weight:700;font-variant-numeric:var(--numeric-tabular)}

/* ---------- Notice (product/notice.tsx) ---------- */
.cx-notice{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-lg);border:var(--hairline) solid var(--accent-line);background:var(--surface-subtle)}
.cx-notice--danger{background:var(--danger-soft);border-color:var(--danger)}
.cx-notice__icon{flex:none;display:flex;color:var(--accent-strong)}
.cx-notice--warning{background:var(--warning-soft);border-color:#E6D3B4}
.cx-notice--warning .cx-notice__icon{color:var(--warning)}
.cx-notice--danger .cx-notice__icon{color:var(--danger)}
.cx-notice__text{flex:1;font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);color:var(--text-strong)}

/* ---------- Toast (product/toast.tsx) ---------- */
.cx-toast{max-width:var(--content-width-narrow);background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-pill);padding:var(--space-md) var(--space-lg);box-shadow:var(--shadow-float);font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);text-align:center;animation:cx-toast-in var(--motion-base) var(--ease-standard) both}
.cx-toast--danger{background:var(--danger);color:#FFFFFF}
@keyframes cx-toast-in{from{opacity:0;transform:translateY(var(--toast-rise))}to{opacity:1;transform:none}}

/* ---------- EmptyState (product/empty-state.tsx) ---------- */
.cx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xxxl) var(--space-xl);gap:var(--space-sm);text-align:center}
.cx-empty__icon{width:56px;height:56px;border-radius:28px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-strong);margin-bottom:var(--space-xs)}
.cx-empty__title{font-size:var(--type-headline-size);line-height:var(--type-headline-line);font-weight:600;color:var(--text-strong)}
.cx-empty__detail{font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);color:var(--text-body);max-width:300px}
.cx-empty__action{margin-top:var(--space-md);align-self:stretch;max-width:300px}

/* ---------- Skeleton (product/skeleton.tsx) ---------- */
.cx-skel{background:var(--surface-subtle);border-radius:var(--radius-sm);animation:cx-pulse 1200ms var(--ease-linear) infinite}
@keyframes cx-pulse{0%,100%{opacity:1}50%{opacity:0.55}}
.cx-skel-list{display:flex;flex-direction:column;gap:var(--space-lg)}
.cx-skel-list__row{display:flex;align-items:center;gap:var(--space-md)}
.cx-skel-list__copy{flex:1;display:flex;flex-direction:column;gap:var(--space-sm)}
.cx-skel-card{border-radius:var(--radius-lg);border:var(--hairline) solid var(--line);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}

/* ---------- Stepper / ProgressBar (product/stepper.tsx) ---------- */
.cx-stepper{display:flex;flex-direction:column;gap:var(--space-sm)}
.cx-stepper__copy{display:flex;align-items:baseline;gap:var(--space-sm);justify-content:space-between}
.cx-stepper__count{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);font-weight:600;color:var(--text-muted);font-variant-numeric:var(--numeric-tabular)}
.cx-stepper__label{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);font-weight:600;color:var(--text-strong)}
.cx-progress-track{height:var(--progress-track-height);border-radius:var(--radius-pill);background:var(--accent-line);overflow:hidden}
.cx-progress-fill{height:100%;border-radius:var(--radius-pill);background:var(--action-bg);transition:width var(--motion-base) var(--ease-standard)}

/* ---------- Header (product/header.tsx) ---------- */
.cx-header-large{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg) 0}
.cx-header-large__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--hit-target)}
.cx-header-large__subtitle{font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);color:var(--text-muted)}
.cx-header-large__title{font-size:var(--type-large-title-size);line-height:var(--type-large-title-line);font-weight:var(--type-large-title-weight);letter-spacing:var(--type-large-title-tracking);color:var(--text-strong)}
.cx-header-compact{min-height:var(--compact-header-height);display:flex;align-items:center;gap:var(--space-sm);padding:0 var(--space-sm);border-bottom:var(--hairline) solid var(--line);background:var(--bg)}
.cx-header-compact__title{flex:1;text-align:center;font-size:var(--type-headline-size);line-height:var(--type-headline-line);font-weight:600;color:var(--text-strong)}
.cx-header__back{width:var(--hit-target);height:var(--hit-target);display:flex;align-items:center;justify-content:center;flex:none}
.cx-header-compact__trailing{min-width:var(--hit-target);display:flex;align-items:center;justify-content:flex-end}

/* ---------- TabBar (product/tab-bar.tsx) ---------- */
.cx-tabbar{display:flex;background:var(--surface-card);border-top:var(--hairline) solid var(--line)}
.cx-tab{flex:1;min-height:var(--tab-bar-item-height);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xxs);padding:6px 0 var(--space-xs);border:0;background:none;cursor:pointer;color:var(--text-muted)}
.cx-tab__icon{position:relative;display:flex}
.cx-tab__badge{position:absolute;top:-4px;right:-10px}
.cx-tab__label{font-size:11px;line-height:13px;font-weight:500;color:var(--text-muted)}
.cx-tab--active,.cx-tab--active .cx-tab__label{color:var(--text-accent)}
.cx-tab--active .cx-tab__label{font-weight:600}

/* ---------- Shell: TopBar + NavRail (product/app-shell.tsx) ---------- */
.cx-topbar{background:var(--bg);border-bottom:var(--hairline) solid var(--line)}
.cx-topbar__inner{width:100%;max-width:var(--content-width-wide);margin:0 auto;min-height:var(--top-bar-height);padding:0 var(--space-xl);display:flex;align-items:center;gap:var(--space-lg)}
.cx-topbar__wordmark{font-size:var(--type-headline-size);line-height:var(--type-headline-line);font-weight:600;color:var(--text-strong)}
.cx-topbar__context{flex:1;font-size:var(--type-footnote-size);line-height:var(--type-footnote-line);color:var(--text-muted)}
.cx-rail{width:var(--rail-width);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs);border-right:var(--hairline) solid var(--line)}
.cx-rail-item{min-height:var(--hit-target);display:flex;align-items:center;gap:var(--space-md);padding:0 var(--space-md);border-radius:var(--radius-md);border:0;background:none;cursor:pointer;color:var(--text-body);width:100%;text-align:left}
.cx-rail-item:active{opacity:0.6}
.cx-rail-item--active{background:var(--accent-soft);color:var(--text-accent)}
.cx-rail-item__label{flex:1;font-size:var(--type-subhead-size);line-height:var(--type-subhead-line);color:inherit}
.cx-rail-item--active .cx-rail-item__label{font-weight:600}
.cx-rail-item__badge{min-width:20px;height:20px;border-radius:var(--radius-pill);background:var(--action-bg);color:var(--action-fg);display:flex;align-items:center;justify-content:center;padding:0 var(--space-xs);font-size:var(--type-caption-size);line-height:var(--type-caption-line);font-variant-numeric:var(--numeric-tabular)}

/* ---------- Screen (product/screen.tsx) ---------- */
.cx-screen{background:var(--bg);display:flex;flex-direction:column;min-height:0}
.cx-screen__body{flex:1;min-height:0;overflow:auto}
.cx-screen__inner{width:100%;margin:0 auto;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg)}
.cx-screen__inner--narrow{max-width:var(--content-width-narrow)}
.cx-screen__inner--wide{max-width:var(--content-width-wide)}
.cx-screen__header{width:100%;margin:0 auto}
.cx-screen__footer{width:100%;margin:0 auto;padding:var(--space-sm) var(--space-lg) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}

/* ---------- Sheet (product/sheet.tsx) ---------- */
.cx-sheet-host{position:absolute;inset:0;display:flex;justify-content:flex-end;flex-direction:column;z-index:40}
.cx-sheet__backdrop{position:absolute;inset:0;background:var(--scrim);border:0;padding:0}
.cx-sheet{position:relative;width:100%;max-width:var(--content-width-narrow);align-self:center;max-height:88%;background:var(--surface-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-float);padding:var(--space-sm) var(--space-lg) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);animation:cx-sheet-in var(--motion-base) var(--ease-standard) both}
@keyframes cx-sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.cx-sheet__grabber{align-self:center;width:var(--grabber-width);height:var(--grabber-height);border-radius:var(--radius-pill);background:var(--accent-line);margin-bottom:var(--space-xs);flex:none}
.cx-sheet__title{font-size:var(--type-title2-size);line-height:var(--type-title2-line);font-weight:var(--type-title2-weight);letter-spacing:var(--type-title2-tracking);color:var(--text-strong)}
.cx-sheet__body{overflow:auto;display:flex;flex-direction:column;gap:var(--space-lg);padding-bottom:var(--space-sm)}
.cx-sheet__footer{display:flex;flex-direction:column;gap:var(--space-sm)}

/* ---------- Brand surfaces: the open arc lifted from the mark ---------- */
.cx-arc{position:absolute;border:var(--arc-stroke) solid var(--arc-color);border-radius:50%;border-right-color:transparent;pointer-events:none}
.cx-brand-panel{background:var(--surface-mist);position:relative;overflow:hidden}
.cx-brand-panel--ink{background:var(--surface-inverse);color:var(--text-inverse)}
.cx-brand-panel--action{background:var(--action-bg);color:var(--action-fg)}
.cx-rule{height:1px;background:var(--accent-line);border:0}