/* Familjedashboard. Systemtypsnitt, inga externa resurser. Ljust och mörkt tema via prefers-color-scheme. */
:root{
  --bg:#F3F5F1; --surface:#FFFFFF; --ink:#1B2420; --muted:#5B6862; --line:#DCE2DD;
  --accent:#2E6A4E; --accent-ink:#FFFFFF; --mark:#D9A616; --mark-soft:#FBF2D3; --done:#8A968F; --warn:#B4472F;
  --font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --p-pink:#C2185B; --p-pink-soft:#FBE3EE; --p-blue:#1E63B5; --p-blue-soft:#E1ECFA;
  --p-green:#2E7D32; --p-green-soft:#E3F2E4; --p-gray:#5F6B73; --p-gray-soft:#E6EAEC;
  --p-teal:#00796B; --p-teal-soft:#DCF0ED; --on-p:#FFFFFF;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111714; --surface:#19211D; --ink:#E4EBE6; --muted:#9AA79F; --line:#2A3530;
    --accent:#74C29B; --accent-ink:#0E1912; --mark:#E2B63A; --mark-soft:#352F17; --done:#6E7A73; --warn:#E58A70;
    --p-pink:#F48FB1; --p-pink-soft:#3B2230; --p-blue:#8AB4F8; --p-blue-soft:#1E2A3C; --p-green:#81C784; --p-green-soft:#1E3222;
    --p-gray:#B0BEC5; --p-gray-soft:#2A3135; --p-teal:#80CBC4; --p-teal-soft:#1B3230; --on-p:#111714;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.45}
[hidden]{display:none!important}
.wrap{max-width:860px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:20px 56px}
header.top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; margin-bottom:12px}
h1{font-weight:700; font-size:clamp(1.6rem,5vw,2.2rem); line-height:1.1; margin:0; letter-spacing:-.01em}
.top-right{display:flex; align-items:center; gap:12px}
.top-right form{margin:0}
.save{font-size:.85rem; color:var(--muted)}
.save.err{color:var(--warn)}
.muted{color:var(--muted)}
.people{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
nav.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto}
nav.tabs button{font:inherit; font-weight:700; padding:10px 14px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); cursor:pointer; white-space:nowrap}
nav.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; align-items:center}
.chip{font:inherit; font-size:.9rem; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.chip .own{font-size:.75rem; opacity:.75; margin-left:4px}
button:focus-visible, input:focus-visible, select:focus-visible{outline:3px solid var(--mark); outline-offset:2px}
.btn{font:inherit; font-size:.9rem; padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.btn.small{padding:5px 10px; font-size:.82rem}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
.btn.danger{color:var(--warn)}
.btn[aria-pressed="true"]{background:var(--mark-soft); border-color:var(--mark)}
.notice{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; color:var(--muted)}

/* översikt */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; margin-bottom:22px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 14px 10px; min-width:0}
.panel h3{font-size:1.05rem; margin:0 0 8px; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.panel h3 small{font-weight:400; font-size:.8rem; color:var(--muted)}
.dates{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.dates li{display:grid; grid-template-columns:5rem minmax(0,1fr); gap:10px; align-items:baseline; font-size:.93rem}
.dates .d{font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent)}
.dates .past, .dates .past .d{color:var(--done)}
.dates .soon .d{color:var(--warn)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px}
.tile{font:inherit; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; color:var(--ink); display:grid; gap:6px}
.tile b{font-size:1.3rem; font-variant-numeric:tabular-nums}
.tile span{font-size:.85rem; color:var(--muted)}
progress{width:100%; height:6px; border:0; border-radius:99px; overflow:hidden; background:var(--line); appearance:none; -webkit-appearance:none}
progress::-webkit-progress-bar{background:var(--line)}
progress::-webkit-progress-value{background:var(--accent)}
progress::-moz-progress-bar{background:var(--accent)}
.empty{color:var(--muted); font-size:.93rem; margin:4px 0 8px}
.late{color:var(--warn); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:8px 0 2px}
h2.group{font-size:1.1rem; margin:22px 0 8px}
h2.who{font-size:1.25rem; margin:26px 0 10px; padding-bottom:4px; border-bottom:2px solid var(--accent)}
h2.who:first-child{margin-top:4px}

/* listor */
.listhead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px; margin-bottom:12px}
.listhead p{margin:0; color:var(--muted); font-size:.9rem; max-width:60ch}
.actions{display:flex; gap:8px; flex-wrap:wrap}
section.sec{margin-bottom:20px}
section.sec h2{font-size:1.1rem; margin:0 0 6px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline}
section.sec h2 .cnt{font-weight:400; font-size:.8rem; color:var(--muted)}
.tag{font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:99px; background:var(--mark-soft)}
.tag.today{background:var(--accent); color:var(--accent-ink)}
ul.items{list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.panel ul.items{border:0; border-radius:0; background:transparent}
li.row{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-top:1px solid var(--line)}
li.row:first-child{border-top:0}
.panel li.row{padding:8px 0}
label.ck{display:flex; gap:10px; align-items:flex-start; flex:1; min-width:0; cursor:pointer}
label.ck input{position:absolute; opacity:0; width:1px; height:1px}
.box{flex:none; width:22px; height:22px; border-radius:6px; border:2px solid var(--muted); display:grid; place-items:center; margin-top:1px}
label.ck input:checked + .box{background:var(--accent); border-color:var(--accent)}
label.ck input:checked + .box::after{content:""; width:6px; height:11px; border:solid var(--accent-ink); border-width:0 2.5px 2.5px 0; transform:translateY(-1px) rotate(45deg)}
label.ck input:focus-visible + .box{outline:3px solid var(--mark); outline-offset:2px}
.txt{min-width:0}
.txt b{font-weight:600}
.txt small{display:block; color:var(--muted); font-size:.83rem}
li.row.done .txt b{color:var(--done); text-decoration:line-through; text-decoration-thickness:1px}
li.row.done{opacity:.7}
li.row.done .qty{opacity:.6}
.qty{flex:none; display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.qty button{font:inherit; width:30px; height:30px; border:0; background:transparent; color:var(--ink); cursor:pointer}
.qty output{min-width:3.8rem; text-align:center; font-size:.9rem; font-variant-numeric:tabular-nums; border-inline:1px solid var(--line); line-height:30px; padding-inline:4px}
.edit{display:flex; gap:8px; flex:1; min-width:0; flex-wrap:wrap}
input.f, select.f{font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); min-width:0}
.edit input.t{flex:2 1 180px}
.edit input.n{flex:3 1 200px; font-size:.88rem}
.edit input.u{width:5rem; flex:none}
.del{font:inherit; font-size:.85rem; padding:6px 10px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--warn); cursor:pointer; flex:none}
form.add, form.inline{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
form.add input{flex:1; min-width:0; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink)}
form.inline{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; margin:0 0 16px; align-items:flex-end}
form.inline label{display:grid; gap:4px; font-size:.85rem; color:var(--muted); flex:1 1 180px}
fieldset.addons{border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin:0; display:flex; flex-wrap:wrap; gap:4px 14px; flex:1 1 100%}
fieldset.addons legend{font-size:.85rem; color:var(--muted); padding:0 4px}
form.inline label.ckline{display:flex; gap:6px; align-items:center; font-size:.92rem; color:var(--ink); flex:none}
select.addon-pick{font-size:.9rem}
.meta-edit{display:grid; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:16px}
.meta-edit label{display:grid; gap:4px; font-size:.85rem; color:var(--muted)}
.sec-edit{display:flex; gap:8px; margin-bottom:6px; flex-wrap:wrap}
.sec-edit input{flex:1 1 200px}
.hide-done li.row.done{display:none}
.out textarea{width:100%; min-height:140px; font:inherit; font-size:.9rem; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); margin-bottom:12px}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; display:grid; gap:8px; align-content:start}
.card h3{margin:0; font-size:1rem}
.card p{margin:0; font-size:.85rem; color:var(--muted)}
@media (max-width:520px){ li.row{flex-wrap:wrap} .qty{margin-left:32px} }

/* inloggning */
body.login{display:grid; place-items:center; min-height:100vh; padding:16px}
.login-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; width:min(100%, 360px); display:grid; gap:10px}
.login-box form{display:grid; gap:8px}
.login-box input{font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink)}
.login-box .err{color:var(--warn); min-height:1.2em; margin:0}

/* ansvarig per uppgift */
select.whosel{flex:none; align-self:center; font:inherit; font-size:.8rem; padding:3px 6px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); max-width:7.5rem}
select.whosel.set{background:var(--mark-soft); border-color:var(--mark); color:var(--ink); font-weight:600}
.fordelning li{grid-template-columns:minmax(0,1fr) auto}
.linkbtn{font:inherit; padding:0; border:0; background:none; color:var(--accent); font-weight:700; cursor:pointer; text-align:left}
@media (max-width:520px){ select.whosel{margin-left:32px} }

/* fällbara avdelningar och rubriker */
button.fold{font:inherit; font-weight:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-align:left}
.chev{width:9px; height:9px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); margin:0 3px 4px 2px; flex:none; transition:transform .15s}
button.fold[aria-expanded="false"] .chev{transform:rotate(-45deg); margin-bottom:0}
h2.who{display:flex; align-items:baseline; gap:10px}
h2.who .cnt{font-size:.8rem; font-weight:400; color:var(--muted)}
@media (prefers-reduced-motion: reduce){ .chev{transition:none} }

h1 a#home{color:inherit; text-decoration:none}
h1 a#home:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}

/* länkar från översikten till Att göra */
a.srclink{color:var(--accent); text-decoration:none; font-size:.8rem}
a.srclink:hover{text-decoration:underline}
a.srclink.head{font-size:inherit; color:inherit}
a.srclink.head::after{content:" ›"; color:var(--accent)}
.dates a.srclink{font-size:inherit}
section.sec.flash{outline:3px solid var(--mark); outline-offset:6px; border-radius:8px; transition:outline-color .6s}

/* startsidan: veckoremsa, nästa resa, att handla */
.weekwrap{overflow-x:auto; margin-bottom:16px; -webkit-overflow-scrolling:touch}
.week{display:grid; grid-template-columns:repeat(7, minmax(92px, 1fr)); gap:8px; min-width:680px}
.day{display:grid; gap:2px; align-content:start; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; color:var(--ink); text-decoration:none; min-height:96px}
a.day:hover{border-color:var(--accent)}
.day.today{border:2px solid var(--accent)}
.day .wd{font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.day .dn{font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.day .cntb{font-size:.8rem; font-weight:600; color:var(--accent)}
.day .cntb.zero{color:var(--muted); font-weight:400}
.day .mark{font-size:.72rem; background:var(--mark-soft); border-radius:6px; padding:2px 5px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.panel.trip .countdown{font-size:1.8rem; font-weight:700; margin:0 0 8px; color:var(--accent); font-variant-numeric:tabular-nums}
.tripline{display:grid; gap:4px; margin-bottom:10px}
.small{font-size:.82rem}
.shoplist li{grid-template-columns:5rem minmax(0,1fr)}
.dates .late-dl .d{color:var(--warn)}
.daterow{display:flex; gap:10px; flex-wrap:wrap}
.daterow label{flex:1 1 140px}

/* snabbflytt */
li.row{flex-wrap:wrap}
button.pill{flex:none; align-self:center; font:inherit; font-size:.8rem; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer}
button.pill[aria-expanded="true"]{background:var(--mark-soft); border-color:var(--mark); color:var(--ink)}
.moverow{flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 0 2px 32px}
.moverow label{display:flex; gap:6px; align-items:center; color:var(--muted)}
@media (max-width:520px){ button.pill{margin-left:4px} }

/* stjärna = viktigt datum */
button.star{flex:none; align-self:center; font:inherit; font-size:1.05rem; line-height:1; padding:2px 4px; border:0; background:none; color:var(--muted); cursor:pointer}
button.star[aria-pressed="true"]{color:var(--mark)}

/* färg per person */
.c-pink{--pc:var(--p-pink); --pcs:var(--p-pink-soft)}
.c-blue{--pc:var(--p-blue); --pcs:var(--p-blue-soft)}
.c-green{--pc:var(--p-green); --pcs:var(--p-green-soft)}
.c-gray{--pc:var(--p-gray); --pcs:var(--p-gray-soft)}
.c-teal{--pc:var(--p-teal); --pcs:var(--p-teal-soft)}
.chip.pc{border-color:var(--pc); display:inline-flex; align-items:center; gap:6px}
.chip.pc::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--pc)}
.chip.pc[aria-pressed="true"]{background:var(--pc); border-color:var(--pc); color:var(--on-p)}
.chip.pc[aria-pressed="true"]::before{background:var(--on-p)}
.chip.member{font-size:.85rem}
select.whosel.set[class*="c-"]{background:var(--pcs); border-color:var(--pc); color:var(--ink)}
li.row.has-who{box-shadow:inset 4px 0 0 var(--pc)}
.panel li.row.has-who{box-shadow:none; border-left:4px solid var(--pc); padding-left:8px}
h2.who[class*="c-"]{border-bottom-color:var(--pc)}
h2.who[class*="c-"] button.fold{color:var(--pc)}
.linkbtn[class*="c-"]{color:var(--pc)}
.linkbtn.member{padding-left:12px}

/* Dela upp en uppgift */
.aipanel{background:var(--surface); border:1px solid var(--accent); border-radius:12px; padding:14px; margin-bottom:16px; display:grid; gap:10px}
.aipanel h3{margin:0; font-size:1.05rem}
.aipanel p{margin:0}
label.stack{display:grid; gap:4px; font-size:.85rem; color:var(--muted); flex:1 1 180px}
.aipanel textarea{font:inherit; width:100%; resize:vertical}
.aipanel .err{color:var(--warn); margin:0}
.aisteps li.row{align-items:center}
.aisteps .edit{align-items:center}
.aisteps input[type=checkbox]{width:20px; height:20px; flex:none; accent-color:var(--accent)}

/* Att göra som tidslinje */
.tlday h2{font-size:1.05rem}
.tlday.today-block h2 button.fold{color:var(--accent)}
.tlday.late-block h2 button.fold{color:var(--warn)}
.tlday.unassigned-block{border-top:2px dashed var(--line); padding-top:12px}
form.tladd label.stack{flex:1 1 150px}
form.tladd label.stack:first-child{flex:3 1 240px}