/* User-approved illustrated help, 2026-10-10. Scoped independently of rendering controls. */
#help-dialog {
  --paper: #f4f4f4;
  --ink: #151515;
  --muted: #686868;
  --line: #d4d4d4;
  width: calc(100vw - 32px);
  max-width: 640px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  padding: 0 26px;
  outline: none;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
#help-dialog .help-head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 65px;
  margin: 0;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
#help-dialog .help-head h2 { font-size: 15px; font-weight: 400; }
#help-dialog .help-head .text-button {
  font-size: 13px;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  outline: none;
  box-shadow: none;
}
.help-intro {
  display: grid;
  grid-template-columns: 171px minmax(0, 1fr);
  grid-gap: 32px; gap: 32px;
  align-items: center;
  padding: 26px 0;
}
.help-artwork { margin: 0; }
.help-artwork img { display: block; width: 100%; height: auto; }
.help-intro-description { font-size: 19px; line-height: 1.75; font-weight: 400; margin: 0; }
.help-intro-quote { color: var(--muted); font-size: 13px; line-height: 1.85; margin: 22px 0 0; }
.help-intro-quote cite { display: block; font-style: normal; margin-top: 5px; text-align: right; }
.help-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.help-steps li { display: grid; grid-template-columns: 90px minmax(0, 1fr); grid-gap: 22px; gap: 22px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.help-steps img { display: block; width: 90px; height: 90px; object-fit: cover; background: #e5e5e5; }
.help-steps h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 400; }
.help-steps h3 span { font-variant-numeric: tabular-nums; margin-right: 5px; }
.help-steps p { font-size: 13px; line-height: 1.75; color: var(--muted); }
.help-details { margin: 0; }
.help-details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 12px 0; cursor: pointer; font-size: 13px; outline: none; }
.help-details summary::-webkit-details-marker { display: none; }
/* Both disclosure controls share a geometric centre, independent of font metrics. */
.help-expand, .lab-chem-toggle > span { display: block; flex: 0 0 12px; width: 12px; height: 12px; position: relative; font-size: 0; line-height: 0; }
.help-expand::before, .help-expand::after,
.lab-chem-toggle > span::before, .lab-chem-toggle > span::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: currentColor; pointer-events: none;
}
.help-expand::before, .lab-chem-toggle > span::before { width: 12px; height: 1px; }
.help-expand::after, .lab-chem-toggle > span::after { width: 1px; height: 12px; }
.help-details[open] .help-expand::after,
.lab-chem-toggle[aria-expanded="true"] > span::after { display: none; }
#help-dialog .help-copy { padding: 0 0 10px; }
#help-dialog .help-copy p:first-child { margin-top: 0; }
.help-detail-heading { margin: 24px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 400; }
@media (max-width: 480px) {
  #help-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0 18px; }
  #help-dialog .help-head { min-height: 57px; }
  #help-dialog .help-head h2 { font-size: 14px; }
  .help-intro { grid-template-columns: 122px minmax(0, 1fr); grid-gap: 18px; gap: 18px; padding: 22px 0; }
  .help-intro-description { font-size: 15px; line-height: 1.7; }
  .help-intro-quote { font-size: 11px; line-height: 1.8; margin-top: 14px; }
  .help-steps li { grid-template-columns: 78px minmax(0, 1fr); grid-gap: 16px; gap: 16px; padding: 14px 0; }
  .help-steps img { width: 78px; height: 78px; }
  .help-steps h3 { font-size: 16px; margin-bottom: 7px; }
  .help-steps p { font-size: 12px; }
}
@media (max-width: 360px) {
  .help-intro { grid-template-columns: 102px minmax(0, 1fr); grid-gap: 14px; gap: 14px; }
  .help-intro-description { font-size: 14px; }
  .help-steps li { grid-template-columns: 70px minmax(0, 1fr); grid-gap: 12px; gap: 12px; }
  .help-steps img { width: 70px; height: 70px; }
}

/* Full screenshot stays intact; this viewport includes the whole 3:4 print and bottom margin. */
.help-step-colour { display: block; position: relative; overflow: hidden; width: 90px; height: 90px; background: #e5e5e5; }
.help-steps .help-step-colour img { position: absolute; max-width: none; width: 195.892857%; height: auto; left: -13.571429%; top: -30.803571%; }
@media (max-width: 480px) { .help-step-colour { width: 78px; height: 78px; } }
@media (max-width: 360px) { .help-step-colour { width: 70px; height: 70px; } }