/* ─────────────────────────────────────────────────────────────────────
   Legal-doc shared print stylesheet.

   Source-of-truth for what every canonical legal/trust doc looks like
   when "Save as PDF" is fired. Used by every doc in legal/ plus
   security.html — one file, one place to update the print convention.

   Top-company-grade conventions captured here:
   · Letter-size pages with tight 0.6" × 0.65" margins
   · Site chrome (header/footer/nav) hidden in print
   · Cover block (eyebrow + h1 + meta + callout) stays on page 1
   · Each major section starts a new page via page-break-before
   · Tight typography: 10–10.5pt body, 1.45 line-height, 14pt h2
   · Page-break-inside: avoid on callouts, tables, definition blocks
   · Print-time chrome (Save-as-PDF button, online-only nav) hidden

   Two structural patterns are supported:
   · `.lgl-shell` + child `h2` → every canonical legal doc (msa, dpa,
     privacy, subprocessors, refund-policy, contract-philosophy,
     cookie-policy, do-not-sell, dmca-policy, sow, accessibility,
     dpa-outcome-schedule)
   · `.sec-shell` + child `.sec-item` → security.html

   The on-screen "Save as PDF" button — `.lgl-pdf-btn` — is injected by
   legal-print.js and styled here (both on-screen and hidden in print).

   How to extend:
   · New canonical doc using `.lgl-shell` → just link this CSS + JS, no
     CSS edits required.
   · New canonical doc using a different structural pattern → add the
     specific selectors to the section-page-break rule below.
   ───────────────────────────────────────────────────────────────────── */


/* ─── ON-SCREEN: Save-as-PDF button ─────────────────────────────────
   The button itself sits inside the doc near the cover block; legal-
   print.js auto-injects it after the .lgl-callout (or .sec-shell head)
   if it isn't already in the source. Styled to match the procurement
   bundle's print button so the visual signal is consistent. */
.lgl-pdf-btn-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 28px;
}
.lgl-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--sn-ink-darkest, #0A2540);
  color: #FFFFFF;
  border: 1px solid var(--sn-ink-darkest, #0A2540);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 10px 24px -12px rgba(10, 37, 64, 0.42);
  white-space: nowrap;
}
.lgl-pdf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06), 0 16px 32px -12px rgba(10, 37, 64, 0.52);
}
.lgl-pdf-btn:active { transform: translateY(0); }
.lgl-pdf-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* WHITE TEXT on the Download-PDF pill, on SCREEN (2026-07-20 — WCAG fix). On mobile
   the affordance is an <a> injected into the doc content, so the doc's screen link
   colour (deep cyan #0891B2) overrode this pill's white — cyan-on-navy fails contrast.
   Desktop is a <button>, unaffected. !important because the overriding rule's source
   varies (site.css / per-doc) and this pill must stay legible regardless. */
a.lgl-pdf-btn, a.lgl-pdf-btn:link, a.lgl-pdf-btn:visited, a.lgl-pdf-btn:hover,
.sec-shell a.lgl-pdf-btn, .lgl-shell a.lgl-pdf-btn { color: #FFFFFF !important; }
a.lgl-pdf-btn .lgl-pdf-btn-icon, a.lgl-pdf-btn svg { color: #FFFFFF !important; stroke: #FFFFFF !important; }

/* NO SIDEWAYS DRIFT on mobile (2026-07-20 — founder: "boundaries move left and right
   as I scroll"). A single centered column should never scroll horizontally; the usual
   iOS causes are a long unbreakable token (a URL / long enumerated clause) or a
   sub-pixel overflow. Break long strings and hard-stop horizontal scroll at the root.
   `clip` doesn't create a scroll container, so it can't break any sticky descendant.
   Preventive — the exact shift wasn't reproducible in headless emulation. */
html { overflow-x: clip; }
.lgl-shell, .sec-shell { overflow-wrap: break-word; }
.lgl-shell a, .sec-shell a { overflow-wrap: anywhere; }


/* ─── PRINT ─────────────────────────────────────────────────────────
   The actual save-as-PDF rendering. Everything below applies only
   when the browser is printing or saving as PDF. */
@media print {

  /* Page setup */
  @page {
    size: letter;
    margin: 0.6in 0.65in;
  }

  /* Hide all site chrome */
  .sn-header,
  .sn-footer,
  .sn-nav-toggle,
  .sn-nav,
  .sn-anim-toggle,
  .sn-final-cta,
  .lgl-back,
  .lgl-doc-cta,
  .lgl-pdf-btn-wrap,
  .pb-print-btn-wrap,
  [data-scroll-progress] {
    display: none !important;
  }

  /* Print body */
  body {
    background: #FFFFFF !important;
    color: #0A2540 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* Generic shell — full-width, no horizontal padding (margins handled by @page) */
  .lgl-shell,
  .sec-shell {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ─── Cover block (page 1) ─────────────────────────────────────── */
  .lgl-eyebrow,
  .sec-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0E7490;
    margin-bottom: 14px;
  }
  .lgl-shell > h1,
  .sec-shell > h1 {
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #0A2540;
    margin: 0 0 12px;
    page-break-after: avoid;
  }
  .lgl-meta,
  .sec-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9pt;
    letter-spacing: 0.04em;
    color: #5A6B82;
    margin-bottom: 18px;
  }
  .lgl-meta span,
  .sec-meta span {
    margin-right: 14px;
  }
  .lgl-callout {
    background: #FFFFFF !important;
    border: 1pt solid #E3E8EE;
    padding: 12pt 14pt;
    margin: 0 0 20pt;
    border-radius: 4pt;
    font-size: 10pt;
    line-height: 1.5;
    page-break-inside: avoid;
  }

  /* ─── Section page breaks ──────────────────────────────────────────
     Every canonical legal doc starts a new page at each section
     heading. The :first-of-type override prevents an orphan blank
     page between the cover block and section 1.
     ───────────────────────────────────────────────────────────────── */

  /* Pattern 1 — `.lgl-shell` + child h2 (msa, dpa, privacy, etc.) */
  .lgl-shell > h2 {
    page-break-before: always;
    page-break-after: avoid;
    font-size: 14pt;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0A2540;
    margin: 0 0 10pt;
    padding-top: 0;
  }

  /* Pattern 2 — `.sec-shell` + child `.sec-item` (security.html) */
  .sec-shell .sec-item {
    page-break-before: always;
    page-break-inside: auto;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .sec-shell .sec-item:first-of-type {
    page-break-before: auto;
  }
  .sec-shell .sec-item h2 {
    page-break-after: avoid;
    font-size: 14pt;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0A2540;
    margin: 0 0 10pt;
  }
  .sec-shell .sec-item-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0E7490;
    display: block;
    margin-bottom: 6pt;
  }

  /* security.html marketing hero is for screen only — strip from print.
     .sec-arch is the whole "Launch architecture at a glance" screen-diagram
     section (wrapper included, so no orphaned heading/callout fragments
     open the PDF before the document title). */
  .sn-hero,
  .sec-hero,
  .sn-section.sn-section-tone-paper,
  .sec-arch,
  .sec-arch-stack,
  .sec-arch-row {
    display: none !important;
  }

  /* ─── Body typography ─────────────────────────────────────────── */
  .lgl-shell p,
  .lgl-shell li,
  .sec-shell p,
  .sec-shell li {
    font-size: 10pt;
    line-height: 1.5;
    color: #0A2540;
  }
  .lgl-shell h3,
  .sec-shell h3 {
    font-size: 11pt;
    font-weight: 600;
    color: #0A2540;
    margin: 16pt 0 6pt;
    page-break-after: avoid;
  }
  .lgl-shell ul,
  .lgl-shell ol,
  .sec-shell ul,
  .sec-shell ol {
    padding-left: 18pt;
    margin: 0 0 12pt;
  }
  .lgl-shell li,
  .sec-shell li {
    margin-bottom: 5pt;
  }
  .lgl-shell strong,
  .sec-shell strong {
    font-weight: 600;
    color: #0A2540;
  }
  .lgl-shell a,
  .sec-shell a {
    color: #0E7490;
    text-decoration: none;
  }
  /* The mobile Download-PDF affordance is an <a> injected INTO the doc content, so the
     content link colour above (teal) overrode .lgl-pdf-btn's white — teal-on-navy, a
     WCAG contrast failure (desktop is a <button>, unaffected). Force white on the pill
     itself + its icon, at higher specificity than the content-link rule. (2026-07-20) */
  a.lgl-pdf-btn, a.lgl-pdf-btn:link, a.lgl-pdf-btn:visited, a.lgl-pdf-btn:hover,
  .lgl-shell a.lgl-pdf-btn, .sec-shell a.lgl-pdf-btn { color: #FFFFFF; }
  a.lgl-pdf-btn svg, .sec-shell a.lgl-pdf-btn svg, .lgl-shell a.lgl-pdf-btn svg { color: #FFFFFF; stroke: #FFFFFF; }

  /* ─── Break-inside-avoid for cohesive blocks ──────────────────── */
  .lgl-callout,
  .lgl-table,
  .lgl-definition,
  .lgl-kv,
  .sec-status,
  table,
  dl,
  blockquote {
    page-break-inside: avoid;
  }

  /* ─── Tables ─────────────────────────────────────────────────── */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
    margin: 10pt 0;
  }
  table th,
  table td {
    border: 0.5pt solid #C9D2DE;
    padding: 6pt 8pt;
    text-align: left;
    vertical-align: top;
  }
  table th {
    background: #F4F8FB !important;
    font-weight: 600;
    color: #0A2540;
  }

  /* ─── Code-ish ──────────────────────────────────────────────── */
  code, kbd, samp {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9pt;
    background: #F4F8FB !important;
    padding: 1pt 4pt;
    border-radius: 2pt;
  }
}