:root{--bg: #f7f4ef;--fg: #1d1b19;--muted: #77716a;--surface: #ffffff;--line: #e2ddd5;--accent: #2f6f4f;--accent-soft: #e3efe7;--alarm: #c0392b;--ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--bg: #1a1917;--fg: #ece8e2;--muted: #9b948b;--surface: #262422;--line: #3a3734;--accent: #6cc196;--accent-soft: #23372c;--alarm: #e06a5e}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);line-height:1.45;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}#app{max-width:40rem;margin:0 auto;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 2rem max(16px,env(safe-area-inset-left))}body.has-timers #app{padding-bottom:12rem}button,input{font:inherit;color:inherit}a{color:var(--accent)}h1,h2{line-height:1.2}h2{font-size:1.05rem;margin:1.6rem 0 .5rem;display:flex;align-items:baseline;gap:.6rem}.top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:3rem}.top .spacer{flex:1}.top h1{font-size:1.5rem;margin:.4rem 0}.offline{margin-left:.6rem;font-size:.8rem;font-weight:400;color:var(--muted)}.back{text-decoration:none;padding:.5rem 0}button.link{background:none;border:none;color:var(--muted);padding:.5rem 0}button.icon{min-width:2.5rem;height:2.5rem;border-radius:1.25rem;border:1px solid var(--line);background:var(--surface);font-weight:600}.chip{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 .8rem;border-radius:1.125rem;border:1px solid var(--line);background:var(--surface);font-size:.9rem;white-space:nowrap}button:disabled{opacity:.5}button.chip:active,button.icon:active{background:var(--accent-soft)}.primary{height:2.75rem;border:none;border-radius:.5rem;background:var(--accent);color:var(--bg);font-weight:600}input[type=search],input[type=number],.login input{width:100%;height:2.75rem;padding:0 .8rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface)}.empty,.error{color:var(--muted);padding:1rem 0}.error{color:var(--alarm)}.login{display:flex;flex-direction:column;gap:1rem;max-width:20rem;margin:15vh auto 0}.login label{display:flex;flex-direction:column;gap:.3rem;color:var(--muted)}.recipes{list-style:none;padding:0;margin:.8rem 0 0}.recipes a{display:flex;flex-direction:column;padding:.7rem 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.recipes .title{font-weight:600}.recipes small{color:var(--muted)}.recipe-title{font-size:1.7rem;margin:.2rem 0 .4rem}.description{color:var(--muted);margin-top:0}.scaler{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:.5rem;margin:0 -16px;padding:calc(.5rem + env(safe-area-inset-top)) 16px .5rem;background:var(--bg);border-bottom:1px solid var(--line)}.scaler .yield{font-weight:600;min-width:6.5rem;text-align:center}.scaler .spacer{flex:1}.base{display:flex;align-items:center;gap:.5rem;margin:.8rem 0 0;color:var(--muted)}.base input{width:7rem}.from{font-size:.85rem;font-weight:400;text-decoration:none}.ingredients{list-style:none;padding:0;margin:0}.ingredients li{display:flex;align-items:baseline;gap:.75rem;border-bottom:1px solid var(--line)}.ingredients .amount{flex:0 0 5.5rem;min-height:2.6rem;padding:0;border:none;background:none;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}.ingredients .amount:disabled{color:var(--muted)}.ingredients .item{flex:1;padding:.6rem 0;cursor:pointer}.ingredients .item small{color:var(--muted)}.ingredients li.editing{align-items:center;padding:.25rem 0}.ingredients li.editing input{flex:0 0 6rem;height:2.4rem;text-align:right}.ingredients .unit{color:var(--muted)}.done .item,.done>p{text-decoration:line-through;color:var(--muted)}.steps{padding-left:1.5rem;margin:.8rem 0 0}.steps li{margin-bottom:.9rem}.steps p{margin:0;cursor:pointer}.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}.timer-chip{color:var(--accent);font-weight:600}.timer-chip.running{background:var(--accent-soft);border-color:var(--accent)}.chip.temp{color:var(--muted)}.notes p{margin-top:0;white-space:pre-line}.related ul{padding-left:1.2rem;margin:0}.meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:2rem;color:var(--muted);font-size:.85rem}#timers{position:fixed;left:0;right:0;bottom:0;z-index:2;max-width:40rem;margin:0 auto;padding:.5rem max(16px,env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px #00000014}#timers[hidden]{display:none}.timer{display:flex;align-items:center;gap:.5rem;padding:.3rem 0}.timer+.timer{border-top:1px solid var(--line)}.timer-label{flex:1;min-width:0;display:flex;flex-direction:column;color:inherit;text-decoration:none}.timer-label span,.timer-label small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer-label small{color:var(--muted)}.timer-clock{font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}.timer.paused .timer-clock{color:var(--muted)}.timer.ringing{color:var(--alarm);animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.55}}@media (prefers-reduced-motion: reduce){.timer.ringing{animation:none}}.top-actions{display:flex;align-items:center;gap:1rem}a.chip{color:var(--accent);text-decoration:none;font-weight:600}.notice{padding:.7rem .9rem;border-radius:.5rem;background:var(--accent-soft)}.notice p,.notice ul{margin:.2rem 0}div.error{padding:.7rem .9rem;border-radius:.5rem;border:1px solid var(--alarm)}div.error p{margin:.2rem 0}textarea,select,.editor input:not([type=checkbox]){width:100%;min-height:2.5rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface);font:inherit;color:inherit}textarea{resize:vertical;line-height:1.4}[aria-invalid=true]{border-color:var(--alarm)!important;outline-color:var(--alarm)}.import{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0}.import label,.editor>label,.yield-row label{display:flex;flex-direction:column;gap:.3rem;color:var(--muted);font-size:.9rem}.import input{height:2.75rem;padding:0 .8rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface)}.editor-top{position:sticky;top:0;z-index:1;margin:0 -16px;padding:env(safe-area-inset-top) 16px 0;background:var(--bg);border-bottom:1px solid var(--line)}.editor-top h1{font-size:1.1rem}.editor-top .primary{height:2.4rem;padding:0 1.2rem}.editor{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem}.editor h3{margin:.6rem 0 .2rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.yield-row{display:grid;grid-template-columns:6rem 1fr;gap:.6rem}.section-card{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:.8rem;border:1px solid var(--line);border-radius:.6rem;background:color-mix(in srgb,var(--surface) 55%,var(--bg))}.section-card>.chip{align-self:flex-start}.section-head{display:flex;gap:.4rem;align-items:center}.section-head input{font-weight:600}.from-note{margin:0;font-size:.85rem;color:var(--muted)}button.icon.small{min-width:2.1rem;height:2.1rem;font-weight:400}.row-tools{display:flex;gap:.25rem;flex-shrink:0}.ing-row{display:grid;grid-template-columns:5rem 4.6rem 1fr;gap:.35rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}.ing-row .prep{grid-column:1 / 3}.ing-row .optional,.ing-row .row-tools{justify-self:end}.ing-row .optional{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--muted)}.ing-row .row-tools{grid-column:1 / -1}@media (min-width: 34rem){.ing-row{grid-template-columns:5rem 4.6rem 1fr 1fr auto}.ing-row .prep,.ing-row .row-tools{grid-column:auto}.ing-row .optional{grid-column:1 / -2}}.step-list{display:flex;flex-direction:column;gap:.8rem;margin:0;padding-left:1.3rem}.step-row{display:flex;flex-direction:column;gap:.35rem}.timer-row{display:grid;grid-template-columns:auto 1fr 7rem auto;gap:.35rem;align-items:center}.step-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.step-tools .temp{display:flex;align-items:center;gap:.25rem;color:var(--muted)}.step-tools .temp input{width:4.5rem}.step-tools .oven{flex:1;min-width:7rem}.add-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.add-row select,.editor>select{width:auto;max-width:100%}.related-edit{margin:0;padding-left:1.2rem}.related-edit li{display:flex;align-items:center;justify-content:space-between}.danger{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line)}.danger-link{color:var(--alarm)!important}.danger-button{height:2.4rem;padding:0 1rem;border:none;border-radius:.4rem;background:var(--alarm);color:var(--bg);font-weight:600}
