/*
  A published page.

  Deliberately plain. A bootpage carries no appearance of its own, so this
  is the reference renderer's house style and nothing more - the same page
  served by another consumer should look like that consumer, not like this.
*/

:root {
  /* Keeps the browser's own colours - scrollbars, form controls, anything
     using a system colour - on the same scheme as the properties below.
     Without it the two halves can disagree, which is how the editor ended
     up with light text on a white menu. */
  color-scheme: light dark;

  --ink: #111;
  --bg: #fff;
  --faint: #6e6e6e;
  --line: #e4e4e4;
  --accent: #2b6cb0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ececec;
    --bg: #141414;
    --faint: #9a9a9a;
    --line: #2e2e2e;
    --accent: #7fb3e8;
  }
}

body {
  margin: 0;
  font: 1.05rem/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif;
  color: var(--ink);
  background: var(--bg);
}

article {
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 8rem 1.5rem;
}

h1 { font-size: 2.4rem; line-height: 1.2; margin: 0 0 .75rem 0; }
h3 { font-size: 1.5rem; margin: 2rem 0 .6rem 0; }
h4 { font-size: 1.15rem; margin: 1.6rem 0 .5rem 0; }

address {
  display: block;
  font: .95rem/1.5 system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  font-style: normal;
  color: var(--faint);
  margin-bottom: 2.5rem;
}

address a { color: inherit; }

p, ul, ol, blockquote, figure, pre { margin: 0 0 1.1rem 0; }

a { color: var(--accent); }

blockquote {
  border-left: 3px solid var(--line);
  padding-left: 1rem;
  margin-left: 0;
  font-style: italic;
}

pre {
  font: .9rem/1.5 ui-monospace, Menlo, Consolas, monospace;
  background: rgba(128, 128, 128, .08);
  padding: .9rem 1rem;
  border-radius: 4px;
  /* Wide content scrolls inside its own box rather than making the page
     scroll sideways. */
  overflow-x: auto;
}

figure { margin-inline: 0; }
img, video, iframe { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/*
  A table arrives as nested lists, because the core tag set has none. A
  consumer that implements the `table` module lays these out as a grid;
  this one does not, so they render as nested bullets - which is exactly
  what a site without the module should show, and is why the nested form
  was chosen over a flatter one.
*/
ul ul { margin: 0; }

/* ------------------------------------------------------------- lenses
 *
 * The tree lens. No script anywhere - published pages are served under
 * default-src 'none', so an inspector that needed JavaScript could not
 * live on this origin at all. Everything below is static markup and this
 * stylesheet.
 */

.lensnote { color: var(--faint); font-size: 0.9rem; }

.facts { display: grid; grid-template-columns: max-content 1fr;
         gap: 0.2rem 1rem; margin: 1.5rem 0; font-size: 0.9rem; }
.facts dt { color: var(--faint); }
.facts dd { margin: 0; }

.tree, .tree ol { list-style: none; padding-left: 1rem; margin: 0; }
.tree > li { border-left: 2px solid var(--line); padding: 0.35rem 0 0.35rem 0.75rem;
             margin: 0.2rem 0; }

/* Falling back is the normal path for a Level 0 consumer, not a failure,
 * so it is marked rather than warned about. */
.tree > li.fallback { border-left-color: var(--accent); }

.head { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.tag { font-weight: 600; }
.id { font-size: 0.85rem; }
.anon { font-size: 0.85rem; color: var(--faint); }
.note { font-size: 0.8rem; color: var(--accent); }

.text { color: var(--faint); font-size: 0.9rem; padding: 0.15rem 0 0.15rem 0.75rem;
        border-left: 2px dotted var(--line); margin: 0.15rem 0; }

.attrs { margin: 0.3rem 0 0.1rem; font-size: 0.85rem; }
.attr { display: flex; gap: 0.5rem; align-items: baseline; }
.family { min-width: 5.5rem; color: var(--faint); font-size: 0.75rem;
          text-transform: uppercase; letter-spacing: 0.03em; }
.attr .value { color: var(--faint); }

/* require- fails closed when a consumer cannot evaluate it, which is the
 * one family with a safety consequence. Worth seeing at a glance. */
.attr.require .name { color: var(--accent); }

/* The lens bar.
 *
 * Fixed to the bottom so it is reachable without scrolling, and quiet
 * enough that it does not compete with the document. No script: switching
 * lens is navigation, and three links do it.
 */

.lensbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 0.25rem; justify-content: center;
  padding: 0.4rem;
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

.lensbar a, .lensbar .here {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
}

.lensbar a { color: var(--faint); }
.lensbar a:hover { color: var(--ink); background: var(--line); }

/* Where you are, not a link. */
.lensbar .here { color: var(--bg); background: var(--ink); }

/* So the bar never covers the last line of a page. */
article { padding-bottom: 3.5rem; }