/*
 * wiki-translated.css — Poly-Sim Multilingual Content Pages
 * Matches the English wiki.css design system exactly.
 * Used by all 11 language silos: ar, hi, ru, ko, ja, pt, es, fr, tr, vi, id
 * ─────────────────────────────────────────────────────────────────────────
 * Layout: same two-col grid as wiki.css (article + sidebar on ≥860px)
 * Colors: white background, #1e293b text, accent #0284c7
 * Nav: injected by translated-nav.js (collapsed sidebar + bottom-bar mobile)
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ─── 0. CORE WEB VITALS — font-display:swap to prevent invisible text ──── */
/* Forces browser to show fallback text immediately while Inter loads.       */
/* This satisfies CLS < 0.1 and LCP < 2.5s requirements.                    */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter');
}

/* ─── 1. RESET & BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: #1e293b;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}
a { color: #0284c7; text-decoration: none; }
a:hover { text-decoration: underline; color: #0369a1; }
img { max-width: 100%; height: auto; display: block; }

/* ─── 2. COLOUR TOKENS ─────────────────────────────────────────────────── */
:root {
  --accent:      #0284c7;
  --accent-mid:  rgba(2,132,199,.10);
  --accent-line: rgba(2,132,199,.28);
  --text:        #1e293b;
  --text-muted:  #64748b;
  --text-xmuted: #94a3b8;
  --border:      #e2e8f0;
  --surface:     #f8fafc;
  --surface-2:   #f1f5f9;
  --green:       #16a34a;
  --purple:      #7c3aed;
  --amber:       #d97706;
}

/* ─── 3. SIDEBAR OFFSET ──────────────────────────────────────────────────
 * translated-nav.js sets `tn-has-sidebar` (collapsed, 64px) and adds
 * `tn-expanded` (258px) when the user opens the rail.
 * The legacy `ps-*` names are kept as aliases so any page or script still
 * emitting them keeps working — previously the CSS ONLY knew `ps-*` while the
 * JS ONLY emitted `tn-*`, so no offset was ever applied and the fixed sidebar
 * sat on top of the article. This mismatch was the root cause of the
 * inconsistent/overlapping multilingual layout.
 * ──────────────────────────────────────────────────────────────────────── */
/* NOTE: the base rule sets `body { width:100% }`. Combined with margin-left
 * that computes to 100% + rail width, pushing every element past the right
 * edge (measured: 864px content on an 800px viewport) and clipping text.
 * `width:auto` lets the block shrink to the remaining space instead. */
body.tn-has-sidebar,
body.ps-sidebar-collapsed { margin-left: 64px; width: auto; max-width: none; }
body.tn-expanded,
body.ps-has-sidebar { margin-left: 258px; width: auto; max-width: none; }

/* Smooth the shift when the rail expands/collapses */
body.tn-has-sidebar,
body.tn-expanded { transition: margin-left .18s ease; }

@media (max-width: 768px) {
  body.tn-has-sidebar,
  body.tn-expanded,
  body.ps-has-sidebar,
  body.ps-sidebar-collapsed { margin-left: 0; padding-bottom: 60px; }
}

/* ─── 4. ARTICLE HEADER (dark top bar — like English wiki-art-header) ─────
 * Full-bleed: cancel the body offset so the dark band spans edge-to-edge,
 * then re-add it as padding so the text still lines up with the article.
 * ──────────────────────────────────────────────────────────────────────── */
.t-header {
  background: #0f172a;
  padding: 36px 24px 28px;
  margin-left: -64px;                    /* default = collapsed rail */
  padding-left: calc(64px + 24px);
  transition: margin-left .18s ease, padding-left .18s ease;
}
body.tn-expanded .t-header,
body.ps-has-sidebar .t-header {
  margin-left: -258px;
  padding-left: calc(258px + 24px);
}
@media (max-width: 768px) {
  .t-header,
  body.tn-expanded .t-header,
  body.ps-has-sidebar .t-header {
    margin-left: 0;
    padding: 24px 18px 20px;
    padding-left: 18px;
  }
}
.t-header-inner { max-width: 1060px; margin: 0 auto; }

/* ─── 4b. LEGACY INLINE HEADER — hidden once the real sidebar loads ───────
 * Some pages ship a plain <header class="t-header"> containing .t-logo +
 * .t-nav (a mini top nav). smart-year.js hides those, but if JS is slow the
 * unstyled links flash first. Neutralise their appearance up front.
 * ──────────────────────────────────────────────────────────────────────── */
.t-header > .t-logo,
.t-header > .t-nav { display: none; }

/* Breadcrumb inside header */
.t-breadcrumb {
  font-size: 12px; color: #94a3b8;
  margin-bottom: 12px;
}
.t-breadcrumb a { color: #64748b; text-decoration: none; }
.t-breadcrumb a:hover { color: #f1f5f9; }

/* H1 in header */
.t-header h1 {
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 800; color: #f1f5f9;
  letter-spacing: -0.02em; line-height: 1.22;
  margin-bottom: 10px;
}
/* Lead/desc in header */
.t-header .t-lead,
.t-lead {
  font-size: 15px; color: #94a3b8;
  line-height: 1.65; max-width: 680px;
  margin-bottom: 10px;
}
/* Meta row in header */
.t-meta { font-size: 12px; color: #475569; }

/* ─── 5. PAGE LAYOUT — two-col grid (mirrors wiki.css .wiki-layout) ──────── */
.t-layout {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px 96px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 48px;
  align-items: start;
  box-sizing: border-box;
}
@media (max-width: 860px) {
  .t-layout {
    grid-template-columns: 1fr;
    padding: 32px 18px 72px;
    gap: 0;
  }
  .t-sidebar { display: none; }
}

/* ─── 6. ARTICLE BODY (mirrors wiki.css .wiki-article) ────────────────────── */
.t-article {
  min-width: 0; /* prevent grid blowout */
}

/* Headings */
.t-article h2 {
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 800; color: #0f172a;
  margin: 40px 0 14px;
  letter-spacing: -0.015em; line-height: 1.3;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.t-article h2:first-of-type { margin-top: 24px; }
.t-article h3 {
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 700; color: #1e293b;
  margin: 28px 0 10px;
  line-height: 1.35;
}
.t-article p { margin: 0 0 18px; color: #374151; line-height: 1.78; }
.t-article ul, .t-article ol { margin: 0 0 18px 20px; }
.t-article li { margin-bottom: 8px; line-height: 1.7; color: #374151; }
.t-article strong { color: #0f172a; font-weight: 700; }
.t-article em { font-style: italic; color: #475569; }
.t-article code {
  font-family: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;
  font-size: 13px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; color: #7c3aed;
}
.t-article blockquote {
  border-left: 3px solid var(--accent-line);
  padding: 12px 18px; margin: 20px 0;
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  font-style: italic; color: var(--text-muted);
}

/* ─── 7. QUICK SUMMARY BOX (mirrors .quick-summary in English) ──────────── */
.t-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  margin: 0 0 32px;
}
.t-summary-title {
  font-size: 11px; font-weight: 700;
  color: var(--accent); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 12px;
}
.t-summary ul { margin: 0; list-style: none; }
.t-summary li { padding: 5px 0; font-size: 14px; color: var(--text); line-height: 1.6; border-bottom: 1px solid var(--border); }
.t-summary li:last-child { border-bottom: none; }

/* ─── 8. CALLOUT / HIGHLIGHT BOXES (mirrors .wiki-callout) ─────────────── */
.t-callout,
.t-highlight-box {
  background: var(--accent-mid);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14px; color: var(--text); line-height: 1.7;
}
.t-callout strong, .t-highlight-box strong { color: #0f172a; }
.t-highlight-box.info, .t-callout.info { background: rgba(2,132,199,.07); border-left-color: #0284c7; border-color: rgba(2,132,199,.2); }
.t-highlight-box.warning, .t-callout.warning { background: rgba(217,119,6,.07); border-left-color: #d97706; border-color: rgba(217,119,6,.2); color: #92400e; }
.t-highlight-box.success, .t-callout.success { background: rgba(22,163,74,.07); border-left-color: #16a34a; border-color: rgba(22,163,74,.2); color: #166534; }
.t-highlight-box.danger, .t-callout.danger { background: rgba(220,38,38,.07); border-left-color: #dc2626; border-color: rgba(220,38,38,.2); color: #991b1b; }

/* Bare callout classes (class="info", class="warning", class="success", class="danger").
   Locale article bodies use these directly; give them the same box styling as the
   .t-highlight-box variants above so they render as tinted callouts, not plain text. */
.info, .warning, .success, .danger {
  background: var(--accent-mid);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14px; color: var(--text); line-height: 1.7;
}
.info strong, .warning strong, .success strong, .danger strong { color: #0f172a; }
.info { background: rgba(2,132,199,.07); border-left-color: #0284c7; border-color: rgba(2,132,199,.2); }
.warning { background: rgba(217,119,6,.07); border-left-color: #d97706; border-color: rgba(217,119,6,.2); color: #92400e; }
.success { background: rgba(22,163,74,.07); border-left-color: #16a34a; border-color: rgba(22,163,74,.2); color: #166534; }
.danger { background: rgba(220,38,38,.07); border-left-color: #dc2626; border-color: rgba(220,38,38,.2); color: #991b1b; }

/* ─── 9. TABLES (mirrors .wiki-table) ──────────────────────────────────── */
.t-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.t-table, .t-article table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; background: #fff;
}
.t-table th, .t-article thead th {
  background: var(--surface-2); color: #0f172a;
  font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.t-table td, .t-article tbody td {
  padding: 10px 14px; color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.55;
}
.t-table tr:last-child td, .t-article tbody tr:last-child td { border-bottom: none; }
.t-table tr:hover td, .t-article tbody tr:hover td { background: var(--surface); }

/* ─── 10. STATS ROW (mirrors .wiki-stats-row) ───────────────────────────── */
.t-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin: 28px 0;
}
.t-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px; text-align: center;
}
.t-stat-val { font-size: 26px; font-weight: 900; color: var(--accent); line-height: 1.1; }
.t-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

/* ─── 11. PRICE BAR (mirrors .wiki-price-bar) ──────────────────────────── */
.t-price-bar { margin: 20px 0; }
.t-price-bar-title { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.t-bar-track { height: 8px; background: #fee2e2; border-radius: 99px; overflow: hidden; }
.t-bar-fill { height: 100%; background: linear-gradient(90deg, #16a34a, #4ade80); border-radius: 99px; }
.t-bar-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 5px; }

/* ─── 12. CTA STRIP (affiliate buttons — matches article pattern) ──────── */
.t-cta-strip {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; margin: 28px 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.t-cta-primary {
  margin: 28px 0;
  padding: 24px 22px;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%);
  border: 1.5px solid rgba(99,102,241,.3);
  border-radius: 14px;
}
.t-cta-headline {
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 900; color: #f1f5f9;
  margin-bottom: 6px; line-height: 1.25;
}
.t-cta-sub { font-size: 13px; color: #94a3b8; margin-bottom: 16px; line-height: 1.6; }
.t-cta-label { font-size: 11px; font-weight: 800; color: #818cf8; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.t-cta-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.t-cta-end {
  margin: 32px 0 24px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

/* Buttons */
.t-btn-pm {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; font-size: 14px; font-weight: 800;
  padding: 11px 22px; border-radius: 99px;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 4px 18px rgba(109,40,217,.35);
  min-height: 44px; cursor: pointer;
}
.t-btn-pm:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(109,40,217,.52); color: #fff; text-decoration: none; }
.t-btn-cr {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: #1e293b; font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 99px;
  border: 1.5px solid var(--border); text-decoration: none;
  white-space: nowrap; min-height: 44px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.t-btn-cr:hover { border-color: #94a3b8; background: var(--surface); color: #0f172a; text-decoration: none; }

/* ─── 13. RELATED ARTICLES (mirrors .wiki-related sidebar) ─────────────── */
.t-related {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 24px 0;
}
.t-related h3 {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px; border-top: none; padding-top: 0;
}
.t-related ul { list-style: none; margin: 0; padding: 0; }
.t-related li { border-bottom: 1px solid var(--border); }
.t-related li:last-child { border-bottom: none; }
.t-related a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; font-size: 14px; color: var(--text);
  min-height: 40px; text-decoration: none; transition: color .12s;
}
.t-related a:hover { color: var(--accent); text-decoration: none; }
.t-related a::before { content: '→'; color: var(--accent); font-size: 12px; flex-shrink: 0; }

/* ─── 14. ARTICLE LIST (wiki index pages) ──────────────────────────────── */
.t-article-list { list-style: none; padding: 0; margin: 0; }
.t-article-list li { border-bottom: 1px solid var(--border); }
.t-article-list li:last-child { border-bottom: none; }
.t-article-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; font-size: 14px; color: var(--text);
  min-height: 44px; text-decoration: none; transition: color .12s;
}
.t-article-list a:hover { color: var(--accent); }
.t-article-list a::before { content: '→'; color: var(--accent); font-size: 12px; }

/* ─── 15. NAV ROW (prev/next article) ──────────────────────────────────── */
.t-nav-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin: 40px 0 0;
}
.t-nav-btn {
  display: block; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.t-nav-btn:hover { border-color: var(--accent); background: rgba(2,132,199,.04); text-decoration: none; }
.t-nav-lbl { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.t-nav-ttl { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; }
.t-nav-btn:hover .t-nav-ttl { color: var(--accent); }

/* ─── 16. SIDEBAR (right-hand TOC — mirrors .wiki-sidebar) ─────────────── */
.t-sidebar { min-width: 0; }
.t-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px; margin-bottom: 20px;
  position: sticky; top: 24px;
}
.t-toc-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}
.t-toc a {
  display: block; font-size: 13px; color: var(--text-muted);
  padding: 5px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; line-height: 1.4; min-height: 32px;
  display: flex; align-items: center;
  transition: color .12s;
}
.t-toc a:last-child { border-bottom: none; }
.t-toc a:hover { color: var(--accent); }
.t-toc a.active { color: var(--accent); font-weight: 600; }

/* Sidebar CTA card */
.t-sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.t-sidebar-card h4 {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}
.t-sidebar-pm {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 10px 14px; border-radius: 8px;
  text-decoration: none; text-align: center;
  margin-bottom: 8px; min-height: 40px;
  transition: opacity .15s;
}
.t-sidebar-pm:hover { opacity: .88; color: #fff; text-decoration: none; }
.t-sidebar-cr {
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--text);
  font-size: 12px; font-weight: 700;
  padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid var(--border);
  text-decoration: none; text-align: center; min-height: 38px;
  transition: border-color .15s;
}
.t-sidebar-cr:hover { border-color: #94a3b8; color: #0f172a; text-decoration: none; }

/* ─── 17. LANG BAR (hreflang picker strip) ──────────────────────────────── */
.t-lang-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 9px 24px;
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.t-lang-bar a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.t-lang-bar a:hover { text-decoration: underline; }

/* ─── 18. DISCLAIMER ────────────────────────────────────────────────────── */
.t-disclaimer {
  font-size: 12px; color: var(--text-xmuted);
  line-height: 1.6; margin-top: 6px; font-style: italic;
  text-align: center;
}

/* ─── 19. FOOTER ────────────────────────────────────────────────────────── */
.t-footer {
  background: #040810;
  border-top: 1px solid #0f2040;
  padding: 22px 28px;
  margin-top: 48px;
  text-align: center;
  font-size: 12px;
  color: #334155;
}
.t-footer a { color: #475569; text-decoration: none; }
.t-footer a:hover { color: #94a3b8; }
.t-footer .t-disclaimer { color: #1e3a5f; margin-top: 8px; }

/* ─── 20. STEPS (how-to numbered list) ─────────────────────────────────── */
.t-steps { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.t-step {
  flex: 1; min-width: 160px; max-width: 220px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 14px; text-align: center;
}
.t-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}
.t-step h4 { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.t-step p { font-size: 12px; color: var(--text-muted); line-height: 1.55; }

/* ─── 21. INFO / WARN BOXES ────────────────────────────────────────────── */
.t-info {
  background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.22);
  border-radius: 10px; padding: 14px 16px; margin: 18px 0;
  font-size: 14px; color: #166534; line-height: 1.65;
}
.t-warn {
  background: rgba(217,119,6,.07); border: 1px solid rgba(217,119,6,.22);
  border-radius: 10px; padding: 14px 16px; margin: 18px 0;
  font-size: 14px; color: #92400e; line-height: 1.65;
}

/* ─── 22. LANG SWITCHER GRID ────────────────────────────────────────────── */
.t-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin: 16px 0;
}
.t-lang-grid a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s; min-height: 44px;
}
.t-lang-grid a:hover { border-color: var(--accent); background: rgba(2,132,199,.05); color: var(--accent); text-decoration: none; }

/* ─── 23. RTL SUPPORT (Arabic dir="rtl") ───────────────────────────────── */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .t-article ul,
[dir="rtl"] .t-article ol { margin: 0 20px 18px 0; }
[dir="rtl"] .t-callout,
[dir="rtl"] .t-highlight-box { border-left: none; border-right: 3px solid var(--accent); border-radius: 10px 0 0 10px; }
[dir="rtl"] .t-highlight-box.info,  [dir="rtl"] .t-callout.info  { border-right-color: #0284c7; }
[dir="rtl"] .t-highlight-box.warning,[dir="rtl"] .t-callout.warning{ border-right-color: #d97706; }
[dir="rtl"] .t-highlight-box.success,[dir="rtl"] .t-callout.success{ border-right-color: #16a34a; }
[dir="rtl"] .t-summary { border-left: none; border-right: 3px solid var(--accent); border-radius: 10px 0 0 10px; }
[dir="rtl"] .t-related a::before { content: '←'; }
[dir="rtl"] .t-article-list a::before { content: '←'; }
[dir="rtl"] .t-article blockquote { border-left: none; border-right: 3px solid var(--accent-line); border-radius: 8px 0 0 8px; }
[dir="rtl"] .t-toc a { text-align: right; }
[dir="rtl"] .t-lang-bar { direction: rtl; }
[dir="rtl"] .t-nav-row { direction: rtl; }

/* ─── 24. RESPONSIVE BREAKPOINTS ───────────────────────────────────────── */

/* ── ≤480px — small phones ── */
@media (max-width: 480px) {
  .t-layout { padding: 24px 14px 60px; }
  .t-article h2 { font-size: 18px; margin-top: 32px; }
  .t-article h3 { font-size: 15px; }
  .t-cta-buttons { flex-direction: column; align-items: stretch; }
  .t-cta-buttons .t-btn-pm,
  .t-cta-buttons .t-btn-cr { justify-content: center; text-align: center; width: 100%; }
  .t-cta-strip { flex-direction: column; align-items: stretch; }
  .t-cta-strip .t-btn-pm,
  .t-cta-strip .t-btn-cr { justify-content: center; width: 100%; }
  .t-stats { grid-template-columns: repeat(2, 1fr); }
  .t-steps { flex-direction: column; }
  .t-step { max-width: 100%; }
  .t-nav-row { grid-template-columns: 1fr; }
  .t-table th, .t-table td,
  .t-article thead th, .t-article tbody td { padding: 8px 10px; font-size: 13px; }
  .t-lang-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 481–768px — tablets ── */
@media (min-width: 481px) and (max-width: 768px) {
  .t-layout { padding: 32px 18px 72px; }
  .t-stats { grid-template-columns: repeat(3, 1fr); }
  .t-cta-buttons { flex-wrap: wrap; }
}

/* ── 769–859px — large tablets ── */
@media (min-width: 769px) and (max-width: 859px) {
  .t-layout { grid-template-columns: 1fr; padding: 36px 20px 80px; }
  .t-sidebar { display: none; }
}

/* ── ≥860px — desktop two-col ── */
@media (min-width: 860px) {
  .t-layout { grid-template-columns: 1fr 240px; }
  .t-sidebar { display: block; }
}

/* ── ≥1200px — wide desktop ── */
@media (min-width: 1200px) {
  .t-layout { max-width: 1060px; gap: 56px; }
}

/* ─── 25. LEGACY COMPATIBILITY (pages using old inline nav pattern) ─────── */
/* The old pattern used .t-header as a top nav bar containing .t-logo + .t-nav.
   smart-year.js hides these via JS. These CSS rules ensure they don't break
   the layout before JS runs (FOUC protection). */
.t-logo {
  font-size: 16px; font-weight: 900; color: #f1f5f9;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; min-height: 44px;
}
.t-logo span {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 99px;
  letter-spacing: .04em; text-transform: uppercase;
}
.t-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.t-nav a {
  color: #94a3b8; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  transition: background .15s, color .15s;
  min-height: 36px; display: inline-flex; align-items: center;
}
.t-nav a:hover { background: rgba(255,255,255,.06); color: #f1f5f9; }
/* ─── LEGACY LAYOUT UNIFICATION ──────────────────────────────────────────
 * Two structures exist across the 11 silos, from different build passes:
 *   A) <header class="t-header"><main class="t-main"><article class="t-article">
 *   B) <div class="t-outer"><main class="t-wrap"><div class="t-header">…<div class="t-body">
 * Left alone they produce visibly different pages (different widths, header
 * treatment and spacing) — the inconsistency reported by the user.
 * These rules normalise BOTH to the same measure, rhythm and header style so
 * every language reads as one design system.
 * ──────────────────────────────────────────────────────────────────────── */
.t-main { display: block; }

/* Shared content measure for every legacy wrapper */
.t-wrap, .t-container, .t-outer > .t-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px 96px;
  width: 100%;
}
.t-outer { width: 100%; }

/* Variant B nests .t-header INSIDE .t-wrap, so the negative-margin full-bleed
   used by variant A would break the centred column. Render it as a contained
   article masthead instead — same dark band, same type scale, no overlap. */
.t-outer .t-header,
.t-wrap .t-header {
  margin-left: 0;
  padding: 32px 28px 26px;
  border-radius: 0 0 14px 14px;
  margin-bottom: 8px;
}
body.tn-expanded .t-outer .t-header,
body.tn-expanded .t-wrap .t-header,
body.ps-has-sidebar .t-outer .t-header,
body.ps-has-sidebar .t-wrap .t-header {
  margin-left: 0;
  padding-left: 28px;
}
@media (max-width: 768px) {
  .t-outer .t-header,
  .t-wrap .t-header { padding: 22px 18px 18px; border-radius: 0; }
  .t-wrap, .t-container, .t-outer > .t-wrap { padding: 0 16px 72px; }
}

/* Variant B title/tag/meta — match variant A's .t-header h1 treatment */
.t-header .t-title {
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 800; color: #f1f5f9;
  letter-spacing: -0.02em; line-height: 1.22;
  margin-bottom: 10px;
}
.t-header .t-tag {
  display: inline-block;
  background: rgba(2,132,199,.18);
  border: 1px solid rgba(2,132,199,.38);
  color: #7dd3fc;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 99px;
  margin-bottom: 10px;
}
.t-header .t-meta { display: flex; flex-wrap: wrap; gap: 14px; color: #64748b; font-size: 12px; }
.t-header .t-meta strong { color: #94a3b8; }

/* Variant B body — same rhythm as .t-article */
.t-body { min-width: 0; padding-top: 24px; }
/* Old TOC inside article (inline .t-toc without sidebar) */
.t-article .t-toc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 24px;
  position: static;
}
/* Old .t-body alias */
.t-body h2 { font-size: clamp(18px,2.8vw,22px); font-weight:800; color:#0f172a; margin:36px 0 12px; }
.t-body h3 { font-size:16px; font-weight:700; color:#1e293b; margin:24px 0 8px; }
.t-body p  { margin:0 0 16px; color:#374151; line-height:1.75; }
.t-body ul,.t-body ol { margin:0 0 16px 20px; }
.t-body li { margin-bottom:7px; color:#374151; }
/* Old inline table class */
.t-table { width:100%; border-collapse:collapse; font-size:14px; }
.t-table th { background:var(--surface-2); padding:9px 12px; font-size:12px; font-weight:700; border-bottom:1px solid var(--border); }
.t-table td { padding:9px 12px; border-bottom:1px solid var(--border); }
/* Calc page alias */
.calc-page, .calc-container { max-width:860px; margin:0 auto; padding:1.5rem 1rem 3.5rem; width:100%; }

/* v83: one PS shell; offsets belong exclusively to .ps-page-body.
   Normalize legacy article wrappers without rewriting article content. */
body.ps-translated { margin-left:0; margin-right:0; width:auto; max-width:none; background:#fff; }
.ps-translated .t-main { display:block; width:100%; max-width:1000px; margin:0 auto; padding:32px 24px 72px; }
.ps-translated .t-header { margin-left:0; margin-right:0; padding:32px 24px 24px; background:#fff; border-bottom:1px solid #e2e8f0; border-radius:0; }
.ps-translated .t-header[hidden] { display:none!important; }
.ps-translated .t-header-inner { max-width:1000px; }
.ps-translated .t-container .t-header,.ps-translated .t-wrap .t-header { padding-left:0; padding-right:0; }
.ps-translated h1,.ps-translated .t-header .t-title { font-size:clamp(24px,3.5vw,32px); line-height:1.25; font-weight:800; letter-spacing:-.025em; color:#0f172a; margin:0 0 16px; overflow-wrap:break-word; }
.ps-translated .t-lead,.ps-translated .t-header .t-lead { color:#475569; font-size:16px; line-height:1.75; }
.ps-translated .t-breadcrumb { color:#475569; }
.ps-translated .t-breadcrumb a { color:#0369a1; }
.ps-translated .t-breadcrumb a:hover { color:#075985; text-decoration:underline; }
.ps-translated .t-meta,.ps-translated .t-header .t-meta { color:#475569; }
.ps-translated .t-body { font-size:16px; line-height:1.78; }
.ps-translated .t-header .t-tag { background:#eff6ff; color:#075985; border-color:#bae6fd; }
.ps-translated .t-cta-primary :is(h2,h3,p,strong),.ps-translated .t-cta-primary .t-cta-headline { color:#f8fafc; }
.ps-translated .t-cta-primary .t-cta-label { color:#bae6fd; }
.ps-translated .t-cta-primary .t-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; min-height:44px; margin:6px 4px; background:#6d28d9; color:white; border-radius:8px; font-weight:700; }
.ps-translated .t-cta-primary .t-btn-secondary { background:#334155; color:white; }
.ps-translated .t-layout { grid-template-columns:minmax(0,1fr) 220px; gap:32px; }
.ps-translated .t-article,.ps-translated .t-body,.ps-translated .t-wrap { min-width:0; overflow-wrap:break-word; }
.ps-translated .t-table-wrap { max-width:100%; }
.ps-translated .t-table-wrap table { min-width:640px; }
.ps-translated .hub-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.ps-translated .hub-card { background:#f8fafc; border:1px solid #e2e8f0; }
.ps-translated .hub-card h2,.ps-translated .section-title { color:#0f172a; border-color:#e2e8f0; }
.ps-translated .hub-card p { color:#475569; }
.ps-translated .hub-card a.card-link { color:#0369a1; }
.ps-translated .wiki-list li a { background:#f8fafc; border-color:#e2e8f0; color:#334155; }
.ps-translated .wiki-list li a:hover { background:#eff6ff; color:#075985; }
.ps-translated :is(input,select,textarea) { max-width:100%; }
.ps-translated :is(h2,h3,[id]) { scroll-margin-top:72px; }
.ps-translated[dir="rtl"] .t-table th,html[dir="rtl"] .ps-translated .t-table th { text-align:start; }
html[dir="rtl"] .ps-translated .t-article ul,html[dir="rtl"] .ps-translated .t-article ol,html[dir="rtl"] .ps-translated .t-body ul,html[dir="rtl"] .ps-translated .t-body ol { margin-inline-start:20px; margin-inline-end:0; }
@media(max-width:1100px){
  .ps-translated .t-layout { grid-template-columns:minmax(0,1fr); }
  .ps-translated .t-sidebar { display:none; }
}
@media(max-width:768px){
  .ps-translated .t-main { padding:24px 18px 48px; }
  .ps-translated .t-header { padding:24px 18px; }
  .ps-translated .t-wrap,.ps-translated .t-container { padding:0 18px 48px; }
  .ps-translated :is(input,select,textarea) { font-size:16px; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}body.ps-translated{transition:none;}}