/*
 * stemmar.org — the AKP specification surface.
 *
 * One stylesheet, handwritten, no build step, no third-party assets. Everything the
 * browser fetches comes from this origin: no web fonts, no icon sets, nothing that would
 * make the page depend on a network it may not have in ten years' time.
 *
 * The typography is meant to read as an archival document rather than a product page.
 * Body prose is set in a system serif at a measure of roughly 70 characters; navigation,
 * tables and metadata are set in the system sans so that structure and prose are visually
 * distinct without needing colour to do the work.
 *
 * Colour is used sparingly and never on its own. Every status pill carries its own words,
 * so a reader who cannot distinguish the tints loses nothing.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Light, always.
     
     A `prefers-color-scheme` block used to flip the whole site to a dark palette for anybody
     whose system asks for one. That is a reasonable default for an application somebody lives
     in all day and the wrong one here: this surface is a document, it is read alongside the
     platform site, and the two looking like different products because of an operating-system
     setting is worse than either choice on its own. */
  color-scheme: light;

  --font-prose: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Charter, Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Light, and cool rather than warm.
     
     The previous palette was warm off-white and sepia — an archival document, which suited a
     stub and reads as dusty beside the specifications this now sits next to. These are the
     tones the working specification sites use: near-white paper, a saturated blue-green that
     carries the brand without shouting, and enough contrast for long reading.
     
     Not black-and-white. Colour does structural work here — the accent marks the mark, the
     links and the section rules — but never alone: every status pill still carries its own
     words, so nothing is lost to a reader who cannot distinguish the tints. */
  --paper: #fbfcfd;
  --paper-sunk: #f1f4f8;
  --paper-raised: #ffffff;
  --ink: #14181d;
  --ink-muted: #4a5563;
  --ink-faint: #6b7684;
  --rule: #dde3ea;
  --rule-strong: #b9c3cf;

  --accent: #0f6f7a;
  --accent-deep: #0a545d;
  --accent-wash: #e6f2f3;
  --accent-edge: #a9d2d6;

  --link: #0f6f7a;
  --link-visited: #5b4a86;
  --focus: #b3541e;

  --tone-pending-bg: #fdf3e3;
  --tone-pending-ink: #7a4c17;
  --tone-pending-edge: #e2c391;
  --tone-done-bg: #e6f2ec;
  --tone-done-ink: #1f5740;
  --tone-done-edge: #a5cbb8;
  --tone-progress-bg: #e8eef8;
  --tone-progress-ink: #24406b;
  --tone-progress-edge: #aabdda;
  --tone-neutral-bg: #eef1f5;
  --tone-neutral-ink: #464f5a;
  --tone-neutral-edge: #c8d0da;
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

a:visited {
  color: var(--link-visited);
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* Honour a reduced-motion preference even though nothing here animates by design. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ skip link */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--paper-raised);
  color: var(--ink);
  border: 2px solid var(--focus);
  border-radius: 0 0 4px 0;
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------- header */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-family: var(--font-ui);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding-block: 1rem;
  max-width: 78rem;
}

.site-id {
  margin: 0;
  font-size: 1rem;
}

.site-id a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}

.site-id a:hover .site-id-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-id-name {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1.0625rem;
}

.site-id-expansion {
  color: var(--ink-faint);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 0.15rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}

/* ----------------------------------------------------------------- main */

main {
  padding-block: clamp(2rem, 5vw, 3.5rem) 4rem;
}

main.has-contents {
  max-width: 78rem;
}

h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  max-width: 22ch;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-ui);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 3rem 0 0.85rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  margin: 2rem 0 0.5rem;
  max-width: var(--measure);
  text-wrap: balance;
}

h4 {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 1.75rem 0 0.5rem;
}

p,
ul,
ol,
dl,
blockquote,
pre {
  max-width: var(--measure);
}

p {
  margin: 0 0 1.1em;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 58ch;
  margin-bottom: 1.75rem;
}

.emphatic {
  font-style: italic;
  color: var(--ink-muted);
}

ul,
ol {
  padding-left: 1.35em;
}

li {
  margin-bottom: 0.4em;
}

li > ul,
li > ol {
  margin-top: 0.4em;
}

strong {
  font-weight: 700;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.05em 0.32em;
  overflow-wrap: anywhere;
}

pre {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.8125rem;
}

blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--rule-strong);
  color: var(--ink-muted);
}

blockquote > :last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* -------------------------------------------------------------- anchors */

.anchor {
  margin-left: 0.4em;
  color: var(--ink-faint);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0;
}

h1:hover > .anchor,
h2:hover > .anchor,
h3:hover > .anchor,
h4:hover > .anchor,
.anchor:focus-visible {
  opacity: 1;
}

/* Anchors are keyboard reachable and visible whenever focused, and are always visible on
   touch devices where there is no hover to reveal them. */
@media (hover: none) {
  .anchor {
    opacity: 0.6;
  }
}

/* --------------------------------------------------------- page metadata */

.page-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.85rem 1.75rem;
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem;
  max-width: none;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.page-meta dt {
  color: var(--ink-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.2rem;
}

.page-meta dd {
  margin: 0;
  color: var(--ink);
}

/* ---------------------------------------------------------- contents nav */

.contents {
  margin: 0 0 2.5rem;
  padding: 1.1rem 1.35rem 1.25rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.contents h2 {
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.contents ol {
  margin: 0;
  padding-left: 1.3em;
  max-width: none;
}

.contents li {
  margin-bottom: 0.25em;
}

.contents ul {
  list-style: none;
  padding-left: 0.75em;
  margin: 0.25em 0 0.5em;
  color: var(--ink-faint);
}

.contents ul li::before {
  content: "\2014\00a0";
  color: var(--ink-faint);
}

@media (min-width: 62rem) {
  main.has-contents {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    grid-template-areas:
      "title    contents"
      "lede     contents"
      "meta     contents"
      "prose    contents";
    column-gap: 3rem;
    align-items: start;
  }

  main.has-contents > h1 {
    grid-area: title;
  }
  main.has-contents > .lede {
    grid-area: lede;
  }
  main.has-contents > .page-meta {
    grid-area: meta;
  }
  main.has-contents > .prose {
    grid-area: prose;
    min-width: 0;
  }
  main.has-contents > .contents {
    grid-area: contents;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------- tables */

.table-scroll {
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-raised);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
}

caption {
  caption-side: top;
  text-align: left;
  padding: 0.85rem 1rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
}

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

thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

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

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.cell-note {
  margin: 0.4rem 0 0;
  max-width: 46ch;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.stats table {
  text-align: center;
}

.no {
  color: var(--ink-faint);
}

/* ----------------------------------------------------------------- pills */

.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--tone-neutral-edge);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
}

.pill-pending,
.pill-draft {
  background: var(--tone-pending-bg);
  color: var(--tone-pending-ink);
  border-color: var(--tone-pending-edge);
}

.pill-done,
.pill-stable,
.pill-required {
  background: var(--tone-done-bg);
  color: var(--tone-done-ink);
  border-color: var(--tone-done-edge);
}

.pill-progress,
.pill-candidate,
.pill-reference {
  background: var(--tone-progress-bg);
  color: var(--tone-progress-ink);
  border-color: var(--tone-progress-edge);
}

.pill-optional {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-ink);
  border-color: var(--tone-neutral-edge);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-faint);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 0.35em;
  margin: 0 0.15em 0.2em 0;
  white-space: nowrap;
}

/* -------------------------------------------------------------- callouts */

.callout {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem 0.5rem;
  max-width: var(--measure);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule-strong);
  border-radius: 4px;
  background: var(--paper-sunk);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}

.callout p {
  max-width: none;
}

.callout-heading {
  font-weight: 700;
  margin-bottom: 0.5em;
}

.callout-status {
  border-left-color: var(--tone-progress-edge);
}

.callout-gap {
  border-left-color: var(--tone-pending-edge);
}

/* ------------------------------------------------------- specification */

.object {
  margin: 0 0 1.5rem;
  max-width: var(--measure);
}

.object h3 {
  margin-top: 1.75rem;
}

.object-status,
.group-status {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.group-note {
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.requirements {
  margin: 1rem 0 0;
  max-width: none;
}

.requirement {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  scroll-margin-top: 2rem;
}

.requirement:target {
  background: var(--tone-pending-bg);
  border-radius: 3px;
  padding-inline: 0.6rem;
  margin-inline: -0.6rem;
}

.requirement dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding-top: 0.15rem;
}

.req-id {
  color: var(--ink-muted);
  text-decoration: none;
}

.req-id:hover,
.req-id:focus-visible {
  color: var(--link);
  text-decoration: underline;
}

.requirement dd {
  margin: 0;
}

pre.layout code {
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------ signposts */

.signposts {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.signposts li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}

.signposts li:last-child {
  border-bottom: 1px solid var(--rule);
}

.signposts a {
  font-weight: 600;
}

/* ----------------------------------------------------------- provenance */

.provenance {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  max-width: none;
}

.provenance code {
  font-size: 0.75rem;
}

.digest {
  overflow-wrap: anywhere;
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  padding-block: 2rem 2.5rem;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.site-footer p {
  max-width: 62ch;
  margin-bottom: 0.75em;
}

.footer-links {
  margin-top: 1.25rem;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------------- print */

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

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .wrap {
    max-width: none;
  }

  a {
    color: #000;
  }

  /* Print the destination of a link, so a paper copy stays usable. */
  .prose a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: 9pt;
    word-break: break-all;
  }

  .table-scroll {
    overflow: visible;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  table,
  pre,
  .callout {
    break-inside: avoid;
  }
}


/* ------------------------------------------------------------------ the mark */

/*
 * Three nodes joined to one root: everything traces back to where it came from.
 *
 * The standard variant is monoline and takes `currentColor`, so it inherits whatever it sits
 * in and needs no second copy for dark mode. Only the root is tinted — the one place colour
 * does work, marking the source the other nodes descend from.
 */
.mark {
  flex: none;
  display: block;
}

/* The source node: an accent ring rather than a fill. The one element that differs from the
   platform's mark, and the only one carrying colour. */
.mark-source {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
}

.site-id a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}

.site-id-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.site-id a:hover .site-id-name {
  color: var(--accent-deep);
}

/* ------------------------------------------------------------- contents rail */

/*
 * The specification's own contents, at the top of the document.
 *
 * A fixed sidebar was the obvious thing and the wrong one: this stylesheet has no build step
 * and no JavaScript, the document is long, and a rail that scrolls independently is where
 * hand-written CSS goes to acquire a media-query zoo. A boxed contents list at the head of the
 * document is what a printed specification does, it works at every width, and it is one anchor
 * away from anywhere.
 */
.toc {
  margin: 2rem 0 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}

.toc h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 0;
  padding: 0;
}

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

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

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

/* ------------------------------------------------------------------- cards */

/* The Status page's three doors. A list, styled as rows rather than tiles: three items do not
   need a grid, and a grid of three is a layout that breaks the moment there are four. */
/* --------------------------------------------------------- schema references */

.schema-list {
  font-family: var(--font-ui);
  font-size: 0.95rem;
}