.recipe-document{margin:24px 0 48px;color:var(--ink)}
.recipe-document-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.recipe-document-head h1,.recipe-document-head h2{margin:0;line-height:1.1;font-size:var(--type-title);font-weight:400;overflow-wrap:anywhere}
.recipe-document-head h1{font-size:var(--type-display)}
.recipe-document-meta{color:var(--muted);margin:0 0 12px;font-size:var(--type-body)}
.recipe-document-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;flex-shrink:0;max-width:50%}
.recipe-document-context{margin:0 0 24px;max-width:72ch;line-height:1.5}
.recipe-document-context p{margin:8px 0}
.recipe-document-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);margin-bottom:32px}
.recipe-document-coffee,.recipe-document-water{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,1.5fr);gap:24px;padding:24px;align-items:start}
.recipe-document-water{border-left:1px solid var(--line)}
.recipe-document-portion>span,.recipe-document-grind>span{display:block;color:var(--muted);margin-bottom:12px}
.recipe-document-portion>b{display:block;font-size:var(--type-display);font-weight:400;line-height:1.1}
.recipe-document small{font-size:var(--type-body);margin-left:8px}
.recipe-document-grind p{margin:0;line-height:1.5}
.recipe-document .grind-metric{display:flex;flex-direction:column;gap:8px}
.recipe-document .grind-metric .fine{color:var(--muted);line-height:1.5}
.recipe-document .portion-metric>b{display:block;font-size:var(--type-display);line-height:1.1;font-weight:400}
.recipe-document .metric-input{display:flex;align-items:center;gap:8px;max-width:100%}
.recipe-document .metric-adjust{width:44px;height:44px;flex:0 0 44px}
.recipe-document .metric-value{display:flex;align-items:baseline;gap:8px;min-width:0}
.recipe-document .metric-value input{font-size:var(--type-title);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-control);min-width:0;max-width:100%;padding:8px;box-sizing:content-box}
.recipe-document-coffee:has(.metric-input),.recipe-document-water:has(.metric-input){grid-template-columns:1fr}
.recipe-document .grind-metric b{font-size:var(--type-lead)}
.recipe-grind-help summary{min-height:44px;display:flex;align-items:center;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.recipe-grind-help p{font-size:var(--type-body);color:var(--muted);margin:8px 0 0}
.recipe-grind-help summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:600px){.recipe-document .portion-metric>b{font-size:var(--type-title)}}
.recipe-document-details{margin:0;display:grid;gap:16px}
.recipe-document-details dt{color:var(--muted);margin:0 0 8px}
.recipe-document-details dd{margin:0;font-size:var(--type-lead);line-height:1.2}
.recipe-document-plan>header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:32px 0 16px}
.recipe-document-plan h2{font-size:var(--type-lead);font-weight:400;margin:0}
.recipe-document-plan>header>span{color:var(--muted)}
.recipe-plan{padding:0;margin:0;list-style:none}
.recipe-plan-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:24px;border-top:1px solid var(--line);padding:24px 0}
.recipe-step-index{font-size:var(--type-lead);color:var(--muted);line-height:1.2}
.recipe-step-top{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.recipe-step-top:empty{display:none}
.recipe-step-top time{font-size:var(--type-lead);color:var(--accent)}
.recipe-step-weight{font-size:var(--type-lead)}
.recipe-step-weight>span{font-size:var(--type-body);color:var(--muted)}
.recipe-step-copy h3{font-size:var(--type-lead);font-weight:400;margin:0 0 8px;line-height:1.3}
.recipe-step-copy p{margin:0 0 8px;max-width:68ch;line-height:1.5}
.recipe-step-hint,.recipe-step-add{color:var(--muted);font-size:var(--type-body)}
.recipe-plan-prep{border-left:2px solid var(--accent);padding-left:16px;margin:24px 0}
.recipe-plan-prep h3{font-size:var(--type-body);margin:0 0 8px}
.recipe-plan-prep p{margin:8px 0;max-width:68ch}
.champion-explanation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;border-top:1px solid var(--line);padding-top:32px}
.champion-explanation>h2,.champion-explanation>.champion-source{grid-column:1/-1}
.champion-explanation h2{font-size:var(--type-title);margin:0}
.champion-explanation h3{font-size:var(--type-lead);margin:0 0 12px;font-weight:400}
.champion-explanation p{line-height:1.5;margin:8px 0;max-width:64ch}
@media(max-width:1000px){.recipe-document-coffee,.recipe-document-water{grid-template-columns:1fr}.recipe-document-actions{max-width:100%;flex-shrink:1}}
@media(max-width:600px){.recipe-document-head{flex-direction:column}.recipe-document-head h1{font-size:var(--type-title)}.recipe-document-specs{grid-template-columns:1fr}.recipe-document-coffee,.recipe-document-water{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);padding:16px;gap:16px}.recipe-document-water{border-left:0;border-top:1px solid var(--line)}.recipe-document-portion>b{font-size:var(--type-title)}.recipe-plan-step{gap:12px;grid-template-columns:32px minmax(0,1fr)}.recipe-step-top{gap:12px}.recipe-document-plan>header{align-items:flex-start}.champion-explanation{grid-template-columns:1fr;gap:24px}.recipe-document-actions .button{min-height:44px}}