/* Hand-written layer. The class rules that carry the design's repeated inline
   styles are generated by tools/build_site.py and appended after this file, so
   anything here can be overridden by them if the selectors ever collide.

   @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-mono-400.efff1e2b.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.4dd50e6c.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/plex-sans-300.ac3447e0.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-sans-400.de8d6520.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-sans-500.56afb1d5.woff2) format('woff2')} is replaced at build time with @font-face rules pointing at the
   content-hashed woff2 files, because those filenames change whenever a font
   changes. */

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-mono-400.efff1e2b.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.4dd50e6c.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/plex-sans-300.ac3447e0.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-sans-400.de8d6520.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-sans-500.56afb1d5.woff2) format('woff2')}

/* Carried over verbatim from the design's <style> block. */
body { margin: 0; background: #05070a; }
a { color: #7fc4d0; text-decoration: none; border-bottom: 1px solid #2b4a52; }
a:hover { color: #a9dbe4; border-bottom-color: #5f97a4; }
::selection { background: #1d3a44; color: #eaf4f7; }
input, textarea, button { font-family: inherit; }

[data-r="msvg"] { display: none; }
[data-r="invgrid"] { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
[data-r="sysgrid"] { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1024px) { [data-r="sysgrid"] { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { [data-r="invgrid"] { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 767px)  { [data-r="sysgrid"] { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px)  { [data-r="invgrid"] { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) {
  [data-r="dsvg"] { display: none; }
  [data-r="msvg"] { display: block; }
  [data-r="hero"] { padding-top: 80px !important; padding-bottom: 56px !important; }
  [data-r="sec"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [data-r="h1"] { font-size: 28px !important; }
  [data-r="lede"] { font-size: 18px !important; }
  [data-r="quote"] { font-size: 20px !important; }
  [data-r="invn"] { font-size: 22px !important; }
  [data-r="invd"] { font-size: 11px !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  [data-r="hero"] { padding-top: 72px !important; padding-bottom: 48px !important; }
  [data-r="sec"] { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* The page shell, previously an inline style on the outermost div. */
.page {
  background: linear-gradient(180deg, #05070a 0%, #070b12 35%, #09101a 70%, #0a121e 100%);
  color: #dfe7ec;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-x: clip;
}

/* Language switcher. The design used spans with role="button", which are not
   reachable by keyboard; these are real buttons carrying the same visuals. */
.langbar {
  position: fixed;
  top: 20px;
  right: clamp(18px, 5vw, 44px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: rgba(5, 7, 10, 0.72);
  padding: 0 4px;
  border: 1px solid #16202b;
}
.langbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  /* A button does not inherit these from the page the way the design's span
     did, and the browser default would render the labels one weight heavier
     and centre-aligned. */
  font-weight: inherit;
  text-align: start;
  letter-spacing: inherit;
  cursor: pointer;
  color: #67818d;
  text-decoration: none;
}
.langbar button[aria-current="true"] { color: #dfeff3; }
.langbar .sep { color: #33454f; }

/* Placed after the base .langbar rules on purpose. A media query adds no
   specificity, so the same declaration written earlier in the file loses to
   the one written later; the first attempt at this sat above the base rule and
   changed nothing while looking correct in the source.

   On a wide screen the fixed switcher sits in the margin beside the text. On a
   phone the column is the full width, so it sat over the paragraphs for the
   whole scroll, and at 72% opacity the words showed through it, which reads as
   a rendering fault rather than as a control. */
@media (max-width: 640px) {
  .langbar {
    background: #05070a;
    transition: transform 180ms linear, opacity 180ms linear;
  }
  .langbar[data-hidden="true"] {
    transform: translateY(-140%);
    opacity: 0;
    pointer-events: none;
  }
}

/* The design declared focus styling through a style-focus attribute, which no
   browser reads, so the page shipped with no visible focus indicator at all.
   These are the same colours, wired to the real pseudo-class. */
:focus-visible {
  outline: 2px solid #7fc4d0;
  outline-offset: 3px;
}
.field:focus-visible {
  outline: none;
  border-bottom-color: #6fb3c1;
  box-shadow: 0 1px 0 0 #6fb3c1;
}
.submit:hover {
  background: #7fc4d0;
  color: #06121a;
  border-color: #7fc4d0;
}

/* Reserved before Turnstile renders, so the widget arriving does not push the
   submit button down. 67px, not 65px: the design's placeholder was a 65px box
   with a 1px dashed border on each side, so it occupied 67px of the column. */
.turnstile {
  width: 300px;
  max-width: 100%;
  min-height: 67px;
}

.formstatus {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #7fc4d0;
  min-height: 16px;
}
.formstatus[data-state="error"] { color: #d8926b; }

.submit[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.submit[aria-disabled="true"]:hover {
  background: transparent;
  color: #a9dbe4;
  border-color: #3d6b77;
}

/* Scroll reveal is applied from JavaScript, never from CSS, so that a visitor
   without JavaScript sees the content rather than a blank page. The transition
   is declared here only so that reduced-motion can switch it off. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Repeated declarations lifted out of the design's inline
   styles. Declaration text is byte-identical to the source. */
.dgl{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.5;color:#b6c6cf}
.invcell{border-top:1px solid #16202b;padding:20px 18px 22px 0}
.invdesc{margin-top:10px;font-size:13px;line-height:1.55;color:#8b9ca7;max-width:26ch;text-wrap:pretty}
.stack5{display:grid;gap:5px}
.dgtag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.14em;color:#648793}
.invnum{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:400;color:#dfe9ee;letter-spacing:-0.02em;line-height:1.1}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#648793;margin-bottom:22px}
.link{color:#7fc4d0;border-bottom:1px solid #2b4a52}
.sec{max-width:1120px;margin:0 auto;padding:clamp(60px,9vh,100px) clamp(20px,6vw,80px);border-top:1px solid #131c26}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#60838f;letter-spacing:0.16em;margin-bottom:14px}
.h3lg{margin:0;font-size:clamp(21px,2.2vw,26px);font-weight:400;color:#eef4f7;letter-spacing:-0.01em;max-width:20ch}
.body22{margin:0 0 22px;font-size:17px;line-height:1.78;color:#a9b8c2;max-width:66ch;text-wrap:pretty}
.eyebrow2{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#648793;margin-bottom:18px}
.body18{margin:0 0 18px;font-size:17px;line-height:1.78;color:#a9b8c2;max-width:66ch;text-wrap:pretty}
.body26{margin:0 0 26px;font-size:17px;line-height:1.78;color:#a9b8c2;max-width:66ch;text-wrap:pretty}
.pullrule{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.55;color:#cfe3e8;border-left:1px solid #2b3f49;padding-left:24px;max-width:56ch;font-weight:300;text-wrap:pretty}
.railcol{display:grid;gap:22px;align-content:start;border-left:1px solid #16202b;padding-left:18px}
.colhead{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.2em;color:#648793;padding-bottom:10px;border-bottom:1px solid #24323d;margin-bottom:16px}
.splitrow{border-top:1px solid #16202b;padding:38px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,4vw,64px);align-items:start}
.pull{margin:0;font-size:clamp(20px,2.1vw,26px);line-height:1.5;color:#cfe3e8;font-weight:300;max-width:44ch;text-wrap:pretty}
.body0{margin:0;font-size:17px;line-height:1.78;color:#a9b8c2;text-wrap:pretty}
.dsvg{max-width:460px;display:block;overflow:visible}
.msvg{display:block}
.h3sm{margin:0 0 18px;font-size:20px;font-weight:400;color:#e4edf1;letter-spacing:-0.01em}
.dgl16{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.6;color:#b6c6cf}
.fieldrow{display:grid;gap:8px}
.fieldlbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#6b8b97}
.h2{margin:0 0 26px;font-size:clamp(27px,3.2vw,38px);font-weight:400;letter-spacing:-0.015em;color:#eef4f7;max-width:22ch}
.twocol{margin-top:clamp(64px,9vw,104px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(36px,5vw,72px);align-items:start}
.meta11{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#6d8792}
.invnumalt{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:400;color:#cf9159;letter-spacing:-0.02em;line-height:1.1}
.field{background:transparent;border:none;border-bottom:1px solid #24323d;color:#e2edf1;font-size:16px;padding:11px 0;min-height:44px;outline:none}
.fieldarea{background:transparent;border:none;border-bottom:1px solid #24323d;color:#e2edf1;font-size:16px;padding:11px 0;outline:none;resize:vertical;line-height:1.6}
.submit{justify-self:start;background:transparent;border:1px solid #3d6b77;color:#a9dbe4;font-size:14px;letter-spacing:0.06em;padding:14px 32px;min-height:48px;cursor:pointer;transition:background-color 160ms linear,color 160ms linear}

/* Technical document page. Every rule is scoped under .tech, which only the
   technical page carries, so none of it can reach the two design pages and the
   fidelity harness has nothing new to measure. Everything else that page uses
   is a class already lifted out of the design's own inline styles. */

.tech .tech-head {
  border-top: none;
  padding-top: clamp(48px, 8vh, 88px);
}

.tech .backlink {
  margin: 0 0 30px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.tech h1.h2 {
  margin-bottom: 18px;
}

.tech .techlinks {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.tech .techlinks span {
  color: #648793;
}

.tech ul {
  margin: 0 0 22px;
  padding-left: 18px;
  max-width: 66ch;
}

.tech li {
  margin-bottom: 12px;
  font-size: 17px;
  line-height: 1.78;
  color: #a9b8c2;
  text-wrap: pretty;
}

/* 4.60:1. A marker is arguably decoration rather than text, but the project's
   rule is that everything clears AA, and arguing the exception costs more than
   the two shades. */
.tech li::marker {
  color: #5e8393;
}

/* The lead-in names the mechanism; the sentence after it explains the choice.
   Weight would fight the page, so the separation is carried by colour. */
.tech li strong {
  font-weight: 400;
  color: #dfe9ee;
}

.tech .h3sm {
  margin-top: 4px;
}

.tech .pullrule {
  margin: 26px 0 0;
}

/* The document runs to nineteen hundred words, so the way back has to be at
   the end as well as the top. Same shape as the form's submit control, which
   is the one action style the site has; no arrow glyph, because the font
   subset carries U+2191 and U+2193 but not U+2190. */
.tech .backbuttonrow {
  margin: 26px 0 0;
}

.tech .backbutton {
  display: inline-flex;
  align-items: center;
  /* Scoped here rather than set globally: the design export is written for
     content-box throughout, and switching that everywhere would move geometry
     the fidelity harness is there to protect. Without it, min-height 48 plus
     the padding and border rendered a 78px control. */
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #3d6b77;
  color: #a9dbe4;
  font-size: 14px;
  /* Stated, not inherited: the paragraph around it carries the body's line
     height, which pushed the control to 78px against an intended 48. */
  line-height: 1.2;
  letter-spacing: 0.06em;
  padding: 14px 32px;
  min-height: 48px;
  text-decoration: none;
  transition: background-color 160ms linear, color 160ms linear;
}

.tech .backbutton:hover,
.tech .backbutton:focus-visible {
  background: #7fc4d0;
  color: #06121a;
  border-color: #7fc4d0;
}