/* ============================================================
   exercises.css — interactive exercise components:
   live cash-flow table, number pad, MCQ cards, sortable tiles,
   animated concept demos. Desktop-first, touch-friendly.
   ============================================================ */

/* ---------- Facts strip (given numbers above the table) ---------- */
.facts {
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center;
}
.fact {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
.fact b { color: var(--blue); }

/* ---------- Live cash-flow table ---------- */
.cft-wrap { width: 100%; display: flex; justify-content: center; }
table.cft {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 520px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  border: 2px solid var(--line);
}
.cft th, .cft td {
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  text-align: right;
  font-weight: 700;
}
.cft tr:last-child th, .cft tr:last-child td { border-bottom: none; }
.cft thead th {
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cft th.cft__rowhead {
  text-align: left;
  color: var(--ink);
  background: #fff;
  white-space: nowrap;
}
.cft tr.cft__total th.cft__rowhead { color: #000; }
.cft tr.cft__total td, .cft tr.cft__total th { background: #fcfcfc; }

/* cell states */
.cft__cell { color: var(--ink); position: relative; min-width: 84px; transition: background-color 160ms var(--ease); }
.cft__cell--given { color: var(--ink-soft); }
.cft__cell--blank { color: var(--line-d); }
.cft__cell--active {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 3px var(--blue);
  border-radius: 8px;
  animation: cell-glow 1.3s var(--ease) infinite;
}
@keyframes cell-glow {
  0%,100% { box-shadow: inset 0 0 0 3px var(--blue); }
  50%     { box-shadow: inset 0 0 0 3px var(--blue), 0 0 14px rgba(28,176,246,0.55); }
}
.cft__cell--done {
  background: var(--green-soft);
  color: var(--green-ink);
  animation: cell-pop 380ms var(--ease-back) both;
}
.cft__cell--wrong { background: var(--red-soft); color: var(--red-ink); animation: shake 380ms var(--ease) both; }
@keyframes cell-pop { 0%{transform:scale(0.6);opacity:.3} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }
.cft__cell--done::after {
  content: "✓"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--green); font-weight: 900;
}
.cft__val { display:inline-block; min-width: 1ch; }
.cft__caret { display:inline-block; width: 2px; height: 1.1em; background: var(--blue); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Spot-the-error: tappable cells ---------- */
.cft__pick {
  font: inherit; font-weight: 800; color: var(--blue-d);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r2, 10px);
  padding: 4px 10px; cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}
.cft__pick:hover { border-color: var(--blue); }
.cft__pick--on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-d); }
.cft__pick--bad { border-color: var(--red); background: var(--red-soft); color: var(--red-ink); white-space: nowrap; }

/* ---------- Stacked / wrapping facts (glossary + read-the-prose) ---------- */
.facts--stack { flex-direction: column; align-items: stretch; }
.facts--stack .fact, .fact--wrap { white-space: normal; text-align: left; line-height: 1.45; }

/* ---------- Number pad ---------- */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.key {
  appearance: none; border: 2px solid var(--line);
  background: #fff; color: var(--ink);
  font-weight: 800; font-size: 1.35rem;
  border-radius: var(--r-sm);
  min-height: 56px;
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
  transition: transform 60ms var(--ease), box-shadow 60ms var(--ease);
}
.key:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); background: var(--panel); }
.key--wide { grid-column: span 1; }
.key--fn { color: var(--blue); }

/* ---------- Multiple-choice cards ---------- */
.choices { display: flex; flex-direction: column; gap: var(--s3); width: 100%; }
.choice {
  display: flex; align-items: center; gap: var(--s3);
  text-align: left; width: 100%;
  background: #fff; border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--r);
  padding: var(--s4);
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
  cursor: pointer;
  transition: transform 60ms var(--ease), border-color 120ms, background-color 120ms;
}
.choice:active { transform: translateY(2px); }
.choice__badge {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
  border: 2px solid var(--line); display: grid; place-items: center;
  font-size: 0.95rem; color: var(--ink-soft);
}
.choice--selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-d); }
.choice--selected .choice__badge { border-color: var(--blue); color: var(--blue-d); }
.choice--correct { border-color: var(--green); background: var(--green-soft); color: var(--green-ink); }
.choice--wrong { border-color: var(--red); background: var(--red-soft); color: var(--red-ink); }
.choice:disabled { cursor: default; }

/* ---------- Sortable / selectable tiles ---------- */
.tiles { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.tile {
  background: #fff; border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: var(--r-sm); padding: 10px 16px;
  font-weight: 800; color: var(--ink); cursor: pointer;
  transition: transform 60ms var(--ease), border-color 120ms, background-color 120ms, opacity 160ms;
}
.tile:active { transform: translateY(2px); }
.tile--on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-d); }
.tile--correct { border-color: var(--green); background: var(--green-soft); color: var(--green-ink); }
.tile--wrong { border-color: var(--red); background: var(--red-soft); color: var(--red-ink); }

.buckets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: 100%; }
.bucket {
  border: 2px dashed var(--line); border-radius: var(--r);
  padding: var(--s3); min-height: 92px;
  display: flex; flex-direction: column; gap: var(--s2);
}
.bucket__head { text-align: center; font-weight: 800; text-transform: uppercase; font-size: 0.85rem; color: var(--ink-soft); }
.bucket--in { border-color: var(--green); }
.bucket--out { border-color: var(--red); }

/* ---------- Animated concept demo ---------- */
.demo { width: 100%; display: flex; flex-direction: column; gap: var(--s4); align-items: center; }
.demo__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); width: 100%; max-width: 460px; }
.demo__col {
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--r);
  padding: var(--s3); display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  min-height: 200px; justify-content: flex-end; position: relative;
}
.demo__col h4 { margin: 0; position: absolute; top: 8px; font-size: 0.95rem; color: var(--ink-soft); }
.demo__bar {
  width: 64%; border-radius: 10px 10px 0 0;
  height: 0; transition: height 1100ms var(--ease-back), background-color 300ms;
  display: flex; align-items: flex-start; justify-content: center; color: #fff; font-weight: 800; padding-top: 6px;
}
.demo__bar--in { background: var(--green); }
.demo__bar--out { background: var(--red); }
.demo__net { font-weight: 800; font-size: 1.1rem; min-height: 1.4em; }
.demo__caption {
  text-align: center; font-weight: 700; min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
  animation: pop-in 240ms var(--ease-back);
}
.coin {
  display:inline-block; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe27a, var(--yellow));
  border: 2px solid #e0a800; margin: 2px;
  animation: pop-in 300ms var(--ease-back) both;
}

/* ---------- Numeric input (typed answers, desktop) ---------- */
.bignum {
  font-size: var(--fs-big); font-weight: 800; text-align: center;
  border: none; border-bottom: 3px solid var(--blue);
  width: min(280px, 80%); background: transparent; color: var(--ink);
  padding: var(--s2); font-variant-numeric: tabular-nums;
}
.bignum:focus { outline: none; }

/* ---------- Certificate (on-screen + final celebration) ---------- */
.cert {
  width: 100%; max-width: 520px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, #fffefc, #fff);
  border: 4px solid var(--green); border-radius: var(--r);
  padding: var(--s5);
}
.cert__title { margin: 0 0 var(--s2); font-size: var(--fs-title); font-weight: 900; color: var(--green-ink); }
.cert__name { font-size: var(--fs-big); font-weight: 900; margin: var(--s2) 0; border-bottom: 3px solid var(--yellow); display:inline-block; padding: 0 12px 4px; }
.cert__stats { display:flex; flex-direction:column; gap:4px; margin: var(--s3) 0; color: var(--ink); }
.cert__teacher { margin-top: var(--s3); }
.cert__teacher input {
  font: inherit; text-align:center; border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 12px; min-width: 240px; min-height: var(--tap);
}

/* ---------- +/- sign toggle (for negative amounts) ---------- */
.signbtn {
  appearance: none;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
  border-radius: var(--r-sm);
  min-height: 56px;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 60ms var(--ease), border-color 120ms;
}
.signbtn:active { transform: translateY(2px); }
.signbtn:hover { border-color: var(--blue); color: var(--blue-d); }