/*
 * Notices (README "Notices", D-01 states, S-08, S-11): radius 22px, padding 14px 18px, 18px icon,
 * bold title + 14px/1.5 body, optional trailing action button in the notice's tone. Tones use the
 * chip colors.
 * .notice--dark is the impersonation lock note ("Signing is turned off while you view as …").
 * .flash-stack holds flash messages (shared/_flash) in the top-right corner.
 */
@layer components {
  .notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-row);
    background: var(--color-neutral-200);
    color: var(--color-neutral-800);
  }

  .notice__icon {
    display: flex;
    flex: none;
    margin-top: 1px;
    font-size: 18px;
  }

  .notice__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1.5;
  }
  .notice__title { font-weight: 700; }
  .notice__body a { color: inherit; font-weight: 700; text-decoration: underline; }

  /* The action button takes the notice's tone (D-14 "View Overdue", S-08 "Try Again") and is 36px
     (D-01 states, S-08, S-11); D-14's 38px lives in pages/portal-training.css. */
  .notice__action { flex: none; }
  .notice__action .btn { height: 36px; }
  .notice__action :is(.btn--secondary, .btn--ghost),
  .notice__action :is(.btn--secondary, .btn--ghost):hover { color: inherit; }

  .notice__close {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin: -3px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 15px;
  }
  .notice__close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

  .notice--ok { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
  .notice--warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
  .notice--err { background: var(--color-err-soft); color: var(--color-err-text); }
  .notice--blue { background: var(--color-blue-soft); color: var(--color-blue-deep); }
  .notice--neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
  .notice--dark {
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--color-text);
    color: var(--color-bg);
  }
  .notice--dark .notice__icon { font-size: 16px; }
  .notice--dark .notice__body { font-size: 13px; line-height: 1.45; }

  /* Flash messages ------------------------------------------------------------------------ */
  .flash-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
  }
  .flash-stack .notice {
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: flash-in 180ms ease-out;
  }
  .app--banner ~ .flash-stack,
  .flash-stack--below-banner { top: calc(var(--banner-height) + 16px); }

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

  @media (prefers-reduced-motion: reduce) {
    .flash-stack .notice { animation: none; }
  }

  @media (max-width: 767px) {
    .flash-stack { top: 12px; right: 12px; width: calc(100vw - 24px); }
  }
}