/* QuantaStark site stylesheet.

   The page is set like a technical report: one text column with a measure of
   about 70 characters, a wider frame shared by the masthead, the section
   rules, the tables and the footer, one accent colour (ember) for links, key
   numbers and section numbers, monospace for identifiers and numbers. No
   build step; served from /assets/ with long cache headers, so a change here
   needs a new query string on the <link> in index.html and 404.html. */

:root {
  --bg: #09090c;
  --bg-raised: #0e0e13;
  --bg-field: #0b0b0f;
  --rule: rgba(245, 243, 240, 0.12);
  --rule-strong: rgba(245, 243, 240, 0.26);
  --ink: #f5f3f0;
  --ink-2: #c9c8cf;
  --ink-3: #8f909c;
  --accent: #fa761e;
  --accent-hover: #fb8b41;
  --font-display: 'Sora', 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text: 36rem;
  --side: 8rem;
  --gutter: 1.25rem;
  color-scheme: dark;
}

@media (min-width: 45rem) {
  :root {
    --gutter: 2rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(250, 118, 30, 0.45);
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

code,
.n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

code {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.n {
  color: var(--ink);
  white-space: nowrap;
}

.n-key {
  color: var(--accent);
}

strong {
  color: var(--ink);
  font-weight: 600;
}

sup {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: 0.45em;
}

svg {
  display: block;
}

::selection {
  background: rgba(250, 118, 30, 0.35);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--accent);
  color: #1a0c04;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

/* ===== Page grid =====
   Five tracks: gutter, side, text, side, gutter. The text track is the
   measure; the side tracks give tables, section rules and the masthead a
   wider frame and collapse to nothing on narrow viewports. */
.grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--side))
    [text-start] min(100% - 2 * var(--gutter), var(--text))
    [text-end] minmax(0, var(--side))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}

.grid > * {
  grid-column: text;
  min-width: 0;
}

.grid > .wide {
  grid-column: wide;
}

/* ===== Masthead ===== */
.masthead {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--ink);
  text-decoration: none;
}

.wordmark svg {
  width: 24px;
  height: 24px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.875rem;
}

.site-nav a,
.colophon nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav a:hover,
.colophon nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ===== Title block ===== */
.title-block {
  padding: 3rem 0 2.5rem;
}

.status-line {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}

.title-block h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);
  line-height: 1.12;
  max-width: 18ch;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: #dcdbe0;
  margin-top: 1.5rem;
}

.title-block p + p {
  margin-top: 1rem;
}

.front-matter {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.45rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.front-matter dd {
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .front-matter {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }

  .front-matter dd + dt {
    margin-top: 0.7rem;
  }
}

.front-matter dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.25em;
}

/* ===== Sections ===== */
.section {
  padding-top: 3rem;
}

.section:last-of-type {
  padding-bottom: 4rem;
}

.section > * + * {
  margin-top: 1.1rem;
}

.section > h2 {
  border-top: 1px solid var(--rule-strong);
  padding-top: 1.5rem;
  font-size: 1.625rem;
}

h2 .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8em;
  color: var(--accent);
  margin-right: 0.75rem;
  letter-spacing: 0;
}

/* On wide viewports the section number hangs in the side track, the way a
   report numbers its sections in the margin. */
@supports (grid-template-columns: subgrid) {
  @media (min-width: 45rem) {
    .section > h2 {
      grid-column: wide;
      display: grid;
      grid-template-columns: subgrid;
      align-items: baseline;
    }

    .section > h2 .num {
      grid-column: wide-start / text-start;
      margin: 0;
    }

    .section > h2 .h2-text {
      grid-column: text;
    }
  }
}

.section > h3 {
  margin-top: 2.25rem;
  font-size: 1.125rem;
}

.section > h3 + * {
  margin-top: 0.6rem;
}

.section > ul,
.section > ol {
  padding-left: 1.6rem;
}

.section li + li {
  margin-top: 0.55rem;
}

.section li::marker {
  color: var(--ink-3);
}

.flow li::marker {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent);
}

.small {
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* ===== Tables ===== */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

caption {
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  color: var(--ink-3);
  padding-bottom: 0.75rem;
}

caption strong {
  color: var(--ink-2);
  font-weight: 500;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}

th:last-child,
td:last-child {
  padding-right: 0;
}

thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong);
  padding-top: 0.3rem;
}

tbody th {
  font-weight: 400;
  color: var(--ink-2);
}

th.num {
  text-align: right;
}

td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  color: var(--ink);
  white-space: nowrap;
}

.cell-note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.table-note {
  font-size: 0.875rem;
  color: var(--ink-3);
}

.section > .table-wrap + .table-note {
  margin-top: 0.75rem;
}

.status-table th[scope='row'] {
  width: 38%;
  color: var(--ink);
}

@media (max-width: 45rem) {
  .lede {
    font-size: 1.125rem;
  }

  table {
    font-size: 0.875rem;
  }

  th,
  td {
    padding-right: 0.65rem;
  }

  .status-table th[scope='row'] {
    width: auto;
  }
}

/* ===== Milestones ===== */
.milestones {
  list-style: none;
  padding-left: 0;
}

.section > .milestones {
  padding-left: 0;
}

.milestones li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 0.5rem;
}

.milestones .m {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  padding-top: 0.2em;
}

/* ===== Bridge preview =====
   A deliberately inert interface: every control sits in a disabled
   fieldset, the note at the top says why. */
.panel {
  border: 1px solid var(--rule-strong);
  background: var(--bg-raised);
  padding: 1.25rem;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.panel-head h3 {
  font-size: 1.0625rem;
}

.panel-head h3 code {
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 0.5rem;
}

.panel-status {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.readout div {
  min-width: 0;
}

.readout dt {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.readout dd {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .readout {
    grid-template-columns: 1fr;
  }
}

.panel form + form {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

fieldset {
  border: 0;
  min-width: 0;
  padding-top: 1.1rem;
}

legend {
  float: left;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

legend .gas {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-left: 0.6rem;
}

.fields {
  clear: both;
}

.field {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.8rem;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0 0.8rem;
}

.field label {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg-field);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.55rem 0.7rem;
}

.field textarea {
  min-height: 3.6rem;
  resize: vertical;
}

.field input:disabled,
.field textarea:disabled {
  color: var(--ink-3);
  border-color: var(--rule);
  cursor: not-allowed;
}

.field ::placeholder {
  color: var(--ink-3);
  opacity: 0.8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

.button {
  font: 600 0.9rem/1.2 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

.button:disabled {
  color: var(--ink-3);
  border-color: var(--rule);
  cursor: not-allowed;
}

.hint {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ===== Footer ===== */
.colophon {
  border-top: 1px solid var(--rule-strong);
  padding: 2rem 0 2.5rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.colophon-inner {
  display: grid;
  gap: 0.75rem;
}

.colophon nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.colophon .fine {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

/* ===== 404 ===== */
.error-page {
  padding: 5rem 0 6rem;
}

.error-page .code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.error-page h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

.error-page p {
  margin-top: 1rem;
}

/* ===== Motion and print ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .skip-link,
  .site-nav {
    display: none;
  }

  body,
  h1,
  h2,
  h3,
  strong,
  code,
  .n,
  td.num,
  .lede {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
  }

  .panel {
    background: #fff;
    border-color: #999;
  }
}