/* PosedGrid (§5.5, DS PosedGrid; sizes of the ExercicePose screen): one cell per digit,
   small carry boxes, compensation markers, cassage boxes, the rule in `ink`.
   A multiplication by two digits (five rows) uses the DS sizes to fit the screen. */

.exercise__operation { font-size: 40px; line-height: 1; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exercise__line--grid { gap: var(--space-8); }

.posed-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 56px;
  max-width: 100%;
  overflow-x: auto;
}

.posed-grid {
  --posed-operator: 72px;
  --posed-col: 88px;
  --posed-comma: 24px;
  --posed-cell-height: 92px;
  --posed-size: 64px;
  display: grid;
  gap: var(--space-3);
  align-items: center;
  justify-items: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--posed-size);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.posed-grid--compact {
  --posed-operator: 56px;
  --posed-col: 56px;
  --posed-comma: 16px;
  --posed-cell-height: 60px;
  --posed-size: 44px;
  gap: var(--space-2);
}
/* Room for the struck digits under the cells: below the result row, or between the rows of a × 2 digits. */
.posed-grid--failed { margin-bottom: 28px; }
.posed-grid--failed.posed-grid--compact { row-gap: 32px; }

.posed-grid__sign { justify-self: start; color: var(--ink-muted); font-size: calc(var(--posed-size) * 0.75); }
.posed-grid__slot { width: var(--posed-col); height: var(--posed-cell-height); display: flex; align-items: center; justify-content: center; position: relative; }
.posed-grid__slot--help { height: 32px; }
.posed-grid__comma { width: var(--posed-comma); }
.posed-grid__rule { grid-column: 1 / -1; width: 100%; height: 4px; background: var(--ink); border-radius: 2px; }

/* Digits given by the operation: no box. */
.posed-digit { box-sizing: border-box; }
.posed-digit--given { color: var(--ink-muted); }
.posed-digit--button {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition);
}
.posed-digit--button:hover { background: var(--surface-sunken); }
.posed-digit--button:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }
.posed-digit--button:disabled { cursor: default; background: transparent; }
.posed-digit--clickable { cursor: pointer; }
.posed-grid--final .posed-digit--clickable { cursor: default; }

/* Compensation markers: +10 before the top digit, +1 under the next column's bottom digit. */
.posed-mark {
  display: none;
  position: absolute;
  font-family: var(--font-num);
  font-size: 18px;
  line-height: 1.2;
  color: var(--info);
  background: var(--info-soft);
  border-radius: 6px;
  padding: 2px 6px;
}
.is-marked .posed-mark { display: block; }
.posed-mark--ten { left: -10px; top: 6px; }
.posed-mark--one { right: -6px; bottom: 0; }

/* Cassage: the original digit struck in `danger` once a box above it is filled. */
.posed-digit--struck { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 5px; }

/* Carry and cassage boxes: never corrected. */
.posed-help {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-sunken);
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--ink);
  padding: 0;
}
.posed-help--cassage { width: 36px; }
.posed-help:focus { outline: 3px solid var(--info); outline-offset: 2px; }
.posed-grid--final .posed-help { border-color: var(--line); }

/* The cells to fill. */
.posed-cell {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 4px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: inherit;
  color: var(--ink);
  text-align: center;
  padding: 0;
  caret-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
input.posed-cell:focus { outline: 3px solid var(--info); outline-offset: 3px; }
.posed-cell--right { border-color: var(--success); background: var(--success-soft); }
.posed-cell--wrong { border-color: var(--danger); background: var(--danger-soft); }
input.posed-cell--wrong { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 5px; }
.posed-grid--final .posed-cell--wrong { color: var(--ink); }
.posed-cell__struck {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24px;
  color: var(--danger);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}