﻿
/* =========================================================
   DETAILED "WHY THIS RESULT" REPORT
========================================================= */

.why-result-panel{
    margin-top:18px;
    padding:21px;

    border:1px solid var(--line);
    border-radius:21px;

    background:
        linear-gradient(
            145deg,
            rgba(20,120,255,.025),
            rgba(255,92,168,.014),
            rgba(255,181,143,.018)
        );
}


.why-result-kicker{
    color:var(--blue);

    font-size:.58rem;
    font-weight:760;

    letter-spacing:.095em;
    text-transform:uppercase;
}


.why-result-title{
    margin-top:7px;

    color:var(--text);

    font-size:1.15rem;
    font-weight:690;

    letter-spacing:-.03em;
}


.why-result-intro{
    max-width:760px;

    margin-top:9px;

    color:var(--muted);

    font-size:.7rem;
    line-height:1.67;
}


.why-decision{
    margin-top:17px;

    padding:16px;

    border-radius:16px;

    border:
        1px solid
        rgba(20,120,255,.09);

    background:
        rgba(20,120,255,.035);
}


.why-decision-label{
    color:var(--muted-2);

    font-size:.55rem;
    font-weight:750;

    letter-spacing:.08em;
    text-transform:uppercase;
}


.why-decision strong{
    display:block;

    margin-top:7px;

    color:var(--text);

    font-size:.84rem;
    line-height:1.4;
}


.why-decision p{
    margin-top:7px;

    color:var(--muted);

    font-size:.65rem;
    line-height:1.58;
}


.why-grid{
    margin-top:11px;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:9px;
}


.why-card{
    min-height:145px;

    padding:15px;

    border:1px solid var(--line);

    border-radius:16px;

    background:
        rgba(255,255,255,.32);
}


body.dark .why-card{
    background:
        rgba(255,255,255,.025);
}


.why-card-top{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;
}


.why-card-top strong{
    color:var(--text);

    font-size:.68rem;
    font-weight:670;
}


.why-badge{
    flex:0 0 auto;

    padding:
        4px 8px;

    border-radius:999px;

    color:var(--muted);

    background:
        rgba(120,125,140,.08);

    font-size:.5rem;
    font-weight:760;

    letter-spacing:.055em;

    text-transform:uppercase;
}


.why-badge.normal{
    color:#208257;

    background:
        rgba(42,168,110,.09);
}


.why-badge.moderate{
    color:#ad731d;

    background:
        rgba(220,153,45,.11);
}


.why-badge.high{
    color:#d15863;

    background:
        rgba(215,82,97,.10);
}


.why-badge.low{
    color:#657080;

    background:
        rgba(101,112,128,.09);
}


.why-value{
    margin-top:12px;

    color:var(--text);

    font-size:
        clamp(
            1rem,
            2vw,
            1.25rem
        );

    font-weight:690;

    letter-spacing:-.035em;
}


.why-card p{
    margin-top:8px;

    color:var(--muted);

    font-size:.62rem;

    line-height:1.58;
}


/* =========================================================
   AUDIO EVIDENCE
========================================================= */

.why-section{
    margin-top:13px;

    padding-top:15px;

    border-top:1px solid var(--line);
}


.why-section h4{
    color:var(--text);

    font-size:.75rem;
    font-weight:680;
}


.why-section > p{
    margin-top:7px;

    color:var(--muted);

    font-size:.64rem;
    line-height:1.58;
}


.why-segments{
    margin-top:10px;

    display:grid;

    gap:6px;
}


.why-segment{
    min-height:42px;

    padding:
        9px 11px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:14px;

    align-items:center;

    border:1px solid var(--line);

    border-radius:12px;
}


.why-segment span{
    color:var(--muted);

    font-size:.61rem;
}


.why-segment strong{
    color:var(--text);

    font-size:.62rem;

    font-variant-numeric:
        tabular-nums;
}


.why-segment.ai strong{
    color:var(--red);
}


.why-segment.human strong{
    color:var(--green);
}


/* =========================================================
   MODEL SENSITIVITY
========================================================= */

.why-region-list{
    margin-top:10px;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:7px;
}


.why-region{
    padding:11px;

    border:1px solid var(--line);

    border-radius:13px;
}


.why-region strong{
    display:block;

    color:var(--text);

    font-size:.64rem;
}


.why-region span{
    display:block;

    margin-top:5px;

    color:var(--muted);

    font-size:.57rem;

    line-height:1.43;
}


/* =========================================================
   IMPORTANT DISCLAIMER
========================================================= */

.why-caveat{
    margin-top:13px;

    padding:13px 14px;

    border-radius:14px;

    border:
        1px solid
        rgba(20,120,255,.07);

    background:
        rgba(20,120,255,.025);

    color:var(--muted);

    font-size:.6rem;
    line-height:1.58;
}


.why-caveat strong{
    color:var(--text);
}


/* =========================================================
   HISTORY NOTE
========================================================= */

.why-history-note{
    margin-top:10px;

    color:var(--muted-2);

    font-size:.57rem;

    line-height:1.45;
}


@media(max-width:760px){

    .why-grid{
        grid-template-columns:1fr;
    }


    .why-region-list{
        grid-template-columns:1fr;
    }

}

