/* ==========================================================================
   BottomSheet Primitive — FFA Mobile Redesign Phase 1
   Mobile-only (<768px). On desktop these classes are inert.
   ========================================================================== */

/* ── Overlay / backdrop ── */
.bottom-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.bottom-sheet-overlay.visible {
  display: block;
  opacity: 1;
}

/* ── Sheet container ── */
.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-sheet.open {
  transform: translateY(0);
}

/* Height variants */
.bottom-sheet.sheet-mid {
  max-height: 50dvh;
}

.bottom-sheet.sheet-full {
  max-height: calc(100dvh - 44px);
}

/* Edge-to-edge full-screen (operationalizes the Full-Screen Rule for major
   modals — Import Media is the first consumer; meticulous-tailoring-canvas
   S2). Status-bar safe-area respected at top via padding-top; home-indicator
   safe-area already handled by the base .bottom-sheet padding-bottom. */
.bottom-sheet.sheet-fullscreen {
  /* Chrome contract pattern 2 (mobile.css § FIXED-OVERLAY modal): the bottom
     anchors ABOVE the global tab bar, which paints over every sheet (z 11000 vs
     1101) and owns the home-indicator inset. converging-mobile-import S6
     measured `inset: 0` putting the Import's "Add N" under the bar — the tap
     hit a tab, not the button (tests/mobile/import-converged.webkit.js C4) —
     the same defect the library filter sheet patched in its own footer on
     2026-05-12; both consumers now inherit the fix here. */
  inset: 0 0 var(--mobile-tab-bar-total-height, calc(48px + env(safe-area-inset-bottom, 0px))) 0;
  max-height: none;
  border-radius: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 0;
}

/* ── Drag handle ── */
.bottom-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  flex-shrink: 0;
}

.bottom-sheet-handle::after {
  content: '';
  width: 36px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
}

/* ── Header (title + close) ── */
.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
  flex-shrink: 0;
}

.bottom-sheet-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.bottom-sheet-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-sheet-close:active {
  background: #f3f4f6;
}

/* ── Scrollable content ── */
.bottom-sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
  overscroll-behavior-y: contain;
}

/* ── Footer (optional action bar) ── */
.bottom-sheet-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
}

.bottom-sheet-footer .btn {
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   Person sheet (.mps-*) — U3, 2026-08-14
   The person card that opens OVER a running story when a member taps a person
   glyph mid-presentation (mobile-person-modal.js). It lives here rather than in
   its own stylesheet because it only ever renders INSIDE a .bottom-sheet, so
   shipping it with the sheet primitive means one <link> carries both — the
   "ship a module's CSS with it" lesson recorded in inject_pocket_boot.py.
   ══════════════════════════════════════════════════════════════════════════ */

.mps-body {
  padding: 4px 2px 8px;
}

.mps-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.mps-headshot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e5e7eb;
}

.mps-ident {
  min-width: 0;   /* lets a long name ellipsize instead of pushing the row wide */
}

.mps-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
}

.mps-dates {
  margin-top: 2px;
  font-size: 0.88rem;
  color: #6b7280;
}

.mps-summary {
  font-size: 0.94rem;
  line-height: 1.5;
  color: #374151;
}

.mps-muted,
.mps-loading {
  color: #9ca3af;
  font-style: italic;
}

/* ── Actions. Close is the default (resumes the story); the navigator button is
      the DELIBERATE exit, so it is the visually primary one. ── */
.mps-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  /* U3 fix (caught by the Playwright proof, not by reading): the persistent
     mobile Control Panel sits ABOVE the sheet and its buttons intercepted the
     pointer — "Close" was visible but UNTAPPABLE. Every modal-class surface
     reserves room for the bar at the bottom of its viewport (the contract
     mobile.css states and mobile-umi.css already honors). The fallback matters:
     produced story pages do not load mobile.css, so the var is undefined there
     — same reason mobile-drawer.css:73 carries one. */
  padding-bottom: var(--mobile-modal-bottom-reservation,
                      calc(var(--mobile-tab-bar-height, 48px) + env(safe-area-inset-bottom, 0px) + 16px));
}

.mps-btn {
  flex: 1 1 0;
  min-width: 0;             /* both buttons share the bar on a 320px phone */
  min-height: 44px;         /* touch target floor */
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.mps-btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.mps-btn-primary {
  background: #0f766e;
  color: #fff;
}

/* ── Desktop: hide all bottom-sheet elements ── */
@media (min-width: 768px) {
  .bottom-sheet-overlay,
  .bottom-sheet {
    display: none !important;
  }
}