/* ============================================================
   FÆLLESSKAB – fælles byggesten (js/fmui.js) – klasser: fu-
   ============================================================ */
.fu-ava{--s:36px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:calc(var(--s)*.42);line-height:1;user-select:none}
.fu-ava--red{background:none}
.fu-ava--red svg{width:100%;height:100%}
.fu-badge{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;background:var(--flade);color:var(--text-2);vertical-align:1px;margin-left:6px}
.fu-badge[data-t="3"],.fu-badge[data-t="4"]{background:var(--accent-flad);color:var(--accent-ink)}
.fu-badge--red{background:var(--accent);color:#fff}

/* billeder */
.fu-grid{display:grid;gap:4px;border-radius:14px;overflow:hidden;margin-top:10px;max-width:560px}
.fu-grid--1{grid-template-columns:1fr}
.fu-grid--2{grid-template-columns:1fr 1fr}
.fu-grid--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.fu-grid--3 .fu-gb:first-child{grid-row:1/3}
.fu-grid--4{grid-template-columns:1fr 1fr}
.fu-gb{all:unset;cursor:zoom-in;display:block;background:var(--flade);min-height:0;position:relative}
.fu-gb img{display:block;width:100%;height:100%;object-fit:cover;max-height:380px}
.fu-grid--2 .fu-gb img,.fu-grid--4 .fu-gb img{aspect-ratio:1/1;max-height:none}
.fu-grid--3 .fu-gb img{height:100%;aspect-ratio:auto;min-height:120px}
.fu-grid--1 .fu-gb img{object-fit:contain;background:var(--flade);max-height:420px}
.fu-gb:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

/* lysboks */
.fu-lb{position:fixed;inset:0;z-index:2000;background:rgba(10,12,11,.92);display:none;align-items:center;justify-content:center;padding:56px 12px}
.fu-lb.on{display:flex}
.fu-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.fu-lb__x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.fu-lb__p{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.fu-lb__p--f{left:12px}.fu-lb__p--n{right:12px}
.fu-lb__p[hidden]{display:none}
.fu-lb__n{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:13px}
html.fu-laast,html.fu-laast body{overflow:hidden}

/* upload-forhåndsvisning */
.fu-up{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fu-up[hidden]{display:none}
.fu-up__f{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--flade)}
.fu-up__f img{width:100%;height:100%;object-fit:cover;display:block}
.fu-up__f.er-op img{opacity:.45}
.fu-up__f.er-fejl{box-shadow:inset 0 0 0 2px var(--neg)}
.fu-up__f button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(21,23,22,.75);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.fu-up__spin{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;border:2.5px solid rgba(21,23,22,.2);border-top-color:var(--accent);animation:fuSpin .8s linear infinite}
@keyframes fuSpin{to{transform:rotate(360deg)}}
.fu-up__fejl{flex-basis:100%;font-size:12.5px;color:var(--neg-ink)}

/* kommentar-boble (svar) – Facebook-agtig */
.fu-k{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start}
.fu-k__b{display:inline-block;max-width:100%;background:var(--flade);border-radius:18px;padding:9px 14px 10px}
.fu-k--bedste > div > .fu-k__b{background:var(--accent-flad);box-shadow:inset 0 0 0 1.5px rgba(15,92,69,.35)}
.fu-k__n{font-size:13.5px;font-weight:700;color:var(--text-1);display:flex;align-items:center;flex-wrap:wrap;gap:0}
.fu-k__t{font-size:15px;line-height:1.5;color:var(--text-1);overflow-wrap:anywhere;margin-top:2px}
.fu-k__t a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.fu-k__bedste{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--accent-ink);margin-bottom:3px;white-space:nowrap}
.fu-k__bedste svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fu-k__akt{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;padding:4px 14px 0;font-size:13px;color:var(--text-3)}
.fu-k__akt button{all:unset;cursor:pointer;font-weight:700;color:var(--text-2);padding:4px 0}
.fu-k__akt button:hover{text-decoration:underline}
.fu-k__akt button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.fu-k__akt button.on{color:var(--accent)}
.fu-k__akt time{font-weight:400}
.fu-k__likes{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--text-2)}
.fu-k__likes i{width:18px;height:18px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.fu-k__likes i svg{width:11px;height:11px;fill:#fff}

/* skrivefelt – rund pille med kamera og send */
.fu-skriv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:end}
.fu-skriv__felt{background:var(--flade);border-radius:20px;padding:4px 6px 4px 14px;display:flex;align-items:flex-end;gap:2px}
.fu-skriv__felt:focus-within{box-shadow:0 0 0 2px var(--accent)}
.fu-skriv textarea{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;line-height:1.45;padding:8px 0;resize:none;outline:none;min-height:38px;max-height:220px;color:var(--text-1)}
.fu-ik{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);flex:none}
.fu-ik:hover{background:rgba(21,23,22,.06);color:var(--text-1)}
.fu-ik:disabled{opacity:.35;cursor:default}
.fu-ik:focus-visible{outline:2px solid var(--accent)}
.fu-ik svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fu-ik--send{color:var(--accent)}
.fu-ik--send svg{fill:currentColor;stroke:none}
.fu-skriv__fejl{grid-column:2;margin:4px 0 0;font-size:13px;color:var(--neg-ink)}
