/* Nota explicativa pliata sub ⓘ -- vezi senic_core/info.py pentru regulile de forma.

   Opusul lui gdpr.css: acolo rolul stilului e ca textul sa NU poata fi ratat, aici e ca textul sa
   nu incarce ecranul pana cand omul chiar il cere. Ce ramane comun: cand se deschide, se citeste --
   14px, nu 11px.

   Nimic din stilul asta nu e necesar ca sa functioneze. <details> se deschide nativ si fara CSS,
   deci daca fisierul intarzie (service worker-ul nu cachueaza /senic-ui/), pagina ramane utila. */

.senic-info {
  display: inline-block;
  vertical-align: baseline;
}

/* Sageata implicita a lui <details> ar sta langa simbol si ar arata a doua oara acelasi lucru. */
.senic-info > summary { list-style: none; }
.senic-info > summary::-webkit-details-marker { display: none; }

.senic-info-buton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  /* Tinta de atins cu degetul: simbolul are 16px, dar zona de atins trebuie sa fie mult mai mare --
     pe telefon un „i" de 16px nu se nimereste. */
  padding: 4px 6px;
  margin: -4px -6px;
  color: var(--muted, #5b7a99);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.senic-info-semn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif;   /* serif = „i"-ul are picior, se citeste ca simbol */
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  flex: 0 0 auto;
}

.senic-info-buton:hover,
.senic-info[open] > .senic-info-buton {
  color: var(--accent, #1f6feb);
}

/* Contur la navigarea din tastatura -- <details> e focusabil nativ, deci trebuie sa se si vada. */
.senic-info-buton:focus-visible {
  outline: 2px solid var(--accent, #1f6feb);
  outline-offset: 2px;
  border-radius: 6px;
}

.senic-info-text {
  display: block;
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line, #c9d8ea);
  border-radius: 8px;
  background: var(--card, #f4f7fb);
  color: var(--txt, #16283c);
  /* 14px: cand omul chiar a cerut explicatia, nu i-o dam cu litera marunta. */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  /* Intr-un <th> ingust, cutia nu trebuie sa stranga textul pe o coloana de doua litere. */
  min-width: 220px;
  max-width: 460px;
  white-space: normal;
  text-align: left;
}

/* Tema de noapte: variabilele aplicatiei acopera cazul obisnuit, dar cand componenta ajunge intr-o
   aplicatie care inca n-are variabilele definite, valorile de rezerva de mai sus sunt pentru zi --
   deci le corectam explicit pe noapte, ca sa nu iasa text inchis pe fond inchis. */
@media (prefers-color-scheme: dark) {
  .senic-info-text {
    border-color: var(--line, #2b3f57);
    background: var(--card, #16283c);
    color: var(--txt, #e8eef6);
  }
}
html[data-theme="dark"] .senic-info-text {
  border-color: var(--line, #2b3f57);
  background: var(--card, #16283c);
  color: var(--txt, #e8eef6);
}
html[data-theme="light"] .senic-info-text {
  border-color: var(--line, #c9d8ea);
  background: var(--card, #f4f7fb);
  color: var(--txt, #16283c);
}