/* Every value points at a --brand- token from theme-myocd.css, so the dark register (a separate palette, not an inversion)
 * stays correct without a second copy of anything. */

/* The packaged Tailwind stylesheet is built from an explicit safelist and ships no sr-only, so the application carries its own. */
.ob-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ob-label {
  display: block;
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-xs);
  line-height: var(--brand-leading-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink-faint);
}

.ob-note {
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-sm);
  line-height: var(--brand-leading-ui);
  color: var(--brand-ink-faint);
}

.ob-caption {
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-sm);
  line-height: var(--brand-leading-ui);
  color: var(--brand-ink-soft);
  margin: 0;
  max-width: 62ch;
}

/* Never a zero or an empty meter for an unrecorded value (docs/adr/0006-absent-is-not-zero.md). */
.ob-none {
  color: var(--brand-ink-faint);
}

.ob-empty {
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-sm);
  line-height: var(--brand-leading-read);
  color: var(--brand-ink-faint);
  max-width: 58ch;
  margin: 0;
}

/* The stylesheet's `.card-body p { flex-grow: 1 }` pushes a list below a caption down to the foot of a card beside a longer one.
 * A caption or an empty-state line never grows. */
.card-body > .ob-caption,
.card-body > .ob-empty {
  flex-grow: 0;
}

.ob-entry > .ob-label {
  margin-bottom: var(--brand-space-2);
}

/* <c-chart>'s figure is found by its data-mvp-chart attribute rather than a class, because a packaged component's class list is the package's to change. */

[data-mvp-chart] {
  min-width: 0;
}

[data-mvp-chart] > figcaption {
  margin-block-start: var(--brand-space-2);
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-sm);
  line-height: var(--brand-leading-ui);
  color: var(--brand-ink-faint);
}

/* The box itself is <c-placeholder.card> from django-mvp; this class only names it for the layout rules below. */
.ob-chart-empty {
  font-size: var(--brand-text-sm);
  color: var(--brand-ink-faint);
}

/* DaisyUI's single 0.5rem gap makes a card title read as part of the block below it, so the heading gets a wider gap.
 * Done here rather than by forking django-mvp's card template (CONSTITUTION.md Article XVII). */

.card-body {
  gap: var(--brand-space-3);
}

.card-body > :has(> .card-title) {
  margin-block-end: var(--brand-space-2);
}

/* A label that wraps in one column must not push that column's chart out of line with its neighbour's. */

.ob-pair {
  display: flex;
  flex-direction: column;
  gap: var(--brand-space-2);
}

.ob-pair > [data-mvp-chart],
.ob-pair > .ob-chart-empty {
  margin-block-start: auto;
}

/* The dial closes its card with a rule and a clear gap: it is a different kind of statement from the dates and counts above it. */

.ob-impact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-space-3);
  margin-block-start: var(--brand-space-5);
  padding-block-start: var(--brand-space-5);
  border-block-start: 1px solid var(--brand-line);
}

/* The border is the disc's own colour, not a second one: daisyUI draws the arc inside the padding box,
 * so a contrasting border reads as a ring around a ring. */
.ob-impact__dial {
  --size: 7.5rem;
  --thickness: 0.625rem;
  color: var(--brand-level-5);
  background-color: var(--brand-ink-blue-tint);
  border: 4px solid var(--brand-ink-blue-tint);
}

.ob-impact__dial--1 { --value: 20; }
.ob-impact__dial--2 { --value: 40; }
.ob-impact__dial--3 { --value: 60; }
.ob-impact__dial--4 { --value: 80; }
.ob-impact__dial--5 { --value: 100; }

.ob-impact__dial-value {
  padding-inline: var(--brand-space-3);
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-lg);
  line-height: var(--brand-leading-tight);
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  color: var(--brand-on-ink-blue-tint);
}

.ob-impact__caption {
  margin: 0;
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink-faint);
}

.ob-impact__sentence {
  margin: 0;
  max-width: 28ch;
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-base);
  line-height: var(--brand-leading-read);
  text-align: center;
  text-wrap: balance;
  color: var(--brand-ink-soft);
}

.ob-impact__link {
  font-family: var(--brand-font-ui);
  font-size: var(--brand-text-sm);
  color: var(--brand-ink-blue-text);
}