/* App showcase — native promo units for anytools.io (promo v2).
   Brand tokens arrive per unit as inline custom properties:
   --sc-ad/--sc-ond (accent/on-accent, dark), --sc-g1/--sc-g2 (dark gradient),
   --sc-al/--sc-onl (light accent), --sc-t1/--sc-t2 (light gradient), --sc-dur (screen loop). */

.showcase{
  --a:var(--sc-ad,#1db954);--on:var(--sc-ond,#000);
  --g1:var(--sc-g1,#1a1a1a);--g2:var(--sc-g2,#121212);
  --ink:#fff;--ink2:rgba(255,255,255,.76);--ink3:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.12);--chip:rgba(255,255,255,.08);
  position:relative;display:flex;box-sizing:border-box;isolation:isolate;overflow:hidden;
  color:var(--ink);text-decoration:none;text-align:start;line-height:1.35;
  background:linear-gradient(150deg,var(--g1),var(--g2));
  border:1px solid var(--line);border-radius:1.1rem;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s,box-shadow .25s;
}
[data-theme="light"] .showcase{
  --a:var(--sc-al,#1a7a3a);--on:var(--sc-onl,#fff);
  --g1:var(--sc-t1,#f6f6f6);--g2:var(--sc-t2,#fff);
  --ink:#121212;--ink2:#474747;--ink3:#6b6b6b;--line:rgba(0,0,0,.09);--chip:rgba(0,0,0,.05);
}
.showcase *,.showcase *::before,.showcase *::after{box-sizing:border-box}
/* Host pages style links inside content (e.g. .blog-body a) — keep units intact */
.showcase.showcase,.showcase.showcase:hover{color:var(--ink);text-decoration:none}
.showcase.showcase *{text-decoration:none}
.sc-plat{display:inline}
a.showcase:hover{border-color:color-mix(in srgb,var(--a) 60%,transparent);box-shadow:0 16px 36px -20px color-mix(in srgb,var(--a) 75%,transparent)}
a.showcase:focus-visible,.sc-dock-link:focus-visible,.sc-x:focus-visible{outline:2px solid var(--a);outline-offset:3px}

/* Shared parts */
.sc-tag{position:absolute;z-index:2;top:.7rem;inset-inline-end:.75rem;display:block;
  font-size:.6rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);background:var(--chip);padding:.18rem .45rem;border-radius:.35rem}
.sc-head{display:flex;align-items:center;gap:.6rem;min-width:0;padding-inline-end:4.75rem}
.sc-icon{display:block;flex:none;width:44px;height:44px;border-radius:24%;box-shadow:0 0 0 1px var(--line)}
.sc-id{display:flex;flex-direction:column;min-width:0}
.sc-name{display:block;font-size:.95rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-meta{display:block;font-size:.72rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-h{display:block;margin:.9rem 0 .4rem;font-size:1.3rem;font-weight:800;line-height:1.18;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.sc-s{display:block;font-size:.86rem;line-height:1.45;color:var(--ink2);text-wrap:pretty}
.sc-pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.sc-pill{display:inline-block;padding:.16rem .55rem;border:1px solid var(--line);border-radius:999px;font-size:.68rem;font-weight:500;color:var(--ink2);white-space:nowrap}
.sc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1rem}
.sc-cta{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.62rem 1.05rem;border-radius:999px;
  background:var(--a);color:var(--on);font-size:.86rem;font-weight:700;white-space:nowrap;transition:filter .2s}
.sc-cta svg{display:block;flex:none;width:14px;height:14px}
[dir="rtl"] .sc-cta svg{transform:scaleX(-1)}
a.showcase:hover .sc-cta,.sc-dock-link:hover .sc-cta{filter:brightness(1.08)}
.sc-qr{display:flex;align-items:center;gap:.55rem;max-width:12.5rem;font-size:.7rem;line-height:1.3;color:var(--ink3)}
.sc-qr img{display:block;flex:none;width:56px;height:56px;padding:3px;border-radius:.45rem;background:#fff}
@media (hover:none),(pointer:coarse){.sc-qr{display:none}}

/* Phone mockup with two screens cross-fading (loop length differs per app) */
.sc-art{position:relative;display:block;flex:none}
.sc-glow{position:absolute;z-index:-1;inset:-12% -30%;display:block;opacity:.85;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--a) 40%,transparent),transparent 72%)}
[data-theme="light"] .sc-glow{opacity:.55}
.sc-phone{--pw:136px;position:relative;display:block;width:var(--pw);aspect-ratio:1320/2868;padding:calc(var(--pw)*.03);
  border-radius:calc(var(--pw)*.17);background:#0c0c0e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 22px 40px -18px rgba(0,0,0,.65)}
.sc-screen{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--pw)*.14);background:#000}
.sc-screen img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.sc-screen img+img{opacity:0;animation:sc-swap var(--sc-dur,14s) ease-in-out infinite}
@keyframes sc-swap{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sc-screen img+img{animation:none}}

/* In-content card: text column + phone peeking from the bottom edge */
.showcase-card{container-type:inline-size;margin:1.5rem 0;flex-direction:row;align-items:stretch}
.showcase-card .sc-body{display:flex;flex-direction:column;flex:1;min-width:0;padding-block:1.15rem 1.25rem;padding-inline:1.25rem .25rem}
.showcase-card .sc-art{display:flex;justify-content:center;width:11rem;padding-top:2.5rem}
.showcase-card .sc-phone{margin-bottom:-6rem}
@container (max-width:560px){
  .showcase-card .sc-plat{display:none}
  .showcase-card .sc-art{width:8.25rem;padding-top:2.35rem}
  .showcase-card .sc-phone{--pw:112px}
  .showcase-card .sc-h{font-size:1.16rem}
}
@container (max-width:420px){
  .showcase-card .sc-body{padding-block:1rem 1.1rem;padding-inline:1rem 0}
  .showcase-card .sc-art{width:6.6rem;padding-top:3.6rem}
  .showcase-card .sc-phone{--pw:92px}
  .showcase-card .sc-h{font-size:1.08rem;margin-top:.8rem}
  .showcase-card .sc-s{font-size:.8rem}
  .showcase-card .sc-pill:nth-child(n+3){display:none}
  .showcase-card .sc-head{padding-inline-end:0}
  .showcase-card .sc-tag{top:.6rem;inset-inline-end:.6rem}
}

/* Sticky rail (desktop). The site topbar is sticky at top:0 inside the scroll container. */
.showcase-rail{position:sticky;top:calc(70px + 1rem);flex:none;align-self:flex-start;width:250px}
.showcase-tall{flex-direction:column;padding:1rem 1rem 1.1rem}
.showcase-tall .sc-head{padding-inline-end:3.9rem}
.showcase-tall .sc-icon{width:40px;height:40px}
.showcase-tall .sc-plat{display:none}
.showcase-tall .sc-meta{white-space:normal;line-height:1.25}
.showcase-tall .sc-h{margin:.85rem 0 .75rem;font-size:1.15rem}
.showcase-tall .sc-art{display:flex;justify-content:center;margin-bottom:.9rem}
.showcase-tall .sc-phone{--pw:146px}
.showcase-tall .sc-s{font-size:.8rem}
.showcase-tall .sc-pills{margin-top:.65rem}
.showcase-tall .sc-cta{width:100%;margin-top:.95rem}
.showcase-tall .sc-qr{margin-top:.85rem}
@media (max-width:1199px){.showcase-rail{display:none}}
@media (max-height:900px){.showcase-tall .sc-phone{--pw:124px}}
@media (max-height:820px){.showcase-tall .sc-qr,.showcase-tall .sc-pills{display:none}}
@media (max-height:720px){.showcase-tall .sc-art{display:none}}

/* Floating dock (phones + narrow windows); hidden where the rail is shown */
.showcase.showcase-dock{position:fixed;z-index:90;inset-inline:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
  align-items:center;gap:.25rem;padding:.5rem;border-radius:1rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  transform:translateY(calc(100% + 2rem));opacity:0;visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility 0s .4s}
.showcase.showcase-dock.is-on{transform:none;opacity:1;visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.sc-dock-link{display:flex;flex:1;align-items:center;gap:.65rem;min-width:0;padding:.1rem .25rem;color:inherit;text-decoration:none;border-radius:.75rem}
.showcase-dock .sc-icon{width:40px;height:40px}
.showcase-dock .sc-id{flex:1}
.sc-tag-inline{display:inline;margin-inline-start:.3rem;font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.sc-line{display:block;font-size:.8rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-cta-sm{padding:.45rem .95rem;font-size:.8rem}
.sc-x{display:grid;flex:none;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ink3);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer}
.sc-x:hover{background:var(--chip);color:var(--ink)}
@media (min-width:700px){.showcase.showcase-dock{inset-inline:auto 1.25rem;bottom:1.25rem;width:400px}}
@media (min-width:1200px){.showcase.showcase-dock{display:none}}
@media (prefers-reduced-motion:reduce){.showcase.showcase-dock,.showcase.showcase-dock.is-on{transition:opacity .2s,visibility 0s}}

@media print{.showcase,.showcase-rail{display:none!important}}