/* ---------------------------------------------------------------------------
   Svalefelt design system — tokens lifted from Svalefelt.AI/style-guide.md.
   Light theme (Message Gateway palette) is the only theme on the public site.
   --------------------------------------------------------------------------- */

@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-light-webfont.woff2') format('woff2');   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-regular-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-medium-webfont.woff2') format('woff2');  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-bold-webfont.woff2') format('woff2');    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-black-webfont.woff2') format('woff2');   font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-light.woff2') format('woff2');   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-medium.woff2') format('woff2');  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-bold.woff2') format('woff2');    font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --color-primary: #D40000;
  --color-primary-light: #ff1a1a;
  --color-primary-dark: #a00000;

  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffd600;
  --color-info: #007CB2;

  --color-bg-page: #ffffff;
  --color-bg-surface: #f8f8f8;
  --color-bg-hover: #f2f2f2;
  --color-bg-selected: #e2e2e2;
  --color-bg-input: #ffffff;
  --color-text: #444444;
  --color-text-strong: #111111;
  --color-text-secondary: #666666;
  --color-text-muted: #888888;
  --color-border: #aaaaaa;
  --color-border-light: #cccccc;

  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 21px;

  --spacing-xs: 4px;  --spacing-sm: 8px;  --spacing-md: 12px;
  --spacing-lg: 16px; --spacing-xl: 20px; --spacing-xxl: 24px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;

  --shadow-sm: 0 1px 0 1px rgba(0,0,0,.04);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.1);

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  --header-height: 55px;
  --wrap: 1180px;
}

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

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

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text);
  font: 400 var(--font-size-base)/1.65 var(--font-body);
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text-strong); line-height: 1.25; margin: 0 0 var(--spacing-md); }
h1 { font-weight: 500; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.01em; }
h2 { font-weight: 600; font-size: clamp(20px, 2.6vw, 26px); }
h3 { font-weight: 600; font-size: var(--font-size-lg); }
h4 { font-weight: 600; font-size: var(--font-size-md); }
p  { margin: 0 0 var(--spacing-lg); }

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

img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--color-border-light); margin: var(--spacing-xxl) 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--spacing-xl); }
.muted { color: var(--color-text-secondary); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--spacing-lg); top: var(--spacing-sm); background: #fff; padding: var(--spacing-sm) var(--spacing-md); z-index: 1000; }

/* --- Header: the 2px red rule is the signature element -------------------- */
.site-header {
  position: sticky; top: 0; z-index: 999;
  background: var(--color-bg-surface);
  border-bottom: 2px solid var(--color-primary);
}
.header-inner { display: flex; align-items: center; gap: var(--spacing-xl); min-height: var(--header-height); }
.brand { display: flex; align-items: center; padding-block: var(--spacing-xs); }
.brand img { width: 180px; height: auto; display: block; }

.site-nav { display: flex; gap: var(--spacing-xl); margin-left: auto; }
.site-nav > a, .nav-item > a {
  font-family: var(--font-heading); font-weight: 500; font-size: var(--font-size-sm);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text); padding: var(--spacing-sm) 0;
  border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.site-nav > a:hover, .nav-item > a:hover { color: var(--color-primary); text-decoration: none; }
.site-nav > a.active, .nav-item > a.active { color: var(--color-text-strong); border-bottom-color: var(--color-primary); }

/* --- Tiles: coloured art block on the left, text on the right ---------------
   Used by the Products menu and the front page. The art block shows two letters
   until products have images. */
.tile {
  display: flex; min-height: 104px; overflow: hidden;
  border: 2px solid var(--color-border-light); border-radius: var(--radius-md);
  color: inherit; background: var(--color-bg-page);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tile:hover, .tile:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-md); text-decoration: none; }
.tile-art {
  flex: 0 0 120px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; font: 600 30px/1 var(--font-heading); letter-spacing: -0.02em;
}
.tile-body { display: flex; flex-direction: column; flex: 1; padding: var(--spacing-md) var(--spacing-lg); }
.tile-title { font: 600 var(--font-size-md)/1.3 var(--font-heading); color: var(--color-text-strong); margin-bottom: var(--spacing-xs); }
.tile-text { flex: 1; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-secondary); }
.tile-arrow { align-self: flex-end; color: var(--color-primary); font-size: var(--font-size-lg); line-height: 1; transition: transform var(--transition-fast); }
.tile:hover .tile-arrow { transform: translateX(4px); }
.tile .pill-row { margin-bottom: var(--spacing-xs); }
.tile-foot { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--spacing-xs); }
.tile-art-nova   { background: linear-gradient(135deg, #1273ad 0%, #0b5c8a 100%); }
.tile-art-aptic  { background: linear-gradient(135deg, #85399b 0%, #6b2d7d 100%); }
.tile-art-dark   { background: linear-gradient(135deg, #444 0%, #111 100%); }

/* --- Big links: documentation and consulting, as links rather than boxes ---- */
.big-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-lg); }
.big-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-sm) var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border-light); }
.big-links a {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-lg);
  color: var(--color-text-strong); text-decoration: none;
}
.big-links a:hover { color: var(--color-primary); }
.big-links a span { color: var(--color-primary); display: inline-block; transition: transform var(--transition-fast); }
.big-links a:hover span { transform: translateX(4px); }
.big-links .muted { font-size: var(--font-size-sm); }
/* No rules, and a couple of blank lines of air above: for the front page, where the links
   follow the product tiles without a heading of their own. */
.big-links-bare { margin-top: calc(var(--spacing-xxl) * 2); gap: var(--spacing-md); }
.big-links-bare li { border-bottom: 0; padding-bottom: 0; }

/* --- Banner tiles: the monogram lockup at product-card size ------------------
   Strip with the initials on the left, name and tagline in the middle, swallow on the right.
   The strip is real text turned on its side, so it stays selectable and translatable. */
.banner-tile {
  display: flex; align-items: stretch; overflow: hidden;
  min-height: 104px; color: inherit; background: var(--color-bg-surface);
  border: 3px solid var(--color-text-strong); border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.banner-tile:hover, .banner-tile:focus-visible { box-shadow: var(--shadow-md); text-decoration: none; }
.banner-strip {
  flex: 0 0 34px; display: grid; place-items: center;
  background: var(--color-text-strong); color: #fff;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 var(--font-size-lg)/1 var(--font-heading); letter-spacing: .04em;
}
.banner-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--spacing-md) var(--spacing-lg); min-width: 0; }
.banner-name { font: 600 var(--font-size-md)/1.25 var(--font-heading); color: var(--color-text-strong); }
.banner-text { font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text-secondary); }
.banner-tile .pill-row { margin-top: var(--spacing-xs); }
.banner-bird { flex: 0 0 auto; align-self: center; width: 46px; height: auto; margin-right: var(--spacing-lg); }

/* A second strip, in green, for products that are free. Sits beside the initials. */
.banner-free {
  flex: 0 0 22px; display: grid; place-items: center;
  background: var(--color-success); color: #fff;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 var(--font-size-xs)/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase;
}

/* Announced, not yet released: the same strip in blue. */
.banner-soon { background: var(--color-info); }

/* Four arrangements, one per product, to compare side by side. */
/* 1. Swallow left, tag right. */
.bt-bird-left .banner-bird { order: -1; margin: 0 0 0 var(--spacing-lg); }
.bt-bird-left .banner-strip { order: 3; }
.bt-bird-left .banner-free { order: 2; }
/* 2. Swallow and tag both left, in the order the logo uses. */
.bt-both-left .banner-bird { order: -2; margin: 0 var(--spacing-md) 0 var(--spacing-lg); }
.bt-both-left .banner-strip { order: -1; }
/* 3. Tag only, a little wider and larger. */
.bt-tag-only .banner-bird { display: none; }
.bt-tag-only .banner-strip { flex-basis: 44px; font-size: var(--font-size-xl); }

/* --- Products mega menu: a panel of product tiles under the header ----------
   Opens on hover and on keyboard focus, pure CSS. Closing is delayed a moment so the
   pointer can cross the header's red rule into the panel without it snapping shut. */
.nav-item { display: flex; align-items: center; align-self: stretch; }
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  padding-block: var(--spacing-xxl);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 200ms;
  transition-delay: 120ms, 120ms, 320ms;
}
.has-mega:hover > .mega, .has-mega:focus-within > .mega {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 80ms, 80ms, 0s;
}
.has-mega:hover > a, .has-mega:focus-within > a { color: var(--color-primary); }

.mega-scroll { max-height: min(72vh, 680px); overflow-y: auto; }
.mega-heading { font: 600 var(--font-size-sm)/1 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin: var(--spacing-lg) 0 var(--spacing-md); }
.mega-heading:first-child { margin-top: 0; }
.tile-more { text-align: center; margin-top: var(--spacing-lg); font-weight: 500; }
.tile-more a { color: var(--color-primary); }
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); }
.mega-foot { display: flex; justify-content: center; gap: var(--spacing-xxl); margin-top: var(--spacing-xl); font-weight: 500; }
.mega-foot a { color: var(--color-primary); }

.burger { display: none; background: none; border: 0; cursor: pointer; margin-left: auto; padding: var(--spacing-sm); }
.burger span { display: block; width: 22px; height: 2px; background: var(--color-text-strong); margin: 4px 0; transition: var(--transition-fast); }

/* --- Hero ----------------------------------------------------------------- */
.hero { background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-light); padding-block: clamp(40px, 7vw, 80px); }
.hero h1 { max-width: 20ch; }

/* A photo behind the banner. It is anchored right, where a subject such as a swallow in flight
   should sit; a pale wash from the left keeps the heading readable whatever the photo. */
.hero-has-photo { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 10vw, 128px); }
.hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; }
.hero-has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(248,248,248,.97) 0%, rgba(248,248,248,.9) 38%, rgba(248,248,248,.35) 68%, rgba(248,248,248,0) 100%);
}
.hero .lede { font-size: clamp(16px, 2vw, 20px); color: var(--color-text-secondary); max-width: 60ch; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-xl); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--spacing-sm);
  font-family: var(--font-body); font-weight: 500; font-size: var(--font-size-base);
  padding: 10px var(--spacing-xl); border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-light); color: #fff; }
.btn-secondary { background: var(--color-bg-page); color: var(--color-text-strong); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-bg-hover); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-text-strong); }
.btn-sm { padding: 6px var(--spacing-md); font-size: var(--font-size-sm); }

/* --- Sections and cards --------------------------------------------------- */
.section { padding-block: clamp(36px, 6vw, 64px); }
.section-head { margin-bottom: var(--spacing-xxl); }
.section-head p { color: var(--color-text-secondary); max-width: 65ch; margin: 0; }

.grid { display: grid; gap: var(--spacing-xl); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.tile-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--spacing-lg); }
.tile-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--spacing-lg); }
.section-title { font-size: var(--font-size-lg); margin-bottom: var(--spacing-lg); }
.section-title + .grid { margin-bottom: var(--spacing-xxl); }

.card {
  background: var(--color-bg-surface); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md); padding: var(--spacing-xl);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
a.card { display: block; color: inherit; }
a.card:hover { background: var(--color-bg-hover); border-color: var(--color-border); text-decoration: none; }
.card-accent { border-left: 3px solid var(--color-primary); }
.card-foot { margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.card h3 { margin-bottom: var(--spacing-sm); }
.card p { margin-bottom: 0; color: var(--color-text-secondary); font-size: var(--font-size-base); }

/* --- Badges / pills ------------------------------------------------------- */
.pill {
  display: inline-block; font-size: var(--font-size-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px var(--spacing-sm); border-radius: var(--radius-lg);
  background: var(--color-bg-selected); color: var(--color-text-secondary);
}
.pill-nova   { background: #e8f1f8; color: #0b5c8a; }
.pill-aptic  { background: #f3e9f6; color: #6b2d7d; }
.pill-free   { background: rgba(40,167,69,.14); color: #1d7a32; }
.pill-licensed { background: rgba(212,0,0,.1); color: var(--color-primary-dark); }
.pill-soon   { background: rgba(0,124,178,.12); color: var(--color-info); }
.docs-soon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); color: var(--color-text-secondary); margin-bottom: var(--spacing-xl); }
.pill-new { background: var(--color-primary); color: #fff; }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }

/* --- Download picker ------------------------------------------------------ */
.download-pick { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.btn-download { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px var(--spacing-xl); }
.dl-meta { font-size: var(--font-size-xs); font-weight: 400; opacity: .75; }

.release { padding-block: var(--spacing-xl); border-bottom: 1px solid var(--color-border-light); }
.release:last-child { border-bottom: 0; }
.release-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.release-head h3 { margin: 0; }
.release .release-table { margin-top: var(--spacing-sm); }
.release .release-table td { font-size: var(--font-size-sm); }
.release .hash { display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.release-summary { max-width: 74ch; margin: 0 0 var(--spacing-md); color: var(--color-text-secondary); }
.release-details { margin-bottom: var(--spacing-lg); }
.release-details > summary { cursor: pointer; width: fit-content; margin-bottom: var(--spacing-md); color: var(--color-primary); font-size: var(--font-size-base); }
.release-details > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.release-notes { max-width: 74ch; margin-bottom: var(--spacing-lg); padding-left: var(--spacing-lg); border-left: 2px solid var(--color-border-light); }
.release-notes > :last-child { margin-bottom: 0; }
.release-notes h4 { margin-top: var(--spacing-lg); font-size: var(--font-size-base); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.release-notes h4:first-child { margin-top: 0; }
.release-notes h5, .release-notes h6 { margin-top: var(--spacing-md); font-size: var(--font-size-base); }

/* --- Product sales page --------------------------------------------------- */
.product-hero {
  background: var(--color-bg-surface);
  border-bottom: 2px solid var(--color-primary);
  padding-block: clamp(36px, 6vw, 72px) 0;
  text-align: center;
  overflow: hidden;
}
.product-hero .pill-row { justify-content: center; margin-bottom: var(--spacing-md); }
.product-hero h1 { max-width: 18ch; margin-inline: auto; }
.product-hero .lede {
  font-size: clamp(17px, 2.2vw, 22px); font-weight: 300;
  color: var(--color-text-secondary); max-width: 56ch; margin: 0 auto var(--spacing-xl);
}
.product-hero .hero-actions { justify-content: center; margin-bottom: clamp(28px, 5vw, 52px); }
.product-hero .hero-actions:has(+ .hero-note) { margin-bottom: var(--spacing-md); }
.hero-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 clamp(28px, 5vw, 52px); }

.hero-shot { margin: 0; }
.hero-shot img {
  display: block; width: 100%; max-width: 1100px; margin-inline: auto;
  border: 1px solid var(--color-border); border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -2px 28px rgba(0,0,0,.14);
}

.highlight-grid .card { padding: var(--spacing-lg) var(--spacing-xl); }
.highlight-grid .card p { color: var(--color-text); }

.prose-centred { margin-inline: auto; }

.tour-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; }
.theme-switch { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.theme-switch button {
  font: 500 var(--font-size-sm) var(--font-body);
  padding: 6px var(--spacing-md); border: 0; background: var(--color-bg-page);
  color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast);
}
.theme-switch button:hover { background: var(--color-bg-hover); }
.theme-switch button.on { background: var(--color-primary); color: #fff; }

.tour { display: grid; gap: clamp(40px, 6vw, 80px); }
.tour-step { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
/* Alternate the image side so a long tour does not read as a single column of pictures. */
.tour-step:nth-child(even) figure { order: 2; }
.tour-step figure { margin: 0; }
.tour-step img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); background: var(--color-bg-surface);
}

/* Terminal windows: the tour of a command-line product. One dark look, whatever the page does. */
.term-win {
  background: #0b0f13; border: 1px solid #2a333d; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-md); text-align: left;
}
.term-bar {
  display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md);
  background: #171d24; border-bottom: 1px solid #2a333d;
  font: 400 var(--font-size-xs) var(--font-mono); color: #74828f;
}
.term-bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2a333d; }
.term-bar b { font-weight: 400; margin-left: var(--spacing-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-win pre {
  margin: 0; padding: var(--spacing-lg); overflow-x: auto;
  font: 400 13px/1.55 var(--font-mono); color: #d3dbe3; tab-size: 4;
}
.term-win pre:focus-visible { outline: 2px solid var(--color-info); outline-offset: -2px; }
.t-prompt, .t-dim { color: #74828f; }
.t-cmd { color: #fff; font-weight: 500; }
.t-ok { color: #7fd492; }
.t-warn { color: #ebbb5e; }
.t-fail { color: #f2796c; }
.t-info { color: #7db7f0; }
.tour-step figure { min-width: 0; }
/* A session needs the width more than its caption does, whichever side it lands on. */
@media (min-width: 861px) {
  .tour-step:nth-child(even):has(.term-win) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}
/* In the hero the window stands on the red rule, as a screenshot does. */
.hero-term .term-win {
  max-width: 820px; margin-inline: auto; border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: 0 -2px 28px rgba(0,0,0,.14);
}

.tour-text h3 { margin-bottom: var(--spacing-xs); }
.tour-caption { color: var(--color-primary); font-weight: 500; margin-bottom: var(--spacing-md); }
.tour-text .prose { font-size: var(--font-size-base); max-width: none; }
.tour-text .prose p:last-child { margin-bottom: 0; }

.closing { border-top: 1px solid var(--color-border-light); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: var(--spacing-xs) 0; color: var(--color-text-secondary); font-size: var(--font-size-base); }

@media (max-width: 860px) {
  .tour-step { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  /* Stacked, the heading and caption introduce the picture, so the picture comes after them. */
  .tour-step figure { order: 2; }
}

/* --- Topic jump list ------------------------------------------------------ */
.topic-jump { margin-bottom: var(--spacing-xxl); }

/* --- Knowledge hub sections ---------------------------------------------- */
.hub-section + .hub-section { margin-top: clamp(32px, 5vw, 56px); }
.hub-section h2 { scroll-margin-top: calc(var(--header-height) + var(--spacing-xl)); }

/* --- Document index list -------------------------------------------------
   The hub is a contents page, not a blog: one line per article, no excerpt. */
.doc-list { border-top: 1px solid var(--color-border-light); margin-bottom: var(--spacing-xxl); }
.doc-row {
  display: flex; align-items: baseline; gap: var(--spacing-md);
  padding: 11px var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-light);
  color: inherit;
  transition: background var(--transition-fast);
}
.doc-row:hover { background: var(--color-bg-hover); text-decoration: none; }
.doc-title {
  font-family: var(--font-heading); font-weight: 500;
  color: var(--color-text-strong); transition: color var(--transition-fast);
}
.doc-row:hover .doc-title { color: var(--color-primary); }
.doc-meta {
  margin-left: auto; display: flex; gap: var(--spacing-lg);
  font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap;
}
.doc-meta > span { min-width: 0; }
.doc-date { min-width: 6.5em; text-align: right; }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-muted); align-items: center; }

/* --- Filters -------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.filters a {
  font-size: var(--font-size-sm); padding: 5px var(--spacing-md);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-lg);
  color: var(--color-text-secondary); background: var(--color-bg-page);
}
.filters a:hover { background: var(--color-bg-hover); text-decoration: none; }
.filters a.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* --- Article body --------------------------------------------------------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.prose { max-width: 74ch; font-size: var(--font-size-md); }
.prose h2 { margin-top: var(--spacing-xxl); padding-top: var(--spacing-sm); }
.prose h3 { margin-top: var(--spacing-xl); }
.prose ul, .prose ol { padding-left: var(--spacing-xl); margin-bottom: var(--spacing-lg); }
.prose li { margin-bottom: var(--spacing-xs); }
.prose blockquote {
  margin: var(--spacing-xl) 0; padding: var(--spacing-md) var(--spacing-xl);
  border-left: 3px solid var(--color-primary); background: var(--color-bg-surface);
  color: var(--color-text-secondary);
}
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--color-bg-selected); padding: 2px 5px; border-radius: var(--radius-sm); }
.prose pre { background: #1a1a1e; color: #e0e0e0; padding: var(--spacing-lg); border-radius: var(--radius-md); overflow-x: auto; font-size: var(--font-size-sm); line-height: 1.55; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-lg); font-size: var(--font-size-base); }
.prose th, .prose td { text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border-light); }
.prose th { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-strong); }
.table-scroll { overflow-x: auto; }

/* --- Table of contents ---------------------------------------------------- */
.toc { position: sticky; top: calc(var(--header-height) + var(--spacing-xl)); font-size: var(--font-size-sm); }
.toc h4 { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); border-bottom: 2px solid var(--color-primary); padding-bottom: var(--spacing-xs); }
.toc a { display: block; padding: 3px 0; color: var(--color-text-secondary); }
.toc a:hover { color: var(--color-primary); text-decoration: none; }
.toc .lvl-3 { padding-left: var(--spacing-md); }

/* --- Downloads ------------------------------------------------------------ */
.release-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.release-table th { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 2px solid var(--color-primary); }
.release-table td { padding: var(--spacing-md); border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
.release-table tr:hover td { background: var(--color-bg-hover); }
.hash { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); word-break: break-all; }

.attachments { display: grid; gap: var(--spacing-sm); margin: var(--spacing-xl) 0; }
.attachment {
  display: flex; align-items: center; gap: var(--spacing-md);
  padding: var(--spacing-md); border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm);
  background: var(--color-bg-surface); color: inherit;
}
.attachment:hover { background: var(--color-bg-hover); text-decoration: none; }
.attachment .name { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-strong); }
.attachment .size { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--spacing-lg); max-width: 620px; }
.subscribe { max-width: 760px; gap: var(--spacing-sm); }
.subscribe-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: var(--spacing-md); align-items: end; }
.subscribe-submit .btn { white-space: nowrap; }
.subscribe .hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0; }
@media (max-width: 680px) { .subscribe-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--spacing-xs); }
.field label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-strong); }
.field input, .field textarea, .field select {
  font: 400 var(--font-size-base) var(--font-body);
  padding: 9px var(--spacing-md); background: var(--color-bg-input);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-text); width: 100%;
}
.field input:hover, .field textarea:hover { border-color: #888; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-info); box-shadow: 0 0 0 3px rgba(0,124,178,.12); }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.field-error { color: var(--color-error); font-size: var(--font-size-sm); }
.notice { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-sm); margin-bottom: var(--spacing-xl); }
.notice-ok { background: rgba(40,167,69,.1); border-left: 3px solid var(--color-success); color: #1d7a32; }
.notice-err { background: rgba(220,53,69,.08); border-left: 3px solid var(--color-error); color: #a32430; }

/* --- Search --------------------------------------------------------------- */
.search { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); max-width: 520px; }
.search input { flex: 1; font: 400 var(--font-size-base) var(--font-body); padding: 9px var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.search input:focus { outline: none; border-color: var(--color-info); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--color-bg-surface); border-top: 2px solid var(--color-primary); margin-top: clamp(48px, 8vw, 96px); padding-top: var(--spacing-xxl); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--spacing-xxl); padding-bottom: var(--spacing-xxl); }
.footer-logo { width: 150px; margin-bottom: var(--spacing-md); }
.site-footer h4 { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); }
.site-footer a { display: block; padding: 3px 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.site-footer a:hover { color: var(--color-primary); text-decoration: none; }
.site-footer p { font-size: var(--font-size-sm); margin: 0; }
.copyright { display: flex; justify-content: space-between; align-items: center; padding-block: var(--spacing-md); border-top: 1px solid var(--color-border-light); font-size: var(--font-size-sm); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .toc { position: static; order: -1; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--spacing-md); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .doc-row { flex-wrap: wrap; gap: var(--spacing-xs); }
  .doc-meta { margin-left: 0; width: 100%; gap: var(--spacing-md); }
  .doc-date { min-width: 0; text-align: left; }

  .burger { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--color-bg-surface);
    border-bottom: 2px solid var(--color-primary); padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-lg);
  }
  .site-nav.open { display: flex; }
  .site-nav > a, .nav-item > a { padding: var(--spacing-md) 0; border-bottom: 1px solid var(--color-border-light); width: 100%; }
  .nav-item { display: block; }
  .mega { display: none; }
  .tile-art { flex-basis: 84px; font-size: 24px; }
  .hero-has-photo::before { background: rgba(248,248,248,.86); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  .brand img { width: 150px; }
}

/* --- View transitions: cross-fade page changes where supported ------------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Utilities, so no page needs a style attribute (the CSP allows none) ------- */
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.measure-70 { max-width: 70ch; }
.mx-auto { margin-inline: auto; }
.centered { justify-content: center; }
.toc-line { padding: 3px 0; }
/* The honeypot field: off-screen for people, present for bots. */
.offscreen { position: absolute; left: -9999px; }
.section-surface { background: var(--color-bg-surface); border-top: 1px solid var(--color-border-light); }
.section-surface-block { border-block: 1px solid var(--color-border-light); }
.error-page { text-align: center; padding-block: clamp(48px, 10vw, 120px); }
.error-code { font-family: var(--font-heading); font-size: 64px; font-weight: 700; color: var(--color-primary); margin: 0; }