/* Overview — only what app.css does not already provide. Tokens only; no colours of its own. */

/* The year-end projection sits beside the hero as supporting text. It is kept far smaller than
   .hero-value on purpose: the screen has one hero figure. */
.hero-side.ov-outlook { align-self: stretch; align-content: end; padding-left: 24px; border-left: 1px solid var(--hairline); }
.ov-proj { font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.ov-proj strong { font-weight: 600; }
.ov-note { font-size: 12.5px; color: var(--ink-2); max-width: 64ch; }
.ov-lead .ov-note, .card > .ov-note { margin-top: 8px; }

/* A two-column tile on a phone is about 130px wide inside; a change with its label must be
   allowed to wrap there rather than push the page sideways. */
.ov-tiles .delta, .ov-co-cmp .delta { white-space: normal; }
/* A label that wraps there ("Paid to reps and crews") would otherwise shrink the round hint
   beside it into an oval: it is a flex item with nothing holding its width. */
.ov-tiles .tile-hint { flex: none; }

/* company cards */
.ov-co-name { min-width: 0; }
.ov-co-fig { min-width: 0; }
.ov-co-cmp { margin-top: 5px; min-height: 18px; font-size: 12.5px; color: var(--ink-2); }
.ov-co-quiet { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-2); }
.ov-spark { flex: none; line-height: 0; }

/* an insight is a link on this screen */
a.insight:hover { border-color: var(--axis); }
.ov-tag { display: inline-flex; align-items: center; gap: 6px; }
.ov-tag .nav-dot { margin: 0; }

@media (max-width: 860px) {
  .hero-side.ov-outlook { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--hairline); }
}
@media (prefers-reduced-motion: no-preference) {
  a.insight { transition: border-color 120ms var(--ease); }
}

.ov-foot-note { margin-bottom: 6px; }