/* =========================================================
   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); min-width: 0; container-type: inline-size; }
.st-stat .stat-label { margin: 0; }
.st-stat b { font: 800 clamp(1.4rem, 2.6vw, 1.9rem) / 1.1 var(--display); font-size: min(1.9rem, calc(155cqi / var(--n, 4))); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; } /* --n = characters in the value: long ones shrink to fit */
.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); }
.st-meter .pill { justify-self: start; }

/* 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; } }

/* Tab skeletons (shown while a tab loads, like the WSP CAD) and the fade-in that follows */
.st-skel { display: inline-block; border-radius: 8px; background: linear-gradient(90deg, var(--bg-alt) 25%, var(--surface) 50%, var(--bg-alt) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.st-skel-wrap > p { margin: 14px 0; }
.st-skel-wrap .st-stat { gap: 8px; }
.st-skel-table { padding: 6px 18px; }
.st-skel-row { display: flex; gap: 6%; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.st-skel-row:last-child { border-bottom: 0; }
.st-in > :not(.st-bar) { animation: st-fade 0.22s var(--ease, ease-out); }
@keyframes st-fade { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .st-skel { animation: none; } .st-in > :not(.st-bar) { animation: none; } }

/* Phones: every tab on screen. Name + Sign out on top, tabs in an even 3-column grid underneath. */
@media (max-width: 720px) {
  .st-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'who out' 'tabs tabs'; gap: 14px 12px; }
  .st-bar > .st-who { grid-area: who; min-width: 0; margin: 0; }
  .st-bar > .st-tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .st-bar > .st-tabs button { min-height: 46px; padding: 6px 8px; line-height: 1.2; white-space: normal; text-align: center; }
  .st-bar > [data-logout] { grid-area: out; }
}

/* Roster: one table, headings once (pinned under the site header on desktop), each rank a slim divider row in its
   Discord role colour right above its members. Phones: compact rows with small labels, no sideways scroll. */
.roster-wrap { margin: 0 0 1.2em; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.roster { table-layout: fixed; }
.roster thead th { position: sticky; top: var(--top, 68px); z-index: 2; background: var(--surface); }
.roster thead tr th:first-child { border-top-left-radius: var(--radius); }
.roster thead tr th:last-child { border-top-right-radius: var(--radius); }
.roster th:nth-child(1) { width: 24%; }
.roster .roster-rank th { padding: 9px 16px; font: 700 0.82rem var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--rk); background: color-mix(in srgb, var(--rk) 8%, var(--surface)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--rk); }
.roster .roster-rank th span { margin-left: 8px; font: 600 0.78rem var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.roster tbody.roster-group:first-of-type .roster-rank th { border-top: 0; }
.roster tbody tr.roster-rank:hover { background: none; }
.roster tbody tr.roster-m + tr.roster-m { border-top: 1px solid var(--border); }
.roster td, .roster th { vertical-align: middle; }
.roster small { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.roster .q small { display: inline; font-size: 0.85em; }
@media (max-width: 720px) {
  .roster-wrap { overflow: hidden; } /* no pinned headings on phones, so the corners can be clipped */
  .roster, .roster tbody, .roster tr, .roster th, .roster td { display: block; width: auto !important; }
  .roster thead { display: none; }
  .roster tbody.roster-group[hidden], .roster tr.roster-m[hidden] { display: none; }
  .roster tr.roster-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'name name st' 'h a f' 'since pay ac'; gap: 8px 12px; align-items: center; padding: 12px 14px; }
  .roster tr.roster-m > * { padding: 0; }
  .roster [data-label]::before { content: attr(data-label); display: block; font: 700 0.66rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .roster .r-name { grid-area: name; min-width: 0; }
  .roster .r-st { grid-area: st; text-align: right; }
  .roster .r-h { grid-area: h; } .roster .r-a { grid-area: a; } .roster .r-f { grid-area: f; }
  .roster .r-since { grid-area: since; white-space: normal; } .roster .r-pay { grid-area: pay; }
  .roster .r-acts { grid-area: ac; text-align: right; }
}