/* =====================================================================
 * ComputeFit — Hardware-Fit Results card presentation v0.1 (candidate).
 *
 * Unified Evidence-authority card grammar for the Hardware-Fit Results
 * list. Loaded AFTER the theme's screen.css so these rules are additive
 * presentation overrides. The frozen checker CSS (--no-result oversized
 * layout) is intentionally left in place: this layer renames the affected
 * card root to cf-fit-card--candidate, so the oversized rules no longer
 * match, and supplies the compact unified anatomy below.
 *
 * Three evidence classes share one card anatomy:
 *   EXACT_MEASURED       (existing TESTED compact card — untouched)
 *   VENDOR_GUIDANCE      cf-fit-card--guidance
 *   NO_MEASURED_EVIDENCE cf-fit-card--candidate
 *
 * No red / error styling is used for candidates: "No measured evidence"
 * means exactly that — not incompatible, not unsupported, not a bad fit.
 * ===================================================================== */

/* ---- VENDOR_GUIDANCE badge ----
   "Guidance: Fits NGB" replaces the assertive "Fit: Excellent" on cards
   whose only basis is published weights. Blue outline style reads as a
   note, distinct from the amber VENDOR source badge beside it. */
.cf-fit-card__guidance {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid #b7c8f5;
    color: #114fc7;
    background: #f3f7ff;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- NO_MEASURED_EVIDENCE badge ----
   Neutral gray: candidate ≠ incompatible. Never red, never error-toned. */
.cf-fit-card__candidate-badge {
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--color-secondary-text, #666);
    border: 1px solid var(--color-border, #d8d8d8);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Candidate fit span keeps the standard fit-badge blue, but the wording
   ("No measured evidence") is neutral; the label carries the semantic. */
.cf-fit-card--candidate .cf-fit-card__fit {
    color: #114fc7;
    background: #eef4ff;
}

/* VENDOR source badge keeps its established amber identity on the unified
   cards (postfix override so it holds even when the theme's screen.css
   load order varies). Guidance vs VENDOR stay visually distinct. */
.cf-fit-card--guidance .cf-evidence--vendor,
.cf-fit-card--candidate .cf-evidence--vendor {
    color: #835d10 !important;
    background: #fff4d8 !important;
}

/* ---- Unified compact anatomy ----
   Both rewritten card classes inherit the default .cf-fit-card flex row
   (model/quant left, badges right) — the same anatomy as every other
   card. These rules only tighten layout so badges wrap naturally and no
   horizontal scroll appears at 375px. */
.cf-fit-card--guidance .cf-fit-card__main,
.cf-fit-card--candidate .cf-fit-card__main {
    min-width: 0;
}

.cf-fit-card--guidance .cf-fit-card__main strong,
.cf-fit-card--candidate .cf-fit-card__main strong {
    max-width: 24ch;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
    line-height: 1.18;
}

.cf-fit-card--guidance .cf-fit-card__facts,
.cf-fit-card--candidate .cf-fit-card__facts {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.cf-fit-card--candidate .cf-fit-card__facts span,
.cf-fit-card--guidance .cf-fit-card__facts span {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Candidate card root that is an <a> (Qwen guide link) keeps inherit color
   and never shows an error/red hover. */
.cf-fit-card--candidate:hover {
    opacity: 1;
    border-color: rgba(31, 94, 255, 0.35);
    background: var(--color-lighter-gray);
}

@media (max-width: 767px) {
    .cf-fit-card--guidance .cf-fit-card__facts,
    .cf-fit-card--candidate .cf-fit-card__facts {
        justify-content: flex-start;
        max-width: 100%;
    }
    .cf-fit-card--candidate .cf-fit-card__facts span,
    .cf-fit-card--guidance .cf-fit-card__facts span {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .cf-fit-card--guidance .cf-fit-card__main,
    .cf-fit-card--candidate .cf-fit-card__main {
        width: 100%;
    }
    .cf-fit-card--guidance .cf-fit-card__facts,
    .cf-fit-card--candidate .cf-fit-card__facts {
        width: 100%;
    }
}