app/web/base.css

/* Cards for paragraphs */
/* Styles for paragraph cards: border, padding, rounded corners, margin, white background, subtle shadow */
.para-box {
  border: 1px solid #adb5bd;
  padding: 12px;
  border-radius: 12px;
  margin: 12px 0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Paragraph header: small font, gray color, bottom margin */
.para-head {
  font-size: 12px; /* smaller font size */
  color: #667085; /* gray color */
  margin-bottom: 6px; /* space below header */
}

/* Claim spans */
/* Highlighted claim spans: relative positioning, small horizontal padding, rounded corners, pointer cursor */
.hl {
  position: relative;
  padding: 0 3px;
  border-radius: 5px;
  cursor: pointer;
}
/* Dashed outline on hover for claim spans */
.hl:hover {
  outline: 1px dashed #888;
}

/* NLI palette (soft) */
/* Background colors for NLI labels: entailment (green), neutral (blue), contradiction (red) */
.hl.entailment {
  background: rgba(34, 197, 94, 0.18);
}
.hl.neutral {
  background: rgba(59, 130, 246, 0.18);
}
.hl.addition {
  background: rgba(59, 130, 246, 0.18);
}
.hl.contradiction {
  background: rgba(244, 63, 94, 0.18);
}
/* When an addition is shown with delta tokens, we softly wash it green (entailment feel) */
.hl.as-entailment {
  background: rgba(34, 197, 94, 0.18) !important;
}

/* Explicit contradiction terms highlight */
/* Highlight for contradiction terms: yellow background, small padding, rounded corners */
.contra-term {
  background: #fff59a;
  padding: 0 2px;
  border-radius: 4px;
}

/* Selection and dimming */
/* Selected claim span: solid outline, inner shadow */
.hl.selected {
  outline: 2px solid #111;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) inset;
}
/* Dimmed claim span: reduced saturation and brightness */
.hl.dimmed {
  filter: saturate(0.3) brightness(0.95);
}
/* Stronger, visible dimming in the left pane */
#left_pane .hl.dimmed {
  opacity: 0.35;
  filter: grayscale(0.25) saturate(0.2) brightness(0.85);
  transition:
    opacity 0.12s ease,
    filter 0.12s ease;
}
/* Right-pane dimming (light, but visible). Keep anchor/mate bright. */
#right_pane .hl.dimmed {
  opacity: 0.5;
  filter: grayscale(0.1) saturate(0.4) brightness(0.9);
  transition:
    opacity 0.12s ease,
    filter 0.12s ease;
}
/* Force-anchor highlight (keeps existing background; add colored brackets) */
.hl.anchor-hl {
  outline: 2px solid var(--anchor-color, #16a34a) !important;
}
.anchor-inline {
  padding: 0 2px;
  border-radius: 4px;
}

/* Simple badge */
/* Badge styles: inline-block, small padding, fully rounded, small font */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 9999px;
  font-size: 11px;
}
/* Danger badge: light red background, dark red text */
.badge-danger {
  background: #fee2e2;
  color: #b91c1c;
}
/* Info badge: light blue background, dark blue text */
.badge-info {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Hide Gradio’s default block padding around HTML blocks for tighter stacking */
/* Remove default Gradio padding for HTML blocks in left and right panes */
#left_pane .gr-html,
#right_pane .gr-html {
  padding: 0 !important;
}

/* Reasoning title */
/* Reasoning block title: no top margin, bottom margin, bold font */
#reason_box h3 {
  margin: 0 0 8px 0;
  font-weight: 700;
}