/**
 * print.css — Smart Sustainability Lab
 * Titanium & Truth Design System v3
 *
 * Dedicated print stylesheet loaded via media="print" in layout.js.
 * This file is ONLY parsed by the browser in print context,
 * so no @media print wrappers or !important overrides are needed.
 *
 * Sections:
 *   1. Chrome Removal — Navigation, overlays, interactive elements
 *   2. Document Reset — White background, black text, readable type
 *   3. Signal Articles — Header, body, sources, tables
 *   4. Product & About Pages — Spec sheets, cards, callouts
 *   5. Typography — Consistent sizing and weight for print
 *   6. Links — Visible URLs in article body
 *   7. Images — Constrained, no filters
 *   8. Page Flow — Breaks, orphans, widows
 *   9. Footer — Minimal, informational
 */


/* ══════════════════════════════════════════════════════════════
   1. CHROME REMOVAL
   All fixed-position UI, overlays, and interactive elements
   that serve no purpose on paper.
   ══════════════════════════════════════════════════════════════ */

.hud-nav,
.hud-menu-toggle,
.hud-identity,
.hud-nav-desktop,
.blast-shield,
.data-spine,
.reading-progress,
.reading-progress-bar,
.scroll-to-top,
.utility-toolbar,
.signal-back,
.language-switcher,
.signal-related,
.signal-actions,
.category-filter,
.cookie-banner,
.page-hero-grid,
body::before {
  display: none;
}


/* ══════════════════════════════════════════════════════════════
   2. DOCUMENT RESET
   Override dark theme. White stock, black ink, system fonts
   where variable fonts may not embed.
   ══════════════════════════════════════════════════════════════ */

body {
  background: #fff;
  color: #000;
  font-size: 11pt;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  background: transparent;
  color: inherit;
  text-shadow: none;
  -webkit-text-fill-color: inherit;
  box-shadow: none;
}

.section,
.section-dark,
.page-hero,
.page-hero-compact,
.signal-article,
.signal-body,
article {
  background: #fff;
  color: #000;
}


/* ══════════════════════════════════════════════════════════════
   3. SIGNAL ARTICLES
   The primary print use case. Clean article output with
   branded header and visible sources.
   ══════════════════════════════════════════════════════════════ */

/* Branded header — replaces the HUD nav on printed pages */
.signal-article::before {
  content: "Smart Sustainability Lab — Signals Intelligence Layer";
  display: block;
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  font-size: 8pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10pt;
  margin-bottom: 18pt;
}

.signal-article-title {
  font-size: 18pt;
  line-height: 1.2;
  margin-bottom: 6pt;
}

.signal-article-description {
  font-size: 11pt;
  color: #333;
  margin-bottom: 12pt;
}

.signal-article-meta {
  font-size: 8pt;
  color: #666;
  padding-bottom: 12pt;
  border-bottom: 1px solid #eee;
  margin-bottom: 18pt;
}

.signal-article-badges {
  margin-bottom: 8pt;
}

.signal-article-badges .badge {
  border: 1px solid #999;
  color: #333;
  font-size: 7pt;
  padding: 2pt 6pt;
}

/* Sources always visible in print */
.signal-sources {
  display: block;
}

/* Signal body content */
.signal-body {
  font-size: 11pt;
  line-height: 1.65;
}

.signal-body h2 {
  font-size: 14pt;
  margin-top: 18pt;
  margin-bottom: 8pt;
}

.signal-body h3 {
  font-size: 12pt;
  margin-top: 14pt;
  margin-bottom: 6pt;
}

.signal-body blockquote {
  border-left: 2pt solid #999;
  padding-left: 12pt;
  margin-left: 0;
  color: #333;
  font-style: italic;
}

.signal-body pre,
.signal-body code {
  font-size: 9pt;
  border: 1px solid #ddd;
  background: #f8f8f8;
  color: #000;
}

.signal-body pre {
  padding: 8pt;
  overflow: visible;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Tables */
.signal-table-wrap {
  overflow: visible;
}

.signal-body table {
  font-size: 9pt;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #999;
}

.signal-body thead th {
  background: #f0f0f0;
  color: #000;
  border-bottom: 2pt solid #333;
  font-size: 8pt;
  padding: 4pt 6pt;
  text-align: left;
}

.signal-body thead th::after {
  display: none;
}

.signal-body tbody td {
  color: #000;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 4pt 6pt;
}

.signal-body tbody tr:hover {
  background: none;
}


/* ══════════════════════════════════════════════════════════════
   4. PRODUCT & ABOUT PAGES
   Spec sheets, cards, callouts, dossier.
   ══════════════════════════════════════════════════════════════ */

.spec-sheet {
  gap: 24pt;
}

.spec-sheet-label {
  position: static;
}

.section-label {
  color: #555;
  font-size: 8pt;
}

.spec-sheet-title,
.spec-sheet-title-sm,
.page-hero-headline,
.dossier-name {
  color: #000;
  font-size: 16pt;
}

.product-subtitle,
.founder-role {
  color: #555;
  font-size: 8pt;
}

/* Cards */
.card,
.infrastructure-card {
  border: 1px solid #ccc;
  background: #fff;
  break-inside: avoid;
  padding: 12pt;
}

.card::before,
.card::after,
.infrastructure-card::before,
.infrastructure-card::after {
  display: none;
}

.card-icon {
  background: #f0f0f0;
  border-color: #ccc;
}

.card-icon svg {
  stroke: #333;
}

.card-title {
  font-size: 11pt;
  color: #000;
}

.card-text {
  font-size: 10pt;
  color: #333;
}

/* Callouts */
.callout,
.callout-directive {
  border: 1px solid #999;
  background: #f8f8f8;
  break-inside: avoid;
}

.callout-text,
.callout-directive-text {
  color: #000;
  font-size: 10pt;
}

.callout-marker {
  color: #555;
}

/* Dossier */
.dossier-meta {
  border-color: #ccc;
}

.dossier-key {
  color: #666;
}

.dossier-val {
  color: #000;
}

/* Buttons — show as text only */
.btn-circuit {
  border: 1px solid #ccc;
  padding: 6pt 12pt;
}

.btn-circuit::before,
.btn-circuit::after {
  display: none;
}

.btn-circuit-text {
  color: #000;
}

.contact-actions {
  gap: 8pt;
}


/* ══════════════════════════════════════════════════════════════
   5. TYPOGRAPHY
   Consistent scale for print. Override clamp() values.
   ══════════════════════════════════════════════════════════════ */

h1 { font-size: 18pt; line-height: 1.2; }
h2 { font-size: 14pt; line-height: 1.3; }
h3 { font-size: 12pt; line-height: 1.3; }
h4 { font-size: 11pt; line-height: 1.4; }

.prose, .prose p {
  font-size: 10pt;
  line-height: 1.6;
  max-width: none;
}

.page-hero-subtitle {
  font-size: 10pt;
  color: #333;
}

.footer-protocol {
  color: #666;
  font-size: 7pt;
}


/* ══════════════════════════════════════════════════════════════
   6. LINKS
   Show destination URLs inline for article content.
   Navigation links print as plain text.
   ══════════════════════════════════════════════════════════════ */

a {
  color: #000;
  text-decoration: underline;
}

.signal-body a::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #666;
}

/* Don't show URLs for nav/action links */
.contact-linkedin::after,
.contact-actions a::after,
footer a::after {
  content: none;
}


/* ══════════════════════════════════════════════════════════════
   7. IMAGES
   Constrained to page width, no decorative filters.
   ══════════════════════════════════════════════════════════════ */

img {
  max-width: 100%;
  break-inside: avoid;
  filter: none;
}

.dossier-photo {
  border: 1px solid #ccc;
}

.product-logo {
  filter: invert(1);
}


/* ══════════════════════════════════════════════════════════════
   8. PAGE FLOW
   Control breaks, prevent orphans, keep headers with content.
   ══════════════════════════════════════════════════════════════ */

h2, h3, h4 {
  break-after: avoid;
}

pre, blockquote, figure, table {
  break-inside: avoid;
}

.signal-article-header {
  break-inside: avoid;
}

.grid-3 {
  break-inside: avoid;
}

p {
  orphans: 3;
  widows: 3;
}


/* ══════════════════════════════════════════════════════════════
   9. FOOTER
   Minimal informational line. No badges or decorative elements.
   ══════════════════════════════════════════════════════════════ */

footer {
  border-top: 1px solid #ccc;
  padding-top: 12pt;
  font-size: 8pt;
  color: #666;
}

.trust-badge,
.trust-dot {
  display: none;
}

footer a {
  color: #666;
}