/* ============================================================
   APP.CSS — Member Dashboard Chrome
   Layout, header, tabs, bottom nav, demo banner, plan badges
   Reuses: design-system.css tokens, matchup-grid.css for grid
   ============================================================ */

/* --- App Layout --- */
.app-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-4);
  padding-top: calc(56px + var(--space-4));
  min-height: 100vh;
}

[data-mode="demo"] .app-main {
  padding-top: calc(56px + 40px + var(--space-4));
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--accent-solid);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-2);
}

/* --- Demo Banner --- */
.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  background: oklch(0.78 0.16 85);
  color: oklch(0.20 0.04 85);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
}

[data-mode="member"] .demo-banner { display: none; }

.demo-banner__link {
  color: oklch(0.25 0.08 85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-banner__link--cta {
  background: oklch(0.20 0.04 85);
  color: oklch(0.90 0.10 85);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full, 9999px);
  text-decoration: none;
  font-weight: 700;
}
.demo-banner__sep { opacity: 0.6; }

/* --- App Header --- */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 56px;
  background: oklch(0.12 0.018 255 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

[data-mode="demo"] .app-header { top: 40px; }

.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.app-header__logo {
  text-decoration: none;
  flex-shrink: 0;
}
.app-header__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.app-header__logo-accent {
  color: var(--accent-text);
}

.app-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.app-header__account {
  color: var(--text-secondary);
  transition: color 0.15s;
}
.app-header__account:hover { color: var(--text-primary); }

/* --- Theme Toggle --- */
.app-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color 0.15s;
  display: flex;
  align-items: center;
}
.app-theme-toggle:hover { color: var(--text-primary); }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }

/* --- Desktop Section Tabs --- */
.app-tabs {
  display: flex;
  gap: var(--space-1);
}

.app-tab {
  background: none;
  border: none;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.app-tab:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.app-tab--active,
.app-tab[aria-selected="true"] {
  color: var(--text-primary);
  background: var(--bg-elevated);
  font-weight: 600;
}

/* --- Section Panels --- */
.app-section {
  position: relative;
  display: none;
}
.app-section--active,
.app-section:not([hidden]) {
  display: block;
}
.app-section[hidden] { display: none; }

.app-section__header {
  margin-bottom: var(--space-6);
}
.app-section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.app-section__subtitle {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin: 0;
}
.app-section__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* --- Demo Watermark --- */
.section-demo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  color: oklch(0.30 0.01 255 / 0.15);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 10;
  letter-spacing: 0.1em;
}

[data-mode="member"] .section-demo-watermark { display: none; }

/* --- Demo CTA --- */
.demo-cta {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}
.demo-cta__text {
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
}

[data-mode="member"] .demo-cta { display: none; }

/* --- Plan Badge --- */
.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-badge--demo {
  background: oklch(0.30 0.02 85);
  color: oklch(0.78 0.16 85);
}
.plan-badge--free {
  background: oklch(0.20 0.01 255);
  color: var(--text-secondary);
}
.plan-badge--draft_pass {
  background: oklch(0.25 0.06 250);
  color: oklch(0.70 0.10 250);
}
.plan-badge--edge_pro {
  background: oklch(0.25 0.08 145);
  color: oklch(0.72 0.16 145);
}
.plan-badge--dynasty_elite {
  background: oklch(0.25 0.10 60);
  color: oklch(0.80 0.14 60);
  border: 1px solid oklch(0.50 0.14 60 / 0.3);
}

/* --- Scoring Toggle --- */
.scoring-toggle {
  display: flex;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.scoring-toggle__btn {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.scoring-toggle__btn:hover { color: var(--text-primary); }
.scoring-toggle__btn.active {
  background: var(--accent-solid);
  color: var(--text-inverse);
}

/* --- Week Filters --- */
.week-filters {
  display: flex;
  gap: var(--space-1);
}
.week-preset-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.week-preset-btn:hover {
  color: var(--text-primary);
  border-color: var(--border);
}
.week-preset-btn.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--accent-solid);
}

/* --- Gauntlet Grid --- */
.gauntlet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.gauntlet-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s;
}
.gauntlet-chip:hover { border-color: var(--border); }

.gauntlet-chip__rank {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-text);
  min-width: 2ch;
}
.gauntlet-chip__team {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
}
.gauntlet-chip__avg {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.gauntlet-chip__avg--easy { background: oklch(0.20 0.06 220); color: var(--diff-easy); }
.gauntlet-chip__avg--medium { background: oklch(0.20 0.02 255); color: var(--diff-medium); }
.gauntlet-chip__avg--hard { background: oklch(0.20 0.06 25); color: var(--diff-hard); }

/* --- Cards Generator --- */
.cards-generator__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.cards-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.card-preview canvas {
  max-width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

/* --- Share Modal --- */
.share-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.share-modal[hidden] { display: none; }
.share-modal__backdrop { position: absolute; inset: 0; background: oklch(0.05 0.01 255 / 0.8); }
.share-modal__content {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 700px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}
.share-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.share-modal__header h2 { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin: 0; }
.share-modal__close { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: var(--space-1); }
.share-modal__close:hover { color: var(--text-primary); }
.share-modal__body canvas { max-width: 100%; border-radius: var(--radius-md); }
.share-modal__actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

/* --- Buttons (reuse from design-system patterns) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s;
}
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--primary { background: var(--accent-solid); color: var(--text-inverse); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.btn--ghost:hover { color: var(--text-primary); border-color: var(--border); }

/* --- Mobile Bottom Nav --- */
.app-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: oklch(0.12 0.018 255 / 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) 0 env(safe-area-inset-bottom, var(--space-2));
}

.app-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-1) 0;
  min-height: 44px;
  min-width: 44px;
  transition: color 0.15s;
}
.app-bottom-nav__item:hover,
.app-bottom-nav__item--active {
  color: var(--accent-text);
}

/* --- Floor/Ceiling Range Bar --- */
.grid-cell__range {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background: var(--accent-solid);
  border-radius: 1px;
  opacity: 0.6;
}

/* --- Focus Visible --- */
:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Mobile Breakpoint --- */
@media (max-width: 768px) {
  .app-tabs { display: none; }
  .app-bottom-nav { display: flex; }

  .app-main {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 16px));
  }

  .app-section__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .matchup-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .demo-banner {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-1);
    font-size: var(--text-xs);
  }

  .app-header__logo-text { font-size: var(--text-base); }

  .section-demo-watermark { font-size: clamp(2rem, 6vw, 3rem); }

  .gauntlet-grid {
    grid-template-columns: 1fr;
  }

  .share-modal__content { padding: var(--space-4); }
}

/* --- Light Theme Override --- */
[data-theme="light"] {
  --bg-void: oklch(0.97 0.003 250);
  --bg-surface: oklch(0.99 0.002 250);
  --bg-elevated: oklch(0.95 0.005 250);
  --text-primary: oklch(0.15 0.01 255);
  --text-secondary: oklch(0.40 0.01 255);
  --text-tertiary: oklch(0.55 0.01 255);
  --border-subtle: oklch(0.85 0.01 255);
  --border: oklch(0.75 0.01 255);
}

[data-theme="light"] .app-header {
  background: oklch(0.97 0.003 250 / 0.85);
}
[data-theme="light"] .app-bottom-nav {
  background: oklch(0.97 0.003 250 / 0.95);
}
[data-theme="light"] .demo-banner {
  background: oklch(0.85 0.14 85);
}
[data-theme="light"] .section-demo-watermark {
  color: oklch(0.80 0.01 255 / 0.15);
}