/* PEpracticehub - /app/, adding the site to a phone's home screen. */

.install{display:grid;gap:26px;min-width:0}
/* The page borrows the members area grid. Without the sidebar it is one column. */
.member.no-nav{grid-template-columns:minmax(0,1fr)}
.member .install{padding-top:16px}
/* On a phone the sidebar would push every step below a screen of links. */
@media (max-width:900px){#insNav{display:none}.member{grid-template-columns:minmax(0,1fr)}}
.ins-head{display:grid;gap:10px;max-width:40rem}
.ins-head h1{font-size:clamp(34px,6vw,52px);font-weight:800;line-height:1;text-wrap:balance}
.ins-head .sub{font-size:17px;color:var(--muted)}

.ins-note{padding:14px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--amber);font-size:15px}
.ins-note.good{border-left-color:var(--ok)}
.url{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 6px;border-radius:5px;white-space:nowrap}

/* The two big choices. Big enough to hit with a thumb, and the chosen one
   looks pressed rather than merely colored. They stay at the top while the
   steps scroll, so switching never means scrolling back up. */
.ins-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:34rem;position:sticky;top:10px;z-index:5}
.ins-tab{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;border-radius:14px;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:18px;font-weight:600;cursor:pointer}
.ins-tab svg{width:22px;height:22px}
.ins-tab[aria-pressed="true"]{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 10px 24px -14px var(--blue)}
.ins-tab:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.step{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 28px}
.step-copy{display:grid;gap:8px;justify-items:start}
@media (max-width:640px){
  .step{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px 18px;gap:16px}
  .step-copy{justify-items:center}
}
.step .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--amber);color:#1A1300;
  font-family:var(--display);font-size:22px;font-weight:800}
.step h3{font-size:24px;font-weight:700;line-height:1.2;text-wrap:balance}
.step p{color:var(--muted);font-size:16px;max-width:36rem}
.step p b{color:var(--ink)}
.key{display:inline-block;padding:0 8px;border-radius:7px;background:var(--blue-soft);color:var(--blue-text);white-space:nowrap}

.ins-aside{padding:16px 20px;border-radius:14px;background:var(--surface-2);font-size:15px;margin-top:18px}
.ins-help{display:grid;gap:10px;justify-items:start;padding:26px 28px;border-radius:18px;border:1px dashed var(--line)}
.ins-help h2{font-size:26px;font-weight:800}
.ins-help p{color:var(--muted);max-width:40rem}

/* ---------- the drawings ----------
   Every color comes from the theme tokens, so the drawings follow the
   reader's light or dark mode like the rest of the page. The app icon and
   the tap marker are the exceptions: they are the real brand colors. */
.shot{width:220px;max-width:100%;height:auto;display:block}
.ph-body{fill:var(--ink)}
.ph-screen{fill:var(--bg)}
.pg-mark{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linejoin:round}
.pg-line{fill:var(--line)}
.pg-line.strong{fill:var(--muted);opacity:.55}
.pg-card{fill:var(--blue-deep)}
.pg-btn{fill:var(--amber)}
.dim{fill:#0F1B33;opacity:.38}
.ui-bar,.ui-menu,.ui-sheet{fill:var(--surface);stroke:var(--line);stroke-width:1}
.ui-group{fill:var(--surface-2)}
.ui-grab,.ui-line{fill:var(--line)}
.ui-url{font-family:var(--mono);font-size:10.5px;fill:var(--ink)}
.ui-dots{fill:var(--muted)}
.ui-dots.on{fill:var(--blue-text)}
.ui-row.on{fill:var(--blue-soft);stroke:var(--amber);stroke-width:2.5}
.ui-label{font-family:var(--body);font-size:12.5px;font-weight:600;fill:var(--ink)}
.ui-label.sm{font-size:11px}
.ui-glyph{fill:none;stroke:var(--blue-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-glyph-box{fill:none;stroke:var(--blue-text);stroke-width:1.6}
.ui-toggle{fill:var(--ok)}
.ui-knob{fill:#fff}
.ai-bg{fill:#12295F}
.ai-hex{fill:none;stroke:#fff;stroke-width:3.2;stroke-linejoin:round}
.ai-dot{fill:#F5A524}
.home{fill:var(--blue-soft)}
.hs-apps{fill:var(--surface)}
.hs-ring{fill:none;stroke:var(--amber);stroke-width:3}
.hs-label{font-family:var(--body);font-size:8.5px;font-weight:600;fill:var(--ink)}

/* The finger. It pulses so the eye lands on it before anything else. */
.tap-ring{fill:rgba(245,165,36,.22);stroke:#F5A524;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:tap 1.8s ease-out infinite}
.tap-dot{fill:#F5A524}
@keyframes tap{0%{transform:scale(.55);opacity:1}70%{transform:scale(1);opacity:.9}100%{transform:scale(1.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.tap-ring{animation:none}}