/*
  DiagView demo pages, shared styles.
  Calm neutral pages with one accent colour (the accent picker sets --accent),
  a navy dark mode, and small mono figure labels on diagram cards.

  Page skeleton:
    header.nav > .wrap > .brand | .crumbs | .nav-links | .toggles
    main > .page-hero | .section > .wrap > .section-head + content
    footer.footer
*/

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --accent: #ea580c;
  --diagram-accent: var(--accent);

  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #15181d;
  --ink-2: #353b45;
  --muted: #5b6472;
  --line: #e2e5ea;
  --line-strong: #cdd2d9;
  --dot: #d5d9e0;
  --canvas: #fbfbfc;
  --code-bg: #f1f3f6;

  /* Mermaid colours. demo-runtime.js writes rules that read these into
     each diagram's own <style>, so the fullscreen copy follows them too. */
  --note-bg: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --note-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --pie-1: var(--accent);
  --pie-2: #aab4c3;
  --pie-3: #d7dce4;
  --pie-ink: #15181d;
  --styled-fill-opacity: 1;
  --styled-ink: #15181d;
  /* Boxes of the 2,500 node stress grid */
  --stress-fill: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --stress-line: color-mix(in srgb, var(--accent) 70%, var(--line-strong));
  /* Soft node tints (class X tintRose) that still tell nodes apart */
  --tint-rose: #fce7ef;
  --tint-rose-line: #e39ab8;
  --tint-amber: #fcf0d4;
  --tint-amber-line: #d9ad55;
  --tint-indigo: #e6e9fc;
  --tint-indigo-line: #98a3e6;
  --tint-teal: #daf1ec;
  --tint-teal-line: #6dbfae;
  --tint-green: #e0f3e4;
  --tint-green-line: #7fc390;
  --tint-blue: #e0edfb;
  --tint-blue-line: #86b1e3;

  /* Accent tuned for text, so small links stay readable on both themes */
  --accent-ink: color-mix(in oklab, var(--accent) 78%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Archivo", "Schibsted Grotesk", system-ui, sans-serif;

  --nav-h: 56px;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --r: 10px;
  --r-sm: 6px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dark {
  --bg: #0b1f3a;
  --surface: #0f2746;
  --ink: #eaf2ff;
  --ink-2: #c3d3ea;
  --muted: #9fb3d1;
  --line: #1d3a60;
  --line-strong: #2d4d78;
  --dot: #1f3d64;
  --canvas: #0d2240;
  --code-bg: #081a31;
  --pie-1: color-mix(in srgb, var(--accent) 86%, #000);
  --pie-2: #3b5c8c;
  --pie-3: #56739c;
  --pie-ink: #f3f7ff;
  --styled-fill-opacity: 0.22;
  --styled-ink: var(--ink);
  --stress-fill: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --stress-line: color-mix(in srgb, var(--accent) 80%, var(--ink));
  --tint-rose: #37294a;
  --tint-rose-line: #a8648c;
  --tint-amber: #35321f;
  --tint-amber-line: #ad8a44;
  --tint-indigo: #232f66;
  --tint-indigo-line: #7482d6;
  --tint-teal: #143d47;
  --tint-teal-line: #4b9f90;
  --tint-green: #183e37;
  --tint-green-line: #58a36f;
  --tint-blue: #173a66;
  --tint-blue-line: #5c8fd0;
  --accent-ink: color-mix(in oklab, var(--accent) 62%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Transitions only after first paint, set by demo-runtime.js */
body.ready,
body.ready * {
  transition-property: background-color, border-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* The page background swaps at once. DiagView reads it on a theme change,
   and a colour caught halfway fails its text contrast check. */
body.ready {
  transition-property: color;
}

a {
  color: inherit;
}

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

h1,
h2,
h3,
h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p {
  text-wrap: pretty;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.brand-mark {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--ink);
}
.brand-mark .n {
  fill: currentColor;
}
.brand-mark .e {
  stroke: var(--accent);
  stroke-width: 1.6;
}

/* Breadcrumb on inner pages: Demo hub / Page name */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
  min-width: 0;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}
.crumbs a:hover {
  color: var(--ink);
}
.crumbs .sep {
  color: var(--line-strong);
}
.crumbs [aria-current] {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.nav-links a {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.nav-links a:hover {
  color: var(--ink);
  background: var(--line);
}

/* Right side of the nav. setupDiagViewToggle() puts its button first. */
.toggles {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn,
.toggle-btn {
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 0.85rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.icon-btn {
  width: 32px;
  padding: 0;
}
.icon-btn:hover,
.toggle-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.icon-btn svg,
.toggle-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Theme button: the runtime fills in a sun and a moon */
.theme-btn .moon,
.dark .theme-btn .sun {
  display: none;
}
.dark .theme-btn .moon {
  display: block;
}

/* DiagView on/off button added by setupDiagViewToggle() */
#dv-toggle-btn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}
.dark #dv-toggle-btn::before {
  background: #4ade80;
}
#dv-toggle-btn[data-state="off"]::before {
  background: var(--muted);
}

/* Accent picker: a round swatch over an invisible colour input */
.swatch {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.swatch:hover {
  border-color: var(--line-strong);
}
.swatch::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.swatch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.swatch:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Labelled select, used for the Security level */
.select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--muted);
}
/* WebKit draws its own grey box inside the pill unless appearance is off */
.select select {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  padding: 0 22px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 0.85rem var(--font);
  cursor: pointer;
}
/* The chevron that appearance: none takes away, in the text colour.
   Clicks pass through it to the select. */
.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border: solid var(--ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.select select:focus-visible {
  outline: none;
}
.select:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.select option {
  background: var(--surface);
  color: var(--ink);
}

/* ── Buttons, tags, links ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.95rem/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--ink-2);
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

/* Small pill: diagram type chips on cards, "New" markers */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tag-new {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.link {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link:hover {
  text-decoration-color: currentColor;
}

/* Small mono caption: "Fig. 1.2", "layout: header" */
.fig {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-ligatures: none;
}
.fig b {
  color: var(--accent-ink);
  font-weight: 500;
}

/* ── Code and keys ────────────────────────────────────────── */
code,
kbd,
pre {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

:not(pre) > code {
  font-size: 0.86em;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--code-bg);
  /* A chip is one token. Browsers break after its hyphens, so keep it
     whole and let it move to the next line instead. */
  white-space: nowrap;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Code window with a file name bar and a copy button ([data-copy]) */
.code {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--code-bg);
  overflow: hidden;
}
.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.82rem;
  color: var(--muted);
}
.code-bar .file {
  font-family: var(--mono);
  font-size: 0.8rem;
}
.copy-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  font: 500 0.8rem var(--font);
  cursor: pointer;
}
.copy-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.code pre {
  padding: 20px;
  overflow-x: auto;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--ink-2);
  tab-size: 2;
  scrollbar-color: var(--line-strong) transparent;
}
.code .c {
  color: var(--muted);
  font-style: italic;
}
.code .kw {
  color: var(--ink);
  font-weight: 600;
}
.code .t {
  color: var(--ink);
}
.code .a {
  color: var(--accent-ink);
}
.code .v {
  color: #0f7a55;
}
.code .b {
  color: #b45309;
}
.dark .code .v {
  color: #6ee7b7;
}
.dark .code .b {
  color: #fbbf24;
}

/* Boxed keyboard panel: a "Keyboard" label cell and a grid of keys */
.kbd-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.kbd-panel > .fig {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--line);
}
.kbd-panel ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 8px;
  padding: 12px 16px;
}
.kbd-panel li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 0.86rem;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Grouped keyboard reference: key on the right, action on the left */
.shortcuts {
  --n: 4;
}
.shortcuts .grp {
  font-size: 1rem;
  margin-bottom: 10px;
}
.shortcuts dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-flow: dense;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 16px;
}
.shortcuts dt {
  grid-column: 2;
  justify-self: end;
}
.shortcuts dd {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.93rem;
}

/* Spec table: mono labels on the left, plain values on the right */
.spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.spec dt,
.spec dd {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.spec dt {
  padding-right: 24px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec dd {
  color: var(--ink-2);
}

/* ── Sections ─────────────────────────────────────────────── */
.section {
  padding-top: clamp(64px, 9vw, 112px);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px 48px;
  align-items: end;
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.section-head p {
  justify-self: end;
  max-width: 52ch;
  text-align: right;
  color: var(--muted);
}

/* Title block on inner pages, with the layout switcher on the right */
.page-hero {
  padding: clamp(28px, 4vw, 44px) 0 clamp(20px, 2.5vw, 28px);
}
.page-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 40px;
  align-items: end;
}
.page-hero h1 {
  grid-column: 1 / -1;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.page-hero p {
  max-width: 60ch;
  font-size: 1.1rem;
  color: var(--ink-2);
}

/* Layout switcher. The runtime marks the link for the current page. */
.modes-nav {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  justify-self: start;
  overflow-x: auto;
  scrollbar-width: none;
}
.modes-nav a {
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.modes-nav a:hover {
  color: var(--ink);
}
.modes-nav a[aria-current] {
  background: var(--ink);
  color: var(--bg);
}

/* Info columns split by hairlines */
.cols {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
}
.cols > * {
  min-width: 0;
  padding: 24px 28px 8px 0;
}
.cols > * + * {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.cols h3,
.cols h4 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.cols p {
  font-size: 0.95rem;
  color: var(--muted);
}

/* ── Canvas: faint dots under diagrams only ──────────────── */
.canvas,
.diagram,
.mermaid,
.chart,
.stress-test,
.card .diagview-wrapper,
.stage .diagview-wrapper {
  background-color: var(--canvas);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 16px 16px;
  background-position: -8px -8px;
}

/* ── Diagram cards ────────────────────────────────────────────
   .grid is a six column track. A card spans half a row by default,
   .wide takes a full row and .third a third. Set --fig-chapter on the
   grid ("1", "2") and each card header gets "Fig. 1.n" in front.
   Set --stage-h on a card to size its diagram area. */
.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 20px;
  counter-reset: fig;
  /* The cards space the rows with their bottom margin, see below */
  margin-bottom: -20px;
}
.grid > .card {
  grid-column: span 3;
  counter-increment: fig;
}
.grid > .card.wide {
  grid-column: 1 / -1;
}
.grid > .card.third {
  grid-column: span 2;
}

.card {
  --stage-h: 320px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

/* Cards in one row share its row lines, so the header and caption
   dividers line up even when one title or caption runs longer. A card
   with no caption gives its diagram the caption row too. */
.grid > .card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  /* A row gap on the grid would add to the diagram row in Firefox, which
     spreads the gap difference over a subgrid's inner rows */
  margin-bottom: 20px;
}
/* A content-visibility: auto wrapper in a subgrid row keeps its 500px
   placeholder height in Safari, even on screen */
.grid > .card .diagview-wrapper {
  content-visibility: visible;
}
.grid > .card > :nth-child(2):last-child {
  grid-row: span 2;
}

.card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.grid .card-header::before {
  content: "Fig. " var(--fig-chapter, "1") "." counter(fig);
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-header h3 {
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* A long title wraps. The chip stays level with its first line. */
.card-header > .tag {
  align-self: start;
}

/* Positioned so it paints over the diagram wrapper, which is positioned
   too. Otherwise the wrapper can cover the top line by a pixel. */
.card-note {
  position: relative;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Diagram hosts before DiagView wraps them, and with DiagView off */
.diagram,
.mermaid,
.chart,
.stress-test {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 300px;
  padding: 20px;
  overflow: hidden;
}
.card > .diagram,
.card > .mermaid,
.card > .chart,
.card > .stress-test {
  flex: 1;
}
.diagram svg,
.mermaid svg,
.chart svg,
.stress-test svg {
  max-width: 100%;
  height: auto;
}
/* An SVG with only a viewBox shrinks to nothing in a subgrid row in
   Safari. Other browsers already draw it at full width. */
.diagram svg:not([width]),
.chart svg:not([width]) {
  width: 100%;
}
.stress-test svg {
  width: auto;
  max-height: 260px;
}
/* Hides the Mermaid source text until it renders */
.mermaid:not([data-processed]) {
  color: transparent;
}

/* ── DiagView inside cards and the hero stage ─────────────────
   The wrapper brings its own border, margin and padded viewport. Inside a
   card that doubles every edge, so the card keeps the frame and the
   viewport becomes the canvas. The library's toolbar keeps its buttons. */
.card .diagview-wrapper,
.stage .diagview-wrapper {
  flex: 1;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.card .diagview-controls,
.stage .diagview-controls {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
/* Floating buttons sit on the canvas with no bar behind them, so they
   get no bar line either */
.card .diagview-controls-floating,
.stage .diagview-controls-floating {
  border-bottom: 0;
}
/* The library dims the title to 60%, too faint on the white bar */
.card .diagview-label,
.stage .diagview-label {
  color: var(--muted);
  opacity: 1;
}
.card .diagview-viewport,
.stage .diagview-viewport {
  height: var(--stage-h, 320px);
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.card .diagview-viewport > *,
.stage .diagview-viewport > * {
  height: 100%;
  min-height: 0;
  padding: 22px;
  background: none;
}
.card .diagview-viewport svg,
.stage .diagview-viewport svg {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

/* A framed figure with a mono caption bar on top */
.stage {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.stage-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
/* Each caption stays whole. On a small phone the second one moves to
   its own line. */
.stage-top .fig {
  white-space: nowrap;
}

/* Hand-written SVGs that draw lines in mid grey picked for a white page */
.dark .diagram [stroke="#64748b"],
.dark .diagram [stroke="#4a5568"] {
  stroke: var(--muted);
}
.dark .diagram [fill="#64748b"],
.dark .diagram [fill="#4a5568"] {
  fill: var(--muted);
}

/* The 2,500 node grid follows the page accent */
#stress-node-layer rect {
  fill: var(--accent);
  fill-opacity: 0.1;
  stroke: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  margin-top: clamp(80px, 10vw, 128px);
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration: none;
}
.footer a:hover {
  color: var(--ink);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .grid > .card,
  .grid > .card.third {
    grid-column: span 3;
  }
  .grid > .card.third:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .grid > .card,
  .grid > .card.third,
  .grid > .card.wide {
    grid-column: 1 / -1;
  }
  .cols {
    --n: 2 !important;
  }
  .cols > :nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .cols > :nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  /* Rows now have a line between them, so the space under the text
     above a line matches the space over the title below it */
  .cols > * {
    padding-bottom: 21px;
  }
  .shortcuts dl:last-child {
    margin-bottom: 0;
  }
  .section-head,
  .page-hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-head p {
    justify-self: start;
    text-align: left;
  }
  .nav-links {
    display: none;
  }
}

@media (max-width: 700px) {
  .kbd-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .kbd-panel > .fig {
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .kbd-panel ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  :root {
    --nav-h: 52px;
  }
  .nav .wrap {
    gap: 10px;
  }
  .cols {
    --n: 1 !important;
  }
  /* The gap under the text above a divider matches the gap over the
     title below it */
  .cols > * {
    padding: 20px 0 18px !important;
    border-left: 0 !important;
  }
  .cols > * + * {
    border-top: 1px solid var(--line);
  }
  .select .lbl {
    display: none;
  }
  .card {
    --stage-h: 260px;
  }
  .diagram,
  .mermaid,
  .chart,
  .stress-test {
    min-height: 240px;
    padding: 14px;
  }
  .card .diagview-viewport > *,
  .stage .diagview-viewport > * {
    padding: 14px;
  }
  /* The code samples keep one attribute or option per line. This size
     fits those lines on a 390 px phone. */
  .code pre {
    padding: 16px;
    font-size: 0.78rem;
  }
  /* A CDN address is longer than the screen, so it wraps inside the box
     after a slash (the <wbr> marks). Copy still gets the whole line. */
  .code pre .url {
    white-space: pre-wrap;
  }
}

/* Small phones: the header row has room for the toggles only when the
   DiagView on/off button drops its first word. Screen readers still get it. */
@media (max-width: 400px) {
  /* A narrower label gap keeps the longest option names on one line */
  .spec dt {
    padding-right: 16px;
  }
  .toggle-btn .lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* The longest code lines still fit a 320 px phone, at 11.2 px */
@media (max-width: 360px) {
  .code pre {
    padding: 12px;
    font-size: 0.7rem;
  }
}

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