/* Optional reading stays available without crowding the working views. */
.help-details {
  margin: 12px 0;
  border-top: 1px solid #263147;
  color: #94a3b8;
  font: 400 13px/1.65 'Inter', sans-serif;
  min-width: 0;
}
.help-details > summary,
.signal-details > summary {
  min-height: 44px;
  padding: 11px 0;
  color: #cbd5e1;
  font: 500 13px/1.65 'Inter', sans-serif;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.help-details > summary::marker,
.signal-details > summary::marker { color: #94a3b8; }
.help-details > summary:hover,
.signal-details > summary:hover { color: #fff; }
.help-details > summary:focus-visible,
.signal-details > summary:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }
.help-details > :not(summary) { max-width: 85ch; }
.help-details p { margin: 0 0 10px; font-size: 13px; line-height: 1.65; }
.help-details ul { padding-left: 20px; margin: 0 0 12px; }
.help-details .method-copy { padding: 0 0 12px; background: transparent; }
.help-details .explain { margin: 0 0 12px; }
.help-details .explain > div { min-width: 0; }
.help-details .method-grid { margin-top: 8px; }
.signal-details > summary {
  position: relative;
  padding: 0 0 0 18px;
  color: inherit;
  list-style: none;
}
.signal-details > summary::-webkit-details-marker { display: none; }
.signal-details > summary::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 1px;
  font: 600 20px/1 'Inter', sans-serif;
  color: #94a3b8;
}
.signal-details[open] > summary::before { transform: rotate(90deg); }
.signal-details > summary strong { font: inherit; font-weight: 600; }
.signals .signal-details .sev { float: none; display: block; margin: 0 0 4px; }
.signal-details > p { margin: 10px 0 0; }
.help-details .small { font-size: 12px; }
@media (max-width: 640px) {
  .help-details { margin: 10px 0; }
}