/**
 * EONA-X ontology styles — the rendering contract for `OntoBadge` and
 * `OntoAnnotation`, the two presentational components of the former ontology
 * tier.
 *
 * The browser's own classes (.onto-iri, .term-ref, .term-header, .term-card,
 * .onto-section, .ontology-selector, .ontology-browser) left this file with the
 * stateful components they style, and now live in eona-vocabulary-ui, their
 * only consumer. Originating commit: 8c37e76 ("feat: add the interactive
 * ontology tier, theming, and a PatternFly skin").
 *
 * Kept as its own stylesheet rather than folded into components.css: three
 * repositories write this file out by name (the portal's crates/site/src/main.rs,
 * eona-vocabulary-ui's build.rs, and assets/demo-shell.html links it), and the
 * split is the Rust split — src/lib.rs keeps ONTOLOGY_CSS for the same reason it
 * keeps src/ontology.rs.
 *
 * Every custom property here resolves against tokens.css. The app's own
 * shadcn-style generic names (--card, --foreground, --muted-foreground,
 * --border, --accent, --ring, --radius, --chart-N) were re-pointed onto the
 * charter's semantic layer (--eona-surface-*, --eona-text-*, --eona-border-*,
 * --eona-accent) on the way in. That is deliberate: those generic names would
 * collide with whatever a host already calls its own --accent, which is exactly
 * the class of bug that had the vocabulary UI's --eona-font-family quietly
 * replacing the charter's Poppins with Manrope.
 *
 * Because it reads the semantic layer rather than the raw palette, this
 * stylesheet follows `data-theme` automatically — see tokens.css.
 *
 * The badge variant colours map term kinds onto charter hues:
 *   class -> Action Blue      object property   -> Lavender Deep
 *   datatype property -> Royal Blue             annotation property -> Lavender
 *   named individual -> Success Green           deprecated -> Error Red
 */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: calc(var(--eona-radius-sm) * 0.5);
    border: 1px solid;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.badge--class {
    color: var(--eona-blue-action);
    border-color: var(--eona-blue-action);
}

.badge--object-property {
    color: var(--eona-lavender-deep);
    border-color: var(--eona-lavender-deep);
}

.badge--datatype-property {
    color: var(--eona-success);
    border-color: var(--eona-success);
}

.badge--annotation-property {
    color: var(--eona-lavender);
    border-color: var(--eona-lavender);
}

.badge--property {
    color: var(--eona-lavender-deep);
    border-color: var(--eona-lavender-deep);
}

.badge--named-individual {
    color: var(--eona-blue-royal);
    border-color: var(--eona-blue-royal);
}

.badge--ontology {
    color: var(--eona-accent);
    border-color: var(--eona-accent);
}

.badge--default {
    color: var(--eona-text-muted);
    border-color: var(--eona-border-subtle);
}

.badge--deprecated {
    color: var(--eona-error);
    border-color: var(--eona-error);
}

.annotation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

@media (min-width: 640px) {
  .annotation {
        grid-template-columns: 10rem 1fr;
        gap: 1rem;
    }
}

.annotation__label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--eona-text-muted);
}

.annotation__values {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.annotation__row {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--eona-text-primary);
}

.annotation__text {
    white-space: pre-line;
}

.annotation__row .badge {
    margin-left: 0.375rem;
    vertical-align: middle;
}