/* About box (Phase 7.5). Colours from theme tokens only. */
dialog.about-dialog {
  width: min(24rem, calc(100vw - 2rem)); padding: 1.75rem 1.5rem 1.25rem; text-align: center;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--elev-2);
}
dialog.about-dialog[open] { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
dialog.about-dialog::backdrop { background: rgb(8 20 24 / 0.55); }
.about-tile { padding: 8px; border-radius: 20px; }
.about-logo { display: block; width: 96px; height: 96px; }
.about-title { margin: 0.8rem 0 0; font-size: 2.2rem; line-height: 1.1; }
.about-title:focus { outline: none; }
.about-tagline { margin: 0; color: var(--accent); font-size: 1rem; }
.about-version { margin: 0.9rem 0 0; font-weight: 700; }
.about-copyright { margin: 0.2rem 0 0; }
.about-link { color: inherit; text-decoration: none; border-radius: 3px; }
.about-link:hover, .about-link:focus-visible { color: var(--accent); text-decoration: underline; }
.about-note { margin: 0.9rem 0 1rem; color: var(--muted); font-size: 0.85rem; }
.about-pro { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-md, 8px); font-size: 0.85rem; text-align: left; }

/* Help and feedback dialog (Phase 9.39) */
dialog.help-dialog { width: min(34rem, calc(100vw - 2rem)); padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--elev-2); }
dialog.help-dialog::backdrop { background: rgb(8 20 24 / 0.55); }
.help-title { margin: 0 0 0.9rem; font-size: 1.3rem; }
.help-title:focus { outline: none; }
.help-cards { display: grid; gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.help-card { display: flex; gap: 0.8rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.help-card[hidden] { display: none; }
.help-card-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--hover); color: var(--accent); }
.help-card-icon .icon { width: var(--icon-md); height: var(--icon-md); }
.help-card-title { margin: 0; font-size: 1rem; }
.help-card-body .detail-sub { margin: 0.15rem 0 0.5rem; }
.help-card-link { text-decoration: none; color: var(--accent); }
.help-include { margin: 0.2rem 0 0; font-weight: 600; }
.help-too-long { color: var(--sev-warn); }
dialog.help-dialog .notes-details { margin: 0.4rem 0 0.6rem; }
dialog.help-dialog .feedback-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
dialog.about-dialog [data-open-help] { margin: 0.2rem 0 0.4rem; }
.help-no-account { margin: 0 0 0.6rem; }