.contextual-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: .55rem .75rem;
  color: var(--primary-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-raised);
  box-shadow: none;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: none;
}

.contextual-help-trigger:hover { color: var(--primary-deep); background: var(--surface-muted); }
.contextual-help-trigger:focus-visible,
.contextual-help-close-icon:focus-visible { outline: 4px solid var(--tertiary); outline-offset: 3px; }
.contextual-help-trigger .nav-icon,
.contextual-help-close .nav-icon { width: 1.15rem; height: 1.15rem; box-shadow: none; }
.contextual-help-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }

.contextual-help-dialog {
  width: min(calc(100vw - 2rem), 560px);
  max-height: min(80vh, 760px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 28%, transparent);
}

.contextual-help-dialog::backdrop { background: var(--ink); opacity: .68; backdrop-filter: blur(3px); }
.contextual-help-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.contextual-help-dialog-header .eyebrow { margin-bottom: .3rem; }
.contextual-help-dialog-header h2 { margin: 0; font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; line-height: .94; text-transform: uppercase; }
.contextual-help-close-icon {
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-raised);
  box-shadow: none;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}
.contextual-help-close-icon:hover { color: var(--ink); background: var(--surface-muted); }

.contextual-help-dialog-content { padding: 1.25rem 1.5rem 1.5rem; }
.contextual-help-topic { display: grid; gap: 1rem; }
.contextual-help-topic-section { min-width: 0; }
.contextual-help-topic-section h3 { margin: 0 0 .35rem; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .78rem; font-weight: 900; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.contextual-help-topic-section p,
.contextual-help-topic-section li { color: var(--muted); line-height: 1.5; }
.contextual-help-topic-section p { margin: 0; }
.contextual-help-topic-section ul,
.contextual-help-topic-section ol { display: grid; gap: .45rem; margin: 0; padding-left: 1.3rem; }
.contextual-help-topic-section li::marker { color: var(--primary); font-weight: 900; }
.contextual-help-effect { padding: 1rem; border-left: 5px solid var(--tertiary); background: var(--info-container); }
.contextual-help-effect p { color: var(--ink); }
.contextual-help-warning { padding: 1rem; border-left: 5px solid var(--secondary); background: var(--warning-container); }
.contextual-help-warning p,
.contextual-help-warning li { color: var(--warning); }
.contextual-help-next-task { padding-top: 1rem; border-top: 1px solid var(--line); }
.contextual-help-dialog-footer { display: flex; justify-content: flex-end; padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.contextual-help-close { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 132px; min-height: 44px; margin: 0; }

@media (max-width: 640px) {
  .contextual-help-trigger { width: 44px; padding: .55rem; }
  .contextual-help-trigger-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .contextual-help-dialog[open] { width: calc(100% - .7rem); max-width: none; max-height: min(78vh, 720px); margin: auto .35rem calc(70px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .contextual-help-dialog-header { padding: 1.15rem 1rem .85rem; }
  .contextual-help-dialog-content { padding: 1rem; }
  .contextual-help-dialog-footer { padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom)); }
  .contextual-help-close { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .contextual-help-dialog { scroll-behavior: auto; }
}