/* =========================================================================
   shared/base.css — rules identical across lessons (load after tokens.css,
   before the lesson's own styles.css). Lesson-specific overrides stay in
   the lesson's styles.css. Bagian "Komponen bersama" di bawah adalah
   komponen siap pakai: pakai dari sini lebih dulu sebelum menulis gaya
   baru di styles.css materi.
   ========================================================================= */

/* =========================================================================
   Reset & base
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
  background-image:
    linear-gradient(var(--color-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-bg-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.25;
}

h2 {
  font-size: 1.45rem;
}

h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

h4 {
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

p {
  margin: 0 0 var(--space-3) 0;
}

ul,
ol {
  margin: 0 0 var(--space-3) 0;
  padding-left: 1.4em;
}

li {
  margin-bottom: var(--space-1);
}

strong {
  font-weight: 600;
}

/* =========================================================================
   Utility
   ========================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* =========================================================================
   Header
   ========================================================================= */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header__brand {
  min-width: 0;
}

.app-header__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.app-header__title {
  font-size: 1.1rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* =========================================================================
   Stage navigation
   ========================================================================= */

.stage-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  position: sticky;
  top: var(--header-height);
  z-index: 19;
}

/* Di layar sempit header bisa membungkus, sehingga offset sticky tidak
   lagi tepat dan nav menutupi konten. Lebih aman dibiarkan mengalir. */
@media (max-width: 560px) {
  .stage-nav {
    position: static;
  }
}

.stage-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-1);
  min-width: max-content;
}

.stage-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.12s,
    color 0.12s,
    border-color 0.12s;
}

.stage-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  flex-shrink: 0;
}

.stage-nav__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-nav__item:hover:not(:disabled) {
  background: var(--color-bg-grid);
  color: var(--color-ink);
}

.stage-nav__item[aria-current='step'] {
  color: var(--color-primary-strong);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

.stage-nav__item[aria-current='step'] .stage-nav__num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.stage-nav__item.is-complete .stage-nav__num {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.stage-nav__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================================
   Main layout
   ========================================================================= */

#konten-utama {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-5);
}

.stage-head {
  margin-bottom: var(--space-4);
}

.stage-head__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  display: block;
}

.stage-head__goal {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

.progress-bar-wrap {
  margin-bottom: var(--space-4);
}

.progress-bar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.progress-bar-note {
  font-size: 0.78rem;
}

.loading-state {
  text-align: center;
  padding: var(--space-7);
  color: var(--color-ink-muted);
}

.progress-bar {
  height: 6px;
  background: var(--color-bg-grid);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* =========================================================================
   Panels
   ========================================================================= */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.panel--compact {
  padding: var(--space-4);
}

.panel--hero {
  padding: var(--space-6);
}

.panel--accent {
  border-left: 4px solid var(--color-primary);
}

.panel--success {
  border-left: 4px solid var(--color-success);
  background: var(--color-success-soft);
}

.panel--warning {
  border-left: 4px solid var(--color-warning);
  background: var(--color-warning-soft);
}

.panel--error {
  border-left: 4px solid var(--color-error);
  background: var(--color-error-soft);
}

.panel--info {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    transform 0.05s;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.btn--ghost:hover {
  background: var(--color-bg-grid);
}

.btn--danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}

.btn--danger:hover {
  background: var(--color-error-strong);
  border-color: var(--color-error-strong);
}

.btn--small {
  padding: 6px 12px;
  font-size: 0.82rem;
  min-height: 36px;
}

.btn--large {
  padding: 12px 28px;
  font-size: 1rem;
  min-height: 52px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.btn-group--end {
  justify-content: flex-end;
}

.btn-group--spread {
  justify-content: space-between;
}

/* =========================================================================
   Forms / inputs
   ========================================================================= */

.field-group {
  margin-bottom: var(--space-4);
}

.field-group label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: var(--space-1);
}

.field-group .field-hint {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}

.field-error {
  color: var(--color-error);
  font-size: 0.8rem;
  margin-top: var(--space-1);
}

.field-error::before {
  content: '⚠ ';
}

.field-error:empty {
  display: none;
}

.input-text,
.input-textarea,
.input-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  min-height: 44px;
}

.input-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.input-text:focus,
.input-textarea:focus,
.input-select:focus {
  border-color: var(--color-primary);
}

.input-text.has-error,
.input-textarea.has-error,
.input-select.has-error {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.input-text:disabled,
.input-textarea:disabled,
.input-select:disabled,
.input-text[readonly],
.input-textarea[readonly] {
  background: var(--color-bg-grid);
  color: var(--color-ink-muted);
}

/* =========================================================================
   Feedback boxes
   ========================================================================= */

.feedback-box {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border: 1px solid transparent;
}

.feedback-box__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

.feedback-box__body {
  flex: 1;
  min-width: 0;
}

.feedback-box--success {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-strong);
}

.feedback-box--error {
  background: var(--color-error-soft);
  border-color: var(--color-error);
  color: var(--color-error-strong);
}

.feedback-box--warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning-strong);
}

.feedback-box--info {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

/* =========================================================================
   Notice / toast
   ========================================================================= */

.app-notice {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* engine.js menyalakan toast dengan menambah kelas ini. Tanpa aturan
   di bawah, showNotice() tidak pernah terlihat. */
.app-notice.is-visible {
  opacity: 1;
}

/* =========================================================================
   Modal (confirm dialog)
   ========================================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.modal h3 {
  margin-bottom: var(--space-3);
}

.modal p {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

/* =========================================================================
   Komponen bersama — Daftar tujuan
   ========================================================================= */

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

.objectives-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  margin: 0;
}

.objectives-list li:last-child {
  border-bottom: none;
}

.objectives-list__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 700;
  min-width: 24px;
  padding-top: 2px;
}

/* =========================================================================
   Komponen bersama — Kuis pilihan
   ========================================================================= */

.question-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.question-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}

.question-card__prompt {
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.choice-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-surface);
  min-height: 44px;
}

.choice-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-option input {
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.choice-option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-option.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.choice-option.is-incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

/* Jawaban benar yang TIDAK dipilih murid pada soal multi-pilih. */
.choice-option.unchecked-missed {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.choice-option:disabled {
  cursor: default;
}

.question-feedback {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.question-feedback.is-correct {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  border: 1px solid var(--color-success);
}

.question-feedback.is-incorrect {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
  border: 1px solid var(--color-error);
}

.question-feedback:empty {
  display: none;
}

/* =========================================================================
   Komponen bersama — Kolam chip (pilih lalu tempatkan)
   ========================================================================= */

.attr-pool-section {
  margin-bottom: var(--space-4);
}

.attr-pool-label {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.attr-pool-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border-radius: 10px;
  padding: 2px 7px;
}

.attr-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 48px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg);
}

.attr-chip {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 6px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
}

/* Target sentuh minimal 44px pada perangkat layar sentuh. */
@media (pointer: coarse) {
  .attr-chip {
    min-height: 44px;
  }
}

.attr-chip:hover {
  background: var(--color-bg-grid);
  border-color: var(--color-ink-muted);
}

.attr-chip.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.attr-chip--blue {
  background: var(--color-blue-soft);
  border-color: var(--color-blue);
  color: var(--color-blue-strong);
}

.attr-chip--purple {
  background: var(--color-purple-soft);
  border-color: var(--color-purple);
  color: var(--color-purple-strong);
}

.attr-chip--green {
  background: var(--color-green-soft);
  border-color: var(--color-green);
  color: var(--color-green-strong);
}

.attr-chip--orange {
  background: var(--color-orange-soft);
  border-color: var(--color-orange);
  color: var(--color-orange-strong);
}

.attr-chip--correct {
  border-color: var(--color-success);
}

.attr-chip--correct::after {
  content: ' ✓';
  color: var(--color-success);
  font-weight: 700;
}

.attr-chip--incorrect {
  border-color: var(--color-error);
}

.attr-chip--incorrect::after {
  content: ' ✗';
  color: var(--color-error);
  font-weight: 700;
}

/* Pesan visual saat kolam kosong. Renderer tetap wajib menyediakan
   teks .sr-only yang setara, karena ::after tidak terbaca screen reader.
   Kata "kolom" hanya cocok untuk materi yang memindahkan kolom tabel;
   materi lain menyetel --attr-pool-empty-text pada elemen .attr-pool. */
.attr-pool--empty::after {
  content: var(--attr-pool-empty-text, 'Semua kolom sudah ditempatkan ✓');
  font-size: 0.85rem;
  color: var(--color-success);
  font-style: italic;
}

/* Penanda chip yang sedang "dibawa" murid. Sticky agar tetap terlihat
   saat menggulir ke tabel tujuan di layar sempit. */
.selected-indicator {
  font-size: 0.85rem;
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  display: none;
  position: sticky;
  top: calc(var(--header-height) + 44px);
  z-index: 5;
}

.selected-indicator.is-visible {
  display: block;
}

/* =========================================================================
   Komponen bersama — Petunjuk yang dapat dibuka
   ========================================================================= */

.hint-reveal {
  margin-top: var(--space-3);
}

.hint-reveal summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-primary);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  background: var(--color-primary-soft);
}

.hint-reveal summary::-webkit-details-marker {
  display: none;
}

.hint-reveal summary:hover {
  background: var(--color-primary);
  color: #fff;
}

.hint-reveal__content {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--color-primary-strong);
}

/* =========================================================================
   Komponen bersama — Tabel data
   ========================================================================= */

.mini-table-wrap {
  overflow-x: auto;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.mini-table th,
.mini-table td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  text-align: left;
}

.mini-table th {
  background: var(--color-bg-grid);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* =========================================================================
   Komponen bersama — Grid otomatis
   ========================================================================= */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min, 220px), 1fr));
  gap: var(--space-3);
}

/* =========================================================================
   Komponen bersama — Teks umum
   ========================================================================= */

.lead {
  font-size: 1.02rem;
}

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

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

.plain-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--space-2);
  font-size: 0.92rem;
}

.plain-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.quote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-style: italic;
}

.char-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  margin: var(--space-1) 0 0;
}

.hint-kbd {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-primary);
  font-size: 0.84rem;
}

/* =========================================================================
   Komponen bersama — Daftar alur
   ========================================================================= */

.flow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: flow;
}

.flow-list__item {
  counter-increment: flow;
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 42px;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

.flow-list__item:last-child {
  border-bottom: none;
}

.flow-list__item::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: var(--space-3);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border: 1px solid var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}

.flow-list__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.flow-list__desc {
  display: block;
  font-size: 0.86rem;
  color: var(--color-ink-muted);
}

/* =========================================================================
   Komponen bersama — Daftar penjelasan
   ========================================================================= */

.explain-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.explain-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.explain-item.is-correct {
  border-left: 3px solid var(--color-success);
}

.explain-item.is-incorrect {
  border-left: 3px solid var(--color-error);
}

.explain-item__mark {
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1.5;
}

.explain-item.is-correct .explain-item__mark {
  color: var(--color-success);
}

.explain-item.is-incorrect .explain-item__mark {
  color: var(--color-error);
}

.explain-item__text {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.explain-item__why {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin: 0;
}

/* =========================================================================
   Komponen bersama — Kartu konsep & papan menjodohkan
   ========================================================================= */

.concept-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.concept-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--color-ink);
  min-height: 120px;
}

.concept-card:hover {
  border-color: var(--color-primary);
}

.concept-card.is-open {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.concept-card__icon {
  font-size: 1.4rem;
}

.concept-card__term {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.concept-card__def {
  font-size: 0.86rem;
  line-height: 1.5;
}

.concept-card__example {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-strong);
  margin-top: var(--space-1);
}

.concept-card__tap {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-style: italic;
}

.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.match-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.match-col__head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-1);
}

.match-term,
.match-def {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--color-ink);
  cursor: pointer;
  min-height: 52px;
}

.match-term:hover,
.match-def:hover {
  border-color: var(--color-primary);
}

.match-term.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.match-term.is-paired {
  border-color: var(--color-border-strong);
  background: var(--color-bg-grid);
}

.match-term.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.match-term.is-incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.match-term__label {
  font-weight: 600;
}

.match-term__pair {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.match-term.is-selected .match-term__pair {
  color: #fff;
}

.match-def.is-used {
  opacity: 0.45;
}

/* =========================================================================
   Komponen bersama — Kolom entitas (sasaran chip)
   ========================================================================= */

.entity-columns {
  display: grid;
  /* Jumlah kolom mengikuti banyaknya entitas pada materi: setel
     --entity-columns-count pada elemennya bila bukan tiga. */
  grid-template-columns: repeat(var(--entity-columns-count, 3), 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.entity-column {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.entity-column--blue {
  border-top: 4px solid var(--color-blue);
}

.entity-column--purple {
  border-top: 4px solid var(--color-purple);
}

.entity-column--green {
  border-top: 4px solid var(--color-green);
}

.entity-column--orange {
  border-top: 4px solid var(--color-orange);
}

.entity-column__header {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.entity-column__name {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
}

.entity-column__desc {
  display: block;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.entity-column__drop {
  margin: var(--space-3) var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.entity-column__drop:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
}

.entity-column__key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 5px;
}

.entity-column__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  flex: 1;
  align-content: flex-start;
}

.entity-column__empty {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  font-style: italic;
}

.entity-columns--readonly .attr-chip {
  cursor: default;
}

/* =========================================================================
   Komponen bersama — Pemilihan kunci
   ========================================================================= */

.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.pk-item label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: var(--space-1);
}

.pk-status {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: var(--space-1);
}

.pk-status--ok {
  color: var(--color-success-strong);
}

.pk-status--no {
  color: var(--color-error-strong);
}

/* =========================================================================
   Komponen bersama — Nomor soal
   ========================================================================= */

.question-card__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border-radius: 4px;
  padding: 2px 7px;
  margin-right: var(--space-2);
}

/* =========================================================================
   Komponen bersama — Ingatan kembali & skala Likert
   ========================================================================= */

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

.recall-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.recall-item:last-child {
  border-bottom: none;
}

.recall-item__mark {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-primary);
}

.recall-item__case {
  font-weight: 600;
  font-size: 0.88rem;
  margin: 0;
}

.recall-item__guess {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-ink-muted);
  margin: 0;
}

.recall-item__verdict {
  font-size: 0.85rem;
  margin: 0;
}

.likert {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.likert-row {
  border: none;
  margin: 0;
  padding: 0;
}

.likert-row__text {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-2);
}

.likert-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.likert-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  text-align: center;
  min-height: 44px;
}

.likert-option:hover {
  border-color: var(--color-primary);
}

.likert-option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Radio asli disembunyikan tanpa melepasnya dari pembaca layar
   maupun dari fokus keyboard. */
.likert-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.likert-option input:focus-visible + .likert-option__num {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.likert-option__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
}

.likert-option__label {
  font-size: 0.68rem;
  color: var(--color-ink-muted);
  line-height: 1.25;
}

/* =========================================================================
   Komponen bersama — Panel selesai & daftar skor
   ========================================================================= */

.done-panel {
  text-align: center;
}

.done-panel__icon {
  font-size: 2.4rem;
  display: block;
}

.done-panel__score {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-success-strong);
  margin: var(--space-2) 0 0;
}

.done-panel__pct {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin: 0;
}

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

.score-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  margin: 0;
}

.score-list__item:last-child {
  border-bottom: none;
}

.score-list__label {
  font-size: 0.9rem;
}

.score-list__value {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================================
   Komponen bersama — Penghitung temuan
   =========================================================================
   Dipakai tahap yang meminta murid menemukan sesuatu pada bahan
   (sel tabel, frasa dokumen, kartu yang harus dibuka). .cell-feedback
   adalah wadah live-region untuk umpan balik temuan terakhir; ia
   disembunyikan saat kosong supaya tidak menyisakan jarak. */

.find-counter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.find-counter__label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

.find-counter__value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--color-bg-grid);
  border-radius: 10px;
  padding: 2px 10px;
}

.find-counter.is-done .find-counter__value {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.find-counter__all {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.cell-feedback:empty {
  display: none;
}

/* =========================================================================
   Komponen bersama — Responsif
   ========================================================================= */

@media (max-width: 760px) {
  .entity-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .match-grid {
    grid-template-columns: 1fr;
  }

  .likert-scale {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  .likert-option {
    padding: var(--space-2) 2px;
  }

  .likert-option__label {
    font-size: 0.6rem;
  }

  .concept-cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Gerak
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   KOMPONEN BERSAMA GAYA ILEDIA-MATH
   Dipakai modul yang memakai engine global (shared/engine.js seksi 1–13).
   Diport dari iledia-math/shared/base.css dan memakai token tokens.css.
   ========================================================================= */

/* =========================================================================
   Kepala tahap — judul & chip sintaks (engine seksi 6)
   ========================================================================= */

.stage-head__title {
  font-size: 1.45rem;
  margin: 0 0 var(--space-2);
}

.dl-syntax-chip {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  font-size: 0.72rem;
  font-weight: 700;
}

.teacher-note {
  margin: 0 0 var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
  font-size: 0.86rem;
}

.teacher-note summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--color-ink-muted);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.teacher-note p {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  line-height: 1.6;
}

.tp-teks {
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
  font-weight: 600;
}

/* =========================================================================
   Pilihan ganda (.choice-btn) — engine seksi 6, 7, 9, 10
   ========================================================================= */

.challenge-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-ink);
  transition:
    border-color 0.12s,
    background-color 0.12s;
  min-height: 52px;
  width: 100%;
}

.choice-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.choice-btn:disabled {
  cursor: default;
}

.choice-btn.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-btn.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.choice-btn.is-incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.choice-btn.is-muted {
  opacity: 0.7;
}

.choice-btn__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.choice-btn.is-selected .choice-btn__icon {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.choice-btn.is-correct .choice-btn__icon {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

.choice-btn.is-incorrect .choice-btn__icon {
  border-color: var(--color-error);
  background: var(--color-error);
  color: #fff;
}

.choice-btn code,
.sort-item__text code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Multi-pilih: ikon kotak centang alih-alih huruf. */
.multi-btn__box {
  border-radius: var(--radius-sm);
}

.multi-select__hint {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.explain-mini {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.88rem;
}

.explain-mini__item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-bg-grid);
}

.explain-mini__item--ya {
  border-left-color: var(--color-success);
}

.explain-mini__item--tidak {
  border-left-color: var(--color-error);
}

.feedback-box__body ul {
  margin: var(--space-1) 0;
  padding-left: 1.2em;
}

.feedback-box__body p {
  margin: var(--space-1) 0 0;
}

/* =========================================================================
   Petunjuk berjenjang (engine seksi 6)
   ========================================================================= */

.hint-box {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  color: var(--color-warning-strong);
  margin-top: var(--space-3);
}

.hint-box__label {
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

/* =========================================================================
   Pemilahan kategori & pertanyaan penuntun (engine seksi 7 & 9)
   ========================================================================= */

.sort-list {
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0 0;
}

.sort-item {
  padding: var(--space-4) 0;
  border-top: 1px dashed var(--color-border);
}

.sort-item:first-child {
  border-top: none;
  padding-top: 0;
}

.sort-item__text {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  line-height: 1.5;
}

.sort-item__text--mono {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-blue-strong);
}

.sort-item__visual {
  margin: 0 0 var(--space-2);
}

.sort-counter {
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.exercise-label {
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.dl-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  vertical-align: middle;
}

.quiz-item--guided + .quiz-item--guided {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

.quiz-item--guided .exercise-label {
  line-height: 1.7;
}

/* =========================================================================
   Urut-ketuk (engine seksi 8). Varian --stack menyusun kartu teks
   panjang secara vertikal.
   ========================================================================= */

.tap-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tap-order__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tap-order__slots,
.tap-order__pool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tap-order__slots {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
}

.tap-order--stack .tap-order__slots,
.tap-order--stack .tap-order__pool {
  flex-direction: column;
  align-items: stretch;
}

.tap-order__slot,
.tap-order__card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 72px;
  min-height: 52px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.3;
  text-align: center;
}

.tap-order--stack .tap-order__slot,
.tap-order--stack .tap-order__card {
  justify-content: flex-start;
  text-align: left;
}

.tap-order__slot {
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface);
}

.tap-order__card {
  border: 2px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--color-border);
}

.tap-order__card:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.tap-order__card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.tap-order__card:disabled {
  cursor: default;
}

.tap-order__card--placed {
  border-color: var(--color-purple);
}

.tap-order__card.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.tap-order__card.is-wrong {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.tap-order__rank {
  position: absolute;
  top: -8px;
  left: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-ink-muted);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.tap-order__cap {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

/* =========================================================================
   Analisis kebutuhan data (engine seksi 12): dokumen kebutuhan bertanda
   frasa, kartu entitas, kebutuhan atribut
   ========================================================================= */

.req-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.req-doc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-blue);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 0;
}

.req-doc__head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.req-doc__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.req-doc__type {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-strong);
}

.req-doc__title {
  margin: 0;
  font-size: 0.98rem;
}

.req-doc__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
}

.req-mark {
  background: var(--color-primary-soft);
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-primary);
  padding: 1px 3px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.req-mark__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary-strong);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: 1px;
}

.req-mark__num--inline {
  margin-right: var(--space-2);
}

.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
}

.entity-card {
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  min-width: 0;
}

.entity-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
  font-family: var(--font-display);
  font-weight: 700;
}

.entity-card__attrs {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.84rem;
}

.entity-card__attr {
  padding: 3px 0;
  border-bottom: 1px dashed var(--color-border);
  overflow-wrap: anywhere;
}

.entity-card__attr:last-child {
  border-bottom: none;
}

.entity-card__attr--key {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entity-card__empty {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  font-style: italic;
}

.need-attrs {
  margin: 0;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
}

.need-attrs__label {
  color: var(--color-ink-muted);
}

.need-attr {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.need-attr--ada {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.need-attr--kurang {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

/* =========================================================================
   Teks bantu umum
   ========================================================================= */

.quote-box {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-grid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  line-height: 1.7;
}

.bullet-list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.6;
}

.bullet-list li + li {
  margin-top: var(--space-2);
}

.input-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.muted-note {
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

@media (max-width: 600px) {
  .stage-head__title {
    font-size: 1.2rem;
  }

  .choice-btn {
    padding: var(--space-3);
  }

  .req-doc-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Relasi & kardinalitas ERD (engine seksi 13): diagram relasi gaya Chen
   [A] notasi —◇kerja◇— notasi [B] dan pemilih kardinalitas dua sisi.
   Di layar sempit diagram disusun vertikal agar tidak menggulir ke samping.
   ========================================================================= */

.rel-diagram {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.rel-diagram__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
}

.rel-diagram__ent {
  flex: 0 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-sm);
  background: var(--color-blue-soft);
  color: var(--color-blue-strong);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.rel-diagram__card {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
}

.rel-diagram__card--kosong {
  background: var(--color-surface);
  border-style: dashed;
  color: var(--color-ink-muted);
}

.rel-diagram__line {
  flex: 1 1 var(--space-4);
  min-width: var(--space-3);
  max-width: var(--space-7);
  height: 2px;
  background: var(--color-ink-muted);
}

.rel-diagram__rel {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 96px;
  height: 56px;
  background: var(--color-purple-soft);
  color: var(--color-purple-strong);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
}

.rel-diagram__rel span {
  max-width: 66px;
  overflow-wrap: anywhere;
}

.rel-diagram__jenis {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-success-strong);
}

.kard-picker {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.kard-picker:first-child {
  border-top: 0;
  padding-top: 0;
}

.kard-picker__rule {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
}

.kard-picker__sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* =========================================================================
   Kerja kelompok kooperatif (engine seksi 14): kartu peran, chip topik
   ahli, dan papan penghargaan tim.
   ========================================================================= */

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.role-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.role-card__icon {
  font-size: 1.6rem;
}

.role-card__label {
  font-family: var(--font-display);
  font-weight: 700;
}

.role-card__task {
  margin: 0 0 var(--space-2);
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

.expert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.expert-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.expert-chip:hover {
  border-color: var(--color-primary);
}

.expert-chip.is-selected {
  border-color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary-strong);
}

.expert-chip__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

.expert-chip__desc {
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.reward-stat {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.reward-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.reward-stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
}

.reward-stat--accent {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.reward-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.reward-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
}

.reward-badge__icon {
  font-size: 2rem;
}

.reward-badge__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}

@media (max-width: 600px) {
  .rel-diagram__row {
    flex-direction: column;
    gap: var(--space-1);
  }

  .rel-diagram__line {
    flex: 0 0 auto;
    width: 2px;
    height: var(--space-3);
    min-width: 0;
  }

  .kard-picker__sides,
  .reward-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   ERD lengkap (engine seksi 15): legenda, kartu entitas ber-PK/FK,
   entitas penghubung, dan daftar relasi. Kartu entitas mengalir dalam
   grid auto-fit sehingga tidak pernah menggulir ke samping.
   ========================================================================= */

.erd {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  min-width: 0;
}

.erd__judul {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
}

.erd__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

.erd__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.erd__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid var(--color-blue);
  background: var(--color-blue-soft);
}

.erd__swatch--link {
  border-color: var(--color-green);
  background: var(--color-green-soft);
  border-style: dashed;
}

.erd__grid {
  margin-bottom: var(--space-4);
}

.erd__relasi .rel-diagram {
  background: var(--color-surface);
}

.erd__catatan {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: 0.85rem;
  color: var(--color-green-strong);
}

.entity-card--link {
  border-color: var(--color-green);
  border-style: dashed;
}

.entity-card--link .entity-card__head {
  background: var(--color-green-soft);
  color: var(--color-green-strong);
}

.entity-card__tag {
  margin-left: auto;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.7rem;
  font-weight: 600;
}

.entity-card__attr--fk {
  font-style: italic;
}

.entity-card__ref {
  font-size: 0.76rem;
  color: var(--color-ink-muted);
}

.entity-card--link .entity-card__head {
  flex-wrap: wrap;
}

/* =========================================================================
   Normalisasi basis data — tabel data bersel ketuk & skema relasi
   (engine.js seksi 16: buildTabelData, buildSkemaRelasi)
   ========================================================================= */

.nf-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-3) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.nf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.nf-table__caption {
  caption-side: top;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border);
}

.nf-table th,
.nf-table td {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.nf-table th {
  background: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 600;
}

.nf-table td.nf-cell--majemuk {
  background: var(--color-warning-soft);
}

.nf-table--ketuk td {
  padding: 2px;
}

.nf-cell-btn {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--space-1) var(--space-2);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.nf-cell-btn:hover {
  border-color: var(--color-border-strong);
}

.nf-cell-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.nf-cell-btn.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.nf-cell-btn.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.nf-cell-btn.is-incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.nf-cell-btn.is-missed {
  border-style: dashed;
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.nf-schema-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.nf-schema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.nf-schema__nama {
  font-family: var(--font-display);
  font-weight: 700;
}

.nf-schema__kolom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nf-schema__kol {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 0.82rem;
}

.nf-schema__kol--pk {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 700;
  text-decoration: underline;
}

.nf-schema__kol--fk {
  font-style: italic;
  border-style: dashed;
}

/* =========================================================================
   SQL DDL — blok kode bersorot, konsol DDL berlangkah, skema DBMS
   (engine.js seksi 17)
   ========================================================================= */

.sql-code {
  margin: 0;
  padding: var(--space-3);
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: #1f2428;
  color: #e8eaed;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sql-code--kecil {
  padding: var(--space-2) var(--space-3);
  font-size: 0.8rem;
}

.sql-code code {
  font: inherit;
}

.sql-kw {
  color: #ffcb6b;
  font-weight: 700;
}

.sql-type {
  color: #82aaff;
}

.sql-str {
  color: #c3e88d;
}

.sql-num {
  color: #f78c6c;
}

.sql-com {
  color: #9aa3ab;
  font-style: italic;
}

.sql-blank {
  display: inline-block;
  min-width: 4.5em;
  padding: 0 var(--space-1);
  border-bottom: 2px dashed #ffcb6b;
  color: #ffcb6b;
  text-align: center;
}

/* Rumpang yang sudah terisi benar */
.sql-blank--isi {
  border-bottom-style: solid;
  border-bottom-color: #c3e88d;
  color: #c3e88d;
}

.ddl-console__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

.ddl-console__skema {
  position: sticky;
  top: calc(var(--header-height) + 64px);
}

.ddl-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.ddl-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.ddl-step__no {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  font-weight: 700;
  font-size: 0.85rem;
}

.ddl-step__body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ddl-step__body .btn {
  justify-self: start;
}

.ddl-step--wait {
  opacity: 0.55;
}

.ddl-step--next .ddl-step__no {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.ddl-step--ok .ddl-step__no {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.ddl-step--galat .ddl-step__no {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.ddl-step__amati {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

.ddl-log {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ddl-log__item {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.ddl-log__item--ok {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.ddl-log__item--galat {
  background: var(--color-error-soft);
  color: var(--color-error-strong);
}

.ddl-log__ikon {
  font-weight: 700;
}

.ddl-log__kat {
  display: inline-block;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.08);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.ddl-free {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.ddl-free__input {
  font-family: var(--font-mono);
}

.ddl-schema {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
}

.ddl-schema--kosong {
  border-style: dashed;
}

.ddl-schema__judul {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-strong);
}

.ddl-schema__db,
.ddl-schema__kosong {
  margin: 0;
  overflow-wrap: anywhere;
}

.ddl-schema__kosong {
  color: var(--color-ink-muted);
  font-size: 0.9rem;
}

.ddl-schema__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--space-2);
}

.ddl-table {
  min-width: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.ddl-table__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-blue);
  color: #fff;
}

.ddl-table__nama {
  font-family: var(--font-mono);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ddl-table__baris {
  font-size: 0.78rem;
  opacity: 0.9;
}

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

.ddl-col {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.84rem;
}

.ddl-col__nama {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.ddl-col--pk .ddl-col__nama {
  font-weight: 700;
  text-decoration: underline;
}

.ddl-col--fk .ddl-col__nama {
  font-style: italic;
}

.ddl-col__tipe {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.ddl-col__ref {
  width: 100%;
  color: var(--color-blue-strong);
  font-size: 0.78rem;
}

/* Kamus data rancangan (buildKamusData) */
.kamus-data {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.kamus-data__judul {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
}

.kamus-data__db {
  margin: 0;
  font-size: 0.9rem;
}

.kamus-data__tabel {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.kamus-data__grid {
  min-width: 420px;
}

.kamus-data__grid td {
  vertical-align: top;
}

.kamus-data__nama {
  padding: var(--space-2) var(--space-3);
  background: var(--color-blue-soft);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: left;
}

/* Editor DDL berpemeriksa (buildEditorDdl) */
.ddl-editor {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ddl-editor__input {
  min-height: 9rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.55;
  tab-size: 2;
}

.ddl-editor--lulus .ddl-editor__input {
  border-color: var(--color-success);
}

.ddl-editor__info {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.82rem;
}

.ddl-editor__hasil {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-3);
  align-items: start;
}

.ddl-editor__log {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* Beda struktur sebelum → sesudah ALTER TABLE (buildBedaSkema) */
.ddl-beda {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
}

.ddl-beda__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.ddl-beda__tabel {
  min-width: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.ddl-beda__tabel--hapus {
  border-color: var(--color-error);
  opacity: 0.8;
}

.ddl-beda__tabel small {
  font-weight: 400;
  opacity: 0.9;
}

.ddl-beda__baris {
  font-size: 0.78rem;
  opacity: 0.95;
}

.ddl-beda__baris--hilang {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-error-soft);
  color: var(--color-error-strong);
  font-weight: 700;
}

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

.ddl-beda__kolom {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
  gap: 0 var(--space-1);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-top: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  font-size: 0.84rem;
}

.ddl-beda__ikon {
  grid-row: span 2;
  text-align: center;
}

.ddl-beda__nama {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.ddl-beda__tipe {
  grid-column: 2;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.ddl-beda__kolom--baru {
  border-left-color: var(--color-success);
  background: var(--color-success-soft);
}

.ddl-beda__kolom--ubah {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.ddl-beda__kolom--ganti {
  border-left-color: var(--color-purple);
  background: var(--color-purple-soft);
}

.ddl-beda__kolom--hapus {
  border-left-color: var(--color-error);
  background: var(--color-error-soft);
}

.ddl-beda__kolom--hapus .ddl-beda__nama {
  text-decoration: line-through;
}

.ddl-beda__legenda li {
  padding: 0 var(--space-2);
  border-left: 4px solid transparent;
  border-radius: var(--radius-sm);
}

/* Komponen Problem Based Learning: memo/kutipan masalah, log galat,
   panel berdampingan, kartu sintaks buka-tutup, daftar permintaan */
.pbl-quote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  font-style: italic;
  line-height: 1.6;
}

.app-log {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: #1f2428;
  color: #ff8a80;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pbl-banding {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-4);
  align-items: start;
}

/* Dua panel sama lebar (mis. bukti sebelum–sesudah & rancangan) */
.pbl-banding--rata {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pbl-banding > .panel {
  min-width: 0;
}

.pbl-kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.pbl-kartu {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.pbl-kartu[open] {
  border-color: var(--color-primary);
}

.pbl-kartu summary {
  min-height: 32px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
}

.pbl-kartu p {
  margin: var(--space-2) 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.pbl-permintaan {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  line-height: 1.6;
}

.pbl-permintaan li + li {
  margin-top: var(--space-1);
}

/* Server DBMS: kartu per basis data (buildServerDdl) */
.ddl-server {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
}

.ddl-server--kosong {
  border-style: dashed;
}

.ddl-server__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--space-2);
}

.ddl-server__db {
  min-width: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.ddl-server__db--aktif {
  border: 2px solid var(--color-blue-strong);
}

.ddl-server__db--hapus {
  border: 2px dashed var(--color-error);
  background: var(--color-error-soft);
}

.ddl-server__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-blue);
  color: #fff;
}

.ddl-server__db--hapus .ddl-server__head {
  background: transparent;
  color: var(--color-error-strong);
}

.ddl-server__db--hapus .ddl-server__head .ddl-server__nama {
  text-decoration: line-through;
}

.ddl-server__nama {
  font-family: var(--font-mono);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ddl-server__tag {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-blue-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.ddl-server__tag--hapus {
  background: var(--color-error);
  color: #fff;
}

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

.ddl-server__tabel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.84rem;
}

.ddl-server__tabel .ddl-server__nama {
  font-weight: 400;
}

.ddl-server__baris {
  color: var(--color-ink-muted);
  font-size: 0.78rem;
}

.ddl-server__tabel--hapus {
  border-left: 4px solid var(--color-error);
  background: var(--color-error-soft);
}

.ddl-server__tabel--hapus .ddl-server__nama {
  text-decoration: line-through;
}

.ddl-server__tabel--hapus .ddl-server__baris {
  color: var(--color-error-strong);
  font-weight: 700;
}

.ddl-server .ddl-schema__kosong {
  padding: var(--space-2) var(--space-3);
}

/* Laporan dampak penghapusan (buildDampakHapus) */
.ddl-dampak {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-md);
  background: var(--color-error-soft);
}

.ddl-dampak--aman {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.ddl-dampak .ddl-schema__judul {
  color: var(--color-error-strong);
}

.ddl-dampak--aman .ddl-schema__judul {
  color: var(--color-success-strong);
}

.ddl-dampak__total {
  margin: 0;
  font-weight: 700;
}

.ddl-dampak__daftar {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.ddl-editor__server {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

@media (max-width: 760px) {
  .pbl-banding,
  .pbl-banding--rata {
    grid-template-columns: minmax(0, 1fr);
  }

  .ddl-console__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ddl-console__skema {
    position: static;
  }

  .ddl-editor__hasil {
    grid-template-columns: minmax(0, 1fr);
  }
}