@import url('https://rsms.me/inter/inter.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* LIGHT MODE */
:root {
  --button-outline: rgba(0, 0, 0, 0.1);
  --badge-outline: rgba(0, 0, 0, 0.05);
  --opaque-button-border-intensity: -8;
  --elevate-1: rgba(0, 0, 0, 0.03);
  --elevate-2: rgba(0, 0, 0, 0.08);
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --border: 0 0% 91%;
  --card: 0 0% 98%;
  --card-foreground: 0 0% 9%;
  --card-border: 0 0% 94%;
  --sidebar: 0 0% 96%;
  --sidebar-foreground: 0 0% 9%;
  --sidebar-border: 0 0% 92%;
  --sidebar-primary: 4 100% 59%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 89%;
  --sidebar-accent-foreground: 0 0% 9%;
  --sidebar-ring: 4 100% 59%;
  --popover: 0 0% 95%;
  --popover-foreground: 0 0% 9%;
  --popover-border: 0 0% 91%;
  --primary: 4 100% 59%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 92%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 93%;
  --muted-foreground: 0 0% 40%;
  --accent: 220 14% 92%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84% 42%;
  --destructive-foreground: 0 0% 98%;
  --input: 0 0% 75%;
  --ring: 4 100% 59%;
  --chart-1: 221 83% 45%;
  --chart-2: 262 83% 48%;
  --chart-3: 173 58% 39%;
  --chart-4: 43 74% 49%;
  --chart-5: 27 87% 55%;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0);
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
  --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Fallback for older browsers */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(
    from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(
    from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(
    from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(
    from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(
    from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(
    from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(
    from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );
}

.dark {
  --button-outline: rgba(255, 255, 255, 0.1);
  --badge-outline: rgba(255, 255, 255, 0.05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);
  --background: 0 0% 5%;
  --foreground: 0 0% 98%;
  --border: 0 0% 14%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 98%;
  --card-border: 0 0% 13%;
  --sidebar: 0 0% 8%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 14%;
  --sidebar-primary: 4 100% 59%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-ring: 4 100% 59%;
  --popover: 0 0% 13%;
  --popover-foreground: 0 0% 98%;
  --popover-border: 0 0% 17%;
  --primary: 4 100% 59%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 19%;
  --muted-foreground: 0 0% 65%;
  --accent: 220 9% 17%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 84% 42%;
  --destructive-foreground: 0 0% 98%;
  --input: 0 0% 22%;
  --ring: 4 100% 59%;
  --chart-1: 221 83% 65%;
  --chart-2: 262 83% 68%;
  --chart-3: 173 58% 55%;
  --chart-4: 43 74% 65%;
  --chart-5: 27 87% 65%;
  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0);
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
  --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0);

  /* Fallback for older browsers */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(
    from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(
    from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(
    from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(
    from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(
    from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(
    from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(
    from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha
  );
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    user-select: none;
  }

  html, body, #root {
    height: 100%;
    overflow: hidden;
  }

  input, textarea, [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
  }
}

/* ---- Tapecast custom ---- */
@layer utilities {
  .safe-top { padding-top: env(safe-area-inset-top); }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .pb-safe { padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem); }

  .accent-red { color: #FF3B30; }
  .bg-accent-red { background-color: #FF3B30; }
  .bg-amber-rec { background-color: #FFB020; }

  /* Pulsing ring for active record */
  .record-pulse::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 59, 48, 0.55);
    animation: tapecast-pulse 1.6s ease-out infinite;
    pointer-events: none;
  }
  .record-pulse::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 59, 48, 0.35);
    animation: tapecast-pulse 1.6s ease-out 0.6s infinite;
    pointer-events: none;
  }
  @keyframes tapecast-pulse {
    0%   { transform: scale(0.9); opacity: 0.9; }
    80%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
  }

  @keyframes tapecast-blink {
    0%, 60% { opacity: 1; }
    61%, 100% { opacity: 0.25; }
  }
  .rec-dot { animation: tapecast-blink 1s steps(1, end) infinite; }

  /* Slide-up for sheets */
  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .anim-sheet { animation: sheet-up 240ms cubic-bezier(0.32, 0.72, 0, 1); }

  @keyframes snack-in {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .anim-snack { animation: snack-in 220ms cubic-bezier(0.32, 0.72, 0, 1); }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .anim-fade { animation: fade-in 180ms ease-out; }

  /* Touch-target helper */
  .tap-target { min-width: 48px; min-height: 48px; }

  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { scrollbar-width: none; }

  /* ============================================================ */
  /* POCKET-STUDIO — Teenage Engineering TP-7 design language     */
  /* Light aluminum body, monochrome LCD, single red lamp,        */
  /* minimal etched labels, soft chamfered edges.                 */
  /* ============================================================ */

  /* Page chassis — dark anodized aluminum body (TX-6 / TP-7 black) */
  .chassis {
    background: linear-gradient(180deg, #1c1c1e 0%, #131315 100%);
    color: #e2e2e5;
  }

  /* Aluminum panel — the device faceplate (slightly lifted) */
  .panel-metal {
    background: linear-gradient(180deg, #2a2a2d 0%, #1f1f22 100%);
    border: 1px solid rgba(0,0,0,0.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.5),
      0 1px 2px rgba(0,0,0,0.6);
  }

  /* Subtle engraved divider */
  .etch-line {
    height: 1px;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
  }

  /* Monochrome LCD display (TP-7 amber LCD) */
  .lcd-screen {
    background: #c8b896;
    color: #1a1308;
    font-family: 'SF Mono', Menlo, monospace;
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,0.4),
      inset 0 -1px 0 rgba(255,255,255,0.25),
      0 0 0 1px rgba(0,0,0,0.7),
      0 0 0 2px rgba(255,255,255,0.04);
    letter-spacing: 0.04em;
  }

  /* Small status lamp */
  .led-pill {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
  }
  .led-pill.on { background: #FF3B30; box-shadow: 0 0 6px rgba(255,59,48,0.8), inset 0 0 2px rgba(255,255,255,0.4); }
  .led-pill.on-amber { background: #FF8A00; box-shadow: 0 0 5px rgba(255,138,0,0.7); }
  .led-pill.on-green { background: #2BD46B; box-shadow: 0 0 5px rgba(43,212,107,0.6); }

  /* Big record lamp */
  .rec-lamp {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  }
  .rec-lamp.on {
    background: radial-gradient(circle at 35% 35%, #ff5547 0%, #ff3b30 50%, #c81d12 100%);
    box-shadow:
      0 0 14px rgba(255,59,48,0.8),
      0 0 3px rgba(255,59,48,0.9),
      inset 0 1px 1px rgba(255,255,255,0.4);
  }

  /* TX-6 style knob — small dark aluminum cap with white indicator dot */
  .knob {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #4a4a4d 0%, #2c2c2f 60%, #1c1c1e 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 1px rgba(0,0,0,0.5),
      0 1px 2px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.5);
  }
  .knob::after {
    /* indicator dot */
    content: '';
    position: absolute;
    top: 14%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    background: #f0f0f2;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(0,0,0,0.4);
  }

  /* PIONEER-SIZED VERTICAL FADER — large, easy to grab on mobile */
  .fader-rail {
    position: relative;
    width: 28px;
    height: 100%;
    border-radius: 4px;
    background:
      linear-gradient(180deg, #0a0a0b 0%, #141416 50%, #0a0a0b 100%);
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.8),
      inset 0 2px 3px rgba(0,0,0,0.9),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  }
  .fader-rail::before {
    /* center slot */
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 3px;
    margin-left: -1.5px;
    background: #000;
    border-radius: 2px;
    box-shadow: inset 0 0 2px rgba(0,0,0,1);
  }
  /* Tick marks on rail sides */
  .fader-rail::after {
    content: '';
    position: absolute;
    inset: 14px 4px;
    background-image:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 12.5%);
    pointer-events: none;
  }
  .fader-cap {
    position: absolute;
    left: -10px;
    width: 48px;
    height: 28px;
    border-radius: 4px;
    background:
      linear-gradient(180deg, #4a4a4d 0%, #38383b 48%, #1a1a1c 52%, #2a2a2d 100%);
    box-shadow:
      0 3px 6px rgba(0,0,0,0.7),
      0 1px 0 rgba(255,255,255,0.06),
      inset 0 1px 0 rgba(255,255,255,0.25),
      inset 0 -1px 0 rgba(0,0,0,0.5),
      inset 1px 0 0 rgba(255,255,255,0.08),
      inset -1px 0 0 rgba(0,0,0,0.5);
    cursor: grab;
  }
  .fader-cap::before {
    /* white centerline */
    content: '';
    position: absolute;
    left: 4px; right: 4px; top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #f0f0f2;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(255,255,255,0.4);
  }
  .fader-cap.accent::before {
    background: #FF3B30;
    box-shadow: 0 0 6px rgba(255,59,48,0.8);
  }
  .fader-cap.accent-amber::before {
    background: #FF8A00;
    box-shadow: 0 0 6px rgba(255,138,0,0.8);
  }

  /* Cue pad — dark aluminum key with corner lamp */
  .perf-pad {
    position: relative;
    border-radius: 5px;
    background: linear-gradient(180deg, #3a3a3d 0%, #28282b 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(0,0,0,0.5),
      0 1px 2px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.6);
    color: #e2e2e5;
    transition: transform 80ms, box-shadow 80ms;
  }
  .perf-pad:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 2px 3px rgba(0,0,0,0.5),
      0 0 0 1px rgba(0,0,0,0.6);
  }
  .perf-pad .pad-lamp {
    position: absolute;
    top: 5px; right: 5px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
  }
  .perf-pad.lit .pad-lamp {
    background: #FF3B30;
    box-shadow: 0 0 6px rgba(255,59,48,0.8);
  }
  .perf-pad.lit-amber .pad-lamp {
    background: #FF8A00;
    box-shadow: 0 0 6px rgba(255,138,0,0.8);
  }

  /* Hardware key — dark aluminum square */
  .hw-btn {
    position: relative;
    border-radius: 5px;
    background: linear-gradient(180deg, #3a3a3d 0%, #28282b 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.5),
      0 1px 2px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.6);
    color: #e2e2e5;
    transition: transform 70ms, box-shadow 70ms;
  }
  .hw-btn:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 2px 3px rgba(0,0,0,0.5),
      0 0 0 1px rgba(0,0,0,0.6);
  }
  .hw-btn.active {
    background: linear-gradient(180deg, #f0f0f2 0%, #c8c8cc 100%);
    color: #1a1a1c;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.9),
      inset 0 -1px 0 rgba(0,0,0,0.18),
      0 1px 2px rgba(0,0,0,0.5),
      0 0 0 1px rgba(0,0,0,0.6);
  }
  /* Orange illuminated key (the TX-6 record/select button) */
  .hw-btn.orange {
    background: linear-gradient(180deg, #ff8a3a 0%, #e25a14 100%);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -1px 0 rgba(0,0,0,0.3),
      0 0 14px rgba(255,90,20,0.55),
      0 1px 2px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.6);
  }

  /* Reel (the TP-7 motorized tape spool) */
  .reel {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #2c2c2f 0%, #1a1a1c 55%, #0e0e10 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -2px 4px rgba(0,0,0,0.5),
      0 3px 8px rgba(0,0,0,0.7),
      0 0 0 1px rgba(0,0,0,0.7);
  }
  .reel::before {
    content: '';
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
    pointer-events: none;
  }
  /* Center hub */
  .reel::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 24%; height: 24%;
    margin-top: -12%; margin-left: -12%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, transparent 16%, rgba(255,255,255,0.18) 17%, rgba(255,255,255,0.18) 21%, transparent 22%),
      linear-gradient(180deg, #4a4a4d 0%, #2a2a2d 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.5);
  }
  .reel.spinning { animation: reel-spin 3s linear infinite; }
  @keyframes reel-spin { to { transform: rotate(360deg); } }

  /* Etched label (small mono caps, printed on aluminum) */
  .etch {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: rgba(255,255,255,0.55);
  }
  .etch-strong { color: rgba(255,255,255,0.85); }

  /* VU meter — thin bar segments */
  .vu-seg {
    height: 4px;
    border-radius: 1px;
    background: rgba(255,255,255,0.06);
  }
  .vu-seg.on { background: #e0e0e3; }
  .vu-seg.on.warm { background: #FF8A00; box-shadow: 0 0 4px rgba(255,138,0,0.7); }
  .vu-seg.on.hot { background: #FF3B30; box-shadow: 0 0 4px rgba(255,59,48,0.7); }
}

/**
 * Using the elevate system.
 * Automatic contrast adjustment.
 *
 * <element className="hover-elevate" />
 * <element className="active-elevate-2" />
 *
 * // Using the tailwind utility when a data attribute is "on"
 * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
 * // Or manually controlling the toggle state
 * <element className="toggle-elevate toggle-elevated" />
 *
 * Elevation systems have to handle many states.
 * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
 * - toggled or not
 * - focused or not (this is not handled with these utilities)
 *
 * Even without handling focused or not, this is six possible combinations that
 * need to be distinguished from eachother visually.
 */
@layer utilities {
  /* Hide ugly search cancel button in Chrome until we can style it properly */
  input[type='search']::-webkit-search-cancel-button {
    @apply hidden;
  }

  /* Placeholder styling for contentEditable div */
  [contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
  }

  /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
   * buttons/badges can remove the automatic brightness adjustment on interactions
   * and program their own. */
  .no-default-hover-elevate {
  }

  .no-default-active-elevate {
  }

  /**
   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
   * This way they can stack/compound. Both will overlap the parent's borders!
   * So borders will be automatically adjusted both on toggle, and hover/active,
   * and they will be compounded.
   */
  .toggle-elevate::before,
  .toggle-elevate-2::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    /*border-radius: inherit;   match rounded corners */
    border-radius: inherit;
    z-index: -1;
    /* sits behind content but above backdrop */
  }

  .toggle-elevate.toggle-elevated::before {
    background-color: var(--elevate-2);
  }

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
  .border.toggle-elevate::before {
    inset: -1px;
  }

  /* Does not work on elements with overflow:hidden! */
  .hover-elevate:not(.no-default-hover-elevate),
  .active-elevate:not(.no-default-active-elevate),
  .hover-elevate-2:not(.no-default-hover-elevate),
  .active-elevate-2:not(.no-default-active-elevate) {
    position: relative;
    z-index: 0;
  }

  .hover-elevate:not(.no-default-hover-elevate)::after,
  .active-elevate:not(.no-default-active-elevate)::after,
  .hover-elevate-2:not(.no-default-hover-elevate)::after,
  .active-elevate-2:not(.no-default-active-elevate)::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    /*border-radius: inherit;   match rounded corners */
    border-radius: inherit;
    z-index: 999;
    /* sits in front of content */
  }

  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
  .active-elevate:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-1);
  }

  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
  .active-elevate-2:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-2);
  }

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
  .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
    inset: -1px;
  }
}
