/* Quick capture + inbox screens (LMA-P1-CAPTURE) —
 * docs/fsdd/design-guide/design-guide.md. Tokens only (DG-T1); mobile-first
 * base layout, desktop handled by the shell column (DG-T7). */

/* --- The capture form (DG-H1: one required field, zero ceremony) --- */

.capture-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  padding: var(--space-4); /* DG-T2: default card padding */
}

.capture-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* DG-X6: visible labels, programmatically associated. */
.capture-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink); /* 14.9:1 (DG-X1) */
}

.capture-label--muted {
  color: var(--color-ink-muted); /* 5.6:1 — still >= 4.5:1 (DG-X1) */
  font-weight: var(--weight-regular);
}

.capture-input {
  font-family: var(--font-sans);
  font-size: var(--text-base); /* DG-X3: >= 16px or iOS zooms on focus */
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: var(--tap-preferred); /* DG-X2 */
  resize: vertical;
}

.capture-file {
  font-family: var(--font-sans);
  font-size: var(--text-base); /* DG-X3 */
  color: var(--color-ink-muted);
  min-height: var(--tap-min); /* DG-X2 */
}

/* DG-H3 / DG-V7: the ONE accent-filled control in the content region. */
.capture-submit {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
  background: var(--color-accent); /* 6.0:1 on white (DG-X1) */
  border: 0;
  border-radius: var(--radius-md);
  min-height: var(--tap-preferred); /* DG-X2: 48px preferred */
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}

/* DG-S5 inline validation / failure copy — danger only on true failure (DG-H5). */
.capture-form-error {
  background: var(--color-danger-tint);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--text-sm);
  margin: 0;
}

/* --- Sections --- */

.capture-section-title {
  font-size: var(--text-lg); /* DG-T3: card titles */
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.capture-entry,
.capture-recent {
  display: block;
}

/* --- The list (root recents + inbox) --- */

.capture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* DG-X2: >= 8px between adjacent targets */
}

.capture-item {
  display: flex;
  align-items: stretch;
  gap: var(--space-2); /* DG-X2: link and retry are separated siblings */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.capture-item-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3); /* DG-T2: intra-card padding */
  min-height: var(--tap-min); /* DG-X2 */
  color: var(--color-ink);
  text-decoration: none;
}

.capture-item-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.capture-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.capture-item-time {
  font-size: var(--text-xs); /* DG-T3: timestamps */
}

/* --- Status chips (DG-A2: visible processing status, DG-H4; DG-T6: every
 * chip pairs its color with a text label). --- */

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.chip--pending,
.chip--processing {
  background: var(--color-accent-tint); /* DG-A2: accent tint while pending */
  color: var(--color-accent);
}

.chip--processed {
  background: var(--color-success-tint);
  color: var(--color-success);
}

.chip--failed {
  background: var(--color-danger-tint); /* DG-A2/DG-H5: true failure only */
  color: var(--color-danger);
}

/* DG-X5: the processing pulse is non-essential motion — wrapped so reduced
 * motion gets a steady chip (state still reads via text + tint, DG-T6). */
@media (prefers-reduced-motion: no-preference) {
  .chip--processing {
    animation: chip-pulse 2s ease-in-out infinite;
  }

  @keyframes chip-pulse {
    50% { opacity: 0.6; }
  }
}

/* Quiet retry control (DG-S5: no dead ends; DG-H3: not accent-filled). */
.capture-retry {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: var(--tap-min); /* DG-X2 */
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2);
  cursor: pointer;
  align-self: center;
}

/* --- Designed empty states (DG-S2: one sentence + one affordance) --- */

.capture-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.capture-empty-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  margin: 0;
}

/* Quiet affordance (root screen — the accent slot belongs to Capture). */
.capture-empty-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min); /* DG-X2 */
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-decoration: underline;
}

/* Accent affordance — the inbox's single primary action when empty (DG-V7). */
.capture-empty-action--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  text-decoration: none;
  border-radius: var(--radius-md);
  min-height: var(--tap-preferred);
  padding: var(--space-3) var(--space-4);
}

.capture-open-inbox {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min); /* DG-X2 */
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  text-decoration: underline;
}

/* Quiet items-created link on processed inbox rows (LMA-P1-ACTIONS round
 * trip) — a sibling of the row link, never nested (DG-X2); quiet (DG-H3). */
.capture-item-tasks {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  text-decoration: underline;
  min-height: var(--tap-min); /* DG-X2 */
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
  align-self: center;
}

/* --- Detail screen --- */

.capture-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.capture-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-muted);
}

.capture-detail-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap; /* the thought, exactly as entered (DG-H6) */
}

.capture-detail-failed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.capture-audio-player {
  width: 100%;
}

.capture-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.capture-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.capture-card-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
}

.capture-card-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin: 0;
}

/* Action-item entries on capture detail link through to Tasks
 * (LMA-P1-ACTIONS round trip): the card itself is the tap target. */
.capture-card--linked {
  padding: 0;
}

.capture-card-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  min-height: var(--tap-min); /* DG-X2 */
  color: var(--color-ink);
  text-decoration: none;
}

.capture-card-link .capture-card-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.capture-card-link .capture-card-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}