/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: block;
}

.report {
  margin: 0;
  background: var(--elvaio-color-card);
  border: 2px solid var(--elvaio-color-text);
  border-radius: var(--elvaio-radius-card);
  box-shadow: var(--elvaio-shadow-float);
  overflow: hidden;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--elvaio-space-03);
  padding: var(--elvaio-space-03) var(--elvaio-space-05);
  border-bottom: 2px solid var(--elvaio-color-text);
  font-family: var(--elvaio-font-mono);
  font-size: var(--elvaio-font-size-label);
  letter-spacing: var(--elvaio-letter-spacing-label);
  text-transform: uppercase;
}

.head:empty {
  display: none;
}

.meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--elvaio-color-border-decorative);
}

.meta-row:empty {
  display: none;
}

.meta-row ::slotted(*) {
  display: flex;
  flex-direction: column;
  gap: var(--elvaio-space-01);
  padding: var(--elvaio-space-03) var(--elvaio-space-05);
  border-left: 1px solid var(--elvaio-color-border-decorative);
}

/* `::slotted()` only accepts a compound selector, not a sibling combinator
   (`* + *` isn't valid here) — give every slotted child the divider, then
   remove it from the first. `:first-child` on a slotted node resolves
   against its original light-DOM position, which is spec'd to work. */
.meta-row ::slotted(:first-child) {
  border-left: 0;
}

.meta-row ::slotted(b) {
  display: block;
  font-family: var(--elvaio-font-body);
  font-weight: var(--elvaio-font-weight-button);
  font-size: var(--elvaio-font-size-body);
}

.rows ::slotted(*) {
  display: block;
}

.distribution {
  display: flex;
  gap: var(--elvaio-space-01);
  height: 0.625rem;
  margin-bottom: var(--elvaio-space-03);
}

.distribution span {
  border-radius: var(--elvaio-radius-pill);
}

.distribution .danger {
  background: var(--elvaio-color-tone-danger);
}

.distribution .warning {
  background: var(--elvaio-color-tone-warning);
}

.distribution .info {
  background: var(--elvaio-color-tone-info);
}

.distribution .success {
  background: var(--elvaio-color-tone-success);
}

/* Rendered at all (see `report.ts`'s `hasNote`) only when there's real
   content — either the distribution bar or an assigned note node — so a
   report with neither (e.g. the AI-trainingen hero's) carries no dead
   space under its last row. Not a CSS `:has()` check: `::slotted()` inside
   `:has()`'s argument is invalid and silently drops the whole rule, which
   is why this used to render with zero padding regardless. */
.note {
  margin: 0;
  padding: var(--elvaio-space-04) var(--elvaio-space-05) var(--elvaio-space-05);
  color: var(--elvaio-color-text-muted);
  font-size: var(--elvaio-font-size-small);
}