/* ============================================================================
   fitVibe · FV Chrome — L2 Context bar (Φάση 3)
   ----------------------------------------------------------------------------
   L2 answers "what am I doing here". It is the only chrome layer that swaps
   per page; L1 and L3 stay put.

   Two context bars already existed and disagreed on every value:

     surface   element                     height   z-index  surface treatment
     Search    .sab-m-header               60px     20       solid white
     Studio    .studio-gallery
               .gallery-btn-area           68px     90       scrim over hero

   Same role, same viewport, two sets of numbers — and 90 put the studio bar at
   modal level, above every drawer in the app. This file gives them one
   contract; each keeps the content and behaviour it already had.

   Height is --fv-chrome-l2-h-mobile (60px): a 44px touch target plus 8px top
   and bottom. Both surfaces retain the WCAG target size and use the same
   vertical alignment.

   Variants:
     data-fv-chrome-context="page"  — opaque, sits under L1        (Search)
     data-fv-chrome-context="sheet" — scrim over a hero, own layer (Studio)
============================================================================ */

@media screen and (max-width: 899px) {

    /* ── Shared base ────────────────────────────────────────────────────── */

    .fv-chrome-l2,
    body.search-page .sab-m-header,
    html.fv-public-spa body:not(.fv-native-app) [data-public-page="studio"] .studio-gallery .gallery-btn-area {
        --fv-l2-h: var(--fv-chrome-l2-h-mobile);
        box-sizing: border-box;
        transition:
            top var(--fv-chrome-dur) var(--fv-chrome-ease),
            height var(--fv-chrome-dur) var(--fv-chrome-ease),
            background-color var(--fv-chrome-dur) var(--fv-chrome-ease),
            background-image var(--fv-chrome-dur) var(--fv-chrome-ease),
            border-color var(--fv-chrome-dur) var(--fv-chrome-ease),
            box-shadow var(--fv-chrome-dur) var(--fv-chrome-ease);
    }

    /* ── Sheet variant: the studio bar over its hero ─────────────────────── */

    html.fv-public-spa body:not(.fv-native-app) [data-public-page="studio"] .studio-gallery .gallery-btn-area {
        z-index: var(--fv-chrome-z-sheet-context);
        height: calc(var(--fv-l2-h) + var(--fv-chrome-safe-top));
        padding-top: max(6px, var(--fv-chrome-safe-top));
        background: var(--fv-chrome-scrim);
    }

    /* Hero scrolled away: the bar takes on a surface so its controls stay
       legible against page content rather than a photograph. */
    html.fv-public-spa body:not(.fv-native-app) [data-public-page="studio"].fv-studio-mobile-header-condensed .studio-gallery .gallery-btn-area {
        background: var(--fv-chrome-l2-condensed-bg);
        border-bottom-color: var(--fv-chrome-l2-condensed-border);
        box-shadow: var(--fv-chrome-shadow-scrolled);
        -webkit-backdrop-filter: var(--fv-chrome-l2-blur);
        backdrop-filter: var(--fv-chrome-l2-blur);
    }

    /* Controls sit centred in the bar rather than pinned to a fixed offset,
       so they follow the height token instead of repeating it. */
    html.fv-public-spa body:not(.fv-native-app) [data-public-page="studio"] .studio-gallery .gallery-btn-area .studio-gallery-back,
    html.fv-public-spa body:not(.fv-native-app) [data-public-page="studio"] .studio-gallery .gallery-btn-area .share-love {
        top: calc(var(--fv-chrome-safe-top) + (var(--fv-l2-h) - var(--fv-chrome-tap)) / 2);
    }

    /* ── Page variant: the Search toolbar ────────────────────────────────── */

    body.search-page .sab-m-header {
        z-index: var(--fv-chrome-z-l2);
    }
}