/* ==========================================================================
   SAMPLE — a bilingual interface that flips
   ==========================================================================
   Kurdish and Arabic read right to left. English does not. Building for a
   market where all three are normal is a specific skill, and it is almost
   never shown properly — most "RTL support" is `direction: rtl` and a hope.

   The whole point of this stylesheet is that it contains no `left`, no
   `right`, no `margin-left` and no `text-align: left` anywhere in the layout.
   Everything is written in logical properties, so the same rules produce a
   correct mirror without a second stylesheet and without any `[dir="rtl"]`
   overrides — except for the handful of things that must NOT mirror, which
   are listed explicitly and are the interesting part.

   Scoped under .rtl.
   ========================================================================== */

.rtl {
  --bg:     #0f1215;
  --bg-2:   #171b20;
  --panel:  #1e242b;
  --panel-2:#28303a;
  --line:   #2f3841;
  --line-2: #424e5b;
  --ink:    #f2f5f8;
  --ink-2:  #b3c0cc;
  --ink-3:  #93a1af;

  --brand:  #f59e0b;
  --go:     #4ade80;
  --info:   #60a5fa;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* A stack that actually has Arabic-script coverage. Falling back to a Latin
     face makes Kurdish render in a substitute font with the wrong metrics,
     which is the single most common way a bilingual site looks broken. */
  --arabic: "Noto Naskh Arabic", "Segoe UI", "Tahoma", "Arial", sans-serif;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.rtl *, .rtl *::before, .rtl *::after { box-sizing: border-box; }
.rtl svg { display: block; }
.rtl a { color: var(--brand); }
.rtl :focus-visible { outline-color: var(--brand); }

.rtl-wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); padding-block: 0 5rem; }

/* ------------------------------------------------------------------ head --- */

.rtl-hero { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; max-width: 46rem; }
.rtl-hero h1 { margin: 0; font-size: clamp(2rem, 5.5vw, 3.3rem); letter-spacing: -0.035em; line-height: 1.04; font-weight: 800; }
.rtl-hero h1 em { font-style: normal; color: var(--brand); }
.rtl-hero p { margin: 1rem 0 0; color: var(--ink-2); line-height: 1.7; }

/* ------------------------------------------------------------ switcher --- */

.rtl-langs { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem 1rem; }
.rtl-lang {
  font: inherit; font-size: .86rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-2);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.rtl-lang:hover { color: var(--ink); border-color: var(--ink-3); }
.rtl-lang[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #2b1c02; }
.rtl-lang span { font-family: var(--arabic); }

.rtl-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  font-family: var(--mono); font-size: .68rem;
  color: var(--ink-3); margin-bottom: 1.2rem;
}
.rtl-meta b { color: var(--brand); font-weight: 500; }


.rtl-warn {
  margin: -.6rem 0 1.2rem;
  padding: .55rem .8rem;
  background: rgba(96, 165, 250, .1);
  border: 1px solid rgba(96, 165, 250, .35);
  border-radius: 9px;
  font-size: .78rem; color: var(--ink-2); line-height: 1.6;
}
.rtl-warn[hidden] { display: none; }

/* ================================================== the demo interface ===
   Everything below is written once. The mirror is produced by `dir`, not by
   a second set of rules. */

.ui {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  /* `dir` is set on this element by script; every child inherits it. */
}
.ui[lang="ku"], .ui[lang="ar"] { font-family: var(--arabic); }
.ui[lang="ku"] .ui-mono, .ui[lang="ar"] .ui-mono { font-family: var(--mono); }

.ui-top {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: var(--bg-2);
  border-block-end: 1px solid var(--line);
}
.ui-brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
/* The brand mark never mirrors. A logo is a picture of itself, not a layout. */
.ui-brand i {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--brand); color: #2b1c02;
  display: grid; place-items: center;
  font-style: normal; font-weight: 900; font-size: .85rem;
  font-family: var(--sans);
  direction: ltr;
}
.ui-top .sp { margin-inline-start: auto; }

.ui-search {
  display: flex; align-items: center; gap: .5rem;
  flex: 1 1 12rem; min-width: 0; max-width: 22rem;
  padding: .4rem .7rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px;
}
.ui-search svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.ui-search input {
  font: inherit; font-size: .82rem;
  background: none; border: 0; color: var(--ink);
  inline-size: 100%; min-width: 0;
}
.ui-search input:focus { outline: none; }

.ui-body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 54rem) { .ui-body { grid-template-columns: 13rem minmax(0, 1fr); } }

.ui-nav {
  padding: .7rem;
  background: var(--bg-2);
  border-block-end: 1px solid var(--line);
}
@media (min-width: 54rem) {
  .ui-nav {
    border-block-end: 0;
    /* logical, so the divider lands on the correct side in both directions */
    border-inline-end: 1px solid var(--line);
  }
}
.ui-nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: 8px;
  color: var(--ink-2); font-size: .86rem; text-decoration: none;
}
.ui-nav a:hover { background: var(--panel-2); color: var(--ink); }
.ui-nav a[aria-current="page"] { background: var(--panel-2); color: var(--ink); font-weight: 600; }
.ui-nav svg { width: 16px; height: 16px; flex: none; }
/* The chevron that means "onwards" DOES mirror — it is a direction, not an
   object. It is flipped with a logical transform rather than a second icon. */
.ui-nav .chev { margin-inline-start: auto; }
.rtl [dir="rtl"] .chev { transform: scaleX(-1); }

.ui-main { padding: 1rem; display: grid; gap: 1rem; align-content: start; }

.ui-h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ui-h h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.ui-h .sp { margin-inline-start: auto; }

.ui-stats { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.ui-stat {
  padding: .7rem .8rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px;
  /* logical: the accent bar sits at the start edge in both directions */
  border-inline-start: 3px solid var(--brand);
}
.ui-stat dt { font-size: .68rem; color: var(--ink-3); }
/* Numerals stay LTR inside an RTL sentence — see the write-up. */
.ui-stat dd {
  margin: .2rem 0 0; font-size: 1.35rem; font-weight: 700;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
  text-align: start;
}

.ui-rows { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ui-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem;
  border-block-end: 1px solid var(--line);
  font-size: .86rem;
}
.ui-row:last-child { border-block-end: 0; }
.ui-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--ink-2);
  font-size: .72rem; font-weight: 700;
  font-family: var(--sans); direction: ltr;
}
.ui-row .who { min-width: 0; }
.ui-row .who b { display: block; font-weight: 600; }
.ui-row .who span { font-size: .74rem; color: var(--ink-3); }
.ui-row .sp { margin-inline-start: auto; }
/* An amount is a number with a currency: it must not be reordered by bidi. */
.ui-amount {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
  color: var(--go);
}
.ui-when { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); direction: ltr; unicode-bidi: isolate; }

.ui-note {
  padding: .7rem .8rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--info);
  border-radius: 10px;
  font-size: .84rem; line-height: 1.7; color: var(--ink-2);
}
/* A Latin brand name inside an RTL sentence. Isolation stops the surrounding
   punctuation from jumping to the wrong end of it. */
.ui-note bdi { font-family: var(--sans); color: var(--ink); font-weight: 600; }

.ui-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.ubtn {
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
}
.ubtn:hover { background: #313b46; }
.ubtn--go { background: var(--brand); border-color: var(--brand); color: #2b1c02; }
.ubtn svg { width: 14px; height: 14px; }
.rtl [dir="rtl"] .ubtn svg.arrow { transform: scaleX(-1); }

/* A progress bar fills from the start edge, which is the right-hand side in
   Kurdish and Arabic. Getting this backwards is the classic RTL tell. */
.ui-bar { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.ui-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

/* -------------------------------------------------------------- the code --- */

.rtl-split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; }
@media (min-width: 66rem) { .rtl-split { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: start; } }

.rtl-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rtl-card__head { padding: .6rem .9rem; background: var(--bg-2); border-block-end: 1px solid var(--line); }
.rtl-card__head h2 { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rtl-card__body { padding: .9rem; }

.rtl-code { margin: 0; font-family: var(--mono); font-size: .74rem; line-height: 1.75; overflow-x: auto; }
.rtl-code .c { color: var(--ink-3); }
.rtl-code .bad  { color: #f87171; }
.rtl-code .good { color: var(--go); }

.rtl-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: .82rem; }
.rtl-checks li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; color: var(--ink-2); line-height: 1.6; }
.rtl-checks b { color: var(--ink); font-weight: 600; }
.rtl-checks .y { color: var(--go); }
.rtl-checks .n { color: #f87171; }

/* --------------------------------------------------------------- notes --- */

.rtl-note {
  margin-top: 2rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: clamp(1.1rem, 3vw, 2rem);
}
.rtl-note h2 { margin: 0 0 .8rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.rtl-note h3 { margin: 1.6rem 0 .4rem; font-size: .95rem; }
.rtl-note p  { margin: 0 0 .7rem; color: var(--ink-2); line-height: 1.7; max-width: 46rem; }
.rtl-note code {
  font-family: var(--mono); font-size: .86em;
  background: #12171c; border-radius: 4px; padding: .1em .35em; color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  .rtl *, .rtl *::before, .rtl *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}