.cs-wrap{ border:1px solid #ddd; border-radius:12px; padding:14px; }
.cs-day-header{ font-weight:800; font-size:16px; margin:16px 0 10px; }
.cs-list{ display:flex; flex-direction:column; gap:8px; }

.cs-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:10px;
  background:#fafafa;
  border-left:10px solid transparent;
}
.cs-row.cs-behind{ border-left-color:#b00020; }
.cs-row.cs-ontime, .cs-row.cs-ahead{ border-left-color:#0a7a20; }
.cs-row.cs-active{ outline:2px solid rgba(0,0,0,.08); }

.cs-status{ width:90px; flex:0 0 90px; }
.cs-pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px; }
.cs-pill-neutral{ background:#eee; color:#333; }
.cs-pill-red{ background:#b00020; color:#fff; }
.cs-pill-green{ background:#0a7a20; color:#fff; }

.cs-col{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-col-desc{ white-space:normal; }
.cs-delta{ margin-left:auto; font-weight:700; opacity:.8; min-width:70px; text-align:right; }


/* Progress bar */
.ssf-progress{ height:8px; border-radius:999px; background:#e6e6e6; overflow:hidden; margin-top:6px; flex-basis:100%; width:100%; }
.ssf-progress-fill{ height:100%; width:0%; background:#111; opacity:.25; }


/* Public Run Mode */
.ssf-run-banner{ padding:10px 12px; border:1px solid #ddd; border-radius:10px; background:#fff; margin-bottom:12px; }
.ssf-actual{ font-weight:700; opacity:.8; margin-left:10px; white-space:nowrap; }

/* Allow full description text */
.cs-col-desc{ white-space:normal; overflow:visible; text-overflow:clip; }

/* Public Run Mode: show full content */
.ssf-run-public .cs-row{ flex-wrap:wrap; align-items:flex-start; }
.ssf-run-public .cs-col{ white-space:normal; overflow:visible; text-overflow:clip; }
.ssf-run-public .cs-status{ flex:0 0 120px; }

.ssf-run-note{ margin-top:6px; font-size:13px; opacity:.8; }


/* Show selector */
.ssf-show-select{ margin-top:10px; }
.ssf-show-select select{ margin-left:8px; padding:6px 10px; border-radius:10px; }