/* docs.rollcall.bar — the metric reference. A reading surface, not a dashboard.
   Shares RollCall's accent (#b14cff) but takes a lighter, editorial layout with a
   light/dark toggle. Self-contained: no external fonts or CDNs. */

:root{
  color-scheme: light dark;
  /* neutrals biased a hair toward the purple accent, so they read as chosen */
  --bg:#fbfbfd;
  --surface:#ffffff;
  --card:#f6f5fa;
  --txt:#141318;
  --txt2:#4a4954;
  --muted:#77767f;
  --line:#e9e8ef;
  --line2:#d9d8e2;
  --accent:#7a2fd6;         /* darkened for AA on light bg */
  --accent-2:#b14cff;       /* brand purple, for accents on dark */
  --accent-wash:#f3ecfe;
  --pink:#c4145c;
  --amber:#9a4d00;
  --good:#0f7a4d;
  --code-bg:#f3f2f8;
  --shadow:0 1px 2px rgba(20,19,24,.04), 0 8px 24px -12px rgba(20,19,24,.12);
  --maxread:44rem;          /* ~68ch reading measure */
  --nav-w:17rem;
  --toc-w:14rem;
  --radius:14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0c11; --surface:#141319; --card:#191821; --txt:#f4f3f7; --txt2:#c3c2cd;
    --muted:#8f8e9b; --line:#26242f; --line2:#322f3d; --accent:#c88bff; --accent-2:#b14cff;
    --accent-wash:#1d1630; --pink:#ff6aa0; --amber:#ffb066; --good:#5fd39e; --code-bg:#1b1a23;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0d0c11; --surface:#141319; --card:#191821; --txt:#f4f3f7; --txt2:#c3c2cd;
  --muted:#8f8e9b; --line:#26242f; --line2:#322f3d; --accent:#c88bff; --accent-2:#b14cff;
  --accent-wash:#1d1630; --pink:#ff6aa0; --amber:#ffb066; --good:#5fd39e; --code-bg:#1b1a23;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --bg:#fbfbfd; --surface:#ffffff; --card:#f6f5fa; --txt:#141318; --txt2:#4a4954;
  --muted:#77767f; --line:#e9e8ef; --line2:#d9d8e2; --accent:#7a2fd6; --accent-2:#b14cff;
  --accent-wash:#f3ecfe; --pink:#c4145c; --amber:#9a4d00; --good:#0f7a4d; --code-bg:#f3f2f8;
  --shadow:0 1px 2px rgba(20,19,24,.04), 0 8px 24px -12px rgba(20,19,24,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}
img{max-width:100%}

/* ── App shell ─────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:100vh}
@media (max-width:1000px){.shell{grid-template-columns:1fr}}

/* top bar */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  height:60px;padding:0 20px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
  grid-column:1/-1;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em;color:var(--txt)}
.brand .dot{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent-2),var(--accent));box-shadow:0 0 0 4px var(--accent-wash)}
.brand small{font-weight:600;color:var(--muted);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-left:2px}
.topbar .spacer{flex:1}
.topbar .backlink{font-size:.9rem;color:var(--muted);font-weight:500}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--txt2);cursor:pointer}
.iconbtn:hover{border-color:var(--line2);color:var(--txt)}
.menu-toggle{display:none}
@media (max-width:1000px){.menu-toggle{display:inline-grid}}

/* sidebar nav */
.sidenav{
  position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);overflow-y:auto;
  padding:22px 14px 60px 22px;border-right:1px solid var(--line);background:var(--bg);
}
.scrim{display:none}   /* overlay only exists on mobile; never a desktop grid item */
@media (max-width:1000px){
  .sidenav{position:fixed;top:60px;left:0;width:min(84vw,var(--nav-w));z-index:35;
    transform:translateX(-102%);transition:transform .2s ease;box-shadow:var(--shadow);border-right:1px solid var(--line)}
  .sidenav.open{transform:none}
  .scrim{display:block;position:fixed;inset:60px 0 0 0;background:rgba(0,0,0,.35);z-index:34;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
}
.nav-search{width:100%;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--txt);font:inherit;font-size:.9rem;margin-bottom:16px}
.nav-search::placeholder{color:var(--muted)}
.nav-group{margin:0 0 18px}
.nav-group>.nav-h{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 8px;margin:0 0 6px}
.nav-group a{display:block;padding:6px 8px;border-radius:8px;color:var(--txt2);font-size:.92rem;line-height:1.35;font-weight:500}
.nav-group a:hover{background:var(--card);color:var(--txt);text-decoration:none}
.nav-group a.active{background:var(--accent-wash);color:var(--accent);font-weight:600}
.nav-results a mark{background:transparent;color:var(--accent);font-weight:700}

/* ── Content column ───────────────────────────────────────────────────── */
main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) var(--toc-w);gap:40px;padding:44px 40px 120px;max-width:calc(var(--maxread) + var(--toc-w) + 80px);margin:0 auto}
@media (max-width:1180px){main{grid-template-columns:minmax(0,1fr);padding:32px 24px 100px}}
article{min-width:0;max-width:var(--maxread)}
.breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.breadcrumbs a{color:var(--muted)}.breadcrumbs a:hover{color:var(--accent)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}

h1{font-family:var(--serif);font-weight:600;font-size:2.5rem;line-height:1.1;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.lede{font-size:1.22rem;line-height:1.5;color:var(--txt2);margin:0 0 8px;text-wrap:pretty}
h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.015em;margin:2.4em 0 .5em;scroll-margin-top:80px;text-wrap:balance}
h3{font-weight:700;font-size:1.06rem;margin:1.8em 0 .4em;letter-spacing:-.01em}
p{margin:0 0 1.05em}
article ul,article ol{margin:0 0 1.1em;padding-left:1.35em}
article li{margin:.3em 0}
strong{font-weight:650;color:var(--txt)}
hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}

/* the "chips" under H1: which dashboards use it */
.usedon{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--line2);border-radius:999px;font-size:.8rem;font-weight:600;color:var(--txt2);background:var(--surface)}
.chip .cd{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* callouts */
.callout{border:1px solid var(--line2);border-left:3px solid var(--accent);background:var(--card);border-radius:12px;padding:16px 18px;margin:1.4em 0}
.callout .ct{font-weight:700;font-size:.82rem;letter-spacing:.02em;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.callout.use{border-left-color:var(--good)} .callout.use .ct{color:var(--good)}
.callout.limit{border-left-color:var(--amber)} .callout.limit .ct{color:var(--amber)}
.callout.warn{border-left-color:var(--pink)} .callout.warn .ct{color:var(--pink)}
.callout p:last-child{margin-bottom:0}

/* formula / method */
.formula{font-family:var(--mono);font-size:.95rem;background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:1.1em 0;overflow-x:auto;line-height:1.5;color:var(--txt)}
details.method{border:1px solid var(--line2);border-radius:12px;background:var(--surface);margin:1.2em 0;overflow:hidden}
details.method>summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:650;font-size:.94rem;display:flex;align-items:center;gap:10px;color:var(--txt)}
details.method>summary::-webkit-details-marker{display:none}
details.method>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:none}
details.method[open]>summary::before{transform:rotate(45deg)}
details.method>summary:hover{background:var(--card)}
details.method .method-body{padding:2px 16px 16px;border-top:1px solid var(--line)}

/* references */
.refs{list-style:none;padding:0;margin:.6em 0 0;counter-reset:ref}
.refs li{counter-increment:ref;position:relative;padding:12px 0 12px 40px;border-top:1px solid var(--line)}
.refs li:first-child{border-top:0}
.refs li::before{content:"["counter(ref)"]";position:absolute;left:0;top:12px;font-family:var(--mono);font-size:.8rem;color:var(--accent);font-weight:700}
.refs .r-title{font-weight:650;color:var(--txt)}
.refs .r-meta{color:var(--muted);font-size:.9rem}
.refs .r-verify{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--good);font-weight:600;margin-left:8px}
.refs a.r-link{font-size:.86rem;font-weight:600;display:inline-block;margin-top:3px}
sup.cite a{font-family:var(--mono);font-size:.7em;font-weight:700;color:var(--accent);text-decoration:none;padding:0 1px}

/* verified badge / trust line */
.trustline{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--txt2);background:var(--accent-wash);border:1px solid var(--line2);border-radius:12px;padding:12px 15px;margin:1.6em 0}
.trustline .vk{flex:none;color:var(--accent);font-weight:700}

/* on-this-page rail */
.toc{position:sticky;top:90px;align-self:start;font-size:.86rem;max-height:calc(100vh - 120px);overflow-y:auto}
@media (max-width:1180px){.toc{display:none}}
.toc .toc-h{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.toc a{display:block;padding:4px 0 4px 12px;color:var(--muted);border-left:2px solid var(--line);line-height:1.35}
.toc a:hover{color:var(--txt);text-decoration:none}
.toc a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}

/* related / footer nav */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:1em 0}
.related a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--txt);box-shadow:var(--shadow)}
.related a:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-1px);transition:.15s}
.related a .rk{font-weight:650;letter-spacing:-.01em}
.related a .rd{font-size:.86rem;color:var(--muted);margin-top:3px}

.pagefoot{border-top:1px solid var(--line);margin-top:60px;padding-top:22px;font-size:.86rem;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pagefoot a{font-weight:600}

/* ── Home ─────────────────────────────────────────────────────────────── */
.home{max-width:var(--maxread);margin:0 auto}
.hero{padding:20px 0 8px}
.hero h1{font-size:3rem}
.hero .lede{font-size:1.3rem;max-width:34rem}
.grouphdr{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin:2.4em 0 .2em;letter-spacing:-.01em}
.grouphdr+p{color:var(--muted);margin-top:.2em}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:1.1em 0}
.mcard{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--txt);box-shadow:var(--shadow)}
.mcard:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);transition:.15s}
.mcard .mt{font-weight:650;letter-spacing:-.01em;margin-bottom:4px}
.mcard .md{font-size:.9rem;color:var(--txt2);line-height:1.45}
.mcard .mtag{display:inline-block;margin-top:9px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.principles{border:1px solid var(--line2);border-radius:16px;background:var(--card);padding:22px 24px;margin:1.6em 0}
.principles li{margin:.5em 0}

@media print{.sidenav,.toc,.topbar,.pagefoot{display:none}main{display:block;padding:0}}