/*
 * Absolute Autonomy design DNA - help layer styles (DNA_STANDARD.md H1-H4).
 * Shared by the React kit (Help.tsx) and the web kit (aa-help.js). Uses --aa-* variables from
 * design-dna/dna.css only: load dna.css first. Do not restyle per app; fix it here.
 */

/* H1 field help */
.aa-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--aa-space-1, 4px);
  margin-top: var(--aa-space-1, 4px);
  font-size: var(--aa-text-body-xs-size, 12px);
  line-height: var(--aa-text-body-xs-line, 1.4);
  font-weight: 400;
  color: var(--aa-text-muted);
}
.aa-hint-icon,
.aa-guide-icon,
.aa-help-button-icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--aa-accent-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aa-hint-icon { margin-top: 1px; }
.aa-guide-icon, .aa-help-button-icon { width: 16px; height: 16px; }

/* H2 screen guide */
.aa-guide {
  margin: 0 0 var(--aa-space-4, 16px);
  padding: var(--aa-space-3, 12px) var(--aa-space-4, 16px);
  border: 1px solid var(--aa-line-glass-card);
  border-radius: var(--aa-radius-2xl, 16px);
  background: var(--aa-surface-glass-card);
  box-shadow: var(--aa-shadow-card);
  color: var(--aa-text-body);
  font-size: var(--aa-text-body-size, 14px);
}
.aa-guide > summary {
  display: flex;
  align-items: center;
  gap: var(--aa-space-2, 8px);
  cursor: pointer;
  font-weight: 600;
  color: var(--aa-text-heading);
  list-style: none;
}
.aa-guide > summary::-webkit-details-marker { display: none; }
.aa-guide > summary:focus-visible,
.aa-help-topic > summary:focus-visible,
.aa-help-button:focus-visible,
.aa-link:focus-visible,
.aa-icon-button:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 2px;
  border-radius: var(--aa-radius-md, 6px);
}
.aa-guide-body { margin-top: var(--aa-space-3, 12px); }
.aa-guide-body ol { margin: var(--aa-space-2, 8px) 0 0; padding-left: 1.25rem; display: grid; gap: 6px; list-style: decimal; /* survives Tailwind/normalize resets */ }
.aa-guide-summary { margin: 0; color: var(--aa-text-secondary); }
.aa-guide-more { margin: var(--aa-space-3, 12px) 0 0; }

.aa-key {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 6px;
  margin-left: auto;
  border: 1px solid var(--aa-line-control);
  border-radius: var(--aa-radius-sm, 4px);
  background: var(--aa-surface-chip);
  color: var(--aa-text-muted);
  font: 600 11px/1.6 var(--aa-font-mono, monospace);
  text-align: center;
}

.aa-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aa-accent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* H4 help entry */
.aa-help-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--aa-line-control);
  border-radius: var(--aa-radius-full, 9999px);
  background: var(--aa-surface-control);
  color: var(--aa-text-strong);
  font: 600 13px/1.2 var(--aa-font-sans, system-ui);
  cursor: pointer;
}
.aa-help-button:hover { background: var(--aa-surface-row-hover); }

/* H4 help centre */
.aa-help-centre {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0 var(--aa-space-6, 24px) var(--aa-space-6, 24px);
  border: 1px solid var(--aa-line-glass-panel);
  border-radius: var(--aa-radius-2xl-clay, 28px);
  background: var(--aa-surface-panel);
  box-shadow: var(--aa-shadow-panel);
  color: var(--aa-text-body);
  font-family: var(--aa-font-sans, system-ui);
  overflow: auto;
}
.aa-help-centre::backdrop { background: rgba(15, 23, 42, 0.35); }
.aa-help-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--aa-space-5, 20px) 0 var(--aa-space-3, 12px);
  background: var(--aa-surface-panel);
}
.aa-help-head h2 { margin: 0; color: var(--aa-text-heading); font-size: 22px; font-weight: 800; }
.aa-icon-button {
  width: 32px; height: 32px;
  border: 1px solid var(--aa-line-control);
  border-radius: var(--aa-radius-full, 9999px);
  background: var(--aa-surface-control);
  color: var(--aa-text-strong);
  cursor: pointer;
}
.aa-help-search { display: grid; gap: 4px; max-width: 520px; font-weight: 600; color: var(--aa-text-strong); }
.aa-help-search input {
  padding: 8px 12px;
  border: 1px solid var(--aa-line-control);
  border-radius: var(--aa-radius-lg, 8px);
  background: var(--aa-surface-control);
  color: var(--aa-text-body);
  font: inherit;
  font-weight: 400;
}
.aa-help-count, .aa-help-empty { margin: var(--aa-space-2, 8px) 0; color: var(--aa-text-muted); font-size: 13px; }
.aa-help-area { margin-top: var(--aa-space-5, 20px); }
.aa-help-area h3 { margin: 0 0 var(--aa-space-2, 8px); color: var(--aa-text-heading); font-size: 15px; font-weight: 700; }
.aa-help-topic { padding: var(--aa-space-2, 8px) 0; border-top: 1px solid var(--aa-line-subtle); scroll-margin-top: 76px; /* clear the sticky header */ }
.aa-help-topic > summary { cursor: pointer; font-weight: 600; color: var(--aa-text-strong); }
.aa-help-glossary { margin: 0; display: grid; gap: var(--aa-space-2, 8px); }
.aa-help-glossary > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--aa-space-3, 12px); }
.aa-help-glossary dt { font-weight: 600; color: var(--aa-text-strong); }
.aa-help-glossary dd { margin: 0; color: var(--aa-text-secondary); }
.aa-help-foot { margin-top: var(--aa-space-6, 24px); padding-top: var(--aa-space-3, 12px); border-top: 1px solid var(--aa-line-subtle); }

/* H6 explained states */
.aa-empty-state, .aa-error-state {
  padding: var(--aa-space-5, 20px);
  border-radius: var(--aa-radius-xl, 12px);
  background: var(--aa-surface-inset);
  color: var(--aa-text-secondary);
}
.aa-error-state { background: var(--aa-danger-tint); color: var(--aa-danger-text); }

@media (max-width: 560px) {
  .aa-help-glossary > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .aa-help-button, .aa-link { transition: background-color 120ms ease, color 120ms ease; }
}