/* Arabic names and titles guide (21 Oct 2026): the anatomy of a full name, the title cards and their filter, the tips
   tabs with the bilingual business card, the CRM mistake and one name in many spellings. Shared parts are in guidex.css.
   Without the script every part shows in order; the script only selects, filters, turns and plays. */

/* the two-paragraph introduction keeps the usual gap before the first section */
.gx-article>p+.gx-sec{margin-top:56px}

/* ---------- anatomy of an Arabic name ---------- */
.gx-anat-name{position:relative;margin:0;padding:30px 22px 22px;border-radius:18px;background:var(--navy);color:#fff;text-align:center;overflow:hidden}
.gx-anat-name::before{content:"";position:absolute;inset:0;background:url(/images/home-v2/watermark.svg) right center/auto 100% no-repeat;opacity:.1;pointer-events:none}
[dir="rtl"] .gx-anat-name::before{background-position:left center}
.gx .gx-anat-line{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:4px 8px;margin:0}
.gx .gx-anat-ar{padding-bottom:16px;margin-bottom:14px}
.gx-anat-ar::after{content:"";position:absolute;inset:auto 16% 0;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.75}
.gx-seg{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px 8px;border-radius:12px;transition:background .25s,box-shadow .25s}
.gx-seg-w{display:block;color:#fff;transition:color .25s}
.gx .gx-anat-ar .gx-seg-w{font:700 clamp(30px,3.4vw,42px)/1.4 Cairo,Tahoma,sans-serif}
.gx .gx-anat-en .gx-seg-w{font:600 clamp(19px,1.9vw,24px)/1.3 Inter,sans-serif;letter-spacing:-.01em}
.gx .gx-seg-l{display:block;font:600 11.5px/1.3 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);transition:color .25s}
.gx .gx-anat-ar .gx-seg-l{font:600 13.5px/1.4 Cairo,Tahoma,sans-serif;letter-spacing:0;text-transform:none}
.gx-anat-name figcaption{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:8px;max-width:560px;margin:18px auto 0;font-size:14px;line-height:1.5;color:var(--on-dark);text-align:start}
.gx-anat-name figcaption .gx-i{width:16px;height:16px;margin-top:2px;color:var(--warm)}
/* the selected part, in both scripts (set by the script; without it every part shows at full strength) */
.gx-js .gx-anat-name .gx-seg{cursor:pointer}
.gx-js .gx-anat-name .gx-seg:hover{background:rgba(255,255,255,.07)}
.gx-anat[data-active] .gx-seg:not(.is-on) .gx-seg-w{color:rgba(255,255,255,.55)}
.gx-anat .gx-seg.is-on{background:rgba(255,255,255,.1);box-shadow:inset 0 -3px 0 var(--accent)}
.gx-anat .gx-seg.is-on .gx-seg-w,.gx-anat .gx-seg.is-on .gx-seg-l{color:var(--warm)}
.gx .gx-seg[tabindex]:focus-visible{outline:3px solid var(--warm);outline-offset:2px;border-radius:12px}
.gx-anat .gx-seg.is-pulse{animation:gx-seg-pulse .5s ease}
/* phones: each line becomes two balanced rows, still read in its own direction */
@media(max-width:560px){
  .gx-anat-name{padding:24px 12px 18px}
  .gx .gx-anat-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .gx-seg{padding:6px 4px 8px}
  .gx .gx-anat-ar .gx-seg-w{font-size:27px}
  .gx .gx-anat-en .gx-seg-w{font-size:17px}
  .gx .gx-anat-ar{padding-bottom:12px;margin-bottom:10px}
}
@media(max-width:380px){.gx .gx-anat-en .gx-seg-w{font-size:15.5px}.gx .gx-anat-ar .gx-seg-w{font-size:25px}}
@keyframes gx-seg-pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

/* the five parts: tabs in the post's order */
.gx-anat-parts{margin-top:24px}
.gx-js .gx-anat-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px!important;margin-bottom:22px!important}
.gx-anat-tabs [role="tab"]{flex-direction:column;justify-content:center;gap:1px!important;min-height:60px;padding:6px 4px!important;border-radius:14px!important;text-align:center}
.gx-anat-tabs [role="tab"] span{font:600 15.5px/1.25 Inter,sans-serif}
.gx-anat-tabs [role="tab"] small{font-size:13.5px;line-height:1.35;font-weight:600;color:var(--gx-soft);transition:color .18s}
.gx-anat-tabs [role="tab"][aria-selected="true"] small{color:var(--warm)}
@media(max-width:400px){.gx-anat-tabs [role="tab"] span{font-size:14px}.gx-anat-tabs [role="tab"] small{font-size:12.5px}.gx-js .gx-anat-tabs{gap:6px!important}}
.gx .gx-np .gx-np-h{display:flex;align-items:center;gap:18px;margin:0 0 16px}
.gx .gx-np-glyph{flex:0 0 auto;font:700 clamp(32px,3.4vw,40px)/1.3 Cairo,Tahoma,sans-serif;color:var(--navy)}
.gx-np-words{display:flex;flex-direction:column;gap:2px;padding-inline-start:18px;border-inline-start:2px solid var(--brass)}
.gx .gx-np-term{font:600 23px/1.2 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:var(--navy)}
.gx .gx-np-gloss{font:600 13px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.gx .gx-np-ex{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 16px;border-radius:12px;background:var(--paper);font-size:16px;line-height:1.6;color:var(--ink)}
.gx-np-ex .gx-i{width:18px;height:18px;margin-top:4px;color:var(--orange)}
.gx-np-ex.is-none .gx-i{color:var(--gx-soft)}
.gx-np-ex strong{color:var(--navy)}
.gx .gx-np>p:not(.gx-np-ex){font-size:17px;line-height:1.75}
.gx-np+.gx-np{padding-top:22px;border-top:1px solid var(--line)}
.gx-js .gx-np+.gx-np{padding-top:0;border-top:0}
/* nasab: three generations in one name */
.gx-chain{margin:20px 0 0;padding:16px 18px 18px;border:1px solid var(--line);border-radius:14px}
.gx-chain figcaption{margin-bottom:12px;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx-chain ol{display:flex;flex-wrap:wrap;gap:10px 0;margin:0;padding:0;list-style:none}
.gx .gx-chain li{position:relative;display:flex;flex-direction:column;gap:1px;padding:8px 14px;border-radius:10px;background:var(--paper);font-size:15px;line-height:1.3}
.gx-chain li+li{margin-left:28px}
.gx-chain li+li::before{content:"";position:absolute;left:-23px;top:50%;width:18px;height:2px;background:var(--brass)}
.gx-chain b{font:600 16.5px/1.3 Inter,sans-serif;color:var(--navy)}
.gx-chain span{font-size:13.5px;line-height:1.35;color:var(--gx-soft)}
[dir="rtl"] .gx-chain ol{justify-content:flex-end}
/* phones: each generation one step in, joined by an elbow line */
@media(max-width:560px){
  .gx-chain ol{flex-direction:column;align-items:flex-start;gap:12px}
  [dir="rtl"] .gx-chain ol{align-items:flex-end}
  .gx-chain li+li{margin-left:26px}
  .gx-chain li:nth-child(3){margin-left:52px}
  .gx-chain li+li::before{left:-16px;top:-12px;width:12px;height:calc(50% + 12px);background:none;border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);border-bottom-left-radius:6px}
  [dir="rtl"] .gx-chain li{margin-left:0}
  [dir="rtl"] .gx-chain li:nth-child(1){margin-right:52px}
  [dir="rtl"] .gx-chain li:nth-child(2){margin-right:26px}
}

/* ---------- titles and honorifics ---------- */
.gx-filter,.gx-filter-status{display:none}
.gx-js .gx-filter{display:flex;flex-wrap:wrap;gap:8px}
.gx-filter button{min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--gx-read);font:600 15px/1.2 Inter,sans-serif;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.gx-filter button:hover{border-color:var(--navy)}
.gx-filter button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.gx-js .gx-filter-status{display:block;margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--gx-soft)}
.gx-ttl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.gx-js .gx-ttl-grid{margin-top:16px}
.gx .gx-ttl{display:flex;flex-direction:column;padding:20px 22px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:15.5px}
.gx .gx-ttl .gx-ttl-h{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0 0 10px}
.gx .gx-ttl-ar{font:700 32px/1.45 Cairo,Tahoma,sans-serif;color:var(--navy)}
.gx .gx-ttl-en{font:600 18px/1.3 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.01em;color:var(--orange)}
.gx .gx-ttl>p{margin:0;font-size:15.5px;line-height:1.65}
.gx .gx-ttl .gx-ttl-key{display:flex;gap:10px;align-items:flex-start;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;font-weight:600;color:var(--navy)}
.gx .gx-ttl>p:not(.gx-ttl-key){margin-bottom:16px}
.gx-ttl-key .gx-star{margin-top:4px}
.gx-ttl.is-in{animation:gx-fade .35s ease both}
@media(max-width:700px){.gx-ttl-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- practical tips ---------- */
.gx-tips .gx-tool-body{padding-top:22px}
@media(max-width:560px){
  .gx-js .gx-tips-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important}
  .gx-tips-tabs [role="tab"]{flex-direction:column;justify-content:center;gap:4px!important;min-height:64px;padding:8px 4px!important;border-radius:14px!important;font-size:14px!important;line-height:1.2!important;text-align:center}
}
.gx .gx-tip h3{margin-top:0}
.gx-tip-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:28px;align-items:start}
.gx-tip-grid>.gx-list{margin-top:0}
.gx .gx-tip :where(p,li){font-size:17px;line-height:1.7}
@media(max-width:780px){.gx-tip-grid{grid-template-columns:minmax(0,1fr);gap:22px}}
.gx .gx-hands-label{margin-top:20px;font:600 12.5px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx-hands{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.gx .gx-hands li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:15px;line-height:1.3;font-weight:600}
.gx-hands .gx-i{width:17px;height:17px}
.gx .gx-hands .is-ok{background:var(--gx-ok-bg);color:#14532d}
.gx-hands .is-ok .gx-i{color:var(--gx-ok)}
.gx .gx-hands .is-bad{background:var(--gx-bad-bg);color:#8a2412}
.gx-hands .is-bad .gx-i{color:var(--gx-bad)}
/* the bilingual business card: both sides side by side without the script, a card that turns over with it */
.gx-bcard{margin:0;display:grid;gap:14px;justify-items:center}
.gx-bcard-stage{position:relative;display:grid;gap:12px;width:100%;max-width:360px}
.gx-bcard-face{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;aspect-ratio:1.6;padding:20px 22px;border-radius:14px;box-shadow:0 18px 40px -24px rgba(11,22,38,.6);overflow:hidden}
.gx-bcard-face.is-en{background:#fff;border:1px solid var(--line-strong);color:var(--navy)}
.gx-bcard-face.is-ar{background:var(--navy);color:#fff}
.gx-bcard-face::before{content:"";position:absolute;inset:auto 22px 0;height:3px;background:var(--brass);opacity:.8}
.gx .gx-bcard-face strong{font:600 21px/1.3 Poppins,"Poppins Fallback",sans-serif;color:inherit}
.gx .gx-bcard-face span{font-size:14.5px;line-height:1.5;color:var(--gx-soft)}
.gx .gx-bcard-face.is-ar strong{font:700 23px/1.45 Cairo,Tahoma,sans-serif}
.gx .gx-bcard-face.is-ar span{font-family:Cairo,Tahoma,sans-serif;font-size:15px;color:var(--on-dark)}
.gx .gx-bcard-face .gx-bcard-side{position:absolute;top:16px;inset-inline-start:22px;font:600 11px/1.3 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.gx .gx-bcard-face.is-ar .gx-bcard-side{color:var(--warm)}
.gx-bcard-mark{position:absolute;top:15px;inset-inline-end:18px;width:18px;height:18px;background:var(--accent);-webkit-mask:var(--gx-star) center/contain no-repeat;mask:var(--gx-star) center/contain no-repeat}
.gx-bcard figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.gx-bcard figcaption .gx-note{margin:0}
.gx-bcard [data-gx-flip-btn]{display:none}
.gx-js .gx-bcard [data-gx-flip-btn]{display:inline-flex}
.gx-js .gx-bcard{perspective:1200px}
.gx-js .gx-bcard-stage{display:block;aspect-ratio:1.6;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,.7,.25,1)}
.gx-js .gx-bcard-face{position:absolute;inset:0;aspect-ratio:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.gx-js .gx-bcard-face.is-ar{transform:rotateY(180deg)}
.gx-js .gx-bcard.is-flipped .gx-bcard-stage{transform:rotateY(180deg)}
/* email: the first line of a first email */
.gx-mail{margin:0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 18px 40px -30px rgba(11,22,38,.45)}
.gx .gx-mail-bar{display:flex;align-items:center;gap:8px;margin:0;padding:10px 16px;background:var(--paper);border-bottom:1px solid var(--line);font:600 12.5px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx-mail-bar .gx-i{width:16px;height:16px}
.gx-mail-row{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.gx-mail-row+.gx-mail-row{border-top:1px solid var(--line)}
.gx-mail-row .gx-i{width:20px;height:20px;margin-top:3px}
.gx-mail-row.is-ok .gx-i{color:var(--gx-ok)}
.gx-mail-row.is-bad .gx-i{color:var(--gx-bad)}
.gx .gx-mail-to{display:block;font:600 17px/1.4 Inter,sans-serif;color:var(--ink)}
.gx .gx-mail-row.is-bad .gx-mail-to{color:var(--gx-soft);text-decoration:line-through;text-decoration-color:var(--gx-bad);text-decoration-thickness:2px}
.gx .gx-mail-row small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--gx-soft)}
[dir="rtl"] .gx-mail-to{text-align:right}
/* meetings */
.gx-meet{margin:0;padding:0;list-style:none}
.gx .gx-meet li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.gx .gx-meet li:first-child{border-top:0;padding-top:2px}
.gx-meet li>.gx-i{width:24px;height:24px;margin-top:5px;color:var(--orange)}
.gx .gx-meet p{margin:0}

/* ---------- common mistakes ---------- */
.gx-mist{display:grid;gap:16px;margin:4px 0 0;padding:0;list-style:none}
.gx .gx-mist-card{display:grid;gap:22px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.gx-mist-card.has-crm{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start}
@media(max-width:780px){.gx-mist-card.has-crm{grid-template-columns:minmax(0,1fr)}}
.gx .gx-mist-label{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 12.5px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-bad)}
.gx-mist-label .gx-i{width:18px;height:18px}
.gx .gx-mist h3{margin:8px 0 6px;font-size:20px;line-height:1.35}
.gx .gx-mist-main>p:not(.gx-mist-label){font-size:16.5px;line-height:1.65}
.gx .gx-mist-do{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:11px 14px;border-radius:12px;background:var(--gx-ok-bg);color:#14532d}
.gx-mist-do .gx-i{width:18px;height:18px;margin-top:4px;color:var(--gx-ok)}
.gx .gx-mist-do b{color:#14532d}
/* the CRM record filed under B */
.gx-crm{margin:0;padding:16px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.gx-crm-app{border:1px solid var(--line-strong);border-radius:12px;background:#fff;overflow:hidden}
.gx .gx-crm-bar{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border-bottom:1px solid var(--line);font:600 13.5px/1.3 Inter,sans-serif;color:var(--navy)}
.gx-crm-bar .gx-i{width:17px;height:17px;color:var(--gx-soft)}
.gx-crm-row{display:flex;align-items:center;gap:12px;padding:12px}
.gx .gx-crm-letter{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--gx-bad-bg);color:var(--gx-bad);font:700 16px/1 Inter,sans-serif}
.gx-crm-entry{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.gx .gx-crm-entry s{font:600 16px/1.35 Inter,sans-serif;color:var(--ink);text-decoration-color:var(--gx-bad);text-decoration-thickness:2px}
.gx .gx-crm-entry small{font-size:12.5px;line-height:1.4;color:var(--gx-bad)}
.gx-crm-x{width:20px;height:20px;color:var(--gx-bad)}
.gx .gx-crm-read-label{margin:16px 0 8px;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx-crm-read{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.gx .gx-crm-read li{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:15px;line-height:1.3}
.gx-crm-read b{font:600 16px/1.3 Inter,sans-serif;color:var(--navy)}
.gx-crm-read span{font-size:12.5px;line-height:1.35;color:var(--gx-soft)}
[dir="rtl"] .gx-crm-read{justify-content:flex-end}
@media(max-width:560px){
  .gx .gx-mist-card{padding:18px 18px}
  .gx-crm{padding:12px}
  .gx-crm-read{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .gx .gx-crm-read li{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding:8px 12px}
}
.gx-crm figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--gx-soft)}

/* ---------- one name, many spellings ---------- */
.gx-sp-stage{position:relative;padding:26px 28px 28px;background:var(--navy);color:#fff;overflow:hidden}
.gx-sp-stage::before{content:"";position:absolute;inset:0;background:url(/images/home-v2/watermark.svg) right center/auto 100% no-repeat;opacity:.1;pointer-events:none}
[dir="rtl"] .gx-sp-stage::before{background-position:left center}
.gx-js .gx-sp-tabs{position:relative;justify-content:center;margin-bottom:8px!important}
.gx-sp .gx-sp-tabs [role="tab"]{min-height:48px;padding:0 16px;gap:10px;background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.gx-sp .gx-sp-tabs [role="tab"]:hover{border-color:#fff}
.gx-sp .gx-sp-tabs [role="tab"][aria-selected="true"]{background:#fff;border-color:#fff;color:var(--navy)}
.gx-sp-tabs [role="tab"] .gx-ar{font-size:20px;line-height:1.2}
.gx-sp-tabs [role="tab"] small{font:500 13px/1.2 Inter,sans-serif;color:var(--on-dark-soft)}
.gx-sp-tabs [role="tab"][aria-selected="true"] small{color:var(--gx-soft)}
.gx-sp-panel{position:relative;text-align:center}
.gx-sp-stage [role="tabpanel"]+[role="tabpanel"]{padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.gx-js .gx-sp-stage [role="tabpanel"]+[role="tabpanel"]{padding-top:0;border-top:0}
.gx .gx-sp-ar{margin:0;font-size:clamp(46px,5.6vw,62px)!important;line-height:1.4!important;font-weight:700!important;color:#fff}
.gx-sp-lines{display:block;width:100%;max-width:620px;height:48px;margin:0 auto 2px}
.gx-sp-lines path{fill:none;stroke:var(--brass);stroke-width:1.5;opacity:.5;vector-effect:non-scaling-stroke;transition:stroke .3s,opacity .3s}
.gx-sp-panel:has(.gx-sp-chip:nth-of-type(1) input:checked) .gx-sp-lines path:nth-of-type(1),
.gx-sp-panel:has(.gx-sp-chip:nth-of-type(2) input:checked) .gx-sp-lines path:nth-of-type(2),
.gx-sp-panel:has(.gx-sp-chip:nth-of-type(3) input:checked) .gx-sp-lines path:nth-of-type(3),
.gx-sp-panel:has(.gx-sp-chip:nth-of-type(4) input:checked) .gx-sp-lines path:nth-of-type(4){stroke:var(--warm);stroke-width:2.5;opacity:1}
.gx-sp-variants{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px;max-width:620px;min-width:0;margin:0 auto;padding:0;border:0}
.gx-sp-chip{position:relative;display:block;cursor:pointer}
.gx-sp-chip input{position:absolute;opacity:0;width:1px;height:1px}
.gx .gx-sp-chip span{display:block;padding:12px 6px;border:1px solid rgba(255,255,255,.26);border-radius:12px;background:rgba(255,255,255,.06);font:600 16.5px/1.3 Inter,sans-serif;color:#fff;transition:background .2s,color .2s,border-color .2s}
.gx-sp-chip:hover span{border-color:rgba(255,255,255,.65)}
.gx .gx-sp-chip input:checked+span{background:#fff;border-color:#fff;color:var(--navy)}
.gx-sp-chip input:focus-visible+span{outline:3px solid var(--warm);outline-offset:3px}
.gx .gx-sp-count{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--on-dark)}
.gx-sp-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;opacity:0}
[dir="rtl"] .gx-sp-stage::after{transform-origin:100% 50%}
.gx-sp.is-playing .gx-sp-stage::after{opacity:1;animation:gx-sp-run var(--gx-run,3.6s) linear forwards}
@keyframes gx-sp-run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:560px){.gx-sp-variants{grid-template-columns:repeat(2,minmax(0,1fr))}.gx-sp-lines{display:none}.gx-sp-panel .gx-sp-ar{margin-bottom:12px}.gx-sp-stage{padding-inline:18px}}
/* the same spelling on every document */
.gx-sp-docs{padding:18px 28px 20px;background:var(--paper);border-top:1px solid var(--line)}
.gx .gx-sp-docs-label{margin:0 0 10px;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx-sp-docs ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.gx .gx-sp-docs li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px;line-height:1.35}
.gx-sp-docs li .gx-i{grid-row:1/3;width:20px;height:20px;margin-top:2px;color:var(--orange)}
.gx .gx-sp-doc-name{font-size:13px;line-height:1.35;color:var(--gx-soft)}
.gx .gx-sp-doc-val{display:block;font:600 17px/1.35 Inter,sans-serif;color:var(--gx-ok)}
[dir="rtl"] .gx-sp-doc-val{text-align:right}
.gx-sp-doc-val.is-swap{animation:gx-sp-swap .42s ease}
@keyframes gx-sp-swap{0%{opacity:1}40%{opacity:0;transform:translateY(-4px)}60%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@media(max-width:600px){.gx-sp-docs{padding-inline:18px}.gx-sp-docs ul{grid-template-columns:minmax(0,1fr)}}
.gx-sp .gx-tool-foot{justify-content:flex-start}
.gx-sp [data-gx-sp-play]{display:none}
.gx-js .gx-sp [data-gx-sp-play]{display:inline-flex}
.gx-sp [data-gx-sp-play] .gx-i-stop,.gx-sp [data-gx-sp-play][aria-pressed="true"] .gx-i-play{display:none}
.gx-sp [data-gx-sp-play][aria-pressed="true"] .gx-i-stop{display:inline}
.gx .gx-sp-status{flex:1 1 240px}

/* the closing help line */
.gx .gx-names-help a{color:var(--warm)}
.gx .gx-names-help a:hover{color:#fff}

/* Arabic: no capitals or tracking on Arabic labels */
[dir="rtl"] .gx :is(.gx-np-gloss,.gx-hands-label,.gx-mist-label,.gx-mail-bar,.gx-crm-read-label,.gx-sp-docs-label,.gx-chain figcaption,.gx-seg-l){letter-spacing:0;text-transform:none}
[dir="rtl"] .gx .gx-np-gloss{font-size:15px}
/* a Latin name inside Arabic text stays on one line where there is room, so it never splits across the two ends of a line */
@media(min-width:600px){[dir="rtl"] .gx-article :is(p,li) :is(span,strong)[dir="ltr"]{white-space:nowrap}}

@media (prefers-reduced-motion:reduce){.gx-js .gx-sp [data-gx-sp-play]{display:none}}