/* AIPaperFilter web — page-specific styles layered on style.css tokens. */

.lead a, .hint a { color: var(--accent); }
.file-input { font: inherit; padding: var(--space-2) 0; }

/* advanced options */
details.options { margin: var(--space-3) 0; }
details.options summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
details.options label { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; flex-wrap: wrap; }
details.options input[type="number"] { width: 6rem; }

/* ---- job progress stages ---- */
.stages { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex;
  flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.stages li { color: var(--muted); font-size: var(--fs-sm); position: relative; padding-left: 1.3em; }
.stages li::before { content: "○"; position: absolute; left: 0; }
.stages li.active { color: var(--accent); font-weight: 700; }
.stages li.active::before { content: "◔"; }
.stages li.done { color: var(--good); }
.stages li.done::before { content: "✓"; }
#progress.collapsed .stages, #progress.collapsed h1 { display: none; }

/* ---- results summary ---- */
.counts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }
.cbtn { font: inherit; cursor: pointer; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4);
  background: var(--surface); transition: opacity .15s, background .15s; }
.cbtn b { margin-left: .35em; }
.cb-include { color: var(--good); } .cb-maybe { color: var(--warn); } .cb-exclude { color: var(--bad); }
.cbtn.off { opacity: .35; text-decoration: line-through; }

details.criteria { margin: var(--space-3) 0; }
details.criteria summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.crit-list { list-style: none; padding: 0; margin: var(--space-2) 0; }
.crit-list li { padding: var(--space-1) 0; }
.ck { display: inline-block; min-width: 2.1em; text-align: center; font-weight: 700;
  font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-ink); margin-right: .5em; }
.ck.ce { background: var(--bad-soft); color: var(--bad); }

/* ---- result cards ---- */
.rcard { border: 1px solid var(--border); border-radius: var(--radius);
  margin: var(--space-3) 0; overflow: hidden; background: var(--surface); }
.rc-include { border-left: 3px solid var(--good); }
.rc-maybe   { border-left: 3px solid var(--warn); }
.rc-exclude { border-left: 3px solid var(--bad); }
.rhead { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  cursor: pointer; }
.rtitle { flex: 1; font-weight: 600; min-width: 0; }
.rtitle a { color: var(--ink); }
.caret { color: var(--muted); transition: transform .15s; }
.rcard.open .caret { transform: rotate(180deg); }
.dbadge { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 8px; border-radius: var(--radius-pill); }
.dbadge.include { background: var(--good-soft); color: var(--good); }
.dbadge.maybe   { background: var(--warn-soft); color: var(--warn); }
.dbadge.exclude { background: var(--bad-soft); color: var(--bad); }
.vbadge { font-size: var(--fs-xs); padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted); }
.vbadge.ok { color: var(--good); } .vbadge.bad { color: var(--warn); }
.rreason { padding: 0 var(--space-4) var(--space-3); color: var(--ink-2); font-size: var(--fs-sm); }
.rproof { display: none; padding: 0 var(--space-4) var(--space-4); }
.rcard.open .rproof { display: block; }

/* ---- per-criterion proof table (the centerpiece) ---- */
table.proof { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.proof td { padding: var(--space-2); border-top: 1px solid var(--border);
  vertical-align: top; }
table.proof .v { font-weight: 700; }
table.proof .v.ok { color: var(--good); } table.proof .v.no { color: var(--bad); }
table.proof .v.q { color: var(--muted); }
.ctext { color: var(--ink); }
.quote { margin-top: 4px; padding: var(--space-2); background: var(--surface-2);
  border-radius: var(--radius-sm); color: var(--ink-2); font-style: italic; }
.quote.ungrounded { text-decoration: line-through; color: var(--bad); opacity: .8; }
.g { display: inline-block; white-space: nowrap; font-size: var(--fs-xs); }
.g.ok { color: var(--good); } .g.bad { color: var(--warn); }

/* ---- topnav + runs history ---- */
.topnav { margin-left: auto; display: flex; gap: var(--space-4); }
.topnav a { color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; }
.topnav a:hover { color: var(--accent); }
table.runs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.runs-table th { text-align: left; color: var(--muted); font-weight: 600;
  padding: var(--space-2); border-bottom: 1px solid var(--border); }
table.runs-table td { padding: var(--space-2); border-bottom: 1px solid var(--border);
  vertical-align: top; }
.run-criteria { color: var(--ink-2); max-width: 28em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.run-time { white-space: nowrap; color: var(--ink-2); }
.badge { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px;
  border-radius: var(--radius-pill); white-space: nowrap; }
.badge-include { background: var(--good-soft); color: var(--good); }
.badge-maybe   { background: var(--warn-soft); color: var(--warn); }
.badge-exclude { background: var(--bad-soft); color: var(--bad); }

/* ---- provisional (streaming) results ---- */
.partial-note { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; }
.counts-mini { color: var(--ink-2); font-weight: 600; }
#partial .rcard { opacity: .92; }

/* ---- explore (search-only) page ---- */
.explore-h2 { margin-top: var(--space-6); font-size: var(--fs-lg); }
.explore-list { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-3); }
.explore-title { display: flex; align-items: baseline; gap: var(--space-3); }
.explore-score { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.explore-abs { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sm); }