/* ==========================================================================
   VPS Providers — "market board" directory (Top VPS Hosting Providers)
   Studio theme (tokens.css): indigo --accent, teal --signal, Space Grotesk /
   Inter / JetBrains Mono. Everything scoped under .vps-board.
   ========================================================================== */

.vps-board{
  /* Local semantic tints derived from the brand palette, tuned for legible
     text on the light paper ground. */
  --vps-up:#0f8f74;      --vps-up-soft:rgba(77,184,168,.16);
  --vps-down:#c0392b;    --vps-down-soft:rgba(255,107,107,.15);
  --vps-warn:#9a6a11;    --vps-warn-soft:rgba(245,215,110,.30);
  --vps-line-2:color-mix(in srgb, var(--ink) 22%, transparent);
  --vps-cream:var(--surface-2);
}

/* ---------- freshness ticker ---------- */
.vps-ticker{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--vps-cream); overflow:hidden; display:flex; align-items:stretch;
  margin-bottom:18px;
}
.vps-ticker__tag{
  flex:none; display:flex; align-items:center; gap:8px; padding:0 15px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 78%, var(--ink)); background:var(--surface);
  border-right:1px solid var(--line); white-space:nowrap;
}
.vps-ticker__dot{width:8px; height:8px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 var(--signal); animation:vps-pulse 2.2s infinite}
@keyframes vps-pulse{0%{box-shadow:0 0 0 0 var(--vps-up-soft)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.vps-ticker__track{overflow:hidden; flex:1; display:flex; align-items:center}
.vps-ticker__move{display:inline-flex; gap:26px; padding:11px 0 11px 26px; white-space:nowrap;
  font-family:var(--font-mono); font-size:12.5px; align-items:center; animation:vps-scroll 46s linear infinite}
.vps-ticker__track:hover .vps-ticker__move{animation-play-state:paused}
@keyframes vps-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.vps-tk{color:var(--muted)} .vps-tk b{color:var(--ink); font-weight:600}
.vps-tk .u{color:var(--vps-up); font-weight:600} .vps-tk .d{color:var(--vps-down); font-weight:600}
.vps-tk__sep{color:var(--muted); opacity:.5}

/* ---------- top block: headline left, stat tiles right ----------
   Two columns so the summary fills what was dead space beside the H1 and the
   board starts high on the page instead of below a full-width stat row. */
.vps-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.82fr);
  gap:28px; align-items:center; margin-bottom:4px}

/* ---------- hero ---------- */
.vps-hero{padding:0}
.vps-hero h1{font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px); line-height:1.05;
  letter-spacing:-.02em; margin:0 0 10px; color:var(--ink); text-wrap:balance; font-weight:700}
.vps-lede{max-width:52ch; color:var(--muted); font-size:15px; line-height:1.55; margin:0}
.vps-lede b{color:var(--ink); font-weight:600}

/* ---------- stat tiles — three compact tiles on one row ---------- */
.vps-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0}
.vps-tile{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px; box-shadow:var(--shadow-sm); min-width:0}
.vps-tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); opacity:.6}
/* One line each — labels/subs ellipsis rather than wrap, so tiles stay equal height. */
.vps-tile .k,.vps-tile .sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vps-tile .k{font-family:var(--font-mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.vps-tile .v{font-family:var(--font-display); font-size:19px; font-weight:700; margin-top:3px;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.15}
.vps-tile .sub{font-size:10px; color:var(--muted); margin-top:1px}
.vps-tile a{color:inherit; text-decoration:none}
.vps-tile a:hover{color:var(--accent)}

/* ---------- controls ---------- */
.vps-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 12px}
.vps-controls .lbl{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.vps-chip{font-family:var(--font-mono); font-size:12px; color:var(--muted); cursor:pointer;
  border:1px solid var(--line); background:var(--surface); padding:7px 13px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px; transition:.13s; user-select:none}
.vps-chip:hover{border-color:var(--vps-line-2); color:var(--ink)}
.vps-chip[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent-strong)}
.vps-chip .x{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55}
.vps-controls__spacer{flex:1; min-width:16px}
.vps-count{font-family:var(--font-mono); font-size:12px; color:var(--muted); white-space:nowrap}
.vps-count b{color:var(--ink)}

/* ---------- board table ---------- */
.vps-board__wrap{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-sm)}
.vps-board__scroll{overflow-x:auto}
.vps-table{border-collapse:collapse; width:100%; min-width:940px}
.vps-table thead th{position:sticky; top:0; z-index:2; background:var(--vps-cream)}
.vps-table th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-align:right; padding:13px 11px; border-bottom:1px solid var(--vps-line-2);
  white-space:nowrap; font-weight:600}
.vps-table th.l{text-align:left} .vps-table th.c{text-align:center}
.vps-table th.sortable{cursor:pointer; user-select:none}
.vps-table th.sortable:hover{color:var(--accent-strong)}
.vps-table th .ar{color:var(--accent); font-size:9px; margin-left:3px}
.vps-table td{padding:12px 11px; border-bottom:1px solid var(--line); text-align:right;
  font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; vertical-align:middle;
  white-space:nowrap; color:var(--ink)}
.vps-table tbody tr:last-child td{border-bottom:none}
.vps-table tbody tr{transition:background .12s; cursor:pointer}
.vps-table tbody tr:hover{background:var(--vps-cream)}
.vps-table td.l{text-align:left} .vps-table td.c{text-align:center}
.vps-rank{color:var(--muted); font-size:11.5px}

/* provider cell + logo */
.vps-prov{display:flex; align-items:center; gap:12px; text-align:left}
.vps-logo{width:38px; height:38px; border-radius:9px; flex:none; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow-sm)}
.vps-logo img{max-width:78%; max-height:78%; object-fit:contain; display:block}
.vps-logo .fb{font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--muted)}
.vps-pname{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink);
  display:flex; align-items:center; gap:7px}
.vps-pname a{color:inherit; text-decoration:none}
.vps-table tbody tr:hover .vps-pname a{color:var(--accent)}
.vps-pspec{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:2px}

/* price + movement */
.vps-price{font-family:var(--font-mono); font-size:14.5px; font-weight:700; color:var(--ink)}
.vps-price small{font-size:10px; color:var(--muted); font-weight:400}
.vps-mv{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; margin-top:3px; justify-content:flex-end}
.vps-mv.up{color:var(--vps-up)} .vps-mv.down{color:var(--vps-down)}

/* RAM-per-$ bar */
.vps-barcell{display:flex; align-items:center; gap:9px; justify-content:flex-end}
.vps-bartrack{width:64px; height:6px; border-radius:4px; background:var(--line); overflow:hidden}
.vps-barfill{height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); width:0}
.vps-barnum{width:36px; text-align:right; color:var(--ink); font-weight:600}
.vps-barnum.dim{color:var(--muted); font-weight:400}

/* pills */
.vps-pill{font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  font-weight:600; padding:4px 9px; border-radius:6px; display:inline-block; border:1px solid transparent}
.vps-pill.open{color:var(--vps-up); background:var(--vps-up-soft); border-color:color-mix(in srgb, var(--vps-up) 32%, transparent)}
.vps-pill.req{color:var(--vps-warn); background:var(--vps-warn-soft); border-color:color-mix(in srgb, var(--vps-warn) 34%, transparent)}
.vps-pill.paid{color:var(--vps-warn); background:var(--vps-warn-soft); border-color:color-mix(in srgb, var(--vps-warn) 34%, transparent)}
.vps-pill.blocked{color:var(--vps-down); background:var(--vps-down-soft); border-color:color-mix(in srgb, var(--vps-down) 32%, transparent)}
.vps-pill.unknown{color:var(--muted); background:var(--vps-cream); border-color:var(--line)}

/* feature tags */
.vps-feats{display:flex; gap:4px; justify-content:center; flex-wrap:wrap; max-width:170px; margin:0 auto}
.vps-ft{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:3px 6px;
  border-radius:5px; background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent-strong)}
.vps-none{color:var(--muted)}
.vps-ddos .y{color:var(--vps-up)} .vps-ddos .p{color:var(--vps-warn)} .vps-ddos .n{color:var(--muted)}

.vps-empty{padding:40px 20px; text-align:center; color:var(--muted); font-family:var(--font-body)}

/* explicit outbound CTA — the row itself navigates to the profile page */
.vps-visit{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.03em;
  padding:5px 9px; border-radius:999px; white-space:nowrap; text-decoration:none;
  color:var(--accent-strong); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent); transition:.13s}
.vps-visit:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.vps-empty a{color:var(--accent)}

@media (max-width:980px){
  /* Stack: headline, then the compact summary row, then the board. */
  .vps-top{grid-template-columns:1fr; gap:18px; align-items:start}
}
@media (prefers-reduced-motion:reduce){
  .vps-ticker__move{animation:none}
  .vps-ticker__dot{animation:none}
}