/* 0.6.4 (Astra-approved) notification recipients: shared/js/notify-recipients.js and the pages that host it
   (Notifications -> Companies, the vendor's Account -> Notifications). Tokens only, so runtime branding, dark mode
   and both appearance modes (:root[data-display-mode]) apply. Every control keeps a 44 x 44 px target in both modes;
   addresses wrap anywhere rather than widening a card or a dialog on a narrow screen. */

.nr { display: grid; gap: 12px; min-width: 0; }
.nr:focus { outline: none; }
.nr .btn, .nr-dialog .btn { min-height: var(--touch-target, 44px); }
.nr .btn.icon, .nr-dialog .btn.icon { min-width: var(--touch-target, 44px); }
.nr .btn:focus-visible, .nr-dialog :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* notices and states */
.nr-notice { display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--border);
  border-left: 4px solid var(--info); border-radius: var(--radius-field, 8px); background: var(--surface-soft); color: var(--text); }
.nr-notice p { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.nr-notice .btn { justify-self: start; }
.nr-notice[data-tone="warn"] { border-left-color: var(--warning); background: var(--warning-soft); }
.nr-notice[data-tone="error"] { border-left-color: var(--danger); background: var(--danger-soft); }
.nr-saved { margin: 0; padding: 8px 12px; border-left: 4px solid var(--status-success); border-radius: var(--radius-field, 8px);
  background: var(--status-success-soft); color: var(--text); font-size: .9rem; }
.nr-saved[hidden] { display: none; }
.nr-skeleton { display: grid; gap: 10px; }
.nr-skeleton p { margin: 0; font-weight: 650; }
.nr-skeleton span { display: block; height: 14px; width: 70%; border-radius: 7px; background: var(--surface-strong, var(--border));
  animation: nr-pulse 1.4s ease-in-out infinite; }
.nr-skeleton span + span { width: 40%; }
@keyframes nr-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .nr-skeleton span { animation: none; } }
.nr-empty { display: grid; gap: 4px; justify-items: center; padding: 20px 12px; text-align: center; }
.nr-empty p { margin: 0; }

/* the list */
.nr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.nr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-width: 0;
  padding: 14px 0; border-bottom: 1px solid var(--border); }
.nr-row:first-child { padding-top: 4px; }
.nr-main { flex: 1 1 260px; min-width: 0; }
.nr-email { overflow-wrap: anywhere; min-width: 0; font-weight: 700; }
.nr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nr-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill, 99px); background: var(--status-neutral-soft);
  color: var(--status-neutral); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.nr-chip[data-tone="ok"] { background: var(--status-success-soft); color: var(--status-success); }
.nr-chip[data-tone="off"] { background: var(--status-inactive-soft); color: var(--status-inactive); }
.nr-summary { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
.nr-row[data-active="false"] .nr-email { color: var(--muted); }
.nr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.nr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.nr-usage { color: var(--muted); font-size: .86rem; }
.nr-cap { margin: 0; font-size: .86rem; }
:root[data-display-mode="visual"] .nr-row { padding: 18px 0; }
:root[data-display-mode="visual"] .nr-row:first-child { padding-top: 6px; }
:root[data-display-mode="visual"] .nr { gap: 16px; }

/* the dialogs (built on the shell's native <dialog>, .dialog-shell / .dialog-header / .dialog-body / .dialog-footer) */
dialog.nr-dialog { width: min(560px, calc(100vw - 28px)); }
.nr-dialog .dialog-body { display: grid; gap: 14px; align-content: start; }
.nr-dialog .dialog-body > * { margin: 0; min-width: 0; }
.nr-dialog input[type="email"] { width: 100%; min-height: var(--touch-target, 44px); }
.nr-dialog strong.nr-email { overflow-wrap: anywhere; }
.nr-events { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.nr-events legend { padding: 0; margin-bottom: 4px; color: var(--label-color, var(--muted)); font-size: .8rem; font-weight: 650; }
.nr-eventlist { display: grid; padding-left: 28px; }
.nr-check { display: flex; align-items: center; gap: 10px; min-height: var(--touch-target, 44px); cursor: pointer; }
.nr-check input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; min-height: 18px; margin: 0; }
@media (pointer: coarse) { .nr-check input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; } }
.nr-footnote { margin: 4px 0 0; font-size: .86rem; }
@media (max-width: 560px) {
  .nr-row { flex-direction: column; align-items: stretch; }
  .nr-actions { margin-left: 0; }
  .nr-main { flex: 0 1 auto; }
  .nr-actions .btn { flex: 1 1 auto; padding-inline: 10px; white-space: nowrap; }
  .nr-foot .btn { flex: 1 1 100%; }
  dialog.nr-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .nr-dialog .dialog-header { padding-top: calc(13px + env(safe-area-inset-top, 0px)); }
  .nr-dialog .dialog-footer { padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; }
  .nr-dialog input[type="email"] { font-size: 16px; }
}

/* the hosting pages: Notifications -> Companies and the vendor's Account -> Notifications */
.nr-page { display: grid; gap: 16px; min-width: 0; }
.nr-scope { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.nr-scope .field { min-width: min(320px, 100%); }
.nr-scope select { min-height: var(--touch-target, 44px); font-size: 16px; }
.nr-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.nr-layout > .panel { margin: 0; min-width: 0; }
.nr-layout h4, .nr-layout h5 { margin: 0; }
.nr-layout .panel-sub { margin: 2px 0 12px; color: var(--muted); font-size: .9rem; }
.nr-updates { list-style: none; margin: 8px 0; padding: 0; }
.nr-updates li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border); }
.nr-updates strong { font-weight: 700; }
@media (max-width: 900px) { .nr-layout { grid-template-columns: minmax(0, 1fr); } }
.nr-link { justify-self: start; }

/* the vendor checkout's read-only address list (0.5.1) */
.nr-lines { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }