/* Content pages. Loaded after styles.css, which owns the tokens, the shell
   and the header. Nothing here restyles the homepage: every rule is scoped
   to .article, so a change on this page cannot reach index.html. */

.article{padding:132px 0 0;background:var(--ink)}
.article .shell{max-width:min(860px,calc(100% - 2 * var(--gutter)))}

.article-head{padding-bottom:40px;border-bottom:1px solid var(--line)}
.article-head .eyebrow{color:var(--accent);margin-bottom:18px}
.article h1{font:400 clamp(34px,5vw,56px)/1.12 Plex,Arial,sans-serif;letter-spacing:-.02em}
.article h1 span{color:var(--muted)}

/* The answer a machine lifts. Kept to one self-contained paragraph so it
   survives being quoted away from the page. */
.answer{margin:36px 0 0;padding:26px 28px;border-left:2px solid var(--accent);background:#ffffff08}
.answer p{font-size:clamp(17px,1.5vw,20px);line-height:1.55}

.article-body{padding:64px 0 96px}
.article-body section{margin-bottom:56px}
.article-body h2{font:400 clamp(24px,2.6vw,32px)/1.25 Plex,Arial,sans-serif;letter-spacing:-.01em;margin-bottom:18px}
.article-body h3{font:500 18px/1.4 Plex,Arial,sans-serif;margin:28px 0 10px}
.article-body p{color:var(--muted);margin-bottom:14px;max-width:72ch}
.article-body p strong{color:var(--text);font-weight:500}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.article-body ul{color:var(--muted);margin:0 0 16px;padding-left:20px}
.article-body li{margin-bottom:8px;line-height:1.6;max-width:70ch}
.article-body li strong{color:var(--text);font-weight:500}

/* Tables carry the facts worth quoting, so they are real tables rather than
   styled divs: an agent that reads the markup gets the rows and headers. */
.table-wrap{margin:26px 0;overflow-x:auto;border:1px solid var(--line)}
.article table{width:100%;border-collapse:collapse;font-size:15px;min-width:540px}
.article caption{text-align:left;padding:14px 18px;color:var(--muted);font:12px/1.6 PlexMono,monospace;letter-spacing:1.1px;border-bottom:1px solid var(--line)}
.article th,.article td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.article thead th{font:12px/1.6 PlexMono,monospace;letter-spacing:1.1px;color:var(--accent);font-weight:400;white-space:nowrap}
.article tbody th{font-weight:500;color:var(--text);white-space:nowrap}
.article td{color:var(--muted)}
.article td strong{color:var(--text);font-weight:500}
.article tbody tr:last-child th,.article tbody tr:last-child td{border-bottom:0}

.faq{border-top:1px solid var(--line);padding-top:40px}
.faq h2{margin-bottom:24px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;font-size:17px;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .expand-mark{color:var(--accent);font:14px PlexMono,monospace}
.faq details[open] summary .expand-mark{transform:rotate(45deg)}
.faq summary .expand-mark{display:inline-block;transition:transform .2s var(--ease)}
.faq details p{padding:0 0 20px;margin:0;color:var(--muted);max-width:72ch}

.article-foot{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.article-foot a{color:var(--text);text-decoration:none;border:1px solid var(--line);padding:12px 20px}
.article-foot a:hover{border-color:var(--accent);color:var(--accent)}
.article-foot .updated{color:var(--muted-ink);font:12px/1.6 PlexMono,monospace;letter-spacing:1.1px}

@media (max-width:720px){.article{padding-top:96px}.article-body{padding:44px 0 64px}}

/* On a phone a wide table would hide its answer columns off-screen, so each
   row becomes a labelled card. The markup stays a real table; data-label on
   every cell repeats its column heading for this layout only. */
@media (max-width:600px){
  .table-wrap{overflow-x:visible}
  .article table{min-width:0}
  .article thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .article table,.article caption,.article tbody,.article tr,.article tbody th,.article td{display:block;width:100%}
  .article tr{border-bottom:1px solid var(--line);padding:6px 0}
  .article tbody tr:last-child{border-bottom:0}
  .article tbody th{white-space:normal;padding:12px 18px 4px;border-bottom:0}
  .article td{padding:4px 18px;border-bottom:0}
  .article td::before{content:attr(data-label);display:block;color:var(--accent);font:11px/1.6 PlexMono,monospace;letter-spacing:1px}
  .article tbody tr:last-child td:last-child{padding-bottom:12px}
}

/* ------------------------------------------------------------------------
   Arabic content pages (/ar/), right to left.
   Every rule below is scoped to [dir="rtl"], so no English page and not the
   homepage can be reached by it; the LTR rules above are left unchanged.
   The Arabic pages load styles.css too, so the few header rules here only
   mirror what those pages inherit from it. No font file is added: Plex keeps
   the Latin glyphs (the wordmark, ERP, MCP, figures) and Arabic falls back to
   a locally installed Arabic face.
   ------------------------------------------------------------------------ */
[dir="rtl"]{--font-ar:Plex,"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-family:var(--font-ar)}

/* Arabic letters join, so tracking that suits Latin capitals breaks words
   apart; headings also need room for the taller Arabic forms. */
[dir="rtl"] .article h1{font-family:var(--font-ar);letter-spacing:0;line-height:1.4}
[dir="rtl"] .article-body h2{font-family:var(--font-ar);letter-spacing:0;line-height:1.5}
[dir="rtl"] .article-body h3{font-family:var(--font-ar)}
[dir="rtl"] .eyebrow,[dir="rtl"] .article caption,[dir="rtl"] .article thead th,[dir="rtl"] .article-foot .updated,[dir="rtl"] .brand-descriptor{font-family:var(--font-ar);letter-spacing:0}
[dir="rtl"] .answer p,[dir="rtl"] .article-body p,[dir="rtl"] .article-body li{line-height:1.85}

/* The answer's accent rule sits on the side the line starts from. */
[dir="rtl"] .answer{border-left:0;border-right:2px solid var(--accent)}

/* Lists indent from the right. */
[dir="rtl"] .article-body ul{padding-left:0;padding-right:20px}

/* Tables and captions read from the right. */
[dir="rtl"] .article caption,[dir="rtl"] .article th,[dir="rtl"] .article td{text-align:right}

/* FAQ: the summary is a flex row, so it mirrors on its own (question on the
   right, the + mark on the left); only the text alignment is stated. */
[dir="rtl"] .faq summary{text-align:right}

/* Header, inherited from styles.css: the descriptor's divider and the auto
   margin that pushes the navigation to the far end swap sides. */
[dir="rtl"] .skip-link{left:auto;right:16px}
[dir="rtl"] .brand-descriptor{border-left:0;padding-left:0;border-right:1px solid var(--line);padding-right:26px}
[dir="rtl"] .main-nav{margin-left:0;margin-right:auto}

/* The small link to the English twin of the page. */
[dir="rtl"] .lang-switch{font:12px/1.6 PlexMono,monospace;letter-spacing:1px;color:var(--muted);padding:14px 0;white-space:nowrap}
[dir="rtl"] .lang-switch:hover{color:var(--accent)}

@media (max-width:600px){
  /* styles.css hides the navigation here and pushes the download button to
     the end with margin-left; on the Arabic pages the language link takes
     that margin on its right instead. The extra link costs width, so the
     gaps tighten to keep the download button on one line at 375px. */
  [dir="rtl"] .header{gap:14px}
  [dir="rtl"] .header-action{margin-left:0;white-space:nowrap;gap:12px;padding:0 12px}
  [dir="rtl"] .lang-switch{margin-right:auto;font-size:11px;letter-spacing:.5px}
  /* Each table row becomes a card; the label repeated from the column
     heading reads from the right in the Arabic face. */
  [dir="rtl"] .article td::before{font-family:var(--font-ar);letter-spacing:0;text-align:right}
}