.site-header {
  display:flex;
  align-items:center;
  gap:2.5rem;
  padding-block:1.6rem;
  border-bottom:var(--hd-border);
}

/* The header stays at the top while the page scrolls: sticky, so the page needs no offset.
   Its background reaches the screen's edges, so content never shows beside or through it,
   and every jump to an anchor or to a focused element lands below it (scroll-padding-top on
   the root; WCAG 2.4.11). The skip link sits above it (its own layer) and stays first. On a
   phone only the row of links stays; the brand row scrolls away (see the 38rem query). */
html {
  scroll-padding-top:7.5rem;
}

.site-header {
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:var(--hd-z-sticky);
  background:var(--hd-color-background);
  box-shadow:0 0 0 100vmax var(--hd-color-background);
  clip-path:inset(0 -100vmax);
}

:where(h1,h2,h3,h4)[id] {
  scroll-margin-top:var(--hd-space-4);
}

@media print {
  html {
    scroll-padding-top:0;
  }
  .site-header {
    position:static;
    box-shadow:none;
    clip-path:none;
  }
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:var(--hd-color-text);
  font-size:var(--hd-font-size-heading);
  font-weight:750;
  letter-spacing:var(--hd-letter-spacing-tighter);
  text-decoration:none;
  line-height:1.1;
}

.brand-dot {
  color:var(--hd-color-accent);
  margin-left:-.58rem;
}

.brand-symbol {
  display:grid;
  grid-template-columns:repeat(2,.48rem);
  gap:.12rem;
  margin-right:.25rem;
  transform:rotate(-8deg);
}

.brand-symbol i {
  width:.48rem;
  height:.48rem;
  background:var(--hd-color-accent);
}

.brand-symbol i:nth-child(2) {
  background:var(--hd-color-coral);
}

.brand-symbol i:nth-child(3) {
  background:var(--hd-color-aqua);
}

.brand-symbol i:nth-child(4) {
  background:var(--hd-color-lime);
}

/* Navigation and the language switch share one group: beside the brand on wide
   screens, and one full-width row of their own on phones, where the switch keeps its
   full language name instead of pushing the theme toggle onto a third row. */
.header-links {
  display:flex;
  align-items:center;
  gap:2rem;
  margin-left:auto;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:2rem;
}

.site-header nav a {
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text);
  text-decoration:none;
  padding-block:.65rem;
}

.site-header nav a:hover,.site-header nav a[aria-current=page] {
  text-decoration:underline;
  text-underline-offset:.35rem;
}

.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:var(--hd-control-height);
  padding:.4rem .85rem;
  border:var(--hd-border-width) solid var(--hd-color-control-border);
  border-radius:var(--hd-radius-round);
  color:var(--hd-color-text);
  background:transparent;
  font-size:var(--hd-font-size-small);
  cursor:pointer;
}

/* Link to the same page in the other language, named in that language
   (docs/language-concept.md). A text link, not a flag. */
.lang-switch {
  display:inline-flex;
  align-items:center;
  min-height:var(--hd-control-height);
  padding-inline:var(--hd-space-2);
  color:var(--hd-color-text);
  font-size:var(--hd-font-size-small);
  font-weight:var(--hd-font-weight-semibold);
  text-decoration:none;
}

.lang-switch:hover {
  text-decoration:underline;
  text-underline-offset:.35rem;
}

.theme-toggle[hidden] {
  display:none;
}

.theme-icon {
  font-size:var(--hd-font-size-title);
  line-height:1;
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center;
  padding-block:5.5rem 6rem;
}

.eyebrow {
  gap:.65rem;
  margin:0 0 var(--hd-space-6);
}

.tiny-square {
  width:.5rem;
  height:.5rem;
  background:var(--hd-color-accent);
  flex-shrink:0;
}

h1 {
  margin:0;
  font-size:var(--hd-font-size-display-large);
  font-weight:650;
  line-height:var(--hd-line-height-display);
  letter-spacing:var(--hd-letter-spacing-tighter);
}

h1 span {
  color:var(--hd-color-accent);
}

.lead {
  max-width:29rem;
  margin:1.8rem 0 2rem;
  color:var(--hd-color-text-muted);
  font-size:var(--hd-font-size-body);
  line-height:1.75;
}

.hero .hd-button {
  gap:2rem;
}

.network-art {
  margin:0;
  padding:1.9rem;
  background:var(--hd-color-surface);
  border:var(--hd-border);
  border-radius:var(--hd-radius-large);
  transform:rotate(1.25deg);
}

.art-heading {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2.4rem;
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text-muted);
}

.node-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
}

.local-node {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
  padding:1rem .75rem;
  color:var(--hd-color-on-color);
  border-radius:var(--hd-radius-medium);
  font-size:var(--hd-font-size-small);
  font-weight:650;
}

.local-node--a {
  background:var(--hd-color-aqua);
}

.local-node--b {
  background:var(--hd-color-lilac);
}

.local-node--c {
  background:var(--hd-color-coral);
}

.local-node small {
  font-size:var(--hd-font-size-caption);
  font-weight:450;
}

.node-icon {
  font-size:var(--hd-font-size-heading);
  line-height:1.1;
  margin-bottom:.6rem;
}

.network-path {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  height:2.4rem;
  margin-inline:16%;
}

.network-path span {
  border-left:var(--hd-border-width) solid var(--hd-color-control-border);
}

.network-path span:nth-child(1) {
  border-bottom:var(--hd-border-width) solid var(--hd-color-control-border);
}

.network-path span:nth-child(2) {
  border-left:0;
  border-bottom:var(--hd-border-width) solid var(--hd-color-control-border);
  position:relative;
}

.network-path span:nth-child(2)::before {
  content:"";
  position:absolute;
  left:50%;
  height:100%;
  border-left:var(--hd-border-width) solid var(--hd-color-control-border);
}

.network-path span:nth-child(3) {
  border-left:0;
  border-right:var(--hd-border-width) solid var(--hd-color-control-border);
  border-bottom:var(--hd-border-width) solid var(--hd-color-control-border);
}

.analysis-node {
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:1.5rem;
  margin:1.15rem .6rem 0;
  background:var(--hd-color-background);
  border:var(--hd-border-width) solid var(--hd-color-control-border);
  border-radius:var(--hd-radius-medium);
  position:relative;
}

.analysis-node::before {
  content:"";
  position:absolute;
  height:1.15rem;
  left:50%;
  top:-1.15rem;
  border-left:var(--hd-border-width) solid var(--hd-color-control-border);
}

.analysis-node strong,.analysis-node small,.art-kicker {
  display:block;
}

.art-kicker {
  font-size:var(--hd-font-size-caption);
  text-transform:uppercase;
  letter-spacing:var(--hd-letter-spacing-wide);
  color:var(--hd-color-text-muted);
}

.analysis-node strong {
  font-size:var(--hd-font-size-body);
  margin:.2rem 0;
}

.analysis-node small {
  font-size:var(--hd-font-size-caption);
  color:var(--hd-color-text-muted);
}

.orbit-mark {
  position:relative;
  width:2.8rem;
  height:2.8rem;
  flex-shrink:0;
}

.orbit-mark i {
  position:absolute;
  width:1.35rem;
  height:1.35rem;
  border-radius:50%;
  background:var(--hd-color-lilac);
}

.orbit-mark i:nth-child(2) {
  right:0;
  top:.75rem;
  background:var(--hd-color-coral);
}

.orbit-mark i:nth-child(3) {
  bottom:0;
  left:.35rem;
  background:var(--hd-color-aqua);
}

.result-path {
  height:1.7rem;
  border-left:var(--hd-border-width) solid var(--hd-color-control-border);
  margin-left:50%;
}

.result-node {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1rem;
  background:var(--hd-color-lime);
  color:var(--hd-color-on-color);
  border-radius:var(--hd-radius-medium);
  font-size:var(--hd-font-size-small);
  font-weight:600;
}

.result-node>span:first-child {
  font-size:var(--hd-font-size-title);
}

.network-art figcaption {
  font-size:var(--hd-font-size-caption);
  color:var(--hd-color-text-muted);
  margin-top:1.35rem;
}

.principles-strip {
  border-block:var(--hd-border);
  background:var(--hd-color-lime);
  color:var(--hd-color-on-color);
}

.principles-strip>.shell {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-block:1.3rem;
  gap:1.5rem;
  font-weight:600;
  font-size:var(--hd-font-size-small);
}

.principles-strip i {
  font-style:normal;
  font-family:var(--hd-font-family-mono);
  font-size:var(--hd-font-size-caption);
  margin-right:1.1rem;
}

.section {
  padding-block:5.5rem;
  scroll-margin-top:2rem;
}

h2 {
  margin:0;
  font-size:var(--hd-font-size-display);
  font-weight:600;
  line-height:var(--hd-line-height-heading);
  letter-spacing:var(--hd-letter-spacing-tight);
}

.section-intro {
  max-width:var(--hd-measure-prose);
  color:var(--hd-color-text-muted);
  margin:1.5rem 0 0;
}

h3 {
  font-size:var(--hd-font-size-title);
  letter-spacing:var(--hd-letter-spacing-tight);
  font-weight:650;
  line-height:var(--hd-line-height-snug);
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin:3.5rem 0 0;
  padding:0;
  list-style:none;
}

.step-top {
  display:flex;
  justify-content:space-between;
  padding:1rem 1.2rem;
  border-radius:var(--hd-radius-small);
  color:var(--hd-color-on-color);
  font-family:var(--hd-font-family-mono);
  font-size:var(--hd-font-size-small);
}

.step-top--lilac {
  background:var(--hd-color-lilac);
}

.step-top--aqua {
  background:var(--hd-color-aqua);
}

.step-top--coral {
  background:var(--hd-color-coral);
}

.steps h3 {
  margin:1.6rem 0 .8rem;
}

.steps p {
  max-width:22rem;
  color:var(--hd-color-text-muted);
  font-size:var(--hd-font-size-body);
}

.knowledge-section {
  padding-block:5rem;
  background:var(--hd-color-surface);
  border-block:var(--hd-border);
  scroll-margin-top:1rem;
}

.reading-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
  margin-top:3rem;
}

.reading-card {
  padding:2rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:0;
  border-radius:var(--hd-radius-medium);
}

.reading-meta {
  display:flex;
  width:100%;
  justify-content:space-between;
  gap:1rem;
  font-size:var(--hd-font-size-caption);
}

.reading-card h3 {
  margin:2.5rem 0 1rem;
  font-size:var(--hd-font-size-heading-large);
  font-weight:600;
  letter-spacing:var(--hd-letter-spacing-tight);
}

.reading-card p {
  max-width:var(--hd-measure-prose);
  margin:0 0 2.5rem;
  font-size:var(--hd-font-size-small);
  line-height:1.7;
}

.draft-note {
  font-size:var(--hd-font-size-caption);
  margin-top:auto;
  padding-top:.85rem;
  width:100%;
  border-top:1px solid currentColor;
}

.site-footer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  padding-block:2rem;
  border-top:var(--hd-border);
}

/* The funding notice: the ministry's logo exactly as published (its own white ground and
   clear space included, so it stays on white in both themes), never below the federal
   guide's digital minimum of 135 pixels in height including the clear space. */
.footer-funding {
  display:flex;
  flex-basis:100%;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--hd-space-4) var(--hd-space-8);
  padding-bottom:2rem;
  border-bottom:var(--hd-border);
}

.footer-funding img {
  display:block;
  width:auto;
  height:9rem;
  max-width:100%;
  object-fit:contain;
}

.site-footer .footer-funding p {
  max-width:var(--hd-measure-prose);
  margin:0;
}

.site-footer p,.site-footer>a:last-child,.footer-legal a {
  font-size:var(--hd-font-size-caption);
  color:var(--hd-color-text-muted);
}

.footer-legal {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.site-footer .brand {
  font-size:var(--hd-font-size-title);
}

.design-hero {
  padding-block:4.5rem 3rem;
  max-width:var(--hd-measure-wide);
}

.design-hero h1 {
  font-size:var(--hd-font-size-display-large);
}

.design-hero .lead {
  max-width:var(--hd-measure-prose);
}

.palette-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:2rem;
}

.swatch {
  padding:1.5rem;
  border-radius:var(--hd-radius-small);
  min-height:10rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:var(--hd-color-on-color);
}

.swatch strong {
  font-size:var(--hd-font-size-heading);
  letter-spacing:var(--hd-letter-spacing-tight);
  font-weight:600;
}

.swatch span {
  font-size:var(--hd-font-size-caption);
}

.swatch--lime {
  background:var(--hd-color-lime);
}

.swatch--coral {
  background:var(--hd-color-coral);
}

.swatch--aqua {
  background:var(--hd-color-aqua);
}

.swatch--lilac {
  background:var(--hd-color-lilac);
}

.design-section {
  padding-block:3rem;
  border-top:var(--hd-border);
}

.design-section h2 {
  font-size:var(--hd-font-size-heading-large);
}

.design-section>.section-intro {
  max-width:var(--hd-container-narrow);
}

.theme-specimens {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
  margin-top:2.5rem;
}

.specimen {
  padding:2rem;
  border:var(--hd-border);
  border-radius:var(--hd-radius-medium);
}

.specimen-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2rem;
}

.specimen-header strong {
  font-size:var(--hd-font-size-title);
  letter-spacing:var(--hd-letter-spacing-tight);
}

.specimen .hd-panel {
  margin-top:1.5rem;
}

.specimen h3 {
  margin:0 0 .65rem;
  font-size:var(--hd-font-size-heading);
}

.specimen p {
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text-muted);
}

.specimen .hd-field {
  margin-block:1.5rem;
}

.specimen .hd-field__control {
  font-size:var(--hd-font-size-body);
}

.specimen-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin:1.5rem 0;
}

.specimen-actions .hd-button {
  font-size:var(--hd-font-size-small);
}

.specimen .hd-notice {
  font-size:var(--hd-font-size-small);
  margin-top:1rem;
}

.type-sample {
  margin-top:2rem;
}

.type-sample p {
  font-size:var(--hd-font-size-display-large);
  line-height:1.08;
  letter-spacing:var(--hd-letter-spacing-tight);
  margin:0 0 1.5rem;
  max-width:var(--hd-measure-wide);
}

.type-sample small {
  color:var(--hd-color-text-muted);
}

.design-rules {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  padding:0;
  margin:2.5rem 0 0;
  list-style:none;
}

.design-rules strong {
  font-weight:600;
}

.design-rules p {
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text-muted);
}

@media(max-width:68rem) {
  .hero {
    gap:2rem;
  }
  .network-art {
    padding:1.25rem;
  }
  .site-header {
    gap:1.5rem;
  }
  .header-links,.site-header nav {
    gap:1.4rem;
  }
  .local-node {
    padding:.8rem .55rem;
  }
  .analysis-node {
    padding:1.2rem .85rem;
  }
  .principles-strip i {
    margin-right:.6rem;
  }
}

@media(max-width:52rem) {
  .hero {
    grid-template-columns:1fr;
    padding-block:3.5rem;
    gap:3rem;
  }
  .hero-copy {
    max-width:var(--hd-measure-prose);
  }
  .network-art {
    max-width:33rem;
    width:100%;
    justify-self:center;
    transform:none;
    padding:1.7rem;
  }
  .lead {
    max-width:34rem;
  }
  .theme-specimens {
    grid-template-columns:1fr;
  }
  .steps {
    gap:1.2rem;
  }
  .principles-strip>.shell {
    font-size:var(--hd-font-size-small);
    gap:.8rem;
  }
  .principles-strip i {
    display:block;
    margin:0 0 .3rem;
  }
  .reading-card {
    padding:1.5rem;
  }
}

@media(max-width:38rem) {
  html {
    scroll-padding-top:5rem;
  }
  .site-header {
    gap:1rem;
    flex-wrap:wrap;
    padding-block:1.1rem;
    top:calc(env(safe-area-inset-top,0px) - 4.85rem);
  }
  .brand {
    font-size:var(--hd-font-size-heading);
  }
  /* Four destinations and the language link share one line on a phone; where they do
     not fit (German at 360 px and below), they wrap instead of running off the screen. */
  .header-links {
    order:3;
    width:100%;
    margin:0;
    justify-content:space-between;
    flex-wrap:wrap;
    column-gap:1rem;
    row-gap:0;
    border-top:var(--hd-border);
    padding-top:.5rem;
  }
  .site-header nav {
    flex-wrap:wrap;
    column-gap:1rem;
    row-gap:0;
  }
  .site-header nav a {
    font-size:var(--hd-font-size-small);
  }
  .theme-toggle {
    margin-left:auto;
  }
  .hero {
    padding-block:2.6rem 3rem;
  }
  .network-art {
    padding:1.05rem;
  }
  .art-heading {
    margin-bottom:1.5rem;
  }
  .node-row {
    gap:.4rem;
  }
  .local-node {
    font-size:var(--hd-font-size-caption);
    padding:.8rem .45rem;
  }
  .local-node small {
    font-size:var(--hd-font-size-caption);
  }
  .analysis-node {
    margin-inline:0;
    gap:.75rem;
  }
  .analysis-node strong {
    font-size:var(--hd-font-size-small);
  }
  .analysis-node small {
    font-size:var(--hd-font-size-caption);
  }
  .result-node {
    font-size:var(--hd-font-size-caption);
    gap:.5rem;
  }
  .steps,.reading-grid,.design-rules {
    grid-template-columns:1fr;
  }
  .steps {
    gap:1.5rem;
    margin-top:2.5rem;
  }
  .steps h3 {
    margin-top:1rem;
  }
  .steps p {
    max-width:none;
  }
  .section,.knowledge-section {
    padding-block:3.5rem;
  }
  .reading-card {
    padding:1.5rem;
  }
  .reading-card h3 {
    font-size:var(--hd-font-size-heading);
  }
  .site-footer {
    align-items:flex-start;
    flex-direction:column;
    gap:.65rem;
  }
  .site-footer p {
    margin:0;
  }
  .palette-grid {
    grid-template-columns:repeat(2,1fr);
    gap:.7rem;
  }
  .swatch {
    min-height:8rem;
    padding:1rem;
  }
  .specimen {
    padding:1.3rem;
  }
  .specimen-header {
    margin-bottom:1.5rem;
  }
  .design-hero {
    padding-top:3rem;
  }
  .principles-strip>.shell {
    gap:.8rem;
    font-size:var(--hd-font-size-caption);
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
  }
}

/* Long German compounds must never overflow a narrow column; hyphenation follows
   the page's lang attribute, so each language breaks by its own rules. */
h1,h2,h3 {
  overflow-wrap:break-word;
  hyphens:auto;
}

/* The domain root, seen only without the Worker's language redirect. */
.language-choice {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--hd-space-6);
  min-height:100vh;
}

.language-choice .brand {
  font-size:var(--hd-font-size-display);
}

.language-choice ul {
  display:flex;
  gap:var(--hd-space-6);
  margin:0;
  padding:0;
  list-style:none;
  font-size:var(--hd-font-size-heading);
}

/* Long-form pages (src/longform.mjs): an introduction, then the text with its
   contents beside it. Text keeps the reading measure; figures may use the whole
   column, because screenshots of the platform need the width to stay legible. */
.doc-hero {
  padding-block:4.5rem 3rem;
}

.doc-hero .lead {
  max-width:var(--hd-measure-prose);
  margin-bottom:0;
}

.doc-version {
  margin:1rem 0 0;
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text-muted);
}

.doc-download {
  margin:1.5rem 0 0;
}

.doc-notice {
  max-width:var(--hd-measure-prose);
  margin:var(--hd-space-6) 0 0;
  font-size:var(--hd-font-size-small);
}

.doc-layout {
  display:grid;
  grid-template-columns:14rem minmax(0,1fr);
  gap:4rem;
  align-items:start;
  padding-block:3rem 5.5rem;
  border-top:var(--hd-border);
}

/* The contents sticks below the sticky header (the root's scroll padding is the header's
   height plus a little) and scrolls on its own when it is taller than the screen. The entry
   of the section in view (navigation.js) carries a bar and weight beside the colour. */
.doc-contents {
  position:sticky;
  top:7.5rem;
  max-height:calc(100vh - 8.5rem);
  overflow-y:auto;
}

.doc-contents h2 {
  margin:0 0 var(--hd-space-3);
  color:var(--hd-color-text-muted);
  font-size:var(--hd-font-size-caption);
  font-weight:var(--hd-font-weight-semibold);
  letter-spacing:var(--hd-letter-spacing-wide);
  text-transform:uppercase;
}

.doc-contents ol {
  margin:0;
  padding:0;
  list-style:none;
  border-left:var(--hd-border);
}

.doc-contents a {
  display:block;
  padding:.4rem 0 .4rem var(--hd-space-4);
  color:var(--hd-color-text-muted);
  font-size:var(--hd-font-size-small);
  text-decoration:none;
}

.doc-contents a:hover {
  color:var(--hd-color-text);
  text-decoration:underline;
  text-underline-offset:.3rem;
}

.doc-contents a[aria-current=location] {
  position:relative;
  color:var(--hd-color-text);
  font-weight:var(--hd-font-weight-semibold);
}

.doc-contents a[aria-current=location]::before {
  content:"";
  position:absolute;
  top:.3rem;
  bottom:.3rem;
  left:-2px;
  width:3px;
  border-radius:var(--hd-radius-small);
  background:var(--hd-color-accent);
}

.prose {
  font-size:var(--hd-font-size-body);
  line-height:var(--hd-line-height-body);
}

.prose>:first-child {
  margin-top:0;
}

.prose p,.prose ul,.prose ol,.prose pre,.prose blockquote,.prose .hd-notice,.prose figcaption {
  max-width:var(--hd-measure-prose);
}

.prose p,.prose ul,.prose ol,.prose pre {
  margin:0 0 var(--hd-space-4);
}

.prose ul,.prose ol {
  padding-left:var(--hd-space-6);
}

.prose li+li {
  margin-top:var(--hd-space-2);
}

.prose h2 {
  margin:var(--hd-space-16) 0 var(--hd-space-4);
  font-size:var(--hd-font-size-heading-large);
  scroll-margin-top:var(--hd-space-8);
}

.prose h3 {
  margin:var(--hd-space-8) 0 var(--hd-space-3);
  scroll-margin-top:var(--hd-space-8);
}

.prose figure {
  margin:var(--hd-space-8) 0;
}

.prose img {
  display:block;
  max-width:100%;
  height:auto;
  border:var(--hd-border);
  border-radius:var(--hd-radius-medium);
}

.prose figcaption {
  margin-top:var(--hd-space-3);
  color:var(--hd-color-text-muted);
  font-size:var(--hd-font-size-small);
}

.prose .hd-notice {
  margin:var(--hd-space-6) 0;
}

.prose .hd-notice>:last-child {
  margin-bottom:0;
}

.prose pre {
  padding:var(--hd-space-4);
  overflow-x:auto;
  background:var(--hd-color-surface);
  border:var(--hd-border);
  border-radius:var(--hd-radius-small);
  font-size:var(--hd-font-size-small);
}

.prose .hd-table__wrap {
  margin:var(--hd-space-6) 0;
}

/* A path or command in running text has no natural break, so on a narrow screen it may
   break anywhere rather than push the page sideways; code blocks scroll in their frame. */
.prose :not(pre)>code {
  overflow-wrap:anywhere;
}

/* A label of the platform interface, as the interface shows it in the page's language. */
.ui-label {
  font-weight:var(--hd-font-weight-semibold);
}

@media(max-width:52rem) {
  .doc-layout {
    grid-template-columns:minmax(0,1fr);
    gap:var(--hd-space-8);
    padding-top:var(--hd-space-8);
  }
  .doc-contents {
    position:static;
  }
}

@media(max-width:38rem) {
  .doc-hero {
    padding-block:3rem 2rem;
  }
  .prose h2 {
    margin-top:var(--hd-space-12);
  }
}

/* A card whose page exists links to it from its status line. The card is coloured,
   so the link keeps the card's text colour instead of the accent. */
.reading-links {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.75rem;
  margin-bottom:0;
}

.reading-link {
  color:inherit;
  font-weight:var(--hd-font-weight-semibold);
  text-decoration:none;
}

.reading-link:hover {
  text-decoration:underline;
  text-underline-offset:.3rem;
}

/* The page for a missing path (src/not-found.mjs), and the root 404 page's notice,
   which says it in both languages. */
.not-found {
  padding-block:5.5rem 6rem;
}

.not-found .lead {
  max-width:var(--hd-measure-prose);
}

.language-notice {
  margin:0;
  font-size:var(--hd-font-size-heading);
}

/* Architecture page (src/pages/architecture.mjs). The figure is drawn with the design
   package's tokens only, so it follows the light and dark themes: its zones carry the
   brand colours of the home page's art (lilac for the centre, aqua for the clinic), and
   connections between sites the accent. Type sizes inside the SVG come from the ramp
   but count in drawing units, so they scale with the figure; on a narrow screen the
   figure keeps a legible width and scrolls sideways instead. */
.arch-callout {
  max-width:var(--hd-measure-prose);
  margin:var(--hd-space-6) 0 0;
}

.arch-section {
  display:grid;
  gap:var(--hd-space-5);
  padding-block:3rem;
  border-top:var(--hd-border);
}

.arch-section h2,.arch-next {
  margin:0;
}

.arch-figure {
  display:grid;
  gap:var(--hd-space-4);
  margin:0;
}

.arch-scroll {
  overflow-x:auto;
  background:var(--hd-color-surface);
  border:var(--hd-border);
  border-radius:var(--hd-radius-large);
}

.arch-scroll:focus-visible {
  outline:2px solid var(--hd-color-focus);
  outline-offset:2px;
}

.arch-svg {
  display:block;
  width:100%;
  min-width:1080px;
  height:auto;
  font-family:var(--hd-font-family);
}

.arch-zone {
  stroke:var(--hd-color-border);
}

.arch-zone--centre {
  fill:var(--hd-color-lilac);
  fill-opacity:.2;
}

.arch-zone--clinic {
  fill:var(--hd-color-aqua);
  fill-opacity:.22;
}

.arch-chip--centre {
  fill:var(--hd-color-lilac);
}

.arch-chip--clinic {
  fill:var(--hd-color-aqua);
}

.arch-band {
  fill:none;
  stroke:var(--hd-color-control-border);
  stroke-dasharray:5 6;
}

.arch-zone-title {
  font-size:var(--hd-font-size-lead);
  font-weight:var(--hd-font-weight-bold);
  fill:var(--hd-color-text);
}

.arch-zone-sub,.arch-s {
  font-size:var(--hd-font-size-caption);
  fill:var(--hd-color-text-muted);
}

.arch-band-title {
  font-size:var(--hd-font-size-caption);
  font-weight:var(--hd-font-weight-semibold);
  fill:var(--hd-color-text);
}

.arch-process {
  fill:var(--hd-color-surface);
  stroke:var(--hd-color-control-border);
  stroke-width:1.2;
}

.arch-store,.arch-person {
  fill:var(--hd-color-background);
  stroke:var(--hd-color-control-border);
  stroke-width:1.2;
}

.arch-person {
  stroke-dasharray:3 3;
}

.arch-store-rule {
  stroke:var(--hd-color-control-border);
}

.arch-t {
  font-size:var(--hd-font-size-small);
  font-weight:var(--hd-font-weight-semibold);
  fill:var(--hd-color-text);
}

.arch-b {
  font-size:var(--hd-font-size-caption);
  fill:var(--hd-color-text);
}

.arch-l {
  font-size:var(--hd-font-size-caption);
  fill:var(--hd-color-text-muted);
}

.arch-l--cross {
  font-weight:var(--hd-font-weight-semibold);
  fill:var(--hd-color-accent);
}

.arch-wire {
  fill:none;
  stroke:var(--hd-color-control-border);
  stroke-width:1.5;
}

.arch-wire--cross {
  stroke:var(--hd-color-accent);
  stroke-width:2.4;
}

.arch-wire--file {
  stroke-dasharray:5 4;
}

.arch-head {
  fill:var(--hd-color-control-border);
}

.arch-head--cross,.arch-gate {
  fill:var(--hd-color-accent);
}

.arch-gate-label {
  font-size:var(--hd-font-size-caption);
  font-weight:var(--hd-font-weight-semibold);
  fill:var(--hd-color-accent);
}

.arch-legend {
  display:flex;
  flex-wrap:wrap;
  gap:var(--hd-space-2) var(--hd-space-6);
  margin:0;
  padding:0;
  list-style:none;
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text-muted);
}

.arch-legend li {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
}

.arch-swatch {
  flex:none;
  width:2.6rem;
  border-top:1.5px solid var(--hd-color-control-border);
}

.arch-swatch--cross {
  border-top:3px solid var(--hd-color-accent);
}

.arch-swatch--file {
  border-top-style:dashed;
}

.arch-figure figcaption {
  max-width:var(--hd-measure-prose);
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text-muted);
}

.arch-scroll-hint {
  display:none;
}

.arch-grid {
  display:grid;
  gap:var(--hd-space-4);
}

.arch-grid--three {
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}

.arch-card {
  display:grid;
  align-content:start;
  gap:var(--hd-space-3);
  min-width:0;
}

.arch-card h3,.arch-card p {
  margin:0;
}

.arch-card ul,.arch-card ol,.arch-missing {
  display:grid;
  gap:var(--hd-space-2);
  margin:0;
  padding-left:1.2em;
}

.arch-missing {
  gap:var(--hd-space-3);
  max-width:var(--hd-measure-prose);
}

/* The four flows: one track per flow, a step per column, so steps line up across flows.
   A step's mark says where it happens, in the figure's colours and with a shape of its
   own (circle: centre, square: clinic, diamond: across the boundary), so the colour is
   never the only carrier; the place is also written out for screen readers. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.arch-places {
  display:flex;
  flex-wrap:wrap;
  gap:var(--hd-space-2) var(--hd-space-6);
  margin:0;
  padding:0;
  list-style:none;
  font-size:var(--hd-font-size-small);
  color:var(--hd-color-text-muted);
}

.arch-places li {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}

.arch-places .arch-mark {
  width:1.1rem;
  height:1.1rem;
  margin:0;
}

.arch-flows {
  display:grid;
  gap:var(--hd-space-4);
}

.arch-flow {
  display:grid;
  grid-template-columns:13rem minmax(0,1fr);
  gap:var(--hd-space-6);
  align-items:start;
  padding:var(--hd-space-5) var(--hd-space-6);
  background:var(--hd-color-surface);
  border:var(--hd-border);
  border-radius:var(--hd-radius-large);
}

.arch-flow h3 {
  margin:0;
  padding-top:.2rem;
  font-size:var(--hd-font-size-body);
}

.arch-steps {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--hd-space-4);
  margin:0;
  padding:0;
  list-style:none;
}

.arch-step {
  position:relative;
  display:grid;
  align-content:start;
  gap:.25rem;
  min-width:0;
  overflow-wrap:break-word;
  hyphens:auto;
}

.arch-step:not(:last-child)::after {
  content:"";
  position:absolute;
  top:.95rem;
  left:2.4rem;
  right:calc(.4rem - var(--hd-space-4));
  border-top:var(--hd-border-width) solid var(--hd-color-control-border);
}

.arch-step strong {
  font-size:var(--hd-font-size-small);
  line-height:1.35;
}

.arch-step-detail {
  font-size:var(--hd-font-size-caption);
  line-height:1.45;
  color:var(--hd-color-text-muted);
}

.arch-mark {
  display:inline-grid;
  place-items:center;
  width:1.9rem;
  height:1.9rem;
  margin-bottom:.45rem;
  font-size:var(--hd-font-size-caption);
  font-weight:var(--hd-font-weight-semibold);
  font-variant-numeric:tabular-nums;
  color:var(--hd-color-on-color);
}

.arch-mark--centre {
  background:var(--hd-color-lilac);
  border-radius:50%;
}

.arch-mark--clinic {
  background:var(--hd-color-aqua);
  border-radius:var(--hd-radius-small);
}

.arch-mark--cross {
  background:var(--hd-color-accent);
  color:var(--hd-color-on-accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

@media(max-width:72rem) {
  .arch-flow {
    grid-template-columns:minmax(0,1fr);
    gap:var(--hd-space-4);
  }
}

/* Where six steps no longer fit side by side, a track runs downwards: the mark beside the
   step, the line below it. */
@media(max-width:60rem) {
  .arch-steps {
    grid-template-columns:minmax(0,1fr);
    gap:var(--hd-space-3);
  }
  .arch-step {
    grid-template-columns:1.9rem minmax(0,1fr);
    column-gap:.85rem;
  }
  .arch-step .arch-mark {
    grid-row:span 2;
    margin-bottom:0;
  }
  .arch-step:not(:last-child)::after {
    top:2.3rem;
    bottom:calc(.4rem - var(--hd-space-3));
    left:.95rem;
    right:auto;
    border-top:0;
    border-left:var(--hd-border-width) solid var(--hd-color-control-border);
  }
}

@media(max-width:58rem) {
  .arch-scroll-hint {
    display:inline;
  }
}

/* At 24.5rem and below the row of links can wrap onto a second line, so jumps land lower. */
@media(max-width:24.5rem) {
  html {
    scroll-padding-top:7.75rem;
  }
}