/* Manipulatives share the same materials in the worksheet and enlarged view. */
.learning-model {
  --model-edge: #cad8e3;
  --model-blue: #214e79;
  --model-wash: #f0f5fa;
  --model-ink: #233e54;
  --model-accent: #a37034;
  --disc-size: 38px;
  --disc-gap: 5px;
}

.counter-disc, .learning-model .counter, .purpose-dot {
  --disc-face: #a9cdf0;
  --disc-rim: #467bb6;
  --disc-ink: #163f75;
  --disc-light: #eaf5ff;
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--disc-size);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--disc-rim);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 27%, var(--disc-light), var(--disc-face) 72%);
  color: var(--disc-ink);
  box-shadow: inset 0 -2px 0 rgb(31 57 85 / 16%), 0 1.5px 1px rgb(31 57 85 / 16%);
  font-size: calc(var(--disc-size) / max(2.5, var(--disc-label, 1) * .83));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
}
.counter-disc::before, .learning-model .counter::before, .purpose-dot::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 9%;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 50%;
}
.counter-disc.exchange-large { --disc-size: 49px; }
.exchange-loose .counter-disc, .exchange-keep .counter-disc { justify-self: center; }
.counter-pile { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.counter-pile > strong { font-size: 15px; font-weight: 400; }
.learning-model .counter { --disc-size: var(--dot-size, 17px); }
.purpose-dot { --disc-size: var(--dot, 17px); height: var(--disc-size); }
.learning-model .counter.second, .purpose-dot.focus, .purpose-dot.second,
.purpose-array-row.second-set .purpose-dot {
  background: radial-gradient(circle at 36% 27%, #fff1c8, #ebbb69 80%);
  border-color: #9b6b27;
}
.learning-model .counter.blank, .purpose-dot.blank {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}
.learning-model .counter.blank::before, .purpose-dot.blank::before { content: none; }
.learning-model .counter.crossed, .purpose-dot.crossed { opacity: .8; }

.purpose-exchange { display: grid; justify-items: center; gap: 7px; }
.purpose-exchange .purpose-given { margin: 0; }
.exchange-lanes { display: grid; justify-items: center; gap: 7px; max-width: 100%; }
.exchange-pair { display: flex; align-items: center; justify-content: center; gap: 9px; }
.exchange-equals { min-width: 12px; font-size: 20px; text-align: center; color: var(--model-blue); }
.exchange-tray {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--disc-size));
  gap: var(--disc-gap);
  padding: 5px 6px 7px;
  width: fit-content;
  border: 1px solid #a9bdd3;
  border-radius: 8px;
  background: linear-gradient(165deg, #e6eef6, #f8fbfd 72%);
  box-shadow: inset 0 1px 2px rgb(35 67 99 / 12%);
}
.exchange-multiple .exchange-pair:has(.exchange-tray[data-size="10"]) {
  --disc-size: 24px;
  --disc-gap: 3px;
  gap: 6px;
}
.exchange-multiple .exchange-pair .exchange-tray[data-size="10"] { grid-template-columns: repeat(10, var(--disc-size)); }
.exchange-multiple .exchange-large { --disc-size: 37px; }
.exchange-multiple .exchange-equals { font-size: 15px; }
.exchange-collection.exchange-multiple {
  --disc-size: min(27px, calc((100cqw - 64px) / 10));
  --disc-gap: 3px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
}
.learning-model:has(.collection-range) .purpose-exchange .purpose-given { display: none; }
.purpose-exchange .exchange-calculation { margin: 2px 0 0; }
.exchange-keep { color: var(--model-blue); font-size: 14px; }

.learning-model :is(.purpose-group, .counter-group, .place-groups > div, .scaled-array) {
  border-color: var(--model-edge);
  border-radius: 8px;
  background: var(--model-wash);
  box-shadow: inset 0 1px 2px rgb(35 67 99 / 8%);
}
.learning-model .purpose-group.is-active { background: #fff8e8; border-color: #d8b783; }
.learning-model .value-chart {
  border: 1px solid var(--model-edge);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.learning-model .value-column {
  min-width: 0;
  border: 0;
  border-inline-end: 1px solid var(--model-edge);
}
.learning-model .value-column:last-child { border-inline-end: 0; }
.learning-model .value-heading { border-color: var(--model-edge); background: var(--model-wash); }
.learning-model .value-pieces .counter-disc { --disc-size: 32px; }
.learning-model .value-chart:has(.value-column:nth-child(5)) .counter-disc { --disc-size: 28px; }
.value-pieces .counter-pile { flex-direction: column; gap: 3px; }
.value-pieces .counter-pile > strong { font-size: 12px; }
.learning-model .value-column.model-focus { background: #fff9ed; }
.learning-model .coin-collection .counter-disc { --disc-size: 43px; }
.scaled-array {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--disc-size));
  justify-content: center;
  width: max-content;
  max-width: 100%;
  gap: 4px;
  padding: 8px;
  margin: 0 auto;
}
.scaled-fact-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.scaled-fact-compact .scaled-array { margin: 0; padding: 6px; gap: 3px; }
.scaled-fact-key {
  display: grid;
  justify-items: center;
  flex: 0 1 100px;
  text-align: center;
}
.scaled-fact-key .model-note { margin: 5px 0 0; }

/* These rules also apply to authored steps and their enlarged view. */
.learning-model .equation-model { gap: 8px; }
.learning-model .equation-model > p {
  border: 1px solid var(--model-edge);
  border-radius: 5px;
  background: #fff;
  padding: 8px 10px;
  line-height: 1.55;
}
.learning-model .equation-model > p:has(.math-blank) { border-inline-start: 3px solid #8872ae; }
.learning-model .math-table th { color: var(--model-blue); background: var(--model-wash); }
.learning-model .math-table :is(th, td) { border-color: var(--model-edge); }
.learning-model .math-table tr:nth-child(even) td { background: #f8fafc; }
.learning-model .purpose-parts > section, .learning-model .purpose-equal-groups > span {
  border-color: #b9ccde;
  border-radius: 5px;
  background: var(--model-wash);
}
.learning-model .purpose-parts > section.is-unknown { background: #f5f0fa; border-style: dashed; }
.learning-model .purpose-equal-groups > span.is-active { background: #fff6e3; border-color: #d8b783; }
.purpose-group-model.is-compact .purpose-note { margin: 4px 0; }
.purpose-group-model.is-compact .purpose-given { margin-bottom: 4px; }
.purpose-group-model.is-compact .purpose-equation { margin: 5px 0 0; font-size: 16px; }
.purpose-group-model.is-compact .purpose-equal-groups { gap: 4px; }
.purpose-group-model.is-compact .purpose-equal-groups > span { min-height: 30px; padding: 4px; font-size: 16px; }
.learning-model .purpose-bar-row { border-radius: 4px; overflow: hidden; }
.learning-model .purpose-bar-row > span { background: #e6f0fb; }
.learning-model .purpose-bar-row > span.is-unknown { background: #f4eef8; }
.purpose-area {
  display: grid;
  grid-template-columns: minmax(75px, 144px) auto;
  justify-content: center;
  align-items: center;
  gap: 2px 8px;
  text-align: center;
}
.area-width { grid-column: 1; color: #624988; line-height: 1.2; }
.area-face {
  grid-column: 1;
  padding: 5px;
  border: 1.5px solid #527ca3;
  background: linear-gradient(160deg, #edf5fe, #dcebf8);
  color: var(--model-blue);
  font-weight: 400;
}
.area-height { grid-column: 2; white-space: nowrap; font-size: 14px; }
.area-schematic { grid-column: 1 / -1; color: #4f6478; font-size: 10px; }
.learning-model .ten-frame { border-color: var(--model-edge); }
.learning-model .ten-frame > span { background: #f4f7fa; border-color: var(--model-edge); }

@container (max-width: 345px) {
  .learning-model { --disc-size: 30px; --disc-gap: 4px; }
  .counter-disc.exchange-large { --disc-size: 44px; }
  .learning-model .value-pieces .counter-disc { --disc-size: 26px; }
  .learning-model .value-chart:has(.value-column:nth-child(5)) .counter-disc { --disc-size: 22px; }
  .exchange-multiple .exchange-pair:has(.exchange-tray[data-size="10"]) { --disc-size: 22px; }
}
@container (max-width: 280px) {
  .learning-model { --disc-size: 26px; --disc-gap: 3px; }
  .counter-disc.exchange-large { --disc-size: 39px; }
  .learning-model .value-pieces .counter-disc { --disc-size: 22px; }
  .learning-model .value-chart:has(.value-column:nth-child(5)) .counter-disc { --disc-size: 19px; }
  .exchange-multiple .exchange-pair:has(.exchange-tray[data-size="10"]) { --disc-size: 19px; --disc-gap: 2px; }
  .exchange-multiple .exchange-large { --disc-size: 33px; }
}
@media screen and (max-height: 620px) {
  .exchange-pair { gap: 6px; }
  .purpose-exchange .purpose-given strong { font-size: 18px; }
  .purpose-exchange .purpose-given > span, .exchange-keep { font-size: 11px; }
  .purpose-exchange .exchange-calculation { font-size: 16px; }
  .learning-model .equation-model > p { padding: 5px 8px; }
}
@media print {
  .counter-disc, .learning-model .counter, .purpose-dot { print-color-adjust: exact; }
}