/* The translated pages (scripts/site_i18n.py): the few rules a language needs beyond style.css. */

/* Right to left (Persian): the text runs from the right, but a keyboard, the numbers in a row and the notes of a
   song still go from low to high, left to right, as on a real piano. */
[dir="rtl"] body { font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", Tahoma, "Segoe UI", system-ui, sans-serif; line-height: 1.7; }
@media (max-width: 640px) { [dir="rtl"] .top nav a { font-size: 13.5px; font-weight: 700; } }
[dir="rtl"] .stage,
[dir="rtl"] .piano,
[dir="rtl"] .demo-piano,
[dir="rtl"] .numbers,
[dir="rtl"] .numbers-demo,
[dir="rtl"] .stickers,
[dir="rtl"] .sheet-lines,
[dir="rtl"] .letters,
[dir="rtl"] .progress,
[dir="rtl"] table.keys td:nth-child(-n+3) { direction: ltr; }
/* The stage's own texts (cheers, tips, buttons) read from the right again. */
[dir="rtl"] .stage .cheer,
[dir="rtl"] .stage .tip,
[dir="rtl"] .stage .help,
[dir="rtl"] .stage .controls,
[dir="rtl"] .stage .result { direction: rtl; }
[dir="rtl"] .crumbs, [dir="rtl"] .steps-list { padding-inline-start: 1.2em; }

/* On a phone the menu is one row that scrolls (style.css): longer words than the English would hide « Log in » at
   the end, so the row may wrap onto a second one. */
@media (max-width: 640px) {
  .top nav { flex-wrap: wrap; justify-content: center; overflow-x: visible; row-gap: 0; }
}

/* The stage's bubble (« Tap the key with the arrow ») is one line in English; longer words may need two. */
.cheer { white-space: normal; width: max-content; max-width: calc(100% - 24px); text-align: center; border-radius: 18px; }

/* Persian: no letter spacing (it would open gaps between joined letters); the mascot in the outer corner, as in
   English; the short « ورود » still a pill. */
[dir="rtl"] :is(h1, h2, h3, .btn, .step-n, .meta span, .top nav a, .pill, .cheer, .band) { letter-spacing: 0; }
[dir="rtl"] .result .news-form { text-align: right; }
@media (min-width: 900px) { [dir="rtl"] .hero-onni { right: auto; left: 14px; transform: rotate(-6deg); } }
@media (max-width: 640px) { .top nav a.account { padding-inline: 12px; min-width: 56px; justify-content: center; } }

/* The end card's email form: a longer button than « Subscribe » goes under the field. */
.result .news-form div { flex-wrap: wrap; }
.result .news-form input { flex: 1 1 140px; }

/* Right to left: the lyrics (Latin) read left to right, a cheer drawn in the same box (« آفرین! ») from the right:
   each line takes the direction of its own words. */
[dir="rtl"] :is(.words, .words-now, .words-now .line, .words-now .coming) { direction: ltr; unicode-bidi: plaintext; text-align: center; }
/* The keys table: Persian cells and headers from the right, the number, note and key centred. */
[dir="rtl"] table.keys :is(th, td) { text-align: right; }
[dir="rtl"] table.keys :is(th, td):nth-child(-n+3) { text-align: center; }

/* Persian: a little more room for dots above and below the letters. */
[dir="rtl"] .consent p { font-size: 14px; line-height: 1.75; }
[dir="rtl"] :is(h1, h2, h3, .card h3, .pop b, .band) { line-height: 1.35; }
[dir="rtl"] :is(table.keys th, .card .meta span) { font-size: 14px; }
/* The footer's links do not break inside, so a « · » never starts a line on its own. */
.foot .small a { white-space: nowrap; }

/* The cookie question: « Decline » as easy to hit as « Accept », whatever the words' length. */
.consent .consent-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.consent .consent-actions .btn { min-width: 96px; width: 100%; justify-content: center; }

/* Longer words than the English on a phone: the end card's buttons and the home page's buttons stay tidy. */
@media (max-width: 640px) {
  .result .box { padding: 20px 16px; }
  .result .btn { padding-inline: 14px; }
  .result .rain-offer .btn { width: 100%; justify-content: center; }
}
@media (max-width: 400px) { .top nav a.account { padding-inline: 8px; min-width: 0; } .top nav a { padding-inline: 3px; } }
.actions .btn { text-align: center; justify-content: center; }

/* The stage's bubble clears the stars column on a phone (longer words than the English). */
@media (max-width: 640px) {
  .stage .cheer { max-width: calc(100% - 40px); font-size: 12.5px; padding: 5px 10px; line-height: 1.25; text-wrap: balance; }
  .result .rain-offer .btn { text-wrap: balance; }
}

/* No word alone on a last line: titles, tips and buttons longer than the English. */
h1 .band, .try-tip, .result .btn { text-wrap: balance; }

/* Persian names a sharp in words (« سل دیز »): the number sheet's columns a little wider for it. */
[dir="rtl"] .sheet-note { min-width: 42px; }
[dir="rtl"] .sheet-note .letter { font-size: 12px; white-space: nowrap; }