/* =============================================================================
   snk-overlay.css — the ONE site-wide overlay system.
   Slide-over · dialog · confirm/notice · filter · popover · toast — one shell,
   one motion language, one z-index ladder, one footer vocabulary. Token-driven,
   theme-aware (rides snk-theme.css --snk-*). Paired with assets/js/snk-overlay.js.

   Markup contract:
     <div class="snk-ov-scrim"></div>   (auto-created by the JS; not required in markup)
     <aside class="snk-ov snk-ov--drawer" id="x" role="dialog" aria-modal="true" hidden>
       <div class="snk-ov__grip"></div>                      (mobile drag handle)
       <div class="snk-ov__head">…title… <button class="snk-ov__x" data-overlay-close></button></div>
       <div class="snk-ov__body">…</div>
       <div class="snk-ov__foot">…snk-ov-btn…</div>
     </aside>
   Variants: --drawer (right slide-over / bottom sheet) [+ .is-filter] · --dialog
   (centered / sheet) · --confirm (small centered / sheet) · --pop (dropdown / sheet).
   Open/close: data-overlay-open="ID" / data-overlay-close, or SnkOverlay.open(id).
   ========================================================================== */

:root{
  /* z-index ladder — every overlay sits ABOVE the nav (1000) */
  --snk-z-nav:1000; --snk-z-dropdown:1010; --snk-z-scrim:1080; --snk-z-overlay:1090; --snk-z-toast:1200;
  /* one backdrop */
  --snk-scrim:rgba(10,14,25,.55); --snk-scrim-blur:2px;
  /* one motion language */
  --snk-ov-dur:.24s; --snk-ov-ease:cubic-bezier(.22,1,.36,1); --snk-ov-dur-dialog:.18s;
  /* geometry */
  --snk-ov-radius:20px; --snk-ov-radius-dialog:18px; --snk-ov-pad:1.15rem; --snk-ov-w:440px; --snk-ov-w-filter:400px;
  /* role accent — gold, RR host actions ONLY */
  --rr-gold:#b7791f;
}
[data-bs-theme=dark]{ --snk-scrim:rgba(4,6,10,.62); --rr-gold:#e0a63c; }

/* ---- scrim ---------------------------------------------------------------- */
.snk-ov-scrim{position:fixed;inset:0;background:var(--snk-scrim);
  -webkit-backdrop-filter:blur(var(--snk-scrim-blur));backdrop-filter:blur(var(--snk-scrim-blur));
  z-index:var(--snk-z-scrim);opacity:0;pointer-events:none;transition:opacity var(--snk-ov-dur) ease}
.snk-ov-scrim.is-open{opacity:1;pointer-events:auto}

/* ---- shell base (mobile-first = bottom sheet) ----------------------------- */
.snk-ov{position:fixed;left:0;right:0;bottom:0;z-index:var(--snk-z-overlay);
  display:flex;flex-direction:column;background:var(--snk-surface);color:var(--snk-text);
  border-radius:var(--snk-ov-radius) var(--snk-ov-radius) 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.30);
  max-height:92vh;max-width:560px;margin-inline:auto;
  transform:translateY(101%);transition:transform var(--snk-ov-dur) var(--snk-ov-ease);
  will-change:transform;overflow:hidden;
  /* QUIRK GUARD: the site sets a global body{line-height:26px} (fixed px) that would
     bloat small overlay text via inheritance. Re-assert a unitless ratio + box model
     so every overlay renders exactly like the approved mockups regardless of globals. */
  line-height:1.45}
.snk-ov,.snk-ov *{box-sizing:border-box}
.snk-ov.is-open{transform:none}
.snk-ov[hidden]{display:none}

/* inner parts (shared by every shell) */
.snk-ov__grip{flex:0 0 auto;width:2.4rem;height:.28rem;border-radius:999px;background:var(--snk-border-strong);
  margin:.6rem auto .15rem;cursor:grab;touch-action:none}
.snk-ov__head{flex:0 0 auto;display:flex;align-items:center;gap:.7rem;line-height:1.3;
  padding:.7rem var(--snk-ov-pad) .85rem;border-bottom:1px solid var(--snk-border)}
.snk-ov__head .ic{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent)}
.snk-ov__head .ic i,.snk-ov__head .ic svg{width:1.15rem;height:1.15rem}
.snk-ov__tt{flex:1 1 auto;min-width:0}
.snk-ov__eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.07em;line-height:1.2;text-transform:uppercase;color:var(--snk-ink-500);margin:0 0 .1rem}
.snk-ov__title{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0;color:var(--snk-text)}
.snk-ov__sub{font-size:.8rem;font-weight:600;line-height:1.4;margin:.12rem 0 0;color:var(--snk-ink-500)}
.snk-ov__x{flex:0 0 auto;margin-left:auto;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border-radius:11px;border:1px solid var(--snk-border);background:var(--snk-surface);color:var(--snk-ink-700);
  transition:.12s}
.snk-ov__x:hover{border-color:var(--snk-accent);color:var(--snk-accent)}
.snk-ov__x i,.snk-ov__x svg{width:1.15rem;height:1.15rem}
.snk-ov__body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:1rem var(--snk-ov-pad);line-height:1.45}
.snk-ov__foot{flex:0 0 auto;display:flex;align-items:center;gap:.7rem;line-height:1.3;
  padding:.85rem var(--snk-ov-pad) calc(.85rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--snk-border);background:var(--snk-surface-2)}

/* hero header band (context-rich panels — the wrap-up look) */
.snk-ov__head--hero{border-bottom:1px solid var(--snk-border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--snk-accent) 11%,var(--snk-surface)),var(--snk-surface))}
.snk-ov__head--hero .sprite{flex:0 0 auto;width:52px;height:52px;object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22))}

/* ---- desktop (>=820) ------------------------------------------------------ */
@media(min-width:820px){
  .snk-ov__grip{display:none}
  /* slide-over → right edge, full height */
  .snk-ov--drawer{left:auto;right:0;top:0;bottom:0;width:var(--snk-ov-w);max-width:none;max-height:none;
    margin:0;border-radius:0;transform:translateX(101%);box-shadow:-14px 0 44px rgba(0,0,0,.28)}
  .snk-ov--drawer.is-open{transform:none}
  .snk-ov--drawer.is-filter{width:var(--snk-ov-w-filter)}
  /* dialog + confirm → centered, scale-in */
  .snk-ov--dialog,.snk-ov--confirm{left:50%;right:auto;top:50%;bottom:auto;margin:0;
    width:min(520px,92vw);max-height:86vh;border-radius:var(--snk-ov-radius-dialog);
    box-shadow:0 24px 70px rgba(0,0,0,.42);
    transform:translate(-50%,-46%) scale(.98);opacity:0;
    transition:opacity var(--snk-ov-dur-dialog) ease,transform var(--snk-ov-dur-dialog) var(--snk-ov-ease)}
  .snk-ov--confirm{width:min(400px,92vw)}
  .snk-ov--dialog.is-open,.snk-ov--confirm.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
}

/* ---- popover (dropdown desktop / sheet mobile) ---------------------------- */
.snk-ov--pop{max-width:520px}                                   /* mobile = bottom sheet (inherits base) */
@media(min-width:820px){
  .snk-ov--pop{position:fixed;left:auto;right:auto;top:0;bottom:auto;margin:0;
    width:max-content;min-width:210px;max-width:320px;max-height:min(60vh,420px);
    border:1px solid var(--snk-border);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.20);
    transform:translateY(-6px);opacity:0;transition:opacity .16s ease,transform .16s ease;z-index:var(--snk-z-dropdown)}
  .snk-ov--pop.is-open{transform:none;opacity:1}
  .snk-ov--pop .snk-ov__body{padding:.4rem}
}

/* ---- footer buttons (ONE vocabulary) ------------------------------------- */
.snk-ov-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;
  padding:.6rem 1.15rem;border-radius:12px;border:1px solid transparent;background:transparent;
  font:inherit;font-weight:800;font-size:.92rem;letter-spacing:-.01em;line-height:1;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:transform .12s ease,filter .12s ease,background .12s,border-color .12s,color .12s}
.snk-ov-btn:active{transform:translateY(1px)}
.snk-ov-btn i,.snk-ov-btn svg{width:1.05rem;height:1.05rem}
.snk-ov-btn--primary{background:var(--snk-accent);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--snk-accent) 34%,transparent)}
.snk-ov-btn--primary:hover{filter:brightness(1.06)}
[data-bs-theme=dark] .snk-ov-btn--primary{color:#0f1a2e}
.snk-ov-btn--ghost{background:var(--snk-surface);border-color:var(--snk-border);color:var(--snk-ink-700)}
.snk-ov-btn--ghost:hover{border-color:var(--snk-accent);color:var(--snk-accent)}
.snk-ov-btn--danger{background:var(--snk-danger);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--snk-danger) 30%,transparent)}
.snk-ov-btn--danger:hover{filter:brightness(1.05)}
.snk-ov-btn--role{background:var(--rr-gold);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--rr-gold) 34%,transparent)}
.snk-ov-btn--grow{flex:1 1 auto}
.snk-ov-btn--full{width:100%}
.snk-ov__foot .skip{margin-right:auto;color:var(--snk-text-muted);font-weight:700;font-size:.88rem;line-height:1.2;text-decoration:none;padding:.3rem .2rem}
.snk-ov__foot .skip:hover{color:var(--snk-ink-700)}
.snk-ov__foot .snk-ov-reset{margin-right:auto}
.snk-ov__foot--split{gap:.7rem}
.snk-ov__foot--split .snk-ov-btn{flex:1 1 0}

/* ---- toast ---------------------------------------------------------------- */
.snk-ov-toast{position:fixed;left:50%;bottom:calc(1.3rem + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(150%);z-index:var(--snk-z-toast);line-height:1.2;
  display:inline-flex;align-items:center;gap:.5rem;background:var(--snk-ink-800);color:var(--snk-surface);
  padding:.65rem 1.05rem;border-radius:999px;font-weight:700;font-size:.86rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none;
  transition:transform .26s var(--snk-ov-ease)}
.snk-ov-toast i,.snk-ov-toast svg{width:1.05rem;height:1.05rem}
.snk-ov-toast.is-open{transform:translateX(-50%) translateY(0)}
@media(min-width:820px){
  .snk-ov-toast{left:auto;right:1.5rem;transform:translateX(0) translateY(180%)}
  .snk-ov-toast.is-open{transform:translateX(0) translateY(0)}
}

/* mobile: bigger targets + stacked full-width prompt buttons (primary top, cancel at thumb) */
@media(max-width:819.98px){
  .snk-ov-btn{min-height:48px}
  .snk-ov__foot--split{flex-direction:column-reverse;gap:.5rem}
  .snk-ov__foot--split .snk-ov-btn{flex:0 0 auto;width:100%;min-height:50px}
}

/* focus: container gets focus silently; interactive children ring on keyboard only */
.snk-ov:focus{outline:none}
.snk-ov :focus{outline:none}
.snk-ov :focus-visible{outline:2px solid var(--snk-accent);outline-offset:2px;border-radius:10px}

@media(prefers-reduced-motion:reduce){
  .snk-ov,.snk-ov-scrim,.snk-ov--pop,.snk-ov-toast{transition-duration:.001ms}
}