/* ============================================================
   SOUND STUDIO — app styles

   Sound Studio is a TOOL, so it stays visually uniform with the
   suite: every colour, font size, radius and spacing value below
   comes from the hosted shared.css tokens. Nothing is redefined
   here — this file only styles the parts of the workspace that
   are specific to a sound editor (waveform, transport, recorder,
   audition keys).
   ============================================================ */

/* ============================================================
   1. WORKSPACE
   Sidebar rail | stage | tools, matching the suite's grid.
   ============================================================ */

.workspace {
  display: grid;
  grid-template-columns: 80px 1fr 260px;
  /* One full-height row: without it the row sizes to its content and the
     ecosystem rail ends up a different height on the start screen than in
     the editor. */
  grid-template-rows: minmax(0, 1fr);
  gap: var(--large);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--large) var(--large) 0;
}

.stage {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* The saved sound's name, shown beside the header actions.
   Sibling apps carry the same element (.header__site-name in
   Website Builder, .header__drawing-name in Art Studio). */
.header__sound-name {
  font-size: var(--fs-md);
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   2. START SCREEN
   How you begin, plus everything you've already saved.
   ============================================================ */

.start {
  display: flex;
  flex-direction: column;
  gap: var(--large);
  padding: var(--large) 0;
}

.start--hidden {
  display: none;
}

.start__intro {
  display: flex;
  flex-direction: column;
  gap: var(--small);
}

.start__title {
  font-size: var(--fs-xl);
}

.start__text {
  font-size: var(--fs-md);
  line-height: 1.5;
  opacity: 0.6;
  max-width: 460px;
}

.start__actions {
  display: flex;
  gap: var(--medium);
}

.start__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--medium);
  width: 280px;
  padding: var(--large);
  font-family: var(--font);
  background: var(--bg);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-lg);
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.start__action:hover {
  background: var(--primary);
  color: var(--white);
}

.start__action-icon {
  width: 56px;
  height: 56px;
}

.start__action-label {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.start__action-hint {
  font-size: var(--fs-sm);
  text-align: center;
  opacity: 0.7;
}

.start__saved {
  display: flex;
  flex-direction: column;
  gap: var(--medium);
  min-height: 0;
}

.start__saved-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.start__list {
  display: flex;
  flex-direction: column;
}

.start__empty {
  font-size: var(--fs-md);
  opacity: 0.5;
}

/* ============================================================
   3. EDITOR
   ============================================================ */

.editor {
  display: flex;
  flex-direction: column;
  gap: var(--medium);
  padding: var(--large) 0;
  flex: 1;
  min-height: 0;
}

.editor--hidden {
  display: none;
}

/* The waveform is the centre of the app: it's where silence,
   clipping and "where the sound actually starts" become visible. So it
   takes whatever height the window has left. */
.editor__wave {
  flex: 1;
  min-height: 180px;
  background: var(--bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.editor__canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none; /* let a drag select instead of scrolling the page */
}

.editor__hint {
  font-size: var(--fs-sm);
  opacity: 0.5;
}

/* ============================================================
   4. TRANSPORT
   ============================================================ */

.transport {
  display: flex;
  align-items: center;
  gap: var(--small);
  flex-wrap: wrap;
}

.transport__btn {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--small) var(--medium);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.transport__btn:hover {
  background: var(--primary);
  color: var(--white);
}

.transport__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.transport__btn:disabled:hover {
  background: none;
  color: var(--primary);
}

.transport__btn--play {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary);
  min-width: 80px;
}

.transport__time {
  font-size: var(--fs-md);
  margin-left: auto;
  opacity: 0.6;
}

/* ============================================================
   5. EFFECT CHAIN
   Laid out left to right on purpose: that reads as a signal
   path, so "these happen in order" is visible before anyone
   explains it, and reordering is a sideways drag.
   ============================================================ */

.chain {
  display: flex;
  flex-direction: column;
  gap: var(--small);
  flex-shrink: 0;
  padding-top: var(--medium);
}

.chain__head {
  display: flex;
  align-items: baseline;
  gap: var(--medium);
}

.chain__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.chain__flow {
  font-size: var(--fs-sm);
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chain__strip {
  display: flex;
  align-items: stretch;
  gap: var(--small);
  min-height: 76px;
  padding: var(--small);
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.chain__empty {
  font-size: var(--fs-sm);
  align-self: center;
  padding: 0 var(--small);
  opacity: 0.5;
}

.chain__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 132px;
  padding: var(--small) var(--medium);
  background: var(--white);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.chain__card--dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.chain__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chain__card-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
}

.chain__card-remove {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.chain__card-param {
  font-size: var(--fs-sm);
  opacity: 0.5;
}

.chain__card-slider {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}


.chain__add {
  display: flex;
  align-items: center;
  gap: var(--small);
  flex-wrap: wrap;
}

.chain__add-label {
  font-size: var(--fs-sm);
  opacity: 0.5;
}

.chain__add-btn {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px var(--medium);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.chain__add-btn:hover {
  background: var(--primary);
  color: var(--white);
}

/* ============================================================
   6. AUDITION KEYS
   Not an instrument — a way to hear that your sound is playable.
   ============================================================ */

.keys {
  display: flex;
  flex-direction: column;
  gap: var(--small);
  padding-top: var(--medium);
}

.keys__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.keys__row {
  display: flex;
  gap: var(--small);
}

.keys__key {
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--font-weight);
  width: 44px;
  height: 52px;
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--primary);
  cursor: pointer;
  transition: all 0.1s;
}

.keys__key:hover {
  background: var(--bg);
}

.keys__key--active {
  background: var(--primary);
  color: var(--white);
}

.keys__hint {
  font-size: var(--fs-sm);
  opacity: 0.5;
}

/* ============================================================
   7. GENERATOR
   ============================================================ */

.gen__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--small);
  margin-bottom: var(--medium);
}

.gen__preset {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  padding: 2px var(--small);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.gen__preset:hover {
  background: var(--primary);
  color: var(--white);
}

.gen__label {
  display: block;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-top: var(--small);
}

.gen__select {
  font-family: var(--font);
  font-size: var(--fs-sm);
  width: 100%;
  padding: 2px var(--small);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  outline: none;
}

.gen__slider {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}

.gen__randomize {
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--small) var(--medium);
  margin-top: var(--medium);
  border: var(--border-width) solid var(--secondary);
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.gen__randomize:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.gen__note {
  font-size: var(--fs-sm);
  line-height: 1.4;
  opacity: 0.5;
  margin-top: var(--medium);
}

/* ============================================================
   8. TOOLS COLUMN
   ============================================================ */

.tools {
  gap: var(--medium);
}

.tools--hidden {
  display: none;
}

.shape__btn {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: var(--small) var(--medium);
  margin-bottom: var(--small);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.shape__btn:hover {
  background: var(--primary);
  color: var(--white);
}

.shape__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.shape__btn:disabled:hover {
  background: none;
  color: var(--primary);
}

.shape__note {
  font-size: var(--fs-sm);
  line-height: 1.4;
  opacity: 0.5;
  margin-top: var(--small);
}

.speed__row {
  display: flex;
  align-items: center;
  gap: var(--medium);
}

.speed__slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.speed__value {
  font-size: var(--fs-md);
  width: 52px;
  text-align: right;
  opacity: 0.6;
}

.speed__presets {
  display: flex;
  gap: var(--small);
  margin-top: var(--medium);
}

.speed__preset {
  flex: 1;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  padding: 2px var(--small);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.speed__preset:hover {
  background: var(--primary);
  color: var(--white);
}

.speed__note {
  font-size: var(--fs-sm);
  line-height: 1.4;
  opacity: 0.5;
  margin-top: var(--medium);
}

.tools__export {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--small) var(--medium);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}

.tools__export:hover {
  background: var(--primary);
  color: var(--white);
}

/* ============================================================
   9. RECORDER
   A classroom of open mics is chaos, so the mic is only live
   while the button is held and the level meter proves it.
   ============================================================ */

.recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--medium);
}

.recorder--hidden {
  display: none;
}

.recorder__meter {
  width: 100%;
  height: 14px;
  background: var(--bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.recorder__meter-fill {
  width: 0;
  height: 100%;
  background: var(--primary);
  transition: width 0.05s linear;
}

.recorder__meter-fill--hot {
  background: var(--accent);
}

.recorder__clip {
  font-size: var(--fs-sm);
  color: var(--accent);
  visibility: hidden;
}

.recorder__clip--visible {
  visibility: visible;
}

.recorder__btn {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: var(--font-weight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  width: 100%;
  padding: var(--large);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--secondary);
  color: var(--primary);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: all 0.15s;
}

.recorder__btn--armed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.recorder__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.recorder__time {
  font-size: var(--fs-md);
  opacity: 0.6;
}

.recorder__hint {
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
  opacity: 0.6;
}

.recorder__error {
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
  color: var(--accent);
}

/* ============================================================
   10. TOAST
   ============================================================ */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  background: var(--black);
  color: var(--white);
  z-index: 2000;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.toast--visible {
  transform: translateX(-50%) translateY(0);
}