/* Click, keyboard and touch help; warnings and result readings stay in the page. */
.help-heading { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.help-heading > :first-child { min-width: 0; margin: 0; }
.help-heading > .help-tip { flex: 0 0 auto; }
body[data-layout] .help-tip { display: inline-block; min-width: 0; margin: 0; padding: 0; border: 0; }
body[data-layout] .help-tip[hidden] { display: none !important; }
body[data-layout] .help-tip > summary {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 32px;
  margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-secondary); background: var(--surface-1); cursor: pointer; list-style: none;
}
.help-tip > summary::-webkit-details-marker { display: none; }
.help-tip > summary::marker { content: ''; }
body[data-layout] .help-tip > summary:hover, body[data-layout] .help-tip[open] > summary { color: var(--accent); background: var(--accent-wash); border-color: var(--accent); }
.help-tip > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body[data-layout] .help-tip > .help-content {
  position: fixed; z-index: 150; box-sizing: border-box; width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  padding: var(--space-xl); margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow);
  font-size: var(--type-sm); line-height: 1.55; text-align: left; overflow-wrap: anywhere;
}
body[data-layout] .help-content > :not(button) { margin: 0; font-size: var(--type-sm); color: var(--text-primary); max-width: none; }
body[data-layout] .help-content > :not(button) + :not(button) { margin-top: var(--space-lg); }
body[data-layout] .help-content .help-close { display: block; position: sticky; top: 0; background: var(--surface-1); margin: 0 0 var(--space-lg) auto; min-height: 40px; }
body[data-layout] .workspace-head .panel-title > .help-tip { flex: 0 0 auto; }
.template-row > .help-tip { justify-self: start; }
.template-row .help-heading > button { flex: 1; }
.usage-control > .help-tip { grid-column: 1 / -1; }
@media (pointer: coarse) {
  body[data-layout] .help-tip > summary { width: 44px; min-height: 44px; }
  body[data-layout] .help-content .help-close { min-height: 44px; }
}
@media (forced-colors: active) { .help-tip > summary { border: 1px solid ButtonText; } }
@media print { body[data-layout] .help-tip { display: none !important; } }