/* Roster — the planner view for a division with no routes.
   Colours come from theme.css, so light and dark both hold. */

.roster-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 22px 60px;
}

.roster-head h1 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.01em; }
.roster-head p { margin: 0 0 16px; max-width: 66ch; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.roster-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; background: var(--line);
  border: 1.5px solid var(--line); border-radius: 13px; overflow: hidden;
}
.rs-cell { display: grid; gap: 2px; padding: 13px 15px; background: var(--panel-2); }
.rs-cell.bad { background: rgba(192,57,43,.09); }
.rs-k { color: var(--muted-2); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rs-v { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.rs-cell.bad .rs-v { color: #c0392b; }

/* Uncovered sites lead, because that is the only thing on this screen that
   needs someone to do something today. */
.roster-warn {
  margin: 16px 0; padding: 14px 16px;
  border: 1.5px solid rgba(192,57,43,.45); border-radius: 12px;
  background: rgba(192,57,43,.07);
}
.roster-warn h2 { margin: 0 0 9px; font-size: 14px; }
.rw-row { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); }
.rw-row:first-of-type { border-top: 0; }
.rw-row strong { font-size: 13.5px; }
.rw-row span { color: var(--muted); font-size: 12.5px; }

.roster-list {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  margin-top: 18px;
}

.rc { padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--panel-2); }
.rc.empty { border-style: dashed; opacity: .82; }
.rc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rc-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; }
.rc-name { flex: 1; font-size: 14.5px; }
.rc-size {
  padding: 2px 8px; border-radius: 999px; background: var(--track);
  color: var(--muted); font-size: 11px; font-weight: 800;
}
.rc-none { margin: 0; color: var(--muted); font-size: 12.5px; }

.rc-site { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); }
.rc-site:first-of-type { border-top: 0; }
.rc-site b { font-size: 13.5px; }
.rc-site span { color: var(--muted-2); font-size: 11.5px; }
.rc-site i { color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 700; }

.rc-foot {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 10px; padding-top: 9px; border-top: 1.5px solid var(--line-2);
}
.rc-foot span { flex: 1; color: var(--muted-2); font-size: 11.5px; }
.rc-foot b { font-size: 13.5px; font-weight: 800; }
.rc-foot.over b { color: #c0392b; }

.roster-empty {
  padding: 18px; border: 1.5px dashed var(--line-2); border-radius: 12px;
  background: var(--panel-2); color: var(--muted); font-size: 13.5px;
}

@media (max-width: 720px) {
  .roster-wrap { padding: 18px 14px 40px; }
  .roster-list { grid-template-columns: 1fr; }
}