/* Infin8-Artist Live Construct studio. Built on the Infin8 Neon UI kit (infin8-ui-tokens.css + infin8-ui.css):
   galaxy surface, glass panels with the neon edge, cyan for live/active, violet and magenta for creative accents.
   Responsive 360-1440 px; every control keeps a visible focus ring; reduced motion removes all animation. */

.artist-lab { margin: 0; min-height: 100vh; background-color: var(--i8-base); }
.artist-app { width: min(100%, 1440px); margin: 0 auto; padding: var(--i8-safe-t) var(--i8-safe-r) var(--i8-safe-b) var(--i8-safe-l); display: grid; gap: var(--i8-s3); }
.artist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--i8-s3); flex-wrap: wrap; }
.artist-head a { color: var(--i8-cyan); font-weight: 750; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: var(--i8-s2); }
.artist-head img { width: 36px; height: 36px; border-radius: 50%; }
.artist-head p { margin: 0; color: var(--i8-muted); font-size: var(--i8-fs-sm); }

/* ---- stage mount ---- */
.artist-stage-wrap { position: relative; height: clamp(170px, 30vh, 380px); border-radius: var(--i8-r-panel); overflow: hidden;
  background: radial-gradient(ellipse 60% 80% at 50% 110%, rgba(139, 92, 246, .35), transparent 70%), radial-gradient(ellipse 40% 60% at 50% 0%, rgba(77, 232, 255, .12), transparent 70%), #05060d;
  box-shadow: var(--i8-inset), var(--i8-shadow); border: 1px solid var(--i8-line); }
#artist-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.artist-stage-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--i8-s2); text-align: center; padding: var(--i8-s4); pointer-events: none; }
.artist-stage-fallback[hidden] { display: none; }
.artist-stage-fallback .as-ring { font: 900 clamp(64px, 12vw, 132px)/1 var(--i8-font-display); background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(77, 232, 255, .35)); }
.artist-stage-fallback p { margin: 0; color: var(--i8-text-soft); font-size: var(--i8-fs-sm); }
.artist-band { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--i8-s2); margin: 0; padding: 0; list-style: none; }
.artist-band li { padding: 4px 10px; border-radius: var(--i8-r-pill); border: 1px solid var(--i8-line); color: var(--i8-muted); font-size: var(--i8-fs-xs); font-weight: 750; letter-spacing: var(--i8-track); text-transform: uppercase; }
.artist-band li.is-on { border-color: var(--i8-cyan); color: var(--i8-text); box-shadow: var(--i8-glow-1); }
.artist-band li.is-hit { background: rgba(77, 232, 255, .18); }

/* ---- studio shell ---- */
.as-studio { display: grid; gap: var(--i8-s3); min-width: 0; }
.as-studio h2.i8-panel__title { margin: 0 0 var(--i8-s2); font-size: var(--i8-fs-md); }
.as-studio h3 { margin: var(--i8-s3) 0 var(--i8-s2); font-size: var(--i8-fs-sm); letter-spacing: var(--i8-track); text-transform: uppercase; color: var(--i8-text-soft); }
.as-studio p { margin: 0 0 var(--i8-s2); }
.as-main { display: grid; gap: var(--i8-s3); grid-template-columns: minmax(0, 1fr); align-items: start; }
.as-side { display: grid; gap: var(--i8-s3); min-width: 0; }
@media (min-width: 1100px) {
  .as-main { grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .as-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-side .as-browser { grid-column: 1 / -1; }
}
.as-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8-s2); }
.as-note { color: var(--i8-text-soft); font-size: var(--i8-fs-sm); }
.as-note--warn { color: var(--i8-warning); }
.as-hint { font-size: var(--i8-fs-xs); margin-top: var(--i8-s2); }
.as-field { display: inline-flex; align-items: center; gap: var(--i8-s2); color: var(--i8-text-soft); font-size: var(--i8-fs-sm); font-weight: 650; }
.as-num { width: 5.4em; }
.as-studio .i8-input { min-height: 40px; }

/* ---- top bar ---- */
.as-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8-s3) var(--i8-s4); padding: var(--i8-s3); }
.as-bar__brand { display: inline-flex; align-items: center; gap: var(--i8-s2); margin-right: auto; }
.as-bar__brand strong { display: block; font: 800 var(--i8-fs-md)/1.1 var(--i8-font-display); letter-spacing: .02em; }
.as-bar__brand small { display: block; color: var(--i8-muted); font-size: var(--i8-fs-xs); letter-spacing: var(--i8-track-wide); text-transform: uppercase; }
.as-mark { font: 900 30px/1 var(--i8-font-display); background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8-s2); }
.as-bar .i8-btn[aria-pressed="true"].i8-btn--live { animation: as-rec 1.2s ease-in-out infinite; }
.as-bar .i8-btn--ghost[aria-pressed="true"] { border-color: var(--i8-cyan); color: var(--i8-text); box-shadow: var(--i8-glow-1); background: rgba(77, 232, 255, .14); }
.as-pos { min-width: 4.2em; padding: 0 var(--i8-s3); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--i8-r-control);
  border: 1px solid var(--i8-line); background: rgba(5, 7, 14, .7); font: 800 var(--i8-fs-lg)/1 var(--i8-font-mono); color: var(--i8-cyan-bright); font-variant-numeric: tabular-nums; }
.as-oct { display: inline-flex; align-items: center; gap: var(--i8-s1); font-size: var(--i8-fs-sm); font-weight: 700; }
.as-title { width: min(16em, 100%); }
@keyframes as-rec { 50% { box-shadow: 0 0 22px rgba(255, 59, 85, .7); } }

/* ---- grid ---- */
.as-grid-panel { min-width: 0; }
.as-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--i8-s2); margin-bottom: var(--i8-s2); }
.as-grid-head .i8-panel__title { margin: 0; }
.as-scene-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8-s2); }
.as-scene-tools .i8-input:not(.as-num) { width: 9em; }
.as-grid-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--i8-s1); }
.as-grid { display: grid; gap: 6px; min-width: max-content; align-items: stretch; }
.as-corner { display: flex; align-items: end; padding: 4px 6px; font-size: var(--i8-fs-xs); }
.as-scene, .as-cell, .as-lane__name, .as-chip, .as-pad, .as-key { font: inherit; color: inherit; cursor: pointer; }
.as-scene { position: relative; overflow: hidden; display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 6px 10px; border-radius: var(--i8-r-control);
  border: 1px solid var(--i8-line); background: rgba(21, 26, 42, .75); }
.as-scene strong { font-size: var(--i8-fs-sm); text-transform: capitalize; }
.as-scene small { color: var(--i8-muted); font-size: var(--i8-fs-xs); }
.as-scene.is-selected { border-color: var(--i8-cyan); background: rgba(77, 232, 255, .12); }
.as-scene.is-playing { box-shadow: 0 0 0 1px var(--i8-violet), 0 0 16px rgba(139, 92, 246, .45); }
.as-playhead { position: absolute; top: 0; bottom: 0; left: var(--as-head, 0%); width: 2px; background: var(--i8-cyan-bright); box-shadow: 0 0 8px var(--i8-cyan); opacity: 0; }
.as-scene.is-playing .as-playhead { opacity: 1; }
.as-lane { display: grid; gap: 4px; align-content: center; padding: 6px 8px; border-radius: var(--i8-r-control); border: 1px solid transparent; background: rgba(9, 12, 22, .6); }
.as-lane.is-selected { border-color: rgba(77, 232, 255, .5); }
.as-lane__name { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; text-align: left; font-weight: 750; font-size: var(--i8-fs-sm); border-radius: var(--i8-r-compact); }
.as-glyph { color: var(--i8-cyan); width: 1.2em; text-align: center; }
.as-onstage { margin-left: auto; padding: 1px 6px; border-radius: var(--i8-r-pill); background: rgba(92, 230, 165, .14); color: var(--i8-success); font-size: 11px; font-weight: 750; white-space: nowrap; }
.as-lane__tools { display: flex; align-items: center; gap: 4px; }
.as-cell { position: relative; overflow: hidden; min-height: 66px; padding: 0; border-radius: var(--i8-r-control); border: 1px solid var(--i8-line);
  background: linear-gradient(160deg, rgba(47, 123, 255, .16), rgba(139, 92, 246, .14)), rgba(17, 22, 36, .85); }
.as-cell.is-empty { background: rgba(13, 17, 28, .6); border-style: dashed; border-color: var(--i8-line-soft); }
.as-cell:hover { border-color: var(--i8-purple-light); }
.as-cell.is-selected { border: 2px solid var(--i8-cyan); box-shadow: var(--i8-glow-2); }
.as-cell.is-armed { border: 2px solid var(--i8-live); box-shadow: 0 0 16px rgba(255, 59, 85, .5); }
.as-cell__art { position: absolute; inset: 6px 6px 18px; }
.as-cell__label { position: absolute; left: 6px; right: 6px; bottom: 3px; font-size: 11px; font-weight: 700; color: var(--i8-text-soft); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-dot { position: absolute; height: 4px; min-width: 3px; border-radius: 2px; background: var(--i8-cyan); box-shadow: 0 0 4px rgba(77, 232, 255, .6); }
.as-wave { position: absolute; top: 50%; width: 3%; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(var(--i8-magenta), var(--i8-violet)); }
.as-loopmark { position: absolute; inset: 0; display: grid; place-items: center; font: 900 26px/1 var(--i8-font-display); color: var(--i8-purple-light); }
.as-empty { padding: var(--i8-s5) var(--i8-s4); text-align: center; border-radius: var(--i8-r-control); border: 1px dashed var(--i8-line); }
.as-addlane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8-s2); margin-top: var(--i8-s3); }

/* ---- chips and meters ---- */
.as-chip { min-height: 36px; min-width: 36px; padding: 0 10px; border-radius: var(--i8-r-compact); border: 1px solid var(--i8-line); background: rgba(21, 26, 42, .9);
  font-size: var(--i8-fs-xs); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.as-chip:hover { border-color: var(--i8-purple-light); }
.as-chip[aria-pressed="true"], .as-chip.is-selected { border-color: var(--i8-cyan); background: rgba(77, 232, 255, .2); color: var(--i8-text); }
.as-chip--solo[aria-pressed="true"] { border-color: var(--i8-warning); background: rgba(255, 212, 121, .18); }
.as-meter { position: relative; display: inline-block; width: 58px; height: 6px; margin-left: auto; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.as-meter i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--as-level, 0)); background: linear-gradient(90deg, var(--i8-cyan), var(--i8-violet) 70%, var(--i8-magenta)); }
.as-meter--big { display: block; width: 100%; height: 12px; margin: var(--i8-s2) 0; }

/* ---- rig rack ---- */
.as-rack__head { display: flex; align-items: center; justify-content: space-between; gap: var(--i8-s2); flex-wrap: wrap; margin-bottom: var(--i8-s2); }
.as-rack__head .i8-panel__title { margin: 0; }
.as-chain { display: grid; gap: var(--i8-s2); margin: 0; padding: 0; list-style: none; counter-reset: slot; }
.as-chain__io { padding: 6px 10px; border-radius: var(--i8-r-compact); border: 1px dashed var(--i8-line); color: var(--i8-muted); font-size: var(--i8-fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: var(--i8-track); }
.as-slot { padding: var(--i8-s2) var(--i8-s3); border-radius: var(--i8-r-control); border: 1px solid var(--i8-line); background: rgba(9, 12, 24, .7); }
.as-slot.is-bypassed { opacity: .62; }
.as-slot__head { display: flex; align-items: center; gap: var(--i8-s2); margin-bottom: var(--i8-s1); }
.as-slot__head strong { font-size: var(--i8-fs-sm); }
.as-slot__head .as-chip { margin-left: auto; }
.as-params { display: grid; gap: 2px var(--i8-s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.as-param { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--i8-s2); font-size: var(--i8-fs-xs); color: var(--i8-text-soft); font-weight: 650; }
.as-param > span:first-child { grid-column: 1; }
.as-param .i8-slider, .as-param .i8-select { grid-column: 1 / -1; width: 100%; }
.as-param__val { grid-column: 2; grid-row: 1; color: var(--i8-cyan-bright); font-family: var(--i8-font-mono); font-size: 11px; }
.as-mix { display: grid; gap: var(--i8-s2); grid-template-columns: 1fr 1fr; margin-top: var(--i8-s3); }
.as-io { display: grid; gap: var(--i8-s2); margin-top: var(--i8-s3); }
.as-padsounds { margin-top: var(--i8-s2); }
.as-padpick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--i8-s2); }
.as-padpick__b { padding: 0; }
.as-rack > .i8-btn { margin-top: var(--i8-s3); }

/* ---- play surface ---- */
.as-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--i8-s2); touch-action: none; }
.as-pad { position: relative; display: grid; align-content: end; aspect-ratio: 1.15; min-height: 64px; padding: 6px 8px; border-radius: 12px; text-align: left;
  border: 1.5px solid rgba(77, 232, 255, .45); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(160deg, #1b2450, #11173a);
  box-shadow: var(--i8-inset), 0 6px 14px rgba(0, 0, 0, .4); user-select: none; -webkit-user-select: none; }
.as-pad small { position: absolute; top: 6px; left: 8px; color: var(--i8-muted); font-size: 11px; font-weight: 800; }
.as-pad span { font-size: var(--i8-fs-xs); font-weight: 750; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.as-pad.is-lit, .as-pad:active { border-color: var(--i8-cyan-bright); background: linear-gradient(160deg, #2d6cf0, #6b33e6); box-shadow: var(--i8-glow-3); }
.as-pads--key { margin-bottom: var(--i8-s3); }
.as-pads--key .as-pad { aspect-ratio: 1.6; }
.as-keys { --as-black-w: calc(100% / 14 * .62); position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); height: clamp(110px, 18vw, 150px); touch-action: none; user-select: none; -webkit-user-select: none; }
.as-key { position: relative; grid-row: 1; display: flex; align-items: end; justify-content: center; padding-bottom: 6px; border: 1px solid #2a3150; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #e9eefb, #c3cbe2); color: #111522; font-size: 11px; font-weight: 800; min-width: 0; }
.as-key--black { position: absolute; top: 0; z-index: 1; width: var(--as-black-w); height: 60%; background: linear-gradient(180deg, #2a3150, #0b0e1a); border-color: #05060d; }
.as-key.is-lit, .as-key:active { background: linear-gradient(180deg, var(--i8-cyan-bright), var(--i8-blue)); color: #fff; }
.as-key--black.is-lit, .as-key--black:active { background: linear-gradient(180deg, var(--i8-purple-light), var(--i8-violet)); }
.as-audio .as-row { margin-top: var(--i8-s2); }

/* ---- browser ---- */
.as-browser .i8-tabs { margin-bottom: var(--i8-s3); }
.as-filters { display: flex; flex-wrap: wrap; gap: var(--i8-s2); align-items: center; margin: var(--i8-s2) 0; }
.as-filters input[type="search"] { flex: 1 1 12em; }
.as-results { display: grid; gap: 4px; max-height: 340px; overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.as-result { display: flex; align-items: center; gap: var(--i8-s2); padding: 4px 6px 4px 10px; border-radius: var(--i8-r-compact); background: rgba(255, 255, 255, .03); }
.as-result__name { display: grid; min-width: 0; flex: 1; }
.as-result__name strong { font-size: var(--i8-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-result__name small { color: var(--i8-muted); font-size: 11px; }

/* ---- sheets and status ---- */
.as-advice { padding: var(--i8-s3); border-radius: var(--i8-r-control); border: 1px solid var(--i8-line); background: rgba(255, 255, 255, .03); }
.as-advice[data-level="tight"], .as-advice[data-level="playable"] { border-color: rgba(92, 230, 165, .6); }
.as-advice[data-level="high"], .as-advice[data-level="unknown"] { border-color: rgba(255, 212, 121, .6); }
.as-advice small { color: var(--i8-muted); }
.as-devices, .as-songs { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.as-status { margin: 0; min-height: 1.5em; padding: var(--i8-s2) var(--i8-s3); border-radius: var(--i8-r-control); background: rgba(9, 12, 24, .7); color: var(--i8-text-soft); font-size: var(--i8-fs-sm); }
.as-status[data-level="ok"] { color: var(--i8-success); }
.as-status[data-level="warning"] { color: var(--i8-warning); }
.as-status[data-level="error"] { color: var(--i8-danger); }
.as-status[data-level="live"] { color: #ff8b9c; }

/* ---- small screens ---- */
@media (max-width: 560px) {
  .as-bar { padding: var(--i8-s2); gap: var(--i8-s2); }
  .as-bar__brand { width: 100%; }
  .as-title { width: 100%; }
  .as-mix { grid-template-columns: 1fr; }
  .as-padpick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .as-params { grid-template-columns: 1fr 1fr; }
}

/* ---- reduced motion: state changes stay, movement goes ---- */
@media (prefers-reduced-motion: reduce) {
  .as-studio *, .artist-stage-wrap * { animation: none !important; transition: none !important; }
  .as-playhead { box-shadow: none; }
}