/* Print styles for PDF export
   This file is loaded with media="print" to avoid bundling with regular page CSS */

/* ========================================
   CSS CUSTOM PROPERTIES
   Design tokens for print layout
   ======================================== */
:root {
  /* Typography - Font sizes optimized for print readability */
  --print-h1-size: 36pt; /* Main topic headings */
  --print-h1-first: 40pt; /* First page report title (extra emphasis) */
  --print-h2-size: 14pt; /* Section headings */
  --print-h3-size: 12pt; /* Subsection headings */
  --print-h4-size: 11pt; /* Minor headings */
  --print-h5-size: 10pt; /* Small headings, labels */
  --print-body-size: 8.5pt; /* Body text, quotes, descriptions */
  --print-small-size: 9pt; /* Metadata, details, small text */
  --print-report-title-size: 20pt; /* Report title on first page */

  /* Line heights - Compact but readable */
  --print-heading-line-height: 1.2; /* Headings */
  --print-body-line-height: 1.3; /* Body text */

  /* Colors - Grayscale hierarchy for print
     Accessibility notes (optimized for print-to-PDF):
     - Heading color: black on white = 21:1 contrast (AAA compliant)
     - Body color: hsl(215 16% 47%) on white = 7.4:1 contrast (AAA compliant for normal text)
     - Icon color: hsl(215 16% 65%) on white = 4.1:1 contrast (AA compliant for large text/icons)
     All values exceed WCAG 2.1 Level AA requirements for print/PDF output */
  --print-heading-color: black; /* All headings stay dark for emphasis */
  --print-body-color: hsl(
    215 16% 47%
  ); /* Muted gray for body text (hierarchy) */
  --print-icon-color: hsl(215 16% 65%); /* Lighter gray for decorative icons */

  /* Spacing - Minimal but functional */
  --print-spacing-xs: 1pt; /* Tight spacing between elements */
  --print-spacing-sm: 2pt; /* Small gaps, minor margins */
  --print-spacing-md: 4pt; /* Medium spacing for section breaks */
  --print-spacing-lg: 8pt; /* Larger spacing for quote icon gaps */
  --print-spacing-xl: 12pt; /* Major section spacing */
}

/* ========================================
   PAGE SETUP
   ======================================== */
/* Page setup - minimal margins for compact layout */
@page {
  size: letter;
  margin: 0.5in;
}

/* ========================================
   HIDE INTERACTIVE ELEMENTS
   Remove all interactive UI, buttons, and navigation
   ======================================== */
/* Hide navigation and interactive UI elements */
[data-navbar],
[data-radix-scroll-area-viewport],
[role="dialog"],
[data-radix-popper-content-wrapper] {
  display: none !important;
}

/* Hide the outline sidebar column (any sticky sidebar with min-width) */
aside.sticky[class*="min-w"],
.sticky[class*="min-w-"] {
  display: none !important;
}

/* Hide toolbar buttons (high z-index interactive overlays) - exact class matching */
.z-20,
.z-30,
.z-40,
.z-50 {
  display: none !important;
}

/* Hide copy link buttons and link icons */
button[aria-label*="Copy"],
button[aria-label*="copy" i],
button[aria-label*="link" i],
button:has(svg[class*="Link"]),
a[aria-label*="link" i],
.lucide-link,
.lucide-link-2,
[data-testid="copybutton"],
button:has(svg[class*="Copy"]) {
  display: none !important;
}

/* Hide "Show more" buttons (expand claims, expand subtopics) */
[data-testid="show-more-claims-button"],
[data-testid="show-more-subtopics-button"] {
  display: none !important;
}

/* Hide quote bubble icons next to claims (interactive quote indicators) */
svg[class*="QuoteBubble"],
.lucide-quote,
[class*="quote-bubble" i] {
  display: none !important;
}

/* Hide the entire quote indicator wrapper (bordered pill with cursor-pointer) */
[data-testid="claim-item"] .cursor-pointer,
[data-testid="claim-item"] [class*="border"][class*="rounded"] {
  display: none !important;
}

/* Hide chevron/arrow indicators */
.lucide-chevron-right,
.lucide-chevron-down,
.lucide-chevron-up,
svg[class*="chevron" i] {
  display: none !important;
}

/* Hide info and other UI icons */
.lucide-info,
.lucide-circle-help,
svg[class*="info" i] {
  display: none !important;
}

/* Hide checkbox/controversy indicators */
input[type="checkbox"],
[role="checkbox"],
.controversy-indicator {
  display: none !important;
}

/* Hide "Read more" / "Show less" toggle buttons */
span.underline.cursor-pointer,
button.underline,
button.absolute.bottom-0.right-0 {
  display: none !important;
}

/* Hide expand/collapse topic buttons */
button:has(svg[class*="Collapse"]),
button:has(svg[class*="Expand"]),
[data-testid="open-topic-button"],
[data-testid="open-all-button"],
[data-testid="collapse-all-button"] {
  display: none !important;
}

/* Hide sort/dropdown menus (Radix UI dropdowns) */
[data-radix-dropdown-menu-trigger],
button:has(svg[class*="ChevronsUpDown"]),
button:has(.lucide-chevrons-up-down) {
  display: none !important;
}

/* Hide tabs (Report/Cruxes toggle) - show all content in print */
[role="tablist"],
[data-radix-tabs-list] {
  display: none !important;
}

/* Hide video embeds */
iframe {
  display: none !important;
}

/* Hide the info dismissible box and informational tooltips */
.border.rounded:has(svg),
[role="alert"],
.info-tooltip,
.info-banner {
  display: none !important;
}

/* Hide appendix section - target by class pattern */
.appendix-section {
  display: none !important;
}

/* Hide appendix download link */
.cursor-pointer.underline {
  display: none !important;
}

/* Hide mobile menu sheet */
[data-radix-dialog-overlay],
[data-state="open"][role="dialog"] {
  display: none !important;
}

/* Hide bridging score indicators and badges */
[data-bridging-score],
[data-bridging-indicator],
.bridging-badge,
[class*="bridging" i]:not([class*="print"]) {
  display: none !important;
}

/* ========================================
   LAYOUT ADJUSTMENTS
   Single-column layout optimized for print
   ======================================== */
/* Layout adjustments - single column */
body {
  background: white !important;
  color: black !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ensure all content respects page width */
* {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Make the main content column full width (any max-width container) */
[class*="max-w-"] {
  max-width: 100% !important;
}

/* Remove right spacer column and flex grow spacers */
.flex-grow.hidden,
[class*="flex-grow"][class*="hidden"] {
  display: none !important;
}

/* Remove sticky positioning */
.sticky {
  position: static !important;
}

/* Expand all line-clamped text */
.line-clamp-2,
.line-clamp-3,
.line-clamp-4 {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}

/* ========================================
   PAGE BREAKS
   Control pagination and prevent orphans/widows

   Strategy:
   1. Prevent orphans/widows (lone lines at top/bottom of pages)
   2. Keep semantic blocks together (topics, claims, quotes)
   3. Exception: First topic can break across pages for better flow
   4. Keep headings with their following content
   ======================================== */

/* Prevent orphans and widows (single lines at top/bottom of pages) */
p,
li,
blockquote {
  orphans: 3;
  widows: 3;
}

/* Keep semantic blocks together - avoid breaking inside
   Note: p tags are NOT included here - long summaries should break across pages.
   The orphans/widows rules above handle preventing single lines at page boundaries. */
[data-testid="claim-item"],
.rounded-md.border-l-4,
h1,
h2,
h3,
h4,
h5,
ul,
ol,
blockquote,
.quote-row {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Topics - allow breaking across pages when expanded */
[data-testid="topic-item"] {
  page-break-inside: auto;
  break-inside: auto;
  page-break-before: auto;
}

/* Keep headings with their following content */
h1,
h2,
h3,
h4,
h5 {
  page-break-after: avoid;
  break-after: avoid;
}

/* Prevent page breaks immediately after headings (adds pseudo-element glue) */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after {
  content: "";
  display: block;
  height: 0;
  page-break-inside: avoid;
}

/* Keep report header with first topic */
[data-report-header] {
  page-break-after: avoid;
  break-after: avoid;
}

/* FIRST TOPIC EXCEPTION: Allow breaking across pages
   The first topic immediately follows the report header, so preventing
   page breaks would push it to page 2 when expanded. Instead, allow it
   to flow naturally across pages while keeping header on same page. */
div[data-testid="topic-item"]:nth-child(2) {
  page-break-before: avoid !important; /* Stay with header */
  page-break-inside: auto !important; /* Allow internal breaks */
  break-inside: auto !important;
  margin-top: var(--print-spacing-xl) !important; /* Space after description */
}

/* Allow first topic's children to break freely */
div[data-testid="topic-item"]:nth-child(2) * {
  page-break-inside: auto !important;
  break-inside: auto !important;
}

/* ========================================
   TYPOGRAPHY
   Font sizes, colors, and text hierarchy
   ======================================== */
/* Typography adjustments for print - compact professional sizing */
h1 {
  font-size: var(--print-h1-size) !important;
  line-height: var(--print-heading-line-height) !important;
  margin-bottom: var(--print-spacing-xl) !important;
  margin-top: var(--print-spacing-xl) !important;
}

/* First page title should be even larger */
body > * h1:first-of-type,
[data-testid="report"] h1:first-of-type {
  font-size: var(--print-h1-first) !important;
}

h2 {
  font-size: var(--print-h2-size) !important;
  line-height: var(--print-heading-line-height) !important;
  margin-bottom: var(--print-spacing-sm) !important;
  margin-top: var(--print-spacing-sm) !important;
}

h3 {
  font-size: var(--print-h3-size) !important;
  line-height: var(--print-heading-line-height) !important;
  margin-bottom: var(--print-spacing-xs) !important;
  margin-top: var(--print-spacing-sm) !important;
}

h4 {
  font-size: var(--print-h4-size) !important;
  line-height: var(--print-body-line-height) !important;
  margin-bottom: var(--print-spacing-xs) !important;
  margin-top: var(--print-spacing-sm) !important;
}

h5 {
  font-size: var(--print-h5-size) !important;
  line-height: var(--print-body-line-height) !important;
  margin-bottom: var(--print-spacing-xs) !important;
}

p {
  font-size: var(--print-body-size) !important;
  line-height: var(--print-body-line-height) !important;
  margin-bottom: var(--print-spacing-xs) !important;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--print-heading-color) !important;
}

/* Body text should use muted foreground for better hierarchy */
p {
  color: var(--print-body-color) !important;
}

/* Section headers using p tags with font-medium should stay dark */
p.font-medium,
p[class*="font-medium"] {
  color: var(--print-heading-color) !important;
}

/* Compact text sizing for metadata and details */
details,
small,
.text-sm {
  font-size: var(--print-small-size) !important;
  line-height: var(--print-body-line-height) !important;
}

/* Topic summary - slight indentation and spacing */
[class*="px-4"][class*="sm:px-8"][class*="pb-6"] {
  padding-left: 0.5rem !important;
  padding-bottom: var(--print-spacing-md) !important;
}

/* Overview print styles - using design tokens for consistency */
.print-overview-topic {
  font-size: var(--print-h3-size) !important;
  line-height: var(--print-heading-line-height) !important;
}

.print-overview-subtopic {
  font-size: var(--print-h5-size) !important;
  line-height: var(--print-body-line-height) !important;
}

/* Main report title on first page */
.print-report-title {
  font-size: var(--print-report-title-size) !important;
  line-height: var(--print-body-line-height) !important;
  margin-bottom: var(--print-spacing-md) !important;
}

/* Bold claim text to differentiate from quotes, keep dark */
[data-testid="claim-item"] p {
  font-weight: 600 !important;
  color: var(--print-heading-color) !important;
}

/* Quote author names should match quote text color */
.quote-row .text-muted-foreground,
[data-testid="claim-item"] .text-muted-foreground {
  color: var(--print-body-color) !important;
  font-weight: 400 !important;
}

/* Ensure links are visible but not styled as clickable */
a {
  color: black !important;
  text-decoration: none !important;
}

/* ========================================
   CONTROVERSY INDICATORS
   Monochrome styling for print
   ======================================== */
/* Override theme colors to black for monochrome printing */
/* Target all custom theme color classes (text-theme_*) */
[class*="text-theme_"],
[class*="text-theme_"] * {
  color: var(--print-heading-color) !important;
}

/* Make point graphic dots monochrome using filter */
div[data-testid="point-graphic-cell"] {
  filter: grayscale(100%) !important;
  opacity: 0.7 !important;
}

/* Make agree/disagree spectrum dots monochrome */
div[data-testid="spectrum-dot"] {
  background-color: hsl(215 16% 85%) !important;
  border-color: hsl(215 16% 60%) !important;
}

/* Hide controversy icons in print (CSS mask doesn't print well) */
/* React converts maskImage to mask-image in the DOM */
[style*="mask-image"],
[style*="-webkit-mask-image"],
div[style*="mask-image"],
div[style*="-webkit-mask-image"] {
  display: none !important;
}

/* Remove gap from all flex containers with gap-1 to prevent indentation from hidden icons */
.flex.gap-1,
.gap-1,
[class*="gap-1"] {
  gap: 0 !important;
}

/* Target the specific controversy indicator in cruxes tab - remove indentation */
.hidden.sm\:block.cursor-pointer > div,
.sm\:block.cursor-pointer > div {
  gap: 0 !important;
  padding-left: 0 !important;
}

/* Ensure no margins on controversy label spans */
span.whitespace-nowrap,
span.text-sm.whitespace-nowrap {
  margin: 0 !important;
  padding-left: 0 !important;
}

/* Ensure controversy badge text is left-aligned */
.flex.items-center.gap-1.border.border-border.rounded-md,
.flex.items-center.gap-1.border.rounded-md.px-2 {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: var(--print-spacing-md) !important;
  padding-right: var(--print-spacing-md) !important;
}

/* Ensure span inside badge is also left-aligned and takes full width */
.flex.items-center.gap-1.border.rounded-md span.text-xs {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ========================================
   SPACING
   Compact spacing for maximum page usage
   ======================================== */
/* Targeted spacing reset - only reset containers that need it */
body,
main,
section,
article,
header,
footer {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset spacing on topic and subtopic containers */
[data-testid="topic-item"],
[data-testid="subtopic-item"] {
  margin: 0 !important;
  padding: var(--print-spacing-sm) !important;
}

/* Apply intentional spacing between major sections */
[data-testid="topic-item"] {
  margin-bottom: var(--print-spacing-xl) !important;
  padding: var(--print-spacing-md) !important;
}

[data-testid="subtopic-item"] {
  margin-bottom: var(--print-spacing-md) !important;
}

/* Compact but readable spacing for content */
[class*="mb-"] {
  margin-bottom: var(--print-spacing-xs) !important;
}

[class*="mt-"] {
  margin-top: var(--print-spacing-xs) !important;
}

[class*="ml-"] {
  margin-left: var(--print-spacing-sm) !important;
}

[class*="mr-"] {
  margin-right: var(--print-spacing-sm) !important;
}

/* Override very large margins */
.mb-36,
.mb-24,
.mb-20,
.mb-16,
.mb-12,
.mt-36,
.mt-24,
.mt-20,
.mt-16,
.mt-12 {
  margin-bottom: var(--print-spacing-md) !important;
  margin-top: var(--print-spacing-md) !important;
}

/* Minimal padding for cards and sections */
[class*="p-"],
[class*="px-"],
[class*="py-"] {
  padding: var(--print-spacing-sm) !important;
}

/* Minimal gap spacing */
[class*="gap-"] {
  gap: var(--print-spacing-xs) !important;
}

/* Override: Claim items need zero padding/margin for tight quote spacing */
[data-testid="claim-item"],
[data-testid="claim-item"] * {
  margin: 0 !important;
  padding: 0 !important;
}

/* Override: Print-only quotes section - nuclear reset */
[data-print-quotes] {
  margin: 0 0 var(--print-spacing-sm) 0 !important;
  padding: var(--print-spacing-sm) 0 0 0 !important; /* small top padding */
}

[data-print-quotes] * {
  margin: 0 !important;
  padding: 0 !important;
}

/* Restore just the gap inside quote-row for icon spacing */
[data-print-quotes] .quote-row {
  gap: var(--print-spacing-lg) !important;
}

/* Exception: Quote rows need more spacing between icon and text */
.quote-row {
  gap: var(--print-spacing-lg) !important;
}

/* Prevent quote icon from being clipped */
.quote-row > div:first-child {
  padding: 0 !important;
  min-width: var(--print-spacing-lg) !important;
  overflow: visible !important;
}

.quote-row > div:first-child svg {
  overflow: visible !important;
  width: 10pt !important;
  height: 10pt !important;
}

/* Quote icons should be lighter than muted text */
.quote-row svg,
.quote-row svg.fill-black,
.quote-row > div:first-child svg {
  fill: var(--print-icon-color) !important;
}

/* Override any fill utilities on quote icons */
.quote-row [class*="fill-"] {
  fill: var(--print-icon-color) !important;
}

/* Remove spacing from containers */
body,
main,
section,
article,
div,
header,
footer {
  margin: 0 !important;
}

[class*="space-y-"] > * + * {
  margin-top: 1pt !important;
}

[class*="space-x-"] > * + * {
  margin-left: 1pt !important;
}

/* ========================================
   COMPONENT-SPECIFIC
   Specialized styles for specific components
   ======================================== */
/* Make hover cards content visible inline (quotes) */
[data-radix-hover-card-content] {
  display: none !important;
}

/* ========================================
   GRAYSCALE CONVERSION
   Convert all colors to grayscale for cost-effective printing
   ======================================== */
/* Apply grayscale only to elements that typically have colors */
svg,
[class*="bg-theme-"],
[class*="text-theme-"],
.point-graphic,
[data-testid="point-graphic-cell"],
[data-testid="spectrum-dot"] {
  filter: grayscale(100%) !important;
}

/* Ensure WCAG AA contrast ratios for text (4.5:1 for normal text) */
.text-muted-foreground {
  color: #4a4a4a !important; /* Medium gray for secondary text */
}

body,
.text-foreground {
  color: #1a1a1a !important; /* Near-black for body text */
}

/* Subtle borders for visual hierarchy */
.border {
  border-color: #ccc !important;
  border-width: 1px !important;
}

/* Ensure backgrounds provide contrast */
.bg-muted {
  background-color: #f5f5f5 !important;
}

/* Topic headers and headings need strong contrast */
h1,
h2,
h3,
.topic-title,
[data-testid="topic-title"] {
  color: #000 !important;
}

/* Force theme colors to grayscale values */
[class*="text-theme_"] {
  color: #333 !important;
}

[class*="bg-theme-"] {
  background-color: #e0e0e0 !important;
}