:root{--ink:#10374e;--navy:#08344f;--blue:#d7f2fa;--sand:#ffedc6;--mint:#dcf1e1;--line:#d6e5e9;--muted:#526c78;--paper:#fff;--bg:#f4f8f8}*{box-sizing:border-box}body{margin:0;background:#eee9df;color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ce8d00;outline-offset:3px}button{border:0}h1,h2,h3,p{margin:0}h1{font-size:1.75rem;letter-spacing:-.04em;line-height:1.2}h2{font-size:1.3rem;letter-spacing:-.02em}h3{font-size:1rem}.app{max-width:760px;margin:auto;min-height:100dvh;background:var(--bg);box-shadow:0 0 60px #10374e12}header{background:var(--navy);color:white;padding:19px 20px 15px;display:flex;align-items:center;gap:12px}header button{color:white;background:transparent;min-height:44px;padding:4px 6px}.brand{font-size:1.55rem;font-weight:750;display:flex;align-items:center;gap:10px;margin-right:auto}.flag{width:34px;height:23px;background:linear-gradient(90deg,transparent 30%,#ffce00 30% 43%,transparent 43%),linear-gradient(transparent 40%,#ffce00 40% 60%,transparent 60%),#0066a9;display:inline-block;border-radius:3px}.weather{background:#dff3fa;padding:9px 20px;display:flex;align-items:center;font-size:13px;gap:7px}.weather button{margin-left:auto;background:transparent;min-height:34px;font-size:13px}.sun{color:#c38700;font-size:22px}.demo{padding:7px 20px;background:#fff5dc;color:#725519;font-size:12px;border-bottom:1px solid #f4e3be}.hero{height:300px;background-image:linear-gradient(180deg,#08344f00 40%,#08344f88),url('/hero.webp');background-size:170% auto;background-position:right bottom;display:flex;align-items:flex-end;padding:24px;color:white}.hero h1{font-size:clamp(27px,5vw,38px);text-shadow:0 2px 12px #0008}.hero p{font-size:14px;color:#f2f8fb;margin-top:8px}.content{padding:20px}nav.shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shortcut{border-radius:13px;min-height:54px;padding:12px;display:flex;align-items:center;gap:9px;text-align:left;font-size:14px;font-weight:650}.shortcut svg{width:23px;height:23px;flex-shrink:0}.sky{background:#d5f0fa}.mint{background:#d8f0df}.sand{background:#ffebbf}.ice{background:#dbeef8}button:hover{filter:brightness(.97)}.card{padding:18px;background:white;border:1px solid var(--line);border-radius:15px;margin-top:18px}.news{width:100%;text-align:left;display:flex;gap:13px;align-items:center}.news-icon{background:var(--blue);padding:10px;border-radius:12px}.news-icon svg{width:24px;height:24px}.news p{color:var(--muted);font-size:14px;margin-top:5px}.chevron{margin-left:auto;font-size:24px}.caption{font-size:12px;color:var(--muted);margin-top:14px}.page-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}.back{border:1px solid var(--line);background:white;border-radius:11px;min-height:42px;padding:7px 12px}.subtext{font-size:14px;color:var(--muted);margin:8px 0 20px}.primary{background:var(--navy);color:white;padding:11px 17px;border-radius:11px;min-height:44px;font-weight:600}.secondary{background:#e8f2f5;padding:9px 14px;border-radius:10px;min-height:42px}.danger{color:#9c3434;background:#fff1ef}.muted{color:var(--muted);font-size:13px}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:grid;gap:12px}.item{padding:15px;background:white;border:1px solid var(--line);border-radius:13px}.item p{white-space:pre-wrap;overflow-wrap:anywhere}.meta{font-size:12px;color:var(--muted);margin:7px 0}.badge{display:inline-block;background:#eef5f6;color:#476572;border-radius:20px;padding:3px 9px;font-size:12px}.status-new{background:#fff0ce;color:#755817}.status-progress{background:#d9eff8}.status-done{background:#dcf1e1;color:#285b3e}.filters{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.filters button{background:white;border:1px solid var(--line);padding:7px 12px;border-radius:30px;font-size:13px;min-height:36px}.filters .active{background:var(--navy);color:white;border-color:var(--navy)}.reply{border-left:3px solid #cce6ef;padding:8px 12px;margin-top:12px;background:#f4f9fa;border-radius:0 9px 9px 0;font-size:14px}.small{font-size:13px;padding:6px 11px;min-height:36px}.shopping{display:flex;gap:12px;align-items:center}.shopping input{width:22px;height:22px;flex-shrink:0;accent-color:#236c56}.shopping .name{flex:1;overflow-wrap:anywhere}.done .name{text-decoration:line-through;color:var(--muted)}.empty{padding:30px 15px;text-align:center;color:var(--muted);background:white;border:1px dashed var(--line);border-radius:12px}.field{display:block;margin:14px 0;color:var(--ink);font-size:14px;font-weight:600}input:not([type=checkbox]),textarea,select{display:block;width:100%;border:1px solid #bcd0da;background:white;color:var(--ink);padding:11px 12px;border-radius:9px;margin-top:5px;min-height:44px}textarea{min-height:100px;resize:vertical}.inline-form{display:flex;gap:8px;align-items:end;margin-bottom:18px}.inline-form input{margin:0}.inline-form button{flex-shrink:0}footer{text-align:center;padding:30px 15px;background:linear-gradient(165deg,#f4f8f8 10%,#d9f0f2 100%);font-size:12px;color:var(--muted);margin-top:12px}footer button{background:transparent;text-decoration:underline}.menu{position:fixed;inset:0;background:#082b4255;z-index:5;display:flex;justify-content:flex-end}.menu-panel{background:white;width:min(320px,90vw);height:100%;padding:24px;box-shadow:-20px 0 40px #062d4620}.menu-panel>button{display:flex;width:100%;text-align:left;padding:13px;border-radius:10px;margin-top:7px;min-height:45px;background:#eff7f8;gap:10px}.menu-panel svg{width:22px}.menu-panel .close{background:transparent;justify-content:flex-end}.menu-panel h2{margin-bottom:20px}dialog{border:1px solid var(--line);border-radius:20px;padding:24px;max-width:480px;width:calc(100% - 30px);color:var(--ink);max-height:90dvh;overflow:auto;box-shadow:0 20px 80px #082b4240}dialog::backdrop{background:#082b4266}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.close{background:#eef5f6;border-radius:50%;width:40px;height:40px;flex-shrink:0}.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:white;border-radius:12px;padding:12px 20px;z-index:10;box-shadow:0 8px 35px #0003;max-width:90vw;font-size:14px}.handbook p{white-space:pre-wrap;margin:10px 0 14px}.note{background:#e7f4f7;padding:13px;border-radius:11px;font-size:13px;margin-bottom:18px}[hidden]{display:none!important}@media(max-width:380px){header{padding:13px 12px}.content{padding:15px}.shortcut{font-size:12px;padding:11px 8px;gap:6px}.weather{padding:7px 12px;font-size:12px}.hero{height:260px}.brand{font-size:1.35rem}.inline-form{flex-wrap:wrap}.inline-form input{flex:1;min-width:160px}}@media(min-width:600px){.hero{height:340px;background-size:100% auto}.shortcut{min-height:60px;font-size:16px}.content{padding:26px}.hero h1{font-size:38px}}
/* Sommen 0.2: compact lake-inspired shortcuts. */
.hero{background-size:225% auto;background-position:right bottom}
nav.shortcuts{gap:12px}
nav.shortcuts .shortcut{position:relative;isolation:isolate;overflow:hidden;min-height:58px;padding:11px 10px;border:1px solid #9ec4d0;border-bottom:3px solid #79aab9;box-shadow:inset 0 1px 0 #ffffffef,0 4px 9px #174f6510;border-radius:14px;color:#09364e;gap:8px;transition:transform .15s,box-shadow .15s}
nav.shortcuts .shortcut::after{content:'';position:absolute;z-index:-1;width:115%;height:28px;bottom:-14px;left:-5%;background:#ffffff70;border-radius:48% 62% 0 0;transform:rotate(-5deg)}
nav.shortcuts .shortcut svg{width:23px;height:23px;padding:3px;box-sizing:content-box;background:#ffffff85;border:1px solid #ffffffc4;border-radius:9px;box-shadow:0 1px 3px #15546a12;flex-shrink:0}
nav.shortcuts .sky{background:linear-gradient(135deg,#edfaff,#8cd4ed);border-color:#83c2d8;border-bottom-color:#5babc7}
nav.shortcuts .mint{background:linear-gradient(135deg,#e9fbf5,#8bd8cc);border-color:#83c3b9;border-bottom-color:#62afa4}
nav.shortcuts .sand{background:linear-gradient(135deg,#fff9ed,#edce93);border-color:#d9bc85;border-bottom-color:#c1a167}
nav.shortcuts .ice{background:linear-gradient(135deg,#edf5ff,#a1cce9);border-color:#95b9d2;border-bottom-color:#7a9fbf}
nav.shortcuts .shortcut:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 white,0 6px 12px #174f6520;filter:none}
nav.shortcuts .shortcut:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #174f6520}
.news-icon{background:linear-gradient(145deg,#edfaff,#bce4ef);border:1px solid #cae3e9}
@media(min-width:600px){.hero{background-size:145% auto}nav.shortcuts .shortcut{font-size:16px}}
@media(max-width:380px){nav.shortcuts{gap:9px}nav.shortcuts .shortcut{font-size:12px;padding:10px 8px;gap:7px}nav.shortcuts .shortcut svg{width:20px;height:20px;padding:3px}}
@media(prefers-reduced-motion:reduce){nav.shortcuts .shortcut{transition:none}}
/* Sommen 0.4: gammal marin stil – marinblått, kräm och mässing, marina ikoner. */
:root{--navy:#14304a;--ink:#14304a;--cream:#f6f0e1;--paper:#fbf8f0;--brass:#b08a3e;--line:#e0d6bf;--muted:#5b6670}
body{background:#e9e2d0}
.app{background:var(--paper)}
h1,h2,.brand,.shortcut span{font-family:Georgia,"Times New Roman",serif;letter-spacing:0}
header{background:var(--navy);border-bottom:3px solid var(--brass)}
.weather{background:var(--cream);border-bottom:1px solid var(--line);color:var(--navy)}
.sun{color:var(--brass)}
.demo{background:#f1e9d4;color:#6b5a32;border-bottom:1px solid var(--line)}
nav.shortcuts{gap:10px}
nav.shortcuts .shortcut{min-height:56px;background:var(--cream);border:1px solid var(--navy);border-bottom:1px solid var(--navy);border-radius:6px;box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 4px #14304a55;gap:10px;color:var(--navy);font-size:15px}
nav.shortcuts .shortcut::after{display:none}
nav.shortcuts .shortcut svg{color:var(--navy);background:transparent;border:1.5px solid var(--brass);box-shadow:none;border-radius:50%;padding:5px}
nav.shortcuts .sky,nav.shortcuts .mint,nav.shortcuts .sand,nav.shortcuts .ice{background:var(--cream);border-color:var(--navy);border-bottom-color:var(--navy)}
nav.shortcuts .shortcut:hover{transform:none;background:#f1e8d2;box-shadow:inset 0 0 0 3px #f1e8d2,inset 0 0 0 4px #14304a88;filter:none}
nav.shortcuts .shortcut:active{transform:translateY(1px)}
.news-icon{background:transparent;border:1.5px solid var(--brass);border-radius:50%;color:var(--navy)}
.card,.item{background:#fffdf7;border-color:var(--line);border-radius:8px}
.primary{background:var(--navy);border-radius:6px}
.secondary{background:var(--cream);border:1px solid var(--line);border-radius:6px}
.back{border-color:var(--line);background:#fffdf7;border-radius:6px}
.filters button{background:#fffdf7;border-color:var(--line)}
.filters .active{background:var(--navy);border-color:var(--navy)}
.badge{background:var(--cream);color:#4d5964}
.status-new{background:#f1e5c6;color:#6b5420}
.status-progress{background:#dfe6ee;color:#14304a}
.status-done{background:#e3e8d8;color:#3d5230}
.reply{border-left-color:var(--brass);background:var(--cream)}
.shopping input{accent-color:var(--navy)}
footer{background:var(--cream);border-top:3px double var(--brass)}
.menu-panel{background:var(--paper)}
.menu-panel>button{background:var(--cream)}