/* Nutrition estimate panel on recipe pages (task 823.8). Colors come from site.css variables, so dark mode follows. */
.nutrition { margin-top: 24px; max-width: 760px; }
.nutrition h2 { margin: 0 0 12px; font-size: 1.25rem; }
.nutr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.nutr-grid > div { padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.nutr-grid > div:nth-child(4n) { border-right: 0; }
.nutr-grid > div:nth-last-child(-n + 4) { border-bottom: 0; }
.nutr-grid dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.nutr-grid dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.nutr-grid .nutr-kcal { background: var(--surface-2); }
.nutr-grid .nutr-kcal dd { font-size: 1.3rem; }
.nutr-kj { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); }
.nutr-kj[hidden] { display: none; }
.nutr-whole { margin: 10px 0 4px; }
.nutr-source { margin: 4px 0; color: var(--muted); }
.nutr-how { margin-top: 6px; font-size: .92rem; }
.nutr-how > summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.nutr-how p { margin: 6px 0; color: var(--ink); }
@media (max-width: 560px) {
  .nutr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutr-grid > div:nth-child(4n) { border-right: 1px solid var(--line); }
  .nutr-grid > div:nth-child(2n) { border-right: 0; }
  .nutr-grid > div:nth-last-child(-n + 4) { border-bottom: 1px solid var(--line); }
  .nutr-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
}
/* Ctrl+P on a recipe page: a compact block, no "how" details. */
@media print {
  .nutrition { margin-top: 8pt; max-width: none; break-inside: avoid; border: 0; box-shadow: none; padding: 0; background: none; }
  .nutrition h2 { font-size: 11pt; margin: 0 0 3pt; }
  .nutr-grid { grid-template-columns: repeat(8, auto); border-color: #999; }
  .nutr-grid > div, .nutr-grid .nutr-kcal { padding: 2pt 4pt; background: none; border: 0; }
  .nutr-grid dt { font-size: 7pt; color: #333; }
  .nutr-grid dd, .nutr-grid .nutr-kcal dd { font-size: 9pt; }
  .nutr-whole, .nutr-how { display: none; }
  .nutr-source { font-size: 7.5pt; color: #333; }
}
/* After the nutrition panel: "Goes well with" (task 823.32, "pm-") and the cleanup line under the gear (823.35, "op-");
   /dinner-menus reuses the list styles. */
.pm-block { max-width: 900px; }
.pm-list { list-style: none; padding: 0; margin: 8px 0 10px; display: grid; gap: 8px; }
.pm-item { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--honey); border-radius: 12px; padding: 10px 14px; }
.pm-role { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pm-title { font-weight: 700; }
.pm-min { white-space: nowrap; }
.pm-why { display: block; color: var(--muted); margin-top: 3px; }
.op-line { margin: 10px 0 4px; }
/* Quick answers (task 823.37, "faq-"): freeze, make ahead, swaps, doubling, from the recipe's own notes. */
.faq-block { max-width: 900px; }
.faq-list { margin: 8px 0 6px; display: grid; gap: 8px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.faq-item dt { font-weight: 700; }
.faq-item dd { margin: 3px 0 0; }
.faq-item dd p { margin: 3px 0; }
.faq-swaps { margin: 3px 0; padding-left: 1.1em; }
.faq-swaps li { margin: 2px 0; }
.faq-note { margin: 4px 0; }
@media print { .faq-block, .cmp-link { display: none; } }
/* Estimated cost (task 823.36, "cost-"): after the nutrition panel, never near the gear list's Amazon links. */
.cost-panel { margin-top: 24px; max-width: 760px; }
.cost-panel h2 { margin: 0 0 8px; font-size: 1.25rem; }
.cost-big { margin: 0; font-size: 1.15rem; }
.cost-big strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.cost-whole { margin: 4px 0; }
.cost-label { margin: 6px 0; color: var(--muted); }
.cost-label strong { color: var(--ink); }
.cost-how { margin-top: 6px; font-size: .92rem; }
.cost-how > summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.cost-how p { margin: 6px 0; color: var(--ink); }
.cost-lines { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 2px; max-width: 520px; }
.cost-lines li { display: flex; gap: 8px; align-items: baseline; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.cost-lines b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.cost-lines small { width: 2.6em; text-align: right; color: var(--muted); }
@media print { .cost-panel { display: none; } }