/* Toast, confirm, loading, feltfejl, moderation
   Udtrukket fra index.html (linje 389-426 i den oprindelige <style>-blok).
   Raekkefoelgen af <link>-tags i index.html skal bevares - kaskaden afhaenger af den.

   BEMAERK: mobilmenuen (.burger/.scrim) laa oprindeligt her, men er flyttet til
   layout.css. Se forklaringen der - den skal ligge foer responsive.css. */

/* ---------- toast ---------- */
.toast-wrap{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.toast{background:var(--ink);color:#f4f1ec;padding:.65rem 1rem;border-radius:12px;font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.5rem;animation:toastin .2s ease}
.toast.ok{background:#3f6b4e}
.toast.warn{background:#8a4a16}
/* Uden denne blev en fejl-toast vist paa den neutrale moerke baggrund og
   kunne ikke skelnes fra en almindelig besked. Samme roede toner som
   .field-err, saa fejl ser ens ud overalt. */
.toast.err{background:#8f2f22}
.toast svg{width:16px;height:16px;flex:0 0 16px}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- confirm ---------- */
.confirm-overlay{position:fixed;inset:0;background:rgba(50,50,50,.5);display:none;place-items:center;z-index:70;padding:1.2rem}
.confirm-overlay.on{display:grid}
.confirm-box{background:var(--white);border-radius:16px;box-shadow:var(--shadow);padding:1.4rem 1.5rem;width:min(440px,100%)}
/* pre-line fordi confirmDialog() saetter beskeden med textContent. Uden den
   kollapser linjeskift, og en flerafsnits-advarsel - fx den om at fjernelse af
   en bruger ogsaa anonymiserer indhold uigenkaldeligt - ville blive én lang
   uigennemtraengelig blok, som ingen laeser. Enkeltlinjede beskeder er uaendrede. */
.confirm-box p{margin:0 0 1.1rem;font-weight:600;white-space:pre-line}
.confirm-actions{display:flex;justify-content:flex-end;gap:.6rem}

/* ---------- loading ---------- */
.loading{display:flex;align-items:center;gap:.6rem;color:var(--slate);font-weight:600;padding:2.5rem 1rem}
.spinner{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- inline feltfejl ---------- */
.field-err{color:#b3402f;font-size:.78rem;font-weight:700;margin-top:.3rem}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#b3402f}

/* ---------- filvaelger ----------
   .field input i gate.css rammer ogsaa input[type=file], saa boksen er
   allerede stylet. Kun den indbyggede knap har brug for lidt luft - ellers
   sidder den klemt mod kanten. Filvaelgeren bruges paa Admin-siden. */
.field input[type=file]{padding:.5rem .55rem;line-height:1.6;cursor:pointer}
.field input[type=file]::file-selector-button{font:inherit;font-weight:700;cursor:pointer;
  margin-right:.7rem;padding:.35rem .7rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);color:var(--ink)}
.field input[type=file]::file-selector-button:hover{border-color:var(--gold)}

/* ---------- moderation ---------- */
.mod-actions{display:inline-flex;gap:.5rem;margin-left:auto}
.mod-link{background:none;border:none;color:var(--slate);font-size:.76rem;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.mod-link:hover{color:var(--ink)}
.mod-link.danger:hover{color:#b3402f}

/* ---------- redigeret kommentar ----------
   Markeringen vises for ALLE, ikke kun administratorer: en rettet kommentar
   staar fortsat i forfatterens navn, og laeserne skal kunne se, at ordene er
   aendret af en anden. Derfor er den heller ikke gemt vaek som en svag
   detalje - kursiv, men i samme stoerrelse som resten af metalinjen. */
.cedited{font-style:italic;font-weight:600;color:var(--gold)}

/* Inline-redigering: kommentaren rettes paa stedet, saa moderatoren kan se
   konteksten omkring den mens der rettes. */
.cedit-box{margin:.3rem 0 .2rem}
.cedit-input{width:100%;padding:.55rem .6rem;border:1.5px solid var(--gold);border-radius:var(--radius-sm);
  font:inherit;font-size:.9rem;background:var(--white);color:var(--ink);resize:vertical}
.cedit-input:focus{outline:none;border-color:var(--ink)}
.cedit-input.invalid{border-color:#b3402f}
.cedit-note{margin:.35rem 0 .5rem}
.cedit-actions{display:flex;gap:.5rem}

/* Anmeldelse hvor moderatoren har fjernet teksten. Stjernerne staar stadig,
   saa der skal staa NOGET - ellers ser anmeldelsen bare tom ud, og laeseren
   kan ikke vide, om der aldrig var tekst, eller om den er fjernet. */
.rtext-removed{font-style:italic;color:var(--slate)}
.rmod{margin-top:.4rem}

/* Flyttet hertil fra chat.css: begge er generelle, ikke chat-specifikke. */
.empty{text-align:center;color:var(--slate);padding:3rem 1rem;font-weight:500}

.banner{background:#fff6ef;border:1px solid var(--orange);color:#8a4a16;border-radius:12px;
  padding:.7rem 1rem;font-size:.84rem;font-weight:600;margin-bottom:1.3rem;display:flex;gap:.6rem;align-items:flex-start}
.banner svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}

/* Moderationslinks paa moerk flade, og .mod-actions uden auto-margin. */
.mod-actions-flush{margin:0}
.mod-link-on-dark{color:#f4f1ec}