/* ============================================================================
   EHDarkMuse — REFINEMENT LAYER  (perceived-quality pass, no functional change)
   Loads last, so it governs the scattered decisions below it.

   Implements ROI improvements:
     #2  One gold token (+ hover/dim)      → single source of truth for the accent
     #3  Broken white instead of pure #fff → text stops "vibrating"
     #4  Toolbar hierarchy (CSS side)      → GENERATE promoted, icons de-democratised
     #5  Radius scale (3) + elevation (3)  → corners & shadows rhyme
     #6  One status green/teal             → less chromatic noise
     #7  Motion scale (3 durations, 1 ease)→ the UI moves as one voice
     #8  Single focus signature            → every control answers the same way
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. THE SYSTEM — one place where the design language is defined
   --------------------------------------------------------------------------- */
:root {
  /* #2 — ACCENT: derived from a single base. Six golds → one ramp. */
  --gold-base: #C9A961;                                        /* the one gold  */
  --gold:      var(--gold-base);
  --gold2:     color-mix(in srgb, var(--gold-base) 82%, #fff); /* hover / bright */
  --gold3:     color-mix(in srgb, var(--gold-base) 66%, #fff); /* brightest     */
  --gold-dim:  color-mix(in srgb, var(--gold-base) 55%, #000); /* dim / border  */
  --gold-glow: color-mix(in srgb, var(--gold-base) 40%, transparent);

  /* #6 — STATUS: one success/active teal-green, one crimson. */
  --ok:        #46B98A;   /* was #4ac870 / #4ad0d8 / #6be3a8 → one value */
  --s1: var(--ok);  --s5: var(--ok);
  --active:    var(--ok);
  --danger:    #E05263;   /* aligned crimson for error/rage state */

  /* #3 — TEXT: broken white, never pure #fff. */
  --white-soft: #ECEAF2;  /* the "white" for text on dark */
  --text:  #ECEAF2;
  --text2: #B3AEBE;
  --text3: #857F90;

  /* #5 — RADII: three steps only. */
  --r-sm:   4px;    /* inputs, chips, small controls */
  --r-md:   8px;    /* buttons, cards, panels        */
  --r-pill: 999px;  /* pills, toggles, avatars       */

  /* #5 — ELEVATION: three shadows only. */
  --e1: 0 1px 2px rgba(0,0,0,.35);
  --e2: 0 6px 18px rgba(0,0,0,.45);
  --e3: 0 20px 56px rgba(0,0,0,.62);

  /* #7 — MOTION: three durations, one curve. */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.22,.61,.36,1);   /* one easing for the whole product */

  /* focus token */
  --focus-ring: var(--gold);
  --focus-glow: var(--gold-glow);
}

/* ---------------------------------------------------------------------------
   #7 — MOTION: unify the *easing* everywhere without touching durations.
   This is the safe half of the motion fix: distinct parts stop moving on
   slightly different curves, so the interface "settles" as one.
   --------------------------------------------------------------------------- */
*, *::before, *::after {
  transition-timing-function: var(--ease) !important;
  animation-timing-function: var(--ease) !important;
}

/* ---------------------------------------------------------------------------
   #8 — FOCUS: a single, unmistakable focus signature on every control.
   Clears the scattered per-component focus styles and replaces with one.
   --------------------------------------------------------------------------- */
:where(button, a, input, select, textarea, [role="button"], [role="tab"],
       [tabindex]):focus { outline: none; }        /* neutralise mouse focus */

:where(button, a, input, select, textarea, [role="button"], [role="tab"],
       [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-glow);
  border-radius: var(--r-sm);
  transition: box-shadow var(--dur-fast) var(--ease),
              outline-color var(--dur-fast) var(--ease);
}

/* ---------------------------------------------------------------------------
   #3 — BROKEN WHITE: catch inherited pure-white text.
   A soft, safe default; more-specific rules still win where intended.
   --------------------------------------------------------------------------- */
body { color: var(--white-soft); }

/* Explicit reclaims of the highest-visibility pure-white spots. */
.app-topbar, .topbar-right, .proj-input,
.atpm, .atp-panel, .modal, .dir-panel,
.settings-panel, .export-panel,
.ctx-menu, .cedit, .qa2 { color: var(--white-soft); }

/* ---------------------------------------------------------------------------
   #5 — RADII + ELEVATION: bring the component family under one grammar.
   --------------------------------------------------------------------------- */
button, .btn, .proj-chip, .ai-mode-tab, .qa2-btn,
input, select, textarea, .proj-input,
.atpm-action-btn, .ctx-item {
  border-radius: var(--r-sm);
}
.gen-btn, .card, .atpm-preset-card, .atpm-version-card, .atpm-idea-card,
.apm-em-card, .fr-em-card, .dir-card, .sr-card,
.panel, .genre-panel, .chord-panel { border-radius: var(--r-md); }

.proj-chip, .pill, .badge, .toggle, .vmode-btn { border-radius: var(--r-pill); }

/* one elevation language */
.card, .atpm-preset-card, .atpm-version-card, .atpm-idea-card,
.dir-card, .sr-card { box-shadow: var(--e1); }
.genre-panel, .chord-panel, .atp-panel, .ctx-menu,
.cedit, .qa2, .sug-panel { box-shadow: var(--e2); }
.modal, .dir-panel, .settings-panel, .export-panel,
.share-panel, .shortcuts-panel { box-shadow: var(--e3); }

/* ---------------------------------------------------------------------------
   #6 — ONE STATUS COLOUR: retire the stray greens/teals.
   Token-driven usage is caught by the --s1/--s5/--ok redefinition above;
   these reclaim the hard-coded remainder on visible chrome.
   --------------------------------------------------------------------------- */
.status-ready, .is-ready, .badge-ok, .sr-good,
[class*="ready"] .dot, .live-dot { color: var(--ok); }
.status-ready .dot, .is-ready .dot { background: var(--ok); }

/* ---------------------------------------------------------------------------
   #4 — TOOLBAR HIERARCHY (CSS side).
   (a) Promote GENERATE to the unambiguous primary action.
   (b) De-democratise the icon rail: secondary icons rest quieter, rise on hover.
   --------------------------------------------------------------------------- */

/* (a) GENERATE — the one thing that should dominate */
.gen-btn, #genMainBtn {
  background: linear-gradient(180deg,
              var(--gold2) 0%, var(--gold) 55%, var(--gold-dim) 100%) !important;
  color: #17130A !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  border: 1px solid var(--gold-dim) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--e1), 0 4px 18px var(--gold-glow) !important;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              filter var(--dur-fast) var(--ease) !important;
}
.gen-btn:hover, #genMainBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: var(--e2), 0 6px 26px var(--gold-glow) !important;
}
.gen-btn:active, #genMainBtn:active { transform: translateY(0); }

/* (b) icon rail — quiet at rest, legible on hover.
   Targets the real .btn-icon glyphs (nested inside group wrappers), so text
   toggles like EXPORT / DETAILS / Male-Female keep their own weight. */
.topbar-right .btn-icon {
  color: var(--text2);
  opacity: .82;
  transition: color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
  border-radius: var(--r-sm);
}
.topbar-right .btn-icon:hover {
  color: var(--gold);
  opacity: 1;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
/* the assistant toggle now lives ON the panel, not in the toolbar */

/* ---------------------------------------------------------------------------
   ASSISTANT PANEL — self-contained open/close.
   Close (×) always visible on the panel; collapsed state leaves a slim rail
   with a reopen chevron, so no toolbar button is needed.
   --------------------------------------------------------------------------- */
.ctx-close-x {
  position: absolute;
  top: 2px; right: 10px;
  z-index: 40;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.ctx-close-x:hover {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.ctx-panel.collapsed .ctx-close-x { display: none; }

/* keep the API KEY button clear of the corner close (×) in the status row */
.asst-key-btn { margin-right: 34px; }

/* collapsed → slim rail instead of width:0 (override the base rule) */
.ctx-panel.collapsed {
  width: 44px !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
  overflow: hidden;
}
.ctx-panel.collapsed > *:not(.ctx-reopen) { display: none !important; }

.ctx-reopen { display: none; }
.ctx-panel.collapsed .ctx-reopen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text2);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.ctx-panel.collapsed .ctx-reopen:hover {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.ctx-reopen-chev { font-size: 20px; line-height: 1; }
.ctx-reopen-lbl {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--text3);
  transition: color var(--dur-fast) var(--ease);
}
.ctx-panel.collapsed .ctx-reopen:hover .ctx-reopen-lbl { color: var(--gold); }

/* project-name edit buttons: quiet, consistent */
.proj-edit-btn { color: var(--text3); transition: color var(--dur-fast) var(--ease); }
.proj-edit-btn:hover { color: var(--gold); }

/* ---------------------------------------------------------------------------
   Icon normalisation styling (paired with ehdm-icon-refine.js)
   Inline SVGs inherit currentColor and sit on the baseline like text.
   --------------------------------------------------------------------------- */
.ehdm-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em; height: 1em;
  vertical-align: -0.14em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.apm-em-icon .ehdm-ico,
.fr-em-icon  .ehdm-ico { width: 1.5em; height: 1.5em; stroke-width: 1.6; }

/* ── Onboarding tour above the genre drawer ─────────────────────────────
   The genre panel + its overlay sit at z-index ~99500, far above the
   tour's default 10600. During the Blend / Vocals steps (which open that
   drawer) the tooltip would render behind it — buttons uncklickable, ring
   hidden. Lift the tooltip and highlight ring above the drawer so the tour
   stays interactive. The dim backdrop stays low so the open drawer reads
   fully lit — exactly what we want the user looking at. */
.alyx-ob-tooltip{ z-index:100000 !important; }
.alyx-ob-glow{ z-index:99998 !important; }