/* anon-plate.css — styling for the anon /try landing chrome ONLY
   (funnel header, "Create a free account" CTA + tooltip, the collapsible
   targets band, disclaimer, anonymous-save + sign-up dialogs). These are
   elements the logged-in plate doesn't have. The PLATE / recipe-card /
   step-rail formatting is SHARED and lives in plate-styles.css +
   mobile-plate.css (scoped to .plate-skin / .plate-recipes-card) — do NOT
   restyle the plate here. Moved out of templates/plate/try_anon_plate.html
   (was an inline <style> block) 2026-06-25. */

    /* Header strip — kept identical to /plate/try/ so the two
       ad funnels feel like the same product. */
    .try-plate-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1.5rem;
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 1.5rem;
    }
    .try-plate-header .brand {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        text-decoration: none;
        color: #212529;
    }
    .try-plate-header .brand img {
        height: 40px;
        width: 40px;
        object-fit: contain;
    }
    .try-plate-header .brand-name {
        font-family: 'Black Ops One', 'Lilita One', sans-serif;
        font-size: 1.4rem;
        letter-spacing: 0.04em;
        color: #1e6fbe;
    }
    .try-plate-content {
        max-width: 880px;
        margin: 0 auto;
        padding: 0 1rem 2rem;
    }

    /* (.plate-targets + .plate-step-rail + .plate-skin chrome live in
       plate-styles.css so the logged-in include picks them up too.
       The anon-only Personalize button + tooltip styles live below.) */

    /* --- Anon "Personalize my plate" inline button + hover tip ---
       Lives in the right slot of the target strip (replaces the
       previous Female/Male sex toggle). Color tokens come from
       ByteFlavor primary-warm (--bf-primary-500 / 600) — inlined
       as hex literals since the Django app doesn't import
       colors_and_type.css. */
    .plate-personalize-wrap {
        position: relative;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .plate-personalize-subnote {
        font-size: 13px;
        font-weight: 700;
        color: #ef4707;
        letter-spacing: 0.01em;
    }
    .plate-personalize-inline {
        border: none;
        background: #fe6211;
        color: #ffffff;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        padding: 13px 24px;
        border-radius: 999px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        box-shadow: 0 10px 20px rgba(249, 115, 22, 0.25);
        transition: background 150ms ease, transform 150ms ease;
    }
    .plate-personalize-inline:hover {
        background: #ef4707;
        color: #ffffff;
        transform: translateY(-1px);
    }
    /* Hover/focus-within tooltip popover. Pops out below the
       button with a small arrow. Hidden by default with
       pointer-events:none so it doesn't intercept clicks on
       the plate sections behind it. */
    .plate-personalize-tip {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: 320px;
        max-width: 90vw;
        background: #ffffff;
        border: 1px solid #ffead4;
        border-radius: 12px;
        padding: 14px 16px 14px 14px;
        box-shadow: 0 12px 30px rgba(20, 35, 60, 0.14),
                    0 2px 6px rgba(20, 35, 60, 0.08);
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease;
        z-index: 20;
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    /* Reveal-on-hover only on hover-capable (desktop) pointers. On touch,
       tapping the "Create a free account" link emulates :hover/:focus-within,
       which used to pop the info box instead of navigating to signup. Gating
       this behind (hover: hover) means touch taps just follow the link; the
       box opens only via the "What's included" toggle (.tip-open). */
    @media (hover: hover) {
        .plate-personalize-wrap:hover .plate-personalize-tip,
        .plate-personalize-wrap:focus-within .plate-personalize-tip {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
    }
    /* Touch devices toggle the box via the "What's included" control (JS
       flips .tip-open on the wrap), since :hover never fires on touch. */
    .plate-personalize-wrap.tip-open .plate-personalize-tip {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* "What's included" toggle — hidden on hover-capable devices (they use
       hover); shown only where there is no hover pointer (touch / phones). */
    .plate-personalize-info-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 0;
        width: 100%;
        background: none;
        border: 0;
        padding: 2px 6px;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        color: #0061a7;
        cursor: pointer;
    }
    .plate-personalize-info-toggle i { font-size: 12px; }
    @media (hover: none) and (pointer: coarse) {
        .plate-personalize-info-toggle { display: inline-flex; }
    }
    .plate-personalize-tip::before {
        content: '';
        position: absolute;
        top: -7px;
        right: 32px;
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-left: 1px solid #ffead4;
        border-top: 1px solid #ffead4;
        transform: rotate(45deg);
    }
    .plate-personalize-tip-avatar {
        width: 36px;
        height: 36px;
        background: #fff6ed;
        border-radius: 999px;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .plate-personalize-tip-avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .plate-personalize-tip-copy {
        font-size: 12.5px;
        line-height: 1.5;
        color: #495057;
        text-align: left;
    }
    .plate-personalize-tip-list {
        list-style: none;
        margin: 7px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }
    .plate-personalize-tip-list li {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        font-weight: 600;
        color: #212529;
    }
    .plate-personalize-tip-list li i {
        color: #ef4707;
        font-size: 12px;
        width: 12px;
        text-align: center;
    }
    .plate-personalize-tip-copy b {
        display: block;
        color: #212529;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    /* (Anon-only assumptions subline is now styled by
       .plate-targets .lead .assumptions in plate-styles.css.) */

    /* Anon targets band — a COLLAPSIBLE "Generic starting targets" disclosure.
       Header row (info icon + framing link + chevron) on the left, signup CTA on
       the right; the body (generic per-meal chips + Female/Male toggle) shows
       only when expanded. Wired by _initTargetsCollapse() (shares the member
       hero's .collapsed / .th-toggle contract). */
    /* Desktop: a 2-col grid keeps the header toggle (top-left) and the signup
       CTA (top-right) side-by-side, with the collapsible body (chips +
       Female/Male) spanning a full-width row BELOW them — even though the body
       sits between them in the DOM (so mobile stacks header → chips → CTA).
       Grid AREAS decouple visual placement from DOM order. */
    .anon-targets {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "header cta"
            "body   body";
        align-items: center;
        column-gap: 16px;
        row-gap: 10px;
        padding: 2px 0;
    }
    .anon-th-toggle { grid-area: header; }
    .plate-personalize-wrap { grid-area: cta; }
    .anon-targets-body { grid-area: body; }
    /* The whole header line is the collapse toggle (a button). Info icon (orange)
       + framing text (blue, link-like) + chevron. */
    .anon-th-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 0;
        background: transparent;
        padding: 4px 0;
        cursor: pointer;
        font: inherit;
    }
    .anon-th-toggle .anon-th-icon { color: var(--bf-primary-500, #e8590c); font-size: 14px; }
    .anon-th-toggle .anon-th-title {
        font-size: 14px;
        font-weight: 600;
        color: #2563eb;
    }
    .anon-th-toggle .th-chev {
        font-size: 12px;
        color: #98a0a8;
        transition: transform 0.18s ease;
    }
    /* Chevron points down when collapsed, up when expanded. */
    .anon-targets:not(.collapsed) .anon-th-toggle .th-chev { transform: rotate(180deg); }

    /* Collapsible body — generic chips with the sex toggle stacked BELOW them.
       Hidden when collapsed. */
    .anon-targets-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 0; /* desktop spacing handled by the grid row-gap */
    }
    .anon-targets.collapsed .anon-targets-body { display: none; }

    .anon-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .anon-chips .atc {
        display: inline-flex;
        align-items: center;
        border: 1px solid #e3e7ec;
        background: #fff;
        border-radius: 999px;
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 500;
        color: #3a424b;
        white-space: nowrap;
    }
    .anon-chips .atc-suffix { font-size: 13px; color: #9aa1a9; }

    /* Female / Male toggle — soft segmented pill; each option is a ?sex= link so
       switching reloads the whole plate for that example body. */
    .anon-sex-toggle {
        display: inline-flex;
        background: #eef1f4;
        border-radius: 999px;
        padding: 3px;
        gap: 2px;
        flex: none;
    }
    .anon-sex-toggle .ast-opt {
        border: 0;
        background: transparent;
        color: #5b646d;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        padding: 7px 18px;
        border-radius: 999px;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }
    .anon-sex-toggle .ast-opt:hover { color: #2b3138; }
    .anon-sex-toggle .ast-opt.is-active {
        background: #fff;
        color: #2563eb;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
    }

    /* On phones the header + CTA stack; chips wrap. */
    @media (max-width: 576px) {
        .anon-th-head { gap: 8px; }
        .anon-chips .atc { font-size: 12.5px; padding: 4px 10px; }
    }

    /* --- Disclaimer footer — quiet, info-icon, never a hero ----- */
    .plate-disclaimer {
        margin-top: 22px;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid #e9ecef;
        border-radius: 10px;
        color: #6c757d;
        font-size: 11.5px;
        line-height: 1.55;
        display: flex;
        gap: 10px;
    }
    .plate-disclaimer i {
        color: #adb5bd;
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* --- Anonymous-save modal mirrors /plate/try/ --------------- */
    #anon-save-modal .modal-content {
        border-radius: 14px;
        border: 0;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    }
    #anon-save-modal .modal-header { border-bottom: 0; padding-bottom: 0; }
    #anon-save-modal .modal-body {
        text-align: center;
        padding: 0.5rem 2rem 1.25rem;
    }
    #anon-save-modal .modal-body img {
        height: 64px;
        width: 64px;
        object-fit: contain;
        margin-bottom: 0.75rem;
    }
    #anon-save-modal .modal-body h5 { font-weight: 600; margin-bottom: 0.5rem; }
    #anon-save-modal .modal-footer {
        border-top: 0;
        justify-content: center;
        gap: 0.5rem;
        padding-top: 0;
        padding-bottom: 1.5rem;
    }

    /* =====================================================================
       MOBILE SHELL (anon /appetite-plate/try/ only — scoped to .plate-anon)

       The shared GLP-1 mobile chrome (compact target band, step rail,
       inline builder, docked action bar, bottom-sheet food picker, and the
       full-screen recipe detail) now lives in plate-styles.css scoped to
       ``.plate-skin`` so the logged-in cohort inherits it. Only the
       anon-specific shell bits remain here: the sticky funnel header, the
       "Create a free account" personalize button + popover, the disclaimer,
       and the sign-up gate dialog. The display triggers (show docked bar /
       hide inline actions / hide coachmark) live in the per-surface context
       blocks at the end of plate-styles.css.
       ===================================================================== */

    @media (max-width: 768px) {
        /* --- Shell: sticky header + room for the docked bar ----------- */
        .plate-anon .try-plate-header {
            position: sticky;
            top: 0;
            z-index: 1031;
            margin-bottom: 1rem;
            background: rgba(255, 255, 255, 0.92);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
        }
        .plate-anon .try-plate-content {
            padding: 0 1rem;
            padding-bottom: 104px;
        }
        .plate-anon .plate-disclaimer { margin-top: 16px; }

        /* (Compact hero heading + target band + step rail mobile styles are
           shared — see mobile-plate.css ``.plate-skin`` mobile block.) */

        /* Mobile: drop the desktop grid and STACK in DOM order (header → chips →
           CTA → What's-included) inside a light-blue CARD. So expanding the
           header reveals the chips right under it; the chevron pins right. */
        .plate-anon .anon-targets {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            background: #eff8ff;
            border: 1px solid #dff0ff;
            border-radius: 16px;
            padding: 12px 14px;
        }
        .plate-anon .anon-th-toggle { width: 100%; }
        .plate-anon .anon-th-toggle .anon-th-title { font-size: 13.5px; }
        .plate-anon .anon-th-toggle .th-chev { margin-left: auto; }

        /* The Create-account control is a white outline CARD holding the link
           AND its subnote (the longer message). Orange is reserved for the
           docked CTA, so this card is white/outline. */
        .plate-anon .plate-personalize-wrap {
            width: 100%;
            align-items: stretch;
            gap: 2px;
            background: #ffffff;
            border: 1.5px solid #ffd1a8;
            border-radius: 12px;
            padding: 10px 16px;
        }
        .plate-anon .plate-personalize-inline {
            width: 100%;
            justify-content: center;
            background: none;
            color: #ef4707;
            border: 0;
            box-shadow: none;
            padding: 2px 0;
            font-size: 14px;
        }
        .plate-anon .plate-personalize-inline:hover {
            background: none;
            color: #ef4707;
            transform: none;
        }
        /* Subnote (the "longer message") shows UNDER the button text, centered,
           inside the white card. */
        .plate-anon .plate-personalize-subnote {
            display: block;
            text-align: center;
            font-size: 12px;
            color: #8a99ab;
        }
        /* Popover flips above the button (band sits near the top). */
        .plate-anon .plate-personalize-tip {
            top: auto;
            bottom: calc(100% + 10px);
            left: 0;
            right: 0;
            width: auto;
            transform: translateY(4px);
        }
        .plate-anon .plate-personalize-wrap:hover .plate-personalize-tip,
        .plate-anon .plate-personalize-wrap:focus-within .plate-personalize-tip {
            transform: translateY(0);
        }
        .plate-anon .plate-personalize-tip::before {
            top: auto;
            bottom: -7px;
            right: 50%;
            transform: translateX(50%) rotate(45deg);
            border-left: 0;
            border-top: 0;
            border-right: 1px solid #ffead4;
            border-bottom: 1px solid #ffead4;
        }
    }

    @media (max-width: 380px) {
        .plate-anon #plate-tab-content h2.h3 { font-size: 19px; }
    }

    /* =====================================================================
       SIGN-UP GATE DIALOG (anon only — State 6 of the mobile handoff)
       The full-screen recipe detail chrome (.plate-detail-stage) is now shared
       and lives in plate-styles.css. This sign-up gate, shown when an anon
       user taps Save, stays here.
       ===================================================================== */
    #plate-signup-scrim {
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(17, 24, 39, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }
    #plate-signup-scrim.show { opacity: 1; pointer-events: auto; }
    #plate-signup-dlg {
        position: fixed;
        left: 22px;
        right: 22px;
        top: 50%;
        z-index: 1056;
        max-width: 380px;
        margin: 0 auto;
        transform: translateY(-50%) scale(0.94);
        background: #ffffff;
        border-radius: 22px;
        padding: 24px 22px 20px;
        text-align: center;
        box-shadow: 0 24px 60px rgba(17, 24, 39, 0.3);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease, transform 200ms ease;
    }
    #plate-signup-dlg.show { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
    #plate-signup-dlg .dlg-bob {
        width: 52px;
        height: 52px;
        margin: 0 auto 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #plate-signup-dlg .dlg-bob img { width: 100%; height: 100%; object-fit: contain; }
    #plate-signup-dlg h3 {
        margin: 0 0 8px;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: #212529;
    }
    #plate-signup-dlg p { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: #495057; }
    #plate-signup-dlg .dlg-primary {
        width: 100%;
        height: 46px;
        border-radius: 13px;
        border: none;
        background: #fe6211;
        color: #ffffff;
        text-decoration: none;
        font: inherit;
        font-size: 14.5px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 10px 20px rgba(249, 115, 22, 0.25);
        transition: transform 150ms ease;
    }
    #plate-signup-dlg .dlg-primary:hover { color: #ffffff; }
    #plate-signup-dlg .dlg-primary:active { transform: scale(0.98); }
    #plate-signup-dlg .dlg-secondary {
        width: 100%;
        height: 40px;
        margin-top: 8px;
        border: none;
        background: transparent;
        color: #6c757d;
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
    }