/* Recipe extractor pages (/recipe-extractor, /de/rezept-extrahieren,
   /fr/extraire-recette). Layered on styles.css + tools.css. The result card
   follows the app's recipe screen (lib/pages/recipe_detail_page.dart): photo,
   sans title, source · time, serif section headings, circle bullets. */

/* Colours the shared tokens in styles.css don't cover: an error tone for the
   dark page, and the app's PDF palette for Save as PDF (the "linen" page of
   RecipePdfService, lib/services/helper_services/recipe_pdf_service.dart; keep
   them in step). Also set on html.print-recipe so the print rules for html and
   body can use them. */
.extractor-page,
.print-recipe {
    --extractor-error: #F0A08C;
    --extractor-error-border: #D9705A;
    --pdf-linen: #FBF8F5;
    --pdf-terracotta: #C5793F;
    --pdf-olive: #434A42;
    --pdf-sage: #7E9B83;
    --pdf-hairline: #DCD7D1;
    --pdf-muted: #7C786E;
}

/* ---------- Form ---------- */

.extractor {
    background: var(--bg-card);
    border: 1px solid var(--outline-soft);
    border-radius: 20px;
    padding: 24px;
    margin: 28px 0 8px;
}

.extractor [hidden] {
    display: none;
}

.extractor-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.extractor-row {
    display: flex;
    gap: 12px;
}

.extractor-row input {
    flex: 1;
    min-width: 0;
    font: 400 16px/1.4 'Inter', sans-serif;
    color: var(--text-main);
    background: var(--bg-dark);
    border: 1px solid var(--outline);
    border-radius: 12px;
    padding: 13px 16px;
}

.extractor-row input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.extractor-row input[aria-invalid="true"] {
    border-color: var(--extractor-error-border);
}

.extractor-row .btn {
    border: 0;
    cursor: pointer;
    font-weight: 600;
}

.extractor-row .btn:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.simple-page .extractor p {
    font-size: 14px;
    line-height: 1.5;
    margin: 12px 0 0;
}

.simple-page .extractor .extractor-status {
    color: var(--text-main);
}

/* Kept in the DOM (it's the live region) but takes no room while idle. */
.simple-page .extractor .extractor-status:empty {
    margin: 0;
}

.extractor.is-busy .extractor-status::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border: 2px solid var(--outline);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: extractor-spin 0.9s linear infinite;
}

@keyframes extractor-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .extractor.is-busy .extractor-status::before {
        animation: none;
        border-color: var(--accent);
    }
}

.simple-page .extractor .extractor-error {
    color: var(--extractor-error);
}

.simple-page .extractor .extractor-recaptcha {
    font-size: 12px;
}

.simple-page .extractor .extractor-recaptcha a {
    color: var(--text-muted);
    text-decoration: underline;
}

/* The reCAPTCHA badge is replaced by the attribution line under the button,
   as Google's FAQ allows. */
.grecaptcha-badge {
    visibility: hidden;
}

/* ---------- Result ---------- */

.extractor-result {
    margin: 32px 0 8px;
    scroll-margin-top: 112px;
}

.extractor-result[hidden],
.extractor-result [hidden] {
    display: none;
}

.recipe-card {
    background: var(--bg-dark);
    border: 1px solid var(--outline);
    border-radius: 24px;
    overflow: hidden;
    max-width: 560px;
}

.recipe-photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--bg-card);
}

.recipe-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-body {
    padding: 28px 28px 32px;
}

.simple-page .recipe-title {
    font: 700 30px/1.15 'Inter', system-ui, sans-serif;
    letter-spacing: -0.4px;
    color: var(--text-main);
    margin: 0 0 14px;
    overflow-wrap: anywhere;
}

.recipe-title:focus {
    outline: none;
}

.simple-page .recipe-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 15px;
    margin: 0 0 8px;
}

.simple-page .recipe-meta a {
    color: var(--text-muted);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.recipe-time {
    color: var(--text-muted);
    padding-left: 14px;
    border-left: 1px solid var(--outline);
}

.simple-page .recipe-stub-note {
    margin: 20px 0 0;
    color: var(--text-main);
}

.simple-page .recipe-section h3 {
    font: 500 24px/1.2 'Literata', 'Times New Roman', serif;
    margin: 32px 0 4px;
}

.simple-page .recipe-servings {
    font-size: 15px;
    margin: 0 0 12px;
}

.simple-page .ingredient-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--outline);
    border-radius: 16px;
}

.simple-page .ingredient-list li {
    position: relative;
    padding-left: 36px;
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.simple-page .ingredient-list li:last-child {
    margin-bottom: 0;
}

.ingredient-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
}

.ingredient-list strong {
    font-weight: 700;
}

.simple-page .ingredient-list .ingredient-heading {
    padding-left: 0;
    margin-top: 18px;
    font: 500 18px/1.3 'Literata', 'Times New Roman', serif;
}

.simple-page .ingredient-list .ingredient-heading:first-child {
    margin-top: 0;
}

.ingredient-list .ingredient-heading::before {
    display: none;
}

.simple-page .step-list {
    list-style: none;
    counter-reset: recipe-step;
    margin: 12px 0 0;
    padding: 0;
}

.simple-page .step-list li {
    counter-increment: recipe-step;
    position: relative;
    padding-left: 44px;
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.step-list li::before {
    content: counter(recipe-step);
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font: 600 14px/28px 'Inter', sans-serif;
    text-align: center;
}

.simple-page .recipe-missing {
    font-size: 15px;
    font-style: italic;
    margin: 12px 0 0;
}

.extractor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.extractor-actions .btn {
    cursor: pointer;
    font-weight: 600;
}

.extractor-actions .btn-primary {
    border: 1px solid transparent;
}

.extractor-actions .btn-outline {
    background: transparent;
}

.extractor-copy-field {
    width: 100%;
    max-width: 560px;
    margin-top: 12px;
    font: 400 14px/1.4 'Inter', sans-serif;
    color: var(--text-main);
    background: var(--bg-dark);
    border: 1px solid var(--outline);
    border-radius: 10px;
    padding: 10px 12px;
}

.simple-page .extractor-result .extractor-inapp {
    font-size: 15px;
    color: var(--text-main);
    margin: 12px 0 0;
}

.extractor-keep {
    margin-top: 32px;
    padding: 24px;
    border-radius: 20px;
    background: var(--bg-card);
    max-width: 560px;
}

.simple-page .extractor-keep h3 {
    margin-top: 0;
}

.extractor-keep .app-buttons {
    justify-content: flex-start;
    gap: 12px;
    margin-top: 16px;
}

.simple-page .extractor-keep a.btn-store {
    color: var(--text-main);
    border-bottom: 1px solid var(--outline-soft);
}

.simple-page .extractor-keep .extractor-web {
    font-size: 15px;
    margin: 16px 0 0;
}

@media (max-width: 640px) {
    .extractor {
        padding: 18px;
    }

    .extractor-row {
        flex-direction: column;
    }

    .extractor-row .btn {
        width: 100%;
    }

    .recipe-card {
        border-radius: 20px;
    }

    .recipe-body {
        padding: 22px 18px 26px;
    }

    .simple-page .recipe-title {
        font-size: 26px;
    }

    .simple-page .ingredient-list {
        padding: 16px 14px;
    }
}

/* ---------- Save as PDF ---------- */

/* The print sheet that extractor.js builds is the app's exported PDF page
   (RecipePdfService): same palette, point sizes and spacing. Hidden on screen. */
.print-sheet {
    display: none;
}

/* Scoped to html.print-recipe, which extractor.js sets around its print()
   call, so printing the page from the browser menu still prints the page. */
@media print {
    /* No page margins: the browser then has no room for its own date and URL
       header, and the linen reaches the edges. The sheet's padding is the
       margin instead, repeated on every page by box-decoration-break. */
    @page {
        size: A4;
        margin: 0;
    }

    html.print-recipe,
    .print-recipe body {
        background: var(--pdf-linen) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-recipe body > :not(.print-sheet) {
        display: none !important;
    }

    .print-recipe .print-sheet {
        display: block;
        padding: 34pt 40pt 76pt;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        color: var(--pdf-olive);
        font-family: 'Inter', sans-serif;
        font-size: 10.5pt;
        line-height: 1.42;
    }

    .print-sheet [hidden] {
        display: none !important;
    }

    .print-wordmark {
        margin: 0 0 14pt;
        font-family: 'Literata', serif;
        font-weight: 700;
        font-size: 11pt;
        letter-spacing: 3.2pt;
        color: var(--pdf-terracotta);
    }

    .print-head {
        display: flex;
        align-items: flex-start;
        gap: 16pt;
    }

    .print-head-text {
        flex: 1;
        min-width: 0;
    }

    .print-title {
        margin: 2pt 0 0;
        font-family: 'Literata', serif;
        font-weight: 700;
        font-size: 25pt;
        line-height: 1.3;
        color: var(--pdf-olive);
    }

    .print-source {
        margin: 6pt 0 0;
        font-size: 10pt;
        color: var(--pdf-muted);
    }

    .print-meta {
        margin: 10pt 0 0;
        font-weight: 500;
        font-size: 9.5pt;
        letter-spacing: 0.3pt;
        color: var(--pdf-sage);
    }

    .print-meta span + span::before {
        content: '·';
        margin: 0 1.2em;
    }

    .print-thumb {
        flex: none;
        width: 35mm;
        height: 35mm;
        object-fit: cover;
        border-radius: 10pt;
    }

    .print-rule {
        height: 1.4pt;
        margin: 12pt 0 19pt;
        border: 0;
        background: var(--pdf-terracotta);
    }

    /* Floats, not grid: they split across pages in every browser. */
    .print-body {
        display: flow-root;
    }

    .print-body-split .print-ingredients {
        float: left;
        width: 180pt;
    }

    .print-body-split .print-steps {
        margin-left: 202pt;
    }

    .print-heading {
        margin: 0 0 10pt;
        font-family: 'Literata', serif;
        font-weight: 700;
        font-size: 13pt;
        letter-spacing: 0.2pt;
        color: var(--pdf-terracotta);
        break-after: avoid;
    }

    .print-ingredient-list,
    .print-step-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Blocks with the amount or number in a fixed gutter, not flex rows:
       WebKit splits flex rows across pages despite break-inside. */
    .print-ingredient-list li,
    .print-step-list li {
        position: relative;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* The app's gaps (7pt, 12pt) less the leading CSS adds to a single line. */
    .print-ingredient-list li {
        margin: 0 0 4.5pt;
        padding-left: 54pt;
    }

    .print-measure {
        position: absolute;
        left: 0;
        width: 46pt;
        text-align: right;
        font-weight: 600;
        font-size: 10pt;
    }

    .print-ingredient-list .print-ingredient-heading {
        padding-left: 0;
        margin: 8pt 0 5pt;
        font-family: 'Literata', serif;
        font-size: 11pt;
    }

    .print-step-list li {
        margin: 0 0 10pt;
        padding-left: 30pt;
    }

    .print-step-number {
        position: absolute;
        left: 0;
        width: 22pt;
        font-family: 'Literata', serif;
        font-weight: 700;
        font-size: 14pt;
        line-height: 1.25;
        color: var(--pdf-terracotta);
    }

    .print-step-text {
        margin: 0;
        line-height: 1.46;
    }

    /* Fixed, so it repeats at the foot of every page, inside the sheet's
       bottom padding. */
    .print-footer {
        position: fixed;
        left: 40pt;
        right: 40pt;
        bottom: 34pt;
        margin: 0;
        padding-top: 8pt;
        border-top: 0.7pt solid var(--pdf-hairline);
        font-size: 8.5pt;
        color: var(--pdf-muted);
    }

    /* WebKit (Safari) can't repeat a block's padding on each page, and places
       a fixed footer only once. There the page keeps real margins, the footer
       follows the recipe, and the paper stays white rather than linen with
       white margins. */
    @supports not (box-decoration-break: clone) {
        @page {
            margin: 34pt 0;
        }

        html.print-recipe,
        .print-recipe body {
            background: #FFFFFF !important;
        }

        .print-recipe .print-sheet {
            padding: 0 40pt;
        }

        .print-footer {
            position: static;
            margin-top: 24pt;
        }
    }
}