/* ==========================================================================
   COMPONENT — Evidence ledger: per-source stance, verbatim quote, provenance
   badges, plausibility fallback note.

   This is the reading surface. The quote is the evidence — it is the sentence
   that decides the verdict — so it is typeset to be read, not to be skimmed
   past: 15px on the primary text tone at a 66-character measure, with real
   quotation marks. It used to be 13.3px italic at 3.1:1 against its own row.
   ========================================================================== */

.claim-evidence { margin-top: 0.9rem; }

/* ---- Rationale ---------------------------------------------------------
   A rule and a label, not a filled slab. The old full-width grey block ran
   the width of the column no matter how short the sentence was, which read as
   broken layout every time the rationale was under a line. */
.claim-rationale {
    margin: 0 0 0.75rem;
    padding: 0 0 0 0.85rem;
    border-left: 2px solid var(--border-strong);
    font-size: var(--text-md);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
    max-width: var(--measure-read);
}
.claim-rationale-k {
    display: block;
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.evidence-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-muted);
}

.evidence-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.no-evidence {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: 0.4rem 0;
    margin: 0;
}

.evidence-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

/* ---- Stance ------------------------------------------------------------
   Glyph AND word, always. The glyphs used to be `fa-plus`, `fa-minus` and
   `fa-equals`: a `+` in a circle for "supports" and an `=` for "unclear" are
   not self-evident to anyone who has not been told what they mean. A tick, a
   cross and a question mark are — they are the marks a person would draw in
   a margin — and the word is beside every one of them regardless. */
.stance-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 6.5rem;
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding: 0.22rem 0.5rem;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
}
.stance-tag i {
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid currentColor;
    font-size: 0.55rem;
}
.stance-tag.st-supports {
    color: var(--verdict-supported-fg);
    background: var(--verdict-supported-bg);
    border-color: var(--verdict-supported-border);
}
.stance-tag.st-refutes {
    color: var(--verdict-unsupported-fg);
    background: var(--verdict-unsupported-bg);
    border-color: var(--verdict-unsupported-border);
}
.stance-tag.st-unclear {
    color: var(--verdict-insufficient-fg);
    background: var(--verdict-insufficient-bg);
    border-color: var(--verdict-insufficient-border);
}
.stance-tag.st-irrelevant {
    color: var(--text-muted);
    background: var(--surface-4);
    border-color: var(--border-default);
}

.evidence-body { flex: 1; min-width: 0; }

.evidence-title {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    line-height: var(--lh-snug);
    text-decoration: none;
}
/* Behind a hover query, deliberately. On a touch device :hover latches after
   a tap and never clears, so the last source a reader touched stays painted
   accent-and-underlined while every sibling stays plain white — one item
   styled as a "link" and the rest not, with no way to undo it. */
@media (hover: hover) {
    .evidence-title:hover { color: var(--accent-fg); text-decoration: underline; }
}

/* A source whose URL failed the http(s) check renders as text, not a link.
   Keep it visually distinct so the missing affordance reads as deliberate. */
.evidence-title.is-unlinkable {
    color: var(--text-secondary);
    cursor: default;
}
.evidence-title.is-unlinkable::after {
    content: ' \f071';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7em;
    color: var(--warning-fg);
}

.evidence-meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    line-height: var(--lh-snug);
}
.evidence-meta-sep { color: var(--border-strong); }

.src-badge {
    font-size: var(--text-3xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-xs);
    background: var(--surface-4);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}
.src-badge.b-academic { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-border); }
.src-badge.b-gov      { background: var(--info-bg);   color: var(--info-fg);   border-color: var(--info-border); }
.src-badge.b-primary  { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }

/* ---- The quote ---------------------------------------------------------
   Real quotation marks, because "verbatim" is the promise the product makes
   and a blockquote with no marks reads as a summary. The rule is the height
   of the text and nothing more; there is no fill, so a four-word quote is a
   four-word quote rather than a full-column grey bar with four words in it. */
.evidence-quote {
    position: relative;
    margin: 0.55rem 0 0;
    padding: 0 0 0 0.85rem;
    border-left: 2px solid var(--border-strong);
    font-size: var(--text-md);
    color: var(--text-primary);
    line-height: var(--lh-relaxed);
    max-width: var(--measure-read);
}
.evidence-quote .quote-text::before { content: '\201C'; }
.evidence-quote .quote-text::after  { content: '\201D'; }

.evidence-add {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    min-width: 34px;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.evidence-add:hover { border-color: var(--accent-fg); color: var(--accent-fg); }
.evidence-add.added {
    background: var(--accent-solid);
    color: var(--text-on-accent);
    border-color: var(--accent-solid);
}

/* ---- Plausibility (world-knowledge fallback) --------------------------
   Dashed border, deliberately: this is NOT an evidence-based verdict and must
   never be mistaken for one. */
.plausibility {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    border: 1px dashed var(--border-interactive);
}
.plaus-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}
.plausibility.pl-plausible   .plaus-tag { color: var(--verdict-supported-fg); }
.plausibility.pl-implausible .plaus-tag { color: var(--verdict-unsupported-fg); }
.plausibility.pl-uncertain   .plaus-tag { color: var(--neutral-fg); }
.plaus-note { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
.plaus-caveat { font-size: var(--text-2xs); color: var(--text-muted); }

/* ==========================================================================
   PARAPHRASED QUOTES — the single most important honesty signal here

   The server checks every quote is a real substring of the source snippet.
   When it is not, the model paraphrased — and a paraphrase presented inside
   quotation marks is precisely the failure this whole product exists to
   catch. So it does not get a grey pill and a dashed line: the quote block
   takes the warning tint, keeps the amber rule, drops the quotation marks
   (because it is NOT a quotation), and carries a full sentence saying so in
   words. Colour is the third channel, after the marks and the sentence.
   ========================================================================== */
.evidence-quote.is-paraphrased {
    border-left-color: var(--warning-fg);
    border-left-style: dashed;
    background: var(--warning-bg);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    padding: 0.45rem 0.7rem 0.5rem 0.85rem;
    color: var(--text-primary);
}
/* No quotation marks on something that is not a quotation. */
.evidence-quote.is-paraphrased .quote-text::before,
.evidence-quote.is-paraphrased .quote-text::after { content: ''; }

.quote-flag {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--warning-fg);
}
.quote-flag i { margin-top: 0.15em; }

/* Below the sidebar breakpoint the three-across row has nowhere to go: the
   stance tag and the add button both squeeze the title into a two-word column.
   Grid instead — stance and action share the top row, the source takes the
   full width beneath them. */
@media (max-width: 768px) {
    .evidence-item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "stance action"
            "body   body";
        gap: 0.5rem 0.7rem;
        align-items: start;
    }
    .stance-tag   { grid-area: stance; justify-self: start; min-height: 30px; }
    .evidence-add { grid-area: action; min-width: var(--hit-min); min-height: var(--hit-min); }
    .evidence-body { grid-area: body; }
    .evidence-title { display: inline-block; min-height: 24px; }
}