/*
 * TKC Stride primitive tokens.
 * Source: Figma "Client Calendar for Coaches" → Primitive collection (Value mode).
 * Scoped to [data-stride-theme] so these never leak into the existing product.
 */

[data-stride-theme] {
  /* Color / transparent-gray */
  --stride-color-transparent-gray-0: #17171600;
  --stride-color-transparent-gray-25: #17171603;
  --stride-color-transparent-gray-50: #17171609;
  --stride-color-transparent-gray-100: #1717160e;
  --stride-color-transparent-gray-200: #17171621;
  --stride-color-transparent-gray-300: #17171634;
  --stride-color-transparent-gray-400: #1717164f;
  --stride-color-transparent-gray-500: #1717166f;
  --stride-color-transparent-gray-550: #17171686;
  --stride-color-transparent-gray-600: #1717169d;
  --stride-color-transparent-gray-700: #171716b9;
  --stride-color-transparent-gray-800: #171716d5;
  --stride-color-transparent-gray-900: #171716e9;
  --stride-color-transparent-gray-950: #171716f5;
  --stride-color-transparent-gray-1000: #171716;

  /* Color / transparent-white */
  --stride-color-transparent-white-0: #ffffff00;
  --stride-color-transparent-white-25: #ffffff0a;
  --stride-color-transparent-white-50: #ffffff16;
  --stride-color-transparent-white-100: #ffffff2a;
  --stride-color-transparent-white-200: #ffffff46;
  --stride-color-transparent-white-300: #ffffff62;
  --stride-color-transparent-white-400: #ffffff79;
  --stride-color-transparent-white-500: #ffffff90;
  --stride-color-transparent-white-550: #ffffffb0;
  --stride-color-transparent-white-600: #ffffffcb;
  --stride-color-transparent-white-700: #ffffffde;
  --stride-color-transparent-white-800: #ffffffec;
  --stride-color-transparent-white-900: #fffffff6;
  --stride-color-transparent-white-950: #fffffffc;
  --stride-color-transparent-white-1000: #ffffff;

  /* Color / brand-blue */
  --stride-color-brand-blue-50: #eaf3ff;
  --stride-color-brand-blue-100: #d8e9ff;
  --stride-color-brand-blue-200: #bbd7ff;
  --stride-color-brand-blue-300: #91c1ff;
  --stride-color-brand-blue-400: #61a5ff;
  --stride-color-brand-blue-500: #2e88f5;
  --stride-color-brand-blue-600: #0771ee;
  --stride-color-brand-blue-700: #0666d6;
  --stride-color-brand-blue-800: #0558b8;
  --stride-color-brand-blue-900: #044a99;
  --stride-color-brand-blue-950: #033b7a;

  /* Color / transparent-brand-blue (alpha of brand-blue-600). Figma stores
   * these semantic fills as a primitive + opacity rather than a dedicated
   * primitive, so the composites live here and semantic.css keeps aliasing
   * `--stride-color-*` only:
   *   100 = 10% (#0771ee1a) — bg/brand/bg-brand-surface (selected row rest)
   *   300 = 20% (#0771ee33) — bg/brand/bg-brand-overlay (selected row hover;
   *                           also the Calendar V2 DnD day-cell dropzone) */
  --stride-color-transparent-brand-blue-100: #0771ee1a;
  --stride-color-transparent-brand-blue-300: #0771ee33;

  /* Color / transparent-warning — Figma semantic fills that alias a warning
   * primitive plus opacity rather than a dedicated primitive:
   *   100 = warning-100 @ 80%  (bg-surface-highlight, Light)
   *   500 = warning-500 @ 60%  (bdr-highlight, Dark)
   *   700 = warning-700 @ 40%  (bg-surface-highlight, Dark)
   *   900 = warning-900 @ 50%  (bg-surface-highlight-muted, Dark) */
  --stride-color-transparent-warning-100: #ffedc2cc;
  --stride-color-transparent-warning-500: #d99a2299;
  --stride-color-transparent-warning-700: #99671566;
  --stride-color-transparent-warning-900: #60421680;

  /* Color / transparent-danger — danger-900 @ 50% (bg-danger-surface, Dark) */
  --stride-color-transparent-danger-900: #75201a80;

  /* Color / transparent-success — success-900 @ 50% (bg-success-surface, Dark) */
  --stride-color-transparent-success-900: #154a2b80;

  /* Color / transparent-accent-<family> — accent ramp step @ opacity, the
   * Figma bg/<accent>/bg-<accent>-surface-transparent fills (Light | Dark):
   *   purple 200 @56.5% | 700 @33%     olive  200 @55%   | 900 @58.8%
   *   cyan   300 @34.7% | 900 @67.9%   amber  200 @58.1% | 900 @62.9%
   *   indigo 300 @33.2% | 700 @39.4%   brick  600 @16%   | 700 @35.8%
   *   slate  200 @57.2% | 100 @4.2%    yellow 500 @17.5% | 900 @62.6%
   *   pink   200 @56.8% | 700 @33.6% */
  --stride-color-transparent-accent-purple-200: #e3d6f190;
  --stride-color-transparent-accent-purple-700: #70419d54;
  --stride-color-transparent-accent-olive-200: #c6decd8c;
  --stride-color-transparent-accent-olive-900: #24453196;
  --stride-color-transparent-accent-cyan-300: #9bc7d358;
  --stride-color-transparent-accent-cyan-900: #1f4650ad;
  --stride-color-transparent-accent-amber-200: #ecd7c394;
  --stride-color-transparent-accent-amber-900: #5d3c2ca0;
  --stride-color-transparent-accent-indigo-300: #b4b9dc55;
  --stride-color-transparent-accent-indigo-700: #53589664;
  --stride-color-transparent-accent-brick-600: #b8485829;
  --stride-color-transparent-accent-brick-700: #993c4b5b;
  --stride-color-transparent-accent-slate-100: #eeeeed0b;
  --stride-color-transparent-accent-slate-200: #e1e1e092;
  --stride-color-transparent-accent-yellow-500: #c2a73a2d;
  --stride-color-transparent-accent-yellow-900: #41391ba0;
  --stride-color-transparent-accent-pink-200: #f1d6e991;
  --stride-color-transparent-accent-pink-700: #9d418156;

  /* Color / danger */
  --stride-color-danger-50: #fff0ee;
  --stride-color-danger-100: #ffdcd7;
  --stride-color-danger-200: #ffbdb5;
  --stride-color-danger-300: #ff968b;
  --stride-color-danger-400: #f56f62;
  --stride-color-danger-500: #e84b3d;
  --stride-color-danger-600: #d9362b;
  --stride-color-danger-700: #ba2b22;
  --stride-color-danger-800: #98251e;
  --stride-color-danger-900: #75201a;

  /* Color / success */
  --stride-color-success-50: #ecf8f0;
  --stride-color-success-100: #d6f0de;
  --stride-color-success-200: #b1e2c0;
  --stride-color-success-300: #83d09b;
  --stride-color-success-400: #5cbd79;
  --stride-color-success-500: #3ba962;
  --stride-color-success-600: #278f4f;
  --stride-color-success-700: #207640;
  --stride-color-success-800: #1a5e35;
  --stride-color-success-900: #154a2b;

  /* Color / warning */
  --stride-color-warning-50: #fff8e8;
  --stride-color-warning-100: #ffedc2;
  --stride-color-warning-200: #ffdc91;
  --stride-color-warning-300: #fbc75f;
  --stride-color-warning-400: #efb137;
  --stride-color-warning-500: #d99a22;
  --stride-color-warning-600: #bd8016;
  --stride-color-warning-700: #996715;
  --stride-color-warning-800: #795216;
  --stride-color-warning-900: #604216;

  /* Color / info — same hexes as brand-blue, including the 950 step */
  --stride-color-info-50: #eaf3ff;
  --stride-color-info-100: #d8e9ff;
  --stride-color-info-200: #bbd7ff;
  --stride-color-info-300: #91c1ff;
  --stride-color-info-400: #61a5ff;
  --stride-color-info-500: #2e88f5;
  --stride-color-info-600: #0771ee;
  --stride-color-info-700: #0666d6;
  --stride-color-info-800: #0558b8;
  --stride-color-info-900: #044a99;
  --stride-color-info-950: #033b7a;

  /* Color / accent-purple */
  --stride-color-accent-purple-50: #f7f4fb;
  --stride-color-accent-purple-100: #efe8f7;
  --stride-color-accent-purple-200: #e3d6f1;
  --stride-color-accent-purple-300: #d2bbea;
  --stride-color-accent-purple-400: #bc99e2;
  --stride-color-accent-purple-500: #a474d2;
  --stride-color-accent-purple-600: #8b55bd;
  --stride-color-accent-purple-700: #70419d;
  --stride-color-accent-purple-800: #593a78;
  --stride-color-accent-purple-900: #45305d;
  --stride-color-accent-purple-950: #322245;

  /* Color / accent-olive */
  --stride-color-accent-olive-50: #f0f7f2;
  --stride-color-accent-olive-100: #e0ede3;
  --stride-color-accent-olive-200: #c6decd;
  --stride-color-accent-olive-300: #a3cdae;
  --stride-color-accent-olive-400: #7cb78b;
  --stride-color-accent-olive-500: #599f6e;
  --stride-color-accent-olive-600: #43895a;
  --stride-color-accent-olive-700: #346f4a;
  --stride-color-accent-olive-800: #2d563d;
  --stride-color-accent-olive-900: #244531;
  --stride-color-accent-olive-950: #1b3326;

  /* Color / accent-cyan */
  --stride-color-accent-cyan-50: #eef6f9;
  --stride-color-accent-cyan-100: #dcecf0;
  --stride-color-accent-cyan-200: #bedde6;
  --stride-color-accent-cyan-300: #9bc7d3;
  --stride-color-accent-cyan-400: #73afbf;
  --stride-color-accent-cyan-500: #5195a8;
  --stride-color-accent-cyan-600: #3b8093;
  --stride-color-accent-cyan-700: #2e6a7a;
  --stride-color-accent-cyan-800: #265764;
  --stride-color-accent-cyan-900: #1f4650;
  --stride-color-accent-cyan-950: #16363f;

  /* Color / accent-amber */
  --stride-color-accent-amber-50: #faf4ef;
  --stride-color-accent-amber-100: #f4e8dc;
  --stride-color-accent-amber-200: #ecd7c3;
  --stride-color-accent-amber-300: #e6c09d;
  --stride-color-accent-amber-400: #dca171;
  --stride-color-accent-amber-500: #cc844f;
  --stride-color-accent-amber-600: #b76d3b;
  --stride-color-accent-amber-700: #995a35;
  --stride-color-accent-amber-800: #744a33;
  --stride-color-accent-amber-900: #5d3c2c;
  --stride-color-accent-amber-950: #442d23;

  /* Color / accent-indigo */
  --stride-color-accent-indigo-50: #f3f3f9;
  --stride-color-accent-indigo-100: #e6e8f3;
  --stride-color-accent-indigo-200: #d1d4e8;
  --stride-color-accent-indigo-300: #b4b9dc;
  --stride-color-accent-indigo-400: #949bcf;
  --stride-color-accent-indigo-500: #777dbe;
  --stride-color-accent-indigo-600: #6269af;
  --stride-color-accent-indigo-700: #535896;
  --stride-color-accent-indigo-800: #484c76;
  --stride-color-accent-indigo-900: #3c3f60;
  --stride-color-accent-indigo-950: #2d3149;

  /* Color / accent-brick */
  --stride-color-accent-brick-50: #f9f2f2;
  --stride-color-accent-brick-100: #f4e2e4;
  --stride-color-accent-brick-200: #eacbce;
  --stride-color-accent-brick-300: #e4a7af;
  --stride-color-accent-brick-400: #db828d;
  --stride-color-accent-brick-500: #cd606e;
  --stride-color-accent-brick-600: #b84858;
  --stride-color-accent-brick-700: #993c4b;
  --stride-color-accent-brick-800: #753741;
  --stride-color-accent-brick-900: #5e2f38;
  --stride-color-accent-brick-950: #45232b;

  /* Color / accent-slate */
  --stride-color-accent-slate-50: #f7f7f6;
  --stride-color-accent-slate-100: #eeeeed;
  --stride-color-accent-slate-200: #e1e1e0;
  --stride-color-accent-slate-300: #d0d0cf;
  --stride-color-accent-slate-400: #b7b7b5;
  --stride-color-accent-slate-500: #9a9a98;
  --stride-color-accent-slate-600: #70706e;
  --stride-color-accent-slate-700: #575755;
  --stride-color-accent-slate-800: #3d3d3b;
  --stride-color-accent-slate-900: #2b2b29;
  --stride-color-accent-slate-950: #20201f;

  /* Color / accent-yellow */
  --stride-color-accent-yellow-50: #f9f7f1;
  --stride-color-accent-yellow-100: #f4efdd;
  --stride-color-accent-yellow-200: #ece3c0;
  --stride-color-accent-yellow-300: #e2d49a;
  --stride-color-accent-yellow-400: #d6c066;
  --stride-color-accent-yellow-500: #c2a73a;
  --stride-color-accent-yellow-600: #847127;
  --stride-color-accent-yellow-700: #695b23;
  --stride-color-accent-yellow-800: #54491f;
  --stride-color-accent-yellow-900: #41391b;
  --stride-color-accent-yellow-950: #322c15;

  /* Color / accent-pink */
  --stride-color-accent-pink-50: #fbf4f9;
  --stride-color-accent-pink-100: #f7e8f2;
  --stride-color-accent-pink-200: #f1d6e9;
  --stride-color-accent-pink-300: #eabbdc;
  --stride-color-accent-pink-400: #e299cc;
  --stride-color-accent-pink-500: #d274b6;
  --stride-color-accent-pink-600: #bd559e;
  --stride-color-accent-pink-700: #9d4181;
  --stride-color-accent-pink-800: #783a65;
  --stride-color-accent-pink-900: #5d304f;
  --stride-color-accent-pink-950: #45223a;

  /* Color / gray */
  --stride-color-gray-0: #ffffff;
  --stride-color-gray-25: #fcfcfb;
  --stride-color-gray-50: #f7f7f6;
  --stride-color-gray-100: #eeeeed;
  --stride-color-gray-200: #e1e1e0;
  --stride-color-gray-300: #d0d0cf;
  --stride-color-gray-400: #b7b7b5;
  --stride-color-gray-500: #9a9a98;
  --stride-color-gray-550: #858583;
  --stride-color-gray-600: #70706e;
  --stride-color-gray-700: #575755;
  --stride-color-gray-800: #3d3d3b;
  --stride-color-gray-900: #2b2b29;
  --stride-color-gray-950: #20201f;
  --stride-color-gray-1000: #171716;

  /* Spacing */
  --stride-spacing-spc-0_5x: 2px;
  --stride-spacing-spc-1x: 4px;
  --stride-spacing-spc-1_5x: 6px;
  --stride-spacing-spc-2x: 8px;
  --stride-spacing-spc-2_5x: 10px;
  --stride-spacing-spc-3x: 12px;
  --stride-spacing-spc-4x: 16px;
  --stride-spacing-spc-5x: 20px;
  --stride-spacing-spc-7x: 28px;
  --stride-spacing-spc-10x: 40px;

  /* Border Width */
  --stride-border-width-thic-1: 1px;
  --stride-border-width-thic-1_25: 1.25px;
  --stride-border-width-thic-1_5: 1.5px;

  /* Radius */
  --stride-radius-rad-1x: 4px;
  --stride-radius-rad-1_5x: 6px;
  --stride-radius-rad-2x: 8px;
  --stride-radius-rad-2_5x: 10px;
  --stride-radius-rad-3_5x: 14px;
  --stride-radius-rad-full: 999px;
}

/*
 * Calendar 2026 semantic tokens.
 * Source: Figma "Client Calendar for Coaches" → Semantic collection (Light / Dark).
 * Every value aliases a primitive via var(--stride-color-*); never a raw hex.
 *
 * Figma name deviations (leaf names normalized to match the other accent families):
 *   olive/ctn-olive-teritiary → --stride-ctn-olive-tertiary
 */

[data-stride-theme="light"] {
  /* bg / canvas */
  --stride-bg-canvas-primary: var(--stride-color-gray-0);
  --stride-bg-canvas-muted: var(--stride-color-gray-50);

  /* bg / surface */
  --stride-bg-surface-primary: var(--stride-color-gray-0);
  --stride-bg-surface-secondary: var(--stride-color-gray-100);
  --stride-bg-surface-highlight: var(--stride-color-transparent-warning-100);
  --stride-bg-surface-highlight-muted: var(--stride-color-warning-50);
  /* Always dark, in either app theme — for permanently-inverse surfaces
   * like the snackbar. Same value as the dark-mode block below. */
  --stride-bg-surface-inverse: var(--stride-color-gray-950);

  /* bg / neutral */
  --stride-bg-neutral-primary: var(--stride-color-transparent-gray-0);
  --stride-bg-neutral-hover: var(--stride-color-transparent-gray-100);
  --stride-bg-neutral-active: var(--stride-color-transparent-gray-50);
  --stride-bg-neutral-disabled: var(--stride-color-transparent-gray-50);
  --stride-bg-neutral-selected: var(--stride-color-transparent-gray-100);
  --stride-bg-transparent-zero: var(--stride-color-transparent-gray-0);

  /* bg / brand */
  --stride-bg-brand-primary: var(--stride-color-brand-blue-600);
  --stride-bg-brand-hover: var(--stride-color-brand-blue-700);
  --stride-bg-brand-active: var(--stride-color-brand-blue-500);
  --stride-bg-brand-disabled: var(--stride-color-brand-blue-400);
  --stride-bg-brand-surface: var(--stride-color-transparent-brand-blue-100);
  --stride-bg-brand-overlay: var(--stride-color-transparent-brand-blue-300);

  /* bg / danger */
  --stride-bg-danger-primary: var(--stride-color-danger-600);
  --stride-bg-danger-hover: var(--stride-color-danger-700);
  --stride-bg-danger-active: var(--stride-color-danger-500);
  --stride-bg-danger-disabled: var(--stride-color-danger-400);
  --stride-bg-danger-surface: var(--stride-color-danger-50);

  /* bg / success */
  --stride-bg-success-primary: var(--stride-color-success-600);
  --stride-bg-success-hover: var(--stride-color-success-700);
  --stride-bg-success-active: var(--stride-color-success-800);
  --stride-bg-success-surface: var(--stride-color-success-50);

  /* bg / warning */
  --stride-bg-warning-primary: var(--stride-color-warning-600);
  --stride-bg-warning-hover: var(--stride-color-warning-700);
  --stride-bg-warning-active: var(--stride-color-warning-800);

  /* bg / info */
  --stride-bg-info-primary: var(--stride-color-info-600);
  --stride-bg-info-hover: var(--stride-color-info-700);
  --stride-bg-info-active: var(--stride-color-info-800);

  /* bg / overlay */
  --stride-bg-overlay: var(--stride-color-transparent-gray-500);

  /* ctn */
  --stride-ctn-primary: var(--stride-color-transparent-gray-950);
  --stride-ctn-secondary: var(--stride-color-transparent-gray-800);
  --stride-ctn-tertiary: var(--stride-color-transparent-gray-600);
  --stride-ctn-muted: var(--stride-color-transparent-gray-500);
  --stride-ctn-placeholder: var(--stride-color-transparent-gray-500);
  --stride-ctn-disabled: var(--stride-color-transparent-gray-500);
  --stride-ctn-inversed: var(--stride-color-transparent-white-900);
  --stride-ctn-inversed-disabled: var(--stride-color-transparent-white-600);

  /* ctn / success */
  --stride-ctn-success-primary: var(--stride-color-success-600);
  --stride-ctn-success-secondary: var(--stride-color-success-500);

  /* ctn / danger */
  --stride-ctn-danger-primary: var(--stride-color-danger-600);
  --stride-ctn-danger-secondary: var(--stride-color-danger-500);

  /* ctn / warning */
  --stride-ctn-warning-primary: var(--stride-color-warning-800);
  --stride-ctn-warning-secondary: var(--stride-color-warning-700);

  /* ctn / info */
  --stride-ctn-info-primary: var(--stride-color-info-700);
  --stride-ctn-info-secondary: var(--stride-color-info-600);

  /* ctn / brand — Figma aliases the info ramp, which currently shares
   * brand-blue hexes. Keep the alias graph matching Figma. */
  --stride-ctn-brand-primary: var(--stride-color-info-700);
  --stride-ctn-brand-secondary: var(--stride-color-info-600);

  /* ctn / link */
  --stride-ctn-link-primary: var(--stride-color-brand-blue-700);
  --stride-ctn-link-hover: var(--stride-color-brand-blue-800);
  --stride-ctn-link-pressed: var(--stride-color-brand-blue-900);
  --stride-link-disabled: var(--stride-color-transparent-gray-500);

  /* bdr */
  --stride-bdr-divider: var(--stride-color-transparent-gray-200);
  --stride-bdr-light: var(--stride-color-transparent-gray-200);
  --stride-bdr-dark: var(--stride-color-transparent-gray-200);
  --stride-bdr-darker: var(--stride-color-transparent-gray-300);
  --stride-bdr-disabled: var(--stride-color-transparent-gray-200);
  --stride-bdr-focus: var(--stride-color-brand-blue-500);
  --stride-bdr-focus-ring: var(--stride-color-brand-blue-200);
  --stride-bdr-hover: var(--stride-color-transparent-gray-300);
  --stride-bdr-danger: var(--stride-color-danger-600);
  --stride-bdr-success: var(--stride-color-success-600);
  --stride-bdr-warning: var(--stride-color-warning-600);
  --stride-bdr-highlight: var(--stride-color-warning-200);
  --stride-bdr-info: var(--stride-color-info-600);
  --stride-bdr-brand: var(--stride-color-brand-blue-600);
  /* For tiny elements (buttons) on a permanently-inverse surface. Always
   * ~16% white, in either app theme — same value as the dark-mode block. */
  --stride-bdr-inversed: var(--stride-color-transparent-white-100);

  /* shadow — color only; composed drop shadows live in effects.css */
  --stride-shadow-color-sm: var(--stride-color-transparent-gray-50);
  --stride-shadow-color-md: var(--stride-color-transparent-gray-100);
  --stride-shadow-color-lg: var(--stride-color-transparent-gray-200);

  /* brick */
  --stride-bg-brick-primary: var(--stride-color-accent-brick-500);
  --stride-bg-brick-surface: var(--stride-color-accent-brick-100);
  --stride-bg-brick-surface-transparent: var(
    --stride-color-transparent-accent-brick-600
  );
  --stride-ctn-brick-primary: var(--stride-color-accent-brick-600);
  --stride-ctn-brick-secondary: var(--stride-color-accent-brick-500);
  --stride-ctn-brick-tertiary: var(--stride-color-accent-brick-400);
  --stride-bdr-brick-light: var(--stride-color-accent-brick-300);
  --stride-bdr-brick-dark: var(--stride-color-accent-brick-700);

  /* amber */
  --stride-bg-amber-primary: var(--stride-color-accent-amber-500);
  --stride-bg-amber-surface: var(--stride-color-accent-amber-100);
  --stride-bg-amber-surface-transparent: var(
    --stride-color-transparent-accent-amber-200
  );
  --stride-ctn-amber-primary: var(--stride-color-accent-amber-600);
  --stride-ctn-amber-secondary: var(--stride-color-accent-amber-500);
  --stride-ctn-amber-tertiary: var(--stride-color-accent-amber-400);
  --stride-bdr-amber-light: var(--stride-color-accent-amber-300);
  --stride-bdr-amber-dark: var(--stride-color-accent-amber-700);

  /* yellow */
  --stride-bg-yellow-primary: var(--stride-color-accent-yellow-500);
  --stride-bg-yellow-surface: var(--stride-color-accent-yellow-100);
  --stride-bg-yellow-surface-transparent: var(
    --stride-color-transparent-accent-yellow-500
  );
  --stride-ctn-yellow-primary: var(--stride-color-accent-yellow-600);
  --stride-ctn-yellow-secondary: var(--stride-color-accent-yellow-500);
  --stride-ctn-yellow-tertiary: var(--stride-color-accent-yellow-400);
  --stride-bdr-yellow-light: var(--stride-color-accent-yellow-300);
  --stride-bdr-yellow-dark: var(--stride-color-accent-yellow-700);

  /* pink */
  --stride-bg-pink-primary: var(--stride-color-accent-pink-500);
  --stride-bg-pink-surface: var(--stride-color-accent-pink-100);
  --stride-bg-pink-surface-transparent: var(
    --stride-color-transparent-accent-pink-200
  );
  --stride-ctn-pink-primary: var(--stride-color-accent-pink-600);
  --stride-ctn-pink-secondary: var(--stride-color-accent-pink-500);
  --stride-ctn-pink-tertiary: var(--stride-color-accent-pink-400);
  --stride-bdr-pink-light: var(--stride-color-accent-pink-300);
  --stride-bdr-pink-dark: var(--stride-color-accent-pink-700);

  /* purple */
  --stride-bg-purple-primary: var(--stride-color-accent-purple-500);
  --stride-bg-purple-surface: var(--stride-color-accent-purple-100);
  --stride-bg-purple-surface-transparent: var(
    --stride-color-transparent-accent-purple-200
  );
  --stride-ctn-purple-primary: var(--stride-color-accent-purple-600);
  --stride-ctn-purple-secondary: var(--stride-color-accent-purple-500);
  --stride-ctn-purple-tertiary: var(--stride-color-accent-purple-400);
  --stride-bdr-purple-light: var(--stride-color-accent-purple-300);
  --stride-bdr-purple-dark: var(--stride-color-accent-purple-700);

  /* olive */
  --stride-bg-olive-primary: var(--stride-color-accent-olive-500);
  --stride-bg-olive-surface: var(--stride-color-accent-olive-100);
  --stride-bg-olive-surface-transparent: var(
    --stride-color-transparent-accent-olive-200
  );
  --stride-ctn-olive-primary: var(--stride-color-accent-olive-600);
  --stride-ctn-olive-secondary: var(--stride-color-accent-olive-500);
  --stride-ctn-olive-tertiary: var(--stride-color-accent-olive-400);
  --stride-bdr-olive-light: var(--stride-color-accent-olive-300);
  --stride-bdr-olive-dark: var(--stride-color-accent-olive-700);

  /* cyan */
  --stride-bg-cyan-primary: var(--stride-color-accent-cyan-500);
  --stride-bg-cyan-surface: var(--stride-color-accent-cyan-100);
  --stride-bg-cyan-surface-transparent: var(
    --stride-color-transparent-accent-cyan-300
  );
  --stride-ctn-cyan-primary: var(--stride-color-accent-cyan-600);
  --stride-ctn-cyan-secondary: var(--stride-color-accent-cyan-500);
  --stride-ctn-cyan-tertiary: var(--stride-color-accent-cyan-400);
  --stride-bdr-cyan-light: var(--stride-color-accent-cyan-300);
  --stride-bdr-cyan-dark: var(--stride-color-accent-cyan-700);

  /* indigo */
  --stride-bg-indigo-primary: var(--stride-color-accent-indigo-500);
  --stride-bg-indigo-surface: var(--stride-color-accent-indigo-100);
  --stride-bg-indigo-surface-transparent: var(
    --stride-color-transparent-accent-indigo-300
  );
  --stride-ctn-indigo-primary: var(--stride-color-accent-indigo-600);
  --stride-ctn-indigo-secondary: var(--stride-color-accent-indigo-500);
  --stride-ctn-indigo-tertiary: var(--stride-color-accent-indigo-400);
  --stride-bdr-indigo-light: var(--stride-color-accent-indigo-300);
  --stride-bdr-indigo-dark: var(--stride-color-accent-indigo-700);

  /* slate */
  --stride-bg-slate-primary: var(--stride-color-accent-slate-500);
  --stride-bg-slate-surface: var(--stride-color-accent-slate-100);
  --stride-bg-slate-surface-transparent: var(
    --stride-color-transparent-accent-slate-200
  );
  --stride-ctn-slate-primary: var(--stride-color-accent-slate-600);
  --stride-ctn-slate-secondary: var(--stride-color-accent-slate-500);
  --stride-ctn-slate-tertiary: var(--stride-color-accent-slate-400);
  --stride-bdr-slate-light: var(--stride-color-accent-slate-300);
  --stride-bdr-slate-dark: var(--stride-color-accent-slate-700);
}

[data-stride-theme="dark"] {
  /* bg / canvas */
  --stride-bg-canvas-primary: var(--stride-color-gray-1000);
  --stride-bg-canvas-muted: var(--stride-color-gray-950);

  /* bg / surface */
  --stride-bg-surface-primary: var(--stride-color-gray-900);
  --stride-bg-surface-secondary: var(--stride-color-gray-950);
  --stride-bg-surface-highlight: var(--stride-color-transparent-warning-700);
  --stride-bg-surface-highlight-muted: var(
    --stride-color-transparent-warning-900
  );
  /* Always dark, in either app theme — for permanently-inverse surfaces
   * like the snackbar. Same value as the light-mode block above. */
  --stride-bg-surface-inverse: var(--stride-color-gray-950);

  /* bg / neutral */
  --stride-bg-neutral-primary: var(--stride-color-transparent-white-0);
  --stride-bg-neutral-hover: var(--stride-color-transparent-white-50);
  --stride-bg-neutral-active: var(--stride-color-transparent-white-25);
  --stride-bg-neutral-disabled: var(--stride-color-transparent-white-25);
  --stride-bg-neutral-selected: var(--stride-color-transparent-white-50);
  --stride-bg-transparent-zero: var(--stride-color-transparent-white-0);

  /* bg / brand */
  --stride-bg-brand-primary: var(--stride-color-brand-blue-600);
  --stride-bg-brand-hover: var(--stride-color-brand-blue-700);
  --stride-bg-brand-active: var(--stride-color-brand-blue-500);
  --stride-bg-brand-disabled: var(--stride-color-brand-blue-950);
  --stride-bg-brand-surface: var(--stride-color-transparent-brand-blue-100);
  --stride-bg-brand-overlay: var(--stride-color-transparent-brand-blue-300);

  /* bg / danger */
  --stride-bg-danger-primary: var(--stride-color-danger-500);
  --stride-bg-danger-hover: var(--stride-color-danger-600);
  --stride-bg-danger-active: var(--stride-color-danger-400);
  --stride-bg-danger-disabled: var(--stride-color-danger-900);
  --stride-bg-danger-surface: var(--stride-color-transparent-danger-900);

  /* bg / success */
  --stride-bg-success-primary: var(--stride-color-success-500);
  --stride-bg-success-hover: var(--stride-color-success-400);
  --stride-bg-success-active: var(--stride-color-success-600);
  --stride-bg-success-surface: var(--stride-color-transparent-success-900);

  /* bg / warning */
  --stride-bg-warning-primary: var(--stride-color-warning-500);
  --stride-bg-warning-hover: var(--stride-color-warning-400);
  --stride-bg-warning-active: var(--stride-color-warning-600);

  /* bg / info */
  --stride-bg-info-primary: var(--stride-color-info-500);
  --stride-bg-info-hover: var(--stride-color-info-400);
  --stride-bg-info-active: var(--stride-color-info-600);

  /* bg / overlay */
  --stride-bg-overlay: var(--stride-color-transparent-gray-500);

  /* ctn */
  --stride-ctn-primary: var(--stride-color-transparent-white-800);
  --stride-ctn-secondary: var(--stride-color-transparent-white-600);
  --stride-ctn-tertiary: var(--stride-color-transparent-white-400);
  --stride-ctn-muted: var(--stride-color-transparent-white-300);
  --stride-ctn-placeholder: var(--stride-color-transparent-white-300);
  --stride-ctn-disabled: var(--stride-color-transparent-white-200);
  --stride-ctn-inversed: var(--stride-color-transparent-white-900);
  --stride-ctn-inversed-disabled: var(--stride-color-transparent-white-300);

  /* ctn / success */
  --stride-ctn-success-primary: var(--stride-color-success-300);
  --stride-ctn-success-secondary: var(--stride-color-success-300);

  /* ctn / danger */
  --stride-ctn-danger-primary: var(--stride-color-danger-300);
  --stride-ctn-danger-secondary: var(--stride-color-danger-300);

  /* ctn / warning */
  --stride-ctn-warning-primary: var(--stride-color-warning-200);
  --stride-ctn-warning-secondary: var(--stride-color-warning-300);

  /* ctn / info */
  --stride-ctn-info-primary: var(--stride-color-info-200);
  --stride-ctn-info-secondary: var(--stride-color-info-300);

  /* ctn / brand — Figma aliases the info ramp, which currently shares
   * brand-blue hexes. Keep the alias graph matching Figma. */
  --stride-ctn-brand-primary: var(--stride-color-info-200);
  --stride-ctn-brand-secondary: var(--stride-color-info-300);

  /* ctn / link */
  --stride-ctn-link-primary: var(--stride-color-brand-blue-400);
  --stride-ctn-link-hover: var(--stride-color-brand-blue-300);
  --stride-ctn-link-pressed: var(--stride-color-brand-blue-500);
  --stride-link-disabled: var(--stride-color-transparent-white-500);

  /* bdr */
  --stride-bdr-divider: var(--stride-color-transparent-white-50);
  --stride-bdr-light: var(--stride-color-transparent-white-25);
  --stride-bdr-dark: var(--stride-color-transparent-white-50);
  --stride-bdr-darker: var(--stride-color-transparent-white-100);
  --stride-bdr-disabled: var(--stride-color-transparent-white-50);
  --stride-bdr-focus: var(--stride-color-brand-blue-600);
  --stride-bdr-focus-ring: var(--stride-color-brand-blue-400);
  --stride-bdr-hover: var(--stride-color-transparent-white-100);
  --stride-bdr-danger: var(--stride-color-danger-400);
  --stride-bdr-success: var(--stride-color-success-400);
  --stride-bdr-warning: var(--stride-color-warning-400);
  --stride-bdr-highlight: var(--stride-color-transparent-warning-500);
  --stride-bdr-info: var(--stride-color-info-400);
  --stride-bdr-brand: var(--stride-color-brand-blue-400);
  /* For tiny elements (buttons) on a permanently-inverse surface. Always
   * ~16% white, in either app theme — same value as the light-mode block. */
  --stride-bdr-inversed: var(--stride-color-transparent-white-100);

  /* shadow — color only; composed drop shadows live in effects.css */
  --stride-shadow-color-sm: var(--stride-color-transparent-gray-0);
  --stride-shadow-color-md: var(--stride-color-transparent-gray-950);
  --stride-shadow-color-lg: var(--stride-color-transparent-gray-950);

  /* brick */
  --stride-bg-brick-primary: var(--stride-color-accent-brick-600);
  --stride-bg-brick-surface: var(--stride-color-accent-brick-950);
  --stride-bg-brick-surface-transparent: var(
    --stride-color-transparent-accent-brick-700
  );
  --stride-ctn-brick-primary: var(--stride-color-accent-brick-500);
  --stride-ctn-brick-secondary: var(--stride-color-accent-brick-600);
  --stride-ctn-brick-tertiary: var(--stride-color-accent-brick-700);
  --stride-bdr-brick-light: var(--stride-color-accent-brick-800);
  --stride-bdr-brick-dark: var(--stride-color-accent-brick-500);

  /* amber */
  --stride-bg-amber-primary: var(--stride-color-accent-amber-600);
  --stride-bg-amber-surface: var(--stride-color-accent-amber-950);
  --stride-bg-amber-surface-transparent: var(
    --stride-color-transparent-accent-amber-900
  );
  --stride-ctn-amber-primary: var(--stride-color-accent-amber-500);
  --stride-ctn-amber-secondary: var(--stride-color-accent-amber-600);
  --stride-ctn-amber-tertiary: var(--stride-color-accent-amber-700);
  --stride-bdr-amber-light: var(--stride-color-accent-amber-800);
  --stride-bdr-amber-dark: var(--stride-color-accent-amber-500);

  /* yellow */
  --stride-bg-yellow-primary: var(--stride-color-accent-yellow-600);
  --stride-bg-yellow-surface: var(--stride-color-accent-yellow-950);
  --stride-bg-yellow-surface-transparent: var(
    --stride-color-transparent-accent-yellow-900
  );
  --stride-ctn-yellow-primary: var(--stride-color-accent-yellow-500);
  --stride-ctn-yellow-secondary: var(--stride-color-accent-yellow-600);
  --stride-ctn-yellow-tertiary: var(--stride-color-accent-yellow-700);
  --stride-bdr-yellow-light: var(--stride-color-accent-yellow-800);
  --stride-bdr-yellow-dark: var(--stride-color-accent-yellow-500);

  /* pink */
  --stride-bg-pink-primary: var(--stride-color-accent-pink-600);
  --stride-bg-pink-surface: var(--stride-color-accent-pink-950);
  --stride-bg-pink-surface-transparent: var(
    --stride-color-transparent-accent-pink-700
  );
  --stride-ctn-pink-primary: var(--stride-color-accent-pink-500);
  --stride-ctn-pink-secondary: var(--stride-color-accent-pink-600);
  --stride-ctn-pink-tertiary: var(--stride-color-accent-pink-700);
  --stride-bdr-pink-light: var(--stride-color-accent-pink-800);
  --stride-bdr-pink-dark: var(--stride-color-accent-pink-500);

  /* purple */
  --stride-bg-purple-primary: var(--stride-color-accent-purple-600);
  --stride-bg-purple-surface: var(--stride-color-accent-purple-950);
  --stride-bg-purple-surface-transparent: var(
    --stride-color-transparent-accent-purple-700
  );
  --stride-ctn-purple-primary: var(--stride-color-accent-purple-500);
  --stride-ctn-purple-secondary: var(--stride-color-accent-purple-600);
  --stride-ctn-purple-tertiary: var(--stride-color-accent-purple-700);
  --stride-bdr-purple-light: var(--stride-color-accent-purple-800);
  --stride-bdr-purple-dark: var(--stride-color-accent-purple-500);

  /* olive */
  --stride-bg-olive-primary: var(--stride-color-accent-olive-600);
  --stride-bg-olive-surface: var(--stride-color-accent-olive-950);
  --stride-bg-olive-surface-transparent: var(
    --stride-color-transparent-accent-olive-900
  );
  --stride-ctn-olive-primary: var(--stride-color-accent-olive-500);
  --stride-ctn-olive-secondary: var(--stride-color-accent-olive-600);
  --stride-ctn-olive-tertiary: var(--stride-color-accent-olive-700);
  --stride-bdr-olive-light: var(--stride-color-accent-olive-800);
  --stride-bdr-olive-dark: var(--stride-color-accent-olive-500);

  /* cyan */
  --stride-bg-cyan-primary: var(--stride-color-accent-cyan-600);
  --stride-bg-cyan-surface: var(--stride-color-accent-cyan-950);
  --stride-bg-cyan-surface-transparent: var(
    --stride-color-transparent-accent-cyan-900
  );
  --stride-ctn-cyan-primary: var(--stride-color-accent-cyan-500);
  --stride-ctn-cyan-secondary: var(--stride-color-accent-cyan-600);
  --stride-ctn-cyan-tertiary: var(--stride-color-accent-cyan-700);
  --stride-bdr-cyan-light: var(--stride-color-accent-cyan-800);
  --stride-bdr-cyan-dark: var(--stride-color-accent-cyan-500);

  /* indigo */
  --stride-bg-indigo-primary: var(--stride-color-accent-indigo-600);
  --stride-bg-indigo-surface: var(--stride-color-accent-indigo-950);
  --stride-bg-indigo-surface-transparent: var(
    --stride-color-transparent-accent-indigo-700
  );
  --stride-ctn-indigo-primary: var(--stride-color-accent-indigo-500);
  --stride-ctn-indigo-secondary: var(--stride-color-accent-indigo-600);
  --stride-ctn-indigo-tertiary: var(--stride-color-accent-indigo-700);
  --stride-bdr-indigo-light: var(--stride-color-accent-indigo-800);
  --stride-bdr-indigo-dark: var(--stride-color-accent-indigo-500);

  /* slate */
  --stride-bg-slate-primary: var(--stride-color-accent-slate-600);
  --stride-bg-slate-surface: var(--stride-color-accent-slate-950);
  --stride-bg-slate-surface-transparent: var(
    --stride-color-transparent-accent-slate-100
  );
  --stride-ctn-slate-primary: var(--stride-color-accent-slate-500);
  --stride-ctn-slate-secondary: var(--stride-color-accent-slate-600);
  --stride-ctn-slate-tertiary: var(--stride-color-accent-slate-700);
  --stride-bdr-slate-light: var(--stride-color-accent-slate-800);
  --stride-bdr-slate-dark: var(--stride-color-accent-slate-500);
}

/*
 * Calendar 2026 typography tokens and text styles.
 * Source: Figma "Client Calendar for Coaches" local text styles (Inter Variable).
 * Font family maps to Inter (loaded app-wide via rsms.me/inter).
 * Text style classes are scoped under [data-stride-theme] so they cannot leak.
 */

[data-stride-theme] {
  --stride-font-family: Inter, sans-serif;
  --stride-font-size-12: 12px;
  --stride-font-size-13: 13px;
  --stride-font-size-14: 14px;
  --stride-font-size-18: 18px;
  --stride-font-size-24: 24px;
  --stride-font-weight-regular: 400;
  --stride-font-weight-medium: 500;
  --stride-font-weight-semibold: 600;
  --stride-font-weight-bold: 700;
  --stride-font-line-height-paragraph-xs: 16.8px;
  --stride-font-line-height-paragraph-sm: 18.98px;
  --stride-font-line-height-paragraph-md: 20.44px;
  /* DESCENDER-SAFE LINE HEIGHTS for the label sizes.
   *
   * Every `.stride-text-label-*` class below sets `line-height` equal to its
   * `font-size` — line-height 1.0, as the Figma text styles state it. Inter's
   * own ascent + descent is ~1.21em, so a 1.0 line box is SHORTER than the
   * glyphs it holds: the half-leading goes negative and the ink overhangs the
   * content box top and bottom by ~0.1em each. Wherever such a line sits in a
   * box with `overflow: hidden`, the browser clips that overhang and a
   * descender is cut off — "40 kg" loses the tail of the g.
   *
   * These are the same sizes rounded up past 1.21em, for the places that clip.
   * They are NOT applied to the text classes themselves: doing that would
   * re-flow every label in the system (buttons, menu rows, the tray header) to
   * fix a handful of boxes that clip, and the label classes are used far more
   * often for single centred lines that never could. A rule that opts in says
   * where the overflow actually is. */
  --stride-font-line-height-label-sm: 15px;
  --stride-font-line-height-label-md: 16px;
  --stride-font-line-height-label-lg: 17px;
}

[data-stride-theme] .stride-text-label-sm-regular,
[data-stride-theme] .stride-text-label-sm-medium,
[data-stride-theme] .stride-text-label-sm-semibold,
[data-stride-theme] .stride-text-label-sm-bold,
[data-stride-theme] .stride-text-label-md-regular,
[data-stride-theme] .stride-text-label-md-medium,
[data-stride-theme] .stride-text-label-md-semibold,
[data-stride-theme] .stride-text-label-md-bold,
[data-stride-theme] .stride-text-label-lg-regular,
[data-stride-theme] .stride-text-label-lg-medium,
[data-stride-theme] .stride-text-label-lg-semibold,
[data-stride-theme] .stride-text-label-lg-bold,
[data-stride-theme] .stride-text-title-sm-regular,
[data-stride-theme] .stride-text-title-sm-medium,
[data-stride-theme] .stride-text-title-sm-semibold,
[data-stride-theme] .stride-text-title-sm-bold,
[data-stride-theme] .stride-text-title-md-regular,
[data-stride-theme] .stride-text-title-md-medium,
[data-stride-theme] .stride-text-title-md-semibold,
[data-stride-theme] .stride-text-title-md-bold,
[data-stride-theme] .stride-text-title-lg-regular,
[data-stride-theme] .stride-text-title-lg-medium,
[data-stride-theme] .stride-text-title-lg-semibold,
[data-stride-theme] .stride-text-title-lg-bold,
[data-stride-theme] .stride-text-paragraph-xs-regular,
[data-stride-theme] .stride-text-paragraph-sm-regular,
[data-stride-theme] .stride-text-paragraph-sm-medium,
[data-stride-theme] .stride-text-paragraph-sm-semibold,
[data-stride-theme] .stride-text-paragraph-sm-bold,
[data-stride-theme] .stride-text-paragraph-md-regular,
[data-stride-theme] .stride-text-paragraph-md-medium,
[data-stride-theme] .stride-text-paragraph-md-semibold,
[data-stride-theme] .stride-text-paragraph-md-bold,
[data-stride-theme] .stride-text-button-regular,
[data-stride-theme] .stride-text-button-medium,
[data-stride-theme] .stride-text-button-semibold,
[data-stride-theme] .stride-text-button-bold {
  font-family: var(--stride-font-family);
  letter-spacing: 0;
  margin: 0;
}

[data-stride-theme] .stride-text-label-sm-regular {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-sm-medium {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-sm-semibold {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-sm-bold {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-md-regular {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-md-medium {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-md-semibold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-md-bold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-lg-regular {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-label-lg-medium {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-label-lg-semibold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-label-lg-bold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-regular {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-medium {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-semibold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-bold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-md-regular {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-md-medium {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-md-semibold {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-md-bold {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-lg-regular {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-title-lg-medium {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-title-lg-semibold {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-title-lg-bold {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-paragraph-xs-regular {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-line-height-paragraph-xs);
}

[data-stride-theme] .stride-text-paragraph-sm-regular {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-sm-medium {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-sm-semibold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-sm-bold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-md-regular {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-paragraph-md-medium {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-paragraph-md-semibold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-paragraph-md-bold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-button-regular {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-button-medium {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-button-semibold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-button-bold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-13);
}

/*
 * TKC Stride effect styles.
 * Source: Figma "TKC Calendar 2026" → Shadow/sm, Shadow/md, Shadow/lg,
 * Shadow/focus. Shadow/sm, Shadow/md, and Shadow/lg alias Semantic
 * --stride-shadow-color-*. Shadow/focus aliases Semantic
 * --stride-bdr-focus-ring so Light/Dark track.
 */

[data-stride-theme] {
  --stride-shadow-sm: 0 0.5px 1.5px 0 var(--stride-shadow-color-sm);
  --stride-shadow-md:
    0 8px 18px 0 var(--stride-shadow-color-lg),
    0 1px 4px -1px var(--stride-shadow-color-sm);
  --stride-shadow-lg: 0 8px 28px 0 var(--stride-shadow-color-lg);
  --stride-shadow-focus: 0 0 0 2px var(--stride-bdr-focus-ring);
}

[data-stride-theme] .stride-shadow-sm {
  box-shadow: var(--stride-shadow-sm);
}

[data-stride-theme] .stride-shadow-md {
  box-shadow: var(--stride-shadow-md);
}

[data-stride-theme] .stride-shadow-lg {
  box-shadow: var(--stride-shadow-lg);
}

[data-stride-theme] .stride-shadow-focus {
  box-shadow: var(--stride-shadow-focus);
}



/*
 * Stride Button.
 * Source: Figma "TKC Calendar 2026" node 1722:103815.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-button,
[data-stride-theme] .stride-button * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma labeled buttons: min width 60px. Icon-only is square and overrides. */
  min-width: 60px;
  height: 36px;
  margin: 0;
  padding: 0 var(--stride-spacing-spc-4x);
  overflow: clip;
  border: var(--stride-border-width-thic-1) solid var(--stride-bdr-darker);
  border-radius: var(--stride-radius-rad-2x);
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--stride-shadow-sm);
}

[data-stride-theme] .stride-button:focus {
  outline: none;
}

[data-stride-theme] .stride-button:focus-visible {
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-button:disabled {
  cursor: not-allowed;
}

[data-stride-theme] .stride-button[data-loading="true"] {
  cursor: default;
  pointer-events: none;
}

[data-stride-theme] .stride-button--small {
  height: 28px;
  padding: 0 var(--stride-spacing-spc-3x);
  border-radius: var(--stride-radius-rad-1_5x);
}

[data-stride-theme] .stride-button--default.stride-button--has-leading {
  padding-left: var(--stride-spacing-spc-3x);
}

[data-stride-theme] .stride-button--default.stride-button--has-trailing {
  padding-right: var(--stride-spacing-spc-3x);
}

[data-stride-theme]
  .stride-button--small.stride-button--has-leading:not(
    .stride-button--has-trailing
  ) {
  padding-left: var(--stride-spacing-spc-2x);
  padding-right: var(--stride-spacing-spc-2_5x);
}

[data-stride-theme]
  .stride-button--small.stride-button--has-trailing:not(
    .stride-button--has-leading
  ) {
  padding-left: var(--stride-spacing-spc-2_5x);
  padding-right: var(--stride-spacing-spc-2x);
}

[data-stride-theme]
  .stride-button--small.stride-button--has-leading.stride-button--has-trailing {
  padding-left: var(--stride-spacing-spc-2x);
  padding-right: var(--stride-spacing-spc-2x);
}

[data-stride-theme] .stride-button--icon-only {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

[data-stride-theme] .stride-button--icon-only.stride-button--small {
  width: 28px;
  min-width: 28px;
}

[data-stride-theme] .stride-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--stride-spacing-spc-1x);
  min-width: 0;
}

[data-stride-theme] .stride-button[data-loading="true"] .stride-button-content {
  visibility: hidden;
}

[data-stride-theme] .stride-button-label {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

[data-stride-theme] .stride-button-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--stride-spacing-spc-4x);
  height: var(--stride-spacing-spc-4x);
}

[data-stride-theme] .stride-button--small .stride-button-icon {
  width: var(--stride-font-size-14);
  height: var(--stride-font-size-14);
}

[data-stride-theme]
  .stride-button--icon-only.stride-button--default
  .stride-button-icon {
  width: var(--stride-font-size-18);
  height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-button-icon svg,
[data-stride-theme] .stride-button-spinner svg {
  display: block;
  width: 100%;
  height: 100%;
}

[data-stride-theme] .stride-button-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--stride-font-size-18);
  height: var(--stride-font-size-18);
  transform: translate(-50%, -50%);
  animation: stride-button-spin 0.8s linear infinite;
}

[data-stride-theme] .stride-button--small .stride-button-spinner {
  width: var(--stride-spacing-spc-4x);
  height: var(--stride-spacing-spc-4x);
}

[data-stride-theme] .stride-button-spinner--static {
  animation: none;
}

@keyframes stride-button-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

[data-stride-theme] .stride-button--primary {
  background: var(--stride-bg-brand-primary);
  color: var(--stride-ctn-inversed);
}

[data-stride-theme]
  .stride-button--primary:hover:not(:disabled):not([data-loading="true"]),
[data-stride-theme]
  .stride-button--primary:focus-visible:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-brand-hover);
}

/* A BUTTON THAT HAS OPENED SOMETHING STAYS VISUALLY ACTIVE.
 *
 * Two hooks, and the split between them matters:
 *
 *   aria-expanded="true"  — disclosure (menu, flyout, picker). Free, because a
 *     trigger that opens a menu ALREADY has to carry it for assistive tech,
 *     and a button that opens nothing never sets it.
 *
 *   data-selected="true"  — set by StrideButton's `selected` prop. NOT keyed on
 *     `aria-pressed`, which was the first attempt: plenty of buttons are
 *     legitimately pressed-state toggles without wanting a persistent fill.
 *     `workout_card`'s select checkbox and `week_options_rail`'s select-week
 *     toggle are both ghost + aria-pressed, and hooking ARIA repainted every
 *     selected workout card. Opt-in keeps the fill where it was designed —
 *     e.g. the tray header's five buttons, which share ONE side pane and so
 *     cannot use aria-expanded.
 *
 * Secondary and Ghost have a Figma Selected state: --stride-bg-neutral-selected,
 * held after pointer, tap, or keyboard focus leave, while the related UI is
 * open. That is distinct from `:active` (--stride-bg-neutral-active).
 * Primary and Danger have no Selected variant yet, so they still reuse their
 * own `:active` fill for `aria-expanded`.
 *
 * Divyam, 2026-09-16: "Whenever clicking an icon or button reveals additional
 * options, the button should remain in its active state until those options are
 * closed." */
[data-stride-theme]
  .stride-button--primary:active:not(:disabled):not([data-loading="true"]),
[data-stride-theme]
  .stride-button--primary[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-brand-active);
}

[data-stride-theme] .stride-button--primary:disabled,
[data-stride-theme] .stride-button--primary[data-loading="true"] {
  background: var(--stride-bg-brand-disabled);
  border-color: var(--stride-bdr-disabled);
  color: var(--stride-ctn-inversed-disabled);
}

[data-stride-theme] .stride-button--secondary {
  background: var(--stride-bg-neutral-primary);
  color: var(--stride-ctn-secondary);
}

[data-stride-theme]
  .stride-button--secondary:hover:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-hover);
}

[data-stride-theme]
  .stride-button--secondary[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ),
[data-stride-theme]
  .stride-button--secondary[data-selected="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-neutral-selected);
}

[data-stride-theme]
  .stride-button--secondary:active:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-active);
}

[data-stride-theme] .stride-button--secondary:disabled {
  background: var(--stride-bg-neutral-disabled);
  border-color: var(--stride-bdr-disabled);
  color: var(--stride-ctn-disabled);
}

[data-stride-theme] .stride-button--secondary[data-loading="true"] {
  background: var(--stride-bg-neutral-primary);
  border-color: var(--stride-bdr-disabled);
}

[data-stride-theme] .stride-button--ghost {
  background: var(--stride-bg-neutral-primary);
  border-color: transparent;
  box-shadow: none;
  color: var(--stride-ctn-secondary);
}

[data-stride-theme]
  .stride-button--ghost:hover:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-hover);
}

[data-stride-theme]
  .stride-button--ghost[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ),
[data-stride-theme]
  .stride-button--ghost[data-selected="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-neutral-selected);
}

[data-stride-theme]
  .stride-button--ghost:active:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-active);
}

[data-stride-theme] .stride-button--ghost:focus-visible {
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-button--ghost:disabled {
  color: var(--stride-ctn-disabled);
}

[data-stride-theme] .stride-button--danger {
  background: var(--stride-bg-danger-primary);
  color: var(--stride-ctn-inversed);
}

[data-stride-theme]
  .stride-button--danger:hover:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-danger-hover);
}

[data-stride-theme]
  .stride-button--danger:active:not(:disabled):not([data-loading="true"]),
[data-stride-theme]
  .stride-button--danger[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-danger-active);
}

[data-stride-theme] .stride-button--danger:disabled,
[data-stride-theme] .stride-button--danger[data-loading="true"] {
  background: var(--stride-bg-danger-disabled);
  border-color: var(--stride-bdr-disabled);
  color: var(--stride-ctn-inversed-disabled);
}

/*
 * Stride Motion — the shared entrance keyframes (stride_motion.ts has the
 * exits). Entrances on a box that can hold live positioned children (a modal,
 * a dialog, a dropdown or floating panel) animate opacity only: an animated
 * `transform` makes the box the containing block for its `position: fixed`
 * descendants, and a dropdown opened inside it in those first frames would
 * be placed against the box instead of the viewport.
 */

@keyframes stride-motion-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes stride-motion-slide-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stride-motion-rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The closing copy is animated by script; nothing in it replays its own
 * entrance or transitions. */
[data-stride-theme][data-stride-exit-ghost],
[data-stride-theme][data-stride-exit-ghost] * {
  animation: none !important;
  transition: none !important;
}

/*
 * Stride Tooltip.
 * Source: Figma "TKC Calendar 2026" node 1868:76339.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-tooltip-origin,
[data-stride-theme] .stride-tooltip,
[data-stride-theme] .stride-tooltip * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-tooltip-origin {
  display: inline-flex;
  max-width: 100%;
  vertical-align: middle;
}

[data-stride-theme] .stride-tooltip {
  position: fixed;
  /* Was 10000 — invisible (rendered but painted BEHIND) on any trigger
   * inside a StrideTray (z-index 20000, stride_tray.css), which is where
   * the workout card's superset merge/remove controls surfaced it
   * (Calendar V2 workout-card-superset-controls plan). Bumped above the
   * whole existing overlay stack — tray (20000), the dropdown panel
   * (20010, deliberately above the tray for the same reason), and the
   * snackbar (20020, deliberately above both) — because a tooltip is
   * always describing whatever the coach is directly hovering right now,
   * so it should never lose to a panel or toast that happens to be open
   * underneath it. (A tooltip inside a modal or dialog portals into that
   * surface and ranks within it — still above its content.) */
  z-index: 20030;
  display: flex;
  gap: var(--stride-spacing-spc-0_5x);
  padding: var(--stride-spacing-spc-1x);
  overflow: clip;
  border: var(--stride-border-width-thic-1) solid var(--stride-bdr-light);
  border-radius: var(--stride-radius-rad-2x);
  background: var(--stride-bg-surface-primary);
  pointer-events: none;
}

[data-stride-theme] .stride-tooltip--single-label {
  align-items: center;
  height: 26px;
  box-shadow: var(--stride-shadow-sm);
  user-select: none;
}

[data-stride-theme] .stride-tooltip--custom {
  align-items: flex-start;
  width: 240px;
  box-shadow: var(--stride-shadow-md);
}

/* Hug-content custom tooltip (exercise availability, short status copy).
   Override the catalog custom body's 240px and its flex-grow basis so the
   bubble sizes to the copy instead of collapsing to 0. */
[data-stride-theme] .stride-tooltip--custom.stride-tooltip--fit {
  width: max-content;
}

[data-stride-theme]
  .stride-tooltip--custom.stride-tooltip--fit
  .stride-tooltip-content {
  flex: 0 0 auto;
  width: max-content;
}

[data-stride-theme] .stride-tooltip-content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--stride-spacing-spc-0_5x);
  color: var(--stride-ctn-secondary);
}

[data-stride-theme] .stride-tooltip--single-label .stride-tooltip-content {
  height: 100%;
}

[data-stride-theme] .stride-tooltip-label {
  margin: 0;
  white-space: nowrap;
  color: var(--stride-ctn-secondary);
}

[data-stride-theme] .stride-tooltip-shortcut {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--stride-spacing-spc-0_5x);
}

/* A key that is a word, not a symbol ("Shift"): as tall as the others and as wide
 * as its text, so the chip does not clip it. */
[data-stride-theme] .stride-tooltip-key.stride-tooltip-key--text {
  width: auto;
  min-width: var(--stride-spacing-spc-4x);
  padding: 0 var(--stride-spacing-spc-1x);
  font-family: inherit;
}

[data-stride-theme] .stride-tooltip-key {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--stride-spacing-spc-4x);
  height: var(--stride-spacing-spc-4x);
  border-radius: var(--stride-radius-rad-1x);
  background: var(--stride-bg-surface-secondary);
  color: var(--stride-ctn-tertiary);
  text-align: center;
}

[data-stride-theme] .stride-tooltip--custom .stride-tooltip-content {
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stride-spacing-spc-1x);
  padding: var(--stride-spacing-spc-0_5x);
}

[data-stride-theme] .stride-tooltip-body {
  margin: 0;
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-regular);
  line-height: 16.8px;
  color: var(--stride-ctn-tertiary);
}

/* Opening: fades in; closing is StrideTooltip's exit copy. */
@media (prefers-reduced-motion: no-preference) {
  [data-stride-theme] .stride-tooltip {
    animation: stride-motion-fade-in 120ms cubic-bezier(0.2, 0, 0, 1);
  }
}

/*
 * Stride Floating Panel — the positioned wrapper around a fixed-size overlay
 * (the menu submenu, the date-picker popover). Pair with
 * `useStrideFloatingPanel`, which supplies the inline coordinates.
 *
 * Chrome-free on purpose: unlike `.stride-dropdown-panel`, which wraps a list
 * that brings its own surface, this only positions. The panel's own component
 * paints its background, border and shadow.
 */

[data-stride-theme] .stride-floating-panel {
  /* Viewport coordinates, so no ancestor's `overflow: hidden` or `transform`
   * can clip it or re-anchor it — `StrideTray`'s sheet animates in with
   * `translateY()`, which would otherwise make it the containing block for any
   * fixed descendant. */
  position: fixed;
  top: 0;
  left: 0;

  /* ABOVE THE MULTI-SELECT TOOLBAR (20015), which is one of its own triggers —
   * a picker opened from the toolbar and stacked at the dropdown panel's 20010
   * would render behind the bar it belongs to. Under a modal (20019), so a
   * modal opened while a panel is up (the comments/videos flyout stays open
   * while its card's editor opens "Create exercise") covers it. Still under
   * the snackbar (20020), because a save failure has to stay readable over
   * everything. */
  z-index: 20018;
}

/* The one pre-measure frame. `useStrideFloatingPanel` cannot place a panel it
 * has not measured, and it only exists to be measured once it is in the DOM —
 * so it is rendered, hidden, at 0,0 for exactly one frame. `visibility`, not
 * `display`, because a `display: none` element has no box to measure. */
[data-stride-theme] .stride-floating-panel:not([data-placed]) {
  visibility: hidden;
}

/* Opening: fades in once placed (the unplaced frame is hidden, so the fade
 * starts where the panel lands); closing is useStrideFloatingPanel's exit
 * copy. */
@media (prefers-reduced-motion: no-preference) {
  [data-stride-theme] .stride-floating-panel[data-placed] {
    animation: stride-motion-fade-in 120ms cubic-bezier(0.2, 0, 0, 1);
  }
}

/*
 * Stride Dropdown List.
 * Source: Figma "TKC Calendar 2026" node 1855:76124.
 * Tokens only. Scoped under [data-stride-theme].
 *
 * Shell (border, radius, shadow) wraps three stacked regions:
 *   1. optional header — pinned, does not scroll
 *   2. option list — the only scroller
 *   3. optional footer — pinned, does not scroll
 * Flex, not position:sticky: the header/footer are siblings of the scroller
 * so they stay visible even when the list is shorter than the panel cap.
 */

[data-stride-theme] .stride-dropdown-list,
[data-stride-theme] .stride-dropdown-list * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-dropdown-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Standalone lists (docs, etc.) keep a pixel cap. Portaled menus inherit
   * the panel's 8-row / viewport-aware max-height instead — see
   * `.stride-dropdown-panel > .stride-dropdown-list`. */
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--stride-border-width-thic-1) solid var(--stride-bdr-dark);
  border-radius: var(--stride-radius-rad-2_5x);
  background: var(--stride-bg-surface-primary);
  box-shadow: var(--stride-shadow-md);
}

[data-stride-theme] .stride-dropdown-list:focus,
[data-stride-theme] .stride-dropdown-list-items:focus {
  outline: none;
}

[data-stride-theme] .stride-dropdown-list-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  z-index: 1;
  width: 100%;
  padding: var(--stride-spacing-spc-1x) var(--stride-spacing-spc-1x)
    var(--stride-spacing-spc-0_5x);
  overflow: hidden;
  background: var(--stride-bg-surface-primary);
}

[data-stride-theme] .stride-dropdown-list-items {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--stride-spacing-spc-0_5x);
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: var(--stride-spacing-spc-1x) var(--stride-spacing-spc-1x)
    var(--stride-spacing-spc-1_5x);
  overflow: auto;
}

[data-stride-theme] .stride-dropdown-list-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  z-index: 1;
  width: 100%;
  padding: var(--stride-spacing-spc-1x);
  overflow: hidden;
  border-top: var(--stride-border-width-thic-1) solid var(--stride-bdr-divider);
  background: var(--stride-bg-surface-primary);
}

/*
 * Stride Inline Button.
 * Source: Figma "TKC Calendar 2026" node 1727:106384.
 * Tokens only. Scoped under [data-stride-theme].
 *
 * States: default (ctn-tertiary), hover (ctn-primary), active (ctn-tertiary),
 * keyboard focus (ctn-primary + shadow-focus). Optional label beside the icon.
 */

[data-stride-theme] .stride-inline-button,
[data-stride-theme] .stride-inline-button * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-inline-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  overflow: clip;
  gap: var(--stride-spacing-spc-1x);
  border: 0;
  border-radius: var(--stride-radius-rad-1_5x);
  background: var(--stride-bg-neutral-primary);
  font: inherit;
  color: var(--stride-ctn-tertiary);
  cursor: pointer;
}

[data-stride-theme] .stride-inline-button--labeled {
  width: auto;
  gap: var(--stride-spacing-spc-0_5x);
  padding: 0 var(--stride-spacing-spc-1x);
}

[data-stride-theme] .stride-inline-button:focus {
  outline: none;
}

[data-stride-theme] .stride-inline-button:hover:not(:disabled) {
  color: var(--stride-ctn-primary);
}

[data-stride-theme] .stride-inline-button:active:not(:disabled) {
  color: var(--stride-ctn-tertiary);
}

[data-stride-theme] .stride-inline-button:focus-visible:not(:disabled) {
  color: var(--stride-ctn-primary);
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-inline-button:focus-visible:active:not(:disabled) {
  color: var(--stride-ctn-tertiary);
}

[data-stride-theme] .stride-inline-button[data-preview="hover"]:not(:disabled) {
  color: var(--stride-ctn-primary);
}

[data-stride-theme]
  .stride-inline-button[data-preview="active"]:not(:disabled) {
  color: var(--stride-ctn-tertiary);
}

[data-stride-theme] .stride-inline-button[data-preview="focus"]:not(:disabled) {
  color: var(--stride-ctn-primary);
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-inline-button:disabled {
  color: var(--stride-ctn-disabled);
  cursor: not-allowed;
}

[data-stride-theme] .stride-inline-button-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--stride-spacing-spc-4x);
  height: var(--stride-spacing-spc-4x);
}

[data-stride-theme] .stride-inline-button-icon svg {
  display: block;
  width: var(--stride-font-size-14);
  height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-inline-button-label {
  flex-shrink: 0;
  white-space: nowrap;
  color: inherit;
}

/*
 * Stride Dropdown List Item.
 * Source: Figma "TKC Calendar 2026" node 1855:76037.
 * Tokens only. Scoped under [data-stride-theme].
 *
 * Interaction model:
 * - Unselected hover / keyboard-arrow highlight uses the hover fill.
 * - Unselected tab focus uses hover fill + focus ring together.
 * - Selected rest / tab focus uses brand-surface; selected hover / arrow
 *   highlight uses brand-overlay.
 * - Action enabled reveals a trailing inline button on hover (and on tab
 *   focus) and hides the selected check while it is showing.
 */

[data-stride-theme] .stride-dropdown-list-item,
[data-stride-theme] .stride-dropdown-list-item * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-dropdown-list-item {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-1x);
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 var(--stride-spacing-spc-1x) 0 var(--stride-spacing-spc-1_5x);
  border: 0;
  border-radius: var(--stride-radius-rad-1_5x);
  background: var(--stride-bg-neutral-primary);
  color: var(--stride-ctn-primary);
  text-align: left;
  cursor: pointer;
}

[data-stride-theme] .stride-dropdown-list-item--with-secondary {
  min-height: 40px;
}

[data-stride-theme]
  .stride-dropdown-list-item:hover:not([aria-disabled="true"]),
[data-stride-theme]
  .stride-dropdown-list-item[data-preview="hover"]:not([aria-disabled="true"]) {
  background: var(--stride-bg-neutral-hover);
}

[data-stride-theme] .stride-dropdown-list-item:focus {
  outline: none;
}

/* Tab / focus-visible: focus ring combined with hover fill */
[data-stride-theme]
  .stride-dropdown-list-item:focus-visible:not([aria-disabled="true"]),
[data-stride-theme]
  .stride-dropdown-list-item[data-preview="focus"]:not([aria-disabled="true"]),
[data-stride-theme]
  .stride-dropdown-list-item--focus:not([aria-disabled="true"]) {
  background: var(--stride-bg-neutral-hover);
  box-shadow: var(--stride-shadow-focus);
}

/* Arrow-key roving focus: hover fill only, no focus ring */
[data-stride-theme]
  .stride-dropdown-list[data-nav="arrow"]
  .stride-dropdown-list-item:focus-visible:not([aria-disabled="true"]) {
  background: var(--stride-bg-neutral-hover);
  box-shadow: none;
}

/*
 * Selected — Figma Show Righ_Icon=True. Rest and tab-focus use
 * bg-brand-surface (10% brand). Hover, hover-with-action, and arrow-key
 * highlight use bg-brand-overlay (20% brand). Disabled selected keeps the
 * rest fill; hover is gated off by aria-disabled.
 */
[data-stride-theme] .stride-dropdown-list-item--selected {
  background: var(--stride-bg-brand-surface);
}

[data-stride-theme]
  .stride-dropdown-list-item--selected:hover:not([aria-disabled="true"]),
[data-stride-theme]
  .stride-dropdown-list-item--selected[data-preview="hover"]:not(
    [aria-disabled="true"]
  ) {
  background: var(--stride-bg-brand-overlay);
}

[data-stride-theme]
  .stride-dropdown-list-item--selected:focus-visible:not(
    [aria-disabled="true"]
  ),
[data-stride-theme]
  .stride-dropdown-list-item--selected[data-preview="focus"]:not(
    [aria-disabled="true"]
  ),
[data-stride-theme]
  .stride-dropdown-list-item--selected.stride-dropdown-list-item--focus:not(
    [aria-disabled="true"]
  ) {
  background: var(--stride-bg-brand-surface);
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme]
  .stride-dropdown-list[data-nav="arrow"]
  .stride-dropdown-list-item--selected:focus-visible:not(
    [aria-disabled="true"]
  ) {
  background: var(--stride-bg-brand-overlay);
  box-shadow: none;
}

/* Hover wins the fill when it combines with tab focus; keep the ring. */
[data-stride-theme]
  .stride-dropdown-list-item--selected:hover:focus-visible:not(
    [aria-disabled="true"]
  ) {
  background: var(--stride-bg-brand-overlay);
}

[data-stride-theme] .stride-dropdown-list-item[aria-disabled="true"],
[data-stride-theme] .stride-dropdown-list-item--disabled {
  color: var(--stride-ctn-disabled);
  cursor: not-allowed;
}

/*
 * StrideTooltip wraps its trigger in `.stride-tooltip-origin` (`inline-flex`).
 * Inside a flex row that would collapse the icon/label/slot layout, so the
 * origin AND the inner span both fill the option and replay its flex.
 * The option itself stays a direct `role="listbox"` child.
 */
[data-stride-theme] .stride-dropdown-list-item > .stride-tooltip-origin,
[data-stride-theme] .stride-dropdown-list-item-tooltip-origin {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  gap: inherit;
}

[data-stride-theme] .stride-dropdown-list-item-labels {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: var(--stride-spacing-spc-0_5x);
}

/* Name + same-line trailing meta (Figma template picker). 6px gap is
 * reserved (`gap`, not margin) so the picker's 240–300px clamp ellipsizes
 * the texts instead of collapsing the space between them. Name takes
 * leftover width and ellipsizes first; trailing caps at 40%. */
[data-stride-theme] .stride-dropdown-list-item-primary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  width: 100%;
  gap: var(--stride-spacing-spc-1_5x);
}

[data-stride-theme] .stride-dropdown-list-item-label {
  overflow: hidden;
  color: var(--stride-ctn-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-stride-theme]
  .stride-dropdown-list-item--with-trailing
  .stride-dropdown-list-item-label {
  flex: 1 1 auto;
  min-width: 0;
}

[data-stride-theme] .stride-dropdown-list-item-trailing {
  flex: 0 1 auto;
  max-width: 40%;
  min-width: 0;
  overflow: hidden;
  color: var(--stride-ctn-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-stride-theme]
  .stride-dropdown-list-item[aria-disabled="true"]
  .stride-dropdown-list-item-trailing {
  color: var(--stride-ctn-disabled);
}

[data-stride-theme]
  .stride-dropdown-list-item-trailing
  > .stride-tooltip-origin {
  display: block;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-stride-theme]
  .stride-dropdown-list-item--muted:not([aria-disabled="true"])
  .stride-dropdown-list-item-label {
  /* Secondary, not tertiary: tertiary reads 4.42:1 on the dark list. */
  color: var(--stride-ctn-secondary);
}

[data-stride-theme]
  .stride-dropdown-list-item--link:not([aria-disabled="true"])
  .stride-dropdown-list-item-label {
  color: var(--stride-ctn-link-primary);
}

[data-stride-theme]
  .stride-dropdown-list-item[aria-disabled="true"]
  .stride-dropdown-list-item-label {
  color: var(--stride-ctn-disabled);
}

[data-stride-theme] .stride-dropdown-list-item-secondary {
  overflow: hidden;
  color: var(--stride-ctn-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-stride-theme]
  .stride-dropdown-list-item[aria-disabled="true"]
  .stride-dropdown-list-item-secondary {
  color: var(--stride-ctn-disabled);
}

[data-stride-theme] .stride-dropdown-list-item-slot {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

[data-stride-theme]
  .stride-dropdown-list-item--selected
  .stride-dropdown-list-item-slot {
  display: flex;
}

[data-stride-theme] .stride-dropdown-list-item-check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--stride-ctn-primary);
}

[data-stride-theme] .stride-dropdown-list-item-check svg {
  display: block;
  width: var(--stride-spacing-spc-4x);
  height: var(--stride-spacing-spc-4x);
}

[data-stride-theme] .stride-dropdown-list-item-action {
  display: none;
}

[data-stride-theme]
  .stride-dropdown-list-item--action-enabled:hover:not([aria-disabled="true"])
  .stride-dropdown-list-item-slot,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled[data-preview="hover"]:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-slot,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled:focus-visible:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-slot,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled[data-preview="focus"]:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-slot,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled.stride-dropdown-list-item--focus:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-slot {
  display: flex;
}

/*
 * Figma "Hover with action" + Show Righ_Icon (selected): the trailing action
 * replaces the check. The check stays in the DOM (aria-selected still
 * reflects selection); CSS hides it while the action is showing.
 */
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled:hover:not([aria-disabled="true"])
  .stride-dropdown-list-item-check,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled[data-preview="hover"]:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-check,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled:focus-visible:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-check,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled[data-preview="focus"]:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-check,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled.stride-dropdown-list-item--focus:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-check {
  display: none;
}

[data-stride-theme]
  .stride-dropdown-list-item--action-enabled:hover:not([aria-disabled="true"])
  .stride-dropdown-list-item-action,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled[data-preview="hover"]:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-action,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled:focus-visible:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-action,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled[data-preview="focus"]:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-action,
[data-stride-theme]
  .stride-dropdown-list-item--action-enabled.stride-dropdown-list-item--focus:not(
    [aria-disabled="true"]
  )
  .stride-dropdown-list-item-action {
  display: flex;
}

/*
 * Left_Icon slot — Figma "Dropdown/ List item" > Left_Icon: an 18px-wide
 * full-height column centering a 14px glyph. Deliberately sets no `color`:
 * inheriting through currentColor is what lets the disabled tone above
 * (`--stride-ctn-disabled`) tint the glyph along with the label, which a
 * re-declared color would break. Secondary-text rows top-align the glyph
 * to the primary label, matching Figma's items-start on that variant.
 */
[data-stride-theme] .stride-dropdown-list-item-left-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 18px;
}

[data-stride-theme]
  .stride-dropdown-list-item--with-secondary
  .stride-dropdown-list-item-left-icon {
  align-items: flex-start;
}

/*
 * Danger tone — Figma "Workout more menu" (node 2033:108962) Delete row.
 * Tints the label and the left glyph, never the row's background: a
 * destructive option should read as dangerous without outshouting the list.
 * Disabled still wins, because the rule above is `[aria-disabled]`-scoped and
 * comes later in the cascade for the label.
 */
[data-stride-theme]
  .stride-dropdown-list-item--danger:not([aria-disabled="true"])
  .stride-dropdown-list-item-label,
[data-stride-theme]
  .stride-dropdown-list-item--danger:not([aria-disabled="true"])
  .stride-dropdown-list-item-left-icon {
  color: var(--stride-ctn-danger-primary);
}

/*
 * Trailing affordance (the submenu chevron). Reuses the 24px slot the check
 * and the action button already share, so it needs no geometry of its own —
 * only the rule that makes the slot visible when a right icon is the reason
 * for it.
 */
[data-stride-theme]
  .stride-dropdown-list-item--with-right-icon
  .stride-dropdown-list-item-slot {
  display: flex;
}

[data-stride-theme] .stride-dropdown-list-item-right-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--stride-ctn-tertiary);
}

/*
 * Stride Popover: a small panel of information anchored to the control that
 * opened it. Source: the list-page canvases (Templates "Assigned to"); no
 * Figma frame yet. Surface as the filter popover's. Tokens only. Scoped under
 * [data-stride-theme].
 */

[data-stride-theme] .stride-popover,
[data-stride-theme] .stride-popover * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-popover {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-1x);
  max-width: calc(100vw - 2 * var(--stride-spacing-spc-4x));
  max-height: min(420px, calc(100vh - 2 * var(--stride-spacing-spc-4x)));
  padding: var(--stride-spacing-spc-3x);
  overflow-y: auto;
  border: var(--stride-border-width-thic-1) solid var(--stride-bdr-dark);
  border-radius: var(--stride-radius-rad-2_5x);
  background: var(--stride-bg-surface-primary);
  box-shadow: var(--stride-shadow-md);
  color: var(--stride-ctn-primary);
  outline: none;
}

[data-stride-theme] .stride-popover-title {
  margin: 0;
}

[data-stride-theme] .stride-popover-description {
  margin: 0;
  color: var(--stride-ctn-secondary);
}

[data-stride-theme] .stride-popover-body {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-1x);
  margin-top: var(--stride-spacing-spc-1x);
}

/*
 * Stride Input Field.
 * Source: Figma "TKC Calendar 2026" node 1831:72661.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-input-field,
[data-stride-theme] .stride-input-field * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-input-field {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-1_5x);
  width: 100%;
}

[data-stride-theme] .stride-input-field-label {
  color: var(--stride-ctn-secondary);
}

[data-stride-theme] .stride-input-field--disabled .stride-input-field-label {
  color: var(--stride-ctn-disabled);
}

/* Input_Field_Box: 36px, pad 8/6, gap 2, clip overflowing 24px slots. */
[data-stride-theme] .stride-input-field-control {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-0_5x);
  width: 100%;
  height: 36px;
  padding: var(--stride-spacing-spc-2x) var(--stride-spacing-spc-1_5x);
  overflow: hidden;
  border: 0;
  border-radius: var(--stride-radius-rad-2x);
  background: var(--stride-bg-surface-primary);
  box-shadow: inset 0 0 0 var(--stride-border-width-thic-1)
    var(--stride-bdr-dark);
}

/* A phone form's field: a thumb's height. */
[data-stride-theme] .stride-input-field--large .stride-input-field-control {
  height: 44px;
}

/* A unit before or after the value ("$", "%"). */
[data-stride-theme] .stride-input-field-affix {
  flex: none;
  color: var(--stride-ctn-secondary);
  white-space: nowrap;
}

[data-stride-theme] .stride-input-field--compact .stride-input-field-control {
  height: 28px;
  padding: var(--stride-spacing-spc-1x) 9px;
  box-shadow: inset 0 0 0 var(--stride-border-width-thic-1)
    var(--stride-bdr-darker);
}

[data-stride-theme]
  .stride-input-field:not(.stride-input-field--error):not(
    .stride-input-field--disabled
  )
  .stride-input-field-control:focus-within,
[data-stride-theme]
  .stride-input-field--focus:not(.stride-input-field--error):not(
    .stride-input-field--disabled
  )
  .stride-input-field-control {
  box-shadow: inset 0 0 0 var(--stride-border-width-thic-1_25)
    var(--stride-bdr-focus);
}

[data-stride-theme] .stride-input-field--error .stride-input-field-control {
  box-shadow: inset 0 0 0 var(--stride-border-width-thic-1)
    var(--stride-bdr-danger);
}

[data-stride-theme] .stride-input-field--disabled .stride-input-field-control {
  background: var(--stride-bg-neutral-disabled);
  box-shadow: inset 0 0 0 var(--stride-border-width-thic-1)
    var(--stride-bdr-disabled);
}

/* Left_Icon / Right_Icon slots are 24×24; glyph inside is 14×14. */
[data-stride-theme] .stride-input-field-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--stride-font-size-24);
  height: var(--stride-font-size-24);
  color: var(--stride-ctn-secondary);
}

[data-stride-theme] .stride-input-field-icon--right {
  color: var(--stride-ctn-tertiary);
}

[data-stride-theme] .stride-input-field-end {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

[data-stride-theme] .stride-input-field-icon svg {
  display: block;
  width: var(--stride-font-size-14);
  height: var(--stride-font-size-14);
}

/* Figma layer is misspelled "Inout_Text_Container"; pad 4 / hug height. */
[data-stride-theme] .stride-input-field-text-container {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--stride-spacing-spc-1x);
  min-width: 0;
  width: 100%;
  padding: 0 var(--stride-spacing-spc-1x);
}

[data-stride-theme] .stride-input-field-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--stride-ctn-primary);
  outline: none;
  overflow-x: auto;
  white-space: nowrap;
}

[data-stride-theme] .stride-input-field--compact .stride-input-field-icon {
  width: var(--stride-font-size-14);
  height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-input-field--compact .stride-input-field-icon svg {
  width: 100%;
  height: 100%;
}

[data-stride-theme]
  .stride-input-field--compact
  .stride-input-field-text-container {
  padding: 0;
}

[data-stride-theme] .stride-input-field-input::placeholder {
  color: var(--stride-ctn-placeholder);
}

[data-stride-theme]
  .stride-input-field--error
  .stride-input-field-input:not(:placeholder-shown) {
  color: var(--stride-ctn-danger-primary);
}

[data-stride-theme] .stride-input-field--disabled .stride-input-field-input {
  color: var(--stride-ctn-tertiary);
  cursor: not-allowed;
}

[data-stride-theme]
  .stride-input-field--disabled
  .stride-input-field-input:placeholder-shown {
  color: var(--stride-ctn-placeholder);
}

/* Help_Text_Container + Help_Text / Error_Icon. */
[data-stride-theme] .stride-input-field-helper {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-0_5x);
  width: 100%;
  color: var(--stride-ctn-muted);
}

[data-stride-theme] .stride-input-field--error .stride-input-field-helper {
  color: var(--stride-ctn-danger-primary);
}

[data-stride-theme] .stride-input-field-error-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--stride-font-size-14);
  height: var(--stride-font-size-14);
  color: var(--stride-ctn-danger-primary);
}

[data-stride-theme] .stride-input-field-error-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Stride Dropdown Panel — the portaled wrapper around a StrideDropdownList.
 * Pair with `useStrideDropdownPanel`, which supplies the inline coordinates.
 *
 * Promoted out of stride_combo_box.css when the panel mechanics were extracted
 * into the hook: none of these rules were ever combo-box-specific, and a second
 * copy in every menu that portals a list is how the z-index below goes stale.
 */

[data-stride-theme] .stride-dropdown-panel {
  /* Portaled out of its trigger (into the tray's dialog root beside the
   * sheet, or <body> outside a tray — StridePortalContainerContext) and
   * positioned in viewport coordinates so it can never be clipped OR
   * repositioned by an ancestor's `overflow: hidden` or `transform` (e.g. a
   * week-grid day column, or StrideTray's sheet — which animates in with
   * `transform: translateY()`, making it the containing block for any
   * `position: fixed` descendant) — see use_stride_dropdown_panel.ts's
   * updatePanelPosition. */
  position: fixed;
  /* One rung of the overlay ladder (portal_container.ts): above the tray
   * (20000) and its sheet, below the toolbars (20015). Inside a modal or
   * dialog it portals into that surface and ranks within it. */
  z-index: 20010;
  /* Fallback for the one pre-measure frame; updatePanelPosition overrides
   * this inline with the 8-row (or content) cap, then the room actually left
   * below the origin (rule 5 in stride_dropdown_panel_position.ts). Kept in
   * sync with STRIDE_DROPDOWN_PANEL_MAX_HEIGHT_PX. */
  max-height: 240px;
}

/* The list shell, not the panel, inherits the viewport-aware clamp — without
 * this it keeps its own unconditional 240px cap and the panel's clamp does
 * nothing but crop it. `inherit` (not a percentage) because the panel has a
 * max-height but no definite height to resolve a percentage against. The
 * option list inside the shell is the actual scroller; header/footer stay
 * pinned as flex siblings. */
[data-stride-theme] .stride-dropdown-panel > .stride-dropdown-list {
  max-height: inherit;
}

/* An ACTION MENU sizes to its longest row instead of to its origin (see rule 1
 * in stride_dropdown_panel_position.ts). The hook supplies the `min-width` floor
 * and the viewport `max-width` cap inline; this is the part that cannot be an
 * inline value, because the whole point is that nobody has measured the content
 * yet. Rows only ellipsize now if a label is genuinely wider than the viewport.
 *
 * `width` is NOT set inline in this mode — if a future edit adds one back, it
 * wins over this and the clipping returns. */
[data-stride-theme] .stride-dropdown-panel--fit-content {
  width: max-content;
}

/* Opening: fades in (opacity only, see stride_motion.css); closing is
 * useStrideDropdownPanel's exit copy. */
@media (prefers-reduced-motion: no-preference) {
  [data-stride-theme] .stride-dropdown-panel {
    animation: stride-motion-fade-in 120ms cubic-bezier(0.2, 0, 0, 1);
  }
}


/*# sourceMappingURL=9325-03776ad7.css.map*/