/* Chud — Hextech Relic · Chroma Studio + Announcer Studio.
   Tokens only (neon.css / themes.css), no raw hex, so all six themes and the
   light Tome theme follow for free.

   The Announcer Studio block lives here rather than in neon.css because the two
   Studio pages share one header/slot vocabulary; this sheet loads last, so the
   rules below win over the generic `.stu-*` defaults. */

/* ── page header: left gold rule, no card ─────────────────────────────────── */
.chroma-head {
  padding: 2px 0 2px 14px; margin-bottom: 14px;
  background: none; backdrop-filter: none;
  border: none; border-left: 2px solid var(--metal); border-radius: 0;
}
.chroma-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text);
}
.chroma-title .ci { width: 16px; height: 16px; display: inline-flex; color: var(--metal); }
.chroma-title .ci svg { width: 100%; height: 100%; }
.chroma-sub { margin-top: 3px; font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--sub); max-width: 640px; }

.chroma-grid { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .chroma-grid { grid-template-columns: 1fr; } }

.chroma-card { padding: 16px 18px; background: var(--panel); border: 1px solid var(--metal-faint); border-radius: 0; }
.chroma-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
/* The skin row closes the picker block off from the sliders. */
.chroma-row + .chroma-row { padding-bottom: 14px; border-bottom: 1px solid var(--metal-faint); }
.chroma-lbl { width: 78px; flex: none; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sub); }
/* These carried a `.input` class that doesn't exist in the design system, so
   the selects fell through to native OS chrome — a glaring white rectangle on
   every dark theme. */
.chroma-row select, .chroma-row input {
  flex: 1; min-width: 0;
  background: var(--inset); border: 1px solid var(--metal-faint); border-radius: 0;
  padding: 8px 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.chroma-row select:hover, .chroma-row input:hover { border-color: var(--metal-dim); }
.chroma-row select:focus, .chroma-row input:focus {
  border-color: var(--gem); box-shadow: 0 0 10px color-mix(in srgb, var(--gem) 30%, transparent);
}
.chroma-row select:disabled { opacity: .55; }
/* The popup list is OS-drawn and ignores the parent's colors. */
.chroma-row select option { background: var(--bg1); color: var(--text); }

.chroma-sliders { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.chroma-slide-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.chroma-val { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--gem); }
.chroma-range { width: 100%; appearance: none; height: 5px; border-radius: 0; outline: none;
  background: var(--inset); border: 1px solid var(--metal-faint); }
.chroma-range.hue { background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); }
/* Diamond thumb — the same rotated-square motif as the toggles and chip dots. */
.chroma-range::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; border-radius: 0;
  transform: rotate(45deg); background: var(--gem); border: 1px solid var(--metal); cursor: pointer;
  box-shadow: 0 0 8px color-mix(in srgb, var(--gem) 55%, transparent); }

.chroma-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* `.btn.ghost`/`.btn.sm` in neon.css out-specify a bare `.chroma-preset`, so the
   chip rules have to carry `.btn` too. */
.btn.chroma-preset {
  padding: 5px 11px; border-radius: 0; background: transparent;
  border: 1px solid var(--metal-faint); color: var(--sub);
  font-family: var(--font-mono); font-size: 9px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
}
.btn.chroma-preset:hover { background: transparent; border-color: var(--metal); color: var(--text); }
#chromaBuild { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; padding: 12px 0; border-radius: 0; }
.chroma-hint { margin-top: 10px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.6; text-align: left; color: var(--dim); }

.chroma-preview-card { padding: 16px 18px; }
.chroma-prev-h { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--metal); margin-bottom: 12px; }
.chroma-prev-h .muted { font-family: var(--font-mono); font-size: 8.5px; font-weight: 400; letter-spacing: .1em; color: var(--dim); }
.chroma-canvas-wrap { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 340px; border-radius: 0; background: var(--inset);
  border: 1px solid var(--metal-dim); overflow: hidden; }
.chroma-canvas-wrap canvas { max-width: 100%; max-height: 62vh; image-rendering: auto; display: block; }
.chroma-empty { padding: 40px 24px; text-align: center; font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--sub); }
.chroma-empty-sub { margin-top: 6px; font-family: var(--font-mono); font-style: normal; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim); opacity: 1; }

/* ── Announcer Studio ─────────────────────────────────────────────────────── */
.stu-head > div:first-child { border-left: 2px solid var(--metal); padding: 2px 0 2px 14px; }
.stu-head .section-label { font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; color: var(--text); }
.stu-tag { font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--sub); margin-top: 3px; }
.stu-bar { border-bottom: 1px solid var(--metal-faint); padding: 12px 0; }
.stu-name { background: var(--inset); border: 1px solid var(--metal-dim); border-radius: 0;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--text); padding: 9px 12px; width: 230px; }
.stu-name:focus { border-color: var(--gem); box-shadow: 0 0 10px color-mix(in srgb, var(--gem) 30%, transparent); }
.stu-count { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
#stuBuild { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; padding: 10px 18px; border-radius: 0; }
.stu-hint { background: var(--inset); border: 1px solid var(--metal-faint); border-radius: 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.7; color: var(--dim); padding: 9px 12px; }
.stu-cat-h { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .26em;
  color: var(--metal); margin-top: 6px; }

.stu-slot { padding: 10px 14px; border-radius: 0; background: var(--panel); border: 1px solid var(--metal-faint); }
.stu-slot.filled { border-color: color-mix(in srgb, var(--gem) 35%, transparent); background: color-mix(in srgb, var(--gem) 5%, var(--panel)); }
.stu-slot.milestone { opacity: .85; }
.stu-slot.drop { border-color: var(--gem); background: color-mix(in srgb, var(--gem) 10%, var(--panel)); }
.stu-slot-label { font-size: 13.5px; font-weight: 700; letter-spacing: .03em; }
.stu-ms { font-family: var(--font-mono); font-size: 8px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 0; padding: 1px 5px; }
.stu-slot-state { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: 3px; }
.stu-mini { background: var(--inset); border: 1px solid var(--metal-faint); border-radius: 0;
  color: var(--sub); font-size: 11px; padding: 5px 10px; }
.stu-mini.file { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.stu-mini:hover { border-color: var(--metal); color: var(--text); }
/* Recording is the one thing on this page that must catch the eye mid-take.
   `.app-idle` pauses it with everything else while the user is in a game. */
.stu-mini.rec { border-color: var(--bad); color: var(--bad); animation: stuRecPulse 1s ease-in-out infinite; }
.stu-mini.rec:hover { border-color: var(--bad); color: var(--bad); }
@keyframes stuRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }