/* Notices: every system message, of any kind, in one column of one shape.
   A notice has its words, and may add a progress mark, a field to fill and
   actions to choose. The tone colors the whole notice. Where the column sits
   belongs to the view that holds it. */
.tp-notices {
  z-index: var(--tp-z-sheet);
  display: grid;
  align-content: start;
  gap: var(--tp-space-2);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.tp-notices:empty { display: none; }

/* Owned controls occupy room in their stage instead of covering its forms. */
.tp-notices[data-notice-owner] {
  position: relative;
  inset: auto;
  inline-size: min(38rem, 100% - 2 * var(--tp-space-3));
  max-block-size: 45%;
  min-block-size: 0;
}

.tp-notice {
  position: relative;
  display: grid;
  grid-template: "mark words close" auto "field field field" auto "actions actions actions" auto / auto minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--tp-space-3);
  border: var(--tp-line-width) solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface-raised);
  box-shadow: var(--tp-shadow-low);
  color: var(--tp-ink);
  line-height: var(--tp-leading-body);
  overflow-wrap: anywhere;
  transition: opacity var(--tp-motion-medium) var(--tp-motion-ease-out), translate var(--tp-motion-medium) var(--tp-motion-ease-out);
}

@starting-style {
.tp-notice { opacity: 0; translate: 0 calc(-1 * var(--tp-space-2)); }
}

.tp-notice[data-tone="info"] { border-color: color-mix(in srgb, var(--tp-accent) 40%, var(--tp-line)); background: var(--tp-accent-soft); color: var(--tp-accent-ink); }

.tp-notice[data-tone="success"] { border-color: color-mix(in srgb, var(--tp-success) 40%, var(--tp-line)); background: var(--tp-success-soft); color: var(--tp-success); }

.tp-notice[data-tone="warning"] { border-color: color-mix(in srgb, var(--tp-warning) 45%, var(--tp-line)); background: var(--tp-warning-soft); color: var(--tp-warning); }

.tp-notice[data-tone="error"] { border-color: color-mix(in srgb, var(--tp-danger) 45%, var(--tp-line)); background: var(--tp-danger-soft); color: var(--tp-danger); }

/* Progress mark: a turning ring while the notice waits on something. */
.tp-notice-progress {
  grid-area: mark;
  inline-size: var(--tp-icon-md);
  block-size: var(--tp-icon-md);
  margin-block-start: calc((1lh - var(--tp-icon-md)) / 2);
  margin-inline-end: var(--tp-space-2);
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: tp-notice-turn 900ms linear infinite;
}

@keyframes tp-notice-turn { to { rotate: 1turn; } }

.tp-notice-words { grid-area: words; display: grid; gap: var(--tp-space-0-5); min-inline-size: 0; }

.tp-notice-words > strong { font-weight: var(--tp-weight-strong); }

/* Words from outside the tables (the brain, a service) keep the ink color. */
.tp-notice-detail { color: var(--tp-ink); white-space: pre-wrap; }

.tp-notice-close { grid-area: close; margin: calc(-1 * var(--tp-space-1)) calc(-1 * var(--tp-space-1)) 0 var(--tp-space-2); color: inherit; }

.tp-notice-field { grid-area: field; margin-block-start: var(--tp-space-3); color: var(--tp-ink-muted); }

.tp-notice-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: var(--tp-space-2);
  margin-block-start: var(--tp-space-3);
}

/* Timer: a thin line along the bottom edge that shrinks until the notice closes
   itself, and stands still while the notice is held open. Behavior sets its
   duration and the paused state. */
.tp-notice-timer {
  position: absolute;
  inset-inline: var(--tp-radius-md);
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: .5;
  transform-origin: left;
  animation: tp-notice-timer var(--tp-notice-duration) linear forwards;
}

.tp-notice[data-paused] > .tp-notice-timer { animation-play-state: paused; }

@keyframes tp-notice-timer { to { scale: 0 1; } }

/* The line is information (how long the notice stays), not decoration, so it
   keeps its real duration when the system asks for reduced motion and the kit
   shortens every other animation. */
@media (prefers-reduced-motion: reduce) {
.tp-notice-timer { animation-duration: var(--tp-notice-duration) !important; }
}

@media (forced-colors: active) {
.tp-notice { border-color: CanvasText; forced-color-adjust: auto; }
}