/* wtpp-doc-preview-modal.css
 *
 * Shared modal styles for the document preview overlay. Originally
 * defined inline in platform_index.html (v3.7.116 onwards); extracted
 * here in v3.7.378 so the modal can be reused on index.html (homepage)
 * for the "Read the Platform Manifesto", "Open Tax Calculator", and
 * "Open Wage Floor Calculator" buttons. Per Jason's review pass: the
 * homepage buttons previously navigated away to the doc-mirror pages,
 * pulling the visitor off the homepage and showing the legacy nav +
 * Close/Download chrome on the mirror page. Modal preview keeps them
 * on the homepage with a clean Close/Download surface and returns
 * focus to the originating button on close.
 *
 * Both platform_index.html and index.html still own the HTML markup
 * and click-interceptor JS inline (different click targets per page);
 * only the CSS is shared.
 * ===========================================================================
 */

#doc-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--glass-surface);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#doc-preview-overlay[aria-hidden="false"] {
  display: flex;
}
#doc-preview-modal {
  background: var(--paper);
  color: var(--ink, var(--ink));
  width: 100%;
  max-width: 1400px;
  height: 100%;
  max-height: 92vh;
  border-radius: 4px;
  box-shadow: 0 12px 48px var(--ov-black-50);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: doc-preview-in 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #doc-preview-modal { animation: none; }
}
@keyframes doc-preview-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* v3.7.170: .doc-preview-header and .doc-preview-nav CSS removed — modal
   chrome simplified to .doc-preview-chrome (slim bar with Close+Download
   buttons styled like Menu button, see below). */

/* button.page-nav-link override kept — used by other .page-nav instances */
button.page-nav-link {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
}

/* Modal body — white, iframe edge-to-edge */
.doc-preview-body {
  flex: 1;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}
#doc-preview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--paper);
  display: block;
}
/* v3.7.177 (SITE-8): visible focus indicator for keyboard users.
   The iframe has tabindex="0" so it receives focus when tabbing
   through modal controls, but had no visible focus state — keyboard
   users couldn't tell when the iframe was focused. axe DevTools
   flagged this. The outline-offset of -3px sits the ring inside
   the iframe edge so it's clearly visible without expanding the
   modal layout. Honors prefers-reduced-motion via the same global
   rule that suppresses transitions elsewhere. */
#doc-preview-iframe:focus-visible {
  outline: 3px solid var(--red, var(--red));
  outline-offset: -3px;
}
.doc-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted, var(--ink-muted));
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
  background: var(--paper);
}
.doc-preview-loading.hidden {
  display: none;
}

/* Phone viewport adjustments for the modal */
@media (max-width: 720px) {
  #doc-preview-overlay { padding: 0 !important; }
  #doc-preview-modal {
    max-width: 100% !important;
    width: 100vw !important;
    max-height: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* v3.7.172: Modal header — minimum-sized variant (no stats, but includes
   title + tagline + eyebrow + Close/Download + tricolor band). Matches the
   visual identity of the scroll-collapsed mobile header from image 1. The
   doc page's own header (inside the iframe) carries the stats and full
   nav; this modal header is the lightweight chrome around the viewer.
   v3.7.173: flag background added (matches main site header per user
   reference image 2). Layout changed from horizontal (brand-left,
   buttons-right) to vertical stacked (brand-top, buttons-below-left)
   per user Q2 answer "(b) — where Menu button sits in image 2". Modal
   header stays in the compact stacked layout at ALL viewport sizes per
   user Q5 answer (no responsive desktop variant). */
.doc-preview-header {
  background-image: url('flag-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
/* Flag-image wash overlay — matches the main site header's gradient
   wash (rgba beige 78%→92%) so the title/tagline text remains readable
   over the flag. */
.doc-preview-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--glass-surface) 0%, var(--glass-surface) 100%);
  pointer-events: none;
  z-index: 0;
}
.doc-preview-header-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 20px;
}
.doc-preview-header-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.doc-preview-header-title {
  font-family: "UnifrakturCook", "Times New Roman", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink, var(--ink));
  margin: 0;
  line-height: 1;
}
.doc-preview-header-title em {
  font-style: italic;
}
.doc-preview-header-tagline {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 14px;
  /* v3.7.176 (SITE-6): was var(--ink-muted, var(--ink-muted)) on flag-bg-with-wash, contrast
     3.45–3.73:1 across the variable wash — failed WCAG 2.1 AA. Now
     var(--ink-soft, var(--ink-soft)) yielding 6.7–7.1:1 across the same wash range. AA pass,
     AAA borderline. Italic + serif typography preserves visual
     hierarchy below the title even without the lighter shade. */
  color: var(--ink-soft, var(--ink-soft));
  line-height: 1.3;
}
.doc-preview-header-eyebrow {
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* v3.7.176 (SITE-7): was #8e8a85, contrast 2.14–2.25:1 — well
     below AA. Now var(--ink-soft, var(--ink-soft)) yielding 6.7–7.1:1. AA pass. Uppercase
     monospace + tracking + smaller size preserves tertiary feel
     even at the same color as tagline. */
  color: var(--ink-soft, var(--ink-soft));
  font-style: normal;
  margin-left: 10px;
}
.doc-preview-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dp-add-path-icon { display: inline-flex; align-items: center; }
.dp-add-path-label { white-space: nowrap; }
/* v3.7.741: the label toggles between "Add to reading path" and "In reading path"
   (and the icon between a plus-page and a check). Those strings differ in width, so
   the button used to visibly narrow/shift when toggled. Reserve a stable width sized
   to the WIDEST state ("Add to reading path") and center the content, so the button
   stays put in every state (default, active/in-path, and disabled). The value is an
   em-based estimate of the longest label plus icon+gap+padding; content can still
   grow past it if a translation is longer, so it never clips. */
#doc-preview-add-path { min-width: 15.5em; justify-content: center; }
#doc-preview-add-path.is-in { color: var(--red); }
@media (max-width: 600px) {
  .doc-preview-header-main { padding: 12px 14px; gap: 8px; }
  .doc-preview-header-title { font-size: 24px; }
  .doc-preview-header-eyebrow { display: block; margin-left: 0; margin-top: 2px; }
}


/* ===========================================================================
 * v3.7.380 — DARK MODE OVERRIDES
 *
 * The original v3.7.116 modal CSS hardcoded a cream-colored wash overlay
 * (rgba(245, 241, 234, ...)) on the flag-background header, designed for
 * light mode. In dark mode that wash stayed cream while body text colors
 * flipped to light, making the title and tagline render as light text on
 * a light wash — invisible per Jason's screenshot.
 *
 * Fix: dark-mode wash uses the dark `--paper` token color
 * (var(--ink)) at the same 0.78→0.92 alpha so the flag image dims to a
 * dark mood and the light-mode text colors (which auto-flip via
 * var(--ink) and var(--ink-soft)) become readable.
 *
 * Also explicit dark-mode background for the modal body so the page
 * behind doesn't bleed through.
 * ===========================================================================
 */

/* Dark-mode wash on the flag-background header — replaces the cream
   gradient with a dark one so light text becomes readable */
html[data-theme="dark"] .doc-preview-header::before {
  background: linear-gradient(180deg, var(--glass-surface) 0%, var(--glass-surface) 100%);
}

/* Dark-mode solid backgrounds — keep the modal opaque so nothing from
   the page behind shows through. The light-mode rules already set
   appropriate backgrounds via var(--paper); these are explicit for clarity. */
html[data-theme="dark"] #doc-preview-modal {
  background: var(--paper, var(--ink));
}
html[data-theme="dark"] .doc-preview-body {
  background: var(--paper, var(--ink));
}

/* Dark-mode loading placeholder — readable on dark background */
html[data-theme="dark"] .doc-preview-loading {
  background: var(--paper, var(--ink));
  color: var(--ink-soft, var(--tone-69));
}

/* Dark-mode overlay backdrop (the dim layer behind the modal) — a touch
   darker so it's clearly separable from the page content in dark mode */
html[data-theme="dark"] #doc-preview-overlay {
  background: var(--ov-black-75);
}