/* Menu & Recipe Costing: layout on top of /assets/base.css tokens. The print rules for the cost sheet are at the bottom. */
[hidden] { display: none !important; }
.flush { margin-top: 0; }
section[id] { scroll-margin-top: 12px; }
/* A long unbroken word (a name, a link) wraps instead of pushing the page sideways. */
.wrap p, .wrap dd, .wrap dt, .wrap h2, .wrap h3, .wrap li, .wrap [role="status"], .wrap [role="alert"] { overflow-wrap: anywhere; }
.card h3 { margin: 18px 0 6px; font-size: 16px; }
.card .row { margin-bottom: 8px; }
.card form { margin: 0; }

.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.jump a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; }

.warnbox { position: sticky; top: 8px; z-index: 5; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--surface); color: var(--warn); font-weight: 600; }
.warn-text { color: var(--warn); }
.card p.warn-text { color: var(--warn); }

/* Form fields: a label above each control, two columns where the width allows. */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 10px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field.end { justify-content: flex-end; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field input, .field select { min-height: 42px; }
.field.end button { width: 100%; }
input[aria-invalid="true"] { border-color: var(--warn); outline: 2px solid var(--warn); outline-offset: 0; }

/* Lists: ingredients, recipes, recipe lines and menu items share one card layout. */
.list { list-style: none; padding: 0; margin: 8px 0; }
.list li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: start; }
.list .t { font-weight: 600; overflow-wrap: anywhere; }
.list .amt { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list .meta { grid-column: 1 / -1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.list .meta.bad { color: var(--warn); font-weight: 600; }
.list .acts { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.list .acts button, .list .acts select { min-height: 32px; padding: 2px 8px; font-size: 13px; }
.list .acts select { width: auto; max-width: 100%; }
.list .acts input.qty { width: 6em; min-height: 32px; padding: 2px 8px; }
#rc-list li.open { box-shadow: inset 4px 0 0 var(--accent); }

/* The recipe being edited. */
.editor { margin-top: 20px; padding-top: 4px; border-top: 2px solid var(--line); }
.editor h3:first-child { margin-top: 12px; font-size: 18px; }
.problems { margin: 4px 0 8px; padding-left: 20px; color: var(--warn); font-weight: 600; }
.problems:empty { display: none; }

/* Live totals under the recipe. */
.totals { margin: 12px 0; padding: 10px 12px; background: var(--chip); border-radius: 10px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.totals .grand { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 20px; font-weight: 700; }
.totals .grand dt { color: var(--ink); }

/* Menu items: the two numbers you enter, then what the app works out from them. */
.menu li .mi-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.menu li .mi-fields label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 2px; }
.menu li .mi-fields input { min-height: 36px; }
.menu li .mi-out { grid-column: 1 / -1; margin: 0; display: grid; gap: 2px; }
.menu li .mi-out > div { display: flex; justify-content: space-between; gap: 12px; }
.menu li .mi-out dt { color: var(--muted); }
.menu li .mi-out dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.menu li .mi-out dd.strong { font-weight: 700; }
.menu li[data-verdict="over"] { box-shadow: inset 4px 0 0 var(--warn); }
.menu li[data-verdict="within"] { box-shadow: inset 4px 0 0 var(--accent); }

/* The printable cost sheet lives outside the page wrapper and is hidden on screen. */
.print-only { display: none; }
@page { margin: 16mm; }
@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --muted: #444; --line: #bbb; --accent: #000; --accent-ink: #fff; --chip: #eee; }
  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; line-height: 1.4; }
  .no-print { display: none !important; }
  .print-only { display: block; }
  #print-view { color: #000; overflow-wrap: anywhere; }
  #print-view p { margin: 0 0 2pt; }
  .pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24pt; margin-bottom: 14pt; }
  .pv-name { font-size: 16pt; font-weight: 700; overflow-wrap: anywhere; }
  .pv-meta { text-align: right; }
  .pv-meta h1 { font-size: 22pt; margin: 0 0 4pt; line-height: 1.1; }
  .pv-label { font-size: 9pt; text-transform: uppercase; letter-spacing: 0.06em; color: #444; }
  .pv-strong { font-size: 13pt; font-weight: 700; overflow-wrap: anywhere; }
  .pv-yield { margin-bottom: 12pt; }
  .pv-table, .pv-totals { border-collapse: collapse; }
  .pv-table { width: 100%; margin-bottom: 4pt; }
  .pv-table thead { display: table-header-group; }
  .pv-table th { font-size: 9pt; text-transform: uppercase; letter-spacing: 0.05em; color: #444; border-bottom: 1.5pt solid #000; padding: 4pt 6pt; text-align: left; }
  .pv-table td { border-bottom: 0.5pt solid #bbb; padding: 5pt 6pt; vertical-align: top; overflow-wrap: anywhere; }
  .pv-table tr, .pv-totals tr { break-inside: avoid; }
  .pv-table .num, .pv-totals .num, .pv-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pv-totals { width: 60%; margin: 8pt 0 0 auto; }
  .pv-totals td { padding: 3pt 6pt; border: 0; }
  .pv-totals .grand td { border-top: 1.5pt solid #000; font-size: 13pt; font-weight: 700; padding-top: 5pt; }
  .pv-section { margin-top: 16pt; break-inside: avoid; }
  .pv-fine { margin-top: 12pt; font-size: 9.5pt; color: #444; white-space: pre-wrap; overflow-wrap: anywhere; break-inside: avoid; }
}