/* Astrolabe — component styles. Every value comes from tokens.css (--name); nothing here re-declares a token. */

/* ---------- base ---------- */
.al-root, .al-shell {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.al-root *, .al-shell *, .al-root *::before, .al-shell *::before, .al-root *::after, .al-shell *::after { box-sizing: border-box; }
.al-icon { width: var(--icon-size); height: var(--icon-size); flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.al-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.al-root, .al-shell) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* shared button */
.al-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-3);
  font: 500 13px/18px var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.al-btn:hover { background: var(--surface-hover); }
.al-btn[aria-expanded="true"], .al-btn:active { background: var(--surface-active); }
.al-iconbtn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  color: var(--ink-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.al-iconbtn:hover { color: var(--ink); background: var(--surface-hover); }
.al-iconbtn[aria-pressed="true"] { color: var(--ink); background: var(--surface-active); }
.al-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  font: 600 11px/18px var(--font-sans); letter-spacing: .02em;
  color: var(--on-accent); background: var(--accent); border-radius: var(--radius-full);
}
.al-badge[data-tone="neutral"] { color: var(--ink-muted); background: var(--surface-active); }

/* ---------- AppShell ---------- */
.al-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr) var(--toc-width);
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas: "header header header" "nav main toc";
  max-width: var(--wide-width); margin: 0 auto;
}
.al-shell > .al-header { grid-area: header; }
.al-shell > .al-nav { grid-area: nav; position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); overflow-y: auto; border-right: 1px solid var(--border); }
.al-shell > main { grid-area: main; min-width: 0; padding: var(--space-12) var(--space-8) var(--space-24); }
.al-shell > main > .al-article { max-width: var(--article-width); margin: 0 auto; }
.al-shell > .al-toc { grid-area: toc; position: sticky; top: var(--header-height); align-self: start; max-height: calc(100vh - var(--header-height)); overflow-y: auto; padding: var(--space-12) var(--space-4) var(--space-8); }
.al-scrim { display: none; }
@media (max-width: 1199px) {
  .al-shell { grid-template-columns: var(--nav-width) minmax(0, 1fr); grid-template-areas: "header header" "nav main"; }
  .al-shell > .al-toc { display: none; }
}
@media (max-width: 859px) {
  .al-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main"; }
  .al-shell > .al-nav { position: fixed; z-index: var(--z-drawer); left: 0; top: var(--header-height); bottom: 0; height: auto; width: min(var(--nav-width), 86vw); background: var(--bg); transform: translateX(-100%); transition: transform .2s ease; }
  .al-shell[data-nav-open] > .al-nav { transform: none; box-shadow: var(--shadow-raised); }
  .al-shell[data-nav-open] > .al-scrim { display: block; position: fixed; inset: var(--header-height) 0 0 0; z-index: calc(var(--z-drawer) - 1); background: #00000066; }
  .al-shell > main { padding: var(--space-8) var(--space-4) var(--space-16); }
}
@media (prefers-reduced-motion: reduce) { .al-shell > .al-nav { transition: none; } }

/* ---------- SiteHeader ---------- */
.al-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--header-height); padding: 0 var(--space-4);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.al-header-menu { display: none; }
@media (max-width: 859px) { .al-header-menu { display: inline-grid; } .al-header .al-theme-label { display: none; } }
.al-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; font: 650 15px/20px var(--font-sans); letter-spacing: -.01em; }
.al-brand-mark { width: 24px; height: 24px; flex: none; color: var(--ink); }
.al-brand-mark .al-needle { fill: var(--accent); }
.al-crumb { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.al-crumb a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-crumb a:hover { color: var(--ink); }
.al-crumb [aria-current] { color: var(--ink); }
.al-crumb-sep { color: var(--ink-subtle); }
.al-header-spacer { flex: 1; }
.al-header-actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 639px) { .al-crumb .al-crumb-owner, .al-crumb .al-crumb-sep, .al-header .al-repo-link span { display: none; } }

/* ---------- SiteNav ---------- */
.al-nav { padding: var(--space-6) var(--space-3) var(--space-8); font: 400 14px/20px var(--font-sans); }
.al-nav-title { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font: 500 13px/18px var(--font-sans); color: var(--ink-subtle); }
.al-nav ol { list-style: none; margin: 0; padding: 0; }
.al-nav ol ol { margin: 2px 0 var(--space-1) var(--space-3); padding-left: var(--space-2); border-left: 1px solid var(--border); }
.al-nav li { margin: 1px 0; }
.al-nav a, .al-nav summary {
  position: relative; display: flex; align-items: baseline; gap: var(--space-2);
  padding: 6px var(--space-3); border-radius: var(--radius-sm);
  color: var(--ink-muted); text-decoration: none; cursor: pointer;
}
.al-nav a:hover, .al-nav summary:hover { color: var(--ink); background: var(--surface-hover); }
.al-nav a[aria-current="page"] { color: var(--ink); font-weight: 550; background: var(--accent-soft); }
.al-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent-mark); }
.al-nav-num { font: 450 12px/20px var(--font-mono); color: var(--ink-subtle); min-width: 2.2em; }
.al-nav summary { list-style: none; }
.al-nav summary::-webkit-details-marker { display: none; }
.al-nav summary::after { content: ""; margin-left: auto; align-self: center; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.al-nav details[open] > summary::after { transform: rotate(45deg); }
.al-nav-foot { margin-top: var(--space-6); padding: var(--space-3); border-top: 1px solid var(--border); font: 400 12px/16px var(--font-sans); color: var(--ink-subtle); }

/* ---------- PageToc ---------- */
.al-toc { font: 400 13px/18px var(--font-sans); }
.al-toc-title { margin: 0 0 var(--space-3); font: 500 13px/18px var(--font-sans); color: var(--ink); }
.al-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.al-toc li > a { position: relative; display: block; padding: 4px 0 4px var(--space-3); color: var(--ink-muted); text-decoration: none; }
.al-toc li li > a { padding-left: calc(var(--space-3) + var(--space-3)); }
.al-toc ol ol { border: 0; }
.al-toc a:hover { color: var(--ink); }
.al-toc a[aria-current="location"] { color: var(--ink); }
.al-toc a[aria-current="location"]::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 2px; background: var(--accent-mark); }
.al-toc-meta { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); display: grid; gap: var(--space-2); font-size: 12px; color: var(--ink-subtle); }
.al-toc-meta a { color: var(--ink-muted); text-decoration: none; display: inline-flex; gap: var(--space-1); align-items: center; }
.al-toc-meta a:hover { color: var(--ink); }

/* ---------- ThemeSelector ---------- */
.al-theme { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); }
.al-theme button {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-full);
  font: 500 12px/16px var(--font-sans); color: var(--ink-muted); background: transparent; cursor: pointer;
}
.al-theme button:hover { color: var(--ink); background: var(--surface-hover); }
.al-theme button[aria-checked="true"] { color: var(--ink); background: var(--surface-active); }
.al-theme .al-theme-label { display: none; }
.al-theme[data-labels] .al-theme-label { display: inline; }

/* ---------- VersionSelector ---------- */
.al-version { position: relative; display: inline-block; }
.al-version-trigger .al-ref-sha { color: var(--ink-subtle); }
.al-version-trigger .al-chev { width: 12px; height: 12px; color: var(--ink-subtle); }
.al-version-menu {
  position: absolute; z-index: var(--z-popover); top: calc(100% + 6px); right: 0;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.al-version-menu[hidden] { display: none; }
.al-version-search { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); color: var(--ink-subtle); }
.al-version-search input { flex: 1; min-width: 0; height: 28px; border: 0; outline: 0; background: transparent; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.al-version-search input::placeholder { color: var(--ink-subtle); }
.al-version-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--border); }
.al-version-tabs button { position: relative; height: 30px; padding: 0 var(--space-2); border: 0; background: none; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.al-version-tabs button:hover { color: var(--ink); }
.al-version-tabs button[aria-selected="true"] { color: var(--ink); }
.al-version-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px; background: var(--accent-mark); }
.al-version-list { list-style: none; margin: 0; padding: var(--space-1); max-height: 300px; overflow-y: auto; }
.al-version-opt {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2);
  padding: 6px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink);
}
.al-version-opt:hover, .al-version-opt[data-active] { background: var(--surface-hover); }
.al-version-opt[aria-selected="true"] { background: var(--accent-soft); }
.al-version-opt .al-icon { color: var(--ink-subtle); }
.al-version-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font: 500 13px/18px var(--font-sans); }
.al-version-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-version-sub { grid-column: 2; font: 400 12px/16px var(--font-sans); color: var(--ink-subtle); }
.al-version-sub .al-ref-sha { font: 450 12px/16px var(--font-mono); }
.al-version-ref { font: 450 12px/16px var(--font-mono); color: var(--ink-muted); }
.al-version-trigger .al-version-ref { padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-active); }
.al-version-check { grid-row: 1; grid-column: 3; color: var(--accent-mark); }
.al-version-empty { padding: var(--space-4); text-align: center; font-size: 13px; color: var(--ink-subtle); }
.al-version-foot { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); font: 400 12px/16px var(--font-sans); color: var(--ink-subtle); }

.al-version-banner {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-8);
  font: 400 14px/20px var(--font-sans); color: var(--ink);
  background: var(--warning-soft); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.al-version-banner .al-icon { color: var(--warning); }
.al-version-banner a { margin-left: auto; color: var(--accent-text); font-weight: 500; text-decoration: none; }
.al-version-banner a:hover { text-decoration: underline; }
.al-version-banner code { font: 450 12.5px/18px var(--font-mono); }

/* ---------- SourceRef ---------- */
.al-ref {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 1px 6px; vertical-align: baseline;
  font: 450 12.5px/18px var(--font-mono); color: var(--accent-text); text-decoration: none;
  background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.al-ref:hover { border-color: var(--border-strong); background: var(--surface-active); }
.al-ref .al-icon { width: 12px; height: 12px; color: var(--ink-subtle); }
.al-ref-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-ref-lines { color: var(--ink-muted); white-space: nowrap; }
.al-ref-sha { color: var(--ink-subtle); }
.al-ref[data-broken] { color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; }
.al-ref[data-broken] .al-icon { color: var(--danger); }
.al-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--space-3) 0 var(--space-6); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- SourceList ---------- */
.al-sourcelist { margin: 0 0 var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.al-sourcelist > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.al-sourcelist > summary::-webkit-details-marker { display: none; }
.al-sourcelist > summary .al-count { color: var(--ink-subtle); font-weight: 400; }
.al-sourcelist > summary .al-chev { margin-left: auto; color: var(--ink-subtle); transition: transform .15s; }
.al-sourcelist[open] > summary .al-chev { transform: rotate(180deg); }
.al-sourcelist ul { list-style: none; margin: 0; padding: var(--space-1) var(--space-4) var(--space-3); display: grid; gap: var(--space-1); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.al-sourcelist li { display: flex; align-items: center; gap: var(--space-2); }
.al-sourcelist li .al-ref { background: transparent; border-color: transparent; padding-left: 0; }
.al-sourcelist li .al-ref:hover { border-color: transparent; text-decoration: underline; }

/* ---------- Prose ---------- */
.al-prose { font: 400 16px/26px var(--font-sans); color: var(--ink); }
.al-prose > * + * { margin-top: var(--space-4); }
.al-prose p, .al-prose ul, .al-prose ol, .al-prose blockquote { max-width: var(--prose-measure); margin-bottom: 0; }
.al-prose h1 { margin: 0 0 var(--space-4); font: 650 32px/38px var(--font-sans); letter-spacing: -.01em; }
.al-prose h2 { margin: var(--space-12) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); font: 600 22px/30px var(--font-sans); letter-spacing: -.01em; }
.al-prose h3 { margin: var(--space-8) 0 0; font: 600 17px/24px var(--font-sans); }
.al-prose h4 { margin: var(--space-6) 0 0; font: 600 15px/22px var(--font-sans); }
.al-prose :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.al-prose :is(h2, h3, h4) .al-anchor { margin-left: var(--space-2); color: var(--ink-subtle); text-decoration: none; font-weight: 400; opacity: 0; }
.al-prose :is(h2, h3, h4):hover .al-anchor, .al-prose .al-anchor:focus-visible { opacity: 1; }
.al-prose a:not(.al-ref):not(.al-anchor) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.al-prose a:not(.al-ref):not(.al-anchor):hover { text-decoration-color: currentColor; }
.al-prose ul, .al-prose ol { padding-left: var(--space-6); }
.al-prose li + li { margin-top: var(--space-1); }
.al-prose li::marker { color: var(--ink-subtle); }
.al-prose strong { font-weight: 600; }
.al-prose :not(pre) > code { padding: 1px 5px; font: 450 .9em/1.4 var(--font-mono); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.al-prose blockquote { margin-left: 0; padding-left: var(--space-4); border-left: 2px solid var(--border-strong); color: var(--ink-muted); }
.al-prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
.al-prose .al-lede { font-size: 17px; line-height: 28px; color: var(--ink-muted); }
.al-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.al-prose table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); }
.al-prose th { text-align: left; font-weight: 600; background: var(--surface-hover); }
.al-prose th, .al-prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.al-prose tr:last-child td { border-bottom: 0; }
.al-prose figure { margin-left: 0; margin-right: 0; }
.al-prose figcaption { margin-top: var(--space-2); font: 400 12px/16px var(--font-sans); color: var(--ink-subtle); }

/* ---------- Callout ---------- */
.al-callout { display: grid; grid-template-columns: 16px 1fr; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); max-width: var(--prose-measure); font: 400 14px/22px var(--font-sans); color: var(--ink); background: var(--info-soft); border: 1px solid var(--border); border-radius: var(--radius-md); }
.al-callout > .al-icon { margin-top: 3px; color: var(--info); }
.al-callout-title { font-weight: 600; color: var(--info); }
.al-callout-body { grid-column: 2; }
.al-callout-body > :first-child { margin-top: 0; }
.al-callout-body > :last-child { margin-bottom: 0; }
.al-callout[data-tone="tip"] { background: var(--success-soft); }
.al-callout[data-tone="tip"] :is(.al-icon, .al-callout-title) { color: var(--success); }
.al-callout[data-tone="warning"] { background: var(--warning-soft); }
.al-callout[data-tone="warning"] :is(.al-icon, .al-callout-title) { color: var(--warning); }
.al-callout[data-tone="danger"] { background: var(--danger-soft); }
.al-callout[data-tone="danger"] :is(.al-icon, .al-callout-title) { color: var(--danger); }

/* ---------- CodeBlock ---------- */
.al-code { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--code-bg); overflow: hidden; }
.al-code-head { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface); font: 450 12.5px/18px var(--font-mono); color: var(--ink-muted); }
.al-code-head .al-ref { margin-left: auto; }
.al-code-lang { font: 500 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-subtle); }
.al-code pre { margin: 0; padding: var(--space-3) 0; overflow-x: auto; font: 400 13.5px/22px var(--font-mono); color: var(--code-ink); tab-size: 4; }
.al-code code { display: grid; min-width: max-content; font: inherit; } /* grid drops the newline text between .line spans */
.al-code .line { display: block; padding: 0 var(--space-4); }
.al-code[data-numbers] code { counter-reset: al-line var(--al-start, 0); }
.al-code[data-numbers] .line::before { counter-increment: al-line; content: counter(al-line); display: inline-block; width: 3ch; margin-right: var(--space-4); text-align: right; color: var(--ink-subtle); user-select: none; }
.al-code .line[data-hl] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent-mark); }
.al-code .tok-k { color: var(--syntax-keyword); }
.al-code .tok-s { color: var(--syntax-string); }
.al-code .tok-c { color: var(--syntax-comment); font-style: italic; }
.al-code .tok-f { color: var(--syntax-function); }
.al-code .tok-n { color: var(--syntax-constant); }
.al-code .tok-t { color: var(--syntax-type); }
.al-code .tok-p { color: var(--syntax-punct); }
.al-copy[data-copied] { color: var(--success); }

/* ---------- MermaidViewer & GraphViewer: shared frame ---------- */
.al-diagram, .al-graph { position: relative; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
/* in an article: the frames sit apart from the text around them (the margin reset above would otherwise cancel .al-prose's block gap) */
.al-prose > :is(.al-diagram, .al-graph, .al-code) { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.al-viewer-bar { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border); }
.al-viewer-title { margin-right: auto; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-viewer-sep { width: 1px; height: 16px; margin: 0 var(--space-1); background: var(--border); }
.al-viewer-zoom { min-width: 44px; text-align: center; font: 450 12px/16px var(--font-mono); color: var(--ink-subtle); }
.al-viewport { position: relative; height: var(--al-viewer-height, 360px); overflow: hidden; cursor: grab; touch-action: none; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 16px 16px; }
.al-viewport:active { cursor: grabbing; }
.al-viewport-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.al-diagram-src { margin: 0; padding: var(--space-3) var(--space-4); max-height: 360px; overflow: auto; font: 400 13px/20px var(--font-mono); color: var(--code-ink); background: var(--code-bg); border-top: 1px solid var(--border); white-space: pre; }
.al-diagram-src[hidden] { display: none; }
.al-diagram[data-state="loading"] .al-viewport::after { content: "Rendering diagram…"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px/18px var(--font-sans); color: var(--ink-subtle); }
.al-diagram[data-state="error"] .al-viewport { display: grid; place-items: center; cursor: default; color: var(--danger); font: 500 13px/18px var(--font-sans); }
.al-diagram figcaption, .al-graph figcaption { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); font: 400 12px/16px var(--font-sans); color: var(--ink-subtle); }
.al-diagram[data-fullscreen], .al-graph[data-fullscreen] { position: fixed; inset: var(--space-4); z-index: var(--z-fullscreen); box-shadow: var(--shadow-raised); display: flex; flex-direction: column; }
.al-diagram[data-fullscreen] .al-viewport, .al-graph[data-fullscreen] .al-graph-body { flex: 1; height: auto; }
.al-fs-scrim { position: fixed; inset: 0; z-index: calc(var(--z-fullscreen) - 1); background: #000000a6; }

/* ---------- GraphViewer ---------- */
.al-graph-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 248px; height: var(--al-viewer-height, 420px); }
.al-graph-body .al-viewport { height: 100%; }
.al-graph-search { display: flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-2); margin-right: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--ink-subtle); background: var(--bg); }
.al-graph-search input { width: 140px; border: 0; outline: 0; background: transparent; font: 400 13px/18px var(--font-sans); color: var(--ink); }
.al-graph-search input::placeholder { color: var(--ink-subtle); }
.al-graph svg { display: block; overflow: visible; }
.al-graph .edge { stroke: var(--border-strong); stroke-width: 1.25; fill: none; }
.al-graph .edge-label { font: 400 10px/1 var(--font-sans); fill: var(--ink-subtle); }
.al-graph .node { cursor: pointer; }
.al-graph .node-shape { stroke: var(--surface); stroke-width: 2; }
.al-graph .node-label { font: 500 11px/1 var(--font-sans); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.al-graph .node:focus { outline: none; }
.al-graph .node:focus-visible .node-ring, .al-graph .node[data-selected] .node-ring { stroke: var(--accent-mark); stroke-width: 2.5; fill: none; }
.al-graph .node-ring { stroke: none; fill: none; }
.al-graph [data-dim] { opacity: .18; }
.al-graph .edge[data-hot] { stroke: var(--accent-mark); stroke-width: 2; }
.al-graph .k1 { fill: var(--viz-1); } .al-graph .k2 { fill: var(--viz-2); } .al-graph .k3 { fill: var(--viz-3); } .al-graph .k4 { fill: var(--viz-4); } .al-graph .k5 { fill: var(--viz-5); } .al-graph .k0 { fill: var(--viz-muted); }
.al-graph-panel { border-left: 1px solid var(--border); padding: var(--space-4); overflow-y: auto; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); background: var(--surface); }
.al-graph-panel h4 { margin: 0 0 var(--space-1); font: 600 15px/22px var(--font-sans); color: var(--ink); }
.al-graph-panel .al-kind { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.al-graph-panel h5 { margin: var(--space-4) 0 var(--space-1); font: 500 12px/16px var(--font-sans); color: var(--ink-subtle); }
.al-graph-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.al-graph-panel li button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px var(--space-1); border: 0; border-radius: var(--radius-sm); background: none; text-align: left; font: 400 13px/18px var(--font-sans); color: var(--ink); cursor: pointer; }
.al-graph-panel li button:hover { background: var(--surface-hover); }
.al-graph-panel li .al-rel { margin-left: auto; font-size: 11px; color: var(--ink-subtle); }
.al-graph-panel .al-open { display: inline-flex; margin-top: var(--space-4); color: var(--accent-text); font-weight: 500; text-decoration: none; }
.al-graph-panel .al-open:hover { text-decoration: underline; }
.al-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.al-legend span { display: inline-flex; align-items: center; gap: 6px; }
.al-legend svg, .al-graph-panel svg { width: 12px; height: 12px; flex: none; }
.al-graph-panel .al-ref { max-width: 100%; }
@media (max-width: 719px) { .al-graph-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .al-graph-panel { border-left: 0; border-top: 1px solid var(--border); max-height: 40%; } .al-graph-search input { width: 96px; } }

/* High contrast: separate by borders, never shade alone */
[data-theme="hc"] .al-nav a[aria-current="page"], [data-theme="hc"] .al-version-opt[aria-selected="true"] { outline: 1px solid var(--border-strong); outline-offset: -1px; }
[data-theme="hc"] .al-prose a:not(.al-ref):not(.al-anchor) { text-decoration-color: currentColor; }
[data-theme="hc"] .al-viewport { background-image: none; }