/* ===========================================================
   TRM - Live Cupping | right-to-left

   A separate layer, loaded after the others and scoped to
   [dir="rtl"], so that trm.css, host.css, player.css and
   control.css stay byte-identical to the handover pack. Those
   four files are the brand's own and the safest thing that can
   be done with them is nothing.

   Everything here corrects a PHYSICAL property the originals
   use - left, right, text-align - where the logical equivalent
   would have mirrored on its own. Nothing here changes a size,
   a colour, or a weight.

   Arabic is set in LANTX, TRM's Arabic face, per the brand
   guidelines: headline and body both.
   =========================================================== */

@font-face{
  font-family:'LANTX';
  src:url('../fonts/LANTX-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* -- the Arabic face ---------------------------------------
   Regeneration has no Arabic, so the display face becomes LANTX
   and the uppercase transform goes with it - Arabic has no case,
   and asking for uppercase only risks the browser doing
   something clever with any Latin caught in the same string. */

[dir="rtl"]{
  --dis:'LANTX', 'Regeneration', 'Komet', sans-serif;
  --la:'LANTX', 'Komet', ui-sans-serif, system-ui, sans-serif;
}

[dir="rtl"] .dis,
[dir="rtl"] .q,
[dir="rtl"] .opt__t,
[dir="rtl"] .rev__a,
[dir="rtl"] .dist__n,
[dir="rtl"] .board__n,
[dir="rtl"] .fin__n,
[dir="rtl"] .thanks__t,
[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .res__v,
[dir="rtl"] .rq,
[dir="rtl"] .phase,
[dir="rtl"] .chead__name,
[dir="rtl"] .mini__row .nm,
[dir="rtl"] .fin__row .nm,
[dir="rtl"] .field input,
[dir="rtl"] .opt__i,
[dir="rtl"] .roster li,
[dir="rtl"] .tchip,
[dir="rtl"] .roster2 .nm,
[dir="rtl"] .addF input{
  text-transform:none;
  letter-spacing:0;
}

/* The phone's code field is four Western digits and keeps its tracking; the
   rule above would otherwise take it, which the projector's code does not. */
[dir="rtl"] .field input.code{ letter-spacing:.3em; }

/* Arabic needs a little more room between lines than a tight
   Latin display face does. */
[dir="rtl"] .q,
[dir="rtl"] .rev__a,
[dir="rtl"] .fin__n,
[dir="rtl"] .h1,
[dir="rtl"] .res__v{ line-height:1.15; }

[dir="rtl"] .h2,
[dir="rtl"] .opt__t,
[dir="rtl"] .board__n,
[dir="rtl"] .dist__n,
[dir="rtl"] .rq{ line-height:1.25; }

/* An input clips to its line box and LANTX asks for 1.87em, so at the
   handover's 1.1 a guest typing عبدالعزيز loses the tails while they type. */
[dir="rtl"] .field input,
[dir="rtl"] .chead__name{ line-height:1.5; }

/* The small technical stamp keeps its letterspacing in Latin and
   loses it in Arabic, where tracking breaks the joins. */
[dir="rtl"] .stamp{ letter-spacing:0; }

/* -- numbers -----------------------------------------------
   Kept in Komet and kept Western. The brand's own LANTX specimen
   sets 0123456789, the cups on the table are numbered that way,
   and a projected counter has to stay tabular so it does not
   jitter as it climbs.

   `.opt__i` is deliberately NOT in this list. It is an index on
   the projector and on a question, but on the phone's cup picker
   it carries the coffee's name - and Komet has no Arabic, so
   forcing it there would drop an Arabic label to a fallback face.
   The one count that must not jitter asks for Komet itself. */
[dir="rtl"] .num,
[dir="rtl"] .join__code,
[dir="rtl"] .intro__n,
[dir="rtl"] .count__n,
[dir="rtl"] .rev__hits,
[dir="rtl"] .dist__p,
[dir="rtl"] .board__s,
[dir="rtl"] .fin__r,
[dir="rtl"] .fin__p,
[dir="rtl"] .board__r,
[dir="rtl"] .tally__n,
[dir="rtl"] .mini__row .pt,
[dir="rtl"] .joinbox__v{
  font-family:'Komet', ui-sans-serif, system-ui, sans-serif;
  direction:ltr;
  unicode-bidi:isolate;
}

/* -- the projector ----------------------------------------- */

/* host.css pins the option index with `left`. */
[dir="rtl"] .opt__i{
  left:auto;
  right:calc(3.6 * var(--u));
}

/* And the fullscreen nudge to the right edge. */
[dir="rtl"] .fsHint{
  right:auto;
  left:calc(2.5 * var(--u));
}

[dir="rtl"] .fin__row .nm{ text-align:right; }

/* -- the phone --------------------------------------------- */

[dir="rtl"] .opt{ text-align:right; }

/* -- the control panel -------------------------------------
   The host's screen is a working tool; it mirrors with the rest
   so the host is not reading one direction while the room reads
   the other. */

/* `start`, not `right`: the English field next to it carries dir="ltr" and
   must stay left-aligned. */
[dir="rtl"] .addF input,
[dir="rtl"] .roster2 .nm{ text-align:start; }

[dir="rtl"] .roster2 .sc{ margin-left:0; margin-right:auto; }