/* The nutrition block on a recipe page.
 *
 * Its own file, loaded from the head on every page, because the two
 * stylesheets it lived in before were both conditional: flags.css goes to
 * pages that show recipe CARDS, and embeds.css is only injected when the page
 * has an embed or an ad slot. The block is on a recipe page and rendered from
 * `app/nutrition.as_html`, so for as long as it existed it drew with the
 * browser's defaults — values unbolded and left-aligned, which is exactly the
 * layout item 10 asks to fix.
 */
/* Item 10: label on the left, value on the right, and the value bold.
   Full width so the two columns sit at the two edges of the grey box the way
   a chart reads, rather than huddling in the middle of it. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__table,
.ttc-nutrition__table {
  /* Full width of the grey box: at half of it the two columns sat in the
     middle of a wide card and stopped reading as a chart. */
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.6rem;
}
/* The block is appended to the recipe body, so it sits inside `.ch-recipe`
   and the embed's own `table th, table td { font-weight: normal; text-align:
   left }` applies to it — with two doubled class names, which no plain
   `.ttc-nutrition__table td` can outrank. Matching the doubling and coming
   later is what makes the values bold and right-aligned. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__table th,
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__table td,
.ttc-nutrition__table th,
.ttc-nutrition__table td { padding: 1rem 0; vertical-align: baseline; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__table th,
.ttc-nutrition__table th { text-align: left; font-weight: 400; color: #5b5b5b; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__table td,
.ttc-nutrition__table td { text-align: right; font-weight: 700; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__table tr + tr th,
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__table tr + tr td,
.ttc-nutrition__table tr + tr th,
.ttc-nutrition__table tr + tr td { border-top: 1px solid rgba(26, 36, 40, .10); }
/* The mockup sets the USDA note in the body's own ink and in bold, not as
   grey small print — it is the sentence that says the numbers are an
   estimate, and it is drawn to be read. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__note,
.ttc-nutrition__note {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a2428;
}

/* Item 11: the diets a recipe suits, under the nutrition box.
 *
 * The same grey card as the nutrition and the Disclaimer, and the same
 * doubled-class dance to outrank the embed's own list rules, which strip the
 * markers and set their own spacing on every `ul` inside a recipe.
 */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-diet__list,
.ttc-diet__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-diet__chip,
.ttc-diet__chip {
  margin: 0;
  padding: .8rem 1.8rem;
  border-radius: 999px;
  background: #fffeec;
  border: 1px solid rgba(81, 0, 13, .25);
  color: #51000d;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
}
/* The embed draws its own marker on every `li` in a recipe —
   `.text ul:not(.custom) li:before { content: "●" }` — and `list-style: none`
   does not touch a generated one. It showed as a dot inside each chip. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-diet__list > li:before,
.ttc-diet__list > li:before { content: none; display: none; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-diet__list > li,
.ttc-diet__list > li { padding-left: 0; position: static; }
.ttc-diet__note { margin-top: 1.6rem; font-size: 1.4rem; color: #6f6f6f; }

/* --- 10 September: the figures on one line, not nine rows -----------------
 *
 * `New Recipe Page.jpg` draws the box as a single cream card with the nine
 * figures wrapping on one line and the diets at the right of the heading. The
 * table these replace was the right answer for a narrow column and the wrong
 * one for a full-width card: nine rows of two words made a very tall box out
 * of very little information.
 *
 * The doubled prefix is not decoration. This block sits inside `.ch-recipe`,
 * where the mirrored CookingHub stylesheet styles every `ul` and puts a
 * generated bullet on every `li` — four class selectors, which a bare
 * `.ttc-nutrition__figures li` loses to silently.
 */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__head,
.ttc-nutrition__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__head h2,
.ttc-nutrition__head h2 { margin: 0; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__figures,
.ttc-nutrition__figures {
  /* One flowing run of TEXT, not a row of boxes.
     It was a wrapping flexbox, and a flex item cannot be broken: when
     "Cholesterol 140 mg" would not fit on the first line the whole item
     dropped to a second line of its own, leaving a short line and one
     orphaned figure under it -- item F3's "clean wrap, no orphaned last
     item". As inline text the run fills each line and breaks where it
     runs out, which is what the mockup shows. */
  display: block;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.5rem;
  line-height: 2.6rem;
}
/* The mockup separates the figures with a pipe character rather than a rule:
   "Calories 96 | Protein 3.6 g | Fat 1.6 g | …", one flowing line. A border
   drew the same idea a little heavier and a little further from the drawing. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__figures > li,
.ttc-nutrition__figures > li {
  display: inline;
  padding: 0;
  margin: 0;
  position: static;
  background: none;
  border-right: 0;
  /* A figure never splits from its label, and a label never ends a line on
     its own. */
  white-space: nowrap;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__figures > li:after,
.ttc-nutrition__figures > li:after {
  content: " | ";
  color: rgba(26, 36, 40, .45);
  font-weight: 400;
  white-space: normal;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__figures > li:last-child:after,
.ttc-nutrition__figures > li:last-child:after { content: ""; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__figures > li:before,
.ttc-nutrition__figures > li:before { content: none; display: none; }
.ttc-nutrition__name { color: #5b5b5b; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__figures strong,
.ttc-nutrition__figures strong { font-weight: 700; }
/* The cream card the mockup draws, and the colour Tom set on 9 September. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition,
.ttc-nutrition { background: #fffeec; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition .ttc-pill,
.ttc-nutrition .ttc-pill { border: 1px solid rgba(81, 0, 13, .25); }

/* Maroon, as it is drawn — sampled #3d0b0c off the mockup, which is #51000d
   through the compression. Weighted to beat the mirrored stylesheet, which
   colours every heading inside `.ch-recipe`. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__head h2,
.ttc-nutrition__head h2 { color: #51000d; }

/* The same label on the /preview-v2/ recipe page, so the two pages do not
   disagree about how the figures are introduced. */
.r2-nutrition__est{display:inline-block;margin-left:12px;padding:3px 10px;
  border-radius:999px;background:rgba(81,0,13,.08);color:#51000d;
  font-size:13px;font-weight:700;line-height:1.5;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;vertical-align:middle}