/* ============================================================
   help.css - the help-page layer over sza-kit.css (CONTEXT-HELP rule 10).
   Load it AFTER sza-kit.css. It adds only what a help page needs: the numbered pin on the screenshot, the
   element entry (short to see, complete to open), the order list, the related links, the footer.
   It makes no request: no font, no image, no @import. Logical (start / end) properties throughout,
   so a right-to-left page mirrors; the pins alone use physical left / top, because they track pixels of an
   image, and an image is not mirrored by the page direction.
   ============================================================ */

/* Light tokens when the page was opened with no script and no data-theme: follow the system.
   The kit defines light only under html[data-theme="light"]; this repeats those values for the no-script path. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --bg:#eef3ea; --bg-2:#ffffff; --bg-3:#e4ecdf;
    --card:rgba(255,255,255,.70); --card-hover:rgba(255,255,255,.92);
    --border:rgba(16,40,20,.12); --border-hover:rgba(47,143,58,.40);
    --text:#16210f; --text-2:#384534; --muted:#5f6b54;
    --acc:#2f8f3a; --acc-strong:#267a30; --acc-ink:#ffffff;
    --gold:#9a6a13; --gold-strong:#7e560f; --gold-ink:#ffffff;
    --shadow:0 6px 24px rgba(20,40,20,.10);
  }
}

.help { padding-block: 1.2rem 3rem; }
.help .container { max-width: var(--wide); }

/* ---------- breadcrumb row (no sticky header: rule 10) ---------- */
.help-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; margin-block-end:.4rem;
  font-size:.85rem; color:var(--muted); }
.help-crumbs a { color:var(--muted); }
.help-crumbs a:hover { color:var(--text); }
.help-crumbs .sep { opacity:.5; }

.help h2 { font-size:1.15rem; margin-block:2rem .8rem; }
.help .hero { padding-block: .6rem 1rem; }
.help .hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }

/* ---------- the screenshot and its pins ---------- */
.shot { position:relative; margin:0; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-2); overflow:hidden; box-shadow:var(--shadow); }
.shot .frame { position:relative; }   /* the pins' percentages are of this box: the image and nothing else */
.shot img { display:block; width:100%; height:auto; }
.shot figcaption { padding:.6rem 1rem; font-size:.82rem; color:var(--muted); border-top:1px solid var(--border); }
/* the theme pair: the page's data-theme chooses; dark is the kit default */
.shot .on-light { display:none; }
html[data-theme="light"] .shot .on-light { display:block; }
html[data-theme="light"] .shot .on-dark { display:none; }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .shot .on-light { display:block; }
  html:not([data-theme]) .shot .on-dark { display:none; }
}

/* the pin and the badge share one look, so the eye links a marker to its entry */
.pin, .mk { display:inline-grid; place-items:center; flex:none; border-radius:50%;
  background:var(--gold); color:var(--gold-ink); font-family:var(--font-heading); font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1; }
.pin { position:absolute; left:var(--x); top:var(--y); width:28px; height:28px; font-size:.8rem;
  transform:translate(-50%,-50%); border:2px solid var(--bg-2); box-shadow:var(--shadow);
  transition:transform .15s, background .15s; text-decoration:none; }
.pin:hover, .pin:focus-visible, .pin.on { background:var(--acc); color:var(--acc-ink); transform:translate(-50%,-50%) scale(1.18); }
.mk { width:1.7rem; height:1.7rem; font-size:.78rem; }
@media (pointer: coarse) { .pin { width:44px; height:44px; font-size:1rem; } }

/* ---------- "In this order" ---------- */
.order { counter-reset:step; display:grid; gap:.55rem; list-style:none; }
.order li { counter-increment:step; position:relative; padding-inline-start:2.3rem; color:var(--text-2); }
.order li::before { content:counter(step); position:absolute; inset-inline-start:0; top:.05rem;
  width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--acc) 18%, transparent); color:var(--acc);
  font-family:var(--font-heading); font-weight:800; font-size:.78rem; }
.order .ref { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%;
  background:var(--gold); color:var(--gold-ink); font-size:.7rem; font-weight:800; font-family:var(--font-heading);
  vertical-align:.05em; text-decoration:none; }
.order .ref:hover { background:var(--acc); color:var(--acc-ink); }

/* ---------- the elements: short to see, complete to open ---------- */
.elements { display:grid; gap:.6rem; }
details.el { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  border-inline-start:3px solid var(--gold); padding:0 1.1rem; scroll-margin-top:1rem;
  transition:border-color .2s, background .2s; }
details.el:hover, details.el.on { border-color:var(--border-hover); background:var(--card-hover); border-inline-start-color:var(--acc); }
details.el:target { border-color:var(--gold); border-inline-start-color:var(--gold); }
details.el > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.8rem; padding:.8rem 0; min-height:44px; }
details.el > summary::-webkit-details-marker { display:none; }
details.el > summary::after { content:""; width:18px; height:18px; margin-inline-start:auto; flex:none; background:var(--muted);
  transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat; }
details.el[open] > summary::after { transform:rotate(180deg); }
details.el .name { font-family:var(--font-heading); font-weight:700; }
details.el .one { display:block; color:var(--muted); font-size:.88rem; }
details.el .full { padding-block:.2rem 1rem; color:var(--text-2); }
details.el .full > * + * { margin-block-start:.7rem; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; font-size:.9rem; }
.facts dt { color:var(--muted); font-family:var(--font-heading); font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.1em; padding-block-start:.2rem; }
.facts dd { color:var(--text-2); }
@media (max-width: 520px) { .facts { grid-template-columns:1fr; } .facts dd { margin-block-end:.4rem; } }

/* ---------- related ---------- */
.related { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap:.6rem; list-style:none; }
.related a { display:block; padding:.75rem .95rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text); min-height:44px; }
.related a:hover { border-color:var(--border-hover); background:var(--card-hover); }
.related b { font-family:var(--font-heading); }
.related small { display:block; color:var(--muted); font-size:.78rem; margin-block-start:.15rem; }
.related .pill { margin-inline-start:.4rem; }

/* ---------- footer ---------- */
.help-foot { margin-block-start:2.5rem; padding-block-start:1.2rem; border-block-start:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; color:var(--muted); font-size:.82rem; }

/* a help page is read in a small viewer too: nothing may scroll sideways */
.help img, .help .shot { max-width:100%; }
.help { overflow-wrap:anywhere; }

@media print {
  .pin { display:none; }
  details.el > summary::after { display:none; }
}

/* CyrFlip: one full-width column and theme-matched captures without JavaScript. */
main { padding: 1.5rem var(--gutter); width: 100%; box-sizing: border-box; }
figure { margin-inline: 0; }
.shot { max-width: 100%; height: auto; border: 1px solid var(--border); }
.shot.light { display: none; }
.shot.dark { display: block; }
@media (prefers-color-scheme: light) { .shot.light { display: block; } .shot.dark { display: none; } }
summary, nav a, footer a, li a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: .5rem; }
details { padding: .5rem; margin-block: .75rem; border: 1px solid var(--border); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
footer { margin-block-start: 2rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none; animation: none; } }
/* EXCHANGE-MARK rules 10 and 11: the exchange server's mark on the pages that show it. The head image is the full form at 128 px, once,
   above the title; the inline mark is the flat drawing at 24 px beside it. Neither is mirrored in a right-to-left page (rule 2). */
.mark-head { display: block; width: 128px; height: 128px; max-width: 100%; margin-block: 0 1rem; }
.title-row { display: flex; align-items: center; gap: .6rem; }
.title-row h1 { margin-block: 0; }
.mark-inline { flex: none; width: 24px; height: 24px; }