/* AdaLogic math section — worked examples, digit grids, method boxes. */

.math-hub-lead { max-width: 46rem; }

.math-grade-grid, .math-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 16px 0 28px;
}

.math-card {
  display: block;
  border: 1px solid #cfe3f7;
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.math-card:hover { border-color: #1cb0f6; box-shadow: 0 3px 10px rgba(28,176,246,.18); }
.math-card b { display: block; margin-bottom: 4px; color: #0f3557; }
.math-card small { color: #5b6b7c; line-height: 1.4; display: block; }
.math-card .math-card-list { margin: 6px 0 0; padding: 0; list-style: none; }
.math-card .math-card-list li { font-size: 13px; color: #334155; padding: 1px 0; }
.math-card .math-card-list li::before { content: "→ "; color: #1cb0f6; }

.grade-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 6px 8px 0;
}
.grade-chip.topic { color: #075985; background: #e8eef4; text-transform: none; letter-spacing: 0; }

/* Worked-example digit grids */
.digit-work {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 20px;
  line-height: 1.5;
  background: #f8fafc;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 12px 0;
  white-space: pre;
  color: #1e293b;
}
.digit-work .carry { color: #0284c7; font-size: 15px; }
.digit-work .hi { background: #dbeafe; border-radius: 3px; }
.digit-work .ans { border-top: 2px solid #1e293b; }
.digit-work .done { color: #94a3b8; }

.method-box {
  border-left: 4px solid #1cb0f6;
  background: #f0f9ff;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 14px 0;
}
.method-box.warn { border-left-color: #f59e0b; background: #fffbeb; }
.method-box b.tag { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #0369a1; margin-bottom: 4px; }
.method-box.warn b.tag { color: #b45309; }

.math-steps { counter-reset: step; margin: 12px 0; padding: 0; list-style: none; }
.math-steps li {
  counter-increment: step;
  position: relative;
  padding: 8px 0 8px 44px;
}
.math-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #1cb0f6;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

.try-it {
  border: 1px dashed #94c9ef;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0;
  background: #fbfdff;
}
.try-it b { color: #0369a1; }

/* References */
.refs { font-size: 14px; }
.refs li { margin-bottom: 10px; line-height: 1.55; }
.refs .doi { color: #64748b; }
.refs a { word-break: break-word; }

.math-cross {
  border-top: 1px solid #dbe7f3;
  margin-top: 28px;
  padding-top: 12px;
  font-size: 14px;
}

/* Interactive practice (math-quiz.js) */
.math-practice {
  border: 1px solid #9cc4e4;
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px 18px;
  margin: 16px 0;
}
.math-practice > b, .math-practice > .mp-title {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #0369a1;
  margin-bottom: 8px;
}
.mq { padding: 10px 0; border-top: 1px dashed #dbe7f3; }
.mq:first-of-type { border-top: 0; }
.mq > p { margin: 0 0 8px; }
.mq-in {
  font-family: inherit; font-size: 15px;
  width: 120px; padding: 5px 9px;
  border: 1.5px solid #94c9ef; border-radius: 6px;
  background: #fff;
}
.mq-in:focus { outline: none; border-color: #1cb0f6; }
.mq-in.mq-ok { border-color: #2a9d5c; background: #f0fdf4; }
.mq-in.mq-bad { border-color: #e07020; background: #fff7ed; }
.mq-opt {
  font: inherit; font-size: 14.5px;
  padding: 6px 14px; margin: 0 8px 6px 0;
  border: 1.5px solid #94c9ef; border-radius: 6px;
  background: #fff; cursor: pointer;
}
.mq-opt:hover { border-color: #1cb0f6; }
.mq-opt.sel { border-color: #0b6bcb; background: #e8f1fb; font-weight: 700; }
.mq.mq-ok > p::after { content: " ✓"; color: #2a9d5c; font-weight: 700; }
.mq.mq-bad > p::after { content: " ✗"; color: #e07020; font-weight: 700; }
.mq-hint { display: inline-block; margin-left: 10px; font-size: 13px; }
.mq-hint.ok { color: #2a9d5c; }
.mq-hint.bad { color: #b45309; }
.mq-step { margin: 6px 0; font-size: 15px; }
.mq-controls { margin-top: 12px; }
.mq-btn {
  font: inherit; font-weight: 700; font-size: 14px;
  padding: 8px 18px; margin-right: 8px;
  border: 0; border-radius: 6px;
  background: #0b6bcb; color: #fff; cursor: pointer;
}
.mq-btn:hover { background: #0a5db2; }
.mq-btn.ghost { background: #e8f1fb; color: #0f1b2d; border: 1px solid #9cc4e4; }
.mq-btn.ghost:hover { background: #d4e7f8; }
.mq-score {
  margin-top: 12px; padding: 10px 14px;
  border-radius: 8px; font-size: 15px;
}
.mq-score.ok { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.mq-score.mid { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.mq-score.bad { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; }

/* Canvas visualizations (math-viz.js) */
.math-viz {
  margin: 14px 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
  display: inline-block;
}
.math-viz canvas { display: block; }

/* Lambda calculus widgets (math-lambda.js) */
.lambda-reduce, .lambda-try {
  border: 1px solid #9cc4e4;
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px 18px;
  margin: 16px 0;
}
.lr-term {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 19px;
  background: #f8fafc;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0;
  overflow-x: auto;
  white-space: pre;
  color: #1e293b;
}
.lr-redex { background: #dbeafe; border-bottom: 2px solid #0b6bcb; border-radius: 3px; }
.lr-controls { margin: 10px 0 6px; }
.lr-status { font-size: 14px; color: #334155; margin: 6px 0; }
.lr-status.done { color: #166534; }
.lr-status.warn { color: #b45309; }
.lr-hint { font-size: 14px; color: #475569; margin: 4px 0; }
.lr-hist {
  max-height: 190px; overflow-y: auto;
  font-family: "Consolas", "Courier New", monospace; font-size: 14px;
  border-top: 1px dashed #dbe7f3; padding-top: 8px; margin-top: 8px;
}
.lr-hist-line { padding: 3px 0; border-bottom: 1px solid #eef4fa; white-space: pre; overflow-x: auto; }
.lr-hist-line b { color: #94a3b8; font-weight: 400; display: inline-block; width: 2.2em; }
.lr-inputrow { display: flex; gap: 8px; margin: 8px 0; }
.lr-input {
  flex: 1; font-family: "Consolas", "Courier New", monospace; font-size: 15px;
  padding: 7px 11px; border: 1.5px solid #94c9ef; border-radius: 6px; background: #fff;
}
.lr-input:focus { outline: none; border-color: #1cb0f6; }
.lr-widget .mq-btn[disabled] { opacity: .5; cursor: default; }

/* Grade-band navigation on the math hub */
.math-band { margin: 26px 0; }
.math-band > h3 {
  font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  color: #0369a1; border-bottom: 2px solid #cfe3f7;
  padding-bottom: 4px; margin-bottom: 10px;
}