/* Recortes RAG v2 — editorial de jornal antigo sobre Bulma
   Conexão Farinha: teal #006970 como cor de ação, Plus Jakarta Sans na UI,
   papel quente + serifadas (Playfair/EB Garamond) no espírito do acervo. */
:root {
  --paper: #f4eee0;
  --paper-deep: #ebe2cc;
  --paper-card: #faf6ea;
  --ink: #221d15;
  --ink-soft: #4a4234;
  --ink-faint: #7d715c;
  --wine: #5f1a1a;
  --wine-bright: #7a2424;
  --teal: #006970;          /* primário Farinha */
  --teal-dark: #004f55;
  --gold: #8a6d3b;
  --gold-bright: #b08a3e;
  --rule: #3a3226;
  --fj: 'Plus Jakarta Sans', sans-serif;      /* UI — Farinha */
  --disp: 'Playfair Display', Georgia, serif; /* display editorial */
  --body: 'EB Garamond', Georgia, serif;      /* corpo editorial */
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 15% 5%, rgba(176, 138, 62, .10), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(0, 105, 112, .05), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(120, 100, 60, .015) 2px 4px);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}

.sheet { max-width: 1080px; margin: 0 auto; padding: 20px 28px 36px; }
.is-hidden { display: none !important; }

/* ── Masthead ───────────────────────────────────────── */
.masthead { text-align: center; }

.mast-top {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 14px;
}

.mast-title {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12;
  letter-spacing: .015em; text-transform: uppercase; color: var(--ink);
}
.mast-title .amp { font-style: italic; font-weight: 400; text-transform: none; color: var(--teal); }

.mast-sub {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-style: italic; font-size: 13.5px; color: var(--ink-soft); margin-top: 8px;
}
.mast-sub .dot { color: var(--gold-bright); font-style: normal; font-size: 10px; }

.mast-nav {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  margin-top: 12px; padding: 7px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--fj); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.mast-nav a { color: var(--ink-soft); text-decoration: none; }
.mast-nav a.is-active, .mast-nav a:hover { color: var(--wine); text-decoration: underline; text-underline-offset: 4px; }

.rule-double { border-top: 1px solid var(--rule); border-bottom: 3px solid var(--rule); height: 5px; margin-top: 14px; }

/* ── Atribuição ─────────────────────────────────────── */
.attribution {
  margin: 18px auto 0; max-width: 880px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  border-left: 3px solid var(--gold); padding: 8px 16px;
  background: linear-gradient(90deg, rgba(138,109,59,.07), transparent 80%);
}
.attribution strong { color: var(--wine); }

/* ── Mesa de consulta ───────────────────────────────── */
.query-desk {
  margin-top: 22px; padding: 16px 18px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  box-shadow: 4px 4px 0 rgba(34,29,21,.16);
}

.query-input {
  width: 100%; font-family: var(--body); font-size: 16px; line-height: 1.5;
  color: var(--ink); background: transparent;
  border: none; border-bottom: 1px dashed rgba(58,50,38,.45);
  resize: vertical; min-height: 52px; outline: none; padding: 4px 2px;
}
.query-input::placeholder { color: var(--ink-faint); font-style: italic; }
.query-input:focus { border-bottom-color: var(--teal); }

.query-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }

/* Abas de modo de consulta */
.mode-tabs { display: flex; gap: 0; margin-top: 14px; border-bottom: 1px solid var(--rule); }
.mode-tab {
  appearance: none; background: transparent; border: none; cursor: pointer;
  font-family: var(--fj); font-weight: 600; font-size: 13px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 14px 9px; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.mode-tab:hover { color: var(--teal); }
.mode-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.mode-tab.is-active { color: var(--wine); border-bottom-color: var(--wine); }
.mode-tab.is-active:hover { color: var(--wine-dark, var(--wine)); }

.button.is-wine {
  background: var(--teal); border-color: var(--teal); color: #fff;
  font-family: var(--fj); font-weight: 700; letter-spacing: .03em;
  box-shadow: 3px 3px 0 rgba(34,29,21,.22);
}
.button.is-wine:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.button.is-wine:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(34,29,21,.22); }

.button.is-ghost {
  background: transparent; border: 1px solid var(--rule); color: var(--ink-soft);
  font-family: var(--fj); font-weight: 600; letter-spacing: .03em;
}
.button.is-ghost:hover { border-color: var(--teal); color: var(--teal); }
.button[disabled] { opacity: .5; }

.desk-meta {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; min-height: 20px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
}
.badge { border: 1px solid var(--rule); padding: 2px 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--paper-deep); }
.badge.hybrid { border-color: var(--teal); color: var(--teal); }
.badge.bm25 { border-color: var(--gold); color: var(--gold); }

/* ── Loading (rotativa de imprensa) ─────────────────── */
.loading { text-align: center; padding: 46px 0 26px; }
.press { display: inline-block; }
.press-line { height: 2px; margin: 7px auto; background: var(--ink); animation: press-roll 1.15s ease-in-out infinite; transform-origin: center; }
.press-line:nth-child(1) { width: 240px; }
.press-line:nth-child(2) { width: 190px; animation-delay: .1s; }
.press-line:nth-child(3) { width: 150px; animation-delay: .2s; }
.press-line:nth-child(4) { width: 110px; animation-delay: .3s; }
.press-line:nth-child(5) { width: 70px; animation-delay: .3s; }
@keyframes press-roll { 0%,100% { opacity:.25; transform: scaleX(.92); } 50% { opacity:1; transform: scaleX(1.05); } }
.loading-msg { margin-top: 14px; font-style: italic; color: var(--ink-soft); }

/* ── Resposta ───────────────────────────────────────── */
.answer {
  margin-top: 30px; padding: 26px 30px 18px;
  background: var(--paper-card); border: 1px solid var(--rule);
  box-shadow: 5px 5px 0 rgba(34,29,21,.14);
  animation: unfold .35s ease-out;
}
@keyframes unfold { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

.answer-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  border-bottom: 3px double var(--rule); padding-bottom: 8px; margin-bottom: 14px;
}
.answer-head h2 { font-family: var(--disp); font-size: 21px; font-weight: 700; color: var(--wine); }
.answer-citations { font-family: var(--mono); font-size: 11px; color: var(--gold); }

.answer-body { font-size: 16.5px; line-height: 1.68; }
.answer-body p { margin-bottom: .9em; text-align: justify; hyphens: auto; }
.answer-body ul { margin: .6em 0 1em 1.4em; }
.answer-body li { margin-bottom: .4em; }
.answer-body strong { color: var(--teal-dark); }

.citation {
  font-family: var(--mono); font-size: .72em; color: var(--teal-dark);
  background: rgba(0,105,112,.08); border: 1px solid rgba(0,105,112,.3);
  border-radius: 2px; padding: 1px 6px 2px; white-space: nowrap;
  cursor: pointer; vertical-align: 2px;
}
.citation:hover { background: rgba(0,105,112,.18); }

.answer-note {
  margin-top: 14px; font-size: 13px; font-style: italic; color: var(--ink-faint);
  border-top: 1px solid rgba(58,50,38,.25); padding-top: 10px;
}
.answer-note code { font-family: var(--mono); font-size: 11px; }

/* ── Recortes recuperados ───────────────────────────── */
.results { margin-top: 28px; }
.results-head {
  font-family: var(--disp); font-size: 20px; font-weight: 700; color: var(--wine);
  border-bottom: 3px double var(--rule); padding-bottom: 7px; margin-bottom: 16px;
}

#results-list .column { display: flex; }
.doc {
  width: 100%;
  background: var(--paper-card); border: 1px solid var(--rule);
  box-shadow: 3px 3px 0 rgba(34,29,21,.12);
  padding: 18px 20px 14px; scroll-margin-top: 20px;
  transition: box-shadow .15s ease;
}
.doc:hover { box-shadow: 5px 6px 0 rgba(34,29,21,.18); }
.doc.flash { animation: flash-target 1.8s ease-out; }
@keyframes flash-target { 0% { background: rgba(0,105,112,.25); } 100% { background: var(--paper-card); } }

.doc-id { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; }
.doc-title { font-family: var(--disp); font-size: 17.5px; font-weight: 700; line-height: 1.28; margin: 5px 0 4px; }
.doc-title .cite-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--teal-dark); }
.doc-sub { font-style: italic; color: var(--ink-soft); font-size: 14px; margin-bottom: 7px; }
.doc-body { font-size: 14.5px; line-height: 1.55; text-align: justify; }
/* clamp universal por altura: 6 linhas × 1.55 × 14.5px ≈ 134.65px */
.doc-body.clamp { max-height: 134px; overflow: hidden; position: relative; }
.doc-body.clamp::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 26px; background: linear-gradient(rgba(250,246,234,0), var(--paper-card)); }
.doc-more {
  font-family: var(--body); font-size: 14px; background: none; border: none;
  color: var(--teal-dark); cursor: pointer; padding: 6px 0 0;
  text-decoration: underline; text-underline-offset: 3px;
}

.doc-entities { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(58,50,38,.25); }
.entity-line { margin-bottom: 5px; font-size: 13.5px; }
.entity-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); margin-right: 6px; }
.entity-val { color: var(--ink-soft); }

.doc-score { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.score-bar { height: 3px; background: var(--paper-deep); margin-top: 4px; }
.score-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--wine)); transition: width .4s ease; }

/* ── Abstinência / erro ─────────────────────────────── */
.abstain {
  margin-top: 26px; padding: 18px 22px;
  border: 1px dashed var(--wine); background: rgba(95,26,26,.05); font-size: 15px;
}
.abstain-title { font-family: var(--disp); font-size: 17px; font-weight: 700; color: var(--wine); margin-bottom: 4px; }

.error-box {
  margin-top: 26px; padding: 16px 20px;
  border: 1px solid var(--wine); border-left: 5px solid var(--wine);
  background: rgba(95,26,26,.08); color: var(--wine); font-size: 14.5px;
}

/* ── Colofão ────────────────────────────────────────── */
.colophon { margin-top: 38px; text-align: center; color: var(--ink-soft); }
.colophon p { font-size: 12.5px; margin-top: 10px; }
.colophon a { color: var(--teal-dark); }
.footer-fine { font-style: italic; font-size: 11.5px !important; color: var(--ink-faint); }

/* ── Responsivo ─────────────────────────────────────── */
@media (max-width: 860px) {
  .sheet { padding: 14px 12px 30px; }
  .answer-body p { text-align: left; }
  .query-actions .button { width: 100%; }
  .mode-tab { flex: 1 1 50%; text-align: center; padding: 8px 8px 9px; }
}
/* zoom do navegador <100% reduz clamp(); garantir piso legível em telas grandes reais */
@media (min-width: 1600px) {
  body { font-size: 17px; }
  .mast-title { font-size: clamp(30px, 2.6vw, 44px); }
}
@media (max-width: 1023px) {
  #results-list .column.is-half { width: 100%; }
}