/* richting C · het blad (sheet.js). Materiaal: doorschijnend donker glas met een lichte bovenrand,
   zwaarder dan de kopregel omdat het een groter vlak is. */
.sheet-root{position:fixed;inset:0;z-index:100}
.sheet-root[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(4,6,11,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;touch-action:none}
.sheet{position:fixed;inset:0;margin:auto;width:min(680px,calc(100vw - 48px));height:-moz-fit-content;height:fit-content;max-height:calc(100dvh - 64px);
  display:flex;flex-direction:column;outline:none;will-change:transform,opacity;
  background:rgba(14,20,32,.9);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  border:1px solid var(--line);border-top-color:rgba(255,255,255,.16);border-radius:20px;
  box-shadow:0 40px 120px -20px rgba(0,0,0,.72),0 0 0 1px rgba(0,0,0,.4)}
.sheet-wide{width:min(980px,calc(100vw - 48px))}
.sheet-grab{display:none}
.sheet-x{position:absolute;right:14px;top:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(244,243,239,.06);color:var(--fg);font:400 22px/1 var(--body);cursor:pointer;transition:transform .1s ease-out,background .15s}
.sheet-x:hover{background:rgba(244,243,239,.12)}
.sheet-x:active{transform:scale(.92)}
.sheet-body{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(24px,3vw,40px)}

@media (max-width:720px){
  .sheet{inset:auto 0 0 0;margin:0;width:100%;max-height:92dvh;border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  /* bij doorschot van de veer geen gat onder het blad */
  .sheet::after{content:"";position:absolute;left:0;right:0;top:100%;height:260px;background:var(--panel)}
  .sheet-grab{display:flex;justify-content:center;align-items:center;height:44px;flex:none;touch-action:none;cursor:grab}
  .sheet-grab i{width:40px;height:5px;border-radius:3px;background:rgba(244,243,239,.32)}
  .sheet-x{top:6px;right:10px}
  .sheet-body{padding:4px 20px 28px}
}

/* minder beweging: geen veer, wel een korte vervaging */
.sheet-root.rm .sheet,.sheet-root.rm .sheet-scrim{transition:opacity .2s ease!important}
@media (prefers-reduced-transparency: reduce){
  .sheet{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sheet-scrim{background:rgba(4,6,11,.82);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast: more){.sheet{background:var(--panel);border-color:var(--fg)}}

/* tijdens een sleep (motion.js): geen tekstselectie, overal de grijphand */
/* tijdens slepen: geen stijl op <html> of * (dat herberekent elke stijl op de pagina, 25 ms op een trage telefoon);
   selecteren blokkeert motion.js met selectstart, de cursor komt van wat je vasthoudt */
.is-dragging .sheet-grab{cursor:grabbing}