/* ===================== Core Concept card ===================== */
.pa-concept {
  position: relative;
  background: var(--pa-concept-bg);
  border: none;
  border-radius: var(--pa-r-lg);
  padding: 18px 20px 18px 22px;
  margin: 14px 0;
  box-shadow: var(--pa-sh-sm);
  transition: transform .18s var(--pa-ease), box-shadow .18s var(--pa-ease), border-color .18s var(--pa-ease);
}

.pa-concept::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  border-radius: var(--pa-r-lg) 0 0 var(--pa-r-lg);
  background: var(--pa-concept);
}


.pa-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--pa-brand);
  background: rgba(109, 139, 255, .14);
  border: 1px solid rgba(109, 139, 255, .30);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.pa-concept .pa-tag {
  color: var(--pa-concept);
  background: var(--pa-concept-bg);
  border-color: var(--pa-concept-line);
}

.pa-concept .term {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--pa-text-primary);
  margin-bottom: 5px;
  letter-spacing: -.1px;
}

.pa-concept .desc {
  font-size: 14.5px;
  color: var(--pa-text-secondary);
}

/* ===================== Analogy ===================== */
.pa-analogy {
  position: relative;
  background: var(--pa-analogy-bg);
  border: none;
  border-radius: var(--pa-r-lg);
  padding: 16px 20px 16px 48px;
  margin: 14px 0;
  font-style: italic;
  color: var(--pa-text-primary);
  font-size: 14.5px;
  transition: transform .18s var(--pa-ease), box-shadow .18s var(--pa-ease), border-color .18s var(--pa-ease);
}

.pa-analogy::before {
  content: "\201C";
  position: absolute;
  left: 14px;
  top: 6px;
  font-size: 40px;
  line-height: 1;
  font-style: normal;
  font-family: Georgia, serif;
  color: var(--pa-analogy);
  opacity: 0.6;
}


.pa-analogy .pa-tag {
  font-style: normal;
  color: var(--pa-analogy);
  background: var(--pa-analogy-bg);
  border-color: var(--pa-analogy-line);
  display: inline-flex;
  margin-bottom: 8px;
}

/* ===================== Bullets ===================== */
.pa-bullets {
  padding-left: 4px;
  margin: 12px 0;
  list-style: none;
}

.pa-bullets li {
  position: relative;
  padding-left: 26px;
  margin: 9px 0;
  font-size: 14.5px;
  color: var(--pa-ink-soft);
}

.pa-bullets li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--pa-grad);
  transform: rotate(45deg);
}

/* ===================== Concept items list ===================== */
.pa-concept .desc {
  display: block;
}
.pa-concept-items {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.pa-concept-items li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 14px;
  color: var(--pa-ink-soft);
  border-top: 1px solid var(--pa-line);
  line-height: 1.5;
}
.pa-concept-items li:first-child { border-top: none; margin-top: 6px; }
.pa-concept-items li::before {
  content: "›";
  position: absolute;
  left: 4px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--pa-concept);
  font-weight: 700;
}

/* Exercise: attempt before revealing */
.pa-exercise{background:var(--pa-surface-1);border:1px solid var(--pa-line-2);border-left:4px solid var(--pa-brand-3);border-radius:var(--pa-r-lg);padding:14px 18px;margin:14px 0}
.pa-exercise-title{font-weight:700;font-size:14.5px;color:var(--pa-ink);margin:6px 0 2px}
.pa-exercise p{font-size:14.5px;color:var(--pa-ink-soft);line-height:1.55}
.pa-exercise-solution{border-top:1px solid var(--pa-line-2);margin-top:10px;padding-top:8px}
.pa-exercise-solution summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--pa-brand-3);min-height:32px;display:flex;align-items:center}
.pa-exercise-solution summary:focus-visible{outline:2px solid var(--pa-brand);outline-offset:2px;border-radius:4px}

/* ===================== Steps (ordered process) ===================== */
.pa-steps {
  background: var(--pa-surface-1);
  border: 1px solid var(--pa-line-2);
  border-radius: var(--pa-r-lg);
  padding: 16px 20px 16px 16px;
  margin: 14px 0;
  box-shadow: var(--pa-sh-sm);
}
.pa-steps-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pa-ink);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--pa-brand-3);
}
.pa-steps-list {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}
.pa-steps-list li {
  font-size: 14.5px;
  color: var(--pa-ink-soft);
  padding-left: 4px;
  line-height: 1.55;
}
.pa-steps-list li::marker {
  color: var(--pa-brand);
  font-weight: 800;
  font-size: 13px;
}

/* ===================== List (unordered with title) ===================== */
.pa-list {
  background: var(--pa-surface-1);
  border: 1px solid var(--pa-line-2);
  border-radius: var(--pa-r-lg);
  padding: 14px 18px;
  margin: 14px 0;
  box-shadow: var(--pa-sh-sm);
}
.pa-list-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pa-ink);
  margin-bottom: 10px;
}
.pa-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pa-list-items li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--pa-ink-soft);
  line-height: 1.5;
}
.pa-list-items li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--pa-grad);
  transform: rotate(45deg);
}

/* ===================== Comparison / data table ===================== */
.pa-table-wrap {
  max-width: var(--pa-read);
  margin: 16px 0;
  overflow-x: auto;
  border-radius: var(--pa-r-lg);
  box-shadow: var(--pa-sh-sm);
}
.pa-inline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pa-inline-table th {
  background: var(--pa-surface-2);
  color: var(--pa-ink);
  font-weight: 700;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 2px solid var(--pa-line-2);
  white-space: nowrap;
}
.pa-inline-table td {
  background: var(--pa-surface-1);
  color: var(--pa-ink-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--pa-line);
  vertical-align: top;
  line-height: 1.5;
}
.pa-inline-table tr:last-child td { border-bottom: none; }
.pa-inline-table tr:hover td { background: var(--pa-elev); }

/* ===================== Note / Warning callout boxes ===================== */
.pa-note {
  background: rgba(109, 139, 255, .08);
  border: 1px solid rgba(109, 139, 255, .28);
  border-left: 4px solid var(--pa-brand);
  border-radius: var(--pa-r-md);
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--pa-ink-soft);
  line-height: 1.55;
}
.pa-warning {
  background: var(--pa-warn-bg);
  border: 1px solid var(--pa-warn-line);
  border-left: 4px solid var(--pa-warn);
  border-radius: var(--pa-r-md);
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--pa-ink-soft);
  line-height: 1.55;
}

/* ===================== Links list ===================== */
.pa-links {
  margin: 12px 0;
}
.pa-links-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pa-ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.pa-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pa-links-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
}
.pa-links-list li::before {
  content: "↗";
  font-size: 12px;
  color: var(--pa-brand);
  flex-shrink: 0;
}
.pa-links-list a {
  color: var(--pa-brand);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.pa-links-list a:hover {
  border-bottom-color: var(--pa-brand);
}
.pa-links-note {
  color: var(--pa-ink-soft);
  font-size: 13px;
}

/* ===================== Exam pitfalls ===================== */
.pa-pitfalls-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--pa-read);
}

.pa-pitfall {
  border-radius: var(--pa-r-lg);
  background: var(--pa-surface-1);
  box-shadow: var(--pa-sh-sm);
  overflow: hidden;
  border: 1px solid var(--pa-line);
  transition: box-shadow .2s var(--pa-ease), transform .2s var(--pa-ease);
}


.pa-pf-hd {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  background: var(--pa-surface-2);
  border-bottom: 1px solid var(--pa-line);
}

.pa-pf-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--pa-warn-bg);
  border: 1px solid var(--pa-warn-line);
  color: var(--pa-warn);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.pa-pf-title-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--pa-ink);
  line-height: 1.35;
}

.pa-pf-trap {
  padding: 13px 18px;
  background: var(--pa-bad-bg);
  border-left: 3px solid var(--pa-bad);
  border-bottom: 1px solid var(--pa-line);
}

.pa-pf-fix {
  padding: 13px 18px;
  background: var(--pa-ok-bg);
  border-left: 3px solid var(--pa-ok);
}

.pa-pf-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pa-pf-trap .pa-pf-lbl { color: var(--pa-bad); }
.pa-pf-fix  .pa-pf-lbl { color: var(--pa-ok); }

.pa-pf-icon {
  font-style: normal;
  font-size: 12px;
}

.pa-pf-trap p,
.pa-pf-fix p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--pa-ink);
}

/* ===================== Quick recap table ===================== */
.pa-recap {
  width: 100%;
  max-width: var(--pa-read);
  border-collapse: separate;
  border-spacing: 0;
  margin: 12px 0;
  font-size: 14px;
  border: none;
  border-radius: var(--pa-r-lg);
  overflow: hidden;
  box-shadow: var(--pa-sh-sm);
}

.pa-recap th,
.pa-recap td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pa-line);
}

.pa-recap tr:last-child th,
.pa-recap tr:last-child td {
  border-bottom: none;
}

.pa-recap th {
  background: var(--pa-surface-2);
  color: var(--pa-recap-th-ink);
  font-weight: 700;
  width: 34%;
}

.pa-recap td {
  color: var(--pa-ink-soft);
  background: var(--pa-surface-1);
}

/* ===================== Quiz ===================== */

/* Quiz progress belongs to the question panel. */
.pa-quiz-pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--pa-ink);
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 1px solid var(--pa-line);
}

.pqp-track {
  flex: 1;
  min-width: 24px;
  height: 5px;
  background: var(--pa-surface-2);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.pqp-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pa-brand), var(--pa-ok));
  transition: width .35s var(--pa-ease);
}

.pqp-g, .pqp-s { color: var(--pa-brand); }
.pqp-t { color: var(--pa-muted); font-weight: 500; }

/* --- Inline reset button above question list --- */
.pa-quiz-reset {
  display: block;
  margin: 8px 0 16px;
  font-size: 12px;
  padding: 5px 12px;
}

.pa-q {
  border: none;
  border-left: 3px solid var(--pa-brand);
  border-radius: var(--pa-r-lg);
  padding: 24px 28px;
  margin: 16px 0;
  background: linear-gradient(180deg, var(--pa-surface-1), var(--pa-elev));
  box-shadow: var(--pa-sh-sm);
  max-width: var(--pa-read);
}

.pa-q .qhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pa-q .qtype {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--pa-qtype-ink);
  background: var(--pa-surface-3);
  border: 1px solid var(--pa-line-2);
  border-radius: 999px;
  padding: 4px 10px;
}

.pa-q .qtype.multi {
  color: #ffd9a8;
  background: rgba(251, 191, 36, .12);
  border-color: var(--pa-warn-line);
}

.pa-q .qno {
  font-size: 12px;
  color: var(--pa-faint);
  font-weight: 500;
}

.pa-q .scenario {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  margin: 4px 0 14px;
  color: var(--pa-scenario-ink);
}

.pa-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: var(--pa-r-md);
  padding: 14px 16px;
  margin: 10px 0;
  cursor: pointer;
  background: var(--pa-surface-2);
  transition: transform var(--pa-dur-sm) var(--pa-ease), background var(--pa-dur-sm) var(--pa-ease), border-color var(--pa-dur-sm) var(--pa-ease);
}

.pa-opt:hover:not(.disabled,.selected) {
  border-color: var(--pa-line-2);
  background: var(--pa-surface-3);
  transform: translateY(-1px);
}

.pa-opt:active {
  transform: scale(0.99);
}

.pa-opt .key {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid var(--pa-line-2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--pa-opt-key-ink);
  background: var(--pa-opt-key-bg);
  transition: .15s var(--pa-ease);
}

.pa-opt .txt {
  font-size: 14.5px;
  padding-top: 1px;
}

.pa-opt .rat {
  display: none;
  width: 100%;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--pa-muted);
  border-top: 1px dashed var(--pa-line-2);
  padding-top: 8px;
}

.pa-q.answered .opt,
.pa-q.answered .pa-opt {
  cursor: default;
}

.pa-q.answered .pa-opt .rat {
  display: block;
}

.pa-opt.selected {
  background: var(--pa-opt-sel-bg);
  border-color: var(--pa-brand);
}

.pa-opt.selected .key {
  background: var(--pa-brand);
  border-color: var(--pa-brand);
  color: var(--pa-scenario-ink);
}

.pa-opt.correct {
  background: rgba(52, 211, 153, .18);
  border-color: #34d399;
  border-width: 2px;
}

.pa-opt.correct .key {
  background: #34d399;
  border-color: #34d399;
  color: #04231a;
  font-size: 14px;
}

.pa-opt.wrong {
  background: rgba(251, 113, 133, .18);
  border-color: #fb7185;
  border-width: 2px;
}

.pa-opt.wrong .key {
  background: #fb7185;
  border-color: #fb7185;
  color: #2a0710;
  font-size: 14px;
}

.pa-opt.correct .rat {
  color: #bff0d6;
}

.pa-opt.wrong .rat {
  color: #ffc9cf;
}

.pa-q .hint-wrap {
  margin-top: 10px;
}

.pa-q .pa-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pa-ink-2);
  cursor: pointer;
  border-radius: var(--pa-r-sm);
  transition: color .15s var(--pa-ease);
}

.pa-q .pa-hint-btn:focus {
  outline: none;
}

.pa-q .pa-hint-btn:hover {
  color: var(--pa-ink);
}

.pa-q .pa-hint-btn .hint-caret {
  font-size: 11px;
  transition: transform .2s var(--pa-ease);
}

.pa-q .pa-hint-btn.open .hint-caret {
  transform: rotate(180deg);
}

.pa-q .hintbox {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  background: var(--pa-warn-bg);
  border: 1px solid var(--pa-warn-line);
  color: var(--pa-ink);
  padding: 10px 13px;
  border-radius: var(--pa-r-md);
  line-height: 1.5;
}

.pa-q .hintbox.show {
  display: block;
}

.pa-q .verdict {
  display: none;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}

.pa-q.answered .verdict {
  display: block;
}

.pa-q.ok .verdict {
  color: var(--pa-ok);
}

.pa-q.no .verdict {
  color: var(--pa-bad);
}

.pa-q .rationale {
  display: none;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--pa-ink-soft);
  border-top: 1px dashed var(--pa-line-2);
  padding-top: 11px;
}

.pa-q.answered .rationale {
  display: block;
}

.pa-q .rationale b {
  color: var(--pa-scenario-ink);
}

/* Buttons */
.pa-btn {
  background: var(--pa-surface-2);
  color: var(--pa-ink);
  border: 1px solid var(--pa-line-2);
  padding: 10px 20px;
  border-radius: var(--pa-r-md);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--pa-dur-sm) var(--pa-ease), box-shadow var(--pa-dur-sm) var(--pa-ease), border-color var(--pa-dur-sm) var(--pa-ease), background var(--pa-dur-sm) var(--pa-ease);
}

.pa-btn:hover:not(:disabled) {
  border-color: var(--pa-brand);
  background: var(--pa-surface-3);
  transform: translateY(-1px);
  box-shadow: var(--pa-sh-sm);
}

.pa-btn:active {
  transform: scale(0.96);
  box-shadow: none;
}

.pa-btn.primary {
  background: var(--pa-grad);
  border: none;
  color: var(--pa-scenario-ink);
  box-shadow: 0 6px 16px rgba(122, 92, 255, .4);
}

.pa-btn.primary:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(122, 92, 255, .5);
}

.pa-btn.primary:active {
  transform: scale(0.96);
  box-shadow: 0 4px 10px rgba(122, 92, 255, .3);
}

.pa-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Quiz result */
.pa-result {
  display: none;
  text-align: center;
  padding: 30px;
  border: none;
  border-radius: var(--pa-r-xl);
  background: linear-gradient(180deg, var(--pa-surface-1), var(--pa-elev));
  margin: 20px 0;
  max-width: var(--pa-read);
  box-shadow: var(--pa-sh-md);
}

.pa-result.show {
  display: block;
}

.pa-result .big {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 6px 0;
}

.pa-result .ring {
  font-size: 13px;
  color: var(--pa-muted);
}