/*
 * Component: Layout
 *
 * App shell, content areas, and page headers.
 * Sidebar-based layout replacing the old bottom nav.
 */

/* ============================================================================
   APP BACKGROUND - Fixed layer behind app-content
   Not a child of app-content, so it's never affected by the zoom-out transform.
   html background (--card-bg-pure on desktop with sidebar) shows in the sidebar
   strip, giving Safari's window chrome the right color to sample.
   ============================================================================ */

.app-bg {
  position: fixed;
  inset: 0;
  left: var(--sidebar-width);
  background: var(--bg);
  z-index: -1;
}

.app-bg--full {
  left: 0;
}

@media (max-width: 767px) {
  .app-bg {
    left: 0;
  }
}

/* ============================================================================
   APP CONTENT - Main content area (right of sidebar)
   ============================================================================ */

.app-content {
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  transition: transform var(--transition-standard), border-radius var(--transition-standard);
  scrollbar-gutter: stable;
}

/* Full width when no sidebar (auth pages, welcome) */
.app-content--full {
  margin-left: 0;
}

/* Mobile: no left margin, confined scroll container, account for bottom nav */
@media (max-width: 767px) {
  .app-content {
    margin-left: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: none;
    padding-bottom: calc(var(--nav-height-mobile) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================================
   CONTENT MAIN - Page content container
   ============================================================================ */

.content-main {
  flex: 1;
  padding: var(--space-xl);
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* Narrow variant - forms and focused pages */
.content-main--narrow {
  max-width: 640px;
  margin: 0 auto;
}

/* Extra narrow - auth pages */
.content-main--auth {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 52px);
}

/* Full width - no max-width constraint */
.content-main--full {
  max-width: none;
}

/* Auth pages (no sidebar) - centered layout */
.app-content--full .content-main {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

/* Mobile content padding */
@media (max-width: 767px) {
  .content-main {
    padding: var(--space-md);
  }

  /* Account for the mobile topbar safe area */
  .content-main--safe-top {
    padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================================
   PAGE HEADER - Title + subtitle inside content-main
   ============================================================================ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.page-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.player-header-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.player-header-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.player-header-avatar .player-photo,
.player-header-avatar .player-photo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Icon-only buttons in page-header-actions on mobile */
@media (max-width: 767px) {
  .page-header-actions .btn .btn-text {
    display: none;
  }

  .page-header-actions .btn {
    padding: var(--space-sm);
    width: 42px;
    height: 42px;
    min-block-size: unset;
    justify-content: center;
  }

  .page-header-actions .btn-secondary--confirmed {
    display: none;
  }

  .page-header-actions .btn .tier-badge {
    width: auto;
  }

  .page-header-actions .btn:has(.tier-badge) {
    width: auto;
  }
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text);
  margin-block-end: var(--space-sm);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
}

.page-header .page-title {
  margin-block-end: 0;
  text-align: left;
}

.page-header-logo {
  flex-shrink: 0;
}

.page-header-logo .organization-logo-display,
.page-header-logo .organization-logo-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
}

.page-subtitle {
  color: var(--text-light);
  font-size: var(--text-base);
  max-inline-size: 60ch;
}

.page-intro {
  color: var(--text-light);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

/* ============================================================================
   BACK LINK
   ============================================================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-lighter);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-standard);
  margin-bottom: 0;
  background-color: var(--bg);
}

.back-link:hover {
  color: var(--accent);
}

.back-link:active {
  opacity: 0.7;
  transition-duration: var(--btn-active-transition);
}

/* ============================================================================
   PROSE WIDTHS
   ============================================================================ */

.prose,
.content-text,
.article-content {
  max-inline-size: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

.prose-narrow {
  max-inline-size: min(60ch, 100% - 4rem);
  margin-inline: auto;
}

.prose-wide {
  max-inline-size: min(85ch, 100% - 4rem);
  margin-inline: auto;
}

.full-width,
.image-gallery,
.data-table,
.chart-container {
  max-inline-size: none;
}