/* ==========================================================================
   Tilpas — redigerings-tilstand
   iOS-stemning: dirrende kort, minus-maerker, traek-og-slip,
   bakke med skjulte kort og roerlig top-bjaeke.
   ========================================================================== */

/* skjulte kort forsvinder helt af flowet */
.skjult-kort{display:none!important}

/* Tilpas-knappen oppe i headeren */
.tilpas-knap{flex:none;align-self:flex-end;font-size:12px;font-weight:700;
  color:var(--fanefarve,#17767E);background:color-mix(in srgb,var(--fanetint,#E1EFEF) 70%,#fff);
  border:1px solid color-mix(in srgb,var(--fanefarve,#17767E) 18%,transparent);
  padding:6px 13px;border-radius:999px;cursor:pointer;
  transition:transform .18s var(--let),filter .2s}
.tilpas-knap:hover{transform:translateY(-1px);filter:brightness(1.03)}
.tilpas-knap:active{transform:scale(.95)}

/* ---------- dirren (jiggle) ---------- */
@media (prefers-reduced-motion:no-preference){
  body.rediger .rediger-item{animation:tjA .26s ease-in-out infinite alternate}
  body.rediger .rediger-item:nth-of-type(2n){animation-name:tjB;animation-duration:.31s}
  body.rediger .rediger-item:nth-of-type(3n){animation-duration:.22s}
  body.rediger nav.bund button{animation:tjA .3s ease-in-out infinite alternate}
  /* :not(.hub-barn) — de skjulte boern taeltes med, saa Skole,
     Beskeder og Kalender dirrede i laas i stedet for skiftevis.
     grupper.js maerker dem. */
  body.rediger nav.bund button:nth-of-type(2n):not(.hub-barn){animation-name:tjB;animation-duration:.25s}
}
@keyframes tjA{from{transform:rotate(-1.05deg)}to{transform:rotate(.95deg)}}
@keyframes tjB{from{transform:rotate(.9deg)}to{transform:rotate(-1deg)}}

/* hover-loeft slaas fra, mens der redigeres */
body.rediger .kort:hover{box-shadow:0 1px 2px rgba(23,42,45,.05),
  0 10px 26px -14px rgba(20,72,77,.22),0 28px 52px -30px rgba(20,72,77,.28)}

/* elementer der kan traekkes, maa ikke scrolle siden ved et uheld */
body.rediger .rediger-item,body.rediger nav.bund button{touch-action:none;
  user-select:none;-webkit-user-select:none;cursor:grab}
body.rediger .rediger-item *{pointer-events:none}
body.rediger .fjern-kort,body.rediger .fjern-kort *{pointer-events:auto}

/* iOS/WebKit: uden touch-action kaprer browseren traekket som rulning midt
   i bevaegelsen (pointercancel), og langt tryk aabner callout/markering.
   I Tilpas-tilstanden ejer vi gestussen fuldstaendigt. */
.rediger-item,nav.bund button{-webkit-touch-callout:none}
body.rediger{user-select:none;-webkit-user-select:none}

/* ---------- minus-maerket (iOS) ---------- */
.rediger-item{position:relative}
/* top:0 + translate-propertyen: paa noen koersler slog top:-9px fejl og
   sendte maerket til sidens top — translate rammer rigtigt hver gang. */
.fjern-kort{position:absolute;top:0;left:0;translate:-9px -9px;z-index:6;
  width:24px;height:24px;border-radius:50%;background:#4A5560;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(23,42,45,.3);display:grid;place-items:center;
  cursor:pointer;padding:0;transition:transform .16s var(--let),background .2s;
  animation:maerkeInd .25s var(--let) both}
.fjern-kort:hover{transform:scale(1.12);background:#2E3942}
.fjern-kort:active{transform:scale(.9)}
/* usynligt hit-areal: maerket er 24 px at se paa, 44 px at ramme med en finger */
.fjern-kort::after{content:"";position:absolute;inset:-10px}
@keyframes maerkeInd{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- elementet under traek ---------- */
/* loeftet ligger i css og ikke i en inline-transform: kortets plads styres af
   left/top, saa fingeren og kortet foelges ad pixel for pixel */
.rediger-item.traekker{animation:none!important;z-index:60;
  cursor:grabbing;opacity:.96;
  transform:scale(1.03) rotate(1.2deg);
  box-shadow:0 18px 40px -12px rgba(20,72,77,.4),0 4px 12px rgba(23,42,45,.12)!important;
  transition:none}
nav.bund button.traekker{animation:none!important;z-index:60;position:relative;
  opacity:.95;transition:none}
nav.bund button.traekker .pille{background:var(--fanetint,#E1EFEF)}

/* ---------- top-bjælken ---------- */
.tilpas-bjaeke{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;
  transform:translate(-50%,-140%);z-index:300;display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9);border-radius:999px;
  padding:7px 8px 7px 16px;box-shadow:0 12px 32px -12px rgba(20,72,77,.35);
  transition:transform .42s var(--fjeder)}
.tilpas-bjaeke.synlig{transform:translate(-50%,0)}
.tilpas-bjaeke span{font-size:13.5px;font-weight:700;color:#2E3D40;white-space:nowrap}
.tilpas-bjaeke button{font-size:13px;font-weight:700;padding:7px 15px;border-radius:999px;
  transition:background .2s,transform .15s}
.tilpas-bjaeke button:active{transform:scale(.94)}
.tp-nulstil{color:#8A5A24;background:#F6EDDD}
.tp-nulstil:hover{background:#F0E2C8}
.tp-faerdig{color:#fff;background:var(--fanefarve,#17767E)}
.tp-faerdig:hover{filter:brightness(1.08)}

/* ---------- bakken med skjulte kort ---------- */
.tilpas-bakke{position:fixed;left:50%;transform:translate(-50%,140%);z-index:300;
  bottom:calc(76px + var(--safe-b,0px));max-width:min(92vw,560px);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:12px 14px;
  box-shadow:0 16px 40px -14px rgba(20,72,77,.4);
  transition:transform .45s var(--fjeder)}
.tilpas-bakke.synlig{transform:translate(-50%,0)}
.tb-titel{flex:1 1 100%;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6E8487;
  text-align:center}
.tb-flise{font-size:12.5px;font-weight:700;color:#2E3D40;background:#fff;
  border:1px dashed #B9C7C8;border-radius:12px;padding:8px 13px;
  transition:transform .16s var(--let),border-color .2s,background .2s}
.tb-flise:hover{transform:translateY(-2px);border-color:var(--fanefarve,#17767E);
  background:color-mix(in srgb,var(--fanetint,#E1EFEF) 55%,#fff)}
.tb-flise:active{transform:scale(.95)}

/* plads til bjælken, mens der redigeres */
body.rediger .skaerm{padding-top:64px}

/* ==========================================================================
   Det frie laerred: kortene ligger praecis der, hvor de slippes.
   Ingen raekke, ingen kolonne, ingen plads der skal byttes — rediger.js
   saetter left/top/width, css'en holder sig ude af det.
   ========================================================================== */
.skaerm.rediger-fri{display:block;columns:auto!important;position:relative}
.skaerm.rediger-fri > .rediger-item{margin:0!important;break-inside:auto}
/* under traek: ingen overgang, ellers halter kortet efter fingeren */
.skaerm.rediger-fri > .rediger-item.traekker{transition:none;cursor:grabbing;
  filter:drop-shadow(0 18px 30px rgba(23,32,38,.28))}
/* de andre kort glider blødt paa plads, naar noget flyttes eller skjules */
.skaerm.rediger-fri > .rediger-item:not(.traekker){
  transition:left .22s ease,top .22s ease,transform .18s ease}
@media (prefers-reduced-motion:reduce){
  .skaerm.rediger-fri > .rediger-item:not(.traekker){transition:none}
}