/* ------------------------------------------------------------------
   Pill detail overlay.
   A sheet that rises from the bottom edge on a phone and a card that
   floats over the page on a desktop. Same markup, same script, two
   dispositions. Motion follows the finger where a finger is involved.
   ------------------------------------------------------------------ */

/* the pill itself, once it has something to say */
.fchip[data-sgd]{cursor:pointer;position:relative;padding-right:30px;
  transition:border-color .22s cubic-bezier(.32,.72,0,1),
             background-color .22s cubic-bezier(.32,.72,0,1),
             color .22s cubic-bezier(.32,.72,0,1),
             transform .22s cubic-bezier(.32,.72,0,1)}
.fchip[data-sgd]::after{content:"";position:absolute;right:13px;top:50%;
  width:5px;height:5px;margin-top:-3px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(-45deg);opacity:.42;
  transition:opacity .22s ease,transform .22s cubic-bezier(.32,.72,0,1)}
.fchip[data-sgd]:hover{border-color:rgba(242,255,189,.5);
  background:rgba(242,255,189,.07);color:#eef3e6}
.fchip[data-sgd]:hover::after{opacity:.9;transform:rotate(-45deg) translate(1px,1px)}
.fchip[data-sgd]:active{transform:scale(.975)}
.fchip[data-sgd]:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.fchip[data-sgd][aria-expanded="true"]{border-color:var(--brass);
  background:rgba(242,255,189,.1);color:#f4f8ec}

/* the scrim */
.sgd-scrim{position:fixed;inset:0;z-index:9000;background:rgba(6,10,7,.62);
  opacity:0;pointer-events:none;transition:opacity .32s cubic-bezier(.32,.72,0,1);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sgd-scrim.is-on{opacity:1;pointer-events:auto}

/* ---------- the panel ---------- */
/* A closed panel is still in the document at z-index 9001. Without these two
   lines the desktop card, which closes by fading rather than by moving away,
   sits invisibly over the middle of the page and swallows every click meant
   for the diagram beneath it. */
.sgd{position:fixed;z-index:9001;display:flex;flex-direction:column;
  background:#101a10;color:#eef3e6;overflow:hidden;
  border:1px solid rgba(242,255,189,.16);
  box-shadow:0 -2px 60px rgba(0,0,0,.5),0 24px 70px rgba(0,0,0,.45);
  will-change:transform;
  pointer-events:none;visibility:hidden}
.sgd.is-on{pointer-events:auto;visibility:visible}

/* phone: a sheet on the bottom edge */
@media(max-width:820px){
  .sgd{left:0;right:0;bottom:0;border-radius:22px 22px 0 0;border-bottom:0;
    max-height:88dvh;transform:translate3d(0,100%,0);
    padding-bottom:env(safe-area-inset-bottom,0)}
  .sgd.is-on{transform:translate3d(0,0,0)}
  .sgd-grip{flex:0 0 auto;display:flex;justify-content:center;padding:11px 0 5px;
    cursor:grab;touch-action:none}
  .sgd-grip::before{content:"";width:38px;height:4px;border-radius:999px;
    background:rgba(238,243,230,.3)}
  .sgd-grip:active{cursor:grabbing}
  .sgd-media{height:190px}
}

/* desktop: a card that floats, anchored to the middle of the screen */
@media(min-width:821px){
  .sgd{left:50%;top:50%;width:min(560px,calc(100vw - 80px));border-radius:20px;
    transform:translate3d(-50%,-46%,0) scale(.97);opacity:0;
    /* visibility flips only once the fade has finished, so the card still
       fades out instead of vanishing, and stops taking clicks after */
    transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .26s ease,
               visibility 0s linear .38s}
  .sgd.is-on{transform:translate3d(-50%,-50%,0) scale(1);opacity:1;
    transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .26s ease,
               visibility 0s linear 0s}
  .sgd-grip{display:none}
  .sgd-media{height:236px}
}

/* the sheet only animates on its own when no finger is on it */
.sgd.is-glide{transition:transform .42s cubic-bezier(.32,.72,0,1),
  visibility 0s linear .42s}
.sgd.is-glide.is-on{transition:transform .42s cubic-bezier(.32,.72,0,1),
  visibility 0s linear 0s}

/* ---------- contents ---------- */
.sgd-media{position:relative;flex:0 0 auto;overflow:hidden;background:#0b120b}
.sgd-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02)}
.sgd-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,26,16,.14) 0%,rgba(16,26,16,.06) 44%,rgba(16,26,16,.94) 100%)}
.sgd-stage{position:absolute;left:22px;bottom:15px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#dfe9c8;
  text-shadow:0 1px 12px rgba(0,0,0,.8)}
.sgd-stage::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--brass,#f2ffbd)}

.sgd-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:22px 24px 6px}
.sgd-t{margin:0;font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.012em;
  color:#f4f8ec}
.sgd-d{margin:13px 0 0;font-size:15.5px;line-height:1.68;color:#c2cdb8}
.sgd-label{margin:18px 0 0;padding-top:15px;font-size:11.5px;letter-spacing:.06em;
  color:#8b9a83;border-top:1px solid rgba(238,243,230,.11)}
.sgd-label b{color:#c8d4bd;font-weight:500}

/* ---------- footer: close, count, arrows ---------- */
.sgd-foot{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 20px 18px;border-top:1px solid rgba(238,243,230,.09)}
.sgd-count{flex:1 1 auto;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#7d8c76;font-variant-numeric:tabular-nums}
.sgd-nav{display:flex;gap:9px}
.sgd-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(238,243,230,.06);border:1px solid rgba(238,243,230,.14);
  color:#dbe5d1;cursor:pointer;padding:0;
  transition:background .2s ease,border-color .2s ease,transform .2s cubic-bezier(.32,.72,0,1)}
.sgd-btn:hover:not(:disabled){background:rgba(242,255,189,.13);
  border-color:rgba(242,255,189,.4);color:#f2ffbd}
.sgd-btn:active:not(:disabled){transform:scale(.93)}
.sgd-btn:disabled{opacity:.28;cursor:default}
.sgd-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.sgd-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* the cross sits on the media, out of the way of the reading */
.sgd-x{position:absolute;top:13px;right:13px;z-index:3;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;
  background:rgba(9,14,9,.58);border:1px solid rgba(238,243,230,.2);color:#eef3e6;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  transition:background .2s ease,transform .2s cubic-bezier(.32,.72,0,1)}
.sgd-x:hover{background:rgba(9,14,9,.86);transform:rotate(90deg)}
.sgd-x:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.sgd-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}

/* the text crossfades when the arrows move between cards, so the panel
   itself stays still and only its contents change */
.sgd-swap{transition:opacity .16s ease,transform .16s cubic-bezier(.32,.72,0,1)}
.sgd-swap.is-out{opacity:0;transform:translateY(6px)}

@media(prefers-reduced-motion:reduce){
  .sgd,.sgd.is-glide,.sgd-scrim,.sgd-swap,.sgd-btn,.sgd-x,.fchip[data-sgd]{transition:none}
  .sgd{transform:translate3d(0,0,0);opacity:1}
  @media(min-width:821px){.sgd{transform:translate3d(-50%,-50%,0)}}
}
@media(prefers-reduced-transparency:reduce){
  .sgd-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,10,7,.82)}
  .sgd-x{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,14,9,.9)}
}