/* AppOrbit UI — restored from the supplied product designs.
 * The visual system follows the reference screens; live fields and states follow
 * the implemented dataset so the interface never fabricates unavailable data.
 */

body {
  background:
    radial-gradient(circle at 82% 8%, color-mix(in oklch, var(--color-gradient-sky) 28%, transparent) 0, transparent 25rem),
    var(--color-paper);
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.035em;
}

h1 { font-size: var(--text-display-small); line-height: 1.04; }
body[data-page="charts"] h1,
body[data-page="trending"] h1,
body[data-page="data"] h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

.site-header {
  position: relative;
  z-index: var(--z-raised);
  display: block;
  width: 100%;
  max-width: none;
  min-height: 4rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: color-mix(in oklch, var(--color-paper-raised) 94%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  width: min(100%, var(--page-max));
  min-height: 4rem;
  gap: var(--space-sm);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.wordmark {
  gap: var(--space-sm);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.wordmark__mark { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; }

.primary-nav { gap: var(--space-2xs); }
.primary-nav a,
.menu-toggle {
  min-height: 2.25rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}

.primary-nav a { padding-inline: var(--space-sm); }
.primary-nav a[aria-current="page"] {
  border-color: transparent;
  background: var(--color-paper-accent);
  color: var(--color-accent-strong);
}

.menu-toggle {
  border-color: var(--color-rule);
  background: var(--color-paper-raised);
}

.github-link {
  min-height: 2.4rem;
  border-color: var(--color-rule);
  background: var(--color-paper-muted);
  box-shadow: none;
  color: var(--color-ink-soft);
}

.github-link:hover { border-color: var(--color-rule-strong); background: var(--color-paper-accent); color: var(--color-accent-strong); }

.page { padding-block-end: var(--space-2xl); }

.hero {
  position: relative;
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}

.hero--compact { padding-block: clamp(2rem, 4vw, 3.5rem) var(--space-xl); }
.hero__copy { position: relative; z-index: var(--z-base); }
.hero__copy > p:not(.kicker) {
  max-width: 62ch;
  margin-block-end: var(--space-lg);
  color: var(--color-muted);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.55;
}

.kicker {
  margin-block-end: var(--space-sm);
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.button {
  min-height: 2.65rem;
  padding-inline: var(--space-md);
  border-color: var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper-raised);
  box-shadow: 0 0.25rem 0.75rem var(--color-shadow);
  font-size: var(--text-sm);
}

.button--primary {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-accent-ink);
}

.button--secondary { background: color-mix(in oklch, var(--color-paper-raised) 90%, transparent); }

.hero-visual {
  position: relative;
  min-width: 0;
  height: 17rem;
  align-self: center;
}
.hero-globe { width: 100%; height: 100%; object-fit: contain; }
.hero-visual > p {
  position: absolute;
  right: 0;
  bottom: 1rem;
  width: 10.5rem;
  margin: 0;
  padding: .85rem .8rem .85rem 2.4rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: .65rem;
  background: #ffffffd9;
  color: var(--color-muted);
  font-size: .65rem;
  line-height: 1.55;
  box-shadow: 0 3px 10px #24477904;
}
.hero-visual > p::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  width: 3px;
  height: 9px;
  background: #526992;
  box-shadow: 5px -4px #526992, 10px -8px #526992;
}

.surface,
.filter-panel,
.document-section,
.stat-card {
  border-color: var(--color-rule);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-paper-raised) 96%, transparent);
  box-shadow: 0 0.4rem 1.5rem var(--color-shadow);
}

.filter-panel {
  gap: var(--space-md);
  margin-block-end: var(--space-md);
  padding: var(--space-md);
}

.store-tabs {
  max-width: 20rem;
  padding: 0.2rem;
  border-color: var(--color-rule-strong);
  border-radius: var(--radius-md);
  background: var(--color-paper-muted);
}

.store-tabs button,
.range-tabs button { border-radius: var(--radius-sm); }
.store-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); }
.store-tab-icon { width: 1.4rem; height: 1.4rem; border-radius: 0.35rem; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 800; }
.store-tab-icon--apple { background: var(--color-accent); color: var(--color-accent-ink); }
.store-tabs button[aria-pressed="true"] .store-tab-icon--apple { background: var(--color-accent-ink); color: var(--color-accent); }
.store-tab-icon--play { background: conic-gradient(from 90deg, var(--color-success) 0 25%, var(--color-warning) 0 50%, var(--color-error) 0 75%, var(--color-accent) 0); clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0; }
.store-tabs button[aria-pressed="true"],
.range-tabs button[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0.25rem 0.75rem color-mix(in oklch, var(--color-accent) 22%, transparent);
}

.field > span { color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: 600; }
.field select {
  border-color: var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-raised);
  font-size: var(--text-sm);
}

.capture-status { color: var(--color-muted); font-size: var(--text-xs); }
.capture-status::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-inline-end: var(--space-xs); border-radius: 50%; background: var(--color-success); }
.charts-layout,
.detail-layout { gap: var(--space-md); }

.section-heading {
  min-height: 3.4rem;
  padding: var(--space-sm) var(--space-md);
  border-color: var(--color-rule);
}

.section-heading h2 { margin-block-end: 0.12rem; }
.section-heading p { color: var(--color-muted); }
.section-heading__context { color: var(--accent-strong, var(--color-accent-strong)) !important; }

.status-badge {
  border-color: var(--color-rule);
  background: var(--color-paper-muted);
  letter-spacing: 0.04em;
}

.table-context { background: var(--color-paper-muted); }
.data-table th,
.data-table td {
  padding: 0.58rem var(--space-sm);
  border-color: var(--color-rule);
  font-size: var(--text-sm);
}

.data-table th {
  background: var(--color-paper-muted);
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.data-table tbody tr { transition: background-color var(--dur-short) var(--ease-out); }
.ranking-table .rank-cell { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; }
.app-icon { width: 2.45rem; height: 2.45rem; border-radius: var(--radius-sm); }
.app-row__name { color: var(--color-ink); }
.rank-change { justify-content: flex-start; padding: 0; border-radius: 0; background: transparent; }
.rank-chart__area { fill: color-mix(in oklch, var(--color-gradient-sky) 38%, var(--color-paper-raised)); }
.rank-chart__line { stroke: var(--color-accent); }
.rank-chart__point { stroke: var(--color-accent); }
.rating-star { color: #7293c8; }
.rating-stars { width: 70px; height: 14px; vertical-align: -2px; }
.rating-stars__empty { fill: #eaf0fa; }
.rating-stars__fill { fill: #7293c8; }
.rating-value { white-space: nowrap; }
.rank-chart__label { fill: var(--color-muted); font: 11px var(--font-body); }

.metric-grid { padding-inline: var(--space-md); }
.metric strong,
.stat-card strong,
.data-summary strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.metric { position: relative; padding-block: var(--space-md); }
.metric::before {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  margin-block-end: var(--space-2xs);
  border-radius: 50%;
  background: var(--color-paper-accent);
}

.data-callout { border-color: color-mix(in oklch, var(--color-accent) 28%, var(--color-rule)); background: var(--color-paper-accent); }
.data-callout__mark { background: var(--color-accent); color: var(--color-accent-ink); }

.breadcrumb { padding-block-start: var(--space-md); color: var(--color-muted); }
.breadcrumb a { color: var(--color-accent-strong); }
.app-header { padding-block: var(--space-md) var(--space-lg); }
.app-identity__icon,
.app-icon-placeholder {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-paper-accent);
  font-family: var(--font-display);
  font-weight: 700;
}

.app-identity h1 { font-size: clamp(2rem, 3vw, 3rem); }
.tag { border-color: transparent; background: var(--color-paper-accent); color: var(--color-accent-strong); }
.stat-strip { gap: var(--space-sm); }
.stat-card { padding: var(--space-md); }
.range-tabs { border-radius: var(--radius-md); background: var(--color-paper-muted); }
.metadata-grid dd { color: var(--color-ink); }
.detail-insights article { padding-block: var(--space-sm); }

.mover-grid { gap: var(--space-sm); }
.mover-panel .section-heading { min-height: 4rem; }
.mover-app { min-height: 3.25rem; }
.mover-app__rank { color: var(--color-accent-strong); }
.method-note { border-color: color-mix(in oklch, var(--color-accent) 22%, var(--color-rule)); background: var(--color-paper-accent); }

.document-page { max-width: var(--page-max); }
.document-hero { max-width: 64rem; padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-2xl); }
.document-hero p:not(.kicker) { max-width: 64ch; font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1.55; }
.document-section { margin-block-end: var(--space-md); }
.prose { padding-block: var(--space-lg); }
.prose p { color: var(--color-muted); line-height: 1.7; }
.limitation-grid article { box-shadow: 0 0.4rem 1.5rem var(--color-shadow); }

.data-page-hero {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-xl);
}

.data-page-hero .document-hero { max-width: none; padding: 0; }
.data-page-hero .hero-visual { min-height: 16rem; }
.data-primary-grid { display: grid; gap: var(--space-md); margin-block-end: var(--space-md); }
.dataset-explorer,
.data-docs { overflow: hidden; }
.dataset-list,
.docs-list { margin: 0; padding: 0; list-style: none; }
.dataset-link,
.docs-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 4.25rem;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-thin) solid var(--color-rule);
  color: var(--color-ink-soft);
  text-decoration: none;
}

.dataset-list li:last-child .dataset-link,
.docs-list li:last-child .docs-link { border-bottom: 0; }
.dataset-link__icon,
.docs-link__icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-paper-accent);
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 800;
}

.dataset-link strong,
.dataset-link small,
.docs-link strong,
.docs-link small { display: block; }
.dataset-link strong,
.docs-link strong { color: var(--color-ink); font-size: var(--text-sm); }
.dataset-link small,
.docs-link small { margin-block-start: 0.15rem; color: var(--color-muted); font-size: var(--text-xs); }
.dataset-link__arrow { color: var(--color-accent-strong); font-size: var(--text-md); }
.license-note { margin: 0; padding: var(--space-md); border-top: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-muted); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.55; }
.license-note strong { color: var(--color-ink); }

.data-summary {
  gap: 0;
  margin-block-end: var(--space-md);
  overflow: hidden;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper-raised);
  box-shadow: 0 0.4rem 1.5rem var(--color-shadow);
}

.data-summary article {
  position: relative;
  padding: var(--space-md);
  border-block: 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

.data-summary article::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 0.28rem;
  margin-block-end: var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.data-summary article:nth-child(2)::before { background: var(--color-success); }
.data-summary article:nth-child(3)::before { background: var(--color-warning); }
.data-summary article:nth-child(4)::before { background: var(--color-gradient-lavender); }
.data-chart { padding: var(--space-md); }
.chart-row__track { height: 0.42rem; background: var(--color-paper-accent); }
.chart-row__bar { background: var(--color-accent); }
.data-chart--coverage .chart-row__bar { background: var(--color-gradient-sky); }
.data-chart--developers .chart-row__bar { background: var(--color-gradient-lavender); }
.chart-legend i,
.market-bar { background: var(--color-accent); }
.chart-legend i[data-series="google-play"],
.market-bar[data-series="google-play"] { background: var(--color-success); }
.market-bars { border-color: var(--color-rule); }

.site-footer {
  max-width: none;
  padding-inline: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter)));
  background: color-mix(in oklch, var(--color-paper-raised) 80%, transparent);
}

.site-footer .wordmark { font-family: var(--font-display); }
.footer-actions > a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding-inline: var(--space-sm);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-paper-accent);
  color: var(--color-accent-strong);
  font-weight: 700;
}

.timezone-toggle { color: var(--color-muted); }

@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover { background: var(--color-hover); }
  .dataset-link:hover,
  .docs-link:hover { background: var(--color-paper-muted); }
  .button--primary:hover { background: var(--color-accent-strong); }
}

@media (min-width: 40rem) {
  .site-header__inner { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .data-summary article { border-right: var(--rule-thin) solid var(--color-rule); border-bottom: 0; }
  .data-summary article:nth-child(2n) { border-right: 0; }
}

@media (min-width: 60rem) {
  .hero,
  .data-page-hero { grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 0.85fr); }
  .hero__copy { align-self: center; }
  .hero-visual { min-height: 20rem; }
  body[data-page="charts"] .filter-panel { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  body[data-page="charts"] .filter-panel .store-tabs { grid-column: 1; grid-row: 1; }
  body[data-page="charts"] .filter-panel .capture-status { grid-column: 3; grid-row: 1; min-height: 2.25rem; padding: 0 var(--space-sm); display: inline-flex; align-items: center; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-muted); white-space: nowrap; }
  body[data-page="charts"] .filter-panel .filter-grid { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .charts-layout { grid-template-columns: minmax(0, 2.2fr) minmax(17rem, 0.72fr); align-items: start; }
  .charts-layout > .insights-column { grid-template-columns: minmax(0, 1fr); }
  .charts-layout > .insights-column .data-callout { grid-column: auto; }
  .data-primary-grid { grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.8fr); align-items: start; }
  .data-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .data-summary article,
  .data-summary article:nth-child(2n) { border-right: var(--rule-thin) solid var(--color-rule); }
  .data-summary article:last-child { border-right: 0; }
}

@media (min-width: 76rem) {
  .site-header__inner { min-height: 4.25rem; }
  .charts-layout { grid-template-columns: minmax(0, 2.45fr) minmax(18rem, 0.72fr); }
  .detail-layout { grid-template-columns: minmax(0, 1.65fr) minmax(22rem, 0.82fr); }
  .mover-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 59.999rem) {
  .hero-visual,
  .data-page-hero .hero-visual { min-height: 14rem; }
  .orbit-stage { inset-inline: 0; }
}

@media (max-width: 39.999rem) {
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; }
  .primary-nav { grid-column: 1 / -1; }
  .github-link__context { display: none; }
  .hero { padding-block-start: var(--space-xl); }
  .hero-visual { min-height: 12rem; }
  .store-node { width: 4rem; min-height: 4rem; }
  .orbit-core { width: 7rem; height: 5rem; }
  .data-summary article { border-right: 0; }
  .dataset-link,
  .docs-link { grid-template-columns: auto minmax(0, 1fr); }
  .dataset-link__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .data-table tbody tr { transition: none; }
}

/* Header proportions follow the supplied desktop reference. */
.ranking-surface > .filter-panel { margin: 0; border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; box-shadow: none; background: transparent; }
body[data-page="charts"] .ranking-surface > .filter-panel .capture-status { white-space: normal; max-width: 22rem; line-height: 1.4; }
body[data-page="charts"] .ranking-surface > .filter-panel .store-tabs { min-width: 16rem; }
@media (min-width: 60rem) and (max-width: 75.999rem) {
  body[data-page="charts"] .ranking-surface > .filter-panel { grid-template-columns: minmax(0, 1fr); }
  body[data-page="charts"] .ranking-surface > .filter-panel .capture-status { grid-column: 1; grid-row: 3; }
  body[data-page="charts"] .ranking-surface > .filter-panel .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-header { min-height: 3.75rem; border-bottom-color: #f0f3f8; background: #ffffffed; }
.site-header__inner { min-height: 3.75rem; }
.wordmark { font-size: 1.45rem; gap: .6rem; letter-spacing: -.055em; }
.github-link { background: var(--color-paper-muted); border-color: var(--color-rule); border-radius: .6rem; min-height: 2.1rem; }
.hero, .hero--compact, .data-page-hero { gap: 1rem; padding-block: 1.4rem 1.5rem; }
.hero__copy h1, body[data-page="charts"] h1, body[data-page="trending"] h1, body[data-page="data"] h1 {
  font-size: clamp(2rem, 3.55vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.045em;
  margin-bottom: .7rem;
}
.hero__copy > p:not(.kicker), .document-hero p:not(.kicker) { font-size: 1rem; line-height: 1.5; color: #526185; margin-bottom: 1.3rem; }
.kicker { color: #39659d; font-size: .65rem; letter-spacing: .12em; margin-bottom: .9rem; }
.hero__actions { align-items: center; }
.button { border-radius: .65rem; min-height: 2.65rem; box-shadow: 0 3px 8px #24395c05; }
.button--primary { background: linear-gradient(135deg, #111f43, #09152f); border-color: #182648; color: #fff; }
.button--secondary { background: #ffffffd9; border-color: var(--color-rule-strong); }
.store-tabs { border-color: var(--color-rule-strong); }
.store-tabs button[aria-pressed="true"], .range-tabs button[aria-pressed="true"] {
  background: linear-gradient(180deg, #377dff, #2868e9);
  border-color: #2b68e6;
  color: #fff;
  box-shadow: inset 0 1px 1px #ffffff40, 0 2px 5px #2367e71a;
}
.store-tab-icon--apple, .store-tabs button[aria-pressed="true"] .store-tab-icon--apple {
  background: none; width: 1.5rem; height: 1.5rem; border-radius: 0; object-fit: contain;
}
.store-tab-icon--play { background: none; clip-path: none; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.surface, .filter-panel, .document-section, .stat-card { background: #ffffffed; box-shadow: 0 5px 18px #28477103; }
.metric-grid { gap: .65rem; padding: .8rem; }
.metric, .metric:nth-child(odd), .metric:nth-child(even) {
  padding: .8rem; border: 1px solid var(--color-rule); border-radius: .6rem; position: relative;
}
.metric::before { position: absolute; right: .75rem; top: .85rem; display: grid; place-items: center; width: 2rem; height: 2rem; font-size: 1.15rem; }
.metric:nth-child(1)::before { content: "+"; background: var(--color-success-soft); color: var(--color-success); }
.metric:nth-child(2)::before { content: "↗"; background: var(--color-success-soft); color: var(--color-success); }
.metric:nth-child(3)::before { content: "↓"; background: var(--color-error-soft); color: var(--color-error); }
.metric:nth-child(4)::before { content: "◎"; background: var(--color-paper-accent); color: var(--color-accent); }
.metric strong { padding-right: 2rem; font-size: 1.4rem; }
.data-callout { background: #ffffffed; border-color: var(--color-rule); }
.data-callout__mark { background: var(--color-paper-accent); color: var(--color-accent); }
.trend-preview .rank-chart__line, .trend-preview .rank-chart__point { stroke: var(--color-success); }
.trend-preview .rank-chart__area { fill: #e4f6f0; }
@media (min-width: 40rem) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(1.5rem, 4vw, 4rem); }
  .primary-nav, .primary-nav[data-open] { justify-self: start; }
}
@media (min-width: 60rem) {
  .hero, .data-page-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); }
  .hero-visual, .data-page-hero .hero-visual { min-height: 0; height: 17rem; }
}
@media (max-width: 59.999rem) {
  .hero-visual, .data-page-hero .hero-visual { min-height: 0; height: 15rem; max-width: 36rem; width: 100%; justify-self: center; }
}
@media (max-width: 39.999rem) {
  .wordmark { font-size: 1.15rem; gap: .35rem; }
  .wordmark__mark { width: 1.9rem; height: 1.9rem; }
  .github-link { padding-inline: .5rem; }
  .github-link > span:last-child { display: none; }
  .hero-visual > p { width: 9rem; font-size: .6rem; bottom: 0; }
}

.mobile-detail-cell { display: none; }
@media (max-width: 39.999rem) {
  .ranking-table tr {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: var(--space-sm);
    padding: .7rem var(--space-md);
  }
  .ranking-table tr > td {
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .ranking-table tr > td::before {
    display: none;
    content: none;
  }
  .ranking-table tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ranking-table tr > td:nth-child(2) { display: block; grid-column: 2; grid-row: 1; }
  .ranking-table tr > td:nth-child(2)::before { display: none; }
  .ranking-table tr > td:nth-child(3) { display: block; grid-column: 3; grid-row: 1; }
  .ranking-table tr > td:nth-child(n+4):not(.mobile-detail-cell) { display: none; }
  .ranking-table tr > td.mobile-detail-cell { display: block; grid-column: 1 / -1; }
  .ranking-table .rank-cell {
    display: block;
    width: auto;
    min-width: 1.75rem;
    font-size: var(--text-base);
  }
  .ranking-table .app-row { gap: .6rem; }
  .ranking-table .app-icon { width: 2.35rem; height: 2.35rem; }
  .ranking-table .app-row__identity { display: block; }
  .ranking-table .app-row__developer { display: none; }
  .ranking-table .app-row__name {
    display: block;
    max-width: 100%;
    overflow: visible;
    font-size: var(--text-sm);
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .ranking-table .rank-change { min-width: 0; font-size: var(--text-xs); }
  .ranking-table .mobile-detail-cell details > summary {
    display: flex;
    min-height: 2rem;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
    margin-top: .55rem;
    padding-top: .45rem;
    border-top: 1px solid var(--color-rule);
    color: var(--color-muted);
    cursor: pointer;
    font-size: var(--text-xs);
    list-style: none;
  }
  .ranking-table .mobile-detail-cell details > summary::-webkit-details-marker { display: none; }
  .ranking-table .mobile-detail-cell details > summary::before { content: "+"; color: var(--color-accent); font-size: var(--text-md); }
  .ranking-table .mobile-detail-cell details[open] > summary::before { content: "−"; }
  .ranking-table .mobile-detail-cell dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem .8rem;
    margin: .65rem 0 .2rem;
  }
  .ranking-table .mobile-detail-cell dl > div { min-width: 0; }
  .ranking-table .mobile-detail-cell dt { margin-bottom: .15rem; color: var(--color-muted); font-size: var(--text-xs); }
  .ranking-table .mobile-detail-cell dd { margin: 0; color: var(--color-ink-soft); font-size: var(--text-xs); overflow-wrap: anywhere; }
  .ranking-table .mobile-rating { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
  .ranking-table .mobile-rating .rating-stars { width: 3.6rem; height: .72rem; }
}