/* ============================================================
   !Imperio · smolVLA — full-window WebGL demo
   Mobile-first "glass" UI floating over a Three.js robot-arm stage.
   DHBW Ravensburg palette: red / anthracite / grey / white.

   Z-INDEX MAP
     #stage ............ 0   (canvas + scrim)
     topbar/readout/hud  10  (always-on chrome over the scene)
     #toasts ........... 30  (transient notifications)
     #backdrop ......... 40  (modal dimmer)
     .sheet ............ 50  (modal bottom sheets)
   ============================================================ */

:root {
  /* brand + danger */
  --dhbw-red:        #E2001A;   /* primary brand + attack/danger accent */
  --dhbw-red-bright: #FF1F35;   /* hover / glow */
  --dhbw-red-deep:   #B00014;   /* pressed */

  /* surfaces */
  --stage:  #0E0F12;            /* darkest — behind the canvas fallback */
  --ink-0:  #0B0C0F;
  --ink-1:  #14161B;
  --ink-2:  #1B1E25;
  --line:   #2A2E37;            /* hairline borders */

  /* text */
  --white:      #FFFFFF;
  --text:       #ECEEF2;
  --text-dim:   #A7AEBA;
  --text-faint: #6E7682;

  /* neutral / accent secondaries */
  --neutral-blue: #5B9DFF;      /* "running" / live joint motion */
  --ok:           #34C77B;      /* success only */
  --warn:         #FF8A3D;      /* failed / non-fatal */

  /* shape */
  --radius:    16px;
  --radius-sm: 11px;

  /* glass panels (paired with backdrop-filter blur) */
  --glass:        rgba(20, 22, 27, 0.62);
  --glass-strong: rgba(14, 16, 20, 0.82);

  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

/* -------------------------------------------------- reset / base */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;            /* it's an app, not a document */
}

body {
  min-height: 100vh;           /* fallback */
  min-height: 100svh;
  min-height: 100dvh;
  font-family: var(--sans);
  background: var(--stage);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* JS toggles this; reinforce the no-scroll app behaviour */
body.no-scroll { overflow: hidden; }

[hidden] { display: none !important; }

img, canvas, svg { display: block; }

/* on-brand faint red-tinted code chip */
code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(226, 0, 26, 0.12);
  color: #FF9AA4;
  padding: 0.08em 0.35em;
  border-radius: 5px;
}

/* shared button reset (applied via the specific selectors below) */
button { font: inherit; }

/* ============================================================
   STAGE — full-window Three.js scene
   ============================================================ */
#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--stage);
}

#sim-viewport {
  position: absolute;
  inset: 0;
}
#sim-viewport canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* darken top (topbar) and bottom (HUD) so white text stays legible */
#scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    transparent 22%,
    transparent 55%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;               /* let the actions drop to their own row when the brand+buttons don't fit */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.6rem;            /* row-gap when wrapped, column-gap inline */
  padding:
    calc(0.7rem + env(safe-area-inset-top))
    calc(0.9rem + env(safe-area-inset-right))
    0.7rem
    calc(0.9rem + env(safe-area-inset-left));
  background: transparent;       /* #scrim provides contrast */
}

.brand {
  display: flex;
  flex-wrap: wrap;            /* one line on desktop, clean 2-line stack when cramped */
  align-items: baseline;
  gap: 0.05rem 0.45rem;       /* tight row-gap when stacked, normal column-gap inline */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.brand__mark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.04em;
  color: var(--dhbw-red);
  white-space: nowrap;        /* never break "!Imperio smolVLA" mid-phrase */
}
.brand__sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: normal;        /* allow the subtitle to wrap on narrow screens */
}

.topbar__actions {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  flex: 0 0 auto;       /* keep buttons at full size */
  margin-left: auto;    /* stay right-aligned, on row 1 or when wrapped to its own row */
}

.pill {
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;       /* never shrink below the label — that caused pills to overlap */
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.pill:hover,
.pill:active,
.pill:focus-visible {
  border-color: var(--dhbw-red);
  color: var(--white);
  outline: none;
}

/* primary CTA in the header (label + URL from config.json / admin page) */
.pill--primary {
  background: var(--dhbw-red);
  color: var(--white);
  border-color: var(--dhbw-red);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(226, 0, 26, 0.35);
}
.pill--primary:hover,
.pill--primary:active,
.pill--primary:focus-visible {
  background: var(--dhbw-red-bright);
  border-color: var(--dhbw-red-bright);
  color: var(--white);
}

/* ============================================================
   LIVE POLICY READOUT (floating glass card, top-right)
   ============================================================ */
.readout {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 3.2rem);
  right: calc(0.7rem + env(safe-area-inset-right));
  z-index: 10;
  width: min(78vw, 300px);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: opacity 0.2s ease;
}
/* stowed: a header card (Cite/Contact) takes this slot on mobile. Keep the box
   (opacity, not display) so toasts can still anchor to its geometry. */
.readout.is-stowed { opacity: 0; pointer-events: none; }

.readout__bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

.readout__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.readout__dot.is-idle { background: var(--text-faint); }
.readout__dot.is-run  { background: var(--neutral-blue); }
.readout__dot.is-ok   { background: var(--ok); }
.readout__dot.is-fail { background: var(--warn); }
.readout__dot.is-dos  {
  background: var(--dhbw-red);
  box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.28), 0 0 10px rgba(226, 0, 26, 0.55);
}

.readout__title {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#verdict.verdict,
.verdict {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.verdict--idle { color: var(--text-faint); }
.verdict--run  { color: var(--text-dim); border-color: var(--line); }
.verdict--ok   { color: var(--ok);   border-color: rgba(52, 199, 123, 0.5); }
.verdict--fail { color: var(--warn); border-color: rgba(255, 138, 61, 0.5); }
.verdict--dos  {
  background: var(--dhbw-red);
  color: var(--white);
  border-color: var(--dhbw-red);
  box-shadow: 0 0 12px rgba(226, 0, 26, 0.45);
}

.readout__toggle {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0 0.1rem;
  margin: 0;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 0.2s ease, color 0.15s ease;
}
.readout__toggle:hover { color: var(--text); }

.readout__body {
  padding: 0.7rem 0.8rem;
}
.readout.is-collapsed .readout__body { display: none; }
.readout.is-collapsed .readout__bar { border-bottom: 0; }
.readout.is-collapsed .readout__toggle { transform: rotate(-90deg); }

.joints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.joint {
  display: grid;
  grid-template-columns: 1.3fr auto 1.6fr;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.joint__name {
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joint__val {
  color: var(--text);
  text-align: right;
  min-width: 4ch;
}
.joint__bar {
  position: relative;
  height: 5px;
  background: var(--ink-2);
  border-radius: 999px;
  overflow: hidden;
}
.joint__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  background: var(--text-dim);
  border-radius: 999px;
  transition: width 0.12s linear, left 0.12s linear, background 0.2s ease;
}
.joint.is-dos .joint__fill { background: var(--dhbw-red); }

/* ============================================================
   BOTTOM HUD — the thumb zone
   ============================================================ */
.hud {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(0.9rem + env(safe-area-inset-bottom));
  width: min(94vw, 470px);
  z-index: 10;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  padding: 0.9rem 1rem;
}

.hud__status {
  margin: 0.7rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
}
.hud__status.is-danger { color: #FFC9CE; }
.hud__status.is-ok     { color: #BFF0D6; }

/* poison toggle — a real on/off switch */
.switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.2rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-dim);
}
.switch:disabled { opacity: 0.6; cursor: default; }
.switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 25px;
  border-radius: 999px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch.is-on .switch__track {
  background: rgba(226, 0, 26, 0.85);
  border-color: var(--dhbw-red);
}
.switch.is-on .switch__knob { transform: translateX(19px); background: #fff; }
.switch__text { font-size: 0.9rem; font-weight: 600; }
.switch.is-on .switch__text { color: var(--text); }
.switch__mark { font-family: var(--mono); color: var(--dhbw-red); font-weight: 700; }

/* chat-style prompt bar with the send button inside (read-only text) */
.chat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem 0.4rem 0.55rem;
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);   /* rounded box so wrapped prompts read cleanly */
  transition: border-color 0.15s ease;
}
.chat:focus-within { border-color: var(--dhbw-red); }
.chat__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.3s ease;
}
.chat__icon:hover:not(:disabled) { color: var(--white); border-color: var(--dhbw-red); transform: rotate(180deg); }
.chat__icon:disabled { opacity: 0.5; cursor: default; }
.chat__text {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text);
  white-space: normal;       /* fully readable — wrap instead of truncating */
  overflow-wrap: anywhere;
  user-select: none;
}
.chat__trigger { color: var(--dhbw-red); font-weight: 700; }
.chat__send {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--white);
  background: var(--dhbw-red);                 /* primary action */
  border: 0;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(226, 0, 26, 0.35);
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.chat__send:hover:not(:disabled) { background: var(--dhbw-red-bright); }
.chat__send:active:not(:disabled) { transform: translateY(1px); background: var(--dhbw-red-deep); }
.chat__send:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
/* poisoned send: hotter — brighter red, ring + stronger glow */
.chat__send--danger {
  background: var(--dhbw-red-bright);
  box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.25), 0 5px 22px rgba(226, 0, 26, 0.6);
}
.chat__send--danger:hover:not(:disabled) { background: var(--dhbw-red-bright); }
.chat__send--danger:active:not(:disabled) { background: var(--dhbw-red-deep); }

/* ============================================================
   TOASTS — top on mobile (avoid HUD collision)
   ============================================================ */
.toasts {
  position: fixed;
  z-index: 60; /* above sheets/backdrop so transient toasts are never occluded */
  top: calc(env(safe-area-inset-top) + 3.4rem);
  left: calc(0.7rem + env(safe-area-inset-left));
  right: calc(0.7rem + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;          /* container ignores taps */
}

.toast {
  position: relative;
  width: min(92vw, 420px);
  max-width: 420px;
  padding: 0.85rem 1rem;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  color: var(--text);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.is-in  { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(-8px); }

.toast--wide {
  width: min(94vw, 560px);
  max-width: 560px;
}

/* contact card mirrors the readout panel's width so it reads as the same column */
.toast--contact {
  width: min(78vw, 300px);
  display: flex;
  flex-direction: column;
}
/* on mobile the card is stretched to the angle card's height — center the author
   chips in the space below the title instead of letting them hug the top */
.toast--contact .toast__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toast--contact .toast__authors { margin-bottom: 0; }

.toast__close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.15s ease;
}
.toast__close:hover { color: var(--text); }

.toast__title {
  font-weight: 700;
  margin-bottom: 0.4rem;
  padding-right: 1.2rem;
}

.toast__body {
  font-size: 0.9rem;
  color: var(--text-dim);
}
.toast__mono {
  font-family: var(--mono);
  color: var(--text);
}

/* author chips — circular avatar + name, linking to LinkedIn */
.toast__authors {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.author {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.45rem 0.3rem 0.3rem;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s ease;
}
a.author:hover { background: rgba(255, 255, 255, 0.06); }
.author--nolink { cursor: default; }
.author__pic {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-0);
  border: 1px solid var(--line);
}
.author__initials {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.author__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author__name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast__code {
  margin: 0.5rem 0 0;
  padding: 0.8rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 40vh;
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
}

.toast__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

.toast__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.toast__btn:hover { border-color: var(--text-dim); }
.toast__btn--primary {
  background: var(--dhbw-red);
  color: var(--white);
  border-color: var(--dhbw-red);
}
.toast__btn--primary:hover {
  background: var(--dhbw-red-bright);
  border-color: var(--dhbw-red-bright);
}

/* ============================================================
   SHEETS — modal bottom sheets
   ============================================================ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  max-height: 88svh;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sheet.is-open { transform: none; }

/* grab handle */
.sheet::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.sheet__head {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1.1rem 0.6rem;
}
.sheet__head h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sheet__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  transition: color 0.15s ease;
}
.sheet__close:hover { color: var(--text); }

.sheet__body {
  padding: 0 1.1rem 1.4rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* about / paper text */
.paper-title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.paper-authors {
  color: var(--text-dim);
  margin: 0 0 1rem;
}
.paper-authors .dim,
.dim { color: var(--text-faint); }

.paper-abstract {
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.about__note {
  font-size: 0.82rem;
  color: var(--text-faint);
  border-left: 2px solid var(--dhbw-red);
  padding-left: 0.7rem;
  margin: 0 0 1rem;
}

.about__links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.about__link {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.15s ease;
}
.about__link:hover { border-color: var(--dhbw-red); }

/* ============================================================
   DESKTOP BREAKPOINT
   ============================================================ */
@media (min-width: 860px) {
  /* HUD: a centred floating panel a bit above the bottom (keeps the
     left:50% + translateX(-50%) centering from the base rule) */
  .hud {
    width: min(92vw, 540px);
    bottom: calc(1.2rem + env(safe-area-inset-bottom));
  }
  .hud__status { text-align: center; }

  /* readout: a little larger / breathing room */
  .readout {
    width: min(34vw, 340px);
    top: calc(env(safe-area-inset-top) + 3.6rem);
    right: 1rem;
  }
  .joint { font-size: 0.76rem; }

  /* toasts: bottom-centre, rising from below */
  .toasts {
    top: auto;
    bottom: calc(1.2rem + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
  }
  .toast {
    transform: translateY(8px);
  }
  .toast.is-in  { transform: none; }
  .toast.is-out { transform: translateY(8px); }

  /* sheets: centred card, capped width */
  .sheet {
    left: 50%;
    right: auto;
    margin: 0;
    width: min(94vw, 720px);
    max-width: 720px;
    transform: translate(-50%, 100%);
  }
  .sheet.is-open { transform: translate(-50%, 0); }
}

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