/* The system, kept from the page this catalog was ported from.
   Module 4 px: every length is a multiple of it, but for 1 and 2 px lines.
   Type: 13, 15 and 20 px, in the weights 400 and 600. Colours: the
   palette of palette.js. State has one rule: what is chosen is filled
   with the green; what cannot be pressed is drawn in the grey. Every
   target is at least 44 by 44 px. Rules, not boxes: no cards, no shadows;
   the zones' rules are drawn as lines inside them, so they move no
   content. The page uses the system sans and fetches no font. */

:root {
  --paper: #ffffff;
  --ink: #26221e;
  --grey: #685f56;
  --rule: #e5e0da;
  --view: #f4f2ef;
  --green: #2e6b3c;
  --red: #b3261e;
  --font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --row: 44px;         /* every target at least this tall and wide */
  --gap: 8px;
  --edge: 16px;        /* a zone's margin */
  --catalog: 320px;
  --info: 360px;
  --band: 232px;       /* the elevation and the map under the stage */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
  background: var(--paper);
}

button, input, select { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* A browser that cannot run the modules sees this line instead of an empty
   page. While the modules load it stays hidden; main.js takes it away. */
.no-modules { margin: 0; padding: 24px 16px; font-size: 20px; line-height: 28px; }
.js .no-modules { display: none; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The way past the header and the list, for the keyboard: out of sight
   until it has the focus. */
.skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: var(--row);
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid var(--grey);
}
.skip:focus { top: 8px; }

/* The header: the title and the three tools. */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 4px var(--edge);
  border-bottom: 1px solid var(--rule);
}
.page-title { display: flex; align-items: baseline; column-gap: 16px; flex: 1 1 0; min-width: 0; }
.page-header h1 { flex: none; }
.page-header h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.purpose { margin: 0; font-size: 13px; line-height: 16px; color: var(--grey); min-width: 0; }
.tools { display: flex; gap: var(--gap); flex-wrap: wrap; }
.tool-link {
  display: inline-flex;
  align-items: center;
  min-width: var(--row);
  min-height: var(--row);
  padding: 0 12px;
  border: 1px solid var(--grey);
  background: var(--paper);
  text-decoration: none;
}
.tool-link:hover { text-decoration: underline; }
.tool-link[aria-current="page"] { border-color: var(--green); background: var(--green); color: var(--paper); }

.app { display: grid; }

/* The catalog: the field, the count, the rows. */

.catalog { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--edge); }
.search-label { font-weight: 600; }
strong { font-weight: 600; }
/* The browser's own clear button is a tiny target off the palette. */
.search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search {
  width: 100%;
  min-height: var(--row);
  padding: 0 12px;
  border: 1px solid var(--grey);
  background: var(--paper);
}
.search-help, .count, .keys-hint, .none { margin: 0; font-size: 13px; line-height: 16px; color: var(--grey); }
.none { color: var(--ink); padding: 8px 0; }
.catalog-fold { display: flex; flex-direction: column; }
/* A closed fold takes its rows out of the page, not only out of sight. */
.catalog-fold:not([open]) > :not(summary) { display: none; }
.fold-summary {
  display: flex;
  align-items: center;
  min-height: var(--row);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.fold-summary::-webkit-details-marker { display: none; }
.fold-summary::before { content: "+" / ""; display: inline-block; width: 20px; }
.catalog-fold[open] > .fold-summary::before { content: "-" / ""; }
.unknown { margin: 0; font-size: 13px; line-height: 16px; color: var(--grey); }
.unknown .action, .none .action { font-size: 15px; color: var(--ink); }
.bond-alias { font-size: 13px; line-height: 16px; color: var(--ink); }
.bond[aria-current="page"] .bond-alias { color: var(--paper); }
.catalog-fold > .keys-hint { margin: 4px 0; }
.bonds { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.bonds li + li { border-top: 1px solid var(--rule); }

.bond {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px;
  text-decoration: none;
}
.bond:hover .bond-name { text-decoration: underline; }
/* What is chosen is filled with the green; the drawing keeps its paper. */
.bond[aria-current="page"] { background: var(--green); color: var(--paper); }
.bond[aria-current="page"] .bond-pattern { color: var(--paper); }
.thumb { flex: none; display: block; background: var(--paper); box-shadow: 0 0 0 4px var(--paper); }
.bond-words { display: flex; flex-direction: column; min-width: 0; }
.bond-name { font-weight: 600; }
.bond-pattern { font-size: 13px; line-height: 16px; color: var(--grey); }

/* The centre: the stage, its keys, the band of elevation and map. */

.view { position: relative; display: flex; flex-direction: column; background: var(--view); min-height: 0; }
.view-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.view-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; }
.stage-name:focus { outline: none; }
.view-stage canvas:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
.stage-name {
  position: absolute;
  top: 8px;
  left: var(--edge);
  right: var(--edge);
  margin: 0;
  pointer-events: none;
}
.stage-name strong, .stage-name span { background: var(--view); padding: 0 4px; }
.stage-name strong { font-size: 20px; line-height: 28px; font-weight: 600; }
.stage-name span { font-size: 13px; line-height: 16px; color: var(--grey); }
.view-hint {
  position: absolute;
  bottom: 8px;
  left: var(--edge);
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  line-height: 16px;
  color: var(--grey);
  background: var(--view);
  pointer-events: none;
}
.view-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  padding: 8px var(--edge);
}
.view-keys, .move-keys { display: flex; gap: var(--gap); }
.move-key { min-width: var(--row); padding: 0; font-weight: 600; }
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-touch { display: inline; }
  .hint-mouse, .keys-hint { display: none; }
}

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--row);
  min-height: var(--row);
  padding: 0 12px;
  border: 1px solid var(--grey);
  background: var(--paper);
  cursor: pointer;
  text-decoration: none;
}
.view-key { min-width: 72px; }
.key[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: var(--paper); }
.key.primary { border-color: var(--green); background: var(--green); color: var(--paper); }

.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 16px; }
.legend-item { display: flex; align-items: center; gap: 4px; }
.chip { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ink); }

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--edge);
  padding: 8px var(--edge) 12px;
  background: var(--paper);
  box-shadow: inset 0 1px 0 var(--rule);
}
.aanzicht { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; min-height: 0; }
.aanzicht-caption, .map-caption { font-size: 13px; line-height: 16px; color: var(--grey); }
.aanzicht-title, .map-title { font-weight: 600; color: var(--ink); }
.tone-legend { display: inline-flex; flex-wrap: wrap; gap: 0 12px; }
.tone { display: inline-flex; align-items: center; gap: 4px; }
.aanzicht-drawing { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.aanzicht-drawing svg { display: block; }

.map { display: grid; grid-template-columns: 144px auto; gap: 8px; margin: 0; min-height: 0; }
.map-caption { display: flex; flex-direction: column; gap: 4px; }
.map-line { display: block; }
.map-holder { height: 100%; aspect-ratio: 244 / 290; min-height: 0; }
.map-drawing { display: block; width: 100%; height: 100%; }
.map-drawing path { fill: var(--paper); stroke: var(--grey); stroke-width: 0.6; stroke-linejoin: round; }
.map-drawing path.shaded { fill: url(#arcering); }
.map-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.2; }

/* Without WebGL: one line in the zone, which then takes only its room. */
.view.no-webgl { min-height: 120px; }
.view-empty { margin: 0; padding: 24px 16px; max-width: 32em; }

/* The panel: the background of a bond, or one of the tools. */

/* Positioned, so what is hidden for the eye stays inside its column. */
.info { position: relative; display: flex; flex-direction: column; padding: var(--edge); }
.cover { display: none; }
.print-only { display: none; }
.term-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.term-note { flex: 1 1 100%; }
.term-note summary { display: inline-flex; align-items: center; min-height: var(--row); min-width: var(--row); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.term-note:not([open]) > :not(summary) { display: none; }
.bond-info, .tool { display: flex; flex-direction: column; gap: 8px; }
.bond-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.info-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.info-title:focus:not(:focus-visible), .info-section:focus:not(:focus-visible), .term-entry:focus:not(:focus-visible) { outline: none; }
.jump, .action {
  display: inline-flex;
  align-items: center;
  min-height: var(--row);
  min-width: var(--row);
}
.lede, .help, .tool-kicker, .note { margin: 0; font-size: 13px; line-height: 16px; color: var(--grey); }
.bond-head { flex-direction: column; align-items: stretch; gap: 4px; }
.showing { margin: 0; font-size: 13px; line-height: 16px; font-weight: 600; }
.jumps { display: flex; flex-wrap: wrap; column-gap: 12px; border-top: 1px solid var(--rule); }
.jumps .jump { font-size: 13px; }
.tool-kicker { font-weight: 600; }
.info-section { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--rule); }
.info-heading { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.info-subheading { margin: 4px 0 0; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--grey); }
.claim { margin: 0; line-height: 24px; }
/* A source's number is small but in ink: a thin digit in grey falls
   under the contrast of its letters. */
.ref, .strength { font-size: 13px; line-height: 16px; color: var(--grey); }
.ref { white-space: nowrap; color: var(--ink); }
/* The terms a section uses, linked once at its foot. */
.term-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin: 0; font-size: 13px; line-height: 16px; }
.term-row-label { color: var(--ink); }
.term { display: inline-flex; align-items: center; min-height: var(--row); min-width: var(--row); font-size: 15px; }
.mark { white-space: nowrap; }
.ref { font-weight: 600; }
.facts { margin: 0; }
.facts dt { margin-top: 4px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--grey); }
.facts dd { margin: 0; line-height: 24px; }
.alike { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.courses { list-style: none; margin: 0; padding: 0; }
.courses li { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.courses li + li { border-top: 1px solid var(--rule); }
.course-text { margin: 0; line-height: 24px; }
.plans { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 16px; }
.plan-fig { display: inline-flex; flex-direction: column; gap: 4px; }
.plan-svg svg { display: block; }
.plan-word { font-size: 13px; line-height: 16px; color: var(--grey); }
.course-n { font-weight: 600; }

.variants { display: flex; flex-direction: column; gap: 8px; }
.variant-row { display: flex; flex-direction: column; gap: 4px; }
.variant-kind { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--grey); }
.variant-links { display: flex; flex-wrap: wrap; gap: var(--gap); }
.variant {
  display: inline-flex;
  align-items: center;
  min-height: var(--row);
  min-width: var(--row);
  padding: 0 12px;
  border: 1px solid var(--grey);
  text-decoration: none;
}
.variant:hover { text-decoration: underline; }
.variant[aria-current="true"] { border-color: var(--green); background: var(--green); color: var(--paper); }

.examples, .sources { margin: 0; padding: 0; list-style: none; }
.sources { counter-reset: bron; }
.examples li + li, .sources li + li { border-top: 1px solid var(--rule); }
.example, .source {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--row);
  padding: 4px 0;
  text-decoration: none;
}
.sources li { counter-increment: bron; display: grid; grid-template-columns: 28px minmax(0, 1fr); }
.sources li::before { content: counter(bron) "."; padding-top: 4px; color: var(--grey); }
a.example:hover .example-name, a.source:hover .source-title { text-decoration: underline; }
.example-name, .source-title { display: block; text-decoration: underline; text-underline-offset: 4px; }
.example-line, .source-line { display: block; font-size: 13px; line-height: 16px; color: var(--grey); }
.heading-note { font-size: 13px; font-weight: 400; color: var(--grey); }

.citation { margin: 0; line-height: 24px; overflow-wrap: anywhere; }
.cite-keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }
.copied { font-size: 13px; line-height: 16px; color: var(--green); }

/* The tools. */

.answers { display: flex; flex-direction: column; }
.answer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 0;
  text-decoration: none;
}
.answers .answer + .answer { border-top: 1px solid var(--rule); }
.answer:hover .answer-text { text-decoration: underline; }
.answer-drawing svg, .result-drawing svg, .pair-drawing svg, .term-drawing svg { display: block; max-width: 100%; height: auto; }
.answer-drawing { flex: none; }
.trail { margin: 0; padding-left: 20px; font-size: 13px; line-height: 16px; color: var(--grey); }
.tool-actions, .tool-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap) 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-weight: 600; }
.select { min-height: var(--row); padding: 0 8px; border: 1px solid var(--grey); background: var(--paper); }
.field-row { display: flex; gap: var(--gap); }
.field-row .select { flex: 1; min-width: 0; }
.candidate-status { font-weight: 400; color: var(--grey); }
.pair { display: flex; flex-direction: column; gap: 8px; }
.pair-figure { margin: 0; }
.pair-name { font-weight: 600; }
.compare-list dt { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.compare-list dd { margin: 4px 0 0; }
.compact .source { min-height: var(--row); }
.terms { margin: 0; }
.term-entry { padding: 8px 0 8px 12px; border-top: 1px solid var(--rule); box-shadow: inset 4px 0 0 transparent; scroll-margin-top: 8px; }
.term-entry.current { box-shadow: inset 4px 0 0 var(--green); }
.term-entry dt { font-weight: 600; }
.term-entry dfn { font-style: normal; }
.term-entry dd { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }

/* Laptop, 1100 px and more: three columns that do not scroll as a page;
   the catalog and the panel scroll inside their columns. */
@media (min-width: 1100px) {
  :root {
    --catalog: clamp(300px, 22vw, 360px);
    --info: clamp(340px, 26vw, 440px);
    --band: clamp(208px, 30vh, 320px);
  }
  body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  .page-header { flex: none; min-height: 52px; }
  .app {
    flex: 1;
    min-height: 0;
    grid-template-columns: var(--catalog) minmax(0, 1fr) var(--info);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "catalog view info";
  }
  .catalog { grid-area: catalog; min-height: 0; overflow-y: auto; box-shadow: inset -1px 0 0 var(--rule); }
  .fold-summary { display: none; }
  .view { grid-area: view; }
  .band { flex: none; height: var(--band); }
  .view-stage canvas { touch-action: none; }
  .info { grid-area: info; min-height: 0; overflow-y: auto; box-shadow: inset 1px 0 0 var(--rule); scroll-snap-type: y mandatory; }
  /* The panel comes to rest at the start of a block, so no line stands
     cut in half at its top edge. */
  .info :is(header, nav, p, li, dt, dd, h2, h3, h4, figure, table, .variant-row, .term-entry, .answer, .cite-keys, .field, .tool-actions) { scroll-snap-align: start; }
  /* At the bottom edge a band of paper covers the line the edge would cut
     (edge.js), until it scrolls fully into view. */
  .cover { display: block; position: relative; z-index: 1; align-self: end; justify-self: start; height: 0; background: var(--paper); pointer-events: none; }
  .cover-info { grid-area: info; box-shadow: inset 1px 0 0 var(--rule); }
  .cover-catalog { grid-area: catalog; box-shadow: inset -1px 0 0 var(--rule); }
}

/* Between 1100 and 1279 px the centre is narrow: the band stacks, the
   elevation over the map, so the drawing keeps its width. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .band { height: auto; grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .aanzicht-drawing { height: 96px; flex: none; }
  .map { grid-template-columns: minmax(0, 1fr) 96px; }
  .map-holder { height: auto; width: 96px; }
}

/* Between 760 and 1099 px: the catalog beside the view, the panel under it. */
@media (min-width: 760px) and (max-width: 1099px) {
  .app {
    grid-template-columns: var(--catalog) minmax(0, 1fr);
    grid-template-areas: "catalog view" "catalog info";
    grid-template-rows: auto 1fr;
  }
  .catalog { grid-area: catalog; box-shadow: inset -1px 0 0 var(--rule); }
  .fold-summary { display: none; }
  .view { grid-area: view; }
  .info { grid-area: info; }
  .view-stage { flex: none; aspect-ratio: 4 / 3; max-height: 56svh; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .aanzicht-drawing { height: 152px; flex: none; }
  .map { grid-template-columns: minmax(0, 1fr) 152px; }
  .map-holder { height: auto; width: 152px; }
}

/* Phone, under 760 px: the search and its folded list, then the stage,
   its band and the panel. */
@media (max-width: 759px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "catalog" "view" "info"; }
  .page-title { flex: 1 1 100%; flex-wrap: wrap; }
  .catalog { grid-area: catalog; border-bottom: 1px solid var(--rule); }
  .view { grid-area: view; }
  .view-stage { flex: none; aspect-ratio: 4 / 3; max-height: 48svh; }
  .stage-pattern:not(.stage-showing) { display: none; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .aanzicht-drawing { height: 152px; flex: none; }
  .map { grid-template-columns: minmax(0, 1fr) 152px; }
  .map-holder { height: auto; width: 152px; }
  .info { grid-area: info; }
}

@media (max-height: 420px) {
  .view-hint { display: none; }
  .stage-name strong { font-size: 15px; line-height: 20px; }
}

/* Forced colours: the chosen, pressed and current states keep a mark of
   their own, and the drawings and chips keep their colours. */
@media (forced-colors: active) {
  .key[aria-pressed="true"], .key.primary, .tool-link[aria-current="page"], .bond[aria-current="page"], .variant[aria-current="true"] {
    outline: 4px solid Highlight;
    outline-offset: -4px;
    text-decoration: underline;
  }
  .chip, .thumb, .map-drawing, .aanzicht-drawing svg, .plan-svg svg, .term-drawing svg, .answer-drawing svg, .result-drawing svg, .pair-drawing svg { forced-color-adjust: none; }
}

/* Print: the bond on paper, its elevation, map and background; no list,
   no 3D, no controls. */
@media print {
  @page { size: A4; margin: 12mm; }
  body { height: auto; display: block; overflow: visible; font-size: 13px; line-height: 16px; }
  .tools, .catalog, .view-stage canvas, .view-hint, .view-controls, .cite-keys, .jumps, .variants, .tool-nav, .term-drawing, .term-row, .skip, .help { display: none !important; }
  /* The bond's name heads the sheet, above its drawings. */
  .view-stage { position: static; height: auto; aspect-ratio: auto; max-height: none; background: none; }
  .stage-name { position: static; margin: 0 0 4px; }
  .stage-name strong, .stage-name span { background: none; padding: 0; }
  .plans { gap: 0 8px; }
  .plan-word, .note:not(.strengths-key):not(.examples-from), .action, .showing + .jumps { display: none !important; }
  .courses li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0; }
  .course-text { flex: 1; line-height: 16px; }
  /* On paper the plans are too small to lay from: the sheet holds them. */
  .plans { display: none !important; }
  .print-only { display: block; margin: 0; }
  .plan-svg svg { width: 44px; height: auto; }
  /* A source on one run of text: title, publisher, the day it was opened. */
  body > .sr { display: none; }
  .source { display: block; }
  .sources li { padding: 0; margin: 0; }
  .sources li::before { padding-top: 0; }
  .source-title, .source-line { line-height: 16px; }
  .source-title, .source-line { display: inline; }
  .source-line::before { content: ". "; }
  .facts dt { margin-top: 0; }
  .page-header { padding: 0 0 4px; }
  .app { display: block; }
  .view { background: none; }
  .band { display: grid; grid-template-columns: minmax(0, 1fr) 360px; height: auto; padding: 4px 0; box-shadow: none; break-inside: avoid; }
  .aanzicht-drawing { height: auto; }
  .aanzicht-drawing svg { width: 100%; height: auto; max-height: 104px; }
  /* The stage's name heads the sheet; the panel need not repeat it. */
  .bond-head .info-title { display: none; }
  .map { max-width: 100%; grid-template-columns: minmax(0, 1fr) 96px; }
  .map-holder { height: auto; width: 96px; }
  .info { padding: 4px 0 0; overflow: visible; box-shadow: none; }
  .bond-info { gap: 4px; }
  .info-section { padding-top: 4px; gap: 0; break-inside: auto; }
  .claim, .facts dd, .courses li, .citation { line-height: 16px; }
  /* The citation is for the screen; the printed sheet carries its address in the browser's footer. */
  #citeren { display: none !important; }
  .examples, .sources, #namen .facts { columns: 2; column-gap: 16px; }
  #namen .facts dd { break-inside: avoid; }
  .examples li, .sources li { break-inside: avoid; border-top: 0; }
  .example, .source { min-height: 0; padding: 0; }
  .term { padding: 0; margin: 0; text-decoration: none; }
  a { text-decoration: none; }
}