/* qmc.css — QENEX shared design tokens + global rules.
   Created 2026-05-18 in response to the P23 audit (responsive tables,
   touch targets, body line-height, WCAG violet contrast, print stylesheet).
   Every page I shipped during the May 2026 work references this file
   via <link rel="stylesheet" href="/static/qmc.css">; until today the
   file did not exist and the link silently 404'd.

   Each page also carries its own inline <style> block, so this sheet
   only needs to provide CROSS-PAGE rules — design tokens and global
   overrides — not full page styling. */

:root {
  /* Design tokens — aligned with the apex/lab/trust/check brand */
  --void: #05060F;
  --space: #0A0E27;
  --nebula: #11152E;
  --orbit: #1A1F3F;
  --quantum: #252B53;
  --ink-100: #FFFFFF;
  --ink-200: #E8EAF2;
  --ink-300: #B4B8D6;
  --ink-400: #8c93b0;
  --violet-300: #C4B5FD;   /* WCAG-AA pass on #0A0E27 for normal text */
  --violet-400: #A78BFA;   /* WCAG-AA pass on #0A0E27 for normal text */
  --violet-500: #7C3AED;   /* legacy; WCAG-AA pass only for >= 18pt */
  --violet-600: #6D28D9;
  --magenta-500: #C026D3;
  --cyan-400: #22D3EE;
  --accent: #9aa3ff;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F43F5E;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --line-body: 1.6;
}

/* Body line-height — explicit value for long-form prose readability.
   Previously inherited "normal" (~1.2-1.4 depending on browser).
   Affects every page with body text including /security/, /threat-model/,
   /trust/company-history/, /why/, /principles/, etc. */
body {
  line-height: var(--line-body);
}

/* CTA touch target — Apple HIG (44pt) / Material (48dp) compliance.
   Catches the "Start free" CTA which measured 36px in the audit. */
a.cta, a.mkt-cta, .btn, button.cta, [role="button"], .qmc-cta, .qmc-hero-badges a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive tables — wrap wide tables in horizontal-scroll containers
   on small viewports. /security/ Section 11, /threat-model/ STRIDE,
   /trust/company-history/ all have 3-5-column tables that overflow at
   <= 768px without this rule. */
@media (max-width: 768px) {
  main table,
  article table,
  .qmc-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  main table thead,
  main table tbody {
    display: table;
    width: max-content;
    min-width: 100%;
  }
}

/* WCAG-AA accent text on dark — use lighter violet for normal-weight
   text on the dark navy background. Pages should reference
   var(--violet-400) for accent text and var(--violet-500) only for
   large display text or borders/decorations. */
.accent-text,
.qmc-accent-text {
  color: var(--violet-400);
}

/* Print stylesheet — clean PDFs when /legal/* pages are exported for
   procurement review. Removes dark nav, restores standard book
   typography, makes hyperlinks explicit. */
@media print {
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }
  header, nav, footer,
  .qmc-nav, .nav, .site-footer, .meta,
  [role="navigation"], [role="banner"] {
    display: none !important;
  }
  main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  h1, h2, h3, h4 {
    color: black !important;
    page-break-after: avoid;
  }
  p, table, ul, ol, dl {
    page-break-inside: avoid;
  }
  a {
    color: black !important;
    text-decoration: underline;
  }
  a[href^="http"]::after,
  a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
  table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  table, th, td {
    border: 1px solid #999 !important;
  }
  th {
    background: #f0f0f0 !important;
    color: black !important;
  }
  code, pre {
    background: #f5f5f5 !important;
    color: black !important;
    border: 1px solid #ddd;
  }
  .qmc-verbatim-aside {
    background: #fafafa !important;
    border-left: 2px solid #888 !important;
    color: #333 !important;
  }
}

/* Reduced-motion — be conservative for users who request it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibility — keyboard navigation safety. Browser default is
   typically a thin outline; this makes it consistent across browsers
   and visible on both light and dark surfaces. */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* P33 M4: prevent <pre>/<code> blocks from pushing mobile viewports
   sideways. The verifier page on /docs/deploy-verification/ has long
   curl commands and Python lines that previously caused a horizontal
   scrollbar at 375-wide viewports. */
pre {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: normal;
  white-space: pre;
}
pre code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
@media (max-width: 480px) {
  pre {
    font-size: 0.82em;
    padding: 0.6em 0.7em;
  }
}