/*
 * The user guide (help.html), on top of legal.css.
 *
 * The guide shares the legal pages' furniture — header, footer, reading width,
 * tokens — and adds only what a how-to needs that a policy does not: a table
 * of contents, numbered steps, feature cards, and a "where is it" chip that
 * names the exact menu path in the app.
 */
.lede{font-size:1.05rem; color:var(--body); margin:0 0 1.6em}

.toc{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; margin:0 0 2.4em; font-size:.95rem;
}
.toc b{display:block; color:var(--ink); margin-bottom:.4em}
.toc ol{margin:0; padding-inline-start:1.3em}
.toc li{margin:.15em 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

h2{font-size:1.3rem; margin-top:2.6em; padding-top:.2em; scroll-margin-top:16px}
h3{color:var(--ink); font-size:1.02rem; margin:1.7em 0 .45em; scroll-margin-top:16px}

.cards{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:1em 0 1.4em}
.card{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--bg)}
.card b{display:block; color:var(--ink); margin-bottom:.2em}
.card p{margin:0; font-size:.93rem; line-height:1.7}

ol.steps{counter-reset:s; list-style:none; padding:0; margin:1em 0 1.4em}
ol.steps > li{
  counter-increment:s; position:relative; padding:0 0 0 2.6em; margin:0 0 1em;
}
ol.steps > li::before{
  content:counter(s); position:absolute; left:0; top:.15em;
  width:1.75em; height:1.75em; border-radius:50%;
  background:var(--brand); color:#fff; font-size:.85rem; font-weight:700;
  display:grid; place-items:center; line-height:1;
}

.where{
  display:inline-block; font-size:.82rem; line-height:1.5; color:var(--ink-2);
  background:var(--bg-soft); border:1px solid var(--line-2); border-radius:999px;
  padding:1px 10px; white-space:nowrap;
}

.note{
  background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--ink-2);
  border-radius:12px; padding:12px 15px; font-size:.93rem; line-height:1.7; margin:1em 0 1.3em;
}
.note b{color:var(--amber)}

.soon{
  display:inline-block; font-size:.72rem; font-weight:700; color:var(--amber);
  background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:999px;
  padding:0 8px; margin-inline-start:6px; vertical-align:middle;
}

/* ── Layout with pictures (2026-09-25) ───────────────────────────────────────
   The guide was a wall of text. It now has a screenshot for every screen
   (help-img/, made by scripts/help-shots/), a table of contents that stays
   beside the text on a wide screen, and short steps instead of paragraphs. */
body.help .wrap{max-width:1120px}
.layout{display:block}
@media (min-width:1000px){
  .layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:52px; align-items:start}
  .layout .toc{position:sticky; top:18px; margin:0; max-height:calc(100vh - 36px); overflow:auto}
}
.layout article{max-width:820px; min-width:0}
.toc ol ol{padding-inline-start:1em; font-size:.88rem}
.toc ol ol li{margin:.05em 0}

.paths{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin:0 0 2.2em}
.path{display:block; border:1px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; background:var(--bg); transition:border-color .15s, transform .15s}
.path:hover{border-color:var(--brand); transform:translateY(-1px)}
.path b{display:block; color:var(--ink); margin-bottom:.15em}
.path span{display:block; color:var(--body); font-size:.9rem; line-height:1.6}
.path i{font-style:normal; font-size:1.3rem; display:block; margin-bottom:.2em}

figure.shot{margin:1em 0 1.8em}
figure.shot a{display:block}
figure.shot img{
  display:block; width:100%; height:auto; background:#fff;
  border:1px solid var(--line-2); border-radius:14px;
  box-shadow:0 14px 34px -20px rgba(15,23,42,.45);
}
figure.shot figcaption{font-size:.84rem; color:var(--muted); text-align:center; margin-top:.6em; line-height:1.6}
figure.shot.modal img{max-width:520px; margin:0 auto}
figure.shot.narrow img{max-width:240px; margin:0 auto}

/* A phone screenshot beside its text, like a phone held next to the page. */
.pair{display:grid; gap:10px 28px; grid-template-columns:minmax(0,1fr); align-items:start; margin:.4em 0 1.4em}
.pair figure.shot{margin:0 auto 1em; max-width:260px; width:100%}
.pair figure.shot img{border-radius:24px}
@media (min-width:720px){
  .pair{grid-template-columns:minmax(0,1fr) 250px}
  .pair figure.shot{margin:0}
}
.pair > div > :first-child{margin-top:0}

.os{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:1em 0 1.4em}
.os > div{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--bg)}
.os b{display:block; color:var(--ink); margin-bottom:.3em}
.os ol{margin:0; padding-inline-start:1.2em; font-size:.93rem; line-height:1.7}
.os li{margin:0 0 .3em}

.kv{display:grid; grid-template-columns:auto 1fr; gap:.3em 1em; font-size:.93rem; margin:.4em 0 1.2em}
.kv dt{font-weight:600; color:var(--ink-2)}
.kv dd{margin:0}
.layout article > h2:first-of-type{margin-top:0}
/* On a phone the table of contents sits above the text: keep it to the
   eight sections, not all thirty entries. */
@media (max-width:999px){ .toc ol ol{display:none} }

/* The other language's guide, beside "back to home". */
.top .lang{margin-inline-start:auto; font-size:.84rem; color:var(--body); text-decoration:none;
  border:1px solid var(--line); border-radius:8px; padding:3px 10px; background:var(--bg)}
.top .lang:hover{color:var(--ink); border-color:var(--line-2)}
.top .lang + .back{margin-inline-start:14px}