/* ============================================================
   audiostudio.css -- ETH0 // AUDIO styling (self-contained .as-*)
   ============================================================
   Theme-matched to NULLBYTE (green/amber, mono) and scoped entirely under
   .as-module, which js/modes/audiostudio.js adds to the window body it is
   handed. Nothing here leaks out and nothing outside can reach in.

   Sizing is container-driven, not viewport-driven: this renders inside a
   GHOST window the player can resize to a phone-narrow strip, so the
   tuning grid and the transport both wrap instead of overflowing.
   ============================================================ */
.as-module {
  --as-bg: #080a0c;
  --as-panel: #0d1117;
  --as-border: #222a22;
  --as-fg: #c0c0c0;
  --as-fg-dim: #777;
  /* Follows the player's theme: the theme maker sets --fg. */
  --as-accent: var(--fg, #00ff66);
  /* Does NOT follow the host. `--amber` means two different things in the
     two places this studio runs: in the standalone page it is an amber
     (#ffb84d), but inside GHOST css/desktop.css maps it to --nos-warn,
     which is #ff5d5d -- a red. Inheriting it painted the selected editor
     row and the tuning notice as alarms. Selection and "your tuning is off
     neutral" are states to notice, not errors, so the colour is pinned. */
  --as-amber: #ffb000;

  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--as-fg);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Every control here is width:100% inside a grid track, and the game's
   global stylesheet does not set this. Without it a padded, bordered
   input is 100% PLUS 10px and overflows its column -- which is exactly
   how the NOTE field ended up printed over the HZ reading. */
.as-module, .as-module *, .as-module *::before, .as-module *::after {
  box-sizing: border-box;
}

.as-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  min-width: 0;
}

/* ---- greeting banner ---- */
.as-banner {
  background: var(--as-panel);
  border: 1px solid var(--as-border);
  border-left: 2px solid var(--as-accent);
  padding: 7px 10px;
  font-size: 12px;
  /* The handle is up to 16 chars and the line is one sentence; let it wrap
     rather than ellipsis it away in a narrow window. */
  overflow-wrap: anywhere;
}
.as-banner .as-slash { color: var(--as-accent); font-weight: bold; }
.as-banner .as-operator { color: var(--as-accent); }

/* ---- oscilloscope ---- */
.as-scope-wrap {
  position: relative;
  height: 130px;
  min-height: 90px;
  background: #05070a;
  border: 1px solid var(--as-border);
  overflow: hidden;
}
.as-scope { display: block; width: 100%; height: 100%; }
.as-hud {
  position: absolute;
  left: 8px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  pointer-events: none;
}
.as-hud-badge {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--as-border);
  color: var(--as-accent);
  padding: 1px 5px;
  letter-spacing: 1px;
}
.as-hud-note { color: var(--as-fg); text-shadow: 0 0 4px #000; }

/* ---- transport ---- */
.as-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.as-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--as-fg-dim);
  white-space: nowrap;
}
.as-meta strong { color: var(--as-accent); }

.as-btn {
  background: #11161c;
  border: 1px solid var(--as-border);
  color: var(--as-fg);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  cursor: pointer;
}
.as-btn:hover { border-color: var(--as-accent); color: var(--as-accent); }
.as-btn:active { transform: translateY(1px); }
.as-btn.is-active { color: var(--as-accent); border-color: var(--as-accent); }
.as-play { color: var(--as-accent); border-color: var(--as-accent); }

/* ---- progress ---- */
.as-progress {
  height: 4px;
  background: #11161c;
  border: 1px solid var(--as-border);
  overflow: hidden;
}
.as-progress-fill {
  height: 100%;
  width: 0;
  background: var(--as-accent);
  box-shadow: 0 0 6px var(--as-accent);
  transition: width 80ms linear;
}

/* ---- track name ---- */
.as-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.as-label { font-size: 10px; color: var(--as-fg-dim); letter-spacing: 1px; }
.as-title-input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--as-panel);
  border: 1px solid var(--as-border);
  color: var(--as-fg);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 7px;
  outline: none;
}
.as-title-input:focus { border-color: var(--as-accent); }

/* ---- presets ---- */
.as-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chip {
  background: #11161c;
  border: 1px solid var(--as-border);
  color: var(--as-fg-dim);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}
.as-chip:hover { color: var(--as-fg); border-color: var(--as-accent); }
.as-chip.is-active { color: var(--as-accent); border-color: var(--as-accent); }

/* ---- tuning ---- */
.as-tuning {
  display: grid;
  /* auto-fit, not three fixed columns: in a narrow window these stack. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.as-tune {
  background: var(--as-panel);
  border: 1px solid var(--as-border);
  padding: 6px 8px;
}
.as-tune-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--as-fg-dim);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.as-tune-head strong { color: var(--as-accent); }
.as-range { width: 100%; accent-color: var(--as-accent); }

/* ---- code output ---- */
.as-code-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.as-code-title {
  font-size: 11px;
  color: var(--as-accent);
  letter-spacing: 0.5px;
}
.as-code-btns { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.as-code {
  margin: 0;
  background: #05070a;
  border: 1px solid var(--as-border);
  color: var(--as-fg);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.45;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
  white-space: pre;
  /* Long enough to be worth selecting by hand when a clipboard write is
     refused -- see legacyCopy() in the module. */
  user-select: text;
}
.as-note {
  margin: 0;
  font-size: 10px;
  color: var(--as-fg-dim);
  line-height: 1.5;
}
.as-note strong { color: var(--as-accent); }

/* ---- tabs ---- */
.as-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.as-tab {
  flex: 1 1 auto;
  min-width: 64px;
  background: #11161c;
  border: 1px solid var(--as-border);
  border-bottom-width: 2px;
  color: var(--as-fg-dim);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 4px;
  cursor: pointer;
}
.as-tab:hover { color: var(--as-fg); }
.as-tab.is-active {
  color: var(--as-accent);
  border-color: var(--as-border);
  border-bottom-color: var(--as-accent);
  background: #0d1117;
}

.as-pane { display: flex; flex-direction: column; gap: 10px; }
/* A class rule beats the browser's own [hidden] rule, so the panes would
   all stay on screen at once. Re-assert it; the module toggles the
   attribute, not a class. */
.as-pane[hidden] { display: none; }

/* ---- tuning notice ----
   Only on screen while the tuning is off neutral. Amber, not green: it is
   a state the player should notice and be able to leave, not a feature. */
.as-tuning-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: rgba(255, 176, 0, 0.08);
  border: 1px solid var(--as-amber);
  border-left-width: 3px;
  padding: 6px 8px;
  font-size: 10px;
  color: var(--as-fg-dim);
}
/* A class rule out-specifies the browser's own [hidden], so without this
   the notice would sit there permanently while the module believes it is
   closed -- the same trap the import panel fell into. */
.as-tuning-note[hidden] { display: none; }
.as-tuning-what {
  color: var(--as-amber);
  font-weight: bold;
  letter-spacing: 0.5px;
}
.as-tuning-why { flex: 1 1 160px; min-width: 0; }
.as-tuning-acts { display: flex; gap: 4px; margin-left: auto; }
.as-tuning-acts .as-btn { padding: 4px 8px; }
.as-tuning-reset:hover, .as-tuning-bake:hover {
  border-color: var(--as-amber);
  color: var(--as-amber);
}

/* The RESTORE DEFAULTS row above the sliders. */
.as-tuning-bar { align-items: center; margin-bottom: -4px; }
.as-tuning-bar .as-btn { padding: 3px 8px; font-size: 10px; }

/* ---- note list editor ---- */
/* One grid template shared by the header and every row, so the columns
   cannot drift apart as the window resizes. */
.as-ehead, .as-erow {
  display: grid;
  grid-template-columns: 1.8em minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  align-items: center;
}
.as-ehead {
  font-size: 9px;
  color: var(--as-fg-dim);
  letter-spacing: 1px;
  padding: 0 4px 3px;
  border-bottom: 1px solid var(--as-border);
}
.as-elist {
  /* Capped so the list scrolls inside the window instead of pushing the
     action bar off the bottom, which on a phone would make it unreachable. */
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--as-border);
  background: #05070a;
}
.as-erow {
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.as-erow.is-sel { background: rgba(255, 176, 0, 0.12); }
.as-enum { font-size: 10px; color: var(--as-fg-dim); text-align: right; }
.as-ehz {
  font-size: 10px;
  color: var(--as-fg-dim);
  /* read-only reading, never wider than its track */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.as-epitch, .as-edur, .as-erest {
  width: 100%;
  min-width: 0;
  background: #0d1117;
  border: 1px solid var(--as-border);
  color: var(--as-fg);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 4px;
  outline: none;
}
.as-erow.is-sel .as-epitch { color: var(--as-amber); border-color: var(--as-amber); }
.as-epitch:focus, .as-edur:focus, .as-erest:focus { border-color: var(--as-accent); }

.as-selbar {
  font-size: 10px;
  color: var(--as-fg-dim);
  letter-spacing: 0.5px;
}
.as-sel-label { color: var(--as-amber); }

/* The action bar. Buttons grow to fill the row so every target stays big
   enough to hit with a thumb at phone width. */
.as-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.as-acts .as-btn { flex: 1 1 auto; min-width: 48px; text-align: center; padding: 7px 6px; }
.as-danger:hover { border-color: #ff5555; color: #ff5555; }

/* ---- tracker ---- */
.as-tr-help {
  font-size: 10px;
  color: var(--as-fg-dim);
  background: var(--as-panel);
  border: 1px solid var(--as-border);
  padding: 5px 7px;
  overflow-wrap: anywhere;
}
.as-palette { display: flex; flex-wrap: wrap; gap: 3px; }
.as-pal {
  background: #11161c;
  border: 1px solid var(--as-border);
  color: var(--as-accent);
  font-family: inherit;
  font-size: 11px;
  min-width: 34px;
  padding: 6px 5px;
  cursor: pointer;
}
.as-pal:hover { border-color: var(--as-accent); }
.as-tr-box {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: #05070a;
  border: 1px solid var(--as-border);
  color: var(--as-fg);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  padding: 7px;
  outline: none;
}
.as-tr-box:focus { border-color: var(--as-accent); }

/* ---- piano roll ---- */
.as-roll-wrap {
  border: 1px solid var(--as-border);
  background: #05070a;
  overflow: hidden;
}
.as-roll { display: block; width: 100%; }

/* ---- import button ---- */
/* A <label> wrapping a hidden file input, styled as a button: the only
   file picker that works the same in a browser and in the Capacitor
   WebView, and the pattern desktop.js already ships for wallpapers. */
.as-filelab { display: inline-block; cursor: pointer; }