/* antani: plain pages, readable in any browser, nothing that moves.
   Two faces: a serif for reading, a monospace for everything else. */
:root {
  --paper: #f3f0e6;
  --ink: #1e1d1a;
  --faint: #6a665c;
  --rule: #b9b3a3;
  --link: #1b4b8f;
  --visited: #5a2d82;
  --field: #fbfaf4;
  --shade: #8f897a;
  --serif: Georgia, "Times New Roman", Times, serif;
  --mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, "Courier New", monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1a17;
    --ink: #dcd8cc;
    --faint: #9a958a;
    --rule: #4a473f;
    --link: #8db4f0;
    --visited: #c3a2e6;
    --field: #22221e;
    --shade: #2e2c27;
  }
}

body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.5 var(--serif); }
.page { max-width: 40em; margin: 0 auto; padding: 1em 16px 2em; }
a { color: var(--link); }
a:visited { color: var(--visited); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1em 0; }
::selection { background: #cdeeff; color: #06121a; }

/* Monospace: headings, navigation, notes, tables, code, the footer */
h1, h2, h3, h4, header, footer, code, pre, table, dl.news dt, .small {
  font-family: var(--mono);
}
h1, h2, h3, h4 { font-weight: bold; line-height: 1.3; }
h1 { font-size: 1.35em; margin: 0.8em 0 0.6em; }
h2 { font-size: 1.05em; margin: 1.8em 0 0.5em; }
code { font-size: 0.85em; }

header .site { margin: 0.4em 0 0.1em; font-size: 1.15em; font-weight: bold; }
header .site a { color: var(--ink); text-decoration: none; }
header .site .prompt { margin-left: 0.1em; }
header .site .cursor {
  display: inline-block; width: 0.6em; height: 1.05em; margin-left: 0.3em;
  vertical-align: -0.15em; background: var(--ink); opacity: 0.55;
}
nav { font-size: 0.85em; }
nav a[aria-current] { color: var(--ink); text-decoration: none; font-weight: bold; }
.small, footer { font-size: 0.8em; color: var(--faint); }
footer .build { margin-top: 0.3em; }

table { border-collapse: collapse; width: 100%; margin: 0.5em 0 1em; font-size: 0.78em; }
th, td { border: 1px solid var(--rule); padding: 0.3em 0.5em; text-align: left; vertical-align: top; }
th { background: color-mix(in srgb, var(--rule) 25%, transparent); }
.index td:first-child { white-space: nowrap; }

dl.news dt { font-size: 0.85em; font-weight: bold; margin-top: 0.6em; }
dl.news dd { margin: 0 0 0 2em; }

pre.ls {
  font-size: 0.75em; line-height: 1.45;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  overflow-x: auto; padding: 0.6em 0.8em; margin: 0.5em 0;
  border: 1px solid var(--rule); background: color-mix(in srgb, var(--rule) 12%, transparent);
}
pre.ls .cmd, pre.ls .c { color: var(--faint); }

/* The planner: a plain document, as in the downloadable file and on Gemini.
   Sections one after the other, fields in a row, ruled tables, all in the
   monospace. */
.planner {
  margin: 1.5em 0; padding: 0.2em 0 1em; font: 15px/1.6 var(--mono);
  border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule);
}
.planner .hp h3 { font-size: 1em; margin: 2em 0 0.7em; }
.planner .hp > :first-child h3 { margin-top: 1.2em; }
.planner .hp h3::before { content: "## "; color: var(--faint); }
.planner .hp h4 { font-size: 1em; font-weight: normal; margin: 1.8em 0 0.5em; }
.planner .hp h4::before { content: "### "; color: var(--faint); }
.planner .hp p { margin: 0.6em 0; }
.planner .hp-note { color: var(--faint); }
.planner .hp label { display: inline-block; white-space: nowrap; margin: 0.25em 1.6em 0.25em 0; }
.planner .hp input {
  font: inherit; color: var(--ink); background: var(--field);
  border: 1px solid var(--rule); border-top-color: var(--shade); border-left-color: var(--shade);
  padding: 1px 4px; width: 5.5em;
}
.planner .hp input[size="3"], .planner .hp input[size="2"] { width: 3.5em; }
.planner .hp input[type="text"] { width: auto; }
.planner .hp input:focus { outline: 1px dotted var(--ink); outline-offset: 1px; }
.planner .hp button {
  font: inherit; color: var(--ink); background: var(--field); cursor: pointer;
  border: 2px outset var(--rule); padding: 0 8px;
}
.planner .hp button:active { border-style: inset; }
.planner .hp-settings { margin: 2em 0; }
.planner .hp-settings[open] > summary { margin-bottom: 0.8em; }
.planner .hp-settings > summary { cursor: pointer; font-weight: bold; }
.planner .hp-drawing { display: block; width: 100%; max-width: 660px; height: auto; margin: 1.2em 0; }
.planner .hp-counts { margin: 1.2em 0; line-height: 1.75; }
.planner .hp-counts div { display: flex; }
/* Dotted leaders, like a table of contents */
.planner .hp-counts dt { flex: 0 0 15em; overflow: hidden; white-space: nowrap; color: var(--faint); }
.planner .hp-counts dt::after { content: " ........................................"; }
.planner .hp-counts dd { margin: 0 0 0 0.5em; }
.planner .hp table { font-size: 1em; width: auto; margin: 0.6em 0 1.4em; }
.planner .hp td, .planner .hp th { padding: 0.3em 0.8em; }
.planner .hp td, .planner .hp th { white-space: nowrap; }
.planner .hp-materials td { border: 0; padding: 0.1em 0.4em 0.1em 0; }
.planner .hp-materials th { border: 0; background: none; padding-left: 0; color: var(--faint); font-weight: normal; }
.planner .hp-settings, .planner .hp-compare-body { overflow-x: auto; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .planner { font-size: 14px; }
  .planner .hp-counts dt { flex-basis: 11em; }
}