/* theme-patch.css — injected by aggregate-toys.mjs into effect pages (.wa-top).
   These pages ship their own chrome (theme-tokens.css from the wordart/pixart
   repos) which only covers default/brutalist/editorial/terminal/zen themes.
   This file layers glass / material / metro on top without touching those repos.

   Safe to load after theme-tokens.css — all rules use !important to win
   the specificity race against upstream styles. */

/* ─── CSS TOKENS ────────────────────────────────────────────────────────── */

html[data-theme="glass"] {
  --bg: linear-gradient(135deg, #e8f0fe 0%, #f3e5f5 40%, #e8f4e8 100%);
  --text: #1d1d1f;
  --border: rgba(255,255,255,0.45);
  --thumb: rgba(0,122,255,0.85);
  --accent: #007aff;
  --panel-bg: rgba(255,255,255,0.58);
  --panel-border: rgba(255,255,255,0.50);
  --panel-text: #1d1d1f;
  --panel-title-bg: rgba(240,240,250,0.70);
  --panel-title-text: rgba(60,60,67,0.45);
  --slider-track: rgba(180,200,240,0.30);
  --slider-fill: #007aff;
  --slider-knob: #ffffff;
  --input-bg: rgba(255,255,255,0.70);
  --input-border: rgba(255,255,255,0.50);
  --input-text: #1d1d1f;
  --button-bg: rgba(255,255,255,0.55);
  --button-text: #007aff;
  --button-bg-hover: #007aff;
  --button-text-hover: #ffffff;
  --chrome-text: #1d1d1f;
  color-scheme: light;
}

html[data-theme="material"] {
  --bg: #fffbfe;
  --text: #1c1b1f;
  --border: #cac4d0;
  --thumb: #6750a4;
  --accent: #6750a4;
  --panel-bg: color-mix(in srgb, #6750a4 4%, #fffbfe);
  --panel-border: #cac4d0;
  --panel-text: #1c1b1f;
  --panel-title-bg: transparent;
  --panel-title-text: #6750a4;
  --slider-track: color-mix(in srgb, #6750a4 20%, #e7e0ec);
  --slider-fill: #6750a4;
  --slider-knob: #6750a4;
  --input-bg: color-mix(in srgb, #6750a4 8%, #fffbfe);
  --input-border: #79747e;
  --input-text: #1c1b1f;
  --button-bg: #eaddff;
  --button-text: #21005d;
  --button-bg-hover: #d0bcff;
  --button-text-hover: #21005d;
  --chrome-text: #1c1b1f;
  color-scheme: light;
}

html[data-theme="metro"] {
  --bg: #f9f9f9;
  --text: #201f1e;
  --border: #d1d1d1;
  --thumb: #0078d4;
  --accent: #0078d4;
  --panel-bg: rgba(249,249,249,0.92);
  --panel-border: #d1d1d1;
  --panel-text: #201f1e;
  --panel-title-bg: transparent;
  --panel-title-text: #484644;
  --slider-track: #d1d1d1;
  --slider-fill: #0078d4;
  --slider-knob: #0078d4;
  --input-bg: #ffffff;
  --input-border: #8a8a8a;
  --input-text: #201f1e;
  --button-bg: #ffffff;
  --button-text: #201f1e;
  --button-bg-hover: rgba(0,120,212,0.08);
  --button-text-hover: #0078d4;
  --chrome-text: #201f1e;
  color-scheme: light;
}

/* ─── PAGE BACKGROUNDS ──────────────────────────────────────────────────── */

html[data-theme="glass"] body {
  background: linear-gradient(135deg, #e0eaff 0%, #f3e5f5 45%, #e0f5e0 100%) fixed !important;
  background-attachment: fixed !important;
}
html[data-theme="material"] body {
  background: #fffbfe !important;
}
html[data-theme="metro"] body {
  background: #f9f9f9 !important;
}

/* ─── RANGE INPUTS ───────────────────────────────────────────────────────── */

html[data-theme="glass"] input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: rgba(180,200,240,0.35); border-radius: 2px;
  outline: none; cursor: pointer;
}
html[data-theme="glass"] input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #ffffff; border: none;
  box-shadow: 0 2px 8px rgba(0,122,255,0.40), 0 1px 3px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
}
html[data-theme="glass"] input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.18); box-shadow: 0 4px 16px rgba(0,122,255,0.50);
}
html[data-theme="glass"] input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #ffffff; border: none;
}

html[data-theme="material"] input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: color-mix(in srgb, #6750a4 20%, #e7e0ec);
  border-radius: 2px; outline: none; cursor: pointer;
}
html[data-theme="material"] input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #6750a4; border: none;
  box-shadow: 0 1px 3px rgba(103,80,164,0.30); cursor: pointer;
  transition: transform 100ms cubic-bezier(0.05,0.7,0.1,1.0);
}
html[data-theme="material"] input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.25); background: color-mix(in srgb, #ffffff 8%, #6750a4);
}
html[data-theme="material"] input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(103,80,164,0.12);
}
html[data-theme="material"] input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #6750a4; border: none;
}

html[data-theme="metro"] input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 2px; background: #d1d1d1; border-radius: 0;
  outline: none; cursor: pointer;
}
html[data-theme="metro"] input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 2px;
  background: #0078d4; border: none; box-shadow: none; cursor: pointer;
  transition: background 83ms, transform 83ms;
}
html[data-theme="metro"] input[type=range]::-webkit-slider-thumb:hover {
  background: #106ebe; transform: scale(1.12);
}
html[data-theme="metro"] input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 2px;
  background: #0078d4; border: none;
}

/* ─── PANEL: .wg-body ────────────────────────────────────────────────────── */

html[data-theme="glass"] .wg-body {
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  border-radius: 18px !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 0.5px 0 rgba(255,255,255,0.85) !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}
html[data-theme="material"] .wg-body {
  background: color-mix(in srgb, #6750a4 4%, #fffbfe) !important;
  border: 1px solid #cac4d0 !important;
  border-radius: 12px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  margin-bottom: 8px !important;
}
html[data-theme="metro"] .wg-body {
  background: rgba(249,249,249,0.92) !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 4px !important;
  backdrop-filter: saturate(120%) blur(40px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(40px) !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  margin-bottom: 4px !important;
}

/* ─── PANEL SECTION HEADERS: .wg-head ────────────────────────────────────── */

html[data-theme="glass"] .wg-head {
  font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: rgba(60,60,67,0.45) !important;
  padding: 4px 4px 8px !important;
  border-bottom: 1px solid rgba(200,210,240,0.30) !important;
  margin-bottom: 8px !important;
}
html[data-theme="material"] .wg-head {
  font-family: "Google Sans", "Roboto Flex", Roboto, system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: #6750a4 !important;
  padding: 8px 16px 6px !important;
  border-bottom: 1px solid #e7e0ec !important;
  margin-bottom: 0 !important;
}
html[data-theme="metro"] .wg-head {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.03em !important; text-transform: uppercase !important;
  color: #484644 !important;
  padding: 6px 12px 4px !important;
  border-bottom: 1px solid #d1d1d1 !important;
  margin-bottom: 0 !important;
}

/* ─── CONTROL ROWS: .wg-row ───────────────────────────────────────────────── */

html[data-theme="glass"] .wg-row {
  display: flex !important; align-items: center !important;
  min-height: 28px !important; padding: 4px 4px !important;
  gap: 10px !important; border-radius: 8px !important;
  transition: background 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
html[data-theme="glass"] .wg-row:hover {
  background: rgba(255,255,255,0.38) !important;
}
html[data-theme="material"] .wg-row {
  display: flex !important; align-items: center !important;
  min-height: 48px !important; padding: 4px 16px !important;
  gap: 16px !important; border-radius: 0 !important;
  position: relative !important; overflow: hidden !important;
}
html[data-theme="material"] .wg-row::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: currentColor !important; opacity: 0 !important;
  border-radius: inherit !important;
  transition: opacity 100ms !important;
  pointer-events: none !important;
}
html[data-theme="material"] .wg-row:hover::after { opacity: 0.08 !important; }
html[data-theme="metro"] .wg-row {
  display: flex !important; align-items: center !important;
  min-height: 32px !important; padding: 2px 12px !important;
  gap: 8px !important; border-radius: 0 !important;
  border-bottom: 1px solid #edebe9 !important;
  transition: background 83ms !important;
}
html[data-theme="metro"] .wg-row:hover { background: rgba(0,120,212,0.04) !important; }
html[data-theme="metro"] .wg-row:last-child { border-bottom: none !important; }

/* ─── ROW LABELS: .wg-name and .wg-label ─────────────────────────────────── */

html[data-theme="glass"] .wg-name,
html[data-theme="glass"] .wg-label {
  font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: rgba(60,60,67,0.80) !important;
  flex-shrink: 0 !important; min-width: 68px !important;
}
html[data-theme="material"] .wg-name,
html[data-theme="material"] .wg-label {
  font-family: "Roboto Flex", Roboto, system-ui, sans-serif !important;
  font-size: 14px !important; font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: #1c1b1f !important;
  flex-shrink: 0 !important; min-width: 80px !important;
}
html[data-theme="metro"] .wg-name,
html[data-theme="metro"] .wg-label {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #201f1e !important;
  flex-shrink: 0 !important; min-width: 72px !important;
}

/* ─── CUSTOM SLIDER TRACK + FILL: .wg-track / .wg-fill ──────────────────── */

html[data-theme="glass"] .wg-track {
  background: rgba(180,200,240,0.30) !important;
  border-radius: 3px !important; height: 4px !important;
}
html[data-theme="glass"] .wg-fill {
  background: linear-gradient(90deg, #007aff, #34c759) !important;
  border-radius: 3px !important;
  transition: width 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}

html[data-theme="material"] .wg-track {
  background: color-mix(in srgb, #6750a4 20%, #e7e0ec) !important;
  border-radius: 2px !important; height: 4px !important;
}
html[data-theme="material"] .wg-fill {
  background: #6750a4 !important;
  border-radius: 2px !important;
  transition: width 200ms cubic-bezier(0.05,0.7,0.1,1.0) !important;
}

html[data-theme="metro"] .wg-track {
  background: #d1d1d1 !important;
  border-radius: 0 !important; height: 2px !important;
}
html[data-theme="metro"] .wg-fill {
  background: #0078d4 !important;
  border-radius: 0 !important;
  transition: width 167ms !important;
}

/* ─── COLOR SWATCH: .wg-swatch ──────────────────────────────────────────── */

html[data-theme="glass"] .wg-swatch {
  border-radius: 10px !important;
  border: 2px solid rgba(255,255,255,0.60) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
}
html[data-theme="material"] .wg-swatch {
  border-radius: 50% !important;
  border: 2px solid #cac4d0 !important;
  overflow: hidden !important;
}
html[data-theme="metro"] .wg-swatch {
  border-radius: 4px !important;
  border: 1px solid #8a8a8a !important;
  overflow: hidden !important;
}

/* ─── CANVAS STAGE: .wa-stage ───────────────────────────────────────────── */

html[data-theme="glass"] .wa-stage {
  background: rgba(230,235,255,0.30) !important;
}
html[data-theme="material"] .wa-stage {
  background: color-mix(in srgb, #6750a4 3%, #f3edf7) !important;
}
html[data-theme="metro"] .wa-stage {
  background: #f9f9f9 !important;
}

/* ─── ASIDE PANEL: .wg ──────────────────────────────────────────────────── */

html[data-theme="glass"] .wg {
  background: rgba(242,242,247,0.70) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-left: 0.5px solid rgba(255,255,255,0.50) !important;
}
html[data-theme="material"] .wg {
  background: color-mix(in srgb, #6750a4 4%, #fffbfe) !important;
  border-left: 1px solid #cac4d0 !important;
}
html[data-theme="metro"] .wg {
  background: rgba(249,249,249,0.95) !important;
  backdrop-filter: saturate(120%) blur(40px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(40px) !important;
  border-left: 1px solid #d1d1d1 !important;
}

/* ─── HEADER BAR OVERRIDES for .wa-top ─────────────────────────────────── */
/* Effect pages use .wa-top as their own top bar. */

html[data-theme="glass"] .wa-top {
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 0.5px 0 rgba(0,0,0,0.08) !important;
}
html[data-theme="material"] .wa-top {
  background: color-mix(in srgb, #6750a4 5%, #fffbfe) !important;
  border-bottom: 1px solid #cac4d0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
html[data-theme="metro"] .wa-top {
  background: rgba(243,242,241,0.95) !important;
  backdrop-filter: saturate(120%) blur(40px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(40px) !important;
  border-bottom: 1px solid #d1d1d1 !important;
  box-shadow: none !important;
}

/* ─── TYPOGRAPHY overrides ─────────────────────────────────────────────── */

html[data-theme="glass"] body,
html[data-theme="glass"] button,
html[data-theme="glass"] input,
html[data-theme="glass"] select {
  font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif !important;
}
html[data-theme="material"] body,
html[data-theme="material"] button,
html[data-theme="material"] input,
html[data-theme="material"] select {
  font-family: "Roboto Flex", Roboto, "Google Sans", system-ui, sans-serif !important;
}
html[data-theme="metro"] body,
html[data-theme="metro"] button,
html[data-theme="metro"] input,
html[data-theme="metro"] select {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif !important;
}

/* ─── BUTTON overrides ─────────────────────────────────────────────────── */

html[data-theme="glass"] button:not(.theme-switcher-pill) {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(8px) !important;
  color: #007aff !important;
  font-weight: 600 !important;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
html[data-theme="glass"] button:not(.theme-switcher-pill):hover {
  transform: scale(1.04) !important;
  box-shadow: 0 4px 16px rgba(0,122,255,0.20) !important;
}

html[data-theme="material"] button:not(.theme-switcher-pill) {
  border-radius: 20px !important;
  background: transparent !important;
  border: 1px solid #cac4d0 !important;
  color: #6750a4 !important;
  font-family: "Roboto Flex", Roboto, system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: background 100ms cubic-bezier(0.05,0.7,0.1,1.0) !important;
}
html[data-theme="material"] button:not(.theme-switcher-pill):hover {
  background: rgba(103,80,164,0.08) !important;
}

html[data-theme="metro"] button:not(.theme-switcher-pill) {
  border-radius: 2px !important;
  background: #ffffff !important;
  border: 1px solid #8a8a8a !important;
  color: #201f1e !important;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 400 !important;
  transition: background 83ms, border-color 83ms !important;
}
html[data-theme="metro"] button:not(.theme-switcher-pill):hover {
  border-color: #0078d4 !important;
  color: #0078d4 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4 — STRUCTURAL LAYOUT (position / geometry per theme)
   Appended after appearance rules. All rules use !important to win over
   upstream theme-tokens.css specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GLASS: iOS/macOS HIG structural layout ─────────────────────────────── */

/* Pill top bar */
html[data-theme="glass"] .wa-top {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 580px !important;
  border-radius: 40px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  z-index: 200 !important;
}

/* Body offset so content clears the floating pill */
html[data-theme="glass"] body {
  padding-top: 64px !important;
}

/* Stage fills remaining flex space */
html[data-theme="glass"] .wa-stage {
  flex: 1 !important;
}

/* Controls panel — mobile: bottom sheet */
@media (max-width: 767px) {
  html[data-theme="glass"] .wg {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 62vh !important;
    overflow-y: auto !important;
    border-radius: 24px 24px 0 0 !important;
    border-left: none !important;
    border-top: 0.5px solid rgba(255,255,255,0.50) !important;
    z-index: 150 !important;
  }
}

/* ── MATERIAL: M3 structural layout ─────────────────────────────────────── */

/* Full-width sticky top app bar */
html[data-theme="material"] .wa-top {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  height: 64px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 200 !important;
}

/* Nav drawer on LEFT — desktop only */
@media (min-width: 768px) {
  html[data-theme="material"] .wg {
    order: -1 !important;
    border-left: none !important;
    border-right: 1px solid #cac4d0 !important;
    width: 280px !important;
    min-width: 280px !important;
  }
}

/* ── Glass/Material/Metro .wa-bottom footer overrides ─────────────────────── */

html[data-theme="glass"] .wa-bottom {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-top: 0.5px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 -0.5px 0 rgba(0,0,0,0.06) !important;
  color: #3c3c43 !important;
}
html[data-theme="glass"] .wa-bottom a { color: #007aff !important; }
html[data-theme="glass"] .wa-bottom .current { color: #1d1d1f !important; }

html[data-theme="material"] .wa-bottom {
  background: color-mix(in srgb, #6750a4 3%, #fffbfe) !important;
  border-top: 1px solid #cac4d0 !important;
  color: #49454f !important;
}
html[data-theme="material"] .wa-bottom a { color: #6750a4 !important; }
html[data-theme="material"] .wa-bottom .current { color: #1c1b1f !important; }

html[data-theme="metro"] .wa-bottom {
  background: rgba(249,249,249,0.97) !important;
  border-top: 1px solid #d1d1d1 !important;
  backdrop-filter: saturate(120%) blur(40px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(40px) !important;
  color: #605e5c !important;
}
html[data-theme="metro"] .wa-bottom a { color: #0078d4 !important; }
html[data-theme="metro"] .wa-bottom .current { color: #201f1e !important; }

/* AEO row — monospace, same sizing as sister row */
.wa-bottom .row.aeo {
  font-family: var(--kami-font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* ── METRO: Fluent 2 structural layout ───────────────────────────────────── */

/* Compact sticky command bar */
html[data-theme="metro"] .wa-top {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  height: 44px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 200 !important;
}

/* Controls panel — right side, full viewport height below command bar */
html[data-theme="metro"] .wg {
  position: sticky !important;
  top: 44px !important;
  height: calc(100vh - 44px) !important;
  overflow-y: auto !important;
}