/* 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); }
.ttc-nutrition__note { margin-top: 1.6rem; font-size: 1.4rem; color: #6f6f6f; }