/* =====================================================================
 * ComputeFit — Hardware-Fit / Recommendation Visual Polish v0.1 (candidate).
 *
 * Same semantics -> better presentation. NO logic/evidence/decision change:
 * every rule here restyles EXISTING markup produced by the frozen checker,
 * the recommendation adapter, and the hardware-fit presentation layer.
 *
 * Loaded LAST (after all cf CSS) so it is purely additive.
 *
 * Visual grammar (roles are separated by label + fill + border):
 *   DECISION   RECOMMENDED            strong green (kept, softened border)
 *   MEASURED   COMPUTEFIT_TESTED      green-tinted evidence pill
 *   PRIMARY    Guidance: Fits NGB     light/white + subtle outline
 *   PRIMARY    No measured evidence   light/white + subtle outline (no solid
 *                                     blue fill anymore)
 *   FACT       ~14.4GB weights        neutral, quiet
 *   SOURCE     VENDOR                 cream/amber, weaker than primary
 *   STATE      CANDIDATE              neutral gray/white
 * Error colors are never used for UNKNOWN or candidate states.
 * ===================================================================== */

/* ------------------------------------------------------------------ *
 * ISSUE 8/1 — Unified badge role system.
 * The existing cf-evidence chips already carry .cf-evidence--vendor etc;
 * the guidance / no-measured / fact badges get the SAME chip anatomy.
 * Specificity note: the theme's base rule is `.cf-fit-card__facts span`
 * (0,1,1), so these role rules use `.cf-fit-card__facts .X` (0,2,1) to
 * win deterministically, and only the fill overrides that must beat the
 * theme's `!important` carry a bounded `!important`.
 * ------------------------------------------------------------------ */
.cf-fit-card__facts .cf-fit-card__guidance,
.cf-fit-card__facts .cf-fit-card__fact,
.cf-fit-card__facts .cf-fit-card__candidate-badge {
    box-sizing: border-box;
    display: inline-block;
}

/* Primary status (Guidance / No measured evidence) = one family:
   white fill + subtle outline + identical metrics. */
.cf-fit-card__facts .cf-fit-card__guidance,
.cf-fit-card__facts [data-cf-evidence-class="NO_MEASURED_EVIDENCE"] {
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, 0.28);
    background: #ffffff;
    color: #333333;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Remove the old solid-blue fill on "No measured evidence" (ISSUE 1). */
.cf-fit-card__facts [data-cf-evidence-class="NO_MEASURED_EVIDENCE"] {
    color: #333333 !important;
    background: #ffffff !important;
    border: 1px solid rgba(128, 128, 128, 0.28) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 5px 9px !important;
}

/* Guidance keeps a faint blue outline so "vendor guidance" reads as
   informational (not an error, not a measured claim) while staying in the
   same primary family as No measured evidence. */
.cf-fit-card__facts .cf-fit-card__guidance {
    border-color: rgba(49, 103, 214, 0.38);
    color: #1a3d7c;
    background: #ffffff;
}

/* ---- FACT — neutral, quiet (weaker than primary) ---- */
.cf-fit-card__facts .cf-fit-card__fact {
    padding: 5px 9px;
    border-radius: 999px;
    background: #f7f7f7;
    border: 1px solid rgba(128, 128, 128, 0.14);
    color: #555555;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- SOURCE — VENDOR cream/amber (weaker than primary status) ---- */
.cf-fit-card--guidance .cf-evidence--vendor,
.cf-fit-card--candidate .cf-evidence--vendor {
    color: #835d10 !important;
    background: #fdf3d7 !important;
    border: 1px solid rgba(131, 93, 16, 0.22) !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

/* ---- STATE — CANDIDATE neutral gray/white ---- */
.cf-fit-card__facts .cf-fit-card__candidate-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(128, 128, 128, 0.24);
    color: #6a6a6a;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Existing evidence chips inside the RESULTS list (TESTED etc.) keep their
   established identity but align metrics with the role system. */
.cf-fit-card__facts .cf-evidence--tested {
    border: 1px solid rgba(17, 106, 69, 0.22);
}

/* ------------------------------------------------------------------ *
 * ISSUE 10 — Card border/background: subtle border, light neutral
 * background, no heavy shadow, no saturated fill.
 * ------------------------------------------------------------------ */
.cf-fit-card--guidance,
.cf-fit-card--candidate {
    background: #fcfcfb;
    box-shadow: none;
}
.cf-fit-card--guidance .cf-fit-card__facts span,
.cf-fit-card--candidate .cf-fit-card__facts span {
    box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * ISSUE 2 — Desktop alignment (>=768px): badge group starts on a shared
 * vertical line. Guidance/candidate cards are flex rows (model left,
 * badges right). Give the facts column a fixed min-width so every card's
 * badge group aligns on the same start edge at 1440px, and let model info
 * take the remaining space. The TESTED cards already use a 2-col grid.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .cf-fit-card--guidance,
    .cf-fit-card--candidate {
        display: grid;
        grid-template-columns: minmax(165px, 1fr) auto;
        align-items: center;
        column-gap: 24px;
    }
    .cf-fit-card--guidance .cf-fit-card__main,
    .cf-fit-card--candidate .cf-fit-card__main {
        min-width: 0;
        width: 100%;
    }
    /* Model name keeps a one-line profile on desktop: cap to available
       width with ellipsis-free wrap only if the column is genuinely too
       narrow; 165px minimum keeps "Gemma 4 26B A4B" on one line. */
    .cf-fit-card--guidance .cf-fit-card__main strong,
    .cf-fit-card--candidate .cf-fit-card__main strong {
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cf-fit-card--guidance .cf-fit-card__facts,
    .cf-fit-card--candidate .cf-fit-card__facts {
        justify-content: flex-end;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
    }
    .cf-fit-card--guidance .cf-fit-card__facts .cf-fit-card__guidance,
    .cf-fit-card--guidance .cf-fit-card__facts .cf-fit-card__fact,
    .cf-fit-card--candidate .cf-fit-card__facts [data-cf-evidence-class="NO_MEASURED_EVIDENCE"],
    .cf-fit-card--candidate .cf-fit-card__facts .cf-fit-card__candidate-badge {
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------ *
 * ISSUE 3 — Subtitle hierarchy: the quant descriptor under the model
 * name is one consistent secondary line (both cards already render it in
 * .cf-fit-card__main span; the polish presenter normalizes to quant-only).
 * ------------------------------------------------------------------ */
.cf-fit-card--guidance .cf-fit-card__main span,
.cf-fit-card--candidate .cf-fit-card__main span {
    font-size: 1.05rem;
    color: var(--color-secondary-text, #6a6a6a);
    line-height: 1.3;
}

/* ------------------------------------------------------------------ *
 * ISSUE 4 — Results header: existing pieces (summary line + result head)
 * already exist; tighten spacing so they read as one header block. No HBS
 * restructuring.
 * ------------------------------------------------------------------ */
.cf-checker__summary {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: var(--color-secondary-text, #666);
}
.cf-checker__summary span:first-child {
    font-weight: 700;
    color: var(--color-primary-text, #222);
}
.cf-checker__result-head {
    margin-bottom: 6px;
}
.cf-checker__result-head [data-cf-result-count] {
    font-size: 0.9rem;
    color: var(--color-secondary-text, #777);
}

/* ------------------------------------------------------------------ *
 * ISSUE 5 — Explanation text: secondary weight, smaller, tightened
 * line-height; authority words keep a modest emphasis.
 * ------------------------------------------------------------------ */
.cf-checker__note {
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-secondary-text, #777);
}
.cf-checker__note strong {
    color: #444;
    font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Vertical rhythm between stacked blocks (ISSUE 10): header->cards,
 * cards->explanation, explanation->recommendation, rec->explorer.
 * ------------------------------------------------------------------ */
.cf-fit-results {
    gap: 10px;
}
.cf-validated-wrap {
    /* not used; kept for clarity */
}
.cf-checker__validated + .cf-recommendation-root {
    margin-top: 6px;
}
.cf-recommendation-root + .cf-measured-explorer-root {
    margin-top: 6px;
}

/* ------------------------------------------------------------------ *
 * ISSUE 6 — UNKNOWN Recommendation: same component family as the
 * RECOMMENDED card, neutral outline, readable body, reason chips
 * secondary. UNKNOWN is a normal result, never a warning/error.
 * ------------------------------------------------------------------ */
.cf-recommendation--unknown {
    border-color: rgba(128, 128, 128, 0.3);
    background: #fbfbfa;
}
.cf-recommendation__status--unknown {
    color: #4a4a4a;
    background: #ffffff;
    border: 1px solid rgba(128, 128, 128, 0.3);
    font-weight: 700;
}
.cf-recommendation--unknown .cf-recommendation__basis {
    color: #444;
    font-size: 0.9375rem;
}
.cf-recommendation--unknown .cf-recommendation__chip {
    background: #f1f1f0;
    color: #666;
    border: 1px solid rgba(128, 128, 128, 0.12);
}

/* RECOMMENDED status stays green family (Decision = strongest signal). */
.cf-recommendation__status--recommended {
    color: #ffffff;
    background: #1f6f43;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * ISSUE 7 — Recommendation reason hierarchy: primary reasons (exact
 * config / workload / context / VRAM / performance) normal weight; the
 * "not measured / unknown quality" style reasons are muted. Only visual
 * weight changes — reasonCodes and wording untouched.
 * ------------------------------------------------------------------ */
.cf-recommendation__why li,
.cf-recommendation__chip {
    color: #555;
}
/* Muted set: these codes describe ABSENCE, not a positive finding. */
[data-cf-reason-code="QUALITY_NOT_MEASURED"],
[data-cf-reason-code="STABILITY_UNKNOWN"],
[data-cf-reason-code="QUALITY_UNKNOWN"],
[data-cf-reason-code="PERFORMANCE_UNKNOWN"],
[data-cf-reason-code="CONTEXT_NOT_MEASURED"],
[data-cf-reason-code="STABILITY_NOT_MEASURED"] {
    color: #9a9a9a !important;
}
.cf-recommendation__why li[data-cf-reason-code="QUALITY_NOT_MEASURED"],
.cf-recommendation__why li[data-cf-reason-code="STABILITY_UNKNOWN"],
.cf-recommendation__why li[data-cf-reason-code="QUALITY_UNKNOWN"],
.cf-recommendation__why li[data-cf-reason-code="PERFORMANCE_UNKNOWN"],
.cf-recommendation__why li[data-cf-reason-code="CONTEXT_NOT_MEASURED"],
.cf-recommendation__why li[data-cf-reason-code="STABILITY_NOT_MEASURED"] {
    color: #9a9a9a !important;
    font-weight: 400;
}

/* ------------------------------------------------------------------ *
 * ISSUE 11 — Interactive affordance:
 *   clickable candidate card (<a>) keeps real hover/focus;
 *   non-clickable static cards get no fake hover and no pointer cursor.
 * ------------------------------------------------------------------ */
a.cf-fit-card--candidate:hover {
    border-color: rgba(49, 103, 214, 0.45);
    background: #f6f8fd;
}
a.cf-fit-card--candidate:focus-visible {
    outline: 2px solid rgba(49, 103, 214, 0.6);
    outline-offset: 2px;
}
.cf-fit-card--static.cf-fit-card--guidance,
.cf-fit-card--static.cf-fit-card--candidate {
    cursor: default;
}
.cf-fit-card--static.cf-fit-card--guidance:hover,
.cf-fit-card--static.cf-fit-card--candidate:hover {
    border-color: var(--color-border, #d8d8d8);
    background: #fcfcfb;
}

/* ------------------------------------------------------------------ *
 * ISSUE 9 — Mobile card layout (<=480px): deliberate 2-tier structure.
 * Primary status first, then Fact / Source / State on the next line.
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
    .cf-fit-card--guidance .cf-fit-card__facts,
    .cf-fit-card--candidate .cf-fit-card__facts {
        width: 100%;
        justify-content: flex-start;
    }
    /* Primary status occupies its own line. */
    .cf-fit-card--guidance .cf-fit-card__guidance,
    .cf-fit-card--candidate [data-cf-evidence-class="NO_MEASURED_EVIDENCE"] {
        flex: 1 1 100%;
    }
    .cf-fit-card--guidance .cf-fit-card__fact,
    .cf-fit-card--guidance .cf-evidence--vendor,
    .cf-fit-card--candidate .cf-fit-card__candidate-badge {
        flex: 0 1 auto;
    }
}

/* Medium screens: allow natural wrap without forcing the 2-tier split. */
@media (min-width: 481px) and (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%;
    }
}