/* ==========================================================================
   Per-entity static pages — company/<id>/ and product/<id>/
   ==========================================================================

   Loaded after css/styles.css and deliberately short. The generated pages
   reuse the drawer's own classes — .dialog-description, .dialog-stats,
   .stat-label, .dialog-link, .dialog-section-title, .product-list,
   .related-row, .logo, .flag, .category-badge — so they inherit the drawer's
   appearance by construction rather than by a second stylesheet trying to
   match it. What is left here is only what a full page needs and a slide-over
   never did: a reading column, a way back, and the two blocks that exist only
   on these pages.

   Everything below uses the tokens from styles.css, so both themes and the
   whole type scale come along for free. */

.entity-topbar {
  padding-block: var(--space-5);
}

.entity-home {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}

.entity-home:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.entity-main {
  padding-bottom: var(--space-8);
}

/* The reading column. The drawer is 480px because it sits beside the grid;
  a page has the whole viewport and no reason to use all of it — 46rem is
  about 80 characters at this size, which is where prose stops being
  comfortable. */
.entity {
  max-width: 46rem;
}

.entity-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.entity-header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.entity-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* h1 here, h2 in the drawer's .dialog-title — the size is the same because
  the heading level and the type scale are separate questions. */
.entity-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: var(--leading-tight);
}

.entity-byline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.entity-byline a {
  color: inherit;
  font-weight: 600;
}

/* The capability list on a product page. A plain list of terms, not chips:
  they are facts about what the thing does, and a chip implies something
  clickable that filters. */
.capability-list {
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.capability-item {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* "How it compares" on a product page (id 27). The 48 curated relation rows
  are the best-sourced content in the dataset — every one carries a written
  reason, a named source and a verbatim quote, enforced by validate-data.py —
  and they rendered on no page at all until now. So the quote gets real
  weight: it is the evidence, not decoration. */
.relation-list {
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.relation-item {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
}

.relation-name {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.relation-name:hover,
.relation-name:focus-visible {
  text-decoration: underline;
}

.relation-reason {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The verbatim sentence the relation was read from. Italic and inset so it
  reads as somebody else's words rather than ours — the distinction the
  `written` flag makes on the comparison rail, in punctuation. */
.relation-quote {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text);
}

.relation-quote::before {
  content: '\201C';
}

.relation-quote::after {
  content: '\201D';
}

/* The retired id inside an "Absorbed …" line. Shown as an identifier on
  purpose: a retired company's record is deleted, so its NAME is gone from the
  data, and title-casing `element-ai` into "Element AI" would be this
  stylesheet inventing a label the file never held. The link goes to the
  announcement, which names it in full. */
.entity-absorbed-id {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.entity-note,
.entity-correction,
.entity-browse {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.entity-browse {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.entity-correction {
  margin-top: var(--space-2);
}

.entity-note {
  margin-top: var(--space-3);
}

.entity-browse a,
.entity-correction a {
  color: var(--color-accent);
  font-weight: 600;
}

/* The peer cards are links here rather than buttons — there is a real URL to
  go to, so an anchor is the honest element. .related-card carries the look;
  these three lines undo what an anchor brings with it. */
a.related-card {
  text-decoration: none;
  color: inherit;
}

a.related-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* The product name in a list is a link on these pages and plain text in the
  drawer, for the same reason. */
.product-name[href] {
  color: inherit;
  text-decoration: none;
}

.product-name[href]:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

@media (max-width: 560px) {
  .entity-header {
    gap: var(--space-3);
  }

  /* Same call the drawer makes at this width and for the same measurement:
    two columns of stats stay readable, three peers across do not. */
  .related-row:has(> :nth-child(3)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}