/* qsDEM -- shared theming, loaded by every page AFTER main.css so it can re-point the colours
   main.css hard-codes, and BEFORE each page's own <style> so a page can still override anything
   here.

   Every colour is a custom property, so a page can re-point one without editing this file. The
   About page's canvases read --panel, --grain, --chain and the rest on every frame, which keeps
   the plots on the page's palette with nothing to redraw by hand.

   The site is light only. Every page has the homepage's layout, the 336px sidebar and one 780px
   centre column, which is what the hero there is cut to, and the Appearance panel (text size
   only) sits in the empty margin to the right of the page rather than taking a column.
   Pages that draw canvases declare their own plot colours (--panel, --grain, ...) in their own
   <style>; only page chrome lives here. */

:root {
  /* pin the light palette for the native controls CSS colours do not reach: checkboxes, range
     thumbs, text fields and scrollbars. Without it an OS-level dark preference restyles them. */
  color-scheme: light;
  --fs: 15px;                    /* text size, set by the Appearance panel */
  --bg: #ffffff;
  --fg: #222222;
  --fg-dim: #555555;
  --link: #031326;               /* the darkest colour of cmcrameri lipari, t = 0 */
  --rule: #dddddd;
  --box-bg: #fafbfc;
  --warn: #a33333;
  --field-bg: #ffffff;
  --field-border: #bbbbbb;
  --field-focus: #666666;
  --btn-bg: #222222;
  --btn-fg: #ffffff;
  --btn-bg-hover: #444444;
}

/* ---- main.css hard-codes these, so they have to be re-pointed at the properties ---- */
body { max-width: 1276px; background: var(--bg); color: var(--fg); }
nav { background: var(--bg); }
a, a:visited, nav a, nav a:visited { color: var(--link); }
nav a[aria-current="page"], nav a[aria-current="page"]:visited { color: var(--fg); }
nav .sep { color: var(--fg-dim); }
h1, .main h3, .sidebar h3 { color: var(--fg); }
.sidebar .contact { color: var(--fg-dim); }
.sidebar .separator { border-top-color: var(--rule); }

.main { font-size: var(--fs); }
/* The sidebar scales too, in proportion to its 14px.  The homepage has no text in its centre
   column, so without this the panel would do nothing visible there. */
.sidebar { font-size: calc(var(--fs) * 14 / 15); }
.sidebar .contact { font-size: 0.93em; }                  /* 13px at Standard */

/* ---- Appearance panel ---- */
.appearance {
  width: 150px;
  font-size: 13px; color: var(--fg-dim);
  border: 1px solid var(--rule); background: var(--box-bg); padding: 12px 14px;
}
.appearance h2 { font-size: 13px; font-weight: normal; color: var(--fg); margin: 0 0 11px; }
.appearance .grp > span { display: block; font-size: 12px; margin-bottom: 4px; }
.appearance label { display: block; line-height: 1.95; color: var(--fg); cursor: pointer; }
.appearance input { margin-right: 7px; accent-color: var(--link); vertical-align: -1px; }
/* each choice previews its own size */
.appearance .t1 { font-size: 11.5px; }
.appearance .t2 { font-size: 13px; }
.appearance .t3 { font-size: 15.5px; }

/* Wide windows: the panel sits in the EMPTY margin to the right of the page, so the centre column
   keeps its full 780px.  The page is left-aligned and capped at 1276px, so its content ends at
   1216px (1276 less the 60px gutter); the panel starts one 40px gap after that, 1256px, and
   ends at 1406px, which clears a 1440px window even with a scrollbar showing. */
@media (min-width: 1440px) {
  .appearance { position: fixed; top: var(--nav-h); left: 1256px; }
}
/* Narrower windows have no such margin, so the panel drops back into the flow underneath the
   columns rather than squeezing the centre column.  The right margin makes it take a whole row,
   which is what forces the wrap, while the box itself stays its own 150px: stretched across the
   page, three radio buttons sit in an empty band 1156px wide. */
@media (max-width: 1439.98px) {
  .columns { flex-wrap: wrap; }
  .appearance { margin-top: 22px; margin-right: calc(100% - 150px); }
}

/* main.css stacks .columns here and gives .sidebar its own sticky background */
@media (max-width: 700px) {
  .sidebar { background: var(--bg); }
}

/* ---- the crushing qsDEM wordmark at the top of the sidebar ----
   Every page but the homepage, where the wordmark is the page heading itself (index.html's
   .mark).  Here it links home, and the page's own h1 follows it. */
.sidebar .brand { display: block; margin-bottom: 18px; }
.sidebar .brand-video { display: block; width: 100%; height: auto; }