/* Math app - math-only styles; generic ones live in /shared/learn.css */
/* ten-frame dots */
.frames { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.frame { display: grid; grid-template-columns: repeat(5, 26px); gap: 5px; padding: 6px; border: 3px solid #adb5bd; border-radius: 10px; }
.td { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f5; }
.td.a { background: #ff6b6b; } .td.b { background: #4dabf7; }
.td.x { background: #ffc9c9; position: relative; }
.td.x::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c92a2a; font-size: 18px; font-weight: 700; }

/* prompts, worksheet-style stacked problems */
.problem.seq { font-size: clamp(1.8rem, 9vw, 3rem); white-space: normal; }
.vert-wrap { display: flex; justify-content: center; }
.vert { display: grid; column-gap: 0; row-gap: 2px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.vd { text-align: center; }
.vop { padding-right: 10px; text-align: right; }
.vline { height: 6px; background: var(--ink); border-radius: 3px; margin: 4px 0; }
.vd.vans { color: #4dabf7; min-height: 1.05em; }

/* base-ten blocks */
.bt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bt-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bt-g { display: flex; gap: 3px; flex-wrap: wrap; align-items: flex-end; max-width: 210px; }
.bt-ones { max-width: 52px; }
.bt-h {
  width: 50px; height: 50px; border: 2px solid #1971c2; background-color: #74c0fc;
  background-image: linear-gradient(#1971c2 1px, transparent 1px), linear-gradient(90deg, #1971c2 1px, transparent 1px);
  background-size: 4.8px 4.8px;
}
.bt-t {
  width: 9px; height: 50px; border: 2px solid #2b8a3e; background-color: #8ce99a;
  background-image: linear-gradient(#2b8a3e 1px, transparent 1px); background-size: 100% 4.8px;
}
.bt-o { width: 9px; height: 9px; border: 2px solid #c92a2a; background: #ffa8a8; }
.bt-cap { font-size: .9rem; color: #495057; }
.problem .bt { margin-bottom: 6px; }

/* place-value chart */
.pv { border-collapse: collapse; margin: 0 auto; font-size: 1.2rem; }
.pv th, .pv td { border: 2px solid #dee2e6; padding: 6px 10px; text-align: center; }
.pv th { font-size: .85rem; color: #495057; }
.pv td { font-size: 1.6rem; font-weight: 700; min-width: 2em; }
.pv td.hl { background: #fff3bf; color: #e8590c; }

/* skip-counting number line */
.nline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.nl-dot {
  min-width: 52px; height: 52px; padding: 0 6px; border-radius: 999px; background: #e7f5ff; border: 3px solid #4dabf7;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700;
}
.nl-dot.hl { background: #fff3bf; border-color: #fab005; color: #e8590c; }
.jump { font-size: .85rem; font-weight: 700; color: #2f9e44; }
.pt { margin-top: 8px; }
.pt-sub { margin: 8px 0 0; font-weight: 700; }

/* Telling time */
.clock { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.problem.digital { font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.show-clock { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.legend { text-align: left; font-size: 1rem; font-weight: 700; }
.legend p { margin: 2px 0; }
.lg-hour { color: #e8590c; } .lg-min { color: #1971c2; }
.problem.wp { font-size: 1.5rem; white-space: normal; text-align: left; line-height: 1.35; }
.problem.wp .blank { min-width: 2.2em; text-align: center; }

/* Money */
.problem.money { font-size: 1.4rem; white-space: normal; }
.money-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.money-item { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.coin-name { font-size: .8rem; font-weight: 700; color: #495057; }
.bill {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 44px; border-radius: 6px; background: #b2f2bb; border: 3px solid #2b8a3e;
  color: #1b4d2a; font-size: 1.3rem; font-weight: 700; line-height: 1;
}
.bill small { font-size: .55rem; letter-spacing: 1px; }
.money-ans { font-size: 2.6rem; font-weight: 700; margin-top: 8px; color: #adb5bd; letter-spacing: 3px; }
.money-ans.typed, .money-ans .blank { color: #4dabf7; }
.group { display: flex; align-items: center; gap: 10px; padding: 6px; margin: 6px 0; border: 3px dashed #dee2e6; border-radius: 16px; }
.group-label { font-size: 1.6rem; font-weight: 700; width: 1.4em; }
.count-up { align-items: flex-start; }
.cu-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.cu-total { font-size: .95rem; font-weight: 700; color: #2f9e44; }
.mk-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-coin {
  min-height: 92px; border: 3px solid #ffcc33; border-radius: 18px; background: #fff9db;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation; cursor: pointer; padding: 4px;
}
.mk-coin:active { transform: translateY(2px); }
.mk-total { margin: 4px 0 0; font-size: 1.5rem; font-weight: 700; }
.mk-have { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 36px; }
.mk-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-undo { background: #868e96; } .mk-check { background: #51cf66; }

/* Word problems: bar model */
.wp-text { margin: 0 0 10px; }
.wp-ans { font-size: 2rem; font-weight: 700; text-align: center; }
.bm-wrap { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bm { display: flex; flex-direction: column; gap: 4px; }
.bm-row { display: flex; gap: 4px; }
.bm-seg {
  flex-basis: 0; min-width: 36px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-weight: 700; font-size: 1.1rem; color: #fff;
}
.bm-seg.whole { background: #9775fa; }
.bm-seg.p0 { background: #ff922b; } .bm-seg.p1 { background: #4dabf7; } .bm-seg.p2 { background: #51cf66; }
.bm-seg.diff { background: #fff; color: #e8590c; border: 3px dashed #e8590c; }
.bm-seg.unk { outline: 3px solid var(--ink); outline-offset: -3px; font-size: 1.4rem; }
.bm-eq { margin: 0; font-size: 1.5rem; font-weight: 700; text-align: center; }