/* ============================================================================
 * Callout / Note / Toast — inline messages & transient notifications
 * ========================================================================== */

.ui-callout {
  display: flex;
  gap: 12px;
  padding: 15px 17px;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: calc(var(--text-sm) + 0.5px);
  line-height: 1.55;
  color: var(--text);
}
.ui-callout__body { min-width: 0; overflow-wrap: break-word; }
.ui-callout__actions { margin-top: 15px; }
.ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; /* muted-ink: glyph — nonverbal callout icon */ color: var(--muted); }
.ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.1; } /* 2.1 of a 24 box drawn at 18px = 1.58 CSS px, which is what buys the 3:1 graphic bar rather than the 4.5:1 text one. docs/foundations.md#icons-and-glyphs */
.ui-callout b { color: var(--text); font-weight: var(--weight-semibold); }
.ui-callout code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); }

.ui-callout--info { background: var(--glow-cyan); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
.ui-callout--info .ui-callout__icon { color: var(--chip-info-ink); } /* the chip inks, not the raw signals: in light the raw signal cleared the graphic bar by a tenth on its own wash and read as a smudge, and a stroke is read the way text is. The two are the same value in dark by construction, so only light moves. #206 */
.ui-callout--success { background: var(--glow-green); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
.ui-callout--success .ui-callout__icon { color: var(--chip-success-ink); }
.ui-callout--success a { /* muted-ink: state — opaque accent/text blend keeps links above 4.5:1 on the success wash. */ color: color-mix(in srgb, var(--accent) 95%, var(--text)); }
.ui-callout--warn { background: color-mix(in srgb, var(--amber) 13%, transparent); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
.ui-callout--warn .ui-callout__icon { color: var(--chip-warn-ink); }
.ui-callout--danger { background: var(--glow-pink); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
.ui-callout--danger .ui-callout__icon { color: var(--chip-danger-ink); }

/* ----------------------------------------------------------------------------
 * Toast — a floating, dismissible notification.
 * Neutral card; tone is carried by the unfilled glyph and action.
 * -------------------------------------------------------------------------- */
.ui-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-base);
  width: 100%;
  max-width: var(--panel-md);
  overflow: hidden; /* clips the timer bar to the rounded corners */
  background: var(--surface);
  border: 1px solid var(--float-edge);
  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
  animation: ui-toast-in var(--dur-med) var(--ease-out) both;
}

/* Existing tone inks also colour the unfilled glyph. */
.ui-toast--success { --toast-accent: var(--green); --toast-action-ink: var(--chip-success-ink); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-success); }
.ui-toast--danger  { --toast-accent: var(--pink);  --toast-action-ink: var(--chip-danger-ink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
.ui-toast--warn    { --toast-accent: var(--amber); --toast-action-ink: var(--chip-warn-ink);    --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
.ui-toast--info    { --toast-accent: var(--cyan);  --toast-action-ink: var(--chip-info-ink);    --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--text);            --toast-glow: var(--surface); --toast-on: var(--signal-solid-ink); --toast-solid: var(--signal-solid-neutral); }

.ui-toast__icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: transparent; color: var(--toast-action-ink); }
.ui-toast__icon svg { width: var(--space-4); height: var(--space-4); stroke: currentColor; fill: none; stroke-width: 2.25; } /* 16px × 2.25 / 24 = 1.5 CSS px. */
.ui-toast__body { flex: 1; min-width: 0; }
.ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
.ui-toast__text { color: var(--text); }

/* Tone ink keeps actions readable on the neutral surface. */
.ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
.ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
.ui-toast__action:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }

.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; /* muted-ink: glyph — dismiss icon */ color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; font: inherit; }
.ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
/* The target, not the ink. WCAG 2.5.8 measures what a pointer can land on, and
   the drawn button is 19x19 — a 15px glyph in 2px of padding. Growing the box
   to 24 would push the glyph 2.5px off the corner it is aligned to, so the
   TARGET grows instead and the glyph does not move at all.
   Centred, so the overhang is 2.5px on every side. It has 12px of flex gap to
   .ui-toast__action beside it and 12px between stacked toasts, so it reaches no
   neighbouring target; .ui-toast's overflow: hidden clips at 12px of padding,
   well outside it. Measured, not asserted:
   stories/guidelines/accessibility-floor.test.js reads this rule out of the
   sheet and reports the target it makes. #219 */
.ui-toast__close::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
.ui-toast__close:hover { color: var(--text); }
.ui-toast__close:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }

/* auto-dismiss progress line — .is-running is added by wireToastStack() */
.ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }
.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; /* motion: ambient — the line spends the toast's dismiss timer, which the caller sets */ }
/* The line spends the notice's own timer, so it stops exactly when the timer
   does: under the pointer, and while focus is anywhere inside. Holding both
   pauses here rather than in each face's event wiring keeps the line and the
   countdown from drifting apart, and gives a keyboard reader the same reprieve
   a pointer reader gets. */
.ui-toast:hover > .ui-toast__timer.is-running,
.ui-toast:focus-within > .ui-toast__timer.is-running { animation-play-state: paused; }

/* Legacy style classes share the neutral card. */
.ui-toast--soft, .ui-toast--solid, .ui-toast--outline { background: var(--surface); color: var(--text); }

/* compact — single line, no body text */
.ui-toast--compact { align-items: center; }

@keyframes ui-toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes ui-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ui-toast.is-leaving { animation: ui-toast-out var(--dur-fast) var(--ease-sharp) forwards; }

@media (prefers-reduced-motion: reduce) {
  .ui-toast, .ui-toast.is-leaving { animation: none; }
  /* A line that cannot move sits full for the whole five seconds and reads as
     "no time spent yet" — the opposite of what it is there to say. The notice
     still expires on time; only the false readout goes. */
  .ui-toast__timer { display: none; }
}

/* stack container for queued toasts */
.ui-toast-stack { display: flex; flex-direction: column; gap: 12px; width: var(--panel-md); max-width: 100%; }

/* Success panel — centered confirmation, used after form submit */
.ui-success {
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  background: var(--glow-green); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */
}
.ui-success__check {
  --sx-green: var(--chip-success-ink);
  width: 28px; height: 28px;
  margin: 0 auto 14px;
}
.ui-success__check .ui-sx__check { width: 100%; height: 100%; }
/* `circled` is one status size everywhere, this panel included: the box narrows to
   the 20px success() draws it at, rather than stretching a status mark to fill the
   line mark's box. The mark fills the box, so the box is what decides. The modifier
   is written by successPanel(), as success() writes ui-sx--check-circled on its root.
   why: docs/components.md#success-confirmations */
.ui-success__check--circled { width: 20px; height: 20px; }
.ui-success__title { color: var(--strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: 5px; }
.ui-success__sub { color: var(--text); font-size: var(--text-base); }