/* Varsity Vibe Admin Console (Nov 5 2026). Built on platform/platform.css (the varsityvibe.com look the creator site
   uses): same tokens, topbar, cards, buttons and sheets. This file adds the HQ layout (side nav on desktop, tab bar on
   phones), the Scoreboard, the game record, the dependencies panel, and the night look for the Social engine. */
body.console { --side-w: 236px; }
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
body.console main { min-width: 0; max-width: none; margin: 0; width: 100%; }   /* a grid item (platform.css centers main with auto margins, which would size it to its content): never wider than its track (tables and the Social header scroll inside) */
.side { display: none; }
@media (min-width: 960px) {
  .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + var(--sat)); align-self: start; height: calc(100vh - var(--topbar-h) - var(--sat));
    padding: 18px 12px 18px var(--gutter); border-right: 1px solid var(--edge); overflow-y: auto; }
  .side a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 600; font-size: 14px; }
  .side a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .side a:hover { background: var(--ctl-fill); color: var(--ink); }
  .side a[aria-current="page"] { background: rgba(var(--vibe-rgb), .14); color: var(--vibe); }
  .side a .n { margin-left: auto; font: 700 11px/1 var(--font-cond); letter-spacing: .04em; padding: 4px 7px; border-radius: 999px; background: rgba(255,61,95,.22); color: #ffb3c0; }
  .side .sub { margin: 2px 0 8px 40px; display: grid; gap: 1px; }
  .side .sub a { padding: 5px 10px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .side .foot { margin-top: auto; padding: 12px; font-size: 12px; color: var(--ink-4); }
  .tabbar { display: none; }
  body.console main { padding-bottom: 60px; }
}
/* global search in the topbar */
.gsearch { position: relative; flex: 0 1 360px; min-width: 0; }
.gsearch .in { padding: 9px 14px; font-size: 14px; background: var(--ctl-fill); }
.gsearch .hits { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #0e1424; border: 1px solid var(--edge-2); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; z-index: 110; }
.gsearch .hits a { display: flex; gap: 10px; align-items: center; padding: 10px 14px; color: var(--ink); border-top: 1px solid var(--edge); }
.gsearch .hits a:first-child { border-top: 0; }
.gsearch .hits a:hover, .gsearch .hits a[aria-selected="true"] { background: var(--ctl-fill); }
.gsearch .hits .k { font: 700 10px/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); width: 54px; flex: none; }
.gsearch .hits .m { color: var(--ink-3); font-size: 12px; margin-left: auto; white-space: nowrap; }
@media (max-width: 719px) { .gsearch { flex: 1 1 auto; } .gsearch .in { padding: 8px 12px; } .topbar .ttl { display: none; } }

/* status pills and the exceptions list */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 700 11px/1.6 var(--font-cond); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--edge); color: var(--ink-2); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: rgba(92,240,160,.4); background: rgba(92,240,160,.1); }
.pill.vibe { color: var(--vibe); border-color: rgba(var(--vibe-rgb), .4); background: rgba(var(--vibe-rgb), .1); }
.pill.warn { color: var(--gold); border-color: rgba(255,213,74,.4); background: rgba(255,213,74,.1); }
.pill.bad { color: var(--err); border-color: rgba(255,143,163,.45); background: rgba(255,61,95,.12); }
.pill.mute { color: var(--ink-3); }
.exc { display: grid; gap: 8px; }
.exc a, .exc .x { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--mat); border: 1px solid var(--edge); color: var(--ink); }
.exc a:hover { border-color: var(--edge-2); }
.exc i { font: 800 18px/1 var(--font-cond); color: var(--err); min-width: 28px; text-align: center; font-style: normal; }
.exc i.ok { color: var(--ok); } .exc i.warn { color: var(--gold); }
.exc .t { min-width: 0; flex: 1; overflow-wrap: anywhere; } .exc .t small { display: block; color: var(--ink-3); font-size: 12px; }
.exc .go { color: var(--vibe); font-size: 13px; white-space: nowrap; }

/* the scoreboard */
.sb { display: grid; gap: 10px; }
.sb .g { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--mat); border: 1px solid var(--edge); color: var(--ink); text-align: left; cursor: pointer; width: 100%; font: inherit; }
.sb .g:hover { border-color: var(--edge-2); background: var(--mat-2); }
.sb .g .gw { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb .g .gw b { font: 700 19px/1.05 var(--font-cond); text-transform: uppercase; letter-spacing: .01em; }
.sb .g .gw .m { color: var(--ink-3); font-size: 12px; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.sb .g .sc { font: 800 30px/1 var(--font-cond); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-align: right; }
.sb .g .sc small { display: block; font: 600 11px/1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sb .g .sc.final { color: var(--ok); } .sb .g .sc.live { color: var(--live); } .sb .g .sc.none { color: var(--ink-4); }
.sb .g .flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.daynav { display: flex; align-items: center; gap: 8px; }
.daynav b { font: 700 18px/1 var(--font-cond); text-transform: uppercase; letter-spacing: .04em; }
.scoreform { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.scoreform label { display: grid; gap: 6px; font-size: 12px; color: var(--ink-3); text-align: center; }
.scoreform label b { font: 700 15px/1.1 var(--font-cond); text-transform: uppercase; color: var(--ink); letter-spacing: .02em; }
.scoreform input { width: 100%; text-align: center; font: 800 34px/1 var(--font-cond); padding: 10px 6px; border-radius: var(--r-field); border: 1px solid var(--edge-2); background: var(--ctl-fill); color: var(--ink); }
.scoreform .vs { font: 700 16px/1 var(--font-cond); color: var(--ink-3); padding-bottom: 18px; }
.hist { display: grid; gap: 6px; font-size: 13px; }
.hist div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--edge); }
.hist div:first-child { border-top: 0; }
.hist .w { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.hist .blocked { color: var(--err); }
.crew { display: grid; gap: 8px; }
.crew div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--edge); }
.crew div:first-child { border-top: 0; }
.crew b { min-width: 140px; }
.mp { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.mp .n { font: 800 26px/1 var(--font-cond); }

/* tables (money, sponsors) */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 9px 10px; text-align: left; border-top: 1px solid var(--edge); vertical-align: top; }
.tbl th { border-top: 0; font: 700 11px/1.3 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* dependencies */
.deps { display: grid; gap: 8px; }
.dep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; border-radius: 16px; background: var(--mat); border: 1px solid var(--edge); }
.dep .st { font: 700 11px/1.6 var(--font-cond); letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; align-self: start; white-space: nowrap; }
.dep .st.ok { background: rgba(92,240,160,.14); color: var(--ok); } .dep .st.off, .dep .st.stale, .dep .st.unknown { background: rgba(255,213,74,.14); color: var(--gold); } .dep .st.missing { background: rgba(255,61,95,.16); color: var(--err); }
.dep b { font-size: 14px; } .dep .d { grid-column: 2; color: var(--ink-3); font-size: 12px; }
.dep .d span { display: block; } .dep .d .fb { color: var(--ink-2); }

/* the current console (admin.html) screens: labelled links, never a frame */
.links { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.links a { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 16px; background: var(--mat); border: 1px solid var(--edge); color: var(--ink); }
.links a:hover { border-color: var(--edge-2); }
.links a small { color: var(--ink-3); font-size: 12px; }
.links a .tag { align-self: flex-start; font: 700 10px/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--edge); border-radius: 999px; padding: 4px 7px; margin-top: 6px; }
.fav { color: var(--gold); background: none; border: 0; font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; }
.fav.off { color: var(--ink-4); }

/* Social engine inside the console: the night look, the console's tokens */
#socialHost { padding: 0 var(--gutter); }
.vv-social { --bg: transparent; --panel: rgba(27,34,54,.55); --sunk: rgba(10,14,26,.7); --ink: #f2f5fb; --muted: rgba(226,233,247,.6); --line: rgba(255,255,255,.14);
  --accent: #3ee6d4; --accent-ink: #02211e; --accent-soft: rgba(62,230,212,.16); --ok: #5cf0a0; --ok-soft: rgba(92,240,160,.14); --warn: #ffd54a; --warn-soft: rgba(255,213,74,.14);
  --bad: #ff8fa3; --bad-soft: rgba(255,61,95,.16); --info: #8db2ff; --info-soft: rgba(141,178,255,.14); --sample: #c79bff; --sample-soft: rgba(199,155,255,.16);
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --r: 18px; }
.vv-social .card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.vv-social .btn.primary { color: #02211e; }
.vv-social .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vv-social .toast { background: #f2f5fb; color: #04060c; }
.vv-social dialog { background: #0e1424; }
.vv-social nav.tabs { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.vv-social .pill::before { display: none; }
.gamectx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 16px; background: rgba(var(--vibe-rgb), .1); border: 1px solid rgba(var(--vibe-rgb), .3); margin: 0 0 12px; }
.gamectx b { font: 700 16px/1.1 var(--font-cond); text-transform: uppercase; }
.gamectx .x { margin-left: auto; }

/* denied / gate screens */
.gate { max-width: 520px; margin: 8vh auto; text-align: center; }
.gate h1 { font: 800 34px/1 var(--font-cond); text-transform: uppercase; margin: 0 0 10px; }
.kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi .stat { border: 1px solid var(--edge); }
.sec h2 { flex: 0 1 auto; min-width: 0; }
.sec h2 .sm { display: block; font: 600 13px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-3); margin: 5px 0 0; }
.ok-dot::before { content: "●"; color: var(--ok); margin-right: 6px; }
.sheet .scoreform { margin: 8px 0 14px; }
.note { font-size: 13px; color: var(--ink-3); }

/* ── the rest of the console (vv/admin-console.js) mounted under #/a/…: this page's tokens and fonts ── */
.vv-admin { --bg: transparent; --panel: var(--mat); --panel2: var(--mat-2); --line: var(--edge); --fg: var(--ink); --muted: var(--ink-3); --accent: var(--vibe); --good: var(--ok); --warn: var(--gold); --bad: var(--err); --a-display: var(--font-cond); --a-body: var(--font-ui); }
.vv-admin h1, .vv-admin .tile .v, .vv-admin .disp, .vv-admin .pillbtn, .vv-admin .tn .tm, .vv-admin .tn .gm, .vv-admin .gd h3, .vv-admin .gcard h3, .vv-admin .payouts .line b, .vv-admin .payouts .line .big, .vv-admin nav a, .vv-admin .segs button, .vv-admin .attn a { font-weight: 800; }
.vv-admin button.primary, .vv-admin .btn.primary { color: var(--vibe-ink); }
.vv-admin .card, .vv-admin .tile, .vv-admin .fix, .vv-admin .tn, .vv-admin .gd, .vv-admin .gcard { background: var(--mat); border-color: var(--edge); border-radius: 18px; }
.vv-admin .sheet > div { max-width: 760px; }
.vv-admin .ws-tile .v, .vv-admin .ws-tile .k { display: block; }