/* ============================================================
   Juego limpio — lo propio del panel, encima de las ds-*.
   ------------------------------------------------------------
   Nació con el prefijo `fp-`, que ya era de Featured Promotions:
   `.fp-card` de featured.css fija min/max-width en 220px y el
   panel nunca sobreescribía el ancho, así que cada aviso salía
   en una columna de 220px con el texto a una palabra por línea.
   De ahí el prefijo `jl-` (juego limpio), que no lo usa nadie.

   Lo que resuelven .ds-card, .ds-person, .ds-badge, .ds-stat o
   .ds-note NO se repite aquí. Esto es sólo la ficha de un aviso:

     · jl-cases  — la lista
     · jl-case   — la ficha, con franja de color por gravedad
     · jl-prob   — la probabilidad que calculó el modelo
     · jl-facts  — los datos duros de la partida
     · jl-times  — los tiempos de respuesta, uno por pregunta

   Los colores salen de los tokens del tema; el modo oscuro
   (negro neutro) no necesita ni una regla extra.
   ============================================================ */

/* ── Lista ───────────────────────────────────────────────────
   Gap propio en vez del `.ds-card + .ds-card` de la suite, que
   aquí dejaba el primer hueco distinto de los demás. */
.jl-cases {
  display: flex;
  flex-direction: column;
  gap: var(--ds-4);
}

.jl-cases .ds-card + .ds-card { margin-top: 0; }

/* ── Ficha de un aviso ───────────────────────────────────────
   La franja de la izquierda dice la gravedad sin leer nada:
   ámbar mientras es un aviso, rojo cuando cerró la cuenta,
   verde cuando ya se perdonó. Misma idea que .ds-stat. */
.jl-case {
  position: relative;
  overflow: hidden;
  --jl-accent: var(--orange);
}

.jl-case::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--jl-accent);
}

.jl-case--sev { --jl-accent: var(--rose); }
.jl-case--forgiven { --jl-accent: var(--green); }

.jl-case__body { padding: var(--ds-5) var(--ds-5) var(--ds-5) var(--ds-6); }

/* Identidad a la izquierda, probabilidad a la derecha. El
   min-width:0 es lo que deja que el nombre largo se recorte en
   vez de empujar la probabilidad fuera de la tarjeta. */
.jl-case__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-4);
}

.jl-case__who { min-width: 0; flex: 1; }

.jl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--ds-2);
}

/* ── Probabilidad ────────────────────────────────────────────
   El número del modelo, no un veredicto: por eso lleva su
   etiqueta debajo y se apaga cuando el aviso ya se perdonó. */
.jl-prob {
  text-align: right;
  flex: none;
}

.jl-prob__value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
}

.jl-prob__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

.jl-case--forgiven .jl-prob__value { color: var(--text-muted); }

/* ── Datos de la partida ─────────────────────────────────────
   Rejilla con celdas de ancho mínimo: aunque el panel se
   angoste, cada dato conserva su renglón en vez de partirse. */
.jl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--ds-3) var(--ds-4);
  margin-top: var(--ds-4);
  padding-top: var(--ds-4);
  border-top: 1px solid var(--border);
}

.jl-fact__k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.jl-fact__v {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.jl-fact__v--warn { color: var(--orange); }

/* ── Tiempos de respuesta ────────────────────────────────────
   La única señal que de verdad separa, cruda y en orden, para
   que el admin juzgue por su cuenta en vez de creerle al número.
   En rojo las que bajan de 1.5 s, que es el umbral del modelo. */
.jl-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--ds-4);
}

.jl-t {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: var(--ds-sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: var(--ds-r-sm);
  font-variant-numeric: tabular-nums;
}

.jl-t--fast {
  background: var(--rose-soft);
  border-color: transparent;
  color: var(--rose);
  font-weight: 700;
}

/* ── Pie de la ficha ─────────────────────────────────────────
   Cuándo se le avisó al jugador y el botón de perdonar, que es
   la vía de apelación real y por eso vive fijo aquí abajo. */
.jl-case__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-3);
  flex-wrap: wrap;
  padding: var(--ds-3) var(--ds-5);
  border-top: 1px solid var(--border);
  background: var(--ds-sunken);
}

.jl-when {
  font-size: 11.5px;
  color: var(--text-muted);
}

.jl-when--ok {
  color: var(--green);
  font-weight: 650;
}

@media (max-width: 640px) {
  .jl-case__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-3);
  }

  .jl-prob { text-align: left; }

  .jl-case__foot { align-items: flex-start; }
  .jl-case__foot .ds-btn { width: 100%; justify-content: center; }
}