/* General tweaks */
code { padding: 0 .25em; }
.table td { vertical-align: middle; }
.table td .is-size-7 { display: inline-block; margin-left: .5rem; }

/* Chip / pill UI */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid #dbdbdb;
  background: white;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.chip:hover { border-color: #b5b5b5; }

.chip.is-on {
  border-color: #485fc7;
  background: #f5f7ff;
  box-shadow: 0 0 0 1px rgba(72,95,199,.15);
}

.chip .dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: #dbdbdb;
}

.chip.is-on .dot { background: #485fc7; }

/* Section spacing helpers */
hr { margin: 1rem 0; }

/* ---- User page: header readability + nicer layout ---- */
.user-hero {
  /* keep Bulma "box" feel but not harsh */
  border-radius: 14px;
}

.user-title {
  color: rgba(0,0,0,0.92);
  letter-spacing: -0.01em;
}

.user-subtitle {
  color: rgba(0,0,0,0.72);
}

.user-meta {
  color: rgba(0,0,0,0.78);
}

.user-meta strong {
  color: rgba(0,0,0,0.88);
}

/* ---- User page: stats as subtle tiles (no chunky borders) ---- */
.user-stats .stat {
  background: rgba(0,0,0,0.03);       /* subtle tint instead of white card */
  border: 0;                          /* remove "big white border" look */
  border-radius: 12px;
  padding: 12px 14px;
}

.user-stats .stat-k {
  color: rgba(0,0,0,0.72);
  font-weight: 650;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.user-stats .stat-v {
  color: rgba(0,0,0,0.92);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  margin-top: 6px;
}

/* ---------- SAFETY: ensure readable text in both light + dark themes ---------- */

/* Light mode defaults */
.user-hero { background: #ffffff; }
.user-title { color: rgba(0,0,0,0.92); }
.user-subtitle { color: rgba(0,0,0,0.72); }
.user-meta { color: rgba(0,0,0,0.78); }
.user-meta strong { color: rgba(0,0,0,0.90); }

/* If the browser/OS is in dark mode, flip to a dark theme palette */
@media (prefers-color-scheme: dark) {
  body { background: #0f0f10; color: rgba(255,255,255,0.90); }

  .box { background: #17181a; color: rgba(255,255,255,0.90); }
  .table { background: transparent; color: rgba(255,255,255,0.90); }
  .table thead th { color: rgba(255,255,255,0.80); }
  .table td { color: rgba(255,255,255,0.90); }

  .user-hero { background: #17181a; }

  .user-title { color: rgba(255,255,255,0.95); }
  .user-subtitle { color: rgba(255,255,255,0.75); }
  .user-meta { color: rgba(255,255,255,0.78); }
  .user-meta strong { color: rgba(255,255,255,0.92); }

  /* stats tiles in dark mode */
  .user-stats .stat { background: rgba(255,255,255,0.06); }
  .user-stats .stat-k { color: rgba(255,255,255,0.75); }
  .user-stats .stat-v { color: rgba(255,255,255,0.95); }

  /* chips */
  .chip { background: #17181a; border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.90); }
  .chip .dot { background: rgba(255,255,255,0.25); }
  .chip.is-on { background: rgba(72,95,199,0.18); border-color: rgba(72,95,199,0.75); }
}

/* Sticky headers that work in light + dark mode */
.osu-sticky-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--osu-surface, #fff);
}

/* Provide a surface color that adapts */
:root {
  --osu-surface: #ffffff;
  --osu-text: #111827;
  --osu-muted: #6b7280;
}

/* If you already toggle dark mode via a class, keep both options */
html.has-theme-dark,
body.has-theme-dark,
[data-theme="dark"] {
  --osu-surface: #14161a;
  --osu-text: #e5e7eb;
  --osu-muted: #9ca3af;
}

/* Prefer OS dark mode automatically if you support it */
@media (prefers-color-scheme: dark) {
  :root {
    --osu-surface: #14161a;
    --osu-text: #e5e7eb;
    --osu-muted: #9ca3af;
  }
}

/* Make sure common Bulma containers don’t go white on dark pages */
@media (prefers-color-scheme: dark) {
  body {
    color: var(--osu-text);
  }
  .box {
    background-color: var(--osu-surface);
    color: var(--osu-text);
  }
  .table {
    background-color: transparent;
    color: var(--osu-text);
  }
  .table thead th,
  .table tbody td {
    color: var(--osu-text);
  }
  .help,
  .has-text-grey,
  .has-text-grey-light {
    color: var(--osu-muted) !important;
  }
  .tag.is-light {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--osu-text) !important;
  }
}