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

/* range fields (56 px) + quick chips (46 px) above the wheel: the wheel shrinks by that height */
.lh-app[data-ptool="number"] { --lh-extra: 112px; }
.lh-number-top { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lh-number-range { display: flex; align-items: stretch; gap: 8px; }
.lh-number-f {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: 56px; padding: 6px 12px; border: 1px solid var(--lh-border-strong); border-radius: 14px; background: var(--lh-surface); cursor: text;
}
.lh-number-f--n { flex: 0 1 108px; margin-inline-start: 6px; }
.lh-number-f:focus-within { border-color: var(--lh-focus); box-shadow: 0 0 0 1px var(--lh-focus); }
.lh-number-f__l { color: var(--lh-muted); font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-number-f__in {
  width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--lh-text); text-align: start;
  font-size: 1.1875rem; font-weight: 750; line-height: 1.3; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
[dir="rtl"] .lh-number-f__in { text-align: end; } /* digits read left to right, aligned with the label */
.lh-number-f__in::-webkit-inner-spin-button, .lh-number-f__in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lh-number-f__in:focus { outline: none; }
.lh-number-dash { align-self: center; color: var(--lh-muted); font-weight: 700; }
.lh-number-chips { padding-block: 0; justify-content: safe center; }
.lh-number-chips .lh-chip { font-variant-numeric: tabular-nums; }
.lh-number-go { width: 100%; }

/* big counter: replaces the wheel and the live readout (> 1 000 values, > 10 numbers, duplicates) */
.lh-app.lh-number--counter .lh-stage-wrap, .lh-app:has(#lh-number-counter:not([hidden])) .lh-stage-wrap,
.lh-app.lh-number--counter .lh-readrow, .lh-app:has(#lh-number-counter:not([hidden])) .lh-readrow { display: none; }
.lh-number-counter {
  container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: min(var(--lh-size), 260px); margin-block-start: 10px; padding: 20px 16px; overflow: auto; max-height: 60vh;
  border-radius: 24px; background: var(--lh-surface); border: 1px solid var(--lh-border); box-shadow: var(--lh-shadow-sm);
}
.lh-number-cap { margin: 0; color: var(--lh-muted); font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lh-number-big {
  display: block; max-width: 100%; color: var(--lh-text); font-weight: 850; line-height: 1.05; letter-spacing: -.02em;
  font-size: clamp(2.25rem, calc(100cqi / (var(--len, 3) * .62)), 7rem); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lh-number-tiles { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.lh-number-tile {
  display: grid; place-items: center; min-height: 48px; padding: 4px 6px; border-radius: 12px; background: var(--lh-surface-2);
  font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: center;
}
.lh-number--rolling .lh-number-big, .lh-number--rolling .lh-number-tile:not(.is-set) { color: var(--lh-muted); }
.lh-number-tile.is-set { background: var(--lh-brand-soft); color: var(--lh-brand-soft-ink); animation: lh-number-pop .2s var(--lh-ease); }
.lh-number-counter.is-fade { animation: lh-number-fade .15s; }
@keyframes lh-number-pop { 50% { scale: 1.08; } }
@keyframes lh-number-fade { from { opacity: .2; } }

/* the card: under the wheel on phones, first tab of the side panel on wide screens (JS) */
.lh-number-card:not(.is-on) { display: none; }
.lh-number-card { display: flex; flex-direction: column; gap: 14px; }
.lh-slot--below > .lh-number-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-number-sec { display: flex; flex-direction: column; gap: 6px; }
.lh-number-sec + .lh-number-sec { padding-block-start: 12px; border-block-start: 1px solid var(--lh-border); }
.lh-number-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.lh-number-h { margin: 0; color: var(--lh-muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:lang(ar) .lh-number-h { letter-spacing: 0; font-size: .875rem; }
.lh-number-last { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto; }
.lh-number-chip { min-width: 40px; padding: 6px 12px; border-radius: 999px; background: var(--lh-brand-soft); color: var(--lh-brand-soft-ink); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.lh-number-none { margin: 0; color: var(--lh-muted); font-size: .9375rem; }
.lh-number-step { width: 96px; min-height: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.lh-number-info { margin: 4px 0 8px; color: var(--lh-muted); font-size: .8125rem; font-weight: 650; }

/* full screen (presentation): the counter only, big */
.lh-app.lh-app--fs.lh-number--counter .lh-slot--above { display: block !important; max-width: min(900px, 100%); }
.lh-app--fs .lh-number-top { display: none; }
.lh-app--fs .lh-number-counter { min-height: 50dvh; max-height: 75dvh; }

@media (max-width: 767.98px) { .lh-app #lh-tab-number { display: none; } }
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023.98px) { .lh-app #lh-tab-number { display: none; } }
@media (max-width: 479.98px) { .lh-number-range { gap: 6px; } .lh-number-f { padding-inline: 10px; } .lh-number-f--n { flex: 0 0 74px; margin-inline-start: 2px; } .lh-number-f__in { font-size: 1.125rem; } }
@media (max-width: 379.98px) { .lh-app[data-ptool="number"] .lh-spin { padding-inline: 14px; font-size: 1.0625rem; } .lh-app[data-ptool="number"] .lh-spin__in { gap: 6px; } }