/* SMAU FILE
 * Path: css/smau-sheets.css
 * Owns:
 *   - Bottom sheet visuals (about/support)
 *   - Sheet panel layout + scroll behavior
 *   - Sheet scrim visuals
 * Truth:
 *   - data-state="open" shows (and is interactive)
 *   - anything else is closed (and must be inert, no gesture dead zones)
 * Accessibility:
 *   - aria-hidden is mirror-only (NOT truth)
 * Safety:
 *   - Visual-only; no mechanics truth beyond presentation
 */

.smau-sheet{
  --smau-sheet-dur: 0.32s;
  --smau-sheet-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --smau-sheet-scrim-bg: rgba(0, 0, 0, 0.70);
  --smau-sheet-scrim-blur: 12px;

  --smau-sheet-panel-bg:
    linear-gradient(180deg,
      rgba(20, 28, 45, 0.96),
      rgba(15, 23, 42, 0.98)
    );
  --smau-sheet-panel-border: rgba(148, 163, 184, 0.20);
  --smau-sheet-panel-shadow:
    0 -20px 60px rgba(0, 0, 0, 0.70),
    0 -4px 16px rgba(0, 0, 0, 0.50);
  --smau-sheet-panel-radius: 28px 28px 0 0;
  --smau-sheet-panel-blur: 24px;

  --smau-sheet-max-w: 440px;
  --smau-sheet-max-h: 70vh;

  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  z-index: var(--z-modal, 200);

  /* Critical: closed sheets must not block taps/gestures */
  pointer-events: none;
  touch-action: pan-x pan-y pinch-zoom;
}

.smau-sheet[data-state="open"]{
  pointer-events: auto;
  touch-action: none;
}

.smau-sheet-scrim{
  position: absolute;
  inset: 0;

  background: var(--smau-sheet-scrim-bg);
  backdrop-filter: blur(var(--smau-sheet-scrim-blur));
  -webkit-backdrop-filter: blur(var(--smau-sheet-scrim-blur));

  opacity: 0;
  transition: opacity var(--smau-sheet-dur) var(--smau-sheet-ease);

  cursor: pointer;

  /* Belt and suspenders: scrim never blocks when closed */
  pointer-events: none;
  touch-action: pan-x pan-y pinch-zoom;
}

.smau-sheet[data-state="open"] .smau-sheet-scrim{
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
}

.smau-sheet-panel{
  position: relative;

  width: 100%;
  max-width: var(--smau-sheet-max-w);
  max-height: var(--smau-sheet-max-h);

  background: var(--smau-sheet-panel-bg);
  border: 1px solid var(--smau-sheet-panel-border);
  border-bottom: none;
  border-radius: var(--smau-sheet-panel-radius);

  box-shadow: var(--smau-sheet-panel-shadow);

  backdrop-filter: blur(var(--smau-sheet-panel-blur));
  -webkit-backdrop-filter: blur(var(--smau-sheet-panel-blur));

  display: flex;
  flex-direction: column;

  overflow: hidden;

  transform: translateY(100%);
  opacity: 0;

  transition:
    transform var(--smau-sheet-dur) var(--smau-sheet-ease),
    opacity var(--smau-sheet-dur) var(--smau-sheet-ease);
}

.smau-sheet[data-state="open"] .smau-sheet-panel{
  transform: translateY(0);
  opacity: 1;
}

.smau-sheet-panel::before{
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 40px;
  height: 4px;

  border-radius: 999px;
  background: rgba(148, 163, 184, 0.30);

  pointer-events: none;
  z-index: 1;
}

.smau-sheet-header{
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 32px 28px 20px;

  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 100%
  );
}

.smau-sheet-title{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(241, 245, 249, 1);

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

.smau-sheet-close{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;

  color: rgba(241, 245, 249, 0.75);
  font-size: 26px;
  line-height: 1;
  font-weight: 300;

  cursor: pointer;

  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.smau-sheet-close:hover{
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.28);
  color: rgba(241, 245, 249, 0.95);
  transform: scale(1.05);
}

.smau-sheet-close:active{ transform: scale(0.95); }

.smau-sheet-body{
  flex: 1 1 auto;

  padding: 28px;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.smau-sheet-lede{
  margin: 0 0 28px;

  font-size: 16px;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.92);
  font-weight: 400;
}

.smau-sheet-cards{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.smau-sheet-card{
  padding: 20px 22px;

  background:
    linear-gradient(135deg,
      rgba(30, 41, 59, 0.50) 0%,
      rgba(15, 23, 42, 0.70) 100%
    );
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.smau-sheet-card:hover{
  background:
    linear-gradient(135deg,
      rgba(30, 41, 59, 0.65) 0%,
      rgba(15, 23, 42, 0.85) 100%
    );
  border-color: rgba(148, 163, 184, 0.24);
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.smau-sheet-card-title{
  font-size: 15px;
  font-weight: 600;
  color: rgba(241, 245, 249, 0.98);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.smau-sheet-card-body{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(203, 213, 225, 0.88);
}

.smau-sheet-meta{
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 20px 0 0;
  margin-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.smau-sheet-meta-row{
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 14px;
  padding: 8px 0;
}

.smau-sheet-meta-k{
  color: rgba(148, 163, 184, 0.85);
  font-weight: 500;
}

.smau-sheet-meta-v{
  color: rgba(241, 245, 249, 0.95);
  font-weight: 600;
}

.smau-sheet-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.smau-sheet-linkbtn{
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px 24px;

  background:
    linear-gradient(135deg,
      rgba(79, 140, 255, 0.14) 0%,
      rgba(79, 140, 255, 0.10) 100%
    );
  border: 1px solid rgba(79, 140, 255, 0.28);
  border-radius: 12px;

  color: rgba(99, 170, 255, 0.98);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;

  cursor: pointer;

  box-shadow:
    0 4px 12px rgba(79, 140, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.smau-sheet-linkbtn:hover{
  background:
    linear-gradient(135deg,
      rgba(79, 140, 255, 0.22) 0%,
      rgba(79, 140, 255, 0.16) 100%
    );
  border-color: rgba(79, 140, 255, 0.40);
  color: rgba(119, 190, 255, 1);
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(79, 140, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.smau-sheet-linkbtn:active{ transform: translateY(0); }

.smau-sheet-note{
  padding: 16px 20px;

  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;

  font-size: 14px;
  line-height: 1.6;
  color: rgba(148, 163, 184, 0.92);
  text-align: center;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10);
}

.smau-sheet-footer{
  display: flex;
  gap: 12px;

  padding: 20px 28px 28px;

  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

.smau-sheet-btn{
  flex: 1;

  padding: 16px 24px;

  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 12px;

  color: rgba(241, 245, 249, 0.88);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;

  cursor: pointer;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.smau-sheet-btn:hover{
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.30);
  color: rgba(241, 245, 249, 0.98);
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.smau-sheet-btn:active{ transform: translateY(0); }

.smau-sheet-btn.primary{
  background:
    linear-gradient(135deg,
      rgba(79, 140, 255, 0.96) 0%,
      rgba(59, 130, 246, 0.98) 100%
    );
  border-color: rgba(79, 140, 255, 1);
  color: rgba(255, 255, 255, 0.98);

  box-shadow:
    0 4px 16px rgba(79, 140, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.smau-sheet-btn.primary:hover{
  background:
    linear-gradient(135deg,
      rgba(99, 160, 255, 1) 0%,
      rgba(79, 150, 255, 1) 100%
    );
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(79, 140, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media (max-width: 480px){
  .smau-sheet-panel{
    max-width: 100%;
    border-radius: 24px 24px 0 0;
  }

  .smau-sheet-header{ padding: 28px 24px 18px; }
  .smau-sheet-title{ font-size: 22px; }
  .smau-sheet-body{ padding: 24px; }
  .smau-sheet-footer{ padding: 18px 24px 24px; }
}

@supports (padding: env(safe-area-inset-bottom)){
  .smau-sheet-footer{
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px));
  }
}

:root[data-theme="light"] .smau-sheet,
[data-phone][data-theme="light"] .smau-sheet{
  --smau-sheet-scrim-bg: rgba(12, 14, 22, 0.40);

  --smau-sheet-panel-bg:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 250, 252, 0.96)
    );
  --smau-sheet-panel-border: rgba(12, 14, 22, 0.14);
  --smau-sheet-panel-shadow:
    0 -20px 60px rgba(0, 0, 0, 0.22),
    0 -4px 16px rgba(0, 0, 0, 0.10);
}

:root[data-theme="light"] .smau-sheet-panel::before,
[data-phone][data-theme="light"] .smau-sheet-panel::before{
  background: rgba(12, 14, 22, 0.18);
}

:root[data-theme="light"] .smau-sheet-title,
[data-phone][data-theme="light"] .smau-sheet-title{
  color: rgba(12, 14, 22, 0.95);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.80);
}

:root[data-theme="light"] .smau-sheet-lede,
[data-phone][data-theme="light"] .smau-sheet-lede{
  color: rgba(12, 14, 22, 0.78);
}

:root[data-theme="light"] .smau-sheet-card,
[data-phone][data-theme="light"] .smau-sheet-card{
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(248, 250, 252, 0.90) 100%
    );
  border-color: rgba(12, 14, 22, 0.12);
}

:root[data-theme="light"] .smau-sheet-card:hover,
[data-phone][data-theme="light"] .smau-sheet-card:hover{
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(248, 250, 252, 1) 100%
    );
  border-color: rgba(12, 14, 22, 0.16);
}

:root[data-theme="light"] .smau-sheet-card-title,
[data-phone][data-theme="light"] .smau-sheet-card-title{
  color: rgba(12, 14, 22, 0.95);
}

:root[data-theme="light"] .smau-sheet-card-body,
[data-phone][data-theme="light"] .smau-sheet-card-body{
  color: rgba(12, 14, 22, 0.72);
}

:root[data-theme="light"] .smau-sheet-close,
[data-phone][data-theme="light"] .smau-sheet-close{
  background: rgba(12, 14, 22, 0.08);
  border-color: rgba(12, 14, 22, 0.12);
  color: rgba(12, 14, 22, 0.65);
}

:root[data-theme="light"] .smau-sheet-close:hover,
[data-phone][data-theme="light"] .smau-sheet-close:hover{
  background: rgba(12, 14, 22, 0.12);
  border-color: rgba(12, 14, 22, 0.18);
  color: rgba(12, 14, 22, 0.90);
}

:root[data-theme="light"] .smau-sheet-btn,
[data-phone][data-theme="light"] .smau-sheet-btn{
  background: rgba(12, 14, 22, 0.08);
  border-color: rgba(12, 14, 22, 0.12);
  color: rgba(12, 14, 22, 0.80);
}

:root[data-theme="light"] .smau-sheet-btn:hover,
[data-phone][data-theme="light"] .smau-sheet-btn:hover{
  background: rgba(12, 14, 22, 0.12);
  border-color: rgba(12, 14, 22, 0.18);
  color: rgba(12, 14, 22, 0.95);
}

@media (prefers-reduced-motion: reduce){
  .smau-sheet-scrim,
  .smau-sheet-panel,
  .smau-sheet-card,
  .smau-sheet-close,
  .smau-sheet-btn,
  .smau-sheet-linkbtn{
    transition: none !important;
  }
}