:root {
  color-scheme: light dark;
  --ak-bg: #ffffff;
  --ak-surface: #f6f8fa;
  --ak-text: #1f2328;
  --ak-muted: #59636e;
  --ak-border: #d1d9e0;
  --ak-focus: #0969da;
  --ak-green: #116329;
  --ak-red: #c21c2c;
  --ak-yellow: #7d4e00;
  --ak-blue: #0a5cc2;
  --ak-purple: #6639ba;
  --ak-green-tint: rgba(17, 99, 41, 0.12);
  --ak-red-tint: rgba(194, 28, 44, 0.12);
  --ak-yellow-tint: rgba(125, 78, 0, 0.12);
  --ak-blue-tint: rgba(10, 92, 194, 0.12);
  --ak-purple-tint: rgba(102, 57, 186, 0.12);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: var(--text-body-medium, 14px); --fs-lg: 16px; --fs-xl: 18px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px;
  --font-ui: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif);
  --font-code: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
}
@media (prefers-color-scheme: dark) {
  :root {
  --ak-bg: #0d1117;
  --ak-surface: #151b23;
  --ak-text: #f0f6fc;
  --ak-muted: #9198a1;
  --ak-border: #3d444d;
  --ak-focus: #4493f8;
  --ak-green: #3fb950;
  --ak-red: #ff7b72;
  --ak-yellow: #d29922;
  --ak-blue: #58a6ff;
  --ak-purple: #bc8cff;
  --ak-green-tint: rgba(63, 185, 80, 0.15);
  --ak-red-tint: rgba(255, 123, 114, 0.15);
  --ak-yellow-tint: rgba(210, 153, 34, 0.15);
  --ak-blue-tint: rgba(88, 166, 255, 0.15);
  --ak-purple-tint: rgba(188, 140, 255, 0.15);
  }
}
:root {
  --c-bg: var(--background-color-default, var(--ak-bg));
  --c-surface: var(--background-color-muted, var(--ak-surface));
  --c-text: var(--text-color-default, var(--ak-text));
  --c-muted: var(--text-color-muted, var(--ak-muted));
  --c-border: var(--border-color-default, var(--ak-border));
  --c-focus: var(--color-focus-outline, var(--ak-focus));
  --c-green: var(--true-color-green, var(--ak-green));
  --c-red: var(--true-color-red, var(--ak-red));
  --c-yellow: var(--true-color-yellow, var(--ak-yellow));
  --c-blue: var(--true-color-blue, var(--ak-blue));
  --c-purple: var(--ak-purple);
  --c-green-tint: var(--true-color-green-muted, var(--ak-green-tint));
  --c-red-tint: var(--true-color-red-muted, var(--ak-red-tint));
  --c-yellow-tint: var(--true-color-yellow-muted, var(--ak-yellow-tint));
  --c-blue-tint: var(--true-color-blue-muted, var(--ak-blue-tint));
  --c-purple-tint: var(--ak-purple-tint);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--leading-body-medium, 20px);
}
.mono, code { font-family: var(--font-code); font-size: 0.95em; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-xs); }
h1 { font-size: var(--fs-xl); line-height: 1.3; margin: 0; font-weight: 600; }
h2 { font-size: var(--fs-lg); margin: 0; font-weight: 600; }
h3 { font-size: var(--fs-sm); margin: 0; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
p { margin: var(--sp-1) 0; }
ul { margin: 0; padding-left: 20px; }
.plain { list-style: none; padding: 0; margin: 0; }

/* Header */
.bar { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.headline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); }
.cwd { margin: 0; color: var(--c-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.message { margin: 0; font-size: var(--fs-sm); }
.message:empty { display: none; }
.message.warn { font-weight: 600; border: 2px solid var(--c-yellow); background: var(--c-yellow-tint); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }

/* Controls */
button {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 5px var(--sp-3);
  min-height: 30px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
button:hover:not(:disabled) { border-color: var(--c-muted); }
button.primary { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-bg); }
button.primary:hover:not(:disabled) { border-color: var(--c-text); }
button.secondary { background: transparent; }
button.link { background: transparent; border: none; padding: 0 2px; min-height: 0; color: var(--c-blue); text-decoration: underline; font-family: var(--font-code); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
input[type="text"], input[type="number"], input:not([type]) {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 4px var(--sp-2);
  min-height: 30px;
}
input[type="checkbox"] { accent-color: var(--c-blue); }
button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible, a:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* Badges: a glyph and a text label, never colour alone */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--r-pill);
  padding: 1px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  color: var(--tone, var(--c-muted));
  background: var(--tone-tint, transparent);
  border: 1px solid var(--tone, var(--c-border));
}
.badge::before { font-weight: 700; }
.badge.lg { font-size: var(--fs-sm); padding: 2px 10px; line-height: 20px; }

.tone-green { --tone: var(--c-green); --tone-tint: var(--c-green-tint); }
.tone-red { --tone: var(--c-red); --tone-tint: var(--c-red-tint); }
.tone-yellow { --tone: var(--c-yellow); --tone-tint: var(--c-yellow-tint); }
.tone-blue { --tone: var(--c-blue); --tone-tint: var(--c-blue-tint); }
.tone-purple { --tone: var(--c-purple); --tone-tint: var(--c-purple-tint); }
.tone-neutral { --tone: var(--c-muted); --tone-tint: transparent; }
.glyph-check::before { content: "\2713" / ""; }
.glyph-cross::before { content: "\2715" / ""; }
.glyph-bang::before { content: "!" / ""; }
.glyph-dot::before { content: "\25CF" / ""; }
.glyph-ring::before { content: "\25CB" / ""; }
.glyph-half::before { content: "\25D0" / ""; }
.glyph-arrow::before { content: "\21B7" / ""; }
.glyph-info::before { content: "i" / ""; font-style: italic; }
.glyph-wait::before { content: "\2026" / ""; }
.glyph-ask::before { content: "?" / ""; }

/* Layout pieces */
.section { margin-top: var(--sp-6); }
.section-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.count { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 0 var(--sp-2); }
.lede { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3); }
.cards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.record-id { font-family: var(--font-code); font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.record-title { font-weight: 600; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.chip { display: inline-flex; gap: 6px; align-items: baseline; max-width: 100%; font-size: var(--fs-xs); border: 1px solid var(--c-border); background: var(--c-surface); border-radius: var(--r-md); padding: 2px var(--sp-2); overflow-wrap: anywhere; }
.chip-kind { font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.callout { border-radius: var(--r-lg); padding: var(--sp-3); margin: var(--sp-3) 0 0; border: 1px solid var(--tone, var(--c-border)); background: var(--tone-tint, var(--c-surface)); }
.callout-title { font-weight: 600; color: var(--tone, var(--c-text)); display: flex; gap: 6px; align-items: center; }
.callout p, .callout li { color: var(--c-text); }
.empty { text-align: center; padding: var(--sp-6) var(--sp-4); border: 1px dashed var(--c-border); border-radius: var(--r-lg); color: var(--c-muted); }
.empty strong { display: block; color: var(--c-text); font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
details > summary { cursor: pointer; color: var(--c-muted); font-size: var(--fs-sm); }
details[open] > summary { margin-bottom: var(--sp-2); }
footer { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); font-size: var(--fs-xs); color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* The portal's own rules. The generator writes app.css as the shared canvas theme
   (vendor/canvas-theme.mjs THEME_CSS) followed by this file, as the canvases do. */

.wrap { max-width: 1120px; margin: 0 auto; }
a { color: var(--c-blue); }
a:hover { text-decoration-thickness: 2px; }
.site-title { font-size: var(--fs-xl); }
.site-title .home { color: var(--c-text); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.nav a { display: inline-block; padding: 4px var(--sp-3); border-radius: var(--r-pill); border: 1px solid transparent; text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.nav a:hover { border-color: var(--c-border); }
.nav a[aria-current="page"] { background: var(--c-blue-tint); border-color: var(--c-blue); font-weight: 600; }
#banner:empty { display: none; }
#banner .callout { margin-top: var(--sp-3); }
main { margin-top: var(--sp-4); min-height: 40vh; }
.view-title { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); overflow-wrap: anywhere; }
.view-title:focus { outline: none; }
.lede { max-width: 72ch; }

/* Issues (banner and notes) */
.issues { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.issue { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: baseline; font-size: var(--fs-sm); }
.issue-path { color: var(--c-muted); overflow-wrap: anywhere; }
.issue-message { flex-basis: 100%; overflow-wrap: anywhere; }
.notes { margin: var(--sp-3) 0; }

/* Overview */
.status-counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.status-count .badge { font-size: var(--fs-sm); padding: 3px 10px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; }
.filter-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; flex: 1 1 18em; }
input[type="search"] {
  font: inherit; font-size: var(--fs-sm); color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 4px var(--sp-2); min-height: 32px;
  flex: 1 1 auto; min-width: 0; max-width: 36em;
}
input[type="search"]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.record-card .record-title { display: block; margin-top: var(--sp-1); color: var(--c-text); text-decoration: none; }
.record-card .record-title:hover { text-decoration: underline; }
.record-link { font-weight: 600; }
.chips.inline { margin-top: 0; }

/* Record */
.record-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--sp-3); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); align-items: baseline; }
.facts dt { color: var(--c-muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.record-body { border-top: 1px solid var(--c-border); padding-top: var(--sp-3); max-width: 80ch; font-size: var(--fs-lg); line-height: 1.6; overflow-wrap: anywhere; }
.record-body p { margin: var(--sp-3) 0; }
.record-body .md-h { margin: var(--sp-6) 0 var(--sp-2); line-height: 1.3; color: var(--c-text); text-transform: none; letter-spacing: 0; }
.record-body .md-h1 { font-size: 22px; }
.record-body .md-h2 { font-size: 19px; }
.record-body .md-h3 { font-size: 17px; }
.record-body .md-h4, .record-body .md-h5, .record-body .md-h6 { font-size: 15px; }
.record-body .md-list { margin: var(--sp-2) 0; padding-left: 24px; }
.record-body .md-list li { margin: 2px 0; }
.record-body .md-list li > p { margin: 2px 0; }
.md-quote { margin: var(--sp-3) 0; padding: var(--sp-1) var(--sp-3); border-left: 3px solid var(--c-border); color: var(--c-muted); }
.md-code { position: relative; margin: var(--sp-3) 0; }
.md-code pre { margin: 0; padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow-x: auto; font-size: var(--fs-sm); line-height: 1.5; }
.md-code-lang { display: inline-block; font-size: var(--fs-xs); color: var(--c-muted); font-family: var(--font-code); margin-bottom: 2px; }
.record-body code { background: var(--c-surface); border-radius: var(--r-sm); padding: 0 3px; font-size: 0.88em; }
.record-body pre code { background: transparent; padding: 0; }
.md-table-wrap { overflow-x: auto; margin: var(--sp-3) 0; }
.md-table { border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.45; }
.md-table th, .md-table td { border: 1px solid var(--c-border); padding: 4px var(--sp-2); text-align: left; vertical-align: top; }
.md-table th { background: var(--c-surface); font-weight: 600; }
.md-table .align-center { text-align: center; }
.md-table .align-right { text-align: right; }
.md-link.fragment { cursor: pointer; text-decoration: underline; color: var(--c-blue); }
.md-link-text { text-decoration: underline dotted; }

/* Graph */
.filters { border: 1px solid var(--c-border); border-radius: var(--r-md); margin: 0 0 var(--sp-3); padding: 2px var(--sp-2) var(--sp-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.filters legend { padding: 0 var(--sp-1); font-size: var(--fs-xs); color: var(--c-muted); }
.toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
.legend-list { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.swatch { display: inline-block; vertical-align: middle; overflow: visible; }
.zoom-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.zoom-bar button { min-width: 32px; padding: 3px var(--sp-2); }
.hint { font-size: var(--fs-xs); color: var(--c-muted); margin-left: var(--sp-2); }
.graph-frame { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
.graph-frame.h-s { height: 240px; }
.graph-frame.h-m { height: 360px; }
.graph-frame.h-l { height: 480px; }
.graph-frame.h-xl { height: 640px; }
.graph-frame:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.graph-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; }
.graph-svg.dragging { cursor: grabbing; }
.node { cursor: pointer; outline: none; transition: opacity 120ms ease; }
/* An opaque base under every box: the status tints are translucent, and an edge passing
   behind a record must not show through its label. The base is never dimmed. */
.node-base { fill: var(--c-bg); stroke: none; }
.node-box { fill: var(--c-bg); stroke: var(--c-border); stroke-width: 1.25; }
.node-stripe { stroke: none; }
.node.selected .node-box { stroke-width: 3; }
.node.neighbor .node-box { stroke-width: 2.25; }
/* Dim the box, never the label or the focus ring: a dimmed record must still read. */
.node.dim .node-box, .node.dim .node-stripe { opacity: 0.3; }
.node.dim .node-id { fill: var(--c-muted); }
.node.dim:focus-visible .node-box { opacity: 1; }
.node:focus-visible .node-box { stroke: var(--c-focus); stroke-width: 3.5; }
.node-id { font-family: var(--font-code); font-size: 12px; font-weight: 600; fill: var(--c-text); }
.node-title { font-family: var(--font-ui); font-size: 12px; fill: var(--c-muted); }
.node-box.status-accepted { fill: var(--c-green-tint); stroke: var(--c-green); }
.node-box.status-proposed { fill: var(--c-blue-tint); stroke: var(--c-blue); }
.node-box.status-draft { fill: var(--c-bg); stroke: var(--c-muted); stroke-dasharray: 4 3; }
.node-box.status-rejected { fill: var(--c-red-tint); stroke: var(--c-red); }
.node-box.status-superseded { fill: var(--c-purple-tint); stroke: var(--c-purple); }
.node-box.status-deprecated { fill: var(--c-yellow-tint); stroke: var(--c-yellow); }
.node-box.status-unknown { fill: var(--c-bg); stroke: var(--c-border); }
.node-stripe.status-accepted { fill: var(--c-green); }
.node-stripe.status-proposed { fill: var(--c-blue); }
.node-stripe.status-draft { fill: var(--c-muted); }
.node-stripe.status-rejected { fill: var(--c-red); }
.node-stripe.status-superseded { fill: var(--c-purple); }
.node-stripe.status-deprecated { fill: var(--c-yellow); }
.node-stripe.status-unknown { fill: var(--c-border); }
.edge { stroke: var(--c-muted); stroke-width: 1.25; fill: none; opacity: 0.55; }
.edge-supersedes { stroke-width: 2; opacity: 0.8; }
.edge-relatesTo { stroke-dasharray: 6 4; }
.edge-conflictsWith { stroke: var(--c-red); stroke-dasharray: 2 3; }
.arrow { fill: var(--c-muted); }
.summary-lede { font-size: var(--fs-md); }

/* Queue and paths */
.queue-row .facts { margin: var(--sp-2) 0 0; }
.path-result { margin: var(--sp-3) 0; }
.path-route { overflow-wrap: anywhere; }
.path-entry .path { font-weight: 600; overflow-wrap: anywhere; margin: 0 0 var(--sp-2); }
.path-group { margin-top: var(--sp-3); }
.path-group h3 { margin-bottom: var(--sp-1); }
.path-decision { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); padding: 2px 0; }
.path-decision-title { overflow-wrap: anywhere; }
.path-suggestions h3 { margin: var(--sp-4) 0 var(--sp-2); }
.path-list { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.path-list button.link { text-align: left; overflow-wrap: anywhere; }

@media (max-width: 520px) {
  body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .hint { flex-basis: 100%; margin: var(--sp-1) 0 0; }
  .graph-frame.h-xl { height: 520px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
}