/* Company page. Every class is prefixed company- because all view stylesheets load together. */

/* top strip: source-system links on the left, how fresh the numbers are on the right */
.company-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.company-links { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.company-links .btn-ghost { display: inline-flex; align-items: center; white-space: nowrap; }
.company-fresh { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }

/* hero: the projection sits beside the hero figure and must stay visibly smaller than it.
   The projection column is the taller one here, so both start at the top of the card. */
.company-hero { align-items: start; }
.company-lead { min-width: 0; }
.company-lead > .company-note, .company-lead > .company-attn { margin-top: 10px; }
.company-proj { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.company-attn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-2); }
/* The kit's meter is always the accent, which is also Lighting's series colour. On a company page
   it takes that company's colour (set as --company-color on the hero), with a lighter step as its track. */
.company-hero .viz-meter-fill { background: var(--company-color, var(--accent)); }
.company-hero .viz-meter-track { background: color-mix(in srgb, var(--company-color, var(--accent)) 24%, var(--surface)); }

/* prose */
.company-note { font-size: 12.5px; color: var(--ink-2); max-width: 68ch; }
.company-para { font-size: 13.5px; color: var(--ink-2); max-width: 72ch; }
.company-para + .company-para { margin-top: 8px; }
.company-caption { font-size: 12px; color: var(--ink-2); margin: 16px 0 4px; }
.company-under { margin-top: 12px; }
a.company-under { display: inline-block; font-size: 13px; }
.company-more { font-size: 12.5px; color: var(--ink-2); padding: 6px 10px 0; }

/* a link-styled button: in-page jumps cannot be anchors because the router owns the hash */
.company-jump { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; white-space: nowrap; }

/* about these numbers */
.company-gaps { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); max-width: 78ch; }
.company-sources { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; }
.company-gaps + .company-sources { padding-top: 12px; border-top: 1px solid var(--hairline); }
.company-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.company-source-name { font-weight: 500; }
/* error text comes from other systems and can be one long unbroken string (a URL): it must wrap, not widen the page */
.company-source > * { min-width: 0; overflow-wrap: anywhere; }
.company-insights .insight-title, .company-insights .insight-body { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .company-fresh { margin-left: 0; }
  /* the links out are what a phone reader taps most: give them a larger target */
  .company-links .btn-ghost { padding: 8px 12px; }
}