/* QPTOOLS suite base - operator pages of every product (docs/BLUEPRINT.md).
   THE MASTER IS shared/qpt.css. Each product serves an IDENTICAL copy, loaded FIRST, then its own CSS on top:
   qptcaddy/public/qpt.css, qptgfx/public/static/css/qpt.css, soliprompter/app/qpt.css, home/qpt.css.
   Change it here, then copy: sh tools/suite-check.sh --sync  (the check refuses a release while a copy differs).
   Holds only what every product shares today; buttons, inputs and badges join with D-00 (D-02, D-03). */
:root {
  --bg: #1a1f26; --panel: #232a33; --panel-2: #2b343f; --line: #36424f;
  --text: #ecf0f4; --muted: #9aa7b5; --link: #7cb8ff;
  --live: #e5443a; --amber: #f3b33d; --green: #3ec27f;
  --bad-text: #ff8a93; /* red for WORDS (6.4:1 on the background); --live stays for marks and borders */
  --radius: 10px; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 650; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .tnum { font-variant-numeric: tabular-nums; }
.err { color: var(--bad-text); font-weight: 600; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }

/* the product word mark: QPT<b>GFX</b>, SOLI<b>PROMPTER</b> */
.qpt-word { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; letter-spacing: .03em; color: var(--text); }
.qpt-word b { font-weight: 800; color: var(--muted); }

/* the way back to the suite front page, before every product mark:
   <span class="brandline"><a class="suite-link" href="https://tools.videoforweb.no/">QPTOOLS</a><span class="suite-sep" aria-hidden="true">/</span>(product mark)</span> */
.brandline { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.suite-link { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); text-decoration: none !important;
  padding: 8px 2px; }
.suite-link:hover { color: var(--text); }
.suite-sep { color: #55636f; font-size: .85rem; }
@media (max-width: 760px) { .suite-link { letter-spacing: .04em; } .brandline { gap: .3em; } }
.brand-small { display: inline-flex; align-items: center; gap: .35em; font-size: .82rem; opacity: .7; text-decoration: none !important; }
.brand-small:hover { opacity: 1; }
.brand-small .qpt-word, .brand-small .qpt-word b { color: var(--muted); font-weight: 700; }