/* pcActivity /docs page: the page around the guide (legal.css gives header, footer, fonts). */
.docs-page .wrap { max-width: 1240px; }
.docs-page main { padding: 0; }

/* Website user guide (/docs): topic list at the start side, each topic's steps + a step-by-step screenshot slider.
   Framework-neutral: markup from render.py, behaviour from guide.js. Logical properties, so RTL pages mirror themselves.
   Map these tokens to the site's own (brand colour, text, borders; redefine them for dark mode). */
.docs {
  --docs-brand: #0B5F66;
  --docs-brand-soft: color-mix(in srgb, var(--docs-brand) 12%, transparent);
  --docs-text: #172B3A;
  --docs-muted: #526273;
  --docs-faint: #94A3B8;
  --docs-border: #DCE3EA;
  --docs-surface: #F5F7FA;
  --docs-card: #FFFFFF;
  --docs-radius: 12px;
  --docs-radius-sm: 8px;
  --docs-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
  --docs-header: 0px;    /* the site's sticky header height: lesson headings land below it */
  --docs-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 3rem;
  padding-block: 2.5rem 5rem;
}

/* ---------- Left bar ---------- */
.docs-nav details { position: sticky; top: calc(var(--docs-header) + 16px); max-height: calc(100vh - var(--docs-header) - 32px); overflow-y: auto; padding-inline-end: 0.5rem; }
.docs-nav summary { display: none; }
.docs-group + .docs-group { margin-top: 1.4rem; }
.docs-group-title { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--docs-faint); }
.docs[lang='ar'] .docs-group-title, [lang='ar'] .docs-group-title { font-size: 0.85rem; letter-spacing: 0; text-transform: none; }   /* joined letters; keep English words as written */
.docs-nav ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--docs-border); }
.docs-nav li a {
  display: block; margin-inline-start: -1px; padding-block: 0.35rem; padding-inline: 0.9rem 0; border-inline-start: 2px solid transparent;
  font-size: 0.92rem; line-height: 1.35; color: var(--docs-muted); text-decoration: none;
}
.docs-nav li a:hover { color: var(--docs-text); }
.docs-nav li a.is-current { color: var(--docs-brand); border-inline-start-color: var(--docs-brand); font-weight: 600; }

/* ---------- Right side ---------- */
.docs-head h1 { margin: 0 0 0.5rem; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.docs-head p { margin: 0; color: var(--docs-muted); max-width: 46rem; }
.docs-section { padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid var(--docs-border); scroll-margin-top: var(--docs-header); }
.docs-section h2 { margin: 0 0 0.5rem; font-size: 1.6rem; color: var(--docs-brand); }
.docs-intro { margin: 0 0 0.35rem; color: var(--docs-text); }
.docs-meta { margin: 0 0 1.25rem; font-size: 0.85rem; color: var(--docs-faint); }
.docs-meta span { margin-inline: 0.4rem; }

/* Number tag: the same coral as the badges in the screenshots; "On your website" slides get an eye in the brand colour */
.docs-tag {
  flex: none; display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding-inline: 0.3rem;
  border-radius: 0.4rem; background: #FF5A36; color: #FFFFFF; font-size: 0.85rem; font-weight: 700;
}
.docs-tag.is-see { background: var(--docs-brand); font-size: 0.8rem; }
.docs-steps li.is-see button { padding-inline-start: 2rem; }

/* ---------- Slider ---------- */
.docs-slider { border: 1px solid var(--docs-border); border-radius: var(--docs-radius); background: var(--docs-card); box-shadow: var(--docs-shadow); overflow: hidden; outline: none; }
.docs-slider:focus-visible { box-shadow: 0 0 0 3px var(--docs-brand-soft), var(--docs-shadow); }
.docs-stage { position: relative; aspect-ratio: 16 / 10; background: #FFFFFF; }
.docs-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.docs-stage img[hidden] { display: none; }
.docs-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Each half of the picture is a button: the start half = previous step, the end half = next step */
.docs-hit { position: absolute; top: 0; bottom: 0; width: 50%; border: 0; padding: 0 0.9rem; background: transparent; cursor: pointer; display: flex; align-items: center; }
.docs-hit.is-prev { inset-inline-start: 0; justify-content: flex-start; cursor: w-resize; }
.docs-hit.is-next { inset-inline-end: 0; justify-content: flex-end; cursor: e-resize; }
[dir='rtl'] .docs-hit.is-prev { cursor: e-resize; }
[dir='rtl'] .docs-hit.is-next { cursor: w-resize; }
.docs-hit span {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(15, 23, 42, 0.72); color: #FFFFFF; font-size: 1.8rem; line-height: 1; padding-bottom: 0.2rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25); transition: transform 0.2s var(--docs-spring), background 0.4s, rotate 0.45s var(--docs-spring);
}
.docs-hit:hover span { background: var(--docs-brand); transform: scale(1.08); }   /* scale, not rotate: hover keeps a turned arrow turned */
/* Last slide: › turns to point down and goes green, nudges down twice; click = next lesson */
.docs-hit.is-down span { rotate: 90deg; background: #16A34A; animation: docs-nudge 0.7s ease-in-out 0.4s 2; }
[dir='rtl'] .docs-hit.is-down span { rotate: -90deg; }   /* the glyph is mirrored there: ‹ */
.docs-hit.is-down:hover span { background: #15803D; }
[dir] .docs-hit.is-down { cursor: pointer; }   /* as specific as the RTL cursor rule, and later */
@keyframes docs-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }
.docs-hit:focus-visible { outline: none; }   /* the button is half the picture: a site-wide focus ring would frame it; ring the arrow instead */
.docs-hit:focus-visible span { outline: 3px solid var(--docs-brand); outline-offset: 2px; }
.docs-hit:disabled { cursor: default; }
.docs-hit:disabled span { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .docs-hit span { transition: none; } .docs-hit.is-down span { animation: none; } }
.docs-caption { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; padding: 0.9rem 1.1rem; border-top: 1px solid var(--docs-border); line-height: 1.5; color: var(--docs-text); }
.docs-count { margin-inline-start: auto; padding-inline-start: 0.75rem; font-size: 0.85rem; color: var(--docs-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Step list and tips ---------- */
.docs-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.docs-steps button {
  display: flex; gap: 0.75rem; align-items: flex-start; width: 100%; padding: 0.55rem 0.7rem; border: 0; border-radius: var(--docs-radius-sm);
  background: transparent; color: var(--docs-muted); font: inherit; line-height: 1.5; text-align: start; cursor: pointer;
}
.docs-steps button:hover { background: var(--docs-surface); color: var(--docs-text); }
.docs-steps button.is-active { background: var(--docs-brand-soft); color: var(--docs-text); }
.docs-steps strong, .docs-caption strong, .docs-tips strong { color: var(--docs-text); }
.docs-tips { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: calc(var(--docs-radius) * 0.6); background: var(--docs-surface); border: 1px solid var(--docs-border); }
.docs-tips p { margin: 0 0 0.4rem; color: var(--docs-text); }
.docs-tips ul { margin: 0; padding-inline-start: 1.2rem; color: var(--docs-muted); line-height: 1.6; }

/* ---------- Phones and small tablets: topics fold into a menu above the guide ---------- */
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.25rem; }
  .docs-nav details { position: static; max-height: none; border: 1px solid var(--docs-border); border-radius: calc(var(--docs-radius) * 0.6); padding: 0.8rem 1rem; background: var(--docs-card); }
  .docs-nav summary { display: flex; cursor: pointer; font-weight: 600; color: var(--docs-text); }
  .docs-nav details[open] summary { margin-bottom: 0.9rem; }
  .docs-hit span { width: 2.25rem; height: 2.25rem; font-size: 1.5rem; }
  .docs-section h2 { font-size: 1.35rem; }
}