/* ==========================================================================
   COMPONENT — Input section (text / URL / file), mode badge, first-run state
   ========================================================================== */

.mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-fg);
    border-radius: var(--radius-pill);
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}

.input-section {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

/* ---- Tabs -------------------------------------------------------------- */
.input-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
}

.input-tab {
    padding: 0.65rem 1rem;
    min-height: 44px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.input-tab:hover { color: var(--text-primary); }

.input-tab[aria-selected="true"] {
    color: var(--accent-fg);
    border-bottom-color: var(--accent-fg);
    font-weight: var(--fw-semibold);
}

.input-panel { padding: 1.1rem; }
.input-panel[hidden] { display: none; }

/* ---- Text -------------------------------------------------------------- */
.text-input {
    width: 100%;
    min-height: 160px;
    padding: 0.9rem 1rem;
    background: var(--surface-input);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    resize: vertical;
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
}
.text-input::placeholder { color: var(--text-muted); }
.text-input:hover { border-color: var(--accent-fg); }

.input-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.input-count {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.input-count.is-warn { color: var(--warning-fg); }
.input-count.is-over { color: var(--error-fg); }

.input-actions { display: flex; gap: 0.6rem; align-items: center; }

/* ---- URL --------------------------------------------------------------- */
.url-input {
    width: 100%;
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    background: var(--surface-input);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: inherit;
    margin-bottom: 0.9rem;
}
.url-input::placeholder { color: var(--text-muted); }
.url-input:hover { border-color: var(--accent-fg); }

/* ---- File --------------------------------------------------------------- */
.file-drop-zone {
    border: 1.5px dashed var(--border-interactive);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    background: var(--surface-input);
    width: 100%;
    color: var(--text-secondary);
    font-family: inherit;
}
.file-drop-zone:hover,
.file-drop-zone.is-active {
    border-color: var(--accent-fg);
    background: var(--accent-bg);
}
.file-drop-zone i {
    font-size: 1.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
    display: block;
}
.file-drop-zone p { margin: 0; color: var(--text-primary); font-weight: var(--fw-medium); }
.file-info {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* ==========================================================================
   FIRST-RUN STATE — the highest-value screen in the product

   What was here: a centred hero saying the tool's own name, then a blank
   textarea. A cold visitor had no way to know that a verdict board, verbatim
   evidence quotes, source-mix analysis and seven citation formats were behind
   the button, so the only thing the page asked them to do was trust it.

   What is here now: the actual output. The left column is a real worked
   example rendered with the REAL component classes — .verdict-chip,
   .conf-readout, .stance-tag, .evidence-quote — so it cannot drift away from
   what the tool really produces, and so a restyle of a verdict chip restyles
   the sales pitch too. The right column names what comes with it. Underneath,
   one button that fills the textarea AND runs, because "try it" is worth more
   than any amount of description.
   ========================================================================== */
.first-run {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: 1.35rem;
    margin-bottom: 1.5rem;
}
.first-run[hidden] { display: none; }

.fr-head { margin-bottom: 1.15rem; max-width: 68ch; }
.fr-title {
    margin: 0 0 0.35rem;
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}
.fr-lead {
    margin: 0;
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

.fr-body {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
}

/* ---- The worked example ------------------------------------------------ */
.example-card {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--verdict-supported-solid);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
}

.ex-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-muted);
    margin: 0 0 0.4rem;
}
.ex-eyebrow + .ex-eyebrow,
.ex-step + .ex-step { margin-top: 0.9rem; }

.ex-step { border-top: 1px solid var(--border-subtle); padding-top: 0.85rem; }
.ex-step:first-child { border-top: none; padding-top: 0; }

.ex-claim {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text-primary);
    max-width: var(--measure-claim);
}
.ex-source-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.ex-meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.ex-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.ex-cite {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.7rem;
    background: var(--surface-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---- What else comes with it ------------------------------------------- */
.fr-more {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fr-more li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.fr-more i {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-bg);
    color: var(--accent-fg);
    font-size: 0.72rem;
}
.fr-more b {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.fr-more span {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    margin-top: 0.1rem;
}

.first-run-actions {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--border-subtle);
}
.fr-or { font-size: var(--text-sm); color: var(--text-muted); }
.first-run-note {
    margin: 0.7rem 0 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .fr-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .first-run { padding: 0.95rem; }
    .example-card { padding: 0.85rem 0.9rem; }
    .first-run-actions .btn-primary { width: 100%; }
}

/* ==========================================================================
   Skeletons — shown while extract_claims is in flight, before we know how many
   claim cards there will be.
   ========================================================================== */
.skeleton {
    background:
        linear-gradient(90deg,
            var(--surface-2) 0px,
            var(--surface-4) 200px,
            var(--surface-2) 400px);
    background-size: 800px 100%;
    animation: sc-shimmer 1.6s linear infinite;
    border-radius: var(--radius-sm);
}

.skeleton-card {
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    background: var(--surface-2);
}
.skeleton-line { height: 0.75rem; margin-bottom: 0.6rem; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-40 { width: 40%; margin-bottom: 0; }