/* The 10 September recipe redesign.
 *
 * Everything here decorates markup that `app/recipepage.py` inserts at render
 * time. It is a separate file from `nutrition.css` and `ink.css` because those
 * two are loaded by pages that are not recipes, and none of this applies
 * anywhere else.
 *
 * The doubled-class prefix appears wherever a rule has to outrank the mirrored
 * CookingHub stylesheet, which is scoped to
 * `.ch-embed.ch-embed .ch-recipe.ch-recipe` — four class selectors. A single
 * class here would lose to it silently.
 */

/* --- reserved space for the two Tom's Desk embeds ----------------------- *
 *
 * Item 12a: a script that arrives after first paint and then inserts a box is
 * a layout shift on every recipe page. The slot holds the height open before
 * the answer comes back, so nothing below it moves. `min-height` and not
 * `height`: the embed is allowed to be taller than we guessed, and growing
 * downwards past the fold is not a shift a reader sees.
 *
 * The two numbers are what the embeds actually render to, measured rather
 * than guessed — see audit/recipe-redesign-0910/embed-heights.json.
 */
.ttc-embed-slot { display: block; }
/* The reviews embed opens its iframe at exactly 760px and only ever grows,
   so 760 is not a guess — it is the number the embed itself starts from, and
   reserving it means the frame arriving costs nothing. */
.ttc-embed-slot--reviews { min-height: 760px; }
/* The policy embed measured 1487px at 1440, 1280, 1024 and 900; 1668 at 768;
   3131 at 390. The floors are those numbers rounded up, which is why the
   brackets are where they are rather than on the theme's usual breakpoints. */
.ttc-embed-slot--policy  { min-height: 1500px; }
@media screen and (max-width: 800px) {
  .ttc-embed-slot--policy { min-height: 1700px; }
}
@media screen and (max-width: 560px) {
  .ttc-embed-slot--policy { min-height: 3150px; }
}
/* An embed that fails leaves an empty box. Better an empty box that is the
   right size than a page that jumps, but it must not look like a hole: no
   border, no background, nothing to read as broken. */
.ttc-reviews-embed, .ttc-policy-embed { background: none; }

/* --- item 7: the signs on the ingredient and tool boxes ----------------- */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-sign,
.ttc-sign {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin: -1.2rem 0 2.4rem;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1.9rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Brand orange for the ingredients, brand maroon for the tools — the same
   pair the tools box's own red outline and the site's headings already use,
   so the signs read as part of the design rather than as two new colours. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-sign--ing,
.ttc-sign--ing  { background: #fff1e3; color: #a8410a; border: 1px solid #f4b184; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-sign--tool,
.ttc-sign--tool { background: #fdecec; color: #51000d; border: 1px solid #e79b95; }
.ttc-sign__hand {
  width: 1.6rem; height: 1.6rem; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--ttc-hand) center/contain no-repeat;
          mask: var(--ttc-hand) center/contain no-repeat;
}
:root {
  --ttc-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11m0-1.5a1.5 1.5 0 0 1 3 0V12m0-1a1.5 1.5 0 0 1 3 0v1m0 0v4a6 6 0 0 1-6 6h-1a6 6 0 0 1-5.2-3l-2.3-4a1.5 1.5 0 0 1 2.6-1.5L9 15' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- item 10: Ko-fi ----------------------------------------------------- */
.ttc-kofi { text-align: center; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-kofi__btn,
.ttc-kofi__btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 3rem;
  border-radius: 999px;
  /* The mockup's button is the brand maroon — #54010b off the JPEG, which is
     #51000d through the compression — not the near-black it was drawn in. */
  background: #51000d;
  color: #fff;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700;
  text-decoration: none;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-kofi__btn:hover,
.ttc-kofi__btn:hover { background: #6b0212; text-decoration: none; }
.ttc-kofi__cup {
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: 50%;
  background: #ff5f5f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h11v6a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V8Zm11 1h2a2 2 0 0 1 0 4h-2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1.5rem no-repeat;
}

/* --- item 4: the NEW star ------------------------------------------------ *
 *
 * Drawn rather than fetched: it is one shape, it has to sit at two very
 * different sizes (a card corner and a recipe hero), and a background image
 * would be one more request in front of the largest paint on the page.
 * The star is a clip-path on a yellow square, with the word laid over it.
 */
.ttc-new {
  --ttc-new-size: 62px;
  width: var(--ttc-new-size);
  height: var(--ttc-new-size);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: #ffe600;
  clip-path: polygon(50% 0%, 62% 34%, 98% 35%, 69% 57%, 80% 91%,
                     50% 70%, 20% 91%, 31% 57%, 2% 35%, 38% 34%);
}
.ttc-new__word {
  font-size: calc(var(--ttc-new-size) * .19);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1a2428;
  transform: translateY(6%);
}
/* On a card: bottom-left of the bottom band, opposite the share button, which
   is what New Icon.jpg shows. The band is a flex row so the two ends hold. */
.bottom > .ttc-new { --ttc-new-size: 54px; }
article .bottom { position: relative; }

/* --- the hero ----------------------------------------------------------- */
.ch-embed .ttc-hero__servings, .ttc-hero__servings {
  margin: 0 0 1.8rem;
  color: #fff;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
}
.ttc-hero__marks {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0 0 1.8rem;
}
.ttc-hero__marks .ttc-flag {
  position: static;
  transform: none;
  width: 4.6rem;
  height: 4.6rem;
}
.ttc-hero__marks .ttc-new { --ttc-new-size: 48px; }

/* The intro clamp. `-webkit-line-clamp` keeps every word in the HTML — the
   text is all there for a search engine and for a reader who expands it —
   and the button is revealed by script only when the text is actually taller
   than the clamp, so a short intro shows no control at all (item 5). */
.ttc-intro__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ttc-intro.is-open .ttc-intro__body {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.ttc-intro__more {
  margin: .4rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.ttc-intro__more:hover { text-decoration: none; }

/* The diets, over the photograph. Bottom-right, clear of the share icons at
   the top-right, and wrapping upward on a narrow screen rather than off it. */
/* The doubled prefix matters here and not only for tidiness: the card's
   header is INSIDE `.ch-recipe`, so the mirrored CookingHub rules — four class
   selectors — beat a bare `.ttc-pill`, and the pills rendered as dark text on
   the maroon with no white behind them. Measured, not guessed. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-hero__diets,
.ttc-hero__diets {
  position: absolute;
  right: 2.4rem;
  bottom: 2.4rem;
  left: 2.4rem;
  z-index: 11;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-hero__diets > li.ttc-pill,
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-pill,
.ttc-pill {
  padding: .7rem 1.6rem;
  border-radius: 999px;
  background: #fff;
  color: #1a2428;
  font-size: 1.4rem;
  line-height: 1.9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* --- the strip under the hero ------------------------------------------- */
.ttc-herobar { margin: 0 0 3rem; }
.ttc-herobar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  padding: 2.4rem 5rem;
  border-radius: 0 0 4rem 4rem;
  background: #f8f8f8;
}
.ttc-herobar__cal { margin: 0; font-size: 1.6rem; line-height: 2.2rem; }
.ttc-herobar__cal a { font-weight: 700; text-decoration: underline; }
.ttc-herobar__cal a:hover { text-decoration: none; }
@media screen and (max-width: 500px) {
  .ttc-herobar__in { padding: 2rem; border-radius: 0 0 2rem 2rem; }
}

/* --- "Before You Start" and the button, on one line --------------------- */
/* Heading and button on one line, the button immediately after the words
   rather than pushed to the far edge: in the mockup the heading block ends at
   x=445 of a container running 45 to 1285 and the button starts at 497, a gap
   of about 52px. `space-between` put it at 1285. */
.ttc-beforebar__in {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5.2rem;
  flex-wrap: wrap;
}
/* The heading block is a `.gt-block`, and the theme gives those the full
   width of their container. In a flex row that is a first item 957px wide,
   which pushed the button onto a second line — the mockup has the two on one,
   heading left and button right. Letting it shrink is the whole fix. */
.ttc-beforebar__in > .gt-block {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  /* The theme centres a `.gt-block` with automatic side margins. Once the
     block had shrunk to its text those margins were 149px each and they put
     the heading in the middle of the row, whatever justify-content said. */
  margin-left: 0;
  margin-right: 0;
}
/* The two blocks inside were centred on their own; in a row they read left. */
.ttc-beforebar__in > .gt-block h2,
.ttc-beforebar__in > .gt-block p { text-align: left !important; }
/* "Before We Start" is maroon in the mockup, not the body's ink. */
.ttc-beforebar__in > .gt-block h2 { color: #51000d; }
.ttc-beforebar__btn { flex: 0 0 auto; }
.ttc-beforebar__btn p { text-align: left !important; margin: 0; }
.ttc-beforebar__btn img { margin: 0 !important; }
@media screen and (max-width: 760px) {
  .ttc-beforebar__in { justify-content: center; }
  .ttc-beforebar__in > .gt-block h2,
  .ttc-beforebar__in > .gt-block p { text-align: center !important; }
  .ttc-beforebar__btn p { text-align: center !important; }
}

/* --- the recipe card's maroon header ------------------------------------ *
 *
 * The mockup repeats the hero's identity line at the top of the card. Same
 * maroon as the hero, same radius, and the diet pills sit at the right on a
 * wide screen and wrap under on a narrow one rather than off the edge.
 */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-card__head,
.ttc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  padding: 3rem 5rem;
  margin: 0 0 3rem;
  border-radius: 4rem;
  background: #51000d;
  color: #fff;
}
.ttc-card__headin { display: flex; flex-direction: column; gap: 1.4rem; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-card__title,
.ttc-card__title {
  margin: 0;
  color: #fff;
  font-size: 3.2rem;
  line-height: 3.8rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.ttc-card__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  font-size: 1.5rem;
  line-height: 2rem;
}
.ttc-card__marks { display: inline-flex; align-items: center; gap: 1rem; }
.ttc-card__marks .ttc-flag {
  position: static; transform: none; width: 3.4rem; height: 3.4rem;
}
.ttc-card__marks .ttc-new { --ttc-new-size: 36px; }
.ttc-card__date { opacity: .85; }
/* The pill list is absolutely positioned because on the hero it floats over
   the photograph. In the card header and in the nutrition box it is an
   ordinary item in a row, so it is put back to static — and the selector has
   to carry the same `.ch-embed .ch-recipe` weight as the rule it is
   overriding, because the card header is inside `.ch-recipe` and a bare
   `.ttc-card__head .ttc-hero__diets` is two classes against five. Without the
   weight the pill stayed absolute and landed at the bottom-right of the
   Ingredients | Tools panel, half outside it. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-card__head .ttc-hero__diets,
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__head .ttc-hero__diets,
.ttc-card__head .ttc-hero__diets,
.ttc-nutrition__head .ttc-hero__diets {
  position: static;
  justify-content: flex-end;
  gap: 1rem;
  left: auto; right: auto; bottom: auto;
  width: auto;
}
@media screen and (max-width: 500px) {
  .ttc-card__head { padding: 2rem; border-radius: 2rem; }
  .ttc-card__title { font-size: 2.6rem; line-height: 3.2rem; }
}

/* --- the green Print button --------------------------------------------- */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-print,
.ttc-print {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 3.2rem;
  border: 0;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-size: 1.7rem;
  line-height: 2.2rem;
  font-weight: 700;
  cursor: pointer;
}
.ttc-print:hover { background: #16a34a; }
.ttc-print__icon {
  width: 2rem; height: 2rem; flex: 0 0 auto; background: #fff;
  -webkit-mask: var(--ttc-printer) center/contain no-repeat;
          mask: var(--ttc-printer) center/contain no-repeat;
}
:root {
  --ttc-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V3h10v5M7 18H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* The strip becomes a row with the button on its right, which is what
   CookingHub's own `.info-buttons` layout does and ours had no button for. */
.ch-embed.ch-embed .ch-recipe.ch-recipe #info .info-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
}
/* Nothing on this page prints except the recipe, and a button that prints is
   not part of a printed recipe. */
@media print { .ttc-print, .ttc-kofi, .ttc-sign { display: none !important; } }

/* The embed puts a generated bullet on every `li` inside a recipe, which
   showed as a dot inside each pill — the same trap the diet chips hit on
   9 September, in a different list. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-hero__diets > li:before {
  content: none; display: none;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-hero__diets > li {
  padding-left: 0; position: static; background: #fff;
}

/* AAC4 [C5]: the hero card is the brand maroon, on every recipe.
   
   The theme paints it `#603D00` — the brown Tom's note names — through
   `.bgcolor-kitchen-guide`, which is CookingHub's colour for the whole
   kitchen-guide section and arrives with the mirrored bundle. It is not
   edited there: the bundle is regenerated from their theme, so an edit in it
   would be undone by the next mirror. Overridden here instead, on the one
   element that wears it, which is the hero on a recipe and on a recipe
   category — the same card, the same brand, and the maroon the "My Recipes"
   title card in the listing mockup is already painted. */
section.gt-block.intro.bgcolor-kitchen-guide { background: #51000d; }

/* The hero's foot, to the mockup.
 *
 * Four things, all of them visible in a screenshot of the live page beside
 * `New Recipe Page.jpg` at 1440.
 *
 * 1. "Read More" was drawn in the theme's ink — rgb(26, 36, 40) — on the
 *    maroon card, which is all but invisible. The button had `color: inherit`
 *    and the theme's own `button` rule is more specific than that, so the
 *    inheritance never happened. The mockup has it white, bold, underlined.
 * 2. The mockup rules a hairline across the card above the author row. Ours
 *    had nothing there.
 * 3. The mockup's author line is the avatar, the name, and the date — no role
 *    under the name. `<em>Founder</em>` comes from the captured markup and
 *    stays in the HTML; it is not drawn, because it is not in the drawing.
 * 4. "Published:" and the date are on one line in the mockup. The captured
 *    markup breaks them with a `<br>`; the break is collapsed rather than
 *    removed, again so the words in the HTML do not change. */
section.gt-block.intro .ttc-intro__more {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
section.gt-block.intro .content .in.with-info > .info {
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding-top: 2.2rem;
  margin-top: 2.2rem;
}
section.gt-block.intro .chef-label em { display: none; }
section.gt-block.intro .date br { display: none; }
section.gt-block.intro .date { white-space: nowrap; }

/* The "Recipe:" label — item 6 of the allowed set.
 *
 * The mockup has it left-aligned and maroon. The stored markup centres it with
 * an inline `style="text-align: center"`, which is why this needs `!important`
 * to win; the words themselves are Tom's and are not touched, including the
 * line about shopping the ingredients that the mockup does not have and that
 * is written up in QUESTIONS.md §18. */
h2#rec {
  text-align: left !important;
  color: #51000d;
}
h2#rec + p { text-align: left !important; }

/* "Directions:" is maroon in the mockup, like "Recipe:" and "Before We
   Start"; "Ingredients:" and "Tools:" are the body's ink, and stay that way.
   Sampled off the JPEG at the darkest quarter of each heading's pixels:
   #3e0911 for Directions against #212224 for Ingredients. The selector
   carries the `.ch-embed .ch-recipe` weight because the heading is inside the
   recipe block, where the mirrored stylesheet colours it. */
.ch-embed.ch-embed .ch-recipe.ch-recipe h2.directions-title,
h2.directions-title { color: #51000d; }

/* The Print button on a phone.
 *
 * CookingHub hides that container below its phone breakpoint — those were its
 * own "save recipe" controls and it did not want them there. On our pages the
 * container holds one thing, the Print button, which is item 8 of the allowed
 * set and has no reason to disappear on the device most likely to be propped
 * against a mixing bowl. Weighted to beat the mirrored rule, which lives
 * inside `.ch-recipe`. */
.ch-embed.ch-embed .ch-recipe.ch-recipe #info .info-buttons > div.buttons {
  display: block;
}

/* The portrait in the recipe card's identity row, as the mockup draws it:
   the same round avatar the hero shows, at the row's own scale. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-card__author,
.ttc-card__author { display: inline-flex; align-items: center; gap: 1rem; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-card__avatar,
.ttc-card__avatar {
  width: 3.4rem; height: 3.4rem; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; background: #fff;
}