/* ══════════════════════════════════════════════════════════════
   PATTERN — Criterion checklist

   List of evaluation criteria, each rendered as a collapsible
   <details> element with a summary row containing pass/fail badge
   and an expandable body with diagnostics, pitfalls, and examples.

   Used by quality-assessment / kvalitetstest UIs where each item
   is graded individually and the user can drill into reasoning.

   Markup sketch:
     <details class="needs-work">
       <summary class="summary-row">
         <span class="summary-text">Är målbilden konkret?</span>
         <span class="summary-badge badge-fail">Behöver bearbetas</span>
       </summary>
       <div class="details-content">
         <ul class="pitfall-list">
           <li class="pitfall-item">Abstrakta ord: "förbättrad", "ökad"</li>
         </ul>
         <div class="example-item">
           <strong>Bättre:</strong> Konkreta exempel...
         </div>
       </div>
     </details>

   Base: strategios.css (uses .details-content + canonical tokens)
   Used by: MÅLBILDER (quality assessment of strategic målbilder)
   Candidates: STRATEGIANALYS (kvalitetstest per dimension),
               BAKÅTSYN (retro evaluation criteria),
               DIALOG (per-dimension diagnostics)
   ══════════════════════════════════════════════════════════════ */

/* ── Summary row (clickable header inside <details>) ── */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: var(--s-2);
}

.summary-text {
    font-size: 0.875rem;
    flex: 1;
}

.summary-badge {
    font-size: 0.75rem;
    padding: 0.125rem var(--s-2);
    border-radius: 0.125rem;
    white-space: nowrap;
}

/* ── Pass / fail badges ─────────────────────────────────────── */
/* TODO: migrate to .badge[data-state="pass|fail"] */
.badge-pass {
    background: var(--black);
    color: var(--white);
}

.badge-fail {
    border: 1px solid var(--medium-grey);
    color: var(--medium-grey);
}

/* ── State modifier on the <details> element ──────────────── */
details.needs-work {
    border-color: var(--medium-grey);
}

/* ── Pitfall list (common mistakes) ─────────────────────────── */
.pitfall-list {
    border-top: 1px solid var(--light-grey);
    padding-top: var(--s-2);
    list-style: none;
}

.pitfall-item {
    font-size: 0.8125rem;
    color: var(--dark-grey);
    margin-bottom: var(--s-1);
}

/* ── Example item (good/bad example callouts) ──────────────── */
.example-item {
    border-left: 2px solid var(--light-grey);
    padding-left: var(--s-3);
}