/**
 * SlipNaxos Technical Literature — Master Stylesheet
 * Version 1.0.0 | Project 002
 *
 * Import in all document templates:
 *   <link rel="stylesheet" href="/brand-standards/styles/slipnaxos-documents.css">
 */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

/* ─── CSS Custom Properties ─────────────────────────────────────────── */

:root {
  --snx-navy: #0a1929;
  --snx-navy-mid: #102a43;
  --snx-navy-light: #243b53;
  --snx-green: #22c55e;
  --snx-green-dark: #16a34a;
  --snx-green-muted: #166534;
  --snx-white: #ffffff;
  --snx-gray-50: #f8fafc;
  --snx-gray-100: #f1f5f9;
  --snx-gray-200: #e2e8f0;
  --snx-gray-400: #94a3b8;
  --snx-gray-600: #475569;
  --snx-gray-800: #1e293b;
  --snx-black: #0f172a;

  --snx-font-display: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --snx-font-body: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --snx-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --snx-page-margin-top: 25mm;
  --snx-page-margin-right: 20mm;
  --snx-page-margin-bottom: 20mm;
  --snx-page-margin-left: 20mm;
  --snx-header-height: 15mm;
  --snx-footer-height: 12mm;
}

/* ─── Page Setup ────────────────────────────────────────────────────── */

@page {
  size: A4;
  margin: var(--snx-page-margin-top) var(--snx-page-margin-right)
    var(--snx-page-margin-bottom) var(--snx-page-margin-left);

  @top-center {
    content: element(snx-header);
  }

  @bottom-center {
    content: element(snx-footer);
  }
}

@page :first {
  margin-top: 0;
  @top-center { content: none; }
}

@page cover {
  margin: 0;
  @top-center { content: none; }
  @bottom-center { content: none; }
}

/* ─── Base Typography ───────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.snx-document {
  font-family: var(--snx-font-body);
  font-size: 10pt;
  line-height: 1.5;
  color: var(--snx-black);
  background: var(--snx-white);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.snx-cover-title {
  font-family: var(--snx-font-display);
  font-size: 36pt;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--snx-white);
}

.snx-title {
  font-family: var(--snx-font-display);
  font-size: 24pt;
  font-weight: 700;
  line-height: 1.2;
  color: var(--snx-navy);
}

.snx-h1 {
  font-family: var(--snx-font-display);
  font-size: 18pt;
  font-weight: 600;
  line-height: 1.25;
  color: var(--snx-navy);
  margin: 16pt 0 8pt;
  padding-bottom: 4pt;
  border-bottom: 2pt solid var(--snx-green);
}

.snx-h2 {
  font-family: var(--snx-font-display);
  font-size: 14pt;
  font-weight: 600;
  line-height: 1.3;
  color: var(--snx-navy-mid);
  margin: 14pt 0 6pt;
}

.snx-h3 {
  font-family: var(--snx-font-display);
  font-size: 12pt;
  font-weight: 600;
  line-height: 1.35;
  color: var(--snx-navy-mid);
  margin: 12pt 0 4pt;
}

.snx-h4 {
  font-family: var(--snx-font-display);
  font-size: 11pt;
  font-weight: 600;
  line-height: 1.4;
  color: var(--snx-gray-600);
  margin: 10pt 0 4pt;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.snx-body { font-size: 10pt; line-height: 1.5; margin: 0 0 8pt; }
.snx-body-small { font-size: 9pt; line-height: 1.45; color: var(--snx-gray-600); }
.snx-caption { font-size: 8pt; line-height: 1.4; color: var(--snx-gray-600); letter-spacing: 0.02em; }
.snx-doc-number { font-family: var(--snx-font-mono); font-size: 9pt; letter-spacing: 0.05em; }

/* ─── Header & Footer ───────────────────────────────────────────────── */

.snx-header {
  position: running(snx-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--snx-header-height);
  padding: 0 0 4pt;
  border-bottom: 0.5pt solid var(--snx-gray-200);
}

.snx-header__logo { height: 8mm; }
.snx-header__doc-info { text-align: right; font-size: 7pt; color: var(--snx-gray-600); }
.snx-header__doc-number { font-family: var(--snx-font-mono); font-weight: 600; color: var(--snx-navy); }

.snx-footer {
  position: running(snx-footer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--snx-footer-height);
  padding: 4pt 0 0;
  border-top: 0.5pt solid var(--snx-gray-200);
  font-size: 7pt;
  color: var(--snx-gray-600);
}

.snx-footer__company { font-weight: 600; color: var(--snx-navy); }
.snx-footer__page::after { content: counter(page) " / " counter(pages); }
.snx-footer__qr { width: 10mm; height: 10mm; }

/* ─── Cover Page ────────────────────────────────────────────────────── */

.snx-cover {
  page: cover;
  width: 210mm;
  height: 297mm;
  background: linear-gradient(160deg, var(--snx-navy) 0%, var(--snx-navy-mid) 55%, var(--snx-green-muted) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30mm 25mm 25mm;
  color: var(--snx-white);
  position: relative;
  page-break-after: always;
}

.snx-cover__logo { height: 18mm; }
.snx-cover__accent-bar {
  width: 60mm;
  height: 3pt;
  background: var(--snx-green);
  margin: 12pt 0;
}

.snx-cover__subtitle {
  font-size: 14pt;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 8pt;
}

.snx-cover__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8pt;
  font-size: 9pt;
  border-top: 0.5pt solid rgba(255, 255, 255, 0.25);
  padding-top: 12pt;
}

.snx-cover__meta dt { font-weight: 600; opacity: 0.7; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.06em; }
.snx-cover__meta dd { margin: 2pt 0 8pt; }

.snx-cover__qr {
  position: absolute;
  bottom: 25mm;
  right: 25mm;
  width: 25mm;
  height: 25mm;
  background: var(--snx-white);
  padding: 2mm;
  border-radius: 1mm;
}

/* ─── Revision History ──────────────────────────────────────────────── */

.snx-revision-history {
  margin: 16pt 0;
  page-break-inside: avoid;
}

.snx-revision-history__title {
  font-family: var(--snx-font-display);
  font-size: 11pt;
  font-weight: 600;
  color: var(--snx-navy);
  margin-bottom: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Tables ────────────────────────────────────────────────────────── */

.snx-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8pt 0 12pt;
  font-size: 9pt;
  page-break-inside: avoid;
}

.snx-table th {
  background: var(--snx-navy);
  color: var(--snx-white);
  font-weight: 600;
  text-align: left;
  padding: 6pt 8pt;
  font-size: 9pt;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.snx-table td {
  padding: 5pt 8pt;
  border-bottom: 0.5pt solid var(--snx-gray-200);
  vertical-align: top;
}

.snx-table tr:nth-child(even) td { background: var(--snx-gray-50); }
.snx-table--compact th,
.snx-table--compact td { padding: 3pt 6pt; font-size: 8pt; }

.snx-table--spec th { background: var(--snx-green-muted); }
.snx-table--spec tr:nth-child(even) td { background: #f0fdf4; }
.snx-table--spec td:first-child { font-weight: 600; color: var(--snx-navy); width: 40%; }

/* ─── Callout Boxes ─────────────────────────────────────────────────── */

.snx-callout {
  border-left: 4pt solid;
  padding: 8pt 12pt;
  margin: 10pt 0;
  border-radius: 0 2pt 2pt 0;
  page-break-inside: avoid;
}

.snx-callout__title {
  font-family: var(--snx-font-display);
  font-weight: 600;
  font-size: 10pt;
  margin-bottom: 4pt;
}

.snx-callout--info { border-color: #2563eb; background: #eff6ff; }
.snx-callout--info .snx-callout__title { color: #1e40af; }
.snx-callout--tip { border-color: var(--snx-green); background: #f0fdf4; }
.snx-callout--tip .snx-callout__title { color: var(--snx-green-muted); }
.snx-callout--note { border-color: #0891b2; background: #ecfeff; }
.snx-callout--note .snx-callout__title { color: #155e75; }
.snx-callout--warning { border-color: #ea580c; background: #fff7ed; }
.snx-callout--warning .snx-callout__title { color: #9a3412; }

/* ─── Safety Warnings (ANSI Z535) ───────────────────────────────────── */

.snx-safety {
  margin: 12pt 0;
  border: 1pt solid;
  page-break-inside: avoid;
}

.snx-safety__header {
  display: flex;
  align-items: center;
  gap: 8pt;
  padding: 6pt 10pt;
  font-family: var(--snx-font-display);
  font-weight: 700;
  font-size: 12pt;
  letter-spacing: 0.08em;
}

.snx-safety__body { padding: 8pt 10pt; font-size: 10pt; }

.snx-safety--danger { border-color: #dc2626; }
.snx-safety--danger .snx-safety__header { background: #dc2626; color: #fff; }
.snx-safety--danger .snx-safety__body { background: #fef2f2; }

.snx-safety--warning { border-color: #ea580c; }
.snx-safety--warning .snx-safety__header { background: #ea580c; color: #fff; }
.snx-safety--warning .snx-safety__body { background: #fff7ed; }

.snx-safety--caution { border-color: #ca8a04; }
.snx-safety--caution .snx-safety__header { background: #ca8a04; color: var(--snx-black); }
.snx-safety--caution .snx-safety__body { background: #fefce8; }

.snx-safety--notice { border-color: #2563eb; }
.snx-safety--notice .snx-safety__header { background: #2563eb; color: #fff; }
.snx-safety--notice .snx-safety__body { background: #eff6ff; }

/* ─── Figures & Photos ──────────────────────────────────────────────── */

.snx-figure { margin: 12pt 0; page-break-inside: avoid; text-align: center; }
.snx-figure img { max-width: 100%; height: auto; border: 0.5pt solid var(--snx-gray-200); }
.snx-figure-caption {
  font-size: 8pt;
  font-style: italic;
  color: var(--snx-gray-600);
  margin-top: 4pt;
  text-align: center;
}

.snx-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8pt;
  margin: 12pt 0;
}

/* ─── Content Grid ──────────────────────────────────────────────────── */

.snx-content { max-width: 170mm; }
.snx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; }
.snx-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8pt; }

.snx-section { margin-bottom: 16pt; }
.snx-page-break { page-break-before: always; }

/* ─── Print Utilities ───────────────────────────────────────────────── */

@media print {
  body.snx-document { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .snx-no-print { display: none !important; }
}