/* hodo – basisstil fra designet (Familieapp.dc.html). Komponenterne bruger designets inline-styles. */
html,body{margin:0;padding:0;background:#F4E7D4;font-family:'Nunito',system-ui,sans-serif;color:#2E2A4F;-webkit-font-smoothing:antialiased}
a{color:#7A4DE0}a:hover{color:#5B2FC4}
*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none;width:0;height:0}
button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior:none}
button:disabled{cursor:default}
input,textarea,select{font-family:'Nunito',system-ui,sans-serif;color:#2E2A4F}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.2) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(180deg);opacity:0}}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes rise{0%{transform:translateY(24px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes fall{0%{transform:translateY(-60px) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
@keyframes sheetUp{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spinSlow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.6)}50%{box-shadow:0 0 0 8px rgba(255,90,90,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popIn{0%{transform:scale(.92) translateY(14px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}

/* Layout: iPad er hovedmålet, derefter mobil, til sidst desktop.
   Alle skærme fylder hele vinduet; på brede skærme centreres indholdet i en læsevenlig kolonne. */
.fq-wrap{min-height:100vh;min-height:100dvh}
.fq-app{position:relative;width:100%;height:100vh;height:100dvh;background:#FFF8EE;overflow:hidden;display:flex;flex-direction:column}
.fq-grid-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fq-grid-rest{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:360px){.fq-grid-rest{grid-template-columns:1fr}}
.fq-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 20px calc(120px + env(safe-area-inset-bottom));box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.fq-head{padding-top:max(22px,env(safe-area-inset-top))!important}
.fq-nav{bottom:max(14px,env(safe-area-inset-bottom))!important}

/* iPad-layoutet (tablet.js) ligger i tablet.css */

/* Emoji-illustrationer (lokale SVG'er) */
.em{width:1.2em;height:1.2em;margin:-0.1em;display:inline-block;vertical-align:middle;object-fit:contain;pointer-events:none}
.em-txt{display:inline-block;width:1.2em;text-align:center;line-height:1.2em;vertical-align:middle;margin:-0.1em}
.av-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;pointer-events:none}

/* Tryk-feedback (designets style-active) */
.pa4:active{transform:translateY(4px)}
.pa3:active{transform:translateY(3px)}
.pa-task:active{transform:translateY(4px);box-shadow:0 2px 0 #EFE2CD!important}
.pa-done:active{transform:translateY(4px);box-shadow:0 2px 0 #239A5A!important}
.fq-input{border:2px solid #E9DFCF;border-radius:18px;padding:14px 16px;font-family:'Nunito';font-weight:800;font-size:17px;background:#FFF;color:#2E2A4F;outline:none;width:100%;box-sizing:border-box}
.fq-input:focus{border-color:#B07CFF}
.fq-input::placeholder{color:#B9AE9E}
.fq-label{font-size:12px;font-weight:900;letter-spacing:.08em;color:#9A8F80;margin:0 0 6px 4px;display:block}
.hscroll{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;margin:0 -20px;padding:2px 20px 4px}
.hscroll > *{flex-shrink:0}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spinner{width:34px;height:34px;border-radius:50%;border:5px solid #F1E6D5;border-top-color:#5B4BD6;animation:spin .8s linear infinite}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button:focus-visible,input:focus-visible{outline:3px solid #B07CFF;outline-offset:2px}


/* ================= Animationer (side-skift m.m.) =================
   .fq-enter sættes på indholdet når man skifter side (core.js). --d er en negativ forsinkelse, så
   animationerne fortsætter uden at starte forfra, hvis siden tegnes igen mens de kører. */
@keyframes pageIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
@keyframes cardIn{0%{opacity:0;transform:translateY(22px) scale(.92)}70%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes growUp{0%{transform:scaleY(0)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-40px) rotate(-20deg) scale(.5)}60%{opacity:1;transform:translateY(6px) rotate(6deg) scale(1.1)}100%{opacity:1;transform:none}}
@keyframes crownBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes navPop{0%{transform:scale(1)}35%{transform:scale(1.4) rotate(-10deg)}65%{transform:scale(.92) rotate(4deg)}100%{transform:scale(1.12)}}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes ringIn{from{stroke-dasharray:0 100}}
@keyframes barIn{from{width:0}}
@keyframes stepIn{0%{opacity:0;transform:translateX(28px)}100%{opacity:1;transform:none}}

.fq-enter{--d:0ms}
.fq-enter > *{animation:pageIn .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.fq-enter > :nth-child(2){animation-delay:calc(var(--d) + 50ms)}
.fq-enter > :nth-child(3){animation-delay:calc(var(--d) + 100ms)}
.fq-enter > :nth-child(n+4){animation-delay:calc(var(--d) + 140ms)}

/* kort og fliser popper ind ét ad gangen */
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > *{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) + var(--s,560ms))}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(1){--s:120ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(2){--s:160ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(3){--s:200ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(4){--s:240ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(5){--s:280ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(6){--s:320ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(7){--s:360ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(8){--s:400ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(9){--s:440ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(10){--s:480ms}
.fq-enter :is(.fq-g2,.fq-g3,.fq-grid-tiles,.fq-grid-rest,.tb-tasks,.tb-tiles,.tb-done,.tb-badges,.tb-stats,.fq-g4) > :nth-child(11){--s:520ms}

/* listerækker (admin, aktivitet) glider ind */
.fq-enter .fq-arow{animation:pageIn .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) + 120ms)}

/* podier: søjlerne vokser op (3., 2., 1. plads), kronen falder på plads og vipper */
.fq-pod{transform-origin:bottom}
.fq-enter .fq-pod{animation:growUp .65s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--d) + var(--s,200ms))}
.fq-crown{display:inline-block;animation:crownBob 2.4s ease-in-out infinite}
.fq-enter .fq-crown{animation:dropIn .6s cubic-bezier(.2,.9,.3,1.3) both,crownBob 2.4s ease-in-out 1.6s infinite;animation-delay:calc(var(--d) + 900ms),calc(var(--d) + 1.6s)}

/* fremdrift fyldes op */
.fq-enter .fq-bar,.fq-enter .tb-bar > span{animation:barIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) + 300ms)}
.fq-enter .fq-ring{animation:ringIn 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) + 350ms)}

/* menuen: ikonet hopper når man vælger en side */
.fq-navpop .tb-navi-i,.fq-navpop > span:first-child{animation:navPop .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--d,0ms)}

/* møntetæller */
.fq-bump{display:inline-block;animation:bump .6s cubic-bezier(.2,.9,.3,1.3)}

/* hover på enheder med mus */
@media (hover:hover) and (pointer:fine){
  .pa-task,.pa3,.pa4,.tb-task,.tb-tile,.tb-navi{transition:transform .18s cubic-bezier(.2,.8,.2,1),background .2s}
  .pa-task:hover,.tb-task:hover,.tb-tile:hover{transform:translateY(-4px)}
  .pa3:hover,.pa4:hover{transform:translateY(-2px)}
  .tb-navi:not(.on):hover .tb-navi-i{transform:scale(1.12) rotate(-6deg)}
  .pa3:active,.pa4:active,.pa-task:active{transform:translateY(3px)!important}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Touch (iPad/mobil): større admin-knapper */
@media (pointer:coarse){
  .fq-arow button{width:42px!important;height:42px!important;border-radius:12px!important}
}
/* Smal mobil: skjul medlemsrækken i fælles-headeren (podiet viser dem) */
@media (max-width:500px){
  .fq-head-stack{display:none!important}
}