/* Detail dashboard accessibility layer.
   Meaning must be visible through labels, symbols, shape, and position;
   color is only a secondary cue. */

.data-detail__surface::before {
  opacity: 0.07;
}

.data-detail__brief,
.data-detail__finding,
.data-detail__quality,
.data-detail__summary-card,
.data-detail__chart,
.data-detail__actions > header,
.data-detail__action,
.data-detail__tables,
.data-detail__section {
  background:
    linear-gradient(180deg, var(--alpha-navy-033178-98), var(--alpha-deep-011541-78));
  border-color: var(--alpha-blue-42165255-24);
  box-shadow:
    inset 0 0 0 1px var(--alpha-white-035),
    0 0 0.65rem var(--alpha-blue-00119255-08);
}

.data-detail__finding {
  border-top: 0;
  border-left: 0.28rem solid var(--detail-tone);
}

.data-detail__summary-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-left: 0.28rem solid var(--detail-tone);
}

.data-detail__summary-card::before,
.data-detail__summary-card::after,
.data-detail__chart::before {
  display: none;
}

.data-detail__summary-icon,
.data-detail__chart header i,
.data-detail__brief-icon {
  color: var(--color-text);
  background: var(--alpha-deep-011234-18);
  border-color: var(--alpha-blue-42165255-30);
  box-shadow: none;
}

.data-detail__finding strong,
.data-detail__summary-card strong,
.data-detail__chart header strong {
  color: var(--color-text);
  text-shadow: none;
}

.data-detail__status {
  --detail-tone: var(--color-blue);
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: var(--space-1);
  padding: 0.14rem 0.44rem;
  color: var(--color-text);
  font-size: var(--text-2xs);
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--detail-tone) 16%, transparent), var(--alpha-deep-011234-18));
  border: 1px solid color-mix(in srgb, var(--detail-tone) 62%, var(--color-border-soft));
  box-shadow: inset 0 0 0 1px var(--alpha-white-035);
}

.data-detail__status b {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  color: var(--alpha-deep-00724-100);
  font-size: var(--text-2xs);
  font-weight: 900;
  line-height: 1;
  background: var(--detail-tone);
}

.data-detail__legend {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-detail__legend .data-detail__status {
  width: 100%;
  min-height: 2rem;
}

.data-detail__summary-card > .data-detail__status {
  justify-self: end;
}

.data-detail__summary-card mark {
  color: var(--color-text);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--detail-tone) 34%, transparent) 0 0.24rem, transparent 0.24rem 0.48rem),
    var(--alpha-deep-011234-18);
  border: 1px solid color-mix(in srgb, var(--detail-tone) 48%, var(--color-border-soft));
}

.data-detail__finding sup,
.data-detail__summary-card sup {
  color: var(--alpha-deep-00724-100);
  background: var(--color-yellow);
  border: 1px solid var(--color-text);
  border-radius: 0;
  box-shadow: none;
}