/* Help / About modal (assets/js/info.js). Uses the host page's tokens when present
 * (app.css, incl. dark mode) and falls back to light values (report page). */
.info-dlg {
  --i-bg: var(--bg, #f5f3ee); --i-surface: var(--surface, #fff); --i-surface-2: var(--surface-2, #f8f7f3);
  --i-ink: var(--ink, #1b1a18); --i-ink-2: var(--ink-2, #4f4c46); --i-ink-3: var(--ink-3, #8a867e);
  --i-line: var(--line, #e2ded5); --i-line-2: var(--line-2, #cfc9bd);
  --i-accent: var(--accent, var(--acc, #a8432b)); --i-accent-ink: var(--accent-ink, #fff);
  --i-sans: var(--sans, "IBM Plex Sans", system-ui, sans-serif); --i-mono: var(--mono, "IBM Plex Mono", Menlo, monospace);
  border: 0; padding: 0; background: transparent; color: var(--i-ink); font: 14px/1.5 var(--i-sans);
  width: min(760px, calc(100vw - 24px)); max-width: none; max-height: none; overflow: visible;
}
.info-dlg::backdrop { background: rgba(20, 18, 14, .42); backdrop-filter: blur(2px); }
.info-dlg[open] { animation: info-in .18s ease-out; }
.info-dlg[open]::backdrop { animation: info-fade .18s ease-out; }
.info-dlg.closing { animation: info-out .14s ease-in forwards; }
@keyframes info-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes info-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes info-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .info-dlg[open], .info-dlg.closing, .info-dlg::backdrop { animation: none !important; } }

.info-card { max-height: min(820px, calc(100vh - 48px)); display: flex; flex-direction: column; background: var(--i-bg); border: 1px solid var(--i-line); border-radius: 16px; box-shadow: 0 20px 60px rgba(20, 15, 5, .28); overflow: hidden; }
.info-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; background: var(--i-surface); border-bottom: 1px solid var(--i-line); }
.info-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.info-brand b { display: block; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.info-brand small { display: block; font-size: 11px; color: var(--i-ink-3); line-height: 1.2; }
.info-mark { width: 24px; height: 24px; border-radius: 6px; flex: none; background: conic-gradient(from 200deg, #d32b2b, #ef8a1d, #e3d12a, #2fb34f, #1aa0c8, #2846c7, #6b2fb3, #d32b2b); }
.info-tabs { display: inline-flex; background: var(--i-surface-2); border: 1px solid var(--i-line); border-radius: 9px; padding: 2px; }
.info-tabs button { border: 0; background: transparent; font: inherit; font-size: 13px; padding: 5px 14px; border-radius: 7px; cursor: pointer; color: var(--i-ink-2); }
.info-tabs button.on { background: var(--i-surface); color: var(--i-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.info-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--i-ink-2); border-radius: 8px; cursor: pointer; }
.info-x:hover { background: var(--i-surface-2); color: var(--i-ink); }
.info-dlg button:focus-visible, .info-dlg a:focus-visible { outline: 2px solid var(--i-accent); outline-offset: 2px; }
.info-body { flex: 1; overflow: auto; padding: 26px 30px 30px; overscroll-behavior: contain; outline: none; }

.info-body h1 { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px; }
.info-body .lede { font-size: 15px; color: var(--i-ink-2); margin: 0 0 20px; max-width: 60ch; }
.info-body h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--i-ink-3); font-weight: 600; margin: 28px 0 10px; scroll-margin-top: 8px; }
.info-body p, .info-body li { color: var(--i-ink-2); }
.info-body p { margin: 0 0 8px; }
.info-body ol, .info-body ul { padding-left: 20px; margin: 0; }
.info-body li { margin: 4px 0; }
.info-body b { color: var(--i-ink); font-weight: 600; }
.help-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.help-toc a { font-size: 12.5px; padding: 3px 11px; border: 1px solid var(--i-line-2); border-radius: 99px; text-decoration: none; color: var(--i-ink-2); background: var(--i-surface); }
.help-toc a:hover { color: var(--i-ink); border-color: var(--i-ink-3); }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; margin: 0; color: var(--i-ink-2); }
.keys dt, .keys dd { margin: 0; }
.keys kbd { margin: 0; display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border: 1px solid var(--i-line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--i-surface); color: var(--i-ink); font: 12px var(--i-mono); }
.tip-box { margin-top: 12px; background: var(--i-surface); border: 1px solid var(--i-line); border-left: 3px solid var(--i-accent); border-radius: 8px; padding: 9px 13px; font-size: 13.5px; color: var(--i-ink-2); }
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.feat div { background: var(--i-surface); border: 1px solid var(--i-line); border-radius: 12px; padding: 13px 15px; }
.feat b { display: block; margin-bottom: 3px; font-size: 14px; }
.feat span { color: var(--i-ink-2); font-size: 13px; }
.dev { display: flex; gap: 16px; align-items: center; background: var(--i-surface); border: 1px solid var(--i-line); border-radius: 12px; padding: 18px 20px; }
.dev .av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: conic-gradient(from 200deg, #a8432b, #e8a33d, #4b7f8f, #2c4a7a, #7a4f9a, #a8432b); }
.dev b { display: block; font-size: 16px; }
.dev small { color: var(--i-ink-3); font-size: 13px; }
.dev .grow { flex: 1; min-width: 0; }
.dev .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.info-body a.btn { display: inline-flex; align-items: center; border: 1px solid var(--i-line-2); background: var(--i-surface); color: var(--i-ink); border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.info-body a.btn:hover { border-color: var(--i-ink-3); }
.info-body a.btn.primary { background: var(--i-accent); border-color: var(--i-accent); color: var(--i-accent-ink); }
@media (max-width: 600px) {
  .info-dlg { width: calc(100vw - 16px); }
  .info-card { max-height: calc(100vh - 16px); }
  .info-head { flex-wrap: wrap; padding-left: 14px; }
  .info-brand small { display: none; }
  .info-body { padding: 20px 18px 24px; }
  .dev { flex-wrap: wrap; }
}
.privacy { display: flex; gap: 14px; align-items: flex-start; background: var(--i-surface); border: 1px solid var(--i-line); border-left: 3px solid #2f7d4f; border-radius: 12px; padding: 14px 16px; color: var(--i-ink-2); font-size: 14px; line-height: 1.5; }
.privacy-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(47, 125, 79, .12); color: #2f7d4f; }