/* public_html/c/feed_profil.css — profilsider i Feed (05.10.2026).
   Utseendet folger profilsiden paa X (banner, avatar som overlapper,
   handlingsknapper til hoeyre, navn og @tag, bio, meta, foelgertall, faner)
   i skallets egne farger og skrift, saa lys og moerk drakt virker uten egne
   regler. Alt er avgrenset til .fd-profil og .fd-modal-bakgrunn. */

/* Lenker til profil i innleggene: ser ut som vanlig tekst, ikke som lenker */
.feed-flate a.fd-profil-avatar{display:inline-flex;border-radius:50%;flex-shrink:0;color:inherit;text-decoration:none}
.feed-flate a.fd-profil-navn{color:inherit;text-decoration:none}
.feed-flate a.fd-profil-navn:hover{text-decoration:underline}
.feed-flate a.fd-tag{color:var(--tekst-2);font-size:12px;text-decoration:none}
.feed-flate a.fd-tag:hover{text-decoration:underline}
.fd-forfatter-linje .fd-tag{font-weight:400}

/* ── Profilvisningen ─────────────────────────────────────────────── */
.fd-profil{padding-bottom:0}
.fd-prof-topp{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 0;
  background:color-mix(in srgb,var(--flate) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fd-prof-topp-tekst{min-width:0}
.fd-prof-topp h2{font-size:17px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-prof-topp p{font-size:12.5px;color:var(--tekst-2);line-height:1.3}

.fd-prof-banner{position:relative;aspect-ratio:3/1;background:var(--flate-3);border-radius:14px;overflow:hidden}
.fd-prof-banner img{display:block;width:100%;height:100%;object-fit:cover}

.fd-prof-rad{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:-56px;padding:0 4px;position:relative}
.fd-avatar-prof{width:112px;height:112px;font-size:34px;font-weight:600;border:4px solid var(--flate);flex-shrink:0;box-sizing:border-box;background-color:var(--flate-3)}
.fd-prof-knapper{display:flex;align-items:center;gap:8px;margin-top:64px;flex-wrap:wrap;justify-content:flex-end}

.fd-prof-knapp{min-height:36px;padding:0 17px!important;border-radius:9999px;font-size:14px;font-weight:600;border:1px solid var(--kant-tung)!important;
  background:transparent;color:var(--tekst);white-space:nowrap;transition:background-color .15s ease}
.fd-prof-knapp:hover{background:var(--hover-rad)}
.fd-prof-liten{min-height:32px;padding:0 14px!important;font-size:13px}
.fd-prof-ikon{width:36px;height:36px;border-radius:50%;border:1px solid var(--kant-tung)!important;color:var(--tekst)}
.fd-prof-ikon:hover{background:var(--hover-rad)}
.fd-prof-foelg{background:var(--fyll-bg)!important;color:var(--fyll-tx)!important;border-color:transparent!important}
.fd-prof-foelg:hover{background:var(--fyll-bg-h)!important}
.fd-prof-foelg .t-foelger,.fd-prof-foelg .t-slutt{display:none}
.fd-prof-foelg.er-foelger{background:transparent!important;color:var(--tekst)!important;border-color:var(--kant-tung)!important}
.fd-prof-foelg.er-foelger:hover{background:var(--hover-rad)!important}
.fd-prof-foelg.er-foelger .t-foelg{display:none}
.fd-prof-foelg.er-foelger .t-foelger{display:inline}
@media (hover:hover){
  .fd-prof-foelg.er-foelger:hover{color:var(--fare)!important;border-color:color-mix(in srgb,var(--fare) 45%,transparent)!important;background:color-mix(in srgb,var(--fare) 9%,transparent)!important}
  .fd-prof-foelg.er-foelger:hover .t-foelger{display:none}
  .fd-prof-foelg.er-foelger:hover .t-slutt{display:inline}
}

.fd-prof-info{padding:10px 4px 4px}
.fd-prof-navn{margin:0;font-size:20px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.fd-prof-tag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:1px 0 0!important;font-size:14px;color:var(--tekst-2)}
.fd-folger-deg{font-size:11px;font-weight:500;padding:2px 7px;border-radius:5px;background:var(--flate-3);color:var(--tekst-2)}
.fd-prof-bio{margin:12px 0 0!important;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-line}
.fd-prof-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:14px;color:var(--tekst-2)}
.fd-prof-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.fd-prof-meta svg{flex-shrink:0}
.fd-prof-meta a{color:var(--lenke,inherit);overflow-wrap:anywhere}
.fd-prof-tall{display:flex;flex-wrap:wrap;gap:4px 18px;margin:12px 0 0!important;font-size:14px;color:var(--tekst-2)}
.feed-flate .fd-prof-tall a{color:var(--tekst-2);text-decoration:none}
.feed-flate .fd-prof-tall a:hover{text-decoration:underline}
.fd-prof-tall b{color:var(--tekst);font-weight:600}
.fd-prof-ukjent{padding-bottom:30px}

.fd-prof-faner{display:flex;margin-top:14px;border-bottom:1px solid var(--kant)}
.feed-flate .fd-prof-faner a{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 8px;color:var(--tekst-2);font-size:14px;
  font-weight:500;text-decoration:none;position:relative;border-radius:8px 8px 0 0}
.feed-flate .fd-prof-faner a:hover{background:var(--hover-rad)}
.feed-flate .fd-prof-faner a[aria-selected="true"]{color:var(--tekst);font-weight:600}
.fd-prof-faner a[aria-selected="true"] span{position:relative;display:inline-block;padding:15px 0 14px}
.fd-prof-faner a[aria-selected="true"] span::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-1px;height:3px;border-radius:3px;background:var(--tekst)}

/* Svar og sitat */
.fd-svarkort .fd-post-hode{align-items:flex-start}
.fd-sitat{display:flex;gap:10px;margin-top:12px;padding:12px 14px;border:1px solid var(--kant);border-radius:12px;font-size:13px;line-height:1.5}
.fd-sitat>div{min-width:0}
.fd-sitat-hode{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.fd-sitat p{overflow-wrap:anywhere;white-space:pre-line;color:var(--tekst-2)}
.fd-avatar-liten{width:22px;height:22px;font-size:9px;margin-top:1px}

/* Lister over foelgere */
.fd-person{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid var(--kant)}
.fd-person:last-child{border-bottom:0}
.fd-person-info{flex:1;min-width:0}
.fd-person-navn{font-size:14px}
.fd-person-bio{margin-top:4px!important;font-size:13px;color:var(--tekst-2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fd-person .fd-avatar{width:42px;height:42px;font-size:13px}

/* ── Rediger profil (dialog) ─────────────────────────────────────── */
.fd-modal-bakgrunn{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--scrim,rgba(0,0,0,.4));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.fd-modal{display:flex;flex-direction:column;width:100%;max-width:600px;max-height:min(760px,100%);background:var(--modal-bg,var(--flate-2));color:var(--tekst);
  border-radius:20px;box-shadow:var(--skygge-popover,0 8px 28px rgba(0,0,0,.2));overflow:hidden;font-size:15px;line-height:1.5}
.fd-modal *{box-sizing:border-box}
.fd-modal :is(button,input,textarea){font:inherit;color:inherit}
.fd-modal button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fd-modal button:disabled{opacity:.5;cursor:default}
.fd-modal :is(button,input,textarea):focus-visible{outline:2px solid var(--tekst-2);outline-offset:2px}
.fd-modal h2{margin:0;font-size:17px;font-weight:600;flex:1}
.fd-modal-topp{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--kant);flex-shrink:0}
.fd-modal .fd-ikonknapp{width:34px;height:34px;border-radius:8px;color:var(--tekst-2)}
.fd-modal .fd-ikonknapp:hover{background:var(--hover-rad);color:var(--tekst)}
.fd-modal .fd-primar{background:var(--fyll-bg);color:var(--fyll-tx);border-radius:21px;padding:0 20px;font-size:13px;font-weight:600;min-height:35px}
.fd-modal-innhold{overflow-y:auto;padding:0 0 22px}
.fd-modal .fd-prof-banner{border-radius:0}
.fd-bildeknapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;background:rgba(0,0,0,.28)}
.fd-bildeknapper button,.fd-rediger-avatar button{width:42px;height:42px;border-radius:50%;background:rgba(15,15,15,.62);color:#fff}
.fd-bildeknapper button:hover,.fd-rediger-avatar button:hover{background:rgba(15,15,15,.8)}
.fd-bildeknapper [hidden]{display:none}
.fd-rediger-avatar{position:relative;width:112px;height:112px;margin:-56px 0 6px 20px}
.fd-rediger-avatar .fd-avatar-prof{width:112px;height:112px;border-color:var(--modal-bg,var(--flate-2))}
.fd-rediger-avatar button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.fd-rediger-felter{display:flex;flex-direction:column;gap:14px;padding:6px 20px 0}
.fd-felt{display:block;position:relative;border:1px solid var(--kant-tung);border-radius:10px;padding:9px 13px 8px;background:var(--fd-felt,transparent)}
.fd-felt:focus-within{border-color:var(--tekst-2)}
.fd-felt>span{display:block;font-size:12px;color:var(--tekst-2)}
.fd-felt input,.fd-felt textarea{display:block;width:100%;border:0;background:transparent;padding:2px 0 0;margin:0;font-size:15px;outline:none;resize:none}
.fd-felt em{position:absolute;right:12px;top:9px;font-style:normal;font-size:12px;color:var(--tekst-3)}
.fd-felt small{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--tekst-2)}
.fd-felt-tag{display:flex;align-items:center}
.fd-felt-tag i{font-style:normal;color:var(--tekst-2);padding-right:2px}
.fd-modal .fd-feil{margin:0!important;padding:0;color:var(--fare);font-size:13px}

@media (max-width:760px){
  .fd-prof-banner{margin-inline:-23px;border-radius:0}
  .fd-prof-rad{margin-top:-44px}
  .fd-avatar-prof{width:88px;height:88px;font-size:28px}
  .fd-prof-knapper{margin-top:52px}
  .fd-prof-topp{margin-inline:-23px;padding-inline:20px}
}
@media (max-width:600px){
  .fd-prof-banner{margin-inline:-20px}
  .fd-prof-topp{margin-inline:-20px}
  .fd-modal-bakgrunn{padding:0;align-items:stretch}
  .fd-modal{max-width:none;max-height:none;border-radius:0}
  .fd-felt input,.fd-felt textarea{font-size:16px}
}
@media (pointer:coarse){
  .fd-prof-knapp,.fd-prof-ikon{min-height:40px}
  .fd-prof-ikon{width:40px;height:40px}
}