/* dterm: nanofil's Prolog drawn as terms (dterm.pl). After the luv wiki's
   dexp boxes: a compound's arguments sit in a box whose side borders are
   its parentheses, and boxes flow and wrap with the page. */

:root {
  /* The type of terms; nanofil/workbench/ compares the choices. */
  --paren-ink: 34%;
  --paren: color-mix(in srgb, var(--ink) var(--paren-ink), transparent);
  --paren-stroke: 0.1em;     /* at the middle of the bow */
  --paren-curve: 0.3em;      /* how far its ends bow in */
  --paren-inside: 0.19em;    /* from a parenthesis to what it holds */
  --paren-outside: 0.07em;   /* from a functor to its parenthesis */
  --paren-grow: 0.06em;      /* above and below, per box nested inside */
  --bracket-ink: 60%;
  --bracket: color-mix(in srgb, #2f6f8f var(--bracket-ink), transparent);
  --bracket-arm: 0.2em;
  --bar-space: 0.1em;
  --sep-ink: 52%;            /* commas */
  --sep: color-mix(in srgb, var(--ink) var(--sep-ink), transparent);
  --hang: 1.5em;             /* continuation lines, without dterm.js */
  --indent: 1.5em;           /* dterm.js: a hung term's lines, past its start */
  --ribbon: 34em;            /* dterm.js: the most a term sets on one line */
  --var: #5a3f9a;
  --atom: #24566e;
  --num: #8a6510;
  --str: #3d7a3d;
  --call: var(--accent);
  --note: #5c666d;
}

main.dterm-page {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* The sidebar: files, and the sections and predicates of this one. */

.dterm-nav { font-size: 0.8rem; }
.dterm-nav > ul > li { margin: 0.12rem 0; }
.dterm-nav li.current > a { color: var(--accent); font-weight: 700; opacity: 1; }
.dterm-nav li.current > ul {
  margin: 0.3rem 0 0.8rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--rule);
}
.dterm-nav li.current li { margin: 0.1rem 0; }
.dterm-nav .nav-section { margin-top: 0.6rem !important; font-weight: 700; }
.dterm-nav .nav-pred a { opacity: 0.7; overflow-wrap: anywhere; }

/* The article. */

article.dterm { min-width: 0; max-width: 72rem; }
article.dterm h2 {
  margin: 2.8rem 0 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 2.6rem;
}

.dterm .prose { max-width: 44rem; }
.dterm .prose p { margin: 0 0 0.55rem; text-align: left; hyphens: manual; }
.dterm .prose p:last-child, .dterm .prose ul:last-child { margin-bottom: 0; }
.dterm .prose ul { margin: 0.2rem 0 0.6rem; }
.dterm .prose pre {
  margin: 0.4rem 0 0.7rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 4px;
}
.dterm .prose code { font-size: 0.82em; }

/* A module header's Markdown (dterm.pl's blocks/2): headings, tables,
   terms drawn as in the code, and box diagrams. Inline code that reads
   as a term is set as one, in the type of the code. */
.dterm .prose .prose-h {
  margin: 1.5rem 0 0.45rem;
  font-size: 1.02rem;
  letter-spacing: 0;
}
.dterm .prose h4.prose-h { margin-top: 1.1rem; font-size: 0.92rem; color: var(--muted); }
.dterm .prose code.term { font: inherit; font-size: 0.96em; background: none; padding: 0; }
.dterm .prose code.term .c, .dterm .prose code.term .args, .dterm .prose code.term .arg { white-space: nowrap; }
table.prose-table {
  display: table;
  width: auto;
  max-width: 100%;
  margin: 0.4rem 0 0.9rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.4;
}
table.prose-table th {
  padding: 0 1.1rem 0.25rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}
table.prose-table td {
  padding: 0.28rem 1.1rem 0.28rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  vertical-align: baseline;
}
table.prose-table td:first-child { white-space: nowrap; }
table.prose-table tr:last-child td { border-bottom: 0; }
.dterm .prose .prose-terms { margin: 0.4rem 0 0.8rem 1rem; }
.dterm .prose .prose-terms .clause { margin: 0.15rem 0; }
.dterm .prose pre.fence.diagram {
  background: none;
  padding: 0.3rem 0;
  line-height: 1.1;
  font-size: 0.78rem;
}
.dterm a.ref code { color: var(--accent); }

.dterm .lede { font-size: 1.02rem; margin-bottom: 2rem; }
.dterm .prose-block {
  margin: 1.4rem 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--rule);
  color: var(--note);
  font-size: 0.95rem;
}

/* Module header and imports. */

.module-decl, .uses {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  margin: 0.3rem 0;
  font-size: 0.92rem;
}
.module-decl { margin-bottom: 0.6rem; }
.module-decl > .f { font-size: 1.05rem; }
.exports { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; flex-basis: 100%; padding-left: 1rem; }
.exports .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
a.export { color: var(--ink); font-size: 0.85rem; }
a.export:hover { color: var(--accent); }
.dterm .kw {
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.uses .lib { color: var(--atom); }
.uses .lib + .lib::before { content: ""; }

/* A predicate: its documentation, then its clauses. */

section.pred {
  margin: 1.6rem 0;
  scroll-margin-top: 2.6rem;
}
section.pred:target > .doc { box-shadow: -0.9rem 0 0 -0.65rem var(--accent); }

.doc { margin-bottom: 0.6rem; }
.doc .sig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  font-size: 1.02rem;
}
.doc .sig .f.def { font-weight: 750; }
.doc .prose { margin-top: 0.3rem; font-size: 0.95rem; }
.arg:has(> .mode) { white-space: nowrap; }
.mode {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8em;
  margin-right: 0.08em;
}
.det {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 1rem;
}

/* Clauses: head over goals. A head or a goal is a line of text; when it
   is too long for its line it breaks after a comma or a wide operator, and
   its continuation lines hang under the first. */

.clause {
  position: relative;
  margin: 0.55rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.clause > .head, .goal, .o, .c, .args, .l, .arg, .paren, .braces, .not, .qualified {
  min-width: 0;
}
.clause > .head, div.goal, .clause.item, details.clause > summary {
  padding-left: var(--hang);
  text-indent: calc(-1 * var(--hang));
}
:is(.clause > .head, .clause.item, details.clause > summary) *, div.goal :not(.goal) { text-indent: 0; }
div.goal:has(> div) { padding-left: 0; text-indent: 0; }
.neck { color: var(--muted); font-weight: 600; }
.clause.dcg > .head .neck { color: var(--atom); }
.clause > .goals {
  margin-left: 1.5em;
}
.goals {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  row-gap: 0.12em;
}

/* Line numbers in the margin, quiet until hovered. */

a.ln {
  position: absolute;
  right: 100%;
  margin-right: 0.6rem;
  color: var(--muted);
  font: 500 0.68rem/2.1 var(--mono-font);
  opacity: 0;
  transition: opacity 0.12s;
}
.clause:hover > .head > a.ln, tr:hover a.ln { opacity: 0.8; }
table.facts a.ln { position: static; margin: 0; }

/* Terms, set as text. A compound is its functor and an inline box whose
   side borders are its parentheses: the line breaks it as it breaks a
   parenthesis in prose, the opening one on the first line and the closing
   one after the last argument, and each border is as tall as the type.
   Commas are text, with a space after them; wide operators have a space
   on each side, and a line breaks only after them. */

.c, .o, .qualified, .not, .args, .arg, .l, .paren, .braces { display: inline; }
.f { color: var(--atom); }
.f.call { color: var(--call); }
a.f.call:hover { text-decoration: underline; }
.f.def { color: var(--ink); font-weight: 700; }
.f.pat { font-weight: 600; }
.a { color: var(--atom); }
.n { color: var(--num); font-variant-numeric: tabular-nums; }
.s { color: var(--str); white-space: pre-wrap; }
.v { color: var(--var); }
.v sub { font-size: 0.7em; line-height: 0; }
.v.anon { color: var(--muted); }
.v.lit { background: color-mix(in srgb, var(--var) 14%, transparent); border-radius: 3px; }
.module { color: var(--muted); }
.cut { color: var(--accent); font-weight: 800; }

.op { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.op.neg { color: var(--accent); font-weight: 700; margin-right: 0.1em; }
.o.pre > .op { margin-right: 0.04em; }

/* Parentheses: a hairline that bows like the glyph, thickest at its
   middle. A box with boxes inside stands a little taller, as outer
   delimiters are set bigger in mathematics. */

.args, .paren, .l, .braces {
  padding: 0 var(--paren-inside);
  border: 0 solid var(--paren);
  border-width: 0 var(--paren-stroke);
  border-radius: var(--paren-curve) / 50%;
}
.c > .args { margin-left: var(--paren-outside); }
:is(.args, .l, .paren):has(:is(.args, .l, .paren)) {
  padding-block: var(--paren-grow);
}
:is(.args, .l, .paren):has(:is(.args, .l, .paren) :is(.args, .l, .paren)) {
  padding-block: calc(2 * var(--paren-grow));
}
:is(.args, .l, .paren):has(:is(.args, .l, .paren) :is(.args, .l, .paren) :is(.args, .l, .paren)) {
  padding-block: calc(3 * var(--paren-grow));
}

/* Brackets are square, with arms, so a list never reads as a call. */
.l {
  border-color: var(--bracket);
  border-radius: 0;
  background:
    linear-gradient(var(--bracket) 0 0) left top / var(--bracket-arm) var(--paren-stroke) no-repeat border-box,
    linear-gradient(var(--bracket) 0 0) left bottom / var(--bracket-arm) var(--paren-stroke) no-repeat border-box,
    linear-gradient(var(--bracket) 0 0) right top / var(--bracket-arm) var(--paren-stroke) no-repeat border-box,
    linear-gradient(var(--bracket) 0 0) right bottom / var(--bracket-arm) var(--paren-stroke) no-repeat border-box;
}
.l.empty { padding: 0; border-width: 0; background: none; color: var(--bracket); }
.braces { border-style: dotted; border-width: 0 2px; }
.sep { color: var(--sep); }
.tailbar { color: var(--bracket); margin: 0 var(--bar-space); }
.pushback { opacity: 0.8; }
.terminals .l { background-color: color-mix(in srgb, var(--bracket) 8%, transparent); }

/* A box with a block inside (a conjunction passed to findall/3, say)
   lays out as boxes do, wrapping its arguments as items. */
.args:has(> .arg > .block), .not:has(> .block) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.3em;
}
.args:has(> .arg > .block) { border-radius: 0.55em; }
.arg:has(> .block) { display: inline-flex; align-items: baseline; }

/* dterm.js prints a head or goal (class zt) at the width it has: its
   lines start flush, break at <br class="zbr">, and continue past an
   empty .zin as wide as the line's indent. */
:is(.clause > .head, div.goal, .clause.item, details.clause > summary).zt { padding-left: 0; text-indent: 0; }
.zin { display: inline-block; }
/* While dterm.js sees whether a conditional fits as a table. */
.cases.ztry { width: max-content; }
.cases.ztry .goal { white-space: nowrap; }

/* An assembly line's term stays on its line; the table scrolls instead. */
table.asm td.term { white-space: nowrap; }

/* Blocks inside bodies: conjunctions in parentheses, DCG {} goals,
   conditionals and disjunctions. */

.block {
  display: grid;
  padding: 0.05em 0.5em;
  border-radius: 0.7em;
}
.braces.block { padding: 0.05em 0.5em; }

.cases, .alts {
  display: grid;
  padding: 0.1em 0.55em;
  border: 0 solid var(--paren);
  border-width: 0 1.5px;
  border-radius: 0.7em;
}
.cases {
  grid-template-columns: minmax(0, max-content) max-content minmax(0, max-content);
  column-gap: 0.6em;
}
.case { display: contents; }
.case > div { padding: 0.15em 0; }
.case + .case > div:not(.arrow) { border-top: 1px solid var(--rule); }
.case > .arrow { color: var(--accent); font-weight: 700; }
.case > .cond { min-width: 0; }
.case.plain > .cond { text-align: right; }
.alts { grid-template-columns: minmax(0, max-content); }

/* A chain with conditionals or conjunctions in its branches (dterm.pl's
   alt_nests/1, alt_conj/1), and one too wide for its place (dterm.js, or
   a narrow screen without it), is a flow: each condition, then its
   consequence under it. */
.cases.stack { grid-template-columns: max-content minmax(0, max-content); column-gap: 0.8em; }
.cases.stack > .case {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
}
.cases.stack > .case + .case { border-top: 1px solid var(--rule); }
.cases.stack > .case > :is(.cond, .then) { display: contents; }
.cases.stack > .case > .arrow { display: none; }
.cases.stack > .case > * > .goals { grid-column: 2; padding: 0.1em 0; }
/* The labels share a column, so every branch starts at the same place. */
.cases.stack > .case:not(.plain) > .cond::before { content: "if"; }
.cases.stack > .case + .case:not(.plain) > .cond::before { content: "else if"; }
.cases.stack > .case:not(.plain) > .then::before { content: "then"; }
.cases.stack > .case > :is(.cond, .then)::before, .cases.stack > .case.plain > .cond .kw {
  grid-column: 1;
  color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; white-space: nowrap;
}
.cases.stack > .case.plain > .cond:has(.kw:empty) { display: none; }
/* The labels are the structure: no bars, and all set alike, flush left
   on the first line of their branch. */
.cases.stack > .case.plain > .cond { text-align: left; }
.cases.stack .kw { justify-self: start; }
/* A comment between branches spans both columns, and its prose does not
   size them: otherwise the label column takes the comment's width. */
.cases.stack > :is(.note, .aside) { grid-column: 1 / -1; contain: inline-size; }
@media (max-width: 700px) {
  /* A run of a term with nowhere to break (a functor, its parenthesis
     and a first argument, or a long atom) breaks where it must rather
     than push the page sideways. */
  .clause > .head, .goal, .examples td, .sig, .a, .s { overflow-wrap: anywhere; }
  .dterm .prose pre { max-width: 100%; overflow-x: auto; }
  /* So does a long word in a title, a sentence or a comment, a term or
     code in a sentence, and a citation's path. Tables scroll instead. */
  .source-title, .note, .aside, .cite, .facts.set, .dterm .prose :is(p, li) { overflow-wrap: anywhere; }
  /* Shallower hangs leave a deeply nested goal room for its words. */
  :root { --indent: 1em; --hang: 1em; }
  .dterm .prose :is(p, li) code.term :is(.c, .args, .arg) { white-space: normal; }
  /* An example whose goal is a block puts its answer on the next row. */
  .examples td.goal:has(.block) { flex-basis: 100%; }
  /* Without dterm.js, a conditional is a column of its parts. */
  html:not(.zp) .cases:not(.stack), html:not(.zp) .cases:not(.stack) > .case { display: block; }
  html:not(.zp) .cases:not(.stack) > .case > .arrow { display: none; }
}
.alts > .or {
  margin: 0.1em 0;
  border-top: 1px dashed var(--rule);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* Comments among the goals. */

.aside { margin-left: 0.6em; }
.note, .aside {
  color: var(--note);
  font-style: italic;
  font-size: 0.88em;
}
.note { padding-left: 0.6em; border-left: 2px solid var(--rule); max-width: 40rem; }
.aside::before { content: "— "; opacity: 0.6; }
.notes.trailing { margin-left: 1.5em; }
.prose.between, .between .prose {
  color: var(--note);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0.6rem 0 0.4rem;
}

/* A predicate of facts is a table. */

table.facts {
  display: table;
  margin: 0.4rem 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
/* On a phone a table of facts scrolls inside itself. */
@media (max-width: 700px) {
  table.facts { display: block; max-width: 100%; overflow-x: auto; }
}
table.facts caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.2rem;
}
table.facts td {
  padding: 0.18rem 1.1rem 0.18rem 0;
  vertical-align: baseline;
}
table.facts td.ln { padding-right: 0.6rem; }
table.facts tr.note td { color: var(--note); font-style: italic; font-size: 0.88em; border-bottom: 0; padding-top: 0.6rem; }

.facts.set {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0.4rem 0 0.8rem;
  font-size: 0.95rem;
}
.facts.set > .args { display: inline-flex; flex-wrap: wrap; column-gap: 0.9em; row-gap: 0.1em; }

/* The index. */

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 0.9rem;
}
.module-card .meta { color: var(--muted) !important; font-size: 0.78rem !important; }
.module-card .summary { color: var(--ink) !important; opacity: 0.8; overflow-wrap: anywhere; }

/* Variable occurrences, highlighted together on hover (dterm.js). */

.v.lit { outline: 1px solid color-mix(in srgb, var(--var) 40%, transparent); }

@media (max-width: 900px) {
  main.dterm-page { display: block; }
  .clause > .goals { margin-left: 0.9em; }
  a.ln { display: none; }
}

/* A predicate and its cross references: calls and callers beside it on
   wide screens, under its documentation otherwise. */

section.pred { display: grid; grid-template-columns: minmax(0, 1fr); }
.pred-main { min-width: 0; }
aside.xref {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.35;
}
.xref-group { min-width: 0; }
.xref-title, .examples-title {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.xref-title .count, .examples-title .count { font-weight: 500; letter-spacing: 0; text-transform: none; }
aside.xref ul { list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.7em; }
aside.xref li { margin: 0; }
aside.xref a { color: var(--ink); opacity: 0.8; }
aside.xref a:hover { color: var(--accent); opacity: 1; text-decoration: none; }
aside.xref .file { color: var(--muted); font-size: 0.9em; }

@media (min-width: 1500px) {
  section.pred:has(> aside.xref) { grid-template-columns: minmax(0, 1fr) 13rem; column-gap: 2rem; }
  aside.xref {
    display: block;
    padding-left: 0.9rem;
    border-left: 1px solid var(--rule);
    margin: 0.3rem 0;
    align-self: start;
  }
  aside.xref ul { display: block; }
  aside.xref li { margin: 0.08rem 0; overflow-wrap: anywhere; }
  .xref-group + .xref-group { margin-top: 0.7rem; }
}

/* doc/3: signature, the arguments as a table, prose, citations, and the
   examples with what they gave when the page was built. */

.dterm-doc { margin-bottom: 0.8rem; }
.dterm-doc > .sig + .sig { margin-top: -0.1rem; opacity: 0.85; }
table.modes {
  display: table;
  margin: 0.4rem 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.35;
}
table.modes td { padding: 0.12rem 0.9rem 0.12rem 0; border-bottom: 0; vertical-align: baseline; }
table.modes td.dir { color: var(--muted); font-size: 0.78em; font-weight: 600; white-space: nowrap; }
table.modes td.desc { color: color-mix(in srgb, var(--ink) 85%, transparent); }
/* On a phone it scrolls inside itself, as a table of facts does. */
@media (max-width: 700px) {
  table.modes { display: block; max-width: 100%; overflow-x: auto; }
}
.dterm-doc .prose { margin-top: 0.35rem; }

.cites { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0.2rem; }
a.cite, span.cite {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
  border-radius: 1rem;
  color: var(--accent);
}
a.cite .std { color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
a.cite:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); text-decoration: none; }

.examples {
  margin: 0.55rem 0 0.3rem;
  padding: 0.4rem 0.7rem 0.45rem;
  background: color-mix(in srgb, var(--paper) 96%, var(--str));
  border-radius: 6px;
}
.examples table { display: table; margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.45; }
.examples td { padding: 0.08rem 0.6rem 0.08rem 0; border-bottom: 0; vertical-align: baseline; }
.examples td.mark { font-weight: 800; padding-right: 0.5rem; }
.ex.pass td.mark { color: var(--str); }
.ex.fail td.mark { color: var(--accent); }
.ex.fail td.goal { text-decoration: underline wavy var(--accent); }
.examples td.then { color: var(--muted); }
.kw.fails { color: var(--accent); }

/* Several clauses: each numbered, as cases of one definition. */

section.pred.multi .pred-main { counter-reset: clause; }
section.pred.multi .clause { counter-increment: clause; }
section.pred.multi .clause > .head::before {
  content: counter(clause);
  display: inline-block;
  min-width: 1.25em;
  margin-right: 0.5em;
  padding: 0 0.2em;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  vertical-align: 0.15em;
  text-indent: 0;
}
section.pred.multi .clause > .goals { margin-left: 2.6em; }
section.pred.multi .prose.between {
  font-style: normal;
  color: var(--note);
  margin: 0.9rem 0 0.1rem;
}

@media (max-width: 900px) {
  .examples tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.45em; padding: 0.15rem 0; }
  .examples td { padding: 0; }
  .examples td:empty { display: none; }
}

/* On a phone a header's table scrolls sideways rather than squeezing its
   terms, and its type is a step smaller. */
@media (max-width: 700px) {
  table.prose-table { display: block; overflow-x: auto; font-size: 0.82rem; }
  table.prose-table td { padding-right: 0.8rem; }
}
@media (max-width: 700px) {
  table.prose-table td:first-child { white-space: normal; min-width: 8rem; }
  .dterm .prose table.prose-table code.term .arg { white-space: normal; }
}

/* The guide (dterm_guide.pl): docs/guide.md drawn beside the modules. */
article.dterm.guide { max-width: 50rem; }
.guide-prose { max-width: none; }
.guide-prose > p, .guide-prose > ul, .guide-prose li { line-height: 1.55; }
.guide-prose h2.guide-h { margin-top: 2.6rem; }
.guide-prose h3.guide-h { margin: 2rem 0 0.6rem; font-size: 1.08rem; }
.guide-prose h4.guide-h { margin: 1.4rem 0 0.4rem; font-size: 0.98rem; color: var(--muted); }
.guide-prose :is(h2, h3, h4, p.gloss-entry, p.map-entry):target {
  box-shadow: -0.9rem 0 0 -0.65rem var(--accent);
}
.guide-prose code { font-size: 0.84em; }
.guide-prose code.term { font: inherit; font-size: 0.96em; background: none; padding: 0; }
.guide-prose pre.fence {
  font-size: 0.8rem; background: var(--code-bg); padding: 0.6rem 0.8rem;
  overflow-x: auto; border-radius: 3px;
}
.guide-prose pre.fence.diagram { background: none; line-height: 1.25; }
.guide-output, .guide-prose .prose-terms {
  margin: 0.5rem 0 1rem; padding: 0.5rem 0.8rem;
  border-left: 2px solid var(--rule); background: color-mix(in srgb, var(--code-bg) 45%, transparent);
}
.guide-output .clause.item { margin: 0.2rem 0; }
.out-comment, .out-note { color: var(--note); }
.out-comment { font-size: 0.88rem; margin: 0.15rem 0; }
.out-text { font-family: var(--mono-font); font-size: 0.82rem; color: var(--accent); }
.out-note-line { margin: 0.15rem 0; }
a.gloss { color: inherit; text-decoration: underline dotted color-mix(in srgb, var(--accent) 60%, transparent); }
a.gloss:hover { color: var(--accent); }
.ir-value { color: var(--var); white-space: nowrap; }
.ir-value .value-role { opacity: 0.55; margin-right: 0.05em; }
.broken { color: #b00; text-decoration: line-through; }

/* A predicate reference and its signature card, shown on hover or focus. */
.pref { position: relative; }
.pref .sigcard {
  display: none; position: absolute; z-index: 20; left: 0; top: 1.5em;
  width: max-content; max-width: min(30rem, 86vw);
  padding: 0.55rem 0.75rem; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
  font-size: 0.86rem; line-height: 1.45; font-weight: normal; white-space: normal;
}
.pref:hover .sigcard, .pref:focus-within .sigcard { display: block; }
.sigcard .card-mod { display: block; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; }
.sigcard .card-sig { display: block; margin: 0.15rem 0; }
.sigcard .card-text { display: block; margin-top: 0.3rem; color: var(--ink); }

/* On a module page: where the guide talks about it. */
aside.guide-links {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline;
  margin: -0.4rem 0 1.4rem; font-size: 0.86rem;
}
aside.guide-links .label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.guide-nav li.nav-section > a { opacity: 1; }
@media (max-width: 700px) {
  .guide-output, .guide-prose .prose-terms { margin-left: 0; padding: 0.4rem 0.5rem; }
  .pref .sigcard { position: fixed; left: 4vw; right: 4vw; top: auto; bottom: 1rem; max-width: none; width: auto; }
}

/* Diagrams (dterm_diagram.pl): box drawing read into HTML that reflows. */
.dg { margin: 0.7rem 0 1.1rem; font-size: 0.9rem; line-height: 1.4; }
.dg a.ref code, .dg code { font-size: 0.88em; }
.dg a.module { color: var(--accent); }
/* A frame: regions stacked, edges and words labelled on the right. */
.dg-frame {
  display: grid; grid-template-columns: minmax(9rem, 21rem) minmax(0, 1fr);
  column-gap: 0.7rem; max-width: 40rem;
}
.dg-frame > div { display: contents; }
.dg-frame .dg-rule { border-top: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); height: 0; }
.dg-frame .dg-at {
  height: 0; overflow: visible; position: relative; top: -0.62em;
  font-family: var(--mono-font); font-size: 0.76rem; color: var(--accent); white-space: nowrap;
}
.dg-frame .dg-cell {
  border-left: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent);
  background: color-mix(in srgb, var(--code-bg) 70%, transparent);
  padding: 0.12rem 0.65rem;
}
.dg-frame .dg-row:first-of-type .dg-cell, .dg-frame .dg-edge + .dg-row .dg-cell { padding-top: 0.4rem; }
.dg-frame .dg-off { font-family: var(--mono-font); font-size: 0.76rem; color: var(--muted); align-self: center; }
/* A pipeline: data boxes, and the steps between them on a rail. */
.dg-pipe { max-width: 46rem; }
.dg-data {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; align-items: baseline; width: fit-content; max-width: 100%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 65%, transparent); border-radius: 4px;
  padding: 0.25rem 0.65rem; background: var(--paper);
}
.dg-data .dg-name { font-weight: 650; }
.dg-data .dg-forms { color: var(--muted); font-size: 0.86rem; }
.dg-step {
  position: relative; margin-left: 1.2rem; padding: 0.3rem 0 0.3rem 1.1rem;
  border-left: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: 0.05rem 1rem;
}
.dg-step:has(+ .dg-data) { padding-bottom: 0.75rem; }
.dg-step:has(+ .dg-data)::after {
  content: "▼"; position: absolute; left: -0.44rem; bottom: -0.25rem;
  font-size: 0.72rem; line-height: 1; color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.dg-step .dg-call { overflow-wrap: anywhere; }
.dg-step .dg-what { color: var(--muted); }
/* Chains and boxes: rows that wrap. */
.dg-chains { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 0.9rem; align-items: baseline; }
.dg-chain { display: contents; }
.dg-chain .dg-label { font-family: var(--mono-font); font-size: 0.82rem; }
.dg-links, .dg-flow { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; align-items: center; }
.dg-chip {
  border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 999px;
  padding: 0.05rem 0.6rem; background: var(--paper); white-space: nowrap;
}
.dg-chip.dg-opt { border-style: dashed; }
.dg-hop { display: inline-flex; gap: 0.4rem; align-items: center; white-space: nowrap; }
.dg-arrow { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.dg-boxes .dg-title { margin-bottom: 0.4rem; }
.dg-box {
  border: 1.5px solid color-mix(in srgb, var(--ink) 65%, transparent); border-radius: 4px;
  padding: 0.25rem 0.65rem; background: var(--paper); max-width: 100%;
}
.dg-brow.dg-kv { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.6rem; }
.dg-brow .dg-k { color: var(--muted); }
@media (max-width: 700px) {
  .dg-frame { grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto); column-gap: 0.4rem; }
  .dg-step { grid-template-columns: minmax(0, 1fr); margin-left: 0.8rem; }
  .dg-chains { grid-template-columns: minmax(0, 1fr); }
  .dg-chain .dg-label { margin-top: 0.3rem; }
}

/* Concept nodes (web/concepts.pl): links, cards, embeds and pages. */
a.concept { color: inherit; text-decoration: underline dotted color-mix(in srgb, var(--accent) 70%, transparent);
  text-underline-offset: 0.15em; }
a.concept:hover { color: var(--accent); }
.concept-card .card-mod { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink); }
aside.concept-embed {
  margin: 0.6rem 0 1rem; padding: 0.45rem 0.8rem 0.1rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--code-bg) 40%, transparent);
}
aside.concept-embed .concept-embed-title {
  display: block; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
aside.concept-embed .concept-embed-title:hover { color: var(--accent); }
aside.concept-embed p { margin: 0.3rem 0 0.6rem; }
.concept-aliases { color: var(--muted); margin: -0.6rem 0 1.2rem; }
section.concept-links { margin-top: 2.2rem; border-top: 1px solid var(--rule); }
section.concept-links h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.8rem 0 0.4rem; }
section.concept-links ul { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 1.6rem; font-size: 0.9rem; }
section.concept-links li { break-inside: avoid; margin: 0.15rem 0; overflow-wrap: anywhere; }
dl.concept-index { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.35rem 1.1rem; }
dl.concept-index dt { font-weight: 600; overflow-wrap: anywhere; }
dl.concept-index dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  dl.concept-index { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  dl.concept-index dd { margin-bottom: 0.6rem; }
}
/* A concept's kind: Fil-C's own, nanofil's, or Iris's. */
.kind {
  display: inline-block; vertical-align: 0.12em; margin-left: 0.15em;
  padding: 0 0.32em; border: 1px solid currentColor; border-radius: 2px;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.45;
  text-transform: none; white-space: nowrap;
}
.kind-filc { color: #1f6f5c; }
.kind-nanofil { color: #6a5a8e; }
.kind-iris { color: #8a5a1c; }
h1 .kind, .concept-aliases > .kind:first-child { margin-left: 0; }
.kind-dot { display: inline-block; width: 0.38em; height: 0.38em; margin-left: 0.35em; border-radius: 50%;
  background: #1f6f5c; vertical-align: 0.15em; }
.kind-dot-iris { background: #8a5a1c; }
p.concept-upstream { font-size: 0.9rem; margin: -0.8rem 0 1.2rem; overflow-wrap: anywhere; }
p.concept-upstream .label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
h3.concept-group { margin: 1.8rem 0 0.3rem; }
h3.concept-group .count { color: var(--muted); font-weight: normal; font-size: 0.85em; }
p.concept-group-text { color: var(--muted); margin: 0 0 0.8rem; font-size: 0.92rem; }
/* A long predicate name in running text may break rather than widen a phone page. */
.guide-prose p code, .guide-prose li code { overflow-wrap: anywhere; }
/* A sidebar in a document (> lines): the Prolog or Rocq side of the text beside it. */
aside.sidebar {
  margin: 0.4rem 0 1.1rem; padding: 0.5rem 0.85rem 0.1rem; font-size: 0.93rem;
  border-left: 2px solid var(--rule); background: color-mix(in srgb, var(--code-bg) 55%, transparent);
}
aside.sidebar p { margin: 0 0 0.5rem; }
aside.sidebar ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }