/* Long-document pages — the How To tab and the About tab.
 *
 * Both are the same shape: a contents list built from the headings on the left,
 * one rendered markdown file on the right. This file was inside howto.html
 * until about.html needed the same thing, and a legal page whose type slowly
 * drifts away from the manual's is a page nobody notices has drifted.
 *
 * Every colour is a variable from theme.css. There is not one literal here. */

.howto {
  display: grid;
  grid-template-columns: minmax(11.25rem, 15rem) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding: 1.25rem;
  max-width: 75rem;
  margin: 0 auto;
}
@media (max-width: 780px) {
  .howto { grid-template-columns: 1fr; }
  .contents { position: static; max-height: none; }
}

/* The contents list follows you down the page. It is built from the headings,
   so a section added to the .md file appears here with nothing else edited. */
.contents {
  position: sticky;
  top: 0.75rem;
  /* 2026-09-13: left as `vh`, deliberately, while puzzles.css and the learning
     screen moved to `dvh`. Two reasons. The @media above switches this rule off
     entirely below 781px, so it never runs on a phone in the first place. And
     this is the one page in the app whose DOCUMENT scrolls — a long rendered
     markdown file — which is exactly the condition that makes the URL bar slide
     up and down, so a `dvh` height on a sticky element here would resize on
     every scroll, the whole time it is on screen. */
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  font-size: 0.78125rem; /* 12.5px */
  line-height: 1.9;
  border-left: 1px solid var(--ui-line);
  padding-left: 0.75rem;
}
.contents a { display: block; color: var(--ui-dim); text-decoration: none; }
@media (hover: hover) { .contents a:hover { color: var(--ui-text); } }
.contents a.h1 { font-weight: 700; color: var(--ui-text); margin-top: 0.5rem; }
.contents a.h3 { padding-left: 0.75rem; font-size: 0.75rem; }
.contents a.on { color: var(--ui-accent); }
/* On a touchscreen each entry is a thumb's height, not a line of text's — they
   were 23px, stacked edge to edge, and a tap chose a neighbour. 2026-09-14. */
@media (pointer: coarse) {
  .contents a { padding-block: 0.625rem; }
}

.doc { max-width: 74ch; font-size: 0.90625rem; /* 14.5px */ line-height: 1.7; }
.doc h1 { font-size: 1.5rem; margin: 0 0 0.875rem; }
.doc h2 {
  font-size: 1.0625rem; /* 17px */
  margin: 2.125rem 0 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--ui-line);
}
.doc h3 { font-size: 0.90625rem; /* 14.5px */ margin: 1.375rem 0 0.375rem; color: var(--ui-accent); }
.doc h4 { font-size: 0.84375rem; /* 13.5px */ margin: 1rem 0 0.25rem; }
.doc p { margin: 0.625rem 0; }
.doc ul, .doc ol { margin: 0.625rem 0; padding-left: 1.375rem; }
.doc li { margin: 0.1875rem 0; }
.doc b { color: var(--ui-text); }
.doc a { color: var(--ui-accent); }
.doc hr { border: 0; border-top: 1px solid var(--ui-line); margin: 1.625rem 0; }
.doc code {
  font: 0.78125rem/1.5 var(--ui-mono); /* 12.5px */
  background: var(--ui-btn);
  border-radius: 0.25rem;
  padding: 1px 0.3125rem;
}
.doc pre {
  background: var(--ui-btn);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.625rem 0.75rem;
  overflow-x: auto;
}
.doc pre code { background: none; padding: 0; }
.doc blockquote {
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--ui-accent);
  background: var(--ui-btn);
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
  color: var(--ui-dim);
}
/* Wide tables scroll inside themselves rather than widening the page. */
.doc table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
  font-size: 0.84375rem; /* 13.5px */
  display: block;
  overflow-x: auto;
}
.doc th, .doc td {
  text-align: left;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid var(--ui-line);
  vertical-align: top;
}
.doc th { color: var(--ui-dim); font-size: max(0.6875rem, var(--text-min)); /* 11px */ text-transform: uppercase; letter-spacing: .06em; }

/* Where the file is, for whoever is going to edit it. Only the operator needs
   it — a subscriber is reading the page, not maintaining it. */
.editnote { margin-top: 2.125rem; font-size: 0.75rem; color: var(--ui-dim); }