/**
 * css/components/sheet-manager.css
 * 05 Sep 2026 v3
 *
 * v3 - SURFACE-TOKEN. Two `color: var(--color-surface, #E8F4F4)` uses
 *      repointed to --color-text. A background token was doing a text
 *      job and was already failing: #E8F4F4 on the light scheme's
 *      #F8FAFC is 1.07:1, so .sheet-skip was invisible for anyone on
 *      SCHEME-1. --color-text adapts per scheme (11.87 / 17.06 / 21.00).
 *
 * v2 — Found and fixed the REAL cause of the "cramped Continue button"
 *   bug, after four rounds of incorrect fixes in onboarding-additions.css
 *   (each one styling goals.js's own markup, which was never the actual
 *   problem). This file's own .sheet-content had zero bottom padding, on
 *   the assumption all sheet content uses .sheet-footer for its action
 *   button. It doesn't — goals.js, conditions.js, and equipment.js are
 *   old-pattern views injected directly into .sheet-content via
 *   innerHTML, each bringing its own in-content action button. That
 *   button was rendering flush against the scroll area's bottom edge
 *   every time, no matter what padding was added inside those views'
 *   own CSS, because the outer scroll container itself had no clearance
 *   at all. See the full explanation at the .sheet-content rule below.
 *
 * v1 — Sheet manager UI.
 * 95% height bottom sheet with drag handle, overlay, and
 * slide-up / slide-down animation.
 *
 * Used by onboarding thread (goals, conditions, equipment, plan-select)
 * and available for future use throughout the app.
 *
 * Imported by css/main.css.
 * WCAG 2.2 AA: focus trap within open sheet, overlay dismissal,
 * prefers-reduced-motion respected.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   OVERLAY
   Semi-transparent layer behind the sheet.
   Tapping overlay closes the sheet (same as tapping Done/Skip).
───────────────────────────────────────────────────────────────────────────── */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.sheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-overlay { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHEET PANEL
   95% viewport height. Slides up from bottom.
   Rounded top corners. Deep navy background.
   Contains: drag handle, header area, scrollable content, done button.
───────────────────────────────────────────────────────────────────────────── */

.sheet-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 95dvh;
  background: #0F1E1E; /* slightly lighter than --color-dark for the sheet surface */
  border-radius: 20px 20px 0 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  overflow: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
  .sheet-panel {
    transition: none;
    /* still slides in instantly — just no easing */
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DRAG HANDLE
   Decorative. Centred at top of sheet.
   aria-hidden — sheet closure is via the Done/Skip buttons.
───────────────────────────────────────────────────────────────────────────── */

.sheet-handle {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}

.sheet-handle__bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-mid, #2C3E3E);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHEET HEADER
   Optional title row. Used by some sheet views (e.g. goals).
   Not required — sheet views that don't need a title omit this.
───────────────────────────────────────────────────────────────────────────── */

.sheet-header {
  flex-shrink: 0;
  padding: 4px 20px 16px;
  border-bottom: 1px solid var(--color-mid, #2C3E3E);
}

.sheet-header__title {
  font-size: calc(1.1rem * var(--user-text-scale, 1));
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.sheet-header__subtitle {
  font-size: calc(0.875rem * var(--user-text-scale, 1));
  color: var(--color-muted, #6B8585);
  margin: 4px 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHEET CONTENT
   Scrollable. Flex-grows to fill available space.
   Padding gives content breathing room above the done button.
───────────────────────────────────────────────────────────────────────────── */

.sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 32px;
  /* CONFIRMED ROOT CAUSE of the persistent "cramped Continue button"
     report (multiple rounds of CSS fixes in onboarding-additions.css
     never worked because they were the wrong layer entirely):
     goals.js, conditions.js, and equipment.js are old-pattern views
     whose render() output is injected directly into .sheet-content via
     innerHTML — they are NEVER mounted into .sheet-footer. Each of
     these views brings its own action button inside its own markup
     (goals.js's <footer class="onboarding-footer">, equipment.js's
     <div class="onboarding-actions">, etc.) rather than using the
     sheet's dedicated footer area. The previous bottom padding of 0
     ("handled by sheet-footer height") was correct only for content
     that actually uses .sheet-footer — which none of the three reused
     onboarding views do. That zero padding meant every reused view's
     own Continue/Done/Finish button rendered flush against the bottom
     edge of the scrollable area, with safe-area-inset-bottom the only
     thing between it and the device chrome. Fixed by giving
     .sheet-content real bottom padding so ANY content injected this
     way — now or in future — has guaranteed clearance regardless of
     whether it brings its own footer or relies on .sheet-footer. */
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHEET FOOTER
   Fixed-height area at the bottom of the sheet.
   Contains the Done button (and optionally a skip link).
   Sits above safe-area-inset-bottom.
───────────────────────────────────────────────────────────────────────────── */

.sheet-footer {
  flex-shrink: 0;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-mid, #2C3E3E);
  background: #0F1E1E;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Done button */
.sheet-done {
  display: block;
  width: 100%;
  padding: 14px 24px;
  min-height: 52px;
  border-radius: 12px;
  border: none;
  background: var(--color-primary, #1B6B6B);
  color: #ffffff;
  font-size: calc(1rem * var(--user-text-scale, 1));
  font-weight: 600;
  cursor: pointer;
  transition: background 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.sheet-done:hover { background: #155858; }

.sheet-done:focus-visible {
  outline: 3px solid var(--color-primary, #1B6B6B);
  outline-offset: 3px;
}

.sheet-done:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-done { transition: none; }
}

/* Skip link — optional, below Done button */
.sheet-skip {
  display: block;
  width: 100%;
  padding: 8px 24px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--color-muted, #6B8585);
  font-size: calc(0.9rem * var(--user-text-scale, 1));
  text-align: center;
  cursor: pointer;
  transition: color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.sheet-skip:hover { color: var(--color-text); }

.sheet-skip:focus-visible {
  outline: 3px solid var(--color-primary, #1B6B6B);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-skip { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOCUS TRAP INDICATOR
   When sheet is open, focus is trapped inside.
   The first focusable element inside .sheet-panel receives focus on open.
   This is handled by sheet-manager.js — no additional CSS needed.
   Ensure all interactive elements inside the sheet have visible focus rings.
───────────────────────────────────────────────────────────────────────────── */

.sheet-panel :focus-visible {
  outline: 3px solid var(--color-primary, #1B6B6B);
  outline-offset: 2px;
}