/* App shell (LMA-P1-CAPTURE) — docs/fsdd/design-guide/design-guide.md DG-V1
 * regions for every authenticated screen. Tokens only (DG-T1). Mobile-first:
 * base rules ARE the phone layout, one desktop adaptation at 768px (DG-T7). */

.shell {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-ink);
  /* 2026-06-10 incident: a browser without dvh support DROPS the declaration —
   * the shell collapsed to auto height and the (then in-flow) bottom bar
   * rendered below the fold: "absolutely nothing in the navigation" on device
   * while desktop Chrome looked perfect. vh fallback first, dvh refinement. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  /* DG-V3: the shell itself never scrolls — only #content does. */
  overflow: hidden;
}

/* DG-V2: header <= 56px — title + at most one back + one contextual action.
 * DG-V6: padded by the top safe-area inset in PWA standalone. */
.shell-header {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* DG-X2: >= 8px between adjacent targets */
  min-height: var(--tap-preferred);
  max-height: 56px;
  padding: 0 var(--space-4);
  padding-top: env(safe-area-inset-top);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex: none;
}

.shell-title {
  font-size: var(--text-xl); /* DG-T3 / DG-V2: screen title */
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
  flex: 1;
}

.shell-header-action {
  flex: none;
}

/* Quiet contextual action (DG-H3: never accent-filled). */
.shell-quiet-action {
  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);
  cursor: pointer;
}

.shell-back {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);  /* DG-X2 */
  min-height: var(--tap-min);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-tight);
}

/* DG-V3: the ONLY scroll container — shell chrome never scrolls away. */
.shell-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4); /* DG-T2 screen gutters */
  /* Reserve room for the pinned bottom bar (height + safe area) so the last
   * content row is never hidden beneath it (2026-06-10 incident fix). */
  padding-bottom: calc(var(--space-4) + 72px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* DG-T2 section separation */
}

/* DG-V4/DG-V5: fixed bottom bar — 4 nav destinations (Inbox, Capture, Tasks,
 * More — LMA-S1-NAV shell amendment, FSDD Ch 21) with the capture affordance
 * in its dedicated auto slot, thumb zone, padded by the bottom safe-area
 * (DG-V6). */
.shell-bottom-bar {
  /* 2026-06-10 incident fix: PINNED to the visual viewport, never trusted to
   * flex flow — position:fixed survives shell-height collapse, dvh
   * non-support, and dynamic mobile toolbars. Rendered-visibility is a tested
   * contract: spec/system/navigation_visibility_spec.rb. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: var(--space-2); /* DG-X2 */
  padding: var(--space-2) var(--space-4);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.shell-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: var(--tap-preferred);  /* DG-V4: preferred-size targets */
  min-height: var(--tap-preferred);
  justify-content: center;
  color: var(--color-ink-muted);
  text-decoration: none;
}

.shell-nav-item--current {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

.shell-nav-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.shell-nav-label {
  font-size: var(--text-xs); /* DG-V4: icon + visible text label */
}

/* DG-V5 (DECIDED): the capture affordance — center bottom-bar slot,
 * --radius-full, --color-accent; shell, so exempt from DG-H3's count. */
.shell-capture-affordance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--color-ink-muted);
}

.shell-capture-affordance-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-preferred);  /* DG-X2: 48px preferred */
  height: var(--tap-preferred);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  box-shadow: var(--shadow-raised);
}

/* DG-S4 toast region: fixed overlay above the bottom bar so it never covers
 * the capture affordance; polite live region, never focused (DG-X4). */
.shell-toasts {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-12) + var(--space-8) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  z-index: 3; /* above the pinned bottom bar (z-index 2) */
}

/* DG-X4: visible 2px focus ring with 2px offset on every interactive element
 * (the 2px values are mandated literally by the rule itself). */
.shell a:focus-visible,
.shell button:focus-visible,
.shell input:focus-visible,
.shell textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* DG-T7: desktop adaptation — a centered single column, not stretched mobile
 * cards (per-screen desktop layouts arrive with their own stories). */
@media (min-width: 768px) {
  .shell-content {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
  }
}