/* ============================================================================
 * core.css — shared design-system foundation
 * Loaded by every surface (app, booking flow, marketing). Defines the cascade
 * layer order, design tokens, reset, base elements, shared primitives, layout
 * objects, and the curated utility layer.
 *
 * Naming: namespaced BEM — c- components, o- objects, u- utilities,
 * is-/has- state. Full-word domain namespaces, no abbreviations.
 *
 * Breakpoints (used directly in @media — custom properties can't live in media
 * queries): xs 425, phone 480, sm 640, md 768, tablet 820, lg 1024, xl 1180,
 * shell 1280. Author mobile-first; layer min-width queries on top.
 * ========================================================================== */

/* Cascade order — declared once, here, before any other sheet loads. CSS
 * layers are global and ordered by first declaration, so application.css /
 * booking_flow.css / marketing.css can append into these same layers and the
 * precedence holds (utilities beat components) regardless of link order. */
@layer ds-settings, ds-generic, ds-elements, ds-components, ds-features;

/* ── Self-hosted fonts (latin) ──────────────────────────────────────────────
 * @font-face is not affected by @layer; Propshaft fingerprints the woff2 by
 * basename from app/assets/fonts. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/inter-dfb0d9fd.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fraunces-62998d3a.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fraunces-italic-50484915.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/jetbrains-mono-4f54ebfc.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ════════════════════════════════════════════════════════════════════════
 * SETTINGS — design tokens
 * Tokens live inside @layer settings so the (unlayered) :root block emitted by
 * layouts/_branding_colors.html.haml always wins for the per-tenant
 * --color-primary/secondary/complementary/contrast values. The values here are
 * fallbacks only.
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-settings {
  :root {
    /* Surfaces */
    --color-paper: #faf6ee;
    --color-paper-2: #f3ecdd;
    --color-paper-card: #fffdf6;
    --color-paper-soft: #fbf7ee;
    --color-white: #fff;

    /* Ink (text + lines) */
    --color-ink: #1f1f1f;
    --color-black: #000;
    --color-ink-2: #4a463e;
    --color-ink-mute: rgb(31 31 31 / 55%);
    --color-ink-10: rgb(31 31 31 / 10%);
    --color-ink-15: rgb(31 31 31 / 15%);
    --color-ink-16: rgb(31 31 31 / 16%);
    --color-ink-18: rgb(31 31 31 / 18%);
    --color-ink-25: rgb(31 31 31 / 25%);
    --color-ink-30: rgb(31 31 31 / 30%);
    --color-rule: #2a2520; /* dark dashed rule on marketing/booking-flow surfaces */
    --color-scrim: rgb(31 31 31 / 40%); /* modal / drawer backdrops */

    /* Paper top-edge inset highlights (the lifted-paper look) */
    --color-inset-highlight: rgb(255 255 255 / 80%);
    --color-inset-highlight-subtle: rgb(255 255 255 / 28%);

    /* Warm elevation shadow base — always via color-mix(in srgb, ... N%, transparent) */
    --color-shadow-warm: #281c0a;

    /* Floating dark chrome (tooltips) — matches legacy warm-700 */
    --color-tooltip: var(--color-ink-2);

    /* Brand — terra (primary accent) */
    --color-terra-50: #fdf1ea;
    --color-terra-100: #fbdfce;
    --color-terra-200: #f6bd9d;
    --color-terra-300: #f19a6c;
    --color-terra-400: #ed8a55;
    --color-terra-500: #e8743c;
    --color-terra-600: #c45920;
    --color-terra-700: #9d4719;
    --color-terra-800: #6f2f0e;
    --color-terra-900: #3d1a05;

    /* Brand — sage (secondary accent) */
    --color-sage-50: #f2f4ee;
    --color-sage-100: #dee3d5;
    --color-sage-200: #c2cbb3;
    --color-sage-300: #a4b391;
    --color-sage-400: #8fa17c;
    --color-sage-500: #7a8a6f;
    --color-sage-600: #5f6e55;
    --color-sage-700: #4a5642;
    --color-sage-800: #353e2f;
    --color-sage-900: #1f261c;

    /* Brand — butter (tertiary accent) */
    --color-butter: #f2c879;
    --color-butter-500: #e9b949;
    --color-butter-700: #8a6c1f;

    /* Semantic */
    --color-destructive: #e36b5e;
    --color-destructive-50: rgb(227 107 94 / 10%);
    --color-destructive-100: rgb(227 107 94 / 18%);
    --color-destructive-700: #a33b30;
    --color-caution: #e9b949;
    --color-caution-50: rgb(233 185 73 / 12%);
    --color-caution-100: rgb(233 185 73 / 22%);
    --color-caution-700: #8a6c1f;
    --color-ink-blue: #5e7088;
    --color-ink-blue-50: rgb(94 112 136 / 10%);
    --color-ink-blue-100: rgb(94 112 136 / 18%);
    --color-ink-blue-700: #3f4a5c;

    /* Per-tenant brand colors — overridden at runtime by _branding_colors.
     * These fallbacks keep components sane if that partial is ever absent. */
    --color-primary: #e8743c;
    --color-primary-dark: #c45920;
    --color-primary-light: #f19a6c;
    --color-primary-extra-light: #fdf1ea;
    --color-secondary: #7a8a6f;
    --color-secondary-dark: #5f6e55;
    --color-secondary-light: #a4b391;
    --color-secondary-extra-light: #f2f4ee;
    --color-complementary: #5e7088;
    --color-complementary-dark: #3f4a5c;
    --color-complementary-light: #8a9bb0;
    --color-contrast: #1f1f1f;
    --color-contrast-dark: #000;
    --color-contrast-light: #4a463e;

    /* Spacing scale (rem) */
    --space-0: 0;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-25: 0.5625rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-4-5: 1.125rem;
    --space-5: 1.25rem;
    --space-5-5: 1.375rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-32: 8rem;
    --space-24: 6rem;
    --space-48: 12rem;
    --space-72: 18rem;

    /* Radii */
    --radius-sm: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-input: 0.625rem; /* 10px — fields, stats */
    --radius-xl: 0.75rem; /* tab dropdowns */
    --radius-card: 14px; /* cards, modals */
    --radius-2xl: 1rem; /* dashed callouts */
    --radius-pill: 999px; /* buttons, pills */

    /* Shadows */
    --shadow-paper:
      0 1px 0 rgb(255 255 255 / 80%) inset, 0 1px 2px rgb(60 40 15 / 5%),
      0 22px 40px -28px rgb(40 28 10 / 28%);
    --shadow-mock:
      0 1px 0 rgb(255 255 255 / 60%) inset, 0 28px 60px -28px rgb(60 40 15 / 35%),
      0 4px 14px -4px rgb(60 40 15 / 12%);
    --shadow-attention:
      0 1px 0 rgb(255 255 255 / 70%) inset, 0 1px 2px rgb(60 40 15 / 6%),
      0 18px 36px -22px rgb(60 40 15 / 28%);
    --shadow-input-ring: 0 0 0 3px rgb(31 31 31 / 8%);
    --shadow-segmented-active:
      0 1px 0 rgb(255 255 255 / 60%) inset, 0 2px 6px -2px rgb(60 40 15 / 18%);
    --shadow-subtle: 0 1px 2px rgb(0 0 0 / 5%);
    --shadow-elevation: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: "Fraunces", georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", menlo, monospace;
    --text-2xs: 10.5px;
    --text-11: 11px;
    --text-11-5: 11.5px;
    --text-xs: 12px;
    --text-12-5: 12.5px;
    --text-13: 13px;
    --text-13-5: 13.5px;
    --text-sm: 14px;
    --text-14-5: 14.5px;
    --text-15: 15px;
    --text-base: 16px;
    --text-17: 17px;
    --text-lg: 18px;
    --text-19: 19px;
    --text-xl: 20px;
    --text-22: 22px;
    --text-2xl: 24px;
    --text-28: 28px;
    --text-3xl: 30px;
    --text-stat: 32px;
    --text-36: 36px;
    --text-38: 38px;
    --text-64: 64px;
    --tracking-eyebrow: 0.18em;
    --tracking-caps: 0.16em;
    --tracking-mono: 0.08em;
    --tracking-label: 0.06em;
    --tracking-tight: -0.015em;
    --tracking-tightest: -0.025em;

    /* Layout maxima */
    --width-shell: 1280px;
    --width-page: 1180px;

    /* Z-index scale */
    --z-dropdown: 20;
    --z-nav: 50;
    --z-popover: 80;
    --z-modal: 100;
    --z-grain: 9999;

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 0.15s;
    --dur-base: 0.25s;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * GENERIC — reset
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-generic {
  *,
  *::before,
  *::after,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol,
  menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  /* Form controls inherit type and reset their own chrome (the component/
   * feature classes paint the real appearance). Mirrors Tailwind's preflight. */
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    appearance: auto;
  }

  /* Links inherit color/decoration; styled links opt in via their own class. */
  a {
    color: inherit;
    text-decoration: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * ELEMENTS — bare element defaults
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-elements {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    font-optical-sizing: auto;
  }

  h1 em,
  h2 em,
  h3 em,
  h4 em,
  h5 em,
  h6 em {
    font-style: italic;
    font-weight: 400;
  }

  ::selection {
    background: var(--color-ink);
    color: var(--color-paper);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * FUNCTIONAL — brand + behavioral classes (NOT styling utilities). Unlayered,
 * so they reliably win over component styles. All visual styling otherwise
 * lives in primitives, components, and feature classes — never in the markup
 * as composed atoms.
 * ════════════════════════════════════════════════════════════════════════ */

/* paper-grain — required brand overlay. Applied via .paper-grain on <body>
 * in every layout; never optional or flag-gated. */
.paper-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.14  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* .hidden / .contents — display toggles (JS + structural). Unlayered so they
 * beat the layered element resets (e.g. img/svg { display: block }) for
 * JS-toggled icons, and so the responsive display utilities below resolve by
 * source order. */
.hidden {
  display: none;
}
.contents {
  display: contents;
}

/* Responsive display utilities — unlayered and ordered AFTER `.hidden` so a
 * `hidden sm:block` element reveals at the breakpoint (equal specificity →
 * later rule wins). Breakpoints: xs 425, sm 640, md 768, lg 1024, xl 1280. */
@media (width >= 425px) {
  .xs\:hidden {
    display: none;
  }
  .xs\:inline {
    display: inline;
  }
}

@media (width >= 640px) {
  .sm\:block {
    display: block;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:inline {
    display: inline;
  }
}

@media (width >= 768px) {
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:hidden {
    display: none;
  }
}

@media (width >= 1024px) {
  .lg\:block {
    display: block;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:opacity-0 {
    opacity: 0;
  }
}

@media (width >= 1280px) {
  .xl\:block {
    display: block;
  }
}

/* .visually-hidden / .sr-only — accessible label hiding (screen-reader-only). */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* .blur-xs — applied by the modal controller to the page frame behind a modal. */
.blur-xs {
  filter: blur(2px);
}

/* .is-loading — toggled on a submitting button/link by the button-loading and
 * stripe-card controllers (the element is also disabled / aria-disabled). */
.is-loading {
  opacity: 0.5;
  cursor: not-allowed;
}

/* .is-unavailable — toggled by the task-assignment controller to hide a
 * non-interactive affordance (replaces Tailwind opacity-0 + pointer-events). */
.is-unavailable {
  opacity: 0;
  pointer-events: none;
}

/* Missing-translation marker (Rails i18n debug aid). */
.translation_missing {
  background: var(--color-destructive);
}

/* Drag-reorder state — toggled by the SortableJS reorder controller.
 * .is-drag-ghost = the placeholder gap (invisible); .is-dragging = the lifted clone. */
.is-drag-ghost {
  opacity: 0;
}
.is-dragging {
  transform: scale(1.05);
  box-shadow: var(--shadow-elevation);
}

/* ════════════════════════════════════════════════════════════════════════
 * COMPONENTS — shared primitives (c-)
 * (populated in the component-conversion tasks)
 * ════════════════════════════════════════════════════════════════════════ */

/* Turbo progress bar — Turbo injects its own unlayered \3c style> (#0076ff) after
   our <link>, so this must be unlayered with higher specificity to win. */
html .turbo-progress-bar {
  background: var(--color-primary);
}

@layer ds-components {
  /* Shared chrome rendered by every layout (app, marketing, booking flow):
     flash notices + form validation errors. Kept in core so surfaces that
     don't load application.css (marketing, booking flow) still style them. */
  .flash-notices {
    position: fixed;
    inset: 0;
    z-index: var(--z-popover);
    display: flex;
    pointer-events: none;
  }
  .flash-notices--native {
    align-items: flex-start;
    padding: var(--space-6);
  }
  .flash-notices--web {
    align-items: flex-end;
    padding: var(--space-6) var(--space-4);
  }
  .flash-notices__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-4);
  }
  .flash-notices__list--native {
    align-items: flex-end;
  }
  .flash-notices__list--web {
    align-items: center;
  }

  @media (width >= 640px) {
    .flash-notices--web {
      align-items: flex-start;
      padding: var(--space-6);
    }
    .flash-notices__list--web {
      align-items: flex-end;
    }
  }

  .c-flash {
    pointer-events: auto;
    width: 100%;
    max-width: 24rem;
    overflow: hidden;
    border: 1px solid;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-subtle);
  }
  .c-flash--positive {
    background: var(--color-paper);
    border-color: var(--color-ink-18);
  }
  .c-flash--negative {
    background: var(--color-destructive-50);
    border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
  }
  .c-flash__body {
    display: flex;
    align-items: center;
    padding: var(--space-4);
  }
  .c-flash__content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 0;
    flex: 1;
  }
  .c-flash__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
  }
  .c-flash--positive .c-flash__icon {
    color: var(--color-primary);
  }
  .c-flash--negative .c-flash__icon {
    color: var(--color-destructive);
  }
  .c-flash__message {
    width: 0;
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .c-flash__dismiss {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-ink-mute);
    cursor: pointer;
  }
  .c-flash__dismiss:hover {
    color: var(--color-ink-2);
  }
  .c-flash__dismiss-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .c-validation-errors {
    margin-bottom: var(--space-8);
    border-radius: var(--radius-sm);
    color: var(--color-contrast);
  }
  .c-validation-errors__title {
    margin-bottom: var(--space-2);
  }

  /* ── c-button ──────────────────────────────────────────────────────── */
  .c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transform: translateZ(0);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (hover: hover) {
    .c-button:hover {
      transform: translateY(-1px);
    }
  }

  .c-button:disabled,
  .c-button.is-disabled {
    opacity: 0.25;
    cursor: not-allowed;
    box-shadow: none;
  }

  @media (hover: hover) {
    .c-button:disabled:hover,
    .c-button.is-disabled:hover {
      transform: translateZ(0);
    }
  }
  .c-button--full {
    width: 100%;
  }

  /* sizes */
  .c-button--xs {
    padding: var(--space-1) var(--space-3);
    gap: var(--space-1-5);
    font-size: var(--text-xs);
  }
  .c-button--sm {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-12-5);
  }
  .c-button--md {
    padding: var(--space-2-25) var(--space-4);
    font-size: var(--text-13-5);
  }
  .c-button--responsive {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-12-5);
  }

  @media (width >= 1024px) {
    .c-button--responsive {
      padding: var(--space-2-25) var(--space-4);
      font-size: var(--text-13-5);
    }
  }

  /* colors */
  .c-button--sage {
    border-color: var(--color-sage-500);
    background: var(--color-sage-500);
    color: var(--color-white);
  }
  .c-button--sage:hover {
    background: var(--color-sage-600);
    border-color: var(--color-sage-600);
  }
  .c-button--sage:active {
    background: var(--color-sage-700);
  }

  .c-button--accent {
    border-color: var(--color-terra-500);
    background: var(--color-terra-500);
    color: var(--color-white);
  }
  .c-button--accent:hover {
    background: var(--color-terra-600);
    border-color: var(--color-terra-600);
  }
  .c-button--accent:active {
    background: var(--color-terra-700);
  }

  .c-button--ink {
    border-color: transparent;
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .c-button--ink:hover {
    background: var(--color-black);
  }

  .c-button--ghost {
    border-color: var(--color-ink-18);
    background: var(--color-paper-card);
    color: var(--color-ink-2);
  }
  .c-button--ghost:hover {
    background: color-mix(in srgb, var(--color-paper-2) 40%, transparent);
    border-color: var(--color-ink-mute);
  }

  .c-button--danger {
    border-color: color-mix(in srgb, var(--color-destructive) 50%, transparent);
    background: var(--color-paper-card);
    color: var(--color-terra-700);
  }
  .c-button--danger:hover {
    background: var(--color-terra-50);
  }

  .c-button--white {
    border-color: var(--color-ink-18);
    background: var(--color-white);
    color: var(--color-ink-2);
  }
  .c-button--white:hover {
    background: var(--color-paper-2);
    border-color: var(--color-ink-mute);
  }

  .c-button--transparent-white {
    border: 2px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
  }
  .c-button--transparent-white:hover {
    background: var(--color-white);
    color: var(--color-primary);
  }

  /* solid — dynamic CSS-var-backed color (e.g. secondary, per-tenant) */
  .c-button--solid {
    border-color: var(--c-button-bg, var(--color-primary));
    background: var(--c-button-bg, var(--color-primary));
    color: var(--color-white);
  }

  .c-button--solid:hover {
    background: var(--c-button-bg-hover, var(--color-primary-dark));
    border-color: var(--c-button-bg-hover, var(--color-primary-dark));
  }

  /* toggle button (Stimulus toggles .is-active) */
  .c-toggle-button {
    border: 1px solid var(--color-ink-25);
    background: var(--color-paper-card);
    color: var(--color-ink);
  }
  .c-toggle-button:hover {
    background: var(--color-paper-soft);
    border-color: var(--color-ink-mute);
  }
  .c-toggle-button.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
  }
  .c-toggle-button.is-active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
  }

  /* elements */
  .c-button__icon {
    flex-shrink: 0;
    fill: currentcolor;
  }
  .c-button__icon--xs {
    width: var(--space-3);
    height: var(--space-3);
  }
  .c-button__icon--sm {
    width: var(--space-3);
    height: var(--space-3);
  }
  .c-button__icon--md {
    width: var(--space-4);
    height: var(--space-4);
  }
  .c-button__icon--responsive {
    width: var(--space-3);
    height: var(--space-3);
  }

  @media (width >= 1024px) {
    .c-button__icon--responsive {
      width: var(--space-4);
      height: var(--space-4);
    }
  }
  .c-button__spinner {
    margin-left: -2px;
  }

  /* ── c-card ────────────────────────────────────────────────────────── */
  .c-card {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .c-card--no-clip {
    overflow: visible;
  }

  /* surfaces */
  .c-card--paper-card {
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-10);
    box-shadow: var(--shadow-paper);
  }
  .c-card--paper {
    background: var(--color-paper);
    border: 1px solid var(--color-paper-2);
  }
  .c-card--soft {
    background: var(--color-paper-2);
    border: 1px solid var(--color-paper-2);
  }
  .c-card--dark {
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .c-card--white {
    background: var(--color-white);
    box-shadow: var(--shadow-subtle);
  }

  /* header */
  .c-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  @media (width >= 640px) {
    .c-card__header {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-3);
      padding: 18px var(--space-6) 14px;
    }
  }
  .c-card__header--dashed {
    border-bottom: 1px dashed var(--color-ink-18);
  }
  .c-card__header--solid {
    border-bottom: 1px solid var(--color-paper-2);
  }

  .c-card__heading-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .c-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-ink);
  }
  .c-card--dark .c-card__title {
    color: var(--color-paper);
  }

  .c-card__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: var(--radius-lg);
    background: var(--color-paper-soft);
    color: var(--color-ink-2);
  }
  .c-card--dark .c-card__title-icon {
    background: color-mix(in srgb, var(--color-ink-2) 40%, transparent);
    color: var(--color-ink-mute);
  }
  .c-card__title-icon svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* footer */
  .c-card__footer {
    padding: var(--space-6);
    border-top: 1px dashed var(--color-ink-18);
    background: color-mix(in srgb, var(--color-paper-2) 60%, transparent);
  }
  .c-card--dark .c-card__footer {
    background: color-mix(in srgb, var(--color-ink) 60%, transparent);
  }

  /* ── c-icon ────────────────────────────────────────────────────────── */
  .c-icon {
    fill: currentcolor;
  }

  /* ── c-eyebrow ─────────────────────────────────────────────────────── */
  .c-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  .c-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentcolor;
    opacity: 0.7;
  }
  .c-eyebrow--bare::before {
    display: none;
  }

  /* ── paper-stamp (rotated mono stamp; also used standalone in views) ── */
  .paper-stamp {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    padding: 3px 8px;
    border-radius: 4px;
    transform: rotate(-3deg);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  }

  .paper-stamp-sage {
    color: var(--color-sage-600);
    border-color: var(--color-sage-500);
    background: color-mix(in srgb, var(--color-sage-500) 8%, transparent);
  }

  /* ── c-badge (pill default; chip + dot modifiers) ──────────────────── */
  .c-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
  }

  /* pill colors */
  .c-badge--success {
    background: var(--color-sage-100);
    color: var(--color-sage-700);
  }
  .c-badge--pending {
    background: var(--color-terra-100);
    color: var(--color-terra-700);
  }
  .c-badge--destructive {
    background: var(--color-destructive-100);
    color: var(--color-destructive-700);
  }
  .c-badge--caution {
    background: var(--color-caution-100);
    color: var(--color-butter-700);
  }
  .c-badge--neutral {
    background: var(--color-paper-2);
    color: var(--color-ink-mute);
  }
  .c-badge--confirmed {
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .c-badge--upcoming {
    background: var(--color-ink-blue-100);
    color: var(--color-ink-blue-700);
  }
  .c-badge--complementary {
    background: var(--color-complementary);
    color: var(--color-white);
  }

  /* chip — overrides pill geometry to a mono outlined tag */
  .c-badge--chip {
    gap: var(--space-1-5);
    padding: 3px var(--space-2-5);
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .c-badge--chip.c-badge--success {
    color: var(--color-sage-600);
    border-color: color-mix(in srgb, var(--color-sage-500) 45%, transparent);
    background: color-mix(in srgb, var(--color-sage-500) 12%, transparent);
  }
  .c-badge--chip.c-badge--pending {
    color: var(--color-terra-500);
    border-color: color-mix(in srgb, var(--color-terra-500) 40%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 8%, transparent);
  }
  .c-badge--chip.c-badge--destructive {
    color: var(--color-destructive-700);
    border-color: color-mix(in srgb, var(--color-destructive) 45%, transparent);
    background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  }
  .c-badge--chip.c-badge--caution {
    color: var(--color-butter-700);
    border-color: color-mix(in srgb, var(--color-butter-500) 55%, transparent);
    background: color-mix(in srgb, var(--color-butter) 18%, transparent);
  }
  .c-badge--chip.c-badge--neutral {
    color: var(--color-ink-2);
    border-color: var(--color-ink-18);
    background: var(--color-paper-card);
  }
  .c-badge--chip.c-badge--confirmed {
    color: var(--color-paper);
    border-color: var(--color-ink);
    background: var(--color-ink);
  }
  .c-badge--chip.c-badge--upcoming {
    color: var(--color-ink-blue-700);
    border-color: color-mix(in srgb, var(--color-ink-blue) 45%, transparent);
    background: color-mix(in srgb, var(--color-ink-blue) 12%, transparent);
  }

  .c-badge__icon {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: var(--space-1-5);
  }

  .c-badge--dot::before {
    content: "";
    display: inline-block;
    width: var(--space-1-5);
    height: var(--space-1-5);
    margin-right: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: currentcolor;
  }

  /* ── c-field (input group) ─────────────────────────────────────────── */
  .c-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }

  .c-field__label {
    display: flex;
    align-items: center;
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
  }
  .c-field__required {
    margin-left: 2px;
    color: var(--color-terra-500);
  }
  .c-field__affix {
    color: var(--color-ink-mute);
    font-weight: 500;
  }
  .c-field__optional {
    margin-left: var(--space-2);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-13);
    letter-spacing: 0;
    color: var(--color-ink-mute);
  }

  .c-field__description {
    margin-top: -4px;
    margin-bottom: 4px;
    font-size: var(--text-13);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  .c-field__wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-input);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    transition:
      border-color var(--dur-fast) ease-out,
      box-shadow var(--dur-fast) ease-out,
      background var(--dur-fast) ease-out;
  }

  .c-field__wrap:focus-within {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }
  .c-field--error .c-field__wrap {
    border-color: color-mix(in srgb, var(--color-terra-500) 50%, transparent);
  }

  .c-field--error .c-field__wrap:focus-within {
    border-color: var(--color-terra-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-terra-500) 15%, transparent);
  }

  .c-field--cursor-pointer .c-field__wrap,
  .c-field--cursor-pointer .c-field__label {
    cursor: pointer;
  }
  .c-field--flush {
    margin-bottom: 0;
  }
  .c-field--tight {
    margin-bottom: var(--space-2);
  }
  .c-field__wrap--narrow {
    max-width: 20rem;
  }

  /* input with an absolutely-positioned leading/trailing symbol (currency, unit) */
  .c-input-affix {
    position: relative;
    width: 100%;
  }
  .c-input-affix__symbol {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    color: var(--color-ink-mute);
  }
  .c-input-affix__symbol--leading {
    left: 0;
  }
  .c-input-affix__symbol--trailing {
    right: 0;
  }
  .text-field.c-input-affix__field--leading {
    padding-left: var(--space-4);
  }
  .text-field.c-input-affix__field--trailing {
    padding-right: var(--space-12);
  }

  .c-field__errors {
    margin-top: 4px;
    font-size: var(--text-sm);
    color: var(--color-terra-700);
  }

  /* Bare controls that sit inside c-field__wrap (ported from @utility). The
   * text-field / select / text-area class names are kept since form helpers in
   * views reference them directly. */
  .text-field {
    appearance: none;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-14-5);
  }
  .text-field::placeholder {
    color: var(--color-ink-mute);
  }
  .text-field:focus {
    outline: none;
    box-shadow: none;
    border: 0;
  }

  .select {
    appearance: none;
    width: 100%;
    border: 0;
    padding: 0;
    color: var(--color-ink-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%239fa6b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 0 center;
    background-repeat: no-repeat;
    background-size: 1.5em;
  }
  .select:focus {
    outline: none;
    box-shadow: none;
    border: 0;
  }
  .select:disabled {
    background-color: var(--color-paper-2);
    color: var(--color-ink-mute);
    cursor: not-allowed;
  }

  .text-area {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-xl);
  }
  .text-area:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }

  /* Borderless prose textarea that sits inside a c-field__wrap (the wrap owns
   * the border + focus ring). The textarea-equivalent of .text-field. */
  .text-area-field {
    appearance: none;
    width: 100%;
    min-height: 110px;
    padding: 0;
    border: 0;
    background: transparent;
    resize: vertical;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-14-5);
    line-height: 1.55;
  }
  .text-area-field::placeholder {
    color: var(--color-ink-mute);
  }
  .text-area-field:focus {
    outline: none;
    box-shadow: none;
  }
  .text-area-field--sm {
    min-height: 80px;
  }
  .text-area-field--lg {
    min-height: 140px;
  }
  .text-area-field--xl {
    min-height: 300px;
  }

  /* two-up grid of fields (e.g. occupancy / size groups) */
  .c-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  /* compact labeled number field — label sits above the value inside the box */
  .c-number-field {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3-5);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-input);
    cursor: text;
    transition:
      border-color var(--dur-fast) ease-out,
      box-shadow var(--dur-fast) ease-out,
      background var(--dur-fast) ease-out;
  }
  .c-number-field:focus-within {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }
  .c-number-field__label {
    margin-bottom: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--color-ink);
  }
  .c-number-field__required {
    margin-left: 2px;
    color: var(--color-terra-500);
  }

  .c-number-field__input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
  }
  .c-number-field__input:focus {
    outline: none;
    box-shadow: none;
  }

  /* ── c-stat ────────────────────────────────────────────────────────── */
  .c-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 78px;
    padding: 14px var(--space-4);
    border-radius: var(--radius-input);
    border: 1px dashed var(--color-ink-18);
  }
  .c-stat--default {
    background: var(--color-paper-soft);
  }
  .c-stat--muted {
    background: transparent;
  }
  .c-stat--sage {
    background: color-mix(in srgb, var(--color-sage-500) 15%, transparent);
    border-color: color-mix(in srgb, var(--color-sage-500) 30%, transparent);
  }
  .c-stat--terra {
    background: color-mix(in srgb, var(--color-terra-500) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-terra-500) 30%, transparent);
  }
  .c-stat--butter {
    background: color-mix(in srgb, var(--color-butter) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-butter) 55%, transparent);
  }

  .c-stat__num {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-stat);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-ink);
  }
  .c-stat__num--italic {
    font-style: italic;
    font-weight: 400;
  }

  .c-stat__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--color-ink-mute);
  }

  .c-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2-5);
  }

  @media (width >= 640px) {
    .c-stat-grid--quad {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .c-stat--span-2 {
    grid-column: span 2;
  }

  /* ── c-avatar ──────────────────────────────────────────────────────── */
  .c-avatar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

  .c-avatar__media,
  .c-avatar__initials,
  .c-avatar__empty {
    flex-shrink: 0;
    border-radius: var(--radius-pill);
  }

  .c-avatar__media {
    display: block;
    object-fit: cover;
  }

  .c-avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-family: var(--font-serif);
    font-style: italic;
    letter-spacing: -0.015em;
  }

  .c-avatar__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-ink-18);
    color: var(--color-ink-mute);
  }
  .c-avatar__empty svg {
    width: 1rem;
    height: 1rem;
  }

  .c-avatar--small .c-avatar__media,
  .c-avatar--small .c-avatar__initials,
  .c-avatar--small .c-avatar__empty {
    width: var(--space-6);
    height: var(--space-6);
    font-size: var(--text-xs);
  }

  .c-avatar--large .c-avatar__media,
  .c-avatar--large .c-avatar__initials,
  .c-avatar--large .c-avatar__empty {
    width: var(--space-10);
    height: var(--space-10);
    font-size: var(--text-sm);
  }

  /* ── c-checkbox ────────────────────────────────────────────────────── */
  .c-checkbox {
    display: inline-flex;
    cursor: pointer;
  }
  .c-checkbox__icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .c-checkbox__off {
    color: var(--color-ink-25);
  }
  .c-checkbox:hover .c-checkbox__off {
    color: var(--color-ink-30);
  }
  .c-checkbox__on {
    color: var(--color-primary);
  }
  .c-checkbox:hover .c-checkbox__on {
    color: var(--color-primary-dark);
  }

  /* ── c-toggle ──────────────────────────────────────────────────────── */
  .c-toggle {
    display: flex;
    align-items: center;
  }

  .c-toggle__switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 1.5rem;
    width: 2.75rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }

  .c-toggle__switch:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--color-paper),
      0 0 0 4px var(--color-primary);
  }
  .c-toggle__switch.is-on {
    background: var(--color-primary);
  }

  .c-toggle__slider {
    pointer-events: none;
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    box-shadow: var(--shadow-subtle);
    transform: translateX(0);
    transition: transform 0.2s ease-in-out;
  }
  .c-toggle__slider.is-on {
    transform: translateX(1.25rem);
  }
  .c-toggle__text {
    margin-left: var(--space-3);
  }
  .c-toggle__label {
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .c-toggle__sublabel {
    color: var(--color-ink-mute);
  }

  /* ── c-segmented (radio pill group) ────────────────────────────────── */
  .c-segmented {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: fit-content;
    padding: var(--space-1);
    background: var(--color-paper-2);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: var(--radius-pill);
  }

  .c-segmented__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) 14px;
    border-radius: var(--radius-pill);
    font-size: var(--text-13-5);
    color: var(--color-ink-2);
    cursor: pointer;
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }

  .c-segmented__option:hover:not(:has(:checked)) {
    color: var(--color-ink);
    background: color-mix(in srgb, var(--color-paper-card) 60%, transparent);
  }
  .c-segmented__option > svg {
    width: 1rem;
    height: 1rem;
  }

  .c-segmented__option:has(:checked) {
    background: var(--color-paper-card);
    box-shadow: var(--shadow-segmented-active);
    color: var(--color-ink);
    font-weight: 500;
  }
  .c-segmented__option--fill-sage:has(:checked) {
    background: var(--color-sage-500);
    color: var(--color-white);
  }
  .c-segmented__option--fill-terra:has(:checked) {
    background: var(--color-terra-500);
    color: var(--color-white);
  }
  .c-segmented__option--fill-destructive:has(:checked) {
    background: var(--color-destructive);
    color: var(--color-white);
  }

  .c-segmented__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .c-segmented__dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-ink-mute);
  }
  .c-segmented__option--dot-sage:has(:checked) .c-segmented__dot {
    background: var(--color-sage-500);
  }
  .c-segmented__option--dot-terra:has(:checked) .c-segmented__dot {
    background: var(--color-terra-500);
  }
  .c-segmented__option--dot-destructive:has(:checked) .c-segmented__dot {
    background: var(--color-destructive);
  }

  /* Tooltip — a dark bubble anchored above its trigger, revealed on hover of a
   * named-group parent. width/padding/delay are passed per-callsite via custom
   * props; the group modifier names which parent's :hover reveals it.
   * NOTE (migration): reveals key off the legacy Tailwind `group/<name>` parent
   * markers (escaped selectors below) so tasks + rezstream both work without
   * converting their parents yet. At cutover, swap these for feature-class
   * parent selectors (e.g. `.task-cell:hover`). Hidden below md (md:flex). */
  .c-tooltip {
    position: absolute;
    top: 0;
    transform-origin: bottom;
    transform: translateY(-100%);
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--c-tooltip-width, 100%);
    padding-bottom: var(--c-tooltip-pad, var(--space-1));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
    transition-delay: 0ms;
    z-index: var(--z-popover);
  }

  @media (width >= 768px) {
    .c-tooltip {
      display: flex;
    }
  }

  .c-tooltip--group-button {
    transform: translate(-5rem, -100%);
    padding-left: var(--space-2);
  }

  .c-tooltip__bubble {
    background: var(--color-tooltip);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    box-shadow: var(--shadow-elevation);
  }

  .c-tooltip__arrow {
    position: absolute;
    margin-top: 2.5rem;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-tooltip);
  }

  .group\/cell:hover .c-tooltip--group-cell,
  .group\/button:hover .c-tooltip--group-button {
    opacity: 1;
    transition-delay: var(--c-tooltip-delay, 400ms);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * KEYFRAMES (not subject to @layer)
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes skeleton-loading {
  0% {
    background-color: color-mix(in srgb, var(--color-ink) 4%, transparent);
  }
  100% {
    background-color: var(--color-ink-10);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation helper classes (referenced from markup + JS) */
.spin {
  animation: spin 2s linear infinite;
}
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}
.animate-fade-up-200 {
  animation: fade-up 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════════════
 * GLOBAL BEHAVIORAL RULES
 * ════════════════════════════════════════════════════════════════════════ */

/* Native bridge — hide web chrome when the native app supplies its own. */
[data-bridge-components~="button-bar"] .mobile-button-bar,
[data-bridge-components~="button-bar"] #bottom-button-bar {
  display: none;
}

[data-bridge-platform] .native-web-chrome {
  display: none;
}

/* Print */
@media print {
  .print\:break-inside-avoid {
    break-inside: avoid;
  }
  .print\:hidden,
  .group-hover\/section\:print\:hidden {
    display: none !important;
  }
  .print\:bg-white {
    background: var(--color-white) !important;
  }
  .print\:shadow-none {
    box-shadow: none !important;
  }
  .print\:rounded-none {
    border-radius: 0 !important;
  }
  .print\:pt-0 {
    padding-top: 0 !important;
  }
  .print\:-mt-4 {
    margin-top: -1rem !important;
  }
  .first\:print\:pt-0:first-child {
    padding-top: 0 !important;
  }
  .first\:print\:-mt-4:first-child {
    margin-top: -1rem !important;
  }
}

/* Bounce animation (Tailwind animate-bounce port; attention-grab icons). */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}

/* Full-height frame (html/body, dashboard fill cards). */
.h-full {
  height: 100%;
}

/* Wordmark logo lockup. */
.c-wordmark {
  display: inline-flex;
  align-items: baseline;
}

/* Functional single-purpose classes (kept like .h-full). */
.fill-current {
  fill: currentcolor;
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}