/* ==========================================================================
   companion-features.css
   Shared styles for: provenance modal · resume toast · annotation buttons ·
   print export. Dropped into all 4 volumes alongside companion-features.js.
   Uses high-specificity .ri- prefixed classes so it doesn't fight a volume's
   own styles.
   ========================================================================== */

:root {
  --ri-modal-bg: #1a1610;
  --ri-modal-fg: #f4ebd9;
  --ri-modal-muted: #8a7e6a;
  --ri-modal-accent: #d4a456;
  --ri-modal-pending: #6e6354;
  --ri-modal-border: rgba(244, 235, 217, 0.12);
  --ri-modal-scrim: rgba(8, 6, 3, 0.78);
  --ri-modal-card-bg: #221b13;
  --ri-modal-radius: 4px;
  --ri-modal-z: 9000;
}

/* ---- modal ---- */
.ri-modal-root {
  position: fixed; inset: 0; z-index: var(--ri-modal-z);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ri-modal-root[hidden] { display: none; }
.ri-modal-scrim {
  position: absolute; inset: 0;
  background: var(--ri-modal-scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ri-modal-card {
  position: relative;
  max-width: 640px; width: 100%;
  max-height: calc(100vh - 48px);
  background: var(--ri-modal-card-bg);
  color: var(--ri-modal-fg);
  border: 1px solid var(--ri-modal-border);
  border-radius: var(--ri-modal-radius);
  padding: 28px 32px 24px;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  font: 14px/1.55 ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.005em;
}
.ri-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: 0;
  color: var(--ri-modal-muted);
  font-size: 24px; line-height: 1; cursor: pointer;
  padding: 4px 8px;
}
.ri-modal-close:hover { color: var(--ri-modal-fg); }

.ri-modal-card h2 {
  font-family: var(--font-italic, 'Cormorant Garamond', Georgia, serif);
  font-style: italic; font-weight: 500;
  font-size: 26px; line-height: 1.2;
  margin: 0 0 6px; color: var(--ri-modal-fg);
}
.ri-modal-card h3 {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ri-modal-accent);
  margin: 0 0 8px; font-weight: 600;
}
.ri-modal-byline {
  margin: 0 0 22px;
  font-size: 13px; color: var(--ri-modal-muted);
}
.ri-modal-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ri-modal-border);
}
.ri-modal-section:last-of-type { border-bottom: 0; }
.ri-modal-dl {
  display: grid; grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 4px 16px; margin: 0;
}
.ri-modal-dl dt {
  color: var(--ri-modal-muted);
  font-size: 12px; letter-spacing: 0.04em;
}
.ri-modal-dl dd { margin: 0; color: var(--ri-modal-fg); }
.ri-modal-dl dd a, .ri-modal-card a {
  color: var(--ri-modal-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ri-modal-checks { margin: 8px 0 0; padding-left: 18px; }
.ri-modal-checks li { margin-bottom: 4px; font-size: 13px; }
.ri-modal-refs { margin: 0; padding-left: 18px; font-size: 13px; }
.ri-modal-refs li { margin-bottom: 6px; }
.ri-modal-foot {
  margin-top: 14px; font-size: 11px; color: var(--ri-modal-muted);
  letter-spacing: 0.04em;
}
.ri-modal-foot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(244, 235, 217, 0.06);
  padding: 1px 6px; border-radius: 2px;
}

.ri-pending {
  color: var(--ri-modal-pending);
  font-style: italic;
  font-size: 12px;
}

.ri-modal-confidence {
  font-size: 12px; letter-spacing: 0.04em;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-left: 2px solid var(--ri-modal-pending);
  background: rgba(244, 235, 217, 0.04);
}
.ri-conf-high   { border-left-color: #6fa372; }
.ri-conf-medium { border-left-color: #d4a456; }
.ri-conf-low,
.ri-conf-unverified { border-left-color: #c25c4f; }

body.ri-modal-open { overflow: hidden; }

/* ---- provenance ⓘ button (inline in source-list <li>) ---- */
.ri-prov-btn {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; cursor: pointer;
  color: inherit; opacity: 0.55;
  font-size: 14px; line-height: 1;
  padding: 4px 6px;
  margin-left: 6px;
  transition: opacity 0.18s ease;
}
.ri-prov-btn:hover { opacity: 1; }
.source-list li:hover .ri-prov-btn { opacity: 0.9; }

/* ---- annotation button (per source article, bottom-right) ---- */
.ri-ann-btn {
  position: absolute;
  right: 16px; bottom: 16px;
  appearance: none; -webkit-appearance: none;
  background: rgba(20, 16, 10, 0.7);
  color: rgba(244, 235, 217, 0.85);
  border: 1px solid rgba(244, 235, 217, 0.18);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font: 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  z-index: 5;
  transition: opacity 0.18s ease, background 0.18s ease;
  opacity: 0.55;
}
.ri-ann-btn:hover { opacity: 1; background: rgba(20, 16, 10, 0.9); }
.ri-ann-btn span { margin-left: 6px; text-transform: uppercase; }
article.source { position: relative; }

.ri-ann-form {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ri-modal-border);
}
.ri-ann-form label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ri-modal-muted);
}
.ri-ann-form textarea {
  background: rgba(244, 235, 217, 0.04);
  border: 1px solid var(--ri-modal-border);
  border-radius: 2px;
  color: var(--ri-modal-fg);
  font: inherit;
  padding: 8px 10px;
  resize: vertical;
}
.ri-ann-form textarea:focus {
  outline: 0;
  border-color: var(--ri-modal-accent);
}
.ri-ann-list { display: flex; flex-direction: column; gap: 12px; }
.ri-ann-card {
  background: rgba(244, 235, 217, 0.03);
  border-left: 2px solid var(--ri-modal-accent);
  padding: 10px 14px;
  border-radius: 0 2px 2px 0;
}
.ri-ann-card blockquote {
  margin: 0 0 6px;
  font-family: var(--font-italic, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  color: var(--ri-modal-fg);
  font-size: 15px;
  border-left: 0;
  padding-left: 0;
}
.ri-ann-card p { margin: 0 0 6px; font-size: 13px; }
.ri-ann-del {
  appearance: none; background: none; border: 0;
  color: var(--ri-modal-muted);
  font: inherit; text-decoration: underline;
  cursor: pointer; padding: 0;
}
.ri-ann-del:hover { color: #c25c4f; }

/* ---- resume toast ---- */
.ri-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: calc(var(--ri-modal-z) - 1);
  max-width: 360px;
  background: var(--ri-modal-card-bg);
  color: var(--ri-modal-fg);
  border: 1px solid var(--ri-modal-border);
  border-radius: var(--ri-modal-radius);
  padding: 14px 16px;
  font: 13px/1.45 ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(20px); opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}
.ri-toast--in { transform: translateY(0); opacity: 1; }
.ri-toast__body { margin-bottom: 10px; }
.ri-toast__sub {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--ri-modal-muted);
  letter-spacing: 0.04em;
}
.ri-toast__actions { display: flex; gap: 8px; }
.ri-toast__btn {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  color: var(--ri-modal-fg);
  border: 1px solid var(--ri-modal-border);
  border-radius: 2px;
  padding: 6px 12px;
  font: inherit; cursor: pointer;
  letter-spacing: 0.04em;
}
.ri-toast__btn--primary {
  background: var(--ri-modal-accent);
  color: #1a1610;
  border-color: var(--ri-modal-accent);
  font-weight: 600;
}
.ri-toast__btn:hover { background: rgba(244, 235, 217, 0.06); }
.ri-toast__btn--primary:hover { background: #e8b766; }

/* ---- print export floating button ---- */
.ri-print-btn {
  position: fixed; left: 24px; bottom: 24px; z-index: calc(var(--ri-modal-z) - 2);
  appearance: none; -webkit-appearance: none;
  background: rgba(20, 16, 10, 0.7);
  color: rgba(244, 235, 217, 0.85);
  border: 1px solid rgba(244, 235, 217, 0.18);
  border-radius: 999px;
  padding: 8px 16px;
  font: 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(4px);
  opacity: 0.55;
  transition: opacity 0.18s ease;
}
.ri-print-btn:hover { opacity: 1; }

/* ==========================================================================
   PRINT STYLESHEET
   Goal: a clean linear render of the volume's actual content. Hide chrome,
   atmospherics, modals, and floating UI. Show all panels open. Use ink-on-
   paper aesthetics with the volume's existing typography preserved.
   ========================================================================== */
@media print {
  /* Hide all the floating + decorative chrome */
  .ri-modal-root,
  .ri-toast,
  .ri-print-btn,
  .ri-ann-btn,
  .ri-prov-btn,
  .pf-watermark,
  .partner-watermark,
  nav, .nav, .tab-nav, .tabs, .top-nav,
  .slide-hero__bg, .slide-hero--imaged::before,
  .scene-num, .source-list__num,
  video, audio, iframe { display: none !important; }

  /* Force a white page */
  html, body {
    background: #fff !important;
    color: #1a1610 !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  /* Show every tab/panel open */
  [data-tab] { display: block !important; }
  .panel { display: block !important; page-break-before: auto; }

  /* Each source begins fresh; avoid mid-source page breaks where possible */
  article.source,
  [data-source-slug] {
    page-break-before: auto;
    page-break-inside: avoid;
    margin-top: 1.5em;
    border-top: 1px solid #ddd;
    padding-top: 1em;
    background: none !important;
  }

  /* Strip ALL atmospheric/decorative backgrounds — volume-level panel
     backgrounds, session card tints, hero overlays. Anything decorative
     should not waste ink. */
  section, .panel, article, .scene-section, .session-map,
  .source--imaged, .slide-hero--imaged,
  [class*="hero"], [class*="atmosphere"], [class*="atmos"],
  .session-map__card, .session-card, .six-sessions {
    background-image: none !important;
    background-color: transparent !important;
  }
  /* Strip decorative pseudo-elements (overlays, tints, vignettes) */
  [class*="hero"]::before, [class*="hero"]::after,
  [class*="atmosphere"]::before, [class*="atmosphere"]::after,
  .source--imaged::before, .source--imaged::after,
  .slide-hero--imaged::before, .slide-hero--imaged::after { display: none !important; }

  /* Preserve passage formatting but in ink */
  blockquote, .passage, .passage__text {
    color: #1a1610 !important;
    border-left-color: #999 !important;
  }
  .passage__cite {
    color: #555 !important;
    font-size: 9pt !important;
  }

  /* Keep links visible as URLs */
  a { color: #1a1610 !important; text-decoration: underline; }
  a[href^="http"]::after {
    content: " [" attr(href) "]";
    font-size: 8pt; color: #888;
  }

  /* Force ALL headings to dark ink — prevents white-on-white when the
     volume's normal palette uses light text. */
  h1, h2, h3, h4, h5, h6,
  .source__title, .scene-title, .slide-hero__title {
    color: #1a1610 !important;
    page-break-after: avoid;
  }
  /* Eyebrows, captions, meta lines */
  .slide-hero__eyebrow, .slide-hero__sub, .source-list__num,
  .source-list__author, .source-list__form,
  .scene-num, .volume-mark, .volume-mark__no, .volume-mark span {
    color: #555 !important;
    text-shadow: none !important;
  }

  /* Body text + spans default to dark ink */
  p, li, dd, dt, span:not([class*="status"]):not([class*="tag"]) {
    color: #1a1610 !important;
  }

  @page {
    margin: 18mm 16mm 20mm;
  }
  @page :first {
    margin-top: 24mm;
  }
}

/* ==========================================================================
   MOBILE NAV CONTAINMENT — universal fix across all 4 Companion volumes.

   Bug: `.site-header__inner` is a flex container; the bare `<nav>` inside it
   is a flex item that defaults to `min-width: auto`, which means it refuses
   to shrink below its content width. On narrow viewports the nav forces
   horizontal scroll on the entire document.

   Fix: let the nav shrink (`min-width: 0`) and let the inner `.tabs` ul
   scroll horizontally (`overflow-x: auto`). Hide the scrollbar on mobile
   so the scrolling is touch-driven and visually clean.

   A subtle right-edge fade hints there's more nav to scroll.
   ========================================================================== */
/* Catch tiny decorative overflows (e.g. Comrade's `drift` animation that
   translates dividers ±8px on infinite loop). `overflow-x: clip` prevents
   horizontal scroll without breaking sticky positioning. */
html, body { overflow-x: clip; }

/* `.site-header__inner` is flex-direction: column, so `min-width: 0` doesn't
   help — column flex sizes children to their content. Constrain by max-width
   so the nav cannot exceed its container, then make the inner ul scroll. */
.site-header__inner > nav {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
.site-header__inner > nav > .tabs {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  flex-wrap: nowrap;
}
.site-header__inner > nav > .tabs > li { scroll-snap-align: start; flex-shrink: 0; }
@media (max-width: 600px) {
  .site-header__inner > nav { position: relative; }
  .site-header__inner > nav > .tabs { scrollbar-width: none; }
  .site-header__inner > nav > .tabs::-webkit-scrollbar { display: none; }
  /* right-edge fade hint */
  .site-header__inner > nav::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0;
    width: 28px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg, rgba(0,0,0,0.85)));
  }
}

/* ==========================================================================
   MOBILE POLISH — touch targets, font sizes, spacing.

   Design rules:
     · iOS minimum tap target: 44×44 (we hit it where critical; relax to
       36×36 for inline icon buttons where larger feels visually wrong).
     · iOS auto-zoom on inputs is suppressed by ≥16px font-size on text inputs.
     · Caption text floor: 12px on mobile (11px is borderline, 10px breaks).
     · Buttons get vertical padding so line-height-constrained CTAs become
       proper tap zones.
   ========================================================================== */
@media (max-width: 600px) {
  /* ---- our own affordances (.ri-*) ---- */
  .ri-modal-card {
    padding: 22px 20px 20px;
    max-height: calc(100vh - 16px);
  }
  .ri-modal-card h2 { font-size: 22px; }
  .ri-modal-dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .ri-modal-dl dt { margin-top: 8px; }
  .ri-modal-close {
    width: 44px; height: 44px;
    font-size: 28px;
    top: 4px; right: 4px;
    display: flex; align-items: center; justify-content: center;
  }
  .ri-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  .ri-toast__btn { padding: 12px 16px; min-height: 44px; }
  .ri-print-btn {
    left: 12px; bottom: 12px;
    padding: 12px 18px;
    min-height: 44px;
    font-size: 12px;
  }
  .ri-ann-btn {
    right: 12px; bottom: 12px;
    padding: 12px 16px;
    min-height: 44px;
    font-size: 12px;
  }
  .ri-prov-btn {
    padding: 10px 12px;
    min-height: 36px; min-width: 36px;
    font-size: 18px;
  }
  .ri-ann-form button[type="submit"] {
    padding: 14px 16px;
    min-height: 48px;
    font-size: 14px;
  }
  .ri-ann-form textarea {
    font-size: 16px;     /* prevent iOS focus auto-zoom */
    min-height: 64px;
  }
  .ri-ann-card { padding: 12px 14px; }

  /* ---- volume-shared class touch-target bumps ----
     These selectors exist on Take Sides + others that share its templates.
     Targeted in @media so they only apply on narrow viewports. */
  .pilot-banner__dismiss {
    width: 44px; height: 44px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pilot-banner__link {
    display: inline-block;
    padding: 8px 0;
    line-height: 1.3;
  }
  .session-map__cta {
    display: inline-block;
    padding: 10px 0;
    min-height: 40px;
    line-height: 1.3;
  }

  /* ---- caption-floor on tiny text ----
     10px is unreadable on mobile; lift to 12. 11px is borderline but
     intentional for many citation lines, so we leave it. */
  .deck-graphic__tag,
  .source-list__num,
  .scene-num { font-size: 12px !important; letter-spacing: 0.12em; }

  /* ---- article content gutter ----
     The 4 volumes render `<article class="source">` content edge-to-edge
     at narrow widths (no horizontal padding anywhere in the cascade).
     Add a 16px gutter on mobile so prose isn't flush to the viewport edge.
     Scoped tightly so we don't disturb the source--imaged background or
     the slide-hero full-bleed atmospherics. */
  article.source > .source__section,
  article.source .source__section,
  article.source > h1,
  article.source > h2,
  article.source > .passage,
  article.source > p,
  article.source > ul,
  article.source > ol,
  article.source > blockquote {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Source-list inside its wrap; stay flush with hero content's padding */
  ul.source-list { padding-left: 16px; padding-right: 16px; }
  /* Reflections panel form padding on mobile */
  [data-tab="reflections"] .wrap,
  [data-tab="reflections"] .section,
  [data-tab="about"] .wrap,
  [data-tab="about"] .section { padding-left: 16px; padding-right: 16px; }

  /* ---- volume mark contrast over atmospheric hero ----
     The orange-on-orange combination ("THE COMPANION" in volume color over
     a hero image with similar tones) reads as washed out. A subtle dark
     text-shadow lifts legibility without changing the volume's palette. */
  .volume-mark,
  .volume-mark__no,
  .volume-mark span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.25);
  }

  /* ---- bottom-fixed affordance bottom-padding compensation ----
     With the print + annotation fixed buttons visible at the bottom of the
     viewport, prose at the very end of a panel can be occluded. Add scroll
     padding-bottom so the last lines of any panel can be read above the
     button row. */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  main, [data-tab] {
    scroll-padding-bottom: 80px;
  }
  article.source:last-of-type,
  [data-tab].active > .wrap:last-child,
  [data-tab].active:last-child {
    padding-bottom: 80px;
  }
}


/* =========================================================
   Portrait-on-cite — motion as pedagogy.
   When the source enters the viewport, the author's portrait
   transitions from ghost-blurred to sharp + settled. Reads as
   "this person is now speaking." Mayer's temporal contiguity.
   ========================================================= */
.source__portrait.ri-portrait-ghost img {
  filter: blur(5px) saturate(0.85);
  opacity: 0.42;
  transform: scale(1.03);
  transition: filter 720ms cubic-bezier(0.2, 0.7, 0.25, 1),
              opacity 720ms cubic-bezier(0.2, 0.7, 0.25, 1),
              transform 720ms cubic-bezier(0.2, 0.7, 0.25, 1);
  will-change: filter, opacity, transform;
}
.source__portrait.ri-portrait-ghost.ri-portrait-in-focus img {
  filter: blur(0) saturate(1);
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .source__portrait.ri-portrait-ghost img {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Definition glyph — pedagogy via signaling.
   A small ◇ next to first-class vocabulary signals "definition
   lives here." First occurrence per source animates in; recurrences
   are static. Mayer's redundancy/signaling principle.
   ========================================================= */
.ri-gloss-mark {
  /* Term flows naturally inline; no decoration on the term itself */
}
.ri-gloss-glyph {
  display: inline-block;
  font-size: 0.62em;
  vertical-align: super;
  line-height: 1;
  margin-left: 2px;
  color: var(--gold, #d4a017);
  text-decoration: none;
  border-bottom: 0 !important;
  opacity: 0.72;
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
  cursor: help;
}
.ri-gloss-glyph:hover,
.ri-gloss-glyph:focus {
  opacity: 1;
  color: var(--gold-hot, #e6b727);
  transform: translateY(-1px);
  outline: none;
}
.ri-gloss-mark--first .ri-gloss-glyph {
  animation: riGlossEnter 720ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
  animation-delay: 80ms;
}
@keyframes riGlossEnter {
  0%   { opacity: 0; transform: translateY(2px) scale(0.55); }
  60%  { opacity: 0.9; transform: translateY(-1px) scale(1.08); }
  100% { opacity: 0.72; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ri-gloss-mark--first .ri-gloss-glyph {
    animation: none;
    opacity: 0.72;
  }
}

/* Don't print glyphs — they'd just be noise in a paper printout */
@media print {
  .ri-gloss-glyph { display: none !important; }
}