/* Multiplication wheel (wave 2, spec §5.9). Loaded after wheel.css; reuses its tokens, chips and settings rows.
   Logical properties only (facts and numbers stay left-to-right), dark mode through --lh-*, reduced motion respected. */

/* quick table groups above the wheel (same height as the wheel's variant chips) */
.lh-app[data-ptool="multiplication"] { --lh-extra: 50px; }
.lh-mult-chips { padding-block: 0; align-items: center; }
.lh-mult-chipl { flex: none; color: var(--lh-muted); font-size: .875rem; font-weight: 700; padding-inline-end: 2px; }
.lh-mult-chips .lh-chip { font-variant-numeric: tabular-nums; }

/* the card: under the wheel on phones, first tab of the side panel on wide screens (JS) */
.lh-mult-card:not(.is-on) { display: none; }
.lh-mult-card { display: flex; flex-direction: column; gap: 14px; }
.lh-slot--below > .lh-mult-card { padding: 14px 16px 6px; border: 1px solid var(--lh-border); border-radius: 16px; background: var(--lh-surface); box-shadow: var(--lh-shadow-sm); }
.lh-mult-sec { display: flex; flex-direction: column; gap: 6px; }
.lh-mult-sec + .lh-mult-sec { padding-block-start: 12px; border-block-start: 1px solid var(--lh-border); }
.lh-mult-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.lh-mult-h { margin: 0; color: var(--lh-muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:lang(ar) .lh-mult-h { letter-spacing: 0; font-size: .875rem; }
.lh-mult-tally { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lh-mult-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px 16px; overflow: hidden; border-radius: 12px; background: var(--lh-surface-2); }
.lh-mult-tile::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--lh-brand); }
.lh-mult-tile.is-r::before { background: var(--lh-success); }
.lh-mult-tile.is-w::before { background: var(--lh-danger); }
.lh-mult-tile__l { font-size: .8125rem; font-weight: 700; color: var(--lh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-mult-tile__n { font-size: 1.625rem; font-weight: 850; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lh-mult-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.lh-mult-key {
  min-height: 48px; border: 1px solid var(--lh-border); border-radius: 12px; background: var(--lh-surface-2); color: var(--lh-muted);
  font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color .12s, color .12s, scale .12s var(--lh-ease);
}
.lh-mult-key[aria-pressed="true"] { background: var(--lh-brand); border-color: transparent; color: var(--lh-brand-ink); }
.lh-mult-key:active { scale: .94; }
.lh-mult-info { margin: 2px 0 0; color: var(--lh-muted); font-size: .8125rem; font-weight: 650; }

/* result dialog: Show answer → the product, then Right / Wrong */
.lh-mult-rev { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lh-mult-ans { margin: 0; font-size: clamp(2.5rem, 13vw, 4.5rem); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.lh-mult-ans:empty { display: none; }
.lh-mult-ans:not(:empty) { animation: lh-mult-pop .32s var(--lh-ease); }
.lh-mult-show { width: 100%; max-width: 320px; }
.lh-mult-marks { display: flex; gap: 8px; width: 100%; max-width: 360px; }
.lh-mult-marks[hidden] { display: none; }
.lh-mult-marks .lh-btn { flex: 1 1 0; min-height: 52px; border-radius: 999px; font-size: 1rem; }
.lh-mult-ok { color: var(--lh-success); border-color: color-mix(in srgb, var(--lh-success) 50%, transparent); }
.lh-mult-ko { color: var(--lh-danger); border-color: color-mix(in srgb, var(--lh-danger) 50%, transparent); }
.lh-mult-ok.is-chosen { background: var(--lh-success); color: var(--lh-surface); opacity: 1 !important; }
.lh-mult-ko.is-chosen { background: var(--lh-danger); color: var(--lh-surface); opacity: 1 !important; }
.lh-mult-fb { margin: 0; font-weight: 750; color: var(--lh-muted); font-variant-numeric: tabular-nums; }
@keyframes lh-mult-pop { 0% { scale: .7; opacity: 0; } 60% { scale: 1.06; opacity: 1; } }

@media (max-width: 767.98px) { .lh-app #lh-tab-mult { display: none; } }
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023.98px) { .lh-app #lh-tab-mult { display: none; } }