/* ==========================================================================
   RT PREP & IPE — System CSS
   Shared design tokens + utility classes for all student-facing surfaces.
   Bluebook chrome (dsat-chrome.js / mock test / drill / diagnostic IRT)
   stays locked — this file is only for daily-life surfaces:
   dashboard, review, cheatsheets, final-review, session-summary,
   onboarding, mock-exam welcome, diagnostic welcome.

   Source: matches demo.html + demo/platform.html design DNA.

   Load order: import LAST so it cascades over per-page styles.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

:root {
  /* ── Color palette (3-tone neutrals + 1 accent) ─────────────────────── */
  --ipe-ink:        #0a0a0a;   /* primary text, h1/h2, primary buttons */
  --ipe-ink-2:      #525252;   /* secondary text, body in cards */
  --ipe-ink-3:      #737373;   /* tertiary text, captions */
  --ipe-line:       #e5e5e5;   /* card borders, dividers */
  --ipe-line-soft:  #f0f0f0;   /* subtle separators */
  --ipe-bg:         #ffffff;   /* card backgrounds */
  --ipe-bg-soft:    #fafafa;   /* page background, even-row stripes */
  --ipe-accent:     #1e3a5f;   /* CTA link color, badge accent */
  --ipe-accent-soft:#eef2f8;   /* accent panel background */

  /* Semantic state — kept minimal */
  --ipe-success:    #16a34a;
  --ipe-warning:    #b45309;
  --ipe-danger:     #b91c1c;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --ipe-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ipe-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --ipe-text-xs:    11.5px;
  --ipe-text-sm:    12.5px;
  --ipe-text-base:  14px;
  --ipe-text-md:    15px;
  --ipe-text-lg:    17px;
  --ipe-text-xl:    20px;
  --ipe-text-2xl:   24px;
  --ipe-text-3xl:   32px;
  --ipe-text-4xl:   40px;

  --ipe-leading-tight: 1.2;
  --ipe-leading-normal: 1.5;
  --ipe-leading-loose: 1.65;

  /* ── Spacing scale (4-px base) ──────────────────────────────────────── */
  --ipe-space-1:  4px;
  --ipe-space-2:  8px;
  --ipe-space-3:  12px;
  --ipe-space-4:  16px;
  --ipe-space-5:  20px;
  --ipe-space-6:  24px;
  --ipe-space-7:  32px;
  --ipe-space-8:  40px;
  --ipe-space-9:  48px;

  /* ── Radii (3-step scale) ───────────────────────────────────────────── */
  --ipe-radius-sm: 6px;
  --ipe-radius-md: 10px;
  --ipe-radius-lg: 14px;
  --ipe-radius-pill: 999px;

  /* ── Shadows (subtle only) ──────────────────────────────────────────── */
  --ipe-shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --ipe-shadow-md:  0 2px 8px rgba(0,0,0,0.06);
  --ipe-shadow-hover: 0 4px 12px rgba(0,0,0,0.08);

  /* ── Page constants ─────────────────────────────────────────────────── */
  --ipe-page-max:   1200px;
  --ipe-page-pad:   28px;
  --ipe-nav-height: 56px;
}

/* ── Body / page base ─────────────────────────────────────────────────── */
body.ipe-page {
  margin: 0;
  font-family: var(--ipe-font-sans);
  color: var(--ipe-ink);
  background: var(--ipe-bg-soft);
  line-height: var(--ipe-leading-normal);
  font-size: var(--ipe-text-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

.ipe-page * { box-sizing: border-box; }

/* Force form controls to inherit body font (otherwise OS-default leaks in,
   showing as an extra -apple-system entry in font-family audits). */
.ipe-page button,
.ipe-page input,
.ipe-page select,
.ipe-page textarea {
  font-family: inherit;
}

.ipe-container {
  max-width: var(--ipe-page-max);
  margin: 0 auto;
  padding: 0 var(--ipe-page-pad);
}

/* ── Typography utility classes ───────────────────────────────────────── */
.ipe-page h1, .ipe-h1 {
  font-family: var(--ipe-font-serif);
  font-size: clamp(28px, 3vw, var(--ipe-text-3xl));
  font-weight: 600;
  line-height: var(--ipe-leading-tight);
  letter-spacing: -0.015em;
  color: var(--ipe-ink);
  margin: 0 0 var(--ipe-space-3);
}
.ipe-page h2, .ipe-h2 {
  font-family: var(--ipe-font-serif);
  font-size: var(--ipe-text-xl);
  font-weight: 600;
  line-height: var(--ipe-leading-tight);
  color: var(--ipe-ink);
  margin: var(--ipe-space-7) 0 var(--ipe-space-3);
}
.ipe-page h3, .ipe-h3 {
  font-family: var(--ipe-font-sans);
  font-size: var(--ipe-text-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ipe-ink);
  margin: 0 0 var(--ipe-space-2);
}
.ipe-body, .ipe-page p {
  font-size: var(--ipe-text-base);
  line-height: var(--ipe-leading-normal);
  color: var(--ipe-ink-2);
  margin: 0 0 var(--ipe-space-3);
}
.ipe-caption {
  font-size: var(--ipe-text-sm);
  color: var(--ipe-ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.ipe-lead {
  font-size: var(--ipe-text-md);
  line-height: var(--ipe-leading-loose);
  color: var(--ipe-ink-2);
}

/* ── Card / surface ───────────────────────────────────────────────────── */
.ipe-card {
  background: var(--ipe-bg);
  border: 1px solid var(--ipe-line);
  border-radius: var(--ipe-radius-md);
  padding: var(--ipe-space-6);
}
.ipe-card-sm { padding: var(--ipe-space-4); }
.ipe-card-lg { padding: var(--ipe-space-7); }

a.ipe-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.ipe-card:hover {
  border-color: var(--ipe-ink);
  transform: translateY(-1px);
  box-shadow: var(--ipe-shadow-hover);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ipe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ipe-space-2);
  padding: 10px 18px;
  font-family: var(--ipe-font-sans);
  font-size: var(--ipe-text-base);
  font-weight: 500;
  border-radius: var(--ipe-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease;
  line-height: 1;
}
.ipe-btn-primary {
  background: var(--ipe-ink);
  color: var(--ipe-bg);
  border-color: var(--ipe-ink);
}
.ipe-btn-primary:hover { opacity: 0.85; }

.ipe-btn-secondary {
  background: var(--ipe-bg);
  color: var(--ipe-ink);
  border-color: var(--ipe-line);
}
.ipe-btn-secondary:hover {
  border-color: var(--ipe-ink);
  background: var(--ipe-bg-soft);
}

.ipe-btn-ghost {
  background: transparent;
  color: var(--ipe-ink-2);
  border-color: transparent;
}
.ipe-btn-ghost:hover { color: var(--ipe-ink); }

.ipe-btn-sm { padding: 6px 12px; font-size: var(--ipe-text-sm); }
.ipe-btn-lg { padding: 14px 24px; font-size: var(--ipe-text-md); }

/* ── Badges / tags ────────────────────────────────────────────────────── */
.ipe-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ipe-radius-pill);
  font-size: var(--ipe-text-xs);
  font-weight: 600;
  background: var(--ipe-line-soft);
  color: var(--ipe-ink-2);
}
.ipe-badge-success { background: #e5f3e7; color: #1c6e2b; }
.ipe-badge-warning { background: #fef3c7; color: #92400e; }
.ipe-badge-danger  { background: #fee2e2; color: #991b1b; }
.ipe-badge-accent  { background: var(--ipe-accent-soft); color: var(--ipe-accent); }

/* ── Unified top nav (5 menus) — populated by brand/system-nav.js ───── */
/* Cross-document view transition (Chromium/Safari 18+): same-origin page
   navigations crossfade instead of white-flashing. No-op elsewhere.
   Short fade — long enough to kill the flash, short enough to feel instant. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.08s; }

/* The sign-in chip (#auth-widget) renders wherever its div sits in the body,
   then system-nav.js relocates it into the nav's right slot. On nav pages,
   keep it hidden until it's inside the nav — otherwise it pushes the page
   down and snaps back up when relocated. Pages WITHOUT the nav placeholder
   (diagnostic, onboarding) are untouched. */
body:has(#ipe-nav-root) #auth-widget { display: none; }
.ipe-nav-right #auth-widget { display: block !important; }

/* Pre-paint nav placeholder — pages put <div id="ipe-nav-root"></div> at the
   top of <body> so the nav's height is reserved BEFORE system-nav.js (defer)
   fills it. Without it, slow loads paint the page, then the injected nav
   shoves everything down (the "menu-click jiggle"). Sticky lives on the
   root so the filled nav still pins to the top. */
#ipe-nav-root {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 78px; /* rendered .ipe-nav height (56px min + inner 13px×2 padding) */
  background: #fff;
}
#ipe-nav-root:empty { border-bottom: 1px solid var(--ipe-line); }
#ipe-nav-root .ipe-nav { position: static; }

.ipe-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ipe-line);
  min-height: var(--ipe-nav-height);
}
.ipe-nav-inner {
  max-width: var(--ipe-page-max);
  margin: 0 auto;
  padding: 13px var(--ipe-page-pad);
  /* Refined 3-up balance (Linear/Stripe principle): logo left · nav dead-center
     · account right. The equal 1fr side columns keep the nav optically centered
     in the bar regardless of logo / button widths. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ipe-space-4);
}
.ipe-nav-brand { justify-self: start; }
.ipe-nav-menu  { justify-self: center; }
.ipe-nav-right { justify-self: end; }
.ipe-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ipe-space-3);
  font-family: var(--ipe-font-sans);
  font-weight: 700;
  font-size: var(--ipe-text-md);
  color: var(--ipe-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ipe-nav-brand img { height: 20px; width: auto; filter: brightness(0); }
.ipe-nav-menu {
  display: flex;
  gap: 34px;
  font-size: 15px;
}
.ipe-nav-menu a {
  color: #5f6368;
  text-decoration: none;
  font-weight: 450;
  letter-spacing: -0.005em;
  padding: 6px 1px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ipe-nav-menu a:hover { color: var(--ipe-ink); }
.ipe-nav-menu a.is-active {
  color: var(--ipe-ink);
  font-weight: 600;
  border-bottom-color: var(--ipe-ink);
}
.ipe-nav-right {
  display: inline-flex;
  align-items: center;
  gap: var(--ipe-space-3);
}
.ipe-nav-account {
  font-size: var(--ipe-text-sm);
  color: var(--ipe-ink-3);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--ipe-line);
  border-radius: var(--ipe-radius-sm);
}
.ipe-nav-account:hover { color: var(--ipe-ink); border-color: var(--ipe-ink); }

/* Auth widget relocated into nav — keep it compact + visually consistent */
.ipe-nav-right #auth-widget { display: inline-flex; align-items: center; gap: 8px; }
.ipe-nav-right #auth-widget * { font-size: var(--ipe-text-sm) !important; }
/* Keep the official "Sign in with Google" button at its spec'd 14px (the broad
   shrink rule above would otherwise override it). */
.ipe-nav-right #auth-widget .aw-btn--primary { font-size: 14px !important; }
/* Hide the "Save your progress across devices." caption inside nav (too long) */
.ipe-nav-right #auth-widget [class*="caption"],
.ipe-nav-right #auth-widget [class*="-hint"] { display: none !important; }

@media (max-width: 760px) {
  /* Drop the 3-up grid on phones: logo + horizontally-scrollable menu. */
  .ipe-nav-inner { display: flex; padding: 10px 16px; gap: var(--ipe-space-3); }
  .ipe-nav-menu {
    gap: var(--ipe-space-4);
    font-size: var(--ipe-text-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
    /* Fade-edge mask on right to hint at horizontal scroll */
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    padding-right: var(--ipe-space-4);
  }
  .ipe-nav-menu::-webkit-scrollbar { display: none; }
  .ipe-nav-menu a { white-space: nowrap; }
  .ipe-nav-brand { font-size: var(--ipe-text-sm); }
  .ipe-nav-brand img { height: 18px; }
  .ipe-nav-right { display: none; } /* hide account chip on mobile */
}
@media (max-width: 440px) {
  /* On phones, show only the compact "RT" badge — the full wordmark img would
     otherwise sit beside the badge (duplicate brand) and crowd the nav. */
  .ipe-nav-brand img { display: none; }
  .ipe-nav-brand::before {
    content: "RT";
    display: inline-block;
    font-weight: 800;
    font-size: 14px;
    padding: 4px 7px;
    border: 1.5px solid var(--ipe-ink);
    border-radius: var(--ipe-radius-sm);
  }
}

/* ── Page hero (eyebrow + h1 + lead) ──────────────────────────────────── */
.ipe-hero {
  padding: var(--ipe-space-8) 0 var(--ipe-space-6);
}
.ipe-hero .ipe-caption { display: block; margin-bottom: var(--ipe-space-3); color: var(--ipe-ink-3); }
.ipe-hero h1 { margin-bottom: var(--ipe-space-3); max-width: 820px; }
.ipe-hero .ipe-lead { max-width: 720px; }

/* ── Helpers ──────────────────────────────────────────────────────────── */
.ipe-stack > * + * { margin-top: var(--ipe-space-4); }
.ipe-stack-tight > * + * { margin-top: var(--ipe-space-2); }
.ipe-stack-loose > * + * { margin-top: var(--ipe-space-6); }
.ipe-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ipe-space-4); }
.ipe-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ipe-space-4); }
@media (max-width: 760px) {
  .ipe-grid-2, .ipe-grid-3 { grid-template-columns: 1fr; }
}
.ipe-divider { border: none; border-top: 1px solid var(--ipe-line); margin: var(--ipe-space-6) 0; }
.ipe-muted { color: var(--ipe-ink-3); }
.ipe-mono { font-family: 'SF Mono', Menlo, monospace; font-size: 0.95em; }

/* Visually hidden — kept in DOM for screen readers / SEO, removed from view */
.ipe-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Collapsible details (progressive disclosure) ─────────────────────── */
.ipe-details,
.me-details, .dg-details, .fr-details {
  background: var(--ipe-bg-soft);
  border: 1px solid var(--ipe-line);
  border-radius: var(--ipe-radius-sm);
  padding: 10px 14px;
  margin: 8px 0;
  font-size: var(--ipe-text-base);
}
.ipe-details > summary,
.me-details > summary, .dg-details > summary, .fr-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ipe-ink);
  font-weight: 500;
  user-select: none;
}
.ipe-details > summary::-webkit-details-marker,
.me-details > summary::-webkit-details-marker,
.dg-details > summary::-webkit-details-marker,
.fr-details > summary::-webkit-details-marker { display: none; }
.ipe-details > summary::after,
.me-details > summary::after, .dg-details > summary::after, .fr-details > summary::after {
  content: "▾";
  font-size: var(--ipe-text-sm);
  color: var(--ipe-ink-3);
  transition: transform .15s ease;
}
.ipe-details[open] > summary::after,
.me-details[open] > summary::after,
.dg-details[open] > summary::after,
.fr-details[open] > summary::after { transform: rotate(180deg); }
.ipe-details > summary .me-details-hint,
.me-details > summary .me-details-hint,
.dg-details > summary .me-details-hint,
.fr-details > summary .me-details-hint { display: none; }  /* the chevron replaces this hint */
.ipe-details > ul,
.me-details > ul, .dg-details > ul, .fr-details > ul {
  margin: 10px 0 4px;
  padding-left: 20px;
  color: var(--ipe-ink-2);
}
.ipe-details > ul > li,
.me-details > ul > li, .dg-details > ul > li, .fr-details > ul > li {
  margin: 4px 0;
  font-size: var(--ipe-text-base);
}

/* ── Modal / bottom sheet (Phase 7) ───────────────────────────────────── */
/* Future modal-converting work uses these classes. Existing modals stay
   functional until each one is migrated. */
.ipe-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--ipe-space-4);
}
.ipe-modal {
  background: var(--ipe-bg);
  border-radius: var(--ipe-radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--ipe-space-7);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.ipe-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ipe-space-4);
}
.ipe-modal-title {
  font-family: var(--ipe-font-serif);
  font-size: var(--ipe-text-xl);
  font-weight: 600;
  color: var(--ipe-ink);
  margin: 0;
}
.ipe-modal-close {
  background: transparent;
  border: none;
  font-size: var(--ipe-text-xl);
  color: var(--ipe-ink-3);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.ipe-modal-close:hover { color: var(--ipe-ink); }
.ipe-modal-body { color: var(--ipe-ink-2); }
.ipe-modal-actions {
  display: flex;
  gap: var(--ipe-space-3);
  justify-content: flex-end;
  margin-top: var(--ipe-space-6);
}

/* Bottom-sheet variant (used by mistake-type quick picker) */
.ipe-sheet {
  background: var(--ipe-bg);
  border-top-left-radius: var(--ipe-radius-lg);
  border-top-right-radius: var(--ipe-radius-lg);
  width: 100%;
  max-width: 600px;
  margin: auto auto 0;
  padding: var(--ipe-space-6);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
}
.ipe-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--ipe-line);
  border-radius: var(--ipe-radius-pill);
  margin: 0 auto var(--ipe-space-4);
}

/* ── Print: hide nav + page chrome ────────────────────────────────────── */
@media print {
  .ipe-nav, .ipe-no-print { display: none !important; }
  body.ipe-page { background: white; }
}