/* Demo-kit CSS — shell .demo0 + jenis demo .dk-*. Guna token style.css. */

.demo0 {
  border: 1px solid var(--line); border-radius: 16px; margin: 20px 0 8px;
  background: var(--panel); overflow: hidden;
}
.demo0-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.2);
}
.demo0-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--night); background: var(--gold); padding: 3px 9px; border-radius: 99px; font-weight: 700;
}
.demo0-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--cream); }
.demo0-inner { padding: 18px; }
.dk-cap { font-size: 13.5px; color: rgba(245, 245, 245, 0.8); margin-bottom: 12px; }

.dk-btn {
  margin-top: 14px; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  color: var(--night); background: var(--gold); border: 0; border-radius: 10px; padding: 10px 18px;
  transition: background 0.2s, transform 0.15s;
}
.dk-btn:hover { background: var(--gold-bright); }
.dk-btn:active { transform: scale(0.97); }
.dk-dim { color: rgba(245, 245, 245, 0.5); font-size: 12.5px; }

/* ---- flip cards ---- */
.dk-flip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dk-flip-card {
  cursor: pointer; text-align: left; font-family: var(--font-sans); color: var(--cream);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-height: 84px;
  display: flex; flex-direction: column; transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.dk-flip-card .q { font-weight: 700; font-size: 14px; line-height: 1.4; transition: color 0.25s; }
/* p2 — AUDIT §5: dulu max-height 0->220px. Itu sifat LAYOUT, dan kerana
   nilai akhir mesti LEBIH BESAR dari kandungan sebenar, sebahagian tempoh
   animasi dihabiskan "berlari" melepasi ketinggian betul — sebab tu buka
   terasa lambat mula dan tutup tersentak di hujung. grid-rows 0fr->1fr
   animasi ketinggian SEBENAR tanpa nilai ajaib. */
.dk-flip-card .a {
  font-size: 13px; color: var(--gold-bright); line-height: 1.55;
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows 0.3s var(--ease-out), opacity 0.25s var(--ease-out);
}
.dk-flip-card .a > * { overflow: hidden; min-height: 0; font-style: normal; display: block; }
.dk-flip-card.open { border-color: rgba(255, 77, 0, 0.4); background: rgba(255, 77, 0, 0.06); }
.dk-flip-card.open .q { color: rgba(245, 245, 245, 0.6); font-size: 12.5px; }
.dk-flip-card.open .a { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }

/* ---- stepper ---- */
.dk-steps { display: flex; flex-direction: column; }
.dk-step {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; margin: 5px 0;
  border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px;
  opacity: 0; transform: translateX(-10px); transition: opacity 0.4s, transform 0.4s;
}
.dk-step.in { opacity: 1; transform: none; }
.dk-step .ic { font-size: 16px; line-height: 1.3; }
.dk-step.act { background: rgba(255, 77, 0, 0.07); border-color: rgba(255, 77, 0, 0.28); color: var(--cream); }
.dk-step.done { background: rgba(45, 130, 80, 0.15); border-color: rgba(95, 200, 130, 0.4); color: #8fe3ac; font-weight: 700; }

/* ---- quiz ---- */
.dk-quiz { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 10px 0; background: var(--night-2); }
.dk-q { font-size: 14px; font-weight: 600; color: var(--cream); margin-bottom: 10px; }
.dk-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-opt {
  cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: rgba(245, 245, 245, 0.85);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; transition: border-color 0.2s;
}
.dk-opt:hover { border-color: rgba(255, 77, 0, 0.4); }
.dk-opt.ok { background: rgba(45, 130, 80, 0.2); border-color: rgba(95, 200, 130, 0.55); color: #8fe3ac; font-weight: 600; }
.dk-opt.no { background: rgba(255, 100, 60, 0.12); border-color: rgba(255, 120, 90, 0.5); color: #ff9b7a; }
.dk-why { margin-top: 10px; font-size: 12.5px; line-height: 1.55; }
.dk-why.good { color: #8fe3ac; }
.dk-why.bad { color: var(--ember-bright); }

/* ---- chat ---- */
.dk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dk-chip {
  cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: rgba(245, 245, 245, 0.85);
  background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.dk-chip:hover { border-color: rgba(255, 77, 0, 0.4); }
.dk-chip.on { background: var(--gold); color: var(--night); border-color: var(--gold); font-weight: 600; }
.dk-chat:empty { display: none; }
.dk-chat { display: flex; flex-direction: column; gap: 8px; }
.dk-msg { padding: 10px 14px; border-radius: 12px; font-size: 13.5px; max-width: 90%; animation: dkFade 0.3s ease; }
.dk-msg.user { align-self: flex-end; background: var(--gold); color: var(--night); font-weight: 600; border-bottom-right-radius: 3px; }
.dk-msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.06); color: var(--cream); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
@keyframes dkFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- compare toggle ---- */
.dk-compare { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color 0.3s; }
.dk-compare.bad { border-color: rgba(255, 107, 107, 0.4); }
.dk-compare.good { border-color: rgba(74, 222, 128, 0.45); }
.dk-cmp-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.dk-compare.bad .dk-cmp-label { color: #ff6b6b; background: rgba(255, 107, 107, 0.06); }
.dk-compare.good .dk-cmp-label { color: #4ade80; background: rgba(74, 222, 128, 0.06); }
.dk-cmp-body { padding: 20px 16px; font-size: 14px; color: var(--cream); animation: dkFade 0.3s ease; }
.dk-mini { display: flex; flex-direction: column; gap: 6px; }
.dk-mini.flat > * { font-size: 15px; font-weight: 400; color: rgba(245, 245, 245, 0.7); }
.dk-mini.rich small { font-size: 11px; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
.dk-mini.rich h4 { font-size: 24px; font-weight: 900; line-height: 1.1; color: var(--cream); margin: 4px 0; }
.dk-mini.rich p { font-size: 13px; color: rgba(245, 245, 245, 0.6); }

/* ---- terminal ---- */
.dk-term {
  background: #0a0a0a; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; min-height: 60px; max-height: 260px; overflow-y: auto;
}
.dk-term:empty::before { content: 'terminal…'; color: rgba(245, 245, 245, 0.3); }
.dk-tline { color: #e5e5e5; animation: dkFade 0.25s ease; }
.dk-prompt { color: var(--gold-bright); font-weight: 700; }
.dk-tout { color: #8fe3ac; padding-left: 16px; animation: dkFade 0.25s ease; }

/* ---- sync devices ---- */
.dk-sync { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dk-dev {
  cursor: pointer; flex: 1 1 120px; max-width: 160px; text-align: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px; background: var(--night-2); transition: transform 0.2s, border-color 0.2s;
}
.dk-dev:hover { border-color: rgba(255, 77, 0, 0.4); }
.dk-dev.tap { transform: scale(0.95); border-color: var(--gold); }
.dk-dev-ic { font-size: 30px; }
.dk-dev-scr { min-height: 26px; margin: 8px 0; border-radius: 6px; background: rgba(255, 255, 255, 0.04); display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(245, 245, 245, 0.4); transition: background-color 0.2s, color 0.2s; }
.dk-dev-scr.on { background: rgba(255, 77, 0, 0.12); color: var(--gold-bright); font-weight: 600; }
.dk-dev-nm { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(245, 245, 245, 0.6); text-transform: uppercase; }

/* ---- journey (Kandungan) ---- */
.dk-journey { display: flex; flex-direction: column; }
.dk-jstop { display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left; width: 100%; background: transparent; border: 0; padding: 10px 8px; position: relative; border-radius: 10px; transition: background 0.2s; }
.dk-jstop:hover { background: rgba(255, 255, 255, 0.04); }
.dk-jstop:not(:last-child)::before { content: ''; position: absolute; left: 24px; top: 40px; bottom: -8px; width: 2px; background: var(--line); }
.dk-jstop .jd { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: rgba(245, 245, 245, 0.7); background: var(--night-2); border: 1px solid var(--line); position: relative; z-index: 1; transition: border-color 0.2s, color 0.2s; }
.dk-jstop:hover .jd { border-color: var(--gold); color: var(--gold-bright); }
.dk-jstop .jl { flex: 1; min-width: 0; }
.dk-jstop .jl b { display: block; font-size: 14px; color: var(--cream); font-weight: 600; }
.dk-jstop .jl i { font-style: normal; font-size: 12px; color: rgba(245, 245, 245, 0.55); }
.dk-jstop .jgo { flex: 0 0 auto; color: var(--gold-bright); font-size: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s var(--ease-out); }


/* p2 — AUDIT §6: site latihan ni dibuka atas tablet/telefon semasa sesi.
   Tap pada skrin sentuh cetus :hover yang MELEKAT selepas jari diangkat,
   jadi kad kekal terangkat sampai user tap tempat lain — nampak rosak.
   Hover yang cuma tukar WARNA dibiar (tak nampak rosak bila melekat). */
@media (hover: hover) and (pointer: fine) {
  .dk-flip-card:hover { border-color: rgba(255, 77, 0, 0.4); transform: translateY(-2px); }
  .dk-jstop:hover .jgo { opacity: 1; transform: none; }
}
/* p2 — anak panah ni DIDEDAH oleh hover. Atas peranti sentuh tiada hover,
   jadi ia kena kekal kelihatan — kalau tidak afordans "boleh klik" hilang. */
@media (hover: none) {
  .dk-jstop .jgo { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dk-step, .dk-msg, .dk-tline, .dk-tout, .dk-cmp-body, .dk-flip-card, .dk-flip-card .a, .dk-jstop .jgo, .dk-dev { transition: none; animation: none; }
}