/* ==========================================================================
   منو — تم ۱۰ · «دِک» (Deck)

   ساختار — محورِ حرکت افقی است، نه عمودی:
     · هر دسته یک دِک از کارت‌های بزرگ است که با سوایپِ افقی ورق می‌خورد
       (scroll-snap + شماره‌گرِ پیپ + دکمهٔ قبل/بعد برای دسکتاپ).
     · کارت خودش «جزئیات» است: عکس، توضیح، گزینه، مواد. هیچ لایهٔ دومی
       برای دیدن یک آیتم لازم نیست.
     · ناوبری دسته‌ها ستونِ عمودیِ کنار است (دسکتاپ) و نوار افقیِ چسبان (موبایل).
     · قلبِ علاقه‌مندی روی هر کارت.

   رنگ: دو تا — بادمجانی و زرشکیِ روشن. بقیه کاغذی.
   ========================================================================== */

:root {
  --font: "Yekan Bakh", Tahoma, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --bg:    #F6F1EA;
  --bg-2:  #EDE5D9;
  --card:  #FFFFFF;
  --line:  #E0D6C6;
  --line-2:#C7B9A2;
  --ink:   #191320;
  --ink-2: #5A5163;
  --ink-3: #8D8497;

  --plum:      #4A2A6B;   /* بادمجانی */
  --plum-2:    #653A8F;
  --plum-soft: #EFE8F6;
  --on-plum:   #FFFFFF;
  --berry:     #B4324F;   /* زرشکی — قلب و تخفیف */
  --berry-soft:#FBE7EC;

  --r-s: .4rem; --r-m: .8rem; --r-l: 1.5rem; --r-f: 999px;
  --dur: 260ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  --ph-1:#F1EBE0; --ph-2:#E2D8C7; --ph-sat:36%; --ph-l:44%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-menu-theme="light"]) {
    --bg:#100C15; --bg-2:#181220; --card:#1B1524; --line:#2A2136; --line-2:#3C3049;
    --ink:#F3EFF7; --ink-2:#ACA2B8; --ink-3:#7C7288;
    --plum:#B48CE0; --plum-2:#C9A9EE; --plum-soft:#241834; --on-plum:#150B22;
    --berry:#E9788F; --berry-soft:#2C1218;
    --ph-1:#1B1524; --ph-2:#251C31; --ph-sat:32%; --ph-l:64%;
  }
}
:root[data-menu-theme="dark"] {
  --bg:#100C15; --bg-2:#181220; --card:#1B1524; --line:#2A2136; --line-2:#3C3049;
  --ink:#F3EFF7; --ink-2:#ACA2B8; --ink-3:#7C7288;
  --plum:#B48CE0; --plum-2:#C9A9EE; --plum-soft:#241834; --on-plum:#150B22;
  --berry:#E9788F; --berry-soft:#2C1218;
  --ph-1:#1B1524; --ph-2:#251C31; --ph-sat:32%; --ph-l:64%;
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; } }

*, *::before, *::after { box-sizing: border-box; }

/* صفت hidden باید همیشه برنده باشد — display:flex نباید خنثی‌اش کند */
[hidden] { display: none !important; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; line-height: 1.25; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: var(--r-s); }
.mono { font-family: var(--mono); direction: ltr; display: inline-block; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   نوار بالا
   ========================================================================== */
.bar {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--line);
}
.bar__in {
  max-inline-size: 82rem; margin-inline: auto; padding: .5rem 1rem;
  display: flex; align-items: center; gap: .45rem;
}
.logo { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.logo b { font-size: 1rem; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.logo i { font-style: normal; font-size: .625rem; color: var(--ink-3); letter-spacing: .1em; }
.ib {
  inline-size: 2.3rem; block-size: 2.3rem; flex: none; border-radius: var(--r-f);
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  color: var(--ink-2); border: 1px solid var(--line); position: relative;
  transition: color var(--dur), border-color var(--dur), transform var(--dur) var(--spring);
}
.ib:hover { color: var(--plum); border-color: var(--plum); }
.ib:active { transform: scale(.92); }
.ib svg { inline-size: 1.05rem; block-size: 1.05rem; }
.ib--txt { inline-size: auto; padding-inline: .55rem; font-size: .6875rem; font-weight: 800; }
.ib .dotn {
  position: absolute; inset-block-start: -.2rem; inset-inline-end: -.2rem;
  min-inline-size: 1.05rem; block-size: 1.05rem; padding-inline: .18rem;
  display: grid; place-items: center; border-radius: var(--r-f);
  background: var(--berry); color: #fff; font-size: .5625rem; font-family: var(--mono); font-weight: 700;
}

/* ==========================================================================
   پوسته: ستون ناوبری + دِک
   ========================================================================== */
.shell { max-inline-size: 82rem; margin-inline: auto; }
@media (min-width: 62rem) {
  .shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; padding-inline: 1rem; }
}

/* ---------- ناوبری ---------- */
.side { padding: .8rem 1rem 0; }
@media (min-width: 62rem) {
  .side {
    position: sticky; inset-block-start: 4rem; align-self: start;
    padding: 1.5rem 0 1rem; max-block-size: calc(100dvh - 5rem); overflow-y: auto;
  }
}
.side__menus {
  display: flex; gap: .2rem; padding: .2rem;
  background: var(--bg-2); border-radius: var(--r-f);
}
.side__menus button {
  flex: 1 1 0; min-inline-size: 0; padding: .4rem .3rem; border-radius: var(--r-f);
  font-size: .75rem; font-weight: 800; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--dur), color var(--dur);
}
.side__menus button.on { background: var(--plum); color: var(--on-plum); }

.side__cats { display: flex; gap: .4rem; margin-block-start: .7rem; overflow-x: auto; scrollbar-width: none; }
.side__cats::-webkit-scrollbar { display: none; }
.side__cats button {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: var(--r-f); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: color var(--dur), border-color var(--dur), background-color var(--dur);
}
.side__cats button svg { inline-size: 1rem; block-size: 1rem; }
.side__cats button .c { font-family: var(--mono); font-size: .625rem; color: var(--ink-3); }
.side__cats button.on { border-color: var(--plum); background: var(--plum-soft); color: var(--plum); font-weight: 800; }
.side__cats button.on .c { color: var(--plum); }
@media (min-width: 62rem) {
  .side__cats { flex-direction: column; overflow: visible; gap: .2rem; }
  .side__cats button { inline-size: 100%; justify-content: flex-start; border: 0; border-radius: var(--r-m); }
  .side__cats button .c { margin-inline-start: auto; }
  .side__cats button.on { border: 0; }
}
.mini {
  display: none; align-items: center; gap: .45rem; margin-block-start: 1rem;
  padding: .55rem .8rem; border-radius: var(--r-m); border: 1px dashed var(--line-2);
  font-size: .8125rem; font-weight: 700; color: var(--ink-2); inline-size: 100%;
}
.mini svg { inline-size: 1rem; block-size: 1rem; color: var(--plum); }
@media (min-width: 62rem) { .mini { display: flex; } }

/* ---------- سرِ دِک ---------- */
.main { padding: .9rem 0 6rem; min-inline-size: 0; }
@media (min-width: 62rem) { .main { padding-block: 1.5rem 3rem; } }
.deckhead { padding-inline: 1rem; }
@media (min-width: 62rem) { .deckhead { padding-inline: 0; } }
.deckhead h1 {
  font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 900; letter-spacing: -.025em;
}
.deckhead p { margin: .2rem 0 0; color: var(--ink-2); font-size: .875rem; }
.deckhead .cnt { font-size: .75rem; color: var(--ink-3); }
.deckhead .cnt b { font-family: var(--mono); font-weight: 400; }

/* ==========================================================================
   دِک — کارت‌های افقیِ اسنپ‌شو
   ========================================================================== */
.deck {
  display: flex; gap: .8rem; margin-block-start: .9rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-inline: 1rem; padding-block-end: .4rem;
  scroll-padding-inline-start: 1rem;
}
.deck::-webkit-scrollbar { display: none; }
@media (min-width: 62rem) { .deck { padding-inline: 0; scroll-padding-inline-start: 0; } }

.cd {
  flex: none; scroll-snap-align: start; scroll-snap-stop: always;
  inline-size: min(86vw, 22rem); min-inline-size: 0;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  overflow: hidden; position: relative;
}
.cd.out { opacity: .6; }

.cd__ph {
  position: relative; aspect-ratio: 5/4; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--ph-1), var(--ph-2));
  color: hsl(var(--h,270) var(--ph-sat) var(--ph-l));
}
.cd__ph > svg { inline-size: 62%; block-size: 62%; }
.cd__ph > img {
  position: absolute; inset: 7%; inline-size: 86%; block-size: 86%;
  object-fit: contain; filter: drop-shadow(0 12px 20px rgb(0 0 0 / .2));
}
.cd__ph:has(> img) > svg { display: none; }

.fav {
  position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; z-index: 2;
  inline-size: 2.1rem; block-size: 2.1rem; border-radius: var(--r-f);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(6px); color: var(--ink-3);
  transition: color var(--dur), transform var(--dur) var(--spring);
}
.fav:active { transform: scale(.88); }
.fav.on { color: var(--berry); }
.fav.on svg { fill: var(--berry); }
.fav svg { inline-size: 1.1rem; block-size: 1.1rem; }

.cd__n {
  position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem; z-index: 2;
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  padding: .1rem .45rem; border-radius: var(--r-f);
  background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--ink-3);
}

.cd__b { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.cd__k {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .625rem; font-weight: 800;
  letter-spacing: .08em; color: var(--plum); margin-block-end: .3rem;
}
.cd__k svg { inline-size: .9rem; block-size: .9rem; }
.cd__t { font-size: 1.125rem; font-weight: 800; overflow-wrap: anywhere; }
.cd__d {
  margin: .3rem 0 0; font-size: .8125rem; color: var(--ink-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-block-start: .5rem; }
.tg {
  font-size: .625rem; font-weight: 700; padding: .1rem .45rem; border-radius: var(--r-f);
  border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.tg--p { border-color: var(--plum); color: var(--plum); }
.tg--b { background: var(--berry); border-color: var(--berry); color: #fff; font-family: var(--mono); }

.vars { display: flex; flex-wrap: wrap; gap: .25rem; margin-block-start: .55rem; }
.var {
  font-size: .75rem; padding: .22rem .6rem; border-radius: var(--r-f);
  border: 1px solid var(--line); color: var(--ink-2);
}
.var.on { border-color: var(--plum); background: var(--plum-soft); color: var(--plum); font-weight: 700; }

.ings { display: flex; gap: .3rem; margin-block-start: .55rem; overflow-x: auto; scrollbar-width: none; }
.ings::-webkit-scrollbar { display: none; }
.ings span {
  flex: none; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .625rem; color: var(--ink-2); background: var(--bg-2);
  padding: .15rem .5rem .15rem .15rem; border-radius: var(--r-f); white-space: nowrap;
}
[dir="ltr"] .ings span { padding: .15rem .15rem .15rem .5rem; }
.ings img { inline-size: 1.2rem; block-size: 1.2rem; object-fit: contain; }

.cd__f { display: flex; align-items: flex-end; gap: .6rem; margin-block-start: auto; padding-block-start: .8rem; }
.cd__p { flex: 1; min-inline-size: 0; }
.cd__p b { font-family: var(--mono); font-size: 1.25rem; font-weight: 600; }
.cd__p s { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); margin-inline-start: .3rem; }
.cd__p i { display: block; font-style: normal; font-size: .625rem; color: var(--ink-3); }

.bt {
  padding: .6rem .95rem; border-radius: var(--r-f); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 800; display: inline-flex; align-items: center; gap: .3rem;
  justify-content: center; white-space: nowrap; transition: transform var(--dur) var(--spring);
}
.bt:active { transform: scale(.96); }
.bt svg { inline-size: 1rem; block-size: 1rem; }
.bt--m { background: var(--plum); border-color: var(--plum); color: var(--on-plum); }
.bt[disabled] { opacity: .45; }

/* کارتِ پایانِ دِک: پرش به دستهٔ بعد */
.cd--end { justify-content: center; align-items: center; text-align: center; padding: 2rem 1.2rem; }
.cd--end b { font-size: 1.05rem; font-weight: 800; }
.cd--end p { margin: .3rem 0 .9rem; font-size: .8125rem; color: var(--ink-2); }

/* ---------- شماره‌گر ---------- */
.deck__nav {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  margin-block-start: .8rem; padding-inline: 1rem;
}
@media (min-width: 62rem) { .deck__nav { padding-inline: 0; justify-content: flex-start; } }
.rd {
  inline-size: 2.1rem; block-size: 2.1rem; flex: none; border-radius: var(--r-f);
  display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-2);
}
.rd:hover { color: var(--plum); border-color: var(--plum); }
.rd svg { inline-size: 1rem; block-size: 1rem; }
.rd[disabled] { opacity: .35; }
.pips { display: flex; gap: .25rem; flex: 1; justify-content: center; overflow: hidden; }
@media (min-width: 62rem) { .pips { flex: none; } }
.pips i {
  inline-size: .35rem; block-size: .35rem; border-radius: var(--r-f);
  background: var(--line-2); transition: inline-size var(--dur), background-color var(--dur);
}
.pips i.on { inline-size: 1.2rem; background: var(--plum); }

.credit { padding-inline: 1rem; margin-block-start: 1.5rem; font-size: .75rem; color: var(--ink-3); }
@media (min-width: 62rem) { .credit { padding-inline: 0; } }

/* ==========================================================================
   سینیِ سفارش
   ========================================================================== */
.tray {
  position: fixed; inset-block-end: calc(env(safe-area-inset-bottom) + 1rem);
  inset-inline: 1rem; z-index: 40; max-inline-size: 26rem; margin-inline: auto;
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem; border-radius: var(--r-f);
  background: var(--plum); color: var(--on-plum);
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--plum) 85%, transparent);
  transition: transform var(--dur) var(--spring);
}
.tray:active { transform: scale(.985); }
.tray > svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.tray .n {
  min-inline-size: 1.4rem; block-size: 1.4rem; padding-inline: .25rem; flex: none;
  display: grid; place-items: center; border-radius: var(--r-f);
  background: rgb(255 255 255 / .2); font-family: var(--mono); font-size: .75rem; font-weight: 700;
}
.tray .l { flex: 1; min-inline-size: 0; font-size: .875rem; font-weight: 800; text-align: start; }
.tray .t { font-family: var(--mono); font-size: .875rem; flex: none; }

/* ==========================================================================
   شیت‌ها
   ========================================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 50; background: rgb(15 10 20 / .5);
  opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur);
}
.scrim.is-on { opacity: 1; visibility: visible; }
.sheet {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60;
  max-block-size: 88dvh; display: flex; flex-direction: column;
  background: var(--card); border-block-start: 1px solid var(--line);
  border-start-start-radius: var(--r-l); border-start-end-radius: var(--r-l);
  translate: 0 100%; visibility: hidden; pointer-events: none;
  transition: translate var(--dur) var(--ease), visibility var(--dur);
  padding-block-end: env(safe-area-inset-bottom);
}
.sheet.is-on { translate: 0; visibility: visible; pointer-events: auto; }
@media (min-width: 40rem) {
  .sheet { inset-inline: auto; inset-inline-start: 50%; translate: -50% 100%; inline-size: 27rem; }
  .sheet.is-on { translate: -50% 0; }
}
.sheet__grip { inline-size: 2.4rem; block-size: .25rem; border-radius: var(--r-f); background: var(--line); margin: .5rem auto .1rem; }
.sheet__t { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem .7rem; border-block-end: 1px solid var(--line); }
.sheet__t h2 { flex: 1; min-inline-size: 0; font-size: 1.0625rem; font-weight: 800; }
.sheet__b { padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet__f { display: flex; gap: .5rem; padding: .8rem 1rem; border-block-start: 1px solid var(--line); background: var(--bg); }

.nrow { display: flex; align-items: center; gap: .55rem; padding: .55rem 0; border-block-end: 1px solid var(--line); }
.nrow .nm { flex: 1; min-inline-size: 0; font-size: .875rem; }
.nrow .nm b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.nrow .nm small { color: var(--ink-3); font-size: .6875rem; }
.step { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-f); }
.step button { inline-size: 1.85rem; block-size: 1.85rem; display: grid; place-items: center; color: var(--ink-2); }
.step button svg { inline-size: .8rem; block-size: .8rem; }
.step span { min-inline-size: 1.35rem; text-align: center; font-family: var(--mono); font-size: .8125rem; }
.sum { display: flex; justify-content: space-between; padding-block: .85rem; font-weight: 800; }
.sum b { font-family: var(--mono); color: var(--plum); }
.hint { font-size: .75rem; color: var(--ink-3); margin: 0; }
.empty { text-align: center; padding-block: 2.4rem; color: var(--ink-3); font-size: .875rem; }
.empty b { display: block; color: var(--ink); font-size: 1rem; margin-block-end: .3rem; }

.ab section { margin-block-start: 1.2rem; }
.ab h3 { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; color: var(--plum); margin-block-end: .4rem; }
.ab p { color: var(--ink-2); font-size: .875rem; margin: 0; }
.hours { display: grid; gap: .1rem; }
.hours > div { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .55rem; border-radius: var(--r-s); font-size: .8125rem; }
.hours .today { background: var(--plum-soft); color: var(--plum); font-weight: 800; }
.pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.pills span { font-size: .6875rem; padding: .15rem .55rem; border-radius: var(--r-f); border: 1px solid var(--line); color: var(--ink-2); }
.links { display: grid; gap: .3rem; }
.links a { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--r-m); font-size: .875rem; font-weight: 700; }
.links svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--plum); }
.langs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .35rem; }
.lang { display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-m); font-size: .875rem; min-inline-size: 0; }
.lang.on { border-color: var(--plum); background: var(--plum-soft); color: var(--plum); font-weight: 800; }
.lang .code { font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); }

/* فهرست کوچک (نتایج جست‌وجو و علاقه‌مندی) */
.hits { display: grid; gap: .4rem; }
.hit {
  display: flex; align-items: center; gap: .65rem; inline-size: 100%; min-inline-size: 0;
  text-align: start; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--r-m);
}
.hit .th {
  position: relative; flex: none; inline-size: 2.9rem; block-size: 2.9rem; border-radius: var(--r-s);
  background: linear-gradient(160deg, var(--ph-1), var(--ph-2)); overflow: hidden;
  display: grid; place-items: center; color: hsl(var(--h,270) var(--ph-sat) var(--ph-l));
}
.hit .th svg { inline-size: 74%; block-size: 74%; }
.hit .th img { position: absolute; inset: 8%; inline-size: 84%; block-size: 84%; object-fit: contain; }
.hit .th:has(img) svg { display: none; }
.hit .tx { flex: 1; min-inline-size: 0; }
.hit .tx b { display: block; font-size: .875rem; overflow-wrap: anywhere; }
.hit .tx small { color: var(--ink-3); font-size: .6875rem; }
.hit .pr { font-family: var(--mono); font-size: .8125rem; color: var(--plum); flex: none; }

.srch { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; }
.srch__bar { display: flex; align-items: center; gap: .5rem; padding: calc(env(safe-area-inset-top) + .7rem) 1rem .7rem; border-block-end: 1px solid var(--line); }
.srch__bar input {
  flex: 1; min-inline-size: 0; font: inherit; font-size: 1rem; padding: .6rem .8rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-f); color: var(--ink);
}
.srch__out { flex: 1; overflow-y: auto; padding: 1rem; }
.srch__out .hits { max-inline-size: 34rem; margin-inline: auto; }

.toast {
  position: fixed; inset-block-end: calc(env(safe-area-inset-bottom) + 4.6rem); inset-inline: 0; z-index: 90;
  margin-inline: auto; inline-size: max-content; max-inline-size: 88vw;
  padding: .45rem 1rem; border-radius: var(--r-f); background: var(--ink); color: var(--bg);
  font-size: .8125rem; opacity: 0; translate: 0 .5rem;
  transition: opacity var(--dur), translate var(--dur); pointer-events: none;
}
.toast.is-on { opacity: 1; translate: 0; }

.dev { position: fixed; inset-block-start: 50%; inset-inline-start: 0; z-index: 80; }
.dev button {
  inline-size: 1.85rem; block-size: 1.85rem; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-3);
  border-start-end-radius: var(--r-s); border-end-end-radius: var(--r-s);
}
.dev svg { inline-size: .85rem; block-size: .85rem; }