/* tool_recipes.css: /tools/recipe-finder (TOOL-RECIPES lane). Tokens and atoms from theme.css only
   (docs/LOOK.md): cards, chips, buttons, fields and the search pop-up are the theme's atoms. */

.rf-tabs { margin: 0 0 var(--sp-3); }
.rf-lab { display: block; margin: 0 0 var(--sp-1); color: var(--c-ink-soft); font-size: var(--fs-s); }
.rf-pick { position: relative; margin: 0 0 var(--sp-3); }
.rf-pick input { width: 100%; box-sizing: border-box; }
.rf-opts { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 2px; list-style: none; max-height: 22rem; overflow-y: auto; }
.rf-opts .sr-opt { cursor: pointer; }
.rf-opts .sr-opt img { width: 36px; height: 36px; padding: 4px; }
.rf-qty { width: 8rem; }

.rf-inv { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.rf-inv li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.rf-inv li > .ent { flex: 1 1 0; min-width: 0; }
.rf-amt input { width: 5.5rem; }
.rf-del { min-height: 36px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rf-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); }
@media (min-width: 340px) { .rf-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2); } }
@media (min-width: 560px) { .rf-checks { gap: var(--sp-1) var(--sp-3); } }
@media (min-width: 1200px) { .rf-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rf-check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; min-width: 0; }
.rf-check input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--c-accent); }
.rf-si { width: var(--rf-sprite-cell, 32px); height: var(--rf-sprite-cell, 32px); flex: none; background-image: var(--rf-sprite); background-repeat: no-repeat; background-size: var(--rf-sprite-w) var(--rf-sprite-cell, 32px); image-rendering: pixelated; }
.rf-check img { width: var(--icon); height: var(--icon); object-fit: contain; image-rendering: pixelated; flex: none; }
.rf-check span { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 559px) { .rf-check { font-size: var(--fs-s); } }

.rf-res, .rf-up, .rf-tot { list-style: none; margin: 0; padding: 0; }
.rf-row { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.rf-row:last-child { border-bottom: 0; }
.rf-head, .rf-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.rf-times { color: var(--c-accent); font-variant-numeric: tabular-nums; }
.rf-x, .rf-where, .rf-miss { color: var(--c-ink-soft); font-size: var(--fs-s); }
.rf-where, .rf-miss { margin: var(--sp-1) 0 0; }
.rf-miss { color: var(--c-ink); }
.rf-ing { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.rf-ing li, .rf-tot li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rf-tot { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-3); }
ol.rf-tot { list-style: decimal; padding-left: 1.6em; }
ol.rf-tot li { display: list-item; }
.rf-go { min-height: 32px; font-size: var(--fs-s); }
.rf-more { padding: var(--sp-2) 0; }
.rf-stage { display: inline-block; padding: 0 var(--sp-2); font-size: var(--fs-s); color: var(--c-ink); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.rf-stage-soft { border-style: dashed; color: var(--c-ink-soft); }

.rf-tree { list-style: none; margin: 0; padding: 0 0 0 var(--sp-4); border-left: 1px solid var(--c-line); }
.rf-tree.rf-root { padding-left: 0; border-left: 0; }
.rf-node { padding: var(--sp-1) 0; min-width: 0; }
.rf-node > details > summary { cursor: pointer; list-style-position: outside; }
.rf-node > details > summary::-webkit-details-marker { color: var(--c-ink-soft); }
.rf-alt { margin: var(--sp-1) 0 var(--sp-1); gap: var(--sp-1); }
.rf-alt .chip { min-height: 32px; }
.rf-alt .chip img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.rf-up .rf-up { padding-left: var(--sp-4); border-left: 1px solid var(--c-line); margin: var(--sp-1) 0 0; }
.rf-up li { padding: var(--sp-1) 0; }
.rf-bar { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rf-cite { display: block; color: var(--c-ink-soft); font-size: var(--fs-s); font-family: monospace; overflow-wrap: anywhere; }
.rf-ca { padding-left: 1.2em; }