/* Concept B — inverted ground. Loads after css/styles.css and flips the tokens.
   Not a straight negative: hairlines, secondary text and the Field band all need
   different values to hold up optically on black. See design-notes.md. */

:root{
  --paper:#000000;
  --ink:#FFFFFF;
  --slab:#FFFFFF;          /* the Field band inverts, so it stays the page's one contrast moment */
  --ash:#9A9A9A;           /* #767676 is only 4.6:1 on black; this is 7.5:1 */
  --rule:#2E2E2E;
  --rule-inv:#DCDCDC;
  --wash:#111111;
}

body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* white type on black blooms; pull the display tracking in a touch */
.statement{ letter-spacing:-.05em }
.h2{ letter-spacing:-.038em }
.reg__row dd{ color:#E6E6E6 }
.doc p,.doc li{ color:#E6E6E6 }

.mast{ background:var(--paper); border-bottom-color:var(--rule) }
.plate{ background:var(--wash); border-color:var(--rule) }
.pos .draft, .draft{ color:#6F6F6F }

/* ---- the Field, inverted: black marks on a white slab ---- */
.field{ background:var(--slab); color:var(--paper) }
.field .label{ color:#6F6F6F }
.field .h2{ color:#000 }
.field__note{ color:#4A4A4A }
#fieldSvg .cell{ stroke:#C9C9C9 }
#fieldSvg .cell.on{ fill:#000000; stroke:#000000 }
#fieldSvg .link{ stroke:#000000 }
#fieldSvg .end{ stroke:#000000 }
.field__key{ color:#6F6F6F }
.field__key i{ border-color:#C9C9C9 }
.field__key i.on{ background:#000; border-color:#000 }
.field__key i.ln{ border-top-color:#000 }

.inq a.big{ border-bottom-color:var(--ink) }
.doc .ph{ background:var(--wash); border-left-color:var(--ink); color:#D8D8D8 }

/* ---- review-only concept switcher. REMOVE BEFORE LAUNCH ---- */
.swap{
  position:fixed; left:0; bottom:0; z-index:80;
  display:flex; gap:0; border-top:1px solid var(--rule); border-right:1px solid var(--rule);
  background:var(--paper);
}
.swap a{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); text-decoration:none; padding:9px 14px;
}
.swap a[aria-current="page"]{ color:var(--paper); background:var(--ink) }
.swap a:not([aria-current]):hover{ color:var(--ink) }