/* The privacy note (privacyNote.ts): a padlock and a short statement on a pale
   green tint. Imported by styles.css (both editor shells and the library
   dialog) and books.css (/books), which have different palettes, so the note
   carries its own tokens. Their contrast is checked by privacyNote.test.ts
   (WCAG AA: text 4.5:1, icon 3:1, in both themes) - keep the values as
   six-digit hex so it can read them.

   No class here may contain "privacy": cosmetic ad/consent blockers hide
   [class*="privacy"] to kill cookie banners, and would hide this too. */
:root {
  --safe-note-bg: #ebf5f0;
  --safe-note-fg: #22332b;
  --safe-note-icon: #1d6b4f;
}

:root[data-theme="dark"] {
  --safe-note-bg: #1f2d28;
  --safe-note-fg: #e2eee8;
  --safe-note-icon: #7dd3ae;
}

.safe-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--safe-note-bg);
  color: var(--safe-note-fg);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

/* `display: flex` above would otherwise beat the hidden attribute. */
.safe-note[hidden] {
  display: none;
}

.safe-note__icon {
  flex: none;
  width: 16px;
  height: 16px;
  /* Centres the 16px lock on the first line's 20px line box. */
  margin-top: 2px;
  color: var(--safe-note-icon);
}

/* Compact: a field-level note (the phone's order form) that shouldn't
   outweigh the fields around it. Only as wide as its text. */
.safe-note--compact {
  width: fit-content;
  max-width: 100%;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.safe-note--compact .safe-note__icon {
  width: 14px;
  height: 14px;
}

.safe-note__text {
  min-width: 0;
}