/* styles/theme/pinboard/listing-report.css
 * ══════════════════════════════════════════════════════════════════
 * FICHE RÉSULTAT "LISTING MATRICIEL" (handoff "New Paris" §03,
 * results.jsx → ResultV4). Caisson métal sombre + papier imprimante
 * continu avec perforations rondes aux bords, typo DM Mono pour le
 * rapport, score Oswald rouge géant, barre [████░░░░] + verdict
 * tamponné rouge en cartouche.
 *
 * Préfixe exclusif : .lr-* (listing report).
 * Compat : utilisé par .trace-score.listing-report, conserve les IDs
 * existants (#traceScoreN, #traceScoreLineLbl, #traceScoreMsg, etc.)
 * pour que src/ui/trace-mode.js continue à fonctionner.
 * ══════════════════════════════════════════════════════════════════ */

.pinboard-theme .listing-report{
  width:500px; max-width:calc(100vw - 32px);
  padding:14px;
  border:1px solid #000;
  background:linear-gradient(180deg, #2a2d30 0%, #14171b 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.6);
  font-family:'Space Grotesk','Inter',sans-serif;
  /* 4 vis aux coins (mêmes radial-gradients que les autres plaques) */
  background-image:
    radial-gradient(circle at 13px 13px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 13px) 13px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at 13px calc(100% - 13px), #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #8b8679 0%, #4a463d 55%, transparent 60%),
    linear-gradient(180deg, #2a2d30 0%, #14171b 100%);
  background-size:10px 10px, 10px 10px, 10px 10px, 10px 10px, auto;
  background-position:8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ─── PAPIER IMPRIMANTE ─────────────────────────────────── */
.pinboard-theme .lr-paper{
  position:relative;
  padding:20px 36px 22px;   /* marge plus large à gauche/droite pour accueillir les perforations */
  background:#f6f0dc;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 22px,
      rgba(10,20,40,.04) 22px 23px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  color:#1a1410;
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:12px; letter-spacing:1.2px;
  line-height:1.83;
}

/* Perforations latérales : colonnes de 10 trous ronds noirs */
.pinboard-theme .lr-perf{
  position:absolute;
  top:0; bottom:0;
  width:10px;
  background-image:radial-gradient(circle at 50% 50%,
    #14171b 0 3px,
    transparent 3.5px);
  background-repeat:repeat-y;
  background-size:10px 32px;
  background-position:center 10px;
  pointer-events:none;
}
.pinboard-theme .lr-perf-left{  left:8px; }
.pinboard-theme .lr-perf-right{ right:8px; }

/* ─── RANGÉES DE TEXTE ─────────────────────────────────── */
.pinboard-theme .lr-row{
  display:block;
  white-space:pre-wrap;
}
.pinboard-theme .lr-row-head{
  display:flex; justify-content:space-between;
  padding-bottom:4px; margin-bottom:8px;
  border-bottom:1px dashed #6d6a63;
}
.pinboard-theme .lr-row-foot{
  display:flex; justify-content:space-between;
  margin-top:12px; padding-top:4px;
  font-size:10px; opacity:.6;
}
.pinboard-theme .lr-divider{
  margin-top:8px; padding-top:8px;
  margin-bottom:4px;
  border-top:1px dashed #6d6a63;
}
.pinboard-theme .lr-row-line{
  display:flex; align-items:center; gap:8px;
}

/* Badge ligne à côté de "LIGNE ..." : #traceScoreLineLbl reçoit un
 * HTML (chip rond + nom) via trace-mode.js. On force le chip à être
 * une pastille 18×18 compacte, cohérente avec le texte monospace. */
.pinboard-theme .lr-line-badge{ display:inline-flex; align-items:center; gap:8px; }
.pinboard-theme .lr-line-badge .chip{
  width:18px !important; height:18px !important;
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:10px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.25),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 1px 1px rgba(0,0,0,.4);
  border:1px solid rgba(0,0,0,.3);
}
.pinboard-theme .lr-line-badge .trace-mission-linename,
.pinboard-theme .lr-line-badge > span:not(.chip){
  font-family:'DM Mono',monospace;
  font-size:12px; letter-spacing:1.2px;
  color:#1a1410;
}

/* ─── BLOC SCORE : gros chiffre rouge + barre + verdict ─── */
.pinboard-theme .lr-score-row{
  display:flex; align-items:flex-end; gap:14px;
  /* Écran étroit : la barre ASCII (22 chars nowrap) + verdict passent
   * SOUS le chiffre au lieu de déborder du papier (cf. min-width du
   * .lr-score-side). Aucun effet tant que la place suffit. */
  flex-wrap:wrap; row-gap:4px;
  margin-top:10px; padding-top:10px;
  border-top:1px dashed #6d6a63;
}
.pinboard-theme .lr-score-main{ flex:0 0 auto; }
.pinboard-theme .lr-score-kicker{
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:2px;
  opacity:.65;
  text-transform:uppercase;
}
.pinboard-theme .lr-score-val{
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700;
  font-size:84px;
  line-height:.85;
  color:#c13a2e;
  letter-spacing:1px;
}
.pinboard-theme .lr-score-unit{
  font-size:22px; opacity:.55;
}
.pinboard-theme .lr-score-side{
  flex:1; padding-bottom:4px;
  display:flex; flex-direction:column; gap:6px;
  /* Plancher = largeur de la barre ASCII : en dessous, le bloc wrappe
   * sous le chiffre (cf. flex-wrap du .lr-score-row) au lieu d'écraser. */
  min-width:160px;
}
.pinboard-theme .lr-score-bar{
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:11px; letter-spacing:1px;
  color:#6d6a63;
  white-space:nowrap;
}
.pinboard-theme .lr-score-verdict{
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:18px;
  letter-spacing:1.2px;
  color:#c13a2e;
  border:2px solid #c13a2e;
  padding:4px 10px;
  display:inline-block;
  align-self:flex-start;
  transform:rotate(-2deg);
  text-transform:uppercase;
  line-height:1.1;
  max-width:100%;
}

/* Variantes selon le tier pour que la couleur du score/verdict
 * reflète la performance (rouge = insuffisant par défaut). */
.pinboard-theme .listing-report[data-tier="s"] .lr-score-val,
.pinboard-theme .listing-report[data-tier="s"] .lr-score-verdict{
  color:#0f8a3d; border-color:#0f8a3d;
}
.pinboard-theme .listing-report[data-tier="a"] .lr-score-val,
.pinboard-theme .listing-report[data-tier="a"] .lr-score-verdict{
  color:#1f8a2a; border-color:#1f8a2a;
}
.pinboard-theme .listing-report[data-tier="b"] .lr-score-val,
.pinboard-theme .listing-report[data-tier="b"] .lr-score-verdict{
  color:#d89623; border-color:#d89623;
}
.pinboard-theme .listing-report[data-tier="c"] .lr-score-val,
.pinboard-theme .listing-report[data-tier="c"] .lr-score-verdict{
  color:#d96b2b; border-color:#d96b2b;
}
.pinboard-theme .listing-report[data-tier="d"] .lr-score-val,
.pinboard-theme .listing-report[data-tier="d"] .lr-score-verdict{
  color:#c13a2e; border-color:#c13a2e;
}

/* Bouton "Manche suivante" : en-dehors du papier, dans le caisson
 * métal, posé à droite comme un CTA industriel. */
.pinboard-theme .listing-report .trace-score-next{
  margin:12px 0 0 auto;
  display:flex;
}

/* Animation d'apparition "fiche imprimée qui sort de la machine" */
.pinboard-theme .listing-report.show{
  animation:lr-print .55s cubic-bezier(.22,.9,.25,1) both;
}
@keyframes lr-print{
  0%  { transform:translateY(-30px) scaleY(.5); opacity:0; transform-origin:top; }
  60% { transform:translateY(4px)   scaleY(1);   opacity:1; }
  100%{ transform:translateY(0)     scaleY(1);   opacity:1; }
}

/* Sortie : la fiche est tirée hors cadre, plus rapide que l'entrée
 * (260ms vs 550ms) — règle Emil : les exits sont snap. */
.pinboard-theme .listing-report.is-leaving{
  animation:lr-print-out .26s cubic-bezier(.4,0,.7,0) both;
  transform-origin:top;
}
@keyframes lr-print-out{
  0%  { transform:translateY(0)     scaleY(1) rotate(0); opacity:1; }
  100%{ transform:translateY(-22px) scaleY(.7) rotate(-1.5deg); opacity:0; }
}