/* 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. */
/* Baseline, not centre. Against a display name a vertically centred control put its underline
   halfway up the letterforms, where it read as a stray rule rather than as a link sitting beside
   the title. On the baseline it reads as what it is. */
.ent-hero-name {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.2rem 1.1rem;
  flex-wrap: wrap;
}

.ent-follow-inline {
  position: relative;
  flex: 1 1 14rem;
  min-width: min(100%, 14rem);
  max-width: 100%;
}

.ent-follow-inline > .ent-chip,
.ent-follow-inline > summary.ent-chip {
  display: inline-flex;
}

/*
 * Opening the control must not move the control.
 *
 * This used to set `flex: 1 1 100%; width: 100%`, which made the <details> claim the whole flex
 * line the moment it opened -- so the chip wrapped onto its own row and jumped 136px left and 38px
 * down, out from beside the entity name. A disclosure that relocates the thing you just pressed is
 * disorienting: the reader's eye is on the control and the control has gone.
 *
 * The element now keeps its width, so the chip stays exactly where it was, and the panel is placed
 * beneath it. `flex-basis: auto` lets the chip size to its own label rather than the 14rem basis
 * the closed state uses to sit comfortably beside a long name.
 */
.ent-follow-inline[open] {
  flex: 0 1 auto;
}

/*
 * The panel stays IN FLOW, beneath the hero row.
 *
 * It was briefly absolutely positioned so the chip would stop jumping, which worked but made the
 * form a popover hovering over the page -- something a reader expects to be able to dismiss, with
 * no obvious way to do it. A form that overlays the content behind it needs an exit; a form that
 * simply sits on the page does not.
 *
 * So the panel is a normal block that pushes what follows down, and the chip stays put because
 * `.ent-hero-name` wraps: the <details> keeps its own width in the flex row, and its open panel
 * flows below without the element having to claim the whole line. Nothing overlays anything, and
 * there is nothing to close except the control the reader opened.
 */
.ent-follow-inline[open] > .ent-follow-panel {
  /* Bounded to a form's own measure. Left to stretch it filled the whole hero column, which put a
     short email field in a 1000px box. */
  width: min(100%, 26rem);
}

/*
 * The <details> spans the row when open, but as its OWN flex line rather than by displacing the
 * chip. `order` is not used and nothing moves: the chip is the first thing in the element, so the
 * element growing downward leaves the chip exactly where it was. On a narrow screen the hero row
 * has already wrapped the control onto its own line, so this changes nothing there either.
 */
.ent-hero-name { align-items: flex-start; }

.ent-hero-name h1 { flex: 0 1 auto; }

/*
 * On a narrow screen the control sits on its own line from the start.
 *
 * It used to share the line with the name and then wrap to a second line the moment it opened,
 * moving 101px left and 36px down -- the same disorienting jump the desktop rule fixes, arriving
 * by a different route. Placing it below the name unconditionally means opening it changes
 * nothing about where it is. A phone has no width to spare for a control beside a display name
 * anyway, so nothing is lost.
 */
@media (max-width: 34rem) {
  .ent-hero-name { flex-direction: column; align-items: stretch; }
  .ent-follow-inline { flex: 0 0 auto; min-width: 0; }
  .ent-follow-inline > .ent-chip,
  .ent-follow-inline > summary.ent-chip { display: inline-flex; align-self: flex-start; }
  /* The control keeps one left edge with the name above it, open or closed. */
  .ent-follow-inline { align-self: stretch; }
}

/*
 * The panel's space is reserved, so opening it moves nothing.
 *
 * The form sat in normal flow inside the hero, so registering shoved the kicker, the registration
 * details and the entire first section down 262px on a desktop and 353px on a phone. A page
 * rearranging itself under a reader who has just clicked reads as a glitch rather than a result,
 * and the owner called it ungraceful. It is the same defect the homepage module had.
 *
 * The control reserves a minimum height matching its open panel, so the panel appears into space
 * that already existed. Below 34rem the hero stacks and the reserve is taller, because the form
 * wraps to two rows there.
 *
 * min-height, not a fixed height: a longer message or a confirmation may exceed the reserve, and
 * growing then is correct - the alternative is clipping a reply the reader needs to read.
 */
/*
 * The panel opens BESIDE the control, in the hero's own empty right-hand space.
 *
 * Three arrangements were tried and rejected against the rendered page. In normal flow the form
 * shoved the kicker, the registration details and the first section down 262px on a desktop and
 * 353px on a phone - a page rearranging itself under a reader who has just clicked. Reserving the
 * height cost 160px of hero on every visit, which is exactly the space the registration-details
 * fold had just recovered. Absolute positioning took the panel out of flow, and it then painted
 * straight through the unavailable notice beneath it: text over text.
 *
 * The hero is a grid instead. The identity column keeps its measure and the control takes a second
 * column that is already there and already empty, so the panel grows inside its own column and the
 * one beside it never moves. Nothing overlaps, because nothing left the flow.
 */
@media (min-width: 46rem) {
  /*
   * The name row is the two-column grid, because the control lives inside it.
   *
   * .ent-hero-name holds the h1 and the follow control as siblings, so the grid has to be here:
   * making the parent a grid left the control nested one level too deep to be placed by it, and the
   * panel dropped back into the first column under the name.
   *
   * The h1 takes the first column and the control the second, which is empty space the hero already
   * had. The panel then grows inside its own column and the identity column beside it never moves.
   * align-items: start keeps the control at the name's top edge rather than centred against a
   * panel that may be 250px tall.
   */
  .ent-hero-name {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(18rem, 26rem);
    column-gap: 2.5rem;
    align-items: start;
    justify-content: start;
  }

  .ent-hero-name > h1 { grid-column: 1; align-self: baseline; }

  /* The control's column grows downward on its own. The row does not stretch to fit it, so the
     kicker and everything below stay where they were: the panel occupies space beside the name,
     not above the rest of the page. */
  .ent-hero-name > .ent-follow-inline {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    min-height: 0;
    align-self: start;
  }

  .ent-hero-name > .ent-follow-inline > .ent-chip,
  .ent-hero-name > .ent-follow-inline > summary.ent-chip { position: relative; z-index: 1; }

  .ent-follow-inline > .ent-follow-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0.85rem;
    box-shadow: none;
  }
}

@media (max-width: 45.9375rem) {
  /*
   * Too narrow for a second column. The form returns to normal flow beneath the control, which does
   * push the content below it - but on a phone that content is off-screen anyway, and a reader who
   * opened the form is looking at the form. Pushing what nobody is looking at is not the same
   * defect as rearranging what they are.
   */
  .ent-follow-inline { position: relative; min-height: 0; }
  .ent-follow-inline > .ent-follow-panel {
    position: static;
    width: auto;
    max-width: min(100%, 28rem);
    margin-top: 0.85rem;
    box-shadow: none;
  }
}

.ent-follow-panel {
    /* Beside the control, not at the far edge of a 1328px hero. Anchored left so it opens next to
       the name and the button a reader just pressed, which is where they are looking. */
    position: absolute;
    top: 100%;
    left: 0;
    width: min(100%, 26rem);
    margin-top: 0.6rem;
    box-shadow: 0 10px 28px -18px rgb(0 0 0 / 45%);
    z-index: 2;
  }
}

@media (max-width: 34rem) {
  /*
   * Too narrow to put the panel beside anything, so it opens over the content below it instead.
   *
   * Reserving the height was tried and is worse: it costs 160px of the hero on every visit, which
   * is exactly the space the registration-details fold just recovered, and it charges every reader
   * for a form most will not open. Overlaying costs nothing until the control is used.
   *
   * The panel carries the page ground rather than a transparent one, so the text beneath it does
   * not show through, and it sits above the following section in the stacking order.
   */
  .ent-follow-inline { position: static; }
  .ent-follow-inline > .ent-follow-panel {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    margin-top: 0.6rem;
    background: var(--theme-surface-inset);
    box-shadow: 0 10px 28px -18px rgb(0 0 0 / 45%);
    z-index: 3;
  }
}

.ent-follow-panel {
  margin-top: 0.85rem;
  padding: 0.95rem 1rem 1.05rem;
  max-width: min(100%, 28rem);
  background: var(--theme-surface-inset);
  border: 1px solid var(--theme-rule-standard);
}

.ent-follow-inline .ent-follow-beta {
  /* Reuses .ent-follow-status, the badge the closed state already ships, so the beta marker
     introduces no new colour pair for the contrast guard to assess. */
  margin: 0 0 0.6rem;
}

.ent-follow-inline .ent-follow-blurb {
  font-size: 0.92rem;
}

.ent-follow-inline .ent-follow-cadence,
.ent-follow-inline .ent-follow-open,
.ent-follow-inline .ent-follow-note {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--theme-ink-muted);
}

.ent-follow-inline .ent-follow-open {
  color: var(--theme-ink-secondary);
}

.ent-follow-inline .ent-follow-form {
  margin-top: 0.75rem;
}

.ent-follow-inline .ent-follow-closed {
  margin-top: 0.65rem;
}

/* Entity names and Structure index titles share one restrained publication rank. The object page
   therefore never visually outranks the index that contains it, and issuer/asset distinction is
   carried by the explicit scope register rather than by title size. */
.ent-hero-name h1 {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  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 SCOPE STRIP.
   Three short label/value pairs on one rule: what kind of thing this page is about, what it is
   connected to, and what its headline figure covers. It is the element that makes an issuer page
   and an asset page legibly different when the reading gives both the same number, so it sits
   directly under the name where that comparison is actually made. Mono labels, body-face values:
   the same pairing the Daily Tape uses for a record's stated fields. */
/* The scope disclosure. A real control: 44px target, visible focus ring, and its own marker rather
   than the browser's default triangle. */
.ent-scope-disclose {
  margin-top: 1rem;
  border-top: 1px solid var(--theme-rule-standard);
}

.ent-scope-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.ent-scope-summary::-webkit-details-marker { display: none; }
.ent-scope-summary::after { content: "+"; margin-left: auto; font-size: 0.95rem; line-height: 1; }
.ent-scope-disclose[open] > .ent-scope-summary::after { content: "\2212"; }
.ent-scope-summary:hover { color: var(--theme-ink-primary); }
.ent-scope-summary:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 2px; }

.ent-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem clamp(1.2rem, 3vw, 2.4rem);
  margin: 1.3rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--theme-rule-subtle);
}

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

.ent-scope dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.ent-scope dd {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--theme-ink-primary);
  overflow-wrap: anywhere;
}

/* The related entity is the one value in the strip that is a destination. Same restrained rule the
   Structure tables use for a named entity, so one link treatment covers the whole family. */
.ent-scope-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--theme-rule-interactive);
  transition: color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
              border-color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease);
}

.ent-scope-link:hover,
.ent-scope-link:focus-visible {
  color: var(--theme-ink-primary);
  border-bottom-color: var(--theme-ink-primary);
}

.ent-scope-link:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
  border-radius: 1px;
}

/* WHICH READING THIS PAGE IS READ FROM.
   Same band, same rust rule and same words as the Structure routes, because it answers the same
   question and a reader who has seen one should recognise the other immediately. */
.ent-observation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin: 1.6rem 0 0;
  padding: 0.7rem 0 0.7rem 0.9rem;
  border-left: 2px solid var(--theme-status-negative-ink);
}

.ent-observation-mark {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

.ent-observation-mark strong {
  font-weight: 600;
  color: var(--theme-ink-primary);
}

.ent-observation-note {
  margin: 0;
  max-width: 46ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
}

/* 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);
}

/* Expansion in ink, contraction in the publication's restrained rust. Direction is already carried
   by the glyph, the explicit sign and the spoken word, so retiring the green loses nothing a reader
   was using and removes the last thing on these pages that read as a trading terminal. */
.ent-stat--up .ent-stat-value { color: var(--theme-ink-primary); }
.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);
}

/* The current figure becomes a shareable observation without turning the hero into a social card.
   Status and action stay on one quiet rule, and both are built from the frozen reading above. */
.ent-observation-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.ent-observation-status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--theme-ink-secondary);
}

.ent-observation-status > span {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.ent-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  flex: 0 0 auto;
  padding: 0.45rem 0.8rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--theme-ink-link);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 2px;
  transition: color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
              border-color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
              background-color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
              transform 100ms var(--sr-motion-ease, ease);
}

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

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

.ent-share-link:active { transform: translateY(1px); }

/* ── 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. */

/* ONE NOTIFICATION TREATMENT, NOT TWO.
   The page carries a control here and a section at the foot, and as a raised, boxed, strong-ruled
   button this one competed with the entity name it sits beside and read as a second, different
   offer. It is now the same restrained rule every other named destination on these pages uses, so
   the panel at the foot is the single place notifications are presented. The behaviour is
   unchanged: closed it is still an anchor to that panel, open it is still a button, and it keeps
   its 40px target in both states. */
/*
 * The entity Follow control, to the owner's Notifications V1 reference (entity frames 1-7):
 *
 *   display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
 *   border:1px solid var(--theme-rule-interactive); border-radius:0; background:transparent;
 *   color:var(--theme-ink-secondary);
 *   font-family:var(--sans); font-size:15px; line-height:1; white-space:nowrap
 *
 * It was mono uppercase at 0.7rem with an underline hugging the label and no box. That reads as a
 * link wearing a border's job; the reference is a bordered control in sentence-case sans, which is
 * what makes it look like something you press. Values copied from the attachment rather than
 * approximated.
 *
 * white-space:nowrap is the reference's, and it is safe here because the responsive rule below
 * releases it: a governed legal issuer name is far longer than "Circle", and a control that cannot
 * fit must wrap rather than push the page sideways.
 */
.ent-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--theme-ink-secondary);
  background: transparent;
  border: 1px solid var(--theme-rule-interactive);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

/*
 * The border now belongs to the box, so the label carries none of its own. A long governed name is
 * allowed to wrap inside the control rather than run past the viewport: a chip whose text cannot
 * fit has to fold, not make the page scroll sideways.
 */
.ent-chip .ent-chip-label {
  border-bottom: 0;
  padding-bottom: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 34rem) {
  .ent-chip { white-space: normal; padding: 0.5rem 12px; }
}

.ent-chip:hover,
.ent-chip:focus-visible {
  color: var(--theme-ink-primary);
  border-color: var(--theme-ink-primary);
}

.ent-chip:hover .ent-chip-label,
.ent-chip:focus-visible .ent-chip-label {
  border-bottom-color: var(--theme-ink-primary);
}

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

.ent-chip:active { transform: translateY(1px); }

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

/*
 * The mark states which way the control goes: + to follow, - once registered.
 *
 * It was a static "+" that stayed "+" after a successful registration, so the one moment the
 * control had something to report -- you are now following this -- looked identical to the moment
 * before. The state lives on the wrapper as data-follow-registered, set by js/entity-follow.js when
 * /api/follow answers ok, so a page with no scripting keeps the honest starting state.
 *
 * The glyph is rendered from CSS rather than swapped in the DOM because it is decoration: the
 * control's accessible name and the confirmation message below carry the meaning, and
 * .ent-chip-mark is aria-hidden.
 */
.ent-follow-inline[data-follow-registered] .ent-chip-mark {
  /* Hide the "+" that is in the markup and draw the minus in its place. */
  font-size: 0;
}

.ent-follow-inline[data-follow-registered] .ent-chip-mark::before {
  content: "\2212";
  font-size: 15px;
}

.ent-follow-inline[data-follow-registered] > .ent-chip {
  color: var(--theme-ink-primary);
  border-color: var(--theme-ink-primary);
}

summary.ent-chip {
  list-style: none;
  cursor: pointer;
}

summary.ent-chip::-webkit-details-marker {
  display: none;
}

/* Closed reads as available-but-quiet, never as broken. The reason lives one tap away, which is
   where this anchor goes, and the dashed rule is what says the offer is not yet open. */
.ent-chip--closed {
  color: var(--theme-ink-muted);
}

.ent-chip--closed .ent-chip-label {
  border-bottom-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;
}

/* Five recent dates stay visible for scan-reading. The complete series remains in the disclosure
   below, so this is a useful window rather than a second history system. */
.ent-observation-log {
  margin-top: 1.1rem;
  border-top: 1px solid var(--theme-rule-standard);
}

.ent-observation-log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0 0.55rem;
}

.ent-observation-log-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--theme-ink-primary);
}

.ent-observation-log-head p {
  margin: 0;
  max-width: 38rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--theme-ink-muted);
}

.ent-observation-log-head strong {
  color: var(--theme-ink-secondary);
  font-weight: 600;
}

.ent-observation-table td,
.ent-observation-table th {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.ent-observation-table a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--theme-ink-link);
  text-underline-offset: 0.18em;
}

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

/* ── 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-closed {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.ent-follow-status {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 2px;
}

.ent-follow-form {
  margin-top: 1rem;
}

.ent-follow-form--inline .ent-follow-form-fields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
}

.ent-follow-form--inline input[type="email"] {
  flex: 0 1 10.5rem;
  width: 10.5rem;
  max-width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.48rem 0.62rem;
  font: inherit;
  font-size: 0.86rem;
  color: var(--theme-ink-primary);
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 2px;
}

.ent-follow-form--inline button[type="submit"] {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.48rem 0.9rem;
  font: inherit;
  font-size: 0.78rem;
  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 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:hover { opacity: 0.86; }

.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; }

/* ── follow dialog ──────────────────────────────────────────────────────── */
/* Centered card on wide viewports; bottom sheet on phones. Safe-area aware, scrollable when the
   keyboard is open, and column-stacked so nothing wraps sideways at 320px. */

.ent-follow-dialog {
  box-sizing: border-box;
  width: min(100vw - 2rem, 26.5rem);
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  max-height: calc(100svh - 2rem);
  padding: 0;
  margin: auto;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--theme-ink-primary);
}

.ent-follow-dialog[open] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ent-follow-dialog::backdrop {
  background: rgb(8 10 14 / 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="dark"] .ent-follow-dialog::backdrop {
  background: rgb(0 0 0 / 0.68);
}

.ent-follow-dialog-panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-height: calc(100dvh - 2rem);
  max-height: calc(100svh - 2rem);
  padding: 1.45rem 1.35rem 1.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--theme-surface-overlay);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 24px 64px rgb(0 0 0 / 0.22);
}

html[data-theme="dark"] .ent-follow-dialog-panel {
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.04) inset,
    0 28px 72px rgb(0 0 0 / 0.48);
}

.ent-follow-dialog-head {
  padding-right: 2.25rem;
  margin-bottom: 1.15rem;
}

.ent-follow-dialog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

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

.ent-follow-dialog-title {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(1.2rem, 4.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--theme-ink-primary);
  text-wrap: balance;
}

.ent-follow-dialog-lede {
  margin: 0.55rem 0 0;
  font-size: clamp(0.92rem, 3.6vw, 0.98rem);
  line-height: 1.55;
  color: var(--theme-ink-secondary);
  text-wrap: pretty;
}

.ent-follow-dialog-cadence {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--theme-ink-muted);
}

.ent-follow-dialog-note {
  margin: 0.85rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
  text-wrap: pretty;
}

.ent-follow-dialog-close {
  position: absolute;
  top: 0.65rem;
  right: 0.55rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--theme-ink-muted);
  background: var(--theme-surface-inset);
  border: 1px solid var(--theme-rule-subtle);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
    background var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease),
    border-color var(--sr-motion-resolve, 150ms) var(--sr-motion-ease, ease);
}

.ent-follow-dialog-close:hover,
.ent-follow-dialog-close:focus-visible {
  color: var(--theme-ink-primary);
  background: var(--theme-surface-raised);
  border-color: var(--theme-rule-standard);
}

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

.ent-follow-form--dialog {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.ent-follow-form-fields {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}

.ent-follow-field-label--dialog {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.ent-follow-form--dialog input[type="email"] {
  flex: none;
  width: 100%;
  min-height: 2.75rem;
  font-size: 1rem;
}

.ent-follow-form--dialog button[type="submit"] {
  width: 100%;
  min-height: 2.75rem;
  font-size: 0.82rem;
}

.ent-follow-dialog .ent-follow-msg {
  margin-top: 0.85rem;
}

.ent-follow-dialog .ent-follow-following {
  margin-top: 0.85rem;
}

html.ent-follow-dialog-open {
  overflow: hidden;
}

@media (max-width: 30rem) {
  .ent-follow-dialog {
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
  }

  .ent-follow-dialog[open] {
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100dvh;
    max-height: 100svh;
  }

  .ent-follow-dialog-panel {
    width: 100%;
    max-height: min(92dvh, 100%);
    max-height: min(92svh, 100%);
    padding:
      1.15rem 1.1rem
      calc(1.15rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1rem 1rem 0 0;
    border-bottom: 0;
  }

  .ent-follow-dialog-head {
    padding-right: 2.5rem;
    margin-bottom: 1rem;
  }

  .ent-follow-dialog-close {
    top: calc(0.55rem + env(safe-area-inset-top, 0px));
    right: 0.45rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ent-follow-dialog-panel {
    animation: ent-follow-dialog-in 180ms var(--sr-motion-ease, ease);
  }

  @keyframes ent-follow-dialog-in {
    from {
      opacity: 0;
      transform: translateY(0.65rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 30rem) {
    @keyframes ent-follow-dialog-in {
      from {
        opacity: 0;
        transform: translateY(100%);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ent-follow-dialog::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: 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-observation-bar,
  .ent-observation-log-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ent-share-link { width: 100%; }

  .ent-follow-form--inline .ent-follow-form-fields {
    flex-direction: column;
    align-items: stretch;
  }

  .ent-follow-form--inline input[type="email"] {
    width: 100%;
    flex: 1 1 auto;
  }

  .ent-follow-form--inline button[type="submit"] {
    width: 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;
  }
}

.ent-follow-count {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  color: var(--theme-ink-muted);
}

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

@media (prefers-reduced-motion: reduce) {
  .ent-chip,
  .ent-share-link,
  .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,
  .ent-chip:active,
  .ent-share-link:active {
    transform: none;
  }
}