/* Shared style system for the Parajudica site (landing page + generated registry). */
:root {
  --bg:#fbfbfa; --fg:#1a1a1a; --muted:#6f6f6a; --label:#8a8a84;
  --line:#e7e7e2; --code:#f1f1ee; --link:#1a1a1a;
  --tk-comment:#8a8a84; --tk-keyword:#1a56db; --tk-prefix:#9a6a2f; --tk-string:#557a2f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#141414; --fg:#ededea; --muted:#9a9a92; --label:#7e7e76;
    --line:#2a2a2a; --code:#1d1d1d; --link:#ededea;
    --tk-comment:#7e7e76; --tk-keyword:#8ab4f8; --tk-prefix:#d9a35f; --tk-string:#9ec07a;
  }
}

* { box-sizing: border-box; }
body {
  font: 16px/1.7 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg); background: var(--bg);
  max-width: 45rem; margin: 0 auto; padding: 6rem 1.5rem 8rem;
  -webkit-font-smoothing: antialiased;
}

/* The landing page injects markdown into #content, then fades it in. Static
   pages (the registry) use a plain <main> and are unaffected. */
#content { opacity: 0; transition: opacity .2s; }
#content.ready { opacity: 1; }

/* text-indent nudges the larger heading glyphs back into optical left-alignment
   with the body text (their bigger left side bearing otherwise reads as indented). */
h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); font-weight: 700; line-height: 1.05;
     letter-spacing: -0.01em; text-indent: -0.015em; margin: 0 0 1.5rem; }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; text-indent: -0.015em;
     color: var(--fg); margin: 3rem 0 1rem; }
p { margin: 0 0 1.25rem; }
em { font-style: normal; color: inherit; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--line); }
a:hover { text-decoration-color: var(--link); }

/* Top nav: identical structure and styling on every page. */
.topnav { color: var(--muted); font-size: 13px; line-height: 1.9; margin: -0.75rem 0 2.75rem; }
.topnav a { color: var(--muted); text-decoration: none; }
.topnav a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--fg); }

/* Resource link table (the bulleted list of Code / Archive / Vocabulary / Registry). */
ul { list-style: none; padding: 0; margin: 2rem 0; }
li { display: flex; gap: 1.25rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--line); }
li:last-child { border-bottom: 1px solid var(--line); }
li strong { font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
     font-size: 12px; color: var(--label); min-width: 6rem; flex: none; }
li a { text-decoration: none; }
li a:hover { text-decoration: underline; }

code { font-size: 13px; background: var(--code); padding: .12rem .35rem; border-radius: 4px; }
pre { background: var(--code); padding: 1rem 1.1rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; }
pre code { background: none; padding: 0; }

/* Prism token classes mapped to the palette (no Prism theme loaded). */
.token.comment { color: var(--tk-comment); font-style: italic; }
.token.string, .token.url, .token.number, .token.boolean { color: var(--tk-string); }
.token.keyword, .token.function, .token.builtin, .token.tag { color: var(--tk-keyword); }
.token.prefix, .token.parameter, .token.variable, .token.environment { color: var(--tk-prefix); }
.token.local-name { color: var(--fg); }
.token.punctuation, .token.operator { color: var(--muted); }

/* Diagram fills the column; caption (the <em> paragraph after it) stays muted. */
main img { display: block; width: 100%; max-width: 100%; height: auto; margin: 2.5rem auto; }
main p:has(> img) + p { color: var(--muted); }

hr { border: none; border-top: 1px solid var(--line); margin: 3.5rem 0 1.5rem; }
hr + p { font-size: 13px; color: var(--muted); }

/* Registry catalog (markup generated by publish-vocab.py). */
.lede { color: var(--muted); text-align: left; margin: 0 0 1.25rem; }
.mod { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.mod:last-child { border-bottom: 1px solid var(--line); }
.mod .hd { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.mod .name { font-weight: 700; }
.mod .ver { color: var(--muted); font-size: 13px; }
.mod .desc { color: var(--fg); margin: .3rem 0 .5rem; }
.facets { display: grid; grid-template-columns: 7rem 1fr; gap: .15rem 1rem; font-size: 14px; margin: .5rem 0; }
.facets dt { color: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; padding-top: .18rem; }
.facets dd { margin: 0; }
.links { font-size: 13px; margin-top: .6rem; }
.links a { margin-right: 1rem; }
.deps { font-size: 13px; color: var(--muted); }
.iri { font-size: 13px; color: var(--muted); word-break: break-all; margin: .15rem 0 .35rem; }