/* ============================================================
   COMPONENT · CAPTURE  (c-capture)
   The persistent, shell-owned capture control (B5: capture is sacred). One DOM,
   two presentations: a pinned bar at the top of the content column on desktop;
   a bottom sheet over the current screen on mobile, opened by the bottom bar's
   ⊕ (the .app-shell wrapper gets .is-capture-open). The sheet auto-focuses on
   open, confirms in place, clears for the next thought, and dismisses by the
   scrim or the handle — it never navigates away and never loses input. Dynamic
   viewport units + safe-area insets keep it stable through the address-bar dance.
   The inner form + #capture-status flow is preserved verbatim (see _capture_bar).
   ============================================================ */

/* ---- Desktop: a calm pinned bar at the top of the content column ----- */
.c-capture {
  /* Breathing room down to the page content — var(--space-4) read as cramped
     under the bar. The top inset (below the appbar) is owned by .app-shell__main
     so the two gaps stay balanced. (Overridden to 0 on mobile, where capture is
     the fixed bottom sheet.) */
  margin-bottom: var(--space-5);
}
.c-capture__scrim { display: none; }
.c-capture__handle { display: none; }
.c-capture__title { display: none; } /* the form's own "Capture" label carries it on desktop */
.c-capture__panel {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-surface-raised) 70%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.c-capture__status:empty { display: none; }
.c-capture__status { margin-top: var(--space-2); }

/* ---- Mobile: a bottom sheet, hidden until the ⊕ opens it -------------- */
@media (max-width: 45rem) { /* --bp-md (720px) */
  .c-capture {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast);
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
  }
  .c-capture__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--shadow-color) 55%, transparent);
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease-snap);
  }
  .c-capture__panel {
    position: relative;
    border: 0;
    border-top: var(--border-thick) solid var(--color-bezel-dark);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0));
    max-height: 85svh;
    overflow-y: auto;
    background: var(--color-surface-raised);
    box-shadow: 0 -8px 32px color-mix(in srgb, var(--shadow-color) 60%, transparent);
    transform: translateY(100%);
    transition: transform var(--dur-medium) var(--ease-snap);
  }
  .c-capture__handle {
    display: block;
    width: 2.5rem;
    height: 4px;
    margin: 0 auto var(--space-3);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-border);
    cursor: pointer;
  }
  .c-capture__title {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-data);
    font-size: var(--fs-md);
    color: var(--color-text-emphasis);
  }

  /* Opened by the capture controller toggling .is-capture-open on .app-shell. */
  .app-shell.is-capture-open .c-capture {
    visibility: visible;
    pointer-events: auto;
  }
  .app-shell.is-capture-open .c-capture__scrim { opacity: 1; }
  .app-shell.is-capture-open .c-capture__panel { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .c-capture__scrim,
  .c-capture__panel { transition: none; }
}