/* Audiolog episode creator — tool styles.
   Built on the shared design system (../design-system/tokens.css): colors,
   spacing, radii, shadows and type all come from tokens, and components follow
   the design-system aesthetic (button shape, input focus rings, bordered cards).
   App-specific layout (clip list, waveform, thumbnail editor) lives here. */

/* ── Base ─────────────────────────────────────────────────────────────── */
/* Border-box everywhere (matches the design system) so width:100% controls
   include their padding/border and don't overflow their containers. */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-8);
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1100px; margin: 0 auto; }

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

:where(a) { color: hsl(var(--primary)); }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* Shared tool header: [← Back] · centered title · [Docs] (matches the design
   system .tool-header used by the README pages and the Syndicate tool). */
.tool-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}
.tool-header-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* ── Buttons (design-system .btn aesthetic) ───────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  height: 2.5rem;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.button:hover { background-color: hsl(var(--primary) / 0.9); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button-outline {
  background-color: hsl(var(--background));
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
}
.button-outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.button-danger { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.button-danger:hover { background-color: hsl(var(--destructive) / 0.9); }
.button-small { height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-xs); }
.button-icon {
  height: 2rem;
  width: 2rem;
  padding: 0;
  flex: 0 0 auto;
}

/* ── Upload area ──────────────────────────────────────────────────────── */
.upload-area {
  border: 2px dashed hsl(var(--input));
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.upload-area:hover,
.upload-area.dragover {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--accent));
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }
/* Keep the two columns equal: without this, a grid item's default
   min-width:auto lets long card content stretch the clip-list column. */
.grid > div { min-width: 0; }

.icon { width: 24px; height: 24px; margin-right: var(--space-2); }
.icon-small { width: 16px; height: 16px; margin-right: var(--space-1); }
.icon-only { margin-right: 0; }

/* ── Clip list ────────────────────────────────────────────────────────── */
.clip-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 600px;
  overflow-y: auto;
}
.clip-item {
  display: flex;
  padding: var(--space-4);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
  position: relative;
}
.clip-item:hover { box-shadow: var(--shadow-md); }
.clip-item.selected { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }

.clip-item-buttons { display: flex; flex-direction: column; margin-right: var(--space-2); }
.clip-move-button {
  background-color: hsl(var(--muted));
  border: none;
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: background-color 0.15s, color 0.15s;
}
.clip-move-button:hover { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); }
.clip-move-button:active { background-color: hsl(var(--border)); }
.clip-move-button:disabled { opacity: 0.3; cursor: not-allowed; }
.clip-move-button svg { width: 16px; height: 16px; }

.clip-content { flex-grow: 1; margin-left: var(--space-4); min-width: 0; }
.clip-thumbnail {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: hsl(var(--muted));
  flex-shrink: 0;
}
.clip-thumbnail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--border));
}
.clip-name { font-weight: 600; margin-bottom: var(--space-1); }
.clip-date { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.clip-folder { color: hsl(var(--muted-foreground)); font-size: var(--text-xs); }
.small-text { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.clip-time { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); margin-top: var(--space-1); }

/* At-a-glance metadata rows on each clip card */
.clip-meta {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clip-meta-row {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.clip-meta-label {
  flex-shrink: 0;
  width: 96px;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.clip-meta-value {
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.clip-meta-missing .clip-meta-value {
  color: hsl(var(--muted-foreground));
  font-style: italic;
}
/* Description rendered as Markdown: allow wrapping, clamp to a few lines. */
.clip-meta-md {
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.clip-meta-md p { margin: 0; }
.clip-meta-md a { color: hsl(var(--primary)); }
.clip-meta-md code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background-color: hsl(var(--muted));
  padding: 0 2px;
  border-radius: var(--radius-sm);
}

.clip-delete { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 10; }
.clip-delete button {
  padding: var(--space-1);
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border: none;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.clip-delete button:hover { opacity: 1; }

/* ── Editor / waveform ────────────────────────────────────────────────── */
.editor { display: flex; flex-direction: column; gap: var(--space-6); }
.waveform-container {
  position: relative;
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  height: 160px;
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.waveform-canvas { width: 100%; height: 100%; display: block; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background-color: hsl(var(--primary)); pointer-events: none; }
.trim-marker {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: hsl(var(--destructive) / 0.8);
  cursor: col-resize;
  z-index: 10;
}
.trim-marker::before {
  content: '';
  position: absolute;
  top: 4px;
  left: -7px;
  width: 16px;
  height: 16px;
  background-color: hsl(var(--destructive));
  border-radius: 50%;
  border: 2px solid hsl(var(--background));
}
.trim-area { position: absolute; top: 0; height: 100%; background-color: hsl(var(--destructive) / 0.1); pointer-events: none; }
.playback-time {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  background-color: hsl(var(--card) / 0.85);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}
.controls { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-4); }

/* ── Trim controls ────────────────────────────────────────────────────── */
.trim-controls { display: flex; flex-direction: column; gap: var(--space-4); }
.trim-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  font-family: var(--font-mono);
}
.trim-input-group { display: flex; align-items: center; gap: var(--space-2); }
.trim-label { font-weight: 500; color: hsl(var(--foreground)); margin-bottom: var(--space-1); display: block; font-size: var(--text-sm); }
.trim-time-input {
  padding: 0 var(--space-2);
  height: 2.25rem;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-sm);
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.trim-time-input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
.trim-buttons { display: flex; gap: var(--space-1); }
.duration-display {
  grid-column: span 2;
  text-align: center;
  padding: var(--space-2);
  background-color: hsl(var(--muted));
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}

.buttons { display: flex; gap: var(--space-2); justify-content: space-between; }

/* ── Metadata form ────────────────────────────────────────────────────── */
.metadata-container { margin-top: var(--space-6); }
.input-group { margin-bottom: var(--space-4); }
.input-group label { display: block; font-weight: 500; margin-bottom: var(--space-2); color: hsl(var(--foreground)); font-size: var(--text-sm); }
.form-input,
.description-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--input));
  font-family: inherit;
  font-size: var(--text-sm);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input { height: 2.5rem; }
.description-textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.form-input:focus,
.description-textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
.form-input::placeholder,
.description-textarea::placeholder { color: hsl(var(--muted-foreground)); }

/* ── Thumbnail editor ─────────────────────────────────────────────────── */
.thumbnail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.thumbnail-editor { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
.thumbnail-row { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.thumbnail-container {
  position: relative;
  width: 250px;
  height: 250px;
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Drop target highlight when dragging a replacement screenshot */
.thumbnail-container.thumb-drag-over,
.thumbnail-dropzone.thumb-drag-over {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.4);
}
.thumbnail-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  background-color: hsl(var(--muted));
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius-lg);
  color: hsl(var(--muted-foreground));
}
.original-image { position: absolute; width: 100%; height: 100%; object-fit: contain; display: block; }
.crop-overlay { position: absolute; inset: 0; border: 2px solid hsl(var(--primary)); box-sizing: border-box; pointer-events: none; }
.crop-box { position: absolute; border: 2px solid hsl(var(--primary)); background-color: hsl(var(--primary) / 0.1); box-sizing: border-box; pointer-events: none; }
.thumbnail-preview { width: 150px; display: flex; flex-direction: column; gap: var(--space-2); }
.preview-container {
  width: 150px;
  height: 150px;
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
}
.slider-controls { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 450px; margin-top: var(--space-2); }
.slider-group { display: flex; flex-direction: column; gap: var(--space-1); }
.slider-row { display: flex; align-items: center; gap: var(--space-2); }
.slider-label { font-weight: 500; min-width: 80px; font-size: var(--text-sm); }
.slider-value { font-family: var(--font-mono); min-width: 40px; text-align: right; font-size: var(--text-sm); }
.crop-slider { flex-grow: 1; accent-color: hsl(var(--primary)); }
.reset-button {
  align-self: flex-end;
  height: 2.5rem;
  padding: 0 var(--space-4);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}
.reset-button:hover { background-color: hsl(var(--accent)); }

/* ── Misc ─────────────────────────────────────────────────────────────── */
.save-indicator { font-size: var(--text-sm); color: hsl(var(--success)); margin-top: var(--space-2); opacity: 0; transition: opacity 0.5s; }
.save-indicator.visible { opacity: 1; }
.debug-info {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background-color: hsl(var(--muted));
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  display: none;
}