/* ============================================================================
   GoatPeer — visual system  ·  "Pastel Sage"
   Light, compact, friendly. Neutral sans (Inter) + monospace numerics
   (IBM Plex Mono). One soft-green accent over a pastel-mint canvas, hairline
   green-grey borders, squared corners, minimal shadows.
   ========================================================================== */

:root {
    /* canvas — "Bookbound": warm paper & library cloth */
    --bg:            #F2EAD9;   /* app canvas — paper */
    --bg-1:          #FBF6EA;   /* cards / surfaces — page */
    --bg-2:          #EBE0C9;   /* inner / elevated surface */
    --bg-hover:      rgba(30, 74, 56, 0.05);
    --bg-press:      rgba(30, 74, 56, 0.09);

    /* borders — warm rules */
    --line:          #DDD0B4;
    --line-strong:   #CDBD9A;

    /* text — ink */
    --text:          #241E14;
    --text-dim:      #4C4131;
    --text-faint:    #736552;
    --text-ghost:    #9C8C72;

    /* accent — G.O.A.T Peer library-cloth green, singular */
    --accent:        #1E4A38;
    --accent-hi:     #143528;
    --accent-soft:   rgba(30, 74, 56, 0.10);
    --accent-line:   rgba(30, 74, 56, 0.26);

    /* gilt — decorative secondary accent */
    --gold:          #B08543;
    --gold-hi:       #C8A05A;

    /* secondary data colour */
    --steel:         #4C4131;

    /* semantic — forensic verdicts, tuned for warm paper */
    --ok:            #3C7A4E;
    --ok-soft:       rgba(60, 122, 78, 0.12);
    --warn:          #9A6B1E;
    --warn-soft:     rgba(154, 107, 30, 0.13);
    --bad:           #8A2E22;
    --bad-soft:      rgba(138, 46, 34, 0.11);
    --info:          #3A5C8A;
    --info-soft:     rgba(58, 92, 138, 0.11);
    --violet:        #6D28D9;
    --violet-soft:   rgba(109, 40, 217, 0.10);

    /* radii — squared, technical */
    --r-xs: 4px;
    --r-sm: 6px;
    --r:    8px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* shadows — subtle on light */
    --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md:  0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 22px rgba(15, 23, 42, 0.06);
    --shadow-lg:  0 2px 6px rgba(15, 23, 42, 0.10), 0 18px 44px rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 0 0 3px var(--accent-soft);
    --inset-top:  none;

    /* typography — Bookbound: Newsreader serif + IBM Plex Mono */
    --font:        "Newsreader", Georgia, "Times New Roman", serif;
    --font-display:"Newsreader", Georgia, "Times New Roman", serif;
    --font-serif:  "Newsreader", Georgia, "Times New Roman", serif;
    --font-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Consolas", monospace;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.003em;
}

::selection { background: var(--accent-soft); color: var(--accent-hi); }

/* ============================================================================
   Layout
   ========================================================================== */
.layout {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
}

.main {
    flex: 1;
    min-width: 0;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

/* --- sidebar: fixed instrument rail --- */
.sidebar {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-1);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1.15rem 1.25rem 1rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    background: var(--bg-2);
}

.sidebar-header h2 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.sidebar-icon {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.sidebar-body::-webkit-scrollbar { width: 7px; }
.sidebar-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

/* ============================================================================
   Header / brand
   ========================================================================== */
header {
    /* Pinned while the page scrolls, so the brand — which navigates home — and
       the nav stay reachable from anywhere in the dashboard. */
    position: sticky;
    top: 0;
    z-index: 30;
    text-align: left;
    margin-top: -2.5rem;      /* absorb .main's top padding so it pins flush */
    padding-top: 2.5rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
    /* reset native button chrome — the brand doubles as a "home" control */
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: opacity 140ms var(--ease);
}
.brand:hover { opacity: 0.78; }
.brand:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

/* back-to-dashboard control at the top of a flow view */
.back-btn { margin-top: 0 !important; margin-bottom: 1.25rem; }

/* "+ New analysis" — the primary entry point from the dashboard */
.history-head .btn { margin-top: 0; }
.plus-glyph {
    font-weight: 600;
    font-size: 1.05em;
    line-height: 0;
    position: relative;
    top: 0.02em;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}
.brand-mark svg { width: 24px; height: 24px; }

/* Full logo lockup (goat + wordmark) used in the header */
.brand-logo {
    display: block;
    height: 50px;
    width: auto;
    max-width: 100%;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-faint);
}

header h1 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
}

.subtitle {
    color: var(--text-dim);
    margin-top: 0.45rem;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 60ch;
}

/* ============================================================================
   States
   ========================================================================== */
.state { display: none; }
.state.active { display: block; animation: rise 240ms var(--ease) both; }

@keyframes rise {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: -0.005em;
    transition: background 140ms var(--ease), border-color 140ms var(--ease),
                color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent-hi);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hi); }

.btn-secondary {
    background: var(--bg-1);
    color: var(--text);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
    margin-top: 1.5rem;
}
.btn-secondary:hover {
    background: var(--bg-2);
    border-color: var(--text-faint);
}

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}

/* ============================================================================
   Dropzone
   ========================================================================== */
.dropzone {
    position: relative;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-lg);
    padding: 3.5rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms var(--ease), background 160ms var(--ease);
    background: var(--bg-1);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.dropzone::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--accent-soft);
    opacity: 0;
    transition: opacity 160ms var(--ease);
    pointer-events: none;
}

.dropzone:hover::before,
.dropzone.dragover::before { opacity: 1; }

.dropzone:hover,
.dropzone.dragover {
    border-color: var(--accent);
}

.dropzone-content { position: relative; z-index: 1; }

.upload-icon {
    width: 40px; height: 40px;
    color: var(--accent);
    margin-bottom: 1.1rem;
    stroke-width: 1.6;
}

.dropzone-text {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.015em;
    margin-bottom: 0.55rem;
}

.dropzone-hint {
    color: var(--text-faint);
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.dropzone-meta {
    color: var(--text-faint);
    font-size: 0.76rem;
    margin-top: 1.3rem;
    letter-spacing: 0.005em;
}

.dropzone-meta a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); transition: color 140ms var(--ease); }
.dropzone-meta a:hover { color: var(--accent-hi); }

/* ============================================================================
   Loading
   ========================================================================== */
.loading-container {
    text-align: center;
    padding: 5rem 1rem;
}

.spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 1.4rem;
    animation: spin 0.85s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.015em;
}

.loading-hint {
    color: var(--text-faint);
    font-size: 0.85rem;
}

/* ============================================================================
   Image container + overlays
   ========================================================================== */
.image-container {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-sm);
}

#result-image,
.result-image {
    display: block;
    width: 100%;
    height: auto;
}

#overlay-svg,
.overlay-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* ============================================================================
   Summary banner
   ========================================================================== */
.summary {
    margin-top: 1.4rem;
    padding: 1rem 1.2rem;
    background: var(--bg-1);
    border-radius: var(--r);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
}

.summary.no-clones {
    color: var(--ok);
    background: var(--ok-soft);
    border-color: var(--line);
    border-left-color: var(--ok);
}

/* ============================================================================
   Cards
   ========================================================================== */
.cards {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.card {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid;
    border-radius: var(--r);
    padding: 0.95rem 1.15rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 140ms var(--ease), box-shadow 160ms var(--ease),
                transform 140ms var(--ease);
}

.card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.card-number {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--accent);
    min-width: 1.5em;
}

.card-type {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    letter-spacing: -0.012em;
}

/* Per-clone "Hide" toggle (pushed to the right of the card header). */
.hide-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    color: var(--text-faint);
    cursor: pointer;
    user-select: none;
}
.hide-toggle input { cursor: pointer; margin: 0; }
.hide-toggle:hover { color: var(--text); }

.card.detection-hidden > *:not(.card-header) { display: none !important; }
.card.detection-hidden { opacity: 0.55; }
.card.detection-hidden .card-header { margin-bottom: 0; }

.card-description {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

.card-reasoning {
    color: var(--text-faint);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Multi-instance finding: "this image appears 5 times" — the count is the claim an
   editor would quote, so it gets the loudest line on the card. */
.card-cluster-note {
    color: var(--bad);
    background: var(--bad-soft);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: var(--r-xs);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.5rem;
}

/* Multi-instance finding card: every instance of the repeated panel, side by side. The
   count is the claim, so the reader must be able to see all N without hunting through pairs. */
.cluster-card { border-left-color: var(--bad); }
.cluster-card-number { color: var(--bad); font-weight: 700; }

.cluster-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.6rem 0 0.5rem;
}

.cluster-instance {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* border-color is set inline, per instance, to match that instance's box on the figure. */
.cluster-instance-img {
    display: block;
    max-height: 130px;
    max-width: 100%;
    border: 3px solid var(--bad);
    border-radius: var(--r-xs);
}

.cluster-instance.is-candidate .cluster-instance-img {
    border-style: dashed;
    border-color: var(--warn);
    opacity: 0.85;
}

.cluster-instance-missing {
    display: grid;
    place-items: center;
    width: 90px;
    height: 70px;
    font-size: 0.7rem;
    color: var(--text-faint);
    border-style: dashed;
}

/* A filled chip, not coloured text: the palette is built for dark overlay boxes, and its
   bright members (yellow, cyan) are unreadable as text on the cream card. Black on the
   colour stays legible for every entry, and still ties the crop to its box. */
.cluster-instance-cap {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: #000;
    background: var(--bad);
    min-width: 1.35rem;
    text-align: center;
    padding: 0.05rem 0.35rem;
    border-radius: var(--r-xs);
}
.cluster-instance.is-candidate .cluster-instance-cap {
    color: var(--warn);
    background: transparent;
    font-size: 0.85rem;
}

.cluster-gif-wrap {
    margin: 0.6rem 0 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.cluster-gif {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: var(--r-xs);
}
.cluster-gif-hint {
    font-size: 0.78rem;
    color: var(--text-faint);
    max-width: 46ch;
}

.cluster-candidates {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border, rgba(0,0,0,0.15));
}
.cluster-candidates-label {
    font-size: 0.78rem;
    color: var(--warn);
    margin-bottom: 0.15rem;
}

/* ============================================================================
   Supplementary data — fabrication screens + paper-vs-data
   ========================================================================== */
.data-caveat {
    font-size: 0.8rem;
    color: var(--text-faint);
    line-height: 1.55;
    border-left: 2px solid var(--warn);
    padding-left: 0.6rem;
    margin: 0.5rem 0 0.75rem;
    max-width: 70ch;
}
.data-section {
    font-size: 0.95rem;
    margin: 1.3rem 0 0.2rem;
}
.data-check .cc-side { max-width: 520px; }
.data-out { margin-top: 1rem; }

/* ============================================================================
   Team review — the panel's verdicts on each comment
   ========================================================================== */
.team-banner {
    margin: 0.9rem 0 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    border-radius: var(--r-xs);
}
.team-banner h4 { font-size: 0.9rem; margin-bottom: 0.25rem; }
.team-banner p { font-size: 0.84rem; color: var(--text-dim); line-height: 1.55; }

.team-rec {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-faint);
}
.team-rec summary { cursor: pointer; }
.team-rec ul { list-style: none; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.team-rec li { line-height: 1.5; }
.team-rec-warn {
    color: var(--warn);
    background: var(--warn-soft);
    border-radius: var(--r-xs);
    padding: 0.4rem 0.55rem;
}
.team-lens {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    margin-right: 0.35rem;
}
.team-verdict {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    padding: 0.05rem 0.3rem;
    border-radius: var(--r-xs);
    margin-right: 0.35rem;
}
.team-v-stands  { background: rgba(30, 138, 95, 0.14); color: #1E8A5F; }
.team-v-refuted { background: var(--bad-soft); color: var(--bad); }
.team-v-revise  { background: var(--warn-soft); color: var(--warn); }
.team-dissent { margin-top: 0.4rem; color: var(--warn); line-height: 1.5; }

.team-rejected {
    margin-top: 1.2rem;
    border: 1px dashed var(--accent-line);
    border-radius: var(--r-xs);
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
}
.team-rejected summary { cursor: pointer; color: var(--text-dim); }
.team-rej-item {
    margin-top: 0.7rem;
    padding-left: 0.7rem;
    border-left: 3px solid var(--text-ghost);
    opacity: 0.85;
}
.team-rej-title { font-weight: 600; text-decoration: line-through; color: var(--text-faint); }
.team-rej-why { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; margin-top: 0.2rem; }
.team-rej-why q { font-style: italic; }

/* ============================================================================
   Dismissing AI comments (every report tab)
   Hides, never deletes: the count stays visible and Restore brings them back.
   ========================================================================== */
.ai-dismiss {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-ghost);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.card:hover > .ai-dismiss,
.ref-row:hover > .ai-dismiss,
.ai-text-item:hover > .ai-dismiss,
.appraise-overclaim:hover > .ai-dismiss,
.ai-dismiss:focus-visible { opacity: 1; }
.ai-dismiss:hover,
.ai-dismiss:focus-visible {
    color: var(--bad);
    background: var(--bad-soft);
    border-color: rgba(138, 46, 34, 0.22);
}

.ai-dismissed-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--accent-line);
    border-radius: var(--r-xs);
    background: var(--bg-2);
    font-size: 0.82rem;
    color: var(--text-faint);
}
.ai-dismissed-bar .btn { margin-left: auto; }

/* ============================================================================
   Article appraisal — usefulness / hype calibration / reproducibility
   Meters are thin, the track is recessive, and the number + band name are always
   present as text, so colour is never the only carrier of meaning.
   ========================================================================== */
.appraise-head { margin-bottom: 1.1rem; }
.appraise-headline { font-size: 1.05rem; margin-bottom: 0.35rem; }
.appraise-summary { color: var(--text-dim); line-height: 1.55; margin-bottom: 0.4rem; }
.appraise-disclaimer {
    font-size: 0.8rem;
    color: var(--text-faint);
    border-left: 2px solid var(--accent-line);
    padding-left: 0.6rem;
}

.appraise-meters { display: flex; flex-direction: column; gap: 1.15rem; }
.appraise-dim { display: flex; flex-direction: column; gap: 0.3rem; }

.appraise-dim-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.appraise-dim-label { font-weight: 600; font-size: 0.9rem; }
.appraise-dim-band {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.appraise-dim-score {
    margin-left: auto;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}

.appraise-track {
    position: relative;
    height: 10px;
    background: var(--bg-2);
    border-radius: 5px;
    overflow: hidden;
}
.appraise-fill {
    height: 100%;
    border-radius: 0 4px 4px 0;   /* rounded data-end, anchored to the baseline */
    transition: width 0.35s ease;
}
.appraise-unassessed {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.66rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-ghost);
}

/* Diverging track: a neutral midpoint, poles growing outward from it. */
.appraise-track-div { overflow: visible; }
.appraise-div-mid {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--text-ghost);
    transform: translateX(-1px);
}
.appraise-div-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.35s ease;
}
.appraise-div-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-ghost);
    margin-top: 0.15rem;
}
.appraise-div-axis span:nth-child(2) { text-align: center; }

.appraise-rationale {
    font-size: 0.84rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-top: 0.2rem;
}

.appraise-ev { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.appraise-ev li { display: flex; flex-direction: column; gap: 0.1rem; }
.appraise-quote {
    border-left: 3px solid var(--accent-line);
    padding: 0.2rem 0 0.2rem 0.6rem;
    font-style: italic;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.5;
}
.appraise-why { font-size: 0.78rem; color: var(--text-faint); padding-left: 0.65rem; }

.appraise-adjust,
.appraise-overclaims,
.appraise-lists { margin-top: 1.2rem; }
.appraise-adjust h4,
.appraise-overclaims h4,
.appraise-lists h4 { font-size: 0.9rem; margin-bottom: 0.4rem; }
.appraise-adjust {
    background: var(--info-soft);
    border: 1px solid rgba(58, 92, 138, 0.22);
    border-radius: var(--r-xs);
    padding: 0.7rem 0.85rem;
    font-size: 0.84rem;
    line-height: 1.55;
}
.appraise-adjust ul, .appraise-lists ul { padding-left: 1.1rem; }
.appraise-overclaim {
    border-left: 3px solid var(--bad);
    padding-left: 0.7rem;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.55;
}
.appraise-oc-lbl { font-weight: 600; color: var(--text-dim); }
.appraise-lists { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.appraise-lists > div { flex: 1 1 240px; font-size: 0.85rem; line-height: 1.55; }

.appraise-signals { margin-top: 1.3rem; font-size: 0.84rem; }
.appraise-signals summary { cursor: pointer; color: var(--text-dim); }
.appraise-sig-list {
    list-style: none;
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.3rem 1rem;
}
.appraise-sig { display: flex; align-items: center; gap: 0.45rem; }
.appraise-sig-mark { font-weight: 700; font-family: var(--font-mono); }
.appraise-sig.is-yes .appraise-sig-mark { color: #1E8A5F; }
.appraise-sig.is-no .appraise-sig-mark { color: #C0392B; }
.appraise-sig-state {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}
.appraise-sig-note {
    margin-top: 0.7rem;
    color: var(--text-faint);
    font-size: 0.8rem;
    line-height: 1.55;
}

/* ============================================================================
   Badges / chips — squared, technical
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.16rem 0.5rem;
    border-radius: var(--r-xs);
    letter-spacing: 0.04em;
    line-height: 1.5;
    border: 1px solid transparent;
}

.badge-high { background: var(--bad-soft); color: var(--bad); border-color: rgba(220,38,38,0.22); }
.badge-medium { background: var(--warn-soft); color: var(--warn); border-color: rgba(180,83,9,0.22); }
.badge-low { background: var(--info-soft); color: var(--info); border-color: rgba(37,99,235,0.22); }
.badge-likelihood { background: var(--accent-soft); color: var(--accent-hi); border-color: var(--accent-line); }
.badge-cluster { background: var(--bad-soft); color: var(--bad); border-color: rgba(220,38,38,0.22); }

/* Clone-likelihood slider (real-time filter over detections) */
.likelihood-filter {
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    border-radius: var(--r-sm, 8px);
}
.likelihood-filter .lf-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.likelihood-filter .lf-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-hi);
}
.likelihood-filter .lf-value {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-hi);
}
.likelihood-filter .lf-slider {
    width: 100%;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0.15rem 0;
}
.likelihood-filter .lf-hint {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--muted, #6b7280);
}
.likelihood-filter .lf-hint #lf-count { font-weight: 600; color: var(--accent-hi); }

.btn-reanalyze {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent-hi);
    border-radius: var(--r-xs, 6px);
    cursor: pointer;
}
.btn-reanalyze:hover { background: var(--accent-hi); }
.reanalyze-hint {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--muted, #6b7280);
}

.badge-claude {
    background: rgba(180, 83, 9, 0.10);
    color: #9a5412;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}
.badge-gpt {
    background: var(--ok-soft);
    color: var(--ok);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}
.badge-pixel {
    background: var(--bg-2);
    color: var(--text-dim);
    border-color: var(--line);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

/* ============================================================================
   Crop comparison + overlap gif + interactive overlay
   ========================================================================== */
.crop-comparison {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
}

.crop-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.crop-label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-faint);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.crop-img {
    max-width: 100%;
    max-height: 140px;
    border-radius: var(--r-xs);
    border: 1px solid var(--line-strong);
    object-fit: contain;
    background: #fff;
}

/* PDF-view tab: scrollable original pages with cloned regions boxed */
.pdfview {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pdfview-page {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pdfview-page-head {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
}

.pdfview-page.has-boxes .pdfview-page-head {
    color: var(--accent);
}

.pdfview-holder {
    position: relative;
    display: block;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.pdfview-img {
    display: block;
    width: 100%;
    height: auto;
}

.pdfview-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pdfview-label {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 3px;
}

/* PDF View with reviewer-style margin critique notes */
.pdfview-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 1180px;
    margin: 0 auto;
}
.pdfview-row .pdfview-holder { margin: 0; flex: 1 1 auto; min-width: 0; }
.pdfview-marknum {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    fill: #fff;
}
.pdfview-notes {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.pdfview-note {
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-xs, 6px);
    padding: 0.55rem 0.65rem;
    background: var(--card, #fff);
    font-size: 0.8rem;
}
.pdfview-note-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}
.pdfview-note-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}
/* Goat-marker variant: a cartoon goat in a colour-ringed disc. */
.pdfview-note-num.has-goat {
    width: 28px; height: 28px;
    background: #fbfaf3;
    border: 2px solid var(--accent);
    padding: 0;
    overflow: hidden;
}
.pdfview-note-num.has-goat img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.pdfview-note-label { font-weight: 600; font-size: 0.76rem; }
.pdfview-note-tier {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-weight: 700;
}
.pdfview-note-tier.tier-primary { background: rgba(220,38,38,0.12); color: var(--bad, #dc2626); }
.pdfview-note-tier.tier-suspicious { background: var(--warn-soft, rgba(180,83,9,0.12)); color: var(--warn, #b45309); }
.pdfview-note-tier.tier-rejected { background: var(--info-soft, rgba(37,99,235,0.1)); color: var(--info, #2563eb); }
.pdfview-note-critique { color: var(--fg, #1f2937); line-height: 1.4; }
.pdfview-note-text {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--muted, #6b7280);
    line-height: 1.4;
}
.pdfview-note-text-lbl { font-weight: 600; }
.pdfview-note-text mark { background: rgba(255, 210, 63, 0.45); padding: 0 2px; border-radius: 2px; }
.pdfview-note-article { background: var(--card, #fff); }
.pdfview-note-cat {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted, #6b7280);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0.03rem 0.3rem;
}
.pdfview-note-tier.sev-high { background: rgba(220,38,38,0.12); color: var(--bad, #dc2626); }
.pdfview-note-tier.sev-medium { background: var(--warn-soft, rgba(180,83,9,0.12)); color: var(--warn, #b45309); }
.pdfview-note-tier.sev-low { background: var(--info-soft, rgba(37,99,235,0.1)); color: var(--info, #2563eb); }
@media (max-width: 820px) {
    .pdfview-row { flex-direction: column; }
    .pdfview-notes { flex-basis: auto; width: 100%; }
}

.crop-arrow {
    color: var(--accent);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.overlap-gif-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
}

.overlap-gif {
    max-width: 100%;
    max-height: 180px;
    border-radius: var(--r-xs);
    border: 1px solid var(--line-strong);
    object-fit: contain;
    margin-top: 0.3rem;
    background: #fff;
}

.io-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
}

.io-stage {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    background:
        linear-gradient(45deg, #e2e7ee 25%, transparent 25%),
        linear-gradient(-45deg, #e2e7ee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e7ee 75%),
        linear-gradient(-45deg, transparent 75%, #e2e7ee 75%),
        #fff;
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0px;
    touch-action: none;
    user-select: none;
}

.io-base {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.io-top {
    position: absolute;
    left: 50%; top: 50%;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    cursor: grab;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

.io-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 0.55rem;
    width: 100%;
    align-items: end;
}

.io-ctrl {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.io-ctrl b { color: var(--text); font-weight: 600; font-family: var(--font-mono); }

.io-ctrl input[type="range"] { width: 100%; }

.io-hint {
    font-size: 0.7rem;
    color: var(--text-faint);
}

/* Live transform readout, in SOURCE pixels (see displayScale() in app.js). */
.io-readout {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.7rem;
    color: var(--text-muted, var(--text-faint));
    letter-spacing: 0.01em;
}

/* The stage takes keyboard focus so arrow keys can nudge the overlay. */
.io-stage:focus-visible {
    outline: 2px solid var(--accent, #2f855a);
    outline-offset: 2px;
}

.io-blink.active {
    background: var(--accent, #2f855a);
    color: #fff;
    border-color: var(--accent, #2f855a);
}

/* ============================================================================
   Claude-verify cards
   ========================================================================== */
.claude-verify {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.claude-verify-result {
    padding: 0.65rem 0.8rem;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    line-height: 1.5;
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--text);
}

.claude-verify-pending { color: var(--text-dim); font-style: italic; }

.claude-verify-error {
    color: var(--bad);
    border-color: rgba(220, 38, 38, 0.3);
    background: var(--bad-soft);
}

.claude-verdict-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.claude-verdict-label {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.008em;
}

.claude-verdict-conf {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: capitalize;
}

.claude-verdict-body { color: var(--text-dim); }

.claude-verdict-clone { border-color: rgba(21, 128, 61, 0.3); background: var(--ok-soft); }
.claude-verdict-clone .claude-verdict-label { color: var(--ok); }

.claude-verdict-not-clone { border-color: rgba(220, 38, 38, 0.3); background: var(--bad-soft); }
.claude-verdict-not-clone .claude-verdict-label { color: var(--bad); }

.claude-verdict-uncertain { border-color: rgba(180, 83, 9, 0.3); background: var(--warn-soft); }
.claude-verdict-uncertain .claude-verdict-label { color: var(--warn); }

/* ============================================================================
   Plot scan
   ========================================================================== */
.plot-scan {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-1);
    box-shadow: var(--shadow-sm);
}

.plot-scan-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.plot-scan-hint { font-size: 0.72rem; color: var(--text-dim); }

.plot-scan-result {
    padding: 0.65rem 0.8rem;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
}

.plot-scan-pending { color: var(--text-dim); font-style: italic; }
.plot-scan-error { color: var(--bad); }
.plot-scan-noplots { color: var(--text-dim); font-style: italic; }
.plot-scan-summary { color: var(--text); font-weight: 500; }

.plot-scan-item {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-1);
}

.plot-scan-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.plot-scan-verdict {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.008em;
}

.plot-scan-loc {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.plot-scan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.plot-scan-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-xs);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
}

.plot-scan-back-suspicious { background: var(--bad-soft); color: var(--bad); border-color: rgba(220,38,38,0.22); }
.plot-scan-back-legitimate-hysteresis { background: var(--ok-soft); color: var(--ok); border-color: rgba(21,128,61,0.22); }

.plot-scan-reason { color: var(--text-dim); }

.plot-scan-issues {
    margin: 0.2rem 0 0 1.2rem;
    padding: 0;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.plot-scan-verdict-authentic { border-color: rgba(21, 128, 61, 0.3); }
.plot-scan-verdict-authentic .plot-scan-verdict { color: var(--ok); }

.plot-scan-verdict-suspicious { border-color: rgba(180, 83, 9, 0.3); }
.plot-scan-verdict-suspicious .plot-scan-verdict { color: var(--warn); }

.plot-scan-verdict-fabricated { border-color: rgba(220, 38, 38, 0.3); }
.plot-scan-verdict-fabricated .plot-scan-verdict { color: var(--bad); }

.plot-scan-verdict-uncertain { border-color: var(--line); }
.plot-scan-verdict-uncertain .plot-scan-verdict { color: var(--text-dim); }

.ssim-score {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-left: auto;
    font-family: var(--font-mono);
}

/* ============================================================================
   Detection overlay colors (card border accents)
   ========================================================================== */
.color-0 { border-left-color: #16A265; }
.color-1 { border-left-color: #C77F2B; }
.color-2 { border-left-color: #D97706; }
.color-3 { border-left-color: #DC2626; }
.color-4 { border-left-color: #7C3AED; }
.color-5 { border-left-color: #0891B2; }

/* ============================================================================
   PDF summary + figure tabs
   ========================================================================== */
.pdf-summary {
    padding: 1.1rem 1.3rem;
    background: var(--bg-1);
    border-radius: var(--r);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 0.93rem;
    line-height: 1.55;
    margin-bottom: 1.4rem;
}

.pdf-summary.no-clones {
    color: var(--ok);
    background: var(--ok-soft);
    border-left-color: var(--ok);
}

.figure-tabs {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    padding: 0 0 0.5rem;
    margin-bottom: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    border-bottom: 1px solid var(--line-strong);
}

.figure-tabs::-webkit-scrollbar { height: 6px; }
.figure-tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

.figure-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}

.figure-tab:hover { background: var(--bg-hover); color: var(--text); }

.figure-tab.active {
    background: var(--bg-1);
    color: var(--accent);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.figure-tab.cross { color: var(--accent); }
.figure-tab.cross.active {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-hi);
}

.figure-tab-label { font-weight: 500; }

.figure-tab-page {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
}

.figure-tab-badge {
    font-family: var(--font-mono);
    background: var(--bad-soft);
    color: var(--bad);
    font-size: 0.64rem;
    font-weight: 700;
    padding: 0.08rem 0.4rem;
    border-radius: var(--r-xs);
    min-width: 1.3em;
    text-align: center;
    border: 1px solid rgba(220,38,38,0.22);
}
.figure-tab-badge[hidden] { display: none; }

.figure-tab:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

/* ── A tab whose report is still being written ────────────────────────────
   The AI reports finish 30–90s AFTER the results render. Nothing about an empty
   "Figure Review" tab says "still working" — so the tab itself has to. */
.figure-tab-spin {
    display: none;
    flex-shrink: 0;
    width: 11px; height: 11px;
    border: 2px solid var(--accent-line);
    border-top-color: var(--accent);
    border-radius: 50%;
}
.figure-tab.is-running .figure-tab-spin {
    display: block;
    animation: spin 0.85s linear infinite;
}
/* Queued: scheduled, not started — a still ring, not a spinning one. */
.figure-tab.is-queued .figure-tab-spin {
    display: block;
    border-color: var(--line-strong);
    border-top-color: var(--line-strong);
    opacity: 0.7;
}
.figure-tab.is-queued .figure-tab-label { color: var(--text-faint); }
.figure-tab.is-failed .figure-tab-label { color: var(--bad); }
.figure-tab.is-failed::after {
    content: "!";
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bad);
}

/* Status strip under the tab bar: what is still running, and that the clone
   findings the reviewer is already looking at are NOT waiting on it. */
.report-queue {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: -0.75rem 0 1.25rem;
    padding: 0.6rem 0.85rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
}
.report-queue[hidden] { display: none; }
.rq-spin {
    flex-shrink: 0;
    margin-top: 0.15rem;
    width: 13px; height: 13px;
    border: 2px solid var(--accent-line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
.rq-text {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-dim);
}
.rq-text strong { color: var(--accent-hi); }

/* The panel a reviewer lands on when they open a tab that is still working. */
.report-running {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.5rem 1.4rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.report-running-spin {
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 22px; height: 22px;
    border: 2.5px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
.report-running.is-queued .report-running-spin { animation: none; border-top-color: var(--line-strong); }
.report-running-text h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--text);
}
.report-running-text p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-dim);
}

.report-failed {
    padding: 1.25rem 1.4rem;
    background: var(--bad-soft);
    border: 1px solid var(--bad);
    border-radius: var(--r-lg);
}
.report-failed h3 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--bad); }
.report-failed p { margin: 0 0 0.75rem; font-size: 0.82rem; color: var(--text-dim); }

.figure-panel { display: none; }
.figure-panel.active { display: block; animation: fade-in 200ms var(--ease); }
.figure-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================================
   Cross-figure detection card
   ========================================================================== */
.cross-figure-ref {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
    font-size: 0.82rem;
}

.cross-ref-tag {
    background: var(--accent-soft);
    color: var(--accent-hi);
    padding: 0.16rem 0.55rem;
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    border: 1px solid var(--accent-line);
}

.cross-ref-arrow {
    color: var(--accent);
    font-size: 1rem;
}

/* ============================================================================
   Error
   ========================================================================== */
.error-container {
    text-align: center;
    padding: 4rem 1rem;
}

.error-icon {
    width: 42px; height: 42px;
    color: var(--bad);
    margin-bottom: 1rem;
    stroke-width: 1.6;
}

.error-text {
    color: var(--bad);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto; margin-right: auto;
    line-height: 1.55;
}

/* ============================================================================
   Settings sidebar controls
   ========================================================================== */
.settings-group {
    margin-bottom: 1.6rem;
}

.settings-group-title {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    cursor: pointer;
    gap: 0.75rem;
}

.settings-toggle + .settings-toggle { border-top: 1px solid var(--line); }

.settings-label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.settings-hint {
    font-size: 0.7rem;
    color: var(--text-faint);
    font-weight: 400;
    margin-top: 0.15rem;
    line-height: 1.4;
}

.settings-toggle input[type="checkbox"] { display: none; }

.toggle-slider {
    position: relative;
    width: 36px; height: 20px;
    background: var(--line-strong);
    border-radius: var(--r-pill);
    flex-shrink: 0;
    transition: background 160ms var(--ease);
}

.toggle-slider::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15,23,42,0.25);
    transition: transform 180ms var(--ease);
}

.settings-toggle input:checked + .toggle-slider { background: var(--accent); }
.settings-toggle input:checked + .toggle-slider::after { transform: translateX(16px); }

.settings-range { padding: 0.6rem 0; }
.settings-range + .settings-range { border-top: 1px solid var(--line); }

.range-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.45rem;
}

.range-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--line-strong);
    border-radius: var(--r-pill);
    outline: none;
    cursor: pointer;
}

.range-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; height: 15px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,0.25);
    transition: background 140ms var(--ease), transform 120ms var(--ease);
}

.range-row input[type="range"]::-webkit-slider-thumb:hover { background: var(--accent-hi); transform: scale(1.1); }

.range-row input[type="range"]::-moz-range-thumb {
    width: 15px; height: 15px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
}

.range-value {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 2.2em;
    text-align: right;
}

.settings-actions {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* ============================================================================
   Claude verdict — card-level styling when bulk verification has run
   ========================================================================== */
.card.verdict-clone {
    border-left-color: var(--ok);
    box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.18), var(--shadow-sm);
}
.card.verdict-uncertain { border-left-color: var(--warn); }
.card.verdict-not-clone { border-left-color: var(--line-strong); }

.card.verdict-dismissed {
    opacity: 0.6;
    filter: saturate(0.7);
    transition: opacity 200ms var(--ease), filter 200ms var(--ease);
}
.card.verdict-dismissed:hover { opacity: 1; filter: none; }
.card.verdict-dismissed .card-type {
    text-decoration: line-through;
    text-decoration-color: var(--text-faint);
    text-decoration-thickness: 1px;
}

/* ============================================================================
   Article report tab (text-based integrity audit)
   ========================================================================== */
.article-report {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.article-report .card {
    cursor: default;
    border-left: 3px solid var(--line-strong);
}

.article-report .card:hover { transform: none; box-shadow: var(--shadow-sm); }

.article-report .card-header {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.article-report .card-header strong {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    flex: 1;
}

.article-report .card-tag {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: var(--r-xs);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    letter-spacing: 0.04em;
}

.article-report .card-tag.severity-high { background: var(--bad-soft); color: var(--bad); border-color: rgba(220,38,38,0.22); }
.article-report .card-tag.severity-medium { background: var(--warn-soft); color: var(--warn); border-color: rgba(180,83,9,0.22); }
.article-report .card-tag.severity-low { background: var(--info-soft); color: var(--info); border-color: rgba(37,99,235,0.22); }

.article-report .card-body {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.6rem;
}

.article-report .card-evidence blockquote {
    margin: 0.4rem 0;
    padding: 0.55rem 0.85rem;
    border-left: 2px solid var(--accent-line);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    background: var(--bg-2);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    white-space: pre-wrap;
    line-height: 1.5;
}

/* CTA shown when audit disabled */
.report-cta {
    padding: 2.75rem 2rem;
    text-align: center;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.report-cta-icon {
    width: 52px; height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
    color: var(--accent);
}

.report-cta-icon svg { width: 24px; height: 24px; stroke-width: 1.6; }

.report-cta h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.015em;
}

.report-cta p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 auto 1.4rem;
    max-width: 460px;
}

.report-risk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.5rem;
    vertical-align: middle;
    border: 1px solid transparent;
}

.report-risk-pill.risk-high { background: var(--bad-soft); color: var(--bad); border-color: rgba(220,38,38,0.25); }
.report-risk-pill.risk-medium { background: var(--warn-soft); color: var(--warn); border-color: rgba(180,83,9,0.25); }
.report-risk-pill.risk-low { background: var(--ok-soft); color: var(--ok); border-color: rgba(21,128,61,0.25); }
.report-risk-pill.risk-unknown { background: var(--bg-2); color: var(--text-dim); border-color: var(--line); }

/* ============================================================================
   View navigation (Analyze / History) — segmented control
   ========================================================================== */
.viewnav {
    margin-left: auto;
    display: inline-flex;
    gap: 0;
    padding: 2px;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
}

.viewnav-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.95rem;
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: background 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.viewnav-btn:hover { color: var(--text); }

.viewnav-btn.active {
    color: var(--accent);
    background: var(--bg-1);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* ============================================================================
   History dashboard
   ========================================================================== */
.section-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.section-sub {
    color: var(--text-faint);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.history-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-strong);
}

.history-head .btn-secondary { margin-top: 0; }

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.85rem;
}

.history-loading {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.9rem;
}

.history-card {
    position: relative;
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 140ms var(--ease), box-shadow 160ms var(--ease), transform 140ms var(--ease);
}

.history-card:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

.history-thumb {
    width: 72px; height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--bg-2);
}

.history-thumb-empty, .detail-thumb-empty {
    display: grid;
    place-items: center;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

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

.history-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.4rem;
    padding-right: 1.2rem;
}

.history-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.ht-pill {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--r-xs);
    border: 1px solid var(--line);
    color: var(--text-dim);
    background: var(--bg-2);
}
.ht-pdf { background: var(--violet-soft); color: var(--violet); border-color: rgba(109,40,217,0.22); }
.ht-image { background: var(--info-soft); color: var(--info); border-color: rgba(37,99,235,0.22); }

.ht-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ht-count.has-det { color: var(--warn); }
.ht-count.no-det { color: var(--ok); }

.ht-dim { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); }

.history-card-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.history-card-note {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-left: 2px solid var(--accent-line);
    padding-left: 0.55rem;
}

.history-card-del {
    position: absolute;
    top: 0.45rem; right: 0.45rem;
    width: 22px; height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-faint);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}
.history-card:hover .history-card-del { opacity: 1; }
.history-card-del:hover { background: var(--bad-soft); color: var(--bad); border-color: rgba(220,38,38,0.3); }

.history-empty {
    text-align: center;
    padding: 3.5rem 2rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.history-empty-icon {
    width: 52px; height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.history-empty-icon svg { width: 24px; height: 24px; }
.history-empty h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.history-empty p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 420px;
    margin: 0 auto 1.3rem;
}

/* ---- detail view ---- */
.history-detail { margin-top: 1.25rem; }

#state-history-detail .btn-secondary { margin-top: 0; }

.detail-hero {
    display: flex;
    gap: 1.15rem;
    padding: 1.25rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.detail-thumb {
    width: 124px; height: 124px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--bg-2);
}

.detail-hero-info { min-width: 0; flex: 1; }

.detail-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
    word-break: break-word;
    margin-bottom: 0.5rem;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.detail-meta .report-risk-pill { margin-left: 0; }

.detail-date {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.detail-summary {
    margin-top: 0.65rem;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.55;
}

.detail-section {
    margin-top: 1.25rem;
    padding: 1.15rem 1.25rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.detail-section > h3,
.detail-section-head h3 {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin-bottom: 0.85rem;
}

.detail-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.detail-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-xs);
    margin-left: 0.35rem;
}

/* ── Stored-inquiry bar (results view replaying a paper from history) ──── */
.history-bar {
    max-width: 980px;
    margin: 0 auto 1.1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    text-align: left;
}
.history-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.history-bar-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.history-bar-date {
    margin-left: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-faint);
}
.history-bar .notes-section {
    margin: 0.75rem 0 0;
    padding: 0;
    background: none;
    border: none;
    border-left: none;
}
.history-bar .notes-editor { min-height: 90px; }
.notes-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent);
    list-style: none;
    padding: 0.2rem 0;
}
.notes-summary::-webkit-details-marker { display: none; }
.notes-summary::before { content: "▸ "; color: var(--text-faint); }
details[open] > .notes-summary::before { content: "▾ "; }

/* notes editor */
.notes-section { border-left: 3px solid var(--accent); }
.notes-editor {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    padding: 0.85rem 0.95rem;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    line-height: 1.55;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease);
}
.notes-editor::placeholder { color: var(--text-ghost); }
.notes-editor:focus {
    outline: none;
    background: #fff;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.notes-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.8rem;
}
.notes-actions .btn-primary { margin-top: 0; }

.notes-status {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-faint);
}
.notes-status.dim { color: var(--text-faint); }
.notes-status.ok { color: var(--ok); }
.notes-status.bad { color: var(--bad); }

.detail-del {
    position: static;
    opacity: 1;
    width: auto; height: auto;
    margin-left: auto;
    padding: 0.4rem 0.8rem;
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
    background: var(--bg-1);
}
.detail-del:hover { background: var(--bad-soft); color: var(--bad); border-color: rgba(220,38,38,0.3); }

/* findings list */
.detail-find-list { display: flex; flex-direction: column; gap: 0.55rem; }
.detail-empty { color: var(--text-faint); font-size: 0.88rem; }

.detail-find {
    padding: 0.75rem 0.9rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
}
.detail-find-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.detail-find-type {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    letter-spacing: -0.01em;
}
.detail-find-fig {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--accent-hi);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    padding: 0.08rem 0.45rem;
    border-radius: var(--r-xs);
}
.detail-find-conf {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.detail-find-desc {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
}
.detail-find-src {
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
}

.detail-report { margin-top: 0.7rem; }
.detail-report:first-of-type { margin-top: 0; }
.detail-report-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.detail-report-head strong {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text);
}
.detail-report-head .report-risk-pill { margin-left: 0; }
.detail-report p {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* ============================================================================
   Authentication screen + account
   ========================================================================== */
/* When logged out, hide the settings rail — only the login card shows. */
body.auth-mode .sidebar { display: none; }

.auth-card {
    max-width: 384px;
    margin: 2.5rem auto;
    padding: 2rem 1.85rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.auth-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.auth-sub {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-top: 0.3rem;
    margin-bottom: 1.4rem;
}

.auth-form { display: flex; flex-direction: column; gap: 0.9rem; }

.auth-field { display: flex; flex-direction: column; gap: 0.35rem; }

.auth-field span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}

.auth-field input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.92rem;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease);
}
.auth-field input:focus {
    outline: none;
    background: #fff;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.auth-error {
    color: var(--bad);
    font-size: 0.82rem;
    line-height: 1.4;
    min-height: 1.1em;
    margin: -0.2rem 0 0.1rem;
}
.auth-error:empty { display: none; }

/* ── Terms consent (signup mode only) ────────────────────────────────────────
   The hit target is the whole row, label included, so the box is easy to tick
   deliberately — and the links inside it stop the click from bubbling (app.js),
   because opening the Terms should not also toggle the checkbox. */
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.15rem 0 0.35rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-dim);
    cursor: pointer;
}
.auth-consent[hidden] { display: none; }
.auth-consent input[type="checkbox"] {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 0.12rem;
    accent-color: var(--accent);
    cursor: pointer;
}
.auth-consent a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-consent a:hover { color: var(--accent-hi); }

/* The submit button is disabled until the box is ticked, so it has to LOOK
   disabled — an unstyled disabled button reads as a broken one: the user clicks,
   nothing happens, and nothing on screen explains why. */
.auth-form .btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.auth-form .btn-primary:disabled:hover { transform: none; }

.auth-consent-note {
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-faint);
    text-align: center;
}
.auth-consent-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.auth-form .btn-primary { margin-top: 0.2rem; }

/* ── "or" rule between the password form and Google ──────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Google's brand guidelines want their mark on a neutral surface with the
   wordmark legible — hence the white/near-white face rather than our accent. */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.62rem 0.75rem;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: #1f1f1f;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease),
                background 140ms var(--ease);
}
.btn-google:hover {
    background: #f8f9fa;
    border-color: var(--text-faint);
    box-shadow: var(--shadow-sm);
}
.btn-google:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.btn-google[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
}
.btn-google-mark {
    width: 18px;
    height: 18px;
    flex: none;
}

.auth-toggle {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    text-align: center;
}
.auth-toggle a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.auth-toggle a:hover { color: var(--accent-hi); text-decoration: underline; }

/* account bar in the sidebar footer */
.account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.account-id { display: flex; flex-direction: column; min-width: 0; }
.account-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}
.account-user {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-bar .btn-secondary { margin-top: 0; flex-shrink: 0; }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
    .main { max-width: 100%; padding: 2rem 1.5rem 3rem; }
}

@media (max-width: 900px) {
    .layout { flex-direction: column; }

    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-left: none;
        border-top: 1px solid var(--line-strong);
    }

    .sidebar-body { max-height: 60vh; }
}

@media (max-width: 600px) {
    .main { padding: 1.5rem 1.1rem 2rem; }

    header { margin-bottom: 1.5rem; }
    header h1 { font-size: 1.55rem; }
    .brand-logo { height: 38px; }
    .subtitle { font-size: 0.9rem; }

    .dropzone { padding: 2.5rem 1.25rem; }
    .dropzone-text { font-size: 1.05rem; }

    .figure-tabs { gap: 0.25rem; }
    .figure-tab { padding: 0.38rem 0.7rem; font-size: 0.8rem; }

    /* The figures index is the primary navigation on a phone — give it the full
       width and let the controls stack under the count instead of squeezing. */
    .figures-index-bar { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
    .figures-index-tools { width: 100%; }
    .figures-index-btn { flex: 1; }
    .figure-block-head { gap: 0.4rem 0.55rem; }
    .figure-block-count { margin-left: 0; }
    .report-queue { margin-top: -0.4rem; }

    .io-stage { width: 100%; max-width: 300px; }

    .brand { flex-wrap: wrap; }
    .viewnav { margin-left: 0; width: 100%; }
    .viewnav-btn { flex: 1; }
    .history-grid { grid-template-columns: 1fr; }
    .detail-hero { flex-direction: column; }
    .detail-thumb { width: 100%; height: 170px; }
    .history-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ===== Manual region comparison ===== */
.image-container.rc-selecting { cursor: crosshair; }
.image-container.rc-selecting #result-image { user-select: none; }
.rc-boxes {
    position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.rc-box {
    position: absolute; box-sizing: border-box; border: 2px solid var(--accent);
    background: var(--accent-soft);
}
.rc-box::after {
    content: attr(data-label);
    position: absolute; top: -2px; left: -2px;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
    padding: 0 5px; border-radius: 0 0 4px 0; line-height: 16px;
}
.rc-box-b { border-color: #b9389c; background: rgba(185,56,156,0.12); }
.rc-box-b::after { background: #b9389c; }
.rc-box-live { border-style: dashed; background: rgba(22,162,101,0.08); }

.region-compare { margin: 12px 0 4px; }
.rc-panel {
    margin-top: 10px; padding: 14px; border: 1px solid var(--line-strong);
    border-radius: var(--r); background: var(--bg-2);
}
.rc-hint { margin: 0 0 10px; color: var(--text-2); font-size: 13px; }
.rc-crops { display: flex; gap: 14px; flex-wrap: wrap; }
.rc-crop { margin: 0; text-align: center; }
.rc-crop figcaption { font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.rc-crop canvas {
    max-width: 240px; max-height: 130px; border: 1px solid var(--line-strong);
    border-radius: 6px; background: #fff;
}
.rc-actions { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.rc-result { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.rc-line { margin-bottom: 4px; }
.rc-note { color: var(--text-2); font-size: 12px; margin-bottom: 8px; }
.rc-good { color: var(--accent-hi); font-weight: 700; }
.rc-warn { color: #b8860b; font-weight: 700; }
.rc-bad  { color: #c0392b; font-weight: 700; }
.rc-spin { color: var(--text-2); }

/* ===== Deep copy-move scan heatmap overlay ===== */
.rc-heat {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: fill; pointer-events: none; z-index: 4; opacity: 0.85;
}

/* ── AI-Generated Detection card ──────────────────────────────────────── */
.aigen-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--text-faint);
    border-radius: var(--r);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.aigen-card.aigen-ai        { border-left-color: var(--bad); }
.aigen-card.aigen-real      { border-left-color: var(--ok); }
.aigen-card.aigen-uncertain { border-left-color: var(--warn); }

.aigen-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.aigen-title {
    font-weight: 650; font-size: 0.92rem; color: var(--text);
    letter-spacing: -0.01em;
}
.aigen-badge {
    font-size: 0.72rem; font-weight: 650; padding: 3px 10px;
    border-radius: var(--r-pill); white-space: nowrap;
}
.aigen-badge-ai        { color: var(--bad);  background: var(--bad-soft); }
.aigen-badge-real      { color: var(--ok);   background: var(--ok-soft); }
.aigen-badge-uncertain { color: var(--warn); background: var(--warn-soft); }

.aigen-metrics {
    display: flex; gap: 22px; margin-bottom: 12px;
}
.aigen-metric { text-align: left; }
.aigen-metric-value {
    font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600;
    color: var(--text); line-height: 1.1;
}
.aigen-metric-label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-faint); margin-top: 2px;
}
.aigen-conf-high   { color: var(--ok); }
.aigen-conf-medium { color: var(--warn); }
.aigen-conf-low    { color: var(--text-dim); }

.aigen-meter {
    height: 7px; border-radius: var(--r-pill); background: var(--bg-2);
    overflow: hidden; margin-bottom: 12px;
}
.aigen-meter-fill { display: block; height: 100%; border-radius: var(--r-pill); }
.aigen-fill-ai        { background: var(--bad); }
.aigen-fill-real      { background: var(--ok); }
.aigen-fill-uncertain { background: var(--warn); }

.aigen-panels { list-style: none; margin: 0 0 12px; padding: 0; }
.aigen-panel-row {
    display: flex; align-items: center; gap: 10px; padding: 3px 0;
    font-size: 0.78rem;
}
.aigen-panel-label { width: 58px; color: var(--text-dim); flex: none; }
.aigen-panel-bar {
    flex: 1; height: 6px; background: var(--bg-2);
    border-radius: var(--r-pill); overflow: hidden;
}
.aigen-panel-bar > span {
    display: block; height: 100%; background: var(--text-faint);
    border-radius: var(--r-pill);
}
.aigen-panel-pct {
    width: 40px; text-align: right; font-family: var(--font-mono);
    color: var(--text-dim); flex: none;
}

.aigen-note {
    font-size: 0.74rem; line-height: 1.5; color: var(--text-faint);
    margin: 0; padding-top: 10px; border-top: 1px dashed var(--line);
}
.aigen-unavailable { border-left-color: var(--line-strong); opacity: 0.9; }

/* rendering-signature (noise-floor) sub-block inside the AI-gen card */
.aigen-render {
    margin: 4px 0 2px; padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--bg-2); border-left: 3px solid var(--text-faint);
}
.aigen-render-rendered     { border-left-color: var(--bad);  background: var(--bad-soft); }
.aigen-render-borderline   { border-left-color: var(--warn); background: var(--warn-soft); }
.aigen-render-photographic { border-left-color: var(--ok);   background: var(--ok-soft); }
.aigen-render-na           { border-left-color: var(--line-strong); }
.aigen-render-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.aigen-render-title {
    font-size: 0.72rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-dim); flex: none;
}
.aigen-render-verdict {
    font-size: 0.8rem; font-weight: 600; color: var(--text); text-align: right;
}
.aigen-render-sub {
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint);
    margin-top: 3px;
}

/* combined-verdict additions: review (amber-red) + reason line */
.aigen-card.aigen-review { border-left-color: var(--warn); }
.aigen-badge-review    { color: var(--warn); background: var(--warn-soft); }
.aigen-badge-authentic { color: var(--ok);   background: var(--ok-soft); }
.aigen-fill-review     { background: var(--warn); }
.aigen-fill-authentic  { background: var(--ok); }
.aigen-reason {
    font-size: 0.8rem; line-height: 1.5; color: var(--text-dim);
    margin: 0 0 12px; padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--bg-2); border-left: 3px solid var(--line-strong);
}

/* ── Image Manipulation Flag card (reuses .aigen-card shell) ──────────── */
.aigen-card.manip-manipulated { border-left-color: var(--bad); }
.aigen-card.manip-suspicious  { border-left-color: var(--warn); }
.aigen-card.manip-clean       { border-left-color: var(--ok); }
.manip-badge-manipulated { color: var(--bad);  background: var(--bad-soft); }
.manip-badge-suspicious  { color: var(--warn); background: var(--warn-soft); }
.manip-badge-clean       { color: var(--ok);   background: var(--ok-soft); }
.manip-fill-manipulated { background: var(--bad); }
.manip-fill-suspicious  { background: var(--warn); }
.manip-fill-clean       { background: var(--ok); }

.manip-signals { list-style: none; margin: 0 0 12px; padding: 0; }
.manip-signal {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 6px 10px; margin-bottom: 5px; border-radius: var(--r-sm);
    background: var(--bg-2); font-size: 0.8rem;
}
.manip-signal-name { color: var(--text); font-weight: 550; }
.manip-signal-meta {
    font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint);
    flex: none; white-space: nowrap;
}

/* ── Compare code against a reference ─────────────────────────────────── */
/* Lives in its own "Compare Code" tab of the PDF results. */
#fig-panel-compare-code > .compare-code {
    max-width: 860px; margin: 0 auto; text-align: left;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1);
    padding: 16px;
}
/* Pointer from the Code Report tab to the Compare Code tab. */
.cc-pointer {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1);
    padding: 12px 16px; margin-bottom: 14px;
    font-size: 0.85rem; color: var(--text-faint); text-align: left;
}

.compare-code { padding: 4px 16px 16px; }
.cc-head h4 { margin: 0 0 4px; font-size: 0.95rem; color: var(--text); }
.cc-hint { margin: 0 0 12px; font-size: 0.8rem; color: var(--text-faint); line-height: 1.5; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .cc-grid { grid-template-columns: 1fr; } }
.cc-side { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; }
.cc-side-title { font-weight: 650; font-size: 0.8rem; color: var(--text); margin-bottom: 9px; }
.cc-file { display: inline-block; font: 600 0.75rem/1 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 8px 11px; cursor: pointer; }
.cc-file input { display: none; }
.cc-files-note { font-size: 0.74rem; color: var(--text-faint); margin: 6px 0; min-height: 1em; }
.cc-input { width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-1); color: var(--text); font-size: 0.8rem; }
.cc-actions { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.cc-status { font-size: 0.78rem; color: var(--text-faint); }
.cc-result { margin-top: 14px; }
.cc-result.cc-pending { font-size: 0.82rem; color: var(--text-faint); }
.cc-result.cc-error { font-size: 0.82rem; color: var(--bad); }

.cc-score { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r); border-left: 4px solid var(--text-faint); background: var(--bg-2); }
.cc-score-high { border-left-color: var(--bad); }
.cc-score-medium { border-left-color: var(--warn); }
.cc-score-low { border-left-color: var(--ok); }
.cc-score-none { border-left-color: var(--ok); }
.cc-score-num { font: 600 2rem/1 var(--font-mono); color: var(--text); flex: none; }
.cc-score-label { font-weight: 650; text-transform: capitalize; font-size: 0.9rem; }
.cc-score-label-high { color: var(--bad); }
.cc-score-label-medium { color: var(--warn); }
.cc-score-label-low, .cc-score-label-none { color: var(--ok); }
.cc-score-sub { font-size: 0.82rem; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
.cc-score-src { font: 500 0.72rem/1.4 var(--font-mono); color: var(--text-faint); margin-top: 4px; }
.cc-matches-title { font-weight: 650; font-size: 0.8rem; color: var(--text-dim); margin: 14px 0 7px; }
.cc-matches { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.cc-match { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 0.78rem; }
.cc-match code { color: var(--accent); word-break: break-all; }
.cc-match-loc { font-family: var(--font-mono); color: var(--text-faint); white-space: nowrap; flex: none; }
.cc-kind { color: var(--text-ghost); }

/* ── Compare-code evidence categories ─────────────────────────────────── */
.cc-ev-note { font-size: 0.78rem; color: var(--text-faint); line-height: 1.5; margin: 14px 0 10px; }
.cc-cat { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 12px; overflow: hidden; }
.cc-cat-strong { border-left: 3px solid var(--bad); }
.cc-cat-weak { border-left: 3px solid var(--line-strong); }
.cc-cat-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-2); }
.cc-cat-label { font-weight: 650; font-size: 0.85rem; color: var(--text); }
.cc-cat-count { font: 600 0.75rem/1 var(--font-mono); color: #F4ECD9; background: var(--bad); border-radius: var(--r-pill); padding: 3px 9px; }
.cc-cat-weak .cc-cat-count { background: var(--text-faint); }
.cc-cat-tag { margin-left: auto; font: 600 0.66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--bad); background: var(--bad-soft); padding: 3px 8px; border-radius: var(--r-sm); }
.cc-cat-tag-weak { color: var(--text-faint); background: var(--bg-2); border: 1px solid var(--line); }
.cc-ev-row { padding: 8px 12px; border-bottom: 1px dashed var(--line); }
.cc-ev-row:last-child { border-bottom: none; }
.cc-ev-token { display: block; color: var(--accent); font-size: 0.8rem; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.cc-ev-locs { margin-top: 4px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); }
.cc-ev-a, .cc-ev-b { display: block; word-break: break-all; color: var(--text-dim); }
.cc-ev-a { color: var(--text-faint); }
.cc-ev-more { padding: 7px 12px; font-size: 0.75rem; font-style: italic; color: var(--text-faint); background: var(--bg-2); }

/* ── Reference-check report ───────────────────────────────────────────── */
.ref-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.ref-row { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1); border-left: 3px solid var(--text-faint); }
.ref-row.ref-ok  { border-left-color: var(--ok); }
.ref-row.ref-warn { border-left-color: var(--warn); }
.ref-row.ref-bad { border-left-color: var(--bad); background: var(--bad-soft); }
.ref-num { flex: 0 0 auto; font: 600 0.8rem/1.5 var(--font-mono); color: var(--text-faint); min-width: 26px; text-align: right; }
.ref-body { flex: 1 1 auto; min-width: 0; }
.ref-raw { font-size: 0.82rem; line-height: 1.5; color: var(--text); }
.ref-mism { margin-top: 6px; font-size: 0.8rem; color: var(--text-dim); }
.ref-mism b { color: var(--bad); text-transform: capitalize; }
.ref-cited { font-family: var(--font-mono); color: var(--bad); }
.ref-actual { font-family: var(--font-mono); color: var(--ok); }
.ref-cr { margin-top: 5px; font-size: 0.78rem; color: var(--text-dim); }
.ref-cr-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); }
.ref-ctx { margin-top: 5px; font-size: 0.76rem; font-style: italic; color: var(--text-faint); line-height: 1.45; }
.ref-content { margin-top: 5px; font-size: 0.78rem; padding: 4px 8px; border-radius: var(--r-xs); display: inline-block; }
.ref-content-no { color: var(--bad); background: var(--bad-soft); font-weight: 600; }
.ref-content-yes { color: var(--ok); background: var(--ok-soft); }
.ref-content-unclear { color: var(--warn); background: var(--warn-soft); }
.ref-status { flex: 0 0 auto; font: 600 0.66rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-sm); height: fit-content; white-space: nowrap; }
.ref-status-ok  { color: var(--ok); background: var(--ok-soft); }
.ref-status-warn { color: var(--warn); background: var(--warn-soft); }
.ref-status-bad { color: var(--bad); background: var(--bad-soft); }
.ref-clean-details { margin-top: 8px; }
.ref-clean-details > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent); padding: 6px 0; }

/* ── Subscription plans ────────────────────────────────────────────────── */
.history-head-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Locked AI toggles (Alpine tier) */
.settings-toggle.settings-locked { opacity: 0.45; cursor: not-allowed; }
.settings-toggle.settings-locked input { cursor: not-allowed; }
.plan-req {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--r-xs);
    padding: 0.05rem 0.35rem;
    margin-left: 0.4rem;
}
.plan-lock {
    margin: 0.5rem 0 0.75rem;
    padding: 0.7rem 0.8rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.plan-lock p { margin: 0 0 0.55rem; font-size: 0.78rem; line-height: 1.5; color: var(--text-faint); }
.plan-bar .plan-name { text-transform: capitalize; }

/* Plans view */
.plans-head { margin-bottom: 1.4rem; }
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.1rem;
    align-items: stretch;
    text-align: left;
}
.plan-card {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.15rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.plan-card.plan-featured { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.plan-card.plan-current { border-left: 3px solid var(--accent); }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.plan-card-head h3 { margin: 0; font-size: 1.15rem; }
.plan-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--r-xs);
    padding: 0.08rem 0.4rem;
}
.plan-tagline { margin: 0.4rem 0 0.7rem; font-size: 0.84rem; color: var(--text-faint); line-height: 1.5; }
.plan-price { font-size: 1rem; font-weight: 600; margin-bottom: 0.8rem; }
.plan-feats { margin: 0 0 1rem; padding-left: 1.05rem; font-size: 0.82rem; line-height: 1.6; }
.plan-feats li { margin-bottom: 0.25rem; }
.plan-feats li.plan-excl { color: var(--text-ghost); text-decoration: line-through; }
.plan-cta { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.plan-current-note, .plan-contact-note {
    font-size: 0.76rem;
    color: var(--text-faint);
    line-height: 1.5;
}

/* Plan pricing rows */
.plan-price { display: flex; align-items: baseline; gap: 0.4rem; }
.plan-period { font-size: 0.78rem; font-weight: 400; color: var(--text-faint); }
.plan-payg {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: -0.4rem 0 0.85rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
}
.plan-payg-price { font-weight: 600; font-size: 0.9rem; }
.plan-payg-unit { font-size: 0.78rem; color: var(--text-faint); }
.plan-payg-note { flex-basis: 100%; font-size: 0.72rem; color: var(--text-faint); }
.plan-pdf-note { color: var(--text-faint); }
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

/* ── Sticky top nav ───────────────────────────────────────────────────── */
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.topnav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.topnav-link {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 0.32rem 0.6rem;
    font: inherit;
    font-size: 0.84rem;
    color: var(--text-faint);
    text-decoration: none;
    cursor: pointer;
    transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease);
}
.topnav-link:hover {
    color: var(--accent);
    background: var(--bg-1);
    border-color: var(--line);
}
.topnav-link:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
/* The signed-out (auth) screen has nothing to navigate to. */
body.auth-mode .topnav { display: none; }

/* ── Signed-in chip + AI token meter (sticky nav) ──────────────────────── */
.userchip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 0.35rem;
    padding: 0.35rem 0.6rem 0.35rem 0.4rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.userchip:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); }
/* Account menu opened from the username chip */
.userchip-wrap { position: relative; margin-left: 0.35rem; }
.userchip-wrap .userchip { margin-left: 0; }
.userchip-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    padding: 4px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-glow, 0 8px 24px rgba(0,0,0,.18));
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.userchip-menu[hidden] { display: none; }
.userchip-menu-item {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.7rem;
    background: none;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
}
.userchip-menu-item:hover { background: var(--bg-2, rgba(0,0,0,.06)); color: var(--accent); }

/* Support / customer-service modal */
.support-backdrop{position:fixed;inset:0;background:rgba(30,24,14,.5);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto;z-index:120}
.support-backdrop[hidden]{display:none}
.support-modal{background:var(--bg-1,#fbf7ee);border:1px solid var(--line,#ddd0b4);border-radius:14px;max-width:640px;width:100%;padding:22px 24px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.support-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.support-head h2{font-size:1.15rem;margin:0}
.support-close{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--text-3,#7a6b52);cursor:pointer}
.support-sub{font-size:.85rem;color:var(--text-3,#7a6b52);margin:0}
.support-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:12px 0}
.support-label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3,#7a6b52);margin:12px 0 5px}
.support-input{width:100%;border:1px solid var(--line,#ddd0b4);border-radius:8px;padding:9px 11px;font:inherit;font-size:.9rem;background:#fff;color:var(--text,#241e14)}
textarea.support-input{min-height:96px;resize:vertical}
#support-tickets{display:flex;flex-direction:column;gap:8px;margin-top:6px;max-height:56vh;overflow:auto}
.support-ticket{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line,#ddd0b4);border-radius:9px;background:#fff;cursor:pointer;text-align:left}
.support-ticket:hover{border-color:var(--accent,#1e4a38)}
.support-ticket .st-main{flex:1;min-width:0}
.support-ticket .st-subj{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-ticket .st-when{font-size:.72rem;color:var(--text-3,#7a6b52);margin-top:2px}
.support-badge{font-size:.62rem;padding:2px 8px;border-radius:999px;letter-spacing:.05em;text-transform:uppercase}
.sb-open{background:#fdecec;color:#a8392a}.sb-pending{background:#fbf1dc;color:#9a6b1e}.sb-closed{background:#e7efe8;color:#3c7a4e}
.support-dot{width:8px;height:8px;border-radius:50%;background:#a8392a;flex:0 0 auto}
.support-empty{padding:22px;text-align:center;color:var(--text-3,#7a6b52);font-size:.85rem}
.support-back{background:none;border:0;color:var(--accent,#1e4a38);font:inherit;font-weight:600;cursor:pointer;padding:0;margin-bottom:8px}
.support-thread-meta{font-size:.78rem;color:var(--text-3,#7a6b52);margin-bottom:10px}
.support-thread{display:flex;flex-direction:column;gap:9px;max-height:44vh;overflow:auto;margin-bottom:12px}
.support-msg{padding:9px 12px;border-radius:9px;font-size:.87rem;line-height:1.5;white-space:pre-wrap;max-width:86%}
.support-msg.user{background:#efe8d8;align-self:flex-start}
.support-msg.admin{background:var(--accent,#1e4a38);color:#f4ecd9;align-self:flex-end}
.support-msg .sm-who{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.userchip-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}
.userchip-avatar.has-photo { background: none; overflow: hidden; }
.userchip-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.userchip-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.userchip-name { font-size: 0.8rem; font-weight: 600; color: var(--text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userchip-plan {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.userchip-tokens { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-left: 0.5rem; border-left: 1px solid var(--line); }
.tok-bar { display: block; width: 74px; height: 5px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.tok-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 300ms var(--ease); }
.tok-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); white-space: nowrap; }
.userchip.tok-low .tok-fill { background: var(--warn, #C08A2E); }
.userchip.tok-out .tok-fill { background: var(--bad, #A8392A); }
.userchip.tok-out .tok-label { color: var(--bad, #A8392A); }
.userchip.tok-none .tok-bar { display: none; }

/* ── Plan portraits (field-sketch goats) ──────────────────────────────── */
.plan-art {
    display: grid;
    place-items: center;
    margin: -0.35rem 0 0.9rem;
    padding: 0.6rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.plan-art img {
    height: 190px;
    width: auto;
    max-width: 100%;
    display: block;
    transition: transform 260ms var(--ease);
}
.plan-card:hover .plan-art img { transform: translateY(-3px) scale(1.03); }
.plan-card.plan-featured .plan-art { border-color: var(--accent); background: var(--bg-1); }

/* Plans page notice — replaces the blocking alert() on an upgrade/plan event */
.plans-notice {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-1);
    border: 1px solid var(--accent);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
}

/* ── Figure review: figure vs caption vs the paper's own numbers ───────── */
.figrev {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--r-sm);
    text-align: left;
}
.figrev-inconsistent { border-left-color: var(--bad, #A8392A); }
.figrev-questions { border-left-color: var(--warn, #C08A2E); }
.figrev-consistent { border-left-color: var(--ok, #3C7A4E); }
/* A figure whose pass died is NOT a clean figure — never let it read green. */
.figrev-not_reviewed { border-left-color: var(--text-faint); opacity: 0.85; }
.figrev-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.figrev-label { font-weight: 600; font-size: 1rem; }
.figrev-verdict {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: var(--r-xs);
    border: 1px solid var(--line-strong);
    color: var(--text-faint);
}
.figrev-v-inconsistent { color: var(--bad, #A8392A); border-color: var(--bad, #A8392A); }
.figrev-v-questions { color: var(--warn, #C08A2E); border-color: var(--warn, #C08A2E); }
.figrev-count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    color: var(--text-faint);
}
.figrev-summary { margin-top: 0.45rem; font-size: 0.88rem; color: var(--text-faint); line-height: 1.55; }
.figrev-find {
    margin-top: 0.8rem;
    padding: 0.75rem 0.85rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.figrev-find-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.figrev-find-title { font-weight: 600; font-size: 0.92rem; }
.figrev-cat, .figrev-sev {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.08rem 0.4rem;
    border-radius: var(--r-xs);
    border: 1px solid var(--line-strong);
    color: var(--text-faint);
}
.figrev-sev.sev-high { color: var(--bad, #A8392A); border-color: var(--bad, #A8392A); }
.figrev-sev.sev-medium { color: var(--warn, #C08A2E); border-color: var(--warn, #C08A2E); }
.figrev-detail { margin-top: 0.45rem; font-size: 0.88rem; line-height: 1.6; color: var(--text); }
/* the working — the part a referee can actually check */
.figrev-check {
    margin-top: 0.55rem;
    padding: 0.6rem 0.7rem;
    background: var(--bg);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    overflow-x: auto;
}
.figrev-quote {
    margin-top: 0.5rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--accent);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-faint);
    line-height: 1.55;
}
.figrev-panel {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.08rem 0.4rem;
    border-radius: var(--r-xs);
    background: var(--accent);
    color: var(--bg);
}

/* ── Pre-analysis setup modal ─────────────────────────────────────────────
   Asks WHAT to run before the file is sent. Grouped by what the user is
   actually deciding — the figures, the article, the code — not by which
   detector implements it. */
.setup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(36, 30, 20, 0.45);
    backdrop-filter: blur(3px);
}
.setup-backdrop[hidden] { display: none; }

.setup-modal {
    width: min(680px, 100%);
    max-height: min(86vh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg, 12px);
    box-shadow: 0 24px 60px rgba(36, 30, 20, 0.28);
    overflow: hidden;
}

.setup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem 1rem;
    border-bottom: 1px solid var(--line);
}
.setup-header h2 { margin: 0; font-size: 1.1rem; color: var(--text); }
.setup-file {
    margin: 0.3rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}
.setup-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.2rem;
}
.setup-close:hover { color: var(--text); }

.setup-body {
    padding: 0.5rem 1.4rem 0.75rem;
    overflow-y: auto;
    flex: 1;
}

.setup-group { padding: 1rem 0; }
.setup-group + .setup-group { border-top: 1px solid var(--line); }

/* PDF two-choice cards (immediate vs deep review) */
.setup-modes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0 0.25rem;
}
.setup-mode-card {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.setup-mode-card:hover { border-color: var(--line-strong); }
.setup-mode-card input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.setup-mode-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft, rgba(16, 122, 87, 0.06));
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.setup-mode-body { display: flex; flex-direction: column; gap: 0.25rem; }
.setup-mode-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}
.setup-mode-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.45; }
.setup-mode-lock {
    font-size: 0.78rem;
    color: var(--warn);
    margin-top: 0.15rem;
}

.setup-group-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.setup-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.setup-group-toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.setup-group-title {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text);
}
.setup-group-hint { font-size: 0.75rem; color: var(--text-faint); }
.setup-always {
    margin: 0.4rem 0 0 1.5rem;
    font-size: 0.72rem;
    color: var(--text-ghost);
    font-style: italic;
}
.setup-group-footer {
    margin: 0.6rem 0 0 1.5rem;
    font-size: 0.72rem;
    color: var(--text-ghost);
}

.setup-options {
    margin: 0.6rem 0 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.1rem 1.2rem;
}

.setup-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.45rem 0;
    cursor: pointer;
    border-radius: 6px;
    position: relative;   /* anchors the visually-hidden native checkbox */
}
.setup-option:hover { background: var(--bg-hover); }

/* The real checkbox is hidden behind the drawn .setup-check, NOT removed:
   `display: none` took these out of the tab order altogether, which meant the
   mandatory acknowledgement — the one control that gates the whole run — could
   not be reached, let alone ticked, without a mouse. */
.setup-option input,
.setup-ack input {
    position: absolute;
    left: 0; top: 0.5rem;
    width: 16px; height: 16px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.setup-check {
    flex-shrink: 0;
    margin-top: 0.12rem;
    width: 16px; height: 16px;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    background: var(--bg);
    position: relative;
    transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.setup-option input:checked + .setup-check,
.setup-ack input:checked + .setup-check {
    background: var(--accent);
    border-color: var(--accent);
}
.setup-option input:checked + .setup-check::after,
.setup-ack input:checked + .setup-check::after {
    content: "";
    position: absolute;
    left: 4.5px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Keyboard focus has to be visible on the box the user can actually see. */
.setup-option input:focus-visible + .setup-check,
.setup-ack input:focus-visible + .setup-check {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.setup-option-text { display: flex; flex-direction: column; }
.setup-option-label { font-size: 0.83rem; color: var(--text); font-weight: 500; }
.setup-option-hint {
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-top: 0.1rem;
    line-height: 1.35;
}

.setup-ai-chip {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--r-pill, 999px);
    vertical-align: 1px;
}

.setup-option.setup-locked { opacity: 0.45; cursor: not-allowed; }
.setup-option.setup-locked:hover { background: none; }

/* `hidden` must win over the display rule below — a bare class selector beats the
   UA's [hidden]{display:none}, which would show the upsell to a paying user. */
.setup-plan-lock[hidden] { display: none; }

.setup-plan-lock {
    margin: 0 1.4rem 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.setup-plan-lock p { margin: 0; font-size: 0.76rem; color: var(--text-dim); }

.setup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.4rem;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}
.setup-summary {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}
.setup-actions { display: flex; gap: 0.5rem; }

@media (max-width: 600px) {
    /* On a phone the dialog IS the screen — a centred card with 1.5rem of backdrop
       around it wastes the only space the option list has. */
    .setup-backdrop { padding: 0; }
    .setup-modal { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: none; }
    .setup-options { grid-template-columns: 1fr; margin-left: 0.9rem; }
    .setup-always, .setup-group-footer { margin-left: 0.9rem; }
    .setup-header, .setup-body, .setup-footer { padding-left: 1rem; padding-right: 1rem; }
    .setup-disclaimer { margin-left: 1rem; margin-right: 1rem; }
    .setup-footer { flex-direction: column; align-items: stretch; }
    .setup-actions { justify-content: flex-end; }
    .setup-actions .btn { flex: 1; }
}

/* ── Pre-analysis disclaimer ──────────────────────────────────────────────
   A match is evidence of visual similarity, not of misconduct. This says so
   before the run, and the acknowledgement gates the Run button. */
.setup-disclaimer {
    margin: 0 1.4rem 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
}
.setup-disclaimer-title {
    margin: 0 0 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
}
.setup-disclaimer p {
    margin: 0 0 0.5rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-dim);
}
.setup-disclaimer p strong { color: var(--text); }

.setup-ack {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    cursor: pointer;
    position: relative;   /* anchors the visually-hidden native checkbox */
}
.setup-ack input { top: 0.8rem; }
.setup-ack .setup-check { margin-top: 0.1rem; }
.setup-ack-text {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text);
    font-weight: 500;
}

/* The run button is inert until the acknowledgement is ticked — make that
   visible, not just enforced. */
#setup-run:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* ── Collective "Figures" tab ─────────────────────────────────────────────
   Every figure in one scroll, each under its own header, instead of one tab
   per figure (which buried the whole-paper reports off the end of the bar). */
.figures-index {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* The one line that answers "which figures have problems?" — plus the two
   controls that let a reviewer act on the answer instead of scrolling past it. */
.figures-index-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.figures-index-summary {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--accent-hi);
}
.figures-index-summary.is-clean { color: var(--text-faint); font-weight: 400; }
.figures-index-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.figures-index-btn {
    padding: 0.28rem 0.65rem;
    font-family: var(--font);
    font-size: 0.74rem;
    color: var(--text-dim);
    background: var(--bg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.figures-index-btn:hover { color: var(--text); background: var(--bg); }
.figures-index-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.figures-index-btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-1);
}

.figures-index-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.figures-index-chips[hidden] { display: none; }

.figures-empty-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-faint);
}
.figures-empty-note[hidden] { display: none; }

.figures-index-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    transition: all 140ms var(--ease);
}
.figures-index-item:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--bg);
}
.figures-index-item:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.figures-index-item.has-hits {
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--bg-1);
    font-weight: 600;
}
/* A figure with nothing in it should not compete for attention in the index. */
.figures-index-item.is-clean {
    color: var(--text-ghost);
    background: transparent;
    border-style: dashed;
}
.figures-index-item.is-clean:hover { color: var(--text-dim); }
.figures-index-badge {
    display: inline-block;
    min-width: 1.05rem;
    padding: 0 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    color: var(--bg-1);
    background: var(--accent);
    border-radius: var(--r-pill, 999px);
}
.figures-index-badge[hidden] { display: none; }

.figure-block { padding-bottom: 2.25rem; scroll-margin-top: 5.5rem; }
.figure-block + .figure-block {
    margin-top: 2.25rem;
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
}

/* ── A figure with no matches recedes ─────────────────────────────────────
   Most figures in most papers are clean. They still have to be REACHABLE (the
   reviewer must be able to see what was checked and disagree with it), but they
   are not the finding — so they collapse to a dimmed header line and the figures
   that did hit are the only ones with weight on the page. */
.figure-block.is-clean.is-collapsed { padding-bottom: 0.3rem; opacity: 0.62; }
.figure-block.is-clean.is-collapsed:hover,
.figure-block.is-clean.is-collapsed:focus-within { opacity: 1; }
/* A run of clean figures should read as a compact list, not as a page of
   whitespace the reviewer has to scroll past to reach the next real finding. */
.figure-block.is-clean.is-collapsed + .figure-block {
    margin-top: 0;
    padding-top: 0.55rem;
}
.figure-block.is-clean.is-collapsed .figure-block-head { margin-bottom: 0; }
.figure-block.is-clean.is-collapsed .figure-block-title {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-dim);
}
.figure-block-body[hidden] { display: none; }

/* Hide the clean figures entirely — "Only figures with matches". */
.figures-hide-clean .figure-block.is-clean,
.figures-hide-clean .figures-index-item.is-clean { display: none; }

.figure-block-head {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    scroll-margin-top: 5.5rem;    /* the sticky index must not cover the header */
}
.figure-block-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}
.figure-block-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}
.figure-block-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    padding: 0.12rem 0.5rem;
    background: var(--accent-soft);
    border-radius: var(--r-pill, 999px);
}
.figure-block-count.is-clean {
    color: var(--text-faint);
    background: none;
    font-weight: 400;
}
.figure-block-toggle {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-faint);
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 0.1rem 0.45rem;
    cursor: pointer;
    transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.figure-block-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.figure-block-toggle:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

/* ── PDF View: dismissible comments + stacked margin notes ────────────────
   A reviewer works by elimination. Every margin comment can be dismissed
   (reversibly), and when a page carries more than a handful they collapse into
   an overlapping stack that fans out on hover — otherwise the margin column
   runs far past the page it is annotating and stops lining up with it. */
.pdfview-note { position: relative; }

.pdfview-note-dismiss {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 1rem;
    color: var(--text-ghost);
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms var(--ease), color 120ms var(--ease);
}
.pdfview-note:hover .pdfview-note-dismiss,
.pdfview-note-dismiss:focus-visible { opacity: 1; }
.pdfview-note-dismiss:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--bg-hover);
}

.pdfview-dismissed-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-faint);
    background: var(--bg-2);
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
}
.pdfview-restore {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.pdfview-stack-hint {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-faint);
    padding-bottom: 0.35rem;
}

/* The stack: each card slides up under the one above, leaving a sliver showing.
   Hovering (or focusing into) the column restores the full list. */
.pdfview-notes.is-stacked .pdfview-note {
    margin-top: calc(-1 * var(--stack-overlap, 62px));
    transition: margin-top 180ms var(--ease), transform 180ms var(--ease),
                box-shadow 180ms var(--ease);
    box-shadow: 0 -2px 8px rgba(36, 30, 20, 0.10);
}
.pdfview-notes.is-stacked .pdfview-note:first-of-type { margin-top: 0; }
.pdfview-notes.is-stacked:hover .pdfview-note,
.pdfview-notes.is-stacked:focus-within .pdfview-note {
    margin-top: 0.6rem;
    box-shadow: none;
}
.pdfview-notes.is-stacked:hover .pdfview-note:first-of-type,
.pdfview-notes.is-stacked:focus-within .pdfview-note:first-of-type { margin-top: 0; }
/* A stacked (not-yet-fanned) card must not swallow clicks meant for the one on
   top of it — only the visible sliver is interactive until the column expands. */
.pdfview-notes.is-stacked .pdfview-note:hover { z-index: 999 !important; }

/* ── AI-written text screen ───────────────────────────────────────────────
   Styled to read as a SCREEN, not a verdict: the caveat is part of the report,
   not fine print under it. */
.ai-text-caveat, .ai-text-caveat-inline {
    margin: 0.6rem 0 1rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-dim);
    background: var(--bg-2);
    border-left: 3px solid #8b5cf6;
    border-radius: 6px;
}
.ai-text-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ai-text-item {
    padding: 0.75rem 0.9rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid #8b5cf6;
    border-radius: 8px;
}
.ai-text-item.strength-weak { border-left-color: #c4b5fd; }
.ai-text-item.strength-moderate { border-left-color: #a78bfa; }
.ai-text-item.strength-strong { border-left-color: #7c3aed; }

.ai-text-item-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.ai-text-idx {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    background: #8b5cf6;
    border-radius: var(--r-pill, 999px);
    padding: 0.05rem 0.4rem;
}
.ai-text-strength, .ai-text-cues {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ai-text-quote {
    margin: 0 0 0.5rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--line-strong);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text);
    font-style: italic;
}
.ai-text-reasons {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.74rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.ai-text-reasons li { margin-bottom: 0.15rem; }

/* ── Re-analyze, at the top of the settings sidebar ───────────────────────
   Always available once a file is loaded. It goes STALE (accented) when the
   detection settings have drifted from the result on screen — sensitivity
   changes what the detector computes, so unlike the likelihood slider they
   cannot be applied to results that already exist. */
.rerun-group {
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}
.btn-reanalyze {
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-1);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: all 140ms var(--ease);
}
.btn-reanalyze:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-reanalyze:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Settings drifted — a re-run would genuinely change the result, so say so. */
.btn-reanalyze.is-stale {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.btn-reanalyze.is-stale:hover:not(:disabled) {
    background: var(--accent-hi);
    color: #fff;
}
.reanalyze-hint {
    margin: 0.5rem 0 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text-faint);
}

/* One comment per CLONE, not per box. This line says where the other half is —
   "both regions on this page", or "matched with a region on p.7" for a clone that
   straddles two pages. */
.pdfview-note-where {
    display: inline-block;
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
    padding: 0.1rem 0.45rem;
}

/* ── Export report control ─────────────────────────────────────────────────
   The "Export report" split control lives above the results (single image and
   PDF views). One button opens a small menu of formats; the picked format is
   posted to /export_report and the returned file is downloaded. */
.export-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
.export-menu { position: relative; }
.export-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.export-btn .export-caret { font-size: 0.7em; opacity: 0.7; margin-left: 0.1rem; }
.export-btn[aria-expanded="true"] .export-caret { transform: rotate(180deg); }
.export-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 190px;
    background: var(--bg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.export-options[hidden] { display: none; }
.export-options button {
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 120ms var(--ease, ease), color 120ms var(--ease, ease);
}
.export-options button:hover,
.export-options button:focus-visible {
    background: var(--accent-soft);
    color: var(--accent-hi);
    outline: none;
}
.export-options button:disabled { opacity: 0.5; cursor: default; }
.export-status {
    font-size: 0.82rem;
    color: var(--text-faint);
    min-height: 1em;
}
.export-status.err { color: var(--bad); }

/* Toast notifications (bottom-right): async-job "ready"/"failed" notices. */
#toast-host{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:390px}
.toast{background:#2b2b2b;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.4;animation:toast-in .22s ease}
.toast-msg{flex:1}
.toast-action{background:#c99a2e;color:#1a1a1a;border:none;border-radius:7px;padding:6px 12px;font-weight:600;cursor:pointer;white-space:nowrap;font-size:12.5px}
.toast-action:hover{background:#d8a838}
.toast-close{background:none;border:none;color:#bbb;font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.toast-close:hover{color:#fff}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}