/* /app — the Android download page.

   Everything in this file serves one block: the Play Protect warning. A member wrote in with a
   screenshot of «App blocked to protect your device» and the words «اپ موبایلتون مشکل داره», which
   is the correct reading of that dialog if nobody told you otherwise — Android shows it for every
   app that did not come from Google Play, and the way out of it is a line of small grey text that
   does not look like a button, sitting directly above a large blue one that cancels.

   So this block is deliberately not written like the rest of the page. The rest is prose in the
   site's dark palette; this is a bordered amber card with its own tag, and inside it a mock of the
   real dialog in the real dialog's colours, with the tap target marked. Somebody who has the
   warning on screen right now is not reading paragraphs — they are looking for the thing that
   matches what they see. */

/* The two install routes, side by side and deliberately unequal. Bazaar is the recommended one
   because it skips every problem the rest of this page is about, so it gets the filled card and the
   direct file gets the outlined one. Both are full cards rather than links in a sentence: this is
   the only thing a visitor came here to press. */
.install-routes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 0;
}
.install-route {
  display: block; border: 1px solid #3d3564; border-radius: 16px; padding: 18px 20px;
  background: #1b1733; color: #efeaff; text-decoration: none; transition: border-color .15s, transform .15s;
}
.install-route:hover { border-color: #7b62d8; transform: translateY(-2px); }
.install-route.recommended {
  border-color: #2f8f5b; background: linear-gradient(150deg, #17402c, #1b1f38 70%);
}
.install-route.recommended:hover { border-color: #4dc07e; }
.install-route-tag { display: block; font-size: 12.5px; font-weight: 700; color: #a99fd0; }
.install-route.recommended .install-route-tag { color: #6ed69b; }
.install-route b { display: block; margin: 7px 0 0; font-size: 18px; color: #fff; }
.install-route-note { display: block; margin: 6px 0 0; color: #b3abcd; font-size: 13.5px; line-height: 1.95; }
.install-route-missing {
  margin: 0; border: 1px dashed #4a416f; border-radius: 16px; padding: 18px 20px;
  color: #b3abcd; font-size: 14px; line-height: 2;
}

/* The scope line for the warning below. It reads before the alarm rather than after it, so somebody
   who installed from Bazaar can stop here instead of being frightened by a dialog they will never
   see. */
.apk-warning-scope {
  margin: 12px 0 0; color: #f4d9ae; font-size: 14px; line-height: 2;
}

.apk-warning {
  margin: 34px 0 0; border: 1px solid #7a5a2a; border-inline-start: 4px solid #f0a63e;
  border-radius: 16px; background: linear-gradient(160deg, #3a2a1266, #241a2e);
  padding: 24px 26px; scroll-margin-top: 110px;
}
.apk-warning-tag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  border-radius: 999px; background: #f0a63e1f; color: #ffc879;
  padding: 5px 12px; font-size: 12.5px; font-weight: 700;
}
.apk-warning h2 {
  /* legal.css gives every h2 inside .legal-body a top border and 46px of air, which is exactly the
     separation this card provides for itself. Overridden rather than avoided, so the heading still
     counts as an h2 in the document outline. */
  margin: 14px 0 0; padding-top: 0; border-top: 0; color: #fff;
  font-size: 20px; line-height: 1.75;
}
.apk-warning-lead { margin: 12px 0 0; color: #e3d9ee; font-size: 15px; line-height: 2.1; }
.apk-warning-lead strong { color: #ffd9a8; }

.apk-warning-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 22px; align-items: start; }

/* The mock. Light sheet, dark text, Google's blue — the dialog's own colours rather than the
   site's, because it has to be recognised at a glance against the screenshot on the member's
   screen. It is a drawing, not a photograph: annotated, and never claimed to be an exact copy. */
.apk-dialog { margin: 0; }
.apk-dialog-sheet {
  border-radius: 20px; background: #d4d3d8; color: #14131a;
  padding: 20px 18px 16px; text-align: center; box-shadow: 0 16px 34px #0006;
  font-family: Roboto, Arial, sans-serif;
}
.apk-dialog-shield { display: block; margin: 0 auto; }
.apk-dialog-brand { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #22212a; }
.apk-dialog-title { margin: 12px 0 0; font-size: 19px; line-height: 1.35; font-weight: 400; color: #14131a; }
.apk-dialog-body { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #3d3b47; }

/* The two rows that decide the outcome. Each carries its verdict in Persian on the far side, which
   is why they are flex rows rather than the centred text the real dialog uses. */
.apk-dialog-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 14px;
}
.apk-dialog-row b { flex: none; font-family: Vazirmatn, Tahoma, sans-serif; font-size: 11.5px; font-weight: 700; }
.apk-dialog-yes { border: 2px solid #1e8e3e; background: #1e8e3e14; color: #14131a; }
.apk-dialog-yes span { font-weight: 700; text-decoration: underline; }
.apk-dialog-yes b { color: #10682d; }
.apk-dialog-no { border: 2px dashed #c5221f; background: transparent; }
.apk-dialog-no span {
  flex: 1; border-radius: 999px; background: #2f6bec; color: #fff;
  padding: 9px 0; font-weight: 700; text-align: center;
}
.apk-dialog-no b { color: #d93a37; }
.apk-dialog figcaption { margin-top: 12px; color: #a49bb8; font-size: 12.5px; line-height: 1.9; text-align: center; }

.apk-warning-steps h3 { margin: 0 0 2px; color: #fff; font-size: 16.5px; }
.apk-warning-steps ol { margin: 12px 0 0; padding-inline-start: 20px; color: #ddd6ec; font-size: 14.5px; line-height: 2.1; }
.apk-warning-steps li { margin-top: 10px; }
.apk-warning-steps li::marker { color: #f0a63e; font-weight: 700; }
.apk-warning-steps li b { color: #fff; }
/* Latin words inside a Persian sentence: isolated so the surrounding RTL run does not reorder
   them, and given the dialog's own weight so «Install anyway» reads as a quotation of the screen. */
.apk-key {
  display: inline-block; border-radius: 6px; background: #ffffff14; padding: 1px 7px;
  font-family: Roboto, Arial, sans-serif; font-size: .92em; font-weight: 700; color: #fff;
  direction: ltr; unicode-bidi: isolate;
}
.apk-warning-fix {
  margin: 18px 0 0; border-top: 1px solid #ffffff17; padding-top: 14px;
  color: #c9c1dd; font-size: 14px; line-height: 2.05;
}

@media (max-width: 760px) {
  .install-routes { grid-template-columns: 1fr; gap: 12px; }
  .install-route { padding: 16px 17px; }
  .install-route b { font-size: 17px; }
  .apk-warning { padding: 20px 18px; border-radius: 14px; }
  .apk-warning h2 { font-size: 18px; }
  .apk-warning-grid { grid-template-columns: 1fr; gap: 20px; }
  .apk-dialog-sheet { padding: 18px 15px 14px; }
  .apk-dialog-title { font-size: 17px; }
}