/*
 * LAYOUT: a datasheet, not a brochure. One asymmetric column — label left,
 * fact right — because the people this is for read broker spec sheets and EA
 * documentation, and recognise that shape as the shape of something precise.
 *
 * Tokens are the app's own (Client/ui/src/styles/tokens.css), so the first
 * thing somebody sees is the thing they would install. Dark only, because the
 * product is (DESIGN.md §6) and a white page advertising a dark terminal is a
 * promise the download breaks.
 *
 * ⚠️ FONTS ARE SELF-HOSTED. A webfont CDN sees every visitor's IP before they
 * have agreed to anything — a third party processing personal data on a site
 * whose central claim is that nothing leaves your own machines. Same reason
 * there is no form: a mailto is the visitor's own mail client and stores
 * nothing here.
 */

@font-face {
  font-family: "DM Sans"; font-weight: 100 1000; font-display: swap;
  src: url("assets/fonts/DMSans-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2070-209F, U+20A0-20BF;
}
@font-face {
  font-family: "DM Sans"; font-weight: 100 1000; font-display: swap;
  src: url("assets/fonts/DMSans-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/DMMono-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2070-209F, U+20A0-20BF;
}

:root {
  color-scheme: dark;
  --bg: #18191c;
  --raised: #202125;
  --line: #2b2d31;
  --fg: #ededef;
  --fg-2: #a9abb1;
  --fg-3: #868990;
  --brand: #d9252a;
  --focus: #a9abb1;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 660px;
  margin: 0 auto;
  padding-block: 88px 64px;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

header { display: flex; flex-direction: column; gap: 12px; }
.mark { display: block; width: 156px; height: auto; }

.state {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-3);
}

/* The one loud thing on the page. Everything else stays quiet. */
h1 {
  margin: 0;
  font-size: clamp(30px, 7.2vw, 46px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  color: var(--fg-3);
}

.lede {
  margin: -16px 0 0;
  max-width: 46ch;
  color: var(--fg-2);
  font-size: 17.5px;
}

/*
 * The schematic. It is here because the strongest claim on the page — that
 * nothing crosses to us — is an ABSENCE, and prose cannot show an absence.
 * Drawn, you can see that one thin dashed line leaving the boundary and count
 * that there is no second one.
 *
 * currentColor throughout so it needs no second palette, with the accent spent
 * on exactly one thing: the copy path, which is the product's whole verb.
 */
.rig { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rig svg { width: 100%; max-width: 100%; height: auto; color: var(--fg-2); }

.bound {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.3;
  stroke-dasharray: 3 4;
}
.box { fill: var(--raised); stroke: var(--line); stroke-width: 1; }
.box.faint { fill: none; stroke-opacity: 0.45; }

.rig text { font-family: var(--sans); fill: currentColor; }
.lbl { font-size: 13px; fill: var(--fg); text-anchor: middle; }
.lbl.faint { fill: var(--fg-3); }
.sub { font-size: 11.5px; fill: var(--fg-3); text-anchor: middle; }
.edge { font-size: 11.5px; fill: var(--fg-3); letter-spacing: 0.02em; }
.arrow { font-size: 11.5px; fill: var(--fg-3); text-anchor: middle; }

.flow { stroke: var(--brand); stroke-width: 1.6; color: var(--brand); }
.thin { stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 4; }

/* One moment, and it is the verb: a trade leaving the account it happened on. */
.bead { fill: var(--brand); animation: run 3.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes run {
  0%        { transform: translateX(0);     opacity: 0; }
  12%       { opacity: 1; }
  62%, 100% { transform: translateX(100px); opacity: 0; }
}

figcaption { color: var(--fg-3); font-size: 13.5px; max-width: 54ch; }

@media (max-width: 560px) {
  /* Below this the labels collide, and a schematic nobody can read is worse
     than none. The caption carries the same claim in words. */
  .rig svg { display: none; }
  figcaption { color: var(--fg-2); font-size: 15px; }
}

/* The datasheet. Label and fact, ruled, aligned to a baseline grid. */
.spec { margin: 0; display: grid; grid-template-columns: 11.5rem 1fr; }

.spec dt,
.spec dd {
  margin: 0;
  padding-block: 15px;
  border-top: 1px solid var(--line);
}
.spec dt { color: var(--fg-3); font-size: 14px; padding-right: 20px; }
.spec dd { color: var(--fg-2); }
.spec dd.nil { color: var(--fg); }

.m { font-family: var(--mono); font-size: 0.86em; color: var(--fg); }

.nothing p { margin: 0; color: var(--fg-2); max-width: 58ch; }

.isnt { display: flex; flex-direction: column; gap: 10px; }
.isnt p { margin: 0; color: var(--fg-2); max-width: 58ch; }
.isnt b { color: var(--fg); font-weight: 500; }

.ask {
  padding: 24px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ask h2 { margin: 0; font-size: 15px; font-weight: 500; }
.ask p { margin: 0; color: var(--fg-2); max-width: 52ch; }

.email {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 19px;
  color: var(--fg);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 var(--brand);
  transition: box-shadow 140ms ease;
}
.email:hover { box-shadow: inset 0 -2px 0 0 var(--fg); }

:where(a):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.fine { font-size: 13.5px; color: var(--fg-3); }

footer {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
footer p { margin: 0; color: var(--fg-3); }

@media (max-width: 560px) {
  main { padding-block: 56px 48px; gap: 36px; }
  .spec { grid-template-columns: 1fr; }
  .spec dt { padding-bottom: 0; padding-right: 0; }
  .spec dd { padding-top: 4px; border-top: 0; }
  .lede { margin-top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .bead { opacity: 1; }
}