/* Styles for the extension walkthrough (apps/veloda/extension-setup.html and
   its /ar/ and /fr/ twins).

   These live in their own file rather than in a <style> block because the
   site's Content-Security-Policy is `style-src 'self'` — an inline <style> is
   simply dropped and the page paints as raw unstyled text. Same reason there
   are no style="" attributes in the markup.

   Not folded into style.css: only three pages need any of this, and every
   other page would pay to download it.

   Written with logical properties (inset-inline-start, padding-inline-start),
   so the Arabic page mirrors itself without a second copy of the rules. */

.setup-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.setup-head { text-align: center; margin: 8px 0 28px; }
.setup-head h1 { margin-bottom: 8px; }
.setup-head p { color: var(--text-dim); }

/* The stage: a mock browser window that plays a 16s loop. Illustrative on
   purpose — a stylised browser, not a screenshot of one, so it does not go
   stale the next time Chrome moves a button. */
.browser {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  margin: 0 auto 10px;
}
.browser__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
.omni {
  flex: 1; margin-inline-start: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 14px; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: var(--text); white-space: nowrap; overflow: hidden; min-width: 0;
  direction: ltr; text-align: left;
}
.omni .caret { color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.screen { position: relative; height: 300px; background: var(--bg); }
.stage { position: absolute; inset: 0; padding: 22px; opacity: 0; }

/* Four stages share one 16s timeline; each is visible for its own quarter,
   with a short cross-fade. Everything is CSS — no script, nothing to load. */
.s1 { animation: show 16s infinite; }
.s2 { animation: show 16s infinite; animation-delay: 4s; }
.s3 { animation: show 16s infinite; animation-delay: 8s; }
.s4 { animation: show 16s infinite; animation-delay: 12s; }
@keyframes show {
  0%   { opacity: 0; transform: translateY(6px); }
  3%   { opacity: 1; transform: translateY(0); }
  22%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; }
}

.rowline { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 14px; }
.rowline .lbl { font-weight: 600; }
.rowline .sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.rowline .sub.ltr { direction: ltr; text-align: start; }

/* The developer-mode toggle flipping on in stage 2. */
.toggle { width: 46px; height: 26px; border-radius: 20px; background: var(--border);
  position: relative; flex: none; animation: flip 16s infinite; animation-delay: 4s; }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  animation: knob 16s infinite; animation-delay: 4s; }
@keyframes flip { 0%,6% { background: var(--border); } 12%,100% { background: var(--success); } }
@keyframes knob { 0%,6% { transform: translateX(0); } 12%,100% { transform: translateX(20px); } }
[dir="rtl"] .toggle::after {
  animation-name: knob-rtl;
}
@keyframes knob-rtl { 0%,6% { transform: translateX(0); } 12%,100% { transform: translateX(-20px); } }

.btn-load { display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-text); font-weight: 700;
  padding: 10px 16px; border-radius: 10px; }
.btn-load.press { animation: press 16s infinite; animation-delay: 8s; }
@keyframes press { 0%,4% { transform: scale(1); } 8% { transform: scale(.94); } 12%,100% { transform: scale(1); } }

.folder { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 8px 14px; border: 1px dashed var(--border); border-radius: 10px;
  color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 13px;
  direction: ltr; opacity: 0; animation: pop 16s infinite; animation-delay: 8s; }
@keyframes pop { 0%,8% { opacity: 0; transform: scale(.96); } 14%,100% { opacity: 1; transform: scale(1); } }

.extcard { display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.extcard img { width: 44px; height: 44px; border-radius: 10px; }
.badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  color: var(--success); font-weight: 700; font-size: 14px;
  opacity: 0; animation: pop 16s infinite; animation-delay: 12s; }
.badge svg { width: 18px; height: 18px; }

/* A cursor that drifts to whatever is being clicked in stages 2 and 3. The
   offsets are logical, so on the Arabic page it travels to the mirrored
   positions without a separate set of numbers. */
.cursor { position: absolute; width: 20px; height: 20px; z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); animation: move 16s infinite; }
@keyframes move {
  0%   { top: 60%; inset-inline-start: 80%; opacity: 0; }
  5%   { opacity: 1; }
  12%  { top: 22%; inset-inline-start: 78%; }        /* toggle */
  30%  { top: 22%; inset-inline-start: 78%; }
  44%  { top: 40%; inset-inline-start: 20%; }        /* load button */
  60%  { top: 40%; inset-inline-start: 20%; }
  75%,100% { top: 60%; inset-inline-start: 80%; opacity: 0; }
}

.caption { text-align: center; color: var(--text-dim); min-height: 24px; margin-bottom: 26px; }
.caption b { color: var(--accent); }

/* The written steps below the animation — the animation shows, these are
   what a user reads back while doing it, and what a screen reader gets. */
ol.steps { max-width: 620px; margin: 0 auto; padding: 0; list-style: none; counter-reset: s; }
ol.steps li { counter-increment: s; position: relative; padding: 14px 0;
  padding-inline-start: 46px; border-bottom: 1px solid var(--border); }
ol.steps li:last-child { border-bottom: 0; }
ol.steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 12px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(63,169,255,.16); color: var(--accent); font-weight: 800; border-radius: 50%; }
ol.steps code { background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; font-size: 13px;
  direction: ltr; display: inline-block; }
.note { max-width: 620px; margin: 22px auto 0; padding: 14px 16px; color: var(--text-dim);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .s1,.s2,.s3,.s4,.toggle,.toggle::after,.btn-load.press,.folder,.badge,.cursor { animation: none; }
  .s1 { opacity: 1; } .s2,.s3,.s4 { display: none; }
  .folder,.badge { opacity: 1; }
}