/* SPDX-License-Identifier: AGPL-3.0-only
 * SPDX-FileCopyrightText: 2021-2026 DALICC - Verein zur Foerderung der Rechtssicherheit in der Datenbewirtschaftung (ZVR 1249185710)
 */
/* DALICC site: design tokens, layout and chrome.
 *
 * The visual identity is the one recovered from the original Drupal theme
 * (sites/all/themes/dalicc): the "Dalicc" display face in uppercase for every
 * heading, Source Sans at 18px/1.5 for body copy, the 30px red band under the
 * header, a 1024px content column and a slate footer.  The body face is Source Sans 3,
 * the current release of the family the old theme called Source Sans Pro; both files
 * are served by this site.
 *
 * The faces themselves are declared elsewhere: one stylesheet per font set under
 * app/static/site/fonts-*.css, of which a page links exactly one, so a visitor never
 * downloads a family the site is not wearing.  app/services/appearance.py writes
 * those files and says which set is which.
 *
 * Light theme only. Every colour is stated explicitly so the page never inherits a
 * host or user-agent colour.
 *
 * Load order: fonts-<set>.css, site.css, components.css, then the style element in
 * the head that carries the chosen palette, font set and type scale.
 */

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

/* Roles, not colours.
 *
 * Every colour, every family and every type size below is named for what it is for,
 * never for what it looks like.  --color-accent is the colour that carries an action:
 * it is red here and coral in the Institutional Navy palette.  A rule asks for the
 * role, which is what lets one stored word repaint the whole site.
 *
 * The values in this block are the defaults, and the defaults are the site as it has
 * always looked.  The head of every page writes the chosen palette, font set and type
 * scale over them in a small style element, so this file stays one cacheable
 * stylesheet whatever the site is wearing.  docs/WEBSITE.md, "Typography and colour",
 * explains the roles and what may be put in them.
 *
 * No colour and no font family is written anywhere else in this file or in any other
 * stylesheet under app/static/site: tests/unit/test_appearance.py reads them all and
 * fails on one.
 */

:root {
  color-scheme: light;

  /* the brand: the wordmark, the headings, the footer, the menu */
  --color-brand: #505d66;
  --color-brand-dark: #40565b;
  --color-brand-darker: #2c4247;
  --color-brand-mid: #5e7479;
  --color-brand-soft: #c1d5dc;

  /* the accent: the band under the header, links, the API pill, the social marks */
  --color-accent: #ea4a3c;
  --color-accent-strong: #c73a2e;

  /* the action: the primary button */
  --color-action: #009f7b;
  --color-action-hover: #14b38f;
  --color-action-active: #008b67;

  /* the two bands of the home page */
  --color-hero: #5accae;
  --color-hero-text: #ffffff;
  --color-hero-button: #40565b;
  --color-hero-button-hover: #2c4247;
  --color-band: #fff3ea;

  /* surfaces */
  --color-page: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f9fa;
  --color-graph-surface: #f7fafb;

  /* text */
  --color-text: #191919;
  --color-text-soft: #4a4a4a;
  --color-text-muted: #7c9297;

  /* text and marks on a filled shape */
  --color-on-brand: #ffffff;
  --color-on-brand-soft: #dfe8eb;
  --color-on-brand-faint: #c4d2d7;
  --color-on-accent: #ffffff;
  --color-on-action: #ffffff;

  /* rules and edges */
  --color-border: #e6eef0;
  --color-border-strong: #b3cacf;

  /* links and the focus ring */
  --color-link: #ea4a3c;
  --color-link-hover: #c73a2e;
  --color-focus: #ea4a3c;

  /* the wordmark: its two halves are drawn from these, so a palette recolours it */
  --color-logo-brand: #505d66;
  --color-logo-accent: #ea4a3c;

  /* what a panel says about itself */
  --color-ok-surface: #eaf7f3;
  --color-alert-surface: #fdeeec;
  --color-warn: #d98c1f;
  --color-warn-surface: #fdf4e6;

  /* Three colours are also needed as bare channels: a shadow, a scrim and a ring are
     the same colour at an opacity.  The head derives them from the colours above. */
  --color-brand-rgb: 80, 93, 102;
  --color-text-rgb: 25, 25, 25;
  --color-action-rgb: 0, 159, 123;

  /* the three families: the display face, the reading face, the identifier face */
  --font-display: "Dalicc", "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* how a heading, a small capital label and a menu word are set */
  --weight-heading: normal;
  --transform-heading: uppercase;
  --tracking-heading: 0.01em;
  --weight-ui: normal;
  --tracking-caps: 0.06em;
  --font-nav: var(--font-display);
  --transform-nav: uppercase;
  --tracking-nav: normal;

  /* the type scale; the three "narrow" sizes are the same headings on a phone */
  --size-hero: 44px;
  --size-hero-narrow: 30px;
  --size-h1: 44px;
  --size-h1-narrow: 30px;
  --size-h2: 30px;
  --size-h2-narrow: 25px;
  --size-h3: 24px;
  --size-h3-narrow: 21px;
  --size-h4: 20px;
  --size-numeral: 54px;
  --size-card-title-large: 26px;
  --size-card-title: 22px;
  --size-lede: 19px;
  --size-body: 18px;
  --size-body-small: 17px;
  --size-caption: 15px;
  --size-label: 14px;
  --size-label-small: 13px;
  --size-ui: 19px;
  --size-ui-small: 16px;
  --size-mono: 14px;
  --size-code: 0.86em;
  --leading-body: 1.5;
  --leading-heading: 1.1;

  /* The older colour names.  Every page stylesheet is written in them, so each one is
     an alias of the role it belongs to and follows a palette without being touched.
     A rule written from here on uses the role name. */
  --c-red: var(--color-accent);
  --c-red-dark: var(--color-accent-strong);
  --c-green: var(--color-action);
  --c-green-hover: var(--color-action-hover);
  --c-green-active: var(--color-action-active);
  --c-mint: var(--color-hero);
  --c-peach: var(--color-band);
  --c-slate: var(--color-brand);
  --c-slate-muted: var(--color-text-muted);
  --c-slate-dark: var(--color-brand-dark);
  --c-slate-dark-hover: var(--color-brand-darker);
  --c-slate-mid: var(--color-brand-mid);
  --c-ink: var(--color-text);
  --c-ink-soft: var(--color-text-soft);
  --c-page: var(--color-page);
  --c-surface: var(--color-surface);
  --c-surface-alt: var(--color-surface-alt);
  --c-rule: var(--color-border);
  --c-rule-strong: var(--color-border-strong);
  --c-pale-blue: var(--color-brand-soft);
  /* The one name that means a colour and not a role: white is white in every palette,
     and a rule that wants the paper under a card asks for --color-surface instead. */
  --c-white: #ffffff;
  --fs-body: var(--size-body);
  --lh-body: var(--leading-body);

  /* layout */
  --content-max: 1024px;
  --wide-max: 1240px;
  --gutter: 24px;
  --band-pad: 64px;
  --accent-band: 30px;

  --radius: 2px;
  --shadow-card: 0 1px 2px rgba(var(--color-brand-rgb), 0.12);
  --shadow-panel: 0 6px 18px rgba(var(--color-brand-rgb), 0.18);
  --shadow-drop: 0 4px 14px rgba(var(--color-text-rgb), 0.25);
  --shadow-float: 0 2px 8px rgba(var(--color-text-rgb), 0.25);
  --shadow-modal: 0 10px 40px rgba(var(--color-text-rgb), 0.35);
  --scrim: rgba(var(--color-text-rgb), 0.45);
  --scrim-strong: rgba(var(--color-text-rgb), 0.55);
  --ring-action: 0 0 0 3px rgba(var(--color-action-rgb), 0.18);
  --focus-ring: 3px solid var(--color-focus);
}

/* ------------------------------------------------------------------ reset */

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

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

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------- typography */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  text-transform: var(--transform-heading);
  color: var(--color-brand);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 0.5em;
  line-height: var(--leading-heading);
}

h1 {
  font-size: var(--size-h1);
  margin-bottom: 18px;
}

h2 {
  font-size: var(--size-h2);
  margin-top: 1.6em;
}

h3 {
  font-size: var(--size-h3);
  margin-top: 1.5em;
}

h4 {
  font-size: var(--size-h4);
  margin-top: 1.4em;
}

h5,
h6 {
  font-size: var(--size-body);
  margin-top: 1.3em;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.35em;
}

strong,
b {
  font-weight: 700;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: var(--size-code);
}

code {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 0.08em 0.32em;
}

pre {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule);
  padding: 16px;
  overflow-x: auto;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
}

blockquote {
  margin: 0 0 1.4em;
  padding: 16px 0;
  border-top: 2px dotted var(--c-rule-strong);
  border-bottom: 2px dotted var(--c-rule-strong);
  color: var(--c-ink-soft);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--c-rule);
  margin: 2em 0;
}

/* The dotted rules under every H1 and at the end of a content page. */
.rule-dotted {
  border: 0;
  border-top: 2px dotted var(--c-rule-strong);
  margin: 0 0 32px;
}

.rule-dotted--footer {
  margin: 48px 0 0;
}

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

.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.4em;
  border: 1px solid var(--c-rule);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--size-ui-small);
}

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

thead th {
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: var(--weight-ui);
  letter-spacing: 0.03em;
}

tbody tr:nth-child(even) {
  background: var(--c-surface-alt);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-red);
  color: var(--c-white);
  padding: 12px 20px;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.skip-link:focus {
  left: 0;
  color: var(--c-white);
  text-decoration: none;
}

/* ----------------------------------------------------------------- layout */

.l-shell {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.l-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-block: var(--band-pad);
  padding-inline: var(--gutter);
}

.l-main--wide {
  max-width: var(--wide-max);
}

/* The privacy-notice banner of base.html sits above the page's own .l-main, which
   brings its own top padding; the banner's margin is the gap between the two. */
.l-main--notice {
  padding-bottom: 0;
}

.l-main--notice ~ .l-main {
  padding-top: 0;
}

.band {
  width: 100%;
}

.band__inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding-block: var(--band-pad);
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------ site banner */

/* The deployment-wide notice above the header (site/base.html), switched on at
   /admin/appearance. The warning tone of the flash messages: reading text on the
   warning wash (16.12:1 in the classic palette, at least 12.61:1 in every other),
   closed by a 1 px warning rule that is decoration only. The text is one paragraph
   that wraps where the screen is narrow. */
.site-banner {
  background: var(--color-warn-surface);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-warn);
}

.site-banner__inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding-block: 10px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.site-banner__mark {
  flex: 0 0 auto;
  margin-top: 2px;
}

.site-banner__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--size-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.site-banner[hidden],
.site-banner__close[hidden] {
  display: none;
}

/* The close button a closable banner carries: the ghost button, drawn in the band's
   reading colour rather than the action green, which would read as a commitment. */
.btn.btn--ghost.site-banner__close {
  flex: 0 0 auto;
  align-self: center;
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn.btn--ghost.site-banner__close:hover {
  background: var(--color-text);
  color: var(--color-warn-surface);
}

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

.site-header {
  background: var(--color-surface);
  border-bottom: var(--accent-band) solid var(--color-accent);
}

.site-header__inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding-block: 18px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The wordmark is drawn into the page (app.core.templates.site_logo), so the two
   halves take their colour from the palette: the file states the original slate and
   red as the fallback, which is what an <img> of it and the og:image still use. */
.site-logo svg {
  display: block;
  /* The clean wordmark has no canvas around it, so 121px here is the same rendered
     size the 160px file with the beta mark had. */
  width: 121px;
  height: auto;
}

.site-logo .wordmark__dali {
  fill: var(--color-logo-brand);
}

.site-logo .wordmark__cc {
  fill: var(--color-logo-accent);
}

.site-logo:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

/* The edition next to the wordmark, a link to the changelog. Never inside the artwork:
   the logo file is the same in every edition, DALICC_EDITION_LABEL sets the text and
   DALICC_SHOW_VERSION_BADGE=false removes the chip. */
.version-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: -8px;
  padding: 2px 8px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  background: var(--c-surface-alt);
  color: var(--c-slate-muted);
  font-size: var(--size-label-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none;
}

/* The same accent the active navigation item uses, and never an underline: the pill
   already reads as one shape and a rule under it would cut the shape in half. */
.version-badge:hover,
.version-badge:focus-visible {
  border-color: var(--c-red);
  color: var(--c-red);
  text-decoration: none;
}

.version-badge:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* nav toggle: a checkbox so the menu opens without JavaScript */
.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.nav-toggle__label {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-white);
  color: var(--c-slate);
  font-family: var(--font-display);
  font-size: var(--size-ui-small);
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--c-slate);
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--c-slate);
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-toggle:focus-visible + .nav-toggle__label {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* The button site.js puts in the label's place: the label's look, a button's
   behaviour. */
.nav-toggle__button {
  line-height: inherit;
}

/* Above the drawer width the checkbox has no label to show and must not take a
   tab stop that shows nothing. */
@media (min-width: 1025px) {
  .nav-toggle {
    display: none;
  }
}

/* main menu */
.site-nav {
  flex: 1 1 auto;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* The label and its caret button sit on one line; the drop-down is positioned
   against the item, so the item is the positioning context.  The two stretch to the
   same height, which is what lets the red underline of the current group run under
   the label and the chevron as one line, the way it did when the chevron was a span
   inside the link. */
.site-nav__item {
  position: relative;
  margin: 0;
  display: flex;
  align-items: stretch;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-family: var(--font-nav);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  text-transform: var(--transform-nav);
  letter-spacing: var(--tracking-nav);
  color: var(--color-brand);
  white-space: nowrap;
}

/* The label and the chevron read as one entry, so they answer the pointer together:
   the item is hovered whichever of the two is under it.  The API pill is excluded
   because it turns white on red instead, and this rule would outrank it. */
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__item:hover > .site-nav__link:not(.site-nav__link--button) {
  color: var(--c-red);
  text-decoration: none;
}

.site-nav__link[aria-current="page"],
.site-nav__item--active > .site-nav__link {
  color: var(--c-red);
  box-shadow: inset 0 -3px 0 var(--c-red);
}

/* The API entry: a small pill, the shape and the colours the edition chip takes when
   it is hovered, so the one entry that leads to the machine side of DALICC reads as a
   button rather than as a sixth word in the row. */
.site-nav__link--button {
  padding: 5px 14px;
  border: 1px solid var(--c-red);
  border-radius: 999px;
  color: var(--c-red);
  font-size: calc(var(--size-ui) - 2px);
}

.site-nav__link--button:hover,
.site-nav__link--button:focus-visible {
  background: var(--c-red);
  color: var(--c-white);
}

.site-nav__link--button[aria-current="page"],
.site-nav__item--active > .site-nav__link--button {
  background: var(--c-red);
  color: var(--c-white);
  box-shadow: none;
}

/* What the chevron is depends on the device, and the two hover media queries further
   down decide.  Where a pointer can hover, the drop-down belongs to the pointer and
   the chevron is only the sign that the group has pages under it, so it answers
   nothing.  Where there is no hover, a touch screen at desktop width, it is the button
   that opens the drop-down without leaving the page.  The box below is the same in
   both, so the header is drawn identically either way. */
.site-nav__caret {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The chevron sits 6px after the label, exactly where it sat when it was a span
     inside the link, and the button ends where the link's own right padding would
     have ended: the negative margin cancels that padding, the 6px replaces the old
     flex gap and the 12px on the right repeats it.  The entry is therefore as wide
     as it always was.  A finger, not a mouse pointer, is what needs this button
     most, and it gets the full height of the row from the item's stretch, so it is a
     larger target than a box of its own could be without making the header taller. */
  margin-left: -12px;
  padding: 0 12px 0 6px;
  border: 0;
  background: none;
  color: var(--c-slate);
  line-height: 1;
  cursor: pointer;
}

.site-nav__caret::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.site-nav__item:hover > .site-nav__caret,
.site-nav__item--active > .site-nav__caret {
  color: var(--c-red);
}

/* The other half of the underline.  The caret overlaps the link's right padding, so
   the two lines meet and read as the single rule under the whole entry. */
.site-nav__item--active > .site-nav__caret {
  box-shadow: inset 0 -3px 0 var(--c-red);
}

.site-nav__caret:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

/* A mouse or a trackpad.  The drop-down follows the pointer and closes behind it, so
   the chevron has nothing left to do: it takes no click and no focus, and no click can
   leave a menu standing open after the pointer has moved on.  The pointer still lands
   on the item underneath it, so the entry stays hovered across the whole width of the
   label and the chevron together. */
@media (hover: hover) {
  .site-nav__caret {
    pointer-events: none;
  }
}

/* dropdown */
.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--c-white);
  border: 1px solid var(--c-rule-strong);
  border-top: 3px solid var(--c-red);
  box-shadow: var(--shadow-panel);
  z-index: 60;
  display: none;
}

.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub {
  display: block;
}

/* Escape closes the drop-down and puts the focus back inside the item, so
   :focus-within would hold it open again.  site.js marks the item as dismissed for as
   long as the focus stays in it; a pointer that can hover still overrides that, which
   is why the rule excludes :hover. */
.site-nav__item--dismissed:not(:hover) > .site-nav__sub {
  display: none;
}

/* No hover: a touch screen at desktop width.  The chevron is the way in, and this is
   the only place the open state applies, because it is the only place where nothing
   else would ever close the list again.  Dismissed is written out again for both of
   the states that would otherwise hold the list open: a tap leaves :hover on what was
   tapped and there is no pointer to move away, so the rule above would never take
   effect and Escape would close nothing.  Both selectors weigh the same as the two
   they have to beat and come after them. */
@media (hover: none) {
  .site-nav__item--open > .site-nav__caret {
    color: var(--c-red);
  }

  .site-nav__item--open > .site-nav__caret::before {
    transform: translateY(2px) rotate(-135deg);
  }

  .site-nav__item--open > .site-nav__sub {
    display: block;
  }

  .site-nav__item--dismissed:focus-within > .site-nav__sub,
  .site-nav__item--dismissed:hover > .site-nav__sub {
    display: none;
  }
}

.site-nav__sub li {
  margin: 0;
}

.site-nav__sub a {
  display: block;
  padding: 9px 16px;
  font-size: var(--size-ui-small);
  color: var(--c-slate);
}

.site-nav__sub a:hover,
.site-nav__sub a:focus-visible {
  background: var(--c-surface-alt);
  color: var(--c-red);
  text-decoration: none;
}

.site-nav__sub a[aria-current="page"] {
  color: var(--c-red);
  font-weight: 600;
}

/* social + call to action in the header */
.site-header__aside {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--size-label-small);
  line-height: 1;
}

/* Inline social marks (LinkedIn, GitHub): one box for every icon, coloured by the
   chip through currentColor so hover and focus need no extra rule. */
.social-link__mark {
  width: 16px;
  height: 16px;
  display: block;
}

/* The same links as drawer entries, for a phone only (see the 604px block). */
.site-nav__social {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-link:hover,
.social-link:focus-visible {
  background: var(--c-red-dark);
  color: var(--c-white);
  text-decoration: none;
}

/* ------------------------------------------------------------- breadcrumb */

.breadcrumb {
  margin: 0 0 28px;
  font-size: var(--size-body-small);
  color: var(--c-slate-muted);
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li + li::before {
  content: "»";
  margin-right: 6px;
  color: var(--c-slate-muted);
}

.breadcrumb [aria-current="page"] {
  color: var(--c-slate-muted);
}

/* ---------------------------------------------------------- section links */

/* The strip under the page header of a group landing page: the same entries as the
   group's drop-down, for a visitor who arrived from a search engine and never saw the
   menu.  `ui.section_links('Licenses')` renders it from the navigation itself, so the
   strip and the menu can never disagree. */
.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 30px;
}

.section-links__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-slate);
  font-size: var(--size-ui-small);
  line-height: 1.4;
}

.section-links__link:hover,
.section-links__link:focus-visible {
  border-color: var(--c-red);
  color: var(--c-red);
  text-decoration: none;
}

.section-links__link[aria-current="page"] {
  border-color: var(--c-red);
  color: var(--c-red);
  font-weight: 600;
}

/* --------------------------------------------------------- landing pages */

/* /licenses, /tools and /api: one card per page the group holds, in the same visual
   language as the call-to-action band on the home page (heading, dotted rule, a short
   paragraph, a red arrow link). */
.landing-cards {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 40px;
}

.landing-card {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.landing-card h2 {
  margin: 0 0 12px;
  font-size: var(--size-card-title-large);
}

.landing-card__rule {
  border: 0;
  border-top: 2px dotted var(--c-rule-strong);
  margin: 0 0 16px;
}

.landing-card p {
  font-size: var(--size-body-small);
}

.landing-card__more {
  margin: auto 0 0;
  padding-top: 4px;
}

/* A card that carries the primary action of the page (the interactive API
   documentation) spans the row and leads with a button. */
.landing-card--wide {
  grid-column: 1 / -1;
}

.landing-note {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 2px dotted var(--c-rule-strong);
  font-size: var(--size-body-small);
}

@media (max-width: 768px) {
  .landing-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- buttons */

/* Modifiers are written as `.btn.btn--x` so they outrank the element-qualified
   base selector below (`button.btn` would otherwise win on specificity). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-display);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}

.btn:hover {
  background: var(--c-green-hover);
  color: var(--c-white);
  text-decoration: none;
}

.btn:active {
  background: var(--c-green-active);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--c-pale-blue);
  color: var(--c-slate);
  cursor: not-allowed;
}

.btn.btn--ghost {
  background: transparent;
  color: var(--c-green);
  border: 2px solid var(--c-green);
  padding: 9px 20px;
}

.btn.btn--ghost:hover {
  background: var(--c-green);
  color: var(--c-white);
}

.btn.btn--slate {
  background: var(--c-slate-muted);
}

.btn.btn--slate:hover {
  background: var(--c-slate);
}

.btn.btn--small {
  padding: 7px 14px;
  font-size: var(--size-ui-small);
}

.btn.btn--ghost.btn--small {
  padding: 5px 12px;
}

/* arrow link, e.g. "→ Read more" */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-link);
  font-size: calc(var(--size-body) - 1px);
}

.arrow-link svg {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ forms */

label {
  display: inline-block;
  font-weight: 600;
  color: var(--c-slate-dark);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="date"],
select,
textarea {
  font-family: inherit;
  font-size: var(--size-body-small);
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  width: 100%;
  max-width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: var(--c-slate-muted);
  opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--c-pale-blue);
  color: var(--c-slate);
}

textarea {
  min-height: 170px;
  resize: vertical;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 6px;
}

.field__hint {
  display: block;
  margin-top: 6px;
  font-size: var(--size-caption);
  color: var(--c-slate-muted);
}

.field__error {
  display: block;
  margin-top: 6px;
  font-size: var(--size-caption);
  color: var(--c-red-dark);
  font-weight: 600;
}

.required-mark {
  color: var(--c-red);
}

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

.site-footer {
  flex: 0 0 auto;
  background: var(--c-slate);
  color: var(--c-white);
  text-align: center;
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-block: var(--band-pad);
  padding-inline: var(--gutter);
}

.site-footer__nav ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.site-footer__nav li {
  margin: 0;
}

.site-footer__nav a {
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--size-body);
  text-transform: uppercase;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--c-pale-blue);
}

.site-footer__funding {
  font-size: var(--size-ui-small);
  line-height: 1.6;
  color: var(--color-on-brand-soft);
  max-width: 760px;
  margin: 0 auto 18px;
}

.site-footer__funding a,
.site-footer__partners a {
  color: var(--c-white);
  text-decoration: underline;
}

.site-footer__partners {
  font-size: var(--size-caption);
  color: var(--color-on-brand-faint);
  max-width: 820px;
  margin: 0 auto;
}

/* --------------------------------------------------------- back to top */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: var(--c-slate-muted);
  color: var(--c-white);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 70;
  box-shadow: var(--shadow-float);
}

.back-to-top[data-visible="true"] {
  display: inline-flex;
}

.back-to-top:hover {
  background: var(--c-slate);
}

/* The red focus ring reads on white, not on the two coloured fields: on the slate
   footer it is 1.79:1 and on the mint hero 1.93:1. There the ring is drawn in the
   colour of the text on that field, and on the hero an ink line fills the 2px gap
   between the element and the ring, so the ring stands out from the mint and from a
   dark button alike. */
.site-footer :focus-visible {
  outline-color: var(--color-on-brand);
}

.hero :focus-visible {
  outline-color: var(--color-hero-text);
  box-shadow: 0 0 0 2px var(--color-text);
}

/* ------------------------------------------------------------ home page */

.hero {
  background: var(--color-hero);
  color: var(--color-hero-text);
}

/* No padding above or below: the Hype scene carries its own 500px of canvas and the
   copy beside it is centred against that, so a padding here only pushed the band open
   at the top and the bottom. */
.hero__inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding-block: 0;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.hero__figure {
  min-width: 0;
}

.hero__copy h1 {
  color: var(--color-hero-text);
  font-size: var(--size-hero);
  margin-bottom: 20px;
}

.hero__copy p {
  font-size: var(--size-lede);
  margin-bottom: 26px;
  max-width: 34em;
}

/* The call to action sits on the hero band, so it is a role of its own: the green of
   the rest of the site would disappear into the mint here, and a palette whose accent
   reads well on its own hero band puts the accent here instead. */
.hero .btn {
  background: var(--color-hero-button);
}

.hero .btn:hover {
  background: var(--color-hero-button-hover);
}

/* The Tumult Hype scene is 660x500 and needs JavaScript; below 768px (and with
   scripting off, see the <noscript> block in home.html) the still stands in. */
.hero__hype {
  display: block;
}

.hero__still {
  display: none;
}

/* The scene is a JavaScript animation, so the reduced-motion rule at the end of this
   file cannot stop it; under reduced motion the still stands in, and site.js does not
   load the scene at all (the same query as below, turned around). */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .hero__hype {
    display: none;
  }

  .hero__still {
    display: block;
  }
}

.hero__fallback {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  color: var(--color-hero-text);
}

.cta-band {
  background: var(--c-peach);
}

/* Six cards, two rows of three: everything the site offers, in the order a visitor
   works through it.  The row gap is smaller than the column gap because a dotted rule
   already closes each card. */
.cta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 40px;
}

.cta {
  display: flex;
  flex-direction: column;
}

.cta__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

.cta__head h2 {
  margin: 0;
  font-size: var(--size-h2);
}

.cta__icon {
  flex: 0 0 auto;
  color: var(--c-red);
}

.cta__rule {
  border: 0;
  border-top: 2px dotted var(--c-rule-strong);
  margin: 0 0 18px;
}

.cta p {
  color: var(--c-ink);
  font-size: var(--size-body-small);
}

/* The arrow links of a card sit at its foot, so the six cards line up across a row
   however long their paragraphs are. */
.cta__links {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* One sentence under the grid, about what an account adds. */
.cta-foot {
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 2px dotted var(--c-rule-strong);
  font-size: var(--size-body-small);
  color: var(--c-ink);
}

.numbers {
  background: var(--c-white);
}

.numbers .band__inner {
  padding-bottom: 24px;
}

.numbers__grid {
  display: grid;
  /* Four numbers since the jurisdiction ports are counted separately; auto-fit keeps
     them on one row while they fit and drops to two, then one, when they do not. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
  text-align: center;
}

.numbers__value {
  font-family: var(--font-display);
  font-size: var(--size-numeral);
  line-height: 1;
  color: var(--c-green);
  display: block;
}

.numbers__label {
  display: block;
  margin-top: 8px;
  font-size: var(--size-ui-small);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.numbers__note {
  margin: 22px 0 0;
  text-align: center;
  font-size: var(--size-caption);
  color: var(--c-slate-muted);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.news-card h3 {
  font-size: var(--size-card-title);
  color: var(--c-red);
  margin-top: 0;
}

.news-card h3 a {
  color: inherit;
}

.news-card__meta {
  color: var(--c-slate-muted);
  font-size: var(--size-ui-small);
  margin-bottom: 12px;
}

.news-card p {
  font-size: var(--size-body-small);
}

/* -------------------------------------------------------- content pages */

/* A reading measure for running text: at 1440 a paragraph of the 1024px column ran to
   about 113 characters a line, and a field hint to 136. Tables, forms and the grid of
   a page keep their width; only the lines of text stop at 72 characters. */
.l-main p,
.l-main li,
.field__hint {
  max-width: 72ch;
}

.prose {
  max-width: none;
}

/* Long-form reading measure, used by the blog. */
.prose--measure {
  max-width: 46em;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose img {
  border: 1px solid var(--c-rule);
}

.page-lede {
  font-size: var(--size-lede);
  color: var(--c-ink-soft);
  max-width: 54em;
  margin-bottom: 28px;
}

/* -------------------------------------------------------------- the blog */

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  align-items: start;
}

.post-teaser {
  margin-bottom: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--c-rule);
}

.post-teaser:last-child {
  border-bottom: 0;
}

.post-teaser h2 {
  font-size: var(--size-card-title-large);
  color: var(--c-red);
  margin: 0 0 8px;
}

.post-teaser h2 a {
  color: inherit;
}

.post-meta {
  color: var(--c-slate-muted);
  font-size: var(--size-ui-small);
  margin: 0 0 14px;
}

.post-meta a {
  color: var(--c-slate-muted);
  text-decoration: underline;
}

.sidebar__title {
  background: var(--c-slate-muted);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--size-ui);
  text-transform: uppercase;
  margin: 0;
  padding: 10px 16px;
}

.sidebar__box {
  border: 1px solid var(--c-rule-strong);
  border-top: 0;
  padding: 16px;
}

.sidebar__box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--size-ui-small);
}

.sidebar__box li {
  margin-bottom: 8px;
}

.sidebar__box li::before {
  content: "•";
  color: var(--c-slate-muted);
  margin-right: 8px;
}

.taglist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 24px 0 0;
}

.taglist li {
  margin: 0;
}

.tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  font-size: var(--size-label);
  color: var(--c-slate);
  background: var(--c-surface-alt);
}

a.tag:hover {
  border-color: var(--c-red);
  color: var(--c-red);
  text-decoration: none;
}

/* -------------------------------------------------- publications page */

.reference-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  counter-reset: reference;
}

.reference-list li {
  position: relative;
  padding-left: 42px;
  margin-bottom: 22px;
  counter-increment: reference;
}

.reference-list li::before {
  content: counter(reference);
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule-strong);
  color: var(--c-slate);
  font-family: var(--font-display);
  font-size: var(--size-caption);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reference-list__authors {
  font-weight: 700;
}

.reference-list__title {
  font-style: italic;
}

.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-list li {
  display: flex;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-rule);
  flex-wrap: wrap;
}

.event-list__year {
  flex: 0 0 60px;
  font-family: var(--font-display);
  font-size: var(--size-h4);
  color: var(--c-green);
}

.event-list__when {
  color: var(--c-slate-muted);
  font-size: var(--size-ui-small);
  width: 100%;
}

/* ------------------------------------------------------ license library */

.library-search {
  margin: 0 0 34px;
}

.library-search__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.library-search__field {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
}

.library-search__field svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-slate-muted);
  pointer-events: none;
}

.library-search__field input {
  padding-left: 40px;
}

.license-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid var(--c-rule-strong);
}

.license-list li {
  margin: 0;
  border: 1px solid var(--c-rule-strong);
  border-top: 0;
  background: var(--c-white);
}

.license-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 18px;
  color: var(--c-slate);
  font-weight: 700;
  flex-wrap: wrap;
}

.license-list a:hover,
.license-list a:focus-visible {
  background: var(--c-surface-alt);
  color: var(--c-red);
  text-decoration: none;
}

.license-list__id {
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  font-weight: normal;
  color: var(--c-slate-muted);
}

.result-count {
  color: var(--c-slate-muted);
  font-size: var(--size-ui-small);
  margin: 0 0 16px;
}

/* --------------------------------------------- jurisdiction ports in a list

   291 of the 344 records are a port of another license, so the listing shows the
   parents and folds the ports into a <details> under each one. No JavaScript: the
   disclosure widget is the element the browser already has. */

.library-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: var(--size-ui-small);
}

.license-list__note {
  margin: 0;
  padding: 0 18px 12px;
  font-size: var(--size-caption);
  color: var(--c-slate-muted);
}

.port-group {
  border-top: 1px dotted var(--c-rule-strong);
  padding: 0;
}

.port-group > summary {
  cursor: pointer;
  padding: 10px 18px;
  font-size: var(--size-caption);
  color: var(--c-slate-mid);
  list-style-position: inside;
}

.port-group > summary:hover,
.port-group > summary:focus-visible {
  color: var(--c-red);
  background: var(--c-surface-alt);
}

.port-list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 14px;
  display: grid;
  gap: 6px;
}

.port-list li {
  border: 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  background: none;
}

/* .license-list a is a flex row with a lot of padding; a port link inside the
   disclosure is a plain inline link again. */
.port-list a,
.license-list .port-list a {
  display: inline;
  padding: 0;
  font-weight: normal;
  color: var(--c-slate);
}

.port-list__meta {
  font-size: var(--size-label);
  color: var(--c-slate-muted);
}

@media (max-width: 604px) {
  /* Narrow enough that the country wraps under the title: separate the entries more
     than the two lines of one entry, so it stays obvious which country belongs to
     which port. */
  .port-list {
    gap: 14px;
  }

  .port-list li {
    display: block;
  }

  .port-list__meta {
    display: block;
    margin-top: 2px;
  }
}

.autocomplete__port {
  color: var(--c-slate-muted);
  font-weight: normal;
}

/* ------------------------------------------------------------ vocabulary */

.term-card {
  border: 1px solid var(--c-rule-strong);
  padding: 18px 20px;
  margin: 0 0 18px;
  background: var(--c-white);
  scroll-margin-top: 24px;
}

.term-card h3 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px dotted var(--c-rule-strong);
  font-size: var(--size-card-title);
}

.term-card__iri {
  font-family: var(--font-mono);
  font-size: var(--size-label-small);
  color: var(--c-slate-muted);
  word-break: break-all;
  margin: 0 0 10px;
}

.term-card__kind {
  display: inline-block;
  font-size: var(--size-label-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-on-brand);
  background: var(--c-slate-muted);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

.term-index {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 32px;
}

.term-index li {
  margin: 0;
}

.term-index a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--c-rule-strong);
  font-size: var(--size-caption);
  color: var(--c-slate);
  font-family: var(--font-mono);
}

.term-index a:hover {
  border-color: var(--c-green);
  color: var(--c-green);
  text-decoration: none;
}

/* ------------------------------------------------------------- dashboard */

.dashboard-empty {
  border: 2px dashed var(--c-rule-strong);
  padding: 36px 24px;
  text-align: center;
  color: var(--c-slate-muted);
}

.dashboard-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}

.dashboard-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
}

.dashboard-row .license-card__title {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--size-h4);
}

/* --------------------------------------------------------- account shell */

/* The signed-in area (site/account_base.html): the vertical navigation in the first
   column, the page in the second. Anything the page block renders is placed in the
   second column, so a page with more than one top-level element still lines up. */
.account-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  /* Six rows sized by the page alone, then one flexible row. The side bar spans all
     seven, and an item that crosses a flexible row does not size the rows before it,
     so what the side bar is taller than the page goes into the last row rather than
     under the first element. A notice above the page (the privacy banner of
     base.html) therefore no longer pushes the page below the whole side bar. */
  grid-template-rows: repeat(6, auto) 1fr;
  align-content: start;
  width: 100%;
  max-width: var(--wide-max);
  margin: 0 auto;
}

.account-shell > * {
  grid-column: 2;
  min-width: 0;
}

.account-shell__side {
  grid-column: 1;
  grid-row: 1 / span 7;
  align-self: start;
  padding-block: var(--band-pad) 0;
  padding-inline: var(--gutter) 0;
}

.account-nav__group + .account-nav__group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c-rule);
}

.account-nav__heading {
  margin: 0 0 6px;
  padding-left: 15px;
  font-family: var(--font-display);
  font-size: var(--size-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-slate-muted);
}

/* A section inside a group (the administration pages): a smaller label than the group
   heading, indented like the entries, so Accounts, Review and the rest read as parts of
   Administration rather than as groups of their own. */
.account-nav__subheading {
  margin: 14px 0 4px;
  padding-left: 15px;
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* The brand slate (6.78:1 on white): Margin Slate at this size was 3.27:1. */
  color: var(--color-brand);
}

.account-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-nav__list li {
  margin: 0;
}

.account-nav__link {
  display: block;
  padding: 7px 12px;
  border-left: 3px solid transparent;
  font-size: var(--size-body-small);
  color: var(--c-slate);
}

.account-nav__link:hover,
.account-nav__link:focus-visible {
  background: var(--c-surface-alt);
  color: var(--c-red);
  text-decoration: none;
}

.account-nav__link--active {
  border-left-color: var(--c-red);
  background: var(--c-surface-alt);
  color: var(--c-red);
  font-weight: 600;
}

/* Narrow screens get the same list inside a closed <details> above the page; wide
   screens get the column. Exactly one of the two is ever displayed. */
.account-shell__drawer {
  display: none;
}

.account-shell__drawer > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-white);
  color: var(--c-slate);
  font-family: var(--font-display);
  font-size: var(--size-ui-small);
  text-transform: uppercase;
  cursor: pointer;
}

.account-shell__drawer > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.account-shell__drawer[open] > summary {
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .account-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .account-shell > * {
    grid-column: 1;
  }

  .account-shell__side {
    grid-row: auto;
    padding-block: 28px 0;
    padding-inline: var(--gutter);
  }

  .account-shell__aside {
    display: none;
  }

  .account-shell__drawer {
    display: block;
  }
}

/* The delete link of the account page, set apart from the export by a hairline. */
.account-panel__danger {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: var(--size-body-small);
}

/* ----------------------------------------------------------- utilities */

/* The sizes win over any element rule: `input[type="text"]` sets `width: 100%` at a
   higher specificity, and the hidden username field of the password pair is exactly
   such an input. Without the !important it was drawn 1440 px wide and the page
   scrolled sideways. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-muted {
  color: var(--c-slate-muted);
}

.stack > * + * {
  margin-top: 18px;
}

/* --------------------------------------------------------- breakpoints */

/* Eight items in the main menu (About, Licenses, Tools, Reasoning, Blog,
   Documentation, API and either Log in or Account), five of them with a chevron next
   to the label, no longer fit next to the wordmark and the two social icons at
   the widest content column, so the menu is set a little tighter before the drawer
   takes over.  The header row and the list both wrap, so a menu that still does not
   fit drops to a second line instead of overflowing. */
@media (max-width: 1280px) {
  .site-header__inner {
    gap: 16px;
  }

  .site-nav__link {
    padding: 10px 8px;
    font-size: calc(var(--size-ui) - 1px);
  }

  .site-nav__caret {
    margin-left: -8px;
    padding: 0 8px 0 6px;
  }
}

@media (max-width: 1024px) {
  :root {
    --band-pad: 48px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__figure {
    order: 2;
  }

  /* Three cards of six are too narrow to read here, so the grid goes to two rows of
     three and then to three rows of two. */
  .cta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  /* The drawer: below this width the main menu is behind the Menu button. */
  .nav-toggle__label {
    display: inline-flex;
  }

  .site-header__inner {
    gap: 12px;
  }

  .site-nav {
    flex-basis: 100%;
    display: none;
  }

  .nav-toggle:checked ~ .site-nav {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--c-rule);
    padding-top: 8px;
  }

  /* In the drawer the group label and its children are stacked, so the item is a
     block again and the sub-list follows the label instead of sitting next to it. */
  .site-nav__item {
    display: block;
  }

  .site-nav__link {
    padding: 12px 4px;
  }

  .site-nav__link--button {
    padding: 5px 14px;
    margin: 6px 0 6px 4px;
  }

  /* The children are listed under the group label here, so there is nothing to open
     and the chevron would only point at a list that is already on the screen. */
  .site-nav__caret {
    display: none;
  }

  /* Dropdowns become plain expanded sub-lists in the drawer. */
  .site-nav__sub {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 8px 16px;
    margin-left: 4px;
  }

  /* The two social marks stay on the first row, to the right of the Menu button:
     only the Menu button keeps an automatic left margin, so the free space goes
     there and the icons follow it. */
  .site-header__aside {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --band-pad: 40px;
    --accent-band: 18px;
  }

  h1 {
    font-size: var(--size-h1-narrow);
  }

  h2 {
    font-size: var(--size-h2-narrow);
  }

  h3 {
    font-size: var(--size-h3-narrow);
  }

  /* On a phone the header is too narrow for the icons next to the Menu button, so
     they take a row of their own under the wordmark. */
  .site-header__aside {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-top: 4px;
  }

  .cta-grid,
  .news-grid,
  .numbers__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hero__copy h1 {
    font-size: var(--size-hero-narrow);
  }

  /* The scene's own canvas gave the band its room above the heading; the still that
     replaces it here does not, so the heading would touch the red band. */
  .hero__inner {
    padding-block: 28px 0;
  }
}

@media (max-width: 604px) {
  :root {
    --gutter: 16px;
    --band-pad: 32px;
  }

  body {
    font-size: calc(var(--size-body) - 1px);
  }

  .site-logo svg {
    width: 100px;
  }

  /* One header row on a phone: the social marks leave the header and are the last
     two entries of the drawer instead. */
  .site-header__aside {
    display: none;
  }

  .site-nav__social {
    display: block;
  }

  .reference-list li {
    padding-left: 0;
  }

  .reference-list li::before {
    position: static;
    display: inline-flex;
    margin-right: 8px;
    vertical-align: middle;
  }
}

@media (max-width: 450px) {
  h1 {
    font-size: calc(var(--size-h1-narrow) - 4px);
  }

  .hero__copy h1 {
    font-size: calc(var(--size-hero-narrow) - 4px);
  }

  .back-to-top {
    width: 44px;
    height: 44px;
    right: 12px;
    bottom: 12px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header__aside,
  .site-nav,
  .account-shell__side,
  .back-to-top,
  .site-footer__nav {
    display: none !important;
  }

  .account-shell {
    display: block;
  }

  body {
    /* paper is set in points, whatever size the screen scale chose */
    font-size: 12pt;
  }
}