/* ============================================================
   BLUEGREY — Setout help page (/setout/help/), ref APPS-033
   The graphical layer over the shared help layout: the numbered
   panel map, a figure beside every section, the icon reference,
   the bold short answers, and the print layout the PDF is made
   from. Every value is a token from tokens.css.
   ============================================================ */

/* ---- the short answer: one bold line that answers the section ---- */
.shelp-answer {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-text-hi);
}

/* ---- figures: panel crops in a quiet frame, captions that do work ---- */
.shelp-fig { margin: 0; display: grid; gap: var(--space-2); justify-items: start; }
.shelp-fig img {
  max-width: 100%;
  width: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.shelp-fig figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 34rem;
}
/* beside the words on a wide screen, above them on a narrow one.
   Only a section that HAS a figure splits; the rest keep the full column. */
@media (min-width: 960px) {
  .shelp-body .help-sec:has(> .shelp-fig) { grid-template-columns: minmax(0, 1fr) 18rem; column-gap: var(--space-6); }
  .shelp-body .help-sec:has(> .shelp-fig) > * { grid-column: 1; }
  .shelp-body .help-sec > .shelp-fig { grid-column: 2; grid-row: span 6; }
}

/* ---- the map: the whole panel with numbered callout links ---- */
.shelp-maprow { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) { .shelp-maprow { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); } }
.shelp-map { margin: 0; position: relative; display: grid; gap: var(--space-2); }
.shelp-map img { width: 100%; max-width: 17rem; border: var(--border-hairline); border-radius: var(--radius-md); }
.shelp-map__pts { position: absolute; inset: 0; max-width: 17rem; }
.shelp-map__pt {
  position: absolute; left: calc(100% + var(--space-3));
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: var(--space-2);
  white-space: nowrap; text-decoration: none;
  font-size: var(--text-sm); color: var(--color-text-secondary);
  transition: var(--transition-colors);
}
.shelp-map__pt:hover { color: var(--color-text); }
.shelp-map__pt span {
  display: inline-grid; place-items: center;
  width: var(--space-5); height: var(--space-5);
  border: var(--border-hairline); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-accent-bright);
}
.shelp-map figcaption { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 20rem; }
.shelp-pair { display: grid; gap: var(--space-5); align-content: start; }
.shelp-pair .shelp-fig img { width: 100%; }

/* ---- the icon reference: the panel's own SVGs at the panel's own size ---- */
.shelp-icons { display: grid; gap: var(--space-6); }
.shelp-icons__group h3 { margin-bottom: var(--space-3); }
.shelp-icons__group ul { list-style: none; padding: 0; display: grid; gap: 0; border: var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.shelp-icons__group li {
  display: grid; grid-template-columns: auto 11rem minmax(0, 1fr);
  gap: var(--space-4); align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.shelp-icons__group li:last-child { border-bottom: 0; }
@media (max-width: 700px) {
  .shelp-icons__group li { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-1); }
  .shelp-icons__group li span:last-child { grid-column: 1 / -1; }
}
.shelp-icons__group li strong { color: var(--color-text); font-weight: var(--weight-medium); }
.shelp-icon {
  display: inline-grid; place-items: center;
  width: var(--space-6); height: var(--space-6);
  border: var(--border-hairline); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-secondary);
}
.shelp-icon svg { width: 14px; height: 14px; }   /* the panel draws its icons at 14px; same here */
.shelp-icon--glyph { font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; padding: 0 var(--space-2); width: auto; }

/* ---- the print/PDF layout: light, single column, no site chrome ---- */
.shelp-print-foot { display: none; }
@media print {
  .site-header, .site-footer, .page-fx, .help-toc, .shelp-map__pts { display: none !important; }
  body { background: #fff; }
  main, .band { background: #fff !important; color: #14181D; }
  .page-title, .help-sec__title, .help-sec h3, .shelp-answer, .faq__q { color: #14181D !important; }
  .page-lead, .help-sec p, .help-sec li, .help-table td, .shelp-fig figcaption, .shelp-icons__group li { color: #3a3f46 !important; }
  .help-sec strong, .shelp-icons__group li strong, .help-table td:first-child { color: #14181D !important; }
  .help-layout { grid-template-columns: 1fr; }
  .shelp-body .help-sec { grid-template-columns: 1fr; }
  .shelp-maprow { grid-template-columns: 1fr; }
  .help-sec { break-inside: avoid-page; }
  .shelp-icons__group { break-inside: avoid-page; }
  .shelp-icon { color: #3a3f46; background: #F4F1EA; }
  .shelp-print-foot { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: #3a3f46; padding: var(--space-5); }
  a { color: #14181D; text-decoration: none; }
}