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

   In its own file, not a <style> block, because the site's
   Content-Security-Policy is `style-src 'self'`: an inline <style> is dropped
   outright and the page paints as raw unstyled text. Same reason the markup
   carries no style="" attributes.

   The dialogs are drawn, not screenshotted — they stay honest about what the
   user will see without going stale when Windows moves a button, and they
   stay readable at any text size and in any language. */

.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 Windows window playing a 20s loop. */
.win {
  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;
}
.win__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
.win__bar img { width: 16px; height: 16px; border-radius: 4px; }
.win__ctl { margin-inline-start: auto; letter-spacing: 6px; opacity: .6; }

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

/* Four stages on one 20s timeline, each visible for its own quarter with a
   short cross-fade. Pure CSS — no script, nothing to load. */
.s1 { animation: show 20s infinite; }
.s2 { animation: show 20s infinite; animation-delay: 5s; }
.s3 { animation: show 20s infinite; animation-delay: 10s; }
.s4 { animation: show 20s infinite; animation-delay: 15s; }
@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; gap: 14px;
  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; }

/* A file name or a command: always read left-to-right, in both directions. */
.ltr { direction: ltr; text-align: start;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* Stage 1: the file sliding into the browser's download shelf. */
.shelf { position: absolute; inset-inline: 22px; bottom: 18px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 10px;
  animation: slide-up 20s infinite; }
@keyframes slide-up {
  0%,6% { opacity: 0; transform: translateY(14px); }
  10%,25% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
.shelf__icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: rgba(63,169,255,.16); color: var(--accent); border-radius: 8px; font-weight: 800; }

/* Stages 2 and 3: the SmartScreen dialog. Kept deliberately plain — the point
   is "this blue box is expected", not a pixel-perfect forgery. */
.smart { max-width: 460px; margin: 6px auto 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-card); }
.smart__head { background: #0b62c4; color: #fff; padding: 14px 18px; font-weight: 700; }
.smart__body { padding: 16px 18px; font-size: 14px; color: var(--text-dim); }
.smart__morewrap { margin-top: 10px; }
.smart__more { color: var(--accent); font-weight: 700; text-decoration: underline; }
.smart__detail { margin-top: 12px; font-size: 13px; line-height: 1.7;
  font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text);
  direction: ltr; text-align: start; }
[dir="rtl"] .smart__detail { text-align: right; }
.smart__actions { display: flex; gap: 10px; justify-content: flex-end; padding: 0 18px 16px; }
.btn-flat { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elevated); font-size: 14px; }
.btn-run { background: var(--accent); color: var(--accent-text); font-weight: 700; border-color: transparent; }
.btn-run.press { animation: press 20s infinite; animation-delay: 10s; }
@keyframes press { 0%,4% { transform: scale(1); } 8% { transform: scale(.94); } 12%,100% { transform: scale(1); } }

/* Stage 4: installed and running, with no administrator password anywhere. */
.appcard { display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.appcard img { width: 44px; height: 44px; border-radius: 10px; }
.bar { height: 8px; border-radius: 8px; background: var(--bg-elevated);
  border: 1px solid var(--border); overflow: hidden; margin-top: 16px; }
.bar span { display: block; height: 100%; background: var(--accent);
  animation: fill 20s infinite; animation-delay: 15s; }
@keyframes fill { 0%,2% { width: 0; } 12%,100% { width: 100%; } }
.badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  color: var(--success); font-weight: 700; font-size: 14px;
  opacity: 0; animation: pop 20s infinite; animation-delay: 15s; }
.badge svg { width: 18px; height: 18px; }
@keyframes pop { 0%,10% { opacity: 0; transform: scale(.96); } 16%,100% { opacity: 1; transform: scale(1); } }

/* A cursor that drifts to whatever is being clicked in stages 2 and 3. The
   offsets are logical, so the Arabic page mirrors them by itself. */
.cursor { position: absolute; width: 20px; height: 20px; z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); animation: move 20s infinite; }
@keyframes move {
  0%    { top: 70%; inset-inline-start: 82%; opacity: 0; }
  6%    { opacity: 1; }
  13%   { top: 46%; inset-inline-start: 30%; }   /* More info */
  42%   { top: 46%; inset-inline-start: 30%; }
  56%   { top: 76%; inset-inline-start: 70%; }   /* Run anyway */
  72%   { top: 76%; inset-inline-start: 70%; }
  85%,100% { top: 70%; inset-inline-start: 82%; opacity: 0; }
}

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

/* 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; }
.note code { display: block; margin-top: 8px; padding: 10px 12px; overflow-x: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text);
  direction: ltr; text-align: left; }
.cta { text-align: center; margin: 28px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .s1,.s2,.s3,.s4,.shelf,.btn-run.press,.bar span,.badge,.cursor { animation: none; }
  .s1 { opacity: 1; } .s2,.s3,.s4 { display: none; }
  .shelf { opacity: 1; } .bar span { width: 100%; } .badge { opacity: 1; }
}