/* Random letter tool (wave 2, spec §5.3). Loaded after wheel.css; reuses its tokens, chips and settings rows.
   Logical properties only (RTL by dir), dark mode through --lh-*, reduced motion respected. */

/* the letter-set chips above the wheel (same height as the wheel's variant chips) */
.lh-app[data-ptool="letter"] { --lh-extra: 50px; }
.lh-letter-sets { padding-block: 0; }

/* the card: under the wheel on phones, first tab of the side panel on wide screens (JS) */
.lh-letter-card:not(.is-on) { display: none; }
.lh-letter-card { display: flex; flex-direction: column; gap: 14px; }
.lh-slot--below > .lh-letter-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-letter-sec { display: flex; flex-direction: column; gap: 6px; }
.lh-letter-sec + .lh-letter-sec { padding-block-start: 12px; border-block-start: 1px solid var(--lh-border); }
.lh-letter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.lh-letter-h { margin: 0; color: var(--lh-muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:lang(ar) .lh-letter-h { letter-spacing: 0; font-size: .875rem; }
.lh-letter-custom { display: flex; align-items: center; gap: 10px; margin-block-start: 8px; font-weight: 650; font-size: .9375rem; }
.lh-letter-custom .lh-field { width: 110px; text-align: center; }
.lh-letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.lh-letter-key {
  min-height: 48px; padding: 0 4px; border: 1px solid var(--lh-border); border-radius: 12px; background: var(--lh-surface-2);
  color: var(--lh-muted); font-size: 1.125rem; font-weight: 750; text-decoration: line-through; text-decoration-thickness: 2px;
  transition: background-color .12s, color .12s, scale .12s var(--lh-ease);
}
.lh-letter-key[aria-pressed="true"] { background: var(--lh-brand-soft); border-color: transparent; color: var(--lh-brand-soft-ink); text-decoration: none; }
.lh-letter-key:active { scale: .94; }
.lh-letter-gridfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.lh-letter-count { color: var(--lh-muted); font-size: .8125rem; font-weight: 650; }
.lh-letter-drawn { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lh-letter-chip { min-width: 40px; padding: 6px 12px; border-radius: 999px; background: var(--lh-surface-2); font-weight: 800; text-align: center; }
.lh-letter-none { margin: 0 0 8px; color: var(--lh-muted); font-size: .9375rem; }

/* round timer, next to the live readout (one row of fixed height: no layout shift; visible in full screen) */
.lh-letter-tchip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 2px; border-radius: 999px;
  background: var(--lh-surface); border: 1px solid var(--lh-border); box-shadow: var(--lh-shadow-sm); flex: none;
}
.lh-letter-tchip[hidden] { display: none; }
.lh-letter-tchip button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 36px; padding: 0 10px;
  border: 0; border-radius: 999px; background: transparent; color: var(--lh-text); font-weight: 750; font-variant-numeric: tabular-nums;
}
.lh-letter-tchip button::after { content: ""; position: absolute; inset: -6px -2px; } /* 48 px touch target */
.lh-letter-tchip button:hover { background: var(--lh-surface-2); }
.lh-letter-tchip .lh-ic { width: 18px; height: 18px; }
.lh-letter-tstart { color: var(--lh-brand-soft-ink) !important; }
.lh-letter-ttime { padding-inline: 10px 2px; font-weight: 850; font-size: 1.125rem; font-variant-numeric: tabular-nums; direction: ltr; }
.lh-letter-tplus { background: var(--lh-brand-soft) !important; color: var(--lh-brand-soft-ink) !important; font-size: .875rem; }
.lh-letter-tchip.is-low .lh-letter-ttime, .lh-letter-dtimer.is-low .lh-letter-dtime { color: var(--lh-warning); }
.lh-letter-tchip[data-state="done"] { background: var(--lh-accent); border-color: transparent; }
.lh-letter-tchip[data-state="done"] .lh-letter-ttime, .lh-letter-tchip[data-state="done"] button { color: #14151A; }
.lh-letter-tchip[data-state="done"] .lh-letter-ttime { direction: inherit; font-size: 1rem; }
.lh-letter-tchip[data-state="done"] .lh-letter-tplus { background: rgba(255, 255, 255, .55) !important; color: #14151A !important; }
.lh-app--fs .lh-letter-tchip { min-height: 52px; }
.lh-app--fs .lh-letter-ttime { font-size: clamp(1.25rem, 4vmin, 2.25rem); }

/* the same timer, big, in the result dialog */
.lh-letter-dtimer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-block-start: 4px; }
.lh-letter-dtime { font-size: clamp(3rem, 16vw, 5.5rem); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; direction: ltr; }
.lh-letter-dtimer[data-state="done"] .lh-letter-dtime { direction: inherit; font-size: clamp(2rem, 9vw, 3.25rem); color: var(--lh-danger); }
.lh-letter-dtimer[data-state="done"] { animation: lh-letter-flash .6s 2; }
.lh-letter-dacts { display: flex; gap: 8px; }
.lh-letter-dacts button[hidden] { display: none; }
.lh-letter-dacts button { min-height: 48px; padding: 0 18px; border: 1px solid var(--lh-border); border-radius: 999px; background: var(--lh-surface); color: var(--lh-text); font-weight: 750; display: inline-flex; align-items: center; gap: 6px; }
.lh-letter-dacts .lh-letter-tplus { border-color: transparent; }
.lh-letter-dtimer[data-state="idle"] .lh-letter-dacts { display: none; }
@keyframes lh-letter-flash { 50% { opacity: .35; } }

@media (max-width: 767.98px) { .lh-app #lh-tab-letter { display: none; } }
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023.98px) { .lh-app #lh-tab-letter { display: none; } }
@media (max-width: 379.98px) { .lh-letter-tplus { padding-inline: 8px !important; } }