/* /assets/css/components/user/presence-hover-assets.css */
.presence-tip{position:absolute;bottom:calc(100% + 6px);right:0;min-width:max-content;max-width:220px;
  background:#1f2430;color:#fff;font-size:.72rem;line-height:1.3;padding:6px 10px;border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(var(--tip-shift,0px)) translateY(4px);transition:opacity .15s ease,transform .15s ease;z-index:60;white-space:nowrap;}
.presence-tip::after{content:'';position:absolute;top:100%;right:10px;border:5px solid transparent;
  border-top-color:#1f2430;}
.presence-tip.is-open{opacity:1;visibility:visible;transform:translateX(var(--tip-shift,0px)) translateY(0);pointer-events:none;}
.presence-tip.presence-tip--flip{right:auto;left:0;}
.presence-tip.presence-tip--flip::after{right:auto;left:10px;}
.presence-tip.presence-tip--flip-v{bottom:auto;top:calc(100% + 6px);transform:translateX(var(--tip-shift,0px)) translateY(-4px);}
.presence-tip.presence-tip--flip-v.is-open{transform:translateX(var(--tip-shift,0px)) translateY(0);}
.presence-tip.presence-tip--flip-v::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1f2430;}
.presence-badge--label{position:relative;}
.presence-badge--label .presence-tip{right:auto;left:0;}
.presence-badge--label .presence-tip::after{right:auto;left:10px;}
.presence-tip-dots{display:inline-flex;align-items:center;gap:3px;}
.presence-tip-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;
  animation:presenceWave 1s infinite ease-in-out;}
.presence-tip-dots span:nth-child(2){animation-delay:.15s;}
.presence-tip-dots span:nth-child(3){animation-delay:.3s;}
@keyframes presenceWave{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-2px);}}
.presence-tip-text{opacity:0;animation:presenceFadeIn .18s ease forwards;}
@keyframes presenceFadeIn{to{opacity:1;}}

/* /assets/css/components/layout/pwa-install.css */
  .pwa-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
    background:rgba(8,6,10,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;transition:opacity .22s ease;padding:0;}
  .pwa-modal.is-open{opacity:1;}
  .pwa-modal.hidden{display:none!important;} /* beat this component's own display:flex when closed */
  @media (min-width:480px){.pwa-modal{align-items:center;padding:1rem;}}
  .pwa-sheet{position:relative;width:100%;max-width:440px;background:var(--paper);color:var(--ink);
    border:1px solid var(--rule);border-bottom:0;border-radius:22px 22px 0 0;
    padding:1.5rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
    box-shadow:0 -24px 60px -24px rgba(0,0,0,.5);
    transform:translateY(24px);opacity:.6;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s ease;}
  .pwa-modal.is-open .pwa-sheet{transform:translateY(0);opacity:1;}
  @media (min-width:480px){.pwa-sheet{border-bottom:1px solid var(--rule);border-radius:22px;transform:translateY(8px) scale(.97);}}
  .pwa-sheet__grip{display:block;width:40px;height:4px;border-radius:99px;background:var(--rule);margin:-.35rem auto 1rem;}
  @media (min-width:480px){.pwa-sheet__grip{display:none;}}
  .pwa-x{position:absolute;top:.75rem;inset-inline-end:.85rem;width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.35rem;line-height:1;
    color:var(--ink-soft);background:transparent;transition:background .15s ease,color .15s ease;}
  .pwa-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);}
  .pwa-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;padding-inline-end:1.5rem;}
  .pwa-brand__icon{border-radius:14px;border:1px solid var(--rule);flex:0 0 auto;object-fit:contain;background:var(--paper-2);}
  .pwa-brand__title{font-size:1.15rem;font-weight:700;line-height:1.15;color:var(--ink);margin:0;}
  .pwa-brand__desc{font-size:.83rem;line-height:1.4;color:var(--ink-soft);margin:.25rem 0 0;}
  .pwa-benefits{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.5rem;}
  .pwa-benefits li{position:relative;padding-inline-start:1.6rem;font-size:.85rem;color:var(--ink-2);}
  .pwa-benefits li::before{content:'';position:absolute;inset-inline-start:0;top:.15rem;width:16px;height:16px;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a06b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");}
  .pwa-cta{width:100%;justify-content:center;}
  .pwa-panel__title{font-weight:700;font-size:.95rem;margin:0 0 .35rem;color:var(--ink);}
  .pwa-panel__desc{font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin:0;}
  .pwa-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
  .pwa-steps li{display:flex;align-items:center;gap:.75rem;font-size:.88rem;line-height:1.35;color:var(--ink-2);
    counter-increment:s;background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:.7rem .85rem;}
  .pwa-steps__ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    color:var(--ink);background:var(--paper);border:1px solid var(--rule);position:relative;}
  .pwa-steps__ic::after{content:counter(s);position:absolute;top:-6px;inset-inline-start:-6px;width:18px;height:18px;
    border-radius:50%;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;
    color:var(--paper);background:var(--ink);}
  .pwa-steps__txt strong{color:var(--ink);font-weight:700;}
  .pwa-note{font-size:.75rem;color:var(--ink-soft);margin:.75rem 0 0;text-align:center;}
  .pwa-later{display:block;width:100%;margin-top:1rem;padding:.6rem;font-size:.82rem;font-weight:600;
    color:var(--ink-soft);background:transparent;border-radius:12px;transition:color .15s ease;}
  .pwa-later:hover{color:var(--ink);}
  /* Success toast (built by pwa-install.js) */
  .pwa-toast{position:fixed;inset-inline:0;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:130;
    display:flex;justify-content:center;padding:0 1rem;opacity:0;transform:translateY(12px);
    transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
  .pwa-toast.is-open{opacity:1;transform:translateY(0);}
  .pwa-toast__card{display:flex;align-items:center;gap:.7rem;max-width:360px;width:100%;
    background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:16px;
    padding:.75rem .9rem;box-shadow:0 20px 45px -18px rgba(0,0,0,.5);}
  .pwa-toast__card img{border-radius:10px;flex:0 0 auto;}
  .pwa-toast__title{margin:0;font-weight:700;font-size:.88rem;}
  .pwa-toast__body{margin:.1rem 0 0;font-size:.78rem;color:var(--ink-soft);}

/* Waiting a moment for the browser to offer one-tap install. */
.pwa-cta[aria-busy="true"]{opacity:.6;cursor:progress;}

/* /assets/themes/editorial/assets/css/components/layout/footer.css */
    .ed-footer-heading {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.22em;
      color: var(--ink-soft);
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 1rem;
    }
    .ed-footer-link {
      display: inline-flex; align-items: center;
      font-family: 'Inter', sans-serif;
      font-size: 0.875rem; font-weight: 400;
      color: var(--ink-2);
      text-decoration: none;
      transition: color 0.18s ease, padding-left 0.18s ease;
      padding: 0.25rem 0;
      position: relative;
    }
    .ed-footer-link::before {
      content: '→';
      opacity: 0; margin-right: 0;
      transition: opacity 0.18s ease, margin-right 0.18s ease;
      color: var(--theme-600);
    }
    .ed-footer-link:hover { color: var(--ink); }
    .ed-footer-link:hover::before { opacity: 1; margin-right: 0.4rem; }
    html.dark .ed-footer-link:hover::before { color: var(--theme-300); }
    [dir="rtl"] .ed-footer-link:hover { padding-left: 0; padding-right: 0; }

    /* Newsletter card */
    .ed-newsletter {
      position: relative;
      background: var(--ink);
      color: var(--paper);
      border-radius: 1.5rem;
      overflow: hidden;
    }
    html.dark .ed-newsletter { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); }
    .ed-newsletter::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: var(--noise); opacity: 0.18;
      mix-blend-mode: overlay;
    }
    .ed-newsletter-input {
      background: rgba(255,255,255,0.06);
      color: inherit;
      border: 1px solid rgba(255,255,255,0.18);
      padding: 0.85rem 1.25rem;
      border-radius: 999px;
      font-size: 0.9rem;
      width: 100%;
      transition: border-color 0.18s ease, background 0.18s ease;
    }
    .ed-newsletter-input::placeholder { color: rgba(255,255,255,0.55); }
    .ed-newsletter-input:focus { outline: none; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.10); }
    html.dark .ed-newsletter-input {
      background: rgba(0,0,0,0.18); border-color: var(--rule);
    }
    html.dark .ed-newsletter-input::placeholder { color: var(--ink-soft); }

    .ed-newsletter-btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
      font-weight: 600; font-size: 0.85rem;
      transition: transform 0.18s ease, background 0.18s ease;
    }
    .ed-newsletter-btn:hover { background: var(--theme-300); transform: translateY(-1px); }
    html.dark .ed-newsletter-btn { background: var(--ink); color: var(--paper); }
    html.dark .ed-newsletter-btn:hover { background: var(--theme-600); }

/* Age confirmation on the newsletter form (subscribe.php re-checks it
   server-side). Takes its own full-width row rather than sitting beside the
   button: the form is a flex row on sm+, and a third item there squeezes the
   input at exactly the widths where it is already tightest. */
#newsletter-form { flex-wrap: wrap; }

.ed-newsletter-age {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  opacity: 0.85;
  cursor: pointer;
}

/* Drawn rather than native: after dark the browser's own box, and the
   kernel's dark input fill, make a filled grey square that on a light
   footer reads as already ticked. */
.ed-newsletter-age input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1rem; height: 1rem; margin: 0.15rem 0 0; flex-shrink: 0; color: inherit !important;
  display: inline-grid; place-content: center;
  border: 1.5px solid currentColor !important; border-radius: 3px; background: transparent !important;
  cursor: pointer;
}
.ed-newsletter-age input[type="checkbox"]:checked {
  background: var(--theme-600, currentColor) !important; border-color: var(--theme-600, currentColor) !important;
}
.ed-newsletter-age input[type="checkbox"]:checked::before {
  content: ''; width: 0.55rem; height: 0.3rem; transform: translateY(-1px) rotate(-45deg);
  border-left: 2px solid var(--paper, #fff); border-bottom: 2px solid var(--paper, #fff);
}
.ed-newsletter-age input[type="checkbox"]:focus-visible { outline: 2px solid var(--theme-600, currentColor); outline-offset: 2px; }

/* /assets/themes/editorial/assets/css/components/layout/footer-legal.css */
      .ed-floating-nav {
        background: var(--paper);
        border: 1px solid var(--rule);
        border-radius: 999px;
        padding: 6px;
        box-shadow: 0 30px 60px -20px rgba(0,0,0,0.20), 0 12px 24px -12px rgba(0,0,0,0.12);
        max-width: min(calc(100vw - 3rem), 920px);
        overflow-x: auto;
        scrollbar-width: none;
      }
      .ed-floating-nav::-webkit-scrollbar { display: none; }
      html.dark .ed-floating-nav {
        background: var(--paper-2);
        box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
      }
      .ed-floating-link {
        display: inline-flex; align-items: center;
        padding: 9px 16px;
        border-radius: 999px;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem; font-weight: 500;
        color: var(--ink-2);
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
        white-space: nowrap;
      }
      .ed-floating-link:hover { background: var(--paper-2); color: var(--ink); }
      html.dark .ed-floating-link:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
      .ed-floating-link.active {
        background: var(--ink);
        color: var(--paper);
        font-weight: 600;
      }
      html.dark .ed-floating-link.active { background: var(--theme-600); color: #fff; }

      .truncate-soft {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
      }

/* /assets/css/components/layout/floating-nav-more.css */
/* The floating pill (#ob-floating-nav) stays one row whatever its markup's
   flex-wrap says: links that don't fit move into the More popover
   (assets/js/floating-nav-more.js), or, without that script, the row
   scrolls sideways. Loaded next to each footer-legal.css. */
#ob-floating-nav.ed-floating-nav { flex-wrap: nowrap; overflow-x: auto; max-width: min(calc(100vw - 3rem), 920px); }
#ob-floating-nav .ed-floating-link { flex: none; white-space: nowrap; }
/* The icon and label are separate flex items, so the space between them in
   the markup collapses; the gap puts it back on every theme's pill, on the
   inline axis so it mirrors right to left. A label alone has nothing to
   space from. */
#ob-floating-nav .ed-floating-link, [data-px-fold="pill"][data-px-fold] > a, [data-px-fold="pill"] .ed-floating-more-sheet > a { display: inline-flex; align-items: center; column-gap: .5rem; }
#ob-floating-nav[data-px-more="1"] { overflow: visible; }
.ed-floating-more { position: relative; flex: none; display: inline-flex; }
.ed-floating-more[hidden] { display: none; }
.ed-floating-more-sheet {
  position: absolute; inset-inline-end: 0; bottom: calc(100% + 10px);
  min-width: 200px; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--fn-paper, var(--paper, #fff)); color: var(--fn-ink-2, var(--ink-2, inherit));
  border: 1px solid var(--fn-rule, var(--rule, rgba(0,0,0,.12))); border-radius: 16px;
  box-shadow: 0 20px 44px -16px rgba(0,0,0,0.30);
}
.ed-floating-more-sheet[hidden] { display: none; }
html.dark .ed-floating-more-sheet { background: var(--fn-paper-2, var(--paper-2, #111)); }
.ed-floating-more-sheet .ed-floating-link { justify-content: flex-start; }
/* In the popover a long label wraps rather than run past it or end in an
   ellipsis (the pills print their labels in .truncate-soft); the row's own
   links stay on one line. */
.ed-floating-more-sheet { width: max-content; max-width: min(22rem, calc(100vw - 2rem)); }
#ob-floating-nav .ed-floating-more-sheet > a, [data-px-fold] .ed-floating-more-sheet > a, .ed-subnav-items .ed-floating-more-sheet > a { white-space: normal; overflow-wrap: break-word; }
.ed-floating-more-sheet > a .truncate-soft, .ed-floating-more-sheet > a .truncate-soft-sm { white-space: normal; overflow: visible; text-overflow: clip; }

/* A theme's own pill (data-px-fold="pill") and the account sub-nav
   (.ed-subnav-items, which lists every account page a plugin adds) stay one
   row the same way, or scroll sideways without the script. The sub-nav's
   popover opens downwards. Loaded next to each context-subnav.php too. */
[data-px-fold="pill"][data-px-fold] { flex-wrap: nowrap; overflow-x: auto; max-width: min(calc(100vw - 3rem), 920px); }
.ed-subnav .ed-subnav-items.ed-subnav-items { flex-wrap: nowrap; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
[data-px-fold] > a, .ed-subnav-items > a { flex: none; white-space: nowrap; }
[data-px-fold][data-px-more="1"], .ed-subnav .ed-subnav-items[data-px-more="1"] { overflow: visible; }
.ed-floating-more[data-down] .ed-floating-more-sheet { bottom: auto; top: calc(100% + 8px); z-index: 60; }
.ed-subnav-items .ed-floating-more-sheet .ed-subnav-item { justify-content: flex-start; }

/* The pill floats over the foot of the window, so on a page that shows it a
   control focused from the keyboard, or an anchor jumped to, scrolls clear
   of it. The clearance covers the tallest pill a theme draws (its top sits at
   most 6rem above the window's foot); a theme with a taller one sets its own.
   The footer, the page's last block, keeps that much room under its own
   last row (on the footer, so the room has the footer's background), so
   its legal links never end under the pill. A full-window screen whose
   controls sit along its foot (a game) marks itself
   data-px-floating-nav="off" and goes without the pill: the header above it
   carries the same menu. */
:root { --ob-floating-nav-clearance: 7rem; }
@media (min-width: 1024px) {
  html:has(#ob-floating-nav, [data-px-fold="pill"]):not(:has([data-px-floating-nav="off"])) { scroll-padding-bottom: var(--ob-floating-nav-clearance); }
  html:not(:has([data-px-floating-nav="off"])) #desktopFooter:has(#ob-floating-nav, [data-px-fold="pill"]) { padding-bottom: var(--ob-floating-nav-clearance); }
  body:has([data-px-floating-nav="off"]) :is(#ob-floating-nav, [data-px-fold="pill"]) { display: none; }
}

/* The pill's wrapper while the desktop header is on screen (the script adds
   .px-pill-reveal and toggles .px-pill-shown; without it the pill shows).
   Faded and lowered, not removed, so nothing reflows and Tab still reaches
   its links: focusing one shows it. */
.px-pill-reveal { transition: opacity .2s ease, transform .2s ease; }
.px-pill-reveal:not(.px-pill-shown):not(:focus-within) { opacity: 0; transform: translateY(12px); }
.px-pill-reveal:not(.px-pill-shown):not(:focus-within) * { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .px-pill-reveal { transition: none; }
}

/* /assets/themes/prism/assets/css/components/layout/back-to-top.css */
/* Prism back-to-top: a round white button on a soft shadow, the arrow
   and the word for "top" on it; a ring of the accent draws itself round
   the rim on hover or focus, and a press settles it. */
.psm-b2t {
  position: fixed; z-index: 40; inset-inline-end: 24px; bottom: 96px;
  width: 56px; height: 56px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--paper-2); color: var(--ink);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .3s;
  cursor: pointer;
}
.psm-b2t.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1); }
.psm-b2t__ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.psm-b2t__ring circle { fill: none; stroke: var(--psm-accent); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s cubic-bezier(.2, .8, .3, 1); }
.psm-b2t:hover .psm-b2t__ring circle, .psm-b2t:focus-visible .psm-b2t__ring circle { stroke-dashoffset: 0; }
.psm-b2t__arrow { display: block; }
.psm-b2t__label { font: 600 9.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); max-width: 46px; text-align: center; overflow-wrap: anywhere; }
.psm-b2t:active { transform: translateY(1px) scale(.97); }
.psm-b2t:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; }
@media (max-width: 1023px) { .psm-b2t { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 16px; width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .psm-b2t, .psm-b2t.is-visible, .psm-b2t__ring circle { transition: none; } }

/* /assets/css/includes/footer/mobile-explore-nav.css */
.ed-mobile-nav {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 14px 8px 10px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.22), 0 8px 16px -8px rgba(0,0,0,0.10);
}
html.dark .ed-mobile-nav {
  background: var(--paper-2);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.ed-mobile-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.ed-mobile-link:hover { color: var(--ink); }
.ed-mobile-link.active {
  color: var(--nav-accent, var(--theme-600));
  font-weight: 700;
  background: var(--paper-2);
}
html.dark .ed-mobile-link.active { background: rgba(255,255,255,0.05); }

@supports not (backdrop-filter: blur(1px)) {
  .mobile-glass-header { background: var(--paper) !important; }
}

/* A band of the page's own background under the floating bar and just above
   it, so text scrolling beneath the bar fades out instead of showing through
   its gaps and rounded ends. It hangs off <body> rather than the bar, so
   every theme's copy of bottom-nav.php gets it, and sits one layer under the
   bar (z-40) and under anything a page fixes above it. --paper is every
   theme's page colour in both modes. The gap the kernel leaves under the
   page (bottom_nav_context()'s spacer_height) is the same height, so at the
   page's end its last line sits above the band; a theme with a taller bar
   sets --ob-mobile-nav-scrim-height and both follow. It takes no taps. */
:root { --ob-mobile-nav-scrim-height: calc(8rem + env(safe-area-inset-bottom)); }
@media (max-width: 1023.98px) {
  body:has(#ob-mobile-nav)::after {
    content: ''; position: fixed; inset-inline: 0; bottom: 0; z-index: 39;
    height: var(--ob-mobile-nav-scrim-height);
    background: linear-gradient(to bottom, transparent, var(--paper) 2.5rem);
    pointer-events: none;
  }
}
@media (max-width: 1023.98px) and (prefers-reduced-transparency: reduce) {
  body:has(#ob-mobile-nav)::after { background: var(--paper); }
}

/* /assets/css/components/layout/header-strip-fit.css */
/* Each theme keeps its desktop status strip on one line (white-space: nowrap
   on .hdr-strip .ed-status and everything in it), which its dropdowns would
   inherit: a long label, or a link assets/js/header-strip-fit.js folded into
   More, then ran past the menu or was cut off by it. A dropdown in the strip
   wraps its labels instead, as wide as its longest one up to a limit. */
.hdr-strip .ed-status .ed-dropdown { width: max-content; min-width: 14rem; max-width: min(22rem, calc(100vw - 2rem)); }
.hdr-strip .ed-status .ed-dropdown, .hdr-strip .ed-status .ed-dropdown * { white-space: normal; text-overflow: clip; }
.hdr-strip .ed-status .ed-dropdown .ed-dropdown-item { overflow-wrap: break-word; }

/* /assets/css/includes/footer/slide-up-animation.css */
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slide-up 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }