:root{--ink:#24322b;--muted:#788078;--cream:#f7f4ed;--paper:#fffdfa;--sage:#91a786;--sage-dark:#49634f;--terra:#cc785d;--line:#e5e0d5;--butter:#e4bc68}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#24342d;color:white;padding:30px 22px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;margin:0 8px 42px}.brand-mark{width:39px;height:39px;border-radius:12px;background:var(--terra);display:grid;place-items:center;font-family:Georgia;font-size:24px}.brand b,.brand small{display:block}.brand b{font:700 21px Georgia,serif}.brand small{font-size:11px;color:#b8c5bc;margin-top:2px;letter-spacing:.05em}.sidebar nav{display:grid;gap:5px}.sidebar nav a{color:#b9c5bd;text-decoration:none;padding:12px 14px;border-radius:9px;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:#354a40;color:white}.profile{margin-top:auto;border-top:1px solid #405148;padding:22px 5px 0;display:flex;align-items:center;gap:10px}.profile>span{width:34px;height:34px;border-radius:50%;background:#d6ad83;color:#24342d;display:grid;place-items:center;font-weight:700;font-size:12px}.profile div{flex:1}.profile b,.profile small{display:block;font-size:12px}.profile small{color:#9caea3;margin-top:3px}.profile a{color:#b9c5bd;text-decoration:none}main{margin-left:245px;padding:42px clamp(30px,5vw,80px) 80px;max-width:1420px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}h1,h2,h3,p{margin-top:0}h1{font:700 38px Georgia,serif;margin-bottom:0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--terra);margin-bottom:7px}.hero{min-height:225px;border-radius:19px;background:#dfe8d8;display:grid;grid-template-columns:1fr 250px;align-items:center;padding:40px 50px;overflow:hidden;margin-bottom:20px}.hero h2{font:700 32px Georgia,serif;margin:12px 0 8px}.hero p{color:#5e6c63;margin-bottom:22px}.hero a{color:var(--sage-dark);font-weight:800;font-size:13px}.pill{font-size:9px;letter-spacing:.13em;background:white;color:var(--terra);font-weight:800;border-radius:20px;padding:6px 10px}.hero-art{height:185px;width:185px;border-radius:50%;background:#f8eedf;display:grid;place-items:center;font-size:70px;color:var(--terra);position:relative}.hero-art small{position:absolute;bottom:22px;background:white;border-radius:20px;padding:5px 9px;font-size:11px;color:var(--ink);font-weight:700}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stats article{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:17px;display:flex;align-items:center;gap:13px}.stats b,.stats small{display:block}.stats b{font:700 22px Georgia,serif}.stats small{color:var(--muted);font-size:11px;margin-top:2px}.icon{width:39px;height:39px;border-radius:10px;display:grid;place-items:center}.icon.terracotta{background:#f5dfd8;color:var(--terra)}.icon.sage{background:#dfe8d8;color:var(--sage-dark)}.icon.butter{background:#f6e8c8;color:#9d7427}.section-title{display:flex;align-items:end;justify-content:space-between;margin:39px 0 15px}.section-title h2{font:700 25px Georgia,serif;margin:0}.section-title a{font-size:12px;color:var(--sage-dark);font-weight:700}.week{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.week article{min-height:160px;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:18px;display:flex;flex-direction:column}.week article.today{border-top:3px solid var(--terra)}.date small,.date b{display:block}.date small{font-size:9px;color:var(--muted);font-weight:800}.date b{font:700 25px Georgia,serif}.week h3{font:700 16px Georgia,serif;margin:auto 0 5px}.week p{font-size:11px;color:var(--muted);margin:0}.week article>span{align-self:end;color:var(--terra)}@media(max-width:850px){.sidebar{position:static;width:auto;height:auto;padding:18px}.sidebar nav{display:flex;overflow:auto}.profile{display:none}main{margin:0;padding:25px 18px}.hero{grid-template-columns:1fr;padding:28px}.hero-art{display:none}.stats,.week{grid-template-columns:1fr 1fr}}@media(max-width:520px){header{align-items:flex-start;gap:20px}header .button{font-size:20px;padding:8px 15px}header .button .label{display:none}.stats,.week{grid-template-columns:1fr}.sidebar .brand{margin-bottom:15px}h1{font-size:30px}}

/* Product surfaces */
button,input,select,textarea{font:inherit}button{cursor:pointer}.sidebar nav a span{display:inline-block;width:25px}.flash{padding:13px 16px;border-radius:10px;margin:-15px 0 22px;font-size:13px}.flash.success{background:#dce9d9;color:#34513c}.flash.error{background:#f4dcd5;color:#863e2e}.lead{color:var(--muted);max-width:700px;line-height:1.7;margin-bottom:26px}.toolbar{display:flex;gap:10px;margin-bottom:25px}.toolbar input{flex:1}input,select,textarea{width:100%;border:1px solid #dcd7cc;background:#fff;border-radius:9px;padding:11px 12px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px #91a78626}label{font-size:12px;font-weight:700;display:grid;gap:7px;color:#4f5a53}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.recipe-card{background:var(--paper);border:1px solid var(--line);border-radius:15px;overflow:hidden;display:flex;flex-direction:column}.card-main{padding:14px 14px 4px;display:block;color:inherit;text-decoration:none;flex:1}.recipe-visual{height:130px;border-radius:10px;background:linear-gradient(135deg,#e4c1a7,#c8765c);display:grid;place-items:center;color:#fff8f1;font:700 58px Georgia,serif;margin-bottom:15px}.recipe-card:nth-child(3n+2) .recipe-visual{background:linear-gradient(135deg,#c8d5bd,#789276)}.recipe-card:nth-child(3n+3) .recipe-visual{background:linear-gradient(135deg,#eadcae,#cea85c)}.recipe-card h2{font:700 19px Georgia,serif;margin:9px 0 7px}.recipe-card p{font-size:12px;line-height:1.55;color:var(--muted);min-height:38px}.recipe-card small{font-size:11px;color:var(--muted)}.tags{display:flex;gap:5px;flex-wrap:wrap}.tags span{background:#edf0e8;color:#58705c;border-radius:15px;padding:4px 8px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.recipe-card form{border-top:1px solid var(--line);margin-top:14px}.panel,.recipe-detail{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:28px}.panel h2{font:700 24px Georgia,serif}.panel.narrow{max-width:650px;margin:auto}.panel.narrow p{color:var(--muted);line-height:1.6}.panel.narrow form{display:grid;gap:17px}.recipe-heading{display:flex;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line);padding-bottom:25px}.recipe-heading h2{font:700 35px Georgia,serif;margin:12px 0 8px}.recipe-heading p{color:var(--muted)}.meta{display:flex;gap:20px;color:#69736c;font-size:12px}.actions{display:flex;gap:8px;align-items:flex-start}.source{background:#f4f0e7;border-radius:8px;padding:11px 14px;font-size:12px;margin:22px 0}.source a{color:var(--sage-dark)}.markdown{max-width:760px;font-size:14px;line-height:1.75}.markdown h2{font:700 25px Georgia,serif;margin-top:32px}.markdown li{margin:5px 0}.markdown>:first-child{margin-top:0}.recipe-body{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:44px;margin-top:28px}.recipe-body>:only-child{grid-column:1/-1}.recipe-body h3{font:700 21px Georgia,serif;margin:0 0 14px}.ingredients ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.45}.ingredients li{padding:9px 0;border-bottom:1px solid var(--line)}.ingredients li:last-child{border-bottom:0}.recipe-fields{display:grid;grid-template-columns:2fr 3fr;gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid .wide{grid-column:1/-1}textarea{resize:vertical;line-height:1.55;font-family:ui-monospace,monospace}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:22px}.form-actions a:not(.button){color:var(--muted);font-size:13px}.calendar-head{display:flex;align-items:center;justify-content:center;gap:25px;margin-bottom:16px}.calendar-head h2{font:700 24px Georgia,serif;margin:0;min-width:200px;text-align:center}.calendar-head a{color:var(--sage-dark);font-size:22px;text-decoration:none}.calendar{display:grid;grid-template-columns:repeat(7,1fr);background:var(--line);gap:1px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.weekday{background:#eef0e9;text-align:center;padding:9px;font-size:10px;font-weight:800;color:var(--muted)}.day{background:var(--paper);min-height:112px;padding:9px}.day.outside{background:#f5f2ec;color:#a7aaa6}.day>b{font:700 13px Georgia,serif}.day.today>b{background:var(--terra);color:white;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}.meal{background:#e3ebde;border-left:3px solid var(--sage);border-radius:5px;padding:6px;margin-top:6px;position:relative}.meal a{display:block;color:#344a3b;text-decoration:none;font-size:10px;font-weight:800}.meal small{font-size:9px;color:#69776d}.meal form{position:absolute;right:3px;top:3px}.meal button{background:transparent;color:var(--sage-dark)}.plan-form{margin-top:20px}.plan-form form{display:grid;grid-template-columns:2fr 1fr 1fr auto;align-items:end;gap:12px}.todo-list{display:grid;gap:10px}.todo-list article{display:flex;align-items:center;gap:15px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px}.todo-list article>div{flex:1}.todo-list a{text-decoration:none;color:inherit}.todo-list h2{font:700 18px Georgia,serif;margin:0 0 4px}.todo-list p{margin:0;color:var(--muted);font-size:12px}.check{font-size:27px;color:var(--sage)}.suggestion-intro{background:#e1e8db;border-radius:16px;padding:28px 32px;margin-bottom:25px;display:flex;justify-content:space-between;align-items:end;gap:30px}.suggestion-intro h2{font:700 29px Georgia,serif;margin-bottom:7px}.suggestion-intro p:last-child{color:#5f6e63;margin:0;max-width:650px}.suggestion-intro form{display:flex;gap:10px;align-items:end;justify-content:flex-end;min-width:340px}.featured .recipe-visual{height:170px}.timeline{max-width:850px}.timeline article{display:grid;grid-template-columns:20px 1fr;gap:12px;position:relative;padding-bottom:25px}.timeline article:before{content:"";position:absolute;left:6px;top:15px;bottom:-3px;width:1px;background:var(--line)}.timeline article:last-child:before{display:none}.timeline-dot{width:13px;height:13px;border-radius:50%;background:var(--terra);margin-top:4px;z-index:1}.timeline p{margin:0 0 4px;font-size:13px}.timeline small{color:var(--muted);font-size:10px}.timeline ul{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:9px 12px 9px 27px;font-size:11px;color:#667068}.admin-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.admin-grid form{display:grid;gap:15px}.checkbox{display:flex;align-items:center;gap:8px}.checkbox input{width:auto}.user-list article{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:12px 0}.user-list article>span{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#e2e9dc;color:var(--sage-dark);font-weight:800;font-size:11px}.user-list article div{flex:1}.user-list b,.user-list small{display:block}.user-list small{font-size:10px;color:var(--muted);margin-top:3px}.user-list em{font-style:normal;background:#f1e5ca;color:#896b31;border-radius:12px;padding:4px 8px;font-size:9px;font-weight:800}.empty{background:var(--paper);border:1px dashed #ccc6b9;border-radius:12px;padding:35px;text-align:center;color:var(--muted)}.login-page{min-height:100vh;background:linear-gradient(135deg,#dfe7d9 0 50%,#f5eee4 50%);display:grid;place-items:center}.login-card{margin:20px;width:min(440px,calc(100% - 35px));background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:0 18px 60px #38463b1f}.login-brand{color:var(--ink);margin:0 0 35px}.login-brand small{color:var(--muted)}.login-card>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.6}.login-card form{display:grid;gap:16px;margin:25px 0 15px}.login-card .button{width:100%}.hint{color:#92978f;font-size:10px}
@media(max-width:1050px){.recipe-grid{grid-template-columns:1fr 1fr}.calendar{overflow:auto}.day{min-height:90px}.plan-form form{grid-template-columns:1fr 1fr}.admin-grid{grid-template-columns:1fr}}@media(max-width:700px){.recipe-grid{grid-template-columns:1fr}.toolbar,.suggestion-intro,.recipe-heading{flex-direction:column;align-items:stretch}.suggestion-intro form{min-width:0;flex-direction:column;align-items:stretch}.form-grid,.recipe-fields,.recipe-body{grid-template-columns:1fr}.recipe-body{gap:28px}.calendar{grid-template-columns:repeat(7,minmax(95px,1fr));overflow-x:auto}.plan-form form{grid-template-columns:1fr}.recipe-heading .actions{margin-top:10px}.meta{flex-wrap:wrap}}
.recipe-history{margin-top:34px}

.field-error{color:#863e2e;font-weight:600}
.error-page{text-align:center}
.manual-entry{display:grid;gap:12px;margin-top:22px;text-align:center}
.separator{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.separator:before,.separator:after{content:"";flex:1;border-top:1px solid var(--line)}
.panel>.separator{margin:22px 0}
.manual-entry small{color:var(--muted);font-size:12px}

/* Interactions: sober colour changes only (no shadow, no movement) */
a,button,.button,.recipe-card,.todo-list article,.week article{transition:background-color .15s ease,color .15s ease,border-color .15s ease,text-decoration-color .15s ease}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.hero a,.section-title a,.source a,.form-actions a:not(.button),.error-page a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.hero a:hover,.section-title a:hover,.source a:hover,.form-actions a:not(.button):hover,.error-page a:hover{text-decoration-color:currentColor}
.hero a:active,.section-title a:active,.source a:active,.error-page a:active{color:var(--ink)}
.form-actions a:not(.button):hover{color:var(--ink)}
.calendar-head a{border-radius:8px;padding:0 10px}
.calendar-head a:hover{background:#e3e9df}
.calendar-head a:active{background:#d6dfd0}
.meal a:hover{text-decoration:underline;text-underline-offset:2px}
.profile a{border-radius:6px;padding:2px 4px}
.profile a:hover{color:white;background:#354a40}
.sidebar nav a:active{background:#3f574b}
.brand:hover .brand-mark{background:#bf6a4f}
.recipe-card:hover,.todo-list article:hover,.week article:hover{border-color:#cfc7b6}
.card-main h2,.todo-list h2,.week h3{transition:color .15s ease}
.card-main:hover h2,.todo-list a:hover h2{color:var(--sage-dark)}
.card-main:active h2,.todo-list a:active h2{color:#314537}
.week article a{color:var(--terra);text-decoration:none;border-radius:6px;padding:2px 6px;align-self:end}
.week article a:hover{background:#f6e6df}

/* Navigation with HTMX: fade the page while loading (delayed, so fast responses do not flicker) */
main{transition:opacity .15s ease}
body.htmx-request main{opacity:.55;transition-delay:.2s}
.recipe-card .last-cooked{display:block;margin-top:4px}
.todo-list article>.todo-actions{display:flex;align-items:center;gap:4px;flex:none}

/* Recipe images: on the cards, and in the recipe form */
.recipe-visual{overflow:hidden}
.recipe-visual img{display:block;width:100%;height:100%;object-fit:cover}
.recipe-image{display:block;width:100%;height:clamp(200px,30vw,360px);object-fit:cover;border-radius:12px;margin-top:25px;background:#f4f0e7}
.image-field{display:flex;align-items:flex-start;gap:18px}
.image-field>div{flex:1;display:grid;gap:10px}
.image-preview{flex:none;width:160px;height:110px;object-fit:cover;border:1px solid var(--line);border-radius:10px;background:#f4f0e7}
input[type=file]{height:auto!important;padding:9px 12px}

/* Shopping list, below the recipes to cook */
.shopping-list ul{list-style:none;margin:0;padding:4px 20px;max-width:760px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.shopping-list li{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.shopping-list li:last-child{border-bottom:0}
.shopping-list b{font-weight:600}
.shopping-list small{display:block;margin-top:3px;color:var(--muted);font-size:11px}
.shopping-list li>span{flex:none;color:var(--sage-dark);font-weight:700;text-align:right}
.recipe-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:28px;padding-top:22px}

/* Form controls: same typography and height, so they can be aligned with buttons */
input,select,textarea{font-size:14px;line-height:1.3}
input:not([type=checkbox]):not([type=radio]),select{height:42px}

/* Buttons: same size and typography everywhere, the colour is given by the variant */
button{border:0}
.button,.button-status{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:12px 17px;border:0;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
.button{background:var(--sage-dark);color:white}
.button:hover{background:#3d5443}
.button:active{background:#314537}
.button.secondary{background:#e3e9df;color:var(--sage-dark)}
.button.secondary:hover{background:#d8e1d3}
.button.secondary:active{background:#cbd6c5}
.button.danger{background:#f3ded8;color:#9e4937}
.button.danger:hover{background:#edd0c8}
.button.danger:active{background:#e4c0b6}
.button-status{background:#eef0e9;color:var(--muted);cursor:default}
button:disabled{cursor:progress;opacity:.7}

/* Compact buttons, used on cards and lists */
.text-button,.todo-status{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:0;border-radius:8px;font-family:inherit;font-size:12px;font-weight:700;line-height:1.2}
.text-button{background:transparent;color:var(--sage-dark)}
.text-button:hover{background:#eef2eb}
.text-button:active{background:#e1e8dc}
.text-button.cooked{background:#e3e9df}
.text-button.cooked:hover{background:#d8e1d3}
.text-button.cooked:active{background:#cbd6c5}
.text-button.muted{color:var(--muted)}
.text-button.muted:hover{color:var(--ink)}
.todo-status{color:var(--muted);cursor:default}
.recipe-card .todo-status{display:flex;border-top:1px solid var(--line);border-radius:0;margin-top:14px}

/* Line by line diff, on the change history */
.timeline li:has(.diff){list-style:none;margin-left:-15px}
.diff{margin:6px 0 4px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:white;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.diff-line{padding:0 10px;white-space:pre-wrap;word-break:break-word;color:#667068}
.diff-sign{display:inline-block;width:16px;user-select:none}
.diff-line.added{background:#e6efe2;color:#2f5136}
.diff-line.removed{background:#f7e3dd;color:#863e2e}
.diff-line.skipped{background:#f5f3ed;color:var(--muted);text-align:center}

/* Recipe imports, run in background: progress, and imports not saved yet */
.panel.narrow .import-source{font-weight:700;color:var(--ink);word-break:break-all}
.panel.narrow .import-status{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--sage-dark)}
.spinner{width:16px;height:16px;border:2px solid #d8e1d3;border-top-color:var(--sage-dark);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
.import-logs{list-style:none;margin:0 0 18px;padding:12px 14px;background:#f4f0e7;border-radius:8px;font-size:12px;line-height:1.7;color:#5f6b63}
.import-logs time{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px}
.import-job .form-actions{justify-content:space-between;margin-top:0}
.import-job .flash{margin:4px 0 18px}
.panel.narrow.pending-imports{margin-bottom:20px}
.pending-imports ul{list-style:none;margin:0;padding:0}
.pending-imports li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.pending-imports li:last-child{border-bottom:0}
.pending-imports li>a{flex:1;min-width:0;color:inherit;text-decoration:none}
.pending-imports li>a:hover b{color:var(--sage-dark)}
.pending-imports b,.pending-imports small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-imports small{color:var(--muted);font-size:11px;margin-top:3px}
.import-badge{flex:none;border-radius:12px;padding:4px 9px;font-size:10px;font-weight:800;background:#eef0e9;color:var(--muted)}
.import-succeeded .import-badge{background:#dce9d9;color:#34513c}
.import-failed .import-badge{background:#f4dcd5;color:#863e2e}
.import-running .import-badge{background:#f6e8c8;color:#896b31}