/* ─────────────────────────────────────────────────────────────────────────
   The phone apps' pages: rtorrent16-android*.html and rtorrent16-iphone*.html
   (site decision S17; tools/node/site-phone-pages.mjs writes their <main>).
   Built from site.css's own parts: the tray-and-plate of the download page's
   steps, the eyebrow, the island link, the path chips. These pages are opened
   on phones first, so the column is the phone's and the desk gets a QR code.
   ───────────────────────────────────────────────────────────────────────── */
.ph-page{padding-top:clamp(20px,3.4vw,48px);padding-bottom:0}
.ph-sec{padding-top:clamp(44px,6vw,84px);padding-bottom:0}
.ph-sec:last-of-type{padding-bottom:clamp(56px,8vw,92px)}
.ph-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.ph-crumb a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule-hi)}
.ph-crumb a:hover{color:var(--led);border-bottom-color:var(--led)}
.ph-crumb i{font-style:normal;color:var(--rule-hi)}
.ph-crumb span{color:var(--ink)}

/* the tray (outer wall) and the plate seated in it, as .step and .step-core in site.css */
.ph-tray{
  padding:var(--lip);border-radius:var(--tray);border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 42%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 18px 44px -30px rgba(0,0,0,.9);
}
.ph-plate{
  height:100%;border-radius:calc(var(--tray) - var(--lip));background:var(--panel);border:1px solid var(--rule);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);padding:clamp(18px,2.6vw,32px);
}

/* ── the first screen: the app, its button, what the file is ──────────── */
.ph-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:900px){.ph-hero{grid-template-columns:minmax(0,1fr) 300px}}
.ph-id{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.ph-id img{width:clamp(60px,9vw,84px);height:auto;aspect-ratio:1;border-radius:23%;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 30px -14px rgba(0,0,0,.9)}
.ph-id h1{max-width:none;margin:0;font-size:clamp(30px,4.6vw,58px);line-height:1.02}
.ph-id h1 em{font-style:normal;color:var(--led)}
.ph-lead{margin:18px 0 24px;color:var(--dim);font-size:clamp(16px,1.5vw,18px);line-height:1.55}

/* the one big button: a finger-sized target across the phone's column, its own width on a desk */
.ph-get{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:60px;
  padding:8px 8px 8px 26px;border-radius:999px;background:var(--led);color:#0B0F12;text-decoration:none;
  font-family:var(--cond);font-weight:700;font-size:19px;letter-spacing:.01em;line-height:1.15;
  box-shadow:0 10px 28px -12px rgba(255,176,32,.55);
  transition:background-color .45s var(--ease-seat),box-shadow .45s var(--ease-seat);
}
.ph-get .ph-wl{width:44px;height:44px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(11,15,18,.14);transition:transform .45s var(--ease-seat)}
.ph-get svg{width:20px;height:20px;display:block}
.ph-get:hover,.ph-get:focus-visible{background:#FFC24D}
.ph-get:hover .ph-wl,.ph-get:focus-visible .ph-wl{transform:translateY(2px)}
.ph-get.ph-out:hover .ph-wl,.ph-get.ph-out:focus-visible .ph-wl{transform:translate(2px,-2px)}
.ph-get:focus-visible{outline-offset:4px}
@media (min-width:600px){.ph-get{width:auto;min-width:360px;display:inline-flex}}
.ph-wait{display:flex;gap:10px;align-items:baseline;margin:14px 0 0;color:var(--ink);font-size:15px;line-height:1.5}
.ph-wait::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--led);
  box-shadow:0 0 0 3px var(--led-soft);transform:translateY(-1px)}

.ph-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:12.5px}
.ph-meta li{border:1px solid var(--rule-hi);border-radius:4px;padding:3px 9px;color:var(--ink);background:var(--rack)}
.ph-meta li span{color:var(--dim)}
.ph-sha{margin:14px 0 0;font-family:var(--mono);font-size:12px;color:var(--dim)}
.ph-sha a{color:var(--dim)}
.ph-sha a:hover{color:var(--led)}
.ph-sha code{display:block;margin-top:6px;padding:8px 11px;border:1px solid var(--rule-hi);border-radius:6px;background:var(--rack);
  color:var(--ink);font-family:var(--mono);font-size:12.5px;line-height:1.5;word-break:break-all;overflow-wrap:anywhere}

/* the code for a visitor at a desk; on a phone it would point the phone at itself */
.ph-qr .ph-plate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.ph-qr svg{display:block;width:100%;max-width:216px;height:auto;border-radius:10px}
.ph-qr p{margin:0;max-width:26ch;color:var(--dim);font-size:14px;line-height:1.5}
@media (max-width:899px){
  .ph-qr .ph-plate{flex-direction:row;justify-content:flex-start;text-align:left}
  .ph-qr svg{width:148px}
}
@media (max-width:720px){.ph-qr{display:none}}

/* ── numbered steps: .steps, .step, .step-core and .path come from site.css ── */
.ph-sec .steps{margin-top:clamp(18px,2.4vw,28px)}
/* on a phone the number sits beside its heading, so four steps fit a screen and a half */
@media (max-width:640px){
  .ph-sec .step-core{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .ph-sec .step-core::before{font-size:27px;padding-top:2px}
}
.ph-after{margin:16px 0 0;color:var(--dim);font-size:15px}
.ph-sec .step a.ph-ext{color:var(--led);text-underline-offset:3px}

/* ── Google Play's test ───────────────────────────────────────────────── */
.ph-sec > .ph-tray{margin-top:clamp(18px,2.4vw,28px)}
.ph-plate > p{margin:0 0 14px;color:var(--dim);font-size:15px;line-height:1.6}
.ph-plate > p:last-child{margin-bottom:0}
.ph-plate > p b{color:var(--ink);font-weight:600}
.ph-play{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0;list-style:none;counter-reset:play}
.ph-play li{counter-increment:play;display:flex;align-items:center}
.ph-play .isl{min-height:44px;padding:6px 6px 6px 8px}
.ph-play .isl::before,.ph-play .ph-txt::before{
  content:counter(play);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--rack);border:1px solid var(--rule-hi);color:var(--led);font-family:var(--cond);font-weight:700;font-size:14px;
}
.ph-play .ph-txt{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 8px;color:var(--ink);font-size:15px}
@media (max-width:599px){.ph-play li,.ph-play .isl{width:100%}.ph-play .isl{justify-content:flex-start}.ph-play .isl .wl{margin-left:auto}}

/* ── what it does, and the screens ─────────────────────────────────────── */
.ph-feat{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:clamp(16px,2vw,22px) 0 0;padding:0;list-style:none}
@media (min-width:900px){.ph-feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.ph-feat li{position:relative;padding:14px 16px 14px 34px;border:1px solid var(--rule);border-radius:calc(var(--tray) - var(--lip));
  background:var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);color:var(--dim);font-size:15px;line-height:1.6}
.ph-feat li::before{content:"";position:absolute;left:16px;top:24px;width:6px;height:6px;border-radius:50%;background:var(--led)}
.ph-feat li b{color:var(--ink);font-weight:600}

.ph-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);
  max-width:1000px;margin:clamp(28px,4vw,48px) auto 0;padding:0;list-style:none}
.ph-shots figure{margin:0}
.ph-shots .ph-tray{--tray:26px;--lip:6px}
.ph-shots img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--rule)}
.ph-shots figcaption{margin-top:10px;text-align:center;color:var(--dim);font-size:13px;line-height:1.4}
/* on a phone one screen at a time, the next one showing at the edge, as the Rtorrent 16 page's phones */
@media (max-width:760px){
  .ph-shots{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(70%,280px);gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 10px;scroll-padding-inline:var(--gut);
  }
  .ph-shots::-webkit-scrollbar{display:none}
  .ph-shots li{scroll-snap-align:start}
}

/* ── what it needs, what it sends ─────────────────────────────────────── */
.ph-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:clamp(18px,2.4vw,28px)}
@media (min-width:900px){.ph-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ph-facts h2{margin:0 0 10px;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ph-facts .ph-plate p{color:var(--ink)}
.ph-facts .ph-plate p.ph-link{margin-top:14px}
.ph-facts a{color:var(--led);text-underline-offset:3px}

.ph-credit{margin:clamp(28px,4vw,44px) 0 0;padding-top:16px;border-top:1px solid var(--rule);color:var(--dim);font-size:12.5px;line-height:1.6}
.ph-credit p{margin:0 0 6px}
.ph-credit a{color:var(--dim)}
.ph-credit a:hover{color:var(--led)}

/* words for a screen reader only ("opens in a new tab") */
.ph-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){.ph-get,.ph-get .ph-wl{transition:none}}