/* Dish pages. Loaded on top of styles.css, which supplies the header, nav,
   footer, review banner and .tool-box. Only what is specific to dishes lives
   here — the shared furniture stays shared so every page keeps matching. */

.dish { padding-top: 0; overflow: hidden; }
/* The hero bleeds to the card edges, so the negative margin stays on the
   image and the figure only carries the gap below. That keeps the caption
   at the normal text inset instead of hanging off the side of the card. */
.dish-figure { margin: 0 0 22px; }
.dish-hero {
    display: block; width: calc(100% + 60px); margin: -30px -30px 0;
    height: 260px; object-fit: cover; background: #eceff4;
}
/* Google asks whether the use of AI generation is self-evident to visitors.
   It has to be legible to count as an answer, so this is not fine print. */
.dish-figure figcaption {
    margin: 0; padding: 9px 0 0;
    font-size: 12.5px; line-height: 1.5; color: #6b7280;
}
.dish h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
.dish-blurb { color: #5a6068; font-size: 1.03em; line-height: 1.7; max-width: 60ch; }

.dish-macros {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin: 22px 0 6px; padding: 16px 0; border-top: 2px solid #eceff4; border-bottom: 2px solid #eceff4;
}
.dish-macros b { display: block; font-size: 1.5em; font-weight: 800; color: #2d6a4a; letter-spacing: -.5px; line-height: 1.1; }
.dish-macros span { font-size: .68em; text-transform: uppercase; letter-spacing: .07em; color: #8b9199; font-weight: 700; }

.dish-toggle { display: flex; background: #eef1ee; border-radius: 12px; padding: 4px; margin: 24px 0 18px; }
.dish-toggle button {
    flex: 1; border: 0; background: none; cursor: pointer;
    font: 600 15px/1 inherit; color: #6d746f; padding: 12px; border-radius: 9px;
    transition: background .15s, color .15s;
}
.dish-toggle button.on { background: #fff; color: #1d2021; box-shadow: 0 1px 5px rgba(0,0,0,.12); }
.dish-toggle button:focus-visible { outline: 2.5px solid #667eea; outline-offset: 2px; }

.pane-intro { color: #6d746f; font-size: .95em; margin-bottom: 14px; }

.ings { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ing {
    display: flex; align-items: center; gap: 12px;
    background: #f7f9f7; border-radius: 10px; padding: 10px 12px;
}
.ing-photo { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #eceff4; }
.ing .food-tile { width: 46px; height: 46px; margin-right: 0; }
.ing-tx { flex: 1; min-width: 0; }
.ing-tx b { display: block; font-size: 15px; font-weight: 600; color: #26292a; }
.ing-tx small { display: block; font-size: 12.5px; color: #7d8482; margin-top: 1px; }
.ing-g { font-weight: 700; color: #2d6a4a; font-size: 14px; white-space: nowrap; }
.ing-g.none { color: #b8bec2; font-weight: 400; }
.ing-plain { background: #fbfcfb; border: 1px dashed #e2e7e3; }

.ing .pick {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
    border: 2px solid #c9cddb; background: #fff; color: #667eea;
    font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
    display: grid; place-items: center; padding: 0;
}
.ing .pick[aria-pressed="true"] { background: #2d6a4a; border-color: #2d6a4a; color: #fff; }
.ing .pick:focus-visible { outline: 2.5px solid #667eea; outline-offset: 2px; }

.dish-cta {
    display: block; width: 100%; border: 0; cursor: pointer;
    background: #2d6a4a; color: #fff; font: 700 15px/1 inherit;
    padding: 15px; border-radius: 11px; margin-bottom: 8px;
}
.dish-cta:hover { background: #24583d; }
.dish-cta:focus-visible { outline: 2.5px solid #1d2021; outline-offset: 2px; }

.steps { margin: 12px 0 0 20px; color: #4a5258; }
.steps li { margin-bottom: 11px; line-height: 1.65; }

.dish-foot { font-size: .84em; color: #8b9199; line-height: 1.6; margin-top: 14px; }

/* ---- the index ---- */
.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.dish-card {
    display: block; text-decoration: none; color: inherit; background: #f7f9f7;
    border-radius: 14px; overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.dish-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(30,50,40,.14); }
.dish-card img { display: block; width: 100%; height: 158px; object-fit: cover; background: #eceff4; }
.dish-card .c { padding: 14px 15px 16px; }
.dish-card b { display: block; font-size: 16px; color: #26292a; line-height: 1.3; margin-bottom: 5px; }
.dish-card small { display: block; font-size: 12.5px; color: #7d8482; line-height: 1.5; }
.dish-card .meta { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #2d6a4a; }
.dish-card .draft {
    display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: #8a6a12;
    background: #fdf4dd; border: 1px solid #ecd08f; padding: 2px 6px; border-radius: 4px;
}

@media (max-width: 600px) {
    .dish-hero { width: calc(100% + 36px); margin: -22px -18px 0; height: 200px; }
    .dish-figure { margin-bottom: 18px; }
    .dish-macros { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
}

/* ---- what the dietitian said -------------------------------------------
   Deliberately not a pull-quote or a testimonial box. It is somebody's
   professional opinion sitting in the flow of the page, and it should read
   like a note in the margin rather than marketing. */
.dietitian {
    margin: 30px 0 0; padding: 18px 20px;
    background: #f4f8f5; border: 1px solid #dcebe1; border-radius: 12px;
}
.dietitian h3 {
    font-size: 1em; color: #2d6a4a; margin: 0 0 12px;
    letter-spacing: .01em;
}
.dietitian ul { list-style: none; margin: 0; padding: 0; }
.dietitian li { margin-bottom: 16px; }
.dietitian li:last-child { margin-bottom: 0; }
.dietitian p { color: #33403a; line-height: 1.7; margin: 0; font-size: 0.96em; }
.dietitian .by {
    margin-top: 5px; font-size: 0.82em; color: #6f8078;
    display: flex; gap: 9px; flex-wrap: wrap; align-items: baseline;
}
.dietitian .by .on::before { content: "· "; }
.dietitian .by time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---- her own page ---- */
.reviewer-page h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; }
.reviewer-page .reg {
    font-size: 0.9em; color: #7d8482; margin: 0 0 20px;
    font-variant-numeric: tabular-nums;
}
.reviewer-page .bio { color: #3f4650; line-height: 1.75; margin-bottom: 26px; }
.reviewer-page .scope {
    background: #f7f8fa; border: 1px solid #e2e5ea; border-radius: 11px;
    padding: 16px 19px; margin-bottom: 28px;
}
.reviewer-page .scope h3 { font-size: 1em; color: #56606d; margin: 0 0 9px; }
.reviewer-page .scope p { font-size: 0.94em; color: #5c6470; line-height: 1.7; margin: 0 0 9px; }
.reviewer-page .scope p:last-child { margin-bottom: 0; }
.reviewer-page .record h3 { font-size: 1.15em; color: #26292a; margin: 0 0 4px; }
.reviewer-page .record .lead { font-size: 0.92em; color: #7d8482; margin-bottom: 18px; }
.reviewer-page .rec { border-top: 1px solid #eceff0; padding: 16px 0; }
.reviewer-page .rec h4 { font-size: 1em; margin: 0 0 10px; }
.reviewer-page .rec h4 a { color: #2d6a4a; text-decoration: none; font-weight: 700; }
.reviewer-page .rec h4 a:hover { text-decoration: underline; }
.reviewer-page .rec ul { list-style: none; margin: 0; padding: 0; }
.reviewer-page .rec li { margin-bottom: 14px; }
.reviewer-page .rec p { color: #3f4650; line-height: 1.7; margin: 0; font-size: 0.95em; }
.reviewer-page .rec .by {
    margin-top: 4px; font-size: 0.82em; color: #8b938f;
    display: flex; gap: 9px; align-items: baseline;
}
.reviewer-page .rec .by time { margin-left: auto; font-variant-numeric: tabular-nums; }