/* Screen-specific styles (U1 screens: Ontology, audit, lineage, data, kit).
 * U2/U3 add their own files (styles/pages-<screen>.css) and link them in
 * index.html, or keep page styles inline in components. */

/* audit */
.verify__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.verify__grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 1180px) { .verify__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbl tbody tr.is-alert td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* data: source cards */
.source-card { display: flex; flex-direction: column; min-height: 220px; }
.source-card__head { display: flex; align-items: flex-start; gap: var(--s2); justify-content: space-between; padding: var(--s3) var(--s4) var(--s2); }
.source-card__head h3 { font-size: 14px; }
.source-card__body { display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--s4) var(--s3); flex: 1 1 auto; }
.source-card__nums { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--s2); }
.source-card__nums > div { display: flex; flex-direction: column; min-width: 0; }
.source-card__nums strong { font-size: 18px; font-weight: 600; }
.source-card__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.source-card__checks li { display: flex; gap: 8px; align-items: flex-start; }
.source-card__checks li .badge { flex: none; }
.source-card__foot { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; padding: var(--s1) var(--s2) var(--s1) var(--s4); border-top: 1px solid var(--border); min-width: 0; }

/* data: resolution */
.stackbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-3); gap: 1px; }
.stackbar > span { display: block; height: 100%; min-width: 2px; }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--s4); font-size: var(--fs-sm); }
.legend-list li { display: flex; align-items: center; gap: 6px; }
.legend-list li .num { margin-left: auto; }

/* kit (component gallery) */
.kit { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.kit__toc { position: sticky; top: var(--s4); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.kit__toc a { padding: 4px var(--s2); border-radius: var(--radius-sm); color: var(--text-2); }
.kit__toc a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.kit-section { display: flex; flex-direction: column; gap: var(--s3); scroll-margin-top: var(--s4); }
.kit-section > header { display: flex; align-items: baseline; gap: var(--s3); }
.kit-section > header h2 { flex-shrink: 0; white-space: nowrap; }
.kit-section > header p { color: var(--text-3); font-size: var(--fs-sm); }
.kit-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.kit-swatch { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: var(--fs-xs); }
.kit-swatch > span:first-child { height: 40px; border-bottom: 1px solid var(--border); }
.kit-swatch > span:last-child { padding: 4px 8px; display: flex; justify-content: space-between; gap: 4px; }
.kit-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s2); }
.kit-icons > span { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.kit-type > * { margin: 0; }
@media (max-width: 1180px) { .kit { grid-template-columns: minmax(0, 1fr); } .kit__toc { display: none; } }