/**
 * client/styles/pages.css
 * Page-level CSS aggregator — imports all co-located page stylesheets.
 * Added to index.html so every page's layout rules ship in the bundle.
 * Each page file contains its own padding-bottom (clears bottom nav),
 * min-height, and page-specific component styles.
 */

/* ── Billing ──────────────────────────────────────────── */
@import '../pages/billing/checkout.css';

/* ── Shared experiential surfaces ─────────────────────── */
@import '../pages/live-session.css';

/* ── Personal shell pages ─────────────────────────────── */
@import '../pages/personal/home.css';
@import '../pages/personal/blueprint.css';
@import '../pages/personal/today.css';
@import '../pages/personal/relationships.css';
@import '../pages/personal/practitioners.css';
@import '../pages/personal/more.css';

/* ── Practitioner shell pages ─────────────────────────── */
@import '../pages/practitioner/dashboard.css';
@import '../pages/practitioner/clients.css';
@import '../pages/practitioner/sessions.css';
@import '../pages/practitioner/deliver.css';
@import '../pages/practitioner/quick-prep.css';
@import '../pages/practitioner/readings.css';
@import '../pages/practitioner/more.css';
@import '../pages/practitioner/first-win.css';

/* ── Standalone pages ─────────────────────────────────── */
@import '../pages/email-preferences.css';

/* ── Guided-client shell pages ────────────────────────── */
@import '../pages/guided-client/home.css';
@import '../pages/guided-client/blueprint.css';
@import '../pages/guided-client/today.css';
@import '../pages/guided-client/session.css';
@import '../pages/guided-client/support.css';
@import '../pages/guided-client/live-session.css';

/* — Session Mode Bar — */
.ps-session-mode-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 100);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-orange-alpha-12, rgba(255,124,60,0.12));
  border-bottom: 1px solid var(--color-streak-flame, #ff7c3c);
  font-size: var(--text-sm);
  color: var(--color-streak-flame, #ff7c3c);
  font-weight: 600;
}
.ps-session-mode-bar__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-streak-flame, #ff7c3c);
  animation: ps-gold-pulse 2s ease-in-out infinite;
}
.ps-session-mode-bar__timer {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.ps-session-mode-bar__end {
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-streak-flame, #ff7c3c);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-streak-flame, #ff7c3c);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.ps-session-mode-bar__end:hover {
  background: var(--color-orange-alpha-15, rgba(255,124,60,0.15));
}

/* — Reading Request — */
.ps-reading-request {
  background: var(--bg-elevated, #1a1928);
  border-left: 4px solid var(--color-gold-500, #c9a84c);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.ps-reading-request__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold-500, #c9a84c);
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ps-reading-request__focus {
  font-size: var(--text-base);
  color: var(--text, #f0f0f0);
  margin: 0 0 var(--space-3) 0;
}
.ps-reading-request__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ps-reading-request__tag {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  background: var(--gold-alpha-12, rgba(201,168,76,0.12));
  border: 1px solid var(--gold-alpha-30, rgba(201,168,76,0.3));
  border-radius: var(--radius-full, 9999px);
  color: var(--color-gold-400, #f0ca65);
}
.ps-reading-request__notes-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dim, #a0a0b0);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ps-reading-request__notes {
  width: 100%;
  min-height: 80px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius-sm, 4px);
  color: var(--text, #f0f0f0);
  font-size: var(--text-sm);
  resize: vertical;
  box-sizing: border-box;
}
.ps-reading-request__empty {
  font-size: var(--text-sm);
  color: var(--text-dim, #a0a0b0);
  font-style: italic;
  margin: 0;
}

/* — Command Center — */
.ps-command-center {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.ps-command-center__btn {
  flex: 1;
  min-width: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: var(--bg-elevated, #1a1928);
  border: 1px solid var(--color-white-alpha-8, rgba(255,255,255,0.08));
  border-radius: var(--radius-md);
  color: var(--color-neutral-200, #e5e7eb);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.ps-command-center__btn:hover {
  border-color: var(--color-gold-500);
  background: var(--gold-alpha-06, rgba(201,168,76,0.06));
}
.ps-command-center__btn svg, .ps-command-center__btn .ps-icon {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.75;
}
.ps-command-center__toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  background: var(--color-gold-500);
  color: var(--text-inverse, var(--color-neutral-950, #05091a));
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  z-index: var(--z-toast, 9000);
  animation: ps-fade-in var(--duration-fast) ease both;
  pointer-events: none;
}