/* ============================================================================
 * PRsathi — app store links, shared by every page on prsathi.com
 * ----------------------------------------------------------------------------
 * WHY THIS EXISTS
 * Until 2026-08-12 the website linked to the App Store in exactly zero places
 * and to Play only from the free-tools pages. Someone arriving from Google had
 * no route to either app. This file styles the two surfaces that fix that:
 *
 *   .prs-appdl   a static badge block sitting in every page footer. Real <a>
 *                elements in the served HTML, so Google indexes them and they
 *                survive with JavaScript off.
 *   #prs-appbar  a slim pinned bar injected by app-links.js.
 *
 * THREE TOKEN SYSTEMS
 * The legal pages, the guides and the free tools each define their own CSS
 * variables and none of the three agree on names. Every colour below is a
 * fallback chain across all of them, ending in a literal, so this file drops
 * into any page without touching that page's palette:
 *   --ink-2 / --ink70   secondary text      --line / --hair   hairline
 *   --bg-2  / --paper   raised surface      --v    / --violet  accent
 * ========================================================================= */

/* ---------------------------------------------------------------- badges -- */
/* Official artwork, unmodified: Apple's badge SVG is 40 tall and edge-to-edge,
   Google's PNG carries ~10% built-in padding, so the Play image is set 10px
   taller and pulled back by its own margin to make both read as one row. */
.prs-badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.prs-badges a{display:inline-flex;line-height:0;border-radius:9px;
  transition:transform .18s ease}
.prs-badges a:hover{transform:translateY(-2px)}
.prs-badges a:focus-visible{outline:2px solid var(--v,var(--violet,#6C4BF0));outline-offset:3px}
.prs-badges img{display:block;height:40px;width:auto}
.prs-badges img.prs-play{height:50px;margin-block:-5px}

/* Apple ships a black badge for light backgrounds and a white one for dark.
   Both are in the markup; CSS picks. The media query is guarded so an explicit
   light theme still wins on a device set to dark. */
.prs-badges .prs-ios-w{display:none}
[data-theme="dark"] .prs-badges .prs-ios-b{display:none}
[data-theme="dark"] .prs-badges .prs-ios-w{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .prs-badges .prs-ios-b{display:none}
  :root:not([data-theme="light"]) .prs-badges .prs-ios-w{display:block}
}

/* The homepage hero uses the same badge row, just with breathing room above. */
.prs-badges.hero-badges{margin-top:26px}

/* ------------------------------------------------------- footer block ----- */
/* Self-widthing on purpose. This block is injected just inside the closing tag
   of nine different footers that agree on nothing — some wrap their contents in
   .wrap, some in .shell, the guides in neither — so it centres itself rather
   than depending on whatever container it lands in. */
.prs-appdl{display:grid;gap:12px;justify-items:center;text-align:center;
  width:min(1080px,100% - 2.2rem);margin:26px auto 4px;padding-top:22px;
  border-top:1px solid var(--line,var(--hair,#E5E1F0))}
.prs-appdl-t{font-size:13.5px;font-weight:600;line-height:1.5;
  color:var(--ink-2,var(--ink70,#55516A))}
.prs-appdl-t b{color:var(--ink,#16141F);font-weight:700}
.prs-appdl-n{font-size:12px;color:var(--ink-3,var(--ink32,#8E89A3))}
.prs-appdl-n a{color:inherit}

/* --------------------------------------------------------- pinned bar ----- */
/* z-index sits one below the cookie banner's 9999; app-links.js also waits for
   a consent decision before showing, so the two never stack on each other. */
#prs-appbar{position:fixed;left:0;right:0;bottom:0;z-index:9998;
  background:var(--bg-2,var(--paper,#fff));
  border-top:1px solid var(--line,var(--hair,#E5E1F0));
  box-shadow:0 -8px 30px -22px rgba(16,18,26,.6);
  font-family:"Instrument Sans",'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink,#16141F);padding:.65rem 1.1rem;
  transform:translateY(105%);transition:transform .34s cubic-bezier(.22,.61,.36,1)}
#prs-appbar.on{transform:none}
.prs-appbar-in{width:min(1080px,100%);margin-inline:auto;display:flex;align-items:center;
  gap:.5rem .9rem;flex-wrap:wrap}
.prs-appbar-icon{width:38px;height:38px;border-radius:10px;flex:none;
  box-shadow:0 1px 2px rgba(16,18,26,.12)}
.prs-appbar-txt{flex:1 1 9rem;min-width:0;line-height:1.35}
.prs-appbar-txt b{display:block;font-size:.9rem;font-weight:700}
.prs-appbar-txt span{display:block;font-size:.76rem;
  color:var(--ink-2,var(--ink70,#55516A))}
#prs-appbar .prs-badges{flex:none;gap:8px}
#prs-appbar .prs-badges img{height:34px}
#prs-appbar .prs-badges img.prs-play{height:42px;margin-block:-4px}
/* Filled rather than outlined. A 1px hairline circle on a white bar reads as
   nothing at arm's length, and a dismiss control nobody can see turns a helpful
   bar into one that follows you down every page. */
.prs-appbar-x{flex:none;width:28px;height:28px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line-2,var(--hair,#CFCADF));
  background:var(--bg-3,var(--lav,#F1EFF7));color:var(--ink-2,var(--ink70,#55516A));
  font:inherit;font-size:17px;line-height:1;display:grid;place-items:center;transition:.2s}
.prs-appbar-x:hover{color:var(--ink,#16141F);border-color:var(--v,var(--violet,#6C4BF0))}

/* Give the bar its own space rather than letting it cover the last line of the
   page, and lift any existing back-to-top button clear of it. */
body.prs-appbar-on{padding-bottom:var(--prs-appbar-h,86px)}
body.prs-appbar-on .top{bottom:calc(var(--prs-appbar-h,86px) + 14px)}

/* On a phone the four items can't share one line without the badges shrinking
   below Apple's minimum legible size, so the badges take their own centred row.
   The dismiss button is pinned to the bar's top-right corner rather than left
   in the flex flow: the flow's last slot is whatever the wrap leaves over, and
   a dismiss control you cannot find is the same as no dismiss control. */
@media(max-width:560px){
  .prs-appbar-in{gap:.5rem .6rem;padding-right:2rem}
  .prs-appbar-icon{width:32px;height:32px}
  .prs-appbar-txt{flex:1 1 auto}
  .prs-appbar-x{position:absolute;top:.55rem;right:.7rem;z-index:1}
  #prs-appbar .prs-badges{order:3;flex-basis:100%;justify-content:center}
}

@media print{#prs-appbar{display:none!important}body.prs-appbar-on{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){#prs-appbar{transition:none}}