/* I Will Pass NCLEX — Phase 3 (advanced simulation): exam review, exam history, exam builder. */

.badge-sim { background: var(--mist); color: var(--teal-dark); border: 1px solid #BFDCE2; font-weight: 600; white-space: normal; text-align: left; }

/* a label followed by its value in reading order; the value is shown large and on top */
.stat-lv { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat-lv .stat-label { margin-top: 0.2rem; }
.stat-lv.is-up .stat-value { color: var(--ok); }
.stat-lv.is-down .stat-value { color: var(--bad); }

/* change since the attempt before: the arrow and the sign carry the meaning, the colour only supports it */
.delta { display: inline-flex; align-items: center; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 99px; padding: 0.05rem 0.5rem 0.05rem 0.2rem; white-space: nowrap; }
.delta.is-up { color: #0B6B45; background: var(--ok-soft); }
.delta.is-down { color: #A12A2A; background: var(--bad-soft); }
.delta.is-same { color: var(--muted); background: #EEF2F5; padding: 0.05rem 0.6rem; }

.cat-result.is-none { border-color: #8A99A8; background: #F1F4F7; }

/* recommended study plan after an exam */
.exam-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.exam-steps li { display: grid; grid-template-columns: 1fr; gap: 0.35rem 0.9rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.85rem; }
.exam-step-when { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal-dark); }
.exam-step-body .bi { color: var(--teal); }
@media (min-width: 768px) {
  .exam-steps li { grid-template-columns: 7.5rem 1fr auto; align-items: center; }
}

/* adaptive simulation: a question that belongs to a case study */
.q-case-note { font-size: 0.875rem; font-weight: 600; color: var(--teal-dark); background: var(--mist); border-radius: 8px; padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; display: inline-block; }

@media print {
  .exam-step-act, .exam-steps + form { display: none; }
}

/* on a phone a wide table becomes a list: one block per row, each value with its column name in front */
@media (max-width: 575.98px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody { display: block; }
  .table-stack tr { display: block; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border: 0; padding: 0.1rem 0; text-align: left !important; }
  .table-stack td:not([data-label]) { display: block; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.85rem; flex: none; }
  .table-stack td[data-label] > span { text-align: right; }
  .table-stack td.ts-small { font-size: 0.8rem; color: var(--muted); }
}

/* the dashed target line of a chart, named under the chart */
.chart-legend i.is-dashed { width: 1.9rem; background: repeating-linear-gradient(90deg, #C89B00 0 6px, transparent 6px 10px) !important; height: 3px; border-radius: 0; }