/* item-ribbon-mobile.css - the visitor (guest + visitor-account) ribbon: the action pill on the mobile item page (state
   guest-item, with the top-bar carets) and, since 2026-09-03, the tabs pill on every non-item page for guests and
   visitor accounts (states guest-search / guest-basic / auth-member), with the separate Search circle only in search context;
   since 2026-09-03 also advertisers + agencies (state auth): Support, Categories, Superboost (centre, accent), Post, Dashboard. Owner brief + record: docs/plans/visitor-ribbon-mobile-
   plan-2026-09-03.md. nav.ribbon is a floating pill - Klarna-style frosted white in light mode, Recipe B glass in dark -
   with Phosphor glyphs from the inline sprite header.php prints on those pages. The preferred channel has no ring (owner).
   Dark mode is scoped to html[data-theme="dark"] only: the site resolves the system preference into that attribute
   itself (common/head.php + js/theme-toggle.js "auto"), a raw prefers-color-scheme block would darken the bar on a
   page that stays light. */

/* top-bar carets keep the bar's own colour at every width; fill because the Phosphor paths are filled shapes. The
   .item-nav-ribbon ancestor lifts these to (0,4,2) so they beat profile12-critical.css:176 (0,3,2) by specificity, not order. */
body.item .item-nav-ribbon .item-nav-ribbon__btn svg.item-nav-ribbon__icon { fill: currentColor; stroke: none; }

@media (max-width: 1023px) {
  body.item .item-nav-ribbon .item-nav-ribbon__btn svg.item-nav-ribbon__icon { width: 24px; height: 24px; }

  /* 3.1 page prerequisites: content clears the bar */
  body.mobile-bnav-guest-item { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* 3.2 geometry (both modes) */
  body.mobile-bnav-ribbon .ribbon {
    box-sizing: border-box;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));   /* Android, desktop; iOS Safari and standalone overrides follow the rule */
    max-width: 406px;
    margin: 0 auto;
    height: 64px;
    border-radius: 999px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    overflow: hidden;   /* owner 2026-09-03: clips the backdrop region to the pill (no haze outside the shape) */
    isolation: isolate;
    transform: translateZ(0);   /* own compositing layer, stops the backdrop bleed; static, no motion */
    transition: none;   /* no motion on the bar (a global transition shorthand would otherwise apply) */
  }
  /* owner 2026-09-03 (iPhone check): with Safari's bar expanded iOS still reports the home-indicator inset, so the sum
     sat too high - iOS Safari gets the flat 12px; a home-screen (standalone) install has no browser bar and gets the
     sum again. Order matters: the standalone block wins over the iOS block when both apply. */
  @supports (-webkit-touch-callout: none) {
    body.mobile-bnav-ribbon .ribbon { bottom: 12px; }
  }
  @media (display-mode: standalone) {
    body.mobile-bnav-ribbon .ribbon { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  }
  body.mobile-bnav-ribbon .rb {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 68px;
    height: 64px;   /* owner 2026-09-03: full pill height (was 56 centred, padding-top 2) so the DRAWN icon tops and the label baseline sit
                       equidistant from the pill edges: before 15.1-18.5 px above vs 6.5 below; now 10.1-13.5 above (the five Phosphor
                       glyphs differ in height) vs 11.5 below. The 40px circle only paints on :active. */
    padding: 1px 0 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-bnav-ribbon .rb .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
  body.mobile-bnav-ribbon .rb svg { width: 24px; height: 24px; fill: currentColor; display: block; }
  body.mobile-bnav-ribbon .rb .l { font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; }   /* owner 2026-09-03: 400 unselected (300 was too light) */
  body.mobile-bnav-ribbon .rb.on .l,
  body.mobile-bnav-ribbon .rb.primary .l { font-weight: 500; }   /* Liked / Saved / primary: 500 (Soehne kraftig) */
  /* 3.3 primary: owner 2026-09-03 removed the pink ring - the preferred channel keeps the last slot and the 400 label only,
     its glyph is ink at 24px like the others */

  /* 3.4 light mode (default) - every glyph is ink, on or off */
  body.mobile-bnav-ribbon .ribbon {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 6px 18px rgba(0, 0, 0, 0.10),   /* owner 2026-09-03: was 0 8px 30px .14 */
      0 1px 2px rgba(0, 0, 0, 0.06);
  }
  body.mobile-bnav-ribbon .rb { color: #18181B; }
  body.mobile-bnav-ribbon .rb.on,
  body.mobile-bnav-ribbon .rb.primary .l { color: #18181B; }
  body.mobile-bnav-ribbon .rb:active .ic { background: rgba(24, 24, 27, 0.06); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.mobile-bnav-ribbon .ribbon { background: #fff; }
  }
  @media (prefers-reduced-transparency: reduce) {
    body.mobile-bnav-ribbon .ribbon { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  }

  /* 3.5 dark mode - the site's hook. Owner 2026-09-03 "Recipe B": Apple-TV-style glass - translucent slate, heavy
     blur, a top sheen (::before) and a 1.5px masked GRADIENT-ONLY rim (::after - an own backdrop-filter drew a ghost
     band on iOS); white filled glyphs; the solid fallbacks stay. Items sit above the sheen (z-index 2). */
  html[data-theme="dark"] body.mobile-bnav-ribbon .ribbon {
    background: rgba(44, 44, 48, 0.55);
    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
    backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.45),
      0 18px 44px rgba(0, 0, 0, 0.6);   /* owner 2026-09-03: no outer ring - the masked rim below is the only edge */
  }
  html[data-theme="dark"] body.mobile-bnav-ribbon .ribbon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 42%, transparent 58%, rgba(255, 255, 255, 0.05));
    pointer-events: none;
    z-index: 1;
  }
  /* rim: gradient only, no backdrop-filter of its own (owner 2026-09-03: a filtered masked pseudo draws a ghost band on
     iOS Safari); the pill above keeps the only backdrop-filter and contains it (overflow hidden, isolation, translateZ) */
  html[data-theme="dark"] body.mobile-bnav-ribbon .ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;   /* above the items (2) and the sheen (1) - nothing reaches the 1.5px edge, but the rim must never be covered */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 35%, rgba(255, 255, 255, 0.05) 65%, rgba(255, 255, 255, 0.30) 100%);
  }
  html[data-theme="dark"] body.mobile-bnav-ribbon .rb { position: relative; z-index: 2; color: #fff; }
  html[data-theme="dark"] body.mobile-bnav-ribbon .rb.on,
  html[data-theme="dark"] body.mobile-bnav-ribbon .rb.primary .l { color: #fff; }
  html[data-theme="dark"] body.mobile-bnav-ribbon .rb:active .ic { background: rgba(255, 255, 255, 0.08); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-theme="dark"] body.mobile-bnav-ribbon .ribbon { background: #1C1C1C; }
  }
  @media (prefers-reduced-transparency: reduce) {
    html[data-theme="dark"] body.mobile-bnav-ribbon .ribbon { background: #1C1C1C; backdrop-filter: none; -webkit-backdrop-filter: none; }
    html[data-theme="dark"] body.mobile-bnav-ribbon .ribbon::before { display: none; }
  }

  /* the page states that already hid the old bar keep hiding this one: the photo gallery, the About modal, and the
     Chrome-iOS navigation freeze (js/bottom-nav.js adds body.bnav-navigating on a navigating tap - not a scroll hide) */
  html.with-fancybox body.item .ribbon,
  html.item-about-modal-open body.item .ribbon,
  .item-about-modal-open .ribbon { display: none !important; }
  body.bnav-navigating .ribbon { transition: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

  /* a focused field must not leave the bar floating above the keyboard (the item page renders no field of its own) */
  body.mobile-bnav-guest-item:has(input:focus, textarea:focus, select:focus) .ribbon { display: none; }

  /* the one 100vh box in the bar's range: the desktop profile-nav overlay (profile12-critical.css:1593-1598, min-width 769) */
  @media (min-width: 769px) {
    body.mobile-bnav-guest-item.item.item-airbnb-layout .profile-nav { height: 100dvh !important; }
  }
}

/* the ribbon exists in the mobile/tablet range only, like the bar it replaces (bottom-nav.css:651) */
@media (min-width: 1024px) {
  body.mobile-bnav-ribbon .ribbon { display: none !important; }
}

/* ================= Category ribbon: tabs pill + separate Search button (2026-09-03) =================
   Same recipe as the item ribbon (the rules above key on body.mobile-bnav-ribbon, which header.php adds for the
   item page AND for category/search pages in the guest-search / auth-member states; body.mobile-bnav-tabs marks
   the tabs variant). Layout like the iOS 26 / Apple TV tab bar: the tabs pill sits left, a 64px round Search
   button sits 10px to its right; together they keep the item ribbon's 12px inset and 406px max width. The
   guest smart-scroll reveal, the Chrome-iOS instant mode and the navigation freeze (css/bottom-nav.css,
   js/bottom-nav.js) are mirrored here for the two elements; js/bottom-nav.js only binds its delegated click handler to
   the Search button as well (it sits outside the nav element). */
@media (max-width: 1023px) {
  body.mobile-bnav-tabs .ribbon.ribbon--tabs {
    --color-accent: #E8637A;   /* bottom-nav.css defines these on .bnav only; .bnav__badge (the feed unread count) reads them */
    --color-bg: #0D0D11;
  }
  /* with the Search circle (search context only): the pill leaves room for it; elsewhere the pill keeps the item ribbon's full-width geometry */
  body.mobile-bnav-tabs .ribbon.ribbon--tabs.ribbon--tabs-with-search {
    left: max(12px, calc(50% - 203px));
    right: max(86px, calc(50% - 129px));   /* 12px inset + 64px button + 10px gap */
    width: auto;
    max-width: 332px;
    margin: 0;
  }
  body.mobile-bnav-tabs .ribbon.ribbon--search {
    left: auto;
    right: max(12px, calc(50% - 203px));
    width: 64px;
    max-width: 64px;
    min-width: 64px;
    margin: 0;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    color: #18181B;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-bnav-tabs .ribbon.ribbon--search .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; position: relative; z-index: 2; }
  body.mobile-bnav-tabs .ribbon.ribbon--search svg { width: 26px; height: 26px; fill: currentColor; display: block; }
  body.mobile-bnav-tabs .ribbon.ribbon--search:active .ic { background: rgba(24, 24, 27, 0.06); }
  html[data-theme="dark"] body.mobile-bnav-tabs .ribbon.ribbon--search { color: #fff; }
  html[data-theme="dark"] body.mobile-bnav-tabs .ribbon.ribbon--search:active .ic { background: rgba(255, 255, 255, 0.08); }
  /* feed unread badge on the Dashboard tab (bottom-nav.css styles .bnav__badge; position it on the 40px icon circle) */
  body.mobile-bnav-tabs .ribbon .rb .ic { position: relative; }
  body.mobile-bnav-tabs .ribbon .rb .bnav__badge { position: absolute; top: 2px; right: 2px; }
  /* Advertiser / agency pill (owner 2026-09-03): Superboost sits in the centre with the old bar's pink accent
     (bottom-nav.css .bnav__item--accent) drawn INSIDE the 40px icon box - the .rb content is top-aligned 1px under the
     pill edge and the pill clips at its edge, so the old 44px disc or an outer glow would be cut. 36px centred on the box
     = 3px below the edge, 4px above the label; one custom property to tune on the phone. The bolt is the accent colour
     on the light pill (a white bolt on the 25 % tint over white is unreadable) and white in dark, as on the old bar. */
  body.mobile-bnav-tabs .rb.accent .ic { --esc-boost-disc: 36px; }
  body.mobile-bnav-tabs .rb.accent .ic::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--esc-boost-disc);
    height: var(--esc-boost-disc);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(232, 99, 122, 0.25);
    box-shadow: inset 0 0 0 1px rgba(232, 99, 122, 0.4);
  }
  body.mobile-bnav-tabs .rb.accent .ic svg { position: relative; color: #E8637A; }   /* positioned so the bolt paints above the disc */
  html[data-theme="dark"] body.mobile-bnav-tabs .rb.accent .ic svg { color: #fff; }
  /* sheet open (Superboost / Post): js/bottom-nav.js setButtonOpenState adds bnav__item--open to the trigger */
  body.mobile-bnav-ribbon .rb.bnav__item--open .l { font-weight: 500; }
  /* content clearance for logged-in visitor accounts (guests float the pill over the page like the old bar) */
  body.mobile-bnav-tabs.has-mobile-bottom-nav:not(.bnav-guest) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* guest smart-scroll reveal (mirrors css/bottom-nav.css for nav.bnav): hidden until js adds body.bnav-revealed */
  body.mobile-bnav-tabs.bnav-guest .ribbon {
    transition: transform .28s ease, opacity .28s ease;
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px)));   /* clears the raised standalone position too */
    opacity: 0;
    pointer-events: none;
  }
  body.mobile-bnav-tabs.bnav-guest.bnav-revealed .ribbon {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-bnav-tabs.bnav-crios .ribbon { transition: none !important; }
}