/* ────────────────────────────────────────────────────────────────────
   rysup-tool-native-skin.css
   Hand-curated subset of /public/rysup-tool-skin.css, scoped under the
   `.rys-tool-native` wrapper so the rules ONLY apply inside the
   PitchShifter / SlowedReverb editor body — never the surrounding
   RysTool chrome (hero, FAQ, crosslinks, header, footer).

   Why we don't just load the full skin: it ships with bare `a`,
   `body`, `h1`, `[class*='hero']` selectors that were safe in the
   LiquidToolFrame iframe (where they only matched the tool's own
   document) but globally bleed onto the Hydrogen header + RysTool
   hero when loaded at the parent level (header links going red was
   the obvious tell).

   Goals of this file:
   - Make `.glass-background` / `.glass-panel` render as the cream
     neumorphic card (boxShadow + rounded corners), matching the
     iframe rendering byte-for-byte.
   - Flip the iframe-era `text-white` markup to dark text so it's
     legible on the cream page.
   - Force labels to Outfit (the actual loaded webfont — the legacy
     CSS asks for Roboto Condensed which never loads).
   - Tint slider thumbs with the per-tool accent + give them a grab
     cursor.
   - Force `.bg-accent` (used by pitch-shifter's play button) to the
     Rys accent red.

   Design tokens (--rys-*) come from /rysup-design-tokens.css which
   RysTool already loads at the route level.
   ────────────────────────────────────────────────────────────────── */

/* === Card surface ===========================================
   Translates the iframe's dark `glass-background` into the cream
   neumorphic card that the LiquidToolFrame skin produced. */
.rys-tool-native .glass-background,
.rys-tool-native .glass-panel,
.rys-tool-native .glass-card,
.rys-tool-native [class*='glass-'] {
  background: var(--rys-panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow:
    3px 3px 6px rgba(163, 156, 143, 0.30),
    -3px -3px 6px rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--rys-text) !important;
}

/* === Text colour translations ================================
   Iframe markup uses Tailwind's `text-white`, `text-white/60`,
   `text-white/70`, etc. Without skin those resolve to literal
   white text on a cream page = invisible. */
.rys-tool-native .text-white,
.rys-tool-native [class*='text-white'] {
  color: var(--rys-text) !important;
}
.rys-tool-native .text-white\/40,
.rys-tool-native [class*='text-white\\/40'],
.rys-tool-native .text-white\/50,
.rys-tool-native [class*='text-white\\/50'],
.rys-tool-native .text-white\/60,
.rys-tool-native [class*='text-white\\/60'],
.rys-tool-native .text-white\/70,
.rys-tool-native [class*='text-white\\/70'],
.rys-tool-native .text-white\/80,
.rys-tool-native [class*='text-white\\/80'] {
  color: var(--rys-text-muted) !important;
}

/* === Headings inside the editor ==============================
   Force Outfit (the actually-loaded webfont) so the slider labels
   render with weight + condensed feel even though their inline
   class asks for Roboto Condensed. Scoped so the RysTool hero
   shimmer (which lives outside .rys-tool-native) is untouched. */
.rys-tool-native h1,
.rys-tool-native h2,
.rys-tool-native h3,
.rys-tool-native h4 {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--rys-text);
}
.rys-tool-native .condensed {
  font-family: 'Outfit', system-ui, sans-serif !important;
}

/* === Brand-accent utility classes ============================
   Pitch-shifter's play button uses `bg-accent` — without skin
   that class is undefined. Map it to the Rys accent red. Also
   covers the Tailwind `accent-*` we use on `<input type=range>`
   for the live thumb tint. */
.rys-tool-native .bg-accent {
  background-color: var(--rys-accent, #ce2c2c) !important;
}
.rys-tool-native .text-accent {
  color: var(--rys-accent, #ce2c2c) !important;
}
.rys-tool-native .border-accent {
  border-color: var(--rys-accent, #ce2c2c) !important;
}

/* === Slider thumb interaction ================================
   Grab cursor + slightly bigger hover-shadow so the thumb feels
   draggable. The size + base shadow live in the per-tool CSS
   (rgba(139,92,246,0.3) for pitch-shifter, etc.). */
.rys-tool-native input[type='range'] {
  background: transparent !important;
}
.rys-tool-native input[type='range']::-webkit-slider-thumb {
  cursor: grab;
}
.rys-tool-native input[type='range']:active::-webkit-slider-thumb {
  cursor: grabbing !important;
}

/* === Upload overlay text ====================================
   The `Drop Music Here` / `Drop Audio Here` overlay was authored
   for a dark backdrop. Skin keeps the white text — but our
   text-white override above would flip it to dark, making it
   invisible on the dark `bg-black/40` overlay. Restore white
   inside the upload overlay specifically. */
.rys-tool-native #upload-overlay,
.rys-tool-native #upload-overlay * {
  color: #ffffff !important;
}

/* === Reset values that were rendering with UA button defaults
   The per-row `<button>` value pills picked up the default
   `border: 2px outset` because `bg-transparent` and `border-0`
   aren't in tailwind-static.css. Force them to plain text-button
   styling here (still keyboard focusable + clickable). */
.rys-tool-native button.rys-value-reset {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}
.rys-tool-native button.rys-value-reset:focus-visible {
  outline: 2px solid var(--rys-accent, #ce2c2c);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === Forced colours / a11y fallback ========================== */
@media (forced-colors: active) {
  .rys-tool-native .glass-background,
  .rys-tool-native .glass-panel,
  .rys-tool-native [class*='glass-'] {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
}