/* Praxia + Chairside Suite — Design Tokens
 *
 * Source of truth for color, typography, spacing, touch targets, and breakpoints.
 * Imported as the FIRST stylesheet on every HTML shell.
 *
 * New work uses tokens via var(--token-name). Existing inline styles migrate as
 * each surface gets touched in Phase 12.3–12.7.
 *
 * Breakpoint strategy: mobile-first base, three breakpoints (640/1024/1440).
 */

:root {
  /* ─── Color (brand-locked, do not introduce variations) ────────────── */
  --color-bg:            #0E0D0B;
  --color-gold:          #C9A65A;
  --color-cream:         #E8DCC0;
  --color-hairline:      rgba(201, 166, 90, 0.3);
  --color-text-primary:  #E8DCC0;
  --color-text-muted:    rgba(232, 220, 192, 0.6);
  --color-text-faint:    rgba(232, 220, 192, 0.4);
  --color-error:         #c0392b;
  --color-success:       #27ae60;

  /* ─── Typography ───────────────────────────────────────────────────── */
  --font-display:  "Cormorant Garamond", "Georgia", serif;
  --font-body:     "Fraunces", "Georgia", serif;
  --font-ui:       system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* Phone defaults (mobile-first base) */
  --type-display-1: 2.5rem;     /* 40px */
  --type-display-2: 1.875rem;   /* 30px */
  --type-h1:        1.5rem;     /* 24px */
  --type-h2:        1.25rem;    /* 20px */
  --type-body:      1rem;       /* 16px */
  --type-small:     0.875rem;   /* 14px */
  --type-micro:     0.75rem;    /* 12px */

  --line-height-display: 1.15;
  --line-height-heading: 1.3;
  --line-height-body:    1.6;
  --line-height-tight:   1.4;

  /* ─── Spacing scale ────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── Touch targets ────────────────────────────────────────────────── */
  --touch-target-min:         44px;  /* iOS HIG minimum */
  --touch-target-comfortable: 48px;  /* Default for primary CTAs */
  --touch-target-tight:       36px;  /* Tertiary actions in dense lists only */

  /* ─── Content widths ───────────────────────────────────────────────── */
  --content-max-phone:   100%;
  --content-max-tablet:  680px;
  --content-max-desktop: 900px;
  --content-max-wide:    1080px;

  /* ─── Page padding (horizontal) ────────────────────────────────────── */
  /* Use var(--page-pad-x) on horizontal surface padding instead of
   * hardcoded 16/28/64 values. Phone base; bumps at tablet and desktop. */
  --page-pad-x: 16px;

  /* ─── Z-index scale ────────────────────────────────────────────────── */
  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   100;   /* bottom tab bar, sticky headers */
  --z-modal:    1000;  /* roleplay modal, eval modal */
  --z-toast:    2000;  /* future toast/notification layer */

  /* ─── Layout state marker (read-only; useful for CSS-driven hints) ─── */
  --layout: phone;
}

/* ─── Tablet portrait + small landscape ───────────────────────────────── */
@media (min-width: 640px) {
  :root {
    --layout: tablet;
    --type-display-1: 3rem;       /* 48px */
    --type-display-2: 2.25rem;    /* 36px */
    --type-h1:        1.75rem;    /* 28px */
    --type-h2:        1.5rem;     /* 24px */
    --page-pad-x:     28px;
  }
}

/* ─── Desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --layout: desktop;
    --type-display-1: 3.75rem;    /* 60px */
    --type-display-2: 2.5rem;     /* 40px */
    --type-h1:        2rem;       /* 32px */
    --type-body:      1.125rem;   /* 18px — slight bump for desktop reading */
    --page-pad-x:     64px;
  }
}

/* ─── Wide desktop ─────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --layout: wide;
  }
}

/* ─── Box-sizing reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── Base body styling (Praxia dark theme) ───────────────────────────── */
/* Chairside shells override background/font via their own ChairsideStyle
 * injected CSS and the inline <style> tag in each shell's <head>. */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Cormorant Garamond on phone — body-size ban ──────────────────────── */
/* Phone-only restriction: Cormorant Garamond at body size (<1rem) is too
 * thin and tight for small viewports. Display + headings only. Body copy
 * uses Fraunces (var(--font-body)) at 1rem with comfortable line-height.
 * Chairside shells override body font-family via ChairsideStyle. */
@media (max-width: 639px) {
  body { font-family: var(--font-body); }
  .display, h1, h2, .pull-quote {
    font-family: var(--font-display);
  }
}

/* ─── Safe-area-inset helpers ──────────────────────────────────────────── */
.safe-bottom { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
.safe-top    { padding-top:    max(var(--space-3), env(safe-area-inset-top)); }

/* ─── Phone: hide suite sidebar; use the five-item bottom navigation ───── */
.more-button-floating { display: none !important; }
@media (max-width: 639px) {
  .suite-sidebar { display: none !important; }
  .account-menu-label { display: none !important; }
  .account-menu-button { padding: 6px !important; min-width: 44px; min-height: 44px; justify-content: center; }
  /* Per-shell Chrome right-cluster (intra-app nav + Begin CTA) collides with
   * the floating More button on phone. Hide it; logo/brand remain visible
   * and route to Home. Cross-shell nav is handled by the bottom tab bar
   * and the More overlay. */
  .suite-chrome-overflow { display: none !important; }
}

/* ─── Touch-target utilities ───────────────────────────────────────────── */
/* Enforce the 44px iOS HIG floor on every interactive element across Tier 1
 * surfaces (Praxia lesson body, Roleplay modal, Chairside Practice). The
 * min-height takes precedence over the element's own padding, so existing
 * `padding: 6px 12px` style buttons clear the floor without inline edits.
 *
 * Use .touch-min for inline buttons / links acting as buttons.
 * Use .touch-min-block for full-width tap targets (accordion headers,
 * disclosure rows, list-item links).
 */
.touch-min {
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.touch-min-block {
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
}

/* ─── Modal-as-sheet on phone ──────────────────────────────────────────── */
/* Roleplay modal (and any future modal) should go full-bleed below 640px:
 * no backdrop padding, no rounded corners, height = 100vh. At tablet+ the
 * card-with-backdrop treatment is preserved. Pair both classes on the
 * ModalShell backdrop + dialog pair. */
@media (max-width: 639px) {
  .modal-shell-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .modal-shell-dialog {
    position: fixed !important;
    top: var(--roleplay-vv-top, 0px) !important;
    left: var(--roleplay-vv-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--roleplay-vv-width, 100vw) !important;
    max-width: none !important;
    height: var(--roleplay-vv-height, 100vh) !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
}

/* ─── Modal header stack on phone ─────────────────────────────────────── */
/* RoleplaySession header packs identity + difficulty + voice toggle + turn
 * counter + Exit on one row. At 375px this overflows. Stack on phone:
 * Row 1 = identity + Exit. Row 2 = difficulty + voice + turn counter.
 * Collapses back to single row at tablet+. */
.modal-header-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.modal-header-row-primary,
.modal-header-row-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.modal-header-row-primary { justify-content: space-between; }
.modal-header-row-controls { justify-content: flex-end; }
@media (min-width: 640px) {
  .modal-header-stack {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .modal-header-row-controls { margin-left: auto; }
}

/* Composer-hint visibility — hide Cmd-key hints on phone where no Cmd
 * key exists. Applied to the "⌘⏎ to send" span inside the chat composer. */
@media (max-width: 639px) {
  .composer-hint-desktop-only { display: none !important; }
  .modal-header-row-controls {
    justify-content: flex-start !important;
  }
  .roleplay-turn-counter {
    width: 100%;
  }
  .roleplay-chat-scroll {
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px var(--page-pad-x) !important;
  }
  .roleplay-composer-row textarea {
    flex-basis: 100% !important;
  }
  .roleplay-composer-row .touch-min {
    flex: 1 1 calc(50% - 5px);
    justify-content: center !important;
  }
  .roleplay-review-actions {
    flex-direction: column-reverse;
  }
  .roleplay-review-actions .touch-min {
    width: 100%;
    justify-content: center !important;
  }
}

/* ─── Cormorant Garamond weight policy on phone ───────────────────────── */
/* Existing rule above bans Cormorant for body text below 1rem on phone.
 * Extension: between 1rem and 1.25rem, Cormorant's hairline 400 weight
 * reads as mud on high-DPI screens. Bump to 500 to compensate. Apply via
 * `.cormorant-phone-readable` className on body paragraphs and list items
 * that use var(--font-display). No-op at tablet+. */
@media (max-width: 639px) {
  .cormorant-phone-readable {
    font-weight: 500;
  }
}

/* ─── Praxia lesson body — responsive grid ────────────────────────────── */
/* The lesson layout is a 3-column grid (module index | article | TOC) on
 * desktop. Below 1024px the side rails collapse and the article goes
 * full-width; a mobile disclosure replaces the left rail's module index.
 * Article side padding scales via --page-pad-x. */
.lesson-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1320px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .lesson-grid {
    grid-template-columns: 300px 1fr 240px;
  }
}
@media (max-width: 1023px) {
  .lesson-aside-desktop,
  .lesson-rail-desktop {
    display: none !important;
  }
}

.lesson-article {
  padding: 32px var(--page-pad-x) 80px;
  max-width: 720px;
}
@media (min-width: 640px) {
  .lesson-article {
    padding: 56px var(--page-pad-x) 96px;
  }
}
@media (min-width: 1024px) {
  .lesson-article {
    padding: 80px var(--page-pad-x) 120px;
  }
}

/* Reading-progress rail: fixed at top:64 on desktop (anchored beneath the
 * per-shell Chrome). On phone the Chrome right-cluster is hidden and the
 * rail orphans at y=64; switch to in-flow so it sits below the breadcrumbs
 * inside the article column. */
.lesson-progress-rail {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 30;
}
@media (max-width: 1023px) {
  .lesson-progress-rail {
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }
}

/* Mobile-only disclosure that replaces the left aside on phone/tablet. */
.lesson-mobile-disclosure { display: none; }
@media (max-width: 1023px) {
  .lesson-mobile-disclosure { display: block; }
}

/* ─── Chairside Practice tab — phone polish ───────────────────────────── */
/* Open script accordion body indents 54px on desktop to align with the
 * 01/02/... number column. On phone this eats ~17% of the viewport for
 * decorative alignment — drop to 0. */
.script-body-open {
  padding-left: 54px;
}
@media (max-width: 639px) {
  .script-body-open {
    padding-left: 0;
  }
}

/* Sub-tabs (Overview/Practice/Metrics/Praxia) under each role need taller
 * tap area on phone. Desktop padding preserved. */
.role-subtab {
  padding: 12px 4px;
}
@media (max-width: 639px) {
  .role-subtab {
    padding: 14px 10px;
    min-height: var(--touch-target-min);
  }
}

/* Role selector pills at the top of the page. */
.role-pill {
  padding: 10px 18px;
}
@media (max-width: 639px) {
  .role-pill {
    padding: 12px 16px;
    min-height: var(--touch-target-min);
  }
}

/* Language Patterns chips inside an open script. Slim on desktop, bumped
 * on phone for tap comfort. */
.pattern-chip {
  padding: 5px 12px;
}
@media (max-width: 639px) {
  .pattern-chip {
    padding: 10px 14px;
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
  }
}

/* CollapsibleSubsection + glyph — larger and easier to hit on phone. */
.accordion-plus {
  font-size: 18px;
}
@media (max-width: 639px) {
  .accordion-plus {
    font-size: 24px;
  }
}

/* Praxia inline SVG diagrams — Phase 5.8.
 * The SVGs are injected via dangerouslySetInnerHTML so the page's web fonts
 * (Cormorant Garamond) can paint the gold labels. Scale to container width. */
.praxia-svg-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}