/* css/promo-bar.css */
/* Owner items 6–8 · the bio page's glass top bar (x-promo.bio-bar): round logo badge with the animated mark
   (top-start), Subscribe pill + Share (top-end). Self-contained like promo.css (public pages don't load app tokens),
   logical properties throughout (RTL). Glass = backdrop blur + saturate, a hairline border, an inner top shine and a
   slow light sweep; without backdrop-filter the glass turns near-opaque so it stays readable. Tones:
   onlight / ondark (auto, from the theme), media (image & video backgrounds, photo heroes), light / dark (pinned). */

.wpr-bar {
    --g-ink: #0E1A15; --g-ink-2: rgba(14, 26, 21, .66); --g-bg: rgba(255, 255, 255, .5); --g-bg-strong: rgba(255, 255, 255, .78);
    --g-solid: rgba(250, 252, 251, .94); --g-line: rgba(255, 255, 255, .72); --g-edge: rgba(14, 26, 21, .09);
    --g-shine: rgba(255, 255, 255, .85); --g-shadow: 0 8px 24px -12px rgba(10, 30, 20, .32), 0 1px 2px rgba(10, 30, 20, .06);
    --g-accent: #0BC284; --g-accent-ink: #062016; --g-grad: linear-gradient(135deg, #C2F45B 0%, #25D695 55%, #0BC284 100%);
    --g-blur: blur(18px) saturate(1.8); --g-h: 44px; --g-ease: cubic-bezier(.2, .8, .2, 1); --g-tshadow: none;
    position: fixed; z-index: 40; inset-block-start: max(12px, env(safe-area-inset-top)); inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none;
    font: 650 14px/1 var(--site-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.01em; color: var(--g-ink);
}
.wpr-bar-standard { --g-h: 44px; }
.wpr-bar-compact { --g-h: 38px; font-size: 13px; }
@media (min-width: 900px) { .wpr-bar { inset-block-start: max(18px, env(safe-area-inset-top)); inset-inline: 22px; } }
.wpr-bar-start, .wpr-bar-end { display: flex; align-items: flex-start; gap: 8px; pointer-events: none; min-inline-size: 0; }
.wpr-bar-start > *, .wpr-bar-end > * { pointer-events: auto; }

/* Tones. ondark: white-tinted glass on dark pages; media: smoked glass with white ink over photos and video. */
.wpr-g-ondark {
    --g-ink: #F2F7F4; --g-ink-2: rgba(242, 247, 244, .72); --g-bg: rgba(255, 255, 255, .1); --g-bg-strong: rgba(255, 255, 255, .16);
    --g-solid: rgba(28, 34, 31, .94); --g-line: rgba(255, 255, 255, .2); --g-edge: rgba(0, 0, 0, .3); --g-shine: rgba(255, 255, 255, .34);
    --g-shadow: 0 10px 28px -12px rgba(0, 0, 0, .6); --g-accent: #C2F45B;
}
.wpr-g-media, .ws-page:has(.ws-ph) .wpr-g-auto {
    --g-ink: #FFFFFF; --g-ink-2: rgba(255, 255, 255, .8); --g-bg: rgba(12, 18, 15, .3); --g-bg-strong: rgba(12, 18, 15, .5);
    --g-solid: rgba(16, 22, 19, .88); --g-line: rgba(255, 255, 255, .3); --g-edge: rgba(0, 0, 0, .18); --g-shine: rgba(255, 255, 255, .42);
    --g-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); --g-blur: blur(20px) saturate(1.6) brightness(.92); --g-tshadow: 0 1px 2px rgba(0, 0, 0, .35); --g-accent: #C2F45B;
}
.wpr-g-light { --g-bg: rgba(255, 255, 255, .76); --g-bg-strong: rgba(255, 255, 255, .9); }
.wpr-g-dark {
    --g-ink: #FFFFFF; --g-ink-2: rgba(255, 255, 255, .78); --g-bg: rgba(14, 26, 21, .62); --g-bg-strong: rgba(14, 26, 21, .78);
    --g-solid: rgba(14, 26, 21, .94); --g-line: rgba(255, 255, 255, .16); --g-edge: rgba(0, 0, 0, .2); --g-shine: rgba(255, 255, 255, .3);
    --g-shadow: 0 10px 28px -12px rgba(0, 0, 0, .55); --g-accent: #C2F45B;
}

/* ---- the glass surface ---- */
.wpr-glass {
    position: relative; isolation: isolate; overflow: hidden; color: var(--g-ink); text-shadow: var(--g-tshadow);
    background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 999px;
    box-shadow: var(--g-shadow), 0 0 0 .5px var(--g-edge), inset 0 1px 0 var(--g-shine);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
/* Shine: a soft top highlight, plus a slow diagonal light sweep across the surface. */
.wpr-glass::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--g-shine) 55%, transparent) 0%, transparent 52%);
    opacity: .55;
}
.wpr-glass::after {
    content: ""; position: absolute; inset-block: -40%; inset-inline-start: -60%; inline-size: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--g-shine) 70%, transparent) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-18deg); opacity: 0;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .wpr-glass { background: var(--g-solid); }
}
button.wpr-glass, summary.wpr-glass { cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--g-ease), background-color .2s, box-shadow .25s; }
button.wpr-glass:hover, summary.wpr-glass:hover { background: var(--g-bg-strong); transform: translateY(-1px); }
button.wpr-glass:active, summary.wpr-glass:active { transform: scale(.96); }
.wpr-bar :focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }

/* ---- logo badge: the animated mark alone, round, on every screen ---- */
.wpr-badge { display: grid; place-items: center; inline-size: var(--g-h); block-size: var(--g-h); padding: 0; }
.wpr-badge-mark { inline-size: 58%; block-size: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.wpr-g-ondark .wpr-badge-mark, .wpr-g-media .wpr-badge-mark, .wpr-g-dark .wpr-badge-mark { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)) brightness(1.18) saturate(1.1); }

/* ---- share ---- */
.wpr-gshare { display: grid; place-items: center; inline-size: var(--g-h); block-size: var(--g-h); padding: 0; }
.wpr-gshare svg { inline-size: 19px; block-size: 19px; }

/* ---- subscribe: pill → inline field (desktop) / bottom sheet (phones) ---- */
.wsub { position: relative; }
.wsub > summary { list-style: none; }
.wsub > summary::-webkit-details-marker { display: none; }
.wsub-pill {
    display: inline-flex; align-items: center; gap: 7px; block-size: var(--g-h); padding-inline: 14px 16px; user-select: none; white-space: nowrap;
}
.wsub-ic { inline-size: 17px; block-size: 17px; flex: none; }
.wsub.is-done .wsub-pill .wsub-ic { color: var(--g-accent); }
.wsub-sr, .wsub-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wsub-scrim, .wsub-grab, .wsub-head { display: none; }
.wsub-panel { color: var(--g-ink); }

.wsub-row { display: flex; align-items: center; gap: 4px; block-size: var(--g-h); padding-inline: 16px 4px; }
.wsub-in {
    flex: 1; min-inline-size: 0; block-size: 100%; border: 0; background: transparent; color: var(--g-ink); outline: none;
    font: 500 15px/1 var(--site-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; text-shadow: none;
}
.wsub-in::placeholder { color: var(--g-ink-2); opacity: 1; }
.wpr-bar .wsub-in:focus-visible { outline: none; } /* the whole row shows the focus ring (.wsub-row:focus-within) */
[dir="rtl"] .wsub-in { text-align: end; }
.wsub-row:focus-within { box-shadow: var(--g-shadow), 0 0 0 3px color-mix(in srgb, var(--g-accent) 55%, transparent), inset 0 1px 0 var(--g-shine); }
.wsub-in[aria-invalid="true"] { color: #E5484D; }
.wsub-go {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; block-size: calc(var(--g-h) - 8px); padding-inline: 14px 12px;
    border: 0; border-radius: 999px; cursor: pointer; background: var(--g-grad); color: var(--g-accent-ink); text-shadow: none;
    font: 750 14px/1 var(--site-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 6px 16px -8px rgba(11, 194, 132, .9);
    transition: transform .2s var(--g-ease), filter .2s;
}
.wsub-go:hover { filter: brightness(1.05); transform: translateY(-1px); }
.wsub-go svg { inline-size: 16px; block-size: 16px; transition: transform .2s var(--g-ease); }
.wsub-go:hover svg { transform: translateX(2px); }
[dir="rtl"] .wsub-go svg { transform: scaleX(-1); }
[dir="rtl"] .wsub-go:hover svg { transform: scaleX(-1) translateX(2px); }

.wsub-more { display: grid; gap: 10px; }
.wsub-name { display: grid; gap: 6px; font: 600 12.5px/1.2 var(--site-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--g-ink-2); letter-spacing: 0; }
.wsub-name i { font-style: normal; font-weight: 500; opacity: .8; }
.wsub-name input {
    block-size: 40px; padding-inline: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--g-ink) 14%, transparent);
    background: color-mix(in srgb, var(--g-bg-strong) 70%, transparent); color: var(--g-ink); font: 500 15px/1 var(--site-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif; outline: none;
}
.wsub-name input:focus { border-color: var(--g-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 30%, transparent); }
.wsub-consent { margin: 0; font: 500 12px/1.45 var(--site-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--g-ink-2); letter-spacing: 0; text-wrap: pretty; }
.wsub-err { margin: 0; font: 600 12.5px/1.4 var(--site-font, system-ui), sans-serif; color: #E5484D; }
.wpr-g-media .wsub-err, .wpr-g-ondark .wsub-err, .wpr-g-dark .wsub-err { color: #FF8F94; }

.wsub-done { display: flex; align-items: center; gap: 10px; min-block-size: var(--g-h); padding-block: 6px; padding-inline: 6px 18px; border-radius: 999px; }
.wsub-done-ic { display: grid; place-items: center; inline-size: calc(var(--g-h) - 12px); block-size: calc(var(--g-h) - 12px); border-radius: 50%; background: var(--g-grad); color: var(--g-accent-ink); flex: none; }
.wsub-done-ic svg { inline-size: 18px; block-size: 18px; }
.wsub-done-t { display: grid; gap: 3px; min-inline-size: 0; }
.wsub-done-t b { font-weight: 750; font-size: 14px; }
.wsub-done-t span { font-weight: 500; font-size: 12.5px; color: var(--g-ink-2); line-height: 1.3; }
.wsub-x {
    position: absolute; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: color-mix(in srgb, var(--g-ink) 8%, transparent); color: var(--g-ink);
}
.wsub-x[hidden] { display: none; }
.wsub-x svg { inline-size: 16px; block-size: 16px; }

/* Desktop and tablets: the pill becomes an inline field in the bar; name and consent drop in a small card below. */
@media (min-width: 640px) {
    .wsub[open] > .wsub-pill { display: none; }
    .wsub[open] .wsub-panel { position: relative; inline-size: min(360px, calc(100vw - 180px)); }
    .wsub[open] .wsub-row, .wsub[open] .wsub-done { animation: wsub-grow .42s var(--g-ease) both; }
    .wsub-more {
        position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; padding: 14px 16px 14px; border-radius: 18px;
        background: var(--g-bg-strong); border: 1px solid var(--g-line); box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-shine);
        -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); animation: wsub-drop .34s var(--g-ease) .08s both;
    }
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .wsub-more { background: var(--g-solid); } }
    .wsub-x { inset-block-start: calc(100% + 14px); inset-inline-end: 10px; inline-size: 28px; block-size: 28px; }
    .wsub-done ~ .wsub-x { inset-block-start: 50%; inset-inline-end: 8px; transform: translateY(-50%); }
    .wsub-done { padding-inline-end: 44px; }
    .wpr-g-media .wsub-more, .ws-page:has(.ws-ph) .wpr-g-auto .wsub-more { background: rgba(14, 20, 17, .62); }
}
@keyframes wsub-grow { from { clip-path: inset(0 0 0 calc(100% - 130px) round 999px); opacity: .4; } to { clip-path: inset(0 0 0 0 round 999px); opacity: 1; } }
@keyframes wsub-grow-rtl { from { clip-path: inset(0 calc(100% - 130px) 0 0 round 999px); opacity: .4; } to { clip-path: inset(0 0 0 0 round 999px); opacity: 1; } }
[dir="rtl"] .wsub[open] .wsub-row, [dir="rtl"] .wsub[open] .wsub-done { animation-name: wsub-grow-rtl; }
@keyframes wsub-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* Phones: a bottom sheet over a soft scrim; the pill stays in the bar as the toggle. */
@media (max-width: 639.98px) {
    .wsub[open] > .wsub-pill { background: var(--g-bg-strong); }
    .wsub[open] .wsub-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(6, 12, 9, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: wsub-fade .3s ease both; }
    .wsub[open] .wsub-panel {
        position: fixed; z-index: 61; inset-inline: 0; inset-block-end: 0; max-block-size: calc(100dvh - 60px); overflow: auto;
        padding: 10px 20px max(20px, env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; text-shadow: none;
        --g-ink: #0E1A15; --g-ink-2: #56655E; --g-bg: rgba(14, 26, 21, .05); --g-bg-strong: #fff; --g-line: rgba(14, 26, 21, .1); --g-shine: rgba(255, 255, 255, .9); --g-tshadow: none;
        background: #FFFFFF; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .45); animation: wsub-up .42s var(--g-ease) both;
    }
    .wpr-g-ondark .wsub[open] .wsub-panel, .wpr-g-dark .wsub[open] .wsub-panel, .wpr-g-media .wsub[open] .wsub-panel, .ws-page:has(.ws-ph) .wpr-g-auto .wsub[open] .wsub-panel {
        --g-ink: #F2F7F4; --g-ink-2: #A6B5AC; --g-bg: rgba(255, 255, 255, .06); --g-bg-strong: #1A241F; --g-line: rgba(255, 255, 255, .12); --g-shine: rgba(255, 255, 255, .08);
        background: #111915;
    }
    .wsub-grab { display: block; inline-size: 40px; block-size: 4px; border-radius: 4px; margin: 0 auto 14px; background: color-mix(in srgb, var(--g-ink) 18%, transparent); }
    .wsub-head { display: grid; justify-items: center; text-align: center; gap: 6px; margin-block-end: 16px; }
    .wsub-head-mark { inline-size: 40px; block-size: auto; }
    .wsub-h { margin: 4px 0 0; font: 780 21px/1.15 var(--site-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.025em; text-wrap: balance; }
    .wsub-lead { margin: 0; font: 500 14px/1.45 var(--site-font, system-ui), sans-serif; color: var(--g-ink-2); letter-spacing: 0; }
    .wsub-row { --g-h: 54px; padding-inline: 18px 5px; box-shadow: inset 0 0 0 1px var(--g-line); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .wsub-row::after { display: none; }
    .wsub-in { font-size: 16px; } /* 16px: no zoom-on-focus in iOS Safari */
    .wsub-go { padding-inline: 16px 14px; }
    .wsub-more { margin-block-start: 14px; }
    .wsub-x { inset-block-start: 12px; inset-inline-end: 12px; }
    .wsub-done { flex-direction: column; text-align: center; gap: 12px; padding: 18px 8px 8px; border-radius: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .wsub-done::before, .wsub-done::after { display: none; }
    .wsub-done-ic { inline-size: 56px; block-size: 56px; }
    .wsub-done-ic svg { inline-size: 28px; block-size: 28px; }
    .wsub-done-t b { font-size: 20px; letter-spacing: -.02em; }
    .wsub-done-t span { font-size: 14px; }
    .wsub-pill-l { max-inline-size: 30vw; overflow: hidden; text-overflow: ellipsis; }
    html.wsub-lock { overflow: hidden; }
}
@keyframes wsub-up { from { transform: translateY(100%); } }
@keyframes wsub-fade { from { opacity: 0; } }

/* ---- motion: a gentle float on the badge and a rare light sweep across the glass ---- */
@media (prefers-reduced-motion: no-preference) {
    .wpr-badge { animation: wpr-float 6s ease-in-out infinite; }
    .wpr-badge::after, .wsub-pill::after, .wpr-gshare::after { animation: wpr-sweep 9s ease-in-out 2.4s infinite; }
    .wsub-pill::after { animation-delay: 3.1s; }
    .wpr-gshare::after { animation-delay: 3.8s; }
}
@keyframes wpr-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes wpr-sweep { 0%, 72% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 76% { opacity: 1; } 92% { transform: translateX(420%) skewX(-18deg); opacity: .9; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .wpr-glass, button.wpr-glass:hover, summary.wpr-glass:hover, .wsub-go, .wsub-go:hover { transition: none; transform: none; }
    .wsub[open] .wsub-row, .wsub[open] .wsub-done, .wsub-more, .wsub[open] .wsub-panel, .wsub[open] .wsub-scrim { animation: none !important; }
    .wpr-glass::after { display: none; }
}

/* Print: the bar is chrome, not content. */
@media print { .wpr-bar { display: none; } }