/* ══════════════════════════════════════════════════════════════
   PATTERN — Målbilder result page
   B&W-only badge / list / details styling for the MÅLBILDER
   /analysera result page. No color: differentiation via inversion
   (black background + white text for "needs work"), border weight,
   and left-bar accent on the open <details>.

   Markup (resultat.html):
     <details class="needs-work">
       <summary class="summary-row">
         <span class="summary-text">…</span>
         <span class="summary-badge badge-fail">Behöver arbete</span>
       </summary>
       …
     </details>
     <ul class="pitfall-list">
       <li class="pitfall-item">…</li>
     </ul>
     <div class="example-item">…</div>

   Used by: MALBILDER
   Candidates: any read-only result page with pass/fail badge + summary
   ══════════════════════════════════════════════════════════════ */

/* ── Summary row ── */
.summary-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    cursor: pointer;
    padding: var(--s-2) 0;
}
.summary-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.summary-badge {
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    border: 1px solid currentColor;
    font-weight: 500;
}

/* ── Pass/fail badges (B&W: pass = outline, fail = inverted) ── */
.badge-pass {
    background: transparent;
    color: var(--fg);
    border-color: var(--fg);
}
.badge-fail {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}

/* ── needs-work indicator on parent <details> ── */
.needs-work {
    border-left: 3px solid var(--fg);
    padding-left: var(--s-3);
}
.needs-work[open] {
    background: var(--bg-alt, rgba(0, 0, 0, 0.02));
}

/* ── Pitfall list ── */
.pitfall-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pitfall-item {
    padding: var(--s-2) 0 var(--s-2) var(--s-3);
    border-left: 2px solid var(--medium-grey, #999);
    font-size: 0.875rem;
    margin-bottom: var(--s-1);
}

/* ── Example items (weak vs strong target-state cards) ── */
.example-item {
    padding: var(--s-3);
    background: var(--bg-alt, rgba(0, 0, 0, 0.02));
    border-radius: 4px;
    border-left: 2px solid var(--medium-grey, #999);
}

/* ── Pass/fail inline text (in details body) ── */
.text-pass {
    font-weight: 500;
}
.text-fail {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-style: dotted;
}