/* Entity-page layer — /issuer/<slug> and /stablecoin/<slug>.
   ------------------------------------------------------------------------------------------------
   An entity page is a Structure record surface with a different subject and a different job. It
   loads css/structure-record.css and reuses its section rhythm, tables, disclosures and series
   figure. What is here is the part that makes an entity feel like a thing a reader has ARRIVED at
   rather than a report they have opened: the hero, the stat row, the follow chip, the next-node
   card, the network bars and the measurement summary.

   COLOUR CONTRACT: every colour resolves through a --theme-* role, exactly as the Structure layer
   does. There are no hard-coded colours and no rgba() literals, so light and dark are a property of
   the token layer rather than of this file. Direction is never carried by colour alone: the change
   figure additionally carries a glyph, an explicit sign, and a visually-hidden word.

   MOTION CONTRACT: the Structure layer's tokens are reused rather than redeclared. Only transform
   and opacity are animated, and every optional transition is removed under prefers-reduced-motion
   with an end state identical to the animated one.

   MOBILE IS NOT STACKED DESKTOP. The section order in the markup IS the mobile reading order, so
   nothing is reordered visually and the two never diverge. What changes at narrow widths is
   density: the stat row becomes a two-column grid with the change spanning, the network bar column
   keeps full width because it moved into the name cell, and the hash wraps instead of scrolling. */

/* ── page shell ─────────────────────────────────────────────────────────── */

.ent-page .sr-identity {
  padding-top: 0;
}

/* Tighter rhythm than the Structure routes use.
   The shared 3rem section gap is right for a long analytical page read top to bottom. On an entity
   page it broke six short sections into disconnected slabs with runs of empty ground between them,
   so the page read as a stack of separate reports rather than as one object. Scoped to .ent-page:
   /issuers and /chains keep their own spacing. */
.ent-page .sr-section {
  margin-top: 2.25rem;
}

.ent-page .sr-section-head {
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
}

.ent-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-top: var(--rhythm-page-top-clear, 5.5rem);
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.ent-breadcrumb a {
  color: var(--theme-metadata-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--theme-rule-standard);
}

.ent-breadcrumb a:hover,
.ent-breadcrumb a:focus-visible {
  color: var(--theme-ink-primary);
  border-bottom-color: var(--theme-rule-interactive);
}

.ent-breadcrumb [aria-current="page"] {
  color: var(--theme-ink-secondary);
}

/* ── hero ───────────────────────────────────────────────────────────────── */
/* The first viewport carries identity, level, the three measures, the reading, and the follow
   action. Nothing else competes for it: the explanatory prose that used to sit between the figure
   and its qualifications has moved to the sections that own it. */

.ent-hero {
  margin-top: 1.4rem;
  padding-bottom: 1.6rem;
}

/* The follow chip sits IMMEDIATELY beside the name, not at the far edge of the container.
   Pushed apart with space-between it ended up ~900px from the word "Circle" on a 1080px measure and
   read as page furniture rather than as an action attached to this entity. */
.ent-hero-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.ent-hero-name h1 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--theme-ink-primary);
}

.ent-kicker {
  margin: 0.55rem 0 0;
  max-width: var(--sr-measure, 68ch);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

.ent-kicker a {
  color: var(--theme-ink-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* The headline figure. The compact form is what a reader takes away; the exact form beneath it is
   what makes the page citable, and it is real selectable text rather than a tooltip. */

.ent-hero-figure {
  margin: 1.7rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--theme-rule-strong);
}

.ent-headline-value {
  margin: 0;
  font-size: clamp(2.9rem, 8vw, 4.6rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--theme-ink-primary);
}

.ent-headline-label {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.ent-headline-exact {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--theme-provenance-ink);
  overflow-wrap: anywhere;
}

/* ── hero stat row ──────────────────────────────────────────────────────── */

.ent-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sr-gap, 1rem);
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ent-stat {
  min-width: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--theme-rule-standard);
}

.ent-stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--theme-ink-primary);
}

.ent-stat-glyph {
  font-size: 0.66em;
  line-height: 1;
}

.ent-stat-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--theme-ink-secondary);
}

.ent-stat-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--theme-ink-muted);
}

.ent-stat--up .ent-stat-value { color: var(--theme-status-positive-ink); }
.ent-stat--down .ent-stat-value { color: var(--theme-status-negative-ink); }
.ent-stat--flat .ent-stat-value { color: var(--theme-ink-secondary); }

/* Withheld rather than zero. Quiet, and never dressed as a figure. */
.ent-stat--none .ent-stat-value {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--theme-ink-muted);
}

/* ── hero metadata and scope note ───────────────────────────────────────── */

.ent-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin: 1.5rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--theme-rule-subtle);
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.ent-hero-meta a {
  color: var(--theme-metadata-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--theme-rule-standard);
}

.ent-hero-meta a:hover,
.ent-hero-meta a:focus-visible {
  color: var(--theme-ink-primary);
  border-bottom-color: var(--theme-rule-interactive);
}

.ent-hero-meta-sep { color: var(--theme-rule-strong); }

.ent-hero-note {
  margin: 0.7rem 0 0;
  max-width: var(--sr-measure, 68ch);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
}

/* ── follow chip ────────────────────────────────────────────────────────── */
/* The compact control beside the entity name. Closed it is an anchor to the explanation, which is
   why it is styled as a real affordance rather than as a disabled button: it does exactly what it
   looks like it does. Open it becomes a <button> carrying the same classes, so activation is a
   change of element and not a change of design. */

.ent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--theme-ink-primary);
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-strong);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
              border-color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease);
}

.ent-chip:hover,
.ent-chip:focus-visible {
  background: var(--theme-surface-inset);
  border-color: var(--theme-rule-interactive);
}

.ent-chip:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.ent-chip-star {
  font-size: 0.95em;
  line-height: 1;
  color: var(--theme-ink-muted);
}

/* Closed reads as available-but-quiet, never as broken. The reason lives one tap away, which is
   where this anchor goes. */
.ent-chip--closed {
  color: var(--theme-ink-secondary);
  border-style: dashed;
}

/* ── series ─────────────────────────────────────────────────────────────── */
/* More presence than the Structure routes give theirs: this is the section that shows an entity has
   a past, so it gets a taller frame and its own ground. */

.ent-series-figure {
  margin: 0;
  padding: 1rem 1rem 0.75rem;
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
}

/* The plot is a positioning context for the HTML axis layer, and it reserves the gutter that layer
   occupies. The SVG itself carries no text, so it can stretch freely. */
.ent-series-plot {
  position: relative;
  padding-left: 4.4rem;
}

.ent-series {
  width: 100%;
  height: 210px;
  display: block;
}

/* Axis labels as HTML, so they are never subject to the SVG's horizontal compression. Each is
   positioned at the same fraction of the plot height as the grid line it names, which the generator
   computes from the viewBox. `translateY(-50%)` centres the text on its line. */
.ent-series-axis {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4.4rem;
  padding-right: 0.55rem;
  pointer-events: none;
}

.ent-series-axis-label {
  position: absolute;
  right: 0.55rem;
  transform: translateY(-50%);
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--theme-chart-axis, var(--theme-ink-muted));
}

/* The date range under the plot, aligned to the plot's own left and right edges. */
.ent-series-dates {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.4rem 0 0 4.4rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--theme-chart-axis, var(--theme-ink-muted));
}

/* The break where no reading was published.
   A bare translucent rectangle read as a rendering seam. What makes it a marker rather than a smear
   is that it is bounded: a dashed rule at the last reading before the break and at the first reading
   after it, with a very light wash between. Two edges and an interval is what a gap looks like. */
.ent-series-gap {
  fill: var(--theme-ink-muted);
  opacity: 0.07;
}

.ent-series-gap-edge {
  stroke: var(--theme-ink-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
  /* The SVG is stretched horizontally, which would thin these rules to nothing at narrow widths. */
  vector-effect: non-scaling-stroke;
}

/* The most recent reading, marked so the eye lands on where the series currently stands. */
.ent-series-stop--latest .sr-series-point {
  fill: var(--theme-chart-series-primary, var(--theme-ink-primary));
  stroke: var(--theme-surface-raised);
  stroke-width: 2;
}

.ent-series-caption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--theme-rule-subtle);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
}

.ent-series-key {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

/* The key repeats the marker's construction rather than approximating it: a light wash bounded by a
   dashed rule on each side, so a reader matches the swatch to the chart without being told. */
.ent-series-key-swatch {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.2rem;
  background: var(--theme-ink-muted);
  border-left: 1px dashed var(--theme-ink-muted);
  border-right: 1px dashed var(--theme-ink-muted);
  opacity: 0.45;
}

/* ── related entity, as the next node ───────────────────────────────────── */

.ent-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sr-gap, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ent-node-item { min-width: 0; }

/* The whole card is the link. This section exists to be departed from. */
.ent-node {
  display: block;
  min-width: 0;
  padding: 1.05rem 1.15rem 1.15rem;
  text-decoration: none;
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  transition: border-color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
              background var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease);
}

.ent-node:hover,
.ent-node:focus-visible {
  background: var(--theme-surface-inset);
  border-color: var(--theme-rule-interactive);
}

.ent-node:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.ent-node-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ent-node-name {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--theme-ink-link);
}

.ent-node-arrow {
  font-size: 1.05rem;
  color: var(--theme-ink-muted);
  transition: transform var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease);
}

.ent-node:hover .ent-node-arrow,
.ent-node:focus-visible .ent-node-arrow {
  transform: translateX(3px);
}

.ent-node-kind {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.ent-node-relation {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.83rem;
  color: var(--theme-ink-secondary);
}

.ent-node-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--theme-rule-subtle);
  font-size: 0.85rem;
  color: var(--theme-ink-secondary);
}

.ent-node-figure strong {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--theme-ink-primary);
}

.ent-node-figure--none {
  font-size: 0.8rem;
  color: var(--theme-ink-muted);
}

.ent-node-sep { color: var(--theme-rule-strong); }

/* ── network distribution ───────────────────────────────────────────────── */
/* Four columns, not five: the share bar moved into the name cell, where it gets the full width of
   the widest column at every viewport instead of competing with the percentage for the last 40px. */

.ent-net-table { table-layout: auto; }

.ent-net-rank {
  width: 1.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--theme-ink-muted);
  font-size: 0.8rem;
}

.ent-net-name {
  width: 100%;
  min-width: 8rem;
  padding-right: 1.1rem;
}

.ent-net-label {
  display: block;
  font-weight: 500;
  color: var(--theme-ink-primary);
  overflow-wrap: anywhere;
}

.ent-net-bar {
  display: block;
  height: 5px;
  margin-top: 0.35rem;
  background: var(--theme-surface-inset);
  border-radius: 1px;
  overflow: hidden;
}

.ent-net-bar-fill {
  display: block;
  height: 100%;
  background: var(--theme-ink-primary);
  transform-origin: left center;
  transition: transform var(--sr-motion-rebalance, 280ms) var(--sr-motion-ease, ease);
}

/* The remainder is a bucket of networks, not a network. Its bar is quieter so it never competes
   with the ranked rows it stands in for. */
.ent-net-bar--remainder .ent-net-bar-fill {
  background: var(--theme-ink-muted);
  opacity: 0.5;
}

.ent-net-value {
  font-weight: 600;
  white-space: nowrap;
}

.ent-net-share {
  white-space: nowrap;
  color: var(--theme-ink-secondary);
}

/* ── how this is measured ───────────────────────────────────────────────── */
/* Restructured, not reduced. The summary leads; the identifiers sit in the disclosure beneath it. */

.ent-measure-summary {
  max-width: var(--sr-measure, 68ch);
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

.ent-measure-summary a {
  color: var(--theme-ink-link);
  text-underline-offset: 0.18em;
}

/* A 64-character hash must wrap rather than widen the page. */
.ent-hash {
  overflow-wrap: anywhere;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
}

/* ── follow ─────────────────────────────────────────────────────────────── */

.ent-follow-card {
  padding: 1.25rem 1.3rem 1.4rem;
  background: var(--theme-surface-inset);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  max-width: var(--sr-measure, 68ch);
}

.ent-follow-blurb {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--theme-ink-primary);
}

.ent-follow-cadence {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--theme-ink-muted);
}

.ent-follow-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.ent-follow-form input[type="email"] {
  flex: 1 1 13rem;
  /* Without this a flex item refuses to shrink below its intrinsic width, which is the usual cause
     of a form overflowing a 390px viewport. */
  min-width: 0;
  padding: 0.62rem 0.75rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--theme-ink-primary);
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 2px;
}

.ent-follow-form input[type="email"]::placeholder {
  color: var(--theme-ink-muted);
}

.ent-follow-form input[type="email"]:focus-visible,
.ent-follow-form button:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.ent-follow-form button {
  flex: 0 1 auto;
  padding: 0.62rem 1.1rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--theme-ink-inverse);
  background: var(--theme-ink-primary);
  border: 1px solid var(--theme-ink-primary);
  border-radius: 2px;
  cursor: pointer;
  transition: opacity var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease);
}

.ent-follow-form button:hover { opacity: 0.86; }

/* The closed state. The controls stay visible and legible rather than disappearing, because a
   reader is owed the reason it cannot be used. */
.ent-follow-form[data-follow-closed] input[type="email"],
.ent-follow-form[data-follow-closed] button {
  opacity: 0.5;
  cursor: not-allowed;
}

.ent-follow-msg {
  margin: 0.85rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

.ent-follow-msg[data-follow-state="error"] {
  color: var(--theme-status-warning-ink);
}

.ent-follow-following {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-ink-primary);
}

.ent-follow-tick { color: var(--theme-status-positive-ink); }

.ent-follow-following[hidden] { display: none; }

/* ── onward follow ──────────────────────────────────────────────────────── */
/* The grammar for following more than one thing, drawn now in the closed state so it needs no
   restructuring when following opens. Only the one related entity ever appears here. */

.ent-also {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--theme-rule-standard);
}

.ent-also-heading {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.ent-also-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ent-also-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-subtle);
  border-radius: 2px;
}

.ent-also-link {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  text-decoration: none;
}

.ent-also-name {
  font-weight: 600;
  color: var(--theme-ink-link);
  border-bottom: 1px solid var(--theme-rule-interactive);
}

.ent-also-kind {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.ent-also-note {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--theme-ink-muted);
}

/* ── narrow viewports ───────────────────────────────────────────────────── */
/* Checked at 390px in both themes. Density changes; order does not. */

@media (max-width: 40rem) {
  /* Three stats will not fit side by side at 390px without the labels shredding into three lines
     each. Share and rank pair naturally (both are positions within one reading); the change is the
     one a reader came for, so it takes the full width beneath them. */
  .ent-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ent-stats .ent-stat:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 30rem) {
  .ent-hero-name {
    align-items: center;
  }

  .ent-headline-value {
    letter-spacing: -0.04em;
  }

  .ent-series-figure {
    padding: 0.75rem 0.65rem 0.6rem;
  }

  /* A 4.4rem gutter is a ninth of a 390px screen. The labels are shorter here anyway. */
  .ent-series-plot { padding-left: 3.4rem; }
  .ent-series-axis { width: 3.4rem; padding-right: 0.4rem; }
  .ent-series-axis-label { right: 0.4rem; font-size: 0.62rem; }
  .ent-series-dates { margin-left: 3.4rem; font-size: 0.62rem; }
  .ent-series { height: 175px; }

  .ent-follow-form button {
    flex: 1 1 100%;
  }

  .ent-node {
    padding: 0.9rem 1rem 1rem;
  }

  /* The rank column earns no space at this width: the rows are already in order.
     BOTH the header cell and the body cells go, or the remaining headers shift one column left and
     sit over the wrong data. That is the defect this pair of selectors exists to prevent. */
  .ent-net-table th.ent-net-rank,
  .ent-net-table td.ent-net-rank {
    display: none;
  }

  .ent-also-item {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ent-chip,
  .ent-node,
  .ent-node-arrow,
  .ent-net-bar-fill,
  .ent-follow-form button {
    transition: none;
  }

  .ent-node:hover .ent-node-arrow,
  .ent-node:focus-visible .ent-node-arrow {
    transform: none;
  }
}