:root { --accent: #FFD21F; --accent-on: #0B0B0A; } /* decisions/0022 */

.dx-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.dx-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--text); text-decoration: none; }
.dx-sub { color: var(--muted); font-weight: 500; }
.dx-bar nav { display: flex; gap: 18px; font-size: 13.5px; }
.dx-bar nav a { color: var(--muted); text-decoration: none; }
.dx-bar nav a:hover { color: var(--text); }

.dx-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 56px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 40px) 96px;
}
.dx-toc { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.dx-toc a { color: var(--muted); text-decoration: none; }
.dx-toc a:hover { color: var(--text); }

.dx-body h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1em; }
.dx-body section { margin-bottom: 44px; scroll-margin-top: 80px; }
.dx-body h2 { font-size: 1.35rem; margin: 0 0 0.6em; }
.dx-body p, .dx-body li { line-height: 1.7; color: var(--muted); }
.dx-body em, .dx-body strong { color: var(--text); font-style: normal; }
.dx-body a { color: var(--accent-text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dx-body code { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 0.88em; }

.verdicts { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin: 0; }
/* 1.18rem bold is "large text" (18.7px), which is what lets the status red (#DC2626, 3.8:1 on the surface) pass AA at 3:1 without theming a status colour */
.verdicts dt { background: var(--surface); padding: 14px 16px 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; }
.verdicts dd { background: var(--surface); margin: 0; padding: 0 16px 14px; line-height: 1.6; color: var(--muted); }
/* --ok-text/--warn-text, not --ok/--warn directly: the shared tokens (#22C55E, #F59E0B, static/ott-core.css)
   read fine on the dark surface but fall to 2.3:1 / 2.1:1 on the light theme's white surface, short of even
   the 3:1 this 1.18rem/700 "large text" needs (found by the design detector, 2026-10-02). Darker, same-hue
   shades pass comfortably (~5:1) without touching the shared tokens other uses (icons, tints) still want at
   full saturation. Dark theme passes already, so these are a pass-through there. */
.verdicts dt[data-v="ok"] { color: var(--ok-text); }
.verdicts dt[data-v="warn"] { color: var(--warn-text); }
.verdicts dt[data-v="bad"] { color: var(--bad); }
.verdicts dt[data-v="muted"] { color: var(--muted); }

.dx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dx-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--muted); }
.dx-table td:first-child { white-space: nowrap; }

@media (max-width: 820px) {
  .dx-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dx-body code { overflow-wrap: anywhere; }
  .dx-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .dx-toc .eyebrow { width: 100%; margin: 0; }
}
@media (max-width: 420px) {
  .dx-bar { flex-wrap: wrap; row-gap: 8px; }
  .dx-bar nav { gap: 12px; }
  .theme-switch { margin-left: 4px; }
}

.verdicts dt[data-v="info"] { color: var(--info); }

/* The install guide's three platforms, and the footer with the legal links */
.dx-body h3 { font-size: 1.05rem; margin: 1.6em 0 0.4em; }
.dx-button { padding: 12px 18px; border: 0; border-radius: 12px; cursor: pointer; background: var(--accent); color: var(--accent-on); font: 700 1rem var(--font-text, inherit); }
.dx-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dx-body ol { padding-left: 1.3em; }
.dx-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 8px 16px 40px; font-size: 13px; }
.dx-foot a { color: var(--muted); text-decoration: none; }
.dx-foot a:hover { color: var(--text); text-decoration: underline; }


/* Light and dark (decisions/0023): the same two grounds as the app and the landing page. */
:root { --bg: #0B0B0A; --surface: #151412; --elevated: #1E1D1A; --border: #2D2B27; --accent-text: #FFD21F; --ok-text: var(--ok); --warn-text: var(--warn); }
:root[data-theme="light"] { --bg: #F6F4EE; --surface: #FFFFFF; --text: #0B0B0A; --muted: #55504A; --border: #D9D3C6; --accent-text: #0B0B0A; --ok-text: #15803D; --warn-text: #B45309; color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #F6F4EE; --surface: #FFFFFF; --text: #0B0B0A; --muted: #55504A; --border: #D9D3C6; --accent-text: #0B0B0A; --ok-text: #15803D; --warn-text: #B45309; color-scheme: light; }
}
:root[data-theme="dark"] { color-scheme: dark; }
.dx-bar nav { display: flex; align-items: center; }
.theme-switch { margin-left: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 3px; background: none; color: var(--muted); cursor: pointer; }
.theme-switch:hover { color: var(--text); }
.theme-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-switch .to-dark { display: none; }
:root[data-theme="light"] .theme-switch .to-light { display: none; }
:root[data-theme="light"] .theme-switch .to-dark { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-switch .to-light { display: none; }
  :root:not([data-theme]) .theme-switch .to-dark { display: block; }
}