/* ============================================================
   GWM V2 — Roster CSS
   Table · Toolbar · Status Toggle · Zone Chip · Member Modal
   ============================================================ */

/* ── TOOLBAR ─────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.toolbar .search { flex: 1; min-width: 180px; }

/* ── ROSTER TABLE ────────────────────────────────────────── */
.rtable-wrap {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); overflow: hidden;
}
.rtable {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.rtable thead tr {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-soft);
}
.rtable th {
  padding: 7px 12px; text-align: left;
  font-size: 11px; font-weight: 500; color: var(--fg-3);
  letter-spacing: 0.02em; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: color .12s;
}
.rtable th:hover { color: var(--fg-2); }
.rtable th.sort-asc::after  { content: ' ↑'; color: var(--accent); }
.rtable th.sort-desc::after { content: ' ↓'; color: var(--accent); }
.rtable th:last-child { cursor: default; }

.rtable tbody tr {
  border-bottom: 1px solid var(--line-soft);
  transition: background .1s;
}
.rtable tbody tr:last-child { border-bottom: none; }
.rtable tbody tr:hover { background: var(--panel-2); }

.rtable td {
  padding: 6px 12px; vertical-align: middle;
}
.rtable td:last-child { text-align: right; padding-right: 10px; }

/* Name cell */
.nmcell {
  display: flex; align-items: center; gap: 8px;
}
.nmcell .nm { font-weight: 500; color: var(--fg); }
.nmcell .note-inline { font-size: 11px; color: var(--fg-3); font-style: italic; }
.nmcell .warn-ico { color: var(--late); display: flex; align-items: center; }
.nmcell .warn-ico svg { width: 14px; height: 14px; }

/* CP cell */
.cpcell {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; font-weight: 500; color: var(--gold);
}

/* Misses cell */
.misscell { font-family: 'Geist Mono', monospace; font-size: 12px; }
.misscell.warn { color: var(--late); font-weight: 600; }

/* Discord cell */
.discord-cell { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--fg-3); }

/* Zone chip */
.zone-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
  background: color-mix(in oklch, var(--zc, var(--accent)) 14%, var(--panel-2));
  color: color-mix(in oklch, var(--zc, var(--accent)) 65%, var(--fg));
  border: 1px solid color-mix(in oklch, var(--zc, var(--accent)) 28%, transparent);
  white-space: nowrap;
}
.zone-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--zc, var(--accent)); flex: none;
}

/* ── STATUS TOGGLE ───────────────────────────────────────── */
.status-toggle {
  display: inline-flex; background: var(--bg-deep);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 2px; gap: 1px;
}
.status-toggle button {
  padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  color: var(--fg-3); transition: all .12s; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 4px;
}
.status-toggle button:hover { color: var(--fg-2); background: var(--panel-2); }
.status-toggle button.on { color: var(--fg); background: var(--panel-2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.status-toggle button.on.ready  { color: var(--ready); }
.status-toggle button.on.late   { color: var(--late); }
.status-toggle button.on.absent { color: var(--absent); }
.status-toggle button.on.busy  { color: var(--busy); }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.roster-empty {
  text-align: center; padding: 60px 20px;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.roster-empty .empty-ico {
  width: 52px; height: 52px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.roster-empty .empty-ico svg { width: 24px; height: 24px; color: var(--fg-3); }
.roster-empty h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.roster-empty p  { font-size: 13px; color: var(--fg-3); max-width: 300px; margin: 0 auto 20px; line-height: 1.6; }

/* ── MEMBER MODAL ────────────────────────────────────────── */
.discord-link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  margin-top: 4px;
}
.discord-link-row svg { width: 16px; height: 16px; color: color-mix(in oklch, #5865f2 80%, var(--fg)); flex: none; }
.discord-link-row .linked { font-size: 13px; font-weight: 500; color: var(--fg); }
.discord-link-row .unlinked { font-size: 12px; color: var(--fg-3); }

/* CP input with live preview */
.cp-preview {
  font-family: 'Geist Mono', monospace; font-size: 13px;
  color: var(--gold); font-weight: 500; margin-top: 5px;
}

/* ── ROSTER SUMMARY BAR ──────────────────────────────────── */
.roster-summary {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); margin-bottom: 14px; flex-wrap: wrap;
}
.roster-summary .rs-item {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
}
.roster-summary .rs-val {
  font-family: 'Geist Mono', monospace; font-weight: 600; font-size: 14px;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .rtable td.hide-sm, .rtable th.hide-sm { display: none; }
}
@media (max-width: 640px) {
  .rtable td.hide-xs, .rtable th.hide-xs { display: none; }
  .toolbar { gap: 6px; }
  /* Phones are forced into grid view → the table/grid toggle would be a no-op */
  .view-toggle { display: none; }
  .roster-grid { grid-template-columns: 1fr; }
}

/* ── ROSTER GRID VIEW ────────────────────────────────────── */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.rcard {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .14s;
}
.rcard:hover { border-color: var(--line); }
.rcard-head {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.rcard-name {
  font-weight: 500; font-size: 13px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg);
}
.rcard-name.has-warn { color: var(--late); }
.rcard-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--fg-3);
}
.rcard-meta .sep { color: var(--line); }
.rcard-meta .cpcell { font-size: 11.5px; }
.rcard-meta .missbadge {
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 5px;
  background: var(--panel-2); color: var(--fg-3);
}
.rcard-meta .missbadge.warn { background: color-mix(in oklch, var(--late) 15%, var(--panel)); color: var(--late); }
.rcard .status-toggle { width: 100%; justify-content: stretch; }
.rcard .status-toggle button { flex: 1; justify-content: center; font-size: 10.5px; padding: 4px 4px; }
.rcard .icon-btn { width: 26px; height: 26px; flex: none; border: none; background: transparent; }
.rcard .icon-btn svg { width: 13px; height: 13px; }

/* view toggle button */
.view-toggle {
  display: inline-flex; background: var(--bg-deep); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 2px; gap: 1px;
}
.view-toggle button {
  padding: 4px 7px; border-radius: 6px; color: var(--fg-3);
  transition: all .12s;
}
.view-toggle button svg { width: 14px; height: 14px; display: block; }
.view-toggle button.on { background: var(--panel-2); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* ── ULT PICKER ─────────────────────────────────────────── */
.ult-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ult-pick {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 2px solid var(--line-soft);
  background: var(--panel);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .14s;
  padding: 4px;
  color: var(--fg-3);
}
.ult-pick:hover { border-color: var(--accent); }
.ult-pick.active {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, var(--panel));
}
.ult-pick img { width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
.ult-pick .ult-none { font-size: 18px; }

/* ── DISCORD LINK INDICATOR (D-RO3) ──────────────────────── */
.dlink-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  display: inline-block;
}
.dlink-dot.on  { background: #5865f2; box-shadow: 0 0 5px color-mix(in oklch, #5865f2 60%, transparent); }
.dlink-dot.off { background: transparent; border: 1px solid var(--fg-3); opacity: .55; }
.rcard-head .dlink-dot { margin-right: -2px; }

/* ── SIGNUP BADGE (D-S2) ─────────────────────────────────── */
.signup-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  white-space: nowrap;
}
.signup-badge.ready {
  color: var(--ready);
  background: color-mix(in oklch, var(--ready) 12%, var(--panel-2));
  border: 1px solid color-mix(in oklch, var(--ready) 25%, transparent);
}
.signup-badge.busy {
  color: var(--fg-2);
  background: color-mix(in oklch, var(--busy) 25%, var(--panel-2));
  border: 1px solid color-mix(in oklch, var(--busy) 40%, transparent);
}
.signup-badge.none { color: var(--fg-3); padding: 2px 4px; }

/* ── 4C: CLICKABLE SUMMARY ──────────────────────────────── */
.roster-summary .rs-click {
  cursor: pointer;
  padding: 3px 7px; margin: -3px -3px;
  border-radius: 6px; border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.roster-summary .rs-click:hover { background: var(--panel-2); border-color: var(--line); }
.roster-summary .rs-click.on {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

/* ── 4C: TASK STRIP "งานวันนี้" ─────────────────────────── */
.task-strip { margin: 10px 0 18px; }
.ts-head  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ts-title { font-size: 12px; font-weight: 600; color: var(--fg-2); letter-spacing: .04em; }
.ts-line  { flex: 1; height: 1px; background: var(--line-soft); }
.ts-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ts-card  { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ts-card p { font-size: 11.5px; color: var(--fg-3); margin: 4px 0 8px; }
.ts-card-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--fg); }
.ts-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--fg-2);
}
.ts-card.p-discord { border-color: color-mix(in oklch, #5865f2 35%, var(--line)); }
.ts-card.p-discord .ts-dot { background: color-mix(in oklch, #5865f2 18%, var(--panel-2)); color: #7c87f5; }
.ts-card.p-signup { border-color: color-mix(in oklch, var(--gold) 30%, var(--line)); }
.ts-card.p-signup .ts-dot { background: color-mix(in oklch, var(--gold) 15%, var(--panel-2)); color: var(--gold); }
.ts-card.done { border-color: color-mix(in oklch, var(--ready) 30%, var(--line)); opacity: .72; }
.ts-card.done .ts-dot { background: color-mix(in oklch, var(--ready) 15%, var(--panel-2)); color: var(--ready); }
.ts-num { font-family: 'Geist Mono', monospace; font-weight: 600; }
/* ============================================================
   ROSTER V3 (Phase 1B) — Header · 3-col Dashboard · Force Comp
   ============================================================ */

/* ── HEADER (title + event selector + lang toggle) ───────── */
.roster-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.roster-header .rh-title h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.roster-header .rh-sub {
  font-size: 12px; color: var(--fg-3); margin-top: 2px;
}
.roster-header .spacer { flex: 1; min-width: 8px; }

/* Event selector — segmented control */
.event-selector {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.event-selector .es-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 5px 12px; border-radius: 6px;
  cursor: pointer; transition: all .14s; min-width: 64px;
  border: 1px solid transparent;
}
.event-selector .es-btn .es-label {
  font-size: 12.5px; font-weight: 600; color: var(--fg-3); line-height: 1.1;
}
.event-selector .es-btn .es-sub {
  font-size: 9.5px; color: var(--fg-3); opacity: .7; line-height: 1.1;
  font-family: 'Geist Mono', monospace; letter-spacing: -.01em;
}
.event-selector .es-btn:hover:not(.on):not(.dim) { background: var(--panel-2); }
.event-selector .es-btn:hover:not(.on):not(.dim) .es-label { color: var(--fg-2); }
.event-selector .es-btn.on {
  background: var(--accent-dim);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.event-selector .es-btn.on .es-label { color: var(--accent); }
.event-selector .es-btn.on .es-sub   { color: color-mix(in oklch, var(--accent) 60%, var(--fg-3)); opacity: 1; }
.event-selector .es-btn.dim { opacity: .4; cursor: not-allowed; }

/* Event picker — disambiguates when a type has >1 concrete event */
.event-pick-wrap {
  display: flex; flex-direction: column; gap: 3px; align-self: center;
}
.event-pick-label {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-3); padding-left: 2px;
}
.event-pick {
  max-width: 240px; height: 34px;
  font-size: 12px; font-family: 'Geist Mono', monospace;
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); color: var(--fg-2);
}

/* Language toggle */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.lang-toggle .lt-ico {
  display: inline-flex; color: var(--fg-3); padding: 0 3px 0 5px;
}
.lang-toggle .lt-btn {
  padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 700;
  color: var(--fg-3); letter-spacing: .03em; transition: all .12s;
  font-family: 'Geist Mono', monospace;
}
.lang-toggle .lt-btn:hover:not(.on) { color: var(--fg-2); background: var(--panel-2); }
.lang-toggle .lt-btn.on {
  color: var(--accent); background: var(--accent-dim);
}

/* ── 2-COLUMN SHELL ──────────────────────────────────────────
   Left = Force Comp (sticky rail) · Right = tasks/vitals + table.
   Members table flows up beside the rail — no dead space. */
.roster-shell {
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
  gap: 14px; align-items: start; margin-bottom: 20px;
}
.roster-shell > .force-comp {
  position: sticky; top: 14px;
  /* don't let a very tall rail exceed the viewport; scroll internally */
  max-height: calc(100vh - 28px); overflow-y: auto;
}
.roster-right {
  min-width: 0;            /* allow table to shrink inside grid track */
  display: flex; flex-direction: column; gap: 14px;
}
/* Tasks + Vitals share the top row of the right column */
.roster-toprow {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 360px);
  gap: 14px; align-items: start;
}

/* ── FORCE COMPOSITION (left column — the soul) ──────────── */
.force-comp {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 14px;
  /* cinematic edge glow */
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) calc(var(--glow)*18%), transparent),
              0 8px 28px -16px color-mix(in oklch, var(--accent) calc(var(--glow)*60%), transparent);
}
.force-comp .fc-header { margin-bottom: 2px; }
.force-comp .fc-title {
  font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--fg);
}
.force-comp .fc-q {
  font-size: 11px; color: var(--fg-3); margin-top: 1px; font-style: italic;
}

/* Card base inside Force Comp */
.fc-card {
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 11px;
}
.fc-card-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--fg-2);
  letter-spacing: .01em;
}
.fc-card-title svg { color: var(--fg-3); }
.fc-card-sub { font-size: 10px; color: var(--fg-3); margin-top: 1px; }

/* Roster Health — ring + label */
.fc-health {
  display: flex; align-items: center; gap: 13px;
}
.fc-ring { position: relative; width: 64px; height: 64px; flex: none; }
.fc-ring svg { display: block; }
.fc-ring-val {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.fc-ring-val .rv-num {
  font-family: 'Geist Mono', monospace; font-size: 20px; font-weight: 700;
  color: var(--fg);
}
.fc-ring-val .rv-den { font-size: 8px; color: var(--fg-3); margin-top: 1px; }
.fc-health-body { flex: 1; min-width: 0; }
.fc-health-chip {
  display: inline-block; margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 5px; text-transform: uppercase;
}
.fc-health-chip.ok   { color: var(--ready);  background: color-mix(in oklch, var(--ready)  16%, transparent); }
.fc-health-chip.warn { color: var(--late);   background: color-mix(in oklch, var(--late)   16%, transparent); }
.fc-health-chip.bad  { color: var(--absent); background: color-mix(in oklch, var(--absent)16%, transparent); }

/* Mini stat cards (Balanced roles / Open seats) */
.fc-mini .fc-big-val { margin: 5px 0 7px; }
.fc-big-val .bv-num {
  font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 700; color: var(--fg);
}
.fc-big-val .bv-den { font-size: 11px; color: var(--fg-3); }

/* Balanced roles — mini segmented bar */
.fc-mini-bar { display: flex; gap: 3px; }
.fc-mini-bar .mini-seg {
  height: 5px; flex: 1; border-radius: 3px; background: var(--line);
}
.fc-mini-bar .mini-seg.healthy  { background: var(--ready); }
.fc-mini-bar .mini-seg.under    { background: var(--late); }
.fc-mini-bar .mini-seg.over     { background: var(--azure); }
.fc-mini-bar .mini-seg.critical { background: var(--absent); }
.fc-mini-bar .mini-seg.idle     { background: var(--line); }

/* Class chips */
.fc-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.fc-cchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  background: color-mix(in oklch, var(--cc, var(--accent)) 13%, var(--panel-2));
  color: color-mix(in oklch, var(--cc, var(--accent)) 70%, var(--fg));
  border: 1px solid color-mix(in oklch, var(--cc, var(--accent)) 26%, transparent);
  white-space: nowrap; font-family: 'Geist Mono', monospace;
}
.fc-cchip .dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--cc, var(--accent));
}
.fc-cchip.role {
  background: var(--panel-2); color: var(--fg-2);
  border-color: var(--line);
}

/* Role bar */
.fc-role .rb-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.fc-role .rb-ico { display: inline-flex; color: var(--fg-2); flex: none; }
.fc-role .rb-name { font-size: 12px; font-weight: 700; color: var(--fg); }
.fc-role .rb-codes {
  font-size: 9px; color: var(--fg-3); font-family: 'Geist Mono', monospace;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-role .rb-counts {
  font-size: 11px; font-weight: 600; color: var(--fg);
}
.fc-role .rb-counts .dim { color: var(--fg-3); font-weight: 400; }
.fc-role .rb-badge {
  font-size: 8.5px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 4px; text-transform: uppercase; white-space: nowrap;
}
.fc-role .rb-badge.healthy  { color: var(--ready);  background: color-mix(in oklch, var(--ready)  16%, transparent); }
.fc-role .rb-badge.under    { color: var(--late);   background: color-mix(in oklch, var(--late)   16%, transparent); }
.fc-role .rb-badge.over     { color: var(--azure);  background: color-mix(in oklch, var(--azure)  16%, transparent); }
.fc-role .rb-badge.critical { color: var(--absent); background: color-mix(in oklch, var(--absent) 24%, transparent); }
.fc-role .rb-badge.idle     { color: var(--fg-3);   background: var(--panel-2); }

/* Role bar track + band + fill + ticks */
.fc-role .rb-bar {
  position: relative; height: 9px; border-radius: 5px;
  background: var(--panel-2); overflow: hidden;
}
.fc-role .rb-track { position: absolute; inset: 0; }
.fc-role .rb-band {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in oklch, var(--ready) 18%, transparent);
  border-left: 1px dashed color-mix(in oklch, var(--ready) 50%, transparent);
  border-right: 1px dashed color-mix(in oklch, var(--ready) 40%, transparent);
}
.fc-role .rb-fill {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .3s ease;
}
.fc-role.rs-under   .rb-fill { background: linear-gradient(90deg, var(--late), color-mix(in oklch, var(--late) 70%, var(--accent))); }
.fc-role.rs-critical .rb-fill { background: linear-gradient(90deg, var(--absent), color-mix(in oklch, var(--absent) 60%, var(--late))); }
.fc-role.rs-over    .rb-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--azure) 70%, var(--accent)), var(--azure)); }
.fc-role.rs-healthy .rb-fill { background: linear-gradient(90deg, var(--ready), color-mix(in oklch, var(--ready) 70%, var(--accent))); }
.fc-role .rb-tick {
  position: absolute; top: -1px; bottom: -1px; width: 1px;
}
.fc-role .rb-tick.t { background: color-mix(in oklch, var(--fg) 45%, transparent); }
.fc-role .rb-tick.c { background: color-mix(in oklch, var(--fg) 22%, transparent); }
.fc-role .rb-breakdown { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

/* Recruitment card */
.fc-recruit {
  border-color: color-mix(in oklch, var(--accent) 28%, var(--line-soft));
  background: color-mix(in oklch, var(--accent) 5%, var(--bg-deep));
}
.fc-recruit-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: var(--fg-2);
}
.fc-recruit-head > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.fc-recruit-head svg { color: var(--accent); }
.fc-auto-tag {
  font-size: 8px; font-weight: 700; letter-spacing: .08em;
  padding: 1px 5px; border-radius: 4px;
  background: var(--accent-dim); color: var(--accent);
}
.fc-recruit-body { margin-top: 7px; }
.fc-recruit-msg {
  font-size: 11.5px; color: var(--fg-2); line-height: 1.5; margin: 0 0 7px;
}
.fc-recruit-msg.ok { color: var(--ready); }
.fc-recruit .fc-copy-btn { margin-top: 7px; }

/* ── TASKS PANEL (center column) ─────────────────────────── */
.roster-tasks {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 14px;
}
.roster-tasks .rt-head {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  align-items: center; margin-bottom: 12px;
}
.roster-tasks .rt-title {
  font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: .01em;
}
.roster-tasks .rt-progress-txt {
  font-size: 11px; color: var(--fg-3); font-family: 'Geist Mono', monospace;
}
.roster-tasks .rt-progress-bar {
  grid-column: 1 / -1; height: 4px; border-radius: 3px;
  background: var(--panel-2); overflow: hidden; margin-top: 2px;
}
.roster-tasks .rt-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .3s ease;
}
.roster-tasks .rt-list { display: flex; flex-direction: column; gap: 8px; }
.roster-tasks .rt-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 11px; border-radius: var(--r-sm);
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  transition: border-color .14s;
}
.roster-tasks .rt-card:hover { border-color: var(--line); }
.roster-tasks .rt-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--fg-2);
}
.roster-tasks .rt-card.kind-discord .rt-dot { background: color-mix(in oklch, #5865f2 18%, var(--panel-2)); color: #7c87f5; }
.roster-tasks .rt-card.kind-signup  .rt-dot { background: color-mix(in oklch, var(--gold) 16%, var(--panel-2)); color: var(--gold); }
.roster-tasks .rt-card.done {
  border-color: color-mix(in oklch, var(--ready) 28%, var(--line));
  opacity: .68;
}
.roster-tasks .rt-card.done .rt-dot { background: color-mix(in oklch, var(--ready) 16%, var(--panel-2)); color: var(--ready); }
.roster-tasks .rt-card.done .rt-cardhead { text-decoration: line-through; text-decoration-color: var(--fg-3); }
.roster-tasks .rt-body { flex: 1; min-width: 0; }
.roster-tasks .rt-cardhead { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.roster-tasks .rt-cardsub { font-size: 11px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
.roster-tasks .rt-cta { flex: none; align-self: center; white-space: nowrap; }

/* ── VITALS (right column — 2×3 KPI grid) ────────────────── */
.roster-vitals {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 14px;
}
.roster-vitals .vt-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
}
.roster-vitals .vt-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 11px; border-radius: var(--r-sm);
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  text-align: left; transition: all .12s;
}
.roster-vitals .vt-card.vt-click { cursor: pointer; }
.roster-vitals .vt-card.vt-click:hover { border-color: var(--line); background: var(--panel-2); }
.roster-vitals .vt-card.vt-click.on {
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
  background: var(--accent-dim);
}
.roster-vitals .vt-head { display: flex; align-items: center; gap: 5px; }
.roster-vitals .vt-ico { display: inline-flex; color: var(--fg-3); }
.roster-vitals .vt-label { font-size: 10.5px; color: var(--fg-3); font-weight: 500; }
.roster-vitals .vt-value {
  font-family: 'Geist Mono', monospace; font-size: 19px; font-weight: 700;
  line-height: 1.1;
}
.roster-vitals .vt-value .vt-denom { font-size: 11px; color: var(--fg-3); font-weight: 400; }
.roster-vitals .vt-bar {
  height: 3px; border-radius: 2px; background: var(--panel-2); overflow: hidden; margin-top: 3px;
}
.roster-vitals .vt-fill { height: 100%; border-radius: 2px; transition: width .3s ease; }

/* ── RELIABILITY CELL (table) ────────────────────────────── */
.rel-cell { display: flex; align-items: center; gap: 7px; min-width: 92px; }
.rel-cell .rel-bar {
  flex: 1; height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden;
}
.rel-cell .rel-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
.rel-cell .rel-pct { font-size: 11px; font-weight: 600; flex: none; min-width: 32px; text-align: right; }

/* ── MEMBERS HEAD spacing in v3 ──────────────────────────── */
.roster-members-head { margin-top: 4px; }

/* ── RESPONSIVE — collapse shell ─────────────────────────── */
@media (max-width: 1100px) {
  /* Stack rail on top; un-stick so it doesn't trap scroll */
  .roster-shell {
    grid-template-columns: 1fr;
  }
  .roster-shell > .force-comp {
    position: static; max-height: none; overflow: visible;
  }
}
@media (max-width: 720px) {
  .roster-toprow { grid-template-columns: 1fr; }
  .roster-header { gap: 10px; }
  .event-selector, .lang-toggle { flex: 1; }
  .roster-vitals .vt-grid { grid-template-columns: 1fr 1fr; }
}

/* ── PHASE 2 · LIFECYCLE ─────────────────────────────────── */

/* Trial badge — inline pill next to name */
.trial-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: #a855f7;
  border-radius: 4px;
  vertical-align: middle;
}
.left-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  vertical-align: middle;
}

/* Row dimming by lifecycle */
.rtable tbody tr.lc-resting { opacity: 0.55; }
.rtable tbody tr.lc-left    { opacity: 0.4; font-style: italic; }
.rtable tbody tr.lc-trial .nm { color: #c084fc; }
.roster-grid .rcard.lc-resting { opacity: 0.55; }
.roster-grid .rcard.lc-left    { opacity: 0.4; }

/* Lifecycle dropdown picker */
.lifecycle-picker .lc-select {
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px 4px 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  min-width: 92px;
  transition: border-color 0.15s;
}
.lifecycle-picker .lc-select:hover {
  border-color: var(--fg-3);
}
.lifecycle-picker .lc-select:focus {
  border-color: var(--accent);
}

/* ── PHASE 3 · CONSOLIDATED STATUS CHIP + AT-RISK PILLS + DROPS ─── */

/* Status chip in the Status column (consolidated lifecycle + event reg) */
.status-cell { padding: 6px 8px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; line-height: 1.4;
}
.status-chip svg { width: 11px; height: 11px; flex: none; }

.status-chip.ready {
  color: var(--ready);
  background: color-mix(in oklch, var(--ready) 12%, var(--panel-2));
  border: 1px solid color-mix(in oklch, var(--ready) 28%, transparent);
}
.status-chip.busy {
  color: var(--fg);
  background: color-mix(in oklch, var(--busy) 22%, var(--panel-2));
  border: 1px solid color-mix(in oklch, var(--busy) 40%, transparent);
}
.status-chip.silent {
  color: var(--fg-3);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
}
.status-chip.resting {
  color: var(--fg-2);
  background: var(--panel-2);
  border: 1px dashed var(--line);
  font-style: italic;
}
.status-chip.left {
  color: var(--fg-3);
  background: transparent;
  border: 1px solid var(--line-soft);
  opacity: 0.7;
}

/* At-risk inline pills under the member name */
.atrisk-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 3px;
  padding-left: 16px;   /* indent to align under name (past dlink dot) */
}
.atrisk-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
  letter-spacing: 0.2px;
  line-height: 1.4;
  white-space: nowrap;
}
.atrisk-pill svg { width: 10px; height: 10px; flex: none; }
.atrisk-pill.miss3 {
  color: var(--absent);
  background: color-mix(in oklch, var(--absent) 14%, var(--panel-2));
  border: 1px solid color-mix(in oklch, var(--absent) 30%, transparent);
}
.atrisk-pill.silent3 {
  color: var(--late, oklch(0.78 0.15 60));
  background: color-mix(in oklch, var(--late, oklch(0.78 0.15 60)) 12%, var(--panel-2));
  border: 1px solid color-mix(in oklch, var(--late, oklch(0.78 0.15 60)) 30%, transparent);
}
.atrisk-pill.cplow {
  color: var(--late, oklch(0.78 0.15 60));
  background: color-mix(in oklch, var(--late, oklch(0.78 0.15 60)) 10%, var(--panel-2));
  border: 1px solid color-mix(in oklch, var(--late, oklch(0.78 0.15 60)) 24%, transparent);
}

/* Show-Left filter toggle (checkbox style) */
.show-left-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-2);
  padding: 4px 9px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  cursor: pointer; user-select: none;
  transition: border-color .12s, color .12s;
}
.show-left-toggle:hover { border-color: var(--fg-3); color: var(--fg); }
.show-left-toggle input[type="checkbox"] {
  width: 12px; height: 12px; margin: 0; cursor: pointer; accent-color: var(--accent);
}

/* Hide the old per-row warn-icon (replaced by at-risk pill) — leave class intact for grid view */
.rtable tbody .warn-ico { display: none; }

/* Silent dot for drill-down (attendance.js) */
.sdot-sm.silent { background: var(--fg-3); opacity: 0.7; }