/* ==========================================================================
   AVH — Live Instrument module (guitar / bass / keys / drums)
   Shared by the Re-Performance Studio (solo) and the Collaboration Studio.
   Loaded after brand.css, so it reuses the :root tokens + .btn/.card/.pill.
   Class names match exactly what live-instrument.js emits.
   ========================================================================== */

.li {
  --li-meter-on: var(--accent-3);
  --li-meter-warn: #ffcf4d;
  --li-meter-hot: var(--danger);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(53, 194, 255, 0.06) 0%, rgba(0, 0, 0, 0) 55%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  color: var(--text);
  max-width: 720px;
}

/* ---- header --------------------------------------------------------------- */
.li-head { margin-bottom: 16px; }
.li-title { font-size: 1.12rem; font-weight: 700; letter-spacing: .2px; }
.li-sub { color: var(--text-dim); font-size: .88rem; margin-top: 3px; max-width: 560px; }

/* ---- generic row ---------------------------------------------------------- */
.li-row { margin-bottom: 15px; }
.li-label {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px;
}

/* ---- instrument picker ---------------------------------------------------- */
.li-instruments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.li-inst {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px 10px; border-radius: 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: .82rem; font-weight: 600; font-family: inherit;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.li-inst:hover { border-color: rgba(53, 194, 255, .5); transform: translateY(-1px); }
.li-inst .li-inst-ico { font-size: 1.5rem; line-height: 1; }
.li-inst.active {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(53, 194, 255, .16), rgba(53, 194, 255, .05));
  box-shadow: 0 0 0 3px rgba(53, 194, 255, .14);
}

/* ---- input device picker -------------------------------------------------- */
.li-input-pick { display: flex; gap: 8px; align-items: center; }
.li-select {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: #101319; color: var(--text);
  font-size: .92rem; font-family: inherit; cursor: pointer;
}
.li-select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(53, 194, 255, .15); }
.li-mini {
  padding: 10px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: .84rem; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s;
}
.li-mini:hover { border-color: var(--accent-2); background: #232833; }

/* ---- input meter ---------------------------------------------------------- */
.li-meter-wrap {
  display: flex; align-items: center; gap: 12px; margin-bottom: 15px;
  padding: 11px 14px; border-radius: 12px; background: #0c0e12; border: 1px solid var(--border);
}
.li-meter-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.li-meter { flex: 1; display: flex; gap: 3px; height: 14px; align-items: stretch; }
.li-meter i {
  flex: 1; border-radius: 3px; background: #232833;
  transition: background .06s linear, box-shadow .06s linear;
}
.li-meter i.on { background: var(--li-meter-on); box-shadow: 0 0 6px rgba(53, 255, 158, .5); }
/* top segments warm up with level (JS only toggles .on; colour is positional) */
.li-meter i:nth-child(9).on, .li-meter i:nth-child(10).on { background: var(--li-meter-warn); box-shadow: 0 0 6px rgba(255, 207, 77, .5); }
.li-meter i:nth-child(11).on, .li-meter i:nth-child(12).on { background: var(--li-meter-hot); box-shadow: 0 0 7px rgba(255, 77, 94, .6); }
.li-meter-val {
  font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--text-dim);
  min-width: 58px; text-align: right;
}

/* ---- toggles -------------------------------------------------------------- */
.li-toggles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.li-toggle { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text); cursor: pointer; }
.li-toggle input { width: 16px; height: 16px; accent-color: var(--accent-2); cursor: pointer; }

/* ---- transport ------------------------------------------------------------ */
.li-transport {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border);
  margin-bottom: 15px;
}
.li-rec {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border-radius: 10px; border: 1px solid rgba(255, 77, 94, .5);
  background: rgba(255, 77, 94, .14); color: #ffd7db; font-weight: 700; font-size: .92rem;
  font-family: inherit; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s;
}
.li-rec:hover:not(:disabled) { background: rgba(255, 77, 94, .24); }
.li-rec.recording {
  background: var(--danger); color: #fff; border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 77, 94, .2);
  animation: li-pulse 1.1s ease-in-out infinite;
}
.li-rec:disabled { opacity: .5; cursor: not-allowed; }
@keyframes li-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 77, 94, .2); } 50% { box-shadow: 0 0 0 9px rgba(255, 77, 94, .04); } }

.li-stop {
  padding: 11px 18px; border-radius: 10px; border: 1px solid var(--border);
  background: #232833; color: var(--text); font-weight: 600; font-size: .92rem;
  font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.li-stop:hover:not(:disabled) { border-color: var(--accent-2); }
.li-stop:disabled { opacity: .45; cursor: not-allowed; }

.li-timer { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; letter-spacing: .5px; }
.li-status { color: var(--text-dim); font-size: .86rem; margin-left: auto; }

/* ---- take preview --------------------------------------------------------- */
.li-take {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 15px;
  background: rgba(53, 255, 158, .06); border: 1px solid rgba(53, 255, 158, .3);
}
.li-take audio { flex: 1; min-width: 200px; height: 38px; }
.li-take-info { font-size: .84rem; color: var(--accent-3); font-weight: 600; }

/* ---- output mode (keep / blend) ------------------------------------------- */
.li-output { margin-bottom: 16px; }
.li-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.li-mode {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.li-mode:hover { border-color: rgba(53, 194, 255, .5); }
.li-mode.active {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(53, 194, 255, .14), rgba(53, 194, 255, .04));
  box-shadow: 0 0 0 3px rgba(53, 194, 255, .12);
}
.li-mode input { margin-top: 3px; accent-color: var(--accent-2); cursor: pointer; }
.li-mode span { display: flex; flex-direction: column; gap: 2px; }
.li-mode b { font-size: .9rem; font-weight: 700; }
.li-mode small { color: var(--text-dim); font-size: .78rem; line-height: 1.35; }

.li-blend {
  margin-top: 11px; padding: 12px 14px; border-radius: 12px;
  background: #0c0e12; border: 1px solid var(--border);
}
.li-blend label { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--text-dim); }
.li-blend input[type="range"] { flex: 1; accent-color: var(--accent-2); cursor: pointer; }
.li-blend span { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); min-width: 54px; text-align: right; }

/* ---- actions -------------------------------------------------------------- */
.li-actions { display: flex; justify-content: flex-end; }
.li-primary {
  padding: 12px 24px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-2), #2aa3e0);
  color: #05131c; font-weight: 800; font-size: .95rem; font-family: inherit;
  box-shadow: 0 8px 22px rgba(53, 194, 255, .28); transition: transform .12s, box-shadow .15s, filter .15s;
}
.li-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(53, 194, 255, .38); }
.li-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }

/* ---- error ---------------------------------------------------------------- */
.li-error {
  color: #ffb3bb; background: rgba(255, 77, 94, .1); border: 1px solid rgba(255, 77, 94, .35);
  border-radius: 10px; padding: 10px 12px; font-size: .86rem; margin-top: 12px;
}
.li-error:empty { display: none; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 560px) {
  .li-instruments { grid-template-columns: repeat(2, 1fr); }
  .li-modes { grid-template-columns: 1fr; }
  .li-status { margin-left: 0; width: 100%; }
}