/**
 * page-shell.css — Issue 137 (UI overhaul).
 *
 * Extends the hero/editor "aurora + indigo + soft" aesthetic across every
 * authenticated page. Opt-in via <body class="app-page">. Loads AFTER
 * _design-tokens.css so it consumes the existing token set; loads BEFORE
 * each page's inline <style> block so page-specific rules can override.
 *
 * Design contract (researched 2026-06-08; see docs/DECISIONS.md Issue 137):
 *   - Glassmorphism + aurora used ONLY for chrome (nav, page header, hero
 *     band, modal/popover/drawer surfaces, activity panel). Tables, forms,
 *     transcripts, list rows stay flat with high-contrast text to satisfy
 *     WCAG 2.2 1.4.3 — Linear / Vercel / Stripe all follow this rule.
 *   - Card panels move from the Issue-99 sharp 4px radius to the soft
 *     --radius-lg (12px) and warmer --editor-surface bg, but their *contents*
 *     (tables, inputs) keep flat utility styling.
 *   - Horizontal overflow eliminated by overflow-x: clip on body + .table-wrap
 *     scoping the only place horizontal scroll IS allowed + flex-wrap on
 *     action rows + max-width caps on every main container.
 *
 * Does NOT touch the Issue-99 Linear tokens; pages that don't opt in stay
 * exactly as they were.
 */

/* ── Horizontal-overflow backstop ───────────────────────────────────────
 * `clip` is the 2026 successor to `hidden`. Unlike `hidden`, it does NOT
 * create a new scroll container, so position: fixed (activity panel) and
 * position: sticky (nav) continue to work correctly. Falls back to hidden
 * on engines without `clip` support. */
html, body {
  overflow-x: clip;
  overflow-x: -webkit-paged-x;  /* harmless legacy hint; real fallback below */
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* ── Body — aurora backdrop on authenticated pages ─────────────────────
 * One static aurora wash anchored at the top of the page; doesn't repeat
 * down-page, doesn't animate (animated gradients hurt scroll perf on
 * data-heavy surfaces). The editor surface uses its own (warmer) backdrop;
 * we don't double-apply on .editor-page. */
body.app-page {
  background: var(--color-bg);
  background-image: var(--gradient-aurora);
  background-repeat: no-repeat;
  background-position: 50% -240px;
  background-size: 1600px 640px;
  min-height: 100vh;
}

/* ── Nav — glassmorphism on the shared top bar ─────────────────────────
 * The shared .nav from _design-tokens.css gets the same blur + indigo-tinted
 * border the editor nav already has. On .app-page only; pages that haven't
 * opted in keep the flat Linear nav. */
body.app-page .nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 12, 18, 0.72);
  border-bottom: 1px solid var(--editor-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* The disclaimer band sits right under the nav; soften it to match. */
body.app-page > .disclaimer {
  background: rgba(20, 22, 31, 0.5);
  border-left: 2px solid var(--color-accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Page container — width cap + safe gutters ────────────────────────
 * Single source of truth for "how wide is a page." Replaces the per-page
 * `main { max-width: 880px }` rules. Width is min(1200px, viewport minus
 * gutters) so we never reach the viewport edge and never need horizontal
 * scroll. */
.page-container,
body.app-page > main,
body.app-page > .dashboard,
body.app-page > section.page-section {
  width: 100%;
  max-width: min(1200px, calc(100% - 2 * var(--space-4)));
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* Narrower variant for form-heavy / read-heavy pages (profile, onboarding,
 * walkthrough). Opt-in via .page-container.narrow. */
.page-container.narrow,
body.app-page > main.narrow {
  max-width: min(760px, calc(100% - 2 * var(--space-4)));
}

/* ── Soft card (chrome) ──────────────────────────────────────────────
 * Upgrade path for .card on app-page surfaces. Indigo-tinted surface,
 * 12px radius, soft glow on the border. Data inside (tables, inputs)
 * stays flat. */
body.app-page .card,
.soft-card {
  background: var(--editor-surface);
  border: 1px solid var(--editor-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
              0 24px 60px -32px rgba(0, 0, 0, 0.55);
}

/* Section-header bands (page-top "What this is" zones). Use the aurora
 * gradient + gradient text for the H1, soft surface for the surrounding
 * panel. */
.page-hero {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  margin-bottom: var(--space-8);
  background:
    linear-gradient(135deg, rgba(94, 106, 210, 0.10), rgba(94, 106, 210, 0.02) 60%),
    var(--editor-surface);
  border: 1px solid var(--editor-border-strong);
  isolation: isolate;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% 30% -20%;
  background: var(--gradient-aurora);
  pointer-events: none;
  z-index: -1;
}

/* ── Gradient H1 (utility) ────────────────────────────────────────────
 * Same treatment as hero.css gives its h1, exposed as a class so any
 * page-level H1 can opt in. We do NOT auto-apply because gradient text
 * has poorer scanability on long body copy — keep it for page openers. */
.gradient-h1 {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.025em;
}

/* ── CTA pill (utility) ───────────────────────────────────────────────
 * Hero's primary action style, exposed as a class so any page's primary
 * action can match. Page-level primary buttons (.btn.btn-primary) under
 * app-page also pick up the pill+gradient automatically — kept as a single
 * source of truth. */
body.app-page .btn-primary,
.cta-pill {
  background: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-weight: 600;
  box-shadow: var(--glow-accent-soft);
  transition: transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              filter var(--duration-fast) var(--ease);
}
body.app-page .btn-primary:hover,
.cta-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: var(--glow-accent);
}
body.app-page .btn-primary:active,
.cta-pill:active { transform: translateY(0); }

/* Secondary button also picks up the soft surface on app-page. */
body.app-page .btn-secondary {
  background: var(--editor-surface);
  border: 1px solid var(--editor-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
}
body.app-page .btn-secondary:hover {
  background: var(--editor-surface-elev);
  border-color: var(--color-accent);
}

/* ── Table wrap — scope horizontal scroll to the data, not the page ──
 * Wrap any wide table in <div class="table-wrap"> ... </div>. The wrapper
 * scrolls; the page never does. Also adds a soft outer chrome so the
 * table reads as a single panel. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--editor-border);
  background: var(--editor-surface);
}
.table-wrap > table {
  margin: 0;
  border: none;
}
/* Reduce chrome inside the wrapper since the wrapper owns it now. */
.table-wrap th,
.table-wrap td {
  border-color: var(--editor-border) !important;
}

/* ── Action row — wrap by default so buttons stack on narrow viewports
 * Apply on any container that hosts a row of buttons (table cells,
 * card footers, form actions). */
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* ── Flex-child safety: prevent children from forcing parent wider ────
 * Common cause of horizontal overflow in flex layouts. Apply to any flex
 * child that contains potentially long content (titles, IDs, transcripts). */
.min-w-0 { min-width: 0; }

/* ── Summary cards (dashboard) — soft + glow on hover ────────────────
 * Picks up the existing .summary-card pattern on index.html. */
body.app-page .summary-card,
body.app-page .summary-cards > * {
  background: var(--editor-surface);
  border: 1px solid var(--editor-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
body.app-page .summary-card:hover,
body.app-page .summary-cards > *:hover {
  border-color: var(--color-accent);
  box-shadow: var(--glow-accent-soft);
  transform: translateY(-1px);
}

/* ── Input + select polish on app-page ───────────────────────────────
 * The shared input styling stays flat (data surface), but the radius
 * matches the new soft language and the focus glow uses the accent ring. */
body.app-page input:not([type="checkbox"]):not([type="radio"]),
body.app-page textarea,
body.app-page select {
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--editor-border);
}
body.app-page input:focus,
body.app-page textarea:focus,
body.app-page select:focus {
  border-color: var(--color-accent);
  box-shadow: var(--glow-focus-ring);
}

/* ── Low-balance nav chip + trial banner (Issue 126) ──────────────────
 * The nav balance chip lights up amber (warning border + soft glow) when
 * the creator dips below LOW_BALANCE_THRESHOLD_MINUTES. The banner is a
 * separate page-top element rendered conditionally on the dashboard. */
.nav-balance.is-low {
  color: var(--color-warning);
  border-color: var(--color-warning);
  box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.25);
}

.trial-banner {
  display: none;  /* default hidden; JS sets .is-active when trial is on */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-4) auto var(--space-3);
  max-width: min(1200px, calc(100% - 2 * var(--space-4)));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(94, 106, 210, 0.14), rgba(94, 106, 210, 0.03) 60%),
    var(--editor-surface);
  border: 1px solid var(--editor-border-strong);
  box-shadow: var(--glow-accent-soft);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.trial-banner.is-active { display: flex; }
.trial-banner.is-final-day {
  border-color: var(--color-warning);
  background:
    linear-gradient(135deg, rgba(243, 156, 18, 0.16), rgba(243, 156, 18, 0.04) 60%),
    var(--editor-surface);
}
.trial-banner .trial-text { min-width: 0; flex: 1; }
.trial-banner .trial-text strong { color: var(--color-text); font-weight: 600; }
.trial-banner .trial-text .sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.trial-banner .trial-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.trial-banner .trial-dismiss {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.trial-banner .trial-dismiss:hover { color: var(--color-text); background: var(--editor-surface-elev); }
.trial-banner.is-final-day .trial-dismiss { display: none; }

@media (max-width: 600px) {
  .trial-banner { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .trial-banner .trial-actions { justify-content: flex-end; }
}

/* Inline pre-action low-balance warning (rendered next to Generate/Queue
 * buttons + above the analysis submit). Compact, amber, non-blocking. */
.low-balance-warning {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(243, 156, 18, 0.08);
  border: 1px solid rgba(243, 156, 18, 0.35);
  font-size: var(--text-xs);
  color: var(--color-warning);
}
.low-balance-warning a {
  color: var(--color-warning);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Mobile breakpoint — tighten gutters ─────────────────────────────── */
@media (max-width: 600px) {
  body.app-page > main,
  body.app-page > .dashboard,
  .page-container {
    padding: var(--space-5) var(--space-3);
    max-width: calc(100% - 2 * var(--space-3));
  }
  body.app-page .nav {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .page-hero {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-xl);
  }
}
