/* css/build.css - задачи 1 класса «Собери решение» (решение 142, макет ~/pally/mockups/sobery/): маленькая картинка
   группами и тетрадная запись «5 ☐ 2 = ☐» (buildHtml в js/app/lesson-view.js) */

/* Картинка группами: маленькая, группа не рвётся посередине, между группами - промежуток */
.big.groups { font-size: clamp(20px, 6.2vw, 32px); line-height: 1.35; letter-spacing: .04em; white-space: normal; padding: 10px 12px; }
.big.groups .pic-line { display: block; }
.big.groups .pic-grp { display: inline-block; white-space: nowrap; margin: 0 .45em; }
.app.lesson .run-card .big.groups { font-size: clamp(20px, 6.2vw, 32px); padding: 10px 12px; }

/* Тетрадная запись: клетка, крупные цифры, окошки */
.sheet {
  margin-top: 12px; padding: 12px 8px; border-radius: 16px; background: #fffdf3; color: #1d2a52;
  background-image: linear-gradient(#d6e0f2 1px, transparent 1px), linear-gradient(90deg, #d6e0f2 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex; justify-content: center; align-items: center; gap: .26em;
  font-size: clamp(38px, 11vw, 60px); font-weight: 900; line-height: 1;
}
.sheet .slot {
  width: 1.4em; height: 1.4em; border-radius: 14px; border: 4px dashed #9aa8c8; background: rgba(255, 255, 255, .6);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.sheet .slot.now { border: 5px solid #ffb81c; background: #fff; box-shadow: 0 0 0 6px rgba(255, 184, 28, .3); animation: slot-blink 1.1s ease-in-out infinite; }
.sheet .slot.fill { border: 4px solid #6c80b8; background: #fff; }
.sheet .slot.ok { border: 4px solid #35b36b; background: #e3f7e9; }
@keyframes slot-blink { 50% { box-shadow: 0 0 0 12px rgba(255, 184, 28, .05); } }
@media (prefers-reduced-motion: reduce) { .sheet .slot.now { animation: none; } }

/* Знак полосками, ровно по центру окошка и кнопки (буква «+» шрифта сидит ниже середины) */
.sg { position: relative; display: inline-block; width: .6em; height: .6em; }
.sg::before, .sg.plus::after { content: ''; position: absolute; background: currentColor; border-radius: .06em; }
.sg::before { left: 0; right: 0; top: 50%; height: .13em; margin-top: -.065em; }
.sg.plus::after { top: 0; bottom: 0; left: 50%; width: .13em; margin-left: -.065em; }
/* Кнопки «+» и «−»: знак крупный, как картинка-вариант (.option.pic); селектор как у .app.lesson .option, чтобы его перекрыть */
.option.sign, .app.lesson .option.sign { font-size: clamp(44px, calc(var(--vh, 8px) * 7), 64px); display: flex; align-items: center; justify-content: center; }