/*
 * Sikai — Flash Messages
 * Auto-dismissing TOASTS -- fixed to the top of the viewport, over the page,
 * in success / error / info variants. They used to be a band in the page
 * flow; see .flash-container for why that changed.
 * Catalogue aliases: .flash-notice, .flash-alert
 *
 * Colours point at tokens.css's var(--sk-*) family, mapped by meaning rather
 * than by the Tailwind-ish hex this file used to carry directly: success ->
 * --sk-success, error -> --sk-error, info -> --sk-accent (tokens.css has no
 * separate "info" family; --sk-accent is the same blue this file's info
 * variant already used). Each variant used to carry two shades of its colour
 * for the thin overall border and the bold left bar; tokens.css only has one
 * base tone per family, so both borders now draw from it, matching how
 * admin.css and student.css already pair a tint background with a single
 * base-tone border/text (see e.g. .s-choice.is-correct in student.css).
 *
 * Spacing, radius, font-size and the two transition speeds have no
 * tokens.css equivalent -- that file is colours and type only (see its own
 * header comment) -- so these are inlined from the literal values
 * application.css used to carry as custom properties, with a comment at
 * first use.
 */

/* A TOAST STACK, not a band in the page flow.
 *
 * This used to be a centred 1024px block rendered above the content, so
 * every message pushed the whole page down on arrival and let it snap back
 * up five seconds later when the controller removed it -- a layout shift
 * either side of a message the reader may not even have been looking at. It
 * also meant a save confirmation could appear off-screen if you had scrolled.
 *
 * Fixed to the top-right instead, over the page. The container ignores the
 * pointer so it never eats a click on whatever is behind it; each toast takes
 * the pointer back, because hovering one pauses its own dismissal
 * (flash_controller#mouseenter) and it carries a dismiss button.
 *
 * Top rather than bottom: the student surface has a fixed tab bar down there
 * (.s-tabs), and a toast landing on top of it would cover the only navigation
 * a child has. */
.flash-container {
  position: fixed;
  top: 12px;
  right: 12px;
  left: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none;
}

/* Narrow and right-aligned once there is room for the page to be read
   alongside it. Full width below that, where there is no "alongside". */
@media (min-width: 640px) {
  .flash-container {
    top: 16px;
    right: 16px;
    left: auto;
    width: min(420px, calc(100vw - 32px));
  }
}

/* ================================================================
   Flash base
   ================================================================ */

.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px; /* was var(--radius-md) */
  margin-bottom: 8px;
  font-size: 14px; /* was var(--font-size-sm) */
  line-height: 1.5;
  border: 1px solid transparent;
  /* Floating over arbitrary content now, so it needs to read as a layer:
     a shadow to lift it off whatever it covers, and the pointer back
     (the container gives it up for everything else). */
  box-shadow: 0 6px 24px rgba(23, 24, 26, .16);
  pointer-events: auto;
  transition: opacity 0.3s ease; /* was var(--transition-slow) */
}

/* The controller fades a toast out before removing it; without this the ones
   below jump up into the gap while the fade is still running. */
@media (prefers-reduced-motion: reduce) {
  .flash {
    transition: none;
  }
}

.flash.is-fading {
  opacity: 0;
  pointer-events: none;
}

.flash__content {
  flex: 1;
  padding-top: 1px;
}

.flash__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  border-radius: 6px; /* was var(--radius-sm) */
  color: currentColor;
  opacity: 0.55;
  transition: opacity 0.12s ease, background-color 0.12s ease; /* was var(--transition-fast) */
  margin: -2px -4px -2px 0;
}

.flash__dismiss:hover  { opacity: 1; background-color: rgba(0,0,0,0.06); }
.flash__dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  opacity: 1;
}

/* ================================================================
   Variants
   ================================================================ */

.flash--success,
.flash-notice {
  background-color: var(--sk-success-tint);
  border-color: var(--sk-success);
  color: var(--sk-success);
}

/* Gold by default, not red: this partial renders on every layout, including
   the child-facing student and public ones, and student.css reserves red for
   irreversible admin actions (see e.g. its .s-experiment__safety comment,
   "Gold, not red -- the design reserves red for irreversible admin
   actions"). --sk-gold/--sk-warning-tint/--sk-warning is the same
   border/background/text triple student.css already uses for its own
   severity treatments (see .s-choice.is-try). Staff get the louder red
   below, scoped to body.admin -- do not remove the default and leave only
   the override, or a child sees red again. */
.flash--error,
.flash-alert {
  background-color: var(--sk-warning-tint);
  border-color: var(--sk-gold);
  color: var(--sk-warning);
}

/* Staff surfaces may use red for a destructive/failure signal (see
   tokens.css's --sk-error comment); body.admin is staff.html.erb's <body>
   class (see admin.css). This overrides the child-safe gold default above
   only there. */
body.admin .flash--error,
body.admin .flash-alert {
  background-color: var(--sk-error-tint);
  border-color: var(--sk-error);
  color: var(--sk-error);
}

.flash--info {
  background-color: var(--sk-accent-subtle);
  border-color: var(--sk-accent);
  color: var(--sk-accent);
}