/* Two coherent compositions; shared accessible controls and independent palette tokens. */
:root{--accent:#A5E6D0;--accent-alt:#E986A8;--bg:#10191C;--surface:#19262A;--surface-raised:#223439;--deep:#16434A;--paper:#E9F0EF;--ink:#182326;--line:#A5E6D030;--muted:#B5C3C7;--hand:'Segoe Print','Bradley Hand','Chalkboard SE',cursive}
html,body{background:var(--bg);color:var(--paper)}body{font-family:Inter,'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
body aside{width:232px;background:var(--bg);border-right:1px solid var(--line);padding:26px 18px 20px;z-index:50}body .brand{display:flex;flex-direction:column;align-items:center;padding:0;text-align:center}body .brand .brandLogo{display:block;width:198px;height:auto;max-height:none;object-fit:contain}body .brand .brandClaim{display:block;width:100%;text-align:center;font:11px system-ui;letter-spacing:1px;margin:10px 0 0;padding:0}body .brandClaim em{color:var(--accent-alt);font-style:normal}body aside nav{margin-top:32px}body nav button{border:0;background:transparent;color:var(--paper);padding:12px 14px;min-height:50px;gap:12px;border-radius:9px;text-align:left}body nav button.active{background:var(--deep);border:0;color:var(--accent);padding-left:18px;min-height:54px}body nav button.active::before{width:3px;left:5px;top:12px;bottom:12px;background:var(--accent)}body nav button .navicon,body .accountIcon,body .accountButton .accountIcon{background:none!important;color:var(--accent);width:25px;height:25px;border-radius:0;padding:0}body .navicon svg{width:23px;height:23px;stroke-width:1.6}body nav button .navlabel{font-size:13px}body nav button .navlabel small{font-size:10px;color:var(--muted)}body .personalNav{border-top:1px solid var(--line);margin-top:22px;padding-top:15px}body .personalNav button{color:var(--paper);border:0;background:none;text-align:left;min-height:44px;font-size:12px;padding:10px 12px}body .sidefoot{color:var(--muted);border:0;font-size:10px}body .dot{background:var(--accent)}
body main{margin-left:232px;padding:24px clamp(20px,3vw,52px) 28px;max-width:none;min-width:0}body main>header{padding:0 0 20px;min-height:55px;gap:12px;border:0;display:flex;align-items:center;justify-content:space-between;background:transparent}body .appcontext{font-size:12px;gap:12px;min-width:0}body .appcontext .headerLogo{width:86px;height:30px;object-fit:contain;display:none}body .accountActions{gap:7px;flex-wrap:wrap;justify-content:flex-end}body .accountButton{background:transparent;border:1px solid var(--line);color:var(--paper);border-radius:8px;padding:8px 11px;min-height:44px;font-size:11px}body #chooseHousehold{padding:8px 11px;gap:10px}body .householdChevron{color:var(--accent)}body .content{display:block;margin:0;padding:0}body .panel{background:none;border:0;border-radius:0;overflow:visible;box-shadow:none}body .panelhead{padding:16px 0 24px;border:0;gap:20px;align-items:flex-end}body .panelhead h2{font-size:clamp(32px,4vw,62px);line-height:1.05;letter-spacing:-2px;margin:5px 0 0;max-width:100%;overflow-wrap:break-word}body .eyebrow{color:var(--accent);font-size:10px;letter-spacing:2px}body .panelhead h2::after{content:'.';color:var(--accent-alt)}body main[data-view=home] .panelhead{display:none}body .listActions{flex-wrap:wrap;gap:8px}body .primary,body .panelhead #add,body #submit{background:var(--accent);color:var(--ink);border:1px solid transparent;font-size:12px;font-weight:650;min-height:44px;border-radius:8px;padding:12px 18px;box-shadow:none}body .secondary{background:var(--surface);color:var(--paper);border:1px solid var(--line);border-radius:8px;min-height:44px;padding:10px 14px;box-shadow:none}body .quiet,body .empty,body .authhint{color:var(--muted);font-size:13px;line-height:1.65}body .empty{padding:38px 18px;text-align:left;border-top:1px solid var(--line)}body .empty b{color:inherit;display:block;font-size:20px;margin-bottom:8px}body #readingTools{padding:0 0 10px;gap:8px}body #readingTools .secondary{background:none;border:0;padding:8px 0;color:var(--muted);font-size:11px}body #listTools{padding:0 0 10px;gap:8px}body #chooseList{flex:0 1 auto;min-width:190px}body #filters{padding:8px 0 20px;margin:0;gap:8px;border:0;flex-wrap:wrap}body #filters button{min-width:78px;padding:10px 17px;min-height:44px;border-radius:8px;background:transparent;border:1px solid var(--line);color:var(--paper)}body #filters button.active{background:var(--accent);color:var(--ink);border-color:transparent}body #filters button.active::after{display:none}body #selectionBar{padding:14px;background:var(--deep);border-radius:8px;margin-bottom:12px;position:sticky;top:8px;z-index:20}body #selectionBar .secondary{border-color:var(--line)}
body .dashboard{padding:0}body .dashboardWelcome{background:transparent;border:0;box-shadow:none;border-radius:0;padding:20px 0 36px;margin:0;align-items:flex-end;gap:20px;position:relative}body .dashboardWelcome h2{font-size:clamp(46px,6.4vw,94px);letter-spacing:-3px;line-height:.97;margin:0 0 18px;font-weight:750}body .dashboardWelcome .personalHello,body .dashboardWelcome .personalName{display:block}body .dashboardWelcome .personalName{color:var(--accent-alt)}body .dashboardWelcome p{font-size:15px;color:var(--paper);margin:0}body .dashboardWelcome>button{background:none;border:0;color:var(--muted);font-size:11px;padding:10px 0}body .personalDashboard{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 28px}body .personalDashboard>*{min-width:0;grid-column:span 6}body .personalDashboard>.dashboardStats{grid-column:1/-1}body .dashboardStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:18px 0;border-block:1px solid var(--line);margin:0}body .dashboardStats button{display:grid;grid-template-columns:28px 1fr;gap:6px 12px;background:none;border:0;border-right:1px solid var(--line);border-radius:0;padding:4px 20px;text-align:left;color:var(--paper);box-shadow:none}body .dashboardStats button:first-child{padding-left:0}body .dashboardStats button:last-child{border:0}body .dashboardStats .navicon{grid-row:1/3;align-self:center;background:none;color:var(--accent);width:26px}body .dashboardStats strong{font:700 31px system-ui;color:var(--accent);line-height:1}body .dashboardStats button>span:last-child{font-size:11px;color:var(--muted)}body .dashBlock{padding:20px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;position:relative;isolation:isolate}body .dashSectionHead{gap:10px;margin-bottom:12px}body .dashSectionHead h3{font-size:20px;letter-spacing:-.6px;margin:0}body .dashSectionHead button,body .photoDetails{color:var(--accent);font-size:11px;background:none;border:0;min-height:44px}body .dashItem{padding:12px 0;border-bottom:1px solid var(--line);gap:16px}body .dashItem span{font-size:14px}body .dashItem small{font-size:11px;color:var(--muted)}body .dashBlock>.primary{margin-top:20px}body .todayDish{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 0;border:0;background:none}body .todayDish img{width:96px;height:80px;object-fit:cover;border-radius:5px}body .todayDish strong{font-size:24px;line-height:1.3}body .dashboardWeek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;background:none;border:0;padding:0}body .miniDay{background:var(--surface);border:0;border-radius:6px;padding:12px 6px;color:var(--paper);min-height:122px;text-align:left;display:flex;flex-direction:column;gap:6px}body .miniDay b{color:var(--accent);font-size:15px}body .miniDay small{font-size:10px;color:var(--muted)}body .miniDay span{font-size:10px;line-height:1.5;overflow-wrap:break-word}body .miniDay img{width:32px;height:32px;object-fit:cover}body .sectionSketch{position:absolute;right:12px;bottom:10px;opacity:.16;pointer-events:none;z-index:-1;transform:rotate(-12deg)}body .sectionSketch svg{width:62px;height:62px;color:var(--accent);stroke-width:1}
body #list:not(.dashboard):not(.weekboard):not(.slatePlanner):not(.stockShelf){padding:0;background:none;border:0}body .row{display:flex;align-items:center;gap:16px;min-height:72px;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;border-radius:0;color:var(--paper)}body .row>div:first-of-type{flex:1;min-width:0}body .row .name{font-size:18px;line-height:1.35;font-weight:500;overflow-wrap:break-word}body .row small{font-size:11px;color:var(--muted);line-height:1.5;margin:4px 0 0}body .row .amount{font-size:14px;max-width:220px;color:inherit;text-align:right}body .tag{background:var(--deep);color:var(--accent);border-radius:4px;display:inline-block;padding:5px 8px;margin-left:8px;font-size:10px}body .check{border:1px solid var(--accent);background:none;width:25px;height:25px;min-width:25px;border-radius:50%;color:var(--ink);flex-shrink:0}body .done .check{background:var(--accent);border-color:var(--accent)}body .done .name{color:var(--muted)}body .edit{background:none;border:0;color:var(--accent);min-height:44px;min-width:44px;font-size:18px}body .panelbottom{border:0;padding:16px 0;color:var(--muted);font-size:11px}body .selectHit{min-width:44px;min-height:44px;display:flex;align-items:center;margin:0}body input[type=checkbox],body input[type=radio]{accent-color:var(--accent)}
/* Recipe index, stock and prep carry the same composition, with their own density. */
body main[data-view=recipe] #list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}body main[data-view=recipe] .row{display:flex;flex-wrap:wrap;align-items:flex-start;background:var(--surface);padding:22px;min-height:180px;border:0;border-radius:8px}body main[data-view=recipe] .row .name{font-size:25px}body main[data-view=recipe] .row small{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}body .stocksummary,body .prepsummary{padding:20px 0;background:none;border:0;border-block:1px solid var(--line);border-radius:0;margin:0 0 24px;color:var(--paper)}body .stocksummary small,body .prepsummary small{color:var(--muted)}body .prepsummary h3{font-size:36px;color:var(--accent)}body .prepsummary a{color:var(--accent)}body .stockShelf{display:block;padding:0;background:none}body .shelfLevel{padding:12px 0 24px;margin:0 0 20px;border:0;background:none}body .shelfLevel h3{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin:12px 0 18px}body .shelfProducts{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px;padding:0 0 18px;border-bottom:8px solid var(--surface-raised);box-shadow:0 5px 0 #0003}body .shelfProduct{flex:1 1 140px;max-width:230px;min-height:155px;background:var(--surface);border:1px solid var(--line);border-radius:40px 40px 8px 8px;padding:25px 15px 12px;display:flex;flex-direction:column;gap:7px;color:var(--paper);box-shadow:none}body .shelfProduct strong{font-size:17px}body .shelfProduct span,body .shelfProduct small{font-size:11px;color:var(--muted)}body .productPhoto img{width:80px;height:80px;object-fit:cover}body .productActions{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
/* Calendars and the existing reusable-magnet model. Explicit magnet colors stay untouched. */
body #list.weekboard{padding:0;background:none;border:0;display:block}body .weekControls{padding:0 0 20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}body .calendarDays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;background:none;border:0}body .calendarDay{padding:14px 10px;min-width:0;border:0;border-left:1px solid var(--line);border-radius:0;background:none}body .calendarDate{display:flex;flex-direction:column;gap:7px;padding:0 0 16px}body .calendarDate b{font-size:13px;color:var(--accent)}body .calendarDate span{font-size:11px;color:var(--muted)}body .calendarMeal{padding:12px 8px;background:var(--surface);border:0;border-radius:5px;margin-bottom:8px;color:var(--paper);font-size:13px;overflow-wrap:break-word}body .dayAdd{background:none;border:1px dashed var(--line);color:var(--accent);min-height:44px;width:100%;border-radius:6px}body #list.slatePlanner{padding:0;container:slate-layout / inline-size;font-family:inherit;color:var(--paper);display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0 24px}body .slateBar,body .slatePreview{grid-column:1/-1}body .slateBar{margin:0 0 24px;gap:10px}body .slateRange{background:none;border:1px solid var(--line);border-radius:8px}body .slateBar button,body .slateBar summary,body .slateTools a{background:var(--surface);color:var(--paper);border-color:var(--line);border-radius:7px;font-size:12px}body .slateRange button{background:none;border:0}body .slateCommands #newMagnet{background:var(--accent);color:var(--ink);border:0}body .slateTools>div,body .slateActions>div{background:var(--surface-raised);border-color:var(--line)}body .slateActions button{color:var(--paper)}body .slateActions button:hover{background:var(--deep)}body .slateSurface{padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--bg) url('/assets/material/slate-surface.svg') center/cover;box-shadow:inset 0 1px 1px #ffffff0d;min-width:0}body .slateWeek{display:flex;flex-direction:column;gap:0;padding:0}body .slateDay,body .slateDay:nth-child(n){display:grid;grid-template-columns:65px minmax(0,1fr) 44px;gap:16px;align-items:center;padding:17px 0;border:0;border-bottom:1px solid var(--line);grid-column:auto}body .slateDay:last-child{border-bottom:0}body .slateDate{margin:0;padding:0;gap:5px;grid-row:auto;grid-column:auto}body .slateDate>span,body .slateDay:nth-child(n) .slateDate>span{font-size:22px;color:var(--accent);letter-spacing:0}body .slateDate time{font-size:11px;color:var(--muted)}body .slateNotes{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center;min-height:0;padding:0;grid-column:auto}body .slateNote{min-height:88px;width:auto;flex:1 1 180px;max-width:300px;padding:18px 14px 8px;--turn:-.7deg;filter:drop-shadow(1px 3px 2px #0006);margin:0}body .slateDish{font-size:16px;font-weight:500;line-height:1.4;overflow-wrap:break-word;hyphens:none;word-break:normal;text-align:left}body .slateNote.cut-1{--turn:.65deg}body .slateNote.cut-2{--turn:-.25deg}body .slatePin{top:5px;width:7px;height:7px}body .slateActions{margin:-4px -8px -5px}body .slateActions summary{min-height:44px}body .slateAdd{width:44px;min-height:44px;font-size:0;border:0;background:var(--surface);color:var(--accent);grid-column:auto;margin:0}body .slateAdd::after{content:'+';font-size:22px}body .slateEmpty{padding:8px 0;font-size:12px}body .magnetLibrary{padding:18px;margin:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;align-self:start;min-width:0;scroll-margin-top:15px}body .magnetLibrary .dashSectionHead{flex-wrap:wrap}body .magnetLibrary h3{font-size:18px}body .magnetTray{display:flex;flex-wrap:wrap;gap:10px}body .savedMagnet{width:100%;margin:0;border-radius:5px;box-shadow:none;min-width:0}body .savedMagnet>button{min-height:54px}body .savedMagnet strong{font-size:14px;white-space:normal;overflow-wrap:break-word}body .savedMagnet small{font-size:10px}body .recipeMagnet{background:var(--surface-raised);color:var(--paper);border:1px solid var(--line);padding:12px;border-radius:5px;min-height:44px}body .slatePreview{color:var(--muted);font-size:11px}
/* Budget, household, support, forms and all existing detail dialogs. */
body .budgetOverview{padding:30px 0;gap:clamp(24px,5vw,90px);border-block:1px solid var(--line)}body .budgetChart{width:220px;height:220px;box-shadow:none}body .budgetNumbers h3{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}body .budgetNumbers h3 strong{font-size:clamp(32px,5vw,60px);letter-spacing:-2px;color:var(--paper);text-transform:none}body .budgetNumbers p,body .budgetSource,body .budgetConnection{color:var(--muted)}body .budgetNumbers p b{color:var(--paper)}body .storeTotals,body .expenseList{padding:24px 0}body .storeTotal,body .expenseRow{border-color:var(--line);color:var(--paper)}body footer{padding:22px 0 0;margin:20px 0 0;color:var(--muted);border-top:1px solid var(--line);font-size:10px}body footer button{color:var(--muted);min-height:44px}body dialog{width:min(620px,calc(100vw - 32px));max-height:88dvh;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--paper);box-shadow:0 20px 80px #0008;font-family:inherit}body dialog::backdrop{background:#080d11bd;backdrop-filter:blur(4px)}body .dialoghead{align-items:flex-start;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}body .dialoghead h2{font-size:29px;line-height:1.15;letter-spacing:-1px;color:var(--paper)}body #close{background:none;color:var(--paper);border:0;min-height:44px;min-width:44px}body label{color:var(--muted);font-size:12px;line-height:1.5}body input,body select,body textarea{background:var(--bg);border:1px solid var(--line);color:var(--paper);border-radius:7px;padding:12px;min-height:44px;font-size:15px}body input[type=checkbox],body input[type=radio]{padding:0;min-height:22px;width:22px;flex-shrink:0}body textarea{min-height:100px}body input::placeholder{color:var(--muted)}body fieldset{border-color:var(--line);border-radius:8px;padding:16px}body summary{color:var(--accent);font-size:12px;min-height:44px}body .householdChoice{background:var(--bg);border:1px solid var(--line);color:var(--paper);border-radius:8px}body .householdChoice.selected{background:var(--deep)}body .householdChoice.selected::before{background:var(--accent)}body .householdChoice small{color:var(--muted)}body .avatarChoices button{background:var(--deep);color:var(--accent)}body .checkoutItems{border-color:var(--line);background:var(--bg)}body .checkoutItems small{color:var(--muted)}body #toast{background:var(--accent);color:var(--ink);border-radius:8px}body .dashboardOrderRow{border-color:var(--line);background:var(--bg)}body .dashboardOrderRow button{background:var(--surface-raised);color:var(--accent);border-color:var(--line);min-height:44px;min-width:44px}body #supportReport{background:var(--bg);color:var(--paper)}
/* A: paper surfaces, offset composition and optional handwriting. */
body[data-design=creative] main{background-image:url('/assets/material/graphite-grain.svg');background-size:500px}body[data-design=creative] .dashboardWelcome .personalHello{display:inline-block;background:var(--accent);color:var(--ink);padding:5px 20px 12px;font-size:.7em;letter-spacing:-1px;transform:rotate(-2deg);clip-path:polygon(1% 3%,98% 0,100% 94%,2% 100%);margin-bottom:10px}body[data-design=creative] .personalDashboard>.dash-cook{grid-column:span 5;background:var(--surface);color:var(--paper);padding:24px;transform:rotate(-.6deg);border:0;border-radius:2px;box-shadow:2px 6px 0 #0002}body[data-design=creative] .dash-cook .quiet,body[data-design=creative] .dash-cook .photoDetails,body[data-design=creative] .dash-cook .dashSectionHead button{color:var(--muted)}body[data-design=creative] .dash-cook .secondary{color:var(--accent);background:transparent;border-color:var(--line)}body[data-design=creative] .personalDashboard>.dash-week{grid-column:span 7;border:0;transform:translateY(8px)}body[data-design=creative] .dash-shopping{padding:25px;background:var(--surface);color:var(--paper);border-radius:2px;border:0;background-image:url('/assets/material/paper-fibre.svg');background-size:170px}body[data-design=creative] .dash-shopping .dashItem{border-color:var(--line)}body[data-design=creative] .dash-shopping .dashItem small,body[data-design=creative] .dash-shopping .dashSectionHead button{color:var(--muted)}body[data-design=creative] .dash-stock{padding-left:20px;border-left:1px solid var(--line)}body[data-design=creative] main[data-view=item] #list,body[data-design=creative] main[data-view=wish] #list{background:var(--surface)!important;color:var(--paper);padding:16px 24px!important;box-shadow:3px 6px 0 #0003;clip-path:polygon(.2% 0,99.8% .2%,100% 99.6%,.1% 100%);background-image:url('/assets/material/paper-fibre.svg')!important;background-size:170px!important}body[data-design=creative] main[data-view=item] .row,body[data-design=creative] main[data-view=wish] .row{color:var(--paper);border-color:var(--line)}body[data-design=creative] main[data-view=item] .row small,body[data-design=creative] main[data-view=wish] .row small{color:var(--muted)}body[data-design=creative] main[data-view=item] .check{border-color:var(--accent);border-radius:6px}body[data-design=creative] main[data-view=item] .edit,body[data-design=creative] main[data-view=wish] .edit{color:var(--accent)}body[data-design=creative] .slatePaper{clip-path:polygon(1% 1%,99% 0,100% 97%,0 100%)}body[data-design=creative] .shelfProduct:nth-child(2n){transform:rotate(.7deg)}body[data-design=creative] .sectionSketch{opacity:.25;transform:rotate(-9deg)}
/* B: typographic hierarchy, open rows, graphic rhythm; no dominant color bar. */
body[data-design=graphic] .dashboardWelcome h2,body[data-design=graphic] .panelhead h2{font-family:Impact,'Arial Narrow',system-ui,sans-serif;text-transform:uppercase;font-weight:900;letter-spacing:-1.5px}body[data-design=graphic] .dashboardWelcome h2{font-size:clamp(64px,8vw,124px);line-height:.9}body[data-design=graphic] .dashboardWelcome p{letter-spacing:3px;text-transform:uppercase;font-size:12px}body[data-design=graphic] .dashboardWelcome::after{content:'';width:52px;height:2px;background:var(--accent-alt);position:absolute;right:0;top:45px;transform:rotate(-24deg);box-shadow:0 12px 0 var(--accent)}body[data-design=graphic] .panelhead h2{font-size:clamp(40px,5vw,76px)}body[data-design=graphic] .personalDashboard .dashBlock{padding-top:20px}body[data-design=graphic] .dashSectionHead h3{font-size:12px;text-transform:uppercase;letter-spacing:2px;font-weight:650}body[data-design=graphic] .row .name{font-size:21px}body[data-design=graphic] .sectionSketch{opacity:.2;transform:rotate(0);bottom:20px}body[data-design=graphic] .sectionSketch svg{stroke-linejoin:miter;stroke-linecap:square;width:46px;height:46px}body[data-design=graphic] #list.slatePlanner{display:block}body[data-design=graphic] .slateSurface{background:transparent;border:0;padding:18px 0 28px;box-shadow:none;border-block:1px solid var(--line)}body[data-design=graphic] .slateWeek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}body[data-design=graphic] .slateDay,body[data-design=graphic] .slateDay:nth-child(n){display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 9px;border:0;border-left:1px solid var(--line)}body[data-design=graphic] .slateDate>span{font-family:Impact,'Arial Narrow',sans-serif;font-size:30px!important;color:var(--paper)!important}body[data-design=graphic] .slateNotes{flex:1;flex-direction:column;align-items:stretch}body[data-design=graphic] .slateNote{flex:0 0 auto;width:100%;max-width:none;min-height:66px;padding:12px 8px 4px;transform:none;filter:none}body[data-design=graphic] .slatePaper{background-image:none;border-radius:5px;clip-path:none;box-shadow:none}body[data-design=graphic] .slateDish{font-size:13px}body[data-design=graphic] .slatePin{display:none}body[data-design=graphic] .slateAdd{align-self:flex-start}body[data-design=graphic] .magnetLibrary{margin:25px 0 0;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}body[data-design=graphic] .savedMagnet{width:auto;flex:0 1 210px}body[data-design=graphic] .calendarDate b{font-family:Impact,'Arial Narrow',sans-serif;font-size:21px;text-transform:uppercase}
/* Handwriting is independent from design world; artwork selection remains optional. */
body[data-font=handwriting] .personalHello,body[data-font=handwriting] .todayDish strong,body[data-font=handwriting] .slateDish,body[data-font=handwriting] .dash-shopping h3,body[data-font=handwriting] .calendarMeal>span{font-family:var(--hand)!important;text-transform:none;letter-spacing:0;font-weight:500}
@media(max-width:1200px){body aside{width:210px;padding-inline:14px}body main{margin-left:210px;padding-inline:24px}body .brand .brandLogo{width:180px}body .personalDashboard{gap:22px 18px}body #list.slatePlanner{grid-template-columns:minmax(0,1fr) 220px;gap:18px}body .slateSurface{padding:18px}body .slateDay,body .slateDay:nth-child(n){gap:10px;grid-template-columns:48px minmax(0,1fr) 44px}body .dashboardWeek{grid-template-columns:repeat(4,minmax(0,1fr))}body .miniDay{min-height:95px}body .calendarDays{display:flex;flex-direction:column}body .calendarDay{display:grid;grid-template-columns:100px minmax(0,1fr) 100px;gap:12px;border:0;border-bottom:1px solid var(--line)}body .calendarDate{padding:5px 0}body[data-design=graphic] .slateWeek{display:flex;flex-direction:column}body[data-design=graphic] .slateDay,body[data-design=graphic] .slateDay:nth-child(n){display:grid;grid-template-columns:65px minmax(0,1fr) 44px;gap:16px;padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}body[data-design=graphic] .slateNotes{flex-direction:row;flex-wrap:wrap}body[data-design=graphic] .slateNote{width:auto;flex:1 1 140px;max-width:230px}}
@media(max-width:950px){body .personalDashboard>.dash-cook,body .personalDashboard>.dash-week{grid-column:span 6}body .dashboardStats button{padding-inline:12px;grid-template-columns:1fr}body .dashboardStats .navicon{display:none}body #list.slatePlanner{display:block}body .magnetLibrary{margin-top:24px}body .savedMagnet{flex:1 1 160px;width:auto}body .budgetOverview{gap:25px}.dashboardWelcome>button{max-width:95px}body main[data-view=recipe] #list{grid-template-columns:1fr}}
@media(max-width:650px){body aside{position:fixed;inset:auto 0 0;width:100%;height:auto;padding:0 8px 5px;background:var(--bg);border:0;border-top:1px solid var(--line);display:flex;flex-direction:column;z-index:100}body aside .brand,body aside .sidefoot{display:none}body aside nav{display:flex;margin:0;padding:4px 0;gap:3px;overflow:auto;justify-content:flex-start}body nav button{flex:0 0 62px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;min-height:56px;border-radius:6px;text-align:center}body nav button.active{padding:6px 2px;min-height:56px}body nav button.active::before{display:none}body nav button .navicon{width:23px;height:23px;margin:0}body nav button .navlabel{font-size:9px;line-height:1.3}body nav button .navlabel small{display:none}body .personalNav{display:flex;gap:8px;justify-content:space-between;margin:0;padding:0;border:0}body .personalNav button{min-height:40px;padding:7px 10px;font-size:10px}body main{margin:0;padding:16px 16px 140px;min-height:100dvh}body main>header{padding:0 0 16px;gap:7px;align-items:flex-start}body .appcontext .headerLogo{display:block;width:102px;height:34px}body .appcontext>span{display:none}body .accountActions{gap:5px;max-width:calc(100% - 110px)}body .accountButton,body #chooseHousehold{padding:8px;font-size:10px;min-height:44px}body #previewAccount{font-size:9px;max-width:none}body #householdLabel{max-width:80px}body .accountIcon{display:none}body .accountActions #family{width:44px}body .dashboardWelcome{padding:10px 0 28px;gap:10px;align-items:flex-end}body .dashboardWelcome h2{font-size:56px;letter-spacing:-2px;line-height:1}body[data-design=graphic] .dashboardWelcome h2{font-size:70px}body .dashboardWelcome p{font-size:12px}body .dashboardWelcome>button{font-size:10px;max-width:80px}body .personalDashboard{display:flex;flex-direction:column;gap:24px}body .dashboardStats{grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 0}body .dashboardStats button{padding:0 8px}body .dashboardStats strong{font-size:26px}body .dashboardStats button>span:last-child{font-size:9px;line-height:1.45}body .dashBlock{padding:16px 0}body .dashSectionHead h3{font-size:19px}body .dashboardWeek{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}body .miniDay{padding:10px 5px;min-height:100px}body .miniDay span{font-size:9px}body .miniDay b{font-size:13px}body[data-design=creative] .personalDashboard>.dash-cook{padding:22px;transform:rotate(-.3deg)}body[data-design=creative] .dash-stock{padding-left:0;border-left:0}body .panelhead{padding:12px 0 20px;display:flex;align-items:flex-start;flex-direction:column;gap:16px}body .panelhead h2{font-size:38px;letter-spacing:-1.3px}body[data-design=graphic] .panelhead h2{font-size:45px}body .listActions{width:100%;justify-content:flex-start}body .listActions .secondary,body .panelhead #add{font-size:11px;padding:11px 13px}body #listTools{gap:6px}body #listTools .secondary{font-size:10px;padding:10px}body #chooseList{flex-basis:100%}body #filters{gap:6px;padding:5px 0 15px}body #filters button{font-size:11px;min-width:70px;padding:10px 12px}body .row{padding:10px 0;gap:9px;min-height:66px}body .row .name,body[data-design=graphic] .row .name{font-size:16px}body .row small{font-size:10px}body .row .amount{font-size:11px;max-width:90px;flex-shrink:1}body .tag{font-size:9px;margin:4px 0 0;padding:4px 6px}body .check{width:24px;height:24px;min-width:24px}body .edit{min-width:36px}body[data-design=creative] main[data-view=item] #list,body[data-design=creative] main[data-view=wish] #list{padding:8px 12px!important}body .selectHit{min-width:32px}body #selectionBar{top:0;gap:6px;padding:10px}body #selectionBar .secondary{font-size:10px;padding:10px}body #list.slatePlanner{padding:0}body .slateSurface{padding:12px;border-radius:8px}body .slateBar{gap:8px}body .slateRange{width:100%;justify-content:space-between}body .slateCommands{width:100%;display:flex;flex-wrap:wrap}body .slateCommands>button{flex:1}body .slateBar button,body .slateBar summary{padding:10px;font-size:11px}body .slateDay,body .slateDay:nth-child(n),body[data-design=graphic] .slateDay,body[data-design=graphic] .slateDay:nth-child(n){grid-template-columns:38px minmax(0,1fr) 36px;gap:8px;padding:14px 0;display:grid}body .slateDate>span{font-size:18px}body .slateDate time{font-size:9px}body .slateNotes{gap:10px;display:flex;flex-direction:column;align-items:stretch;grid-column:auto;padding:0}body .slateNote,body[data-design=graphic] .slateNote{width:100%;flex:0 0 auto;max-width:none;min-height:85px;padding:17px 12px 6px}body .slateDish,body[data-design=graphic] .slateDish{font-size:15px}body .slateAdd{width:36px;min-height:44px;grid-column:auto}body .slateDate{grid-column:auto;grid-row:auto}body .magnetLibrary{padding:16px;margin-top:22px}body[data-design=graphic] .magnetLibrary{padding:15px 0}body .calendarDay{grid-template-columns:62px minmax(0,1fr);gap:10px;padding:14px 0}body .calendarDate b{font-size:11px}body .calendarDay .dayAdd{grid-column:2}body .shelfProduct{flex-basis:125px;min-height:150px;max-width:none}body .budgetOverview{flex-direction:column;padding:25px 0}body .budgetChart{width:185px;height:185px;align-self:center}body .budgetNumbers h3 strong{font-size:42px}body dialog{padding:20px;width:calc(100vw - 24px);max-height:90dvh}body .dialoghead h2{font-size:25px}body footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}body footer button{font-size:10px}body .panelbottom{font-size:10px;gap:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Explicit readable text on the dark creative surfaces. */
body[data-design=creative] .dash-cook h3,body[data-design=creative] .dash-shopping h3,body[data-design=creative] .dash-shopping .empty,body[data-design=creative] .dash-shopping .quiet{color:var(--paper)}body[data-design=creative] main[data-view=item] .empty,body[data-design=creative] main[data-view=wish] .empty{color:var(--paper)}body[data-design=creative] .dash-cook .sectionSketch,body[data-design=creative] .dash-shopping .sectionSketch{color:var(--accent)}
body .personalDashboard>.dashBlock{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0}body[data-design=creative] .personalDashboard>.dash-cook{background:var(--surface);color:var(--paper);border:0;padding:24px;border-radius:2px}body[data-design=creative] .personalDashboard>.dash-shopping{background:var(--surface) url('/assets/material/paper-fibre.svg') center/170px;color:var(--paper);border:0;padding:25px;border-radius:2px}body[data-design=creative] .personalDashboard>.dash-week{border:0}body[data-design=creative] .personalDashboard>.dash-stock{border-left:1px solid var(--line);padding-left:20px}body main[data-view=home] .panel{padding:0}body .panelhead:has(#add[hidden]){min-height:0}body .dashboardWelcome .secondary{background:none;padding:10px 0;margin:0}
@media(max-width:650px){body[data-design=creative] .personalDashboard>.dash-stock{border-left:0;padding-left:0}body .personalDashboard>.dashBlock{grid-column:auto}}
body[data-design=creative] .sectionSketch{opacity:.48;right:8px;bottom:10px}body[data-design=creative] .dash-cook .sectionSketch svg,body[data-design=creative] .dash-shopping .sectionSketch svg{color:var(--accent)}body[data-design=graphic] .sectionSketch{opacity:.3}body main>header{margin:0 0 18px}body main[data-view=home] .dashboardWelcome{padding-top:10px}body[data-design=creative][data-font=handwriting] .dashboardWelcome .personalHello{font-family:var(--hand);font-size:.74em;line-height:1.2}
/* Keep interface labels readable; handwriting belongs to personal content. */
body[data-font=handwriting] .content,body[data-font=handwriting] .content button,body[data-font=handwriting] #fields,body[data-font=handwriting] #fields input,body[data-font=handwriting] #fields select,body[data-font=handwriting] #fields textarea{font-family:Inter,'DM Sans',system-ui,sans-serif}body[data-font=handwriting] .content h3{font-family:inherit}body[data-font=handwriting] .content .personalHello,body[data-font=handwriting] .content .todayDish strong,body[data-font=handwriting] .content .slateDish,body[data-font=handwriting] .content .dash-shopping h3{font-family:var(--hand)}body main[data-view=meal]:has(.slatePlanner) .panelhead{padding:12px 0 20px}body main[data-view=meal]:has(.slatePlanner) .panelhead h2{font-size:clamp(32px,4vw,62px);letter-spacing:-2px;font-family:Inter,'DM Sans',system-ui,sans-serif;font-weight:750}body[data-design=graphic] main[data-view=meal]:has(.slatePlanner) .panelhead h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(40px,5vw,76px)}body .slateSurface{background-image:linear-gradient(var(--bg),var(--bg)),url('/assets/material/slate-surface.svg');background-blend-mode:hard-light,normal}body[data-design=graphic] .slateSurface{background:none}body .slateDay,body .slateDay:nth-child(n){padding-block:12px}body .slateNote{min-height:76px}body #readingTools{margin:0 0 8px}body .slateBar{margin-bottom:14px}body .slatePreview{margin:0 0 12px}body main[data-view=meal]:has(.slatePlanner) #readingTools{padding-bottom:0}
@media(max-width:650px){body main[data-view=meal]:has(.slatePlanner) .panelhead h2{font-size:38px;letter-spacing:-1.3px}body[data-design=graphic] main[data-view=meal]:has(.slatePlanner) .panelhead h2{font-size:45px}}
@media(min-width:951px){body[data-design=creative] .slateDay,body[data-design=creative] .slateDay:nth-child(n){padding-block:8px}body[data-design=creative] .slateNote{min-height:64px;padding-top:15px;padding-bottom:5px}body[data-design=creative] .slateDish{line-height:1.35}}
.budgetSpeech{padding:14px 0;margin:8px 0;border-block:1px solid var(--line)}.budgetSpeech .secondary{display:flex;align-items:center;gap:10px;min-height:48px;width:100%}.budgetSpeech svg{width:21px;height:21px;color:var(--accent);flex-shrink:0}.budgetSpeech p{font-size:12px;line-height:1.6;color:var(--muted);margin:8px 0 0}
/* iPhone home indicator and display cut-outs: preserve usable navigation/touch space. */
@media(max-width:650px){body aside{padding-bottom:calc(5px + env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}body .personalNav button{min-height:44px}body main{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
@media(display-mode:standalone){body main{padding-top:max(16px,env(safe-area-inset-top,0px))}}
@media(max-width:650px){body .row .edit{min-width:44px;min-height:44px}body .selectHit{min-width:44px;min-height:44px}body .check::after{inset:-10px}body label:has(input[type=checkbox]),body label:has(input[type=radio]){min-height:44px}}
/* Palette-aware menus in place of OS-native dropdown popups. */
.appSelect{position:relative;margin:7px 0 0;width:100%}body .appSelectButton{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--paper);font-size:14px;text-align:left}.appSelectArrow{color:var(--accent);font-size:20px;padding:0 3px}body .appSelectPopup{position:fixed;inset:auto;margin:0;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised);color:var(--paper);box-shadow:0 12px 32px #0006;overflow:auto;z-index:1000;font:14px Inter,system-ui,sans-serif}.appSelectPopup [role=option]{padding:12px;min-height:44px;cursor:pointer;border-radius:6px;line-height:1.4}.appSelectPopup [role=option][aria-selected=true]{background:var(--deep);color:var(--accent);font-weight:650}.appSelectPopup [role=option].isFocused,.appSelectPopup [role=option]:hover{outline:1px solid var(--accent);outline-offset:-2px;background:var(--deep)}.appSelectPopup [role=option][aria-disabled=true]{opacity:.5;cursor:default}
/* Visible entry to personalization, with no text/illustration collisions. */
body .dashboardWelcome #dashboardSettings{background:var(--deep);color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:12px 16px;font-size:12px;min-height:48px;max-width:none;font-weight:650}body .personalNav #personalSettings{color:var(--accent);font-weight:650}
body .personalDashboard>.dashBlock{padding-bottom:70px}body[data-design=creative] .personalDashboard>.dash-cook,body[data-design=creative] .personalDashboard>.dash-shopping{padding-bottom:80px}body .personalDashboard>.dashBlock .sectionSketch{bottom:10px;right:12px}body .personalDashboard>.dash-cook .sectionSketch svg{color:var(--accent-alt);opacity:1}body .personalDashboard>.dash-cook .sectionSketch{opacity:.75}body .personalDashboard>.dash-stock .sectionSketch svg{width:42px;height:42px}
@media(max-width:650px){body .dashboardWelcome{flex-wrap:wrap}body .dashboardWelcome #dashboardSettings{margin-top:8px;width:100%;text-align:center;max-width:none}.appSelectPopup [role=option]{min-height:48px}}