/* What the root version adds on top of the preview styles. Loaded last on every page.
   The preview bar, the small sample labels, the phone safe areas and the install section on the apps page. */

/* ---------- preview bar: slim glass, in the page flow, so nothing jumps ---------- */
.strip{gap:9px;min-height:32px;padding-block:6px;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px));padding-top:calc(6px + env(safe-area-inset-top,0px));color:var(--text-2);font-weight:600;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-bottom:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -16px 22px -18px rgba(255,138,36,.5)}

/* ---------- opened from the home screen: the page draws under the status bar ---------- */
html{scroll-padding-top:calc(var(--top) + 16px + env(safe-area-inset-top,0px))}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);z-index:65;pointer-events:none;background:rgba(5,6,5,.9);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.top{top:env(safe-area-inset-top,0px)}
/* everything inside the page that sticks under the top bar reads its height from here */
main{--top:calc(58px + env(safe-area-inset-top,0px))}
.wrap{padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px))}
@media print{body::before{display:none}}

/* ---------- the wallet chip in the top bar: the number is a sample, and it says so ---------- */
.balance__col{display:grid;justify-items:start;gap:3px;line-height:1}
.balance__col .num{line-height:1}
.balance__tag{font-size:.56rem;font-weight:800;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-pale);opacity:.9}

/* ---------- home: the payout card in the hero walk through carries a sample tag ---------- */
.stage__tag{margin-left:auto}

/* ---------- coin page: the note under the pre claim button ---------- */
.claim__meta--ask{margin-top:14px;font-size:.95rem}

/* ---------- apps page: put it on your phone ---------- */
.addhome__grid{display:grid;gap:16px}
.addhome__grid>*{min-width:0}
.addhome__card{display:grid;align-content:start;gap:18px;padding:clamp(22px,3.4vw,34px)}
.addhome__card h3{display:flex;align-items:center;gap:10px;font-size:1.6rem}
.addhome__card h3 .icon{width:28px;height:28px;color:var(--green-hi)}
.addhome__card--o h3 .icon{color:var(--orange-hi)}
.addhome__steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:a}
.addhome__steps li{position:relative;counter-increment:a;min-height:32px;padding:3px 0 0 46px;color:var(--text-2);line-height:1.45}
.addhome__steps li::before{content:counter(a);position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--green-ink);font:800 1rem/1 var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(99,217,54,.4)}
.addhome__card--o .addhome__steps li::before{background:var(--orange);color:var(--orange-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(255,138,36,.4)}
.addhome__steps b{color:var(--text);font-weight:700}
.addhome__steps .icon{display:inline-block;width:19px;height:19px;margin-left:5px;vertical-align:-4px;color:var(--text)}
.addhome__card .btn{justify-self:start}
.addhome__note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px;font-size:.97rem;color:var(--text-2)}
.addhome__on{display:none;align-items:center;gap:12px;max-width:34ch;font:800 clamp(1.15rem,3vw,1.4rem)/1.25 var(--display)}
.addhome__tick{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);color:var(--green-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 20px rgba(99,217,54,.5)}
.addhome__tick .icon{width:18px;height:18px;stroke-width:2.6}
.is-app .addhome__on{display:flex}
.is-app .addhome__grid,.is-app .addhome__note{display:none}
@media (min-width:760px){.addhome__grid{grid-template-columns:1fr 1fr;gap:20px}}