/* 从右往左的界面（阿语，我们的适配层）。
 *
 * 上游样式表（variant-c.css 等）的界面和流程归上游管，定期合并。如果把里面的 left/right 直接改成逻辑属性，
 * 每次合并都在这些行上冲突，所以上游文件不动，镜像规则全放这里：只在 <html dir="rtl"> 下生效，
 * 从左往右的语言完全不受影响。上游新加了带方向的样式，合并后跑一遍阿语巡检（npm run i18n:audit -- --langs ar）再补到这里。
 *
 * 书页内容（工作台里的成书预览、阅读页）按「书的语言」定方向（元素上的 dir），不按界面语言；
 * 跟书走的规则用 :dir()，跟界面走的用 html[dir="rtl"]。
 */

/* ---------- 文字与输入 ---------- */
/* 阿语字母要连写：字间距和斜体会把它们拆开或变形 */
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] em, html[lang="ar"] i { font-style: normal; }
/* 用户输入和用户内容（书名、名字、正文…）可能是任何语言：每段按自己的文字定方向和对齐 */
html[dir="rtl"] textarea, html[dir="rtl"] input:not([type="number"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[dir="rtl"] [data-user-content] { unicode-bidi: plaintext; }
/* 空输入框的占位文字是界面语言，跟界面方向走（plaintext 下空框会按从左往右显示占位文字） */
html[dir="rtl"] textarea:placeholder-shown, html[dir="rtl"] input:placeholder-shown { unicode-bidi: normal; direction: rtl; }
/* 数字、链接、代码保持从左往右 */
html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="email"], html[dir="rtl"] code, html[dir="rtl"] pre:not(.vc-story-option-text pre) { direction: ltr; }

/* ---------- 方向箭头：返回 / 上一步 / 下一步 / 展开 ---------- */
html[dir="rtl"] svg:has(> path[d="M8 2L4 6l4 4"]), html[dir="rtl"] svg:has(> path[d="M4 2l4 4-4 4"]) { transform: scaleX(-1); }

/* ---------- variant-c.css 的镜像（行号对应 11-05 上游版本） ---------- */
html[dir="rtl"] .vc-step, html[dir="rtl"] .vc-age, html[dir="rtl"] .vc-gender, html[dir="rtl"] .vc-output-layout-choice .vc-page-btn,
html[dir="rtl"] .vc-style-card, html[dir="rtl"] .vc-story-option-card, html[dir="rtl"] .vc-character-tile, html[dir="rtl"] .vc-history-item,
html[dir="rtl"] .vc-history-more, html[dir="rtl"] .vc-fb-modal { text-align: right; }
.vc-story-option-text p:dir(rtl), .vc-story-option-text pre:dir(rtl) { text-align: right; }
html[dir="rtl"] .vc-form { border-right: 0; border-left: 1px solid var(--line); }
@media (max-width: 1180px) { html[dir="rtl"] .vc-form { border-left: 0; } }
html[dir="rtl"] .vc-lbl-clear { float: left; }
html[dir="rtl"] .vc-seeds-k { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .vc-coin-star { margin-right: 0; margin-left: 0.25em; }
html[dir="rtl"] .vc-style-zoom { right: auto; left: 6px; }
html[dir="rtl"] .vc-style-check { left: auto; right: 6px; }
html[dir="rtl"] .vc-style-lightbox-close { right: auto; left: 10px; }
html[dir="rtl"] .vc-production-status { border-left: 0; border-right: 4px solid var(--forest-700); }
html[dir="rtl"] .vc-production-status.is-error { border-right-color: #a44a35; }
html[dir="rtl"] .vc-production-status.is-complete { border-right-color: #4b8d70; }
html[dir="rtl"] .vc-final-pageno { left: auto; right: 10px; }
html[dir="rtl"] .vc-redo-btn, html[dir="rtl"] .vc-layout-btn { right: auto; left: 8px; }
html[dir="rtl"] .vc-page-tools-label { margin-right: 0; margin-left: 2px; }
html[dir="rtl"] .vc-template-legacy-note, html[dir="rtl"] .vc-template-standard-note, html[dir="rtl"] .vc-scene-assistant-stale {
  border-left: 0; border-right: 3px solid var(--forest-500); }
html[dir="rtl"] .vc-template-standard-note { border-right-color: var(--paper-300); }
html[dir="rtl"] .vc-scene-assistant-stale { border-right-color: #a84e30; }
html[dir="rtl"] .vc-scene-fields { padding-right: 0; padding-left: 4px; }
.vc-story-page-copy blockquote:dir(rtl) { padding-left: 0; border-left: 0; padding-right: 10px; border-right: 2px solid var(--forest-500); }
html[dir="rtl"] .vc-page-layout-control em, html[dir="rtl"] .vc-page-flag-arrow, html[dir="rtl"] .vc-dockpanel-busy,
html[dir="rtl"] .vc-zone-edit { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .vc-language-picker { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .vc-fixed-page-copy > span { right: auto; left: 12px; }
html[dir="rtl"] .vc-reader-close { right: auto; left: 12px; }
html[dir="rtl"] .vc-dock { right: auto; left: 18px; }
@media (max-width: 900px) { html[dir="rtl"] .vc-dock { left: 10px; } }
html[dir="rtl"] .vc-fb-x { right: auto; left: 16px; }
html[dir="rtl"] .vc-fb-thumb-x { right: auto; left: -6px; }
html[dir="rtl"] .vc-dockstrip-last em { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .vc-book-edge { left: auto; right: 0; background: linear-gradient(to left, rgba(0,0,0,0.3), rgba(0,0,0,0)); }
@media (max-width: 600px) { .vc-paper-layout .vc-paper-copy:dir(rtl) { text-align: right !important; } }