/* Understand your MRI: interactive labeled viewer (mount: [data-mri-explorer], [data-mri-report]).
   Tokens from docs/DESIGN-BRIEF.md §3. Hotspot colors come from the data, one per structure. */
.mx{position:relative;overflow:hidden;padding:1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:1.25rem;background:linear-gradient(130deg,#0E2A25 0%,#12332C 60%,#1a3a2a 100%);color:#fff;box-shadow:0 22px 55px rgba(14,42,37,.18)}
@media(min-width:768px){.mx{padding:2rem}}
.mx-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.mx-tab{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.1rem;border:1px solid rgba(217,227,222,.35);border-radius:.6rem;background:transparent;color:var(--dark-copy);font:600 .85rem/1.2 'Manrope',system-ui,sans-serif;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.mx-tab:hover{border-color:var(--brass-2);color:#fff}
.mx-tab.mx-on{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.mx-tab:focus-visible{outline:3px solid rgba(224,183,122,.55);outline-offset:3px}
.mx-head{margin-top:1.25rem}
.mx-tabs+.mx-head{margin-top:1.4rem}
.mx-title{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.45rem;line-height:1.2;color:#fff;letter-spacing:-.01em}
.mx-sub{margin-top:.35rem;font-size:.9rem;line-height:1.5;color:var(--dark-muted)}
.mx-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.4rem}
@media(min-width:1024px){.mx-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem;align-items:start}}
.mx-stage{position:relative;width:fit-content;max-width:100%;margin:0 auto;border-radius:1rem;overflow:hidden;background:#000;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.mx-stage img{display:block;width:auto;max-width:100%;max-height:560px}
.mx--report .mx-stage img{max-height:720px}
.mx-hot{position:absolute;width:22px;height:22px;padding:0;border:2.5px solid currentColor;border-radius:9999px;background:rgba(14,42,37,.35);transform:translate(-50%,-50%);cursor:pointer;transition:box-shadow .2s,background .2s}
.mx-hot::after{content:"";position:absolute;inset:-7px;border:1.5px solid currentColor;border-radius:9999px;opacity:.35}
.mx-hot:hover{background:rgba(255,255,255,.25)}
.mx-hot:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px}
.mx-hot.mx-on{background:currentColor;box-shadow:0 0 16px currentColor}
.mx-chips{display:flex;flex-direction:column;gap:.45rem;max-height:420px;overflow-y:auto;padding-right:.25rem;scrollbar-width:thin}
.mx-chip{display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;padding:.5rem .85rem;border:1px solid rgba(255,255,255,.15);border-radius:.65rem;background:rgba(255,255,255,.06);color:var(--dark-copy);text-align:left;font-family:'Manrope',system-ui,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.mx-chip:hover{background:rgba(255,255,255,.12)}
.mx-chip:focus-visible{outline:2px solid var(--brass-2);outline-offset:2px}
.mx-chip.mx-on{background:rgba(255,255,255,.14);color:#fff}
.mx-dot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:9999px;font-size:.68rem;font-weight:800;color:#0b1220;letter-spacing:-.02em}
.mx-dot--lg{width:2rem;height:2rem;font-size:.8rem}
.mx-lbl{font-size:.84rem;font-weight:600;line-height:1.3}
.mx-detail{min-height:11rem;margin-top:.9rem;padding:1.2rem 1.35rem;border:1px solid rgba(255,255,255,.15);border-radius:.85rem;background:rgba(255,255,255,.055)}
.mx-detail-head{display:flex;align-items:center;gap:.7rem}
.mx-detail h4{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.2rem;line-height:1.25;color:#fff}
.mx-both{display:inline-block;margin-left:.35rem;font-family:'Manrope',system-ui,sans-serif;font-size:.7rem;font-weight:600;color:var(--dark-muted);white-space:nowrap}
.mx-detail p{margin-top:.6rem;font-size:.9rem;line-height:1.65;color:var(--dark-copy)}
.mx-detail p b{color:#fff;font-weight:700}
.mx-detail .mx-report{padding-left:.8rem;border-left:3px solid;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.6;color:var(--dark-muted)}
.mx-detail a{display:inline-flex;align-items:center;gap:.3rem;margin-top:.8rem;font-size:.85rem;font-weight:600;color:var(--brass-2)}
.mx-detail a:hover{color:#fff}
.mx-note{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;line-height:1.55;color:var(--dark-muted)}
.mx-fallback{padding:1.25rem 1.35rem;border:1px solid var(--line);border-radius:1rem;background:var(--chalk);font-size:.95rem;line-height:1.6}
.mx-fallback a{color:var(--brass-dark);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.mx{padding:1.1rem;border-radius:1rem}.mx-chips{max-height:240px}.mx-detail{padding:1rem 1.1rem}}
@media(prefers-reduced-motion:reduce){.mx-hot,.mx-chip,.mx-tab{transition:none}.mx-hot.mx-on{box-shadow:none}}

/* Region cards on the hub ("Zoom into one level") and the guide index */
.mri-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.mri-card{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.1rem;align-items:center;padding:1.1rem;border:1px solid var(--line);border-radius:1rem;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.prose .mri-card{color:var(--ink);text-decoration:none}
.mri-card:hover,.mri-card:focus-visible{border-color:rgba(194,138,69,.6);box-shadow:0 14px 36px rgba(14,42,37,.1);transform:translateY(-2px);outline:none}
.mri-card:focus-visible{box-shadow:0 0 0 3px rgba(194,138,69,.45)}
.mri-card img{display:block;width:5.5rem;height:6.5rem;object-fit:cover;object-position:center;border-radius:.7rem;background:#000}
.mri-card b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.3rem;line-height:1.2}
.mri-card small{display:block;margin-top:.35rem;font-size:.85rem;line-height:1.5;color:var(--copy)}
.mri-card .link-arrow{margin-top:.6rem;font-size:.85rem}
@media(max-width:640px){.mri-cards{grid-template-columns:1fr}}

/* Impression cards on the hub */
.mri-impression{display:grid;gap:.75rem}
.mri-impression>div{padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:.9rem;background:#fff}
.mri-impression .mri-quote{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.6;color:var(--ink)}
.mri-impression .mri-quote::before{content:"Sample report: ";font-family:'Manrope',system-ui,sans-serif;font-weight:700;color:var(--brass-dark)}
.mri-impression p+p{margin-top:.5rem;font-size:.95rem;line-height:1.65}
.mri-impression a{color:var(--brass-dark);text-decoration:underline;text-underline-offset:3px}

/* Readable anatomy guide rendered by scripts/build_mri.py */
.mri-guide{display:grid;gap:2.5rem}
.mri-guide h3{font-size:1.4rem;line-height:1.25}
.mri-guide h3+p{margin-top:.3rem;font-size:.9rem;color:var(--copy)}
.mri-guide dl{display:grid;gap:.9rem;margin-top:1.1rem}
.mri-guide dt{display:flex;align-items:center;gap:.6rem;font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.1rem;line-height:1.3;color:var(--ink)}
.mri-guide dt .mx-dot{width:1.4rem;height:1.4rem;font-size:.62rem}
.mri-guide dd{margin:.25rem 0 0 2rem;font-size:.95rem;line-height:1.65;max-width:68ch}
.mri-guide dd a{color:var(--brass-dark);text-decoration:underline;text-underline-offset:3px}
.mri-findings{display:grid;gap:1rem}
.mri-findings article{padding:1.2rem 1.35rem;border:1px solid var(--line);border-radius:1rem;background:#fff}
.mri-findings h3{display:flex;align-items:center;gap:.6rem;font-size:1.25rem;line-height:1.25}
.mri-findings p{margin-top:.6rem;font-size:.95rem;line-height:1.65;max-width:70ch}
.mri-findings .mri-quote{padding-left:.8rem;border-left:3px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.6;color:var(--copy)}
.mri-findings a{color:var(--brass-dark);text-decoration:underline;text-underline-offset:3px}