/* ===========================================================================
   v067 - Practice list: applied-filter chips, and less noise per row.
   Redesign 6.1 / 6.2.

   Two complaints from the audit, both about the same screen:

   1. "Filters live in a popup or a collapsed panel, so they cost an open and a
      close every time; and an applied condition cannot be seen or removed one
      at a time."  Difficulty and Status were behind "More filters", so the list
      could be silently filtered with nothing on screen explaining why.
   2. "'Not attempted' repeated down every row is visual noise."  On a list of
      87 questions that label carried no information - every unstarted row said
      the same thing.  It is now a dot, and the internal unit id moved from the
      headline into the hover title.

   New file, per the project rule: never edit an earlier layer, always append.
   =========================================================================== */

/* ---------- 1. applied-filter chips --------------------------------------- */

/* The parent is a flex/grid stack, so `hidden` alone would be overridden by
   whatever display the layout gives this node - it has to be said outright. */
.activeFilterChips[hidden] { display: none !important; }

.activeFilterChips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.fchip,
.fchipClear {
  font: inherit;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-primary, #315efb);
  background: #eef4ff;
  border: 1px solid #cfe0ff;
}

.fchip:hover { background: #e3edff; border-color: #a9c8ff; }

/* the x is a glyph, not a nested control, so the whole chip stays one target */
.fchip b {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: .55;
}

.fchip:hover b { opacity: 1; }

.fchipClear {
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: underline;
}

.fchipClear:hover { color: var(--red); }

/* the hit count rides on the same row, pushed to the far end */
.fchipCount {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
  white-space: nowrap;
}

/* ---------- 2. one status dot instead of a repeated label ----------------- */

/* A bare dot floating at the right edge read as a smudge rather than a status -
   it needs a home.  A very light pill holds the dot (and the bookmark star when
   there is one) without becoming a badge: no text, no colour fill of its own. */
.qstate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f6f8fc;
  border: 1px solid var(--line);
}

/* ○ unstarted - a hollow ring, so a whole page of them reads as quiet */
.qdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #b9c4d6;
  flex: 0 0 auto;
}

/* ● answered correctly */
.qstate[data-state="correct"] .qdot {
  background: var(--green, #16865b);
  border-color: var(--green, #16865b);
}

/* ▲ / wrong - filled red, the one state that should pull the eye */
.qstate[data-state="wrong"] .qdot {
  background: var(--red, #c34747);
  border-color: var(--red, #c34747);
}

/* half-done and unsure both sit between the two */
.qstate[data-state="partial"] .qdot,
.qstate[data-state="unsure"] .qdot {
  background: #e2a63c;
  border-color: #e2a63c;
}

.qstar {
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  color: #d9a300;
}

/* The internal unit code left the headline for the hover title, but the paper
   name that replaced it is still a supporting line, not the headline - keep it
   quieter than the topic so the topic wins the glance. */
.qcard .qid {
  color: var(--muted2);
  letter-spacing: .03em;
}

/* ---------- 3. narrow screens -------------------------------------------- */

/* On a phone the chip row would eat the width, so it becomes one scrollable
   line.  This is an attribute-based breakpoint (see the zoom rules): a media
   query would not follow the in-app font scaling. */
html[data-ui-eff="narrow"] .activeFilterChips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

html[data-ui-eff="narrow"] .activeFilterChips::-webkit-scrollbar { display: none; }

html[data-ui-eff="narrow"] .fchip,
html[data-ui-eff="narrow"] .fchipClear { flex: 0 0 auto; }

html[data-ui-eff="narrow"] .fchipCount {
  margin-left: 4px;
  flex: 0 0 auto;
}