/* Modal layout + polished appearance + smooth transitions */
:root{
  --crio-modal-bg: var(--void,#0a0a0a);
  --crio-modal-fg: var(--emergence,#f5f5f5);
  --crio-modal-accent: var(--accent,#6ad1ff);
  --crio-modal-muted: rgba(255,255,255,0.06);
}
.crio-toc-modal{
  position:fixed;inset:0;z-index:9999;font-family:inherit;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.crio-toc-modal.open{ opacity:1;visibility:visible;pointer-events:auto }
.crio-toc-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity:0;transition:opacity .22s ease;
}
.crio-toc-modal.open .crio-toc-overlay{ opacity:1 }
.crio-toc-panel{
  position:relative;width:min(980px,94%);margin:6vh auto;max-height:82vh;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)), var(--crio-modal-bg);
  color:var(--crio-modal-fg);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45);
  transform:translateY(-12px) scale(.995);opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.2,1),opacity .22s ease;
  display:flex;flex-direction:column;
}
.crio-toc-modal.open .crio-toc-panel{ transform:translateY(0) scale(1);opacity:1 }
.crio-toc-header{
  display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--crio-modal-muted);
}
.crio-toc-title{font-weight:700;font-size:1rem;letter-spacing:0.2px}
.crio-toc-body{padding:1rem 1rem 1.25rem;flex:1;min-height:0;overflow:auto}
.crio-toc-panel .crio-toc-body{scrollbar-width:thin}
.crio-toc-close{
  background:transparent;border:0;padding:.35rem;border-radius:6px;cursor:pointer;color:var(--crio-modal-fg);font-size:1.05rem;
}
.crio-toc-close:hover{background:rgba(255,255,255,0.03)}
.crio-toc-close:focus{outline:2px solid var(--crio-modal-accent);outline-offset:3px}
/* Nav/content styles */
.crio-toc-body nav, .crio-toc-body #TOC, .crio-toc-body .toc { background: transparent; color: inherit }
.crio-toc-body nav a, .crio-toc-body a { color: var(--crio-modal-accent); text-decoration:none }
.crio-toc-body a:hover, .crio-toc-body a:focus { text-decoration:underline }

/* Make sure long lists are readable on narrow screens */
@media (min-width:700px){
  .crio-toc-panel{margin:7vh auto;}
  .crio-toc-body{padding:1.25rem}
}
@media (max-width:480px){
  .crio-toc-close{font-size:1.2rem}
  .crio-toc-title{font-size:0.95rem}
}