/* Recipe actions and cost controls share the site's compact control scale. */
.recipe-navigation { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 22px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.recipe-context,.recipe-sections { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.recipe-navigation a { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:9px 12px; border:1px solid #c4d6df; border-radius:7px; color:#245c74; background:#f5f9fb; font-size:13px; font-weight:650; line-height:20px; text-decoration:none; }
.recipe-sections a { background:#eaf3f8; border-color:#afcbdc; }
.recipe-navigation a:hover { background:#dcecf5; border-color:#729fb8; }
.recipe-navigation svg { flex:none; width:18px; height:18px; }
.guide-page > #result,.guide-page > #learning,.recipe-cost { margin:22px 0; scroll-margin-top:calc(var(--header-height) + 20px); }
.recipe-yield { display:inline-flex; gap:6px; margin:4px 0 0; padding:6px 10px; border:1px solid #cfdee6; border-radius:6px; color:#46606e; font-size:13px; }
.recipe-cost { max-width:1060px; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:#f6f9fb; }
.recipe-cost-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.recipe-cost-heading h2 { margin:0; }
.recipe-cost label { display:flex; flex-direction:column; gap:5px; min-width:0; margin:0; color:var(--muted); font-size:12px; line-height:18px; font-weight:650; }
.recipe-cost-heading label { width:190px; }
.recipe-cost input,.recipe-cost select { display:block; width:100%; min-width:0; height:44px; padding:9px 11px; border:1px solid var(--control-line); border-radius:7px; background:#fff; color:var(--ink); font:inherit; font-size:14px; }
.recipe-cost input:invalid:not(:placeholder-shown) { border-color:#a43a48; }
.auction-controls { display:grid; grid-template-columns:minmax(200px,1.6fr) minmax(160px,1fr) auto; align-items:end; gap:12px; }
.auction-controls button { min-height:44px; padding:10px 15px; border:1px solid #aac5d5; border-radius:7px; background:#edf4f8; color:#245c74; font-size:13px; font-weight:650; }
.auction-controls button:disabled { opacity:.6; cursor:default; }
#auction-status { margin:10px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.recipe-cost .cost-result { margin:12px 0 8px; padding:16px; border:1px solid #aacada; border-radius:8px; background:#e6f1f7; color:#224c61; font-size:16px; font-weight:600; }
.cost-summary-note { display:block; margin-top:5px; font-size:12px; font-weight:450; line-height:1.5; }
.auction-attribution { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 14px; margin:8px 0 18px; font-size:12px; line-height:1.5; }
.auction-attribution a { font-weight:650; }
.auction-attribution span { color:var(--muted); }
.recipe-components { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.recipe-cost .component { min-width:0; margin:0; padding:16px; }
.component-head h3 { margin:0; font-size:16px; line-height:1.4; }
.component-head h3 a { color:#245f7e; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px; }
.component-head h3 a:hover { color:#13445f; }
.component-head h3 .entity-mention { font-size:16px; }
.component-price-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:5px 14px; margin:8px 0; }
.component-price-row > p { margin:0; }
.component-price-row > div { text-align:right; font-size:13px; }
.component-price-note { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.component-acquisition { margin:8px 0; padding:0; border:0; }
.component-acquisition > summary { min-height:44px; display:flex; align-items:center; gap:6px; color:#2a627c; font-size:13px; font-weight:600; cursor:pointer; }
.component-acquisition > summary::before { content:'+'; width:18px; font-size:18px; }
.component-acquisition[open] > summary::before { content:'−'; }
.component-acquisition > summary::-webkit-details-marker { display:none; }
.component-acquisition p { font-size:13px; line-height:1.55; margin:0 0 8px; }
.recipe-cost .component-manual-toggle { display:flex; flex-direction:row; align-items:center; gap:8px; min-height:44px; max-width:none; margin:0; color:#365b70; cursor:pointer; }
.component-manual-toggle input { flex:none; width:18px; height:18px; padding:0; min-height:18px; accent-color:#286e9a; }
.manual-price { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; margin:6px 0 0; padding:10px 0 0; border:0; border-top:1px solid var(--line); }
.manual-price legend { padding:0 6px 0 0; color:var(--muted); font-size:12px; }
.manual-price label > span { display:flex; align-items:center; gap:4px; }
.manual-price input { padding:8px; }
.coin { flex:none; width:18px; height:18px; overflow:visible; vertical-align:middle; }
.coin--gold { color:#7c5410; fill:#f0c960; }
.coin--silver { color:#637081; fill:#d9e0e7; }
.coin--copper { color:#8b502c; fill:#d99a68; }
.coin > circle:first-child { stroke:currentColor; stroke-width:1.2; }
.coin .coin-rim { fill:none; stroke:currentColor; stroke-width:.65; opacity:.7; }
.coin path { fill:currentColor; opacity:.7; }
.money { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; vertical-align:middle; color:#294d60; }
.money-part { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.money-part b { font-weight:700; font-variant-numeric:tabular-nums; }
.recipe-sources { max-width:1060px; margin:18px 0; border-top:1px solid var(--line); padding-top:6px; }
.recipe-sources > summary { min-height:44px; color:#476575; font-size:13px; cursor:pointer; }
.recipe-sources p { margin:0 0 8px; font-size:12px; color:var(--muted); }
.recipe-cost [hidden] { display:none !important; }
@media(max-width:700px) {
 .recipe-navigation { padding:8px; gap:8px; }
 .recipe-navigation a { font-size:12px; padding:8px; }
 .recipe-cost { padding:14px; }
 .auction-controls,.recipe-components { grid-template-columns:minmax(0,1fr); }
 .recipe-cost-heading { gap:10px; }
 .recipe-cost-heading label { width:100%; }
 .component-price-row > div { text-align:left; }
}