/* MP3 Editor — styles for the waveform, handles, minimap, markers, quick panel and small layout bits.
   Everything else (buttons, fields, sliders, tabs, panels, dialogs…) comes from the shared design system. */

.mp3e-file { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.mp3e-file-info { min-width: 0; }
.mp3e-file-name { font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.mp3e-file-sub { margin: 0; }

.mp3e-wave-toolbar { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.mp3e-wave-toolbar .mp3e-spacer { flex: 1 1 auto; }

.mp3e-wave {
  position: relative;
  height: 190px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 640px) { .mp3e-wave { height: 150px; } }
.mp3e-wave-surface { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.mp3e-mask { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); pointer-events: none; }
/* Play position: a red line with a round knob on top that you drag. The line itself never catches clicks. */
.mp3e-playhead {
  position: absolute; top: 0; bottom: 0; width: 12px; margin-left: -6px; z-index: 4;
  pointer-events: none; outline: none;
}
.mp3e-playhead::before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: var(--danger); border-radius: 1px; }
.mp3e-knob {
  position: absolute; top: 5px; left: 50%; width: 14px; height: 14px; transform: translate(calc(-50% + var(--nudge, 0px)), 0);
  border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface), var(--shadow-sm);
  pointer-events: auto; cursor: grab; touch-action: none;
}
.mp3e-playhead.is-dragging .mp3e-knob { cursor: grabbing; }
.mp3e-knob::after { content: ''; position: absolute; inset: -4px; }
@media (pointer: coarse) { .mp3e-knob::after { inset: -14px; } } /* a bigger target for fingers, around the knob only */
.mp3e-playhead:focus-visible .mp3e-knob, .mp3e-playhead.is-dragging .mp3e-knob { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); }
.mp3e-markers { position: absolute; inset: 0; pointer-events: none; }
.mp3e-marker {
  position: absolute; top: 0; width: 0; height: 0; pointer-events: auto; touch-action: none;
  border: none; background: none; padding: 0; margin: 0; cursor: pointer; transform: translateX(-50%);
}
.mp3e-marker::before {
  content: ''; position: absolute; top: 0; left: -1px; width: 2px; height: 100%; background: var(--warning);
}
.mp3e-marker::after {
  content: ''; position: absolute; top: 0; left: -6px; width: 12px; height: 12px; border-radius: 2px 2px 2px 0;
  background: var(--warning); transform: rotate(45deg); transform-origin: bottom left;
}
/* Selection edges: a thin blue line with a tab at the bottom (only shown when part of the file is selected).
   The grab area is the 10px line plus the tab, so the rest of the waveform stays clickable. */
.mp3e-handle {
  position: absolute; top: 0; bottom: 0; width: 10px; margin-left: -5px; z-index: 3;
  touch-action: none; cursor: ew-resize; background: none; border: none; padding: 0; outline: none;
}
.mp3e-handle::after { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--primary); }
.mp3e-grip {
  position: absolute; bottom: 0; left: 50%; width: 14px; height: 22px; transform: translateX(calc(-50% + var(--nudge, 0px)));
  border-radius: 4px 4px 0 0; background: var(--primary); box-shadow: var(--shadow-sm);
}
.mp3e-grip::before { content: ''; position: absolute; left: 4px; right: 4px; top: 6px; height: 10px; border-left: 2px solid rgb(255 255 255 / .75); border-right: 2px solid rgb(255 255 255 / .75); }
.mp3e-grip::after { content: ''; position: absolute; inset: -4px -4px 0; }
@media (pointer: coarse) { .mp3e-grip::after { inset: -12px -14px 0; } } /* a bigger target for fingers, around the tab only */
.mp3e-handle:focus-visible .mp3e-grip { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
@media (hover: hover) { .mp3e-handle:hover::after, .mp3e-handle:hover .mp3e-grip { background: var(--primary-hover); } }

.mp3e-minimap-wrap { margin-top: 0.4rem; position: relative; height: 28px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border); touch-action: none; }
.mp3e-minimap-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp3e-minimap-viewport { position: absolute; top: 1px; bottom: 1px; background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 3px; pointer-events: none; }

.mp3e-timebar, .mp3e-transport { flex-wrap: wrap; row-gap: 0.4rem; }
.mp3e-timebar .field { max-width: 7.5rem; }

.mp3e-main-actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mp3e-main-actions .btn { flex: 1 1 10.5rem; justify-content: center; }
/* Wide screens: the effects sit in two columns instead of one very long list. */
@media (min-width: 921px) {
  .mp3e-edit-panel [data-tabpanel]:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .mp3e-edit-panel [data-tabpanel] > * { margin-top: 0; }
}

.mp3e-quick {
  margin-top: 0.6rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); display: flex; flex-direction: column; gap: 0.5rem;
}

.mp3e-undo-row { margin-top: 0.6rem; }

.mp3e-history-list { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.mp3e-history-list li + li { border-top: 1px solid var(--border); }
.mp3e-history-list button {
  width: 100%; text-align: left; padding: 0.55rem 0.75rem; border: none; background: none; cursor: pointer;
  color: var(--text); font: inherit; min-height: 44px;
}
.mp3e-history-list li.is-active button { background: var(--primary-softer); font-weight: 600; color: var(--primary); }
@media (hover: hover) { .mp3e-history-list button:hover { background: var(--surface-2); } }

.mp3e-marker-list { list-style: none; margin: 0; padding: 0; }
.mp3e-marker-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; min-height: 44px; }
.mp3e-marker-list li + li { border-top: 1px solid var(--border); }
.mp3e-marker-list .mp3e-marker-time { font-variant-numeric: tabular-nums; flex: 1 1 auto; }

.mp3e-join-dropzone { margin-top: 0.5rem; }

.mp3e-cover {
  width: 4.5rem; height: 4.5rem; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-sunken) center/cover no-repeat; display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
}
.mp3e-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 920px) {
  .mp3e-hide-phone { display: none; }
}