:root{--bg:#f6f8f4;--surface:#fff;--panel:#edf3ec;--text:#22352b;--muted:#5d7062;--line:#dfe9df;--main:#346c59;--onmain:#fff;--subtle:#dcece3;--alert:#9b5339;--alertbg:#fbebe3;--shadow:0 10px 30px #234a2710;--font:16px;color-scheme:light}
[data-theme=sea]{--bg:#f3f8fb;--panel:#e6f1f7;--line:#d8e8ef;--main:#286c8b;--subtle:#d7eaf4}
[data-theme=sand]{--bg:#fbf8f3;--panel:#f5eee2;--line:#eee2d2;--main:#806040;--subtle:#f3e5d1}
[data-theme=lavender]{--bg:#faf8ff;--panel:#f0ecfa;--line:#e4ddf3;--main:#715899;--subtle:#ede5fb}
[data-dark=true]{--bg:#15211a;--surface:#1e2d24;--panel:#293b30;--text:#f0f5ef;--muted:#b8cabc;--line:#405646;--main:#b1e5c9;--onmain:#1b2c22;--subtle:#304b3b;--alert:#ffc6ac;--alertbg:#543b30;--shadow:none;color-scheme:dark}
/* Tema-specifika mörka färger. Salvia behåller den befintliga mörka paletten. */
[data-dark=true][data-theme=sea]{--bg:#121e26;--surface:#1b2b36;--panel:#243b4b;--text:#eff6fb;--muted:#b5ccdb;--line:#3f596b;--main:#a5d8f5;--onmain:#152b3b;--subtle:#29495e}
[data-dark=true][data-theme=sand]{--bg:#241d15;--surface:#30271f;--panel:#403429;--text:#faf3e8;--muted:#d2c3b2;--line:#5c4b3a;--main:#e8c498;--onmain:#332416;--subtle:#50402b}
[data-dark=true][data-theme=lavender]{--bg:#1e1829;--surface:#292136;--panel:#392e49;--text:#f6efff;--muted:#cbbddc;--line:#534163;--main:#d5b8f4;--onmain:#2c1d3b;--subtle:#49345e}
.view-help{display:grid;gap:6px}
[data-large=true]{--font:19px}
*{box-sizing:border-box}html{font-size:var(--font)}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #e6ab54;outline-offset:2px}h1,h2,h3,p{margin:0}h1{letter-spacing:-.045em;font-size:clamp(1.8rem,3vw,2.3rem)}h2{font-size:1.2rem;letter-spacing:-.03em}h3{font-size:1rem}small,.muted{color:var(--muted)}.small{font-size:.85rem}.eyebrow{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--main)}.sub{margin-top:7px;color:var(--muted)}.center-card{max-width:465px;margin:clamp(30px,10vh,100px) auto 20px;padding:28px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}.center-card h1{margin:10px 0 12px}.logo{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:800;letter-spacing:-.05em}.mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--main);color:var(--onmain);font-size:1.6rem}.stack{display:grid;gap:17px}.stack.tight{gap:10px}.layout{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100dvh}.side{background:var(--surface);border-right:1px solid var(--line);padding:26px 16px;display:flex;flex-direction:column;gap:25px}.side .logo{padding:0 9px}.side nav{display:grid;gap:6px}.nav{border:0;background:none;color:var(--muted);padding:12px 14px;border-radius:12px;text-align:left;font-weight:680;display:flex;gap:11px;align-items:center;width:100%}.nav.active,.nav:hover{background:var(--subtle);color:var(--main)}.sidefoot{margin-top:auto;font-size:.81rem;color:var(--muted);padding:12px;background:var(--panel);border-radius:12px;overflow-wrap:anywhere}.workspace{min-width:0}.top{border-bottom:1px solid var(--line);min-height:80px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px clamp(16px,4vw,48px)}.topname{font-weight:750}.content{max-width:1150px;padding:30px clamp(16px,4vw,48px) 130px;margin:auto}.pagehead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px;flex-wrap:wrap}.pagehead p{margin-top:5px;color:var(--muted)}.btn{background:var(--surface);color:var(--text);border:1px solid var(--line);padding:10px 14px;min-height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;text-decoration:none}.btn:hover{background:var(--panel)}.btn.primary{background:var(--main);color:var(--onmain);border-color:var(--main)}.btn.primary:hover{filter:brightness(.93)}.btn.soft{background:var(--subtle);color:var(--main);border-color:transparent}.btn.small{font-size:.83rem;min-height:35px;padding:7px 10px}.btn.danger{background:var(--alertbg);color:var(--alert);border-color:transparent}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:20px;box-shadow:var(--shadow);min-width:0}.card h2{margin-bottom:12px}.cardhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.cardhead h2{margin:0}.tint{background:var(--subtle);box-shadow:none;border:0}.pill{display:inline-flex;padding:4px 9px;font-size:.72rem;font-weight:700;background:var(--panel);color:var(--muted);border-radius:999px;white-space:nowrap}.pill.good{background:var(--subtle);color:var(--main)}.pill.alert{background:var(--alertbg);color:var(--alert)}.item{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:14px 0;min-width:0}.item:first-child{padding-top:0}.item:last-child{padding-bottom:0;border:0}.item-title{font-weight:680;overflow-wrap:anywhere}.item-info{color:var(--muted);font-size:.8rem}.empty{color:var(--muted);padding:25px 10px;text-align:center}.circle{height:35px;width:35px;flex:0 0 35px;border:1.5px solid var(--line);background:var(--surface);color:var(--main);border-radius:50%}.section{margin:22px 0 12px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}.chip{padding:8px 12px;border:1px solid var(--line);border-radius:100px;background:var(--surface);font-size:.82rem;font-weight:650;color:var(--muted)}.chip.selected{color:var(--main);background:var(--subtle);border-color:var(--main)}.field{display:grid;gap:6px}.field label{font-weight:700;font-size:.85rem}.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;padding:11px 12px;min-height:44px;width:100%}.field textarea{min-height:82px;resize:vertical}.field input[type=checkbox]{width:18px;min-height:18px}.inline{display:flex;gap:8px}.inline input{flex:1;min-width:0;border:1px solid var(--line);padding:10px 13px;border-radius:11px;background:var(--surface);color:var(--text)}.fields{display:grid;gap:13px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mutedbox{padding:13px;border-radius:11px;background:var(--panel);color:var(--muted);font-size:.86rem}.steps{display:grid;gap:8px}.step{display:flex;align-items:center;gap:10px;font-size:.9rem}.step i{font-style:normal;background:var(--subtle);border-radius:50%;height:29px;width:29px;display:grid;place-items:center;color:var(--main);font-weight:700}.bottom{display:none}.modalshade{position:fixed;inset:0;background:#0d1a14a8;z-index:30;display:grid;place-items:center;padding:15px}.modal{background:var(--surface);border:1px solid var(--line);border-radius:20px;width:min(100%,540px);max-height:calc(100dvh - 30px);overflow:auto;padding:23px}.modal h2{margin-bottom:18px}.modalfooter{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin-top:19px}.tag{padding:2px 7px;background:var(--panel);border-radius:8px;color:var(--muted);font-size:.74rem}.templates{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.template{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.weekday{text-align:center;color:var(--muted);font-size:.72rem;font-weight:700}.day{padding:8px 4px;min-height:75px;text-align:left;display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px}.day.off{opacity:.4}.day.selected{background:var(--subtle);border-color:var(--main)}.dots{display:flex;flex-wrap:wrap;gap:3px}.dot{width:6px;height:6px;border-radius:50%;background:var(--main)}.notice{border-radius:11px;background:var(--panel);padding:12px 14px;font-size:.85rem;color:var(--muted)}#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:90;pointer-events:none}.toast{background:var(--text);color:var(--bg);padding:11px 17px;border-radius:12px;box-shadow:var(--shadow);width:max-content;max-width:calc(100vw - 26px);font-size:.87rem}.spin{display:inline-block;animation:rotate 1s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}
@media(max-width:850px){.layout{display:block}.side{display:none}.top{min-height:68px}.content{padding-top:24px}.bottom{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);bottom:0;left:0;right:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:7px 4px max(7px,env(safe-area-inset-bottom))}.bottom .nav{display:grid;justify-items:center;gap:2px;padding:7px 2px;font-size:.73rem;text-align:center}.bottom .nav span:first-child{font-size:1.15rem}.grid{grid-template-columns:1fr}.content{padding-bottom:110px}}
@media(max-width:460px){.card{padding:17px}.center-card{margin:20px 12px;padding:20px}.pagehead{gap:9px;margin-bottom:18px}.two{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.day{min-height:62px}.calgrid{gap:3px}.modal{padding:17px}.top{padding:10px 15px}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}

.connection-status{position:sticky;top:0;z-index:110;padding:12px 18px;background:#fff2cc;color:#302600;text-align:center;font-size:14px}.connection-status[hidden]{display:none}


/* ============================================================
   SYSSLOR · MJUK MINIMALISM / HELHETSOMDESIGN (kandidat)
   Design-tokens återanvänds av framtida vyer.
   Inga kontoinställningar eller befintliga temavärden ändras.
   Krita är standard endast för nya konton.
   Existerande personliga temaval behålls.
   ============================================================ */
:root {
  --ui-radius: 14px;
  --ui-radius-card: 20px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-heading: -0.045em;
  --ui-soft-shadow: 0 3px 18px rgba(19,33,29,.045);
}

/* Krita: designreferens utan migrering eller nya inställningsvärden. */
[data-theme=chalk] {
  --bg:#f6f8f8;--surface:#ffffff;--panel:#eff2f3;
  --text:#253239;--muted:#5d6c75;--line:#dde4e6;
  --main:#405e69;--onmain:#ffffff;--subtle:#e4eef0;
  --alert:#934d39;--alertbg:#fcf0eb;
  --shadow:0 4px 18px rgba(25,43,51,.045);
}
[data-dark=true][data-theme=chalk] {
  --bg:#161e23;--surface:#202a31;--panel:#2a363f;
  --text:#edf2f3;--muted:#bdcbd0;--line:#40515b;
  --main:#b4d9e4;--onmain:#1c313a;--subtle:#2f4752;
  --alert:#ffc6b0;--alertbg:#4d3430;--shadow:none;
  color-scheme:dark;
}

/* Delat formspråk: lättare kort, rymligare typografi och tryckytor. */
body { letter-spacing:-.008em; }
h1,h2,h3 { line-height:1.22; }
h1 { letter-spacing:var(--ui-heading);font-weight:740; }
h2 { font-weight:720;letter-spacing:-.025em; }
.pagehead { margin-bottom:var(--ui-space-6); }
.pagehead p { line-height:1.55; }
.btn { border-radius:var(--ui-radius);font-weight:670;transition:background-color .14s ease,border-color .14s ease; }
.btn.primary { box-shadow:0 2px 7px rgba(0,0,0,.045); }
.btn:focus-visible,.nav:focus-visible,.chip:focus-visible,.circle:focus-visible {
  outline:3px solid #d79c51;outline-offset:3px;
}
.card { border-radius:var(--ui-radius-card);box-shadow:var(--ui-soft-shadow); }
.item { gap:12px; }
.item-title { font-weight:645;line-height:1.45; }
.item-info { font-size:.83rem;line-height:1.5; }
.pill { letter-spacing:.01em; }
.field input,.field select,.field textarea,.inline input { border-radius:var(--ui-radius); }
.nav { border-radius:var(--ui-radius);font-weight:660;min-height:44px; }
.side { padding-top:32px;gap:31px; }
.side nav { gap:7px; }
.top { background:var(--surface);min-height:76px; }
.topname { font-weight:720;letter-spacing:-.015em; }
.content { padding-top:36px; }
.bottom .nav.active { font-weight:760; }

/* Idag: samma data, knappar och val, tydligare hierarki och mindre röriga ytor. */
.today-page { max-width:1080px;margin:0 auto; }
.today-head { align-items:flex-end;gap:20px;margin-bottom:32px; }
.today-heading { min-width:0; }
.today-date { display:block;color:var(--muted);font-size:.83rem;
  text-transform:capitalize;font-weight:625;letter-spacing:.012em;margin-bottom:8px; }
.today-heading h1 { font-size:clamp(2.25rem,4.4vw,3.1rem);font-weight:750; }
.today-heading p { margin-top:8px;color:var(--muted);font-size:.95rem; }
.today-cta { min-height:48px;padding-inline:21px;white-space:nowrap; }
.today-grid { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:22px; }
.today-grid > .stack { gap:19px; }
.today-card { padding:24px 25px;border-color:var(--line); }
.today-card .cardhead { margin-bottom:19px;gap:12px;flex-wrap:wrap; }
.today-card .cardhead h2 { font-size:1.12rem; }
.today-card .item { padding:16px 0; }
.today-card .item:first-of-type { padding-top:0; }
.today-card .item-info { margin-top:2px; }
.today-card .empty { padding:19px 4px 21px;text-align:left;font-size:.89rem; }
.today-card .pill { font-weight:670; }
.today-card .circle { height:40px;width:40px;flex-basis:40px; }
.today-link.btn { background:transparent;border-color:transparent;box-shadow:none;
  color:var(--main);font-size:.86rem;padding:9px 5px;min-height:44px; }
.today-link.btn:hover { background:var(--subtle);padding-inline:10px; }
.today-link.btn[data-page=tasks] { margin-top:7px; }
.today-offers { margin-bottom:20px;border-left:3px solid var(--main); }
.today-shopping-dot { color:var(--main);font-size:1.3rem;line-height:1; }

@media(max-width:850px) {
  .side { display:none; }
  .top { min-height:66px; }
  .content { padding-top:30px; }
  .today-grid { grid-template-columns:1fr;gap:18px; }
  .today-head { gap:18px; }
  .bottom { padding:7px 8px max(7px,env(safe-area-inset-bottom));
    box-shadow:0 -3px 18px rgba(15,30,25,.035); }
  .bottom .nav { min-height:52px;gap:4px; }
  .bottom .nav span:first-child { font-size:1.18rem; }
}
@media(max-width:540px) {
  .content { padding:26px 17px 118px; }
  .today-head { align-items:stretch;flex-direction:column;margin-bottom:24px; }
  .today-heading h1 { font-size:2.35rem; }
  .today-heading p { font-size:.91rem; }
  .today-cta { align-self:stretch; }
  .today-card { padding:20px 18px; }
  .today-card .cardhead { margin-bottom:15px; }
  .today-card .cardhead h2 { font-size:1.09rem; }
  .today-page { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .btn { transition:none; }
}

/* Gemensamma navigeringsikoner, utan symboltypsnitt eller externa resurser. */
.navicon { display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px; }
.navicon svg { display:block;width:20px;height:20px; }
.mark { width:37px;height:37px;border-radius:12px;font-size:1.35rem; }
.logo { font-size:1.4rem;font-weight:760; }
@media(max-width:850px) {
  .bottom .navicon { flex-basis:auto; }
  .bottom .navicon svg { width:21px;height:21px; }
}

[data-dark=true] { --ui-soft-shadow:none; }


/* ============================================================
   SYSSLOR 3.2.0 KANDIDAT: 10 valbara personliga teman.
   Befintliga tema-ID:n sage, sea, sand, lavender är oförändrade.
   Akvarell och Pastell har sparsamma bakgrundsaccenter, aldrig
   bakom längre textstycken. Alla teman fungerar även i mörkt läge.
   ============================================================ */
[data-theme=linen] {
  --bg:#f6f2ec;--surface:#fffefa;--panel:#eee7dd;
  --text:#322e2a;--muted:#655d55;--line:#ded6ca;
  --main:#715d4b;--onmain:#fff;--subtle:#e8dfd2;
  --alert:#94473c;--alertbg:#fbebe6;
  --shadow:0 4px 18px rgba(53,40,27,.05);
}
[data-theme=mist] {
  --bg:#f0f5f7;--surface:#fff;--panel:#e5eef1;
  --text:#243640;--muted:#526b78;--line:#d4e1e6;
  --main:#376679;--onmain:#fff;--subtle:#d9e9ee;
  --alert:#94483c;--alertbg:#f9ebe8;
  --shadow:0 4px 18px rgba(25,52,68,.05);
}
[data-theme=pastel] {
  --bg:#faf6fb;--surface:#fff;--panel:#f1eaf5;
  --text:#352b42;--muted:#6e5e7a;--line:#e8dceb;
  --main:#73509d;--onmain:#fff;--subtle:#eee3f6;
  --alert:#934444;--alertbg:#fff0eb;
  --shadow:0 4px 18px rgba(83,49,99,.055);
}
[data-theme=watercolor] {
  --bg:#f2f8f6;--surface:#fffefd;--panel:#e6f2ef;
  --text:#263d3e;--muted:#586e70;--line:#d5e8e4;
  --main:#306d72;--onmain:#fff;--subtle:#dcece9;
  --alert:#98513c;--alertbg:#fbeeea;
  --shadow:0 4px 18px rgba(45,103,103,.05);
}
[data-theme=pop] {
  --bg:#f7f8fc;--surface:#fff;--panel:#edf0fa;
  --text:#202940;--muted:#586582;--line:#d9dff0;
  --main:#3155b9;--onmain:#fff;--subtle:#e1e8fb;
  --alert:#a13e50;--alertbg:#fde9ed;
  --shadow:0 4px 18px rgba(46,72,139,.055);
}
[data-dark=true][data-theme=linen] {
  --bg:#201d1a;--surface:#2b2622;--panel:#383129;
  --text:#f5eee5;--muted:#d0bfb0;--line:#55483d;
  --main:#e5c7a2;--onmain:#2e2118;--subtle:#49392c;
  --alert:#ffc3b2;--alertbg:#55342d;--shadow:none;color-scheme:dark;
}
[data-dark=true][data-theme=mist] {
  --bg:#152027;--surface:#1d2b34;--panel:#273943;
  --text:#eff7f9;--muted:#b9d0d9;--line:#3f5662;
  --main:#b6dae9;--onmain:#1b323f;--subtle:#304a58;
  --alert:#ffbdad;--alertbg:#513630;--shadow:none;color-scheme:dark;
}
[data-dark=true][data-theme=pastel] {
  --bg:#211b2b;--surface:#2c2537;--panel:#3c314b;
  --text:#f7f1fa;--muted:#d5c4e1;--line:#554363;
  --main:#e0c4f4;--onmain:#2c2040;--subtle:#4b395d;
  --alert:#ffc1bb;--alertbg:#503239;--shadow:none;color-scheme:dark;
}
[data-dark=true][data-theme=watercolor] {
  --bg:#162426;--surface:#203135;--panel:#2c4142;
  --text:#f0f8f6;--muted:#bcd3ce;--line:#405f60;
  --main:#b4e1d8;--onmain:#1b3635;--subtle:#345351;
  --alert:#ffc6b6;--alertbg:#533a32;--shadow:none;color-scheme:dark;
}
[data-dark=true][data-theme=pop] {
  --bg:#181d30;--surface:#252c42;--panel:#303a54;
  --text:#f3f5ff;--muted:#c3cfeb;--line:#475575;
  --main:#b6c8ff;--onmain:#1c2b57;--subtle:#354875;
  --alert:#ffb5c5;--alertbg:#512d43;--shadow:none;color-scheme:dark;
}

/* Sammanhållet designsystem för samtliga huvudsidor. */
:root {
  --ui-radius:13px;
  --ui-radius-card:19px;
  --ui-content-max:1120px;
  --ui-shadow-sm:0 2px 12px rgba(24,34,38,.04);
}
body { font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.52; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font-size:inherit; }
button,select { touch-action:manipulation; }
h1 { font-size:clamp(2rem,3.4vw,2.55rem);font-weight:750;letter-spacing:-.045em; }
h2 { font-size:1.13rem;letter-spacing:-.025em;font-weight:710; }
h3 { font-size:1rem;letter-spacing:-.015em; }
p,small,.sub,.muted,.item-info { line-height:1.55; }
.content { max-width:var(--ui-content-max);padding-top:34px; }
.pagehead { gap:20px;align-items:flex-end;margin-bottom:27px; }
.pagehead .eyebrow { font-size:.7rem;letter-spacing:.08em;margin-bottom:6px; }
.pagehead p { font-size:.95rem;max-width:66ch;margin-top:8px; }
.card { box-shadow:var(--ui-soft-shadow);border-radius:var(--ui-radius-card);padding:24px; }
.card h2 { margin-bottom:15px; }
.cardhead h2 { margin-bottom:0; }
.grid { gap:21px; }
.grid > *, .stack, .field, .row { min-width:0; }
.item { gap:13px;padding-block:16px; }
.item-title { font-weight:640;line-height:1.38; }
.item-info { margin-top:3px;font-size:.83rem; }
.empty { font-size:.91rem;padding:24px 8px; }
.side { gap:29px;padding:30px 18px;background:var(--surface); }
.side .logo { padding-inline:9px; }
.sidefoot { background:var(--panel);padding:15px;line-height:1.5; }
.top { background:var(--surface);border-color:var(--line); }
.top .btn { background:transparent;border-color:transparent; }
.top .btn:hover { background:var(--panel); }
.topname { font-size:.91rem; }
.top small { font-size:.8rem; }
.nav { border-radius:var(--ui-radius);font-weight:620;min-height:47px; }
.btn { min-height:45px;padding:10px 16px;line-height:1.3; }
.btn.small { min-height:40px;padding:9px 12px;font-size:.82rem; }
.btn:focus-visible,.chip:focus-visible,.nav:focus-visible,
.circle:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.task-extras summary:focus-visible {
  outline:3px solid #d79940;outline-offset:3px;
}
.pill { font-size:.72rem;letter-spacing:0; }
.chips { gap:8px;margin-bottom:20px; }
.chip { min-height:40px;font-weight:620;border-color:var(--line); }
.chip.selected { border-color:var(--main); }
.circle { min-width:40px;height:40px;width:40px;flex-basis:40px; }
.field { gap:7px; }
.field label { font-size:.85rem;font-weight:665; }
.field input:not([type=checkbox]),.field select,.field textarea {
  min-height:48px;padding:11px 14px;border-radius:var(--ui-radius);border-color:var(--line);
}
.field input:focus,.field select:focus,.field textarea:focus,.inline input:focus {
  border-color:var(--main);
}
.field-hint { display:block;color:var(--muted);font-size:.78rem;line-height:1.55;font-weight:400; }
.fields { gap:17px; }
.inline input { min-height:47px;padding:11px 14px; }
.templates { grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px; }
.template { border-radius:var(--ui-radius);padding:15px;gap:10px; }
.template strong { font-size:.91rem; }
.template:hover { border-color:var(--main); }
.section { font-size:.74rem;letter-spacing:.07em;margin-top:24px; }
.notice { border-radius:var(--ui-radius);padding:14px 16px;line-height:1.55; }
.step i { border-radius:11px; }
.calgrid { gap:5px; }
.day { border-radius:11px;min-height:77px;padding:9px 8px;transition:border-color .12s; }
.day.selected { box-shadow:inset 0 0 0 1px var(--main); }
.day:hover:not(.off) { border-color:var(--main); }
.weekday { font-size:.7rem;text-transform:uppercase;letter-spacing:.025em; }
.dots { gap:4px; }
.dot { width:6px;height:6px; }

/* Formulär som är begripliga utan att visa alla avancerade inställningar. */
.modalshade { background:rgba(9,19,23,.60);padding:16px; }
.modal { width:min(100%,560px);border-radius:22px;box-shadow:0 22px 70px rgba(0,0,0,.22);
  padding:27px;scrollbar-gutter:stable; }
.modal h2 { font-size:1.45rem;margin-bottom:21px; }
.modalfooter { padding-top:14px;border-top:1px solid var(--line);align-items:center; }
.date-fieldset { margin:0;padding:0;border:0;min-width:0; }
.date-fieldset legend { font-size:.85rem;font-weight:680;margin-bottom:9px; }
.date-choices { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px; }
.date-choice { display:block;position:relative;cursor:pointer;min-width:0; }
.date-choice input { position:absolute;opacity:0;width:1px;height:1px;pointer-events:none; }
.date-choice span { display:flex;min-height:45px;padding:9px 7px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);
  font-size:.8rem;font-weight:630;text-align:center;line-height:1.25;color:var(--muted); }
.date-choice input:checked + span { background:var(--subtle);border-color:var(--main);color:var(--main); }
.date-choice input:focus-visible + span { outline:3px solid #d79940;outline-offset:2px; }
.date-custom { margin:10px 0; }
[hidden] { display:none!important; }
.task-extras { margin:2px 0;border:1px solid var(--line);border-radius:var(--ui-radius);
  background:var(--surface);overflow:hidden; }
.task-extras summary { list-style:none;cursor:pointer;padding:14px 16px;font-weight:650;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:5px 12px; }
.task-extras summary::-webkit-details-marker { display:none; }
.task-extras summary:before { content:'＋';color:var(--main);margin-right:7px;font-size:1.05rem; }
.task-extras[open] summary:before { content:'−'; }
.task-extras .extra-descr { font-size:.74rem;font-weight:450;color:var(--muted); }
.task-extra-fields { padding:17px 16px 19px;border-top:1px solid var(--line); }

/* Den globala designen förblir återhållsam även när temat är lekfullt. */
[data-theme=watercolor][data-dark=false] .top,
[data-theme=watercolor][data-dark=false] .side .logo {
  background:linear-gradient(115deg,#f0f9f6 0%,#f7f4fb 57%,#fbf6ee 100%);
}
[data-theme=pastel][data-dark=false] .top {
  background:linear-gradient(115deg,#fff8fa,#f8faff 54%,#f7fff9);
}
[data-theme=pop] .top { border-top:3px solid var(--main); }

@media(max-width:850px) {
  .content { padding-top:28px; }
  .bottom { box-shadow:0 -4px 16px rgba(11,19,26,.05); }
  .bottom .nav { min-height:51px;border-radius:10px; }
  .top .btn { min-height:44px; }
}
@media(max-width:540px) {
  .content { padding:25px 16px 116px; }
  .pagehead { align-items:stretch;margin-bottom:21px; }
  .pagehead > .btn.primary { align-self:stretch; }
  .card { padding:20px 17px; }
  .modalshade { padding:8px;align-items:center; }
  .modal { padding:22px 17px;max-height:calc(100dvh - 16px);border-radius:19px; }
  .modal h2 { font-size:1.33rem;margin-bottom:16px; }
  .modalfooter { gap:8px; }
  .modalfooter > .btn { flex:1 1 auto; }
  .date-choices { gap:6px; }
  .date-choice span { font-size:.77rem;min-height:48px;padding-inline:4px; }
  .calgrid { gap:3px; }
  .day { min-height:60px;padding:7px 4px; }
  .template { padding:12px 10px; }
  .today-head { align-items:stretch; }
}
@media(prefers-reduced-motion:reduce) {
  .day { transition:none; }
}
/* Prevent intrinsic grid track sizes from pushing long forms and rows
   outside narrow phone screens, especially the shared shopping list. */
.stack,.field { grid-template-columns:minmax(0,1fr); }
.inline { min-width:0;max-width:100%; }
.inline input { width:0;flex:1 1 0; }
.item > .grow { min-width:0;flex:1 1 0; }
/* Små karaktärsskillnader mellan flerfärgade teman utan visuellt brus. */
[data-theme=pastel][data-dark=false] .pill.good {
  background:#dcf0e6;color:#285642;
}
[data-theme=watercolor][data-dark=false] .pill.good {
  background:#f0e9f7;color:#5f457c;
}
[data-theme=pop][data-dark=false] .pill.good {
  background:#fff0b9;color:#684f0e;
}
[data-theme=pop][data-dark=false] .today-offers {
  border-left-color:#d95478;
}
[data-theme=pop][data-dark=false] .top {
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,#3157c4,#ef819a,#f4be53,#79b6a2) 1;
}
/* Håll samman rubrik och hjälprad för utfällbara fält på telefon. */
.task-extras summary {
  display:grid;grid-template-columns:22px minmax(0,1fr);
  justify-content:initial;align-items:center;gap:1px 8px;
}
.task-extras summary::before { grid-column:1;grid-row:1 / span 2;align-self:start;margin:0; }
.task-extras .extra-descr { grid-column:2;grid-row:2; }