/* ==========================================================================
   Practice paper, evidence chips and the progress summary.

   Kept in its own file rather than appended to the minified style.css, so it
   stays readable and reviewable. Every colour comes from the existing tokens.
   ========================================================================== */

/* --- evidence chips ----------------------------------------------------- */

.evidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.evidence small { font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.75; }

.evidence--untouched,
.evidence--opened { background: var(--surface-2); color: var(--muted); }
.evidence--practising { background: var(--warn-soft); color: var(--warn); }
.evidence--secure { background: var(--ok-soft); color: var(--ok); }
.evidence--fading { background: var(--accent-rose-soft); color: var(--accent-rose); }

/* Declared is dashed rather than filled: it is the reader's claim, and must
   not borrow the look of a measured result. */
.evidence--declared {
  background: transparent;
  border: 1px dashed var(--accent);
  color: var(--accent);
}

.unit-ring { display: inline-grid; width: 26px; height: 26px; place-items: center; }
.unit-ring svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.unit-ring__track { fill: none; stroke: var(--hairline); stroke-width: 2.4; }
.unit-ring__value { fill: none; stroke: var(--done); stroke-linecap: round; stroke-width: 2.4; transition: stroke-dasharray var(--dur-enter) var(--ease-out); }

/* --- summary panel ------------------------------------------------------ */

.summary-figures { display: grid; gap: 14px; margin: 16px 0 20px; }

.summary-figure strong {
  display: block;
  color: var(--navy-deep);
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.summary-figure span { color: var(--muted); font-size: 0.8rem; }
.summary-list { margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }

.summary-list h3 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 2px; font-size: 0.85rem; font-weight: 700;
}

.summary-list h3 .icon { width: 15px; height: 15px; }
.summary-hint { margin: 0 0 8px; color: var(--faint); font-size: 0.75rem; }

.summary-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; color: var(--navy-deep); font-size: 0.85rem; text-decoration: none;
}

.summary-list a:hover { color: var(--accent); }
.summary-list a span { color: var(--muted); font-variant-numeric: tabular-nums; }

.summary-foot {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 0 0; color: var(--faint); font-size: 0.75rem;
}

.summary-foot .icon { width: 14px; height: 14px; }
.summary-foot--warn { color: var(--warn); }
.summary-cta { margin: 12px 0 0; }

/* --- filter bar --------------------------------------------------------- */

.paper-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}

.field { display: grid; gap: 5px; }

.field__label {
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paper-count {
  margin: 0 0 8px auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* --- the paper ---------------------------------------------------------- */

.paper-body { display: grid; gap: 22px; max-width: 48rem; }

.qcard {
  padding: 22px 24px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 16px);
  background: var(--white);
}

.qcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.qcard__id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.qcard__id h3 {
  margin: 0;
  color: var(--navy-deep);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.tag {
  padding: 2px 9px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
}

/* Difficulty is the one tag that carries meaning at a glance, so it is the
   only one that gets colour. */
.tag--level-1 { background: var(--ok-soft); color: var(--ok); }
.tag--level-2 { background: var(--accent-sky-soft); color: var(--accent-sky); }
.tag--level-3 { background: var(--accent-rose-soft); color: var(--accent-rose); }

.qcard__tools { display: flex; align-items: center; gap: 12px; }

.qcard__marks {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qcard__solution {
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill, 999px);
  background: var(--white);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
}

.qcard__solution:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); }
.qcard__solution:disabled { color: var(--faint); cursor: default; }

.qcard__stem {
  padding: 16px 0 4px;
  color: var(--navy-deep);
  font-size: 0.98rem;
  line-height: 1.6;
}

.qparts { margin: 0; padding: 0; list-style: none; }

.qpart { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.qpart:last-child { border-bottom: 0; }

.qpart__prompt {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  color: var(--navy-deep);
  font-size: 0.95rem;
  line-height: 1.6;
}

.qpart__letter { color: var(--muted); font-variant-numeric: tabular-nums; }

.qpart__marks {
  color: var(--faint);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qpart__input { margin: 12px 0 0 34px; }

.qchoices { margin: 0 0 10px; padding: 0; border: 0; display: grid; gap: 7px; }

.qchoice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs, 10px);
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.5;
}

.qchoice:hover { border-color: var(--accent); }
.qchoice input { margin-top: 3px; accent-color: var(--accent); }
.qchoice:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

.qnumeric { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

.qnumeric input {
  width: 190px;
  padding: 10px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs, 10px);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.qnumeric__unit { color: var(--muted); font-size: 0.82rem; }

.qwritten {
  width: 100%;
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs, 10px);
  background: var(--surface);
  color: var(--navy-deep);
  font: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.qnumeric input:focus-visible,
.qwritten:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn--quiet {
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
}

.btn--quiet:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn--quiet:disabled { opacity: 0.45; cursor: default; }

.qpart__feedback {
  margin: 12px 0 0 34px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 12px);
  background: var(--surface);
  font-size: 0.9rem;
  line-height: 1.6;
}

.qpart__feedback.is-right { background: var(--ok-soft); }
.qpart__feedback.is-wrong { background: var(--warn-soft); }
.qpart__feedback.is-hint { background: var(--surface-2); color: var(--muted); }

.verdict { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-weight: 700; }
.verdict .icon { width: 16px; height: 16px; }
.verdict--right { color: var(--ok); }
.verdict--wrong { color: var(--warn); }

.worked h4 {
  margin: 0 0 5px;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.worked { color: var(--navy-deep); }

.selfmark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
}

.selfmark__done { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.selfmark__done .icon { width: 15px; height: 15px; }

/* --- topic footer ------------------------------------------------------- */

.topic-progress {
  margin: 34px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 16px);
  background: var(--surface);
}

.topic-progress h3 { margin: 0 0 12px; font-size: 0.95rem; font-weight: 700; }
.topic-progress__state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.topic-progress__state p { margin: 0; color: var(--muted); font-size: 0.85rem; }

.declare {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  font-size: 0.85rem;
}

.declare input { margin-top: 3px; accent-color: var(--accent); }
.declare small { display: block; color: var(--faint); font-size: 0.75rem; }
.declare:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.quiet { color: var(--muted); }

@media (max-width: 780px) {
  .paper-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .rh-select__button { min-width: 0; width: 100%; }
  .paper-count { grid-column: 1 / -1; margin: 0; }
  .qcard { padding: 18px 16px 4px; }
  .qpart__input,
  .qpart__feedback { margin-left: 0; }
  .qnumeric input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .unit-ring__value { transition: none; }
}


/* --- listbox filters ----------------------------------------------------- */

/* A native select cannot have its popup styled — the list is drawn by the
   operating system. These rules dress a real button-and-listbox pair instead,
   which is why the JS has to supply the keyboard behaviour a select gives
   away free. */

.rh-select { position: relative; }

.rh-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 158px;
  padding: 9px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill, 999px);
  background: var(--white);
  color: var(--navy-deep);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
}

.rh-select__button:hover { border-color: var(--accent); }

.rh-select__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.rh-select__button .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--muted);
  /* The shared caret points right; a menu control needs it pointing down. */
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.rh-select__button[aria-expanded="true"] {
  border-color: var(--accent);
}

.rh-select__button[aria-expanded="true"] .icon { transform: rotate(-90deg); }

.rh-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rh-select__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-width: 20rem;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 16px);
  background: var(--white);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06), 0 14px 34px rgba(16, 24, 40, 0.14);
  list-style: none;
}

.rh-select__list:focus-visible { outline: none; }

.rh-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 12px);
  color: var(--navy-deep);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Highlight follows the keyboard and the pointer alike, so arrowing down and
   hovering look the same rather than fighting each other. */
.rh-select__option.is-active { background: var(--accent-tint); }

.rh-select__option .icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0; color: var(--accent); }
.rh-select__option.is-selected { color: var(--accent); font-weight: 650; }
.rh-select__option.is-selected .icon { opacity: 1; }

/* Motion: menus open with a short lift, feedback appears where it belongs,
   and choices ease between states instead of snapping. */
.rh-select__list:not([hidden]) { animation: rh-pop var(--dur-control) var(--ease-out); }
.rh-select__button, .qchoice, .btn--quiet, .qcard__solution { transition: border-color var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out); }
.qchoice:has(input:checked) { border-color: var(--ink); background: var(--accent-tint); }
.qpart__feedback:not([hidden]) { animation: rh-rise var(--dur-control) var(--ease-out) both; }
.evidence { transition: background-color var(--dur-control) var(--ease-out), color var(--dur-control) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .rh-select__button .icon { transition: none; }
}