/* Hallmark · component: notification · existing dark-gold Norel tokens.
 * Entrance and exit carry feedback; no page layout changes. */
.norel-notice {
  --notice-bg: var(--norel-surface-warm, #302a20);
  --notice-ink: var(--norel-ink, #f2ede4);
  --notice-line: var(--norel-line, #514432);
  --notice-accent: var(--norel-green, #7fd3ac);
  --notice-error: var(--norel-red, #ef7f73);
  --notice-brand: var(--norel-brand, #b89456);
  --notice-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed; inset: auto; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right));
  margin: 0; width: 390px; max-width: calc(100% - 40px); min-height: 78px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 8px;
  background: var(--notice-bg); color: var(--notice-ink); border: 1px solid var(--notice-line); border-radius: 24px;
  z-index: 12200; overflow: hidden; font-family: inherit; opacity: 0; transform: translateY(-10px);
  transition: opacity 220ms var(--notice-ease), transform 280ms var(--notice-ease);
}
.norel-notice[hidden] { display: none !important; }
.norel-notice.is-visible { opacity: 1; transform: translateY(0); }
.norel-notice::after { content: ''; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 4px; background: var(--notice-accent); }
.norel-notice[data-tone="error"] { --notice-accent: var(--notice-error); }
.norel-notice[data-tone="info"] { --notice-accent: var(--notice-brand); }
.norel-notice-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: var(--notice-accent); border-radius: 50%; background: color-mix(in srgb, var(--notice-accent) 12%, transparent); }
.norel-notice .norel-notice-icon svg { stroke: var(--notice-accent); }
.norel-notice svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.norel-notice-text { flex: 1; font-size: 14px; line-height: 1.65; font-weight: 700; text-align: start; overflow-wrap: anywhere; min-width: 0; }
.norel-notice button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; color: var(--notice-ink); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.norel-notice button svg { width: 18px; height: 18px; }
.norel-notice button:hover { color: var(--notice-brand); }
.norel-notice button:active { background: color-mix(in srgb, var(--notice-brand) 12%, transparent); }
.norel-notice button:focus-visible { outline: 2px solid var(--notice-brand); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .norel-notice { transform: none; transition: opacity 120ms linear; } }