.screen-help-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid #b8ced0;
  border-radius: 16px;
  color: #173c43;
  background: #fff;
  box-shadow: 0 20px 70px #08283440;
}
.screen-help-dialog::backdrop { background: #08283480; }
.screen-help-dialog[open] { display: flex; flex-direction: column; }
.screen-help-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #dbe5e5; }
.screen-help-toolbar h2 { margin: 0; font-size: 1.15rem; }
.screen-help-body { overflow-y: auto; padding: 20px 24px; font-size: 1.05rem; line-height: 1.7; min-height: 100px; }
.screen-help-body .section { margin: 0; padding: 0; border: 0; }
.screen-help-body h2 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 20px; }
.screen-help-body h3 { font-size: 1.15rem; line-height: 1.4; margin: 28px 0 10px; }
.screen-help-body p { margin: 0 0 16px; }
.screen-help-body li { margin-bottom: 10px; }
.screen-help-body img { max-width: 100%; height: auto; }
/* Production help should not display filenames where future pictures belong. */
.screen-help-body .screenshot-placeholder { display: none; }
.screen-help-footer { padding: 14px 24px; border-top: 1px solid #dbe5e5; }
.screen-help-dialog :focus-visible { outline: 3px solid #de8d26; outline-offset: 3px; }

/* Focused captures retain a field label or panel heading for orientation. */
.screen-help-body .help-micro-capture { margin: 18px 0 26px; border: 1px solid #c6dada; border-radius: 8px; overflow: hidden; background: #fff; }
.screen-help-body .help-micro-capture img { display: block; width: 100%; height: auto; }
.screen-help-body .help-micro-capture figcaption { padding: 10px 14px; font-size: .95rem; line-height: 1.55; background: #edf6f5; }