/* frontend/style.css
   Ableton dark palette + component classes lifted verbatim from
   docs/ui-prototypes/chop-to-rack.html (candidates A "Quick Chop" and
   D "Pad Filler"). Unlike the prototype's fixed-size Live dialog
   specimens (460x300 etc.), this page drops the fixed width/height so
   the layout is a normal responsive single-column page. .pads/.pad and
   .cand-list/.cand-item back Task 5's pad-review screen (frontend/js/pads.js).
*/

* , *::before, *::after { box-sizing: border-box; }

/* Author-origin display rules (e.g. .field { display: flex }) beat the UA
   stylesheet's [hidden] { display: none } regardless of specificity, so
   any hideable section that also carries a layout class needs this to
   actually disappear. Toggle visibility via the `hidden` attribute
   everywhere, never via inline style. */
[hidden] { display: none !important; }

.live {
  --p-live-ui-bg: hsl(0, 0%, 21%);
  --p-live-control-bg: hsl(0, 0%, 16%);
  --p-live-input-bg: hsl(0, 0%, 12%);
  --p-live-text-primary: hsl(0, 0%, 71%);
  --p-live-control-border: hsl(0, 0%, 7%);
  --p-live-text-secondary: hsl(0, 0%, 41%);
  --p-live-accent-primary: hsl(31, 100%, 67%);
  --p-live-control-text--enabled: hsl(0, 0%, 7%);
  --live-panel: hsl(0, 0%, 25%);

  background-color: var(--p-live-ui-bg);
  color: var(--p-live-text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  border: 1px solid var(--p-live-control-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.live *, .live *::before, .live *::after { box-sizing: border-box; }
.live button, .live input, .live select { font: inherit; color: inherit; }

body {
  background: var(--p-live-ui-bg, #363636);
  color: var(--p-live-text-primary, #b5b5b5);
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
}

main.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

main.page h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.login-form { display: flex; flex-direction: column; gap: 8px; max-width: 280px; margin: 80px auto; }

section { margin-bottom: 20px; }

.live-title {
  background: var(--p-live-control-bg);
  border-bottom: 1px solid var(--p-live-control-border);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--p-live-text-primary);
  flex: none;
}
.live-title b { font-weight: 700; letter-spacing: 0.01em; }
.live-title .src { color: var(--p-live-text-secondary); margin-left: auto; font-size: 10.5px; }

.live-main { padding: 12px; display: flex; flex-direction: column; gap: 11px; flex: 1; min-height: 0; }

.lbl { color: var(--p-live-text-secondary); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }

.alx-button {
  background-color: var(--p-live-control-bg);
  color: var(--p-live-text-primary);
  border: 1px solid var(--p-live-control-border);
  height: 20px;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}
.alx-button:hover { background-color: hsl(0, 0%, 14%); }
.alx-button:focus-visible { outline: 2px solid var(--p-live-text-secondary); outline-offset: 1px; }
.alx-button.primary { background: var(--p-live-accent-primary); color: var(--p-live-control-text--enabled); border-color: var(--p-live-control-border); font-weight: 700; }
.alx-button.primary:hover { background: hsl(31, 100%, 72%); }
.alx-button:disabled { opacity: 0.45; cursor: not-allowed; }

.alx-input {
  background-color: var(--p-live-input-bg);
  color: var(--p-live-text-primary);
  border: 1px solid var(--p-live-control-border);
  height: 20px;
  padding: 0 6px;
  width: 100%;
}
.alx-input::placeholder { color: var(--p-live-text-secondary); }
.alx-input:focus-visible { outline: 2px solid var(--p-live-text-secondary); outline-offset: 0; }

/* segmented control */
.seg { display: flex; border: 1px solid var(--p-live-control-border); background: var(--p-live-input-bg); }
.seg button { flex: 1; background: transparent; border: none; height: 20px; cursor: pointer; color: var(--p-live-text-secondary); }
.seg button + button { border-left: 1px solid var(--p-live-control-border); }
.seg button[aria-pressed="true"] { background: var(--p-live-accent-primary); color: var(--p-live-control-text--enabled); font-weight: 700; }
.seg button:focus-visible { outline: 2px solid var(--p-live-text-secondary); outline-offset: -2px; }

.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 4px; }

.radio-list { display: flex; flex-direction: column; gap: 5px; }
.radio-list label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.radio-list input { accent-color: var(--p-live-accent-primary); margin: 0; }
.radio-list .hint { color: var(--p-live-text-secondary); font-size: 10.5px; }

.readout {
  background: var(--p-live-input-bg);
  border: 1px solid var(--p-live-control-border);
  padding: 7px 9px;
  font-size: 10.5px;
  color: var(--p-live-text-secondary);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.5;
  overflow-x: auto;
  white-space: nowrap;
}
.readout b { color: var(--p-live-accent-primary); font-weight: 500; }

.live-foot {
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--p-live-control-border);
  background: var(--p-live-control-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.live-foot .spacer { flex: 1; }
.live-foot .note { color: var(--p-live-text-secondary); font-size: 10.5px; }

/* stat strip */
.stats { display: flex; gap: 1px; background: var(--p-live-control-border); border: 1px solid var(--p-live-control-border); }
.stats div { flex: 1; background: var(--p-live-input-bg); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.stats span { color: var(--p-live-text-secondary); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.stats b { font-weight: 700; font-size: 13px; color: var(--p-live-text-primary); font-variant-numeric: tabular-nums; }

/* pad grid (D) -- Task 5 pad-review screen */
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pad {
  aspect-ratio: 1 / 1; background: var(--p-live-input-bg);
  border: 1px solid var(--p-live-control-border);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 5px; cursor: pointer; text-align: left; gap: 2px; overflow: hidden;
}
.pad .note { color: var(--p-live-text-secondary); font-size: 9.5px; font-family: ui-monospace, monospace; }
.pad .nm { font-size: 10px; line-height: 1.15; word-break: break-word; }
.pad.filled { background: var(--live-panel); }
.pad.filled .nm { color: var(--p-live-text-primary); }
.pad.empty .nm { color: var(--p-live-text-secondary); font-style: italic; }
.pad[aria-pressed="true"] { border-color: var(--p-live-accent-primary); box-shadow: inset 0 0 0 1px var(--p-live-accent-primary); }
.pad:focus-visible { outline: 2px solid var(--p-live-text-secondary); outline-offset: 1px; }
.pad.filled .bar { width: 100%; height: 3px; background: var(--p-live-accent-primary); opacity: 0.75; }

.cand-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.cand-item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: var(--p-live-input-bg); border: 1px solid var(--p-live-control-border);
  padding: 4px 7px; cursor: pointer; text-align: left;
}
.cand-item:hover { background: var(--live-panel); }
.cand-item:focus-visible { outline: 2px solid var(--p-live-text-secondary); outline-offset: 1px; }
.cand-item .tag { color: var(--p-live-text-secondary); font-size: 9.5px; font-family: ui-monospace, monospace; margin-left: auto; }
.cand-item.used { opacity: 0.42; }

#waveform { margin: 4px 0; }

/* wavesurfer's region resize handles ship an inline border meant for a
   light background (rgba(0,0,0,0.5)); on this dark theme it's invisible.
   Exposed via CSS Shadow Parts -- !important is required to beat the
   plugin's own inline `style=""` on the part element. */
#waveform > div::part(region-handle) {
  width: 8px !important;
  background: rgba(240, 145, 60, 0.9) !important;
  border: none !important;
  cursor: ew-resize;
}
#waveform > div::part(region-handle-left) { border-radius: 2px 0 0 2px !important; }
#waveform > div::part(region-handle-right) { border-radius: 0 2px 2px 0 !important; }

/* recent-jobs list (Task 6) */
.jobs-list { display: flex; flex-direction: column; gap: 3px; }
.job-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--p-live-input-bg); border: 1px solid var(--p-live-control-border);
  padding: 4px 7px;
}
.job-row-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px;
  color: var(--p-live-text-secondary);
}
.job-row-delete { flex: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}