/* SaudiTech Core — reader & retention UI. RTL-first (logical properties).
   Colors reuse the child theme's --c-* tokens; falls back gracefully if absent. */

/* Reading-progress bar */
#st-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; inline-size: 0;
  block-size: 3px; z-index: 9999;
  background: var(--c-main, #0E7A5A);
  transition: width .1s linear;
  will-change: width;
}
@media (prefers-reduced-motion: reduce) { #st-progress { transition: none; } }

/* Reader meta strip (reading time · relative date) */
.st-reader-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
  color: var(--c-contrast-500, #66716f);
  margin-block: 4px 20px;
}
.st-rm-dot { color: var(--c-contrast-300, #a7b1af); }

/* In-article Table of Contents */
.st-toc {
  border: 1px solid var(--c-separator, #e6eae9);
  border-radius: 12px;
  background: var(--c-contrast-50, #f6f7f7);
  padding: 6px 18px;
  margin-block: 8px 28px;
  max-inline-size: 720px; margin-inline: auto;
}
.st-toc > summary {
  cursor: pointer; list-style: none; padding-block: 10px;
  font-family: var(--title-font, inherit); font-weight: 700; font-size: 16px;
  color: var(--c-contrast-900, #0f1317);
  display: flex; align-items: center; gap: 10px;
}
.st-toc > summary::-webkit-details-marker { display: none; }
.st-toc > summary::before {
  content: ""; inline-size: 4px; block-size: 1em; border-radius: 3px;
  background: var(--c-main, #0E7A5A);
}
.st-toc > summary::after {
  content: "›"; margin-inline-start: auto; transform: rotate(90deg);
  transition: transform .2s ease; color: var(--c-contrast-400, #8b9694);
}
.st-toc[open] > summary::after { transform: rotate(-90deg); }
.st-toc-list { list-style: none; margin: 0 0 12px; padding: 0; }
.st-toc-li { margin-block: 8px; }
.st-toc-li a {
  color: var(--c-contrast-700, #39413f); text-decoration: none; font-size: 15px;
  border-inline-start: 2px solid transparent; padding-inline-start: 12px; display: block;
  transition: color .15s ease, border-color .15s ease;
}
.st-toc-li a:hover { color: var(--c-main, #0E7A5A); border-inline-start-color: var(--c-main, #0E7A5A); }
.st-toc-sub a { padding-inline-start: 26px; font-size: 14px; color: var(--c-contrast-500, #66716f); }

/* "New since your last visit" strip */
#st-new-since[hidden] { display: none; }
.st-ns-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-inline-size: var(--main-width, 1240px); margin-inline: auto;
  padding: 10px 20px; font-size: 14.5px;
  background: rgba(var(--c-main-rgb, 14,122,90), .10);
  color: var(--c-contrast-900, #0f1317);
  border-block-end: 1px solid var(--c-separator, #e6eae9);
}
.st-ns-bar strong { color: var(--c-main, #0E7A5A); font-variant-numeric: tabular-nums; }
.st-ns-bar .st-ns-cta {
  margin-inline-start: auto; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--c-main, #0E7A5A);
  padding: 5px 14px; border-radius: 999px; font-size: 13px;
}
.st-ns-bar .st-ns-x {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--c-contrast-400, #8b9694); padding: 4px 6px;
}
.st-ns-dot {
  display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--c-main, #0E7A5A);
}
@media (prefers-reduced-motion: no-preference) {
  .st-ns-dot { animation: st-pulse 2s var(--st-ease, ease) infinite; }
  @keyframes st-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
}