/* ============================================================================
   PathMRI documentation site.

   Same palette and surface treatment as pathmri.com — the manual and the
   marketing site are one product — but set for reading: a narrower measure,
   more line height, and chrome that gets out of the way.
   ========================================================================== */
:root{
  --navy-0:#0D2440; --navy-1:#0A1C30; --navy-2:#081422;
  --sky:#8CC0EE; --red:#E25448;
  --text:#E7EFF9; --muted:rgba(226,236,248,.72); --faint:rgba(226,236,248,.46);
  --line:rgba(255,255,255,.13); --glass:rgba(255,255,255,.05);
  --sidebar:264px; --toc:210px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--navy-2)}
body{
  margin:0; color:var(--text);
  font:16px/1.72 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(170deg,var(--navy-0) 0%,var(--navy-1) 30%,var(--navy-2) 70%);
  background-attachment:fixed;
}
a{color:var(--sky); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:4px}

/* ---- header ---- */
.top{position:sticky; top:0; z-index:40; background:rgba(8,20,34,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.top-in{max-width:1500px; margin:0 auto; padding:12px 26px; display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:12px; color:var(--text)}
.brand:hover{text-decoration:none}
.chip{background:#fff; border-radius:12px; padding:6px; display:inline-flex}
.chip img{width:26px; height:26px; display:block}
.word{font-size:20px; letter-spacing:-.02em; font-weight:400; white-space:nowrap}
.word b{font-weight:800; color:var(--sky)}
.brand .sep{color:var(--faint); font-size:19px}
.brand .kind{font-size:15px; font-weight:700; color:var(--sky)}
.top .spacer{flex:1}
.top .out{font-size:14px; color:var(--muted)}

/* search */
.search{position:relative; flex:0 1 380px; min-width:150px}
.search input{width:100%; background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:10px; padding:9px 14px 9px 36px; color:var(--text); font:14px/1.3 inherit}
.search input::placeholder{color:var(--faint)}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint)}
.results{position:absolute; top:44px; left:0; right:0; background:#0C1E33; border:1px solid var(--line);
  border-radius:12px; padding:6px; box-shadow:0 24px 60px rgba(0,0,0,.55); max-height:60vh;
  overflow:auto; display:none}
.results.on{display:block}
.results a{display:block; padding:9px 12px; border-radius:8px; color:var(--text); font-size:14px}
.results a:hover,.results a.sel{background:rgba(140,192,238,.14); text-decoration:none}
.results a small{display:block; color:var(--faint); font-size:12.4px; margin-top:2px}
.results .none{padding:12px; color:var(--faint); font-size:14px}

/* version picker */
.ver{position:relative}
.ver summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(140,192,238,.42); border-radius:10px;
  padding:8px 13px; font-size:14px; font-weight:700}
.ver summary::-webkit-details-marker{display:none}
.ver summary .lbl{color:var(--sky); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase}
.ver-menu{position:absolute; top:44px; right:0; width:250px; background:#0C1E33;
  border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ver-menu a{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:8px; color:var(--text); font-size:14px}
.ver-menu a:hover{background:rgba(255,255,255,.07); text-decoration:none}
.ver-menu a.on{background:rgba(140,192,238,.14); font-weight:700}
.ver-menu .tag{font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--sky); text-transform:uppercase}
.ver-menu .foot{border-top:1px solid var(--line); margin-top:6px; padding:10px 12px;
  font-size:12.6px; color:var(--faint); line-height:1.5}

/* ---- layout ---- */
.shell{max-width:1500px; margin:0 auto; padding:0 26px;
  display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr) var(--toc); gap:38px; align-items:start}
.side{position:sticky; top:64px; max-height:calc(100vh - 64px); overflow:auto;
  padding:28px 0 40px; border-right:1px solid rgba(255,255,255,.08)}
.side .grp{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sky); margin:22px 0 10px}
.side .grp:first-child{margin-top:0}
.side a{display:block; padding:5px 0 5px 13px; margin-left:-13px; border-left:2px solid transparent;
  color:var(--muted); font-size:14.2px}
.side a:hover{color:#fff; text-decoration:none}
.side a.on{color:#fff; font-weight:700; border-left-color:var(--sky)}

.toc{position:sticky; top:64px; max-height:calc(100vh - 64px); overflow:auto; padding:28px 0 40px}
.toc .grp{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sky); margin:0 0 10px}
.toc a{display:block; padding:4px 0; color:var(--muted); font-size:13.4px; line-height:1.45}
.toc a:hover{color:#fff; text-decoration:none}
.toc a.d3{padding-left:12px; font-size:12.8px; color:var(--faint)}

/* ---- the chapter ---- */
.doc{padding:28px 0 80px; min-width:0}
.crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; color:var(--faint);
  font-size:13.4px; font-weight:600; margin-bottom:14px}
.crumb a{color:var(--faint)}
.doc h1{font-size:38px; line-height:1.1; letter-spacing:-.03em; font-weight:800; margin:0 0 6px;
  text-wrap:balance}
.doc h2{font-size:25px; line-height:1.2; letter-spacing:-.02em; font-weight:800; margin:46px 0 0;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.09); text-wrap:balance}
.doc h3{font-size:19px; font-weight:700; margin:32px 0 0; letter-spacing:-.01em}
.doc h4{font-size:16.5px; font-weight:700; margin:24px 0 0; color:var(--sky)}
.doc p{margin:14px 0 0; color:var(--muted); max-width:74ch}
.doc strong{color:#fff; font-weight:700}
.doc em{color:var(--text)}
.doc ul,.doc ol{margin:14px 0 0; padding-left:22px; color:var(--muted); max-width:74ch}
.doc li{margin:6px 0}
.doc li>p{margin:6px 0 0}
.doc hr{border:0; border-top:1px solid rgba(255,255,255,.09); margin:36px 0 0}
.doc blockquote{margin:20px 0 0; border-left:3px solid var(--sky); background:rgba(140,192,238,.07);
  border-radius:0 12px 12px 0; padding:4px 20px 14px; max-width:78ch}
.doc blockquote p{color:var(--muted)}
.doc img,.manual img{max-width:100%; height:auto; display:block; margin:20px 0 0;
  border:1px solid var(--line); border-radius:10px; background:#0b1725}
.doc p>img:only-child,.manual p>img:only-child{margin-top:20px}

.doc code{font:0.9em/1.5 ui-monospace,Consolas,monospace; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10); border-radius:5px; padding:1px 6px; color:var(--text)}
.doc pre{overflow-x:auto; background:rgba(0,0,0,.30); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; margin:18px 0 0; max-width:100%}
.doc pre code{background:none; border:0; padding:0; font-size:13.2px; line-height:1.62; white-space:pre}

.tablewrap{overflow-x:auto; margin:20px 0 0; border:1px solid var(--line); border-radius:14px;
  background:var(--glass)}
.doc table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.2px}
.doc th,.doc td{text-align:left; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top; color:var(--muted)}
.doc th{font-size:11.6px; letter-spacing:.08em; text-transform:uppercase; color:var(--sky);
  font-weight:800; background:rgba(255,255,255,.04); white-space:nowrap}
.doc tr:last-child td{border-bottom:0}
.doc td strong{color:#fff}

.anchor{opacity:0; margin-left:10px; font-size:.7em; color:var(--sky); font-weight:400}
.doc h2:hover .anchor,.doc h3:hover .anchor{opacity:1}

.pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:56px}
.pager a{border:1px solid var(--line); background:var(--glass); border-radius:14px; padding:16px 18px;
  color:var(--text)}
.pager a:hover{border-color:rgba(140,192,238,.45); text-decoration:none}
.pager .k{display:block; font-size:11.6px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sky); margin-bottom:5px}
.pager .next{text-align:right}

.notice{border:1px solid rgba(226,84,72,.45); background:rgba(226,84,72,.10); border-radius:12px;
  padding:13px 18px; margin:0 0 22px; font-size:14.2px; color:var(--muted)}
.notice b{color:#fff}
.notice a{color:#fff; text-decoration:underline}

/* ---- the index page ---- */
.home{padding:44px 0 80px; max-width:900px; margin:0 auto}
.home h1{font-size:44px; line-height:1.06; letter-spacing:-.034em; font-weight:800; margin:16px 0 0}
.home .lede{font-size:19px; color:var(--muted); margin:18px 0 0; max-width:66ch}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--sky);
  border:1px solid var(--line); background:var(--glass); padding:7px 14px; border-radius:100px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:14px;
  margin-top:20px}
.card{display:block; background:var(--glass); border:1px solid var(--line); border-radius:14px;
  padding:17px 19px; color:var(--text)}
.card:hover{border-color:rgba(140,192,238,.45); text-decoration:none}
.card b{display:block; font-size:15.6px; font-weight:700}
.card span{display:block; margin-top:6px; color:var(--muted); font-size:13.8px; line-height:1.55}
.home h2{font-size:14px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--sky);
  margin:40px 0 0}

/* ---- narrow ---- */
@media (max-width:1180px){
  .shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr); gap:0}
  .side{position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line);
    padding:18px 0}
  .top-in{flex-wrap:wrap}
  .search{order:3; flex:1 1 100%}
  .doc h1{font-size:31px}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ---- get-it-all links on the contents page ---- */
.grab{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px;
  margin:26px 0 6px}
.grab-btn{display:block; border:1px solid rgba(140,192,238,.34); border-radius:14px; padding:15px 18px;
  background:linear-gradient(160deg,rgba(48,93,132,.28),rgba(10,50,85,.24)); color:var(--text)}
.grab-btn:hover{border-color:rgba(140,192,238,.6); text-decoration:none}
.grab-btn b{display:block; font-size:15.6px; font-weight:700}
.grab-btn span{display:block; margin-top:4px; color:var(--muted); font-size:13.4px}
.grab-btn span span{display:inline; color:var(--faint); margin-left:7px}

/* ---- the one-page edition ---- */
.manual{max-width:820px; margin:0 auto; padding:44px 26px 90px}
.manual .kicker{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sky); margin:0}
.manual-title{font-size:48px; line-height:1.04; letter-spacing:-.035em; font-weight:800; margin:10px 0 0}
.manual-sub{color:var(--muted); font-size:15px; margin:12px 0 0}
.manual-toc{margin:34px 0 0; border-top:1px solid var(--line); padding-top:22px}
.manual-toc ol{margin:14px 0 0; padding-left:22px}
.manual-toc li{margin:7px 0; color:var(--muted)}
.manual-toc li span{color:var(--faint); font-size:13px; margin-left:8px}
.manual-note{margin:26px 0 0; color:var(--faint); font-size:14px}
.manual .chapter{padding-top:40px}
.manual .chapter h1{font-size:34px; line-height:1.1; letter-spacing:-.03em; font-weight:800;
  margin:0 0 6px; padding-top:26px; border-top:2px solid rgba(140,192,238,.35)}
.manual .chapter h2{font-size:23px}
.manual .chapter p,.manual .chapter ul,.manual .chapter ol{color:var(--muted); max-width:none}
.manual .chapter table{min-width:0}

/* ---- print: a light document, because nobody prints a navy page ---- */
@media print{
  @page{size:A4; margin:18mm 16mm}
  html,body{background:#fff !important; color:#14202e !important}
  .top,.side,.toc,.pager,.anchor,.no-print,.grab{display:none !important}
  .shell,.manual{display:block; max-width:none; margin:0; padding:0}
  a{color:#14202e; text-decoration:none}
  .manual-title{font-size:34pt; color:#0A3255}
  .manual .kicker{color:#305D84}
  .manual-sub,.manual-toc li{color:#4a5b6e}
  .manual-toc li span{color:#7c8ea1}
  .manual .chapter{break-before:page; page-break-before:always; padding-top:0}
  .manual .chapter:first-of-type{break-before:auto; page-break-before:auto}
  .manual .chapter h1{font-size:22pt; color:#0A3255; border-top:2pt solid #305D84; padding-top:10pt}
  .doc h2,.manual .chapter h2{font-size:15pt; color:#0A3255; border-top:1pt solid #d3dbe4;
    break-after:avoid; page-break-after:avoid}
  .doc h3,.manual .chapter h3{font-size:12.5pt; color:#0A3255; break-after:avoid; page-break-after:avoid}
  .doc p,.doc li,.manual .chapter p,.manual .chapter li{color:#25333f; font-size:10.5pt; line-height:1.55}
  .doc strong,.manual strong{color:#0A3255}
  .doc code,.manual code{background:#eef2f6; border-color:#d3dbe4; color:#14202e}
  .doc pre,.manual pre{background:#f5f8fa; border-color:#d3dbe4; break-inside:avoid; page-break-inside:avoid}
  .doc pre code,.manual pre code{color:#14202e}
  .tablewrap{border-color:#d3dbe4; background:#fff; break-inside:avoid; page-break-inside:avoid}
  .doc th,.manual th{background:#eef2f6; color:#0A3255; border-bottom-color:#d3dbe4}
  .doc td,.manual td{color:#25333f; border-bottom-color:#e4eaf0}
  .doc blockquote,.manual blockquote{background:#f5f8fa; border-left-color:#305D84}
  .notice{border-color:#d9a3a0; background:#fbf1f0; color:#25333f}
  .doc img,.manual img{border-color:#d3dbe4; background:#fff; max-height:150mm;
    object-fit:contain; break-inside:avoid; page-break-inside:avoid}
}