/* ===========================================================================
   v066 - weak topics as clickable tags on the dashboard
   ---------------------------------------------------------------------------
   Layered above v027..v065; nothing here edits an older file.

   Redesign 4.2 (2): the "Weak Topics" number became tags the student can click
   to go straight into practice for that topic. The count alone told them they
   had a problem; it did not let them choose which one to fix.

   The tags only appear once there is something to show - a fresh account sees
   the empty-state line instead (v062), never an empty row of tags.
   =========================================================================== */

.weakTopicsRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
}

.weakTopicsRow[hidden] { display: none; }

.weakTagLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a94a6;
}

/* Amber-red, not alarm-red: this is "where to work", not "you failed". */
.weakTag {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid #f0d3d3;
  background: #fff6f6;
  color: #a53838;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  min-height: 40px;           /* keep it tappable on a phone */
  align-items: center;
}

.weakTag:hover {
  background: #ffecec;
  border-color: #e2b6b6;
}

.weakTag em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  opacity: .62;
}

/* On a phone the row can fill several lines; keep the labels from being cut. */
[data-device="phone"] .weakTopicsRow {
  gap: 7px;
}

[data-device="phone"] .weakTagLabel {
  width: 100%;
}