/* =========================================================
   GVRPJ Staff roster. Built on the WSP member hub's system (site.css, copied as-is) with GVRPJ coral in place of
   WSP blue, and each rank in its Discord role colour. Role colours are pastels made for Discord's dark UI, so light
   mode uses a deeper shade of the same hue (WCAG AA on white); dark mode uses the Discord colour itself.
   ========================================================= */
:root {
  --accent: #b8442a;
  --accent-fill: #ec6d4d;
  --accent-soft: rgba(236, 109, 77, 0.12);
  --on-accent: #210b05;
  --night-accent: #ff9a80;
  /* Rank colours (light mode) */
  --rk-owner: #5b1ee0;
  --rk-director: #2c63c9;
  --rk-asst: #9b3cc0;
  --rk-lead: #c42a45;
  --rk-supervisor: #7444cf;
  --rk-admin: #4a7a2c;
  --rk-mod: #ad540e;
  --rk-sit: #2b7a68;
  --q-met: #2c63c9; /* the sheet's blue "at quota" */
}
:root[data-theme='dark'] {
  --accent: #ff9a80;
  --accent-soft: rgba(236, 109, 77, 0.16);
  /* Discord role colours (owner lifted a little to read on dark) */
  --rk-owner: #a98bff;
  --rk-director: #9ec2ff;
  --rk-asst: #eaabff;
  --rk-lead: #ff7a8f;
  --rk-supervisor: #be8fff;
  --rk-admin: #a3c189;
  --rk-mod: #ff9e50;
  --rk-sit: #b2dbd1;
  --q-met: #8fb0ff;
}
.rk-owner { --rk: var(--rk-owner); }
.rk-director { --rk: var(--rk-director); }
.rk-asst { --rk: var(--rk-asst); }
.rk-lead { --rk: var(--rk-lead); }
.rk-supervisor { --rk: var(--rk-supervisor); }
.rk-admin { --rk: var(--rk-admin); }
.rk-mod { --rk: var(--rk-mod); }
.rk-sit { --rk: var(--rk-sit); }

/* Header: GVRPJ wordmark, no handbook nav */
.top .brand img { border-radius: 8px; }
.top-sp { margin-left: auto; }
.staff-head .stat-label { color: var(--night-accent); }

/* Rank chip and rank group heading */
.rank { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; color: var(--rk); background: color-mix(in srgb, var(--rk) 13%, transparent); }
.rank::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rk); }
.rank-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 10px; font-size: 1.05rem; color: var(--rk); }
.rank-h::before { content: ''; width: 4px; height: 1.15em; border-radius: 4px; background: var(--rk); }
.rank-h .count { font: 600 0.8rem var(--font); color: var(--muted); }

/* Quota counts: below (red), met (blue), above (green), like the sheet */
.q { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-below { color: var(--bad); }
.q-met { color: var(--q-met); }
.q-above { color: var(--ok); }
.q-none { color: var(--muted); font-weight: 500; }
.q small, .st-table .q small { display: inline; font-size: 0.85em; font-weight: 500; color: var(--muted); }

/* Status pills for logs */
.pill { display: inline-block; font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill-counted { background: rgba(31, 157, 85, 0.13); color: var(--ok); }
.pill-review { background: rgba(217, 119, 6, 0.15); color: var(--warn); }
.pill-rejected { background: rgba(220, 38, 38, 0.12); color: var(--bad); }
.pill-muted { background: var(--bg-alt); color: var(--muted); }
.why { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--muted); max-width: 42ch; }
.why.warn { color: var(--warn); }

/* App bar (who's signed in + tabs) */
.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.st-who { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.st-who img { width: 40px; height: 40px; border-radius: 50%; }
.st-who b { display: block; }
.st-who span { font-size: 0.85rem; color: var(--muted); }
.st-tabs button { color: var(--muted); border-color: var(--border-strong); background: var(--surface); }
.st-tabs button:hover { color: var(--text); border-color: var(--text); }
.st-tabs button .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; font-size: 0.72rem; background: var(--warn); color: #fff; }
.st-tabs { flex-wrap: wrap; }

/* Stat band */
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.st-stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.st-stat .stat-label { margin: 0; }
.st-stat b { font: 800 clamp(1.4rem, 2.6vw, 1.9rem) / 1.1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.st-stat small { color: var(--muted); font-size: 0.82rem; }

/* Your month */
.st-mine { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 28px; }
.st-meter { padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: grid; gap: 10px; }
.st-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.st-meter-top b { font: 800 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.st-track { height: 8px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.st-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent-fill); }
.st-meter p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* Toolbars, tables and empty states */
.st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.st-tools .search { flex: 1 1 260px; }
.st-tools select { font: inherit; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); }
.st-table { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.st-table .data thead th { background: var(--surface); }
.st-table small { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.st-actions { white-space: nowrap; text-align: right; }
.st-actions .btn + .btn { margin-left: 6px; }
.st-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.st-empty i { display: block; font-size: 2rem; margin-bottom: 8px; color: var(--border-strong); }
.st-note { font-size: 0.92rem; color: var(--muted); }
.st-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.85rem; color: var(--muted); margin: 14px 0 0; }
.st-raw { white-space: pre-wrap; font: 0.85rem/1.5 var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; max-height: 260px; overflow: auto; }
.st-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-check { display: flex !important; align-items: center; gap: 10px; }
.st-check input { width: 18px; height: 18px; }
.skeleton { border-radius: 12px; background: linear-gradient(90deg, var(--bg-alt), var(--surface), var(--bg-alt)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@media (max-width: 640px) { .st-row2 { grid-template-columns: 1fr; } .st-actions { text-align: left; } }