/* ===========================================================================
   EasyCalculatorSmart — Right-to-left mirror.

   LOADED ONLY IN AN RTL LANGUAGE. header.php emits the <link> when the
   active locale's `dir` is `rtl`, so an English page never downloads,
   parses or is affected by a single byte of this file.

   That separation is the point. Mirroring inside main.css would mean every
   LTR page carrying rules it can never use, and — the part that actually
   matters — one selector written slightly too broadly could regress
   fifty-three finished English pages. Here there is no such path: every
   rule below is scoped under [dir="rtl"], and the file is never served
   otherwise.

   WHAT IS AND IS NOT MIRRORED
   ---------------------------------------------------------------------
   Layout mirrors. Meaning does not.

   Mirrored:  page flow, text alignment, list indents, accent borders,
              the select's chevron, decorative carets, absolute offsets
              that place a thing "at the start" or "at the end".

   NOT mirrored:  the theme sun and moon (celestial, not directional),
              the search magnifier (a lens has no reading order), the
              globe, the check mark, the up and down arrows in the image
              queue (vertical, and reordering is not a reading direction),
              the play triangle in the tools icon set (media transport
              convention is universal, not per-language), and the × close
              control. Each of those was looked at individually — blanket
              `transform: scaleX(-1)` on every icon is the usual way RTL
              gets done badly.

   Mirrored deliberately: the chevron that means "onward" (`arrow-right`
   in the see-all and card links), because it points along the reading
   direction and in Arabic that is leftwards.

   MIXED-DIRECTION CONTENT
   ---------------------------------------------------------------------
   Filenames, extensions, URLs, numbers, code and technical identifiers
   stay left-to-right inside an RTL paragraph. `.ltr` and `.bidi` below
   are the two tools for that, and they are defined in BOTH directions —
   see the note on .ltr. Without isolation, `photo10.png` renders as
   `png.photo10` beside Arabic text, and a size like "2.4 MB" puts the
   unit on the wrong side.
   =========================================================================== */

/* ---------------------------------------------------------------------
   1. Document
   ------------------------------------------------------------------- */

[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: var(--s3); left: auto; }

/* ---------------------------------------------------------------------
   2. Header and navigation
   ------------------------------------------------------------------- */

/* The header lays out with logical properties (the brand takes
   margin-inline-end: auto on a small screen, the search box
   margin-inline-start: auto on a wide one), so the bar mirrors with no
   rule here. The Categories panel is centred under its trigger with a
   physical left: 50% and translateX(-50%), which is symmetrical. */

/* The header search field: the magnifier and the text start at the right. */
[dir="rtl"] .search-compact .input {
  padding-left: var(--s3);
  padding-right: 38px;
}
[dir="rtl"] .search-compact .search-icon { left: auto; right: 13px; }
[dir="rtl"] .search-compact .search-results { right: auto; left: 0; }

@media (max-width: 1079px) {
  [dir="rtl"] .search-compact .search-results { left: 0; right: 0; }
}

/* The onward chevron travels with the reading direction. */
[dir="rtl"] .section-more svg,
[dir="rtl"] .card-arrow svg,
[dir="rtl"] .convert-arrow svg,
[dir="rtl"] .cat-hub-link svg,
/* Buttons that end in the onward chevron. Addressed by the icon's own
   name rather than by `.btn svg`, because the same button family also
   carries download, copy and refresh glyphs, and none of those has a
   reading direction to mirror. */
[dir="rtl"] .btn svg[data-icon="arrow-right"] { transform: scaleX(-1); }

[dir="rtl"] .section-more:hover svg,
[dir="rtl"] .cat-hub-link a:hover svg { transform: scaleX(-1) translateX(3px); }

/* The card arrow leans with its span, not its glyph, so the glyph keeps
   its mirror and only the direction of travel flips. */
[dir="rtl"] .tool-card:hover .card-arrow,
[dir="rtl"] .tool-card:focus-visible .card-arrow,
[dir="rtl"] .utool:hover .card-arrow,
[dir="rtl"] .utool:focus-within .card-arrow,
[dir="rtl"] .cat-card:hover .card-arrow,
[dir="rtl"] .cat-card:focus-visible .card-arrow { transform: translateX(-3px); }

/* The chevron travels towards the reading edge, which in Arabic is the
   left, so the nudge is positive against the mirrored axis. */
[dir="rtl"] .btn:hover svg[data-icon="arrow-right"] { transform: scaleX(-1) translateX(3px); }

/* The hub head's glow sits in the far corner, which in Arabic is the left. */
[dir="rtl"] .hub-head::before {
  background: radial-gradient(50% 120% at 12% 0%, var(--hub-glow) 0%, transparent 70%);
}
/* ---------------------------------------------------------------------
   3. Language switcher
   ------------------------------------------------------------------- */

[dir="rtl"] .langswitch-panel { left: 0; right: auto; }

/* ---------------------------------------------------------------------
   4. Forms
   ------------------------------------------------------------------- */

[dir="rtl"] .label .req,
[dir="rtl"] .label .opt { margin-left: 0; margin-right: 2px; }

[dir="rtl"] .input-sm { margin-left: 0; margin-right: auto; text-align: left; }

/* The chevron moves to the start edge, and the padding that made room
   for it moves with it — otherwise the arrow sits on top of the text. */
[dir="rtl"] .select {
  padding-right: var(--s3);
  padding-left: var(--s7);
  background-position: left var(--s3) center;
}

[dir="rtl"] legend { margin-left: 0; margin-right: calc(var(--s2) * -1); }

[dir="rtl"] .form-error { border-left: 0; border-right: 3px solid var(--bad-fg); }
[dir="rtl"] .form-error ul { padding-left: 0; padding-right: var(--s5); }

[dir="rtl"] .search-hero .input,
[dir="rtl"] .tool-filter .input {
  padding-left: var(--s4);
  padding-right: var(--s8);
  text-align: right;
}
[dir="rtl"] .search-hero .search-icon,
[dir="rtl"] .tool-filter .search-icon { left: auto; right: var(--s4); }

/* ---------------------------------------------------------------------
   5. Tables

   Numeric columns stay end-aligned, which in RTL is the LEFT edge. The
   digits themselves are already left-to-right — Arabic writes numbers in
   the same order — so only the column alignment flips.
   ------------------------------------------------------------------- */

[dir="rtl"] table.data caption,
[dir="rtl"] table.data th,
[dir="rtl"] table.data td { text-align: right; }

[dir="rtl"] table.data td.num,
[dir="rtl"] table.data th.num,
[dir="rtl"] table.data td.num-wrap,
[dir="rtl"] table.data th.num-wrap { text-align: left; }

@media (max-width: 640px) {
  [dir="rtl"] table.stacked th[scope="row"] { text-align: right; }
  [dir="rtl"] table.stacked td { text-align: left; }
  [dir="rtl"] table.stacked td::before { text-align: right; }
}

/* ---------------------------------------------------------------------
   6. Prose, lists and page furniture
   ------------------------------------------------------------------- */

[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol,
[dir="rtl"] .toc ol { padding-left: 0; padding-right: var(--s5); }

[dir="rtl"] .step-list { padding-right: 0; }
[dir="rtl"] .step-list > li { padding-left: 0; padding-right: var(--s7); }
[dir="rtl"] .step-list > li::before { left: auto; right: 0; }

[dir="rtl"] .audit-formula,
[dir="rtl"] .prose blockquote { border-left: 0; border-right: 3px solid var(--accent); }

[dir="rtl"] .disclaimer { border-left: 0; border-right: 4px solid var(--warn-fg); }

[dir="rtl"] .audit-row dd { text-align: left; }

[dir="rtl"] .result-value .unit,
[dir="rtl"] .stat-value .unit { margin-left: 0; margin-right: 0.15em; }

[dir="rtl"] .tl-axis { padding-left: 0; padding-right: calc(22% + var(--s3)); }
@media (max-width: 640px) {
  [dir="rtl"] .tl-axis { padding-right: 0; }
}

@media (max-width: 559px) {
  [dir="rtl"] .slide-row-meta { padding-left: 0; padding-right: 38px; }
}

/* Disclosure and breadcrumb carets. These point along the reading
   direction and so must be mirrored; the chevron that opens downward
   does not, and is left alone. */
[dir="rtl"] .disclosure > summary::after,
[dir="rtl"] .toc > summary::after {
  border-right: 0;
  border-left: 2px solid var(--text-faint);
  transform: rotate(-45deg);
}

[dir="rtl"] .breadcrumb li + li::before {
  margin-right: 0;
  margin-left: var(--s1);
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
   7. Mixed-direction content
   ------------------------------------------------------------------- */

/* Content that is left-to-right regardless of the page's direction:
   filenames, extensions, URLs, code, version numbers, technical
   identifiers. `isolate` is what stops the surrounding Arabic from
   reordering it — `direction: ltr` alone is not enough, because the
   bidirectional algorithm still resolves the run against its neighbours.

   Defined here AND in main.css. A file dropped into an English page is
   already left-to-right so the class is inert there, but the markup that
   carries it is shared, and a class that exists in only one stylesheet is
   a class someone eventually forgets to add. */
[dir="rtl"] .ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* For a run whose direction should be worked out from its own first
   strong character rather than declared — a filename the visitor chose,
   which may be in either script. */
[dir="rtl"] .bidi {
  unicode-bidi: isolate;
}

/* The tool queues show a filename, then a size, then controls. The name
   is isolated so `photo10.png` does not render as `png.photo10`, and the
   size is isolated so `2.4 MB` keeps its unit on the right of the number. */
[dir="rtl"] .file-row-name,
[dir="rtl"] .file-row-size,
[dir="rtl"] .slide-row-meta,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .io-box,
[dir="rtl"] .tool-fact-value {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* The queue row itself stays RTL: the name leads from the right, the
   controls trail on the left, exactly as the LTR layout has it mirrored. */
[dir="rtl"] .file-row { flex-direction: row; }

/* ---------------------------------------------------------------------
   Reduced motion

   main.css cancels the travelling chevron with
   `.tool-card:hover .tool-card-go svg { transform: none !important }`.
   In RTL that is wrong in a way it cannot be in LTR: the resting state
   here is `scaleX(-1)`, so `none` does not stop the arrow moving, it
   UNMIRRORS it - the chevron flips to point the wrong way the moment you
   hover, for exactly the visitors who asked for less movement.

   These restore the mirror without the travel. Found by
   tests/motioncheck.php, which is the only reason anyone would notice:
   it needs RTL and reduced motion and a hover, all at once.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [dir="rtl"] .section-more svg,
  [dir="rtl"] .section-more:hover svg,
  [dir="rtl"] .card-arrow svg,
  [dir="rtl"] .convert-arrow svg,
  [dir="rtl"] .cat-hub-link svg,
  [dir="rtl"] .cat-hub-link a:hover svg,
  [dir="rtl"] .btn svg[data-icon="arrow-right"],
  [dir="rtl"] .btn:hover svg[data-icon="arrow-right"] { transform: scaleX(-1) !important; }

  [dir="rtl"] .tool-card:hover .card-arrow,
  [dir="rtl"] .tool-card:focus-visible .card-arrow,
  [dir="rtl"] .utool:hover .card-arrow,
  [dir="rtl"] .utool:focus-within .card-arrow,
  [dir="rtl"] .cat-card:hover .card-arrow,
  [dir="rtl"] .cat-card:focus-visible .card-arrow { transform: none !important; }
}

/* --------------------------------------------------------------------
   CBM calculator

   The carton row narrows the unit select's chevron gutter (main.css
   §38). The generic RTL rule above would put the wide gutter back on
   the other side, so the tighter pair is mirrored here too.
   ------------------------------------------------------------------ */
[dir="rtl"] .cbm-row .select {
  padding-right: var(--s2);
  padding-left: var(--s5);
  background-position: left var(--s2) center;
}

/* The row number is a leading marker, so it follows the reading
   direction along with everything else in the grid — nothing to flip.
   The quick-conversion list keeps its unit label first for the same
   reason. Numbers themselves stay LTR by Unicode default. */
[dir="rtl"] .cbm-convert-out dd { text-align: start; }