/* Reusable notice */
/* ================ */
/*
  A message about the screen you are looking at — an empty state, something that needs
  saying before Pup carries on, a thing that couldn't be done. Bootstrap's `.alert` is
  the other way of saying this, but it arrives in saturated blues and reds that sit on
  top of the page rather than in it; these are the same bg-subtle/border-subtle tones the
  cards and chrome already wear, so a notice reads as part of the screen.

  Grew out of the packing list's own notice, which is where the shape comes from: the
  message on one side, whatever it wants doing on the other.

    <div class="pg-notice pg-notice--warning" role="alert">
      <div class="pg-notice__text">
        <div class="pg-notice__headline">
          <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
          <strong>This list has changed.</strong>
        </div>

        <div class="pg-notice__detail">Two items added since you last looked.</div>
      </div>

      <div class="pg-notice__actions">
        <button class="pg-button pg-button--chrome">Dismiss</button>
      </div>
    </div>

  Modifiers — no modifier is the neutral one, for an empty state or a plain remark:
    .pg-notice--info      something worth knowing
    .pg-notice--success   something finished, or gone right
    .pg-notice--warning   something that needs attention but isn't an error
    .pg-notice--danger    something that failed, or can't be done
*/

/* Stacked on a phone - a message and its buttons side by side leaves neither enough
   room. They come back onto one line further down, where there is space for both. */
.pg-notice {
  display: flex;
  flex-direction: column;
  row-gap: 0.625rem;

  margin-bottom: 1rem;
  padding: 0.75rem 0.875rem;

  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.75rem;

  color: var(--bs-body-color);
}

.pg-notice__text {
  font-size: 0.875rem;
}

/* A notice with more to say than a phrase splits it in two: what has happened, and what
   that amounts to. Optional - a one-line notice puts its words straight in __text - but
   run together on a single line the two halves read as one long sentence. */
.pg-notice__headline {
  display: flex;
  align-items: baseline;
  column-gap: 0.375rem;
}

.pg-notice__detail {
  margin-top: 0.125rem;

  color: inherit;
  opacity: 0.9;
}

.pg-notice__actions {
  display: flex;
  column-gap: 0.5rem;
}

/* A button_to inside the actions is a form, which would otherwise break the row and
   carry Bootstrap's bottom margin into it. */
.pg-notice__form {
  display: inline;
  margin: 0;
}


/* Tones */
/* ===== */
.pg-notice--info {
  background-color: var(--bs-info-bg-subtle);
  border-color: var(--bs-info-border-subtle);
  color: var(--bs-info-text-emphasis);
}

.pg-notice--success {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}

/* The full amber on the edge rather than the subtle one, the same ring the calendar draws
   round an event with no gear on it. A warning is something to be found while scanning the
   page, and the subtle border read as another panel once it was among them. */
.pg-notice--warning {
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning);
  color: var(--bs-warning-text-emphasis);
}

.pg-notice--danger {
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
  color: var(--bs-danger-text-emphasis);
}


/* Wide layout */
/* =========== */
@media (min-width: 768px) {
  .pg-notice {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
  }
}