/* ─────────────────────────────────────────────────────────────────────────
 * Campaign Calendar — sprint Gantt for a representative engagement.
 * Pure CSS, no JS, no inline styles (keeps the strict CSP: style-src 'self').
 * Time axis = 12 weeks / 6 two-week sprints. Rows = workstream lanes whose
 * bars overlap to show parallel work. Horizontal-scrolls on narrow screens.
 * ──────────────────────────────────────────────────────────────────────── */

.cal {
  margin-top: 28px;
  border: 1px solid var(--border);
  background: var(--panel);
  overflow-x: auto;
}
.cal__inner {
  position: relative;
  min-width: 860px;
}

.cal__grid {
  display: grid;
  grid-template-columns: 184px repeat(12, 1fr);
  align-items: stretch;
}

/* ── Header: corner + six sprint bands ─────────────────────────────────── */
.cal__corner {
  grid-column: 1; grid-row: 1;
  padding: 13px 16px;
  font-size: 10px; letter-spacing: 0.18em; color: var(--dim);
  border-bottom: 1px solid var(--border-hi);
  align-self: center;
}
.cal__sprint {
  grid-row: 1;
  padding: 11px 6px 9px;
  text-align: center;
  border-bottom: 1px solid var(--border-hi);
  border-left: 1px solid var(--border-hi);
}
.cal__sprint span { display: block; }
.cal__sprint .cal__sprint-id { font-size: 10.5px; letter-spacing: 0.12em; color: var(--text); }
.cal__sprint .cal__sprint-wk { font-size: 9px; letter-spacing: 0.08em; color: var(--dim); margin-top: 3px; }
.sp1 { grid-column: 2 / 4; }
.sp2 { grid-column: 4 / 6; }
.sp3 { grid-column: 6 / 8; }
.sp4 { grid-column: 8 / 10; }
.sp5 { grid-column: 10 / 12; }
.sp6 { grid-column: 12 / 14; }

/* ── Lanes ─────────────────────────────────────────────────────────────── */
.cal__label {
  grid-column: 1;
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px;
  min-height: 40px;
  font-size: 11.5px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.cal__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px; }

.cal__track {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid var(--border);
  /* week gridlines */
  background-image: repeating-linear-gradient(90deg,
    var(--border) 0 1px, transparent 1px calc(100% / 12));
}

.cal__bar {
  height: 13px;
  margin: 0 3px;
  border-radius: 3px;
  position: relative;
  cursor: default;
  transition: filter .18s ease, transform .18s ease;
}
.cal__bar:hover { filter: brightness(1.18); transform: translateY(-1px); }
.cal__bar--hatch {
  background-image: repeating-linear-gradient(135deg,
    rgba(7,9,10,0.0) 0 5px, rgba(7,9,10,0.35) 5px 7px);
}

/* week spans within a 12-col track: week A..B -> grid-column A / B+1 */
.s1-3  { grid-column: 1 / 4; }
.s4-12 { grid-column: 4 / 13; }
.s2-4  { grid-column: 2 / 5; }
.s3-6  { grid-column: 3 / 7; }
.s5-7  { grid-column: 5 / 8; }
.s6-9  { grid-column: 6 / 10; }
.s8-11 { grid-column: 8 / 12; }
.s3-12 { grid-column: 3 / 13; }
.s9-12 { grid-column: 9 / 13; }

/* lane / bar colors (design tokens + clock-palette greens) */
.c-recon   { background: var(--accent-2); }
.c-recon-d { background: #16461f; }
.c-access  { background: var(--accent); }
.c-c2      { background: #2f6a26; }
.c-esc     { background: var(--warn); }
.c-lat     { background: var(--accent); }
.c-exfil   { background: #1f6b2a; }
.c-detect  { background: var(--accent-2); }
.c-report  { background: #16461f; }

/* ── "Now" marker — week 6 (≈ DAY 41/84 on the campaign clock) ──────────── */
.cal__now {
  position: absolute; top: 0; bottom: 0;
  left: calc(184px + (100% - 184px) * 0.5);
  width: 0; border-left: 1px dashed var(--accent);
  pointer-events: none;
}
.cal__now span {
  position: absolute; top: 2px; left: 4px;
  font-size: 8.5px; letter-spacing: 0.14em; color: var(--accent);
}

/* ── Milestone strip ───────────────────────────────────────────────────── */
.cal__miles {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--dim); letter-spacing: 0.04em;
}
.cal__miles b { color: var(--accent); font-weight: 600; }
.cal__miles .crit { color: var(--danger); }

/* ── Legend ────────────────────────────────────────────────────────────── */
.cal__legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 14px;
  font-size: 10.5px; color: var(--dim); letter-spacing: 0.08em;
}
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend i { width: 11px; height: 11px; border-radius: 2px; font-style: normal; }

@media (max-width: 720px) {
  .cal__legend, .cal__miles { font-size: 10px; }
}