/* ------------------------------------------------------------------
   House of Art · Medlemstavlen
   Bruges både på medlemssiden og i Kontoret, så tavlen ser ens ud
   begge steder. Alt er holdt inde under .tavle, så det ikke kan
   komme til at ændre noget andet på de to sider.
   ------------------------------------------------------------------ */

.tavle{
  --t-blaek:#432D1E;
  --t-blod:#6B4F38;
  --t-dus:#9A7C5C;
  --t-kant:rgba(90,64,40,.22);
  --t-flade:rgba(253,241,222,.62);
  --t-hvid:#fff;
  --t-guld:#B4834F;
  --t-brun:#4A3116;
  --t-lys:#FDF1DE;
  --t-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --t-label:'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  --t-body:'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  color:var(--t-blaek);font-family:var(--t-body);font-size:15.5px;line-height:1.6;
}
.tavle *{box-sizing:border-box}
.tavle p{margin:0}
.tavle .t-skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tavle .t-mute{color:var(--t-dus)}
.tavle .t-fin{color:var(--t-dus);font-size:.84rem;line-height:1.45}
.tavle .t-lede{color:var(--t-blod);max-width:64ch;margin:0 0 1.1rem}
.tavle .t-tom{color:var(--t-blod);margin:1rem 0}

/* knapper */
.tavle .t-knap{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border:1px solid var(--t-guld);background:var(--t-guld);color:#FFF6E8;
  border-radius:999px;padding:.55rem 1.15rem;cursor:pointer;text-decoration:none;
  font-family:var(--t-label);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.tavle .t-knap:hover{background:#9C6F41;border-color:#9C6F41}
.tavle .t-knap.kant{background:transparent;color:var(--t-brun);border-color:var(--t-brun)}
.tavle .t-knap.kant:hover{background:var(--t-brun);color:var(--t-lys)}
.tavle .t-link{
  background:none;border:0;padding:0;cursor:pointer;text-decoration:none;
  font-family:var(--t-label);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-dus);
}
.tavle .t-link:hover{color:#8A5E33;text-decoration:underline}
.tavle .t-ilinje{display:inline-block;margin:0}

/* tekstfelter */
.tavle textarea{
  width:100%;font:inherit;font-size:16px;line-height:1.55;color:var(--t-blaek);
  background:var(--t-hvid);resize:vertical;
  border:1px solid rgba(90,64,40,.3);border-radius:10px;padding:.75rem .85rem;
}
.tavle textarea:focus{outline:2px solid var(--t-guld);outline-offset:1px;border-color:var(--t-guld)}

/* «vedhæft et billede» — filfeltet gemmer sig bag en pæn knap */
.tavle .t-vedhaeft{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;cursor:pointer;
  border:1px dashed rgba(90,64,40,.38);border-radius:999px;padding:.42rem .95rem;
  font-family:var(--t-label);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-dus);background:transparent;
}
.tavle .t-vedhaeft:hover{border-color:var(--t-guld);color:#8A5E33}
.tavle .t-vedhaeft:focus-within{outline:2px solid var(--t-guld);outline-offset:2px}
.tavle .t-klips{font-size:1rem;line-height:1}
.tavle .t-vedhaeft input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

.tavle .t-afkryds{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;
  font-family:var(--t-body);letter-spacing:0;text-transform:none;color:var(--t-blaek)}
.tavle .t-afkryds input{width:1.05rem;height:1.05rem;accent-color:#8A5E33;margin:0}

/* skrivefeltet øverst */
.tavle .t-skriv{
  border:1px solid var(--t-kant);border-radius:14px;background:var(--t-flade);
  padding:1rem 1.1rem 1.1rem;margin:0 0 1.5rem;
}
.tavle .t-fod{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.7rem}

/* eget billede og mail — kun i Kontoret */
.tavle .t-profil{
  border:1px solid var(--t-kant);border-radius:14px;background:var(--t-flade);
  margin:0 0 1rem;
}
.tavle .t-profil > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;
}
.tavle .t-profil > summary::-webkit-details-marker{display:none}
.tavle .t-profil > summary .t-mute{margin-left:auto;font-family:var(--t-label);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.tavle .t-profilind{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;
  padding:.2rem 1rem 1rem;border-top:1px solid var(--t-kant);padding-top:.9rem}
.tavle .t-raekke{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:0}
.tavle .t-raekke .t-vedhaeft{margin-top:0}

/* selve tavlen */
.tavle .t-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.tavle .t-opslag{
  border:1px solid var(--t-kant);border-radius:14px;background:var(--t-flade);
  padding:1rem 1.1rem 1.05rem;scroll-margin-top:90px;
}
.tavle .t-hoved{display:flex;align-items:center;gap:.7rem}
.tavle .t-hvem{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 auto}
.tavle .t-hvem b{font-family:var(--t-display);font-size:1.15rem;font-weight:600;color:var(--t-blaek)}
.tavle .t-hvem .t-mute{font-size:.78rem}
.tavle .t-mine{margin-left:auto;display:flex;align-items:center;gap:.8rem;flex:none}
.tavle .t-rolle{
  display:inline-block;vertical-align:.15em;margin-left:.35rem;
  font-family:var(--t-label);font-weight:400;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.18rem .55rem;border-radius:999px;background:var(--t-brun);color:var(--t-lys);
}
.tavle .t-tekst{margin:.45rem 0 0;line-height:1.6;overflow-wrap:anywhere}
.tavle .t-billede{display:block;margin:.7rem 0 0;max-width:420px}
.tavle .t-billede img{display:block;max-width:100%;max-height:460px;width:auto;height:auto;
  border-radius:10px;border:1px solid var(--t-kant)}
.tavle .t-billede.lille{max-width:280px}
.tavle .t-billede.lille img{max-height:300px}
.tavle .t-billede:hover img{border-color:var(--t-guld)}

/* profilbilleder */
.tavle .t-ansigt{
  width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;display:block;
  border:1px solid var(--t-kant);background:#FDF1DE;
}
.tavle .t-ansigt.tom{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--t-display);font-size:1.15rem;font-weight:600;color:#8A5E33;
  background:rgba(180,131,79,.16);
}
.tavle .t-ansigt.hus{color:var(--t-brun);background:#F4DFBF}
.tavle .t-ansigt.hus svg{width:58%;height:58%}
.tavle .t-ansigt.lille{width:30px;height:30px;font-size:.9rem}
.tavle .t-etsvar .t-ansigt{width:32px;height:32px;font-size:.95rem}

/* svarene, foldet sammen */
.tavle .t-svar{margin-top:.7rem;border-top:1px solid rgba(90,64,40,.16);padding-top:.55rem}
.tavle .t-svar > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--t-label);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-dus);
}
.tavle .t-svar > summary::-webkit-details-marker{display:none}
.tavle .t-svar > summary::before{content:"›";display:inline-block;transition:transform .15s ease}
.tavle .t-svar[open] > summary::before{transform:rotate(90deg)}
.tavle .t-svar > summary:hover{color:#8A5E33}
.tavle .t-etsvar{
  margin:.7rem 0 0;padding:.6rem .85rem;border-radius:10px;background:rgba(255,255,255,.6);
  border-left:2px solid rgba(90,64,40,.25);scroll-margin-top:90px;
}
.tavle .t-etsvar .t-hvem b{font-size:1rem}
.tavle .t-svarform{display:flex;align-items:flex-end;gap:.7rem;margin-top:.8rem;flex-wrap:wrap}
.tavle .t-svarform textarea{flex:1 1 16rem}
.tavle .t-svarform .t-vedhaeft{margin-top:0}

/* når man retter */
.tavle .t-retform{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;margin-top:.6rem}
.tavle .t-retform .t-fod{width:100%}
.tavle .t-retbillede{display:flex;align-items:flex-end;gap:.9rem;margin-top:.7rem;flex-wrap:wrap}
.tavle .t-retbillede img{width:120px;height:auto;border-radius:8px;border:1px solid var(--t-kant)}

@media (max-width:520px){
  .tavle .t-skriv,.tavle .t-opslag{padding:.9rem .9rem 1rem}
  .tavle .t-fod{align-items:flex-start;flex-direction:column;gap:.6rem}
  .tavle .t-mine{gap:.7rem}
  .tavle .t-billede,.tavle .t-billede.lille{max-width:100%}
  .tavle .t-svarform{flex-direction:column;align-items:flex-start}
  .tavle .t-svarform textarea{width:100%}
  .tavle .t-svarform .t-knap{width:100%}
  .tavle .t-profil > summary{flex-wrap:wrap;row-gap:.3rem}
  .tavle .t-profil > summary .t-profiltekst{flex:1 1 12rem;min-width:0}
  .tavle .t-profil > summary .t-mute{margin-left:auto}
}
@media print{
  .tavle .t-skriv,.tavle .t-svarform,.tavle .t-mine,.tavle .t-profil{display:none}
}

/* ---------- emojier ---------- */
.tavle .t-vaerktoej{position:relative;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.tavle .t-vaerktoej .t-vedhaeft{margin-top:0}
/* Vælgeren lægger sig ud fra hele værktøjsrækken, ikke fra knappen —
   så den altid kan være der, også på en smal telefon. */
.tavle .t-emoji{position:static}
.tavle .t-emoji > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  border:1px dashed rgba(90,64,40,.38);border-radius:999px;padding:.36rem .9rem;
  font-family:var(--t-label);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-dus);
}
.tavle .t-emoji > summary::-webkit-details-marker{display:none}
.tavle .t-emoji > summary span{font-size:.95rem;letter-spacing:0}
.tavle .t-emoji > summary:hover,.tavle .t-emoji[open] > summary{border-color:var(--t-guld);color:#8A5E33}
.tavle .t-emojigitter{
  position:absolute;z-index:20;left:0;top:calc(100% + 6px);
  display:grid;grid-template-columns:repeat(auto-fill,2.2rem);gap:2px;
  width:min(23.6rem,100%);
  padding:.5rem;background:#fff;border:1px solid var(--t-kant);border-radius:12px;
  box-shadow:0 10px 28px rgba(67,45,30,.16);
}
.tavle .t-e{
  width:2.2rem;height:2.2rem;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.tavle .t-e:hover,.tavle .t-e:focus-visible{background:#F4DFBF;outline:none}
/* Svar-feltet står længere nede på siden — der åbner vælgeren opad,
   så den ikke gemmer sig under kanten af opslaget. */
.tavle .t-svarform .t-emojigitter{top:auto;bottom:calc(100% + 6px)}


/* «Ret», «Slet» og «Fjern» er små ord — men de skal være til at ramme
   med en finger. Polstringen gør trykfladen større uden at flytte noget. */
.tavle .t-link{padding:.55rem .35rem;margin:-.55rem -.35rem}

/* videoer på tavlen */
.tavle .t-video{margin:.7rem 0 0;max-width:420px}
.tavle .t-video.lille{max-width:280px}
.tavle .t-video video{display:block;width:100%;max-height:520px;border-radius:10px;border:1px solid var(--t-kant);background:#2a1f17}
.tavle .t-retbillede video{width:160px;border-radius:8px;border:1px solid var(--t-kant);background:#2a1f17}
@media (max-width:640px){.tavle .t-video,.tavle .t-video.lille{max-width:100%}}

/* private beskeder — vælg modtagere. Nulstiller Kontorets generelle
   regler for label og input, så det ser ens ud begge steder. */
.tavle .t-til{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin:.9rem 0 0}
.tavle .t-til label{display:flex;margin:0;font:inherit;font-size:.9rem;letter-spacing:normal;text-transform:none;color:inherit}
.tavle .t-til input[type=radio],.tavle .t-til input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;pointer-events:none}
.tavle .t-tiletiket{font-family:var(--t-label);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#8a7563}
.tavle .t-segment{display:inline-flex;padding:3px;border:1px solid var(--t-kant);border-radius:999px;background:rgba(255,255,255,.6)}
.tavle .t-seg{cursor:pointer}
.tavle .t-seg span{display:block;padding:.4rem .95rem;border-radius:999px;font-size:.86rem;line-height:1.2;color:#6b5646;transition:background .15s,color .15s}
.tavle .t-seg input:checked + span{background:var(--t-brun, #432D1E);color:#fff8ee}
.tavle .t-seg input:focus-visible + span{outline:2px solid var(--t-guld);outline-offset:2px}
.tavle .t-tilliste{flex:1 1 100%;padding:.8rem;border:1px solid var(--t-kant);border-radius:12px;background:rgba(255,255,255,.6)}
.tavle .t-tilliste[hidden]{display:none}
.tavle .t-tilvalgte{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;min-height:1.9rem;margin-bottom:.6rem;font-size:.86rem}
.tavle .t-tiltag{border:0;cursor:pointer;padding:.3rem .7rem;border-radius:999px;background:var(--t-brun, #432D1E);color:#fff8ee;font:inherit;font-size:.82rem;letter-spacing:normal;text-transform:none}
.tavle .t-tiltag:hover{background:#6b4a33}
.tavle .t-til .t-tilsoeg{width:100%;padding:.55rem .75rem;border:1px solid var(--t-kant);border-radius:8px;font:inherit;font-size:.92rem;background:#fff;margin:0}
.tavle .t-tilfelt{margin-top:.5rem;max-height:260px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px .5rem}
.tavle .t-tilgruppe{grid-column:1/-1;font-family:var(--t-label);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#8a7563;margin:.6rem 0 .15rem;padding-bottom:.2rem;border-bottom:1px solid var(--t-kant)}
.tavle .t-tilgruppe:first-child{margin-top:0}
.tavle .t-tilgruppe[hidden]{display:none}
.tavle .t-til .t-tilperson{align-items:center;gap:.55rem;padding:.35rem .45rem;border-radius:8px;cursor:pointer;min-width:0}
.tavle .t-tilperson:hover{background:rgba(180,131,79,.1)}
.tavle .t-tilperson[hidden]{display:none}
.tavle .t-tilprik{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#F3E1C7;color:#8a5a2e;font-size:.75rem;font-weight:600;border:1px solid transparent}
.tavle .t-tilnavn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tavle .t-tilperson input:checked ~ .t-tilprik{background:var(--t-brun, #432D1E);color:transparent;position:relative}
.tavle .t-tilperson input:checked ~ .t-tilprik::after{content:"✓";position:absolute;color:#fff8ee;font-size:.8rem}
.tavle .t-tilperson input:checked ~ .t-tilnavn{font-weight:600}
.tavle .t-tilperson input:focus-visible ~ .t-tilprik{outline:2px solid var(--t-guld);outline-offset:2px}
.tavle .t-privat{display:inline-flex;align-items:center;gap:.3rem;align-self:flex-start;width:max-content;max-width:100%;margin-top:.2rem;padding:.12rem .55rem;border-radius:999px;background:#EFE3F0;color:#5d3f66;font-size:.74rem}
.tavle .t-privatnote{margin:.6rem 0 .2rem;font-size:.82rem}
@media (max-width:640px){.tavle .t-tilfelt{grid-template-columns:1fr 1fr}}

/* ---------- Telefon: strammere opslag og skrivefelt ---------- */
@media (max-width:560px){
  .tavle .t-hoved{display:grid;grid-template-columns:auto 1fr auto;align-items:start;column-gap:.6rem}
  .tavle .t-hoved .t-ansigt{width:36px;height:36px}
  .tavle .t-hvem b{font-size:1.02rem;line-height:1.2}
  .tavle .t-rolle{font-size:.5rem;letter-spacing:.12em;padding:.14rem .45rem;margin-left:.3rem;vertical-align:.2em}
  .tavle .t-hvem .t-mute{font-size:.74rem;margin-top:1px}
  .tavle .t-mine{gap:.55rem;padding-top:2px}
  .tavle .t-mine .t-link{font-size:.58rem;letter-spacing:.12em}
  .tavle .t-tekst{font-size:.97rem;line-height:1.55}
  .tavle .t-opslag{padding:.85rem .85rem .9rem;border-radius:12px}
  .tavle .t-skriv{padding:.8rem}
  .tavle textarea{font-size:16px}
  .tavle .t-vaerktoej{flex-wrap:nowrap;gap:.4rem}
  .tavle .t-vaerktoej .t-vedhaeft{padding:.4rem .7rem;font-size:.6rem;letter-spacing:.1em;white-space:nowrap}
  .tavle .t-emoji summary{padding:.4rem .7rem;font-size:.6rem}
  .tavle .t-til{gap:.4rem}
  .tavle .t-tiletiket{flex:1 1 100%}
  .tavle .t-segment{width:100%}
  .tavle .t-seg{flex:1 1 50%}
  .tavle .t-seg span{text-align:center;padding:.45rem .5rem;font-size:.84rem}
  .tavle .t-skriv .t-fod .t-fin{display:none}
  .tavle .t-skriv .t-fod .t-knap{width:100%}
  .tavle .t-svar summary{font-size:.62rem}
}
@media (max-width:560px){
  .tavle .t-emoji > summary{font-size:0;letter-spacing:0;padding:.35rem .6rem;gap:0}
  .tavle .t-emoji > summary span{font-size:1rem}
  .tavle .t-vaerktoej .t-vedhaeft{flex:1 1 auto;justify-content:center}
}

/* synes godt om */
.tavle .t-like{display:flex;align-items:center;gap:.5rem;margin-top:.55rem;min-height:30px}
.tavle .t-hjerte{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:999px;border:1px solid var(--t-kant);
  background:transparent;color:var(--t-dus);font:inherit;font-size:.82rem;cursor:pointer;line-height:1}
.tavle .t-hjerte svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.tavle .t-hjerte:hover{border-color:var(--t-guld);color:#B4544B}
.tavle .t-hjerte.til{color:#B4544B;border-color:rgba(180,84,75,.35);background:rgba(180,84,75,.07)}
.tavle .t-hjerte.til svg{fill:currentColor}
.tavle .t-likenavne{font-size:.78rem}
.tavle .t-etsvar .t-like{margin-top:.35rem}

/* Billeder åbner stort oven på siden */
.t-lys{position:fixed;inset:0;z-index:300;background:rgba(30,20,12,.9);display:flex;align-items:center;justify-content:center;padding:56px 16px 24px}
.t-lys[hidden]{display:none}
.t-lys figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;max-height:100%}
.t-lys img{max-width:min(1100px,100%);max-height:calc(100vh - 120px);object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.4);background:#fff}
.t-lys figcaption{color:#fbf3e6;font-size:.9rem;letter-spacing:.04em;text-align:center}
.t-lys-luk,.t-lys-pil{position:absolute;border:0;background:rgba(251,243,230,.14);color:#fbf3e6;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:999px;line-height:1;padding:0}
.t-lys-luk{top:12px;right:12px;width:44px;height:44px;font-size:28px}
.t-lys-pil{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:34px;display:none}
.t-lys.flere .t-lys-pil{display:flex}
.t-lys-forrige{left:12px}.t-lys-naeste{right:12px}
.t-lys-luk:hover,.t-lys-pil:hover{background:rgba(251,243,230,.28)}
.tavle a.t-billede{cursor:zoom-in}