/* ============================================================================
   PlagLab — Similarity Report, reimagined in a clean Turnitin-grade layout.
   A calm two-pane reader: the manuscript on the left with matched text marked,
   a similarity/sources panel on the right. Self-contained, light surface, so it
   reads the same in either site theme. The dense forensic detail still exists —
   it's folded into a "full report" drawer, not shown by default.
   ========================================================================== */
#tii-report{
  --ti-ink:#1b2733; --ti-soft:#5b6b78; --ti-mut:#8a97a3;
  --ti-line:#e4e8ec; --ti-bg:#f4f6f8; --ti-panel:#fff;
  --ti-teal:#134e4a; --ti-blue:#1f6feb; --ti-red:#e0463c;
  --ti-red-soft:rgba(224,70,60,.16); --ti-red-strong:rgba(224,70,60,.30);
  --ti-blue-soft:rgba(31,111,235,.15);
  --ti-disp:"Poppins",-apple-system,Segoe UI,Roboto,sans-serif;
  --ti-body:"Inter",-apple-system,Segoe UI,Roboto,sans-serif;
  --ti-mono:"IBM Plex Mono",ui-monospace,monospace;
  background:var(--ti-panel); color:var(--ti-ink); font-family:var(--ti-body);
  border:1px solid var(--ti-line); border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(20,40,60,.35); margin-bottom:1.4rem;
}
/* the legacy forensic layout is hidden by default; the drawer reveals it */
#view-report .report-head{ display:none; }
#tiiLegacy[hidden]{ display:none; }

/* ── top bar: filename · Similarity / AI tabs · download ─────────────── */
.tii-top{ display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem;
  border-bottom:1px solid var(--ti-line); background:var(--ti-panel); }
.tii-brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--ti-disp);
  font-weight:700; font-size:.95rem; color:var(--ti-teal); }
.tii-brand .dot{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  background:var(--ti-teal); color:#fff; font-size:.8rem; }
.tii-file{ font-size:.9rem; color:var(--ti-soft); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:32ch; }
.tii-tabs{ display:flex; gap:.2rem; margin:0 auto; }
.tii-tab{ border:none; background:none; cursor:pointer; font-family:var(--ti-body);
  font-size:.92rem; font-weight:600; color:var(--ti-soft); padding:.55rem .9rem;
  border-bottom:2.5px solid transparent; transition:.15s; display:flex; gap:.45rem; align-items:center; }
.tii-tab b{ font-weight:700; color:var(--ti-ink); }
.tii-tab:hover{ color:var(--ti-ink); }
.tii-tab.on{ color:var(--ti-blue); border-bottom-color:var(--ti-blue); }
.tii-tab.on b{ color:var(--ti-blue); }
.tii-actions{ display:flex; align-items:center; gap:.4rem; }
.tii-icon{ width:36px; height:36px; border-radius:9px; border:1px solid var(--ti-line);
  background:var(--ti-panel); color:var(--ti-soft); cursor:pointer; display:grid; place-items:center;
  font-size:1rem; text-decoration:none; transition:.15s; }
.tii-icon:hover{ border-color:var(--ti-blue); color:var(--ti-blue); }

/* ── body: document | panel ──────────────────────────────────────────── */
.tii-body{ display:grid; grid-template-columns:minmax(0,1fr) 380px; align-items:stretch; }
@media(max-width:900px){ .tii-body{ grid-template-columns:1fr; } }

.tii-docwrap{ background:var(--ti-bg); padding:1.6rem clamp(1rem,3vw,2.2rem); min-height:60vh;
  max-height:82vh; overflow:auto; }
.tii-doc{ background:#fff; border:1px solid var(--ti-line); border-radius:10px;
  padding:clamp(1.4rem,3vw,2.6rem); max-width:760px; margin:0 auto; box-shadow:0 2px 10px rgba(20,40,60,.05);
  font-size:1rem; line-height:1.95; color:#24313d; }
.tii-doc .tii-hit{ background:var(--ti-red-soft); border-radius:2px; box-shadow:inset 0 -1px 0 rgba(224,70,60,.4); }
.tii-doc .tii-hit.verbatim{ background:var(--ti-red-strong); }
.tii-doc .tii-mk{ font-size:.62em; font-weight:700; color:#fff; background:var(--ti-red);
  border-radius:4px; padding:.05em .4em; margin:0 .25em 0 .1em; vertical-align:middle; line-height:1;
  position:relative; top:-.15em; }
.tii-doc.show-ai .tii-hit{ background:transparent; box-shadow:none; }
.tii-doc.show-ai .tii-hit .tii-mk{ display:none; }
.tii-doc .tii-ai{ background:transparent; }
.tii-doc.show-ai .tii-ai{ background:var(--ti-blue-soft); border-radius:2px; box-shadow:inset 0 -1px 0 rgba(31,111,235,.4); }
.tii-docfoot{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem;
  font-family:var(--ti-mono); font-size:.72rem; color:var(--ti-mut); }

/* ── right panel ─────────────────────────────────────────────────────── */
.tii-panel{ border-left:1px solid var(--ti-line); background:var(--ti-panel);
  display:flex; flex-direction:column; max-height:82vh; }
@media(max-width:900px){ .tii-panel{ border-left:none; border-top:1px solid var(--ti-line); max-height:none; } }
.tii-overall{ padding:1.1rem 1.15rem .9rem; border-bottom:1px solid var(--ti-line);
  display:flex; align-items:center; gap:.6rem; }
.tii-overall .pct{ font-family:var(--ti-disp); font-weight:800; font-size:1.7rem; letter-spacing:-.02em;
  color:var(--ti-red); }
.tii-overall .lbl{ font-weight:600; font-size:1.02rem; }
.tii-overall .filter{ margin-left:auto; border:1px solid var(--ti-line); background:var(--ti-panel);
  border-radius:9px; padding:.4rem .7rem; font-size:.8rem; font-weight:600; color:var(--ti-soft);
  cursor:pointer; display:flex; align-items:center; gap:.35rem; }
.tii-overall.low .pct{ color:var(--ti-teal); }
.tii-overall.mid .pct{ color:#c77b1a; }

/* Match Groups | Sources segmented control */
.tii-seg{ display:flex; gap:.3rem; padding:.7rem .9rem; }
.tii-seg button{ flex:1; border:1px solid var(--ti-line); background:var(--ti-bg); cursor:pointer;
  padding:.55rem; border-radius:9px; font-family:var(--ti-body); font-weight:600; font-size:.85rem;
  color:var(--ti-soft); transition:.15s; }
.tii-seg button.on{ background:var(--ti-blue); color:#fff; border-color:var(--ti-blue);
  box-shadow:0 6px 14px -8px var(--ti-blue); }

.tii-scroll{ overflow:auto; padding:.4rem .9rem 1rem; }

/* match groups */
.tii-grp-note{ font-size:.78rem; color:var(--ti-mut); background:var(--ti-bg); border:1px solid var(--ti-line);
  border-radius:9px; padding:.6rem .7rem; margin:.3rem 0 .7rem; }
.tii-grp{ display:flex; align-items:center; gap:.7rem; padding:.7rem .3rem; border-bottom:1px solid var(--ti-line); }
.tii-grp:last-child{ border-bottom:none; }
.tii-grp .gi{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none;
  font-size:.9rem; background:var(--ti-red-soft); color:var(--ti-red); }
.tii-grp .gi.muted{ background:var(--ti-bg); color:var(--ti-mut); }
.tii-grp .gn{ flex:1; }
.tii-grp .gn b{ display:block; font-size:.88rem; font-weight:600; }
.tii-grp .gn small{ font-size:.74rem; color:var(--ti-mut); }
.tii-grp .gc{ font-family:var(--ti-mono); font-weight:600; font-size:.9rem; }
.tii-grp .gp{ min-width:3ch; text-align:right; font-weight:700; font-size:.9rem; }

/* source cards */
.tii-src{ border:1px solid var(--ti-line); border-radius:11px; margin-bottom:.6rem; overflow:hidden;
  background:var(--ti-panel); }
.tii-src-head{ width:100%; display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; cursor:pointer;
  background:none; border:none; text-align:left; font-family:var(--ti-body); }
.tii-src-head:hover{ background:var(--ti-bg); }
.tii-src-n{ width:26px; height:26px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:var(--ti-red); color:#fff; font-weight:700; font-size:.82rem; }
.tii-src-main{ flex:1; min-width:0; }
.tii-src-tag{ display:inline-block; font-family:var(--ti-mono); font-size:.6rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ti-teal); background:rgba(19,78,74,.09); border-radius:4px;
  padding:.08rem .4rem; margin-bottom:.2rem; }
.tii-src-title{ display:block; font-size:.86rem; font-weight:600; color:var(--ti-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tii-src-sub{ display:block; font-size:.72rem; color:var(--ti-mut); margin-top:.1rem; }
.tii-src-pct{ font-weight:800; font-size:1rem; color:var(--ti-red); font-family:var(--ti-disp); }
.tii-src-caret{ color:var(--ti-mut); font-size:.7rem; transition:transform .2s; }
.tii-src.open .tii-src-caret{ transform:rotate(180deg); }
.tii-src-body{ display:none; padding:.2rem .8rem .8rem; border-top:1px solid var(--ti-line); }
.tii-src.open .tii-src-body{ display:block; }
.tii-pair{ background:var(--ti-bg); border:1px solid var(--ti-line); border-radius:8px; padding:.55rem .65rem;
  margin-top:.5rem; font-size:.8rem; line-height:1.5; color:#3a4753; }
.tii-pair .who{ font-family:var(--ti-mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ti-mut); margin-bottom:.15rem; }
.tii-src-link{ display:inline-block; margin-top:.5rem; font-size:.76rem; font-weight:600; color:var(--ti-blue); }
.tii-empty{ text-align:center; color:var(--ti-mut); font-size:.85rem; padding:2rem 1rem; }

/* AI pane */
.tii-ai-pane{ padding:1rem .9rem; }
.tii-ai-big{ text-align:center; padding:1.2rem 1rem 1rem; }
.tii-ai-big .n{ font-family:var(--ti-disp); font-weight:800; font-size:2.6rem; color:var(--ti-blue); line-height:1; }
.tii-ai-big .l{ font-size:.85rem; color:var(--ti-soft); margin-top:.3rem; }
.tii-ai-band{ text-align:center; font-weight:600; font-size:.9rem; margin:.2rem 0 1rem; }
.tii-ai-note{ font-size:.8rem; color:var(--ti-soft); line-height:1.55; background:var(--ti-bg);
  border:1px solid var(--ti-line); border-radius:9px; padding:.7rem .8rem; }

/* remediation call-to-action inside the panel */
.tii-rem{ margin:.2rem .9rem 1rem; border:1px solid rgba(19,78,74,.25); background:rgba(19,78,74,.05);
  border-radius:11px; padding:.85rem .9rem; }
.tii-rem b{ display:block; font-family:var(--ti-disp); font-size:.9rem; color:var(--ti-teal); margin-bottom:.15rem; }
.tii-rem p{ font-size:.78rem; color:var(--ti-soft); margin:0 0 .6rem; line-height:1.5; }
.tii-rem button{ width:100%; border:none; border-radius:9px; padding:.6rem; cursor:pointer;
  background:var(--ti-teal); color:#fff; font-family:var(--ti-disp); font-weight:600; font-size:.85rem;
  transition:.15s; }
.tii-rem button:hover{ filter:brightness(1.1); }

/* the "full forensic report" drawer toggle */
.tii-legacy-toggle{ display:block; width:100%; margin:0 0 1.4rem; border:1px dashed var(--line,#e4e8ec);
  background:transparent; border-radius:12px; padding:.8rem; cursor:pointer; color:var(--ink-soft,#5b6b78);
  font-family:"Poppins",sans-serif; font-weight:600; font-size:.85rem; transition:.15s; }
.tii-legacy-toggle:hover{ border-color:var(--ti-teal); color:var(--ti-teal); }

@media(max-width:900px){
  .tii-file{ display:none; }
  .tii-docwrap{ max-height:none; }
}