/* Variant A: app and landing cards share freestanding topic icons.
   Navigation, data charts, status badges and book output keep their own palettes. */
:is(.app, .welcome) {
  --card-icon-teal: #20c7a7;
  --card-icon-blue: #409cff;
  --card-icon-violet: #a17aff;
  --card-icon-berry: #eb5c9c;
  --card-icon-ochre: #e2a832;
  --card-icon-people: var(--card-icon-teal);
  --card-icon-families: var(--card-icon-teal);
  --card-icon-statistics: var(--card-icon-teal);
  --card-icon-names: var(--card-icon-berry);
  --card-icon-places: var(--card-icon-blue);
  --card-icon-relationships: var(--card-icon-violet);
  --card-icon-generations: var(--card-icon-violet);
  --card-icon-timeline: var(--card-icon-violet);
  --card-icon-quality: var(--card-icon-ochre);
  --card-icon-records: var(--card-icon-violet);
  --card-icon-documents: var(--card-icon-teal);
  --card-icon-settings: var(--card-icon-teal);
}
[data-theme="light"] :is(.app, .welcome) {
  --card-icon-teal: #007f73;
  --card-icon-blue: #126fc4;
  --card-icon-violet: #7841b6;
  --card-icon-berry: #b32f78;
  --card-icon-ochre: #a57408;
}
:is(.app, .welcome) .topic-icon[data-topic="people"] { --card-icon-color: var(--card-icon-people); }
:is(.app, .welcome) .topic-icon[data-topic="families"] { --card-icon-color: var(--card-icon-families); }
:is(.app, .welcome) .topic-icon[data-topic="statistics"] { --card-icon-color: var(--card-icon-statistics); }
:is(.app, .welcome) .topic-icon[data-topic="names"] { --card-icon-color: var(--card-icon-names); }
:is(.app, .welcome) .topic-icon[data-topic="places"] { --card-icon-color: var(--card-icon-places); }
:is(.app, .welcome) .topic-icon[data-topic="relationships"] { --card-icon-color: var(--card-icon-relationships); }
:is(.app, .welcome) .topic-icon[data-topic="generations"] { --card-icon-color: var(--card-icon-generations); }
:is(.app, .welcome) .topic-icon[data-topic="timeline"] { --card-icon-color: var(--card-icon-timeline); }
:is(.app, .welcome) .topic-icon[data-topic="quality"] { --card-icon-color: var(--card-icon-quality); }
:is(.app, .welcome) .topic-icon[data-topic="records"] { --card-icon-color: var(--card-icon-records); }
:is(.app, .welcome) .topic-icon[data-topic="documents"] { --card-icon-color: var(--card-icon-documents); }
:is(.app, .welcome) .topic-icon[data-topic="settings"] { --card-icon-color: var(--card-icon-settings); }

:is(.app, .welcome) .topic-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; color: var(--card-icon-color); }
:is(.app, .welcome) .topic-icon > .ui-icon { width: 100%; height: 100%; }
:is(.app, .welcome) .card-head { flex-wrap: wrap; }
:is(.app, .welcome) .card-heading { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
:is(.app, .welcome) .card-heading-text { min-width: 0; overflow-wrap: anywhere; }
:is(.app, .welcome) .stat-label { display: flex; align-items: center; gap: 10px; padding-right: 0; }
:is(.app, .welcome) a.stat .stat-label { padding-right: 14px; }
:is(.app, .welcome) .stat-label-text { min-width: 0; overflow-wrap: anywhere; }
:is(.app, .welcome) .grid.stats.compact .stat-label { order: 1; min-height: 22px; margin-bottom: 3px; }
:is(.app, .welcome) .card-category { display: flex; align-items: center; gap: 9px; min-width: 0; font: 600 14px/1.5 var(--font); color: var(--text); }
:is(.app, .welcome) .card-category .topic-icon { width: 20px; height: 20px; flex-basis: 20px; }
:is(.app, .welcome) .card-category-label { min-width: 0; overflow-wrap: anywhere; }
:is(.app, .welcome) .chart-cap { flex-wrap: wrap; }
:is(.app, .welcome) .chart-title { flex: 1 1 160px; min-width: 0; }
:is(.app, .welcome) .nav-card .card-head { margin-bottom: 6px; }
:is(.app, .welcome) .nav-card .card-heading-text { flex: 1; margin-bottom: 0; }
:is(.app, .welcome) .compare-wrap { max-width: 100%; overflow-x: auto; }
:is(.app, .welcome) .compare-wrap:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

@media (max-width: 620px) {
  :is(.app, .welcome) .card .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  :is(.app, .welcome) .page-head > div { min-width: 0; overflow-wrap: anywhere; }
  :is(.app, .welcome) .section-head { flex-wrap: wrap; }
  :is(.app, .welcome) .section-actions { max-width: 100%; }
}