/* ══════════════════════════════════════════════════════════════
   PATTERN — Cycle tracker

   UI for short-cycle commitment tracking with team collaboration.
   Used by 30-30 (30/60/90-day commitment cycles) and any app that
   tracks recurring commitments grouped by cycle, with team join
   codes and per-commitment toggle states.

   Components:
   - .cycle-meta / .cycle-meta-bar    Inline metadata for cycle dates
   - .commitment-row + form fields    Editable commitment input row
   - .commitment-item                 Displayed commitment card
   - .commitment-done                 Strikethrough state for completed
   - .team-header / .team-code-box    Team join code display
   - .toggle-form / .toggle-btn       Inline toggle (e.g. mark done)
   - .status-active / -completed / -overdue   Cycle state modifiers
                                              (extends .status-badge from kanon)

   Base: strategios.css (uses .status-badge base)
   Used by: 30-30
   Candidates: BAKÅTSYN (sprint/retro tracking),
               ANTAGANDEN (workshop session-cycle tracking)
   ══════════════════════════════════════════════════════════════ */

/* ── Cycle metadata ─────────────────────────────────────────── */
.cycle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-size: 0.8125rem;
    color: var(--muted);
    margin-bottom: var(--s-2);
}

.cycle-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-size: 0.8125rem;
    color: var(--muted);
    margin-bottom: var(--s-4);
}

/* ── Commitment input row (editable) ────────────────────────── */
.commitment-row {
    display: flex;
    gap: var(--s-3);
    align-items: flex-end;
    margin-bottom: var(--s-3);
}

.commitment-what { flex: 2; }
.commitment-who { flex: 1; }
.remove-row {
    align-self: flex-end;
    margin-bottom: var(--s-1);
}

/* ── Commitment item (displayed) ────────────────────────────── */
.commitment-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--s-2);
    background: var(--bg-elevated);
    transition: border-color var(--transition);
}

.commitment-done { opacity: 0.5; }
.commitment-done .commitment-text span:first-child { text-decoration: line-through; }

.commitment-text {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

/* ── Toggle button (inline form-as-button) ──────────────────── */
.toggle-form { display: inline; }
.toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    line-height: 1;
    color: var(--fg);
}

/* ── Team header / join code ────────────────────────────────── */
.team-header { margin-bottom: var(--s-8); }

.team-code-box {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
    margin-top: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-alt);
}
.team-code-box .code {
    font-weight: 600;
    letter-spacing: 0.15em;
    font-size: 1rem;
}

/* ── Status modifiers (extends .status-badge from kanon) ────── */
.status-active    { border-color: var(--fg); color: var(--fg); }
.status-completed { border-color: var(--muted); color: var(--muted); }
.status-overdue   { border-color: var(--fg); color: var(--fg); border-style: dashed; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .commitment-row { flex-direction: column; }
}