/* il-company.css — the company page: the ticket that travels with you, and
   the chapters the page is read in. Paired with app.js::paintBuyBar and
   buildCompanyFlow/CO_CHAPTERS. Tokens only. */

/* ── The ticket ───────────────────────────────────────────────────────────
   Sticks under the chrome for the whole page. Opaque, because it sits over
   charts and text as they scroll past, and a translucent bar over a chart is
   two readings at once. */
#companyBody > .buybar {
  position: sticky; top: calc(var(--il-chrome-h, 114px) + 8px); z-index: 20;
  gap: 18px; padding: 10px 14px;
  /* --surface-1 is translucent in most moods, so the page's own plane goes
     underneath it: the bars of a chart scrolling past showed through. */
  background-color: var(--plane);
  background-image: linear-gradient(color-mix(in oklab, var(--brand) 7%, var(--surface-1)),
                                    color-mix(in oklab, var(--brand) 7%, var(--surface-1)));
  border-color: var(--border-strong);
  box-shadow: 0 14px 30px -22px color-mix(in srgb, #000 70%, transparent);
}
.buybar-co { min-width: 0; }
.buybar-co b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.buybar-figs {
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; min-width: 0;
}
.buybar-fig { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.buybar-l {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.buybar-fig b { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.buybar-fig b.pos { color: var(--good); }
.buybar-fig b.neg { color: var(--critical); }
.buybar-score { flex-direction: row; align-items: center; gap: 7px; }
.buybar-verdict .verdict { white-space: nowrap; }
.buybar-note { white-space: nowrap; }

/* The ticket gives way in order of what can be found elsewhere: the note,
   then the verdict pill (it is on the card below), then the score. Price,
   worth and the gap between them stay down to a phone. */
@media (max-width: 1320px) { #companyBody > .buybar .buybar-note { display: none; } }
@media (max-width: 1120px) { .buybar-verdict { display: none; } }
/* On a phone the chrome above it is already tall, so the ticket is one thin
   row: the three figures and Buy. The name is the page title just above. */
@media (max-width: 760px) {
  .buybar-score, .buybar-co { display: none; }
  #companyBody > .buybar { gap: 10px; flex-wrap: nowrap; padding: 6px 10px; }
  .buybar-figs { gap: 14px; margin-right: auto; }
  .buybar-fig b { font-size: 13.5px; }
  #companyBody > .buybar .buybtn { padding-block: 6px; }
}

/* Below 860px the page rail turns into a strip stuck at the same height
   (il-panels.css); the ticket rides under it rather than on top of it. */
@media (max-width: 860px) {
  #companyBody > .buybar { top: calc(var(--il-chrome-h, 114px) + 42px); }
  /* The rail strip's own wash is translucent (il-panels.css); over running
     text that is two lines of type at once. Same wash, on the mood's plane. */
  .coflow > .conav {
    background: linear-gradient(color-mix(in oklab, var(--surface-1) 88%, transparent),
                                color-mix(in oklab, var(--surface-1) 88%, transparent)), var(--plane);
  }
}

/* ── Chapters ─────────────────────────────────────────────────────────────
   A numeral and a name between the stretches of the page. The serif is spent
   here on purpose: under the view title these are the only display headings
   in the body, which is what lets them read as structure rather than as one
   more card. */
.cochapter {
  display: flex; align-items: flex-end; gap: 18px;
  margin: 46px 0 16px; padding: 0 2px 12px;
  border-bottom: 1px solid var(--border);
}
#companyBody > .cochapter[data-chapter="0"] { margin-top: 8px; }
.cochapter-n {
  font-family: var(--font-display); font-size: 54px; line-height: .8;
  color: color-mix(in oklab, var(--brand) 55%, transparent);
  min-width: 1.6ch; letter-spacing: -.02em;
}
.cochapter h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 30px;
  line-height: 1.05; margin: 0 0 .3rem; color: var(--head-ink, var(--text-primary));
}
.cochapter p { margin: 0; }
@media (max-width: 600px) {
  .cochapter { margin-top: 34px; gap: 12px; }
  .cochapter-n { font-size: 40px; }
  .cochapter h2 { font-size: 24px; }
}

/* The rail's chapter labels. */
.conav-ch {
  display: flex; align-items: baseline; gap: 7px;
  margin: 14px 0 3px; padding-left: 11px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.conav-h + .conav-ch { margin-top: 0; }
.conav-ch span { color: var(--brand); font-family: var(--font-display); font-size: 13px; letter-spacing: 0; }
/* On a phone the rail is a horizontal strip; chapter labels there are noise. */
@media (max-width: 860px) { .conav-ch { display: none; } }