/* ============================================================
   NOOR · the right to left corrections
   ------------------------------------------------------------
   Most of the site is direction aware by construction: the CSS
   uses logical properties, so padding, borders and markers flip
   themselves. This sheet holds the handful of places where that
   is not enough, because the geometry is computed in JavaScript
   or the element is a fixed piece of paper rather than prose.
   ============================================================ */

/* 1. The printable cards are laid out to a paper size and scaled
      to fit the screen. The scale is anchored to a corner, and in
      Arabic that corner is the other one. */
[dir="rtl"] .pagescale,
[dir="rtl"] #pagescale,
[dir="rtl"] #pcscale { transform-origin: top right; }

/* 2. Axes that are computed, not written. A timeline, a radial
      menu and a spiral are drawn from numbers in JavaScript; if
      the container flips, the numbers point the wrong way. The
      text inside them still reads right to left. */
[dir="rtl"] .rib-scroll,
[dir="rtl"] #rib-scroll,
[dir="rtl"] .rib-track,
[dir="rtl"] .arc,
[dir="rtl"] .ring-wrap,
[dir="rtl"] .mnav { direction: ltr; }
[dir="rtl"] .rib-track *,
[dir="rtl"] .arc * { direction: rtl; }

/* 3. Horizontal rails should open at the reader's own edge. */
[dir="rtl"] .secnav-in,
[dir="rtl"] .th-nav,
[dir="rtl"] .chips { direction: rtl; }

/* 4. A few marks are drawn rather than written and must mirror:
      the arrow that means "onward" points the other way. */
[dir="rtl"] .wgo-c b::after { content: " \2190"; }
[dir="rtl"] .gpill .arrow,
[dir="rtl"] .more::after { transform: scaleX(-1); display: inline-block; }

/* 5. Numbers, references and code stay left to right inside an
      Arabic sentence, which is how Arabic typesets them anyway. */
[dir="rtl"] .ref,
[dir="rtl"] .th-src,
[dir="rtl"] .rn,
[dir="rtl"] time,
[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }

/* 6. Quotation blocks that lean on one edge lean on the near edge. */
[dir="rtl"] .th-quote { border-radius: 14px 0 0 14px; }
[dir="rtl"] .claim,
[dir="rtl"] .waynote,
[dir="rtl"] .tl-f { text-align: start; }

/* 7. The Arabic of the Qur'an and the du'a is already marked
      notranslate; make sure it is never mirrored by a parent. */
[dir="rtl"] .notranslate,
[dir="rtl"] [translate="no"] { direction: rtl; }

/* 8. Latin transliteration inside an Arabic page reads as Latin. */
/* A transliteration is a pronunciation guide, so it is normally Latin inside an
   Arabic page and must run left to right. But it is not always: plaintext asks
   the browser to take the direction from the line's own first strong character,
   which is right whichever way the line turns out. */
[dir="rtl"] .trl,
[dir="rtl"] .translit { unicode-bidi: plaintext; text-align: center; }

/* ============================================================
   the search overlay, which lives on every page
   ============================================================ */
#noor-search{position:fixed;inset:0;z-index:90;display:none}
#noor-search.on{display:block}
.ns-back{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,rgba(30,24,12,.5),rgba(12,10,6,.78));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ns-panel{position:relative;max-width:40rem;margin:min(12vh,5rem) auto 0;padding:0 1rem}
.ns-field{display:flex;align-items:center;gap:.6rem;background:#FFFEF7;border:1px solid rgba(201,162,39,.4);border-radius:16px;padding:.75rem 1rem;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ns-field svg{width:1.05rem;height:1.05rem;color:rgba(44,36,22,.4);flex:none}
.ns-field input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:1rem;color:#2C2416;min-width:0}
.ns-field input::-webkit-search-cancel-button{display:none}
.ns-x{border:1px solid rgba(44,36,22,.18);background:none;border-radius:7px;font:inherit;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(44,36,22,.45);padding:.24rem .45rem;cursor:pointer;flex:none}
.ns-out{margin-top:.6rem;background:#FFFEF7;border:1px solid rgba(44,36,22,.12);border-radius:16px;padding:.5rem;max-height:min(62vh,32rem);overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.ns-g{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#8a6d13;margin:.5rem .6rem .3rem}
.ns-more{font-size:.68rem;color:rgba(44,36,22,.42);margin:.15rem .6rem .5rem;font-style:italic}
.ns-hit{display:block;text-decoration:none;padding:.5rem .6rem;border-radius:11px;transition:background .15s}
.ns-hit:hover,.ns-hit:focus-visible{background:rgba(201,162,39,.13)}
.ns-hit b{font-size:.9rem;font-weight:800;color:#2C2416;margin-inline-end:.45rem}
.ns-ar{font-family:Amiri,serif;font-size:1rem;color:#8a6d13}
.ns-s{display:block;font-size:.78rem;line-height:1.65;color:rgba(44,36,22,.62);margin-top:.12rem}
.ns-hint{font-size:.83rem;line-height:1.8;color:rgba(44,36,22,.55);margin:.6rem}
.ns-hint a{color:#8a6d13;font-weight:700}
body.ns-open{overflow:hidden}
@media (max-width:520px){.ns-panel{margin-top:4.2rem}}

/* ============================================================
   9. The mixed page, which is the normal case and not the edge
   ------------------------------------------------------------
   A language is carried across in waves, so an Arabic page holds
   Arabic paragraphs and, for now, English ones beside them. An
   English sentence inheriting rtl from its container is not just
   right aligned: its full stop moves to the left of the line and
   its brackets turn round. That is not a temporary blemish, it
   is what every partly carried language looks like until the
   last string lands.

   plaintext asks the browser to take each paragraph's direction
   from its own first strong character. Arabic runs right to
   left, English runs left to right, in the same page, with the
   punctuation on the correct end of both. It costs nothing when
   a language is finished and it is the difference between
   half translated and broken while it is not.
   ============================================================ */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] dd,
[dir="rtl"] dt,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] blockquote,
[dir="rtl"] figcaption,
[dir="rtl"] summary,
[dir="rtl"] label,
[dir="rtl"] .lead,
[dir="rtl"] .sub,
[dir="rtl"] .cap,
[dir="rtl"] .short,
[dir="rtl"] .dshort,
[dir="rtl"] .dlong,
[dir="rtl"] .ns-s,
[dir="rtl"] [data-noor-sponsor] span { unicode-bidi: plaintext; }

/* a heading or label that is a single word still wants to sit on
   the reader's own side, which text-align: start already gives it */

/* ============================================================
   the Lantern's own small window
   ============================================================ */
#lantern-open{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;z-index:78;display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(201,162,39,.5);background:linear-gradient(135deg,#C9A227,#E9C86A);color:#1A160F;border-radius:999px;padding:.6rem 1rem;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;box-shadow:0 10px 30px rgba(44,36,22,.22);transition:transform .18s,box-shadow .18s}
#lantern-open:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(44,36,22,.28)}
#lantern-open.on{opacity:.55}
#lantern-open .lm-fl{font-size:.95rem}
#lantern-open .lm-n{font-size:.66rem;font-weight:800;background:rgba(26,22,15,.18);border-radius:999px;padding:.1rem .38rem;min-width:1rem;text-align:center}
#lantern-open .lm-n:empty{display:none}
@media (max-width:520px){#lantern-open .lm-tx{display:none}}
#lantern-panel{position:fixed;inset-inline-end:1rem;inset-block-end:4.4rem;z-index:79;width:min(23rem,calc(100vw - 2rem));background:#FFFEF7;border:1px solid rgba(44,36,22,.14);border-radius:18px;box-shadow:0 26px 64px rgba(44,36,22,.3);display:none;overflow:hidden}
#lantern-panel.on{display:block}
#lantern-panel .lm-top{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid rgba(44,36,22,.1);background:linear-gradient(170deg,#FFFCEF,#FFF6DB)}
#lantern-panel .lm-top b{font-size:.9rem;font-weight:800;color:#2C2416}
#lantern-panel .lm-sub{font-size:.66rem;color:rgba(44,36,22,.5);font-weight:700}
#lantern-panel .lm-x{margin-inline-start:auto;border:0;background:none;font-size:1.2rem;line-height:1;color:rgba(44,36,22,.4);cursor:pointer}
#lantern-panel .lm-log{max-height:min(46vh,24rem);overflow:auto;padding:.7rem .9rem;display:grid;gap:.55rem}
#lantern-panel .lm-hi{font-size:.79rem;line-height:1.75;color:rgba(44,36,22,.55);margin:0}
#lantern-panel .lm-msg{font-size:.83rem;line-height:1.8;border-radius:13px;padding:.5rem .7rem}
#lantern-panel .lm-you{background:rgba(201,162,39,.14);color:#2C2416;justify-self:end;max-width:88%}
#lantern-panel .lm-lamp{background:#fff;border:1px solid rgba(44,36,22,.1);color:rgba(44,36,22,.85)}
#lantern-panel .lm-lamp a{color:#8a6d13;font-weight:700}
#lantern-panel .lm-out{border-color:rgba(143,45,45,.3);background:#fffafa;color:#8f2d2d}
#lantern-panel .lm-wait{opacity:.5}
#lantern-panel .lm-ask{display:flex;gap:.4rem;padding:.6rem .7rem;border-top:1px solid rgba(44,36,22,.1)}
#lantern-panel .lm-ask input{flex:1;min-width:0;border:1px solid rgba(44,36,22,.16);border-radius:11px;padding:.5rem .65rem;font:inherit;font-size:.85rem;outline:0}
#lantern-panel .lm-ask input:focus{border-color:rgba(201,162,39,.75);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
#lantern-panel .lm-ask button{flex:none;border:0;border-radius:11px;padding:.5rem .85rem;font:inherit;font-size:.8rem;font-weight:800;background:linear-gradient(135deg,#C9A227,#E9C86A);color:#1A160F;cursor:pointer}
#lantern-panel .lm-ask button:disabled{opacity:.5;cursor:default}
@media print{#lantern-open,#lantern-panel{display:none!important}}