/* Add to journal: the capture sheet, the recorder and the outbox pill. */
.capture { display: flex; justify-content: center; }
.capture-sheet {
  width: 100%; max-width: 640px; margin: 8px auto 0;
  border: 1px solid var(--line); background: var(--bg);
  display: flex; flex-direction: column; min-height: 560px;
}
.capture-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.capture-close { font-size: 26px; line-height: 1; padding: 4px 10px; margin-left: -10px; }
.capture-heading { flex: 1; }
.capture-day { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; color: var(--ink); cursor: pointer; }
.capture-day .eyebrow { font-size: 10px; }
.capture-day-label { font-size: 14px; font-weight: 500; border-bottom: 1px dashed var(--ink-40); }
.capture-day-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; }

.capture-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.capture-tab { border: 0; border-radius: 0; background: transparent; justify-content: center; padding: 14px 8px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.capture-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.capture-tab:disabled { opacity: 0.35; }
.capture-tab-count { font: 500 11px/1 var(--mono); color: var(--muted); }

.capture-panel { flex: 1; padding: 28px 24px; display: flex; flex-direction: column; }
.capture-panel.voice { align-items: center; justify-content: center; text-align: center; gap: 14px; }
.capture-start {
  width: 132px; height: 132px; border-radius: 50%; padding: 0; justify-content: center;
  background: var(--accent); border: 0; box-shadow: 0 0 0 10px var(--accent-soft);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.capture-start:hover { transform: scale(1.03); box-shadow: 0 0 0 14px var(--accent-soft); }
.capture-start:active { transform: scale(0.97); }
.capture-start-dot { width: 44px; height: 44px; border-radius: 50%; background: #C2412D; border: 4px solid var(--accent-ink); }
.capture-start-label { font-size: 18px; font-weight: 500; margin: 8px 0 0; }
.capture-hint { max-width: 34ch; margin: 0 auto; }
.capture-error { max-width: 44ch; margin: 0 auto; padding: 12px 14px; background: var(--danger-soft); color: var(--danger); font-size: 14px; text-align: left; }

.capture-status { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #C2412D; animation: livePulse 1.4s ease-in-out infinite; }
.live-dot.paused { animation: none; background: var(--ink-40); }
@keyframes livePulse { 50% { opacity: 0.35; } }
.capture-timer { font-size: clamp(54px, 14vw, 76px); font-weight: 400; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.capture-level { width: min(100%, 360px); height: 56px; color: var(--accent); }
.capture-live-actions { display: flex; gap: 28px; margin-top: 8px; }
button.round { flex-direction: column; gap: 8px; border: 0; background: transparent; padding: 0; font-size: 13px; color: var(--muted); }
button.round > span:first-child { width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; background: var(--surface); }
button.round.stop > span:first-child { background: var(--accent); border-color: var(--accent); }
button.round:hover > span:first-child { border-color: var(--ink-40); }
.ico-pause::before { content: ''; width: 18px; height: 20px; border-left: 6px solid var(--ink); border-right: 6px solid var(--ink); box-sizing: border-box; }
.ico-play::before { content: ''; border-left: 18px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.ico-stop::before { content: ''; width: 20px; height: 20px; background: var(--accent-ink); border-radius: 2px; }

.capture-panel.review { justify-content: flex-start; padding-top: 40px; }
.capture-audio { width: min(100%, 420px); }
.capture-review-actions { justify-content: center; }

.capture-panel.type { gap: 12px; }
.capture-title { font-size: 17px; font-weight: 500; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0; }
.capture-text { flex: 1; min-height: 280px; resize: none; border: 0; padding: 8px 0; font-size: 17px; line-height: 1.6; background: transparent; }
.capture-title:focus, .capture-text:focus { border-color: var(--line); }

.capture-panel.photo { gap: 16px; }
.capture-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.capture-photo { position: relative; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.capture-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); background: var(--surface); }
.capture-photo input { font-size: 13px; padding: 6px 8px; }
.capture-photo-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(20, 24, 43, 0.7); color: #fff; border: 0; font-size: 18px; }
.capture-photo-empty { margin: 24px 0 0; }

.capture-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.capture-foot-summary { flex: 1; }
.capture-send { padding: 13px 22px; font-size: 15px; }

/* Desktop camera */
.camera-modal { max-width: 760px; }
.camera-frame { position: relative; background: #000; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.camera-video { width: 100%; height: 100%; object-fit: contain; }
.camera-msg { position: absolute; color: #fff; text-align: center; padding: 16px; max-width: 40ch; }
.camera-actions { margin-top: 14px; }

/* Outbox pill */
.outbox-pill {
  position: fixed; z-index: 40; right: 20px; bottom: 20px;
  background: var(--encre); color: var(--white); border: 0; border-radius: 999px; padding: 10px 16px; font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.outbox-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--white); opacity: 0.6; }
.outbox-dot.busy { animation: livePulse 1.2s ease-in-out infinite; opacity: 1; }
.outbox-dot.stuck { background: #E58B7D; opacity: 1; }
body.is-phone .outbox-pill { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); }
body.is-bare .outbox-pill { display: none; }
.outbox-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 12px; }
.outbox-row { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }

/* Phone: the sheet is the whole screen */
@media (max-width: 720px) {
  body.is-bare .capture { min-height: 100vh; min-height: 100dvh; }
  body.is-bare .capture-sheet { margin: 0; border: 0; min-height: 100vh; min-height: 100dvh; max-width: none; }
  .capture-head { padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  .capture-panel { padding: 24px 16px; }
  .capture-foot { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .capture-send { flex: none; }
  .capture-photos { grid-template-columns: repeat(2, 1fr); }
}