/* app.css: "Tafseela in the app" (app.html). The way in sits on one plain card
   (the App Store on an iPhone or iPad, the web everywhere else); app.js picks
   what it shows. No swing tag, no string, no figure. Tokens only. */
.atag{--panel-w:480px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
/* app.js shows one of the two ways in; until it runs, none */
.atag [hidden]{display:none !important}
.atag-get{display:flex;flex-direction:column;align-items:center;gap:10px}
.atag-get .pill{font-size:1rem;padding:14px 26px}
/* "coming soon": words, never drawn like a button */
.atag-soon{margin:0;font-family:var(--sm);font-weight:400;font-size:1.125rem;line-height:1.55;color:var(--magenta-text);text-wrap:balance}
/* the quiet second way on an iPhone or iPad, once the web shop is open */
.atag-alt{position:relative;font-family:var(--sm);font-size:0.875rem;line-height:1.5;color:var(--magenta-text);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;touch-action:manipulation}
.atag-alt::after{content:"";position:absolute;inset-block:min(0px,calc((100% - 44px)/2));inset-inline:min(0px,calc((100% - 44px)/2))}
.atag-alt:focus-visible{outline:2px solid var(--magenta-text);outline-offset:3px}
.atag-alt:active{opacity:.7}
/* before the opening: the sign-up, under a thin line */
.atag-wait{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:18px;
  border-top:1.5px solid var(--panel-line)}
.atag-wait p{margin:0;font-family:var(--r-ar);font-size:1.125rem;line-height:1.65;color:var(--copy);text-wrap:balance}
:lang(en) .atag-wait p{font-family:var(--r-en)}
/* the one-line join pill (owner 2026-11-10) fits the card on the narrowest phones */
@media (max-width:400px){
  .atag{padding-inline:8px}
  .site-quiet .atag .q-btn{padding-inline:14px}
  .site-quiet :lang(en) .atag .q-btn{letter-spacing:.02em}
}