/* ============================================================================
   KALDUNE new-landing · I18N DRESS (2026-07-27)
   Two rooms in one sheet:
     1. THE LANGUAGE SWITCHER — a quiet mono-register door in the header
        (the seat the removed "Sign in" left in the fixed glass pill;
        a 44px button beside the burger on phones; the about page's nav).
     2. THE ARABIC MIRROR — the landing's ui/css/rtl.css: everything
        scoped under [dir="rtl"] or html[lang="ar"], completely inert for
        LTR locales. Flex/grid mirror on dir alone; only glyph flips and
        physical-property leftovers live here (the studio's own doctrine).
   ========================================================================== */

/* ---- 1 · the switcher --------------------------------------------------- */
.kl-lang__btn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  transition: color 200ms;
}
.kl-lang__btn:hover { color: rgba(255, 255, 255, 0.95); }
.kl-lang__btn:focus-visible { outline: 2px solid var(--color-accent, #E8C98E); outline-offset: 2px; border-radius: 2px; }
/* in the fixed glass pill: the removed Sign-in's own seat and rhythm */
.kl-lang__btn--pill { padding: 10px 16px 10px 18px; display: flex; align-items: center; }
/* in the mobile header row: a full 44px thumb target beside the burger */
.kl-lang__btn--bar {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  margin-left: auto; pointer-events: auto;
}
/* the burger already carries ml-auto; once the switcher takes the push,
   the burger sits flush after it */
.kl-lang__btn--bar + button { margin-left: 0 !important; }
@media (min-width: 1200px) {
  /* desktop speaks through the pill — from 1200, where the pill itself
     returns (07-27 gauntlet: 768-1199 keeps the phone header because the
     centered nav collides with the edges there in half the locales) */
  .kl-lang__btn--bar { display: none; }
}
/* the about page's nav: after the back link, same register */
.kl-lang__btn--about { min-height: 44px; padding: 0 4px; margin-inline-start: 18px; }

.kl-lang__menu {
  position: fixed; z-index: 240;
  /* never wider than the viewport (2026-07-27: the RTL seat overflowed
     phones; the JS clamp seats it, this makes overflow impossible) */
  min-width: min(236px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 620px); overflow-y: auto;
  padding: 6px;
  background: rgba(13, 17, 22, 0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.kl-lang__menu[hidden] { display: none; }
.kl-lang__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 14px;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  font-family: Inter, system-ui, sans-serif; font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8); text-align: start;
  transition: background 150ms, color 150ms;
}
.kl-lang__item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.kl-lang__item:focus-visible { outline: 2px solid var(--color-accent, #E8C98E); outline-offset: -2px; }
.kl-lang__item.is-current { color: var(--color-accent, #E8C98E); }
.kl-lang__dot {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent, #E8C98E); opacity: 0;
}
.kl-lang__item.is-current .kl-lang__dot { opacity: 1; }

/* an enhancement-owned directional arrow: one span, flippable */
.kl-arr { display: inline-block; }

/* ---- 2 · the Arabic mirror ---------------------------------------------- */

/* 2a. the bundle's physical Tailwind utilities actually used on this page.
   text-left/right here mean "start/end" in the design's intent. */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .border-l { border-left-width: 0; border-right-width: 1px; }
[dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; }
[dir="rtl"] .ml-5 { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .-mr-2 { margin-right: 0; margin-left: -0.5rem; }
[dir="rtl"] .-mx-5 { /* symmetric — stands */ }
@media (min-width: 640px) {
  [dir="rtl"] .sm\:ml-6 { margin-left: 0; margin-right: 1.5rem; }
  [dir="rtl"] .sm\:pl-6 { padding-left: 0; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  [dir="rtl"] .md\:text-left { text-align: right; }
  [dir="rtl"] .md\:text-right { text-align: left; }
}

/* the bundle's forward-arrow SVGs (nav CTA, hero CTAs) point along the
   reading direction. NEVER flipped: the wordmark, monograms, play
   triangles (media transport stays LTR — the studio's rtl.css law). */
[dir="rtl"] a[data-kl-cta] svg,
[dir="rtl"] #top a svg,
[dir="rtl"] .kl-arr,
[dir="rtl"] .kl-want__arrow { transform: scaleX(-1); }

/* 2b. the enhancement layer's own physical leftovers */
[dir="rtl"] .kl-card,
[dir="rtl"] .kl-card__door,
[dir="rtl"] .kl-replica,
[dir="rtl"] .kl-rooms-rail { text-align: right; }
[dir="rtl"] .kl-v-x,
[dir="rtl"] .kl-access-bring__x { margin-left: 0; margin-right: auto; }
[dir="rtl"] .kl-access-sheet .kl-v-x { right: auto; left: 12px; }
[dir="rtl"] .kl-card__runs .kl-dot { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .kl-rooms-rail__pick { padding: 3px 16px 3px 0; text-align: right; }
[dir="rtl"] .kl-rooms-rail__dot { left: auto; right: 0; }
[dir="rtl"] .kl-v-vtag { right: auto; left: 12px; }
[dir="rtl"] .kl-v-unmute { right: auto; left: 14px; }
[dir="rtl"] .kl-rr-vtag { left: auto; right: 8px; }
/* the door arrow's slide comes in from its own side (the flip above
   carries the glyph; hover still settles to rest) */
[dir="rtl"] .kl-want__arrow { transform: translateX(4px) scaleX(-1); }
[dir="rtl"] .kl-want__door:hover .kl-want__arrow,
[dir="rtl"] .kl-want__door.is-active .kl-want__arrow { transform: scaleX(-1); }
@media (max-width: 767px) {
  [dir="rtl"] .kl-want__arrow { transform: scaleX(-1); }
}
@media (max-width: 820px) {
  [dir="rtl"] .kl-v-chrome { padding-left: 0; padding-right: 16px; }
  [dir="rtl"] .kl-v-unmute { left: auto; right: 50%; transform: translateX(-50%); }
}

/* 2c. bidi seams — Latin case titles/teasers and the clients' own words
   are LTR islands inside the mirrored chrome (the studio's first-strong
   plaintext law for user content). Numbers keep their tabular order. */
[dir="rtl"] .kl-card__title,
[dir="rtl"] .kl-card__teaser,
[dir="rtl"] .kl-card__cat,
[dir="rtl"] .kl-v-title,
[dir="rtl"] .kl-v-rtitle,
[dir="rtl"] .kl-v-prompt,
[dir="rtl"] .kl-v-built,
[dir="rtl"] .kl-access-bring__q { unicode-bidi: plaintext; }

/* the about page's ENGLISH prose (the founder's canonical manifesto,
   untranslated pending his word) must not shred under the mirror: each
   paragraph renders in its own first-strong direction — English blocks
   stay LTR whole, translated Arabic chrome stays RTL whole. */
[dir="rtl"] .about-hero h1,
[dir="rtl"] .ah-lede,
[dir="rtl"] .about-body p,
[dir="rtl"] .about-body .pullquote p,
[dir="rtl"] .about-body .difference p,
[dir="rtl"] .about-body .promise p,
[dir="rtl"] .doors .d-lead,
[dir="rtl"] .doors p,
[dir="rtl"] .about-imprint { unicode-bidi: plaintext; }

/* the about page's physical leftovers */
[dir="rtl"] .about-nav .nav-back { margin-left: 0; margin-right: auto; }
[dir="rtl"] .pullquote { padding-left: 0; padding-right: var(--s-6); border-left: 0; border-right: 2px solid var(--honey-faint); }
[dir="rtl"] .door-cta .arr, [dir="rtl"] .door-ghost .arr, [dir="rtl"] a.inline + .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .door-cta:hover .arr { transform: translateX(-4px) scaleX(-1); }
[dir="rtl"] .to-top { right: auto; left: 20px; }

/* 2d. THE ARABIC LETTER — Instrument Serif has no Arabic glyphs, so every
   serif surface falls to a dignified Arabic naskh via SYSTEM fonts (zero
   bytes downloaded: Geeza Pro on Apple, Noto Naskh Arabic on Android,
   Sakkal Majalla / Traditional Arabic on Windows). Inline styles carry
   the serif stack in the bundle, hence the attribute hook + !important. */
html[lang="ar"] [style*="Instrument Serif"],
html[lang="ar"] .kl-rooms-rail__pick,
html[lang="ar"] .kl-want__door,
html[lang="ar"] .kl-want__arrow,
html[lang="ar"] .kl-trail-out p,
html[lang="ar"] .kl-access-bring__q,
html[lang="ar"] .kl-access-sheet h2 {
  font-family: "Instrument Serif", "Noto Naskh Arabic", "Geeza Pro",
    "Sakkal Majalla", "Traditional Arabic", "Times New Roman", serif !important;
}
/* Arabic has no case; wide caps-tracking only tears the script apart
   (the studio's length-runner law). Latin islands inside keep reading. */
html[lang="ar"] [class*="tracking-"] { letter-spacing: 0.02em !important; }
html[lang="ar"] .kl-lang__btn,
html[lang="ar"] .kl-v-count,
html[lang="ar"] .kl-v-vtag,
html[lang="ar"] .kl-v-unmute,
html[lang="ar"] .kl-rr-vtag,
html[lang="ar"] .kl-rooms-rail__lbl,
html[lang="ar"] .kl-rooms-rail__cat,
html[lang="ar"] .kl-want__label,
html[lang="ar"] .kl-tab,
html[lang="ar"] .kl-foot-col h4,
html[lang="ar"] .kl-foot-imprint { letter-spacing: 0.02em; }
/* negative display tracking off the serif heads */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0 !important; }

/* ---- 2e. the polish-era surfaces (stage4 reconcile, 2026-07-27) --------
   The second polish round landed after this sheet was written; its four
   new surfaces get the same doctrine. */
/* the floating to-top corner mirrors (the landing's own .to-top law) */
[dir="rtl"] .kl-top { right: auto; left: 20px; }
/* ALL STARTING POINTS is a "back" affordance: its arrow points along
   the reading direction (media transport glyphs stay LTR; this is not one) */
[dir="rtl"] .kl-want__all-arr { display: inline-block; transform: scaleX(-1); }
/* the founder-review composer mock aligns to its start edge */
[dir="rtl"] .kl-ctam--composer { text-align: right; }
/* var(--font-display) serif surfaces the inline-style hook cannot see:
   the chosen door sentence and the reserved sheet's bring line fall to
   the same dignified naskh stack */
html[lang="ar"] .kl-want__chosen-line,
html[lang="ar"] .kl-access-reserved__bring {
  font-family: "Instrument Serif", "Noto Naskh Arabic", "Geeza Pro",
    "Sakkal Majalla", "Traditional Arabic", "Times New Roman", serif !important;
}
/* the new mono caps rows: wide tracking off for the Arabic letter */
html[lang="ar"] .kl-tabbar__label,
html[lang="ar"] .kl-want__all,
html[lang="ar"] .kl-ctam__lbl { letter-spacing: 0.02em; }