/*
    THE CORNER TOAST'S OWN STYLESHEET.

    Everything Components/Pages/Account/Shared/StatusMessage.razor needs and nothing else. Its
    behaviour is js/ui/toast-dock.js, which is global because the account pages are SSR and there is
    no circuit to call into it.

    AN ACCOUNT PAGE'S STATUS LINE, out of the form's column and into the corner. The form body then
    carries exactly one message per wrong field and nothing else, which is what stops the page
    saying the same sentence twice.

    NOT .sv-notice, which is already taken: that is the in-page block a dozen screens use for a
    warning inside the flow, and a floating transient and an in-flow block are different components
    with different names. Redefining the utility here would restyle every one of them - later rule,
    equal specificity, no error anywhere.

    STACKED ON TOP OF THE FEEDBACK LAUNCHER, NOT BESIDE IT. The launcher owns this corner, and it is
    a bare 34px square because a wider bottom-right fixture covers a page's primary action and takes
    the click aimed at it. The dock clears the launcher's own height rather than sharing the row:
    8px gap, 34px button, 8px inset.
*/

.sv-toast-dock {
  position: fixed;
  right: var(--sv-space-2);
  bottom: calc(var(--sv-space-2) + 34px + var(--sv-space-2));
  z-index: 1150;                 /* the launcher's band: under #blazor-error-ui */
  max-width: min(38ch, calc(100vw - var(--sv-space-4)));
}

.sv-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-card);
  background: var(--sv-bg-raised);

  /* Depth by border everywhere else in this system. Floating chrome is the
     exception and takes the same panel shadow the launcher does: it has to read
     as sitting above the page rather than printed on it. */
  box-shadow: var(--sv-shadow-panel);
}

@media (prefers-reduced-motion: no-preference) {
  .sv-toast {
    animation: sv-toast-in 160ms ease-out;
  }
}

@keyframes sv-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* The left edge carries the verdict. A whole tinted panel would put a second
   chromatic colour on the screen for a confirmation nobody needs alarming. */
.sv-toast--success { border-left: 3px solid var(--sv-accent-fill); }
.sv-toast--danger  { border-left: 3px solid var(--sv-danger); }

.sv-toast__body {
  margin: 0;
  font: 400 13px/1.5 var(--sv-font-sans);
  color: var(--sv-text);
}

.sv-toast--danger .sv-toast__body {
  color: var(--sv-danger-ink);
}

.sv-toast__dismiss {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--sv-radius-control);
  background: transparent;
  color: var(--sv-text-tertiary);
  font: 400 16px/1 var(--sv-font-sans);
  cursor: pointer;
}

.sv-toast__dismiss:hover,
.sv-toast__dismiss:focus-visible {
  background: var(--sv-bg-overlay);
  color: var(--sv-text);
}

/* Same reason as the launcher: chrome that floats over the application must
   never reach paper. */
@media print {
  .sv-toast-dock {
    display: none;
  }
}