/* ==========================================================================
   Library guide article (e.g. metatrader.html, i18n/<lang>/metatrader.html)

   Loaded after site.css, legal.css (document layout, section list, facts
   card) and library.css (related article cards). Adds the article top, the
   numbered steps with their screenshots, notes, code, callouts, the reading
   progress card and the related articles band.
   Below 992px the section list is the sticky bar from legal.css, here with
   the step number ("Step 04 of 13") and a thin progress line.
   ========================================================================== */

/* ---------- Top ---------- */

.art-top__inner {
  padding-top: 20px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.art-top__title {
  max-width: 860px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .art-top__inner {
    padding-top: 28px;
    padding-bottom: 28px;
    gap: 12px;
  }

  .art-top__title {
    font-size: 36px;
    line-height: 1.18;
    letter-spacing: -0.02em;
  }
}

/* ---------- Section list additions ---------- */

.toc__group {
  display: block;
  padding: 12px 0 4px;
  padding-inline-start: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-6);
}

.toc__list a[data-n]::before {
  content: attr(data-n);
  margin-inline-end: 6px;
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.7;
}

/* Thin progress line under the phone bar */
.art-toc__bar {
  height: 2px;
  background: rgba(var(--gold-rgb), 0.12);
}

.art-toc__bar span {
  display: block;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}

@media (min-width: 992px) {
  .art-toc__bar {
    display: none;
  }

  .toc__list a {
    padding-block: 5px;
  }
}

/* ---------- Body ---------- */

.art-body {
  gap: 0;
}

.art-body strong {
  color: var(--text);
  font-weight: 600;
}

.art-body code {
  padding: 2px 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 5px;
  background: var(--surface-hi);
  color: var(--gold-hi);
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
}

.art-body .art-lead {
  padding-bottom: 24px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-2);
}

/* What you need */
.art-need {
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.art-need__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-6);
}

.art-body .art-need__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.art-body .art-need__list li {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.4;
}

.art-need__t {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.art-need__d {
  font-size: 13px;
  color: var(--text-5);
}

/* Part heading */
.art-part {
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.art-part__kick {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.art-part__title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
}

.art-body .art-part__sub {
  display: none;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-5);
}

/* ---------- Steps ---------- */

/* Phones: the number sits beside the title, the screenshot under the text. */
.art-step {
  position: relative;
  padding: 22px 0;
  border-top: 1px solid rgba(var(--gold-rgb), 0.1);
  scroll-margin-top: calc(var(--header-h) + 52px + 20px);
}

.art-step__rail {
  position: absolute;
  top: 22px;
  inset-inline-start: 0;
}

.art-step__n {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  border-radius: 50%;
  background: var(--surface-hi);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 13px;
}

.art-step__line {
  display: none;
}

.art-step__content,
.art-step__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.art-step__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.art-step__title {
  min-height: 32px;
  padding-inline-start: 44px;
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
}

/* Screenshots */
.art-shots {
  display: flex;
  gap: 12px;
}

.art-shots--phone {
  justify-content: center;
  padding-top: 4px;
}

.art-shots--pc {
  flex-direction: column;
  gap: 14px;
}

.art-shot {
  margin: 0;
}

.art-shot a {
  display: block;
}

.art-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.art-shot--phone {
  width: 180px;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 16px;
  background: #0E0D0A;
}

.art-shots--pair .art-shot--phone {
  width: 140px;
}

.art-shot--pc {
  position: relative;
  width: min(var(--shot-w, 520px), 100%);
  padding-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 8px;
  background: #0E0D0A;
}

/* Window title bar drawn above desktop screenshots */
.art-shot__chrome {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 18px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.14);
  background: #141310;
}

.art-shot__chrome i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.3);
}

.art-shot a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Note, code, callouts */
.art-note,
.art-risk {
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 10px;
  background: rgba(var(--gold-rgb), 0.06);
}

.art-note svg,
.art-risk svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--gold);
}

.art-body .art-note p,
.art-body .art-risk p {
  font-size: 14px;
  line-height: 1.65;
}

.art-risk {
  margin-top: 8px;
  border-color: rgba(240, 113, 107, 0.4);
  background: rgba(240, 113, 107, 0.06);
}

.art-risk svg {
  color: #F0716B;
}

.art-code {
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 10px;
}

.art-code__bar {
  height: 36px;
  padding-inline: 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.18);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-6);
}

.art-code__copy {
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 12px;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.art-code__copy:hover {
  border-color: var(--gold);
}

.art-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: #0D0C09;
  color: var(--gold-hi);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}

.art-switch {
  margin: 8px 0 28px;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.08), rgba(var(--gold-rgb), 0.02));
}

.art-switch svg {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--gold);
}

.art-switch > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.art-body .art-switch__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.art-body .art-switch p:not(.art-switch__title) {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-3);
}

/* ---------- Tablet and up: the numbered rail ---------- */

@media (min-width: 768px) {
  .art-body .art-lead {
    padding-bottom: 32px;
    font-size: 18px;
  }

  .art-need {
    padding-bottom: 48px;
    gap: 14px;
  }

  .art-need__title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
  }

  .art-body .art-need__list li {
    padding: 16px 18px;
  }

  .art-part {
    padding: 8px 0 28px;
    gap: 8px;
  }

  .art-part__kick {
    font-size: 12px;
  }

  .art-part__title {
    font-size: 26px;
    letter-spacing: -0.01em;
  }

  .art-body .art-part__sub {
    display: block;
  }

  .art-step {
    padding: 0;
    border-top: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 20px;
  }

  .art-step__rail {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .art-step__n {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
  }

  .art-step__line {
    display: block;
    flex-grow: 1;
    width: 1px;
    background: linear-gradient(rgba(var(--gold-rgb), 0.35), rgba(var(--gold-rgb), 0.08));
  }

  .art-step__content {
    gap: 18px;
    padding-bottom: 28px;
  }

  .art-step__main {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
  }

  .art-step__text {
    flex-grow: 1;
    gap: 12px;
    padding-top: 4px;
  }

  .art-step__title {
    min-height: 0;
    padding-inline-start: 0;
    display: block;
    font-size: 20px;
  }

  .art-shots--phone {
    flex-shrink: 0;
    gap: 10px;
    padding-top: 0;
  }

  .art-shot--phone {
    width: 150px;
  }

  .art-shots--pair .art-shot--phone {
    width: 128px;
  }

  .art-switch {
    margin: 4px 0 44px;
    margin-inline-start: 56px;
    padding: 20px 22px;
    gap: 16px;
  }

  .art-risk {
    margin-inline-start: 56px;
  }
}

/* ---------- Guide details (sidebar) ---------- */

/* Below 992px the top meta line carries the same facts. */
.art-details {
  display: none;
}

@media (min-width: 992px) {
  .art-details {
    display: grid;
  }
}

/* Guide facts: label and value on one row (the legal pages stack them). */
.art-details .doc-facts dl > div {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.art-details .doc-facts dd {
  font-size: 13px;
  text-align: end;
}

.art-chip {
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 500;
}

.art-chip:hover {
  border-color: var(--gold);
}

.art-progress {
  padding: 18px;
  display: none;
  flex-direction: column;
  gap: 12px;
}

.art-progress__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text);
}

.art-progress__pct {
  font-family: var(--mono);
  color: var(--text-6);
}

.art-progress__track {
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--gold-rgb), 0.14);
}

.art-progress__track span {
  display: block;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}

.art-progress__part {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-6);
}

.art-copylink {
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 20px;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.art-copylink:hover {
  border-color: var(--gold);
}

.art-copylink svg {
  width: 14px;
  height: 14px;
}

/* The progress card and copy button sit in the sticky sidebar only. */
@media (min-width: 1200px) {
  .art-progress {
    display: flex;
  }

  .art-copylink {
    display: flex;
  }
}

/* ---------- Related articles ---------- */

.art-related {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  scroll-margin-top: calc(var(--header-h) + 52px + 20px);
}

.art-related__inner {
  padding-top: 32px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.art-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.art-related__head h2 {
  font-size: 20px;
  font-weight: 600;
}

.art-related__head a {
  font-size: 14px;
  font-weight: 500;
}

@media (min-width: 768px) {
  .art-related__inner {
    padding-top: 56px;
    padding-bottom: 72px;
    gap: 24px;
  }

  .art-related__head h2 {
    font-size: 24px;
  }
}

@media (min-width: 992px) {
  .art-related {
    scroll-margin-top: calc(var(--header-h) + 24px);
  }
}

/* ---------- Arabic ---------- */

:lang(ar) .toc__group,
:lang(ar) .art-part__kick,
:lang(ar) .art-need__title {
  font-family: var(--sans);
}

:lang(ar) .toc__group {
  font-size: 12px;
}

:lang(ar) .art-part__kick {
  font-size: 13px;
}

@media (max-width: 767px) {
  :lang(ar) .art-need__title {
    font-size: 13px;
  }
}

/* ---------- Old anchors ---------- */

/* Ids of the pre-redesign page (step-1, part-phone...) kept for existing
   links; out of the flow so they add no gap. */
.art-step,
.art-part {
  position: relative;
}

.art-alias {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 0;
  scroll-margin-top: calc(var(--header-h) + 52px + 20px);
}

@media (min-width: 992px) {
  .art-alias {
    scroll-margin-top: calc(var(--header-h) + 24px);
  }
}

/* ==========================================================================
   Prose articles (tools/build-library-article.js, e.g.
   library/backtesting-on-your-phone.html): one .doc-sec per section, with
   headings, lists, a table, callouts, figures, the FAQ and suggested reads.
   ========================================================================== */

/* Sections spaced like the legal pages (.art-body sets the gap to 0 for
   the step guides). */
.art-body.art-prose {
  gap: 44px;
}

.art-prose .art-lead {
  padding-bottom: 0;
}

.art-prose .art-sec {
  gap: 16px;
}

.art-prose .art-h3 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.art-prose ol {
  margin: 0;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.art-prose ol li::marker {
  color: var(--gold);
  font-weight: 600;
}

.art-prose li > p {
  margin: 0;
}

.art-prose a:not(.lib-card__link) {
  color: var(--gold-hi);
  text-decoration: underline;
  text-decoration-color: rgba(var(--gold-rgb), 0.4);
  text-underline-offset: 3px;
}

.art-prose a:not(.lib-card__link):hover {
  color: var(--text);
}

/* Callouts: the provenance box and notes */
.art-callout > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.art-body .art-callout p {
  font-size: 15px;
  line-height: 1.7;
}

.art-callout--provenance {
  border-style: dashed;
}

/* Mid-article call to action */
.art-cta {
  padding: 16px 18px;
  border-inline-start: 3px solid var(--gold);
  border-radius: 6px;
  background: var(--surface);
}

.art-body .art-cta p {
  font-size: 15px;
  color: var(--text);
}

/* Figures: the hero image, screenshots and diagrams */
.art-fig {
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.art-fig img {
  display: block;
  width: 100%;
  height: auto;
}

.art-fig--wide img {
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 14px;
}

.art-fig--phone img {
  width: 220px;
}

.art-fig--diagram img {
  max-width: 560px;
}

.art-fig figcaption {
  max-width: 560px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-5);
  text-align: center;
}

/* The methods table scrolls sideways on narrow screens */
.art-table {
  overflow-x: auto;
}

.art-table table {
  min-width: 620px;
}

.art-table th,
.art-table td {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  text-align: start;
  vertical-align: top;
}

.art-table thead th {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.18);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-5);
}

.art-table tbody tr {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.1);
  background: var(--bg);
}

.art-table tbody tr:last-child {
  border-bottom: 0;
}

.art-table tbody td:first-child {
  font-weight: 500;
  color: var(--text);
}

.art-table:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* FAQ: collapsible questions, like the Compare page's FAQ (.cmp-qa) */
.art-qa {
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.2s ease;
}

.art-qa[open] {
  border-color: rgba(var(--gold-rgb), 0.55);
}

.art-qa summary {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}

.art-qa summary::-webkit-details-marker {
  display: none;
}

.art-qa summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 12px;
}

.art-qa h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.art-qa__pm {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.art-qa__pm::before,
.art-qa__pm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  margin: -0.75px 0 0 -5.5px;
  background: var(--gold);
}

.art-qa__pm::after {
  transform: rotate(90deg);
}

.art-qa[open] .art-qa__pm {
  transform: rotate(45deg);
}

.art-qa__a {
  padding: 0 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.art-body .art-qa__a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-3);
}

.art-sec--faq {
  gap: 10px;
}

/* Zoomable images show it */
.art-fig img[data-zoom] {
  cursor: zoom-in;
}

/* Suggested reads */
.art-prose .art-reads {
  padding: 0;
  list-style: none;
  gap: 10px;
}

.art-prose .art-reads li {
  padding: 14px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
}

.art-prose .art-reads a {
  font-weight: 600;
}

/* Closing signature */
.art-sign {
  padding: 26px 20px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.18);
  text-align: center;
}

.art-body .art-sign p:first-child {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--gold-hi);
}

:lang(ar) .art-body .art-sign p:first-child {
  font-style: normal;
}

.art-body .art-sign p + p {
  margin-top: 8px;
  font-size: 15px;
}