/* ============ my.adhd — install guide ============
   The step between the landing page and the app: it explains how to keep
   my.adhd on the home screen so it opens like an app. Follows the same
   toggle as every other page.
   Tokens from theme.css; .cta comes from landing.css. */

*{box-sizing:border-box; margin:0; padding:0}

body{
  background:var(--surface);
  color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100dvh;
  /* landing.css pins its hero to one viewport with overflow:hidden — this
     page is a guide, not a hero, so give it back its scrollbar */
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.page{
  position:relative;
  min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(16px,3.2vh,28px) 0 clamp(18px,3vh,30px);
  padding-top:calc(clamp(16px,3.2vh,28px) + env(safe-area-inset-top, 0px));
  padding-bottom:calc(clamp(18px,3vh,30px) + env(safe-area-inset-bottom, 0px));
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  /* the glow may bleed sideways, but the steps must never be clipped —
     on a short phone this page grows past the viewport and scrolls */
  overflow-x:clip;
}
.page::before{
  content:""; position:absolute; pointer-events:none; border-radius:50%;
  width:min(78vw,760px); aspect-ratio:1; top:-18%; right:-16%;
  background:radial-gradient(closest-side,var(--hero-glow-a),transparent 72%);
}
.page > *{position:relative; z-index:1}

.wrap{width:100%; max-width:640px; margin:0 auto; padding:0 clamp(20px,5vw,40px)}

/* ---------- header ---------- */
.nav{display:flex; align-items:center; gap:10px}
.nav .back{
  margin-left:auto; color:var(--muted); text-decoration:none;
  font-size:14px; font-weight:600;
  padding:8px 16px; border:1.5px solid var(--line-strong); border-radius:999px;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.nav .back:hover{color:var(--ink); border-color:var(--accent)}
.nav .theme-toggle{margin-left:10px}

/* ---------- body ---------- */
/* top-aligned, like the rest of the site: the title sits right under the
   nav and the upper third of the screen carries it, rather than the copy
   drifting to the middle and pushing the steps off a short phone */
.main{
  display:flex; flex-direction:column; justify-content:flex-start; min-height:0;
  padding-top:var(--top-gap);
  padding-bottom:clamp(20px,4vh,44px);
}

.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.title{
  font-size:clamp(26px,min(5.2vh,7.4vw),42px); font-weight:800;
  letter-spacing:-.035em; line-height:1.06; margin-bottom:10px;
}
.lede{font-size:clamp(14px,1.9vh,17px); color:var(--muted); max-width:46ch; margin-bottom:clamp(18px,3vh,28px)}

/* platform switch */
.tabs{display:flex; gap:6px; margin-bottom:16px}
.tab{
  flex:1; font:inherit; font-size:13.5px; font-weight:700; color:var(--muted);
  background:transparent; border:1.5px solid var(--line-strong); border-radius:999px;
  padding:9px 8px; cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.tab:hover{color:var(--ink); border-color:var(--accent)}
.tab[aria-selected="true"]{color:var(--ink); background:var(--wash-2); border-color:var(--accent)}
.tab:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* steps */
.steps{list-style:none; counter-reset:step; display:grid; gap:2px}
/* display:grid outranks the UA's [hidden] rule, so say it again */
.steps[hidden]{display:none}
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding:14px 16px; border-radius:var(--radius);
  font-size:clamp(14px,1.85vh,16px); color:var(--ink-soft);
  background:var(--wash);
}
.steps li::before{
  content:counter(step);
  font-size:12.5px; font-weight:800; line-height:22px;
  width:22px; height:22px; border-radius:50%; text-align:center;
  background:var(--orange); color:#fff;
}
.steps b{font-weight:700; color:var(--ink)}
.steps .icon{
  display:inline-block; width:1em; height:1em; vertical-align:-.13em;
  margin-inline:.12em; fill:currentColor;
}

/* the direct-install button, only shown when the browser offers a prompt.
   .main is a flex column, so without align-self the button would stretch
   the full measure and read as a banner rather than a button. */
.install-now{margin-top:16px; display:none; align-self:flex-start}
.install-now.is-live{display:inline-flex}

/* ---------- footer ---------- */
.foot{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.skip{
  color:var(--faint); font-size:13.5px; font-weight:600; text-decoration:none;
  border-bottom:1.5px solid var(--line-strong); padding-bottom:1px;
}
.skip:hover{color:var(--ink); border-color:var(--accent)}
.fineprint{font-size:12px; color:var(--faint); max-width:56ch; line-height:1.55}

@media (min-width:720px){
  .foot{flex-direction:row; align-items:center; justify-content:space-between; gap:20px}
  /* the fine print gives way — the button keeps its own width */
  .foot .cta{flex:none; white-space:nowrap}
  .foot .fineprint{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* Launched from the home screen there is no browser chrome to hold the
   status bar off, and iOS does not always report an inset — so floor it. */
@media (display-mode:standalone){
  .page{padding-top:calc(clamp(16px,3.2vh,28px) + max(env(safe-area-inset-top, 0px), 34px))}
}