/* Standalone calculator skin, matching assets/css/recipes.css.
   Local font assets are copied/embedded by scripts/build_baking_calculator.py. */
@font-face {
    font-family: "Lora";
    src: url("fonts/Lora-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype");
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-BoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}
:root {
    --recipe-sage: #9BAE9B;
    --recipe-pink: #C77F83;
    --recipe-text: #252525;
    --recipe-muted: #555555;
    --recipe-white: #FFFFFF;
    --recipe-serif: "Lora", Georgia, serif;
    --recipe-sans: "Lato", Arial, sans-serif;
    --line: #e2e7de;
    --panel: #f6f8f3;
    font-family: var(--recipe-sans);
    color: var(--recipe-text);
    background: #f7f8f5;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
main { max-width: 1280px; margin: auto; padding: 40px 28px; }
main > header { border-bottom: 1px solid var(--recipe-sage); padding-bottom: 24px; margin-bottom: 28px; }
h1, h2, legend { font-family: var(--recipe-serif); }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.25; margin: 14px 0; }
h2 { font-size: 1.45rem; font-weight: 700; margin: 0 0 16px; }
p { line-height: 1.55; }
main > header p { color: var(--recipe-muted); margin-bottom: 0; }
.eyebrow { font-size: .72rem; letter-spacing: .14em; color: var(--recipe-muted); font-weight: 700; }
body.embedded main > header { display: none; }
:root:has(body.embedded:not(.print-preview)) {
    background: transparent;
    --recipe-white: transparent;
    --panel: transparent;
}
body.embedded:not(.print-preview) main {
    max-width: none;
    padding: 0;
}
main > header #language { max-width: 180px; }
main > header label[for=language] { margin-top: 20px; }
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 30px; align-items: start; }
.card { padding: 24px; margin-bottom: 20px; background: var(--recipe-white); }
#controls { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
label { display: block; font-size: .87rem; font-weight: 600; margin: 18px 0 7px; }
select, input, button { font: inherit; min-width: 0; }
select, input[type=number] {
    width: 100%; min-height: 44px; padding: 10px;
    border: 1px solid #bdc8b9; border-radius: 7px;
    background: var(--recipe-white); color: var(--recipe-text);
}
select { font-size: .9rem; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pair > div, fieldset { min-width: 0; }
#controls > label:first-of-type { margin-top: 0; }
fieldset { border: 1px solid var(--line); border-radius: 7px; margin: 20px 0; padding: 0 12px 12px; }
legend { font-size: 1.05rem; padding: 0 6px; }
.hint { font-size: .82rem; color: var(--recipe-muted); line-height: 1.5; }
.check { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; }
.check input, .print-picture-option input { width: 18px; height: 18px; flex: none; accent-color: var(--recipe-sage); }
button { cursor: pointer; min-height: 44px; border: 0; border-radius: 7px; padding: 10px 14px; }
.secondary { background: #e9eee5; color: var(--recipe-text); }
.secondary:hover { background: #dce5d7; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--recipe-pink); outline-offset: 3px;
}
a { color: #4a654a; }
.error { padding: 16px; background: #fff0eb; color: #7b352a; border-radius: 7px; }
footer { text-align: left; color: var(--recipe-muted); font-size: .8rem; margin-top: 32px; max-width: 80ch; }

/* Recipe: white, flat and open, with the site's sage/pink dividers. */
#recipeOutput { min-width: 0; background: var(--recipe-white); border-bottom: 2px solid var(--recipe-sage); }
#recipeOutput > .card { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; }
.print-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 24px; }
.print-picture-option { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 400; min-height: 44px; }
#printStatus { flex-basis: 100%; margin: 0; }
#printStatus:empty { display: none; }

.recipe-header { padding-top: 10px; }
.recipe-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.recipe-topline::before {
    content: "◇"; display: flex; align-items: center; justify-content: center;
    flex: 1; min-width: 0; height: 1.5rem;
    color: var(--recipe-pink); font: 1.4rem/1 var(--recipe-serif);
    background:
        linear-gradient(var(--recipe-sage), var(--recipe-sage)) left center / calc(50% - 1.2rem) 1px no-repeat,
        linear-gradient(var(--recipe-sage), var(--recipe-sage)) right center / calc(50% - 1.2rem) 1px no-repeat;
}
.recipe-header h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; margin: 0 0 24px; }
.article-link { margin: -12px 0 24px; font-size: .9rem; }
.recipe-header-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.recipe-header-body:has(> figure[hidden]) { grid-template-columns: 1fr; }
.recipe-header-text { min-width: 0; }
.summary { background: transparent; padding: 0; margin: 0; }
.summary p { margin: 8px 0; line-height: 1.55; }
.summary .factor { font-family: var(--recipe-serif); font-size: 2.35rem; line-height: 1.1; font-weight: 700; color: var(--recipe-pink); margin: 10px 0 14px; }
.summary .recipe-yield { font-style: italic; color: var(--recipe-muted); }
.warning { color: #734b25; background: #fff6e5; border-radius: 7px; padding: 10px; font-size: .9rem; }
.recipe-header figure { min-width: 0; width: 100%; margin: 0; }
.recipe-header img { display: block; width: 100%; height: auto; max-height: 360px; aspect-ratio: auto; object-fit: contain; border-radius: 20px; }
.recipe-header figcaption { font-size: .82rem; line-height: 1.5; color: var(--recipe-muted); margin-top: 9px; }

/* Section headings and compact ingredients follow the recipe card. */
.resultHeading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.resultHeading h2 { flex: 1; margin: 0; }
.resultHeading h2, .method-card > h2 { display: flex; align-items: center; gap: .8em; }
.resultHeading h2::after, .method-card > h2::after { content: ""; flex: 1; min-width: 1rem; border-top: 1px solid var(--recipe-sage); }
.ingredient-group { margin-top: 18px; }
.ingredient-group h3 { font-family: var(--recipe-sans); font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.ingredient { padding: 3px 0; border: 0; line-height: 1.5; }
.ingredient-main { display: block; overflow-wrap: anywhere; }
.amount { font-weight: 600; white-space: nowrap; color: var(--recipe-text); }
.original { font-size: .78rem; color: var(--recipe-muted); line-height: 1.5; margin: 2px 0 4px; }
summary { cursor: pointer; font-family: var(--recipe-sans); font-size: .9rem; }
details p { font-size: .85rem; color: var(--recipe-muted); }
.recipe-notes { margin-top: 10px; }
.recipe-notes summary { font-size: .82rem; color: var(--recipe-muted); }

/* Preserve native sub-numbering. Only explicit H3 phases get circle badges. */
#method { counter-reset: recipe-phase; }
#method:has(> h3) { padding-inline-start: 3.25rem; }
.method-card h3, .method-card h4 { font-family: var(--recipe-sans); font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin: 24px 0 .35rem; }
#method > h3 { counter-increment: recipe-phase; position: relative; }
#method > h3:first-child { margin-top: 0; }
#method > h3::before {
    content: counter(recipe-phase); position: absolute; inset-inline-start: -3.25rem; top: 0;
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border: 1.5px solid var(--recipe-pink); border-radius: 50%;
    color: var(--recipe-pink); font: 600 .9rem/1 var(--recipe-sans);
}
.method-card p, .method-card li { font-family: var(--recipe-sans); line-height: 1.55; }
.method-card p { margin: 0 0 .55rem; }
.method-card h3 + :is(p, ol, ul) { margin-top: 0; }
.method-card ol, .method-card ul { padding-inline-start: 1.5rem; margin: 0 0 .55rem; }
.method-card li { padding-inline-start: 0; margin: 0; line-height: 1.7; }
.method-card li::marker { color: var(--recipe-text); font-weight: 400; }
.method-card li > p { margin-block: 0 .55rem; }
.method-card figure { margin: 18px 0; }
.method-card img { display: block; max-width: 100%; width: auto; max-height: 420px; height: auto; object-fit: contain; border-radius: 20px; margin: 18px auto; }

/* Print view uses the same recipe header and content, without controls. */
body.print-preview { background: #e7e9e3; }
.print-preview main { max-width: 900px; background: white; margin: 24px auto; padding: 24px 32px; box-shadow: 0 3px 24px #00000015; }
.print-preview main > header, .print-preview #controls, .print-preview footer, .print-preview .calculation-details { display: none; }
.print-preview .layout { display: block; }
.print-preview #recipeOutput { border: 0; }
.print-preview #recipeOutput > .card { padding-inline: 0; margin-bottom: 20px; }
.print-preview .print-tools { position: sticky; top: 0; background: white; border-bottom: 1px solid var(--line); padding-block: 12px; z-index: 1; }
.print-preview .summary .eyebrow { display: none; }
.print-preview .summary .factor { font-size: 1.8rem; }
.print-preview .resultHeading button { display: none; }
.print-preview #copyRecipe { display: none; }
.print-preview.no-print-images .recipe-header-body { grid-template-columns: 1fr; }
.print-preview.no-print-images #recipeOutput img, .print-preview.no-print-images #recipeOutput figure,
.print-preview.no-print-images #method p:has(> img:only-child) { display: none; }

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    main { padding: 28px 16px; }
    .print-preview main { margin: 0; padding: 20px; }
}
@media screen and (max-width: 600px) {
    .card { padding: 18px; }
    .recipe-header-body { grid-template-columns: 1fr; gap: 18px; }
    .recipe-header h1 { margin-bottom: 18px; }
    #method:has(> h3) { padding-inline-start: 2.5rem; }
    #method > h3::before { width: 1.5rem; height: 1.5rem; inset-inline-start: -2.5rem; font-size: .8rem; }
}
@media print {
    @page { margin: 16mm; }
    body, body.print-preview { background: white; color: var(--recipe-text); font-size: 10.5pt; }
    main, .print-preview main { max-width: none; margin: 0; padding: 0; box-shadow: none; }
    #controls, main > header, footer, .print-tools, .calculation-details, button { display: none !important; }
    .layout { display: block; }
    #recipeOutput, .print-preview #recipeOutput { border: 0; }
    .card, #recipeOutput > .card, .print-preview #recipeOutput > .card { padding: 0; margin-bottom: 16pt; border: 0; box-shadow: none; }
    .recipe-topline { margin-bottom: 10pt; }
    .recipe-header-body { grid-template-columns: 1fr 1fr; gap: 18pt; }
    .summary .eyebrow { display: none; }
    .summary .factor, .print-preview .summary .factor { font-size: 17pt; margin: 0 0 7pt; }
    h1 { font-size: 21pt !important; }
    h2 { font-size: 15pt; }
    h3, h4, .method-card h3 { font-size: 11pt; }
    h1, h2, h3, h4 { break-after: avoid-page; }
    .recipe-header, .recipe-header figure, .method-card figure, .method-card li { break-inside: avoid-page; }
    .ingredient { padding: 2pt 0; break-inside: avoid-page; }
    .ingredient-group { margin-top: 10pt; }
    .method-card img, .recipe-header img { max-height: 65mm; max-width: 100%; width: auto; margin: 10pt auto; object-fit: contain; }
    #recipeOutput .recipe-notes { display: block !important; margin-top: 7pt; }
    #recipeOutput .recipe-notes > summary { display: none; }
    #recipeOutput .recipe-notes p { color: #333; font-size: 9pt; }
    .hint { color: #444; font-size: 9pt; }
    .warning { color: #222; background: none; padding: 0; }
    #method > h3::before, .method-card li::marker { color: #333; border-color: #777; }
    body.no-print-images .recipe-header-body { grid-template-columns: 1fr; }
    body.no-print-images #recipeOutput img, body.no-print-images #recipeOutput figure,
    body.no-print-images #method p:has(> img:only-child) { display: none !important; }
    a { color: inherit; text-decoration: none; }
}