/* ======= Design tokens ======= */
.dr-manual{
  --max: 900px;
  --ink: #0b1220;
  --muted:#64748b;
  --border:#e5e7eb;
  --panel:#ffffff;
  --accent:#0ea5e9;
  --fix:#dc2626;
  --warning-bg:#fff1f2;
  --note-bg:#fffbeb;
  --radius:14px;
  --pad:1rem;
  --elev-1: 9998;   /* slideout */
  --elev-2: 9999;   /* FAB */
}

/* ======= Base ======= */
.dr-manual .dr-wrap{max-width:var(--max);margin:0 auto;padding:1rem 1.25rem;font:400 16px/1.65 system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
.dr-manual h1,.dr-manual h2,.dr-manual h3{line-height:1.25;margin:.2rem 0 .6rem}
.dr-manual .dr-title{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:800;letter-spacing:.2px}
.dr-manual .dr-sub{color:var(--muted);font-weight:600;margin-bottom:.25rem}
.dr-manual p{margin:.5rem 0}
.dr-manual a{color:var(--accent)}

/* ======= On-page TOC ======= */
.dr-manual .dr-toc{
  position:relative;
  top:auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.8rem 1rem;
  margin:1rem 0 1.25rem;
}
.dr-manual .dr-toc h2{font-size:1.05rem;margin:0 0 .25rem}
.dr-manual .dr-toc ol{
  margin:0;
  padding-left:0;
  list-style:none;
}
.dr-manual .dr-toc li{margin:.2rem 0}
.dr-manual .dr-toc a{text-decoration:none}
.dr-manual .dr-toc a:hover{text-decoration:underline}

/* Remove numbers from slide-out list too */
.dr-manual .toc-slideout-list{
  list-style:none;
  padding-left:0;
}
.dr-manual .toc-slideout-list li{margin:.25rem 0}

/* Active link styling */
.dr-manual .dr-toc a.active,
.dr-manual .toc-slideout-list a.active{
  font-weight:800;
  text-decoration:none;
  position:relative;
}
.dr-manual .dr-toc a.active::before,
.dr-manual .toc-slideout-list a.active::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
}
.dr-manual .toc-slideout-list a.active{
  background:rgba(14,165,233,.1);
  border-radius:8px;
  padding:2px 6px;
}

/* ======= Sections ======= */
.dr-manual .dr-section{scroll-margin-top:90px;margin:1.25rem 0}
.dr-manual .dr-h3{font-size:1.1rem;margin-top:.8rem}
.dr-manual .dr-meta{color:var(--muted);font-size:.95rem}

/* ======= Lists ======= */
.dr-manual .dr-bullets{margin:.4rem 0 .8rem;padding-left:1.1rem}
.dr-manual .dr-bullets li{margin:.25rem 0}

/* ======= Alerts ======= */
.dr-manual .alert-list{list-style:none;padding:0;margin:.6rem 0;border:1px solid var(--border);border-radius:var(--radius);position:relative;z-index:0}
.dr-manual .alert-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .8rem;border-bottom:1px dashed var(--border)}
.dr-manual .alert-list li:last-child{border-bottom:0}
.dr-manual .alert-list .ico{width:22px;height:22px;flex:0 0 22px;object-fit:contain;margin-top:.15rem;position:relative;z-index:1}
.dr-manual .alert-warning{background:var(--warning-bg)}
.dr-manual .alert-note{background:var(--note-bg)}
.dr-manual .ico-note{filter:sepia(1) saturate(6) hue-rotate(10deg) brightness(1.05)}

/* ======= Image ======= */
.dr-manual .dr-photo{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:12px;padding:4px;background:#fff;margin:.5rem 0}

/* ======= Floating TOC FAB ======= */
.dr-manual .toc-fab{
  position:fixed;right:14px;bottom:16px;
  width:56px;height:64px;border-radius:14px;
  border:2px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg, var(--accent), #0b77b3);
  color:#fff;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 14px 40px rgba(2,32,71,.28);cursor:pointer;z-index:var(--elev-2)
}
.dr-manual .toc-fab.visible{display:flex}
.dr-manual .toc-fab:focus-visible{outline:3px solid rgba(255,255,255,.8);outline-offset:3px}
.dr-manual .toc-fab .toc-label{font-weight:800;font-size:.65rem;line-height:1;letter-spacing:.4px;pointer-events:none}

/* ======= Slide-out ======= */
.dr-manual .toc-slideout{
  position:fixed;right:14px;bottom:76px;
  width:min(92vw, 340px);max-height:70vh;overflow:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);z-index:var(--elev-1);
  transform:translateX(calc(100% + 16px));opacity:0;pointer-events:none;
  transition:transform .24s ease, opacity .18s ease; will-change: transform, opacity;
}
.dr-manual .toc-slideout.open{transform:translateX(0);opacity:1;pointer-events:auto}
.dr-manual .toc-slideout-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;position:sticky;top:0;background:var(--panel);z-index:1;border-bottom:1px dashed var(--border);border-top-left-radius:16px;border-top-right-radius:16px}
.dr-manual .toc-slideout h3{margin:.1rem 0;font-size:1rem}
.dr-manual .toc-close{background:transparent;border:none;font-size:20px;line-height:1;cursor:pointer;color:#111827}
.dr-manual .toc-slideout-list{margin:0;padding:8px 12px 12px 22px}
.dr-manual .toc-slideout-list a{text-decoration:none}
.dr-manual .toc-slideout-list a:hover{text-decoration:underline}

/* ======= Mobile ======= */
@media (max-width:768px){
  .dr-manual .dr-wrap{padding:.9rem}
  .dr-manual .toc-slideout{width:min(96vw, 360px)}
  .dr-manual .toc-slideout-list a{padding:4px 0;display:inline-block}
}