/* ==========================================================================
   VIEWRANKER — the public window (viewranker.com)
   Cumulus skin over cumulus.css. This page ships to the open internet:
   no ops classes, no ops copy, nothing but the board.
   ========================================================================== */

.vr-shell { max-width: 1180px; margin: 0 auto; padding: 0 28px 44px; }

/* Top strip: brand lockup left, live pill right */
.vr-top { display: flex; justify-content: space-between; align-items: center; padding: 22px 0 28px; }
.vr-brand {
  display: flex; align-items: center; gap: 10px;
  font: 700 17px/1 var(--font-display); letter-spacing: .07em;
  color: inherit; text-decoration: none;
}
.vr-brand img { width: 26px; height: 26px; border-radius: 8px; box-shadow: var(--shadow-card); }
.vr-live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11.5px/1 var(--font); color: var(--blue);
  background: var(--blue-soft); border-radius: var(--r-pill); padding: 6px 11px;
}

/* Hero: the fleet number owns the page */
.vr-hero { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.vr-hero .stat-label { font: 500 12px/1.3 var(--font); color: var(--ink-2); }
.vr-hero-number {
  font: 700 54px/1 var(--font-display); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.vr-hero-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 10px; }
.vr-hero-right { margin-left: auto; padding-bottom: 7px; }
.vr-search-wrap { position: relative; }
.vr-search-wrap svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); pointer-events: none;
}
.vr-search-wrap input {
  width: 230px; padding: 9px 12px 9px 32px;
  background: var(--sheet); border: 1px solid var(--hairline);
  border-radius: var(--r-ctl); font: 400 13.5px/1.4 var(--font); color: var(--ink);
  outline: none; transition: border-color var(--t-fast) var(--ease);
}
.vr-search-wrap input:focus { border-color: var(--blue); }
.vr-search-wrap input::placeholder { color: var(--ink-4); }

.vr-fresh { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin: 8px 2px 16px; }

/* The board: one white panel, big one-line rows, nothing ever wraps */
.vr-panel { padding: 4px 22px; }
.vr-col-headers {
  display: grid; grid-template-columns: 300px 44px minmax(0, 2fr) 112px 92px 92px 92px;
  gap: 12px; align-items: center; padding: 12px 0 9px;
  border-bottom: 1px solid var(--hairline);
  font: 500 11.5px/1.3 var(--font); color: var(--ink-3); white-space: nowrap;
}
.vr-col-headers .num-col { text-align: right; }
.vr-col-headers .sort-col { color: var(--ink); }
.vr-col-headers .sort-col::after { content: " ↓"; color: var(--blue); font-weight: 600; }
.vr-row {
  display: grid; grid-template-columns: 300px 44px minmax(0, 2fr) 112px 92px 92px 92px;
  gap: 12px; align-items: center; padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast) var(--ease);
}
.vr-row:last-child { border-bottom: 0; }
.vr-row:hover { background: rgba(24, 25, 27, .02); }

/* The creator IS the profile link: photo + handle click through */
.vr-creator {
  display: flex; align-items: center; gap: 11px;
  min-width: 0; white-space: nowrap;
  color: inherit; text-decoration: none;
}
.vr-creator:hover { text-decoration: none; }
.vr-creator:hover .vr-handle { color: var(--blue); }
.vr-creator .avatar { width: 44px; height: 44px; font-size: 15px; flex-shrink: 0; }
.vr-handle {
  font: 600 15px/1.2 var(--font); letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
  transition: color var(--t-fast) var(--ease);
}

/* Quiet monochrome platform mark (the Formazzy glyphs) */
.vr-plat { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.vr-plat svg { display: block; }

.vr-link {
  font: 400 14px/1.4 var(--font); color: var(--ink-2); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.vr-link:hover { color: var(--blue); text-decoration: none; }
.vr-link--bare { color: var(--ink-2); font: 500 13.5px/1.4 var(--font); }
.vr-link--bare::after { content: " ↗"; color: var(--ink-4); }
.vr-link--bare:hover { color: var(--blue); }
.vr-link--bare:hover::after { color: var(--blue); }
.vr-num-cell {
  text-align: right; font: 500 14.5px/1 var(--font);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vr-vel { text-align: right; white-space: nowrap; }

/* Avatars carry the real profile photo; tinted initials only when none exists */
.avatar { position: relative; display: inline-grid; place-items: center; overflow: hidden; }
.avatar i { font-style: normal; line-height: 1; letter-spacing: .01em; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The velocity number: bare, huge, tabular — red past the viral bar,
   deep green while it moves. The loudest voice on the board. */
.vel-num {
  font: 700 17px/1 var(--font-display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vel-num--md { font-size: 22px; }
.vel-num--lg { font-size: 32px; letter-spacing: -.025em; }
.vel-viral { color: var(--bad); }
.vel-hot { color: var(--ok); }

.vr-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font: 400 13.5px/1.5 var(--font); }

/* Splash: brand + waves while the first payload is in flight */
#vr-splash {
  position: fixed; inset: 0; z-index: 99; background: var(--canvas);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding-bottom: 60px;
  transition: opacity .45s var(--ease);
}
#vr-splash.gone { opacity: 0; pointer-events: none; }
.vr-splash-mark { width: 84px; height: 84px; border-radius: 26px; object-fit: cover; box-shadow: var(--shadow-card); }
.vr-splash-name { font: 700 26px/1.15 var(--font-display); letter-spacing: .08em; }
.vr-retry {
  padding: 12px 26px; border-radius: var(--r-pill); background: var(--blue);
  font: 600 14px/1 var(--font); color: #fff; cursor: pointer; border: 0;
}

/* Tighter desktops: drop Comments, then Views — rows stay one line */
@media (max-width: 1160px) {
  .vr-col-headers, .vr-row { grid-template-columns: 265px 40px minmax(0, 1.6fr) 106px 88px 88px; gap: 11px; }
  .vr-hide-1 { display: none; }
}
@media (max-width: 980px) {
  .vr-col-headers, .vr-row { grid-template-columns: 235px 36px minmax(0, 1.2fr) 100px 84px; gap: 10px; }
  .vr-hide-2 { display: none; }
  .vr-plat svg { width: 15px; height: 15px; }
  .vr-creator .avatar { width: 40px; height: 40px; }
  .vr-hero-number { font-size: 46px; }
}

/* ==========================================================================
   MOBILE — the phone leaderboard
   ========================================================================== */
@media (max-width: 640px) {
  .vr-desktop { display: none !important; }
  * { -webkit-tap-highlight-color: transparent; }
  input { font-size: 16px !important; }

  .vm-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: max(16px, env(safe-area-inset-top, 16px)) 20px 0;
  }
  .vm-brand { display: flex; align-items: center; gap: 8px; font: 700 16px/1 var(--font-display); letter-spacing: .06em; }
  .vm-brand img { width: 24px; height: 24px; border-radius: 8px; }
  .vm-live { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--font); color: var(--blue); background: var(--blue-soft); border-radius: var(--r-pill); padding: 6px 11px; }

  .vm-hero { text-align: center; padding: 28px 20px 18px; }
  .vm-hero-number { font: 700 62px/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
  .vm-hero-label { font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 10px; }
  .vm-substats { display: flex; justify-content: center; gap: 34px; padding: 2px 20px 20px; }
  .vm-substat { text-align: center; }
  .vm-substat-value { font: 700 24px/1.05 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .vm-substat-label { font: 500 10.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding-top: 5px; }

  .vm-search { position: relative; margin: 0 16px 16px; }
  .vm-search svg {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--ink-4); pointer-events: none;
  }
  .vm-search input {
    width: 100%; padding: 11px 14px 11px 36px;
    background: var(--sheet); border: 1px solid var(--hairline);
    border-radius: var(--r-ctl); font: 400 15px/1.4 var(--font); color: var(--ink);
    outline: none; box-sizing: border-box;
  }
  .vm-search input:focus { border-color: var(--blue); }
  .vm-search input::placeholder { color: var(--ink-4); }

  .vm-card {
    background: var(--sheet); border: 1px solid var(--hairline);
    border-radius: var(--r-panel); box-shadow: var(--shadow-card);
    margin: 0 16px; padding: 4px 16px;
  }
  .vm-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    color: inherit; text-decoration: none;
  }
  .vm-row:last-child { border-bottom: 0; }
  .vm-row .persona { flex: 1; min-width: 0; }
  .vm-row .persona .avatar { width: 44px; height: 44px; font-size: 15px; }
  .vm-row-sub { display: block; font: 400 12px/1.3 var(--font); color: var(--ink-2); padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vm-vel { text-align: right; flex-shrink: 0; }

  .vm-all-header { display: flex; justify-content: space-between; align-items: baseline; padding: 26px 20px 8px; }
  .vm-all-title { font: 650 16px/1.25 var(--font-display); }
  .vm-all-count { font: 500 12px/1.3 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .vm-all-list { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .vm-all-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    color: inherit; text-decoration: none;
  }
  .vm-all-row:last-child { border-bottom: 0; }
  .vm-all-row-info { flex: 1; min-width: 0; }
  .vm-all-row-name { font: 600 13.5px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vm-all-row-meta { font: 400 11.5px/1.3 var(--font); color: var(--ink-3); padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .vm-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font: 400 13.5px/1.5 var(--font); }
}
@media (min-width: 641px) {
  #vrMobile { display: none !important; }
}