/* ───────────────────────── Ajouro · designsystem ─────────────────────────
   Lys, varm grunn. Mørk, svevende navigasjon. Pastellkort med én farge per familiemedlem. */
:root{
  --grunn:#f4f2ee; --flate:#ffffff; --flate-2:#efece6; --blekk:#141417; --blekk-2:#3b3b42;
  --dempet:#66666f; --svak:#a8a8b0; --linje:rgba(20,20,23,.08); --linje-2:rgba(20,20,23,.14);
  --skinne:#16171b; --skinne-tekst:#8b8c94; --aksent:#ff7a59; --aksent-sterk:#cf4a2b; --ok:#2f9e6a; --fare:#c2364d;
  --skygge-1:0 1px 2px rgba(20,20,23,.04),0 1px 1px rgba(20,20,23,.03);
  --skygge-2:0 10px 30px -12px rgba(20,20,23,.18),0 2px 6px -2px rgba(20,20,23,.06);
  --skygge-3:0 24px 60px -20px rgba(20,20,23,.35);
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --nav-h:76px; --rail-b:92px;

  /* Familiefarger: flate, blekk (tekst på flaten), prikk */
  --fersken:#fde3d1; --fersken-b:#a9461d; --fersken-p:#f39a6b;
  --sitron:#fbf1a8;  --sitron-b:#7c6300;  --sitron-p:#e6c92e;
  --rosa:#f9d6ee;    --rosa-b:#9b347c;    --rosa-p:#ea92cb;
  --himmel:#d2ecf9;  --himmel-b:#1f6690;  --himmel-p:#6fbbe6;
  --mynte:#d0f0df;   --mynte-b:#25704c;   --mynte-p:#6fcf9d;
  --lavendel:#e4defc;--lavendel-b:#5442ad;--lavendel-p:#a597f0;
  --sand:#ede5d7;    --sand-b:#6d5939;    --sand-p:#c8b085;

  /* Kategorier i handlelisten: flate og farge (ring, hake, prikk) */
  --kat-frukt-gront:#dcefe0; --kat-frukt-gront-farge:#3f9b57;
  --kat-meieri:#fbdcec;      --kat-meieri-farge:#d9468f;
  --kat-kjott:#f1d9df;       --kat-kjott-farge:#8c2340;
  --kat-frys:#d9eef9;        --kat-frys-farge:#3f9fd3;
  --kat-husholdning:#e7e8ea; --kat-husholdning-farge:#7c8088;
  --kat-kos:#e3e3e5;         --kat-kos-farge:#141417;
  color-scheme:light;
}
:root[data-tema="moerk"]{
  --grunn:#0e0f12; --flate:#18191e; --flate-2:#202127; --blekk:#f1f0ec; --blekk-2:#cfced3;
  --dempet:#9a9aa3; --svak:#62626b; --linje:rgba(255,255,255,.07); --linje-2:rgba(255,255,255,.13);
  --skinne:#000; --skinne-tekst:#7a7b83; --fare:#ef6a80;
  --skygge-1:none; --skygge-2:0 10px 30px -12px rgba(0,0,0,.6); --skygge-3:0 24px 60px -20px rgba(0,0,0,.8);
  --fersken:#3a2a21; --fersken-b:#ffc3a1;
  --sitron:#37321a;  --sitron-b:#f5e27a;
  --rosa:#3a2434;    --rosa-b:#f7b8e1;
  --himmel:#1b3140;  --himmel-b:#a6dcf7;
  --mynte:#1b3529;   --mynte-b:#a5ecc6;
  --lavendel:#2a2645;--lavendel-b:#c9c0ff;
  --sand:#2f2a22;    --sand-b:#e3d2b2;
  --kat-frukt-gront:#1d3324; --kat-frukt-gront-farge:#6cc785;
  --kat-meieri:#3a2230;      --kat-meieri-farge:#f08cbd;
  --kat-kjott:#3a1a23;       --kat-kjott-farge:#d0607e;
  --kat-frys:#1b3140;        --kat-frys-farge:#8ccbea;
  --kat-husholdning:#26282d; --kat-husholdning-farge:#a5a8af;
  --kat-kos:#2a2b30;         --kat-kos-farge:#f1f0ec;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="lys"]):not([data-tema="moerk"]){
    --grunn:#0e0f12; --flate:#18191e; --flate-2:#202127; --blekk:#f1f0ec; --blekk-2:#cfced3;
    --dempet:#9a9aa3; --svak:#62626b; --linje:rgba(255,255,255,.07); --linje-2:rgba(255,255,255,.13);
    --skinne:#000; --skinne-tekst:#7a7b83; --fare:#ef6a80;
    --skygge-1:none; --skygge-2:0 10px 30px -12px rgba(0,0,0,.6); --skygge-3:0 24px 60px -20px rgba(0,0,0,.8);
    --fersken:#3a2a21; --fersken-b:#ffc3a1; --sitron:#37321a; --sitron-b:#f5e27a; --rosa:#3a2434; --rosa-b:#f7b8e1;
    --himmel:#1b3140; --himmel-b:#a6dcf7; --mynte:#1b3529; --mynte-b:#a5ecc6; --lavendel:#2a2645; --lavendel-b:#c9c0ff;
    --sand:#2f2a22; --sand-b:#e3d2b2; color-scheme:dark;
  }
}
.f-fersken{--f:var(--fersken);--fb:var(--fersken-b);--fp:var(--fersken-p)}
.f-sitron{--f:var(--sitron);--fb:var(--sitron-b);--fp:var(--sitron-p)}
.f-rosa{--f:var(--rosa);--fb:var(--rosa-b);--fp:var(--rosa-p)}
.f-himmel{--f:var(--himmel);--fb:var(--himmel-b);--fp:var(--himmel-p)}
.f-mynte{--f:var(--mynte);--fb:var(--mynte-b);--fp:var(--mynte-p)}
.f-lavendel{--f:var(--lavendel);--fb:var(--lavendel-b);--fp:var(--lavendel-p)}
.f-sand{--f:var(--sand);--fb:var(--sand-b);--fp:var(--sand-p)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--grunn)}
body{font:500 16px/1.45 var(--font);color:var(--blekk);background:var(--grunn);-webkit-font-smoothing:antialiased;
  min-height:100dvh;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;transition:background .5s,color .5s}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
ul{list-style:none}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
img.sym{width:28px;height:28px;flex:none}
.skjult{display:none !important}
.tall{font-variant-numeric:tabular-nums}
::selection{background:var(--sitron)}
:focus-visible{outline:2px solid var(--aksent-sterk);outline-offset:2px}
.felt:focus-visible{outline:none}

/* Global regel: luft til høyre i dropdowns (eierens standard), egen chevron per tema */
select:not([multiple]):not([size]){
  appearance:none;-webkit-appearance:none;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376767f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .875rem center;background-size:1rem 1rem}
:root[data-tema="moerk"] select:not([multiple]):not([size]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-tema="lys"]) select:not([multiple]):not([size]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}}

/* Kategorier: --k er hovedfarge (ring, prikk), --kf er flaten */
.k-frukt-gront{--k:var(--kat-frukt-gront-farge);--kf:var(--kat-frukt-gront)}
.k-meieri{--k:var(--kat-meieri-farge);--kf:var(--kat-meieri)}
.k-kjott{--k:var(--kat-kjott-farge);--kf:var(--kat-kjott)}
.k-frys{--k:var(--kat-frys-farge);--kf:var(--kat-frys)}
.k-husholdning{--k:var(--kat-husholdning-farge);--kf:var(--kat-husholdning)}
.k-kos{--k:var(--kat-kos-farge);--kf:var(--kat-kos)}
.k-ingen,.ingen{--k:var(--linje-2);--kf:var(--flate-2)}
@media (prefers-color-scheme:dark){:root:not([data-tema="lys"]){
  --kat-frukt-gront:#1d3324;--kat-frukt-gront-farge:#6cc785;--kat-meieri:#3a2230;--kat-meieri-farge:#f08cbd;--kat-kjott:#3a1a23;--kat-kjott-farge:#d0607e;
  --kat-frys:#1b3140;--kat-frys-farge:#8ccbea;--kat-husholdning:#26282d;--kat-husholdning-farge:#a5a8af;--kat-kos:#2a2b30;--kat-kos-farge:#f1f0ec}}

/* ── Typografi ── */
.tittel-xl{font-size:clamp(32px,8vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.tittel-l{font-size:clamp(24px,5.6vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.14}
.etikett{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dempet)}
.dempet{color:var(--dempet)} .liten{font-size:13.5px}
svg.i.liten{width:16px;height:16px;vertical-align:-2px}
svg.i.dempet{color:var(--dempet)}

/* ── Skall ── */
#app{min-height:100dvh}
.innhold{padding:calc(env(safe-area-inset-top) + 18px) 18px calc(var(--nav-h) + env(safe-area-inset-bottom) + 36px);max-width:760px;margin:0 auto}
.innhold.med-komponist{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 170px)}
.topp{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.topp .venstre{display:flex;align-items:center;gap:12px;min-width:0}
.seksjon{margin-top:28px}
.seksjon-hode{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.seksjon-hode a,.seksjon-hode button{font-size:14px;font-weight:650;color:var(--dempet);text-decoration:none;padding:12px 8px;margin:-12px -8px;border-radius:10px}
.seksjon-hode a:active,.seksjon-hode button:active{color:var(--blekk)}
.statuslinje{margin-top:14px;font-size:13.5px;color:var(--dempet);font-weight:600}
.ingress{color:var(--dempet);font-weight:550;margin:10px 0 18px}
.fot{margin-top:28px;text-align:center;font-size:12.5px;color:var(--svak);font-weight:600}

/* Navigasjon */
#nav{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 12px);
  background:var(--skinne);border-radius:999px;padding:8px;display:flex;gap:4px;box-shadow:var(--skygge-3)}
#nav[hidden]{display:none}
:root[data-tema="moerk"] #nav{box-shadow:var(--skygge-3),inset 0 0 0 1px rgba(255,255,255,.09)}
@media (prefers-color-scheme:dark){:root:not([data-tema="lys"]) #nav{box-shadow:var(--skygge-3),inset 0 0 0 1px rgba(255,255,255,.09)}}
#nav a{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--skinne-tekst);transition:background .25s,color .25s,transform .2s;text-decoration:none}
#nav a:active{transform:scale(.92)}
#nav a.aktiv{background:#fff;color:#141417}
#nav .merke{position:absolute;top:7px;right:7px;min-width:18px;height:18px;border-radius:9px;background:var(--aksent-sterk);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--skinne)}
#nav .avstand{display:none}
@media (min-width:900px){
  :root{--nav-h:0px}
  #nav{left:16px;top:16px;bottom:16px;transform:none;flex-direction:column;justify-content:flex-start;align-items:center;width:76px;border-radius:38px;padding:18px 0;gap:10px}
  #nav .avstand{display:block;flex:1}
  .innhold{padding:28px 32px 40px calc(var(--rail-b) + 28px);max-width:calc(820px + var(--rail-b))}
  .innhold.med-komponist{padding-bottom:150px}
  .innhold.tavle,.innhold.kal-bred{max-width:none}
  /* Alt innhold starter rett ved skinnen, som på forsiden og i kalenderen. */
  .innhold{margin:0}
}

/* ── Avatar ── */
.avatar{width:46px;height:46px;border-radius:50%;background:var(--f,var(--sand));color:var(--fb,var(--sand-b));display:inline-grid;place-items:center;
  font-weight:800;font-size:18px;flex:none;letter-spacing:-.02em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);line-height:1}
.avatar.s{width:28px;height:28px;font-size:12px}
.avatar{overflow:hidden;position:relative}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.avatar img.foto{object-fit:cover}
.avatar.xl{width:96px;height:96px;font-size:38px}
.avatarvalg{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px}
/* Rutenettet strekker ellers knappene i høyden, så sirklene blir ovale. Kvadratiske, ikke strukket. */
.avatarvalg button{width:100%;height:auto;aspect-ratio:1;align-self:start;border-radius:50%;padding:0;border:3px solid transparent;transition:transform .15s}
.avatarvalg button:active{transform:scale(.94)}
.avatarvalg button.valgt{border-color:var(--blekk)}
.avatarvalg button .avatar{display:grid;width:100%;height:auto;aspect-ratio:1;font-size:24px}
.avatar-forhand{display:flex;align-items:center;gap:16px}
.avatar-knapper{display:flex;gap:8px;flex-wrap:wrap}
.profil .avatar-knapp{position:relative;border-radius:50%}
.profil .avatar-knapp .blyant{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--blekk);color:var(--grunn);display:grid;place-items:center;box-shadow:0 0 0 3px var(--grunn)}
.profil .avatar-knapp .blyant svg{width:14px;height:14px}
.avatar.l{width:64px;height:64px;font-size:26px}
.avatarer{display:flex}
.avatarer .avatar{margin-left:-8px;box-shadow:0 0 0 3px var(--grunn)}
.avatarer .avatar:first-child{margin-left:0}

/* ── Kort, knapper, felt ── */
.kort{background:var(--flate);border-radius:var(--r-l);padding:8px 18px;box-shadow:var(--skygge-1);border:1px solid var(--linje)}
.kort.liste{padding:4px 14px}
.kort.tett{padding:8px}
.kort .flere{display:block;padding:10px 0 8px 36px;font-size:14px;font-weight:650;color:var(--dempet);text-decoration:none}
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  background:var(--blekk);color:var(--grunn);font-weight:700;font-size:16px;transition:transform .15s,opacity .2s;text-decoration:none}
.knapp:active{transform:scale(.97)} .knapp:disabled{opacity:.45}
.knapp.lys{background:var(--flate);color:var(--blekk);border:1px solid var(--linje-2)}
.knapp.hvit{background:#fff;color:#141417}
.knapp.lys-paa-moerk{background:#f1f0ec;color:#141417}
.knapp.full{width:100%}
.knapp.liten{min-height:40px;padding:0 16px;font-size:14px}
.knapp.fare-knapp{background:var(--fare);color:#fff}
.knapp svg.i{width:20px;height:20px}
.lenkeknapp{display:block;width:100%;padding:12px;font-weight:650;font-size:15px;color:var(--dempet);text-align:center}
.lenkeknapp.fare{color:var(--fare)}
.ikonknapp{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--flate);border:1px solid var(--linje);color:var(--blekk);flex:none;transition:transform .15s}
.ikonknapp:active{transform:scale(.92)}
.ikonknapp.s{width:36px;height:36px} .ikonknapp.s svg{width:18px;height:18px}
.ikonknapp.moerk{background:var(--blekk);color:var(--grunn);border-color:transparent}
.felt{width:100%;min-height:52px;padding:0 18px;border-radius:var(--r-m);border:1px solid var(--linje-2);background:var(--flate);font-size:16px;font-weight:550;outline:none;transition:border-color .2s,box-shadow .2s}
.felt:focus{border-color:var(--blekk-2);box-shadow:0 0 0 4px var(--linje)}
.felt::placeholder{color:var(--dempet)}
.felt:disabled{opacity:.6}
textarea.felt{padding:14px 18px;resize:none;line-height:1.4;min-height:46px}
.brikke{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:var(--flate);border:1px solid var(--linje);
  font-size:14px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s,transform .15s;text-decoration:none;color:var(--blekk)}
.brikke:active{transform:scale(.96)}
.brikke.aktiv{background:var(--blekk);color:var(--grunn);border-color:transparent}
.brikke small{font-weight:600;opacity:.7}
.brikker{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px}
.brikker::-webkit-scrollbar{display:none}
.segment{display:inline-flex;background:var(--flate-2);border-radius:999px;padding:4px}
.segment button{height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:700;color:var(--dempet)}
.segment button.aktiv{background:var(--flate);color:var(--blekk);box-shadow:var(--skygge-1)}
.tom{padding:26px 18px;text-align:center;color:var(--dempet);font-size:15px;display:grid;gap:4px;justify-items:center}
.tom .stor{font-size:34px;margin-bottom:4px} .tom b{color:var(--blekk);font-weight:700}
.tom.liten{padding:16px;font-size:14px}

/* ── Hjem ── */
.hilsen{margin-top:20px}
.hilsen p{margin-top:8px;font-size:17px;color:var(--dempet);font-weight:550}
.hjem-topp{margin-bottom:0}
.hjem-topp-hoyre{display:flex;align-items:center;gap:16px}
.vaerpille{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 8px;border-radius:999px;background:var(--flate);border:1px solid var(--linje);font-weight:600;font-size:14px;color:var(--dempet);white-space:nowrap}
.vaerpille b{color:var(--blekk);font-weight:800;font-size:16px}
.vaerpille img{width:32px;height:32px}
.flere-bursdager{margin-top:10px;font-size:13.5px;color:var(--dempet);font-weight:600}

/* Tidslinje */
.tidslinje{position:relative}
.tidslinje::before{content:"";position:absolute;left:64px;top:14px;bottom:14px;width:2px;background:var(--linje)}
.tl-rad{display:grid;grid-template-columns:52px 26px minmax(0,1fr);align-items:center;margin-bottom:12px}
.tl-tid{font-weight:800;font-size:16px;line-height:1.1;text-align:center;font-variant-numeric:tabular-nums}
.tl-tid small{display:block;font-size:12px;font-weight:650;color:var(--dempet);margin-top:3px}
.tl-ring{width:16px;height:16px;border-radius:50%;border:3px solid var(--blekk);background:var(--grunn);justify-self:center;position:relative;z-index:1}
.tl-rad.ferdig .tl-ring{background:var(--blekk)}
.tl-rad.ferdig .tl-kort{opacity:.55}
.tl-rad.naa .tl-ring{border-color:var(--aksent);box-shadow:0 0 0 5px color-mix(in srgb,var(--aksent) 22%,transparent)}
.tl-kort{background:var(--f,var(--sand));border-radius:22px;padding:16px 18px;min-width:0}
.tl-kort h3{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.tl-kort p{font-size:14px;color:var(--blekk-2);opacity:.75;margin-top:3px;font-weight:600}
.tl-kort .tid{font-size:14px;font-weight:700;margin-top:10px;display:flex;align-items:center;gap:8px;min-height:28px}
.tl-kort .hvem{display:inline-flex;gap:4px;margin-left:auto}
.tl-kort .hvem .avatar{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.tl-heldag{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.tl-heldag .brikke{background:var(--f);border:0;color:var(--blekk)}
.middag-rad{display:flex;align-items:center;gap:12px;background:var(--f);border-radius:22px;padding:12px 18px;margin-left:78px;margin-bottom:12px}
.middag-rad span{font-size:22px} .middag-rad b{display:block;font-weight:700} .middag-rad small{font-size:12.5px;color:var(--dempet);font-weight:650}

/* Bursdager */
.bursdager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bursdag{border-radius:var(--r-l);padding:18px;background:var(--f);position:relative;overflow:hidden;min-height:156px;display:flex;flex-direction:column}
.bursdag .navn{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;overflow-wrap:break-word;hyphens:auto;position:relative}
.bursdag .dato{font-size:14px;font-weight:650;color:var(--blekk-2);opacity:.75;margin-top:4px}
.bursdag .igjen{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;gap:6px}
.bursdag .igjen b{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:.9}
.bursdag .igjen span{font-size:14px;font-weight:700}
.bursdag.idag .igjen b{font-size:28px;letter-spacing:-.01em}

/* Reiser */

/* Ukesvær */
.ukevaer{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ukevaer > div{padding:10px 0;border-radius:16px;display:grid;justify-items:center;gap:1px}
.ukevaer .idag{background:var(--blekk);color:var(--grunn)}
.ukevaer .idag .d,.ukevaer .idag small{color:inherit;opacity:.7}
.ukevaer .d{font-size:12.5px;font-weight:700;color:var(--dempet)}
.ukevaer img{width:32px;height:32px;margin:2px 0}
.ukevaer b{font-size:15px;font-weight:800}
.ukevaer small{font-size:11.5px;color:var(--dempet);font-weight:650;white-space:nowrap}

/* Husk-rader og siste melding */
.mini-rad{display:flex;align-items:center;gap:12px;padding:11px 0;font-weight:650;border-bottom:1px solid var(--linje);cursor:pointer}
.mini-rad:last-child{border-bottom:0}
.mini-rad .rund{width:24px;height:24px;border-radius:7px;border:2.5px solid var(--linje-2);flex:none}
.mini-rad small{margin-left:auto;color:var(--dempet);font-weight:650;font-size:13px;white-space:nowrap}
.mini-rad.haster small{color:var(--fare)}
.siste-melding{display:flex;align-items:flex-end;gap:8px;text-decoration:none;color:inherit}

/* Tavle: tre kolonner, uten scrolling */
@media (min-width:1100px) and (min-height:680px){
  .innhold.tavle{height:100dvh;overflow:hidden;padding-top:26px;padding-bottom:20px;display:flex;flex-direction:column}
  .hjem-rutenett{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.92fr);gap:24px;align-items:start;flex:1;min-height:0;margin-top:4px}
  .hjem-rutenett > div{min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
  .hjem-rutenett .seksjon{margin-top:22px}
  .hjem-rutenett > div > .seksjon:first-child{margin-top:12px}
  .innhold.tavle .bursdag{min-height:140px}
}

/* Tavle på stående nettbrett: to kolonner, dagen til venstre */
@media (min-width:760px) and (min-height:1000px) and (orientation:portrait){
  .innhold.tavle{max-width:none;height:100dvh;overflow:hidden;display:flex;flex-direction:column;padding-bottom:calc(var(--nav-h) + 30px)}
  .hjem-rutenett{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 24px;flex:1;min-height:0;margin-top:4px}
  .hjem-rutenett > div:nth-child(1){grid-row:1 / span 2}
  .hjem-rutenett > div{min-height:0;overflow:hidden}
  .hjem-rutenett > div:nth-child(1),.hjem-rutenett > div:nth-child(3){-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
  .hjem-rutenett > div > .seksjon:first-child{margin-top:12px}
}

/* ── Kalender ── */
.kal-topp{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.kal-knapper{display:flex;align-items:center;gap:8px}
.kal-topp{flex-wrap:nowrap;margin-bottom:12px}
.agenda h2{margin-bottom:12px} .agenda h2 .dempet{font-weight:600}
.smart{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.smart .brikke{height:34px;font-size:13.5px;border:0}
.smart .brikke.p{background:var(--f);color:var(--fb)}
.smart .brikke.advarsel{background:color-mix(in srgb,var(--fare) 14%,var(--flate));color:var(--fare)}
img.mini{width:18px;height:18px}
.maaned{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:22px;touch-action:pan-y}
.maaned .ukd{font-size:12px;font-weight:700;color:var(--dempet);text-align:center;padding-bottom:2px}
.maaned button{min-height:84px;border-radius:16px;background:var(--flate);border:1px solid var(--linje);padding:6px 5px;display:flex;flex-direction:column;align-items:stretch;gap:3px;text-align:left;overflow:hidden;transition:transform .15s;min-width:0}
.maaned button:active{transform:scale(.96)}
.maaned button.utenfor{opacity:.4}
.maaned .nr{font-size:14px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.maaned button.idag .nr span{background:var(--aksent-sterk);color:#fff;border-radius:999px;padding:0 6px}
.maaned button.valgt{border-color:var(--blekk);box-shadow:0 0 0 1.5px var(--blekk)}
.maaned .bar{font-size:11px;font-weight:700;line-height:1.3;padding:2px 5px;border-radius:6px;background:var(--f);color:var(--blekk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maaned .flere{font-size:11px;font-weight:700;color:var(--dempet);padding-left:4px}
.maaned .reisebaand{height:4px;border-radius:2px;background:var(--himmel-p);margin-top:auto}
@media (max-width:560px){
  .maaned{gap:4px}
  .maaned button{min-height:60px;border-radius:12px;padding:5px 3px}
  .maaned .bar{font-size:0;height:5px;padding:0;border-radius:3px}
  .maaned .nr img{display:none}
}
.kal-visning{margin-bottom:16px}
/* Ukevisning: én flate per dag, vær øverst og hendelsene som kort. Stablet på telefon, kolonner fra 900 px. */
.uke{display:grid;gap:10px;margin-bottom:22px;touch-action:pan-y}
.ukedag{background:var(--flate);border:1px solid var(--linje);border-radius:22px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ukedag.forbi{opacity:.55}
.ukedag.idag{border-color:var(--blekk);box-shadow:0 0 0 1.5px var(--blekk)}
.uke-hode{display:flex;justify-content:space-between;align-items:center;gap:6px}
.uke-hode .ukd{font-size:13px;font-weight:700;color:var(--dempet);margin-right:6px}
.uke-hode .nr{font-size:20px;font-weight:800;letter-spacing:-.02em}
.ukedag.idag .uke-hode .nr{color:var(--aksent-sterk)}
.uke-hode .vaer{display:flex;align-items:center;gap:4px;font-size:15px}
.uke-hode .vaer img{width:28px;height:28px}
.uke-hode .vaer b{font-weight:800}
.uke-hode .vaer small{color:var(--dempet);font-weight:600;font-size:12.5px}
.uke-kortliste{display:grid;gap:6px}
.uke-kort{background:var(--f);border-radius:14px;padding:8px 10px;display:grid;gap:2px;min-width:0}
.uke-kort b{font-size:14px;font-weight:700;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.uke-kort small{font-size:12px;font-weight:700;color:var(--blekk-2);opacity:.85}
.uke-kort .sted{font-weight:600}
.uke-kort.middag{background:var(--flate-2)}
.uke .ledig{font-size:13px;color:var(--svak);font-weight:600}
@media (min-width:900px){
  .uke{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
  .ukedag{padding:12px 8px;min-height:62vh}
  .uke-hode{flex-direction:column;align-items:flex-start;gap:6px;padding:0 4px 8px;border-bottom:1px solid var(--linje)}
  .uke-hode .ukd{display:block;margin:0}
  .uke-hode .nr{font-size:24px}
}
@media (min-width:1100px){
  .kal-to{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:28px;align-items:start}
  .kal-to .agenda{position:sticky;top:28px}
}

/* ── Lister ── */
.liste-hode{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.liste-hode .ikon{width:56px;height:56px;border-radius:18px;background:var(--sitron);display:grid;place-items:center;font-size:28px;flex:none}
.liste-hode h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.liste-hode p{color:var(--dempet);font-weight:600;font-size:14px;margin-top:2px}
.liste-hode > div{flex:1;min-width:0}
.kathode{display:flex;align-items:center;gap:8px;padding:18px 0 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dempet)}
.kathode i{width:10px;height:10px;border-radius:50%;background:var(--k)}
.kathode.ingen i{background:var(--svak)}
.kathode small{color:var(--dempet);font-size:12px}
.vare{display:flex;align-items:center;gap:14px;padding:6px 6px 6px 4px;min-height:58px;border-bottom:1px solid var(--linje);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kort .vare:last-child{border-bottom:0}
.vare.ny{animation:inn .4s cubic-bezier(.2,.8,.2,1)}
.vare .boks{width:30px;height:30px;border-radius:9px;border:2.5px solid var(--k);display:grid;place-items:center;flex:none;transition:background .25s,border-color .25s}
.vare.k-ingen .boks{border-color:var(--linje-2)}
.vare .boks svg{width:16px;height:16px;stroke:var(--grunn);stroke-width:3.2;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.vare.ferdig .boks{background:var(--k)}
.vare.ferdig.k-ingen .boks{background:var(--ok);border-color:var(--ok)}
.vare.ferdig .boks svg{opacity:1;transform:scale(1)}
.vare .tekst{flex:1;min-width:0;font-weight:600;font-size:17px;overflow-wrap:anywhere}
.vare .tekst small{display:block;font-size:12.5px;font-weight:650;color:var(--dempet);margin-top:1px}
.vare .antall{font-weight:800}
.vare.ferdig .tekst{color:var(--svak)}
.vare.ferdig .tekst > span{text-decoration:line-through}
.vare .slett{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--dempet);flex:none}
.vare .slett svg{width:18px;height:18px}
@keyframes inn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Komponist og forslag */
.komponist{position:fixed;z-index:20;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 22px);padding:0 14px;pointer-events:none}
.komp-indre{max-width:724px;margin:0 auto;pointer-events:auto}
.komponist form{display:flex;gap:8px;align-items:flex-end;background:var(--flate);border:1px solid var(--linje-2);border-radius:28px;padding:6px;box-shadow:var(--skygge-2)}
.komponist .felt{border:0;min-height:46px;box-shadow:none;background:transparent;border-radius:22px}
.komponist .ikonknapp{width:46px;height:46px}
.forslag-chips{margin:0 -14px 8px;padding:2px 14px 4px}
.forslag-chips .brikke{box-shadow:var(--skygge-1);height:34px;font-size:13.5px}
.forslag-chips:empty,.forslag-chips[hidden]{display:none}
.forslagsliste{background:var(--flate);border:1px solid var(--linje);border-radius:24px;box-shadow:var(--skygge-2);margin-bottom:10px;overflow:hidden;max-height:min(52vh,420px);overflow-y:auto}
.forslagsliste > .etikett{display:block;padding:14px 16px 4px}
.forslag{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;min-height:58px;border-top:1px solid var(--linje);cursor:pointer}
.forslag:first-of-type{border-top:0}
.forslag:active{background:var(--flate-2)}
.forslag .emoji{width:40px;height:40px;border-radius:13px;background:var(--sitron);display:grid;place-items:center;font-size:20px;flex:none}
.forslag .markor{width:40px;height:40px;display:grid;place-items:center;flex:none;color:var(--dempet)}
.forslag .markor i{width:12px;height:12px;border-radius:50%;background:var(--k)}
.forslag .markor.k-ingen i{background:var(--svak)}
.forslag .midt{flex:1;min-width:0;display:grid;gap:1px}
.forslag b{font-weight:700} .forslag small{font-size:13px;color:var(--dempet);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forslag .knapp{pointer-events:none;flex:none}
@media (min-width:900px){.komponist{left:var(--rail-b);padding:0 32px 0 28px;bottom:24px}.komp-indre{margin:0;max-width:760px}}

/* Kategorimerke og grupper */
.katmerke{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 12px;border-radius:999px;background:var(--kf);font-size:13.5px;font-weight:700;color:var(--blekk);white-space:nowrap}
.katmerke i{width:9px;height:9px;border-radius:50%;background:var(--k)}
.katmerke.valgt{background:var(--k);color:var(--grunn)}
.katmerke.valgt i{background:var(--grunn)}
.katmerke.ingen{border:1px solid var(--linje-2);background:var(--flate)}
.katmerke.ingen.valgt{background:var(--blekk);color:var(--grunn)}
.katvalg,.gruppevalg,.gruppevarer{display:flex;flex-wrap:wrap;gap:8px}
.gruppeliste{display:grid;gap:14px;margin-top:20px}
@media (min-width:900px){.gruppeliste{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
/* Kortene i samme rad blir like høye: innholdet står øverst og knappen nederst, i stedet for å strekkes ut. */
.gruppekort{background:var(--flate);border:1px solid var(--linje);border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--skygge-1)}
.gruppekort > .knapp{margin-top:auto}
.gruppekort .hode{display:flex;align-items:center;gap:12px}
.gruppekort .hode > div{flex:1;min-width:0;display:grid}
.gruppekort .emoji{width:44px;height:44px;border-radius:14px;background:var(--sitron);display:grid;place-items:center;font-size:22px;flex:none}
.gruppekort b{font-size:18px;font-weight:800} .gruppekort small{font-size:13px;color:var(--dempet);font-weight:600}
.brikke.med-x{padding-right:6px}
.brikke.med-x button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--dempet)}
.brikke.med-x svg{width:14px;height:14px}

/* ── Ark ── */
#ark{position:fixed;inset:0;z-index:60}
#ark[hidden]{display:none}
.ark-bak{position:absolute;inset:0;background:rgba(10,10,12,.42);opacity:0;transition:opacity .25s}
/* Arket selv ruller ikke: da ville rullefeltet stikke ut forbi de runde hjørnene. Innholdet ruller i .ark-rull. */
.ark{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--flate);border-radius:34px 34px 0 0;box-shadow:var(--skygge-3);
  padding-top:12px;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);max-width:620px;margin:0 auto}
.ark-rull{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 14px calc(env(safe-area-inset-bottom) + 10px) 20px;margin:0 6px 14px 0;
  scrollbar-width:thin;scrollbar-color:var(--linje-2) transparent}
.ark-rull::-webkit-scrollbar{width:6px}
.ark-rull::-webkit-scrollbar-track{background:transparent}
.ark-rull::-webkit-scrollbar-thumb{background:var(--linje-2);border-radius:3px}
#ark.apen .ark-bak{opacity:1}
#ark.apen .ark{transform:none}
.ark{border:1px solid var(--linje)}
.ark-handtak{display:block;flex:none;width:40px;height:5px;border-radius:3px;background:var(--linje-2);margin:0 auto 14px}
.ark-innhold{display:grid;gap:14px}
.ark-innhold .etikett{margin-top:4px}
.tittelfelt{font-size:24px;font-weight:800;letter-spacing:-.02em;border:0;padding:0;min-height:40px;background:transparent}
.tittelfelt:focus{box-shadow:none}
.to-felt{display:flex;gap:8px;align-items:center}
.emojifelt{width:64px;flex:none;text-align:center;font-size:22px;padding:0}
.steg{background:var(--flate-2);border-radius:var(--r-m);padding:14px 16px;font-size:15px}
.steg ol{margin:8px 0 0 18px;display:grid;gap:4px} .steg p{margin-top:6px;color:var(--blekk-2)}
.valg{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.valg input{width:20px;height:20px;accent-color:var(--blekk)}
@media (min-width:700px){.ark{bottom:auto;top:50%;border-radius:34px;transform:translateY(-40%) scale(.98);opacity:0;transition:transform .3s,opacity .25s}#ark.apen .ark{transform:translateY(-50%);opacity:1}}

/* ── Chat ── */
.chat-topp p{margin-top:2px}
.chat{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.chat .dag{align-self:center;font-size:12.5px;font-weight:700;color:var(--dempet);margin:16px 0 8px;background:var(--flate-2);padding:4px 12px;border-radius:999px}
.boble-rad{display:flex;gap:8px;align-items:flex-end;max-width:84%;-webkit-user-select:none;user-select:none}
.boble-rad.siste{margin-bottom:8px}
.boble-rad.meg{align-self:flex-end}
.boble-rad .avatar{visibility:hidden}
.boble-rad.siste .avatar{visibility:visible}
.boble{background:var(--f,var(--flate));padding:10px 14px;border-radius:20px;font-size:16px;font-weight:550;line-height:1.38;overflow-wrap:anywhere;white-space:pre-wrap;color:var(--blekk)}
.boble-rad.ny .boble{animation:inn .3s cubic-bezier(.2,.8,.2,1)}
.boble-rad:not(.meg):not(.forste) .boble{border-top-left-radius:8px}
.boble-rad:not(.meg):not(.siste) .boble{border-bottom-left-radius:8px}
.boble-rad:not(.meg).siste .boble{border-bottom-left-radius:6px}
.boble-rad.meg .boble{background:var(--blekk);color:var(--grunn)}
.boble-rad.meg:not(.forste) .boble{border-top-right-radius:8px}
.boble-rad.meg:not(.siste) .boble{border-bottom-right-radius:8px}
.boble-rad.meg.siste .boble{border-bottom-right-radius:6px}
.boble .hvem{display:block;font-size:12.5px;font-weight:800;color:var(--fb);margin-bottom:2px}
.boble time{display:block;font-size:11px;font-weight:650;opacity:.55;margin-top:3px;text-align:right}
.siste-melding .boble{border-bottom-left-radius:6px}

/* ── Mer ── */
.profil{display:flex;align-items:center;gap:16px}
.profil > div{flex:1;min-width:0}
.farger{display:flex;gap:10px;flex-wrap:wrap}
.farger button{width:42px;height:42px;border-radius:50%;background:var(--f);border:3px solid transparent;transition:transform .15s}
.farger button.valgt{border-color:var(--blekk);transform:scale(1.08)}
.innst-gruppe{background:var(--flate);border-radius:var(--r-l);border:1px solid var(--linje);overflow:hidden}
.innst-rad{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--linje);min-height:60px}
.innst-rad:last-child{border-bottom:0}
a.innst-rad{text-decoration:none;color:inherit}
a.innst-rad:active{background:var(--flate-2)}
.under-topp{display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
.under-topp h1{text-align:center}
.innst-rad[data-a]{cursor:pointer}
.innst-rad[data-a]:active{background:var(--flate-2)}
.innst-rad .midt{flex:1;min-width:0;display:grid;gap:1px}
.innst-rad .midt b{font-weight:600} .innst-rad .midt small{color:var(--dempet);font-size:13px;font-weight:600}
.innst-rad.fare b{color:var(--fare)}
.ik-flate{width:36px;height:36px;border-radius:12px;background:var(--f,var(--flate-2));display:grid;place-items:center;flex:none;font-size:18px}
.ik-flate svg{width:20px;height:20px} .ik-flate.fare{color:var(--fare)}
.rund-boks{width:28px;height:28px;border-radius:8px;border:2.5px solid var(--linje-2);display:grid;place-items:center;flex:none;color:transparent}
.rund-boks svg{width:15px;height:15px;stroke-width:3}
.innst-rad.husk.ferdig .rund-boks{background:var(--ok);border-color:var(--ok);color:#fff}
.innst-rad.husk.ferdig b{color:var(--svak);text-decoration:line-through}
.innst-rad .haster{color:var(--fare)}
.innst-rad .slett{width:34px;height:34px;display:grid;place-items:center;color:var(--dempet)} .innst-rad .slett svg{width:17px;height:17px}
.husk-ny{gap:8px;padding:10px 12px}
.husk-ny .felt{min-height:44px}
.husk-ny{flex-wrap:wrap}
.husk-ny #husk-tekst{flex:1 1 100%}
.husk-ny .datofelt{flex:1;padding:0 12px;font-size:15px}
@media (min-width:520px){.husk-ny{flex-wrap:nowrap}.husk-ny #husk-tekst{flex:1}.husk-ny .datofelt{flex:none;width:160px}}
.bryter{position:relative;width:52px;height:32px;flex:none;display:block}
.bryter input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:1;margin:0}
.bryter span{position:absolute;inset:0;border-radius:999px;background:var(--linje-2);transition:background .2s}
.bryter span::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.bryter input:checked + span{background:var(--ok)}
.bryter input:checked + span::after{transform:translateX(20px)}

/* ── Intro: ikonet spretter inn, så navnet én bokstav om gangen og familien til slutt.
   Spilles én gang per økt, og ikke med redusert bevegelse (samme grep som Quizteller). ── */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--grunn);transition:opacity .38s ease,transform .38s ease}
.intro.ut{opacity:0;transform:translateY(-16px);pointer-events:none}
.intro-ikon{width:96px;height:96px;opacity:0;filter:drop-shadow(0 12px 26px rgba(20,20,23,.22))}
.intro-ord{display:flex;font-weight:800;font-size:clamp(38px,10vw,58px);line-height:1;letter-spacing:-.035em;color:var(--blekk)}
.intro-ord span{display:inline-block;opacity:0}
.intro-dyr{display:flex;gap:10px;margin-top:4px}
.intro-dyr span{width:46px;height:46px;border-radius:50%;background:var(--f);overflow:hidden;opacity:0;display:grid}
.intro-dyr img{width:100%;height:100%;object-fit:contain}
.intro.klar .intro-ikon{animation:ikon-inn 620ms cubic-bezier(.3,1.4,.5,1) both}
.intro.klar .intro-ord span{animation:bokstav-inn 420ms cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(340ms + var(--i) * 46ms)}
.intro.klar .intro-dyr span{animation:dyr-inn 460ms cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(980ms + var(--i) * 80ms)}
@keyframes ikon-inn{0%{opacity:0;transform:scale(.4) rotate(-14deg)}60%{opacity:1;transform:scale(1.1) rotate(4deg)}80%{transform:scale(.96) rotate(-2deg)}100%{opacity:1;transform:none}}
@keyframes bokstav-inn{0%{opacity:0;transform:translateY(.55em) scale(.5)}60%{opacity:1;transform:translateY(-.14em) scale(1.1)}82%{transform:translateY(.04em) scale(.97)}100%{opacity:1;transform:none}}
@keyframes dyr-inn{0%{opacity:0;transform:translateY(18px) scale(.3)}60%{opacity:1;transform:translateY(-6px) scale(1.12)}100%{opacity:1;transform:none}}
@keyframes kom-inn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
body.inn .logg-kort{animation:kom-inn 460ms cubic-bezier(.2,.8,.3,1) both}

/* ── Innlogging: lite kort, følger lys og mørk modus ── */
.logg-inn{min-height:100dvh;display:grid;place-items:center;align-content:center;gap:18px;padding:calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 24px)}
.logg-kort{width:min(400px,100%);background:var(--flate);border:1px solid var(--linje);border-radius:var(--r-xl);box-shadow:var(--skygge-2);padding:28px 24px 24px;display:grid;gap:12px;text-align:center}
.logg-dyr{display:flex;justify-content:center;margin:-56px 0 4px}
.logg-dyr span{width:56px;height:56px;border-radius:50%;background:var(--f);overflow:hidden;margin-left:-10px;box-shadow:0 0 0 4px var(--flate);display:grid;animation:hoppe 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
.logg-dyr span:first-child{margin-left:0}
.logg-dyr img{width:100%;height:100%;object-fit:contain}
@keyframes hoppe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.logg-kort h1{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.logg-kort .under{color:var(--dempet);font-weight:550;font-size:15px;max-width:30ch;margin:0 auto 8px;text-wrap:balance}
.logg-kort .knapp.lys svg{width:20px;height:20px}
.logg-kort .eller{display:flex;align-items:center;gap:12px;color:var(--dempet);font-size:13px;font-weight:700;margin:2px 0}
.logg-kort .eller::before,.logg-kort .eller::after{content:"";flex:1;height:1px;background:var(--linje-2)}
.logg-kort .melding{font-size:14px;font-weight:600;color:var(--dempet);min-height:20px}
.logg-kort .melding.feil{color:var(--fare)}
.logg-kort .melding:empty{display:none}
.logg-kort .melding b{color:var(--blekk)}
.logg-fot{color:var(--dempet);font-size:13px;font-weight:600;text-align:center;max-width:36ch;text-wrap:balance}
.kodefelt{letter-spacing:.5em;text-align:center;font-size:22px !important;font-weight:800 !important}
@media (prefers-reduced-motion:reduce){.logg-dyr span{animation:none}body.inn .logg-kort{animation:none}}

/* ── Varsel ── */
#toast{position:fixed;z-index:70;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 96px);transform:translate(-50%,16px);opacity:0;
  display:flex;align-items:center;gap:8px;background:var(--blekk);color:var(--grunn);padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--skygge-3);transition:opacity .25s,transform .3s;pointer-events:none;max-width:calc(100vw - 32px)}
#toast svg{width:18px;height:18px;flex:none}
#toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.har-komponist #toast{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 160px)}
#toast.vis{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){#toast{left:calc(50% + 46px);bottom:110px}body.har-komponist #toast{bottom:150px}}
.lasting{display:grid;place-items:center;min-height:100dvh}
.lasting .prikk{width:14px;height:14px;border-radius:50%;background:var(--blekk);animation:puls 1s ease-in-out infinite}
@keyframes puls{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1);opacity:1}}
.visning{animation:visning .3s cubic-bezier(.2,.8,.2,1)}
@keyframes visning{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Oppgaver (Figma: Stjernemerke, Oppgave, Oppgavebrikke, Ukestatus, Stjernevelger, Ukedager) ── */
svg.i.fylt{fill:currentColor;stroke:none}
.stjernemerke{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 9px 0 7px;border-radius:999px;background:var(--sitron);color:var(--sitron-b);font-size:12.5px;font-weight:800;flex:none}
.stjernemerke svg{width:13px;height:13px}
.oppgave{display:flex;align-items:center;gap:12px;padding:8px 4px;min-height:62px;border-bottom:1px solid var(--linje)}
.oppgave.ny{animation:inn .4s cubic-bezier(.2,.8,.2,1)}
.oppgave .boks{width:30px;height:30px;border-radius:9px;border:2.5px solid var(--linje-2);display:grid;place-items:center;flex:none;transition:background .25s,border-color .25s}
.oppgave .boks svg{width:16px;height:16px;stroke:#fff;stroke-width:3.2;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.oppgave.gjort .boks{background:var(--ok);border-color:var(--ok)}
.oppgave.gjort .boks svg{opacity:1;transform:none}
.oppgave .flis{width:38px;height:38px;border-radius:12px;background:var(--flate-2);display:grid;place-items:center;font-size:19px;flex:none}
.oppgave.gjort .flis{opacity:.55}
.oppgave .tekst{flex:1;min-width:0;font-weight:650;font-size:16.5px;cursor:pointer;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.oppgave .tekst small{display:block;font-size:12.5px;font-weight:650;color:var(--dempet);margin-top:1px}
.oppgave.gjort .tekst > span{color:var(--dempet)}
.oppgave .avatarer .avatar{width:26px;height:26px;margin-left:-7px;box-shadow:0 0 0 2px var(--grunn)}
.oppgave .avatarer .avatar:first-child{margin-left:0}
.ukestatus-kort{padding:6px 16px}
.ukestatus{display:flex;align-items:center;gap:12px;padding:8px 0}
.ukestatus > .avatar{width:40px;height:40px;flex:none}
.ukestatus .midt{flex:1;min-width:0;display:grid;gap:6px}
.ukestatus .rad{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ukestatus .rad b{font-weight:650}
.ukestatus .rad small{color:var(--dempet);font-weight:650;font-size:12.5px;white-space:nowrap}
.spor{display:block;height:8px;border-radius:4px;background:var(--flate-2);overflow:hidden}
.spor i{display:block;height:100%;border-radius:4px;background:var(--sitron-p);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.oppgavebrikker{display:flex;flex-wrap:wrap;gap:8px;padding:4px}
.oppgavebrikke{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 8px;border-radius:999px;background:var(--flate);border:1.5px solid var(--linje-2);font-weight:650;font-size:14px;color:var(--blekk);transition:transform .15s,background .2s}
.oppgavebrikke:active{transform:scale(.96)}
.oppgavebrikke .flis{width:28px;height:28px;border-radius:50%;background:var(--flate-2);display:grid;place-items:center;font-size:15px;flex:none}
.oppgavebrikke .flis.ok{background:var(--ok);color:#fff}
.oppgavebrikke .flis.ok svg{width:16px;height:16px;stroke-width:3}
.oppgavebrikke.gjort{background:var(--flate-2);border-color:transparent;color:var(--dempet)}
.oppgavebrikke small{color:var(--dempet);font-weight:700}
.oppgavebrikke .avatar.s{width:22px;height:22px}
.oppgave-kort{padding:8px}
.ikonvalg,.brikkevalg,.hvem-valg{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ikonvalg .brikke{font-size:18px;padding:0 10px}
.ikonvalg .emojifelt{width:56px;min-height:36px;height:36px;font-size:18px;border-radius:999px}
.ukedagvelger{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ukedagvelger .brikke{justify-content:center;padding:0}
.stjernevelger{display:flex;gap:4px}
.stjernevelger button{width:42px;height:42px;display:grid;place-items:center;color:var(--linje-2);border-radius:50%;transition:transform .15s}
.stjernevelger button:active{transform:scale(.88)}
.stjernevelger button.pa{color:var(--sitron-p)}
.stjernevelger svg{width:30px;height:30px}
.hvem-valg .person{border-radius:50%;padding:0;border:3px solid transparent;opacity:.45;transition:opacity .2s,border-color .2s}
.hvem-valg .person.valgt{opacity:1;border-color:var(--blekk)}
.hvem-valg .person .avatar{width:44px;height:44px;display:grid}
.innst-rad.flat{padding:4px 0;border:0;min-height:auto}
.hvem-velger{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.hvem-velger button{display:grid;justify-items:center;gap:6px;padding:10px 4px;border-radius:var(--r-m);font-weight:650;font-size:13px;color:var(--blekk-2);transition:background .2s}
.hvem-velger button:active{background:var(--flate-2)}
.hvem-velger button.valgt{background:var(--flate-2)}
.hvem-velger button.valgt .avatar{box-shadow:0 0 0 3px var(--ok)}

/* ── Mengde og enhet (Figma: Vare-ark) ── */
.mengde-rad{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;background:var(--flate);border:1px solid var(--linje-2);border-radius:24px;padding:6px;box-shadow:var(--skygge-2)}
.mengde-rad::-webkit-scrollbar{display:none}
.mengde-rad[hidden]{display:none}
.stepper{display:flex;align-items:center;gap:2px;flex:none;background:var(--flate-2);border-radius:999px;padding:2px}
.stepper button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--blekk)}
.stepper button:active{background:var(--linje)}
.stepper button svg{width:16px;height:16px}
.stepper .felt{width:68px;min-height:36px;height:36px;padding:0 4px;text-align:center;border:0;background:transparent;font-weight:750;border-radius:0;box-shadow:none}
.enhetvalg{display:flex;flex-wrap:wrap;gap:6px}
.enhetvalg .brikke{height:36px;padding:0 13px}
.mengde-ark{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ── Lister på forsiden ── */
.lister-kort{padding:4px 16px 6px}
.listeoversikt{display:grid}
.listerad{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linje);text-align:left;width:100%;color:var(--blekk)}
.listerad .ikon{width:36px;height:36px;border-radius:12px;background:var(--flate-2);display:grid;place-items:center;font-size:18px;flex:none}
.listerad b{flex:1;font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listerad small{color:var(--blekk-2);font-weight:750;font-size:13.5px;white-space:nowrap}
.listerad small.uten{color:var(--dempet);font-weight:600}
.listerad svg{width:18px;height:18px;flex:none}
.hurtigfelt{padding:10px 0 6px;display:grid;gap:8px}
.hurtig-lister{display:flex;gap:6px;flex-wrap:wrap}
.hurtig-lister .brikke{height:36px;padding:0 12px;font-size:13px}
.hurtig-rad{display:flex;gap:6px;align-items:center}
.hurtig-rad .felt{min-height:44px;border-radius:22px;padding:0 16px;font-size:15px}
.hurtig-rad .ikonknapp{width:44px;height:44px}

/* ── Lys/mørk-knapp nederst i sidemenyen ── */
#nav .tema-knapp{display:none}
@media (min-width:900px){
  #nav .tema-knapp{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--skinne-tekst);transition:color .2s,background .2s;flex:none}
  #nav .tema-knapp:hover{color:#fff;background:rgba(255,255,255,.08)}
  #nav .tema-knapp svg{width:21px;height:21px}
}
.segment.liten{padding:3px}
.segment.liten button{height:36px;padding:0 12px;font-size:13px}

/* ── Finpuss: større trykkflater uten å endre utseendet ── */
.oppgave .boks,.rund-boks,.vare .slett,.innst-rad .slett,.ikonknapp.s{position:relative}
.oppgave .boks::after,.rund-boks::after,.vare .slett::after,.innst-rad .slett::after,.ikonknapp.s::after{content:"";position:absolute;inset:-8px}
/* Nettleserflatene følger paletten */
::selection{background:var(--sitron);color:var(--sitron-b)}
input,textarea{caret-color:var(--aksent-sterk)}
/* Oppgaver på forsiden: «+ 3 til» */
.oppgavebrikke.flere{color:var(--dempet);text-decoration:none;padding:0 14px;border-style:dashed}
/* Oppgaver på nettbrett: stjernene til venstre, oppgavene til høyre */
@media (min-width:900px){
  .innhold.oppgaver-side{max-width:calc(1040px + var(--rail-b))}
  .oppgave-oppsett{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:0 36px;align-items:start}
  .oppgave-oppsett .stjerne-kolonne{order:-1}
}
/* Ark for oppgave: luft over hver gruppe, personene på én linje */
.oppgave-skjema{display:grid;gap:10px}
.oppgave-skjema > .etikett{margin-top:12px}
.oppgave-skjema > .etikett:first-child{margin-top:0}
.hvem-valg{gap:6px}
.hvem-valg .person .avatar{width:40px;height:40px}
.mengde-ark + .etikett,.katvalg + .etikett{margin-top:10px}

/* ── Poeng, gjentakbare oppgaver, kategorier, toppliste og ukeoversikt ── */
.oppgave .teller{position:relative;min-width:34px;height:26px;padding:0 8px;border-radius:999px;background:var(--flate-2);color:var(--blekk-2);font-size:12.5px;font-weight:800;flex:none}
.oppgave .teller::after{content:"";position:absolute;inset:-9px -4px}
.oppgave .teller:active{background:var(--linje-2)}
.kat-hode{display:flex;align-items:center;gap:8px;margin:16px 0 2px;font-size:13px;font-weight:750;color:var(--dempet);letter-spacing:.01em}
.kat-hode span{font-size:15px}
.oppgaver > .kat-hode:first-child,.kat-gruppe:first-child .kat-hode{margin-top:4px}
.kat-gruppe + .kat-gruppe{margin-top:8px}
.toppliste{padding:4px 16px}
.topprad{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--linje)}
.topprad:last-child{border-bottom:0}
.topprad .plass{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--flate-2);color:var(--blekk-2);flex:none}
.topprad.leder .plass{background:var(--blekk);color:var(--grunn)}
.topprad .avatar{width:36px;height:36px;flex:none}
.topprad .midt{flex:1;min-width:0;display:grid}
.topprad .midt b{font-weight:700;display:flex;align-items:center;gap:6px}
.topprad .midt small{color:var(--dempet);font-weight:650;font-size:12.5px}
.topprad .krone{display:inline-grid;color:var(--sitron-p)}
.topprad .krone svg{width:15px;height:15px}
.topprad.null{opacity:.6}
.poengvelger{display:flex;align-items:center;gap:12px}
.poengvelger .stepper b{min-width:44px;text-align:center;font-size:18px;font-weight:800}
.ark-topp{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ark-topp .lenke{font-size:14px;font-weight:700;color:var(--dempet);text-decoration:none}
.vis-flere{display:grid}
button.oppgavebrikke.flere{background:transparent;color:var(--blekk-2);font-weight:700}
.uke-bla{display:flex;align-items:center;gap:12px;margin:14px 0 8px}
.uke-bla > div{flex:1;min-width:0;text-align:center;display:grid;gap:2px}
.uke-bla b{font-weight:750}
.uke-bla small{color:var(--dempet);font-weight:600;font-size:13px;text-wrap:balance}
.uke-bla .ikonknapp:disabled{opacity:.35}
.ukeoversikt{display:grid;gap:12px;margin-top:10px}
.ukeperson{padding:14px 16px}
.ukeperson .hode{display:flex;align-items:center;gap:12px}
.ukeperson .hode > div{flex:1;min-width:0;display:grid}
.ukeperson .hode b{font-weight:700}
.ukeperson .hode small{color:var(--dempet);font-weight:650;font-size:12.5px}
.ukeperson ul{list-style:none;margin:10px 0 0;padding:0;display:grid}
.ukeperson li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linje);font-size:14.5px;font-weight:600}
.ukeperson li .em{width:26px;text-align:center}
.ukeperson li .navn{flex:1;min-width:0}
.ukeperson li .ganger{color:var(--dempet);font-weight:700;font-variant-numeric:tabular-nums}
.ukeperson li .p{min-width:40px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.ukeperson > p{margin-top:8px}
.topp > span:empty{width:44px}
@media (min-width:900px){.ukeoversikt{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.gjort-etikett{margin:16px 0 0}
/* Tavla: oppgavene som kompakte fliser i to kolonner */
.tavle .oppgavebrikker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tavle .oppgavebrikke{border-radius:16px;min-height:50px;padding:6px 10px 6px 6px;font-size:13px;line-height:1.2;text-align:left}
.tavle .oppgavebrikke .tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;min-width:0}
.tavle .oppgavebrikke .avatar.s{flex:none}
.tavle .oppgavebrikke.flere{grid-column:1/-1;min-height:40px;justify-content:center}
/* Belønning ved avkrysning: haken og poengmerket spretter (raden selv står i ro) */
.oppgave.ny{animation:none}
.oppgave.ny.gjort .boks,.oppgave.ny .teller{animation:hake-pop .45s cubic-bezier(.3,1.6,.5,1)}
.oppgave.ny .stjernemerke{animation:poeng-pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hake-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
@keyframes poeng-pop{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-6deg);background:var(--sitron-p);color:var(--blekk)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.oppgave.ny .boks,.oppgave.ny .teller,.oppgave.ny .stjernemerke{animation:none}}
/* Smal telefon: mer plass til oppgavenavnet */
@media (max-width:420px){
  .oppgave{gap:10px}
  .oppgave .flis{width:34px;height:34px;border-radius:11px;font-size:17px}
  .oppgave .tekst{font-size:15.5px}
  .uke-bla b{font-size:15px}
}

/* ── Ukepenger ── */
.lommebok{padding:14px 16px;margin-bottom:12px}
.lommebok .hode{display:flex;align-items:center;gap:12px}
.lommebok .hode > div{flex:1;min-width:0;display:grid}
.lommebok .hode b{font-weight:700}
.lommebok .hode small{color:var(--dempet);font-weight:650;font-size:12.5px}
.lommebok .belop{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--dempet)}
.lommebok .belop.ok{color:var(--blekk)}
ul.krav{list-style:none;margin:10px 0 0;padding:0;display:grid}
ul.krav li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--linje);font-size:14px;font-weight:600}
ul.krav .em{width:24px;text-align:center;flex:none}
ul.krav .navn{flex:1;min-width:0}
ul.krav .tall{font-weight:800;font-variant-numeric:tabular-nums;color:var(--dempet)}
ul.krav .hake{width:22px;height:22px;flex:none;border-radius:7px;border:2px solid var(--linje-2);display:grid;place-items:center}
ul.krav .hake svg{width:14px;height:14px}
ul.krav li.ok .tall{color:var(--blekk)}
ul.krav li.ok .hake{background:var(--blekk);border-color:var(--blekk);color:var(--grunn)}
.regnestykke{margin-top:8px;font-size:13px;font-weight:650;color:var(--dempet)}
.utbetaling{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:12px;padding:10px 12px;border-radius:16px;background:var(--flate-2)}
.utbetaling > div{flex:1 1 170px;min-width:0;display:grid;gap:1px}
.utbetaling .knapp{margin-left:auto}
.utbetaling b{font-weight:750;font-size:14.5px}
.utbetaling small{font-size:12.5px;color:var(--dempet);font-weight:600}
.utbetaling .mynt{width:34px;height:34px;flex:none;border-radius:50%;background:var(--sitron);color:var(--sitron-b);display:grid;place-items:center;font-size:12px;font-weight:800}
.utbetaling.na{background:color-mix(in srgb,var(--sitron) 55%,var(--flate))}
.utbetaling.betalt > svg{width:22px;height:22px;flex:none;color:var(--mynte-b)}
.uke-lommebok{display:grid;gap:1px;margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--flate-2)}
.uke-lommebok b{font-weight:750}
.uke-lommebok small{font-size:12.5px;color:var(--dempet);font-weight:600}
.krav-liste{display:grid;gap:6px}
.krav-rad{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:16px;background:var(--flate-2);font-weight:650;font-size:14.5px}
.krav-rad .navn{flex:1;min-width:0}
.krav-rad .stepper{background:var(--flate)}
.krav-rad .stepper button{width:32px;height:32px}
.krav-rad .stepper b{min-width:30px;text-align:center;font-weight:800}
.andre-dager{display:grid;background:var(--flate);border:1px solid var(--linje);border-radius:var(--r-l);overflow:hidden}
.andre-rad{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;border-top:1px solid var(--linje);color:var(--blekk)}
.andre-rad:first-child{border-top:0}
.andre-rad:active{background:var(--flate-2)}
.andre-rad .em{width:28px;text-align:center;font-size:20px;flex:none}
.andre-rad .midt{flex:1;min-width:0;display:grid;gap:1px}
.andre-rad b{font-weight:700} .andre-rad small{font-size:12.5px;color:var(--dempet);font-weight:600}
.andre-rad svg{width:16px;height:16px;color:var(--dempet);flex:none}

/* Ukas faste på tavla */
.faste-kort{padding:4px 14px}
.fast-rad{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--linje)}
.fast-rad:first-child{border-top:0}
.fast-rad .midt{flex:1;min-width:0;display:grid;gap:2px}
.fast-rad .topp-linje{display:flex;align-items:center;gap:8px}
.fast-rad b{font-weight:750;font-size:15px}
.fast-rad small{font-size:12.5px;color:var(--dempet);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fast-rad .prikker{display:flex;flex-wrap:wrap;gap:3px}
.fast-rad .prikker i{width:8px;height:8px;border-radius:50%;background:var(--linje-2)}
.fast-rad .prikker i.ja{background:var(--mynte-p)}
.fast-rad .belop{font-weight:800;font-variant-numeric:tabular-nums;color:var(--dempet);font-size:15px}
.fast-rad .belop.ok{color:var(--blekk)}
/* Kortene for ukas faste: hele kortet åpner oversikten */
.lommebok[data-a]{cursor:pointer;transition:transform .15s}
.lommebok[data-a]:active{transform:scale(.99)}
.fremdrift{height:8px;border-radius:4px;background:var(--flate-2);overflow:hidden;margin-top:12px}
.fremdrift i{display:block;height:100%;border-radius:4px;background:var(--mynte-p);transition:width .4s cubic-bezier(.2,.8,.2,1)}
/* Utbrettet kort: høyden animeres med grid-rader (0fr → 1fr) */
.faste-detaljer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1)}
.faste-detaljer > div{overflow:hidden;min-height:0}
.lommebok.apen .faste-detaljer{grid-template-rows:1fr}
.lommebok.apen .faste-detaljer > div{padding-top:6px}
.lommebok .pil{display:grid;transition:transform .25s}
.lommebok .pil svg{width:18px;height:18px}
.lommebok.apen .pil{transform:rotate(90deg)}
.lommebok .faste-detaljer .lenkeknapp{margin-top:8px}
.lommebok .faste-detaljer .etikett{margin-top:12px}
.lommebok ul.krav li[data-a]{cursor:pointer}
.fast-rad .fremdrift{margin-top:4px;height:6px}

/* ── Finpuss: overskrifter, skjermlesere og brede skjermer ── */
h1,h2,h3{text-wrap:balance}
.kun-skjermleser{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width:1280px){
  /* Sider med rutenett får bruke bredden; lesesider (lister, chat) holder seg smale. */
  .innhold.grupper-side,.innhold.uke-side,.innhold.mer-side{max-width:calc(1120px + var(--rail-b))}
  .mer-oppsett{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;align-items:start}
}
@media (min-width:1600px){
  .innhold.uke-side{max-width:calc(1400px + var(--rail-b))}
  .uke-side .ukeoversikt{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── Navigasjon på telefon: sju knapper får plass på en iPhone ── */
@media (max-width:899px){
  #nav{gap:2px;padding:7px}
  #nav a{width:46px;height:46px}
  #nav a svg.i{width:21px;height:21px}
}

/* ── Handlelister: mest brukte og grupper ── */
.hjelp{font-size:13.5px;color:var(--dempet);font-weight:600;margin:-4px 0 12px}
.hjelp.feil{color:var(--fare)}
.brikkesky{display:flex;flex-wrap:wrap;gap:8px}
.brikkesky .katmerke{height:40px;padding:0 16px 0 13px;font-size:14px;cursor:pointer;transition:transform .15s,filter .15s}
.brikkesky .katmerke:active{transform:scale(.95)}
@media (hover:hover){.brikkesky .katmerke:hover{filter:brightness(.96)}}
.gruppe-brett{padding:8px 10px 8px 8px;margin-bottom:10px}
.gruppe-brett .hode{display:flex;align-items:center;gap:8px}
.gruppe-veksle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:4px;border-radius:16px;text-align:left;min-height:52px}
.gruppe-veksle .emoji{width:40px;height:40px;border-radius:14px;background:var(--sitron);display:grid;place-items:center;font-size:21px;flex:none}
.gruppe-veksle b{font-size:16px;font-weight:750;line-height:1.2;min-width:0;overflow-wrap:break-word}
.gruppe-veksle .pil{display:grid;transition:transform .25s;flex:none}
.gruppe-veksle .pil{margin-left:-4px}
.gruppe-veksle .pil svg{width:16px;height:16px}
/* Smal telefon: navnet får plassen; hele navnet er fortsatt knappen som bretter ut. */
@media (max-width:419px){.gruppe-veksle .pil{display:none}}
.gruppe-brett.apen .pil{transform:rotate(90deg)}
.gruppe-brett .knapp.liten{flex:none;padding:0 13px;font-size:13.5px}
.gruppe-brett.apen .faste-detaljer{grid-template-rows:1fr}
.gruppe-brett .faste-detaljer > div{padding:0 6px}
.gruppe-brett.apen .faste-detaljer > div{padding-top:8px;padding-bottom:4px}
.gruppe-brett .hjelp{margin:0 0 10px}
.gruppe-brett .lenkeknapp{width:auto;display:inline-block;padding:12px 4px 6px;text-align:left}
.grupper .seksjon-hode{margin-bottom:12px}
/* Telefon og stående nettbrett: varene, mest brukte, gruppene og til slutt det som er kjøpt. */
.liste-oppsett{display:flex;flex-direction:column}
.liste-kolonne{display:contents}
.liste-oppsett .gruppe-kolonne{order:1}
.liste-oppsett .kjopt{order:2}
@media (min-width:1100px){
  .liste-kolonne{display:block}
  .innhold.liste-med-grupper{max-width:calc(1180px + var(--rail-b))}
  .liste-oppsett.med-grupper{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:0 36px;align-items:start}
  .gruppe-kolonne{position:sticky;top:20px;padding-top:4px}
  .gruppe-kolonne .seksjon{margin-top:18px}
}

/* ── Oppskrifter ── */
.oppskrift-ny{padding:16px 16px 4px;display:grid;gap:8px}
.oppskrift-ny .to-felt .knapp{flex:none}
.oppskrift-ny .hjelp{margin:2px 2px 10px}
.oppskrift-filter{margin-top:18px;display:grid;gap:12px}
.oppskrift-treff{margin-top:22px}
.oppskrift-treff > .seksjon:first-child{margin-top:4px}
.sokefelt{min-height:46px;border-radius:23px}
.oppskriftgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.oppskriftgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}}
.oppskriftkort{display:flex;flex-direction:column;background:var(--flate);border:1px solid var(--linje);border-radius:22px;overflow:hidden;text-decoration:none;color:var(--blekk);box-shadow:var(--skygge-1);transition:transform .15s,box-shadow .2s}
.oppskriftkort:active{transform:scale(.98)}
@media (hover:hover){.oppskriftkort:hover{box-shadow:var(--skygge-2)}}
.oppskriftkort .bilde{display:block;aspect-ratio:4/3;background:var(--flate-2);overflow:hidden}
.oppskriftkort .bilde img,.oppskriftkort .bilde .uten-bilde{width:100%;height:100%;object-fit:cover;display:grid;place-items:center;font-size:40px}
.oppskriftkort .tekst{display:grid;gap:2px;padding:10px 12px 12px}
.oppskriftkort b{font-size:15px;font-weight:750;line-height:1.25}
.oppskriftkort small{font-size:12.5px;color:var(--dempet);font-weight:600}
.innhold.oppskrifter-side,.innhold.oppskrift-side{max-width:calc(1120px + var(--rail-b))}
@media (max-width:899px){.innhold.oppskrifter-side,.innhold.oppskrift-side{max-width:760px}}

.oppskrift-hode{display:grid;gap:18px}
.oppskrift .hero{border-radius:var(--r-l);overflow:hidden;background:var(--flate-2);aspect-ratio:4/3;margin:0 -2px}
.oppskrift .hero-bilde{width:100%;height:100%;object-fit:cover;display:grid;place-items:center;font-size:72px}
.hode-tekst{display:grid;gap:12px;align-content:start}
.hode-tekst .tittel-l{font-size:clamp(26px,6vw,34px)}
.hode-tekst .ingress{margin:0;color:var(--blekk-2);font-weight:550}
.fakta{display:flex;flex-wrap:wrap;gap:8px}
.fakta span{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;background:var(--flate-2);font-size:14px;font-weight:700}
.fakta svg.i{width:17px;height:17px;color:var(--dempet)}
.kat-velger{max-width:340px}
.hode-tekst .etikett{margin-bottom:-6px}
.handlinger{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:639px){.handlinger .knapp{width:100%}}
.oppskrift-innhold{display:grid;gap:18px;margin-top:26px}
.ingredienser{padding:16px 18px}
.ingredienser ul{margin-top:10px;display:grid}
.ingredienser li{padding:9px 0 9px 18px;border-top:1px solid var(--linje);position:relative;font-weight:550}
.ingredienser li:first-child{border-top:0}
.ingredienser li::before{content:"";position:absolute;left:2px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--sand-p)}
.fremgang h3{font-size:17px;font-weight:750;margin:16px 0 6px}
.fremgang ol{display:grid;gap:14px;margin-top:12px;list-style:none}
.fremgang li{display:flex;gap:14px;align-items:flex-start}
.fremgang .nr{width:32px;height:32px;border-radius:50%;background:var(--blekk);color:var(--grunn);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;font-variant-numeric:tabular-nums}
.fremgang p{padding-top:4px;line-height:1.55;font-size:16.5px}
.kilde{margin-top:28px;font-size:14px;color:var(--dempet);font-weight:600}
.kilde a{color:var(--blekk)}
@media (min-width:900px){
  .oppskrift-hode{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start}
  .oppskrift-innhold{grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:32px;align-items:start}
  .ingredienser{position:sticky;top:20px}
}
.ingrediens-liste{display:grid;gap:6px}
.ingrediens-valg{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--flate-2);cursor:pointer}
.ingrediens-valg input{position:absolute;opacity:0;pointer-events:none}
.ingrediens-valg .boks{width:26px;height:26px;border-radius:8px;border:2.5px solid var(--linje-2);display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s}
.ingrediens-valg .boks svg{width:15px;height:15px;stroke:var(--grunn);stroke-width:3.2;opacity:0}
.ingrediens-valg.valgt .boks{background:var(--ok);border-color:var(--ok)}
.ingrediens-valg.valgt .boks svg{opacity:1}
.ingrediens-valg input:focus-visible + .boks{box-shadow:0 0 0 3px var(--linje-2)}
.ingrediens-valg .midt{flex:1;min-width:0;display:grid;gap:1px}
.ingrediens-valg b{font-weight:700}
.ingrediens-valg small{font-size:12.5px;color:var(--dempet);font-weight:600}
.ingrediens-valg:not(.valgt) b{color:var(--dempet)}

/* ── Forsiden: ukas faste for barna, side om side ── */
.barnekort-rad{display:grid;grid-template-columns:repeat(var(--antall,3),minmax(0,1fr));gap:10px}
.barnekort{display:grid;justify-items:center;gap:6px;padding:14px 8px 12px;border-radius:var(--r-kort,22px);background:var(--flate);border:1px solid var(--linje);box-shadow:var(--skygge-1);color:var(--blekk);text-align:center;min-width:0;transition:transform .15s,box-shadow .2s,background .2s}
.barnekort:active{transform:scale(.97)}
.barnekort b{font-weight:750;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barnekort small{font-size:12.5px;font-weight:650;color:var(--dempet);white-space:nowrap}
.barnekort .fremdrift{width:100%;margin-top:2px;height:6px}
.barnekort.apen{background:var(--f);border-color:transparent;box-shadow:var(--skygge-2)}
.barnekort.apen small{color:var(--fb)}
.barnekort.ferdig .fremdrift i{background:var(--ok)}
.faste-panel{margin-top:10px;padding:12px 14px 6px;animation:inn .3s cubic-bezier(.2,.8,.2,1)}
.faste-panel .hode{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 2px 6px}
.faste-panel .hode b{font-weight:750}
.faste-panel .hode small{font-size:12.5px;color:var(--dempet);font-weight:650;text-align:right}
.krav-kryss{display:grid}
.krav-kryss button{width:100%;display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 2px;border-top:1px solid var(--linje);text-align:left;color:var(--blekk);font-weight:650;font-size:15.5px}
.krav-kryss li:first-child button{border-top:0}
.krav-kryss .boks{width:28px;height:28px;border-radius:8px;border:2.5px solid var(--linje-2);display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s}
.krav-kryss .boks svg{width:15px;height:15px;stroke:#fff;stroke-width:3.2;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.krav-kryss .ok .boks{background:var(--ok);border-color:var(--ok)}
.krav-kryss .ok .boks svg{opacity:1;transform:none}
.krav-kryss .ok .navn{color:var(--dempet);text-decoration:line-through}
.krav-kryss .em{width:24px;text-align:center;font-size:19px;flex:none}
.krav-kryss .navn{flex:1;min-width:0}
.krav-kryss .tall{font-size:13px;font-weight:750;color:var(--dempet);font-variant-numeric:tabular-nums}

/* ── Forsiden: Husk med eget skrivefelt ── */
.husk-kort .husk-hurtig{margin:6px 0 8px}
.husk-kort .mini-rad + .husk-hurtig{margin-top:8px}

/* ── Garasjeporten: dra knappen opp for å åpne, ned for å lukke (som i iSmartGate-appen) ── */
.garasje{display:flex;align-items:center;gap:16px;padding:14px 14px 14px 20px}
.garasje .tekst{flex:1;min-width:0;display:grid;gap:3px}
.garasje .tekst b{font-size:22px;font-weight:800;letter-spacing:-.01em}
.garasje .tekst small{font-size:13.5px;font-weight:600;color:var(--dempet)}
.garasje.opened .tekst b{color:var(--ok)}
.sveip{--H:150px;--K:58px;--P:5px;--fram:0;position:relative;flex:none;width:calc(var(--K) + 2 * var(--P));height:var(--H);padding:var(--P);border-radius:999px;background:var(--flate-2);border:1px solid var(--linje);touch-action:none}
.sveip .maal{position:absolute;left:0;right:0;display:grid;justify-content:center;justify-items:center;gap:2px;color:var(--svak);opacity:calc(1 - var(--fram) * .6);pointer-events:none}
.sveip .maal svg{width:22px;height:22px}
.sveip .maal.topp{top:16px} .sveip .maal.bunn{bottom:16px}
.sveip .maal svg + svg{width:18px;height:18px}
.knott{position:absolute;left:calc(var(--P) - 1px);bottom:calc(var(--P) - 1px);width:var(--K);height:var(--K);border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--fare);box-shadow:0 6px 16px -6px rgba(0,0,0,.45);cursor:grab;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s;touch-action:none}
.knott svg{width:26px;height:26px;stroke-width:2.2}
.knott.drar{transition:none;cursor:grabbing}
.sveip.oppe .knott{background:var(--ok);transform:translateY(calc(-1 * (var(--H) - var(--K) - 2 * var(--P) - 2px)))}
.knott:disabled{cursor:default}
.sveip.beveger .knott{background:var(--svak);animation:puls 1.2s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 8px var(--linje)}}
.knott:focus-visible{outline:3px solid var(--blekk-2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.knott,.sveip.beveger .knott{transition:none;animation:none}}
.tavle .sveip{--H:132px;--K:52px}
@media (max-width:899px){.sveip{--H:132px;--K:54px}}

/* ── Styring: garasje, musikk og lys ── */
@media (max-width:899px){#nav a[href="#/mer"]{display:none}} /* Mer nås fra avataren på forsiden */
.mer-lenke{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--flate);border:1px solid var(--linje);color:var(--blekk)}
@media (min-width:900px){.mer-lenke{display:none}}
.innhold.styring-side{max-width:calc(1120px + var(--rail-b))}
@media (min-width:1100px){.styring-oppsett{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start}}
.ikke-koblet{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.ikke-koblet .stor{font-size:30px;line-height:1}
.ikke-koblet b{font-weight:750}
.ikke-koblet .hjelp{margin:4px 0 10px}
.koble-knapper{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.musikk{padding:16px;display:grid;gap:14px}
.musikk .na{display:flex;gap:14px;align-items:center}
.musikk .na img,.musikk .omslag{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none;background:var(--flate-2);display:grid;place-items:center;font-size:28px}
.musikk .midt{min-width:0;display:grid;gap:1px}
.musikk .midt small{font-size:12.5px;font-weight:650;color:var(--dempet)}
.musikk .midt b{font-size:18px;font-weight:750;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.musikk .midt span{color:var(--dempet);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kontroller{display:flex;justify-content:center;align-items:center;gap:18px}
.kontroller .ikonknapp{width:48px;height:48px}
.kontroller .ikonknapp.stor{width:62px;height:62px}
.kontroller .ikonknapp.stor svg{fill:currentColor;stroke:none}
.kontroller .ikonknapp:not(.stor) svg{width:20px;height:20px}
.glidebryter{display:flex;align-items:center;gap:12px;color:var(--dempet)}
.glidebryter svg{width:20px;height:20px}
.glidebryter b{min-width:44px;text-align:right;font-size:13.5px;font-weight:750;color:var(--blekk);font-variant-numeric:tabular-nums}
input[type="range"]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:32px;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--flate-2)}
input[type="range"]::-moz-range-track{height:8px;border-radius:4px;background:var(--flate-2)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--blekk);border:3px solid var(--flate);box-shadow:var(--skygge-1)}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blekk);border:3px solid var(--flate)}
input[type="range"]:focus-visible{outline:2px solid var(--blekk-2);outline-offset:2px;border-radius:8px}
.musikk .etikett{margin-bottom:-6px}
.musikk-sok{margin-top:2px}
.treffliste{display:grid;gap:2px;margin:0 -6px}
.treff{display:flex;align-items:center;gap:12px;padding:6px;border-radius:14px;text-align:left;color:var(--blekk)}
.treff:active{background:var(--flate-2)}
@media (hover:hover){.treff:hover{background:var(--flate-2)}}
.treff img,.treff .omslag{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--flate-2);display:grid;place-items:center}
.treff .midt{flex:1;min-width:0;display:grid}
.treff b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.treff small{font-size:12.5px;color:var(--dempet);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.treff > svg{width:18px;height:18px;color:var(--dempet);fill:currentColor;stroke:none}
.lysrom{display:grid;gap:10px}
@media (min-width:640px){.lysrom{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rom{padding:14px 16px;display:grid;gap:10px}
.rom .hode{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rom .hode b{font-weight:750;font-size:16.5px}
.rom.pa{background:color-mix(in srgb,var(--sitron) 45%,var(--flate))}
.rom:not(.pa) .glidebryter b{color:var(--dempet)}
.rom .brikke{height:34px;font-size:13.5px}
.styring-side .innst-rad .lenkeknapp{width:auto;flex:none;padding:10px 4px}

/* ── Navnet: Ajouro settes i Lexend ── */
:root{--font-navn:"Lexend",var(--font)}
.navn{font-family:var(--font-navn);font-weight:600;letter-spacing:.06em}
.intro-ord.navn{letter-spacing:.06em}
.logg-kort h1.navn{font-weight:600;letter-spacing:.06em;font-size:34px}

/* ── Mat: fanene Ukemeny og Oppskrifter ── */
.segment a{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:700;color:var(--dempet);text-decoration:none}
.segment a.aktiv{background:var(--flate);color:var(--blekk);box-shadow:var(--skygge-1)}
.mat-faner{margin:-2px 0 14px}
.innhold.mat-side{max-width:calc(1000px + var(--rail-b))}
@media (max-width:899px){.innhold.mat-side{max-width:760px}}
.ukemeny{display:grid;gap:10px}
@media (min-width:1100px){.ukemeny{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dag{padding:0;overflow:hidden}
.dag-hoved{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 12px;text-align:left;color:var(--blekk);min-height:72px}
.dag-hoved:active{background:var(--flate-2)}
.dag-navn{width:44px;flex:none;display:grid;justify-items:center;line-height:1.15}
.dag-navn b{font-size:15px;font-weight:800}
.dag-navn small{font-size:12px;font-weight:650;color:var(--dempet);white-space:nowrap}
.dag.idag .dag-navn b{color:var(--aksent-sterk)}
.dag.idag{border-color:color-mix(in srgb,var(--aksent) 45%,var(--linje))}
.dag.forbi:not(.idag){opacity:.72}
.tommel{width:52px;height:52px;border-radius:14px;overflow:hidden;flex:none;background:var(--flate-2);display:grid;place-items:center;font-size:22px}
.tommel img{width:100%;height:100%;object-fit:cover}
.dag.tom .tommel{color:var(--dempet);font-size:24px;font-weight:600}
.dag .midt{flex:1;min-width:0;display:grid;gap:1px}
.dag .midt b{font-size:16px;font-weight:750;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dag.tom .midt b{color:var(--dempet);font-weight:650}
.dag .midt small{font-size:12.5px;font-weight:600;color:var(--dempet)}
.dag.matkasse .tommel{background:var(--sand)}
.dag-ansvar{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 14px 10px 68px;border-top:1px solid var(--linje)}
.dag-ansvar .hvem{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650}
.dag-ansvar .hvem.apen{color:var(--dempet)}
.dag-ansvar .laget{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:650;color:var(--ok)}
.dag-ansvar .laget svg{width:16px;height:16px}
.dag-ansvar .knapp.liten{min-height:36px}
.ukemeny-handlinger{margin-top:16px}
.dag-ark .treffliste{max-height:min(38vh,320px);overflow-y:auto;margin:0}
.treff.valgt{background:var(--flate-2)}
.treff.valgt > svg{fill:none;stroke:var(--ok);color:var(--ok);width:20px;height:20px}
.treff > svg.i{fill:none}
.dag-ark .lenkeknapp{text-align:left;padding:8px 2px;display:inline-flex;gap:6px;align-items:center;width:auto}
.dag-ark .lenkeknapp svg{width:16px;height:16px}
.brikke.med-avatar{padding-left:4px;gap:6px}
.brikke.med-avatar .avatar{width:28px;height:28px}
a.middag-rad{text-decoration:none;color:inherit}
.middag-rad > .avatar{margin-left:auto}
/* Treff fra Matprat i Oppskrifter */
.matprat-treff{margin:4px 0 12px;display:grid;gap:10px}
.matprat-treff .seksjon-hode{margin:0}
button.oppskriftkort{text-align:left;font:inherit;padding:0}
.oppskriftkort .merke{margin-top:4px;font-size:12.5px;font-weight:750;color:var(--ok)}
.oppskriftkort.i-arkivet .merke{color:var(--dempet)}
.middag-rad{margin-left:0}
.middag-rad.tom{background:transparent;border:1.5px dashed var(--linje-2)} .middag-rad.tom b{color:var(--dempet)}

/* Ferdige avtaler grås ut, så det som gjenstår av dagen står tydelig fram */
.tl-rad.ferdig .tl-kort{opacity:1;background:var(--flate-2);color:var(--dempet)}
.tl-rad.ferdig .tl-kort h3{font-weight:650}
.tl-rad.ferdig .tl-kort p,.tl-rad.ferdig .tl-kort .tid{color:var(--svak)}
.tl-rad.ferdig .tl-kort .avatar{filter:grayscale(1);opacity:.6}
.tl-rad.ferdig .tl-tid{color:var(--svak)}
.tl-rad.ferdig .tl-ring{background:var(--svak);border-color:var(--svak)}
.k-egen{--k:var(--fp);--kf:var(--f)}
.katmerke.ny-kat{color:var(--dempet)}
.katmerke.ny-kat svg{width:15px;height:15px;margin-left:-2px}
.katmerke.med-x{padding-right:4px}
.katmerke.med-x button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--dempet)}
.katmerke.med-x button svg{width:14px;height:14px}
.katmerke.med-x button.sikker{background:var(--fare,#c0392b);color:#fff}
.egne-kategorier{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.ny-kat-skjema{display:flex;flex-direction:column;gap:12px;width:100%}
.ny-kat-skjema .fargevalg{display:flex;flex-wrap:wrap;gap:10px}
.ny-kat-skjema .farge{width:34px;height:34px;border-radius:50%;background:var(--fp);border:2px solid transparent;box-shadow:inset 0 0 0 3px var(--flate)}
.ny-kat-skjema .farge.valgt{border-color:var(--blekk)}
.ny-kat-skjema .to-knapper{display:flex;gap:8px}
.ny-kat-skjema .to-knapper .knapp{flex:1}
/* ── Aktiviteter i kalenderen ── */
.uke-kort.egen{cursor:pointer;text-align:left}
.uke-ny{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:14px;border:1.5px dashed var(--linje-2);color:var(--svak);font-size:13px;font-weight:700;opacity:.7;transition:opacity .2s,color .2s,border-color .2s}
.uke-ny svg{width:16px;height:16px}
.uke-ny:hover,.uke-ny:focus-visible{opacity:1;color:var(--blekk);border-color:var(--blekk-2)}
@media (hover:hover){.ukedag .uke-ny{opacity:0}.ukedag:hover .uke-ny,.ukedag .uke-ny:focus-visible,.ukedag .uke-kortliste:not(:has(.uke-kort)) .uke-ny{opacity:.7}}
.agenda-hode{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.agenda-hode .brikke{flex:none;gap:4px}
.agenda-hode .brikke svg{width:15px;height:15px}
.tl-rad[data-a],.tl-heldag .brikke[data-a]{cursor:pointer}
.malvalg{display:flex;flex-wrap:wrap;gap:8px}
.malvalg .mal{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:999px;background:var(--f);font-size:14.5px;font-weight:700;color:var(--blekk);text-align:left}
.malvalg .mal small{font-weight:650;color:var(--blekk-2);margin-left:4px}
.malvalg .mal .hvem{display:flex}
.malvalg .mal .hvem .avatar{width:24px;height:24px;margin-left:-6px;box-shadow:0 0 0 2px var(--f)}
.malvalg .mal .hvem .avatar:first-child{margin-left:0}
.malvalg .mal svg{width:14px;height:14px;color:var(--dempet)}
.malvalg .mal.rediger{box-shadow:inset 0 0 0 1.5px var(--fare)}
.aktivitet-ark .etikett.eller{margin-top:14px}
.aktivitet-ark .seksjon-hode{margin-top:4px}
.tidvalg{display:flex;align-items:center;gap:10px}
.tidvalg .felt{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}
.tidvalg span{color:var(--dempet);font-weight:700}
.aktivitet-ark .to-knapper{display:flex;gap:8px}
.aktivitet-ark .to-knapper .knapp{flex:1}
.knapp.fare-tekst{color:var(--fare)}
.feilmelding{color:var(--fare);font-weight:600}
/* Navnet på menypunktet ved hover i sidemenyen (PC) */
@media (min-width:900px) and (hover:hover){
  #nav [data-tips]::after{content:attr(data-tips);position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-4px,-50%);padding:7px 12px;border-radius:10px;background:var(--skinne);color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;box-shadow:var(--skygge-2,0 6px 20px rgba(0,0,0,.25)),inset 0 0 0 1px rgba(255,255,255,.09);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:40}
  #nav [data-tips]:hover::after,#nav [data-tips]:focus-visible::after{opacity:1;transform:translate(0,-50%);transition-delay:.25s}
  #nav .tema-knapp{position:relative}
}