/* ── Dark Academic tokens ────────────────────────────────────────── */
:root {
  --c-bg:          #141920;
  --c-bg-alt:      #1c2333;
  --c-bg-inset:    #212940;
  --c-surface:     #1c2333;
  --c-gold:        #d4a843;
  --c-gold-mid:    #b8912e;
  --c-gold-light:  rgba(212,168,67,.13);
  --c-fg:          #e0d8cc;
  --c-fg-2:        #9ba3af;
  --c-fg-3:        #5c6472;
  --c-border:      #273045;
  --c-border-mid:  #38445e;
  --f-sans:   "Jost", system-ui, sans-serif;
  --f-mono:   "JetBrains Mono", monospace;
  --f-serif:  "Lora", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--c-bg); color: var(--c-fg); }
body { font-family: var(--f-sans); font-weight: 300; font-size: 15px;
       -webkit-font-smoothing: antialiased; }

/* ── header ──────────────────────────────────────────────────────── */
header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding: 18px 48px;
  display: flex; align-items: baseline; gap: 18px;
}
header h1 {
  font-family: var(--f-sans); font-weight: 300; font-size: 1.35rem;
  letter-spacing: -.01em; color: var(--c-fg);
}
header span {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-fg-3);
}

/* ── search bar ──────────────────────────────────────────────────── */
.search-bar {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
  padding: 16px 48px; display: flex; gap: 14px; align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.search-bar input[type=text] {
  flex: 1; border: 1px solid var(--c-border-mid); border-radius: 4px;
  background: var(--c-bg); padding: 8px 12px; font-family: var(--f-sans);
  font-size: .92rem; font-weight: 300; color: var(--c-fg); outline: none;
  transition: border-color .15s;
}
.search-bar input[type=text]::placeholder { color: var(--c-fg-3); }
.search-bar input[type=text]:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(212,168,67,.15);
}
#search-btn {
  font-family: var(--f-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--c-gold); color: #141920;
  border: none; border-radius: 4px; padding: 9px 22px; cursor: pointer;
  transition: background .15s;
}
#search-btn:hover { background: var(--c-gold-mid); }
#search-btn:disabled { opacity: .4; cursor: default; }

/* ── main ────────────────────────────────────────────────────────── */
.main { max-width: 880px; margin: 36px auto; padding: 0 48px;
        display: flex; flex-direction: column; gap: 24px; }

/* ── section label ───────────────────────────────────────────────── */
.results-header {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
.section-label {
  font-family: var(--f-mono); font-size: 1.1rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-fg);
}
#sort-btn {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em;
  color: var(--c-fg-3); background: none; border: 1px solid var(--c-border);
  border-radius: 3px; padding: 2px 8px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
#sort-btn:hover { color: var(--c-fg); border-color: var(--c-border-mid); }
#sort-btn.active { color: var(--c-gold); border-color: var(--c-gold); }

/* feedback CTA in results header */
#feedback-btn {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em;
  color: var(--c-fg-2); background: none; border: 1px solid var(--c-border);
  border-radius: 3px; padding: 2px 10px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#feedback-btn:hover { color: var(--c-fg); border-color: var(--c-border-mid); background: rgba(255,255,255,.03); }
#auto-btn {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em;
  color: var(--c-fg-2); background: none; border: 1px solid var(--c-border);
  border-radius: 3px; padding: 2px 10px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#auto-btn:hover { color: var(--c-fg); border-color: var(--c-border-mid); background: rgba(255,255,255,.03); }

/* ── pipeline strip ──────────────────────────────────────────────── */
.pipeline-strip { display: flex; flex-direction: column; gap: 10px; }
.pipeline-row   { display: flex; align-items: baseline; gap: 16px; }
.stage-text {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--c-fg-3);
}
.pipeline-counts {
  font-family: var(--f-mono); font-size: .62rem; color: var(--c-fg-3);
}
.pipeline-counts span { margin-right: 10px; }
.pipeline-counts .cnt-match { color: var(--c-gold); }

/* ── quality gate banner ─────────────────────────────────────────── */
.quality-gate {
  margin-top: 10px;
  border: 1px solid rgba(212,168,67,.35);
  background: rgba(212,168,67,.08);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.qg-text {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--c-fg-2);
  line-height: 1.4;
}
.qg-actions { display: flex; gap: 8px; flex-shrink: 0; }
#qg-auto-btn, #qg-feedback-btn {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em;
  border-radius: 4px; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--c-border-mid);
  background: var(--c-bg-alt);
  color: var(--c-fg);
}
#qg-auto-btn { border-color: var(--c-gold); }
#qg-auto-btn:hover, #qg-feedback-btn:hover { background: var(--c-bg-inset); }

/* ── advanced (ⓘ) button ─────────────────────────────────────────── */
#adv-btn {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; color: var(--c-fg-3); padding: 0 0 0 6px;
  vertical-align: middle; line-height: 1; transition: color .15s;
}
#adv-btn:hover { color: var(--c-fg-2); }
#adv-btn.active { color: var(--c-gold); }

/* ── query badges ────────────────────────────────────────────────── */
.query-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.query-badge {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--c-border-mid); border-radius: 3px;
  padding: 5px 11px; background: var(--c-bg-alt);
  cursor: pointer; transition: opacity .12s, border-color .12s, background .12s;
}
.query-badge.variant {
  opacity: 0.7;
}
.query-badge.active-filter {
  border-color: var(--c-gold);
  background: var(--c-gold-light);
  box-shadow: 0 0 0 2px rgba(212,168,67,.25);
  opacity: 1;
}
.query-badge:hover { opacity: 1; }
.qlabel {
  font-family: var(--f-mono); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-gold);
}
.query-badge.variant .qlabel { color: var(--c-fg-3); }
.qtext { font-size: .82rem; font-weight: 300; color: var(--c-fg); }

/* ── paper cards ─────────────────────────────────────────────────── */
#papers { display: flex; flex-direction: column; gap: 8px; }
.previous-results {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.previous-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.previous-results-title {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-fg-2);
}
.previous-results-note {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .04em;
  color: var(--c-fg-3);
}
.previous-results-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.previous-results .paper-card {
  opacity: .82;
}
.previous-results .card-toggle {
  cursor: default;
}

.paper-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.paper-card.matched {
  border-left: 3px solid var(--c-gold);
  box-shadow: 0 1px 4px rgba(212,168,67,.12);
}
.paper-card.no-match { opacity: .5; }
.paper-card.pending  { opacity: .35; }

.card-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 14px 16px; display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px; text-align: left; align-items: start;
  border-radius: 6px;
}
.card-toggle:hover { background: var(--c-bg-inset); }

.card-chevron {
  font-family: var(--f-mono); font-size: .6rem; color: var(--c-fg-3);
  padding-top: 4px; justify-self: center; transition: transform .12s;
  user-select: none;
}
.card-chevron.open { transform: rotate(90deg); }

.card-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card-title {
  font-family: var(--f-serif); font-style: italic;
  font-size: .93rem; font-weight: 400; color: var(--c-fg);
  line-height: 1.35;
}
.card-authors {
  font-family: var(--f-sans); font-size: .74rem; font-weight: 300;
  color: var(--c-fg-2);
}
.card-meta {
  font-family: var(--f-sans); font-size: .68rem; color: var(--c-fg-3);
  margin-top: 2px;
}
.theorem-label {
  font-family: var(--f-mono); font-size: .65rem; font-weight: 600;
  background: #1e3a5f; color: #7eb8f7;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.card-arxiv-id {
  font-family: var(--f-mono); font-size: .68rem; color: var(--c-fg-3);
}
.card-substatus {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .04em;
  color: var(--c-fg-3); margin-top: 2px;
}

.card-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 5px; flex-shrink: 0;
}
.card-score {
  font-family: var(--f-mono); font-size: .78rem; font-weight: 500;
  color: var(--c-gold);
}
.card-score.low { color: var(--c-fg-3); font-weight: 400; }
.arxiv-link {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .05em;
  color: var(--c-fg-2); text-decoration: none;
}
.arxiv-link:hover { text-decoration: underline; }

.card-body { padding: 0 16px 14px 50px; }
.snippet-box {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 12px 14px; overflow: hidden;
}
.header-label {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-gold-mid); margin-bottom: 8px;
}
.snippet-raw {
  font-family: var(--f-mono); font-size: .74rem; font-weight: 300;
  color: var(--c-fg); white-space: pre-wrap; line-height: 1.65;
  margin: 0; padding: 0;
}

.card-title.placeholder { color: var(--c-fg-2); }

/* ── attribution chips ───────────────────────────────────────────── */
.card-attr { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.attr-chip {
  font-family: var(--f-mono); font-size: .54rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-fg-3);
  border: 1px solid var(--c-border); border-radius: 2px;
  padding: 2px 6px;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; animation: spin .9s linear infinite; }

/* ── modal ───────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 1000;
}
.modal-card {
  width: min(640px, 100%);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.modal-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-title {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-fg);
}
.modal-x {
  background: none;
  border: 1px solid var(--c-border);
  color: var(--c-fg-2);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.modal-x:hover { color: var(--c-fg); border-color: var(--c-border-mid); }
.modal-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.fb-hint { font-family: var(--f-sans); font-size: .86rem; color: var(--c-fg-2); }
.fb-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-family: var(--f-sans);
  font-size: .82rem;
  color: var(--c-fg);
}
.fb-pill {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
  user-select: none;
}
.fb-pill:hover { border-color: var(--c-border-mid); background: rgba(255,255,255,.03); }
.fb-pill input { transform: translateY(1px); }
#fb-msg {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid var(--c-border-mid);
  border-radius: 6px;
  background: var(--c-bg);
  padding: 10px 12px;
  color: var(--c-fg);
  font-family: var(--f-sans);
  font-size: .9rem;
  outline: none;
}
#fb-msg:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(212,168,67,.15);
}
.fb-actions { display: flex; gap: 10px; }
.btn-primary, #fb-submit {
  font-family: var(--f-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--c-gold); color: #141920;
  border: none; border-radius: 6px; padding: 9px 12px; cursor: pointer;
}
.btn-primary:hover, #fb-submit:hover { background: var(--c-gold-mid); }
.btn-primary:disabled, #fb-submit:disabled { opacity: .6; cursor: default; }
.btn-ghost {
  font-family: var(--f-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: none; color: var(--c-fg-2);
  border: 1px solid var(--c-border);
  border-radius: 6px; padding: 9px 12px; cursor: pointer;
}
.btn-ghost:hover { color: var(--c-fg); border-color: var(--c-border-mid); }
.fb-status { font-family: var(--f-mono); font-size: .66rem; color: var(--c-fg-2); }

@media (max-width: 640px) {
  .fb-cats { grid-template-columns: 1fr; }
  .quality-gate { flex-direction: column; align-items: flex-start; }
  .qg-actions { width: 100%; }
  #qg-show-btn, #qg-feedback-btn { flex: 1; }
}