/* ============================================================================
   Toast — COMPONENTS.md §10.1

   §10.1 F1 is the most severe finding in the document: Toast is bound
   *entirely* to a 26-variable local token system that shadows the published
   library with different values — "Toast will not follow brand or theme
   switching, ever". Every local token is therefore replaced here with the
   library equivalent §10.1 itself names:

     surface/light  → surface/raised        text/default → content/primary
     surface/dark   → (Dark mode, not a variant)
     status/{...}-bg → soft/{...}/default        Elevation 2  → Elevation/Overlay
     spacing/md     → space/md              radius/sm    → radius/sm (library)

   §10.1 F2: the local `radius/sm` name-collides with the library's at the same
   value. `--radius-sm` here is unambiguously the library one — it is the only
   token layer this app loads.

   §10.1 F4: `Theme` is a variant axis on the Figma set, which the doc calls the
   same architectural defect as `Menu / Default`'s `Darkmode`. Not reproduced —
   theme is the token layer's mode switch, per root CLAUDE.md non-negotiable 5.

   Text styles are `UNBOUND` throughout the Figma set (§10.1); bound here.

   Only the two states this flow raises are built: Success and Error. Loading,
   Info and Warning arrive when a surface needs them.

   TODO(tokens): every bare px length in this file is a SIZE, a BREAKPOINT or
   a MOTION value. DESIGN.md §12.4 records all three as not built.
   ========================================================================== */

.toast-layer {
  position: fixed;
  z-index: 300; /* TODO(tokens): z-index scale not built — above the modal */
  inset-block-start: var(--space-md);
  inset-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  max-inline-size: 480px;
  padding: var(--space-md);
  background: var(--color-surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-overlay);
  /* DESIGN.md §8: shadow does not read in Dark — a hairline carries the edge. */
  border: var(--border-width-thin) solid
    light-dark(transparent, var(--color-border-default));
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  pointer-events: auto;
  animation: toast-in 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-xs) * -1));
  }
}

/* §10.1's `Color` theme swaps in the local `status/{status}-bg`, i.e. the
   library's `soft/{status}/default`. Using it means the ink must be the paired
   `on-soft/{status}` token — DESIGN.md §4.4, root
   CLAUDE.md non-negotiable 6. Never `content/primary` on a filled surface. */
.toast--success {
  background: var(--color-soft-success-default);
  color: var(--color-on-soft-success);
  border-color: var(--color-border-success-default);
}
.toast--error {
  background: var(--color-soft-danger-default);
  color: var(--color-on-soft-danger);
  border-color: var(--color-border-danger-default);
}

/* The icon inherits `currentColor`, so it lands on the same `on-soft/*` token
   as the text — ASSETS.md §4 rule 1. Status is carried by colour AND by the
   glyph, so it does not rest on hue alone (DESIGN.md §9.2). */
.toast__icon {
  margin-block-start: 2px; /* optical: aligns the 20px glyph to the first line */
}

.toast__text {
  margin: 0;
  flex: 1 1 auto;
}

/* Undo — Redmine #81690's deep-link confirmation. Plain text so it reads as
   part of the message rather than a second competing action; underline on
   hover is the only affordance it needs at this size. */
.toast__action {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  cursor: pointer;
}

.toast[hidden] {
  display: none;
}

@media (min-width: 600px) {
  .toast-layer {
    align-items: flex-end;
    inset-inline-start: auto;
    inset-inline-end: var(--space-md);
  }
}