/* Artist core theme: essential colors/typography and light UI polish. */
:root {
  --color-bg: #0b0f19;
  --color-surface: rgba(17, 24, 39, 0.75);
  --color-text: #f1f5f9;
  --color-text-dim: #94a3b8;
  --color-primary: #9b5cff; /* purple */
  --color-accent: #22d3ee;  /* cyan */
  --color-danger: #fb7185;
  --radius-12: 12px;
  /* Aliases for shared tokens used throughout components */
  --surface: var(--color-surface);
  --muted: var(--color-text-dim);
  --border: rgba(148,163,184,0.30);
}

/* Inline keyboard shortcut hints next to action buttons */
.shortcut-hint {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.75em;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}

/* Ensure label spans don’t inherit dim text color */
.floating-nav .menu-button .label,
.submenu .submenu-link .label {
  color: inherit !important;
  opacity: 1 !important;
}

/* Typography & basic spacing */
:where(h1,h2,h3) { letter-spacing: -0.01em; }
:where(h1) { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
:where(h2) { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }

/* Links use a variable so components can opt-out of accent blue */
a, a:link, a:visited { color: var(--link-color, var(--color-accent)); }
a:hover { color: var(--link-color-hover, #7dd3fc); }

/* Inputs */
input, textarea, select {
  background: rgba(2,6,23,0.5);
  border: 1px solid rgba(148,163,184,0.2);
  color: var(--color-text);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in oklab, var(--color-accent) 60%, white 40%);
  outline-offset: 2px;
}

/* Section title underline */
.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  border-radius: 3px;
}

/* Subtle improvements for tools/search */
.searchbar .input {
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(148,163,184,0.30);
  color: #eaf2ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.searchbar .input::placeholder { color: #cbd5e1; opacity: 0.9; }
.searchbar .input:focus {
  outline: 2px solid color-mix(in oklab, #60a5fa 70%, white 30%);
  outline-offset: 2px;
}

/* Tools index: sidebar + filters (lightweight without blur) */
#tools-tags {
  background: rgba(15,23,42,0.75) !important;
  border: 1px solid rgba(148,163,184,0.26) !important;
  border-radius: 12px !important;
}
#tools-tags summary { color: #eaf2ff !important; }
#tools-tags .tags-body label {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(148,163,184,0.26) !important;
  border-radius: 999px !important;
  color: #eaf2ff !important;
}
#tools-tags .tags-body label:hover {
  border-color: rgba(96,165,250,0.45) !important;
}
#tools-tags input[type="checkbox"] { accent-color: #60a5fa; }

/* Category select on Tools index */
#tools-category {
  background: rgba(15,23,42,0.75) !important;
  color: #eaf2ff !important;
  border: 1px solid rgba(148,163,184,0.30) !important;
}
#tools-category:hover { border-color: rgba(96,165,250,0.45) !important; }
#tools-category:focus {
  outline: 2px solid color-mix(in oklab, #60a5fa 70%, white 30%);
  outline-offset: 2px;
}

/* Language select in header (no heavy blur) */
.floating-nav .lang-menu .select {
  background: linear-gradient(180deg, rgba(15,23,42,0.70), rgba(15,23,42,0.56));
  border: 1px solid rgba(148,163,184,0.34);
  color: #ffffff;
  padding: 6px 10px; border-radius: 10px;
}
.floating-nav .lang-menu .select:hover {
  border-color: rgba(96,165,250,0.55);
}
.floating-nav .lang-menu .select:focus {
  outline: 2px solid color-mix(in oklab, #60a5fa 70%, white 30%);
  outline-offset: 2px;
}
.floating-nav .lang-menu .select option,
.floating-nav .lang-menu .select optgroup {
  background: #0b1220; color: #eaf2ff;
}
.floating-nav .lang-menu .select option:checked { background-color: #2563eb; color: #fff; }
.floating-nav .lang-menu .select option:hover { background-color: #1f2a3a; color: #fff; }

/* Mobile adjustments */
@media (max-width: 860px) {
  #tool-actions { top: calc(56px + 8px); }
  #tool-split [data-pane="left"],
  #tool-split [data-pane="right"] { min-height: 36vh; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .floating-nav .chip,
  .floating-nav .menu-button.chip,
  #main-menu-panel .submenu-link {
    transition: none !important;
  }
}