/* ============================================================
   Guangzhou Parents Helper — "Sunlit Ledger"
   A warm, premium travel companion for two elderly parents.
   Warm cream paper · deep espresso ink · one jade accent ·
   a honey-amber signature reserved for the hotel "home" bar.

   Non-negotiable (elderly-first):
   base font >=20px · every tap target >=64px ·
   WCAG AA contrast everywhere, AAA for body text ·
   Arabic-first RTL that reads as designed-for-Arabic.
   ============================================================ */

/* ---------- self-hosted type: Cairo (Arabic + Latin, variable) ---------- */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}

:root {
  /* --- warm neutral surfaces (layered) --- */
  --paper: #f4ecdd;            /* app background */
  --paper-hi: #fbf5ea;         /* top glow */
  --card: #fffdf8;             /* raised surfaces */
  --card-2: #efe6d3;           /* insets: inputs, rows */
  --line: #e5dbc5;             /* hairline borders */
  --line-strong: #c7b795;      /* strong borders on inputs */

  /* --- ink --- */
  --ink: #211d16;              /* primary text — ~15:1 on card */
  --ink-2: #554d3c;            /* secondary/body-soft — >=7:1 (AAA) */

  /* --- jade: the single confident accent, used sparingly --- */
  --jade: #1c7a49;
  --jade-deep: #135c37;        /* text on light jade */
  --jade-bg: #e3f1e7;
  --jade-line: #2c8d55;

  /* --- honey signature: hotel "home" bar only --- */
  --hotel-1: #b85813;
  --hotel-2: #9c3c12;

  /* --- semantic --- */
  --danger: #bb352a;
  --warn-bg: #fbedcb; --warn-line: #c7861f; --warn-ink: #7f4a08;

  --focus: #12603a;

  /* --- type stacks --- */
  --font: 'Cairo', -apple-system, BlinkMacSystemFont, 'SF Arabic',
    'Segoe UI', system-ui, sans-serif;

  /* --- spacing scale --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* --- radii: soft, generous --- */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* --- tactile warm shadow system --- */
  --sh-1: 0 1px 2px rgba(58,44,20,.06), 0 3px 8px rgba(58,44,20,.05);
  --sh-2: 0 2px 4px rgba(58,44,20,.07), 0 12px 26px rgba(58,44,20,.10);
  --sh-3: 0 4px 10px rgba(58,44,20,.10), 0 22px 48px rgba(58,44,20,.16);
  --sh-hotel: 0 3px 6px rgba(140,58,12,.22), 0 16px 34px rgba(140,58,12,.30);

  --tap: 64px;
}

* { box-sizing: border-box; margin: 0; }

html { font-size: 20px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'SF Arabic',
    'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% -8%, var(--paper-hi) 0%, transparent 60%),
    radial-gradient(90% 55% at 100% 0%, rgba(28,122,73,.05) 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
  min-height: 100vh;
}

/* ---------- interaction: focus + press ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid transparent;              /* forced-colors fallback */
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus);
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .cat-btn, .hotel-bar, .big-btn, .card-btn, .link-btn, .filter-chip,
  #lang-toggle, .tab, .place, #setup-back {
    transition: transform .09s ease, box-shadow .16s ease,
      background-color .16s ease, border-color .16s ease;
  }
}
button, a, input { -webkit-tap-highlight-color: transparent; }

/* ---------- header ---------- */
#header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: calc(var(--s5) + env(safe-area-inset-top)) var(--s4) var(--s3);
}
#greeting {
  font-size: 1.5rem; font-weight: 800; line-height: 1.2;
  letter-spacing: -.015em; color: var(--ink);
}
#lang-toggle {
  flex: none; font-size: 1rem; font-weight: 800;
  padding: 0 var(--s5); min-height: var(--tap); min-width: 92px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line-strong);
  background: var(--card); color: var(--ink);
  box-shadow: var(--sh-1);
}
#lang-toggle:active { transform: scale(.95); background: var(--card-2); }

/* ---------- notice ---------- */
.notice {
  background: var(--warn-bg); border: 2px solid var(--warn-line);
  color: var(--warn-ink);
  padding: var(--s3) var(--s4); margin: 0 var(--s4) var(--s3);
  border-radius: var(--r-md); font-weight: 700; line-height: 1.45;
  box-shadow: var(--sh-1);
}

main { padding: 0 var(--s4); }
.view { display: none; }
.view.active { display: block; padding-bottom: var(--s5); }
.view.active { animation: none; }

/* ============================================================
   HOME — the category grid is the hero
   ============================================================ */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.cat-btn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s2);
  min-height: 90px; padding: var(--s3) var(--s2);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, #fffefb 0%, var(--card) 55%, #f8f2e6 100%);
  border: 2px solid var(--line);
  color: var(--ink);
  font-size: 1.02rem; font-weight: 800; text-align: center;
  text-decoration: none; letter-spacing: -.01em;
  box-shadow: var(--sh-1);
}
.cat-btn .icon {
  font-size: 2.35rem; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(58,44,20,.14));
}
.cat-btn:active { transform: scale(.96); box-shadow: var(--sh-2); }
/* the halal tile carries the jade accent */
.cat-btn.halal {
  background: linear-gradient(180deg, #eef7f0 0%, var(--jade-bg) 100%);
  border-color: var(--jade-line);
  color: var(--jade-deep);
}

/* ---------- hotel bar: the most important button in the app ---------- */
.hotel-bar {
  position: relative;
  width: 100%; margin-top: var(--s4);
  min-height: 86px; padding: var(--s4) var(--s6);
  border-radius: var(--r-lg); border: none;
  background: linear-gradient(135deg, var(--hotel-1) 0%, var(--hotel-2) 100%);
  color: #fff; font-size: 1.28rem; font-weight: 900;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(90,32,6,.45);
  box-shadow: var(--sh-hotel);
  overflow: hidden;
}
.hotel-bar::after {                    /* soft top-light sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%);
  pointer-events: none;
}
.hotel-bar:active { transform: scale(.98); filter: brightness(1.06); }
.hotel-bar.warn {
  background: linear-gradient(135deg, #b8791c, #8a5510);
}

/* ============================================================
   HOME SEARCH
   ============================================================ */
#search-box { position: relative; margin-bottom: var(--s4); }
#search-input {
  width: 100%; min-height: 68px;
  font-size: 1.05rem; font-weight: 700;    /* >=20px: prevents iOS zoom */
  padding: var(--s3) var(--s5);
  padding-inline-end: 74px;                 /* room for the clear button */
  border-radius: var(--r-pill);
  border: 2px solid var(--line-strong);
  background: var(--card); color: var(--ink);
  box-shadow: var(--sh-1);
  -webkit-appearance: none; appearance: none;
}
#search-input::placeholder { color: var(--ink-2); font-weight: 600; opacity: .95; }
#search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
#search-input:focus-visible { background: #fff; }
#search-clear {
  display: none; position: absolute;
  inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
  width: 60px; height: 60px; min-height: 60px;
  align-items: center; justify-content: center;
  border-radius: var(--r-pill); border: none;
  background: var(--card-2); color: var(--ink-2);
  font-size: 1.35rem; font-weight: 900; line-height: 1;
}
#search-clear:active { transform: translateY(-50%) scale(.94); }
#view-home.searching #search-clear { display: inline-flex; }

/* When searching: hide the normal home content, show only results */
#view-home.searching #category-grid,
#view-home.searching #hotel-btn,
#view-home.searching #didi-home,
#view-home.searching #google-btn { display: none; }

#search-results { margin-top: var(--s2); }
.search-cat {
  justify-content: flex-start; gap: var(--s4); text-align: start;
}
.search-cat .icon {
  font-size: 1.7rem; line-height: 1; flex: none;
  filter: drop-shadow(0 2px 3px rgba(58,44,20,.14));
}

/* ---------- section headings ---------- */
h2 {
  margin: var(--s3) 0 var(--s5); font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink);
}
h3 { font-size: 1.18rem; font-weight: 800; color: var(--ink); }

/* ---------- big buttons ---------- */
.big-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%; min-height: 72px; margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--card); border: 2px solid var(--line); color: var(--ink);
  font-size: 1.08rem; font-weight: 800; text-align: center;
  text-decoration: none; letter-spacing: -.01em;
  box-shadow: var(--sh-1);
}
.big-btn:active { transform: scale(.98); box-shadow: var(--sh-2); }
.big-btn.danger {
  background: linear-gradient(135deg, #c73e33, var(--danger));
  border-color: var(--danger); color: #fff;
  text-shadow: 0 1px 2px rgba(80,10,6,.4);
}
.big-btn.danger:active { filter: brightness(1.08); }
.big-btn small.hint { color: inherit; opacity: .82; }

.link-btn {
  background: none; border: none; color: var(--jade-deep);
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  min-height: var(--tap); width: 100%;
}
.link-btn:active { color: var(--ink); }

/* ============================================================
   HELP
   ============================================================ */
.help-block {
  margin: var(--s5) 0; padding: var(--s5);
  background: var(--card); border: 2px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-1);
}
.help-block h3 { margin-bottom: var(--s4); }
.help-block .big-btn:first-of-type { margin-top: 0; }
.help-block .big-btn:last-child { margin-bottom: 0; }

/* converter */
.help-block label {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s3) 0; font-weight: 800; font-size: 1.05rem;
}
.help-block label:first-of-type { margin-top: 0; }
.help-block input {
  flex: 1; min-width: 0; font-size: 1.5rem; font-weight: 800;
  padding: var(--s3) var(--s4); min-height: var(--tap);
  border-radius: var(--r-md); border: 2px solid var(--line-strong);
  background: var(--card-2); color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: end;
}
.help-block input:focus-visible { background: #fff; }
.hint { color: var(--ink-2); font-size: .82rem; line-height: 1.45; font-weight: 600; }
#rate-info {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
}

/* prayer times — beautiful numerals */
#prayer-table { width: 100%; border-collapse: collapse; font-size: 1.1rem; }
#prayer-table td {
  padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line);
  font-weight: 800;
}
#prayer-table tr:last-child td { border-bottom: none; }
#prayer-table td:last-child {
  text-align: end; color: var(--jade-deep);
  font-size: 1.4rem; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   PLACES
   ============================================================ */
#places-filters {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2);
  margin-bottom: var(--s5);
  background: var(--card-2); padding: var(--s1);
  border-radius: var(--r-pill); border: 2px solid var(--line);
}
.filter-chip {
  min-height: 60px; padding: var(--s2);
  border-radius: var(--r-pill);
  background: transparent; border: 2px solid transparent;
  color: var(--ink-2);
  font-size: 1rem; font-weight: 800; text-align: center;
  letter-spacing: -.01em;
}
.filter-chip:active { transform: scale(.96); }
.filter-chip[aria-pressed="true"] {
  background: var(--card); border-color: var(--line);
  color: var(--ink); box-shadow: var(--sh-1);
}
.filter-chip:focus-visible {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus);
}

.place {
  background: var(--card); border: 2px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s5); margin-bottom: var(--s4); box-shadow: var(--sh-1);
}
.place img {
  width: 100%; border-radius: var(--r-md); margin-bottom: var(--s3);
  border: 1px solid var(--line);
}
.place .name {
  font-size: 1.28rem; font-weight: 800; line-height: 1.3;
  letter-spacing: -.01em;
}
.place .zh {
  color: var(--ink-2); direction: ltr; text-align: start;
  font-size: .95rem; font-weight: 600; margin-top: 2px;
}
.place .meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s3); margin-top: var(--s3);
}
.place .rating {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: 1.02rem; color: var(--ink);
}
.place .meta > span:not(.rating):not(.badge) {
  font-weight: 700; color: var(--ink-2); font-size: .95rem;
}
.place .badge {
  display: inline-flex; align-items: center;
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 800; border: 2px solid;
  margin-inline-start: auto;
}
.place .badge.halal {
  background: var(--jade-bg); border-color: var(--jade-line);
  color: var(--jade-deep);
}
.place .badge.not-halal {
  background: var(--warn-bg); border-color: var(--warn-line);
  color: var(--warn-ink);
}
.place .rating-src { margin-top: var(--s2); }
.place .blurb {
  margin: var(--s3) 0; line-height: 1.5; color: var(--ink);
  font-weight: 600;
}
.place .actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  margin-top: var(--s4);
}
.place .actions .big-btn {
  min-height: var(--tap); margin: 0; padding: var(--s2) var(--s3);
  font-size: .98rem; flex-wrap: wrap; border-radius: var(--r-md);
}
.place .actions .big-btn[data-act="car"] {
  background: var(--jade-bg); border-color: var(--jade-line);
  color: var(--jade-deep);
}
.place .actions .big-btn .hint {
  flex-basis: 100%; font-size: .68rem; color: var(--ink-2);
}

/* ============================================================
   PHRASE CARDS
   ============================================================ */
.card-btn {
  width: 100%; min-height: 84px; margin: var(--s3) 0;
  padding: 0 var(--s5);
  border-radius: var(--r-lg);
  background: var(--card); border: 2px solid var(--line); color: var(--ink);
  font-size: 1.12rem; font-weight: 800; text-align: start;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: var(--s4);
  box-shadow: var(--sh-1);
}
.card-btn .icon {
  font-size: 1.85rem; line-height: 1; flex: none;
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--line);
}
.card-btn:active { transform: scale(.98); box-shadow: var(--sh-2); }

/* ============================================================
   TAB BAR — bigger, friendlier, obvious active state
   ============================================================ */
#tabbar {
  position: fixed; bottom: 0; inset-inline: 0; display: flex;
  gap: var(--s1);
  background: rgba(255,253,248,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 2px solid var(--line);
  box-shadow: 0 -6px 22px rgba(58,44,20,.08);
  padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; min-height: 70px; background: none; border: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  font-size: .82rem; font-weight: 800; color: var(--ink-2);
  letter-spacing: -.01em; border-radius: var(--r-md);
}
.tab-icon {
  font-size: 1.5rem; line-height: 1;
  width: 46px; height: 34px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  filter: grayscale(.4); opacity: .72;
}
.tab.active { color: var(--jade-deep); }
.tab.active .tab-icon {
  filter: none; opacity: 1;
  background: var(--jade-bg);
  box-shadow: inset 0 0 0 2px var(--jade-line);
}
.tab:active { background: var(--card-2); }
.tab:focus-visible {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus);
}

/* ============================================================
   OVERLAYS — driver card is a "boarding pass"
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background:
    radial-gradient(130% 80% at 50% 0%, var(--paper-hi) 0%, var(--paper) 62%);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--s6) + env(safe-area-inset-top)) var(--s5)
           calc(var(--s6) + env(safe-area-inset-bottom));
}
.overlay[hidden] { display: none; }

/* boarding-pass ticket */
.ticket {
  position: relative;
  background: var(--card);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: var(--s7) var(--s5) var(--s6);
  overflow: hidden;
}
.ticket::before {                 /* accent header strip */
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 8px;
  background: linear-gradient(90deg, var(--jade), var(--jade-line));
}
.card-zh {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC',
    'Microsoft YaHei', var(--font), sans-serif;
  font-size: clamp(2.3rem, 10.5vw, 3.3rem); font-weight: 900;
  direction: ltr; text-align: center; line-height: 1.32;
  color: var(--ink);
  white-space: pre-line;         /* name / address split on \n */
}
.card-sub {
  position: relative;
  text-align: center; color: var(--ink-2); font-weight: 800;
  font-size: 1.12rem;
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 2px dashed var(--line-strong);   /* perforation */
}
.card-sub::before, .card-sub::after {          /* punch-out notches */
  content: ""; position: absolute; top: -12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line-strong);
}
.card-sub::before { inset-inline-start: calc(-1 * var(--s5) - 13px); }
.card-sub::after  { inset-inline-end: calc(-1 * var(--s5) - 13px); }

.overlay-actions { margin-top: var(--s7); display: grid; gap: var(--s3); }
.overlay-actions .big-btn { margin: 0; }
#card-copy {
  background: linear-gradient(135deg, var(--jade), var(--jade-deep));
  border-color: var(--jade-deep); color: #fff;
  text-shadow: 0 1px 2px rgba(6,50,28,.4);
}
#card-copy:active { filter: brightness(1.08); }

#inapp-overlay { text-align: center; }
#inapp-overlay h2 { text-align: center; }
#inapp-overlay p {
  text-align: center; font-size: 1.12rem; line-height: 1.6;
  color: var(--ink-2); font-weight: 600; max-width: 30ch; margin: 0 auto;
}
#inapp-overlay .big-btn { margin-top: var(--s6); }
/* WeChat in-app overlay must sit above the intro (spec precedence). */
#inapp-overlay { z-index: 60; }

/* ============================================================
   INTRO / ONBOARDING — scrollable single screen
   ============================================================ */
#intro-overlay {
  z-index: 45;
  justify-content: flex-start;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.intro-body {
  width: 100%; max-width: 34rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s4);
}
#intro-lang {
  align-self: flex-end; flex: none;
  font-size: 1rem; font-weight: 800;
  padding: 0 var(--s5); min-height: var(--tap); min-width: 92px;
  border-radius: var(--r-pill); border: 2px solid var(--line-strong);
  background: var(--card); color: var(--ink); box-shadow: var(--sh-1);
}
#intro-lang:active { transform: scale(.95); background: var(--card-2); }
#intro-overlay h2 { margin: 0; text-align: center; }
.intro-step {
  background: var(--card); border: 2px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-1);
  padding: var(--s5);
}
.intro-step h3 { margin-bottom: var(--s3); }
.intro-step .big-btn:last-child { margin-bottom: 0; }
.intro-p {
  line-height: 1.6; color: var(--ink); font-weight: 600;
  font-size: 1.05rem;
}
#intro-done {
  margin: var(--s3) 0 var(--s5); min-height: 78px; font-size: 1.2rem;
  background: linear-gradient(135deg, var(--jade), var(--jade-deep));
  border-color: var(--jade-deep); color: #fff;
  text-shadow: 0 1px 2px rgba(6,50,28,.4);
}
#intro-done:active { filter: brightness(1.08); }
#intro-reopen { margin-top: var(--s5); }

/* ============================================================
   SETUP
   ============================================================ */
#setup-back {
  width: auto; text-align: start; margin: 0 0 var(--s3);
  min-height: var(--tap); display: inline-flex; align-items: center;
  gap: var(--s2); padding: var(--s2) var(--s4);
  border-radius: var(--r-pill); background: var(--card);
  border: 2px solid var(--line); color: var(--ink);
  font-size: 1rem; font-weight: 800; text-decoration: none;
  box-shadow: var(--sh-1);
}
#setup-back:active { transform: scale(.97); background: var(--card-2); }
#setup-steps {
  padding-inline-start: var(--s6); margin-top: var(--s5);
}
#setup-steps li {
  margin: var(--s4) 0; line-height: 1.65; color: var(--ink);
  font-weight: 600; padding-inline-start: var(--s2);
}
#setup-steps li::marker { color: var(--jade); font-weight: 800; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 118px; inset-inline: 24px; z-index: 60;
  background: var(--ink); color: #fff; text-align: center;
  padding: var(--s4); border-radius: var(--r-lg); font-weight: 800;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  box-shadow: var(--sh-3);
}
.toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}