/* The chrome (the faces, the mark, the bar, the container) is the shell's,
   /app-shell.css, linked before this file. This file is the ranking itself:
   solid black and white, nothing translucent. */
:root {
  color-scheme: dark;
  --black: #000;
  --white: #fff;

  /* What the shell paints its menu panel with. This page is black, so the
     sheet that comes down over it is black too. */
  --app-ground: var(--black);
  --app-ink: var(--white);
  /* The mark, when it is painted rather than blended (a section's entrance), is white here. */
  --app-mark-filter: invert(1);
  --app-rule: rgb(255 255 255 / 18%);

}

* { box-sizing: border-box; }
html { background: var(--black); color: var(--white); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--black);
  color: var(--white);
  font-size: 16px;
  line-height: 1.35;
}
button, input, select {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ranking-app { min-height: 0; padding-bottom: 56px; }
/* The mode switch was a <select> and a home button here. Both are links in
   the bar's menu now, and the bar's own stylesheet draws them. */
.app-head {
  padding: 0 0 20px;
}
.title-line, .account-actions {
  display: flex;
  align-items: center;
}
.title-line {
  justify-content: space-between;
  gap: 40px;
  min-height: 0;
  padding: 0 0 12px;
}
.status:empty { display: none; }
.title-line:has(.status:empty) { min-height: 0; padding-bottom: 0; }
.app-head:has(.status:empty) { padding: 0; }
.title-line > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.eyebrow {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 0;
  font-size: clamp(38px, 6vw, 78px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.status {
  max-width: 500px;
  margin: 0;
  color: var(--white);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.outline-button { width: 100%; min-height: 44px; outline: 0; padding: 10px 12px; }
.outline-button:hover, .outline-button:focus-visible {
  background: var(--white);
  color: var(--black);
}
.outline-button { width: auto; cursor: pointer; white-space: nowrap; }

/* The account's card and, under it, its three actions: category, power-up
   and the graph. On an account page they stand beside the lists (see
   `.is-account` below); on the graph they float over it. */
.account-panel { max-width: 440px; margin: 10px 0 34px; }
.account-panel[hidden] { display: none; }
/* The card is the shell's `.app-card`; the account's is a grid. */
.account-hero {
  display: grid;
  gap: 14px;
}
.account-hero > * { margin: 0; }
.account-hero h2 {
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  overflow-wrap: anywhere;
}
.account-full-name[hidden] { display: none; }
/* Under the card on an account's page: the articles on Live that named it. */
.account-score-grid { display: grid; grid-template-columns: 1fr; margin-top: 10px; }
.score-cell { min-height: 0; padding: 0; background: transparent; }
.score-cell span {
  display: block;
  color: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.score-cell strong {
  display: block;
  margin-top: 8px;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.account-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: start;
  gap: 8px;
  margin-top: 10px;
}
/* A slimmer power-up than the old card's, so the three fit one row. */
.account-actions .vote-control--large .vote-center { width: 64px; min-width: 64px; flex-basis: 64px; }
.account-actions .vote-control--large .vote-arrow { width: 36px; height: 36px; }
/* The actions are opaque, so they read over the graph too. */
.account-actions :is(.vote-control, .row-category-trigger, .graph-table-link) { background: var(--black); }
.vote-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 32px;
  border: 0.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: 2px;
  white-space: nowrap;
}
.vote-control--large { min-height: 52px; padding: 5px; }
.vote-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 54px;
  min-width: 54px;
  flex: 0 0 54px;
  box-sizing: border-box;
  padding: 0 3px;
  font-variant-numeric: tabular-nums;
}
.vote-center svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.vote-control--large .vote-center {
  width: 82px;
  min-width: 82px;
  flex-basis: 82px;
  font-size: 18px;
}
.vote-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}
.vote-control--large .vote-arrow { width: 40px; height: 40px; }
.vote-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
}
.vote-arrow:hover, .vote-arrow:focus-visible {
  background: var(--white);
  color: var(--black);
  outline: 0;
}
.vote-arrow:disabled { cursor: wait; }
.vote-feedback {
  position: fixed;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: vote-fly 700ms ease-out forwards;
}
@keyframes vote-fly {
  from { transform: translate(-50%, -10%); }
  to { transform: translate(-50%, -150%); }
}

.loading-card, .error-card, .empty-card {
  padding: clamp(38px, 6vw, 82px) 0;
  margin: 24px 0;
}
.loading-card p, .error-card p, .empty-card p { margin-bottom: 14px; }
/* The locked screen for a visitor who is not a member: Live's words, this page's buttons. */
.gate-card h2 { margin: 0 0 12px; }
.gate-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gate-card__actions .outline-button { display: inline-flex; align-items: center; text-decoration: none; }
.progress-track { display: none; }

/* A page, a profile or a save the account cannot pay for (1 G token each):
   the reason, the way to top up, a retry. The gate's buttons, smaller room. */


.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 42px 0 16px;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.04em;
}
.section-heading button {
  padding: 8px 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.table-shell table { min-width: 960px; }
.source-table table { table-layout: auto; min-width: 1520px; }
.source-table :is(th, td) { white-space: nowrap; }
.source-table .metric-column { width: auto; }
.source-table :is(th, td):first-child { position: sticky; left: 0; background: var(--black); z-index: 1; }
.source-table :is(th, td):last-child { position: sticky; right: 0; background: var(--black); z-index: 1; }
.table-filter-heading.category-column { min-width: 128px; }
.rank-column { width: 8%; min-width: 70px; }
.account-column { width: 28%; min-width: 240px; }
.metric-column { width: 11%; min-width: 100px; }
.power-column { width: 14%; min-width: 116px; }
.category-column { width: 7%; min-width: 58px; }
.links-column { width: 116px; }
.account-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-link strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  font-weight: 400;
}
.verified-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-size: 11px;
  line-height: 1;
}
tbody tr:hover .verified-mark { background: var(--black); color: var(--white); }
.account-detail {
  min-width: 0;
  max-width: 10rem;
  flex: 0 1 10rem;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
}
.row-category {
  display: grid;
  justify-items: end;
  gap: 3px;
}
.row-category-trigger {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0.5px solid currentColor;
  border-radius: 999px;
}
.row-category-select {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 30px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  color: transparent;
  cursor: pointer;
}
.row-category-select option {
  color: var(--white);
  background: var(--black);
  font-size: 16px;
}
.row-category-select:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
.row-category-icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  pointer-events: none;
}
.row-category-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.row-category-trigger.is-selected {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}
.row-category-trigger.is-selected .row-category-icon svg { display: none; }
.row-category-trigger.is-selected .row-category-icon::after {
  content: attr(data-category-letter);
  color: var(--black);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
/* A row's Instagram and graph links, at its far right with room to hit. */
.account-row-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.account-row-links > * { width: 36px; height: 36px; border-radius: 50%; }
.account-row-links > a svg { width: 20px; height: 20px; }
.instagram-table-link, .shopify-table-link, .shopify-pinboard-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 2px;
  color: inherit;
}
.instagram-table-link svg, .shopify-table-link svg, .shopify-pinboard-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.instagram-table-link:hover, .instagram-table-link:focus-visible,
.shopify-table-link:hover, .shopify-table-link:focus-visible {
  background: var(--white);
  color: var(--black);
  outline: 0;
}
tbody tr:hover .instagram-table-link:hover, tbody tr:hover .instagram-table-link:focus-visible,
tbody tr:hover .shopify-table-link:hover, tbody tr:hover .shopify-table-link:focus-visible {
  background: var(--black);
  color: var(--white);
}
.graph-table-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 2px;
  color: inherit;
}
.graph-table-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}
.graph-table-link:hover, .graph-table-link:focus-visible {
  background: var(--white);
  color: var(--black);
  outline: 0;
}
tbody tr:hover .graph-table-link:hover, tbody tr:hover .graph-table-link:focus-visible {
  background: var(--black);
  color: var(--white);
}
.account-actions .graph-table-link {
  width: 52px;
  height: 52px;
  border: 0.5px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
}
.account-actions .graph-table-link svg { width: 22px; height: 22px; stroke-width: 1.5; }
.graph-table-link__label { display: none; }
.account-actions .graph-table-link:disabled {
  border-style: dashed;
  background: var(--black);
  color: var(--white);
  cursor: default;
}

/* Save, on the card: the bookmark fills while the account is saved. */
.account-save svg path { fill: none; stroke-linejoin: round; }
.account-save[aria-pressed="true"] svg path { fill: currentColor; }
.account-save:disabled { cursor: progress; }

/* Network › Saved: one row per saved account, its name opening it in the graph. */
.saved-accounts { margin: 0; padding: 0; list-style: none; border-top: 0.5px solid var(--white); }
.saved-accounts__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--white);
}
.saved-accounts__page { display: grid; gap: 4px; min-width: 0; }
.saved-accounts__name { font-size: 24px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.saved-accounts__name:hover, .saved-accounts__name:focus-visible { text-decoration: underline; text-underline-offset: 5px; outline: 0; }
.saved-accounts__title, .saved-accounts__date { font-size: 13px; overflow-wrap: anywhere; }
.saved-accounts__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.saved-accounts__actions .graph-table-link { width: 44px; height: 44px; border: 0.5px solid currentColor; border-radius: 50%; }

/* The card's "Add to" pill: the category dropdown, with its choice named. */
.row-category--large { justify-items: stretch; }
.row-category--large .row-category-trigger { width: 100%; height: 52px; }
.row-category--large .row-category-select {
  width: 100%;
  height: 52px;
  padding: 0 34px 0 18px;
  color: inherit;
  font-size: 16px;
}
.row-category-chevron {
  position: absolute;
  right: 14px;
  display: inline-flex;
  pointer-events: none;
}
.row-category-chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* The three addressable account lists use the shared segmented control. */
.account-tabs[hidden] { display: none; }
.account-tabs {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 18px;
}
.account-tab__count { font-size: 11px; font-variant-numeric: tabular-nums; }

/* The account page's bar: the view, then the account. */
#view-breadcrumb { display: inline-flex; align-items: center; gap: 0.5em; min-width: 0; }
.app-breadcrumb__account { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* On an account's page there is room below the card: the three actions
   stack at the card's full width, and the power-up's arrows split it. */
.ranking-app.is-account .account-actions { grid-template-columns: 1fr; gap: 10px; }
.ranking-app.is-account .account-actions .vote-control { display: flex; width: 100%; }
.ranking-app.is-account .account-actions .vote-control--large .vote-arrow {
  flex: 1 1 0;
  width: auto;
  height: 42px;
  border-radius: 999px;
}
.ranking-app.is-account .account-actions .graph-table-link { width: 100%; gap: 10px; border-radius: 999px; }
.ranking-app.is-account .account-actions .graph-table-link__label { display: inline; }
/* Account cards open their dedicated table page. */
.account-hero.is-link { cursor: pointer; }
.account-hero.is-link:hover { background: var(--white); color: var(--black); }
.ranking-app.is-account .title-line { min-height: 0; }

/* An account's page on a wide window: the lists at the left, the card at the
   right, standing where the bar ends while the lists scroll. Sticky, not
   fixed: the open menu's blur is a filter on the page, which would make the
   page, not the window, a fixed card's frame. */
@media (min-width: 1100px) {
  .ranking-app.is-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 360px);
    grid-template-areas: "head head" "tabs ." "list panel" "scroll scroll";
    column-gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }
  .ranking-app.is-account > .app-head { grid-area: head; }
  .ranking-app.is-account > .account-tabs { grid-area: tabs; }
  .ranking-app.is-account > #content { grid-area: list; min-width: 0; }
  .ranking-app.is-account > .account-panel {
    grid-area: panel;
    position: sticky;
    top: calc(var(--site-menu-pad-y) * 2 + var(--site-menu-font-size) * 1.5 + 12px);
    max-width: none;
    margin: 0;
  }
  .ranking-app.is-account > .app-list-scroll { grid-area: scroll; }
  /* Beside the card the lists are narrower, so their columns take fixed
     widths and the account's name takes the rest. */
  .ranking-app.is-account table { min-width: 700px; }
  .ranking-app.is-account :is(th, td) { padding-inline: 10px; }
  .ranking-app.is-account thead th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
  .ranking-app.is-account .rank-column { width: 60px; }
  .ranking-app.is-account .metric-column { width: 84px; }
  .ranking-app.is-account .power-column { width: 136px; }
  .ranking-app.is-account .category-column { width: 60px; }
  .ranking-app.is-account .links-column { width: 100px; }
}

/* The graph, where Network opens, is the window's background: a black stage
   fixed behind everything, the bar and the menu drawn over it. The page on
   top keeps the header (search, status) and the account's card, and lets the
   pointer through to the graph everywhere else. It is exactly one window
   tall, so nothing scrolls and the card can sit on the window's floor. The
   renderer draws into the canvas box and lays its name label over it. */
.network-graph {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}
.network-graph__canvas { position: absolute; inset: 0; }
.network-graph .float-tooltip-kap {
  padding: 8.1px 10.8px;
  box-sizing: border-box;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-size: 21.6px;
  line-height: 1;
}
body:has(> .network-graph) .ranking-app {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  height: 100svh;
  padding-bottom: 0;
  pointer-events: none;
}
body:has(> .network-graph) :is(#account-panel, #content > *) { pointer-events: auto; }
body:has(> .network-graph) :is(.app-footer, .site-footer, .app-list-scroll) { display: none; }
/* The focused account's card: the account page's card, pinned to the
   window's bottom-right corner (owner, 2026-09-25) in one column, with the way to its table
   beside the name. It stays inside the page, not fixed, so the menu's blur
   (a filter on the page) neither misses it nor moves it. */
body:has(> .network-graph) #account-panel {
  position: absolute;
  bottom: 24px;
  right: 0;
  width: min(440px, 100%);
  max-height: calc(100svh - 280px);
  overflow-y: auto;
  margin: 0;
}
body:has(> .network-graph) #account-hero h2 { font-size: 34px; }
/* Signed out, the gate reads straight over the graph's outline. */
body:has(> .network-graph) .gate-card { max-width: 560px; margin: 0; padding: 24px 0 28px; }
/* The open menu blurs the page; the graph is the page's background, so it
   blurs with it. */
@media (min-width: 800px) {
  body:has(.site-nav:hover) > .network-graph,
  body:has(:is(.site-nav, .site-header):focus-within) > .network-graph {
    filter: blur(12px);
    transition: filter 300ms ease;
  }
}

@media (max-width: 900px) {
  .title-line { align-items: end; }
  .status { max-width: 260px; }
}

@media (max-width: 620px) {
  /* On a phone the card spans the window, so it is as short as it can be:
     the four scores on one row, the vote beside the identity. */
  body:has(> .network-graph) #account-panel {
    bottom: 14px;
    max-height: calc(100svh - 320px);
  }
  body:has(> .network-graph) #account-hero .eyebrow { display: none; }
  body:has(> .network-graph) #account-hero h2 { font-size: 26px; }
  body:has(> .network-graph) .score-cell strong { font-size: 26px; }
  /* The bar is short on a phone: the account's name stands for the view, and stops short of the menu button. */
  #view-breadcrumb:has(.app-breadcrumb__account) { max-width: calc(100vw - 230px); }
  #view-breadcrumb :is(.app-breadcrumb__view, .app-breadcrumb__view + .app-breadcrumb__dot) { display: none; }
  .account-tabs { overflow-x: auto; }
  .account-tab { flex: 0 0 auto; gap: 6px; font-size: 18px; }
  .app-head { padding-top: 18px; }
  .title-line { min-height: 138px; display: block; }
  .status { max-width: none; margin-top: 18px; text-align: left; font-size: 13px; }
  .search-control { flex-basis: 100%; }
  .outline-button { flex: 0 0 auto; }
  .app-table :is(th, td) { padding-left: 12px; padding-right: 12px; }
}

/* The account page's entrance (app.js `enter`): short, quick steps on the
   curve the shell's menu panel comes down on. The loading line waits a beat,
   so a quick load never flashes it. */
@keyframes network-enter {
  from { opacity: 0; transform: translateY(14px); }
}
.is-entering { animation: network-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) var(--enter-delay, 0ms) both; }
.ranking-app.is-account .loading-card { animation: network-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .vote-feedback { animation: none; }
  .is-entering, .ranking-app.is-account .loading-card { animation: none; }
}

/* Fixed dimensions preserve the sparse card when an approved image is absent. */
.account-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;overflow:hidden;border-radius:50%;background:var(--surface-subtle,#f3f3f3);color:var(--text-secondary,#777);font-size:14px}
.account-avatar--focused{width:48px;height:48px;grid-row:1 / span 2;margin:0;font-size:20px}
.account-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.account-hero h2,.account-full-name{overflow-wrap:anywhere;min-width:0}

.account-identity{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:start}
.account-identity h2,.account-identity .account-full-name{grid-column:2;margin:0}
.account-identity a{color:inherit;text-decoration:none}
.account-identity a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Live content follows the focused node to the left, sharing its bottom edge. */
.graph-content-dock {
  position: absolute;
  inset: auto 0 24px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  pointer-events: none;
}
body:has(> .network-graph) .graph-content-dock #account-panel {
  position: relative;
  inset: auto;
  flex: 0 0 min(440px, 100%);
  margin: 0;
}
.graph-content-card {
  flex: 0 0 clamp(280px, 24vw, 360px);
  max-width: 100%;
  max-height: calc(100svh - 280px);
  overflow-y: auto;
  padding: 24px;
  border: 0;
  border-radius: var(--site-radius, 26px);
  background: #fff;
  pointer-events: auto;
  animation: graph-content-enter .42s ease-out both;
  animation-delay: var(--graph-card-delay, 0ms);
}
.graph-content-card.live-card--text-only { background: #fff; }
.graph-content-card .live-card__image { max-height: 240px; object-fit: cover; }
.graph-content-card .live-card__publication { z-index: auto; }
.graph-content-card .live-card__title { overflow-wrap: anywhere; }
@keyframes graph-content-enter {
  from { opacity: 0; transform: translate(18px, 14px); }
}
@media (max-width: 620px) {
  .graph-content-dock { bottom: 14px; gap: 14px; }
  .graph-content-card { flex-basis: min(320px, 88vw); max-height: calc(100svh - 320px); padding: 18px; }
  .graph-content-card .live-card__image { max-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .graph-content-card { animation: none; }
}

/* One shared Live card appears after the graph entrance, opposite its related entities. */
body:has(> .network-graph) .network-events {
  position: fixed;
  left: 24px;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 20;
  width: min(340px, calc((100vw - 190px) / 2));
  max-height: calc(100svh - 120px);
  color: #fff;
  pointer-events: none;
}
.network-events > *, .network-events :is(button, a) { pointer-events: auto; }
.network-events__heading { margin: 0; font-size: 20px; }
.network-events__status, .network-events__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.network-events__card-slot { min-height: 0; max-height: min(74svh, 720px); overflow-y: auto; border-radius: var(--site-radius, 26px); box-shadow: 0 20px 60px #000b; }
.network-events__card-slot[hidden] { display: none; }
.network-events__entity-dock { position: fixed; right: 24px; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 21; display: grid; gap: 10px; width: min(380px, calc((100vw - 190px) / 2)); max-height: min(74svh, 720px); overflow-y: auto; pointer-events: auto; }
.network-events__entity-dock[hidden] { display: none; }
.network-events__entity-dock .live-entity-card { color: #fff; transform-origin: bottom right; }
.network-events__entity-dock .live-entity-card:nth-child(2) { animation-delay: 80ms; }
@keyframes network-entity-enter { from { opacity: 0; transform: translate(22px, 8px); } }
.network-events :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.network-events__card-slot :focus-visible { outline-color: #fff; }
@media (max-width: 780px) {
  body:has(> .network-graph) .network-events { left: 12px; bottom: 96px; width: calc((100vw - 34px) / 2); max-height: 54svh; }
  .network-events__card-slot { max-height: 54svh; }
  .network-events__entity-dock { right: 12px; bottom: 96px; width: calc((100vw - 34px) / 2); max-height: 54svh; }

  .network-events__entity-dock .live-entity-children__face { width: 36px; height: 36px; flex-basis: 36px; }
  .network-events__entity-dock .live-entity-children__name { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .network-events__entity-dock .live-entity-card { animation: none; }
}

.account-hero { position: relative; }
.account-card-link { position: absolute; inset: 0; border-radius: inherit; }
.account-card-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.account-actions .card-out-link:last-child { justify-self: end; }
.account-actions .card-out-link:last-child .graph-table-link__label { display: none; }
body:has(> .network-graph) #account-hero { background: rgb(0 0 0 / 38%); border: var(--entity-border) solid #fff; backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }

@media (max-width: 780px) { .network-events__entity-dock .live-entity-children__link { min-height: 90px; padding: 16px; } }

body:has(> .network-graph) #account-panel { position: fixed; right: 24px; bottom: max(28px, env(safe-area-inset-bottom)); width: min(380px, calc((100vw - 190px) / 2)); max-height: min(74svh, 720px); }
@media (max-width: 780px) {
  body:has(> .network-graph) #account-panel { right: 12px; bottom: 96px; width: calc((100vw - 34px) / 2); max-height: 54svh; }
  body:has(> .network-graph) #account-hero h2 { font-size: 22px; }
  body:has(> .network-graph) #account-panel .account-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body:has(> .network-graph) #account-panel .vote-control { grid-column: 1 / -1; }
  body:has(> .network-graph) #account-panel .account-actions > * { min-width: 0; max-width: 100%; }
  body:has(> .network-graph) #account-panel .account-actions .row-category-trigger { grid-column: 1 / -1; }
}

/* Keep the selected summary visible until the original paid profile is actually ready. */
body:has(> .network-graph):has(#account-panel:not([hidden])) .network-events__entity-dock[data-selected-entity] { display: none; }
/* Panorama keeps the existing graph and controls in its containing card.
   The apex's fullscreen stage selectors above remain its own profile. */
.panorama-network-controls { position: relative; z-index: 22; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 24px; }
.panorama-network-controls .ds-segmented { max-width: 100%; overflow-x: auto; }
.panorama-network-controls .app-search-field { flex: 1 1 220px; min-width: 0; }
.panorama-network-controls .ds-segmented__item { min-height: 44px; }
.panorama-research-card .gate-card > .eyebrow { display: none; }
.panorama-research-card > .network-graph { position: absolute; inset: 0; }
.panorama-research-card:has(> .network-graph) { overflow: hidden; }
.panorama-research-card:has(> .network-graph) .ranking-app { position: relative; z-index: 1; height: calc(100% - 92px); padding-bottom: 0; pointer-events: none; }
.panorama-research-card:has(> .network-graph) :is(#account-panel, #content > *) { pointer-events: auto; }
.panorama-research-card:has(> .network-graph) .app-list-scroll { display: none; }
.panorama-research-card:has(> .network-graph) #account-panel { position: absolute; right: 24px; bottom: 24px; width: min(380px, calc((100% - 72px) / 2)); max-height: 70%; overflow-y: auto; margin: 0; }
.panorama-research-card:has(> .network-graph) .graph-content-dock #account-panel { position: relative; inset: auto; flex: 0 0 min(380px, 100%); }
.panorama-research-card:has(> .network-graph) .network-events { position: absolute; left: 24px; bottom: 24px; width: min(340px, calc((100% - 72px) / 2)); max-height: 74%; pointer-events: none; }
.panorama-research-card .network-events__entity-dock { position: absolute; right: 24px; bottom: 24px; width: min(380px, calc((100% - 72px) / 2)); max-height: 74%; }
.panorama-research-card:has(> .network-graph) .gate-card { max-width: 560px; margin: 0; padding: 24px 0; }
@media (max-width: 767px) {
  .panorama-network-controls { padding: 16px; }
  .panorama-research-card:has(> .network-graph) :is(#account-panel, .network-events__entity-dock) { right: 12px; bottom: 96px; width: calc((100% - 34px) / 2); max-height: 54%; }
  .panorama-research-card:has(> .network-graph) .network-events { left: 12px; bottom: 96px; width: calc((100% - 34px) / 2); max-height: 54%; }
}

[data-network-advanced] > .scout-page { width: 100%; padding: 0 24px 24px; margin: 0; background: transparent; }
@media (max-width: 767px) {
  [data-network-advanced] > .scout-page { padding-inline: 16px; }
}