/* The ontology viewer on top of packages/ui base.css and chrome.css: a reading layout (navigation, document, contents)
   in the Daedal light theme. Hangul has no brand face, so Pretendard, cut to the characters the pages hold, follows
   every brand face in its stack and draws only what the brand face lacks. */
@font-face { font-family: "Ontology Hangul"; font-style: normal; font-weight: 45 920; font-display: swap; src: url(fonts/hangul.woff2) format("woff2"); }
:root {
  --sans: "Geist", "Ontology Hangul", "Geist Fallback", sans-serif;
  --serif: "Instrument Serif", "Ontology Hangul", "Instrument Serif Fallback", serif;
  --mono: "Geist Mono", "Ontology Hangul", "Geist Mono Fallback", monospace;
  --nav-w: 272px;
  --toc-w: 232px;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --panel: color-mix(in srgb, var(--paper) 72%, transparent);
}
.site-header, .site-footer { --chrome-serif: var(--serif); --chrome-mono: var(--mono); }
/* INVENTORY is the longest product name a wordmark carries, so below 360 px it takes a smaller face to keep the door inside the pill. */
@media (max-width: 359px) { .site-header .mark { font-size: 20px; padding: 8px 6px; } .site-header .chrome-cta { padding: 0 10px; } }
body { font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--patina); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
code, kbd, pre { font-family: var(--mono); }

/* Toolbar: the views and the search, under the chrome header and on its width. */
.toolbar { position: relative; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: min(100% - 2 * var(--gutter), var(--max)); margin: 16px auto 0; }
.toolbar .quick { display: flex; gap: 4px; flex-wrap: wrap; }
.toolbar .quick a, .toolbar .browse { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font: 400 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.toolbar .quick a:hover { background: var(--panel); color: var(--ink); }
.toolbar .browse { display: none; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.search { position: relative; flex: 1 1 280px; max-width: 520px; margin-left: auto; }
.search input { width: 100%; height: 44px; padding: 0 44px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: 400 15px/1 var(--sans); }
.search input:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--stone); pointer-events: none; }
.results { position: absolute; right: 0; top: calc(100% + 6px); width: min(640px, calc(100vw - 2 * var(--gutter))); max-height: min(70vh, 640px); overflow: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 18px 40px -18px rgba(22, 20, 15, .45); }
.results a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.results a:hover, .results a:focus-visible { background: var(--marble); outline: none; }
.results .r-title { display: block; font-weight: 600; }
.results .r-path { display: block; font: 400 12px/1.4 var(--mono); color: var(--stone); }
.results .r-snip { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-soft); }
.results mark { background: color-mix(in srgb, var(--emerald) 28%, transparent); color: inherit; border-radius: 3px; }
.results .r-none { padding: 12px; color: var(--stone); }

/* Layout: navigation, document, contents. */
.layout { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--toc-w); gap: 40px; width: min(100% - 2 * var(--gutter), var(--max)); margin: 24px auto 0; align-items: start; }
.layout.wide { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.layout:not(:has(.toc)) { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.nav { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding: 4px 8px 24px 0; font-size: 14px; scrollbar-width: thin; }
.nav ul { margin: 0; padding: 0 0 0 12px; list-style: none; border-left: 1px solid var(--line); }
.nav-tree > ul { padding-left: 0; border: 0; }
.nav li { margin: 0; }
.nav a, .nav summary { display: block; padding: 4px 8px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; line-height: 1.4; }
.nav summary { cursor: pointer; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--stone); list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::before { content: "+"; display: inline-block; width: 1em; color: var(--stone-light); }
.nav details[open] > summary::before { content: "\2212"; }
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav .top > a { font-weight: 600; color: var(--ink); }
.nav a[aria-current="page"], .nav .top > a[aria-current="page"] { background: var(--ink); color: var(--marble); }
.main { min-width: 0; }
.toc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; font-size: 13px; }
.toc-title { margin: 0 0 8px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 3px 0 3px 12px; color: var(--ink-soft); text-decoration: none; line-height: 1.4; }
.toc .d3 a { padding-left: 24px; color: var(--stone); }
.toc a:hover { color: var(--ink); }

/* Reading. */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 400 12px/1.6 var(--mono); color: var(--stone); }
.crumbs a { color: var(--stone); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0 0; font: 400 12px/1.6 var(--mono); }
.badge { padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--marble); }
.source { color: var(--stone); }
.lede { max-width: 72ch; font-size: 18px; color: var(--ink-soft); }
.doc { max-width: 860px; }
.doc h1, .doc h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.15; }
.doc h1 { margin: 16px 0 20px; font-size: clamp(34px, 5vw, 52px); }
.doc h2 { margin: 48px 0 12px; font-size: clamp(26px, 3.4vw, 34px); padding-top: 8px; border-top: var(--rule); }
.doc h3 { margin: 32px 0 8px; font-size: 19px; font-weight: 650; }
.doc h4, .doc h5, .doc h6 { margin: 24px 0 6px; font-size: 16px; font-weight: 650; }
.doc :is(h1, h2, h3, h4, h5, h6) { position: relative; scroll-margin-top: 84px; }
.doc .anchor { position: absolute; left: -1em; width: 1em; color: var(--stone-light); text-decoration: none; opacity: 0; }
.doc :is(h1, h2, h3, h4):hover .anchor { opacity: 1; }
.doc p, .doc li { max-width: 76ch; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li + li { margin-top: 4px; }
.doc blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--patina); background: var(--panel); color: var(--ink-soft); border-radius: 0 10px 10px 0; }
.doc code { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: .88em; overflow-wrap: anywhere; }
.doc pre { overflow: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 13px; line-height: 1.55; word-break: normal; overflow-wrap: normal; }
.doc pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.doc img { max-width: 100%; height: auto; border-radius: 10px; }
.doc hr { border: 0; border-top: var(--rule); margin: 32px 0; }
.doc a.missing { color: var(--stone); text-decoration-style: dotted; }
.table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.table th, .table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 7em; }
.table :is(th, td) { overflow-wrap: break-word; }
.table th { font: 400 12px/1.5 var(--mono); letter-spacing: .03em; color: var(--stone); background: color-mix(in srgb, var(--paper) 60%, transparent); }
.table tr:last-child > * { border-bottom: 0; }
.backlinks { margin-top: 56px; padding-top: 16px; border-top: var(--rule); max-width: 860px; }
.backlinks h2 { margin: 0 0 8px; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.backlinks ul { margin: 0; padding: 0; list-style: none; columns: 2 280px; column-gap: 32px; }
.backlinks li { break-inside: avoid; padding: 3px 0; font-size: 14px; }
.backlinks code { font-size: 11px; color: var(--stone); }
.list { list-style: none; padding: 0; }
.list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.list code { font-size: 12px; color: var(--stone); background: none; }

/* Home. */
.hero { padding: 16px 0 8px; }
.hero h1 { margin: 8px 0 12px; font: 400 clamp(44px, 8vw, 96px)/1 var(--serif); letter-spacing: -.02em; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 28px 0 8px; }
.stats div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.stats dt { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.stats dd { margin: 4px 0 0; font: 400 36px/1 var(--serif); }
.commit { font: 400 12px/1.6 var(--mono); color: var(--stone); }
.main > section > h2 { margin: 40px 0 12px; font: 400 clamp(26px, 3.4vw, 34px)/1.15 var(--serif); }
.main > section { scroll-margin-top: 84px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.cards a:hover { border-color: var(--ink); transform: translateY(-1px); }
.cards strong { font-weight: 600; }
.cards span { font-size: 14px; color: var(--stone); }

/* Tree. */
.filter { width: min(100%, 420px); height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 400 15px/1 var(--sans); color: var(--ink); }
.axis { margin: 16px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.axis > summary { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; cursor: pointer; font: 400 24px/1.2 var(--serif); }
.axis .count { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--stone); white-space: nowrap; }
.facet { padding: 0 18px 12px; }
.facet h3 { margin: 12px 0 6px; font-size: 15px; scroll-margin-top: 84px; }
.facet h3 a { color: var(--ink); text-decoration: none; }
.nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 2px 16px; margin: 0; padding: 0; list-style: none; }
.nodes a { display: block; padding: 5px 8px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; font-size: 14px; line-height: 1.4; }
.nodes a:hover { background: var(--marble); color: var(--ink); }
.id { font: 500 12px/1 var(--mono); color: var(--patina); }
.rel th { width: 32%; }
.rel .q { display: block; margin-top: 2px; font: 400 12px/1.4 var(--sans); letter-spacing: 0; color: var(--stone); text-transform: none; }
.edges { margin: 0; padding: 0; list-style: none; }
.edges a { color: var(--ink); text-decoration: none; }
.edges a:hover { text-decoration: underline; }
.sources { padding-left: 0; list-style: none; }
.sources li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sources .id { margin-right: 6px; }
.doc [id^="row-"] { scroll-margin-top: 120px; }
.doc tr:has([id^="row-"]:target) { background: color-mix(in srgb, var(--emerald) 16%, transparent); }

/* Graph. */
.graph-head h1 { margin: 16px 0 8px; font: 400 clamp(34px, 5vw, 52px)/1.1 var(--serif); }
.types { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.types legend { padding: 0 6px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.types label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font: 400 13px/1 var(--mono); cursor: pointer; }
.swatch { width: 18px; height: 3px; border-radius: 2px; background: var(--stone); }
.graph-wrap { position: relative; }
.graph { height: min(76vh, 860px); min-height: 420px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none; font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }
.legend .dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; background: var(--stone); }

/* Narrow: navigation becomes a drawer the toolbar opens; contents drop below 1200 px. */
@media (max-width: 1199px) {
  .layout, .layout:not(:has(.toc)) { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 1023px) {
  .layout, .layout.wide, .layout:not(:has(.toc)) { grid-template-columns: minmax(0, 1fr); }
  .toolbar .browse { display: inline-flex; }
  /* base.css lifts every body child to z-index 1, so the open drawer lifts its layout over the sticky header. */
  body.nav-open .layout { z-index: 40; }
  .nav { position: fixed; z-index: 30; inset: 0 auto 0 0; top: 0; width: min(86vw, 340px); max-height: none; padding: 20px 16px 40px; background: var(--paper); border-right: 1px solid var(--line); transform: translateX(-105%); transition: transform .2s; visibility: hidden; }
  body.nav-open .nav { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgba(22, 20, 15, .32); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .toolbar { gap: 8px; }
  .toolbar .quick a, .toolbar .browse { padding: 0 9px; }
  .search { flex-basis: 100%; max-width: none; margin-left: 0; order: 3; }
  .doc .anchor { display: none; }
  .table th, .table td { min-width: 6em; padding: 7px 10px; }
  .rel th { width: auto; }
  .graph { height: 64vh; min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .nav, .cards a { transition: none; } }

/* The locked page (gate.html): one PIN field, centred in the reading column. */
.main.gate { max-width: 420px; margin: 12vh auto; padding: 0 20px; }
.gate h1 { margin: 0 0 8px; font: 400 clamp(32px, 5vw, 48px)/1.05 var(--serif); }
.gate p { margin: 0 0 24px; color: var(--ink-soft); }
.gate form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.gate label, .gate .note { grid-column: 1 / -1; }
.gate label { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.gate input[type=password] { min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 400 17px/1 var(--mono); }
.gate button { min-height: 48px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font: 400 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.gate .note { min-height: 1.5em; margin: 0; color: var(--ink); }