/* Trestle app colours on top of trestle-theme.css (load after it).
   The pages were written with their own colour names (--card, --fg, --muted, --line,
   --accent ...); these map them onto the theme's variables, so both modes, and
   <html data-theme="light|dark">, follow the theme. Status colours the theme does not
   define (bad, warn, call RX/TX) get a value per mode here. */
:root {
  --card:   var(--surface);
  --fg:     var(--text);
  --muted:  var(--text-dim);
  --line:   var(--border);
  --accent: var(--accent-bg);          /* Dogwood Gold: primary buttons, active tabs */
  --link:   var(--tr-gold);            /* links and link-like buttons */
  --bad:  #f28b82;  --warn: #f0c674;
  --code: #262624;  --soft: #262624;
  --rx: #16321f;  --rxfg: #8fe0a8;  --tx: #3a1a18;  --txfg: #f5a19a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --link: var(--tr-forest);            /* gold on white is unreadable */
    --bad:  #b3261e;  --warn: #8a5a00;
    --code: #f0f0ec;  --soft: #f0f0ec;
    --rx: #e6f4ea;  --rxfg: #1f7a3d;  --tx: #fdecea;  --txfg: #b3261e;
  }
}
:root[data-theme="light"] {
  --link: var(--tr-forest);
  --bad:  #b3261e;  --warn: #8a5a00;
  --code: #f0f0ec;  --soft: #f0f0ec;
  --rx: #e6f4ea;  --rxfg: #1f7a3d;  --tx: #fdecea;  --txfg: #b3261e;
}
/* The header stays at the top as the page scrolls, as before. */
#topnav { position: sticky; top: 0; z-index: 10; }
/* Trestle's pages set box-sizing:border-box everywhere; the theme's full-width mobile
   nav row (flex-basis 100% plus its padding, pulled out by negative margins) is written
   for content-box. */
@media (max-width: 640px) { #topnav .links { box-sizing: content-box; } }
/* Every page opens the same way: a title and one line saying what the page is for. */
.page-intro { padding: 20px 16px 14px; max-width: 1200px; }
.page-intro h1 { font-size: 20px; margin: 0 0 4px; font-weight: 650; }
.page-intro p { margin: 0; color: var(--text-dim); max-width: 80ch; }
/* BC-TRBO under TRESTLE on phones too (the theme hides it there). */
@media (max-width: 640px) { #topnav .brand-tag { display: block; font-size: 8px; } }