/* CEV interactive widgets — all classes prefixed .cev- to avoid leakage.
   Mirrors the COTe widget system (static/css/cote.css). */
:root {
  --cev-green: #2e9e5b;   /* clean / coverage            */
  --cev-yellow: #e0b528;  /* overlap (duplicated text)   */
  --cev-red: #d4503e;     /* trespass (scrambled order)  */
  --cev-grey: #8a8f98;    /* missing                     */
  --cev-blue: #3a78c2;    /* OCR error                   */
  --cev-purple: #8a4fbf;  /* interaction                 */
}

.cev-widget {
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  background: rgba(128, 128, 128, 0.05);
}
.cev-widget__title { font-weight: 600; margin: 0 0 0.75rem; }
.cev-widget__hint { font-size: 0.8rem; opacity: 0.7; margin: 0 0 0.75rem; }

.cev-stage { position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.cev-stage__svg { display: block; width: 100%; height: auto; }
.cev-stage__sizer { width: 100%; }

/* Controls (toggle buttons) */
.cev-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.cev-btn {
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.6rem;
  border: 1px solid rgba(128, 128, 128, 0.5); border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer;
}
.cev-btn[aria-pressed="true"] { background: rgba(128, 128, 128, 0.2); }

/* Sliders */
.cev-sliders { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.cev-slider { display: grid; grid-template-columns: 7rem 1fr 2.5rem; align-items: center; gap: 0.6rem; }
.cev-slider label { font-size: 0.8rem; opacity: 0.85; }
.cev-slider input[type="range"] { width: 100%; accent-color: var(--cev-blue); }
.cev-slider output { font-variant-numeric: tabular-nums; font-size: 0.85rem; opacity: 0.8; text-align: right; }

/* Numeric readout */
.cev-readout { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.9rem; font-variant-numeric: tabular-nums; }
.cev-stat { display: flex; flex-direction: column; line-height: 1.1; }
.cev-stat__label { font-size: 0.7rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }
.cev-stat__value { font-size: 1.4rem; font-weight: 600; }
.cev-stat--score .cev-stat__value { font-size: 1.8rem; }
.cev-stat--undefined .cev-stat__value { color: var(--cev-red); }

/* Legend */
.cev-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.75rem; }
.cev-legend__item { display: flex; align-items: center; gap: 0.3rem; }
.cev-swatch { width: 0.9rem; height: 0.9rem; border-radius: 2px; display: inline-block; }

/* The "string CER reads" box in the cer-break widget */
.cev-string {
  margin-top: 0.9rem; padding: 0.6rem 0.75rem; border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.3); background: rgba(128, 128, 128, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem;
  line-height: 1.5; min-height: 2.5rem; word-break: break-word;
}
.cev-string b { font-weight: 400; padding: 0 1px; border-radius: 2px; }
.cev-tok--dup { background: rgba(224, 181, 40, 0.35); }
.cev-tok--scram { background: rgba(212, 80, 62, 0.30); }
.cev-tok--miss { background: rgba(138, 143, 152, 0.30); text-decoration: line-through; opacity: 0.6; }

.cev-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 560px) { .cev-twoup { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .cev-flow path, .cev-bar { transition: none !important; }
}

/* The article is an item in a column flexbox (#main is display:flex) and resolves
   to a shrink-to-fit width that can exceed the container on mobile (then clipped
   by the site's overflow-x:hidden). Force it to fill #main so children shrink to
   fit and handle their own overflow. */
.post-single { width: 100%; min-width: 0; }

/* Keep wide display math and tables from stretching the content column past the
   viewport on narrow screens — they scroll internally instead. */
.post-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.post-body table { display: block; width: max-content; max-width: 100%; overflow: auto; }

/* Real-figure illustrations (shared visual language with .cote-figure). */
.cev-figure { margin: 1.5rem auto; max-width: 620px; }
.cev-figure img {
  display: block; width: 100%; height: auto;
  background: #fff; border-radius: 8px; padding: 0.5rem;
  border: 1px solid rgba(128, 128, 128, 0.25);
}
.cev-figure figcaption {
  margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.75; text-align: center;
}
.cev-figure--photo img { padding: 0; }