/* zoroya-spmenu-02: geometry and transition values from the supplied example.
   The viewport takes the place of the example's phone screen. */
.ai-sheet-toggle {
  display:none;height:38px;border:1.5px solid var(--ai-ink);background:transparent;
  border-radius:999px;padding:0 16px;font-family:var(--sans);font-size:10px;
  letter-spacing:.2em;font-weight:700;color:var(--ai-ink);cursor:pointer;position:relative;z-index:60;
}
body.is-menu-open .ai-sheet-toggle {background:var(--ai-ink);color:#fffcf1;}
.ai-sheet-layer {
  position:fixed;inset:0;z-index:500;pointer-events:none;
  color:var(--ai-ink);font-family:var(--sans);line-height:normal;letter-spacing:normal;
  --sheet-line:#d6e1e5;--sheet-cream:#eaf6fc;--sheet-muted:#53636a;
}
.ai-sheet-layer .shade {
  position:absolute;inset:0;z-index:40;background:rgba(32,52,62,.42);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;pointer-events:auto;
}
.ai-sheet-layer.open .shade {opacity:1;visibility:visible;transition:opacity .4s,visibility 0s;}
.ai-sheet-layer .sheet {
  position:absolute;left:0;right:0;bottom:0;z-index:50;background:#fff;
  border-radius:26px 26px 0 0;visibility:hidden;transform:translateY(105%);
  transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s .55s;
  box-shadow:0 -24px 50px -24px rgba(32,52,62,.55);pointer-events:auto;
  max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
}
.ai-sheet-layer.open .sheet {transform:translateY(0);visibility:visible;transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s;}
.ai-sheet-layer .grab {width:44px;height:5px;border-radius:3px;background:#d6e1e5;margin:12px auto 4px;cursor:pointer;}
.ai-sheet-layer .sheet-hd {display:flex;align-items:baseline;justify-content:space-between;padding:6px 22px 12px;border-bottom:1px solid var(--sheet-line);}
.ai-sheet-layer .sheet-hd b {font-family:var(--serif);font-size:17px;letter-spacing:.12em;}
.ai-sheet-layer .sheet-hd small {font-family:var(--sans);font-size:9px;letter-spacing:.26em;color:var(--ai-action);}
.ai-sheet-layer .tiles {display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 18px 6px;}
.ai-sheet-layer .tile {display:flex;flex-direction:column;gap:5px;border:1px solid var(--sheet-line);border-radius:14px;padding:14px;text-decoration:none;color:var(--ai-ink);background:var(--sheet-cream);}
.ai-sheet-layer .tile:active {background:#fff3b0;}
.ai-sheet-layer .tile .en {font-family:var(--sans);font-size:8.5px;letter-spacing:.22em;color:var(--ai-action);}
.ai-sheet-layer .tile b {font-size:14.5px;letter-spacing:.04em;}
.ai-sheet-layer .tile small {font-size:10px;color:var(--sheet-muted);}
.ai-sheet-layer .rows {padding:6px 18px 12px;}
.ai-sheet-layer .rows a {display:flex;justify-content:space-between;align-items:center;padding:13px 6px;font-size:13.5px;font-weight:700;color:var(--ai-ink);text-decoration:none;border-bottom:1px dashed var(--sheet-line);}
.ai-sheet-layer .rows a span {color:var(--ai-action);font-family:var(--sans);font-size:11px;}
.ai-sheet-layer .sheet-ft {padding:12px 18px 30px;padding-bottom:max(30px,env(safe-area-inset-bottom));}
.ai-sheet-layer .sheet-ft a {display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ai-action);color:#fff;border-radius:13px;padding:15px;text-decoration:none;font-weight:900;font-size:15px;letter-spacing:.08em;box-shadow:0 10px 20px -10px rgba(20,101,127,.7);}
.ai-sheet-layer .sheet-ft small {display:block;text-align:center;font-size:9.5px;color:var(--sheet-muted);margin-top:8px;}
.ai-sheet-layer :is(.tile,.rows a):visited {color:var(--ai-ink);}
.ai-sheet-layer .sheet-ft a:visited {color:#fff;}
.ai-sheet-layer :is(a,.grab):focus-visible,.ai-sheet-toggle:focus-visible {outline:3px solid var(--ai-action);outline-offset:3px;}
@media(max-width:1180px) {.ai-sheet-toggle {display:inline-block;}}
@media(prefers-reduced-motion:reduce) {
  .ai-sheet-layer *,.ai-sheet-layer *::before,.ai-sheet-layer *::after {
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}