/* ---------- UX polish (parts/polish.js): motion, skeletons, floating help, offline, tap targets, focus ---------- */
/* muted text: AA contrast (4.5:1+) on every surface in both themes */
:root{--mut:#686880}
[data-theme=dark]{--mut:#9090a8}

/* focus: visible ring for keyboard users only */
:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
:where(a,button,summary,.chip,.card,.pack):focus-visible{border-radius:8px}
:where(.btn,.ibtn,.chip,.card,.pack,.sc-item,.fmt,.avatar,.pill,.pz-fab,.tsw button,.sw):focus-visible{border-radius:revert-layer}
.field:focus-visible,form input:focus-visible,.pz-help-s input:focus-visible{outline:2px solid color-mix(in srgb,var(--a1) 60%,transparent);outline-offset:1px}
.gen textarea:focus-visible{outline:0}
.gen:has(textarea:focus-visible):before{opacity:.85}
.fi-stage :focus-visible,.vsound:focus-visible,.card:focus-visible,.sc-item:focus-visible{outline-color:#fff;box-shadow:0 0 0 4px var(--a1)}
main:focus{outline:0}
.modal-card:focus,.drawer-in:focus{outline:0}
[dir=rtl] .modal .x{right:auto;left:14px}
.pz-skip{position:fixed;inset-inline-start:12px;top:-80px;z-index:300;padding:11px 18px;border-radius:12px;background:var(--tx);color:var(--bg);font-weight:700;box-shadow:var(--sh);transition:top .15s}
.pz-skip:focus{top:10px}

/* ---------- motion (all of it is off for prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* scroll reveal: .pz-rv is only ever added by JS to things below the fold */
  .pz-rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease var(--pz-d,0ms),transform .5s cubic-bezier(.2,.7,.3,1) var(--pz-d,0ms)!important}
  .pz-rv.pz-in{opacity:1;transform:none}
  /* modals: fade/scale in and out (hidden modals stay in the render tree but are invisible and inert) */
  .modal{transition:opacity .18s ease,visibility 0s}
  .modal[hidden]{display:grid!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s .18s}
  .modal .modal-card{transition:transform .18s ease}
  .modal[hidden] .modal-card{animation:none;transform:translateY(8px) scale(.97)}
  .menu.open .menu-pop,.pal.open{animation:pz-drop .16s ease}
  /* press feedback */
  .btn:active{transform:scale(.97)}
  .ibtn:active,.chip:active,.seg button:active,.pack:active,.tabbar a:active,.pz-fab:active,.fi-tabs button:active,.fi-nav button:active,.lang-btn:active,.burger:active{transform:scale(.95)}
  .ibtn,.chip,.seg button,.pack,.tabbar a,.burger,.lang-btn{transition:transform .12s,color .15s,background .15s,border-color .15s}
  .toast{animation:pz-toast .28s cubic-bezier(.2,.8,.3,1.2)}
}
@keyframes pz-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pz-toast{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feed{scroll-behavior:auto}
  .modal-card,.toast,.res,.batch{animation:none}
}
@media print{.pz-rv{opacity:1!important;transform:none!important}.pz-fabs,.pz-help,.pz-offline{display:none!important}}

/* ---------- skeletons ---------- */
.pz-sk,.res[data-studio-item]:empty,.feed:empty:before{background:linear-gradient(100deg,var(--card2) 30%,color-mix(in srgb,var(--card2) 55%,var(--line2)) 50%,var(--card2) 70%) 0 0/300% 100%;animation:pz-shim 1.5s linear infinite}
@keyframes pz-shim{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pz-sk,.res[data-studio-item]:empty,.feed:empty:before{animation:none}}
.card.pz-sk{border-color:var(--line)}
.res[data-studio-item]:empty{min-height:240px;border-color:var(--line)}
.pz-skres{animation:none}
.pz-skm{aspect-ratio:9/16;max-height:320px;border-radius:14px;width:100%}
.pz-skl{display:grid;gap:12px;align-content:start;padding-top:6px}
.pz-skl i{display:block;height:14px;border-radius:7px}
.pz-skl i:nth-child(1){width:110px;height:22px;border-radius:99px}.pz-skl i:nth-child(2){width:92%}.pz-skl i:nth-child(3){width:70%}.pz-skl i:nth-child(4){width:46%;height:34px;border-radius:10px;margin-top:6px}
/* feed: a player-shaped placeholder until the first videos arrive */
.feed:empty:before{content:"";display:block;margin:52px auto 0;height:calc(100% - 74px);aspect-ratio:9/16;max-width:100%;border-radius:18px}
@media (max-width:760px){.feed:empty:before{margin:0;height:100%;width:100%;aspect-ratio:auto;border-radius:0}.pz-skm{max-height:260px}}

/* ---------- floating buttons: back to top + help ---------- */
.pz-fabs{position:fixed;inset-inline-end:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.pz-fab{pointer-events:auto;width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line2);box-shadow:var(--sh);display:grid;place-items:center;color:var(--tx);transition:transform .15s,opacity .2s,visibility .2s,background .15s}
.pz-fab:hover{background:var(--card2)}
.pz-fab svg{width:22px;height:22px}
.pz-helpbtn{background:var(--tx);color:var(--bg);border-color:transparent}
.pz-helpbtn:hover{background:var(--tx2)}
.pz-top{opacity:0;visibility:hidden;transform:translateY(8px)}
.pz-top.on{opacity:1;visibility:visible;transform:none}
.pz-help{position:fixed;inset-inline-end:18px;bottom:76px;z-index:95;width:min(380px,calc(100vw - 24px));max-height:min(600px,calc(100dvh - 150px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:var(--sh);overflow:hidden;opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom;transition:opacity .2s ease,transform .2s ease}
.pz-help.open{opacity:1;transform:none}
.pz-help-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 10px 8px 18px;padding-inline:18px 10px;font:700 17px var(--fh)}
.pz-help-h .x{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--mut)}
.pz-help-h .x:hover{background:var(--soft);color:var(--tx)}
.pz-help-h .x svg{width:18px;height:18px}
.pz-help-s{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:0 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);color:var(--mut)}
.pz-help-s svg{width:18px;height:18px}
.pz-help-s input{flex:1;min-width:0;height:44px;background:none;border:0;outline:0;font-size:16px;color:var(--tx);padding:0}
.pz-help-s:focus-within{border-color:color-mix(in srgb,var(--a1) 70%,transparent)}
.pz-help-s input:focus-visible{outline:0}
.pz-help-l{flex:1;min-height:80px;overflow-y:auto;padding:0 14px 6px;display:grid;gap:6px;align-content:start;overscroll-behavior:contain}
.pz-help-l details{border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.pz-help-l summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:10px;min-height:44px;align-items:center}
.pz-help-l summary::-webkit-details-marker{display:none}
.pz-help-l summary:after{content:"+";color:var(--mut);font-size:18px;line-height:1}
.pz-help-l details[open] summary:after{content:"–"}
.pz-help-l details p{padding:0 14px 12px;color:var(--tx2);font-size:14px}
.pz-none{padding:16px 4px;color:var(--tx2);font-size:14px}
.pz-help-f{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 14px 14px;border-top:1px solid var(--line)}
.pz-help-f a{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:10px;background:var(--soft);font-size:13.5px;font-weight:600;color:var(--tx2);min-width:0;overflow-wrap:anywhere;line-height:1.25}
.pz-help-f a:hover{color:var(--tx);background:var(--soft2)}
.pz-help-f a.w{grid-column:1/-1}
.pz-help-f svg{width:16px;height:16px}
@media (max-width:760px){
  .pz-fabs{inset-inline-end:12px;bottom:calc(72px + env(safe-area-inset-bottom))}
  .pz-help{inset-inline:10px;width:auto;bottom:calc(70px + env(safe-area-inset-bottom));max-height:min(560px,calc(100dvh - 150px));z-index:96}
}

/* ---------- offline banner + network toast ---------- */
.pz-offline{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:96;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:var(--tx);color:var(--bg);font-size:14px;font-weight:700;box-shadow:var(--sh);white-space:nowrap;max-width:92vw}
.pz-offline svg{width:17px;height:17px}
.pz-offline.ok{background:var(--ok);color:#06240f}
body.is-feed .pz-offline{top:118px}
.toast.pz-net svg{color:var(--badt);width:18px;height:18px}
.pz-retry{margin-inline-start:6px;padding:0 14px;min-height:36px;border-radius:9px;background:var(--soft2);border:1px solid var(--line2);font-weight:700;font-size:13px;color:var(--tx)}
.pz-retry:hover{background:var(--card2)}

/* ---------- keyboard shortcuts overlay, install hint ---------- */
.pz-keys{display:grid;gap:2px;margin-top:14px}
.pz-keys div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.pz-keys div:last-child{border:0}
.pz-keys dd{color:var(--tx2);font-size:14px;text-align:end}
kbd{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:8px;background:var(--card2);border:1px solid var(--line2);border-bottom-width:2px;font:700 13px var(--f);color:var(--tx)}
.pz-keysbtn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--tx2);font-weight:600}
.pz-keysbtn:hover{color:var(--tx)}
.pz-ios{margin:14px 0 0;padding-inline-start:22px;display:grid;gap:10px;color:var(--tx2)}
.pz-ios svg{width:18px;height:18px;vertical-align:-3px;color:var(--link)}

/* ---------- 404 ---------- */
.pz-404{padding-inline:16px}
.pz-404-s{justify-content:center;margin:24px auto 0;max-width:520px;flex-wrap:nowrap}
.pz-404-s .field{flex:1;min-width:0}
.pz-404-b{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- what's new ---------- */
.pz-wn{list-style:none;display:grid;gap:12px;margin:22px 0 0}
.pz-wn li{position:relative;padding:18px 20px}
.pz-wn h2{font-size:20px;margin:6px 0 6px}
.pz-wn p{color:var(--tx2)}
.pz-wn-d{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.pz-wn-d.soon{color:#fff;background:var(--grad);padding:2px 10px;border-radius:99px;letter-spacing:.04em}
.pz-wn li.soon{border-style:dashed;border-color:color-mix(in srgb,var(--a1) 45%,var(--line2))}
.pz-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--a2);margin-inline-start:7px;vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 22%,transparent)}

/* ---------- phones: every tap target at least 40x40 ---------- */
@media (max-width:760px){
  .top-in{padding:8px 14px}
  .burger{width:40px;height:40px}
  .top .logo{min-height:40px}
  .top .avatar{width:40px;height:40px}
  .pill{min-height:40px}
  .btn.sm,.ibtn,.chip,.seg button,.fi-cap .rx,.pz-retry{min-height:40px}
  .ibtn{min-width:40px;justify-content:center}
  .seg button{padding-inline:14px}
  .fi-tabs button{min-height:40px;padding:0 16px}
  .modal .x{width:40px;height:40px;top:8px;right:8px}
  [dir=rtl] .modal .x{left:8px}
  .lang-hint .x{width:40px;height:40px}
  .foot a:not(.logo){padding:9px 0}
  .foot .logo{min-height:40px}
  .drawer-langs a,.foot-langs a,.foot-langs a:not(.logo){display:inline-flex;align-items:center;min-height:40px;padding:0 14px}
  .menu-pop a{padding:11px 12px}
  .mnav-sw .sw{width:40px;height:40px}
  .drawer-theme .ibtn{min-height:40px}
  .drawer-out{display:flex;align-items:center;min-height:40px}
  label.tog{min-height:40px}
  label.tog input{width:20px;height:20px}
  .adv summary,.vp-prompt summary,.danger-zone summary{min-height:40px;display:flex;align-items:center}
  .faq details{padding:0}
  .faq summary{padding:14px 16px;align-items:center;min-height:48px}
  .faq details p{margin:0;padding:0 16px 14px}
  .forgot{display:inline-block;padding:10px 0}
  .imgt button{width:24px;height:24px}
  .imgt button:before,.img-chip button:before{content:"";position:absolute;inset:-9px}
  .img-chip button{position:relative;min-width:40px;min-height:40px}
  .crumbs a{display:inline-block;padding:10px 2px}
  .sec-h .btn{min-height:44px}
  .seg button,.chip{min-width:40px;justify-content:center}
  .drawer-h .logo{min-height:40px}
  .author .avatar{width:40px;height:40px}
  .author>div>a{display:inline-flex;align-items:center;min-height:40px;margin:-10px 0 -8px}
  [data-report]{min-height:40px}
  .pz-fab{width:42px;height:42px}
}