/* mustr docs — shared shell (sidebar + prose) for every /docs/* page.
   One source of truth for chrome; per-page content is just prose inside
   <main class="docs-main">. Relies on the design tokens each docs page
   defines in :root (mirrors the marketing pages' token set). */

.docs-body{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:272px 1fr; gap:1.4rem; align-items:start; padding:0 1rem; }

/* A floating panel, not a bordered column — the thing that makes a docs shell
   read as "generic template" is usually this exact two-column layout with a
   flat ruled sidebar. Giving it its own card treatment (rounded, shadowed,
   inset gradient cap) ties it back to the rest of the site's panel language. */
.docs-side{
  position:sticky; top:1.4rem; align-self:start; max-height:calc(100vh - 2.8rem); overflow-y:auto;
  padding:1.3rem 1.1rem 1.6rem; margin:1.4rem 0;
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 50px -34px rgba(0,0,0,.5);
}
.docs-side::before{
  content:""; display:block; height:3px; margin:-1.3rem -1.1rem 1.1rem;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:16px 16px 0 0;
}
.docs-search{
  width:100%; padding:.55rem .7rem; border-radius:10px; border:1px solid var(--border);
  background:var(--panel2); color:var(--text); font-size:.9rem; margin-bottom:1rem;
}
.docs-search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); }
.docs-back{ display:block; color:var(--muted); text-decoration:none; font-size:.85rem; margin-bottom:1.1rem; }
.docs-back:hover{ color:var(--text); }

.docs-nav-group{ margin-bottom:1.2rem; }
.docs-nav-group h4{
  margin:0 0 .45rem; font-size:.78rem; font-weight:700; letter-spacing:.01em;
  color:var(--text); display:flex; align-items:center; gap:.4rem;
}
.docs-nav-group ul{ list-style:none; margin:0; padding:0; }
.docs-nav-group li{ margin:.05rem 0; }
.docs-nav-group a{
  display:block; padding:.38rem .6rem .38rem .75rem; border-radius:9px; color:var(--muted);
  text-decoration:none; font-size:.87rem; line-height:1.35; border-left:2px solid transparent;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.docs-nav-group a:hover{ background:var(--panel2); color:var(--text); }
.docs-nav-group a.current{
  background:color-mix(in srgb,var(--accent) 13%,transparent); color:var(--accent);
  font-weight:700; border-left-color:var(--accent);
}
.docs-nav-group li.hidden{ display:none; }
.docs-nores{ display:none; color:var(--muted); font-size:.85rem; padding:.3rem .55rem; }

.docs-toggle{
  display:none; width:100%; text-align:left; padding:.7rem 1.1rem; margin:0;
  background:var(--panel); border:0; border-bottom:1px solid var(--border);
  color:var(--text); font:inherit; font-weight:700; font-size:.92rem; cursor:pointer;
}

.docs-main{ min-width:0; padding:2.2rem .4rem 5rem; }
.docs-crumb{ color:var(--muted); font-size:.85rem; margin-bottom:.6rem; }
.docs-crumb a{ color:var(--muted); text-decoration:none; }
.docs-crumb a:hover{ color:var(--text); }
.docs-main h1{ font-size:2rem; margin:0 0 .5rem; line-height:1.15; }
.docs-lede{ color:var(--muted); font-size:1.08rem; max-width:68ch; margin:0 0 1.6rem; }

.docs-main h2{
  font-size:1.35rem; margin:2.2rem 0 .7rem; display:flex; align-items:center; gap:.55rem;
  scroll-margin-top:1.5rem;
}
.docs-main h2::before{ content:""; width:.5rem; height:1.25rem; border-radius:3px; background:linear-gradient(180deg,var(--accent),var(--accent2)); flex:none; }
.docs-main h3{ font-size:1.08rem; margin:1.4rem 0 .5rem; }
.docs-main p{ margin:.7rem 0; max-width:72ch; }
.docs-main ul, .docs-main ol{ margin:.7rem 0; padding-left:1.4rem; max-width:70ch; }
.docs-main li{ margin:.35rem 0; }
.docs-main code{ background:var(--panel2); padding:.1em .4em; border-radius:6px; font-size:.9em; }
.docs-main pre{ background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:.9rem 1rem; overflow-x:auto; }
.docs-main pre code{ background:none; padding:0; }
.docs-main a{ color:var(--accent); }
.muted{ color:var(--muted); }
.small{ font-size:.88rem; }

/* Callouts */
.callout{ border:1px solid var(--border); border-left:4px solid var(--accent); background:var(--panel2);
  border-radius:10px; padding:.9rem 1.1rem; margin:1rem 0; font-size:.96rem; max-width:72ch; }
.callout .lbl{ font-weight:800; letter-spacing:.02em; display:block; margin-bottom:.15rem; }
.callout p{ margin:.3rem 0; }
.callout.tip{ border-left-color:var(--good); } .callout.tip .lbl{ color:var(--good); }
.callout.warn{ border-left-color:var(--warn,#f59e0b); } .callout.warn .lbl{ color:var(--warn,#f59e0b); }
.callout.accent{ border-left-color:var(--accent); } .callout.accent .lbl{ color:var(--accent); }

/* Numbered steps */
.steps{ margin-top:1rem; }
.step{ display:flex; gap:1rem; margin-top:1.4rem; }
.step-num{ flex:none; width:2.2rem; height:2.2rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; color:#fff; background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent); }
.step-body{ flex:1 1 auto; min-width:0; padding-top:.1rem; }
.step-body h3{ margin:.15rem 0 .4rem; }
.step-body p, .step-body ul, .step-body ol{ margin:.45rem 0; }

/* Cards */
.docs-cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:1rem 0; }
.docs-card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; }
.docs-card h3{ margin:0 0 .35rem; font-size:1rem; }
.docs-card p{ margin:0; color:var(--muted); font-size:.92rem; }
.docs-card .ic{ font-size:1.4rem; display:block; margin-bottom:.4rem; }

/* Tables */
.docs-main table{ width:100%; border-collapse:collapse; margin:.8rem 0; font-size:.93rem; }
.docs-main th, .docs-main td{ text-align:left; padding:.55rem .65rem; border-bottom:1px solid var(--border); vertical-align:top; }
.docs-main th{ color:var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.docs-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.docs-table-wrap table{ margin:0; }

/* Checklist */
.checklist{ list-style:none; margin:.7rem 0; padding:0; max-width:70ch; }
.checklist li{ position:relative; padding:.32rem 0 .32rem 1.7rem; }
.checklist li::before{ content:"\2713"; position:absolute; left:0; color:var(--good); font-weight:800; }

/* Glossary */
.glossary{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:.8rem; }
.gterm{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:.75rem 1rem; }
.gterm b{ color:var(--text); } .gterm span{ color:var(--muted); font-size:.9rem; }

/* Inline CTA button. Selector is deliberately `.docs-main a.docs-btn` (not the
   plain `.docs-btn` it was) — the class alone loses the specificity fight to
   `.docs-main a` above (1 class + 1 type beats 1 class), so `color:#fff` was
   silently overridden back to the accent purple. On an accent background that
   made the text invisible: purple-on-purple. Bitten by this on the live
   support/setup/what-it-does CTAs before anyone noticed, since a same-colour
   button still occupies space and looks intentional at a glance. */
.docs-main a.docs-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; border-radius:10px;
  font-weight:700; font-size:.95rem; text-decoration:none; background:var(--accent); color:#fff;
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 50%,transparent); margin:.4rem 0; }
.docs-main a.docs-btn:hover{ filter:brightness(1.06); }
.docs-main a.docs-btn.ghost{ background:transparent; color:var(--text); border:1.5px solid var(--border); box-shadow:none; }
.docs-main a.docs-btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* Permission-style pill chips */
.pill{ display:inline-flex; align-items:center; padding:.15rem .6rem; border-radius:999px; font-size:.82rem;
  background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-weight:600; }

/* Cost calculator — React-rendered (src/widgets/CostCalculator.jsx). Class
   names prefixed rx- to mark them as belonging to a mounted React widget
   rather than server-rendered docs prose. */
.rx-calc{ display:grid; gap:1rem; margin:1rem 0; max-width:70ch; }
.rx-calc-inputs{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .rx-calc-inputs{ grid-template-columns:1fr; } }
.rx-calc-adv{ margin-top:.2rem; }
.rx-field label{ display:block; font-weight:600; margin-bottom:.4rem; font-size:.92rem; }
.rx-hint{ color:var(--muted); font-size:.8rem; margin-top:.35rem; }

.rx-stepper{
  display:inline-flex; align-items:stretch; border:1px solid var(--border); border-radius:11px;
  overflow:hidden; background:var(--panel2); width:100%; max-width:220px;
}
.rx-stepper-input{
  flex:1 1 auto; width:0; min-width:0; text-align:center; border:0; background:transparent;
  color:var(--text); font-size:1.02rem; font-weight:600; padding:0 .3rem; font-variant-numeric:tabular-nums;
}
.rx-stepper-input:focus{ outline:none; }
.rx-stepper-btn{
  flex:none; width:2.5rem; display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--muted); border:0; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.rx-stepper-btn:hover:not(:disabled){ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
.rx-stepper-btn:active:not(:disabled){ background:color-mix(in srgb,var(--accent) 26%,transparent); }
.rx-stepper-btn:disabled{ opacity:.35; cursor:default; }
.rx-stepper-dec{ border-right:1px solid var(--border); }
.rx-stepper-inc{ border-left:1px solid var(--border); }
.rx-stepper:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }

.rx-adv-toggle{
  display:inline-flex; align-items:center; gap:.3rem; background:none; border:0; padding:0;
  color:var(--muted); font-size:.85rem; cursor:pointer; width:fit-content;
}
.rx-adv-toggle:hover{ color:var(--text); }
.rx-chevron{ display:inline-block; transition:transform .15s ease; }
.rx-chevron.open{ transform:rotate(90deg); }

.rx-result{ background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; }
.rx-verdict{ font-size:1.02rem; font-weight:700; margin-bottom:.8rem; }
.rx-verdict.ok{ color:var(--good); } .rx-verdict.warn{ color:var(--warn,#f59e0b); }
.rx-meter{ margin:.65rem 0; }
.rx-meter-lab{ display:flex; justify-content:space-between; font-size:.83rem; margin-bottom:.25rem; color:var(--muted); }
.rx-bar{ height:8px; border-radius:999px; background:var(--border); overflow:hidden; }
.rx-bar > span{ display:block; height:100%; border-radius:999px; transition:width .25s ease; }
.rx-bar > span.tone-ok{ background:var(--good); }
.rx-bar > span.tone-warn{ background:var(--warn,#f59e0b); }
.rx-bar > span.tone-bad{ background:#ef4444; }

/* Prev/next pager */
.docs-pager{ display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--border); }
.docs-pager a{ flex:1 1 0; min-width:0; text-decoration:none; color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:.8rem 1rem; }
.docs-pager a:hover{ border-color:var(--accent); }
.docs-pager .dir{ display:block; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.15rem; }
.docs-pager .next{ text-align:right; }

/* Section landing grid (docs index + section overview pages) */
.docs-toc{ display:grid; gap:1.6rem; margin-top:1.4rem; }
.docs-toc-section h2{ margin-top:0; }
.docs-toc-list{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.docs-toc-item{ display:block; background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:1rem 1.1rem; text-decoration:none; color:var(--text); }
.docs-toc-item:hover{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.docs-toc-item b{ display:block; margin-bottom:.25rem; }
.docs-toc-item span{ color:var(--muted); font-size:.88rem; }

@media (max-width:900px){
  .docs-body{ grid-template-columns:1fr; }
  .docs-toggle{ display:block; }
  .docs-side{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--border); display:none; }
  .docs-side.open{ display:block; }
  .docs-main{ padding:1.6rem 1.2rem 3.5rem; }
}