/* ============================================
   app-capture.css
   ============================================
   Styles for the capture (edit workout) page.
   All classes used by app/templates/capture/edit.html.
   ============================================ */

/* ── Page header row ────────────────────────────────────────────── */
.hub-panel { display: flex; align-items: center; gap: var(--wp-space-sm); flex-wrap: wrap; margin-bottom: var(--wp-space-md); }
.hub-date { font-size: var(--wp-text-base); font-weight: 500; color: var(--color-text-primary); }
.hub-state { font-size: var(--wp-text-xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Piece card ─────────────────────────────────────────────────── */
.piece-card { background: var(--color-surface-card); border: var(--border-default); border-radius: var(--radius-container); margin-bottom: var(--wp-space-lg); overflow: hidden; }
.piece-head { display: flex; align-items: center; gap: var(--wp-space-sm); padding: var(--wp-space-sm) var(--wp-space-md); border-bottom: var(--border-default); background: var(--color-surface-muted); }
.piece-title-input { flex: 1; }
.piece-body { padding: var(--wp-space-md); }
.piece-foot { padding: var(--wp-space-sm) var(--wp-space-md); border-top: var(--border-default); }

/* ── Rx field row ───────────────────────────────────────────────── */
/* .rx-field is defined in app-prescription.css - not redefined here */
.rx-row { display: flex; flex-wrap: wrap; gap: var(--wp-space-sm) var(--wp-space-md); margin-bottom: var(--wp-space-md); }
.rx-row label { font-size: var(--wp-text-sm); color: var(--color-text-secondary); font-weight: 500; }

/* ── Workout blocks ─────────────────────────────────────────────── */
.block { border: var(--border-default); border-radius: var(--radius-element); margin-bottom: var(--wp-space-md); }
.block-head { display: flex; align-items: center; gap: var(--wp-space-sm); padding: var(--wp-space-xs) var(--wp-space-sm); background: var(--color-surface-muted); border-bottom: var(--border-default); flex-wrap: wrap; border-radius: var(--radius-element) var(--radius-element) 0 0; }
.x-of { font-size: var(--wp-text-sm); color: var(--color-text-secondary); white-space: nowrap; }
.blk-rest-input { width: 80px; }
.block-hint { font-size: var(--wp-text-sm); color: var(--color-text-secondary); font-style: italic; margin: var(--wp-space-sm) var(--wp-space-sm) var(--wp-space-sm); }
.copy-block { background: transparent; border: none; color: var(--color-text-tertiary); cursor: pointer; padding: var(--wp-space-xs); font-size: var(--wp-text-base); line-height: 1; font-family: inherit; }
.copy-block:hover { color: var(--color-text-primary); }
.remove-block { background: transparent; border: none; color: var(--color-text-tertiary); cursor: pointer; padding: var(--wp-space-xs); font-size: var(--wp-text-base); line-height: 1; font-family: inherit; }
.remove-block:hover { color: var(--color-danger); }

/* ── Movement column header ─────────────────────────────────────── */
.mv-header { display: grid; grid-template-columns: 1fr 60px 80px 80px 120px 32px; gap: 6px; padding: var(--wp-space-xs) var(--wp-space-sm); font-size: var(--wp-text-xs); color: var(--color-text-tertiary); font-weight: 500; }

/* ── Movement row ───────────────────────────────────────────────── */
.mv-row { display: grid; grid-template-columns: 1fr 60px 80px 80px 120px 32px; gap: 6px; align-items: center; padding: 4px var(--wp-space-sm); border-top: var(--border-default); }
.mv-row:hover { background: var(--color-surface-muted); }
.mv-unresolved { opacity: 0.6; }

/* ── Movement cells ─────────────────────────────────────────────── */
.mv-name { display: flex; align-items: center; }
.mv-typeahead-wrap { position: relative; flex: 1; }
.mv-label-input { width: 100%; }
.mv-cell { display: flex; align-items: center; }
.mv-cell .wp-select { width: 100%; }
.mv-rx { display: flex; align-items: center; }
.mv-rx .wp-input { width: 100%; }

/* ── Movement typeahead suggestions ─────────────────────────────── */
.mv-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface-card); border: var(--border-default); border-radius: var(--radius-element); list-style: none; margin: 2px 0 0; padding: 0; z-index: 100; max-height: 200px; overflow-y: auto; }
.mv-suggestions li { padding: var(--wp-space-xs) var(--wp-space-sm); cursor: pointer; font-size: var(--wp-text-sm); color: var(--color-text-primary); }
.mv-suggestions li:hover { background: var(--color-surface-muted); }

/* ── Movement remove button ─────────────────────────────────────── */
.mv-remove-btn { background: transparent; border: none; color: var(--color-text-tertiary); cursor: pointer; padding: 0; font-size: var(--wp-text-base); width: 32px; text-align: center; font-family: inherit; }
.mv-remove-btn:hover { color: var(--color-danger); }

/* ── Add movement / add block rows ──────────────────────────────── */
.row-add { padding: var(--wp-space-xs) var(--wp-space-sm); border-top: var(--border-default); }
.add-movement-btn, .add-block-btn { background: transparent; border: none; color: var(--color-primary); cursor: pointer; font-size: var(--wp-text-sm); padding: var(--wp-space-xs) 0; font-family: inherit; }
.add-movement-btn:hover, .add-block-btn:hover { color: var(--color-primary-light); text-decoration: underline; }

/* ── Piece detail (notes) ───────────────────────────────────────── */
.piece-detail-body { display: flex; flex-direction: column; gap: var(--wp-space-xs); padding: var(--wp-space-sm) var(--wp-space-md) var(--wp-space-md); }
.piece-detail-body label { font-size: var(--wp-text-sm); color: var(--color-text-secondary); }

/* ── Piece remove ───────────────────────────────────────────────── */
.remove-piece { background: transparent; border: none; color: var(--color-danger); cursor: pointer; font-size: var(--wp-text-sm); font-family: inherit; padding: 0; }
.remove-piece:hover { text-decoration: underline; }

/* ── Add piece ──────────────────────────────────────────────────── */
.add-piece { background: transparent; border: var(--border-default); color: var(--color-text-secondary); cursor: pointer; padding: var(--wp-space-sm) var(--wp-space-md); border-radius: var(--radius-element); font-family: inherit; font-size: var(--wp-text-sm); }
.add-piece:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

/* ── Page actions bar ───────────────────────────────────────────── */
.page-actions { display: flex; align-items: center; padding: var(--wp-space-md) 0 var(--wp-space-xl); }
.spacer { flex: 1; }
.confirm-zone { display: flex; flex-direction: column; align-items: flex-end; }
.confirm-line { display: flex; align-items: center; gap: var(--wp-space-sm); }

/* ── Interval station styles ────────────────────────────────────── */
.station { border-left: 3px solid var(--color-primary); } /* lint-ignore */
.station.rest { border-left: 3px solid var(--color-surface-muted); opacity: 0.75; } /* lint-ignore */
.station-tag { font-size: var(--wp-text-xs); color: var(--color-text-tertiary); font-weight: 500; white-space: nowrap; }
.station-dur { width: 80px; }

/* ── Task 017: capture-scoped typography consolidation ──────────────
   Softer, smaller, fewer variants. Scoped to main.capture-page so it
   never affects forms on other pages. Inputs/selects/option-lists move
   off harsh pure-white (--color-text-primary #fff) to softened
   secondary, and down from the global 16px to the page --wp-text-sm
   scale so they stop reading oversized vs surrounding text. */
main.capture-page .wp-input,
main.capture-page .wp-select {
  font-size: var(--wp-text-sm);
  /* Off-white for entered values - brighter than the grey labels so the
     content reads as primary, but softer than harsh pure #fff. Mixed
     from tokens (no raw hex) to satisfy design-system-lint. */
  color: color-mix(in srgb, var(--color-text-primary) 82%, var(--color-text-secondary));
}
main.capture-page .wp-input::placeholder {
  color: var(--color-text-tertiary);
}
main.capture-page .wp-select option {
  color: color-mix(in srgb, var(--color-text-primary) 82%, var(--color-text-secondary));
  background: var(--color-surface-input);
}
main.capture-page .mv-suggestions li {
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
}
main.capture-page .mv-suggestions li:hover {
  color: var(--color-text-primary);
}

/* ── Responsive - mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .mv-header { display: none; }
  .mv-row { grid-template-columns: 1fr 1fr; gap: var(--wp-space-xs); }
  .rx-row { flex-direction: column; }
  .page-actions { flex-direction: column; align-items: stretch; gap: var(--wp-space-sm); }
  .confirm-line { flex-direction: column; }
  .confirm-zone { align-items: stretch; }
}