/* Help keeps a larger reading scale than the compact operational tables. */
.sidebar-help { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; margin-top: auto; border-radius: 26px; font-weight: 500; color: var(--md-on-surface-variant); }
.sidebar-help svg { flex: 0 0 22px; }
.sidebar-help:hover { background: var(--md-surface-container-high); }
.sidebar-help.active { background: var(--md-secondary-container); color: var(--md-on-primary-container); font-weight: 700; }
.sidebar:has(.sidebar-help) .nav { margin-bottom: 16px; }
.sidebar-help + .sidebar-caption { margin-top: 0; padding-top: 12px; }
.help-page { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--md-outline-variant); border-radius: 16px; background: var(--md-surface); }
.help-content { width: 100%; max-width: 1160px; margin: 0 auto; padding: 32px 32px 48px; font-size: 17px; line-height: 1.6; }
.help-content p { margin: 0; }
.help-content .help-eyebrow { margin-bottom: 8px; color: var(--md-primary); font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.help-intro { margin-bottom: 28px; }
.help-intro h2, .help-missing h2 { margin: 0 0 12px; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.5px; font-weight: 600; }
/* Route focus announces the heading; it is not an interactive control. */
#help-heading:focus { outline: none; }
.help-intro > p:last-of-type { max-width: 780px; color: var(--md-on-surface-variant); }
.help-overview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.help-overview span { border-radius: 20px; padding: 5px 12px; background: var(--md-surface-container-low); font-size: 13px; color: var(--md-on-surface-variant); }
.help-cards { display: grid; gap: 28px; }
.help-card { overflow: hidden; border: 1px solid var(--md-outline-variant); border-radius: 16px; background: #fff; }
.help-card > header { padding: 24px 24px 20px; }
.help-card h3 { margin: 0 0 8px; font-size: 23px; font-weight: 600; line-height: 1.25; }
.help-card h3 a { color: var(--md-on-primary-container); }
.help-card h3 a:hover, .help-back:hover, .help-pager-center a:hover { text-decoration: underline; text-underline-offset: 3px; }
.help-card > header > p:last-child { font-size: 16px; color: var(--md-on-surface-variant); }
.help-card-image { display: block; margin: 0 16px; border-radius: 8px; overflow: hidden; }
.help-card-image:focus-visible { outline-offset: -3px; }
.help-card-image img, .help-enlarge img { display: block; width: 100%; height: auto; }
.help-card-image:hover img { opacity: .94; }
.help-card-bottom { display: flex; justify-content: flex-end; padding: 10px 24px; }
.help-card-bottom a, .help-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; }
.help-back { margin-bottom: 16px; }
.help-figure { margin: 0 0 36px; }
.help-enlarge { display: block; width: 100%; padding: 0; min-height: 0; overflow: hidden; border-radius: 12px; cursor: zoom-in; border: 1px solid var(--md-outline-variant); background: #fff; }
.help-enlarge:hover { background: #fff; box-shadow: 0 2px 12px rgb(24 32 43 / 12%); }
.help-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--md-on-surface-variant); text-align: center; }
.help-instructions { max-width: 800px; margin: 0 auto; }
.help-instructions > h3 { font-size: 23px; margin: 0 0 24px; font-weight: 600; }
.help-steps { margin: 0; padding: 0; list-style: none; }
.help-steps > li { display: flex; gap: 20px; margin-bottom: 28px; }
.help-step-number { display: grid; place-items: center; align-self: flex-start; flex: 0 0 44px; height: 44px; border-radius: 50%; background: #dcefe7; color: #204e40; font-size: 19px; font-weight: 700; }
.help-steps h4 { font-size: 19px; line-height: 1.4; margin: 7px 0 10px; font-weight: 600; }
.help-step-note { margin-top: 14px !important; padding: 12px 16px; border-left: 3px solid var(--md-primary); background: var(--md-surface-container-low); font-size: 15px; }
.help-check, .help-tip { border-radius: 12px; padding: 22px 24px; margin-top: 24px; }
.help-check { background: #eaf5ef; border: 1px solid #c9e3d5; }
.help-tip { background: var(--md-surface-container-low); }
.help-check h3, .help-tip h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.help-finish { margin-top: 28px !important; color: var(--md-primary); }
.help-image-error { padding: 16px; background: var(--md-surface-container-low); color: var(--md-on-surface-variant); font-size: 15px; }
.help-pagination { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid var(--md-outline-variant); border-radius: 22px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.help-button:hover { background: var(--md-primary-container); }
.help-button-primary { background: var(--md-primary); color: #fff; border-color: transparent; }
.help-button-primary:hover { background: #205394; }
.help-pager-side { flex: 1; display: flex; }
.help-pager-end { justify-content: flex-end; }
.help-pager-center { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.help-pager-center a { display: inline-flex; align-items: center; min-height: 44px; }
.help-pager-center span, .help-index-count { color: var(--md-on-surface-variant); font-size: 13px; }
.help-missing .help-button { margin-top: 24px; }
dialog.help-image-dialog { width: calc(100vw - 48px); max-width: 1840px; height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); padding: 0; border-radius: 20px; overflow: hidden; }
.help-image-dialog[open] { display: flex; flex-direction: column; }
.help-image-dialog > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--md-outline-variant); }
.help-image-dialog h2 { margin: 0; font-size: 20px; font-weight: 600; }
.help-image-tools { display: flex; flex: 0 0 auto; gap: 10px; }
.help-image-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #eff3f5; }
.help-image-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.help-image-dialog.is-zoomed .help-image-stage img { width: max(1774px, 150%); height: auto; max-width: none; }
.help-image-dialog > p { flex: 0 0 auto; margin: 0; padding: 10px 20px; font-size: 13px; color: var(--md-on-surface-variant); }
@media (max-width: 760px) {
  .sidebar:has(.sidebar-help) { flex-direction: row; align-items: center; gap: 6px; }
  .sidebar:has(.sidebar-help) .nav { flex: 1; min-width: 0; margin: 0; }
  .sidebar-help { min-height: 44px; margin: 0; padding: 0 12px; gap: 8px; }
  .sidebar-help svg { width: 20px; height: 20px; flex-basis: 20px; }
  .help-content { padding: 24px 16px 32px; font-size: 16px; }
  .help-intro { margin-bottom: 24px; }
  .help-card > header { padding: 18px 16px 12px; }
  .help-card h3 { font-size: 21px; }
  .help-card-image { margin: 0 4px; }
  .help-card-bottom { padding: 8px 16px; }
  .help-steps > li { gap: 12px; }
  .help-step-number { flex-basis: 34px; height: 34px; font-size: 16px; }
  .help-steps h4 { font-size: 18px; margin-top: 3px; }
  .help-step-note { padding: 10px 12px; }
  .help-check, .help-tip { padding: 18px; }
  .help-pagination { gap: 8px; }
  .help-pager-center { flex-direction: column; gap: 0; line-height: 1.2; }
  .help-pager-center a { min-height: 26px; }
  .help-pagination .help-button, .help-pagination button { padding: 0 10px; min-height: 40px; font-size: 13px; gap: 4px; }
  .help-pagination svg { width: 17px; height: 17px; }
  .help-index-count { max-width: 90px; }
  dialog.help-image-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .help-image-dialog > header { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .help-image-dialog h2 { width: 100%; font-size: 18px; }
  .help-image-tools { width: 100%; justify-content: space-between; }
  .help-image-dialog > p { padding: 10px 12px; }
}