/* Capture is a dedicated viewport, never a card inside the scrolling job thread. */
.capture-session[hidden], .capture-session [hidden] { display: none !important; }
.capture-session {
  position: fixed; z-index: 80; inset-inline: 0; top: var(--field-viewport-top, 0px);
  height: 100vh; height: var(--field-viewport-height, 100dvh);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden; overscroll-behavior: none; color: var(--surface); background: var(--ink-deep);
  padding-top: env(safe-area-inset-top); font-family: inherit;
}
.capture-session button, .capture-session input, .capture-session textarea { font: inherit; }
.capture-session button { touch-action: manipulation; cursor: pointer; }
.capture-session button:disabled { opacity: .45; cursor: default; }
.capture-session :is(button,input,textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.capture-header { min-height: 72px; display: grid; grid-template-columns: minmax(72px,1fr) minmax(0,2fr) minmax(72px,1fr); align-items: center; gap: 8px; padding: 8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); background: var(--ink); }
.capture-identity { min-width: 0; text-align: center; }
.capture-identity > span { display: block; font-size: 12px; letter-spacing: .08em; font-weight: 750; }
.capture-identity small { font-size: 10px; font-weight: 400; letter-spacing: 0; }
.capture-identity strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capture-quiet { min-height: 56px; min-width: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--surface); font-size: 12px !important; line-height: 1.3; padding: 8px; text-align: center; }
.capture-header > :first-child,
.capture-header > :last-child { text-align: center; }
.capture-session .capture-stage { position: relative; margin: 0; min-height: 0; overflow: hidden; background: var(--ink-deep); }
.capture-session .capture-stage > video { width: 100%; height: 100%; display: block; object-fit: contain; }
.capture-camera-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px 24px 48px; overflow-y: auto; background: var(--ink-deep); text-align: center; }
.capture-camera-message p { max-width: 36ch; margin: 0; font-size: 16px; line-height: 1.45; }
.capture-camera-message button { min-height: 56px; padding: 12px 24px; color: var(--surface); background: var(--ink); border: 1px solid var(--ink-dim); border-radius: 14px; }
.capture-live-status { position: absolute; top: 76px; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); background: var(--ink); color: var(--surface); padding: 8px 12px; border-radius: 14px; font-size: 14px; text-align: center; }
.capture-live-status:empty { display: none; }
.capture-dock { padding: 12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background: var(--ink); }
.capture-session .capture-modes { position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%); display: flex; width: max-content; margin: 0; padding: 0; gap: 0; border-radius: 14px; background: var(--ink); }
.capture-modes button { min-height: 44px; min-width: 64px; border: 0; border-radius: 14px; background: transparent; color: var(--line); font-size: 12px; font-weight: 650; }
.capture-modes button[aria-pressed="true"] { color: var(--surface); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.capture-actions { display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); align-items: center; justify-items: center; gap: 12px; }
.capture-side { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; position: relative; min-width: 44px; min-height: 56px; max-width: 100%; padding: 4px; border: 0; border-radius: 14px; color: var(--surface); background: transparent; font-size: 12px !important; }
.capture-side svg { width: 20px; height: 20px; flex: none; }
.capture-side strong { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border: 1px solid var(--ink-dim); border-radius: 8px; font-size: 12px; font-weight: 650; line-height: 1; }
.capture-gallery { overflow: hidden; cursor: pointer; }.capture-gallery input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.capture-gallery:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }.capture-gallery:has(input:disabled) { opacity: .45; cursor: default; }
/* Separate from the legacy upload label: its 160px minimum made the old shutter oval. */
.capture-session .capture-camera-key { display: grid; place-items: center; position: relative; box-sizing: border-box; width: 56px; min-width: 56px; max-width: 56px; height: 56px; min-height: 56px; max-height: 56px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; background: var(--accent); color: var(--surface); }
.capture-session .capture-camera-key:not(:disabled):active { transform: none; background: var(--accent-dim); }
.capture-camera-key svg { width: 24px; height: 24px; }
.capture-camera-key .capture-key-video, .capture-camera-key .capture-key-stop { display: none; }
.capture-camera-key[data-mode="video"] .capture-key-photo { display: none; }
.capture-camera-key[data-mode="video"] .capture-key-video { display: block; }
.capture-camera-key[aria-pressed="true"] .capture-key-photo, .capture-camera-key[aria-pressed="true"] .capture-key-video { display: none; }
.capture-camera-key[aria-pressed="true"] .capture-key-stop { display: block; }
.capture-session .capture-hint { margin: 12px auto 0; max-width: 58ch; min-height: 32px; color: var(--line); font-size: 12px; line-height: 16px; text-align: center; }
.capture-status { margin: 0; height: 36px; overflow-y: auto; padding-top: 4px; color: var(--surface); font-size: 12px; line-height: 16px; text-align: center; }
.capture-session .capture-stage > .capture-hint { position: absolute; bottom: 12px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); min-height: 0; margin: 0 auto; padding: 4px 8px; border-radius: 8px; background: var(--ink); pointer-events: none; }
.capture-session[data-view="camera"] .capture-status { position: absolute; bottom: calc(80px + env(safe-area-inset-bottom)); left: 16px; right: 16px; z-index: 2; width: fit-content; max-width: calc(100% - 32px); height: auto; max-height: 64px; margin: auto; padding: 8px 12px; border-radius: 8px; background: var(--ink); }
.capture-session[data-view="camera"] .capture-status:empty { display: none; }
.capture-review { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left)); color: var(--ink); background: var(--surface); scroll-padding: 16px; }
.capture-review > h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }.capture-review > p { margin: 8px 0 24px; font-size: 14px; color: var(--ink-dim); }
.capture-items { display: grid; gap: 16px; max-width: 720px; margin: auto; }
.capture-item { display: grid; grid-template-columns: minmax(88px,1fr) minmax(0,2fr); gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.capture-item-media { min-width: 0; align-self: start; }.capture-item-media :is(img,video) { display: block; width: 100%; max-height: 160px; object-fit: contain; border-radius: 14px; background: var(--ink-deep); }.capture-item-media audio { width: 100%; max-width: 100%; height: 48px; }.capture-file-kind { display: flex; min-height: 88px; justify-content: center; align-items: center; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.capture-item-details label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 650; cursor: pointer; }.capture-item-details input { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--accent); }
.capture-item-details p { margin: 4px 0; font-size: 12px; line-height: 1.4; }.capture-item-details button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }.capture-item-error { overflow-wrap: anywhere; color: var(--ink-dim); }.capture-error { color: var(--bad); }
.capture-empty { text-align: center; font-size: 16px; padding: 24px 0; }
.capture-note { display: grid; gap: 12px; margin: 24px auto 0; max-width: 720px; }.capture-note label { font-size: 14px; font-weight: 650; }.capture-note textarea { width: 100%; min-height: 104px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); font-size: 16px; }
.capture-voice { min-height: 56px; padding: 12px 16px; border: 1px solid var(--ink); border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 650; }.capture-voice[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.capture-review-actions { display: grid; gap: 8px; max-width: 720px; margin: 12px auto 0; }.capture-review-actions button { min-height: 56px; padding: 12px; border-radius: 14px; font-weight: 700; }
.capture-primary { background: var(--accent); color: var(--surface); border: 1px solid var(--accent); }.capture-secondary { background: transparent; color: var(--surface); border: 1px solid var(--ink-dim); }
.capture-session[data-view="review"] .capture-dock .capture-hint { margin-top: 0; }
@media (min-width: 720px) { .capture-header { padding-inline: 24px; }.capture-session .capture-stage > video { max-width: 100%; margin: auto; }.capture-actions { max-width: 480px; margin: auto; }.capture-review { padding-inline: max(24px,calc((100vw - 720px)/2)); }.capture-review-actions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .capture-actions { gap: 8px; }.capture-side { gap: 4px; }.capture-gallery svg { width: 16px; height: 16px; } }
@media (max-height: 520px) and (orientation: landscape) { .capture-header { min-height: 56px; padding-block: 0; }.capture-dock { padding-top: 8px; }.capture-session .capture-modes { top: 8px; }.capture-live-status { top: 60px; }.capture-camera-message { padding-top: 60px; }.capture-session .capture-hint { margin-top: 8px; } }
/* 320px only. Stop sits at the top of the review so the dock cannot cover it.
   Wider phones already show the button above the fold in the note stack. */
@media (max-width: 320px) {
  .capture-session[data-view="review"] .capture-review { display: flex; flex-direction: column; align-items: stretch; }
  .capture-session[data-view="review"] .capture-note { display: contents; }
  .capture-session[data-view="review"] #show-me-talk {
    order: -1; position: sticky; top: 0; z-index: 1; flex: none;
    min-height: 56px; margin-bottom: 12px;
  }
}