/* The top of an element's and a relation's page (#935): its description as one highlighted sentence, its type or its two ends under it. */
.lead-sentence { padding: var(--space-small); border-left: 4px solid var(--color-rule-strong); background: var(--color-wash); font-size: 1.1em; }
.lead-type { font-style: italic; }
.relation-ends { list-style: none; padding-left: 0; }
:root {
  color-scheme: light dark;
  /* The page's look, as custom properties (#915). A store's theme (`theme` in `settings.yaml`) is loaded after this file and
     restyles the whole page by setting some of these on :root; the values here are what the page looks like without one. The
     defaults are the browser's own colours, so the page follows its light and dark. */
  --color-text: CanvasText;
  --color-background: Canvas;
  --color-link: LinkText;
  --color-link-visited: VisitedText;
  --color-link-active: ActiveText;
  --color-focus: Highlight;
  --color-alert: #c33;
  --color-rule: #8884;
  --color-rule-light: #8883;
  --color-rule-strong: #8886;
  --color-wash: #8881;
  --font-body: system-ui, sans-serif;
  --font-heading: inherit;
  --font-code: monospace;
  --font-size: 1rem;
  --line-height: 1.55;
  --space-page: 1rem;
  --space-small: .6rem;
  --max: 52rem;
}
body { font: var(--font-size)/var(--line-height) var(--font-body); margin: 0; color: var(--color-text); background: var(--color-background); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
a:link { color: var(--color-link); }
a:visited { color: var(--color-link-visited); }
a:active { color: var(--color-link-active); }
header { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: baseline; padding: var(--space-small) var(--space-page); border-bottom: 1px solid var(--color-rule); }
header .site { margin: 0; font-weight: 600; }
nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
/* The list of versions takes a row of its own under the header's other parts, so it stays on screen however narrow the window (#817). */
nav.switcher { flex-basis: 100%; }
.switcher-label { opacity: .75; }
nav a[aria-current="page"] { font-weight: 600; text-decoration: none; }
/* What the header says of a proposal (#877): one row under the list of versions, its sentence, its two report links and the way back side by side. */
header .proposal-status { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; align-items: baseline; }
header .proposal-status p, header .proposal-status form { margin: 0; }
/* The Quit button (#881) is the header's last part, set at the far end of its row away from the links. */
header .quit { margin: 0 0 0 auto; }
main { max-width: var(--max); margin: 0 auto; padding: var(--space-page); }
/* The store's own foot line (#913): one paragraph under the page, set apart by a rule and a smaller type. */
footer { max-width: var(--max); margin: 0 auto; padding: var(--space-small) var(--space-page) 1.5rem; border-top: 1px solid var(--color-rule); font-size: .85em; }
footer p { margin: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: .25rem .6rem; border-bottom: 1px solid var(--color-rule-light); }
th { white-space: nowrap; font-weight: 600; }
/* A matrix's column headers are written vertically (#962); each stands on the first row, so a short label sits against the table, not high above it (#997). */
th.matrix-column { vertical-align: bottom; }
/* A matrix's row labels and column headers are dragged into a new order (#959): the one being dragged is dimmed, the one it would stand before is outlined. */
table.matrix th[draggable="true"] { cursor: grab; }
table.matrix .dragged { opacity: .5; }
table.matrix .drop-before { outline: 2px solid var(--color-focus); }
td ul { margin: 0; padding-left: 1.1rem; }
main select, main input, main textarea { max-width: 100%; box-sizing: border-box; }
/* A picture is scaled down to fit the window, width and height, keeping its proportions; never scaled up (#873). It may run wider than the text column. */
main svg, main img { max-width: 100%; height: auto; }
figure.picture { --fit: calc(100vw - 3rem); display: flex; justify-content: center; box-sizing: border-box; width: var(--fit); margin: 1rem 0 1rem calc(50% - 50vw + 1.5rem); }
/* The catalogue's still picture sits among the graph's controls and keeps its place in the column. */
.graph-host figure.picture { display: block; width: auto; margin: 1rem 0; }
figure.picture > a.full-size { display: block; cursor: zoom-in; }  /* the link the page adds, not the SVG links around each box (#891) */
figure.picture svg, figure.picture img { display: block; width: auto; height: auto; max-width: var(--fit); max-height: calc(100vh - 3rem); }
main td, main th { overflow-wrap: anywhere; }
pre { overflow-x: auto; padding: var(--space-small); background: var(--color-wash); font-family: var(--font-code); }
code { background: var(--color-wash); padding: 0 .2rem; font-family: var(--font-code); }
.broken-link { text-decoration: line-through; opacity: .7; }
.unreadable { border-left: 4px solid var(--color-alert); padding-left: var(--space-small); }
/* A list of tick boxes (#876): one label to a row, scrolling when the store has many files. */
.tick-list { display: block; max-height: 12rem; overflow-y: auto; padding: .3rem .5rem; border: 1px solid var(--color-rule-strong); }
.tick-list label { display: block; }
main input.tick-filter { display: block; margin-bottom: .3rem; }
/* The two rules above beat the browser's own [hidden] rule: without these, the filter line shows with scripts off and a filtered-out box stays on screen (#895). */
.tick-list label[hidden], main input.tick-filter[hidden] { display: none; }
/* A word that is a term of a concept (#921) is marked with a faint dotted underline in the text's own colour; it is not a link. The box beside it
   (the concept's name, a link to its page, and its definition) is in the page's markup, hidden, and shown when the mark is pointed at or focused;
   page.js also shows it on a tap. Without scripts the box still shows on pointing and focus. */
.term-mark { position: relative; text-decoration: underline dotted; text-decoration-color: var(--color-rule-strong); text-underline-offset: .2em; cursor: help; }
.term-box { display: none; position: absolute; left: 0; top: 100%; z-index: 10; width: max-content; max-width: min(24rem, 80vw); padding: var(--space-small); border: 1px solid var(--color-rule-strong); background: var(--color-background); color: var(--color-text); font-size: .9em; font-weight: normal; line-height: var(--line-height); text-decoration: none; text-align: left; cursor: auto; }
.term-mark:hover > .term-box, .term-mark:focus-within > .term-box, .term-mark.open > .term-box { display: block; }
.term-box a { font-weight: 600; }
.term-box .term-definition { display: block; }
/* The top of a concept's page (#927): the definition as one highlighted sentence, the kind in words under it, and the small words beside a term or a relation. */
.definition { padding: var(--space-small); border-left: 4px solid var(--color-rule-strong); background: var(--color-wash); font-size: 1.1em; }
.concept-kind { font-style: italic; }
.term-status, .relation-label { font-size: .9em; font-style: italic; }
/* Reports, the review and compare as page markup (#944): one column that wraps at any width, a long name or path breaking rather than scrolling sideways. */
.report { overflow-wrap: anywhere; }
.report dt { margin-top: var(--space-small); font-weight: bold; }
.report dd { margin-left: var(--space-small); }
.report ul { padding-left: 1.2em; }
.report code.path { overflow-wrap: anywhere; }
p.refusal { overflow-wrap: anywhere; padding: var(--space-small); background: var(--color-wash); }