/* Recipe book, recipe detail, import flow. Tokens only (tokens.css). Prefix: rc- */

/* ---------- Book ---------- */
/* One toolbar: search + sort menu on a row, filters in a single scrolling chip row below. */
.rc-filters { display: grid; gap: var(--space-3); min-width: 0; }
.rc-toolbar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.rc-search { flex: 1; min-width: 0; }
.rc-sort-btn { font: var(--t-subhead); gap: 6px; padding: 0 var(--space-2); margin-right: calc(-1 * var(--space-2)); }
.rc-sort-btn svg { width: 18px; height: 18px; }
@media (max-width: 479px) { .rc-sort-label { display: none; } .rc-sort-btn svg { width: 22px; height: 22px; } }
@media (min-width: 600px) { .rc-chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; } }
.rc-count { padding-left: var(--inset-list); }
.rc-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.rc-grid-empty { grid-column: 1 / -1; }
.rc-grid-empty p { margin: 0; }

/* Calm cards: title, one line of numbers (label color), one line of meta. */
.rc-card {
  display: flex; flex-direction: column; gap: var(--space-1); min-height: 128px; padding: var(--space-4);
  color: var(--label); border-radius: var(--radius-xl);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .rc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
}
.rc-card:active { transform: scale(0.985); }
.rc-card-title { overflow-wrap: anywhere; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-bottom: auto; padding-bottom: 0; }
.rc-card-nums { margin-top: var(--space-3); }
.rc-card-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); font: var(--t-subhead); color: var(--label-2); }
.rc-card-nums b { font: var(--t-headline); color: var(--label); font-variant-numeric: tabular-nums; }
.rc-num-none { color: var(--label-3); }
.rc-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; font: var(--t-footnote); color: var(--label-2); }
.rc-card-meta > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 599px) {
  .rc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .rc-card { min-height: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
  .rc-card-nums { margin-top: var(--space-2); }
}

/* ---------- Detail ---------- */
.rc-source { color: var(--tint); }
.rc-desc { margin: 0; color: var(--label-2); font: var(--t-callout); }
.rc-actions { display: flex; }
@media (max-width: 599px) { .rc-actions .btn { flex: 1; } }
.rc-flag { align-items: flex-start; }
.rc-flag > .flag-dot { margin-top: 7px; }
.rc-flag { --sep-inset: calc(var(--inset-list) + 8px + var(--space-3)); }
.rc-warn-foot > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; min-height: 32px; }
.rc-warn-foot > summary::-webkit-details-marker { display: none; }
.rc-warn-chev { width: 14px; height: 14px; stroke-width: 2.4; transition: rotate var(--dur) var(--ease); }
.rc-warn-foot[open] .rc-warn-chev { rotate: 90deg; }
.rc-warn-list { margin: 0; padding: 0 var(--inset-list) 0 calc(var(--inset-list) + 1.1em); display: grid; gap: 2px; }
.rc-ing .row-title .flag-dot { margin-right: var(--space-2); vertical-align: 2px; }
.rc-ing.unknown .row-title .flag-dot { background: var(--orange); }
.rc-pantry { font: var(--t-footnote); }

.rc-nutri { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-xl); }
.rc-kcal { display: grid; justify-items: center; padding-right: var(--space-5); border-right: 0.5px solid var(--separator); }
.rc-kcal-v { font: var(--t-metric-lg); color: var(--label); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rc-kcal-l { font: var(--t-footnote); font-weight: 600; color: var(--label-2); }
.rc-macros { display: grid; gap: var(--space-3); }
.rc-macro { display: grid; gap: 6px; }
.rc-macro-top { display: flex; justify-content: space-between; gap: var(--space-2); font: var(--t-subhead); }
.rc-macro-l { color: var(--label-2); }
.rc-macro-l { display: inline-flex; align-items: center; gap: var(--space-2); }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rc-macro-v { font-weight: 600; }
.rc-macro-v .caption { font-weight: 400; }
@media (max-width: 479px) {
  .rc-nutri { grid-template-columns: minmax(0, 1fr); }
  .rc-kcal { border-right: 0; padding-right: 0; border-bottom: 0.5px solid var(--separator); padding-bottom: var(--space-4); }
}
.rc-nutri-empty p { margin: 0; }

.rc-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.rc-section-head .section-title { margin: 0; }
.rc-stepper-value { min-width: 6em; font: var(--t-subhead); font-weight: 600; }

.rc-ing-qty { flex: none; width: 5.5em; color: var(--label-2); font: var(--t-body); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rc-ing { align-items: first baseline; --sep-inset: calc(var(--inset-list) + 5.5em + var(--space-3) + var(--space-1)); }
.rc-ing .row-main { padding-left: var(--space-1); }
@media (max-width: 479px) { .rc-ing-qty { width: 4.8em; font: var(--t-subhead); } .rc-ing { align-items: first baseline; --sep-inset: calc(var(--inset-list) + 4.8em * 15 / 17 + var(--space-4)); } }
/* §13: every ingredient starts with its 32 px product picture (or placeholder); the hairline starts at the amount */
.rc-ing > .thumb { align-self: center; }
.rc-ing:has(> .thumb) { --sep-inset: calc(var(--inset-list) + 32px + var(--space-3) + 5.5em + var(--space-3) + var(--space-1)); }
@media (max-width: 479px) { .rc-ing-qty { width: 4.2em; } .rc-ing:has(> .thumb) { --sep-inset: calc(var(--inset-list) + 32px + var(--space-3) + 4.2em * 15 / 17 + var(--space-4)); } }

.rc-steps { counter-reset: none; }
.rc-step { position: relative; display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--inset-list); }
.rc-step + .rc-step::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--inset-list) + 28px + var(--space-3)); border-top: 0.5px solid var(--separator); }
.rc-step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-fill); color: var(--tint); font: var(--t-button-sm); }
.rc-step p { margin: 3px 0 0; font: var(--t-body); overflow-wrap: anywhere; }

.rc-confirm { display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-3) 0; }
.rc-confirm p { margin: 0; }
.rc-confirm-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--red-fill); color: var(--red); }
.rc-confirm-icon svg { width: 26px; height: 26px; }

/* ---------- Forms in lists (import review, sheets) ---------- */
.rc-form-row { gap: var(--space-3); flex-wrap: wrap; }
.rc-form-label { flex: none; min-width: 6.5em; font: var(--t-body); }
.rc-form-row > input.inline { margin-left: auto; }
.rc-form-hint { flex-basis: 100%; }
.row input.inline.rc-inline-wide { flex: 1; width: auto; min-width: 8em; }
.row input.inline { color: var(--label); }
.row input.inline::placeholder { color: var(--label-3); }
.row input.inline:focus-visible { outline-offset: 0; }
.rc-with-unit { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.rc-with-unit input.inline { width: 5.5em; }
.rc-form-row .rc-with-unit { flex: none; }
[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--red); }
.rc-lead { margin: 0; }
.rc-tint-text { color: var(--tint); }
.rc-ing-head { display: flex; align-items: center; gap: var(--space-3); }
.rc-ing-head-text { display: grid; gap: 2px; min-width: 0; }
.rc-ing-head-text .headline, .rc-ing-head-text .footnote { margin: 0; overflow-wrap: anywhere; }
.rc-ing-head-text .footnote { color: var(--label-2); }
.sheet .row .segmented button { min-height: 32px; }

/* ---------- Import ---------- */
.rc-import-form { display: grid; gap: var(--space-4); }
.rc-seg-wide { width: 100%; }
.rc-seg-wide button { min-height: 32px; }
.rc-wide { width: 100%; }
.rc-btn-spinner { width: 16px; height: 16px; border-color: color-mix(in srgb, var(--label-on-tint) 35%, transparent); border-top-color: var(--label-on-tint); }
.rc-grow { flex: 1; min-width: 0; }
.rc-mt { margin-top: var(--space-2); }


.rc-ing-review .rc-ing-row { position: relative; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3) var(--inset-list); }
.rc-ing-row + .rc-ing-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset-list); border-top: 0.5px solid var(--separator); }
.rc-ing-row.open { box-shadow: inset 3px 0 0 var(--orange); }
.rc-ing-row.skipped .rc-raw { color: var(--label-3); text-decoration: line-through; }
.rc-ing-top { display: flex; align-items: flex-start; gap: var(--space-2); }
.rc-raw { flex: 1; min-width: 0; font: var(--t-subhead); color: var(--label-2); padding-top: var(--space-1); overflow-wrap: anywhere; }
.rc-skip { min-height: 32px; font: var(--t-subhead); color: var(--label-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 0; }
.rc-skip[aria-pressed="true"] { color: var(--tint); }
.rc-ing-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.rc-qty-unit { display: flex; gap: var(--space-2); flex: none; }
.rc-qty { width: 5.5em !important; text-align: right; font-variant-numeric: tabular-nums; }
.unit-select { width: 6.5em !important; padding-right: var(--space-2); }

.rc-match {
  flex: 1 1 12em; min-width: 0; min-height: var(--hit); display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3); border-radius: var(--radius); border: 0; cursor: pointer; text-align: left; font: var(--t-body);
  transition: background var(--dur) var(--ease);
}
.rc-match svg { width: 20px; height: 20px; flex: none; }
.rc-match .caption { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-match-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rc-match.ok { background: var(--tint-fill); color: var(--label); }
.rc-match.ok svg { color: var(--tint); }
.rc-match.todo { background: var(--orange-fill); color: var(--orange); font-weight: 600; }
.rc-match:hover { opacity: 0.85; }

.rc-quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rc-quick { background: var(--bg-elevated); color: var(--label); box-shadow: inset 0 0 0 0.5px var(--separator); font-weight: 400; }
.rc-quick:hover { background: var(--fill); }
.rc-quick.pantry { box-shadow: inset 0 0 0 1px var(--tint); }
.rc-quick-note { font: var(--t-caption); color: var(--label-2); }
.rc-notes { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.rc-save-bar { display: grid; gap: var(--space-2); position: sticky; bottom: 0; padding: var(--space-3) 0 var(--space-4); background: linear-gradient(to bottom, transparent, var(--bg-grouped) 30%); }
@media (max-width: 899px) { .rc-save-bar { bottom: 64px; } }
.rc-status { text-align: center; color: var(--orange); }
.rc-status.rc-ready { color: var(--tint); }

/* ---------- Edit sheet ---------- */
.rc-edit-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
.rc-edit-row + .rc-edit-row::before, .rc-edit-rows > .rc-add-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--space-3); border-top: 0.5px solid var(--separator); }
.rc-edit-row .rc-match { flex: 1 1 10em; }
.rc-remove { min-width: var(--hit); color: var(--label-2); padding: 0; }
.rc-remove svg { width: 18px; height: 18px; }
.rc-add-row { color: var(--tint); gap: var(--space-2); cursor: pointer; }
.rc-add-row svg { width: 20px; height: 20px; }


#rc-ingredients { scroll-margin-top: var(--space-4); }

/* ---------- Recepten | Standaard (docs/PLAN.md §11.4) ---------- */
.rc-seg { justify-self: start; min-width: 260px; }
.rc-seg button { min-height: 32px; }
@media (max-width: 599px) { .rc-seg { justify-self: stretch; } }
.rc-page.rc-loading { opacity: 0.55; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.rc-std-row .row-sub { font: var(--t-footnote); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-std-row .rc-std-empty { color: var(--label-3); }
.rc-std-foot { margin: calc(-1 * var(--space-2)) 0 0; padding: 0 var(--inset-list); color: var(--label-2); }
.rc-std-stats { display: grid; gap: var(--space-2); }
.rc-std-stale:empty { display: none; }
.rc-in-today { text-decoration: none; }

/* ---------- Review round 7 (R1-R17, U8/U12/U14/U15, C6) ---------- */
/* Shared ingredient line (ingredients.js lineRow): controls, then a feedback strip. */
.rc-line { position: relative; display: grid; gap: var(--space-2); }
.rc-ing-review .rc-line { padding: var(--space-3) var(--space-4) var(--space-3) var(--inset-list); }
.rc-edit-rows .rc-line { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
.rc-edit-rows .rc-line + .rc-line::before { content: ""; position: absolute; top: 0; right: 0; left: var(--space-3); border-top: 0.5px solid var(--separator); }
.rc-line.bad { box-shadow: inset 3px 0 0 var(--red); }
.rc-line.warn { box-shadow: inset 3px 0 0 var(--orange); }
.rc-info { min-width: var(--hit); padding: 0; color: var(--label-2); }
.rc-info svg { width: 20px; height: 20px; }
.rc-note-in { font: var(--t-footnote); min-height: 32px; }
.rc-line-fb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.rc-line-fb[hidden] { display: none; }
.rc-fb-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font: var(--t-footnote); flex-basis: 100%; }
.rc-fb-line.red { color: var(--red); }
.rc-fb-line.orange { color: var(--orange); }
.rc-fb-line .btn-sm { min-height: 28px; }
.rc-fb-hint { color: var(--label-2); }
.rc-chip-x { border: 0; background: none; color: inherit; font: inherit; padding: 0 2px; cursor: pointer; }
.rc-red-text { color: var(--red); }
.rc-warn-text { color: var(--orange); }
.rc-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--inset-list) 0; }
.rc-tag-sugg { margin-top: var(--space-2); }
.rc-tag-sugg .filter-chip { font: var(--t-footnote); }
.rc-used { margin: 0; padding: 0 var(--inset-list); color: var(--label-2); }
.rc-num-in { max-width: 5.5em; }

/* Import: paste button, preview card, picture */
.rc-url-row { display: flex; gap: var(--space-2); align-items: center; }
.rc-url-row input { flex: 1; min-width: 0; }
.rc-paste { flex: none; gap: 6px; }
.rc-paste svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .rc-import-start .nav-bar .back { display: none; } }   /* U8: back link on phone/tablet */
.rc-preview-card { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); }
.rc-preview-kcal { display: flex; align-items: baseline; gap: var(--space-2); }
.rc-preview-kcal .rc-kcal-v { font: var(--t-metric); }
.rc-import-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-2); background: var(--bg-elevated-2); }

/* Book: thumbnails, compact rows on phone (U15), trash link */
.rc-card { position: relative; }
.rc-card-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.rc-card.has-img { padding-top: 0; overflow: hidden; }
.rc-card-img { width: calc(100% + 2 * var(--space-4)); margin: 0 calc(-1 * var(--space-4)) var(--space-2); aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-elevated-2); }
.rc-card-time { display: inline-flex; align-items: center; gap: 4px; }
.rc-card-time svg { width: 14px; height: 14px; }
@media (max-width: 599px) {
  .rc-card { flex-direction: row; align-items: center; gap: var(--space-3); }
  .rc-card.has-img { padding-top: var(--space-3); }
  .rc-card-img { width: 64px; height: 64px; margin: 0; aspect-ratio: auto; border-radius: var(--radius); flex: none; }
  .rc-card-title { -webkit-line-clamp: 1; line-clamp: 1; font: var(--t-body); font-weight: 600; }
  .rc-card-nums { margin-top: 0; font: var(--t-footnote); }
  .rc-card-nums b { font: var(--t-footnote); font-weight: 600; }
}
.rc-trash-link .row-icon { color: var(--label-2); }
.rc-std-lead { margin: 0; padding: 0 var(--inset-list); color: var(--label-2); }
.rc-std-who { margin: 0 0 var(--space-2); padding: 0 var(--inset-list); color: var(--label-2); }

/* Detail */
.rc-hero { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-xl); background: var(--bg-elevated-2); }
.rc-actions { gap: var(--space-2); flex-wrap: wrap; }
.rc-plan-btn { gap: 6px; }
.rc-ing-tap { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .rc-ing-tap:hover { background: var(--fill); } }
.rc-ing-note { font-style: italic; }
.rc-flag-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.rc-fix { min-height: 28px; }
.rc-skipped-line { color: var(--label-2); font: var(--t-subhead); }
.rc-fiber { padding-top: var(--space-1); }
.rc-moment { width: auto; margin-left: auto; }
.rc-check { width: 22px; flex: none; color: var(--tint); }
.rc-check svg { width: 18px; height: 18px; }