/* Successor docs - Rigel Apps.
   One stylesheet, no build step, no external requests (CSP default-src 'none').

   Idiom: a ledger. The product's whole claim is a record that can be read back, so
   the page is set like a document, not a product site. One serif family for text
   and headings, a monospace face only where real record data is shown, section
   headings sit in a margin column like an index, links take the "verified" green
   from the app's own result semantics. The indigo lives in the logo and nowhere else.
   Light is the base; dark is a token swap under prefers-color-scheme. */

:root {
  --paper: #ffffff;
  --sheet: #f3f4f2;
  --ink: #1b1d1f;
  --ink-soft: #4e5256;
  --ink-faint: #7b8085;
  --rule: #d5d8d6;
  --rule-strong: #1b1d1f;
  --ok: #146b4e;
  --ok-soft: #e4efe9;
  --hold: #9a6400;
  --hold-soft: #fbf3e0;
  --fail: #a8362b;
  --measure: 40rem;
  --gutter: 11rem;
  --gap: 2.75rem;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia,
    'Times New Roman', serif;
  --sans: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121415;
    --sheet: #1a1d1e;
    --ink: #e6e8e6;
    --ink-soft: #b3b8b6;
    --ink-faint: #858b89;
    --rule: #2e3335;
    --rule-strong: #e6e8e6;
    --ok: #6fcba6;
    --ok-soft: #17302a;
    --hold: #e2b554;
    --hold-soft: #2b2416;
    --fail: #e5786a;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--serif);
}

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

.wrap {
  max-width: calc(var(--gutter) + var(--gap) + var(--measure));
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------------------------------------------------------------- masthead */

.top {
  border-bottom: 1px solid var(--rule);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
  flex-wrap: wrap;
  font-family: var(--sans);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 24px;
  height: 24px;
  display: block;
}

.top nav {
  display: flex;
  gap: 1.5rem;
}

.top nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}

.top nav a:hover {
  color: var(--ink);
}

.top nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}

/* ---------------------------------------------------------------- page grid
   Section headings live in the left margin, like an index running beside the
   text. Everything else takes the text column. Below 56rem the margin folds
   away and headings return to the flow with a rule above them. */

main.wrap {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, var(--measure));
  column-gap: var(--gap);
  align-items: start;
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}

main.wrap > * {
  grid-column: 2;
  min-width: 0;
}

main.wrap > h2 {
  grid-column: 1;
  margin: 2.6rem 0 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

/* A rule runs above the heading and above the first block beside it, broken by the
   gutter, so each section opens on one line across both columns. */
main.wrap > h2::before {
  content: '';
  display: block;
  border-top: 1px solid var(--rule);
  margin-bottom: 0.8rem;
}

main.wrap > h2 + * {
  margin-top: 2.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

main.wrap > h2 + .note {
  border-top: 0;
  padding-top: 0.9rem;
}

/* ---------------------------------------------------------------- type */

h1 {
  font-size: 2.8rem;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.8rem 0 0.4rem;
}

p,
ul,
ol {
  margin: 0 0 1.1rem;
}

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

li {
  margin-bottom: 0.45rem;
}

a {
  color: var(--ok);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--ink);
}

strong {
  font-weight: 700;
}

.lede {
  font-size: 1.28rem;
  line-height: 1.45;
  margin-bottom: 1.6rem;
}

.meta {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin-bottom: 1.6rem;
}

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

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--sheet);
  padding: 0.1em 0.35em;
}

/* ---------------------------------------------------------------- contents list
   The two pages, as a plain contents list - no boxes. */

.cards {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--rule);
}

.card {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

.card b {
  font-weight: 400;
  color: var(--ok);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  margin-right: 0.5rem;
}

.card:hover b {
  color: var(--ink);
}

.card span {
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- the record
   The one place monospace is used: rows that look like the audit CSV, because
   they are. Column names are the real ones from the export. */

main.wrap > .record {
  grid-column: 1 / -1;
}

.record {
  margin: 1.6rem 0 0;
  padding: 1rem 1.2rem 1.1rem;
  background: var(--sheet);
  overflow-x: auto;
}

.record figcaption {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
}

.record table {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  border-collapse: collapse;
  white-space: nowrap;
}

.record th,
.record td {
  text-align: left;
  padding: 0.25rem 1.6rem 0.25rem 0;
  border: 0;
  vertical-align: top;
}

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

.record th {
  font-family: var(--mono);
  font-size: inherit;
  font-weight: 400;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}

.record .ok {
  color: var(--ok);
}

.record .hold {
  color: var(--hold);
}

.record .fail {
  color: var(--fail);
}

/* ---------------------------------------------------------------- the fifteen */

.tags {
  columns: 3;
  column-gap: 1.5rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  font-size: 0.98rem;
}

.tags li {
  margin: 0 0 0.2rem;
  break-inside: avoid;
}

/* ---------------------------------------------------------------- blocks */

.note {
  border-left: 3px solid var(--hold);
  background: var(--hold-soft);
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
}

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

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 1.1rem;
}

.steps > li::before {
  content: counter(step) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.scroll {
  overflow-x: auto;
  margin: 0 0 1.1rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

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

th {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  border-bottom-color: var(--rule-strong);
}

td:first-child {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- contents (guide) */

.toc {
  font-family: var(--sans);
  font-size: 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  columns: 2;
  column-gap: 2rem;
}

.toc li {
  margin: 0 0 0.3rem;
  break-inside: avoid;
}

.toc a {
  color: var(--ink-soft);
}

.toc a:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- 404 */

.missing h1 {
  font-size: 2.2rem;
}

/* ---------------------------------------------------------------- footer */

footer.wrap {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  padding-bottom: 2.6rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-faint);
}

footer p {
  margin: 0 0 0.4rem;
}

footer a {
  color: var(--ink-soft);
  margin-right: 1.25rem;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 56rem) {
  main.wrap {
    display: block;
    padding-top: 2.4rem;
  }

  main.wrap > h2 {
    text-align: left;
    font-size: 1.25rem;
    font-style: normal;
    color: var(--ink);
    margin: 2.4rem 0 0.7rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
  }

  main.wrap > h2::before {
    display: none;
  }

  main.wrap > h2 + * {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  main.wrap > h2 + .note {
    margin-top: 0;
  }

  h1 {
    font-size: 2.2rem;
  }

  .tags,
  .toc {
    columns: 2;
  }
}

@media (max-width: 34rem) {
  .tags,
  .toc {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}