/* ── KKD Skills Engine ─────────────────────────────────────────────────────── */
/* Topic picker */
.sk-back {
  background: none; border: none; color: #8b98ac; font-size: 14px;
  cursor: pointer; padding: 0; margin-bottom: 8px; font-weight: 600;
}
.sk-back:hover { color: #c62828; }
.sk-sub { font-size: 14px; opacity: .75; line-height: 1.5; margin: 0 0 18px; }
.sk-empty { padding: 30px; text-align: center; opacity: .6; font-size: 14px; }
.sk-all {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(198, 40, 40, .07); border: 2px solid rgba(198, 40, 40, .25);
  border-radius: 12px; margin-bottom: 12px; cursor: pointer; font-size: 15px;
}
.sk-topics { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sk-topic {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px solid var(--kkd-line, #e0d8c8); border-radius: 12px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.sk-topic:hover { border-color: #c62828; }
.sk-topic input { width: 18px; height: 18px; accent-color: #c62828; flex: 0 0 auto; }
.sk-tname { font-weight: 700; font-size: 15px; flex: 1 1 auto; }
.sk-tmeta { font-size: 12px; opacity: .6; }
.sk-start {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: linear-gradient(120deg, #c62828, #e53935); color: #fff;
  font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(198, 40, 40, .35);
}
.sk-start:hover { filter: brightness(1.08); }

/* Tabs + cards (MCQs / CRQs) */
.sk-picker { padding-bottom: 24px; }
.sk-tabs {
  display: flex; gap: 8px; margin-bottom: 16px;
  border-bottom: 2px solid var(--kkd-line, #e0d8c8); padding-bottom: 0;
}
.sk-tab {
  flex: 1; padding: 12px 8px; border: none; background: none;
  font-size: 15px; font-weight: 800; color: inherit; opacity: .55;
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
  font-family: inherit;
}
.sk-tab-active { opacity: 1; color: #c62828; border-bottom-color: #c62828; }
.sk-pane { animation: skFade .18s ease; }
@keyframes skFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.sk-picker { max-width: 1000px; margin: 0 auto; }
.sk-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
/* Picker cards reuse the portal paper-card look (.exam-card) — element fixes only. */
button.sk-pick { font-family: inherit; width: 100%; }
a.sk-pick { text-decoration: none; }
/* Landscape phones / tablets: two columns. Desktop: three. */
@media (orientation: landscape) and (min-width: 640px) {
  .sk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Question body */
.se-body { display: flex; flex-direction: column; gap: 10px; }
.custom-check {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  border: 2px solid #b9c2d4; background: #fff; position: relative;
}
.custom-check.selected { background: #c62828; border-color: #c62828; }
.custom-check.selected::after {
  content: '✓'; position: absolute; inset: 0; color: #fff;
  font-size: 14px; font-weight: 800; display: flex;
  align-items: center; justify-content: center;
}

/* Fill in the blank */
.se-blankline { color: #c62828; font-weight: 800; letter-spacing: 2px; }
.se-fillwrap { display: flex; flex-direction: column; gap: 10px; }
.se-fillinput {
  padding: 14px 16px; font-size: 16px; border-radius: 12px;
  border: 2px solid var(--kkd-line, #e0d8c8); width: 100%; box-sizing: border-box;
  font-family: inherit;
}
.se-fillinput:focus { outline: none; border-color: #c62828; }
.se-check {
  padding: 12px 28px; border: none; border-radius: 12px; align-self: flex-start;
  background: linear-gradient(120deg, #c62828, #e53935); color: #fff;
  font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(198, 40, 40, .3);
}
.se-check:hover { filter: brightness(1.08); }
.se-check.se-ghost { background: transparent; color: inherit; border: 2px solid var(--kkd-line, #e0d8c8); box-shadow: none; }
.se-yourans, .se-correctans {
  padding: 12px 16px; border-radius: 10px; font-size: 15px;
}
.se-yourans.ok { background: rgba(46, 125, 50, .12); border: 1.5px solid #2e7d32; }
.se-yourans.bad { background: rgba(198, 40, 40, .08); border: 1.5px solid #c62828; }
.se-correctans { background: rgba(46, 125, 50, .08); border: 1.5px dashed #2e7d32; }

/* Matching */
.se-matchrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1.5px solid var(--kkd-line, #e0d8c8);
  border-radius: 12px;
}
.se-matchleft { flex: 1 1 140px; font-weight: 600; font-size: 14.5px; }
.se-matchsel {
  flex: 1 1 140px; padding: 10px 12px; border-radius: 10px; font-size: 14px;
  border: 1.5px solid var(--kkd-line, #e0d8c8); font-family: inherit;
  background: #fff; max-width: 100%;
}
.se-matchans { flex: 1 1 140px; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.se-matchans.ok { background: rgba(46, 125, 50, .12); border: 1.5px solid #2e7d32; }
.se-matchans.bad { background: rgba(198, 40, 40, .08); border: 1.5px solid #c62828; }
.se-matchfix { width: 100%; font-size: 13px; color: #2e7d32; font-weight: 600; }
.se-note { font-size: 13.5px; opacity: .75; padding: 6px 2px; }

/* MTQ */
.se-scenario {
  background: rgba(21, 101, 192, .07); border: 1.5px solid rgba(21, 101, 192, .3);
  border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.6;
}
.se-scenlabel {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #1565c0; margin-bottom: 6px;
}
.se-part { display: flex; flex-direction: column; gap: 8px; }
.se-partq { font-size: 15px; line-height: 1.55; }
.se-marks { color: #c62828; font-weight: 700; font-size: 13px; }
.se-mtqans {
  width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical;
  padding: 12px 14px; font-size: 14.5px; border-radius: 10px;
  border: 1.5px solid var(--kkd-line, #e0d8c8); font-family: inherit; line-height: 1.55;
}
.se-mtqans:focus { outline: none; border-color: #c62828; }
.se-model {
  background: rgba(46, 125, 50, .07); border: 1.5px dashed #2e7d32;
  border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap;
}
.se-modellabel {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #2e7d32; margin-bottom: 6px;
}
.se-selfmark {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px; background: rgba(198, 40, 40, .05);
  border-radius: 10px; border: 1px solid var(--kkd-line, #e0d8c8);
}
.se-smlabel { width: 100%; font-size: 13.5px; font-weight: 600; opacity: .8; }
.se-smbtn {
  padding: 10px 18px; border-radius: 10px; border: 1.5px solid var(--kkd-line, #e0d8c8);
  background: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.se-smbtn:hover { border-color: #2e7d32; }

/* Feedback + results */
.se-expl { font-size: 14px; line-height: 1.6; margin-top: 8px; opacity: .9; }
.se-results { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.se-bigscore { font-size: 52px; font-weight: 800; color: #c62828; }
.se-pct { font-size: 17px; font-weight: 600; opacity: .8; }
.se-topics { font-size: 13px; opacity: .6; max-width: 420px; }
.se-results .se-check { align-self: center; }

/* Dark mode */
[data-theme="dark"] .se-matchsel,
[data-theme="dark"] .se-fillinput,
[data-theme="dark"] .se-mtqans,
[data-theme="dark"] .se-smbtn { background: #16202c; color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .custom-check { background: #16202c; border-color: #475569; }
[data-theme="dark"] .sk-topic { border-color: #334155; }
[data-theme="dark"] .sk-all { background: rgba(198, 40, 40, .12); }
[data-theme="dark"] .sk-tab-active { color: #ef5350; border-bottom-color: #ef5350; }

/* Grid (table tick) */
.se-grid { border-collapse: collapse; width: 100%; margin: 4px 0 6px; font-size: 14.5px; }
.se-grid th, .se-grid td { border: 1.5px solid var(--kkd-line, #e0d8c8); padding: 10px 12px; text-align: center; }
.se-grid th { background: rgba(198, 40, 40, .06); font-weight: 800; font-size: 13px; }
.se-gridrow { text-align: left !important; font-weight: 700; }
.se-gridcell input[type=radio] { width: 20px; height: 20px; accent-color: #c62828; cursor: pointer; }
.se-gridcell.ok { background: rgba(46, 125, 50, .15); color: #2e7d32; font-weight: 800; font-size: 18px; }
.se-gridcell.bad { background: rgba(198, 40, 40, .12); color: #c62828; font-weight: 800; font-size: 18px; }
.se-gridcell.missed { background: rgba(255, 152, 0, .12); color: #e65100; font-weight: 700; }
[data-theme="dark"] .se-grid th { background: rgba(198, 40, 40, .12); }

/* Skills feedback states (used by seShowFeedback) */
.feedback-container.feedback-correct { border-left: 4px solid #2F805F; background: #E5F1E9; }
.feedback-container.feedback-wrong { border-left: 4px solid #C34A4A; background: #F6E5E2; }
.feedback-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.feedback-container.feedback-correct .feedback-title { color: #2F805F; }
.feedback-container.feedback-wrong .feedback-title { color: #C34A4A; }
[data-theme="dark"] .feedback-container.feedback-correct { background: rgba(47,128,95,.18); }
[data-theme="dark"] .feedback-container.feedback-wrong { background: rgba(195,74,74,.18); }

/* Boxed exam-style data tables (Life-cycle costing etc.) */
.se-table-wrap { overflow-x: auto; margin: 14px 0 6px; }
table.se-table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--exam-fit, 1)); line-height: 1.5; background: #FFFDF8; }
.se-table th, .se-table td { border: 1px solid #B9AE99; padding: calc(8px * var(--exam-fit, 1)) calc(12px * var(--exam-fit, 1)); text-align: right; vertical-align: top; }
.se-table th:first-child, .se-table td:first-child { text-align: left; }
.se-table thead th { background: #F1E7D2; font-weight: 700; color: #17233A; text-align: center; }
.se-table thead th:first-child { text-align: left; }
.se-table tbody tr:nth-child(even) { background: rgba(217, 123, 27, 0.06); }
[data-theme="dark"] table.se-table { background: #1A2540; }
[data-theme="dark"] .se-table th, [data-theme="dark"] .se-table td { border-color: #3A4A6B; }
[data-theme="dark"] .se-table thead th { background: #243154; color: #EAE3D0; }
[data-theme="dark"] .se-table tbody tr:nth-child(even) { background: rgba(217, 123, 27, 0.10); }
.se-table-title { font-weight: 700; font-size: calc(13px * var(--exam-fit, 1)); letter-spacing: .06em; text-transform: uppercase; color: #8A6D3B; margin-bottom: calc(6px * var(--exam-fit, 1)); }
[data-theme="dark"] .se-table-title { color: #D9B36A; }

.se-img-wrap { margin: 12px 0; text-align: center; }
.se-qimg { max-width: 100%; height: auto; border: 1px solid #B9AE99; border-radius: 6px; background: #fff; }
[data-theme="dark"] .se-qimg { border-color: #3A4A6B; }