/* What the dashboard and the leaderboard share with each other and with the
   rest of vandalbot.dev: the brand kit's typefaces (served from /fonts/, under
   the SIL Open Font License, credited in the landing page's licence dialog),
   its Midnight, Sky and Pink, and the site's buttons, links and focus ring.
   Both apps are served under a policy that allows stylesheets from this site
   only, so every style lives in a file like this one: no page has a <style>,
   and no script sets one. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/BricolageGrotesque-500.ttf) format("truetype");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/BricolageGrotesque-800.ttf) format("truetype");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/karla-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/karla-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The landing page's palette, by the same names. */
:root {
  color-scheme: dark;
  --bg: #0f1528;
  --panel: #18203a;
  --lift: #1f2a4a;
  --edge: #2d3b66;
  --hair: rgba(45, 59, 102, 0.6);
  --sky: #3d8bff;
  --sky-lit: #9cc3ff;
  --pink: #ff6fae;
  --pink-lit: #ffa8cc;
  --on-pink: #18203a;
  --grape: #7650ee;
  --text: #fff6ea;
  --muted: #c9cde0;
  --danger: #ff8b8b;
  --danger-bg: rgba(229, 72, 77, 0.14);
  --ok: #7ee2a8;
  --warn: #ffd27a;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: Karla, ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --shell: 1180px;
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
main { flex: 1; outline: none; }
img { max-width: 100%; }

a { color: var(--pink); text-underline-offset: 3px; }
a:hover { color: var(--sky-lit); }
:focus-visible {
  outline: 2px solid var(--sky-lit);
  outline-offset: 3px;
}

h1, h2, h3 { text-wrap: balance; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  background: var(--pink); color: var(--on-pink); font-weight: 700;
  padding: 0.6rem 1rem; border-radius: 6px; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------------- the bar across the top ---------------- */
.topbar {
  border-bottom: 1px solid var(--edge);
  background: rgba(15, 21, 40, 0.92);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
}
.topbar .shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
}
.brand img { width: 1.7rem; height: auto; }
.brand .word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  line-height: 1;
}
.brand .area {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-lit);
  border-left: 1px solid var(--edge);
  padding-left: 0.65rem;
  margin-left: 0.15rem;
}
.topbar .end { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--on-pink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 28px -12px rgba(255, 111, 174, 0.65);
}
.btn:hover { background: var(--sky-lit); color: var(--on-pink); }
.btn.ghost {
  background: rgba(24, 32, 58, 0.6);
  color: var(--text);
  border-color: var(--edge);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--sky); color: var(--sky-lit); }
.btn.small { min-height: 2.25rem; padding: 0.35rem 0.85rem; font-size: 0.92rem; }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(255, 139, 139, 0.45); box-shadow: none; }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--pink); color: var(--on-pink); }
.btn.ghost[disabled]:hover { background: rgba(24, 32, 58, 0.6); color: var(--text); border-color: var(--edge); }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--pink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linkish:hover { color: var(--sky-lit); }

/* ---------------- headings and words ---------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 0.6rem;
}
.title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
}
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 1.75rem; }
.muted { color: var(--muted); }

/* ---------------- a person or a server, as a picture ---------------- */
.avatar {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--lift);
  object-fit: cover;
}
.avatar.square { border-radius: 12px; }
.initials {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lift), var(--edge));
  color: var(--sky-lit);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

/* ---------------- waiting, nothing, and something wrong ---------------- */
.state {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: clamp(2rem, 6vw, 3.5rem) 0;
  max-width: 62ch;
}
.state h2 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; margin: 0; letter-spacing: -0.015em; }
.state p { margin: 0; color: var(--muted); }
.state .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.loading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--muted);
  padding: 2.5rem 0;
}
.spinner {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid var(--edge);
  border-top-color: var(--pink);
}
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin 0.9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

.notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--sky);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
}
.notice p { margin: 0; }
.notice p + p { margin-top: 0.35rem; }
.notice.warn { border-left-color: var(--warn); }
.notice.bad { border-left-color: var(--danger); }
.notice.good { border-left-color: var(--ok); }
.notice strong { color: var(--text); }

/* ---------------- the foot of the page ---------------- */
.foot {
  margin-top: 3rem;
  border-top: 1px solid var(--edge);
  color: var(--muted);
  font-size: 0.9rem;
}
.foot .shell { padding-top: 1.5rem; padding-bottom: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--sky-lit); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .linkish, a { transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
}