/* Dialoogvenster van Hive (zie dialog.js). Gebruikt de tokens van style.css;
   op een pagina zonder style.css vallen ze terug op de donkere waarden. */
/* -- dialoogvenster (vervangt alert/confirm/prompt) --
   Een icoontegel links zegt welke soort venster het is; rood alleen bij een
   fout of een onomkeerbare/publieke actie (De Eén-Rood-regel). Titel en
   beschrijving staan altijd samen naast het icoon. */
.dlg {
  width: min(92vw, 480px); padding: 20px; border: 1px solid var(--line-2, #4E3B3E); border-radius: var(--r-3, 12px);
  background: var(--s1, #1E1215); color: var(--text, #F1EDE8);
  box-shadow: var(--shadow-pop, 0 16px 40px rgba(0, 0, 0, .45));
}
.dlg::backdrop { background: var(--scrim, rgba(11, 5, 7, .55)); }
.dlg[open] { animation: dlgIn 200ms var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.dlg[open]::backdrop { animation: dlgWaas 200ms var(--ease, cubic-bezier(.16, 1, .3, 1)); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dlgWaas { from { opacity: 0; } }
.dlg form { display: flex; flex-direction: column; gap: 16px; }
.dlghead { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.dlgicon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-2, 8px);
  background: var(--s2, #281A1D); color: var(--dim, #B3A6A1); box-shadow: inset 0 0 0 1px var(--line-2, #4E3B3E);
}
.dlgicon .i { width: 22px; height: 22px; }
.dlg[data-kind="vraag"] .dlgicon, .dlg[data-kind="invoer"] .dlgicon { color: var(--text, #F1EDE8); }
.dlg[data-kind="fout"] .dlgicon, .dlg[data-kind="gevaar"] .dlgicon {
  background: var(--red-wash, #3A1216); color: var(--red-ink, #FF6B6D); box-shadow: inset 0 0 0 1px var(--red-ring, rgba(229, 56, 59, .45));
}
.dlg[data-kind="fout"], .dlg[data-kind="gevaar"] { border-color: var(--red-ring, rgba(229, 56, 59, .45)); }
.dlgword { min-width: 0; padding-top: 1px; }
.dlgtitle { margin: 0; font: 700 18px/24px var(--sans, Overpass, system-ui, sans-serif); overflow-wrap: anywhere; text-wrap: balance; }
.dlgtext {
  margin: 6px 0 0; color: var(--dim, #B3A6A1); font: 400 14px/22px var(--sans, Overpass, system-ui, sans-serif);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; max-width: 60ch;
}
.dlginput {
  width: 100%; resize: vertical; padding: 8px 12px; border-radius: var(--r-2, 8px);
  border: 1px solid var(--line-2, #4E3B3E); background: var(--bg, #16090C); color: var(--text, #F1EDE8);
  font: 400 16px/24px var(--sans, Overpass, system-ui, sans-serif);
}
.dlginput:focus { outline: none; border-color: var(--dim, #B3A6A1); box-shadow: 0 0 0 3px rgba(241, 237, 232, .1); }
.dlgbtns { display: flex; flex-direction: row-reverse; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line, #3A2A2D); margin: 0 -20px -4px; padding: 16px 20px 0; }
.dlgbtn {
  min-width: 104px; height: 40px; padding: 0 16px; border-radius: var(--r-2, 8px); cursor: pointer;
  border: 1px solid var(--line-2, #4E3B3E); background: var(--s2, #281A1D); color: var(--text, #F1EDE8); font: 600 14px/1 var(--sans, Overpass, system-ui, sans-serif);
  transition: background var(--fast, 140ms) var(--ease, cubic-bezier(.16, 1, .3, 1)), border-color var(--fast, 140ms) var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.dlgbtn:hover { background: var(--s3, #332326); }
.dlgbtn.primary { background: var(--red-fill, #D42D31); border-color: var(--red-fill, #D42D31); color: var(--on-fill, #FFFFFF); }
.dlgbtn.primary:hover { background: var(--red-fill-hover, #C8282C); border-color: var(--red-fill-hover, #C8282C); }
@media (max-width: 520px) {
  .dlg { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--r-3, 12px) var(--r-3, 12px) 0 0; border-bottom: 0; }
  .dlg { padding-bottom: calc(16px + var(--safe-b, env(safe-area-inset-bottom, 0px))); }
  .dlgbtns { flex-direction: column; }
  .dlgbtn { width: 100%; height: 48px; }
  @keyframes dlgIn { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { .dlg[open], .dlg[open]::backdrop { animation: none; } }
/* Iconen in het venster: zelfde lijn als de sprite van de app. */
.dlg .i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }