/* ========================================================
   EVIDENT BRAND IDENTITY CSS

   Loads AFTER pico.min.css. Overrides Pico's custom
   properties with Evident's visual identity, then adds
   brand-specific component styles.

   Authoritative source: app/web/static/evident-brand.css
   If copied to demo/static/, keep both in sync.
   ======================================================== */

/* --- 1. BRAND VARIABLES --------------------------------- */
:root {
    /* Primary palette */
    --ev-ink: #1C1914;
    --ev-leather: #6B3A2A;
    --ev-gilt: #B08D57;

    /* Neutrals */
    --ev-parchment: #F0E9DF;
    --ev-vellum: #F8F5F0;
    --ev-linen: #E4DDD3;
    --ev-slate: #5C5650;

    /* Semantic — fact-check ratings */
    --ev-verified: #2D6A4F;
    --ev-likely-true: #5A8F6E;
    --ev-uncertain: #9A7B4F;
    --ev-conflicting: #B8860B;
    --ev-likely-false: #C4713B;
    --ev-false: #B53A25;

    /* Typography */
    --ev-font-heading: 'Cormorant Garamond', Georgia, serif;
    --ev-font-body: 'Work Sans', 'Helvetica Neue', sans-serif;
}

/* --- 2. PICO VARIABLE OVERRIDES ------------------------- */
:root {
    --pico-font-family-sans-serif: var(--ev-font-body);
    --pico-font-family: var(--ev-font-body);
    --pico-font-size: 100%;
    --pico-font-weight: 400;
    --pico-line-height: 1.6;
    --pico-background-color: var(--ev-parchment);
    --pico-color: var(--ev-ink);
    --pico-primary: var(--ev-leather);
    --pico-primary-hover: #4A2518;
    --pico-primary-focus: rgba(107, 58, 42, 0.125);
    --pico-primary-inverse: var(--ev-parchment);
    --pico-secondary: var(--ev-ink);
    --pico-secondary-hover: #333;
    --pico-secondary-inverse: var(--ev-parchment);
    --pico-muted-color: var(--ev-slate);
    --pico-muted-border-color: var(--ev-linen);
    --pico-card-background-color: var(--ev-vellum);
    --pico-card-border-color: var(--ev-linen);
    --pico-card-sectioning-background-color: var(--ev-vellum);
    --pico-code-background-color: var(--ev-vellum);
    --pico-table-border-color: var(--ev-linen);
    --pico-form-element-border-color: var(--ev-linen);
    --pico-form-element-focus-color: var(--ev-leather);
    --pico-border-radius: 6px;
}

/* --- 3. GLOBAL TYPOGRAPHY ------------------------------- */

/* Body */
body {
    font-family: var(--ev-font-body);
    color: var(--ev-ink);
    background: var(--ev-parchment);
}

/* Headings: Cormorant Garamond */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ev-font-heading);
    color: var(--ev-ink);
    line-height: 1.2;
}
h1 { font-size: 2.25rem; font-weight: 600; }
h2 { font-size: 1.75rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 500; }

/* Numbers inside headings MUST use Work Sans (brand rule) */
.num,
h1 .num, h2 .num, h3 .num, h4 .num {
    font-family: var(--ev-font-body) !important;
}

/* Overline — small uppercase label */
.overline {
    font-family: var(--ev-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ev-leather);
}

/* Caption */
small, .caption {
    font-family: var(--ev-font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ev-slate);
}

/* --- 4. PARCHMENT NOISE OVERLAY ------------------------- */
/* Subtle paper grain texture at 3% opacity */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* --- 5. NAVIGATION BAR ---------------------------------- */
/* Dark ink background with parchment text */
nav.container-fluid {
    background: var(--ev-ink);
    padding: 0 2rem;
}
nav.container-fluid,
nav.container-fluid ul li,
nav.container-fluid ul li a {
    color: var(--ev-parchment);
}
/* Brand logo + wordmark */
nav .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
nav .brand img,
nav .brand svg {
    height: 40px;
    width: 40px;
    object-fit: contain;
}
.brand-wordmark {
    font-family: var(--ev-font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ev-parchment);
    line-height: 1;
}
/* Nav buttons */
nav ul li a[role="button"] {
    padding: 0.4em 1em;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--ev-leather);
    color: var(--ev-parchment);
    border-color: var(--ev-leather);
}
nav ul li a[role="button"].secondary {
    background: transparent;
    color: var(--ev-parchment);
    border: 1.5px solid rgba(240, 233, 223, 0.3);
}
nav ul li a[role="button"]:hover {
    background: #4A2518;
    border-color: #4A2518;
}
nav ul li a[role="button"].secondary:hover {
    background: rgba(240, 233, 223, 0.1);
    border-color: rgba(240, 233, 223, 0.5);
}
/* Hide the hr separator after nav — dark bar replaces it */
nav.container-fluid + hr {
    display: none;
}

/* --- 6. BUTTONS ----------------------------------------- */
button[type="submit"],
button.primary,
input[type="submit"] {
    font-family: var(--ev-font-body);
    font-weight: 600;
    letter-spacing: 0.04em;
}
a[role="button"].outline {
    border-color: var(--ev-linen);
    color: var(--ev-ink);
}
a[role="button"].outline:hover {
    border-color: var(--ev-leather);
    color: var(--ev-leather);
}

/* --- 7. CARDS / ARTICLES -------------------------------- */
article {
    background: var(--ev-vellum);
    border: 1px solid var(--ev-linen);
    border-radius: 6px;
}

/* --- 8. BADGES — Fact-check Ratings --------------------- */
.badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    font-family: var(--ev-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.badge-true                  { background: var(--ev-verified);    color: var(--ev-parchment); }
.badge-likely-true           { background: var(--ev-likely-true); color: var(--ev-parchment); }
.badge-insufficient-evidence { background: var(--ev-uncertain);   color: var(--ev-ink); }
.badge-conflicting-evidence  { background: var(--ev-conflicting); color: var(--ev-parchment); }
.badge-likely-false          { background: var(--ev-likely-false); color: var(--ev-parchment); }
.badge-false                 { background: var(--ev-false);       color: var(--ev-parchment); }

/* --- 9. BADGES — Pipeline Status ------------------------ */
.badge-running   { background: var(--ev-gilt);     color: var(--ev-ink); }
.badge-review    { background: var(--ev-leather);  color: var(--ev-parchment); }
.badge-done      { background: var(--ev-verified); color: var(--ev-parchment); }
.badge-error     { background: var(--ev-false);    color: var(--ev-parchment); }
.badge-pending   { background: var(--ev-slate);    color: var(--ev-parchment); }
.badge-cancelled { background: var(--ev-slate);    color: var(--ev-parchment); }

/* Claim type badge (review page) */
.badge-claim-type {
    background: var(--ev-slate);
    color: var(--ev-parchment);
    font-size: 0.75em;
}

/* Demo tag */
.demo-tag {
    background: var(--ev-gilt);
    color: var(--ev-ink);
    padding: 0.15em 0.45em;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: super;
    margin-left: -0.3rem;
}

/* --- 10. STAGE TIMELINE --------------------------------- */
.stage-timeline {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.stage-box {
    padding: 0.4em 0.8em;
    border-radius: 6px;
    font-family: var(--ev-font-body);
    font-size: 0.8em;
    font-weight: 500;
    background: var(--ev-linen);
    color: var(--ev-slate);
    white-space: nowrap;
}
.stage-box.active {
    background: var(--ev-gilt);
    color: var(--ev-ink);
    animation: pulse 1.5s ease-in-out infinite;
}
.stage-box.completed {
    background: var(--ev-verified);
    color: var(--ev-parchment);
}
.stage-box.skipped {
    opacity: 0.5;
    text-decoration: line-through;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* --- 11. STAGE DETAIL PANELS ---------------------------- */
.stage-detail {
    display: none;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--ev-vellum);
    border: 1px solid var(--ev-linen);
}
.stage-detail.visible { display: block; }
.stage-detail h4 {
    font-family: var(--ev-font-heading);
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    font-size: 0.95em;
}
.stage-detail .detail-message {
    font-size: 0.85em;
    color: var(--ev-slate);
    margin-bottom: 0.4rem;
}
.stage-detail progress {
    width: 100%;
    height: 1.2rem;
}
.stage-detail .detail-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.4rem;
    font-size: 0.85em;
}
.stage-detail .detail-stats strong {
    font-size: 1.1em;
}

/* --- 12. LOG STREAM ------------------------------------- */
.log-stream {
    max-height: 400px;
    overflow-y: auto;
    background: var(--ev-vellum);
    border: 1px solid var(--ev-linen);
    padding: 0.75rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8em;
    line-height: 1.6;
}
.log-stream .log-line {
    border-bottom: 1px solid var(--ev-linen);
    padding: 2px 0;
}

/* --- 13. DROP ZONE -------------------------------------- */
.drop-zone {
    border: 2px dashed var(--ev-linen);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--ev-leather);
    background: rgba(107, 58, 42, 0.06);
}
.drop-zone input[type="file"] {
    display: none;
}

/* --- 14. REPORT CONTENT --------------------------------- */
.report-content h1 {
    font-family: var(--ev-font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 1.5rem;
}
.report-content h2 {
    font-family: var(--ev-font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 1.3rem;
}
.report-content h3 {
    font-family: var(--ev-font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 1rem;
}
.report-content h4 {
    font-family: var(--ev-font-heading);
    font-size: 1rem;
    font-weight: 500;
}
.report-content table { font-size: 0.9em; }
.report-content blockquote {
    border-left: 3px solid var(--ev-leather);
    padding-left: 1rem;
    font-style: italic;
    color: var(--ev-slate);
}

/* --- 15. ARTIFACTS PANEL -------------------------------- */
.artifacts-panel {
    margin-bottom: 1rem;
    background: var(--ev-vellum);
    padding: 1em;
    border-radius: 6px;
    border: 1px solid var(--ev-linen);
}

/* --- 16. FOOTER ----------------------------------------- */
footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.85em;
    color: var(--ev-slate);
}

/* --- 17. COUNTER GRID ----------------------------------- */
.counter-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.counter-grid .counter-item {
    text-align: center;
}
.counter-grid .counter-item strong {
    font-family: var(--ev-font-body);
    font-size: 1.4rem;
    display: block;
}
.counter-grid .counter-item small {
    color: var(--ev-slate);
}

/* --- 18. RUNS TABLE ------------------------------------- */
tr.demo-highlight {
    background: rgba(176, 141, 87, 0.08);
}