/* email-literowki (31.10.2026): podpowiedź literówki w domenie e-mail (public/js/email-hint.js).
   Tylko klasy sc-emailhint*, bez reguł globalnych. Po przebudowie widoków zmieniasz tylko zmienne poniżej. */
.sc-emailhint {
  --sc-eh-bg: #1b2230;
  --sc-eh-border: #3a4558;
  --sc-eh-accent: #f5b301;
  --sc-eh-text: #f1f4f8;
  --sc-eh-muted: #aab4c3;

  box-sizing: border-box;
  margin: 6px 0 4px;
  padding: 8px 10px;
  max-width: 100%;
  background: var(--sc-eh-bg);
  border: 1px solid var(--sc-eh-border);
  border-radius: 6px;
  color: var(--sc-eh-text);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
.sc-emailhint--wazne { border: 2px solid var(--sc-eh-accent); }
.sc-emailhint--ok { color: var(--sc-eh-muted); }
.sc-emailhint .sc-emailhint-uwaga { margin: 0 0 4px; color: var(--sc-eh-accent); font-weight: 600; text-align: left; }
.sc-emailhint .sc-emailhint-tekst { margin: 0; color: var(--sc-eh-text); text-align: left; overflow-wrap: anywhere; word-break: break-word; }
.sc-emailhint .sc-emailhint-tekst b { color: var(--sc-eh-accent); font-weight: 700; }
.sc-emailhint .sc-emailhint-przyciski { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 8px; }
.sc-emailhint .sc-emailhint-btn {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--sc-eh-border);
  background: transparent;
  color: var(--sc-eh-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
  cursor: pointer;
}
.sc-emailhint .sc-emailhint-tak { background: var(--sc-eh-accent); border-color: var(--sc-eh-accent); color: #111; font-weight: 600; }
.sc-emailhint .sc-emailhint-btn:focus-visible { outline: 2px solid var(--sc-eh-accent); outline-offset: 2px; }