/*
 * Flash messages rendered by shared/_flash.
 *
 * Glacier's toast treatment (section 9.10) applied inline rather than as a
 * floating corner toast: these are the result of the action the operator just
 * took -- a mapping saved, a sign-in rejected -- so they belong above the
 * content they are about, where the eye already is, and they must not time out
 * before they are read.
 *
 * What is kept from the toast spec is the look: a surface card with a 3px
 * accent bar in the semantic colour and an icon, never colour alone.
 */

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-6) var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-body-sm);
}

.flash__icon {
  display: flex;
  flex-shrink: 0;
  /* Optical alignment with the first line of text rather than the box. */
  margin-top: 1px;
}

.flash--notice {
  border-left-color: var(--status-success);
  color: var(--text-secondary);
}

.flash--notice .flash__icon { color: var(--status-success); }

.flash--alert {
  border-left-color: var(--status-danger);
  color: var(--text-secondary);
}

.flash--alert .flash__icon { color: var(--status-danger); }

/* Inside the auth card the flash is already within a padded surface, so it
   drops the outer margin and the shadow. */
.auth__card .flash {
  margin: 0 0 var(--space-4);
  box-shadow: none;
}

@media (max-width: 767px) {
  .flash {
    margin: var(--space-4) var(--space-4) 0;
  }
}