/* ==========================================================================
   2026.css — Global custom styles
   Loaded after index.css (Tailwind). Write any global overrides,
   shared animations, or cross-component styles here.
   ========================================================================== */

:root,
[data-theme="light"] .--light {
  /* ===== PRIMITIVE COLORS ===== */

  /* neon green */
  --primary-hue: 25;

  /* orange */
  --secondary-hue: 13;
  /* light cyan */
  --tertiary-hue: 100;
  /* dark green */
  --quaternary-hue: 104;
  /* Red */
  --quinary-hue: 10;

  --t3di__color-primary-1: hsl(var(--primary-hue), 95%, 50%);
  --t3di__color-primary-2: hsl(var(--primary-hue), 95%, 55%);
  --t3di__color-primary-3: hsl(var(--primary-hue), 95%, 60%);
  --t3di__color-primary-4: hsl(var(--primary-hue), 95%, 65%);
  --t3di__color-primary-5: hsl(var(--primary-hue), 95%, 70%);
  --t3di__color-primary-6: hsl(var(--primary-hue), 95%, 75%);
  --t3di__color-primary-7: hsl(var(--primary-hue), 95%, 80%);
  --t3di__color-primary-8: hsl(var(--primary-hue), 95%, 85%);
  --t3di__color-primary-9: hsl(var(--primary-hue), 95%, 90%);
  --t3di__color-primary-10: hsl(var(--primary-hue), 95%, 94%);

  --t3di__color-secondary-1: hsl(var(--secondary-hue), 95%, 50%);
  --t3di__color-secondary-2: hsl(var(--secondary-hue), 95%, 59%);
  --t3di__color-secondary-3: hsl(var(--secondary-hue), 95%, 62%);
  --t3di__color-secondary-4: hsl(var(--secondary-hue), 95%, 65%);
  --t3di__color-secondary-5: hsl(var(--secondary-hue), 95%, 70%);
  --t3di__color-secondary-6: hsl(var(--secondary-hue), 95%, 75%);
  --t3di__color-secondary-7: hsl(var(--secondary-hue), 95%, 80%);
  --t3di__color-secondary-8: hsl(var(--secondary-hue), 95%, 85%);
  --t3di__color-secondary-9: hsl(var(--secondary-hue), 95%, 90%);
  --t3di__color-secondary-10: hsl(var(--secondary-hue), 95%, 95%);

  --t3di__color-tertiary-1: hsl(var(--tertiary-hue), 85%, 45%);
  --t3di__color-tertiary-2: hsl(var(--tertiary-hue), 85%, 51%);
  --t3di__color-tertiary-3: hsl(var(--tertiary-hue), 85%, 60%);
  --t3di__color-tertiary-4: hsl(var(--tertiary-hue), 85%, 65%);
  --t3di__color-tertiary-5: hsl(var(--tertiary-hue), 85%, 70%);
  --t3di__color-tertiary-6: hsl(var(--tertiary-hue), 85%, 75%);
  --t3di__color-tertiary-7: hsl(var(--tertiary-hue), 85%, 80%);
  --t3di__color-tertiary-8: hsl(var(--tertiary-hue), 85%, 85%);
  --t3di__color-tertiary-9: hsl(var(--tertiary-hue), 85%, 90%);
  --t3di__color-tertiary-10: hsl(var(--tertiary-hue), 85%, 95%);

  --t3di__color-quaternary-1: hsl(var(--quaternary-hue), 50%, 50%);
  --t3di__color-quaternary-2: hsl(var(--quaternary-hue), 50%, 59%);
  --t3di__color-quaternary-3: hsl(var(--quaternary-hue), 50%, 62%);
  --t3di__color-quaternary-4: hsl(var(--quaternary-hue), 50%, 65%);
  --t3di__color-quaternary-5: hsl(var(--quaternary-hue), 50%, 70%);
  --t3di__color-quaternary-6: hsl(var(--quaternary-hue), 50%, 75%);
  --t3di__color-quaternary-7: hsl(var(--quaternary-hue), 50%, 80%);
  --t3di__color-quaternary-8: hsl(var(--quaternary-hue), 50%, 85%);
  --t3di__color-quaternary-9: hsl(var(--quaternary-hue), 50%, 90%);
  --t3di__color-quaternary-10: hsl(var(--quaternary-hue), 50%, 95%);

  --t3di__color-quinary-1: hsl(var(--quinary-hue), 90%, 53%);
  --t3di__color-quinary-2: hsl(var(--quinary-hue), 90%, 59%);
  --t3di__color-quinary-3: hsl(var(--quinary-hue), 90%, 62%);
  --t3di__color-quinary-4: hsl(var(--quinary-hue), 90%, 65%);
  --t3di__color-quinary-5: hsl(var(--quinary-hue), 90%, 70%);
  --t3di__color-quinary-6: hsl(var(--quinary-hue), 90%, 75%);
  --t3di__color-quinary-7: hsl(var(--quinary-hue), 90%, 80%);
  --t3di__color-quinary-8: hsl(var(--quinary-hue), 90%, 85%);
  --t3di__color-quinary-9: hsl(var(--quinary-hue), 90%, 90%);
  --t3di__color-quinary-10: hsl(var(--quinary-hue), 90%, 95%);

  --t3di__color-surface-1: hsl(var(--primary-hue), 6%, 100%);
  --t3di__color-surface-2: hsl(var(--primary-hue), 6%, 98%);
  --t3di__color-surface-3: hsl(var(--primary-hue), 8%, 97%);
  --t3di__color-surface-4: hsl(var(--primary-hue), 6%, 95%);
  --t3di__color-surface-5: hsl(var(--primary-hue), 6%, 90%);
  --t3di__color-surface-6: hsl(var(--primary-hue), 6%, 85%);
  --t3di__color-surface-7: hsl(var(--primary-hue), 6%, 80%);
  --t3di__color-surface-8: hsl(var(--primary-hue), 6%, 75%);
  --t3di__color-surface-9: hsl(var(--primary-hue), 6%, 70%);
  --t3di__color-surface-10: hsl(var(--primary-hue), 6%, 60%);

  --t3di__color-surface-11: hsl(var(--primary-hue), 6%, 55%);
  --t3di__color-surface-12: hsl(var(--primary-hue), 6%, 50%);
  --t3di__color-surface-13: hsl(var(--primary-hue), 6%, 45%);
  --t3di__color-surface-14: hsl(var(--primary-hue), 6%, 40%);
  --t3di__color-surface-15: hsl(var(--primary-hue), 6%, 35%);
  --t3di__color-surface-16: hsl(var(--primary-hue), 6%, 30%);
  --t3di__color-surface-17: hsl(var(--primary-hue), 6%, 25%);
  --t3di__color-surface-18: hsl(var(--primary-hue), 6%, 20%);
  --t3di__color-surface-19: hsl(var(--primary-hue), 6%, 15%);
  --t3di__color-surface-20: hsl(var(--primary-hue), 6%, 10%);

  --t3di__font-size: 16px;

  --t3di__border-radius: var(--t3di__space);
  --t3di__border-radius-sm: calc(var(--t3di__space) / 2);
  --t3di__animation-step: 0.125s;
  --t3di__animation-step-2x: 0.25s;
  --t3di__animation-step-4x: 0.5s;
  --t3di__focus-box-shadow: 0 0 0 0.0675em var(--t3di__color-primary-3);
  --t3di__focus-box-shadow-start: 0 0 0 0.0675em var(--t3di__color-primary-3);
  --t3di__focus-box-shadow-color: var(--t3di__color-primary-3);

  --t3di__screen-xl: 1680px;
  --t3di__screen-lg: 1280px;
  --t3di__screen-md: 1080px;
  --t3di__screen-sm: 736px;

  --t3di__space: 16px;
  --t3di__border-width: 1px;
  --t3di__modal__border-radius: 24px;

  --t3di__font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  --t3di__font-mono: monospace, monospace;
  --t3di__font-family-mono: "IBM Plex Mono", monospace, monospace;

  /* TOKENS FOR LAYERING */

  /* === Foreground & Background TOKENS === */
  --t3di__color-foreground: hsl(var(--primary-hue), 81%, 11%);
  --t3di__color-foreground-fixed: hsl(var(--primary-hue), 81%, 11%);
  --t3di__color-background: hsl(var(--primary-hue), 4%, 98.75%);
  --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%);
  --t3di__color-background-brand: var(--t3di__color-primary-5);

  --t3di__white: #ffffff;
  --t3di__black: #000;

  --t3di__layer-1: var(--t3di__color-surface-1);
  --t3di__layer-2: var(--t3di__color-surface-3);
  --t3di__layer-3: var(--t3di__color-surface-5);
  --t3di__layer-4: var(--t3di__color-surface-5);

  --t3di__layer-inset: var(--t3di__white);

  --t3di__text-default: var(--t3di__color-foreground);
  --t3di__text-inverse: var(--t3di__color-background);
  --t3di__text-subtle: color-mix(
    in srgb,
    var(--t3di__color-foreground) 65%,
    transparent
  );
  --t3di__text-label: color-mix(
    in srgb,
    var(--t3di__color-foreground) 80%,
    transparent
  );
  --t3di__text-selected: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 50%,
    var(--t3di__color-foreground) 50%
  );
  --t3di__text-placeholder: color-mix(
    in srgb,
    var(--t3di__color-foreground) 50%,
    transparent
  );
  --t3di__text-brand: var(--t3di__color-foreground);

  /* === Border TOKENS === */
  --t3di__border-default: var(--t3di__color-surface-7);
  --t3di__border-subtle: var(--t3di__color-surface-5);
  --t3di__border-strong: var(--t3di__color-foreground);
  --t3di__border-brand: var(--t3di__color-surface-20);
  --t3di__border-card: var(--t3di__color-surface-6);
  --t3di__border-card-alt: var(--t3di__color-surface-20);
  --t3di__border-dot: var(--t3di__color-surface-6);

  /* === Button TOKENS === */
  /* Primary Button */
  --t3di__button-primary-background: var(--t3di__color-primary-3);
  --t3di__button-primary-color: var(--t3di__text-inverse);
  --t3di__button-primary-border: var(--t3di__border-default);

  /* Secondary Button */
  --t3di__button-secondary-background: var(--t3di__color-surface-5);
  --t3di__button-secondary-color: var(--t3di__text-default);

  /* Neutral Button */
  --t3di__button-neutral-background: var(--t3di__color-surface-6);
  --t3di__button-neutral-color: var(--t3di__text-default);

  /* Tertiary Button */
  --t3di__button-tertiary-background: var(--t3di__color-tertiary-6);
  --t3di__button-tertiary-color: var(--t3di__text-default);

  /* Quaternary Button */
  --t3di__button-quaternary-background: color-mix(
    in srgb,
    var(--t3di__color-quaternary-1) 100%,
    var(--t3di__color-foreground) 50%
  );
  --t3di__button-quaternary-color: var(--t3di__text-inverse);

  /* Danger Button */
  --t3di__button-danger-background: var(--t3di__color-quinary-8);
  --t3di__button-danger-color: var(--t3di__color-quinary-1);

  /* Warning Button */
  --t3di__button-warning-background: var(--t3di__color-quaternary-3);

  /* ===== link TOKENS ===== */
  --t3di__link: var(--t3di__text-default);
  --t3di__link-primary: var(--t3di__color-primary-4);
  --t3di__link-primary-selected: var(--t3di__color-primary-4);
  --t3di__link-primary-disabled: var(--t3di__color-primary-4);

  @media (max-width: 1024px) {
    --t3di__space: calc(var(--t3di__font-size) * 1.25);
  }

  @media (max-width: 768px) {
    --t3di__space: calc(var(--t3di__font-size) * 1.125);
  }
}

[data-theme="brand"],
.--brand {
  --t3di__color-background: var(--t3di__color-primary-6);

  --t3di__layer-1: color-mix(
    in srgb,
    var(--t3di__color-primary-5) 100%,
    var(--t3di__color-background) 5%
  );
  --t3di__layer-2: color-mix(
    in srgb,
    var(--t3di__color-primary-4) 100%,
    var(--t3di__white) 41%
  );
  --t3di__layer-3: color-mix(
    in srgb,
    var(--t3di__color-primary-7) 100%,
    var(--t3di__color-background) 5%
  );
  --t3di__layer-4: color-mix(
    in srgb,
    var(--t3di__color-primary-8) 100%,
    var(--t3di__color-background) 5%
  );

  --t3di__border-default: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 100%,
    var(--t3di__color-foreground) 10%
  );
  --t3di__border-subtle: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 100%,
    var(--t3di__color-foreground) 3%
  );
  --t3di__border-card: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 100%,
    var(--t3di__color-foreground) 3%
  );
  --t3di__border-dot: color-mix(
    in srgb,
    var(--t3di__color-primary-7) 100%,
    var(--t3di__color-foreground) 100%
  );

  --t3di__button-primary-background: var(--t3di__color-primary-7);
  --t3di__button-primary-color: var(--t3di__color-foreground);

  --t3di__button-secondary-background: var(--t3di__color-primary-8);
  --t3di__button-secondary-color: var(--t3di__color-foreground);

  --t3di__layer-inset: color-mix(
    in srgb,
    var(--t3di__color-primary-7) 60%,
    var(--t3di__white) 60%
  );

  --t3di__text-default: var(--t3di__black);
  --t3di__text-subtle: color-mix(in srgb, var(--t3di__black) 80%, transparent);
}

/* ===== DARK THEME  ===== */

[data-theme="dark"],
.--dark {
  /* TOKENS FOR LAYERING */

  --t3di__layer-1: var(--t3di__color-surface-20);
  --t3di__layer-2: var(--t3di__color-surface-19);
  --t3di__layer-3: var(--t3di__color-surface-16);
  --t3di__layer-4: var(--t3di__color-surface-15);

  --t3di__layer-inset: var(--t3di__black);

  /* === Foreground & Background TOKENS === */
  --t3di__color-foreground: hsl(var(--primary-hue), 4%, 97.5%);
  --t3di__color-background: hsl(var(--primary-hue), 6%, 10%);
  --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%);
  --t3di__color-background-brand: var(--t3di__color-primary-1);

  --t3di__text-default: var(--t3di__color-foreground);
  --t3di__text-inverse: var(--t3di__color-foreground-inverse);
  --t3di__text-subtle: var(--t3di__color-surface-8);
  --t3di__text-label: color-mix(
    in srgb,
    var(--t3di__color-foreground) 80%,
    transparent
  );
  --t3di__text-selected: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 50%,
    var(--t3di__color-foreground) 50%
  );
  --t3di__text-placeholder: color-mix(
    in srgb,
    var(--t3di__color-foreground) 50%,
    transparent
  );
  --t3di__text-brand: var(--t3di__color-primary-3);

  /* === Border TOKENS === */
  --t3di__border-default: var(--t3di__color-surface-10);
  --t3di__border-subtle: var(--t3di__color-surface-16);
  --t3di__border-strong: var(--t3di__color-foreground);
  --t3di__border-brand: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 50%,
    var(--t3di__color-background) 50%
  );
  --t3di__border-card: var(--t3di__color-surface-15);
  --t3di__border-card-alt: var(--t3di__color-surface-15);
  --t3di__border-dot: var(--t3di__color-surface-18);

  /* === Button TOKENS === */
  /* Primary Button */
  --t3di__button-primary-background: var(--t3di__color-primary-3);
  --t3di__button-primary-color: color-mix(
    in srgb,
    var(--t3di__color-primary-4) 10%,
    var(--t3di__color-background) 99%
  );
  --t3di__button-primary-border: color-mix(
    in srgb,
    var(--t3di__border-strong) 100%,
    transparent 100%
  );

  /* Secondary Button */
  --t3di__button-secondary-background: var(--t3di__color-secondary-4);
  --t3di__button-secondary-color: var(--t3di__text-inverse);

  /* Danger Button */
  --t3di__button-danger-background: var(--t3di__color-quinary-8);

  /* Warning Button */
  --t3di__button-warning-background: var(--t3di__color-quaternary-3);

  /* ===== link TOKENS ===== */
  --t3di__link: var(--t3di__text-default);
  --t3di__link-primary: var(--t3di__color-primary-4);
  --t3di__link-primary-selected: var(--t3di__color-primary-4);
  --t3di__link-primary-disabled: var(--t3di__color-primary-4);
}

.text-muted-foreground {
  color: var(--t3di__text-subtle);
}

/* ==========================================================================
   tedi-* form controls — mirrored from app/frontend/components/ui/{button,input,select}.css
   so Rails-rendered public pages look identical to the React SPA without
   loading the Vite bundle. Keep in sync when the React sources change.
   ========================================================================== */

/* --- .tedi-button base --- */
.tedi-button,
.primary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.0375em;
  line-height: 1em;
  border-radius: var(--t3di__border-radius-sm);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t3di__animation-step) ease-in-out,
    box-shadow var(--t3di__animation-step) ease-in-out,
    border-color var(--t3di__animation-step) ease-in-out,
    background-color var(--t3di__animation-step) ease-in-out;
}

.tedi-button:focus-visible {
  outline: 0.25em solid var(--t3di__focus-box-shadow-color);
  outline-offset: 0.125em;
  box-shadow: var(--t3di__focus-box-shadow);
}

.tedi-button:active:not(:disabled) {
  transform: scale(0.975);
}

.tedi-button:disabled {
  opacity: 0.5;
}

.tedi-button:disabled:hover,
.tedi-button:disabled:active {
  transform: none;
}

.tedi-button svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.tedi-button[data-size="default"] {
  padding: 1em 1em;
  font-size: 0.875rem;
}

.primary-button,
.secondary-button {
  padding: 0.75em 1em;
}

.tedi-button[data-size="xs"] {
  padding: 0.375em 0.675em;
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1.1;
  border-radius: calc(var(--t3di__border-radius-sm) / 2);
}

.tedi-button[data-size="sm"] {
  padding: 0.375rem 0.75rem;
  height: 2.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: calc(var(--t3di__border-radius-sm) / 3);
}

.tedi-button[data-size="lg"] {
  padding: 1.125em 1.5em;
  font-size: 1em;
  line-height: 1.125;
  font-weight: 500;
}

.tedi-button[data-variant="secondary"],
.secondary-button {
  background-color: var(--t3di__button-secondary-background);
  color: var(--t3di__button-secondary-color);
  border: 1px solid var(--t3di__color-surface-7);
  border-radius: var(--t3di__border-radius-sm);
  border-top-color: color-mix(
    in srgb,
    var(--t3di__color-surface-8) 50%,
    transparent 100%
  );
  border-left-color: color-mix(
    in srgb,
    var(--t3di__color-surface-8) 50%,
    transparent 100%
  );
  border-bottom-color: color-mix(
    in srgb,
    var(--t3di__color-surface-8) 50%,
    transparent 100%
  );
  transition:
    background-color var(--t3di__animation-step) ease,
    border-color calc(var(--t3di__animation-step) * 2) ease,
    box-shadow var(--t3di__animation-step) ease,
    transform var(--t3di__animation-step) ease;
}

.tedi-button[data-variant="secondary"]:hover {
  background-color: color-mix(
    in srgb,
    var(--t3di__button-secondary-background) 80%,
    var(--t3di__color-foreground) 4%
  );
  border-color: var(--t3di__color-surface-10);
}

/* --- Variant: default (primary) — gradient depth effect --- */
.tedi-button[data-variant="default"],
.primary-button {
  background-color: var(--t3di__button-primary-background);
  color: var(--t3di__button-primary-color);
  font-weight: 700;
  border-radius: var(--t3di__border-radius-sm);
  border: 1px solid transparent;
  text-shadow:
    -0.5px -0.5px 1px
      color-mix(
        in srgb,
        var(--t3di__color-background) 20%,
        var(--t3di__color-foreground) 40%
      ),
    0 0 12px
      color-mix(in srgb, var(--t3di__color-secondary-1) 20%, transparent 40%);
  box-shadow:
    0 0 0.5em 0.5px
      color-mix(in srgb, var(--t3di__color-primary-3) 0%, transparent 100%),
    0 0 0 0.5px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 30%
      ),
    inset 0.25px 0.125px 0 0.25px
      color-mix(in srgb, transparent 0%, var(--t3di__color-background) 30%),
    inset -1px -1px 0 0px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 20%
      );
  transition:
    background-color var(--t3di__animation-step) ease,
    border-color calc(var(--t3di__animation-step) * 2) ease,
    box-shadow var(--t3di__animation-step-2x) ease,
    transform var(--t3di__animation-step) ease;
}

.tedi-button[data-variant="default"]:hover,
.primary-button:hover {
  background-color: color-mix(
    in srgb,
    var(--t3di__button-primary-background) 100%,
    var(--t3di__color-background) 11%
  );
  box-shadow:
    0 0 0.5em 0.5px
      color-mix(in srgb, var(--t3di__color-primary-4) 100%, transparent 100%),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 50%
      ),
    inset 0.25px 0.125px 0 0.25px
      color-mix(in srgb, transparent 0%, var(--t3di__color-background) 30%),
    inset -1px -1px 0 0px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 20%
      );
}

.tedi-button[data-variant="default"]::after,
.primary-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      var(--t3di__color-primary-1) 1%,
      color-mix(
          in srgb,
          var(--t3di__color-foreground) 80%,
          var(--t3di__color-secondary-1)
        )
        33%,
      color-mix(
          in srgb,
          var(--t3di__color-foreground) 40%,
          var(--t3di__color-secondary-1)
        )
        20%,
      transparent 20%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      var(--t3di__color-foreground) 0%,
      color-mix(
          in srgb,
          var(--t3di__color-foreground) 90%,
          var(--t3di__color-primary-1) 50%
        )
        2%,
      color-mix(
          in srgb,
          var(--t3di__color-primary-1) 20%,
          var(--t3di__color-secondary-1)
        )
        15%,
      color-mix(
          in srgb,
          var(--t3di__color-secondary-1) 20%,
          var(--t3di__color-foreground) 100%
        )
        62.5%,
      color-mix(
          in srgb,
          var(--t3di__color-secondary-1) 40%,
          var(--t3di__color-foreground) 100%
        )
        100%
    );
  opacity: 0.25;
  mix-blend-mode: overlay;
  transition: opacity calc(var(--t3di__animation-step) * 2) ease;
  pointer-events: none;
}

.tedi-button[data-variant="default"] > *,
.primary-button > * {
  position: relative;
  z-index: 2;
}

.tedi-button[data-variant="default"]:active:not(:disabled),
.primary-button:active:not(:disabled) {
  box-shadow:
    inset 1px 1px 1px 0
      color-mix(in srgb, transparent 40%, var(--t3di__color-foreground) 10%),
    inset -0.5px 1px 1px 0
      color-mix(in srgb, transparent 10%, var(--t3di__color-background) 30%),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 90%
      );
  border-color: var(--t3di__color-primary-3);
  outline: 3px solid var(--t3di__color-primary-3);
}

/* --- Variant: outline --- */
.tedi-button[data-variant="outline"] {
  border-radius: var(--t3di__border-radius-sm);
  background-color: transparent;
  border: 1px solid var(--t3di__border-default);
  color: var(--t3di__text-default);
}

.tedi-button[data-variant="outline"]:hover {
  background-color: var(--t3di__color-primary-3);
  color: #fff;
  border-color: var(--t3di__color-primary-3);
}

/* --- Variant: ghost --- */
.tedi-button[data-variant="ghost"] {
  background-color: transparent;
  color: var(--t3di__text-default);
  border: 1px solid transparent;
}

.tedi-button[data-variant="ghost"]:hover {
  background-color: var(--t3di__color-surface-3);
}

/* --- .tedi-input --- */
.tedi-input {
  display: flex;
  width: 100%;
  height: 3.5em;
  padding: 1.125em;
  line-height: 1.125em;
  border-radius: calc(var(--t3di__border-radius-sm) / 3);
  border: 1px solid var(--t3di__border-default);
  background-color: transparent;
  font-size: 1em;
  font-weight: 400;
  color: var(--t3di__text-default);
  outline: 0;
  box-shadow: 0 0 0 0 transparent;
  transition:
    outline var(--t3di__animation-step) ease-in-out,
    transform var(--t3di__animation-step) ease-in-out,
    box-shadow calc(var(--t3di__animation-step) * 2) ease-in-out,
    border-color var(--t3di__animation-step) ease-in-out,
    border-radius var(--t3di__animation-step-2x) ease-in-out,
    background-color var(--t3di__animation-step) ease-in-out;
}

.tedi-input::placeholder {
  color: var(--t3di__text-placeholder);
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tedi-input:focus {
  border-color: var(--t3di__focus-box-shadow-color);
  outline: 0.25em solid var(--t3di__focus-box-shadow-color);
  outline-offset: 0;
  box-shadow: var(--t3di__focus-box-shadow);
  border-radius: var(--t3di__border-radius-sm);
}

.tedi-input[data-size="sm"] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  height: 2.25rem;
  font-size: 0.875rem;
}

/* --- .tedi-native-select: style a native <select> to match .tedi-select-trigger.
   Radix Select can't run without JS, so Rails pages use the native element and
   hide the OS chevron in favour of a custom SVG chevron from the React design. */
.tedi-native-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: flex;
  width: 100%;
  height: 3.5em;
  padding: 1.125em 3em 1.125em 1.125em;
  line-height: 1.125em;
  align-items: center;
  border-radius: calc(var(--t3di__border-radius-sm) / 3);
  border: 1px solid var(--t3di__border-default);
  background-color: transparent;
  font-size: 1em;
  font-weight: 400;
  color: var(--t3di__text-default);
  outline: 0;
  box-shadow: 0 0 0 0 transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1em center;
  cursor: pointer;
  transition:
    outline var(--t3di__animation-step) ease-in-out,
    box-shadow calc(var(--t3di__animation-step) * 2) ease-in-out,
    border-color var(--t3di__animation-step) ease-in-out,
    border-radius var(--t3di__animation-step-2x) ease-in-out,
    background-color var(--t3di__animation-step) ease-in-out;
}

.tedi-native-select[data-size="sm"] {
  height: 2.25rem;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: normal;
  background-position: right 0.625rem center;
}

.tedi-native-select:focus {
  border-color: var(--t3di__focus-box-shadow-color);
  outline: 0.25em solid var(--t3di__focus-box-shadow-color);
  outline-offset: 0;
  box-shadow: var(--t3di__focus-box-shadow);
  border-radius: var(--t3di__border-radius-sm);
}

.tedi-native-select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Block Badge — .tedi-block-badge (mirrors app/frontend/components/ui/block-badge.css
   so Rails-rendered public pages can use the same visual without loading Vite bundles). */
.tedi-block-badge {
  font-family: var(
    --t3di__font-family-mono,
    "SF Mono",
    Monaco,
    Consolas,
    monospace
  );
  font-size: 0.875em;
  color: hsl(72, 0%, 90%);
  padding: 0.375em 0.6em 0.375em 0.575em;
  display: inline-flex;
  letter-spacing: 0.0675em;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  transform: translateX(-0.25em) translateY(-0.0675em);
  border: 1px solid var(--t3di__layer-2);
  text-shadow:
    0 0 0.125em hsla(72, 90%, 75%, 0.05),
    0 0 0.25em hsla(72, 90%, 75%, 0.14),
    0 0 0.5em hsla(43, 95%, 75%, 0.14),
    1px 0.5px 0.0675em hsla(43, 95%, 75%, 0.14);
  background:
    linear-gradient(
      to bottom,
      transparent 30%,
      hsla(43, 95%, 70%, 0.25) 30% 50%,
      transparent 50% 70%,
      hsla(43, 95%, 70%, 0.25) 70% 90%,
      transparent 90%
    ),
    linear-gradient(
      90deg,
      hsla(43, 95%, 70%, 0.18),
      hsla(43, 95%, 70%, 0.1) 50%,
      hsla(43, 95%, 70%, 0.14)
    ),
    hsl(72, 22%, 11%);
  background-size:
    100% 3px,
    100% 100%,
    100% 100%;
  border-radius: calc(var(--t3di__border-radius-sm) / 2);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 0.0625em hsl(72, 11%, 32%),
    0 0.25em 0.75em -0.125em hsla(72, 28%, 9%, 0.2);
}

.tedi-block-badge[data-inline="true"] {
  transform: translateY(-0.0675em);
}

/* ==========================================================================
   public-* — shared marketing page heading patterns. Mirrors the Pricing
   page tokens (pp-hero / pp-h1 / pp-eyebrow / pp-section-lede) so Resources,
   Company, and Contact share one visual language. Unscoped on purpose so
   they work outside `.pp-root`.
   ========================================================================== */
.public-hero {
  padding: 72px 0 48px;
}

.public-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: hsl(var(--primary));
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

.public-h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
  max-width: 840px;
}

.public-lede {
  margin: 18px 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
}

@media (max-width: 760px) {
  .public-hero {
    padding: 48px 0 32px;
  }
  .public-h1 {
    font-size: 36px;
  }
  .public-lede {
    font-size: 15.5px;
  }
}

/* ==========================================================================
   api-flow-diagram — animated inbound/outbound API flow diagrams used inside
   /resources/api-docs narrative content. Ported from the Claude Design handoff
   bundle and namespaced under .api-flow-diagram so the generic class names
   (.node-rect, .step-chip, .legend, etc.) cannot leak.
   ========================================================================== */
.api-flow-diagram {
  margin: 28px 0;
  background: linear-gradient(180deg, hsl(30 14% 99%) 0%, hsl(30 14% 97%) 100%);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 28px 24px 16px;
  position: relative;
  overflow: hidden;
}
.api-flow-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(hsl(33 8% 49% / 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -1px -1px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 50%, transparent 100%);
}
.api-flow-diagram .api-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.api-flow-diagram .api-flow-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--muted-foreground));
}

.api-flow-diagram svg.flow {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.api-flow-diagram svg.flow-tall { display: none; }
@media (max-width: 700px) {
  .api-flow-diagram svg.flow-wide { display: none; }
  .api-flow-diagram svg.flow-tall { display: block; }
  .api-flow-diagram { padding: 20px 14px 14px; }
  .api-flow-diagram .api-flow-header { flex-wrap: wrap; }
}

.api-flow-diagram .node-rect {
  fill: hsl(var(--card));
  stroke: hsl(var(--border));
  stroke-width: 1.5;
  transition: fill 0.4s var(--tedi-ease-out), stroke 0.4s var(--tedi-ease-out);
}
.api-flow-diagram .node-rect.active {
  fill: hsl(27 91% 51% / 0.06);
  stroke: hsl(var(--primary));
  stroke-width: 2;
}
.api-flow-diagram .node-rect.tediware {
  fill: hsl(27 91% 51% / 0.04);
  stroke: hsl(var(--primary));
  stroke-width: 1.5;
}
.api-flow-diagram .node-rect.tediware.active {
  fill: hsl(27 91% 51% / 0.10);
  stroke-width: 2.5;
}
.api-flow-diagram .node-title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  fill: hsl(var(--foreground));
  text-anchor: middle;
  dominant-baseline: middle;
}
.api-flow-diagram .node-sub {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  fill: hsl(var(--muted-foreground));
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.04em;
}
.api-flow-diagram .node-icon {
  fill: none;
  stroke: hsl(var(--card-foreground));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.api-flow-diagram g.tediware .node-icon { stroke: hsl(var(--primary)); }

.api-flow-diagram .edge-track {
  fill: none;
  stroke: hsl(var(--input));
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.api-flow-diagram .edge-glow {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 0 6px hsl(27 91% 51% / 0.5));
}
.api-flow-diagram .edge-glow.lit { opacity: 1; }
.api-flow-diagram .arrowhead { fill: hsl(var(--input)); transition: fill 0.3s ease; }

.api-flow-diagram .step-chip {
  fill: hsl(var(--background));
  stroke: hsl(var(--border));
  stroke-width: 1;
  transition: fill 0.25s, stroke 0.25s;
}
.api-flow-diagram .step-chip.active {
  fill: hsl(var(--primary));
  stroke: hsl(var(--primary));
}
.api-flow-diagram .step-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  fill: hsl(var(--muted-foreground));
  text-anchor: middle;
  dominant-baseline: middle;
  transition: fill 0.25s;
}
.api-flow-diagram .step-num.active { fill: hsl(var(--primary-foreground)); }
.api-flow-diagram .step-label {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  fill: hsl(var(--foreground));
  dominant-baseline: middle;
  transition: fill 0.25s;
  paint-order: stroke fill;
  stroke: hsl(30 14% 98%);
  stroke-width: 4;
  stroke-linejoin: round;
}
.api-flow-diagram .step-label.active { fill: hsl(var(--primary)); font-weight: 600; }

.api-flow-diagram .flow-tall .node-title,
.api-flow-diagram .flow-tall .node-sub {
  text-anchor: start;
}

.api-flow-diagram .packet-shadow {
  fill: hsl(17 28% 2% / 0.12);
  filter: blur(2px);
}
.api-flow-diagram .packet-card {
  fill: hsl(var(--primary));
  stroke: hsl(27 91% 35%);
  stroke-width: 0.75;
  rx: 4;
  filter: drop-shadow(0 2px 4px hsl(27 91% 30% / 0.35));
}
.api-flow-diagram .packet-card.json  { fill: hsl(var(--primary)); }
.api-flow-diagram .packet-card.edi   { fill: #104e64; stroke: hsl(195 60% 18%); }
.api-flow-diagram .packet-card.hook  { fill: hsl(var(--accent-foreground)); stroke: hsl(203 66% 35%); }
.api-flow-diagram .packet-card.fetch { fill: hsl(var(--affirmative)); stroke: hsl(104 49% 30%); }
.api-flow-diagram .packet-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  fill: hsl(var(--primary-foreground));
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.06em;
}

.api-flow-diagram .api-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 14px 4px 4px;
  border-top: 1px dashed hsl(var(--border));
  margin-top: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  position: relative;
  z-index: 2;
}
.api-flow-diagram .api-flow-legend .item { display: flex; align-items: center; gap: 8px; }
.api-flow-diagram .api-flow-legend .api-flow-legend-spacer { margin-left: auto; }
.api-flow-diagram .api-flow-legend .swatch {
  width: 22px;
  height: 12px;
  border-radius: 3px;
}
.api-flow-diagram .api-flow-legend .swatch.json  { background: hsl(var(--primary)); }
.api-flow-diagram .api-flow-legend .swatch.edi   { background: #104e64; }
.api-flow-diagram .api-flow-legend .swatch.hook  { background: hsl(var(--accent-foreground)); }
.api-flow-diagram .api-flow-legend .swatch.fetch { background: hsl(var(--affirmative)); }

.api-flow-diagram .api-flow-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.api-flow-diagram .api-flow-controls button {
  appearance: none;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  padding: 3px 8px;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s var(--tedi-ease-out);
}
.api-flow-diagram .api-flow-controls button:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.api-flow-diagram .api-flow-controls button.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}