/* Typace — the install buttons every page shares: the nav's "Download free" pill, the store
   buttons (hero, mid-page band, guides' CTA band, footer) and the phone sticky bar. Each page
   still lays them out; this file only dresses them, and loads after the page's own styles
   (tools/site_i18n.py links it beside nav.css), so its rules win the ties.

   The look is the app's brand theme (ThemePalette.kt's Violet): in light a deep plum pill and
   plum-ink store badges — the shape people already read as "App Store / Google Play" — with the
   icon's amber spark; in dark the pill is the Spark key itself, amber with plum ink, and the
   badges are plum cards with an amber edge on hover. A sheen crosses each button once on hover.

   The nav pill keeps its exact padding and text: the nav's overflow breakpoints (818px on the
   homepage, guide.css's own number elsewhere) are measured against its width, so a glyph or
   wider padding here would silently break them. The ✦ sits only where width is free.

   Served `immutable` (firebase.json): bump `?v=N` in site_i18n.py whenever this file changes. */
:root{
  --cta-fill:linear-gradient(135deg,#33204D 0%,#4A3470 55%,#5A3F80 100%);
  --cta-ink:#FFFFFF;
  --cta-spark:#FFB547;
  --store-spark:#FFB547;
  --cta-highlight:rgba(255,255,255,.22);
  --cta-glow:0 6px 18px -6px rgba(51,32,77,.55);
  --cta-glow-hover:0 12px 28px -8px rgba(51,32,77,.65);
  --cta-sheen:rgba(255,255,255,.28);
  --store-fill:linear-gradient(165deg,#33204D 0%,#1C1230 100%);
  --store-ink:#FFFFFF;
  --store-sub:rgba(255,255,255,.72);
  --store-edge:rgba(255,255,255,.12);
  --store-shadow:0 10px 24px -14px rgba(28,18,48,.65);
  --store-shadow-hover:0 18px 36px -14px rgba(51,32,77,.6);
  --store-highlight:rgba(255,255,255,.08);
  --store-edge-hover:rgba(255,181,71,.6);
}
/* Dark: the CTA is the Spark key — amber with plum ink — and the store badges are plum cards. */
:root[data-theme="dark"]{
  --cta-fill:linear-gradient(135deg,#FFB547 0%,#FFCC80 100%);
  --cta-ink:#2B1B40;
  --cta-spark:#2B1B40;
  --cta-highlight:rgba(255,255,255,.45);
  --cta-glow:0 6px 20px -6px rgba(255,181,71,.45);
  --cta-glow-hover:0 12px 30px -8px rgba(255,181,71,.6);
  --cta-sheen:rgba(255,255,255,.5);
  --store-fill:linear-gradient(165deg,#3A2D52 0%,#231936 100%);
  --store-edge:#4E3D70;
  --store-shadow:0 10px 26px -14px rgba(0,0,0,.85);
  --store-shadow-hover:0 18px 38px -14px rgba(255,181,71,.35);
  --store-edge-hover:rgba(255,181,71,.7);
}

/* The sheen: a soft diagonal band parked off the left edge, swept across on hover. It paints
   above the button's background and under its text (isolation + z-index -1). */
.nav-cta,.store-btn,.sticky-cta a{position:relative;overflow:hidden;isolation:isolate}
.nav-cta::after,.store-btn::after,.sticky-cta a::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,var(--cta-sheen) 50%,transparent 70%);
  transform:translateX(-120%);
}
.nav-cta:hover::after,.store-btn:hover::after,.sticky-cta a:hover::after{
  transform:translateX(120%);transition:transform .7s ease;
}

/* "Download free" in the nav */
.nav-cta{
  background:var(--cta-fill);color:var(--cta-ink) !important;
  box-shadow:inset 0 1px 0 var(--cta-highlight),var(--cta-glow);
  transition:transform .18s ease,box-shadow .2s ease;
}
.nav-cta:hover{background:var(--cta-fill);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--cta-highlight),var(--cta-glow-hover)}
.nav-cta:active{transform:translateY(0)}

/* Store buttons */
.store-btn{
  background:var(--store-fill);color:var(--store-ink);
  border:1px solid var(--store-edge);
  box-shadow:inset 0 1px 0 var(--store-highlight),var(--store-shadow);
  transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease;
}
.store-btn:hover{
  background:var(--store-fill);border-color:var(--store-edge-hover);
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 var(--store-highlight),var(--store-shadow-hover);
}
.store-btn:active{transform:translateY(-1px)}
.store-btn .small{color:var(--store-sub)}
.store-btn .big{letter-spacing:-.01em}
/* The amber spark rides the store name's corner. */
.store-btn .big::after{
  content:"✦";color:var(--store-spark);font-size:.62em;font-weight:400;
  margin-inline-start:5px;vertical-align:.45em;
}

/* Phone sticky bar */
.sticky-cta a{
  background:var(--cta-fill);color:var(--cta-ink);
  box-shadow:inset 0 1px 0 var(--cta-highlight),var(--cta-glow);
}
.sticky-cta a::before{content:"✦";color:var(--cta-spark);margin-inline-end:7px}

.nav-cta:focus-visible,.store-btn:focus-visible,.sticky-cta a:focus-visible{
  outline:2px solid var(--violet-light);outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .nav-cta,.store-btn{transition:none}
  .nav-cta:hover,.store-btn:hover{transform:none}
  .nav-cta::after,.store-btn::after,.sticky-cta a::after{display:none}
}