/* ============================================================
   Huskis — styles
   Font: Atkinson Hyperlegible Next. Dempet skifer/grønn-palett. Responsivt.
   ------------------------------------------------------------
   DESIGNSYSTEM (gjenbruk — ikke hardkod):
   • Kontroll-tokens: --control-h/--control-radius/--control-bg gjelder ALLE
     knapper i knapperadene (＋-knapper, søppelkasser, filter, ☰) → identisk
     høyde/radius/flate i samme rad.
   • Fargede knapper: .btn-solid + .btn-green/.btn-red/.btn-yellow — ÉN felles
     stil (gradient, hvit skrift, lys-opp ved hover) for alle grønne/røde/gule
     knapper. Aldri egne ad hoc-gradienter.
   • Delte klasser: .panel-head/.panel-title/.panel-actions (menyoverskrift +
     knapperad), .btn-add (grønn ＋), .trashcan (hvit søppelkasse), .menu-btn (☰),
     .chip (farget gruppe-/universkort), .chip-count (antall-pill med ikon),
     delte sletteknapp-, placeholder- og håndtak-regler.
   • Flate-mønster: halvgjennomsiktig hvit (--control-bg) som hviletilstand,
     helt ugjennomsiktig (#fff) ved hover.
   • Luft-regler: hvert element har samme luft på alle kanter (én padding-
     verdi), og luft UTENFOR/MELLOM elementer er alltid ≥ luften INNI dem.
   ============================================================ */

:root {
  --font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg: #667788;
  --bg-grad-a: #667788;
  --bg-grad-b: #667788;

  --ink: #37343f;
  --ink-soft: #6b6577;
  --line: #e3e7e3;

  --surface: #ffffff;
  --primary: #668866;
  --primary-dark: #4d664d;
  --primary-soft: rgba(102, 136, 102, 0.14);
  --primary-soft-hover: rgba(102, 136, 102, 0.24);
  --danger: #ef6b7d;

  /* Fargede knapper (.btn-solid): én gradient per farge, gjenbrukt overalt. */
  --grad-green: linear-gradient(135deg, var(--primary), #7fa77f);
  --grad-red: linear-gradient(135deg, #f4788a, var(--danger));
  --grad-yellow: linear-gradient(135deg, #dfaf46, #c99a2e);

  /* Desktop: bredden på den faste venstre-kolonnen (gruppemenyen). */
  --sidebar-w: 304px;
  /* Sidepolstring inne i panelene (gruppemeny/verktøylinje). */
  --side-pad: 14px;
  /* Sidepolstring i listemenyen (verktøylinja) — bredere og viewport-relativ,
     i motsetning til gruppemenyens faste --side-pad. Egen token så ☰ (fast i
     viewportets hjørne) kan flukte nøyaktig med LISTER-linjens høyre kant. */
  --toolbar-pad: clamp(12px, 3vw, 40px);
  /* Fade-høyden der gruppekortene scroller under knapperaden (desktop). */
  --fade-h: 16px;
  /* Ett tall for ALT luft-mellomrom i listevisningen: board-ets venstre/høyre/
     bunn-padding, kolonne-gap OG kort-til-kort-avstand — samme verdi overalt gir
     identisk luft rundt og mellom listekortene. Bunn-padding-effekten kommer fra
     siste korts EGEN bunn-margin (se .app-main), ikke fra en egen padding-bottom.
     Padding-top regnes ut i JS (se syncHeaderHeight) — nøyaktig meny-høyde +
     denne verdien, lest fra en reelt oppløst egenskap (column-gap), ikke fra
     denne variabelen direkte (clamp()/vw løses ikke ut ved lesing av en
     custom property). */
  --board-gap: clamp(12px, 4vw, 40px);

  /* Kontroll-tokens: alle knapper/kontroller i knapperadene deler disse. */
  --control-h: 49px;
  --control-radius: 14px;
  --control-bg: rgba(255, 255, 255, 0.75);

  /* Typografi-skala: ÉN kilde for de gjentakende tekststørrelsene, så «juster
     alt X %» er én endring. --fs-base er brødteksten (element/input/kort-tekst).
     Enkelte ikonspesifikke/en-gangs størrelser (brand, ikon-boks) står fortsatt
     som px der de er nært knyttet til en piksel-geometri. */
  --fs-xs: 15px;   /* etiketter, meta, panel-titler */
  --fs-sm: 17px;   /* små knapper, hint */
  --fs-md: 18px;   /* navn, sekundær tekst */
  --fs-base: 19px; /* brødtekst: element/kort/input */
  --fs-lg: 20px;   /* titler (chip/kort) */
  --fs-xl: 24px;   /* modal-overskrifter */

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 6px rgba(35, 45, 55, 0.12);
  --shadow-md: 0 8px 20px rgba(35, 45, 55, 0.18);
  --shadow-lg: 0 18px 42px rgba(25, 35, 45, 0.34);

  /* Skygge bak hvit skrift så den er lesbar også på lyse kort-/gruppefarger. */
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);

  /* Samme linjetykkelse som ikonsettets stroke-width (se icons.js/index.html),
     for CSS-tegnede streker (f.eks. sveipefeltets pil) som skal matche ikonene. */
  --icon-stroke: 1.05px;
}

* { box-sizing: border-box; }

/* hidden-attributtet skal alltid vinne over display-regler (f.eks. .trashcan
   sin inline-flex) — søppelkassene o.l. skjules med `hidden` i JS. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ---------------- Ikoner (SVG, se icons.js/index.html) ----------------
   Arver farge fra `color` (stroke="currentColor") og størrelse fra
   font-size på elementet de limes inn i — samme skaleringsmønster som
   emoji-glyfene de erstattet. */
.icon {
  display: block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

/* ---------------- Paneler (gruppemeny + listemeny + meny-modal) ----------------
   Felles anatomi: en overskriftslinje (.panel-head med .panel-title) og en
   knapperad (.panel-actions) der alle kontroller deler høyde/radius. */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.panel-title .icon { font-size: var(--fs-sm); }
/* Univers-/gruppenavnet i gruppemenyen/listemenyen er en klikkbar knapp (åpner
   bytteren, se .switcher-*): hvit flate-knapp i samme flate-mønster som
   søppelkasser/filter (halvgjennomsiktig → hvit ved hover). Andre panel-titler
   (meny-modalens «Universer»/«Invitasjoner») er fortsatt vanlige spans uten
   denne klassen. */
.panel-title-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 8px;
  border-radius: var(--control-radius);
  background: var(--control-bg);
  box-shadow: var(--shadow-sm);
  transition: background 0.18s, box-shadow 0.18s, color 0.15s;
}
.panel-title-btn:hover { background: #fff; box-shadow: var(--shadow-md); color: var(--ink); }
.panel-title-btn:focus-visible {
  background: #fff;
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
}
.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ---------------- Header (gruppemenyen) ----------------
   DESKTOP: fast, full-høyde KOLONNE til venstre — overskrift + knapperad øverst,
   gruppekortene scroller under dem (fade via mask). MOBIL (media-query nederst):
   fast panel øverst — overskrift, knapperad og én horisontalt scrollende kortrad
   (uten fader). ☰ er fast i viewportets hjørne (se «Menyknapp»), ikke en del av
   denne headeren, men overlapper den visuelt på mobil. */
.app-header {
  position: fixed;          /* uavhengig av scrolling (robust mot iOS-backdrop-bug) */
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.panel-top { flex: 0 0 auto; }
.app-header .panel-top { padding: 12px var(--side-pad); }
.app-header .panel-head { margin-bottom: 8px; }

/* Beholderen for gruppekortene. Retning settes per skjerm:
   vertikal kolonne på desktop, horisontal rad på mobil. */
.groups-bar {
  display: flex;
  gap: 8px;
  min-width: 0;
}

/* ---------------- Chip (delt av gruppekort og univers-rader) ----------------
   Som et liste-element: navn, antall-pill, del, slett — på posisjonsbasert farge
   med hvit skrift m/ skygge. */
.chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: var(--control-radius);
  background: var(--g-bg, #fff);   /* posisjonsbasert farge (samme system som kort) */
  color: #fff;                     /* hvit skrift m/ skygge for lesbarhet på fargene */
  text-shadow: var(--text-shadow);
  /* Tett skygge (ikke shadow-md): må få plass i panel-luften uten å klippes av
     kortradens overflow på mobil. */
  box-shadow: 0 1px 4px rgba(35, 45, 55, 0.18);
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.12s, outline-color 0.18s;
}
.chip:hover { box-shadow: 0 2px 7px rgba(35, 45, 55, 0.26); }
/* Aktiv chip: grønn brand-ring rundt den fargede flaten. */
.chip.active {
  box-shadow: 0 2px 8px rgba(35, 45, 55, 0.3);
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
}
.chip-name {
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px;
  border-radius: 6px;
  cursor: text;
}
/* Antall (lister/grupper): liten, subtil pill med nivå-ikon + antall —
   visuelt distinkt felt, med litt avstand fra navnet. */
.chip-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip-count .icon { font-size: var(--fs-xs); }
.chip.active .chip-count { opacity: 1; }

/* Gruppekort: chip + håndtak; bredden følger navnet (mobil) / full bredde (desktop). */
.group-card { flex: 0 0 auto; }

/* Mål når man drar en liste opp på et gruppekort (overføring mellom grupper):
   gruppekortet lyser opp så man ser hvor lista havner ved slipp. */
.group-card.drop-target {
  background: var(--primary-soft);
  outline: 2.5px dashed var(--primary);
  outline-offset: 2px;
  box-shadow: 0 4px 12px rgba(102, 136, 102, 0.4);
  transform: translateY(-1px) scale(1.06);
}
/* Kvittering: gruppekortet som nettopp mottok en liste pulserer kort. */
.group-card.received { animation: group-receive 0.5s ease; }
@keyframes group-receive {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); box-shadow: 0 5px 16px rgba(102, 136, 102, 0.5); }
  100% { transform: scale(1); }
}

/* Univers-rader (meny-modalen): chip med håndtak (samme mønster som
   gruppekortene), full bredde. */
.uni-row { width: 100%; }
.uni-row .chip-name { min-width: 0; }
.uni-empty {
  margin: 2px 0;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: var(--fs-md);
}

/* ---------------- Fargede knapper (.btn-solid) ----------------
   ÉN felles stil for alle grønne/røde/gule knapper: gradient-flate, hvit
   skrift m/ tekst-skygge, og samme hover-feedback overalt — flaten lysner
   litt og skyggen løftes (tydelig, men ikke dramatisk fargeendring). */
.btn-solid {
  color: #fff;
  text-shadow: var(--text-shadow);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s, transform 0.12s, filter 0.18s;
}
.btn-solid:hover { box-shadow: var(--shadow-md); filter: brightness(1.09) saturate(1.05); }
.btn-solid:active { transform: translateY(1px); filter: brightness(0.98); }
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; }
.btn-solid .icon { filter: drop-shadow(var(--text-shadow)); }
.btn-green { background: var(--grad-green); }
.btn-red { background: var(--grad-red); }
.btn-yellow { background: var(--grad-yellow); }

/* ---------------- «＋»-knapper (felles: gruppe/liste/univers/element) ----------------
   Størrelse/form for knappene i knapperadene; fargen kommer fra .btn-solid
   .btn-green. .icon-only = kvadratisk ＋. */
.btn-add {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  cursor: pointer;
  height: var(--control-h);
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--control-radius);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  white-space: nowrap;
}
.btn-add.icon-only { width: var(--control-h); padding: 0; font-size: 23px; }
.btn-add .icon { font-size: var(--fs-base); }

/* ---------------- Del-knapper i menyene (del-univers / del-gruppe) ----------------
   Del det AKTIVE universet (ved siden av «＋ Gruppe») / den AKTIVE gruppen (ved
   siden av «＋ Liste»). To ikoner: del-ikon + nivå-ikon. Samme flate-mønster som
   søppelkasse/filter/☰ (halvgjennomsiktig hvit → hvit ved hover). Kun kontomodus. */
.share-btn {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--control-h);
  padding: 0 13px;
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: background 0.18s, box-shadow 0.18s, color 0.18s, transform 0.12s;
}
.share-btn:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-md); }
.share-btn:active { transform: translateY(1px); }
.share-btn:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.share-btn .icon { font-size: var(--fs-base); }

/* ---------------- Menyknapp (☰) ----------------
   Fast i øvre høyre hjørne av VIEWPORTET, uavhengig av gruppemeny/listemeny sin
   DOM/flyt (se kommentar i index.html) — z-index over begge faste panelene
   (30/20) men under modaler (200). Samme flate-mønster som søppelkassene:
   halvgjennomsiktig hvit → hvit ved hover. */
.menu-btn {
  position: fixed;
  top: 12px;
  right: var(--side-pad);
  z-index: 35;
  appearance: none;
  border: none;
  cursor: pointer;
  width: var(--control-h);
  height: var(--control-h);
  display: grid;
  place-items: center;
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: background 0.18s, box-shadow 0.18s, color 0.18s, transform 0.12s;
}
.menu-btn:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-md); }
.menu-btn:active { transform: translateY(1px); }
/* Tre horisontale linjer: én strek + to via box-shadow (30 % tynnere strek,
   samme stil som ikonsettet). */
.menu-bars {
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* ---------------- Main / verktøylinje (listemenyen) ----------------
   Fast meny (desktop: øverst til høyre for kolonnen; mobil: rett under
   gruppemenyen), litt mer gjennomsiktig bakgrunn enn headeren. */
.app-main {
  /* Topp settes i JS (--board-pad-top, se syncHeaderHeight): eksakt meny-høyde
     + --board-gap, så avstanden ned til første kort matcher gapet overalt
     ellers. Bunn er 0 — siste korts EGEN bunn-margin (også --board-gap, se
     .card) ER bunn-luften; en egen bunn-padding her ville lagt gap på gap. */
  padding: var(--board-pad-top, 160px) var(--board-gap) 0;
}

.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px var(--toolbar-pad);
  background: rgba(255, 255, 255, 0.55);   /* mer gjennomsiktig enn header (0.72) */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.toolbar .panel-actions { flex-wrap: wrap; }

/* ---------------- Generelle knapper (modaler o.l.) ----------------
   .btn = base (form/typografi), .btn-ghost = hvit, .btn-small = mindre
   variant. Fargen (grønn/rød/gul) kommer alltid fra .btn-solid + fargeklasse. */
.btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  border: none;
  border-radius: var(--control-radius);
  padding: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.18s, background 0.18s, filter 0.18s;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { box-shadow: none; }

.btn-ghost {
  background: #fff;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { color: var(--ink); box-shadow: var(--shadow-md); }

.btn-small {
  padding: 9px;
  font-size: var(--fs-sm);
  border-radius: 11px;
}

/* ---------------- Søppelkasse-knapper (felles for alle fire nivåer) ----------------
   Hvit, avrundet beholder (halvgjennomsiktig → hvit ved hover) med søppelkasse-
   ikon + antall i grå sirkel. Vises kun når søppelkassen har innhold. Kort trykk
   åpner modalen; klikk-og-hold utvider selve knappen til et sveipefelt
   (se .swipe-field). */
.trashcan {
  position: relative;
  flex: 0 0 auto;
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 15px;
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--ink);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;          /* hold/sveip uten at siden scroller */
  transition: background 0.18s, box-shadow 0.18s;
}
.trashcan:hover { background: #fff; box-shadow: var(--shadow-md); }

.trashcan-icon { font-size: var(--fs-base); line-height: 1; display: inline-flex; }
.trashcan-count {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e6ece6;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Sveipefelt: fixed felt som «vokser ut av» søppelkasse-knappen ved
   klikk-og-hold — JS starter det med knappens eksakte posisjon/størrelse/
   radius (og skjuler knappen imens), så det ser ut som knappen selv utvider
   seg. JS setter posisjon/bredde/padding inline og roterer ikonet (0→180°)
   ut fra sveipet; --p (0→1) driver den visuelle fyllingen. */
.swipe-field {
  position: fixed;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--control-radius);
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;                 /* pekeren fanges av knappen (setPointerCapture) */
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.14s ease, width 0.18s cubic-bezier(.2, .75, .3, 1), box-shadow 0.18s;
}
.swipe-field.open { opacity: 1; box-shadow: var(--shadow-lg); }
/* Grønn fylling som følger sveipet (venstre → høyre). */
.swipe-field::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-soft), var(--primary-soft-hover));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  pointer-events: none;
}
/* Ikonet har en ROMSLIG, kvadratisk viewBox sentrert på selve kassen
   (-9.5 -9.5 43 43, se icons.js): kassen står dermed alltid i sentrum av
   boksen, og boksen har plass til lokket i ALLE kombinasjoner av rotasjon
   (0–180°) og lokk-sving — ingenting klippes noensinne. Boksen er større enn
   den synlige kassen (kassen ≈ 40 % av boksen); font-size er skalert opp
   tilsvarende slik at kassen visuelt matcher knappens ikon (19px). Holdes i
   takt med SWIPE_ICON_BOX i app.js. */
.swipe-icon {
  position: relative;
  font-size: 34px;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 0.1s ease;      /* jevn rotasjon; kollaps roterer tilbake */
  transform-origin: 50% 50%;
}
/* Lokket (topp-strek + hank) svinger opp rundt venstre hengsel (4.5,7.5 i
   viewBox-en -9.5 -9.5 43 43 → 32.56 %/39.53 %) gjennom hele sveipet og går
   ALDRI tilbake til lukket — kassekropp + ribbene er urørt og roterer kun med
   hele ikonet (via .swipe-icon sin transform). Drevet av setProgress(p) i
   app.js sin sveip-for-å-tømme-motor. */
.swipe-icon-lid {
  transform-box: view-box;
  transform-origin: 32.56% 39.53%;
  transition: transform 0.12s ease;
}
.swipe-icon.shake { animation: swipe-shake 0.5s ease; }
@keyframes swipe-shake {
  0%, 100% { transform: rotate(180deg) translateX(0); }
  20% { transform: rotate(180deg) translateX(-4px); }
  40% { transform: rotate(180deg) translateX(4px); }
  60% { transform: rotate(180deg) translateX(-3px); }
  80% { transform: rotate(180deg) translateX(3px); }
}
.swipe-label {
  position: relative;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink-soft);
}
/* Pil som fyller resten av feltet: en voksende horisontal strek (::before) +
   et fast pilhode (::after, rotert hjørne). Streken tilpasser seg feltbredden
   via flex; symmetrisk padding (satt i JS) gir lik luft til høyre. */
.swipe-arrow {
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  display: flex;
  align-items: center;
  color: var(--primary-dark);
}
.swipe-arrow::before {
  content: '';
  flex: 1 1 auto;
  height: var(--icon-stroke);
  background: currentColor;
  border-radius: 2px;
}
.swipe-arrow::after {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-top: var(--icon-stroke) solid currentColor;
  border-right: var(--icon-stroke) solid currentColor;
  border-top-right-radius: 2px;
  transform: rotate(45deg);
  margin-left: -13.5px;   /* pilspissen (etter 45°-rotasjon) stikker ut halve
    diagonalen (5.5 + 11/√2 ≈ 13.3px) forbi boksens venstrekant — dette
    trekker streken helt frem til selve tuppen i stedet for å stoppe der
    firkanten begynner */
}

/* Element-søppelkassen: midtstilt nederst i listekortet (samme knapp som de andre). */
.item-trash {
  display: flex;
  justify-content: center;
  padding: 0 10px;
}

/* ---------------- Filter-brytere ---------------- */
.switch {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.08s, filter 0.18s, box-shadow 0.18s;
}
.switch:active { transform: scale(0.88); }

/* Filter (øye + Mine/Delte-ikoner) i verktøylinja: samme flate-mønster som
   søppelkassene — halvgjennomsiktig hvit → hvit ved hover; samme høyde/radius
   som resten av raden. */
.filter-switches {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 10px;
  background: var(--control-bg);
  border-radius: var(--control-radius);
  box-shadow: var(--shadow-sm);
  transition: background 0.18s, box-shadow 0.18s;
}
.filter-switches:hover { background: #fff; box-shadow: var(--shadow-md); }
.filter-label {
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--ink-soft);
  margin-right: 2px;
}
.filter-switches .switch {
  font-size: var(--fs-sm);
  background: #e6ece6;
  color: var(--ink-soft);
}
/* På-tilstand: samme grønne stil/feedback som alle andre grønne knapper. */
.filter-switches .switch.on {
  background: var(--grad-green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.filter-switches .switch.on:hover { filter: brightness(1.09) saturate(1.05); box-shadow: var(--shadow-md); }
.filter-switches .switch.on .icon {
  filter: drop-shadow(var(--text-shadow));
}

/* ---------------- Board (kolonner) ---------------- */
.board {
  column-width: 380px;
  column-gap: var(--board-gap);
  /* Bunn-luft etter siste kort: satt i JS (fixBoardBottomGap), IKKE en fast
     verdi her. Ved ujevnt balanserte kolonner (column-fill: balance, default)
     kan nettlesere se bort fra siste korts EGEN margin-bottom når de regner ut
     board-ets auto-høyde (den bidrar 0 i noen tilfeller, den fulle verdien i
     andre) — JS måler det FAKTISKE utfallet og legger til akkurat nok padding
     til at totalen alltid blir nøyaktig --board-gap, uansett. */
  padding-bottom: 0;
}

.board.empty {
  column-width: auto;
  min-height: 40vh;
  display: grid;
  place-items: center;
}

.empty-state {
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  max-width: 440px;
}
.empty-state .big { font-size: 60px; margin-bottom: 6px; }
.empty-state .big .icon { margin: 0 auto; }
.empty-state p { margin: 6px 0; font-weight: 500; font-size: var(--fs-base); }
/* Inline «knapp-hint» i tom-tilstanden: viser ＋ + nivå-ikonet (som knappen),
   siden knappene ikke lenger har tekst-etikett («＋ Gruppe»/«＋ Liste»). */
.hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  font-weight: 700;
  vertical-align: middle;
}
.hint-chip .icon { font-size: 1em; }

/* ---------------- Card ---------------- */
.card {
  --card-bg: #fff;
  --card-head: #f0f0f0;
  --card-accent: #cccccc;

  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0 0 var(--board-gap);
  padding-bottom: 10px;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.12s;
}

.card:hover { box-shadow: var(--shadow-md); }

.card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--card-head);
}

/* Tittel + meta-rad stables i en kolonne som tar resten av bredden. */
.card-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;                 /* hvit skrift m/ skygge for lesbarhet på kortfargen */
  text-shadow: var(--text-shadow);
  cursor: text;
  padding: 4px;
  border-radius: 8px;
  word-break: break-word;
  align-self: flex-start;      /* klikkflaten følger teksten, ikke hele raden */
  transition: background 0.15s;
}
.card-title:hover { background: rgba(0, 0, 0, 0.12); }

/* ---------------- Items ---------------- */
.items-container {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  min-height: 14px;
}

.item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.15s, box-shadow 0.15s;
}
.item:hover { background: rgba(255, 255, 255, 0.85); }

/* Avkryssingsboks: rund-firkantet boks; grønt hake-fyll når gjort.
   Haken (SVG) ligger alltid der, men er usynlig til elementet er gjort. */
.item-check {
  flex: 0 0 auto;
  align-self: center;
  appearance: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--card-accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: #fff;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.item-check .icon { width: 1em; height: 1em; font-size: 16px; opacity: 0; transition: opacity 0.12s; }
.item-check:hover { border-color: var(--primary); }
.item-check:active { transform: scale(0.9); }
.item-check:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.item.done .item-check {
  background: var(--grad-green);
  border-color: transparent;
}
.item.done .item-check .icon { opacity: 1; filter: drop-shadow(var(--text-shadow)); }

/* Innstillingsknapp (tannhjul) på elementer: dempet i hvile, tydelig ved
   hover/fokus — samme plass som den gamle ansvarsknappen (venstre for ✕). */
.item-cog {
  flex: 0 0 auto;
  align-self: center;
  appearance: none;
  cursor: pointer;
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  opacity: 0.6;
  transition: transform 0.1s, color 0.15s, opacity 0.15s;
}
.item-cog .icon { width: 1em; height: 1em; font-size: 21px; }
.item:hover .item-cog,
.item:focus-within .item-cog { opacity: 1; }
.item-cog:hover { color: var(--primary); }
.item-cog:active { transform: scale(0.9); }
.item-cog:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.item-cog:disabled { cursor: default; opacity: 0.3; }
.item.done .item-cog { opacity: 0.5; }

/* Farget sirkel med initialer (ansvarssirkel). Bakgrunnsfargen settes inline
   fra paletten (personens plass i delegruppen). */
.resp-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  text-shadow: var(--text-shadow);
  background: #8496a6;
}

/* Tekst + meta-rad stables i en kolonne som tar resten av bredden. */
.item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.item-text {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
  cursor: text;
  padding: 2px 4px;
  border-radius: 6px;
  word-break: break-word;
  min-height: 26px;
}
/* Gjort element: lavere bakgrunns-opacity + gjennomstreket, dempet tekst.
   Håndtaket er inaktivt (avkryssede reorderes ikke — de ligger i «Utført»). */
.item.done { background: rgba(255, 255, 255, 0.3); }
.item.done:hover { background: rgba(255, 255, 255, 0.48); }
.item.done .item-text { text-decoration: line-through; opacity: 0.5; }
.item.done .item-handle { opacity: 0; pointer-events: none; }

/* «Utført»-seksjonen: egen liste under de aktive, skilt med en subtil linje. */
.items-done-wrap { display: flex; flex-direction: column; gap: 8px; }
.done-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}
.done-divider span {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.42);
}
.done-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}
.items-done {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
}

/* ---------------- Kategorier (nivå-1-rad som grupperer elementer) ----------------
   «Hylle i veggen»-metafor: overskriften (håndtak + tittel/meta + tannhjul +
   oppløs-knapp) står på VEGGEN (listeflaten), og elementene ligger i en
   FORDYPNING rett under — `.cat-items` er en litt mørkere flate med innover-
   skygge, som en hylle som går inn i veggen, og elementene blir som «bøker» i
   hylla. Overskriften ligger tett oppå hylla (4px), så den leser som hyllas
   etikett. `.cat-head`s 6px sidepolstring stiller håndtak/knapper i SAMME
   kolonner som elementenes og kort-hodets; knappene bruker den hvite kort-hode-
   knappestilen (.card-cog) så de er synlige mot listeflaten. */
.category { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cat-head { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.cat-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cat-title {
  margin: 0;                   /* <h3> — nullstill nettleserens standardmarg (blåste opp headeren) */
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;                 /* hvit m/ skygge — lesbar på enhver listefarge, som kort-tittelen */
  text-shadow: var(--text-shadow);
  cursor: text;
  padding: 3px 5px;
  border-radius: 7px;
  word-break: break-word;
  align-self: flex-start;
  letter-spacing: 0.01em;
}
.cat-title:hover { background: rgba(0, 0, 0, 0.12); }

/* Tannhjul + oppløs-knapp: samme hvite flate-knapp som .card-cog (svakt hvit
   flate + ring, lysner ved hover) — synlige mot den fargede listeflaten og på
   linje med kort-hodets og elementenes knapper. */
.cat-cog, .cat-dissolve {
  flex: 0 0 auto;
  align-self: center;
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background 0.15s, transform 0.1s;
}
.cat-cog .icon, .cat-dissolve .icon { width: 1em; height: 1em; font-size: 21px; filter: drop-shadow(var(--text-shadow)); }
.cat-cog:hover, .cat-dissolve:hover { background: rgba(255, 255, 255, 0.34); }
.cat-cog:active, .cat-dissolve:active { transform: scale(0.92); }
.cat-cog:focus-visible, .cat-dissolve:focus-visible { outline: 2.5px solid #fff; outline-offset: 2px; }
.cat-cog:disabled, .cat-dissolve:disabled { cursor: default; opacity: 0.4; }

.cat-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  /* Fordypning («hylle»): lik luft på alle kanter rundt «bøkene» (fordypningen
     + innover-skyggen er nesting-signalet — intet ekstra venstre-innrykk). */
  padding: 9px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.1);   /* litt mørkere enn veggen (listeflaten) */
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.17),   /* innover-skygge = fordypning */
              inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ---------------- Add item ---------------- */
.add-item-form {
  display: flex;
  gap: 8px;
  padding: 0 10px;
}

.add-item-input {
  flex: 1;
  min-width: 0;
  height: var(--control-h);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
  border: 1.5px solid transparent; /* usynlig i hvile (se :focus); border-box holder bredden stabil */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 0 12px;
  outline: none;
  opacity: 0.62; /* dempet i hvile, så den tydelig skiller seg fra de eksisterende elementene */
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.add-item-input::placeholder { color: rgba(60, 55, 80, 0.5); }
.add-item-input:focus {
  border-color: var(--card-accent);
  background: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* ＋-knappen er disablet (dempet) til feltet har tekst; ingen hover-oppløfting da. */
.add-item-btn { position: relative; overflow: hidden; }
.add-item-btn:disabled { opacity: 0.45; cursor: default; filter: none; box-shadow: var(--shadow-sm); }
.add-item-btn:disabled:hover { filter: none; }
/* Klikk-og-hold på ＋ (oppretter en kategori): en ekspanderende ring fyller
   knappen over CAT_HOLD_MS som en tydelig progresjon. */
.add-item-btn.holding::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  transform-origin: center;
  animation: add-hold-fill 400ms ease-out forwards;
  pointer-events: none;
}
@keyframes add-hold-fill { from { transform: scale(0); opacity: 0.2; } to { transform: scale(2.2); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .add-item-btn.holding::after { animation: none; }
}

/* ---------------- Håndtak & ikon-knapper ----------------
   ALLE dra-håndtak er tre vertikale prikker (én prikk + to via box-shadow,
   samme teknikk som .menu-bars), alltid MØRKERE enn flaten sin (kortets/
   gruppens aksentfarge) og NØYAKTIG vertikalt midtstilt i beholderen sin:
   knappen strekkes til beholderens fulle høyde (align-self: stretch) og
   prikkene grid-sentreres i den. */
.drag-handle {
  appearance: none;
  border: none;
  background: transparent;
  cursor: grab;
  color: var(--card-accent);
  display: grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 8px;
  touch-action: none; /* la peker-draging styre, ikke scroll */
  transition: background 0.15s, color 0.15s;
  flex: 0 0 auto;
  align-self: stretch;
}
.drag-handle::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor;
}
.drag-handle:hover { background: rgba(0, 0, 0, 0.06); }
.drag-handle:active { cursor: grabbing; }
.item-handle { opacity: 0.75; }
/* Gruppekortets/universradens håndtak: mørkere enn chipfargen (samme mønster
   som kortene). */
.group-handle { color: var(--g-accent, rgba(0, 0, 0, 0.4)); }

.icon-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: var(--fs-base);
  line-height: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  flex: 0 0 auto;
  align-self: center;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); }

/* Sletteknapper (liste/element/gruppe/univers): samme utseende overalt —
   dempet ✕ som blir rød ved hover. Gruppe-/univers-✕ ligger helt til høyre. */
.card-delete:hover, .item-delete:hover, .group-delete:hover, .uni-delete:hover {
  color: var(--danger);
  background: rgba(239, 107, 125, 0.12);
}
.group-delete, .uni-delete { margin-left: auto; }
/* Slett-✕ på fargede flater (chip + korthode) er hvit m/ tekst-skygge — som
   resten av innholdet på fargede flater — så den er lesbar også på mørke
   kortfarger (grå ✕ forsvant på dem). Blir rød ved hover som før. */
.group-delete, .uni-delete, .card-delete {
  color: #fff;
  filter: drop-shadow(var(--text-shadow));
}
/* Element-✕ alltid synlig, men diskré; full styrke ved hover/fokus. Mørkere
   ink-farge i hvile (grå --ink-soft ga for svak kontrast mot listeflaten). */
.item-delete { color: var(--ink); opacity: 0.6; }
.item:hover .item-delete,
.item:focus-within .item-delete,
.item-delete:focus-visible { opacity: 1; }

/* Synlig tastaturfokus på kontrollene (samme brand-ring som aktiv chip). */
.btn-add:focus-visible,
.trashcan:focus-visible,
.menu-btn:focus-visible,
.chip:focus-visible,
.switch:focus-visible,
.icon-btn:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
}

/* ---------------- Inline editing ---------------- */
.edit-input {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: var(--ink);
  border: none;
  outline: 2px solid var(--card-accent);
  background: #fff;
  border-radius: 6px;
  padding: 2px 6px;
  width: 100%;
}
/* Chip-navn-redigering (gruppe/univers): bredden følger innholdet (settes
   inline i JS), ikke 100 %. */
.edit-input.group-edit,
.edit-input.chip-edit {
  width: auto;
  min-width: 60px;
  font-weight: 600;
  font-size: var(--fs-lg);
  outline: 2px solid var(--primary);
}

/* ---------------- Drag & drop states ---------------- */
.card.dragging {
  position: fixed;
  z-index: 100;
  margin: 0;
  box-shadow: var(--shadow-lg);
  transform: scale(1.02); /* rotasjon settes dynamisk i JS ut fra horisontal posisjon */
  cursor: grabbing;
  pointer-events: none;
  will-change: left, top, transform;
}
/* Lista sikter på et gruppekort (overføring): gjør den gjennomskinnelig så
   gruppekortet under (med .drop-target-markering) synes gjennom det løftede kortet. */
.card.dragging.to-group { opacity: 0.45; }

.item.dragging {
  position: fixed;
  z-index: 100;
  margin: 0;
  list-style: none;
  box-shadow: var(--shadow-lg);
  background: #fff;
  transform: scale(1.03);
  cursor: grabbing;
  pointer-events: none;
  will-change: left, top;
}

/* Kategori under draging: løftet chip (kollapser til bare overskriften mens man
   drar — se collapse/expandCategory i app.js). Ingen fast høyde, så den følger
   den kollapsende .cat-items-høyden. */
.category.dragging {
  position: fixed;
  z-index: 100;
  margin: 0;
  list-style: none;
  box-shadow: var(--shadow-lg);
  background: #fff;
  border-radius: 12px;
  padding: 4px 8px;
  transform: scale(1.03);
  cursor: grabbing;
  pointer-events: none;
  overflow: hidden;
  will-change: left, top;
}
.category.dragging .cat-cog,
.category.dragging .cat-dissolve { opacity: 0; }

/* Placeholders (kort/element/gruppe/univers): IDENTISK stil overalt — svakt
   mørknet flate og en subtil INNOVER-skygge som gir inntrykk av et «hull» som
   skal fylles (ingen kant). Kun radius/margens følger elementtypen. */
.card-placeholder,
.item-placeholder,
.group-placeholder {
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.22);
}
.card-placeholder {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  width: 100%;
  margin: 0 0 var(--board-gap);
  border-radius: var(--radius);
}
.item-placeholder {
  list-style: none;
  border-radius: 10px;
}
.group-placeholder {
  flex: 0 0 auto;
  align-self: stretch;
  border-radius: var(--control-radius);
}

/* Gruppe-/univers-draging: løftet chip følger pekeren; placeholder viser
   landingsplass. Samme mønster/klasser for begge (uni-list er alltid en
   vertikal kolonne, som gruppelista på desktop). */
.group-card.dragging, .uni-row.dragging {
  position: fixed;
  z-index: 100;
  margin: 0;
  box-shadow: var(--shadow-lg);
  transform: scale(1.05); /* rotasjon settes dynamisk i JS */
  cursor: grabbing;
  pointer-events: none;
  will-change: left, top, transform;
}

body.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.is-dragging * { cursor: grabbing !important; }

/* Litt luft rundt kortene under draging så de ikke oppleves «låst» */
.card, .item { -webkit-user-select: none; user-select: none; }
.item-text, .card-title, .add-item-input, .edit-input { -webkit-user-select: text; user-select: text; }

/* ---------------- Slette-animasjon («pakk sammen og fly i søpla») ----------------
   En klone av det slettede kortet/elementet krymper til en sirkel og svever
   inn i tilhørende søppelkasse-knapp (se flyToTrash i app.js). */
.fly-ghost {
  position: fixed;
  z-index: 260;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
}

/* ---------------- Modaler (meny + søppelkasse) ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(45, 38, 70, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.15s ease;
}
.modal-overlay[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.modal {
  width: min(560px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop-in 0.18s cubic-bezier(.2, .75, .3, 1);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
}
.modal-head h2 .icon { flex: 0 0 auto; }

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

/* Meny-modalen: logg ut øverst, deretter universer — skilt med en linje i samme
   stil som modal-head sin border-bottom (samme farge/tykkelse, kant-til-kant).
   .menu-body arver modal-body sin side-padding (20px); negativ side-margin
   kansellerer den så linja når helt ut til modal-kanten, som modal-head sin. */
.menu-modal { width: min(480px, 100%); }
.menu-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.menu-logout { align-self: flex-start; }
.logout-icon { font-size: var(--fs-lg); line-height: 1; }
.menu-divider {
  border: none;
  border-bottom: 1px solid var(--line);
  margin: 5px -20px;
}
.uni-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-body .panel-head { min-height: 0; }
.menu-body .panel-actions { margin-top: 2px; }

.trash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.trash-row:last-child { border-bottom: none; }
.trash-dot { width: 21px; height: 21px; border-radius: 7px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.trash-name { flex: 1; font-weight: 600; font-size: var(--fs-base); word-break: break-word; }
.trash-meta { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.trash-empty-msg { text-align: center; color: var(--ink-soft); font-weight: 500; font-size: var(--fs-base); padding: 26px 0; margin: 0; }

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-top: 1px solid var(--line);
  background: #faf9fe;
}
.modal-note { margin: 0; font-size: 16px; color: var(--ink-soft); font-weight: 500; }

/* Felles bekreftelses-modal: smal, melding + Avbryt/OK samlet til høyre. */
.confirm-modal { width: min(430px, 100%); }
.confirm-msg { margin: 0; font-size: var(--fs-base); line-height: 1.5; color: var(--ink); font-weight: 500; }
.confirm-foot { justify-content: flex-end; }

body.modal-open { overflow: hidden; }

/* ---------------- Univers-/gruppebytter (popover/modal) ----------------
   Åpnes via panel-title-knappene (globus-/mappe-ikon + navn) i gruppemenyen/
   listemenyen — en rask bytte-liste (farge vises, men rekkefølge/navn/
   sletting kan IKKE endres herfra; det skjer fortsatt i meny-modalen/
   gruppemenyen). Samme klikk-utenfor-lukker-mønster som de andre modalene
   (ev.target === overlay). Desktop/mobil-forskjellen (popover vs. sentrert
   modal) ligger i media-queryene lenger ned (samme to breakpoints som resten
   av appen). */
.switcher-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: transparent;
}
.switcher-panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: max-content; /* kun så bred som det lengste navnet krever — ingen kunstig minstebredde */
  max-width: min(320px, calc(100vw - 20px));
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.switcher-row {
  appearance: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--control-radius);
  background: var(--g-bg, #fff);
  color: #fff;
  text-shadow: var(--text-shadow);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-lg);
  text-align: left;
  box-shadow: 0 1px 4px rgba(35, 45, 55, 0.18);
  transition: box-shadow 0.18s, filter 0.15s;
}
.switcher-row:hover { filter: brightness(1.06); box-shadow: 0 2px 7px rgba(35, 45, 55, 0.26); }
.switcher-row.active { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.switcher-row:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.switcher-row-icon {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  filter: drop-shadow(var(--text-shadow));
}
.switcher-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ansvarlig-velgeren: nøytralt hvitt panel (arver .switcher-panel) med rader
   som viser farget initial-sirkel + fullt navn. Ingen fulle fargede rader som
   bytterne — her er selve avataren det fargede elementet. */
.resp-panel { gap: 3px; }
.resp-row {
  appearance: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-md);
  text-align: left;
  transition: background 0.15s;
}
.resp-row:hover { background: var(--primary-soft); }
.resp-row.active { background: var(--primary-soft); }
.resp-row:focus-visible { outline: 2.5px solid var(--primary); outline-offset: -2px; }
.resp-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resp-avatar-none {
  background: var(--control-bg);
  color: var(--ink-soft);
  text-shadow: none;
}
.resp-avatar-none .icon { width: 1em; height: 1em; font-size: 21px; }
.resp-row-clear { color: var(--ink-soft); }

/* ---------------- Synk-varsel ----------------
   Synken går fortløpende i bakgrunnen (ingen egen knapp lenger). Når en
   endring kommer fra en annen enhet vises et lite, forbigående varsel. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(90vw, 480px);
  padding: 11px 13px 11px 20px;
  border-radius: 999px;
  background: rgba(45, 38, 70, 0.92);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;              /* ikke-interaktiv i hvile … */
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Angre-knappen: eneste interaktive del av toasten (re-aktiverer pekeren). */
.toast-action {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  transition: background 0.15s;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.3); }
.toast-action:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }

/* ---------------- Merkevare-logo (innloggingsskjerm) ---------------- */
/* (app-innhold skjules av `body.no-auth`-regelen i FASE 2-seksjonen under.) */
.lock-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 34px;
  font-weight: 700;
  color: #f4f6f7;
}
.lock-brand .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
}
/* Logo: tre stablede lister (samme motiv som favicon.svg). Hvit strek på
   app-bakgrunnen; kortene fylles med app-fargen (--brand-logo-fill) slik at det
   fremste kortet dekker strekene på kortene bak → stablet «papirbunke»-effekt. */
.lock-brand .brand-logo {
  width: 100%;
  height: 100%;
}

/* ---------------- Mobil ----------------
   Gruppemenyen er et fast panel øverst: overskrift, knapperad (＋ Gruppe +
   søppelkasse) og gruppekortene på én horisontalt scrollende rad UNDER
   knappene (ingen fader). ☰ (fast i viewportets hjørne) overlapper dette
   panelet øverst til høyre. Verktøylinja ligger rett under gruppemenyen.
   Board-et klarerer begge (målte høyder, se syncHeaderHeight i app.js). */
@media (max-width: 560px) {
  :root { --side-pad: 12px; }

  /* Én kolonne, full bredde: column-count:1 (IKKE column-width:100% — prosent
     er ikke en gyldig lengde for column-width og blir ignorert av nettlesere).
     Kortene (width:100%, base-regel) fyller da hele kolonnen → jevn luft på
     alle sider, siden --board-gap uansett brukes for padding/margin. */
  .board { column-count: 1; }

  .app-header {
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--line);
  }
  .app-header .panel-top { padding: 12px var(--side-pad) 0; }

  /* Verktøylinja rett under gruppemenyen (målt høyde), full bredde. */
  .toolbar { top: var(--header-h, 132px); }

  /* Gruppekort: bredden følger navnet (rad); lange navn kappes. */
  .group-card { max-width: min(60vw, 420px); }

  /* Gruppene ligger alltid på én rad; scroller horisontalt. Ved overflow vises en
     DISKRET, app-tilpasset scrollbar. På ekte touch-enheter er nettleserens
     scrollbar uansett overlay/skjult; dette treffer først og fremst smale
     PC-vinduer (der mobil-layoutet også slår inn) og gir en synlig scroll-indikator. */
  .groups-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 9px var(--side-pad) 9px;  /* luft så boks-skyggene får plass */
    scrollbar-width: thin;             /* Firefox: tynn, farget bar */
    scrollbar-color: rgba(107, 101, 119, 0.42) transparent;
  }
  /* WebKit: «flytende» tynn thumb med luft rundt (transparent kant + padding-box-
     clip gjør den synlige delen tynnere enn sporet), i appens dempede ink-tone. */
  .groups-bar::-webkit-scrollbar { height: 12px; width: auto; }
  .groups-bar::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 var(--side-pad);                         /* i takt med kortene, unna kantene */
  }
  .groups-bar::-webkit-scrollbar-thumb {
    background-color: rgba(107, 101, 119, 0.36);
    border: 3px solid transparent;                     /* luft over/under thumben (synlig ~6px) */
    background-clip: padding-box;
    border-radius: 999px;
    min-width: 44px;
  }
  .groups-bar::-webkit-scrollbar-thumb:hover { background-color: rgba(107, 101, 119, 0.55); }

  /* Univers-/gruppebytteren: sentrert modal med intern scroll i stedet for en
     popover ved siden av knappen — mobilskjermen har ikke plass til det. */
  .switcher-overlay {
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(45, 38, 70, 0.42);
  }
  .switcher-panel {
    position: static;
    width: 100%;
    max-width: 420px;
  }
}

/* ============================================================
   DESKTOP: gruppemenyen som fast venstre-KOLONNE
   Overskrift + knapperad («＋ Gruppe» og søppelkasse side om side) ligger fast
   øverst; gruppekortene scroller i kolonnen under dem og oppløses i en fade
   (mask) mot knapperaden — samt en tilsvarende fade i bunnen. ☰ (fast i
   viewportets hjørne) havner over listemenyen, øverst til høyre der.
   ============================================================ */
@media (min-width: 561px) {
  .app-header {
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    border-right: 1px solid var(--line);
  }
  /* ☰ overlapper listemenyen på desktop — bruk dens (viewport-relative)
     sidepolstring i stedet for gruppemenyens, så den flukter nøyaktig med
     LISTER-linjens høyre kant. */
  .menu-btn { right: var(--toolbar-pad); }

  .groups-bar {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    padding: var(--fade-h) var(--side-pad);
    scrollbar-width: none;               /* skjul; fadene indikerer scroll */
    /* Kortene «scroller under» knapperaden: innholdet oppløses i en fade øverst
       (og nederst) i scrollfeltet. Hvile-padding = fade-høyden, så ingenting er
       falmet i ro. */
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, #000 var(--fade-h), #000 calc(100% - var(--fade-h)), transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0, #000 var(--fade-h), #000 calc(100% - var(--fade-h)), transparent 100%);
  }
  .groups-bar::-webkit-scrollbar { width: 0; height: 0; }
  /* Masken gjelder også fixed-posisjonerte barn (det løftede dra-kortet) —
     slå den av under draging så kortet ikke klippes utenfor kolonnen. */
  body.is-dragging .groups-bar {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .group-card { width: 100%; }           /* full-bredde rad i kolonnen */

  /* Board fyller området til høyre for kolonnen; verktøylinja ligger over
     (padding-top settes i JS, se syncHeaderHeight). */
  .app-main {
    margin-left: var(--sidebar-w);
  }
  .toolbar { left: var(--sidebar-w); }
}

/* ============================================================
   FASE 2 — brukerkontoer og deling
   Auth-skjerm (e-post/passord), del-modal, plasserings-modal,
   invitasjons-innboks, delt/låst-merker. Gjenbruker tokens og
   flate-mønstre fra designsystemet over.
   ============================================================ */

/* Skjul app-innhold også i kontomodus (før innlogging). */
body.no-auth .app-header,
body.no-auth .app-main,
body.no-auth #menu-btn { display: none; }

/* ---------------- Auth-skjerm ---------------- */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: linear-gradient(160deg, var(--bg-grad-a), var(--bg-grad-b));
}
.auth-screen[hidden] { display: none; }

.auth-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  max-width: 440px;
}
.auth-box .lock-brand { justify-content: center; }

.auth-form, .auth-sent {
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow-lg);
}
.auth-sent[hidden] { display: none; }
.auth-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 2px;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.auth-title .icon { color: var(--primary); }
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
/* Fornavn + etternavn side om side (kun ved registrering). */
.auth-name-row { display: flex; gap: 10px; }
.auth-name-row .auth-field { flex: 1 1 0; min-width: 0; }
/* Felles tekstfelt-klasse (auth-input + inviter-input): solid kant, myk
   bakgrunn, grønn fokus-ring. Nye felt trenger bare `.field`. */
.field {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfbfd;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-msg {
  margin: 0;
  min-height: 22px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--danger);
}
.auth-msg.ok { color: var(--primary-dark); }
.auth-msg:empty { min-height: 0; }

.auth-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}
.auth-link {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-dark);
  padding: 2px 4px;
}
.auth-link:hover { text-decoration: underline; }

.auth-sent { align-items: center; text-align: center; gap: 14px; }
.auth-sent-icon { font-size: 55px; color: var(--primary); }
.auth-sent-icon .icon { margin: 0 auto; }
.auth-sent-msg { margin: 0; font-weight: 600; font-size: var(--fs-base); color: var(--ink); line-height: 1.5; }
.auth-sent-msg strong { color: var(--primary-dark); }

/* ---------------- Meny: konto + badge ---------------- */
.menu-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.menu-account[hidden] { display: none; }
/* Avatar-sirkler (konto + delings-medlemmer): felles form (rund, sentrert hvit
   initial på gradient); størrelse/farge varierer per bruk. */
.account-avatar, .member-avatar {
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.account-avatar { width: 44px; height: 44px; font-size: var(--fs-base); }
.account-email { font-weight: 600; font-size: var(--fs-md); color: var(--ink); word-break: break-all; }

.menu-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.menu-badge[hidden] { display: none; }
.menu-btn { position: fixed; } /* allerede fixed; sørg for badge-anker */

/* ---------------- Meny-innstilling (e-postvarsel) ---------------- */
.menu-setting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
}
.menu-setting[hidden] { display: none; }
.menu-setting-label {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.menu-setting-label .icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ink-soft); }
.toggle-switch {
  flex: 0 0 auto;
  width: 50px; height: 28px;
  border: none; border-radius: 999px;
  background: #c4ccd2;
  padding: 3px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.toggle-switch .toggle-knob {
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: transform 0.16s ease;
}
.toggle-switch[aria-checked="true"] { background: var(--primary); }
.toggle-switch[aria-checked="true"] .toggle-knob { transform: translateX(22px); }
.toggle-switch:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }

/* ---------------- Invitasjons-innboks ---------------- */
.menu-invites[hidden] { display: none; }
.invite-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.invite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
}
.invite-info { flex: 1 1 140px; min-width: 0; }
.invite-name { font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
.invite-from { display: block; font-size: 16px; color: var(--ink-soft); font-weight: 500; }
.invite-type-tag {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  color: var(--primary-dark); letter-spacing: 0.03em;
}
.invite-actions { display: flex; gap: 6px; }

/* ---------------- Del-modal ---------------- */
.share-body { display: flex; flex-direction: column; gap: 10px; }
.share-invite-form { display: flex; gap: 8px; }
.share-invite-form .field { flex: 1; min-width: 0; }
.share-section-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 2px 0; }
.member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.member-row:last-child { border-bottom: none; }
/* Medlems-avatar: felles form fra .account-avatar, .member-avatar over; her kun
   størrelse + grå standard-gradient (eier får den grønne igjen). */
.member-avatar {
  width: 39px; height: 39px;
  font-size: var(--fs-sm);
  background: linear-gradient(135deg, #8496a6, #5f6f7d);
}
.member-avatar.owner { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.member-info { flex: 1; min-width: 0; }
.member-name { font-weight: 600; font-size: var(--fs-md); color: var(--ink); word-break: break-word; }
.member-role { display: block; font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 500; }
.member-pending .member-name { color: var(--ink-soft); font-style: italic; }
.share-msg { margin: 0; font-size: var(--fs-sm); font-weight: 600; min-height: 20px; color: var(--danger); }
.share-msg.ok { color: var(--primary-dark); }
.share-lock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm); background: #faf9fe;
}
.share-lock-title { display: flex; align-items: center; gap: 6px; }
.share-lock-icon { display: inline-flex; font-size: 18px; color: var(--ink); }
.share-lock-label { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.share-lock-hint { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
/* Arvet lås (objektet er låst fordi en forelder er låst): tydeliggjør at dette
   er en informasjons-/unntakstilstand, ikke en vanlig av/på-lås. */
.share-lock-row.is-inherited { background: #fff7ed; }
.share-lock-anc-icon { display: inline-flex; vertical-align: -3px; font-size: 15px; color: var(--ink); }
.share-lock-anc-icon svg { width: 15px; height: 15px; }
/* Arvet medlem (delt via en forelder): svakere, uten «Kast ut» her. */
.member-inherited { opacity: 0.85; }
.member-inherited .member-avatar { background: linear-gradient(135deg, #b0bcc7, #8a97a3); }
.share-leave { align-self: flex-start; }
.owner-line { display: flex; align-items: center; gap: 10px; }

/* ---------------- Plasserings-modal ---------------- */
#place-body { display: flex; flex-direction: column; gap: 8px; }
.place-hint { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 500; }
.place-option {
  appearance: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--ink);
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.place-option:hover { border-color: var(--primary); background: var(--primary-soft); }

/* ---------------- Delt / låst-merker ----------------
   Delt-merket og del-knappen har samme høyde som navnet ved siden av
   (chip-/korttittel-teksten) — relativt store og godt synlige. */
.share-badge {
  flex: 0 0 auto;
  font-size: var(--fs-lg);
  line-height: 1;
  filter: drop-shadow(var(--text-shadow));
}
.share-badge[hidden] { display: none; }
/* Innstillingsknappen på listekort (`.card-cog`, tannhjul — erstatter den
   gamle del-knappen): egen svakt markert flate som lysner ved hover (samme
   idé som flate-mønsteret, på farget bakgrunn). Univers/gruppe deles fortsatt
   fra menyenes egne del-knapper (`.share-btn`). */
.card-cog {
  flex: 0 0 auto;
  align-self: center;
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9px;
  font-size: var(--fs-lg);
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background 0.15s;
}
.card-cog:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.34);
}
.card-cog:focus-visible { outline: 2.5px solid #fff; outline-offset: 2px; }
.card-cog .icon { filter: drop-shadow(var(--text-shadow)); }
/* Delt liste-kort: en tydelig men diskret kant-markør. */
.card.is-shared { box-shadow: var(--shadow-sm), inset 0 0 0 2px rgba(255,255,255,0.55); }
.card.is-locked .card-title { opacity: 0.9; }
.chip.is-shared { box-shadow: 0 2px 7px rgba(35,45,55,0.2), inset 0 0 0 1.5px rgba(255,255,255,0.6); }

/* ---------------- Indikator-chips (meta-raden under navn) ----------------
   Rad under liste-/elementnavnet med chips for innstillinger som ER satt:
   delt (kun lister), ansvarlig (initial-sirkel), start (kalender/klokke) og
   frist (kalender-med-utropstegn/klokke). Chipene er knapper — de åpner
   hurtig-redigering av akkurat den innstillingen. Fargestatus:
     start:  nøytral → grønn når starttiden er passert.
     frist:  nøytral → gul dagen før fristen → rød f.o.m. fristdatoen. */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
}
.meta-row[hidden] { display: none; }
.card-meta { padding-bottom: 2px; }

.meta-chip {
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 3px rgba(35, 45, 55, 0.16);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
}
.meta-chip:hover { filter: brightness(1.04); box-shadow: 0 2px 5px rgba(35, 45, 55, 0.24); }
.meta-chip:active { transform: scale(0.95); }
.meta-chip:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 1px; }
.meta-chip:disabled { cursor: default; }
.meta-chip .icon { width: 1em; height: 1em; font-size: 15px; flex: 0 0 auto; }
/* Ansvarlig-chipen er kun sirkelen (navnet ligger i title/aria). */
.meta-chip.meta-resp { padding: 0 3px; background: transparent; box-shadow: none; }
.meta-chip .resp-avatar { width: 22px; height: 22px; font-size: 11px; }
/* Statusfarger (samme gradienter som knappesystemet). */
.meta-chip.is-started { background: var(--grad-green); color: #fff; text-shadow: var(--text-shadow); }
.meta-chip.is-soon { background: var(--grad-yellow); color: #fff; text-shadow: var(--text-shadow); }
.meta-chip.is-over { background: var(--grad-red); color: #fff; text-shadow: var(--text-shadow); }

/* ---------------- Innstillingsmodal (liste/element) ---------------- */
.settings-modal { width: min(520px, 100%); }
.settings-body { display: flex; flex-direction: column; gap: 16px; }
.settings-name { display: flex; align-items: center; gap: 10px; }
.settings-name-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--ink-soft);
}
.settings-name-input { flex: 1; min-width: 0; font-weight: 600; }
/* Seksjonene skilles med kant-til-kant-linjer (samme stil som modal-head sin
   border-bottom; negativ side-margin kansellerer modal-body-paddingen). */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin: 0 -20px;
  padding: 14px 20px 0;
}
.settings-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.settings-section-title .icon { font-size: 17px; }
/* Ansvarlig-raden: nåværende valg som sirkel + navn; klikk åpner velgeren. */
.settings-resp-btn {
  appearance: none;
  border: 1.5px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: #fbfbfd;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.settings-resp-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.settings-resp-btn:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.settings-resp-btn:disabled { cursor: default; opacity: 0.6; }
.settings-resp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Tids-editoren (modalen + popoveren) ---------------- */
.time-editor { display: flex; flex-direction: column; gap: 14px; }
/* Feltpar (dato+klokkeslett) med egen overskrift over («Starttid»/«Tidsfrist»
   + tilhørende ikon) — kun i fullvisningen (modalen); tids-popoveren har sin
   egen tittel (time-panel-title) og hopper over denne (se opts.only i JS). */
.time-group { display: flex; flex-direction: column; gap: 6px; }
.time-group-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.time-group-heading .icon { font-size: 17px; flex: 0 0 auto; }
.time-row { display: flex; align-items: center; gap: 8px; }
.time-row .field { padding: 8px 10px; font-size: var(--fs-sm); }
/* Datofeltet er så bredt som «dd.mm.åååå» + kalenderikonet trenger — ikke
   bredere (var tidligere elastisk og langt bredere enn innholdet). Samme
   bredde på alle skjermstørrelser. Litt krymp tillatt (helt smale mobiler)
   fremfor å tvinge klokkeslettet ned på egen linje. */
.time-date { flex: 0 1 146px; min-width: 130px; }
/* Klokkeikonet står som eget element til venstre for klokkeslett-feltet
   (ikke lenger inni inputen) — unngår at det overlapper med teksten som
   skrives. Bredden på selve feltet er tilpasset det norske 24-timersformatet
   («tt:mm», uten fm/em-suffiks). */
.time-clock-icon { display: inline-flex; flex: 0 0 auto; color: var(--ink-soft); }
.time-clock-icon .icon { font-size: 15px; }
.time-clock-icon:has(+ .time-clock:disabled) { opacity: 0.55; }
.time-clock { flex: 0 1 88px; min-width: 72px; }
.time-clear {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.time-row .field:disabled { opacity: 0.55; }
/* Subtilt hint (utenfor listens tidsrom / styrt av listen). */
.time-note { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: #9a6b15; }
.time-note.is-muted { color: var(--ink-soft); font-weight: 500; }
.time-note[hidden] { display: none; }
.time-lock {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.time-lock input {
  width: 21px;
  height: 21px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
@media (max-width: 560px) {
  .time-row { gap: 6px; }
}

/* Tids-popoveren (samme skall som bytterne). */
.time-panel { min-width: min(320px, calc(100vw - 20px)); gap: 10px; }
.time-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}
.time-panel-title .icon { font-size: 19px; }

/* ---------------- Redusert bevegelse (tilgjengelighet) ----------------
   Respekterer OS-innstillingen «reduser bevegelse»: nøytraliser animasjoner/
   transisjoner. JS-drevne fly-/FLIP-/drop-animasjoner hoppes uansett over i
   app.js (prefersReducedMotion()); dette dekker de rene CSS-effektene
   (modal-sprett, gruppe-puls, sveipefelt-morf, hover-løft osv.). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}