:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#243446;background:#f7f8fb;--accent:#18785f;--light:#e5f5ef;--ink:#243446;--border:#e4e9ee;--card:#fff;--muted:#66788a}*{box-sizing:border-box}body{margin:0;min-height:100vh}body[data-theme="hav"]{--accent:#246aa1;--light:#e6f2fd}body[data-theme="sol"]{--accent:#95612a;--light:#fff3dd}body[data-theme="lila"]{--accent:#7554a0;--light:#f2eafa}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.45rem;letter-spacing:-.04em}h2{font-size:1.1rem;margin-bottom:12px}p{line-height:1.55}.muted{color:var(--muted)}.small{font-size:.84rem}.eyebrow{color:var(--accent);font-weight:800;font-size:.71rem;letter-spacing:.1em;text-transform:uppercase}.loading{padding:3rem;text-align:center}.shell{min-height:100vh;display:grid;grid-template-columns:235px minmax(0,1fr)}.sidebar{background:#fff;border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;gap:16px}.brand{font-size:1.38rem;font-weight:850;color:var(--accent);letter-spacing:-.04em;padding:8px}.brand small{display:block;color:var(--muted);font-size:.67rem;letter-spacing:0;font-weight:500}.nav{display:grid;gap:5px}.navbtn{border:0;text-align:left;padding:13px 14px;border-radius:13px;background:transparent;color:var(--ink);font-weight:600}.navbtn.active,.navbtn:hover{background:var(--light);color:var(--accent)}.sidenote{margin-top:auto;border-top:1px solid var(--border);padding:15px 8px;color:var(--muted);font-size:.75rem;line-height:1.6}.content{min-width:0}.topbar{height:74px;background:#fff;border-bottom:1px solid var(--border);padding:12px clamp(18px,4vw,38px);display:flex;align-items:center;justify-content:space-between;gap:14px}.topbar strong{display:block}.topbar .small{display:block}.top-actions{display:flex;gap:10px;align-items:center}.who{border-radius:99px;background:var(--light);color:var(--accent);padding:11px 14px;font-weight:750}.main{max-width:1120px;margin:auto;padding:clamp(16px,4vw,36px);padding-bottom:120px}.heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:23px}.grid{display:grid;gap:16px}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 5px 25px rgba(30,50,80,.025)}.hero{background:linear-gradient(115deg,var(--light),#fff);border:1px solid #e4ebe6;border-radius:22px;padding:25px}.hero p{max-width:620px}.metric{font-size:2.2rem;font-weight:850;color:var(--accent);letter-spacing:-.04em}.btn{border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:12px;padding:10px 14px;font-weight:700;min-height:41px}.btn:hover{border-color:var(--accent)}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover{filter:brightness(.93)}.btn.sm{font-size:.84rem;padding:7px 10px;min-height:34px}.btn.danger{color:#a13348}.btnrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.item{padding:14px 0;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.item:last-child{border-bottom:0}.item .grow{flex:1;min-width:0}.itemtitle{font-weight:750;overflow-wrap:anywhere}.itemmeta{font-size:.81rem;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}.qty{font-size:.86rem;white-space:nowrap;font-weight:700}.empty{color:var(--muted);padding:25px 12px;text-align:center;border:1px dashed var(--border);border-radius:12px}.check{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}.field{width:100%;border:1px solid #d6e0e7;background:#fff;border-radius:11px;padding:12px;color:var(--ink);min-height:44px}.field:focus{outline:2px solid var(--accent);outline-offset:1px}.label{display:grid;gap:6px;font-size:.89rem;font-weight:650}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wide{grid-column:1/-1}.tabs{display:flex;gap:5px;background:#eff2f5;border-radius:12px;padding:4px}.tabs .btn{flex:1;border:0;background:transparent;min-width:0}.tabs .btn.selected{background:#fff;color:var(--accent);box-shadow:0 1px 5px #d8e1e5}.calendarbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:15px;align-items:center}.monthgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.calhead{text-align:center;font-weight:700;color:var(--muted);font-size:.8rem;padding:8px 0}.calday{min-height:103px;border:1px solid var(--border);border-radius:9px;background:#fff;padding:8px;display:flex;flex-direction:column;align-items:stretch;gap:5px;overflow:hidden;text-align:left}.calday:hover{border-color:var(--accent)}.calday.other{opacity:.35}.calday.today{border:2px solid var(--accent)}.calday .num{font-weight:850}.chip{font-size:.75rem;background:var(--light);border-radius:6px;padding:5px 6px;overflow-wrap:anywhere;color:var(--accent)}.holiday{font-size:.69rem;color:#b54747}.dayrow{display:grid;grid-template-columns:83px 1fr;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--border)}.tag{font-size:.7rem;color:var(--accent);border-radius:30px;background:var(--light);padding:5px 9px;font-weight:800}.weeklist{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.weekcol{border:1px solid var(--border);border-radius:12px;min-height:200px;padding:8px;overflow-wrap:anywhere}.weekcol .chip{display:block;margin-top:7px}.pill{display:inline-flex;background:var(--light);color:var(--accent);padding:7px 10px;border-radius:999px;font-size:.81rem;font-weight:700}.authwrap{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(circle at 5% 15%,#e3f4ed,transparent 35%),#f7f8fb}.authcard{width:min(100%,460px)}.authcard h1{font-size:2rem}.authcard .card{padding:28px}.authcard form{display:grid;gap:13px}.auth-switch{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}.auth-switch .btn{flex:1}.hint{background:var(--light);border-radius:10px;padding:12px;font-size:.83rem;color:#395347;line-height:1.5}#notice{position:fixed;bottom:16px;right:16px;background:#273e3c;color:#fff;border-radius:12px;z-index:90;padding:12px 16px;max-width:340px;box-shadow:0 10px 35px #152c2a33;display:none}#notice.is-visible{display:block}dialog{border:0;border-radius:20px;padding:0;width:min(94vw,560px);max-height:90vh;box-shadow:0 30px 80px #172a344d}dialog::backdrop{background:#1e303b88}#modal-content{padding:24px;max-height:85vh;overflow:auto}.modalhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.modalhead h2{margin:0}.modalcontent{padding-top:17px}.module{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.module:last-child{border:0}.module .grow{flex:1}.module label{font-size:.92rem;font-weight:700}.small-link{background:none;border:0;padding:2px;color:var(--accent);text-decoration:underline}.badge{background:#edf5ef;color:#307459;border-radius:10px;padding:4px 8px;font-size:.75rem}.bottomnav{display:none}.footerline{padding-top:14px;border-top:1px solid var(--border);margin-top:14px}.privacy{background:#fff9e9;border:1px solid #f0dfae;padding:12px;border-radius:12px;font-size:.82rem;color:#765c26}.nowrap{white-space:nowrap}.hidden{display:none!important}
@media(max-width:800px){.shell{display:block}.sidebar{display:none}.topbar{height:auto;min-height:65px;padding:10px 16px}.top-actions .who{display:none}.main{padding:18px 12px 94px}.grid2,.grid3{grid-template-columns:1fr}.monthgrid{gap:2px}.calday{min-height:67px;padding:4px}.calday .chip{font-size:.59rem;padding:3px;line-height:1.25}.calhead{font-size:.72rem}.weeklist{display:grid;grid-template-columns:1fr}.weekcol{min-height:auto;display:flex;gap:10px;align-items:center}.weekcol .chip{margin-top:0;flex:1}.weekcol .muted{margin-left:auto}.bottomnav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;gap:2px;background:#fff;border-top:1px solid var(--border);padding:8px 5px max(8px,env(safe-area-inset-bottom));z-index:10}.bottomnav .btn{font-size:.72rem;flex:1;padding:5px 1px;min-height:48px;border:0}.formgrid{grid-template-columns:1fr}.topbar .small{display:none}.heading{margin-bottom:14px}.card{padding:15px;border-radius:14px}.item{flex-wrap:wrap}.item .btnrow{width:100%;justify-content:flex-end}.authcard .card{padding:20px}}

.mt12{margin-top:12px}.mt16{margin-top:16px}.mt18{margin-top:18px}

/* v0.2.1: två separata inköpslistor med tydliga markeringar */
.grocery-summary{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.grocery-section{margin-bottom:16px}
.grocery-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.grocery-section-head h2{margin:0}
.grocery-completed{background:#f9fcfa}
.grocery-completed .itemtitle{text-decoration:line-through;text-decoration-color:#a7b8ac;color:#527165}
.grocery-completed .badge{background:#e3f2e9}
.grocery-section .btnrow{flex-shrink:0}
@media(max-width:800px){.grocery-section{margin-bottom:14px}.grocery-summary{margin-bottom:12px}.grocery-section .item{gap:8px}.grocery-section .item .btnrow{justify-content:flex-start;padding-left:28px}}

/* v0.2.2: suggestions directly below the grocery name field. */
.grocery-suggestions[hidden]{display:none!important}
.grocery-suggestions{border:1px solid var(--border);border-radius:12px;background:var(--card);max-height:225px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 8px 18px #1a30301c}
.grocery-suggestion{border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--ink);width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:48px;padding:11px 12px}
.grocery-suggestion:last-child{border-bottom:0}
.grocery-suggestion.active,.grocery-suggestion:hover,.grocery-suggestion:focus-visible{background:var(--light);outline:none}
.grocery-suggest-name{font-size:.94rem;font-weight:720;overflow-wrap:anywhere}
.grocery-suggest-detail{font-size:.76rem;font-weight:450;color:var(--muted);text-align:right}
.grocery-help{font-size:.77rem;font-weight:450;color:var(--muted)}
@media(max-width:550px){.grocery-suggestion{flex-direction:column;align-items:flex-start;gap:3px}.grocery-suggest-detail{text-align:left}}

/* v0.3: barnens belöningsmål, stor framstegsmätare och tydlig mobilvy */
.star-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.star-card{display:flex;flex-direction:column;gap:14px}
.star-person{display:flex;align-items:center;gap:13px}.star-person h2,.star-prize h3{margin:0}.star-person p{margin:4px 0 0}
.star-avatar{font-size:2.2rem;display:grid;place-items:center;background:#fff5da;width:65px;height:65px;border-radius:20px}
.star-prize{display:flex;align-items:center;gap:14px}.star-prize-img,.star-prize-empty{height:110px;width:110px;object-fit:cover;border-radius:15px;background:#fff6dd;border:1px solid #ead9a8;flex-shrink:0}.star-prize-empty{display:grid;place-items:center;font-size:3rem}
.star-tally{font-size:2.1rem;font-weight:850;letter-spacing:-.035em;color:#9d691b}.star-tally span{font-size:1rem;color:var(--muted);font-weight:650}
/* Native <progress> is accessible and updates its width without blocked inline styles. */
.star-progress{display:block;width:100%;height:17px;appearance:none;-webkit-appearance:none;background:#eee9db;border:0;border-radius:99px;overflow:hidden}
.star-progress::-webkit-progress-bar{background:#eee9db;border-radius:99px}
.star-progress::-webkit-progress-value{background:linear-gradient(90deg,#d8941f,#ffd35a);border-radius:99px}
.star-progress::-moz-progress-bar{background:linear-gradient(90deg,#d8941f,#ffd35a);border-radius:99px}
.star-remaining{font-weight:700;color:#865915;margin:0}.star-nogoal{display:grid;gap:12px;padding-top:12px}
.star-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.star-section-head h2{margin:0}
.star-task-info{color:#93651d;background:#fff8e9;padding:5px 9px;border-radius:8px;font-size:.81rem;font-weight:700;margin-top:7px;display:inline-block}
@media(max-width:650px){.star-prize-img,.star-prize-empty{height:90px;width:90px}.star-card{padding:18px}}

/* v0.3.1 member administration */
.member-admin{margin-bottom:18px}
.member-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.member-head h2{margin:0 0 5px}.member-head p{margin:0}
.member-row{gap:12px}.member-avatar{height:39px;width:39px;flex-shrink:0;display:grid;place-items:center;background:var(--light);color:var(--accent);border-radius:50%;font-weight:800}.child-avatar{background:#fff0c9;color:#8d6415}
.member-row .btnrow{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){.member-row .btnrow{width:100%;justify-content:flex-start;padding-left:50px}.member-head .btnrow{width:100%}.member-head .btnrow button{flex:1}}

/* v0.3.2: bildförhandsvisning och felstatus synlig i dialogen */
.photo-preview{display:flex;align-items:center;gap:12px;background:#f7faf8;border:1px solid var(--border);border-radius:12px;padding:10px;min-width:0}
.photo-preview[hidden]{display:none}
.photo-preview img{width:90px;height:90px;object-fit:cover;border-radius:9px}
.photo-preview span{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.photo-status{margin:0;font-size:.87rem;color:var(--accent);min-height:1.5em}
.photo-status.error{color:#a13348;font-weight:700}

/* v0.4 Uppdragspool, bonusuppdrag och tidtagning */
.mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:13px;margin-top:13px}
.mission-card{border:1px solid var(--border);border-radius:16px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:11px;min-width:0}
.mission-card h3{margin:8px 0 2px;font-size:1.13rem}
.mission-card p{margin:0;overflow-wrap:anywhere}
.mission-top{display:flex;gap:12px;justify-content:space-between;align-items:start}
.mission-prize-img{width:76px;height:76px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.mission-requirements{background:#f1f8f5;padding:12px;border-radius:11px}
.mission-rewards{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mission-card .btnrow{margin-top:auto;flex-wrap:wrap}
.mission-timer{display:flex;flex-direction:column;gap:3px;background:#f2f6f9;border-radius:13px;padding:12px;text-align:center}
.mission-clock{font-size:1.7rem;font-weight:850;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.mission-summary{margin-bottom:16px;max-width:640px}
.mission-summary p{margin-bottom:0}
.mission-box{margin:0;border:1px solid var(--border);border-radius:12px;padding:14px}
.mission-box legend{font-weight:750;padding:0 8px}
.mission-box .formgrid{margin:7px 0}
.mission-check{display:flex;gap:9px;align-items:center;min-height:35px;font-size:.91rem}
.mission-check input{accent-color:var(--accent);width:18px;height:18px}
.success-text{color:#1b784e;font-weight:700}
.warning-text{color:#9d6720;font-weight:700}
@media(max-width:600px){.mission-grid{grid-template-columns:1fr}.mission-card{padding:13px}.mission-clock{font-size:1.5rem}}

/* Alla aktiva moduler ska gå att nå även på mobil utan dold sidomeny. */
@media(max-width:800px){.bottomnav{justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain}.bottomnav .navbtn{flex:0 0 auto;min-width:82px;white-space:nowrap}}

/* Kalenderfilter och separat stjärnuppgiftsavsnitt v0.4.2 */
.calendar-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 18px;}
.calendar-filters .label{margin:0;}
.reward-details{padding:16px;background:var(--light);border:1px solid #dce7e2;border-radius:14px;}
.reward-details .label{margin-top:12px;}
@media(max-width:650px){.calendar-filters{grid-template-columns:1fr;}}

.task-description{margin-top:7px;line-height:1.4}.task-criteria{margin-top:6px;padding:8px;background:var(--light);border-radius:8px;line-height:1.4}

/* v0.4.3: readable theme variants and categorised event reminders */
:root{--page:#f7f8fb;--surface:#fff;--surface-muted:#f0f3f6;--field-border:#d6e0e7}
body{background:var(--page);color:var(--ink)}
.sidebar,.topbar,.bottomnav{background:var(--surface)}
.card,.calday,.btn,.field{background:var(--surface);color:var(--ink)}
.tabs{background:var(--surface-muted)}.tabs .btn.selected{background:var(--surface)}
.grocery-completed{background:var(--surface)}
.field{border-color:var(--field-border)}
.event-tone{border-inline-start:4px solid var(--event-color)!important;background:var(--event-bg)!important;color:var(--ink)!important}
.tone-blue{--event-color:#347ac1;--event-bg:#e7f2fe}
.tone-green{--event-color:#268260;--event-bg:#e1f5e9}
.tone-orange{--event-color:#bd6f20;--event-bg:#fff0dc}
.tone-pink{--event-color:#af4279;--event-bg:#fdeaf2}
.tone-purple{--event-color:#7955b0;--event-bg:#eee8fb}
.tone-red{--event-color:#bd4c50;--event-bg:#fce9e8}
.calday .event-tone{display:block;width:100%;text-align:start}
body[data-appearance="dark"]{--page:#101922;--card:#182633;--surface:#182633;--surface-muted:#293b48;--ink:#f2f6f9;--border:#3a4a56;--field-border:#566874;--muted:#afc1ce;--light:#203f3b;--accent:#8fe4c7;color-scheme:dark}
body[data-appearance="dark"][data-theme="hav"]{--accent:#9bccfa;--light:#1b3850}
body[data-appearance="dark"][data-theme="sol"]{--accent:#ffca84;--light:#4a3825}
body[data-appearance="dark"][data-theme="lila"]{--accent:#d7b8ff;--light:#342b4d}
body[data-appearance="dark"] .hero{background:linear-gradient(115deg,var(--light),var(--surface));border-color:var(--border)}
body[data-appearance="dark"] .tabs .btn.selected{box-shadow:none}
body[data-appearance="dark"] .hint,body[data-appearance="dark"] .privacy{background:#243544;color:var(--ink);border-color:var(--border)}
body[data-appearance="dark"] .badge{background:var(--light);color:var(--accent)}
body[data-appearance="dark"] .grocery-completed .itemtitle{color:var(--muted)}
body[data-appearance="dark"] .event-tone{--event-bg:#293744}
body[data-appearance="dark"] .navbtn{color:var(--ink)}
body[data-appearance="dark"] .btn.primary{background:#176e59;color:#fff;border-color:#176e59}
body[data-appearance="dark"] .btn.danger{color:#ffa3af}
body[data-appearance="dark"] .holiday{color:#ff9da6}
body[data-appearance="dark"] .chip:not(.event-tone){background:var(--light);color:var(--accent)}
body[data-appearance="dark"] dialog{background:var(--surface);color:var(--ink)}
@media(prefers-color-scheme:dark){body[data-appearance="system"]{--page:#101922;--card:#182633;--surface:#182633;--surface-muted:#293b48;--ink:#f2f6f9;--border:#3a4a56;--field-border:#566874;--muted:#afc1ce;--light:#203f3b;--accent:#8fe4c7;color-scheme:dark}body[data-appearance="system"] .hero{background:linear-gradient(115deg,var(--light),var(--surface));border-color:var(--border)}body[data-appearance="system"] dialog{background:var(--surface);color:var(--ink)}body[data-appearance="system"] .event-tone{--event-bg:#293744}body[data-appearance="system"] .hint,body[data-appearance="system"] .privacy{background:#243544;color:var(--ink);border-color:var(--border)}body[data-appearance="system"] .badge{background:var(--light);color:var(--accent)}}
/* Avatarverkstaden, första versionen */
.profile-avatar{display:block;width:100%;height:100%;max-width:100%;max-height:100%;flex:0 0 auto}
.avatar-mini{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--surface-muted);border:1px solid var(--border)}
.avatar-mini .profile-avatar{width:42px;height:42px}
.member-avatar.avatar-mini{padding:0;background:var(--surface-muted)}
.avatar-preview{margin:auto;width:190px;height:190px;border-radius:50%;overflow:hidden;box-shadow:0 8px 30px #1e2c3929}
.avatar-builder{display:grid;gap:18px}
.avatar-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.avatar-builder .avatar-advanced{display:none;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border-top:1px solid var(--border);padding-top:12px}
.avatar-builder.show-advanced .avatar-advanced{display:grid}
.avatar-checkbox{display:flex;align-items:center;gap:8px;font-size:.89rem}
.avatar-editor-hint{text-align:center;font-size:.81rem;color:var(--muted)}
@media(max-width:500px){.avatar-controls,.avatar-builder .avatar-advanced{grid-template-columns:1fr}.avatar-preview{width:160px;height:160px}}

/* v0.4.4: tydlig återkomst, palett och namngivna inköpslistor */
.tone-teal{--event-color:#157f85;--event-bg:#d9f4f4}
.tone-yellow{--event-color:#866009;--event-bg:#fff2bd}
.tone-coral{--event-color:#b8533d;--event-bg:#fee9df}
.tone-indigo{--event-color:#4c60a4;--event-bg:#e6eaff}
.tone-brown{--event-color:#896035;--event-bg:#f2e9db}
.tone-gray{--event-color:#566573;--event-bg:#e9eef2}
.event-color-preview{display:block;border-radius:10px;background:var(--event-bg,#e7f2fe);color:var(--event-color,#347ac1);border-left:6px solid var(--event-color,#347ac1);font-weight:700;padding:9px 13px;font-size:.84rem}
.repeat-box{border:1px solid var(--border);border-radius:14px;background:var(--light);padding:15px;display:grid;gap:8px}
.repeat-box[hidden]{display:none!important}.repeat-box p{margin:0;font-weight:550}
.grocery-lists-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.grocery-lists-bar .tabs{min-width:0;max-width:100%}.grocery-lists-bar .tabs .btn{white-space:normal}
.shopping-list-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;margin-bottom:8px;scrollbar-width:thin}
.shopping-list-tabs .btn{flex-shrink:0;background:var(--card);white-space:nowrap;text-align:left;display:grid;gap:1px;min-width:115px}
.shopping-list-tabs .btn.selected{background:var(--light);color:var(--accent);border-color:var(--accent)}
.shopping-list-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.shopping-list-title h2{margin:0 0 2px}.shopping-list-title p{margin:0}
.grocery-completed .history-check{color:var(--accent);font-size:1.2rem;font-weight:800}
@media(max-width:650px){.grocery-lists-bar>*{width:100%}.grocery-lists-bar .tabs{width:100%}.shopping-list-title .btnrow{width:100%}.shopping-list-title .btnrow .btn{flex:1}}

/* v0.4.5: grocery routes grouped by category, easy in-list addition */
.grocery-category{margin:8px 0 15px;padding:0 0 3px}
.grocery-category + .grocery-category{border-top:1px solid var(--border);padding-top:13px}
.grocery-category-head{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--light);color:var(--ink);padding:8px 12px;border-radius:10px;flex-wrap:wrap}
.grocery-category-head h3{font-size:.91rem;margin:0;font-weight:750}
.grocery-category-head .btn{min-width:32px;padding:4px 9px}
.grocery-category .grocery-item{padding-left:8px;padding-right:8px}
.grocery-section-head .btnrow{gap:10px;align-items:center}
.grocery-summary .small{align-self:center}
@media(max-width:560px){.grocery-section-head .btnrow{width:100%;justify-content:space-between}.grocery-section-head .btn.primary{flex:1}}

/* v0.4.7: genuine full-surface dark mode. Shared tokens for explicit dark and
   system-dark, retaining explicit light on devices with dark OS settings. */
body[data-appearance="dark"]{
  --page:#101922;--surface:#182633;--card:#182633;--surface-muted:#273746;
  --ink:#f2f6f9;--border:#3a4a56;--field-border:#566874;--muted:#afc1ce;
  --light:#203f3b;--accent:#8fe4c7;--subtle-gold:#453b26;
  color-scheme:dark;
}
body[data-appearance="dark"] .authwrap{background:radial-gradient(circle at 5% 15%,#203d3b,transparent 35%),var(--page)}
body[data-appearance="dark"] :is(.sidebar,.topbar,.bottomnav,.card,.calday,.btn:not(.primary),.field,.mission-card,.grocery-completed,.star-card,.photo-preview,.mission-timer,.mission-requirements,.tabs .selected,.hero,.authcard,.weekcol){background-color:var(--surface);color:var(--ink);border-color:var(--border)}
body[data-appearance="dark"] :is(.mission-timer,.mission-requirements,.photo-preview,.grocery-completed,.grocery-category-head,.reward-details,.repeat-box){background-color:var(--surface-muted);color:var(--ink);border-color:var(--border)}
body[data-appearance="dark"] :is(.calday,.weekcol,.btn,.field,.item,.monthgrid){color:var(--ink)}
body[data-appearance="dark"] .hero{background:linear-gradient(115deg,var(--light),var(--surface));border-color:var(--border)}
body[data-appearance="dark"] :is(.tabs,.auth-switch){background:var(--surface-muted)}
body[data-appearance="dark"] :is(.tabs .btn.selected,.badge,.pill,.tag,.star-task-info,.star-avatar,.child-avatar){background:var(--light);color:var(--accent)}
body[data-appearance="dark"] :is(.star-remaining,.star-tally,.star-task-info,.success-text){color:#f1c57e}
body[data-appearance="dark"] .warning-text{color:#ffd39d}
body[data-appearance="dark"] .empty{background:var(--surface);border-color:var(--border)}
body[data-appearance="dark"] .event-tone{--event-bg:#293744}
body[data-appearance="dark"] .btn.primary{background:#176e59;color:#fff;border-color:#176e59}
body[data-appearance="dark"] .hint,body[data-appearance="dark"] .privacy{background:#243544;color:var(--ink);border-color:var(--border)}
body[data-appearance="dark"] .photo-status.error{color:#ffadb4}
body[data-appearance="dark"] dialog{background:var(--surface);color:var(--ink)}
@media (prefers-color-scheme:dark){
  body[data-appearance="system"]{
    --page:#101922;--surface:#182633;--card:#182633;--surface-muted:#273746;
    --ink:#f2f6f9;--border:#3a4a56;--field-border:#566874;--muted:#afc1ce;
    --light:#203f3b;--accent:#8fe4c7;color-scheme:dark;
  }
  body[data-appearance="system"] .authwrap{background:radial-gradient(circle at 5% 15%,#203d3b,transparent 35%),var(--page)}
  body[data-appearance="system"] :is(.sidebar,.topbar,.bottomnav,.card,.calday,.btn:not(.primary),.field,.mission-card,.grocery-completed,.photo-preview,.mission-timer,.mission-requirements,.tabs .selected,.weekcol){background-color:var(--surface);color:var(--ink);border-color:var(--border)}
  body[data-appearance="system"] :is(.mission-timer,.mission-requirements,.photo-preview,.grocery-category-head,.reward-details,.repeat-box){background-color:var(--surface-muted);color:var(--ink);border-color:var(--border)}
  body[data-appearance="system"] .hero{background:linear-gradient(115deg,var(--light),var(--surface));border-color:var(--border)}
  body[data-appearance="system"] :is(.tabs,.auth-switch){background:var(--surface-muted)}
  body[data-appearance="system"] :is(.tabs .btn.selected,.badge,.pill,.tag,.star-task-info,.star-avatar,.child-avatar){background:var(--light);color:var(--accent)}
  body[data-appearance="system"] :is(.star-remaining,.star-tally,.star-task-info,.success-text){color:#f1c57e}
  body[data-appearance="system"] .warning-text{color:#ffd39d}
  body[data-appearance="system"] .event-tone{--event-bg:#293744}
  body[data-appearance="system"] .btn.primary{background:#176e59;color:#fff;border-color:#176e59}
  body[data-appearance="system"] .hint,body[data-appearance="system"] .privacy{background:#243544;color:var(--ink);border-color:var(--border)}
  body[data-appearance="system"] dialog{background:var(--surface);color:var(--ink)}
}

html[data-ui-dark="true"]{color-scheme:dark;background:#101922}
html[data-ui-dark="false"]{color-scheme:light;background:#f7f8fb}

/* v0.4.9: separate family packing lists, touch-friendly and theme-safe */
.pack-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:700px;margin-bottom:18px}
.pack-top .field{width:100%}
.pack-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:14px 0}
.pack-toolbar h2{margin:0}
.pack-toolbar .btnrow{flex-wrap:wrap}
.pack-progress{width:min(300px,100%);height:14px;accent-color:var(--accent)}
.pack-calendar-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--border);padding:15px 0;margin-top:14px}
.pack-done{text-decoration:line-through;color:var(--muted)}
.pack-item{gap:10px;align-items:center}
.pack-item .btnrow{flex-wrap:wrap}
@media(max-width:800px){.pack-top{grid-template-columns:1fr}.pack-item .btnrow{width:100%;justify-content:flex-start}.pack-item .btn{min-height:42px}.pack-calendar-cta .btn{min-height:44px}}

/* v0.4.9: shared color coding for groceries and packing; no inline styles/CSP violations. */
.list-tone-blue{--list-tint:#e1f1ff;--list-ink:#18537d;--list-accent:#59a8dc}
.list-tone-green{--list-tint:#def4e8;--list-ink:#205c42;--list-accent:#399d6f}
.list-tone-purple{--list-tint:#f0e8ff;--list-ink:#583c84;--list-accent:#a58ad8}
.list-tone-orange{--list-tint:#fff0da;--list-ink:#855110;--list-accent:#e7a94d}
.list-tone-pink{--list-tint:#ffe8f1;--list-ink:#8c3760;--list-accent:#e295b7}
.list-tone-yellow{--list-tint:#fff6cf;--list-ink:#6b5a12;--list-accent:#d8bd45}
.shopping-list-tabs .btn[class*="list-tone-"],.shopping-list-title[class*="list-tone-"],.list-status-panel[class*="list-tone-"]{
  background:var(--list-tint);color:var(--list-ink);border:1px solid var(--list-accent);
}
.shopping-list-tabs .btn.selected[class*="list-tone-"]{box-shadow:inset 0 0 0 2px var(--list-accent);border-width:2px}
.shopping-list-tabs .btn[class*="list-tone-"] .small,.shopping-list-title[class*="list-tone-"] .small,.list-status-panel[class*="list-tone-"] .small{color:inherit;opacity:.85}
.list-status-panel{padding:14px;border-radius:14px}
body[data-appearance="dark"] .list-tone-blue{--list-tint:#20374a;--list-ink:#c7e7ff;--list-accent:#60b1ec}
body[data-appearance="dark"] .list-tone-green{--list-tint:#1c3b35;--list-ink:#b9f5d9;--list-accent:#4abe8e}
body[data-appearance="dark"] .list-tone-purple{--list-tint:#342a47;--list-ink:#eee0ff;--list-accent:#b99bec}
body[data-appearance="dark"] .list-tone-orange{--list-tint:#4b3725;--list-ink:#ffe0b5;--list-accent:#d8a258}
body[data-appearance="dark"] .list-tone-pink{--list-tint:#482b3c;--list-ink:#ffcfdf;--list-accent:#ec9ebd}
body[data-appearance="dark"] .list-tone-yellow{--list-tint:#47402a;--list-ink:#fff1a4;--list-accent:#e4c857}
body[data-appearance="dark"] .shopping-list-tabs .btn[class*="list-tone-"],body[data-appearance="dark"] .shopping-list-title[class*="list-tone-"],body[data-appearance="dark"] .list-status-panel[class*="list-tone-"]{background:var(--list-tint);color:var(--list-ink);border-color:var(--list-accent)}
@media (prefers-color-scheme:dark){
 body[data-appearance="system"] .list-tone-blue{--list-tint:#20374a;--list-ink:#c7e7ff;--list-accent:#60b1ec}
 body[data-appearance="system"] .list-tone-green{--list-tint:#1c3b35;--list-ink:#b9f5d9;--list-accent:#4abe8e}
 body[data-appearance="system"] .list-tone-purple{--list-tint:#342a47;--list-ink:#eee0ff;--list-accent:#b99bec}
 body[data-appearance="system"] .list-tone-orange{--list-tint:#4b3725;--list-ink:#ffe0b5;--list-accent:#d8a258}
 body[data-appearance="system"] .list-tone-pink{--list-tint:#482b3c;--list-ink:#ffcfdf;--list-accent:#ec9ebd}
 body[data-appearance="system"] .list-tone-yellow{--list-tint:#47402a;--list-ink:#fff1a4;--list-accent:#e4c857}
 body[data-appearance="system"] .shopping-list-tabs .btn[class*="list-tone-"],body[data-appearance="system"] .shopping-list-title[class*="list-tone-"],body[data-appearance="system"] .list-status-panel[class*="list-tone-"]{background:var(--list-tint);color:var(--list-ink);border-color:var(--list-accent)}
}

/* Safe fallback while the avatar drawing module is disabled */
.profile-avatar-fallback{display:inline-grid;place-items:center;width:100%;height:100%;min-width:24px;min-height:24px;border-radius:50%;font-size:1.3rem;background:var(--surface,#e7f0ec)}

/* v0.4.13: searchable guidance and distinct child landing page */
.child-home{min-height:100vh;padding:24px;display:flex;align-items:flex-start;justify-content:center}
.child-home .child-panel{max-width:860px;width:100%;margin:0 auto;padding:clamp(18px,4vw,36px)}
.child-panel .grid{margin-top:18px}
.help-entry{border:1px solid var(--border,#d9e2e8);border-radius:12px;margin:12px 0;padding:12px 16px}
.help-entry summary{cursor:pointer;font-weight:700}
.help-entry p{line-height:1.6;margin:10px 0 0}
@media(max-width:600px){.child-panel .grid{display:block}.child-panel .grid .card{margin:12px 0}.child-home{padding:12px}}

/* v0.4.16: tydlig serveravbrottsvarning som blockerar osparbara ändringar */
#server-offline{position:fixed;inset:0;z-index:500;background:#0b1d29bd;display:grid;place-items:center;padding:20px}
#server-offline .offline-panel{background:var(--surface,#fff);color:var(--ink,#1c3447);border:2px solid #bf6371;border-radius:18px;max-width:510px;padding:26px;box-shadow:0 20px 80px #0005;line-height:1.5}
#server-offline h2{margin-top:0}#server-offline .btn{margin-top:10px}
.new-adult-invite{margin-top:16px}.new-adult-invite .btnrow{margin-top:12px}.new-adult-invite .label{margin-top:9px}

/* v0.4.17: accessible account controls and family login setup. */
.login-guide{margin-bottom:18px;border-color:var(--accent)}
.login-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.login-guide-grid>div{border:1px solid var(--border);border-radius:13px;padding:15px}
.login-guide-grid p{margin:8px 0 14px}
.account-logout{white-space:nowrap;border-color:var(--accent)}
@media(max-width:700px){.login-guide-grid{grid-template-columns:1fr}.top-actions{gap:5px}.top-actions .btn{padding:7px 9px;font-size:.78rem}}

.child-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Accessible child controls: large targets for younger users. */
.child-playful .btn{min-height:48px;font-size:1.08rem}.child-playful h2{font-size:1.4rem}.child-panel .card{margin-top:18px}.child-panel .item{align-items:flex-start}.child-detailed .item{font-size:.95rem}
.web-test-notice{padding:10px 16px;text-align:center;background:#fff2cf;color:#624813;border-bottom:1px solid #e8d399;font-size:.85rem;line-height:1.5}

/* Clear registration entry on the signed-out landing page. */
.signup-entry{margin-top:24px;padding:20px;border:1px solid var(--accent);border-radius:14px;background:var(--surface)}
.signup-entry h2{margin-top:0}.signup-entry p{line-height:1.6}.signup-entry a{text-decoration:none;display:inline-flex}