/* In-app and website help pages for playlist transfers (phone layout).
   Single reading column; system fonts scale with Dynamic Type; light and dark; no external resources.
   Presentation adapted from the illustrated guide's approved phone template. Keep this file identical
   in website/RehabKit/help and website/FitKit/help. */
:root {
  --ink: #1c1c1e; --muted: #5f6368; --line: #d9dbe0; --bg: #f6f7f9; --card: #ffffff;
  --blue: #0a6cff; --green: #1a8f4c; --orange: #b25e00; --red: #b3261e;
  --soft-blue: #e8f1ff; --soft-green: #e6f6ec; --soft-orange: #fff2dc; --soft-red: #fdeceb;
}
* { box-sizing: border-box; }
/* 1rem is the user's preferred body text size, so everything below scales with Dynamic Type. */
html { font: -apple-system-body; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 1rem/1.55 -apple-system, system-ui, sans-serif;
  color: var(--ink); background: var(--bg); overflow-wrap: break-word;
}
/* Padding uses px caps, not rem: rem grows with Dynamic Type and would squeeze the text column at large sizes. */
header.hero { background: linear-gradient(135deg, #0b3d91, #0a6cff); color: #fff; padding: min(2rem, 28px) min(1.25rem, 20px); }
header.hero .wrap { max-width: 43rem; margin: 0 auto; }
header.hero h1 { margin: 0 0 .4rem; font-size: min(1.6rem, 10vw); line-height: 1.15; }
header.hero p { margin: .25rem 0; opacity: .95; }
.layout { display: block; max-width: 46rem; margin: 0 auto; padding: min(1rem, 12px); }
main { min-width: 0; }
main section {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: min(1.25rem, 18px); margin-bottom: min(1rem, 14px);
}
h2 { margin: 0 0 .4rem; font-size: min(1.3rem, 8vw); line-height: 1.2; }
h2 .num { color: var(--blue); margin-right: .5rem; }
p { margin: .5rem 0; }
ul, ol { margin: .5rem 0; padding: 0 0 0 min(1.4rem, 24px); }
li { margin: .25rem 0; }
a { color: var(--blue); text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.callout {
  border-left: 4px solid var(--blue); background: var(--soft-blue);
  padding: .65rem min(.9rem, 12px); border-radius: 8px; margin: .9rem 0;
}
.callout.warn { border-color: var(--orange); background: var(--soft-orange); }
.callout.good { border-color: var(--green); background: var(--soft-green); }
.callout.bad { border-color: var(--red); background: var(--soft-red); }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
figure { margin: 1rem auto; width: min(100%, 20rem); }
figure img {
  display: block; width: 100%; height: auto; border: 1px solid #3a3a3c; border-radius: 22px;
  background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.qa dt { font-weight: 700; margin-top: .9rem; }
.qa dd { margin: .25rem 0 0; }
/* Links between the help pages: tall enough to tap comfortably. */
.related { margin: 1rem 0 .5rem; }
.related a { display: inline-block; padding: .6rem .3rem; min-height: 44px; }
@media screen and (max-width: 374px) {
  .layout { padding: min(.75rem, 10px); }
  main section { padding: min(1rem, 14px); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f7; --muted: #b9bdc6; --line: #444853; --bg: #14161b; --card: #20232b;
    --blue: #8cbcff; --green: #76d99e; --orange: #ffc06b; --red: #ffaaa4;
    --soft-blue: #24354e; --soft-green: #203d2e; --soft-orange: #403220; --soft-red: #442b2c;
  }
}
/* Numbered labels that match the red numbers on the screenshots. */
.legend { counter-reset: lg; list-style: none; margin: .75rem 0 .25rem; padding: 0; }
.legend li { counter-increment: lg; position: relative; padding-left: 2.2rem; margin: .5rem 0; }
.legend li::before {
  content: counter(lg); position: absolute; left: 0; top: .15em; width: 1.4em; height: 1.4em;
  border-radius: 50%; background: #d92d20; color: #fff; font-size: .85em; font-weight: 700;
  display: grid; place-items: center;
}
/* Small picture of a button, shown in the middle of a sentence. */
img.icon { display: inline-block; height: 1.6em; width: auto; vertical-align: middle; border-radius: 6px; margin: 0 .15em; }
/* Short lead-in under each page title. */
.lede { font-size: 1.1rem; }