/* SealRelay night-editorial chrome. Shared by every site/dark page.
   Visual source: /tmp/sealrelay-night-ref/ — not cream paper. */

:root {
  --bg: #0a0a0a;
  --text: #f2ece3;
  --muted: #c4b8a4;
  --quiet: #8a8378;
  --line: #2a2a2a;
  --lede: #ddd6c8;
  --alarm: #8c1d18;
  --alarm-loud: #c45c4a;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, sans-serif;
}

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

html { color-scheme: dark; }

body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

a { color: var(--text); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #c4b8a4;
  outline-offset: 3px;
}

/* Skip link: hidden until focus. Dark card — not cream white. */
.skip.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 20;
  transform: translateY(-220%);
  background: #0a0a0a;
  color: #f2ece3;
  border: 1px solid #c4b8a4;
  padding: 0.55rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
}

.skip.skip-link:focus,
.skip.skip-link:focus-visible {
  transform: none;
}

/* Sticky stack: wrap .top + .unpub in .mast so the unpublished
   banner stays visible under the nav. .top is also sticky on its own. */
.mast {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #0a0a0a;
  border-bottom: 1px solid #2a2a2a;
}

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding: 1.1rem 8vw;
  border-bottom: 1px solid #2a2a2a;
  position: sticky;
  top: 0;
  background: #0a0a0a;
  z-index: 4;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.top a {
  text-decoration: none;
  color: #c4b8a4;
}

.top a:hover { color: #f2ece3; }

.top a[aria-current="page"] {
  color: #f2ece3;
  border-bottom: 1px solid #f2ece3;
}

.kicker,
.unpub,
.unpublished {
  font-family: var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kicker {
  font-size: 0.88rem;
  color: #c4b8a4;
  margin: 0 0 0.8rem;
}

.unpub,
.unpublished {
  font-size: 0.88rem;
  color: #d4c8b4;
  border: 1px solid #c4b8a4;
  display: inline-block;
  padding: 0.45rem 0.7rem;
  margin: 0.75rem 8vw 0.9rem;
  background: #0a0a0a;
}

.unpublished p {
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

#stage {
  width: 100%;
  height: 38vh;
  min-height: 220px;
  background: #0a0a0a;
}

.hero { padding: 10vh 8vw 3vh; }

h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 400;
}

.lede {
  font-family: var(--sans);
  font-size: 1.28rem;
  max-width: 32rem;
  margin-top: 1.4rem;
  color: #ddd6c8;
  line-height: 1.45;
}

main {
  padding: 1.5rem 8vw 6rem;
  max-width: 46rem;
  /* Without this the column sits hard left under a full-width nav, leaving
     roughly half a 1440px screen empty and reading as a broken stylesheet. */
  margin: 0 auto;
}

/* Long unbroken tokens — a 40-char commit hash is wider than a 360px phone, and
   on the source page that hash is the thing the page exists to show. */
code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

main.wide { max-width: 58rem; }

h2 {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 2.4rem 0 0.7rem;
  color: #c4b8a4;
  font-weight: 600;
}

h3 {
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0 0 0.4rem;
}

p, li { font-size: 1.14rem; margin: 0.5rem 0; }

ul, ol { padding-left: 1.3rem; }

code {
  font-size: 0.92em;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
}

pre {
  background: #111;
  border: 1px solid #2a2a2a;
  color: #f2ece3;
  padding: 0.85rem 0.95rem;
  overflow-x: auto;
  font-size: 0.95rem;
  margin: 0.8rem 0 1.2rem;
}

.story {
  border-top: 1px solid #2a2a2a;
  padding: 1.3rem 0;
}

.story:first-of-type { border-top: 0; }

/* Buttons — solid ink on cream, ghost outline. */
button,
.wm-btn {
  background: #f2ece3;
  color: #0a0a0a;
  border: 0;
  padding: 0.75rem 1.1rem;
  font: inherit;
  font-size: 1.14rem;
  cursor: pointer;
}

button.ghost,
.wm-btn.ghost,
.wm-btn.secondary {
  background: transparent;
  color: #f2ece3;
  border: 1px solid #f2ece3;
}

button:disabled,
.wm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
}

/* Forms */
label,
.wm-field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c4b8a4;
  margin: 1rem 0 0.35rem;
}

input,
select,
textarea {
  background: transparent;
  border: 1px solid #f2ece355;
  color: #f2ece3;
  padding: 0.7rem;
  width: 100%;
  font: inherit;
  font-size: 1.14rem;
}

.wm-field { display: grid; gap: 0.3rem; margin: 0 0 0.9rem; }
.wm-field .hint { font-size: 0.95rem; color: #8a8378; }

/* Receipt / live result */
.receipt,
#result,
[data-live] {
  margin-top: 1.1rem;
  min-height: 5rem;
  border: 1px solid #2a2a2a;
  border-left: 4px solid #c4b8a4;
  padding: 1rem 1.15rem;
}

.digest-out {
  font-size: 1rem;
  word-break: break-all;
  border-left: 4px solid #c4b8a4;
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin: 0.9rem 0 0;
  color: #ddd6c8;
}

/* Watermelon — disclosure, split, cards. Energy, not a dashboard. */
.wm-note {
  border-left: 6px solid #c4b8a4;
  background: #141414;
  padding: 0.9rem 1.05rem;
  margin: 1.1rem 0;
}

.wm-note p:first-child { margin-top: 0; }
.wm-note p:last-child { margin-bottom: 0; }

.wm-split {
  display: grid;
  gap: 0;
  margin: 1rem 0 1.5rem;
  border: 1px solid #2a2a2a;
}

@media (min-width: 48rem) {
  .wm-split { grid-template-columns: 1fr 1fr; }
  .wm-split.three { grid-template-columns: 1fr 1fr 1fr; }
  .wm-split article + article { border-left: 1px solid #2a2a2a; }
}

.wm-split article { padding: 1.2rem 1.2rem 1.3rem; }

@media (max-width: 47.99rem) {
  .wm-split article + article { border-top: 1px solid #2a2a2a; }
}

.wm-card {
  border: 1px solid #2a2a2a;
  padding: 1.05rem 1.15rem 1.15rem;
  margin: 0 0 1rem;
}

.wm-card > :first-child { margin-top: 0; }
.wm-card > :last-child { margin-bottom: 0; }

.wm-stack { display: grid; gap: 0.85rem; margin: 1rem 0 1.4rem; }

@media (min-width: 44rem) {
  .wm-stack.two { grid-template-columns: 1fr 1fr; }
}

.wm-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border: 1px solid #c4b8a4;
  color: #d4c8b4;
  margin: 0 0 0.55rem;
}

.wm-badge.warn { border-color: #c4b8a4; color: #f2ece3; }
.wm-badge.alarm {
  border-color: #c45c4a;
  color: #f2ece3;
  background: #8c1d18;
}

.wm-kv {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.4rem;
}

@media (min-width: 40rem) {
  .wm-kv.two { grid-template-columns: 1fr 1fr; }
}

.wm-kv li {
  border-left: 4px solid #c4b8a4;
  padding: 0.35rem 0 0.35rem 0.7rem;
}

.wm-kv .k {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8378;
}

.wm-kv .v { font-weight: 600; }

/* Draft stamp */
.draft {
  border: 1px solid #c45c4a;
  padding: 1rem 1.15rem;
  margin: 1.4rem 0;
}

.draft p { margin: 0 0 0.6rem; }
.draft p:last-child { margin-bottom: 0; }

.draft .stamp,
.stamp {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid #c45c4a;
  color: #f2ece3;
  padding: 0.25rem 0.6rem;
  margin: 0 0 0.6rem;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1rem;
  margin: 0.8rem 0 1.4rem;
}

caption {
  text-align: left;
  color: #8a8378;
  font-size: 0.95rem;
  padding: 0 0 0.5rem;
  font-family: var(--sans);
}

th, td {
  border: 1px solid #2a2a2a;
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4b8a4;
  font-weight: 600;
}

.scroll-x,
.scroller { overflow-x: auto; margin: 1rem 0 1.4rem; }

/* Liveness — below-floor is loud and full-width */
.liveness {
  border: 1px solid #2a2a2a;
  padding: 1rem 1.1rem 1.1rem;
  margin: 1rem 0 1.2rem;
}

.liveness-headline {
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
}

.liveness-verdict { margin: 0 0 0.6rem; }

.liveness-fields {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: #8a8378;
  display: grid;
  gap: 0.25rem;
}

@media (min-width: 40rem) {
  .liveness-fields { grid-template-columns: 1fr 1fr; }
}

.liveness[data-state="ok"] { border-left: 6px solid #c4b8a4; }

.liveness[data-state="inactive"] { border-left: 6px solid #2a2a2a; }

.liveness-alarm { display: none; }

.liveness[data-state="below-floor"] {
  border: 0;
  padding: 0 0 1.1rem;
  background: #1c0a08;
}

.liveness[data-state="below-floor"] .liveness-alarm {
  display: block;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 0.9rem;
  padding: 1rem 8vw;
  background: #8c1d18;
  color: #f2ece3;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.liveness[data-state="below-floor"] .liveness-headline,
.liveness[data-state="below-floor"] .liveness-verdict,
.liveness[data-state="below-floor"] .liveness-fields {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

.liveness[data-state="below-floor"] .liveness-verdict { font-weight: 700; color: #f2ece3; }

/* Reliance */
.reliance {
  border: 1px solid #f2ece3;
  padding: 1.15rem 1.2rem;
  margin: 1.7rem 0;
}

.reliance .badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #c4b8a4;
  margin: 0 0 0.4rem;
}

.reliance h2 {
  margin: 0 0 0.55rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #f2ece3;
  font-weight: 400;
}

.reliance p:last-child { margin-bottom: 0; }

/* Legal helpers used by the rest of the portal */
.clause {
  border: 1px solid #2a2a2a;
  border-left: 6px solid #c4b8a4;
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 1rem 0 1.6rem;
}

.clause h2, .clause h3 { margin-top: 0; }
.clause p:last-child, .clause ul:last-child { margin-bottom: 0; }

.clause .badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #c4b8a4;
  margin: 0 0 0.4rem;
}

.keyline {
  border: 1px solid #c4b8a4;
  padding: 0.9rem 1rem;
  margin: 0.9rem 0;
  font-weight: 600;
}

dl.terms { margin: 0.6rem 0 1.2rem; }
dl.terms dt { font-weight: 700; margin-top: 0.7rem; font-size: 1.14rem; }
dl.terms dd { margin: 0.1rem 0 0; font-size: 1.14rem; color: #ddd6c8; }

nav.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  margin: 1.1rem 0 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

nav.toc a { color: #c4b8a4; text-decoration: none; }
nav.toc a:hover { color: #f2ece3; }

.meta {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: #8a8378;
  margin: 0.4rem 0 0;
}

.footnote {
  font-size: 1rem;
  color: #8a8378;
  margin-top: 2rem;
}

ol.steps li,
ol.numbered > li { margin-bottom: 0.6rem; }

details { margin: 1rem 0; }
details summary {
  cursor: pointer;
  font-family: var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #c4b8a4;
}

footer {
  padding: 2rem 8vw 4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: #8a8378;
  border-top: 1px solid #2a2a2a;
}

footer p { font-size: 0.95rem; margin: 0.45rem 0; max-width: 40rem; }

footer a { color: #c4b8a4; }

nav.legalnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

nav.legalnav a { text-decoration: none; color: #c4b8a4; }
nav.legalnav a:hover { color: #f2ece3; }
nav.legalnav a[aria-current="page"] {
  color: #f2ece3;
  border-bottom: 1px solid #f2ece3;
}

/* Motion Primitives — in-view + text-effect.
   Hidden only when JS is on and motion is allowed. */
.mp-inview { opacity: 1; }
.mp-text span { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.prm) .mp-inview {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  html.js:not(.prm) .mp-inview.in { opacity: 1; transform: none; }
  html.js:not(.prm) .mp-text span {
    display: inline-block;
    opacity: 0;
    animation: mpw 0.55s ease forwards;
    animation-delay: calc(var(--i) * 80ms);
  }
}

@keyframes mpw { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .mp-text span,
  .mp-inview {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Narrow screens: the twelve-item nav wrapped to four rows and took a fifth of
   a 360px screen before any content. Scroll it on one line instead of wrapping.
   The children stay real links, so keyboard focus still reaches every item and
   the browser scrolls focus into view — axe's scrollable-region-focusable rule
   is about scroll containers with NO focusable children, which this is not. */
@media (max-width: 30rem) {
  .top {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 0 1.1rem;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .top::-webkit-scrollbar { width: 0; height: 0; }
  .top a { white-space: nowrap; }
}