/* Row 20.1 (card #242): a meal's Nutrition Facts, as words.

   The label (app/views/storefront/_nutrition_label.php) is black on white in
   every scheme, the colours of a printed label: on a dark Operator screen it
   is a white card, as the picture it replaces was. It is the tall standard
   label (21 CFR 101.9(d)(12)) until it has room for the FDA's tabular display
   (101.9(d)(11)(iii)), the shape of master's pictures: by the room the label
   has (a container query in em, so larger text stacks it sooner), not by the
   window's width, because the editor's preview and the meal's page give it
   different room. The editor's form is below. */

.nutrition-facts {
  --nf-ink: #000000;
  --nf-paper: #ffffff;
  --nf-bar: .625em;    /* the label's thick rules */
  --nf-mid: .3125em;   /* its middle rules */
  container-type: inline-size;
  color-scheme: light;
  max-width: 100%;
}
.nf-label {
  max-width: 24em;
  padding: var(--space-1) var(--space-2) var(--space-2);
  border: 1px solid var(--nf-ink);
  background: var(--nf-paper);
  color: var(--nf-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.25;
  /* Words (the footnote, a long serving size) hyphenate where the browser can, and break anywhere only as a
     last resort, so nothing scrolls sideways at the largest text. Nutrient names break between words only. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.nf-label p { margin: 0; }
.nutrition-facts .nf-label .nf-title {
  margin: 0;
  color: var(--nf-ink);
  font-family: inherit;
  font-size: calc(var(--text-xl) * 1.45);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.05;
}
.nf-strong { font-weight: 800; }
.nf-servings { padding-top: var(--space-1); border-top: 1px solid var(--nf-ink); }
.nf-serving-size {
  display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--space-2);
  padding-bottom: var(--space-1); border-bottom: var(--nf-bar) solid var(--nf-ink);
  font-size: var(--text-l);
}
.nf-amount-per { padding-top: var(--space-1); font-size: var(--text-s); font-weight: 800; }
.nf-calories {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-2);
  border-bottom: var(--nf-mid) solid var(--nf-ink);
  font-weight: 900;
}
.nf-calories-words { font-size: calc(var(--text-xl) * 1.1); }
.nf-calories-n { font-size: calc(var(--text-xl) * 1.45); line-height: 1.1; }
/* "per serving" is said to a screen reader in both layouts, and shown in the tabular one only: the tall label says
   "Amount per serving" above Calories instead. */
.nf-per, .nf-groups .nf-carb thead span, .nf-vitamins thead span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.nf-table { width: 100%; border-collapse: collapse; color: var(--nf-ink); background: var(--nf-paper); font-size: var(--text-m); }
.nf-table th, .nf-table td {
  padding: var(--space-1) 0;
  border: 0; border-top: 1px solid var(--nf-ink);
  background: var(--nf-paper); color: var(--nf-ink);
  font-weight: 400; text-align: left; vertical-align: top;
}
/* A nutrient's name breaks between words, never inside one ("Choleste/rol" at the largest text on a 360 px phone); the
   label's narrowest column is then its longest word, which the browser check holds to the phone's width. */
.nf-table tbody th { overflow-wrap: break-word; }
.nf-table td { padding-left: var(--space-2); text-align: right; font-weight: 800; white-space: nowrap; }
.nf-table thead th { border-top: 0; font-size: var(--text-s); font-weight: 800; }
.nf-table thead .nf-col-amount span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nf-table thead .nf-col-dv { text-align: right; }
.nf-groups .nf-carb thead th, .nf-vitamins thead th { padding: 0; line-height: 0; }
.nf-table .nf-level-1 th { padding-left: var(--space-4); }
.nf-table .nf-level-2 th { padding-left: var(--space-6); }
.nf-table .nf-level-1 td, .nf-table .nf-level-2 td { font-weight: 400; }
.nf-table .nf-level-0 td { font-weight: 800; }
.nf-groups .nf-carb { border-bottom: var(--nf-bar) solid var(--nf-ink); }
.nf-groups .nf-carb tbody tr:first-child th, .nf-groups .nf-carb tbody tr:first-child td { border-top-width: 1px; }
.nf-vitamins td { font-weight: 400; }
.nf-footnote {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--nf-mid) solid var(--nf-ink);
  font-size: var(--text-xs);
}
/* The Ingredients and Contains lines wrap at the label box's own edge, as a printed label's do (card #272): the tall
   label's 24em here, the tabular display's 62em below, in the BOX's em (its font-size is --text-m), because the lines
   themselves are set in the storefront's larger text, so their own em would overshoot the box. */
.nutrition-facts .nf-ingredients, .nutrition-facts .nf-contains { max-width: calc(24 * var(--text-m)); margin: var(--space-3) 0 0; }
.nutrition-facts .nf-contains { margin-top: var(--space-2); }

/* The FDA's tabular display, once the label has the room: the title, servings and calories on the left, the
   nutrients in two columns beside them, each under its own Amount/serving and % Daily Value, the vitamins and
   minerals along the bottom and the footnote under all. */
@container (min-width: 46em) {
  .nf-label {
    display: grid;
    grid-template-columns: minmax(9em, 13em) minmax(0, 1fr);
    column-gap: var(--space-3);
    max-width: 62em;
  }
  .nf-top { grid-row: 1 / span 2; padding-right: var(--space-3); border-right: var(--nf-mid) solid var(--nf-ink); }
  .nutrition-facts .nf-label .nf-title { font-size: calc(var(--text-xl) * 1.3); }
  .nf-serving-size { display: block; border-bottom-width: var(--nf-mid); }
  .nf-serving-amount { display: block; }
  .nf-amount-per { display: none; }
  .nf-calories { display: block; border-bottom: 0; padding-top: var(--space-1); }
  .nf-per {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    display: block; font-size: var(--text-s); font-weight: 800;
  }
  .nf-calories-words { display: block; font-size: var(--text-l); }
  .nf-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-4); }
  .nf-table thead .nf-col-amount span, .nf-groups .nf-carb thead span {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal;
  }
  .nf-groups .nf-carb thead th { padding: var(--space-1) 0; line-height: inherit; }
  .nf-table thead th { border-bottom: var(--nf-mid) solid var(--nf-ink); }
  .nf-groups .nf-carb { border-bottom: 0; }
  .nf-groups .nf-fat, .nf-groups .nf-carb { border-bottom: var(--nf-mid) solid var(--nf-ink); }
  /* The vitamins and minerals in a line, each with its amount and percent ("Vitamin D 2mcg 10%"). */
  .nf-vitamins { grid-column: 2; }
  .nf-vitamins tbody { display: flex; flex-wrap: wrap; column-gap: var(--space-4); }
  .nf-vitamins tr { display: flex; gap: var(--space-2); }
  .nf-vitamins th, .nf-vitamins td { border-top: 0; padding: var(--space-1) 0; }
  .nf-footnote { grid-column: 1 / -1; }
  .nutrition-facts .nf-ingredients, .nutrition-facts .nf-contains { max-width: calc(62 * var(--text-m)); }
}

/* The meal's page in the shop: the label under the description, as wide as the page allows. */
.shell-storefront .meal-nutrition .nutrition-facts { color: var(--sf-ink); }
.shell-storefront .meal-nutrition .nf-ingredients, .shell-storefront .meal-nutrition .nf-contains { font-size: var(--sf-text); }

/* The editor's Nutrition Facts form, on the meal's edit page and staff's catalogue meal. */
.nutrition .nutrition-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.nutrition .nutrition-head .hint { flex: 1 1 20em; margin: 0; }
.nutrition-group { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-control); min-width: 0; }
.nutrition-group legend { padding: 0 var(--space-2); font-weight: var(--weight-strong); }
.nutrition-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr)); gap: var(--space-3) var(--space-4); }
.nutrition-field { display: flex; flex-direction: column; min-width: 0; }
.nutrition-field label { margin: 0 0 var(--space-1); }
.nutrition-field input { width: 100%; max-width: 100%; }
.nutrition-wide { grid-column: span 2; }
.nutrition-unit { color: var(--muted); font-weight: 400; }
.nutrition-group textarea { width: 100%; }
.nutrition-group > .hint + label, .nutrition-group > .field-error + label { display: block; margin-top: var(--space-4); }
.nutrition-form > .button-quiet { margin-top: var(--space-4); }
.nutrition-preview { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.nutrition-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.nutrition-preview-head h3 { margin: 0; }
@media (max-width: 600px) {
  .nutrition-wide { grid-column: auto; }
}

/* Print / PDF: the label alone, black on white, at the size it is drawn. */
.nutrition-print .nutrition-print-header h1 { margin: 0 0 var(--space-2); }
.nutrition-print main.print-shell .nutrition-facts { margin-top: var(--space-3); }
@media print {
  .nutrition-facts { break-inside: avoid; }
  .nutrition-print .print-header { border: 0; padding: 0; }
  .nf-label { border-color: #000000; }
}