/* strcomp.css — comparaison lexicographique — dark mode */


/* ── Titre ── */
.strcomp-widget .sc-title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a5068;
  margin-bottom: 1rem;
}

/* ── Inputs ── */
.strcomp-widget .sc-inputs {
    display: flex;
    width:10rem;
    flex-direction:column;
    align-items: left;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.strcomp-widget .sc-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.strcomp-widget .inbox{
    font-style:normal;
    font-family: "JetBrains mono",monospace;
    font-size:1rem;
}

/* ── Slider vitesse ── */
.strcomp-widget .sc-speed {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-size: 100%;
  color: #DDD;
  justify-content:center;
}


.strcomp-widget .sc-buttons {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* ── Slider taille ── */
.strcomp-widget .sc-speed input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 3px;
  background: #2a2d3a;
  border-radius: 2px;
  outline: none;
}

.strcomp-widget .sc-speed input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4a5aff;
  cursor: pointer;
}

.strcomp-widget .sc-speed .sc-speed-val {
  color: #6b7a99;
  min-width: 3.2rem;
}

/* ── Zone d'affichage des mots lettre par lettre ── */
.strcomp-widget .sc-words {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  min-height: 3.2rem;
}

.strcomp-widget .sc-word-row {
  display: flex;
  align-items: center;
  gap: 0.18rem;
}

.strcomp-widget .sc-word-label {
    font-size: 100%;
    font-family:teX;
    font-style:italic;    
    color: #CCC;
    width: 1.5rem;
    text-align: right;
    margin-right: 0.4rem;
    flex-shrink: 0;
}

/* Chaque lettre = une cellule */
.strcomp-widget .sc-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: #181b26;
  border: 1px solid #2a2d3a;
  font-size: 1rem;
  font-style:normal;
  font-family:"JetBrains mono";
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
  color: #8892a8;
}

/* Lettre en cours de comparaison (i actif) */
.strcomp-widget .sc-letter.active {
  background: #1e2a50;
  border-color: #4a5aff;
  color: #c8d0ff;
  transform: scale(1.12);
}

/* Lettres déjà égales (parcourues) */
.strcomp-widget .sc-letter.matched {
  background: #152b1e;
  border-color: #2a7a4a;
  color: #5dcc88;
}

/* Lettre divergente — u[i] ≠ v[i] */
.strcomp-widget .sc-letter.diff {
  border-color: #ff5566;
  color: #ff8899;
  background: #2b1520;
  animation: sc-pulse 0.35s ease;
}

@keyframes sc-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1.08); }
}

/* Préfixe (l'un des mots est fini) */
.strcomp-widget .sc-letter.prefix-end {
  border-color: #f5a623;
  color: #f5c06a;
  background: #2b2010;
}

/* ── Résultat ── */
.strcomp-widget .sc-result {
  min-height: 1.8rem;
  text-align: center;
  font-size: 100%;
  font-style:normal;
  letter-spacing: 0.06em;
  color: #4a5068;
  transition: color 0.3s;
}

.strcomp-widget .sc-result.res-lt { color: #ff8899; }
.strcomp-widget .sc-result.res-eq { color: #5dcc88; }
.strcomp-widget .sc-result.res-gt { color: #7bbfff; }

/* ── Message d'état (TQ / SI …) ── */
.strcomp-widget .sc-status {
    font-size: 100%;
    color: #8CF;
    text-align: center;
    min-height: 1.1rem;
    margin-top: 0.2rem;
    transition: color 0.2s;
}

.strcomp-widget .sc-status.active-msg { color: #5d6a9a; }

/* Affichage de l'indice i sous la case active */
.strcomp-widget .sc-letter {
  position: relative;
}

.strcomp-widget .sc-letter.active::after {
  content: attr(data-i);
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #8892a8;
  pointer-events: none;
}