/* The Trend board.
 *
 * Cards, not a table. Each row is an argument -- a strip, a matchup, a reason
 * -- and an argument spread across eight columns is read as eight numbers.
 */
.trend-list { display: grid; gap: var(--s3); padding-bottom: var(--s6); }

.tr-card {
  display: grid; gap: var(--s2);
  padding: var(--s3);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card);
  cursor: pointer;
}
.tr-card:hover { border-color: var(--line-2); }
.tr-skel { height: 118px; cursor: default; opacity: 0.5; }

/* A suppressed row keeps its place and stops recommending. It is dimmed
   rather than hidden, because "we looked at this and decline to call it" is
   information and deleting it silently is not. */
.tr-off { opacity: 0.62; }

.tr-top { display: flex; align-items: center; gap: var(--s2); }
.tr-who {
  display: flex; align-items: center; gap: var(--s2);
  min-width: 0; flex: 1; color: inherit; text-decoration: none;
}
.tr-face {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-pill);
  background: var(--panel-2); object-fit: cover;
}
.tr-name { display: grid; min-width: 0; }
.tr-name strong { font-size: var(--fs-sm); color: var(--ink); }
.tr-sub { font-size: var(--fs-micro); color: var(--ink-2); }

.tr-sig {
  flex: none; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: var(--track-lab);
  padding: 5px 10px; border-radius: var(--r-chip);
}
.sig-over  { color: var(--over);  background: color-mix(in srgb, var(--over) 16%, transparent); }
.sig-under { color: var(--under); background: color-mix(in srgb, var(--under) 16%, transparent); }
.tr-quiet {
  flex: none; font-size: var(--fs-micro); color: var(--dim);
  text-transform: uppercase; letter-spacing: var(--track-lab);
}

.tr-mid {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
/* The five bars, drawn rather than described. The reader is being asked to
   take the other side of a picture, so show him the picture. */
.strip { display: inline-flex; align-items: center; gap: 3px; }
.strip i { width: 9px; height: 18px; border-radius: 2px; display: block; }
.strip .b-green { background: var(--over); }
.strip .b-red   { background: var(--under); }
.strip-word {
  margin-left: var(--s2); font-size: var(--fs-micro); color: var(--ink-2);
  white-space: nowrap;
}

.tr-matchup { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* The word leads; the colour says whether it helps THIS signal, not how soft
   the defence is. See matchupHtml in trend.js for why those are different
   questions and what went wrong when one colour tried to answer both. */
.mk-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-chip);
  font-size: var(--fs-micro); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--ink-2);
}
.mk-chip i { font-style: normal; font-size: 0.95em; }
.mk-help {
  color: var(--over); border-color: color-mix(in srgb, var(--over) 45%, transparent);
  background: color-mix(in srgb, var(--over) 12%, transparent);
}
.mk-hurt {
  color: var(--under); border-color: color-mix(in srgb, var(--under) 45%, transparent);
  background: color-mix(in srgb, var(--under) 12%, transparent);
}
.mk-flat { color: var(--dim); }

.tr-why { font-size: var(--fs-micro); color: var(--dim); }

.tr-badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tr-label, .tr-align, .tr-against, .tr-conflict {
  font-family: var(--font-display); font-size: var(--fs-lab); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-lab);
  padding: 3px 8px; border-radius: var(--r-chip);
}
.tr-label  { color: var(--accent); border: 1px solid var(--accent); }
.tr-align  { color: var(--over);   border: 1px solid var(--over); }
.tr-against{ color: var(--dim);    border: 1px solid var(--line-2); }
/* The model on the other side, with conviction. Amber rather than red: it is
   a caution on the signal, not a verdict against it. */
.tr-conflict { color: var(--neutral); border: 1px solid var(--neutral); }

.tr-sim { font-size: var(--fs-micro); color: var(--ink-2); }
/* The model on the other side. Amber, because it is a caution on the signal
   rather than a verdict against it -- the model does not pick the side here. */
.tr-sim-against { color: var(--neutral); }

@media (max-width: 860px) {
  .tr-mid { gap: var(--s2); }
  .strip i { width: 8px; height: 16px; }
}