/**
 * /mobile/css/profile-overlay.css — OiNK ProfileOverlay styles.
 *
 * Naming law: po-, profile-overlay only. NO lightbox/lb- variants.
 * Mobile-first. Tablet + desktop progressive enhancement.
 * Tokens: snoutos.css custom properties (assumed loaded upstream).
 *
 * Variants: full (default) / sheet / compact.
 * Tones (triggers): primary / ghost / danger.
 * Modifiers: --no-dim, --no-blur (per-instance).
 */

/* ───────────────────────────────────────────── */
/* Root overlay layer                            */
/* ───────────────────────────────────────────── */

.po {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  pointer-events: auto;
  contain: layout paint style;
}

.po[hidden] { display: none; }

.po-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(8% 0.02 280 / 0.78);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.po--no-dim  .po-backdrop { background: transparent; }
.po--no-blur .po-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }

.po--open .po-backdrop { opacity: 1; }

/* ───────────────────────────────────────────── */
/* Panel — full (default)                        */
/* ───────────────────────────────────────────── */

.po-panel {
  position: relative;
  background: color-mix(in oklch, oklch(14% 0.03 280) 92%, transparent);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  border: 1px solid color-mix(in oklch, oklch(97% 0.01 280) 10%, transparent);
  border-radius: 28px;
  box-shadow:
    0 8px 48px oklch(0% 0 0 / 0.45),
    inset 0 1px 0 oklch(100% 0 0 / 0.06);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  width: min(92vw, 680px);
  overflow: hidden;
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.po-panel:focus { outline: none; }

.po--open .po-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Variant: sheet — bottom-anchored, full-width */
.po--sheet { place-items: end center; }
.po--sheet .po-panel {
  width: 100%;
  max-width: none;
  border-radius: 28px 28px 0 0;
  max-height: 88vh;
  transform: translateY(100%);
}
.po--sheet.po--open .po-panel { transform: translateY(0); }

/* Variant: compact — smaller frame */
.po--compact .po-panel { width: min(86vw, 420px); }

/* ───────────────────────────────────────────── */
/* Header                                        */
/* ───────────────────────────────────────────── */

.po-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid color-mix(in oklch, oklch(97% 0.01 280) 6%, transparent);
}

.po-titles { flex: 1; min-width: 0; }

.po-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(98% 0.01 280);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: oklch(72% 0.02 280);
  line-height: 1.3;
}

.po-close {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, oklch(97% 0.01 280) 10%, transparent);
  background: oklch(100% 0 0 / 0.04);
  color: oklch(85% 0.02 280);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 160ms, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.po-close:hover  { background: oklch(100% 0 0 / 0.10); }
.po-close:active { transform: scale(0.92); }
.po-close:focus-visible {
  outline: 2px solid oklch(72% 0.22 20);
  outline-offset: 2px;
}
.po-close svg { width: 20px; height: 20px; }

/* ───────────────────────────────────────────── */
/* Body                                          */
/* ───────────────────────────────────────────── */

.po-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  font-size: 18px;
  line-height: 1.5;
  color: oklch(94% 0.01 280);
}

.po-body p { margin: 0 0 12px; }
.po-body a {
  color: oklch(78% 0.18 240);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
}

/* ───────────────────────────────────────────── */
/* Footer                                        */
/* ───────────────────────────────────────────── */

.po-footer {
  padding: 16px 24px;
  border-top: 1px solid color-mix(in oklch, oklch(97% 0.01 280) 6%, transparent);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ───────────────────────────────────────────── */
/* Triggers — kink couture glyph buttons         */
/* ───────────────────────────────────────────── */

.po-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, oklch(97% 0.01 280) 14%, transparent);
  background: color-mix(in oklch, oklch(14% 0.03 280) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: oklch(94% 0.02 280);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 180ms,
    border-color 180ms,
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.po-trigger:hover {
  background: color-mix(in oklch, oklch(18% 0.04 280) 80%, transparent);
  border-color: color-mix(in oklch, oklch(97% 0.01 280) 22%, transparent);
}
.po-trigger:active { transform: scale(0.96); }
.po-trigger:focus-visible {
  outline: 2px solid oklch(72% 0.22 20);
  outline-offset: 2px;
}

.po-trigger--primary {
  background: linear-gradient(135deg, oklch(72% 0.22 20), oklch(70% 0.20 30));
  border-color: transparent;
  color: oklch(99% 0 0);
}
.po-trigger--primary:hover {
  background: linear-gradient(135deg, oklch(76% 0.24 20), oklch(74% 0.22 30));
}

.po-trigger--ghost { /* default style above */ }

.po-trigger--danger {
  background: color-mix(in oklch, oklch(60% 0.22 28) 30%, transparent);
  border-color: color-mix(in oklch, oklch(70% 0.22 28) 50%, transparent);
  color: oklch(94% 0.10 28);
}
.po-trigger--danger:hover {
  background: color-mix(in oklch, oklch(60% 0.22 28) 45%, transparent);
}

.po-trigger--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}

.po-trigger-glyph {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
}
.po-trigger-glyph svg { width: 100%; height: 100%; }

/* ───────────────────────────────────────────── */
/* Tablet & desktop                              */
/* ───────────────────────────────────────────── */

@media (min-width: 768px) {
  .po-panel       { max-width: 720px; }
  .po--full .po-panel { max-width: 760px; }
}

@media (min-width: 1024px) {
  .po--full .po-panel { max-width: 840px; }
}

/* ───────────────────────────────────────────── */
/* Reduced motion / contrast                     */
/* ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .po-backdrop,
  .po-panel,
  .po-trigger,
  .po-close { transition: none; }
}

@media (prefers-contrast: more) {
  .po-panel    { border-color: oklch(98% 0.01 280); }
  .po-trigger  { border-color: oklch(80% 0.02 280); }
}

/* ───────────────────────────────────────────── */
/* Safe-area (iPhone notch / home indicator)     */
/* ───────────────────────────────────────────── */

@supports (padding: env(safe-area-inset-bottom)) {
  .po--sheet .po-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .po-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}