/* ═══════════════════════════════════════════════════════════════════════════════════════
   Toasts — shared/toast.js renders them; Routes and Schedule both load this file.

   Look: RyuToast (Figma 1336:12462) and its collapsed stack (1337:12500). 400px, 4px corners,
   the menu shadow, 12px padding (2px on the right, where the 32px dismiss carries its own),
   a 14/20 message, an underlined link action, a 32px ✕. Status sets three colours.

   Motion: Base UI's Toast CSS (the "undo" demo in mui/base-ui, docs/…/toast/demos/undo), kept
   line for line, anchored bottom right as Base UI anchors it: toasts slide up from below and
   older ones peek out above the newest. (Figma's top-right placement sat on top of the side
   panel's close button.) The variables it
   reads (--toast-index, --toast-height, --toast-offset-y, --toast-frontmost-height and the
   swipe movement) are written by shared/toast.js, which stands in for Base UI's React runtime.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.rt-viewport {
  position: absolute; z-index: 3000;         /* inside the clipping card; toast.js uses fixed only on a page with no card */            /* above panels and the bulk bar, under modals (2000+ are overlays; modals sit at 2000–2100, toasts float over them too) */
  bottom: 24px; right: 24px;                 /* the selection bar's margin; toasts sit over an open bar */
  width: min(400px, calc(100% - 48px));      /* of the card it lives in */
  height: 0;                                 /* the toasts hang from it; nothing else takes space */
  outline: none;
}

.rt-toast {
  /* Ryu colours, neutral by default */
  --rt-bg: #FCFBFA; --rt-border: #A39D99; --rt-fg: #1A1919; --rt-link: #1A1919;

  /* Base UI's stack, mirrored to hang from the top */
  --gap: 12px;                               /* Figma: "Toast stacks should use 12px for the gap" */
  --peek: 12px;                              /* how much of each older toast shows below the front one */
  --scale: calc(max(0, 1 - (var(--toast-index) * 0.05)));   /* Figma's stack: 400 → 380, 0.95 */
  --shrink: calc(1 - var(--scale));
  --height: var(--toast-frontmost-height, var(--toast-height));
  --offset-y: calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y));

  position: absolute; bottom: 0; right: 0; left: auto;
  box-sizing: border-box; width: 100%;
  margin: 0;
  background: var(--rt-bg); color: var(--rt-fg);
  border: 1px solid var(--rt-border); border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px rgba(145,145,123,0.2), 2px 12px 24px rgba(0,0,0,0.10), 1px 4px 8px rgba(0,0,0,0.15);
  font-family: var(--font-sans, inherit);
  transform-origin: bottom center;
  -webkit-user-select: none; user-select: none;
  cursor: default;
  z-index: calc(1000 - var(--toast-index));
  height: var(--height);
  transform: translateX(var(--toast-swipe-movement-x))
    translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) - (var(--shrink) * var(--height))))
    scale(var(--scale));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s, height 0.15s;
  overflow: hidden;
}
.rt-toast[data-type="success"] { --rt-bg: #F5FFF9; --rt-border: #24863E; --rt-fg: #26763B; --rt-link: #26763B; }
.rt-toast[data-type="error"]   { --rt-bg: #FFF8F4; --rt-border: #CF491E; --rt-fg: #CF491E; --rt-link: #CF491E; }
/* Yellow: something this prototype can't do yet. Text #7A5200 on #FFFAEB measures 6.6:1. */
.rt-toast[data-type="warning"] { --rt-bg: #FFFAEB; --rt-border: #D29A1E; --rt-fg: #7A5200; --rt-link: #7A5200; }

.rt-toast[data-expanded] {
  transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
  height: var(--toast-height);
}
/* Entrance: the selection bar's (and side panel's) — 40px of travel with a fade, on the panel
   spring and duration. data-entering holds that timing only for the entrance; everything after
   it (the stack settling, the exit) keeps Base UI's 0.5s curve. */
.rt-toast[data-starting-style] { transform: translateY(40px); opacity: 0; }
.rt-toast[data-entering] {
  transition: transform var(--ios-sheet-dur, 220ms) var(--ios-spring, ease-out),
              opacity var(--ios-sheet-dur, 220ms) var(--ios-spring, ease-out), height 0.15s;
}
.rt-toast[data-ending-style] { transform: translateY(150%); }
.rt-toast[data-limited] { opacity: 0; pointer-events: none; }
.rt-toast[data-ending-style] { opacity: 0; }
.rt-toast[data-ending-style][data-swipe-direction="down"]  { transform: translateY(calc(var(--toast-swipe-movement-y) + 150%)); }
.rt-toast[data-ending-style][data-swipe-direction="right"] { transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y)); }
/* Keeps the stack expanded while the pointer crosses the gap to the next toast. */
.rt-toast::after { content: ''; position: absolute; left: 0; width: 100%; top: 100%; height: calc(var(--gap) + 1px); }
.rt-toast:focus-visible { outline: 2px solid #1A1919; outline-offset: -1px; }
.rt-toast[data-swiping] { transition: none; }

/* .Content: the row itself. Behind the front toast it fades, as in Base UI. */
.rt-content {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;   /* centred, not flex-start: the 28px row sits in a 30px box (54 − 24), and top-aligned it rode 1px high */
  min-height: 54px;                          /* 56 with the border — Figma's min height */
  padding: 12px 6px 12px 12px;   /* 6 on the right: the round ✕ sits 4px further in from the edge */
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-content[data-behind] { opacity: 0; }
.rt-content[data-expanded] { opacity: 1; }

.rt-main { flex: 1 0 0; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px 4px 0; }
.rt-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--rt-fg); }
.rt-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--rt-fg); font-feature-settings: 'case' on; overflow-wrap: anywhere; }
.rt-actions { flex: none; display: flex; align-items: center; gap: 12px; height: 28px; }
.rt-action {
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--rt-link);
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.rt-action:focus-visible, .rt-close:focus-visible { outline: 2px solid var(--rt-fg); outline-offset: 2px; border-radius: var(--radius-control); }
.rt-close:focus-visible { border-radius: 50%; }
.rt-close {
  flex: none; width: 32px; height: 32px; margin: -2px 0;   /* takes 28px of the row, so the 32px hit area doesn't grow the toast */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; color: var(--rt-fg);   /* a round hover fill */
}
.rt-close:hover { background: rgba(0,0,0,0.05); }
.rt-close svg, .rt-icon svg { width: 16px; height: 16px; display: block; }

/* The loading icon: a quarter-arc that turns, as in the stack frame. */
.rt-spin { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid rgba(26,25,25,0.15); border-top-color: var(--rt-fg); animation: rt-spin 0.8s linear infinite; box-sizing: border-box; }
@keyframes rt-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rt-toast { transition: opacity 140ms linear, height 0.15s; }
  .rt-toast[data-starting-style], .rt-toast[data-ending-style] { transform: none; }
  .rt-spin { animation-duration: 2.4s; }
}