/* Reliability Protocol microsite — pixel-clone of the Slite public reading experience.
   Tokens captured from the live Slite page (see design-extract/tokens.md). Self-contained:
   no Elementor, no Bootstrap. Scoped under .rsp so it can't leak into the rest of the theme. */

/* Zero the UA body margin so the sticky top bar sits flush against the viewport from the
   very first pixel (top:0) — without this, the default 8px body margin pushes the page down,
   the bar starts 8px low, then snaps up on first scroll (reads as a height jump). This CSS is
   enqueued only on the stage template, so the body reset is page-local, not a global leak. */
html, body { margin: 0; padding: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.rsp {
  /* palette */
  --rsp-text: #3f434a;
  --rsp-muted: #6a707c;
  --rsp-bg: #fdfdfd;
  --rsp-panel: #f6f7f9;
  --rsp-line: #ececef;
  --rsp-link: #1668e3;
  --rsp-brand: #408897; /* Remote Sensei teal (logo) */
  /* callout tints (exact from Slite) */
  --rsp-note-bg: rgba(22, 104, 227, 0.08);
  --rsp-note-accent: #1668e3;
  --rsp-warn-bg: rgba(244, 214, 184, 0.30);
  --rsp-warn-accent: #b45309; /* darkened from #cf7820 so the decorative glyph is perceptible on its tint */
  --rsp-tip-bg: rgba(195, 223, 199, 0.30);
  --rsp-tip-accent: #15803d; /* darkened from #2ec23f for the same reason */
  --rsp-icon-bg: #f0f2f5;
  --rsp-active-bg: rgba(22, 104, 227, 0.12); /* current sidebar item tint (re-tinted for dark) */
  --rsp-border-strong: #c4c8cf;              /* stronger than --rsp-line: checkbox + hover borders */
  --rsp-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);         /* floating tooltip */
  --rsp-shadow-drawer: 0 10px 40px rgba(0, 0, 0, 0.12); /* mobile nav drawer */
  /* metrics */
  --rsp-content: 680px;
  --rsp-sidebar: 325px; /* fits the longest stage title + emoji on one line (threshold 320) */
  --rsp-radius: 10px;
  --rsp-radius-sm: 8px; /* iconbtn, sidebar links, tooltip */
  --rsp-radius-xs: 5px; /* inline code, checkbox */
  --rsp-font: "Inter", "Universal Sans", Roboto, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  color: var(--rsp-text);
  background: var(--rsp-bg);
  font-family: var(--rsp-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rsp *, .rsp *::before, .rsp *::after { box-sizing: border-box; }

/* Elementor Pro prints its site-wide cookie popup (#61983) via wp_footer(); this template runs
   Elementor-CSS-free (the stage template dequeues all site assets), so that markup loses its
   display:none and shows unstyled. Nothing on this page is a legit Elementor node, so hide any
   that slip through. (Consent CMP is re-homed when Elementor is removed — see PLAN.md.) */
.elementor-popup-modal, .dialog-widget, .elementor-location-popup, [data-elementor-type] { display: none !important; }

/* keyboard focus — a designed, theme-aware ring (the rest of the file only styles :hover).
   Nothing sets outline:none, but the UA default ring isn't on-brand or theme-aware. */
.rsp a:focus-visible, .rsp button:focus-visible, .rsp summary:focus-visible {
  outline: 2px solid var(--rsp-link); outline-offset: 2px;
}
.rsp ::selection { background: rgba(22, 104, 227, 0.22); }
/* themed thin scrollbars for the two scroll panels (else a light UA bar can sit over dark chrome) */
.rsp-sidebar, .rsp-outline { scrollbar-width: thin; scrollbar-color: var(--rsp-border-strong) transparent; }

/* ---------- top bar ----------
   The inner shares the shell's centered 1320px grid. The brand zone is locked to the
   sidebar width (--rsp-sidebar) so the logo sits directly above the sidebar, and the
   brand zone's right border continues the sidebar's right border up through the bar. */
.rsp-topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--rsp-bg);
  /* Divider drawn as an inset shadow, NOT border-bottom: a border would add 1px to the
     bar's layout height (53px), but the sticky sidebar/outline anchor at top:52px — that
     mismatch makes the sidebar jump 1px between its natural and stuck positions at the top
     of the scroll. box-shadow paints the same full-width line without adding layout height,
     so the bar is exactly 52px and every 52px sticky offset lines up. Keep it a shadow. */
  box-shadow: inset 0 -1px 0 var(--rsp-line);
}
.rsp-topbar__inner { display: flex; align-items: center; height: 52px; max-width: 1320px; margin: 0 auto; padding-right: 20px; }
.rsp-topbar__brandzone {
  flex: 0 0 var(--rsp-sidebar); min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 20px; border-right: 1px solid var(--rsp-line);
}
.rsp-topbar__brand { display: flex; align-items: center; text-decoration: none; }
.rsp-topbar__framework { padding-left: 24px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--rsp-text); text-decoration: none; white-space: nowrap; }
.rsp-topbar__framework:hover { color: var(--rsp-link); }
.rsp-topbar__spacer { flex: 1; }

/* ---------- brand logo (animated, ported 1:1 from remotesensei.org header) ----------
   Pure-CSS hover animation: at rest the full starburst mark + center dot show; on hover
   the center m-circle collapses and the strip lines draw outward. Scoped under .rsp so
   it out-specifies hello-elementor-child's identical unscoped `.logo` rules in WordPress. */
.rsp .logo .logo-wrapper { display: flex; align-items: center; }
.rsp .logo .logo-wrapper .img { display: flex; align-items: center; }
.rsp .logo .logo-wrapper .img svg { display: block; height: 24px; width: auto; }
.rsp .logo .strip-group { position: relative; width: 32px; height: 32px; margin-right: 9px; }
.rsp .logo .strip-part { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.rsp .logo .strip-part .t-line { width: 8px; height: 2px; left: 88%; top: 4px; position: absolute; transform: rotate(22deg); }
.rsp .logo .strip-part .t-line::after { content: ""; width: 0; height: 2px; background: var(--rsp-brand); transition: 0.3s cubic-bezier(0.4, 0, 0.6, 1); display: block; }
.rsp .logo .strip-part .b-line { width: 8px; height: 2px; right: 88%; bottom: 4px; position: absolute; transform: rotate(22deg); display: flex; justify-content: flex-end; }
.rsp .logo .strip-part .b-line::after { content: ""; width: 0; height: 2px; background: var(--rsp-brand); transition: 0.3s cubic-bezier(0.4, 0, 0.6, 1); display: block; }
.rsp .logo .strip-part:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }
.rsp .logo .strip-part:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg); }
.rsp .logo .strip-part:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg); }
.rsp .logo .s-circle { width: 6px; height: 6px; background: var(--rsp-brand); border-radius: 50%; position: relative; }
.rsp .logo .s-circle::after { content: ""; width: 2px; height: 2px; border-radius: 50%; background: var(--rsp-bg); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rsp .logo .s-line { width: 2px; height: 23px; background: var(--rsp-brand); margin-top: -1px; margin-bottom: -1px; margin-left: 2px; }
.rsp .logo .m-circle { width: 12px; height: 12px; background: var(--rsp-brand); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.25s ease-in; overflow: hidden; }
.rsp .logo .m-circle::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rsp-bg); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.25s ease-in; }
.rsp .logo .img svg path { fill: var(--rsp-brand); }
.rsp .logo:hover .m-circle, .rsp .logo:hover .m-circle::after { width: 0; height: 0; transition: 0.3s cubic-bezier(0, 0, 0.2, 1); }
.rsp .logo:hover .strip-part .t-line::after, .rsp .logo:hover .strip-part .b-line::after { width: 8px; transition: 0.3s cubic-bezier(0, 0, 0.2, 1); }
.rsp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: var(--rsp-radius-sm); background: transparent; color: var(--rsp-muted); cursor: pointer; font-size: 16px; }
.rsp-iconbtn:hover { background: var(--rsp-panel); }

/* ---------- shell ---------- */
.rsp-shell { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; }

/* ---------- sidebar ---------- */
.rsp-sidebar {
  width: var(--rsp-sidebar); flex: 0 0 var(--rsp-sidebar);
  position: sticky; top: 52px; align-self: flex-start;
  height: calc(100vh - 52px); overflow-y: auto;
  padding: 18px 10px 40px; border-right: 1px solid var(--rsp-line);
}
.rsp-sidebar__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 6px 10px; }
.rsp-sidebar__list { list-style: none; margin: 6px 0 0; padding: 0; }
.rsp-sidebar__list a {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 10px; border-radius: var(--rsp-radius-sm);
  color: var(--rsp-text); text-decoration: none; font-size: 13.5px; line-height: 1.45;
}
.rsp-sidebar__list a:hover { background: var(--rsp-panel); }
.rsp-sidebar__list a[aria-current="page"] { background: var(--rsp-active-bg); color: var(--rsp-text); font-weight: 600; }
.rsp-sidebar__num { color: var(--rsp-muted); font-variant-numeric: tabular-nums; min-width: 16px; }
.rsp-sidebar__label { min-width: 0; }
.rsp-sidebar__desc { display: none; } /* surfaced on hover/focus as a floating tooltip (.rsp-tip) */

/* sidebar hover tooltip — the per-stage description, floated (position:fixed) so the sidebar's
   overflow can't clip it and the list never shifts. Positioned in JS; hidden on touch. */
.rsp-tip {
  position: fixed; z-index: 50; max-width: 250px;
  padding: 8px 12px; border-radius: var(--rsp-radius-sm);
  background: var(--rsp-bg); color: var(--rsp-muted);
  border: 1px solid var(--rsp-line); box-shadow: var(--rsp-shadow);
  font-size: 12.5px; line-height: 1.45;
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.rsp-tip.is-visible { opacity: 1; transform: none; }
@media (hover: none) { .rsp-tip { display: none; } }

/* ---------- main ---------- */
.rsp-main { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; padding: 18px 40px 96px; }
.rsp-article { width: 100%; max-width: var(--rsp-content); }

/* Breadcrumb is redundant on desktop (the sidebar already shows the framework + all
   stages), so it's hidden there and only re-shown on mobile (≤860px), where the sidebar
   collapses to an off-canvas drawer and the breadcrumb becomes the only visible "up" link. */
.rsp-breadcrumb { display: none; font-size: 13px; color: var(--rsp-muted); margin-bottom: 26px; }
.rsp-breadcrumb a { color: var(--rsp-muted); text-decoration: none; font-weight: 600; }
.rsp-breadcrumb a:hover { color: var(--rsp-text); }
.rsp-breadcrumb__sep { margin: 0 8px; opacity: 0.6; }

/* title weight 700 (Inter substitute for Slite's UniversalSans 600 — 600 reads thin in Inter) */
.rsp-title { font-size: 40px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; margin: 4px 0 10px; }
.rsp-title .rsp-emoji { white-space: nowrap; }
.rsp-title__tail { white-space: nowrap; } /* keeps the last word + emoji together when the title wraps */
/* per-stage subheading under the title; carries the rule that separates the header from the body.
   (Also mirrored as a sidebar hover tooltip — .rsp-tip — to preview other stages.) */
.rsp-desc { font-size: 17px; color: var(--rsp-muted); margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--rsp-line); }

/* ---------- content typography ---------- */
/* headings carry hierarchy by SIZE; weight stays 700 across h1-h4 (was 800 on h2/h3, which
   out-bolded the 700 title). */
.rsp-content h2 { font-size: 24px; font-weight: 700; line-height: 1.33; margin: 38px 0 8px; scroll-margin-top: 70px; }
.rsp-content h3 { font-size: 21px; font-weight: 700; line-height: 1.38; margin: 28px 0 6px; scroll-margin-top: 70px; }
.rsp-content h4 { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
.rsp-content p { margin: 12px 0; }
.rsp-content ul, .rsp-content ol { margin: 12px 0; padding-left: 26px; }
.rsp-content li { margin: 4px 0; }
.rsp-content a { color: var(--rsp-text); text-decoration: underline; text-decoration-color: rgba(22,104,227,0.4); text-underline-offset: 2px; }
.rsp-content a:hover { color: var(--rsp-link); text-decoration-color: var(--rsp-link); }
.rsp-content strong { font-weight: 700; }
.rsp-content code { background: var(--rsp-panel); padding: 1px 5px; border-radius: var(--rsp-radius-xs); font-size: 0.9em; }
.rsp-emoji { font-style: normal; }

.rsp-sep { border: 0; border-top: 1px solid var(--rsp-line); margin: 30px 0; }

.rsp-quote { margin: 16px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--rsp-line); color: var(--rsp-muted); }

/* ---------- callouts ---------- */
.rsp-callout {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 0; padding: 12px 16px; border-radius: var(--rsp-radius);
  background: var(--rsp-icon-bg);
}
.rsp-callout__body { min-width: 0; flex: 1; }
.rsp-callout__body > :first-child { margin-top: 0; }
.rsp-callout__body > :last-child { margin-bottom: 0; }
/* Flat colored Font Awesome glyphs (Slite-style) — colour set per type via currentColor,
   no badge circle. 16px / line-height 1.6 so the glyph's line box matches the body's first
   text line; fixed 20px column centers glyphs of differing widths. Emoji-id callouts reuse
   this box with their emoji (.rsp-emoji). */
.rsp-callout__icon { flex: 0 0 auto; width: 20px; text-align: center; font-size: 16px; line-height: 1.6; }
.rsp-callout--note { background: var(--rsp-note-bg); }
.rsp-callout--note .rsp-callout__icon { color: var(--rsp-note-accent); }
.rsp-callout--warning { background: var(--rsp-warn-bg); }
.rsp-callout--warning .rsp-callout__icon { color: var(--rsp-warn-accent); }
.rsp-callout--tip { background: var(--rsp-tip-bg); }
.rsp-callout--tip .rsp-callout__icon { color: var(--rsp-tip-accent); }
.rsp-callout--icon, .rsp-callout--plain { background: var(--rsp-icon-bg); }

/* ---------- checklists ---------- */
.rsp-checklist { list-style: none; padding-left: 4px; }
.rsp-checklist .rsp-todo { position: relative; padding-left: 27px; }
.rsp-todo__box { position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border: 1.5px solid var(--rsp-border-strong); border-radius: var(--rsp-radius-xs); }
.rsp-todo.is-checked .rsp-todo__box { background: var(--rsp-note-accent); border-color: var(--rsp-note-accent); }
.rsp-todo.is-checked .rsp-todo__box::after { content: "✓"; color: #fff; font-size: 12px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ---------- collapsible ---------- */
.rsp-collapsible { margin: 16px 0; border: 1px solid var(--rsp-line); border-radius: var(--rsp-radius); overflow: hidden; }
.rsp-collapsible > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; background: var(--rsp-panel); }
.rsp-collapsible > summary::-webkit-details-marker { display: none; }
.rsp-collapsible__chev { display: inline-block; margin-right: 8px; font-size: 12px; color: var(--rsp-muted); transition: transform 0.15s; }
.rsp-collapsible[open] .rsp-collapsible__chev { transform: rotate(90deg); }
.rsp-collapsible__body { padding: 4px 16px 12px; }

/* ---------- figures ---------- */
.rsp-figure { margin: 22px 0; text-align: center; }
.rsp-figure img { max-width: 100%; height: auto; }
.rsp-figure figcaption { margin-top: 8px; font-size: 13.5px; color: var(--rsp-muted); }
.rsp-figure__svg { text-align: center; margin: 22px 0; }
/* Round the diagram's baked-in white background to match the hint-box radius (like Slite).
   overflow:hidden clips the SVG's square white corners to the rounded box. */
.rsp-figure__svg svg { max-width: 100%; height: auto; border-radius: var(--rsp-radius); overflow: hidden; }
.rsp-figure__ph { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 120px; margin: 22px 0; padding: 18px; border: 1px dashed var(--rsp-line); border-radius: var(--rsp-radius); background: var(--rsp-panel); color: var(--rsp-muted); font-size: 13.5px; text-align: center; }
.rsp-figure__ph-ico { font-size: 20px; }

/* ---------- prev / next ---------- */
.rsp-prevnext { display: flex; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rsp-line); }
.rsp-prevnext a { flex: 1; display: block; padding: 14px 16px; border: 1px solid var(--rsp-line); border-radius: var(--rsp-radius); text-decoration: none; color: var(--rsp-text); }
.rsp-prevnext a:hover { border-color: var(--rsp-border-strong); background: var(--rsp-panel); }
.rsp-prevnext .rsp-pn__label { font-size: 12px; color: var(--rsp-muted); }
.rsp-prevnext .rsp-pn__title { font-weight: 600; margin-top: 2px; }
.rsp-prevnext .rsp-pn--next { text-align: right; }

/* ---------- right-rail outline ---------- */
.rsp-outline { width: 230px; flex: 0 0 230px; position: sticky; top: 70px; align-self: flex-start; max-height: calc(100vh - 90px); overflow-y: auto; padding: 18px 16px; font-size: 13px; }
.rsp-outline__h { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: var(--rsp-muted); margin-bottom: 10px; }
.rsp-outline a { display: block; padding: 4px 0; color: var(--rsp-muted); text-decoration: none; line-height: 1.4; }
.rsp-outline a:hover, .rsp-outline a.is-active { color: var(--rsp-text); }
.rsp-outline a.lvl-3 { padding-left: 12px; }

/* ---------- stages index (the /stages/ hub — table of 15) ----------
   Shares the stage template chrome (topbar, dark toggle, logo); the body is a centered list
   of linked stage cards. Built entirely from the shared tokens so the dark-mode overrides at
   the end of this file apply with no extra rules. */
.rsp-index { display: flex; justify-content: center; padding: 40px 40px 96px; }
.rsp-index__inner { width: 100%; max-width: 760px; }
.rsp-index .rsp-breadcrumb { display: block; } /* the hub always shows its "up" link (no sidebar here) */
.rsp-index__title { font-size: 40px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; margin: 4px 0 12px; }
.rsp-index__sub { font-size: 17px; color: var(--rsp-muted); line-height: 1.55; margin: 0 0 30px; padding-bottom: 24px; border-bottom: 1px solid var(--rsp-line); }
.rsp-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rsp-index__item { margin: 0; }
.rsp-index__item a {
  display: flex; gap: 16px; align-items: center;
  padding: 15px 18px; border: 1px solid var(--rsp-line); border-radius: var(--rsp-radius);
  text-decoration: none; color: var(--rsp-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rsp-index__item a:hover { border-color: var(--rsp-border-strong); background: var(--rsp-panel); }
.rsp-index__num {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--rsp-active-bg);
  color: #0f52c4; /* darker than --rsp-link so 14px-bold clears WCAG AA (≥4.5:1) on the light tint */
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rsp[data-theme="dark"] .rsp-index__num { color: var(--rsp-link); } /* --rsp-link is 4.85:1 on the dark tint — keep it */
.rsp-index__body { flex: 1 1 auto; min-width: 0; }
.rsp-index__name { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.rsp-index__name .rsp-emoji { white-space: nowrap; }
.rsp-index__desc { display: block; font-size: 14.5px; color: var(--rsp-muted); line-height: 1.45; margin-top: 2px; }
.rsp-index__chev { flex: 0 0 auto; color: var(--rsp-muted); font-size: 13px; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.rsp-index__item a:hover .rsp-index__chev { opacity: 1; transform: none; color: var(--rsp-link); }
.rsp-index__cta { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--rsp-line); display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 15px; }
.rsp-index__cta a { color: var(--rsp-link); text-decoration: none; font-weight: 600; }
.rsp-index__cta a:hover { text-decoration: underline; }
.rsp-index__cta--primary { margin-left: auto; }
@media (max-width: 860px) {
  .rsp-index { padding: 20px 18px 80px; }
  .rsp-index__title { font-size: 30px; }
  .rsp-index__cta--primary { margin-left: 0; }
}

/* ---------- WP admin bar (logged-in) ----------
   The WP admin bar is position:fixed, 32px tall on desktop. Without this, our sticky topbar
   (top:0) slides UNDER it on scroll, and the sidebar/outline sticky offsets are wrong relative
   to it — so the right-rail gap "jumps" as you scroll. Offset all sticky chrome by the bar's
   height (desktop ≥783px, where it's fixed) so the layout stays put. Anonymous visitors never
   get the .admin-bar class, so this is admin-preview-only; their base offsets are unchanged. */
@media screen and (min-width: 783px) {
  body.admin-bar .rsp-topbar  { top: 32px; }
  body.admin-bar .rsp-sidebar { top: 84px; }   /* 32 (bar) + 52 (topbar) */
  body.admin-bar .rsp-outline { top: 102px; }  /* keep the same 18px offset below the sidebar line */
}

/* ---------- mobile ---------- */
.rsp-sidebar-toggle { display: none; }
.rsp-scrim { display: none; } /* backdrop behind the open mobile drawer; tap to close (data-action=nav) */
@media (max-width: 1080px) { .rsp-outline { display: none; } }
@media (max-width: 860px) {
  .rsp-main { padding: 16px 18px 80px; }
  .rsp-breadcrumb { display: block; } /* sidebar is hidden behind the hamburger here, so keep the "up" link */
  .rsp-title { font-size: 30px; }
  /* sidebar is off-canvas here, so the brand zone no longer needs to match its width */
  .rsp-topbar__inner { padding-right: 12px; }
  .rsp-topbar__brandzone { flex: 0 0 auto; border-right: 0; padding-left: 12px; }
  .rsp-topbar__framework { padding-left: 14px; }
  .rsp-sidebar {
    position: fixed; top: 52px; left: 0; z-index: 25;
    height: calc(100vh - 52px); background: var(--rsp-bg);
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: var(--rsp-shadow-drawer);
  }
  .rsp[data-nav="open"] .rsp-sidebar { transform: translateX(0); }
  .rsp[data-nav="open"] .rsp-scrim { display: block; position: fixed; inset: 52px 0 0 0; z-index: 24; background: rgba(0, 0, 0, 0.4); }
  .rsp-sidebar-toggle { display: inline-flex; }
}
@media (max-width: 560px) { .rsp-topbar__framework { display: none; } } /* too tight next to logo + toggle */

/* ---------- dark mode ---------- */
.rsp[data-theme="dark"] {
  --rsp-text: #e6e8eb; --rsp-muted: #9aa1ad; --rsp-bg: #1b1d20; --rsp-panel: #24262a;
  --rsp-line: #2f3338; --rsp-icon-bg: #24262a;
  --rsp-note-bg: rgba(22,104,227,0.16); --rsp-warn-bg: rgba(207,120,32,0.18); --rsp-tip-bg: rgba(46,194,63,0.16);
  /* Re-tint the foreground accents too — the light values are too dark on #1b1d20.
     --rsp-link lifts the link/hover to ~6.9:1 (was 3.3:1, failed AA); accents brighten so
     the callout glyphs stay legible on their dark tints. */
  --rsp-link: #6ea8ff;
  --rsp-note-accent: #6ea8ff; --rsp-warn-accent: #f0a44f; --rsp-tip-accent: #56d364;
  --rsp-active-bg: rgba(110,168,255,0.20); /* stronger so the current item reads on dark */
  --rsp-border-strong: #4a505a;            /* not the near-white #c4c8cf, which blew out at ~10:1 */
  --rsp-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);         /* darker so elevation survives on dark */
  --rsp-shadow-drawer: 0 12px 44px rgba(0, 0, 0, 0.6);
}