/* User guide — colours follow the dashboard's Bootstrap "flatly" theme. */
:root {
  --fg: #212529; --muted: #6c757d; --bg: #ffffff; --panel: #f6f7f9; --rule: #dee2e6;
  --head: #2c3e50; --link: #128a72; --mast: #2c3e50; --mast-fg: #ffffff;
  --good: #18bc9c; --warn: #f39c12; --bad: #e74c3c; --neutral: #95a5a6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg: #e6e8eb; --muted: #a3acb5; --bg: #1b1f24; --panel: #242a31; --rule: #39414a;
    --head: #e6e8eb; --link: #4fd1b4; --mast: #12171c; --mast-fg: #e6e8eb;
  }
}
:root[data-theme="dark"] {
  --fg: #e6e8eb; --muted: #a3acb5; --bg: #1b1f24; --panel: #242a31; --rule: #39414a;
  --head: #e6e8eb; --link: #4fd1b4; --mast: #12171c; --mast-fg: #e6e8eb;
}

/* Math: the reader's own math font first; the bundled subset only when there is none. */
@font-face {
  font-family: "Guide Math"; font-display: swap;
  src: url("fonts/STIXTwoMath-subset.woff2") format("woff2");
}
math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", "Guide Math", math; }
math[display="block"] { margin: 1rem 0; font-size: 1.12em; overflow-x: auto; overflow-y: hidden; }

html { background: var(--bg); scroll-padding-top: 4rem; }
body { margin: 0; color: var(--fg); background: var(--bg);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--link); text-underline-offset: 2px; }

.masthead { position: sticky; top: 0; z-index: 10; display: flex; gap: 1rem; align-items: baseline;
  background: var(--mast); color: var(--mast-fg); padding: .7rem 16px; font-size: .95rem; }
.masthead a.home { color: var(--mast-fg); font-weight: 600; text-decoration: none; }
.masthead .doc { opacity: .75; }

.layout { max-width: 76rem; margin: 0 auto; padding: 0 16px; }
main { max-width: 46rem; min-width: 0; padding-bottom: 4rem; }

/* Contents: collapsible above the text on narrow screens, a sticky column on wide ones. */
.toc { margin: 1rem 0; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); }
.toc summary { cursor: pointer; padding: .5rem .8rem; font-weight: 600; }
.toc nav { padding: 0 .8rem .6rem; font-size: .88rem; line-height: 1.45; }
.toc ul { list-style: none; margin: 0; padding-left: .9rem; }
.toc nav > ul { padding-left: 0; }
.toc li { margin: .15rem 0; }
.toc a { color: var(--fg); text-decoration: none; }
.toc a:hover { color: var(--link); text-decoration: underline; }
.toc a.here { color: var(--link); font-weight: 600; }
.toc nav > ul > li > a { font-weight: 600; }
@media (min-width: 1000px) {
  .layout { display: grid; grid-template-columns: 17rem minmax(0, 46rem); gap: 3rem; }
  .toc { position: sticky; top: 3.6rem; align-self: start; max-height: calc(100vh - 4.6rem);
    overflow-y: auto; margin-top: 2rem; border: 0; background: none; }
  .toc summary { display: none; }
  .toc nav { padding: 0; }
}

h1, h2, h3, h4 { color: var(--head); line-height: 1.25; }
h1 { font-size: 1.9rem; margin: 3rem 0 1rem; padding-top: 1rem; border-top: 3px solid var(--head); }
main > h1:first-child { margin-top: 2rem; }
h2 { font-size: 1.45rem; margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.22rem; margin: 2.6rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); }
h4 { font-size: .9rem; margin: 1.5rem 0 .4rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.subtitle { color: var(--muted); margin-top: -.6rem; }

/* Fact box at the top of each tile and tab. */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: .8rem 0 1rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: .7rem 1rem; font-size: .9rem; }
dl.facts dt { font-weight: 600; color: var(--muted); }
dl.facts dd { margin: 0; }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: .35rem; } }

table { border-collapse: collapse; width: 100%; font-size: .93rem; margin: .8rem 0 1.2rem; display: block; overflow-x: auto; }
th, td { border-bottom: 1px solid var(--rule); padding: .35rem .6rem; text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

.tone { display: inline-block; padding: .05rem .45rem; border-radius: .3rem; font-size: .85em; font-weight: 600; color: #fff; white-space: nowrap; }
.tone.good { background: var(--good); } .tone.warn { background: var(--warn); }
.tone.bad { background: var(--bad); } .tone.neutral { background: var(--neutral); }

.note { border-left: 3px solid var(--link); background: var(--panel); padding: .6rem 1rem; margin: 1rem 0; font-size: .95rem; }
.note > :first-child { margin-top: 0; } .note > :last-child { margin-bottom: 0; }
code { font-size: .88em; background: var(--panel); padding: .05rem .3rem; border-radius: 3px; }
.colophon { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .85rem; }

@media print {
  .masthead, .toc { display: none; }
  .layout { display: block; } main { max-width: none; }
  h3 { break-after: avoid; } dl.facts, table { break-inside: avoid; }
}