/* =============================================================================
 * app_install.css — the install help page (/app/install, forms/install.html).
 * Light brandbook only (tokens from brand/brand.css, .btn from forms.css).
 * Logical properties throughout: the page is RTL in Farsi.
 * ===========================================================================*/

.install{ max-inline-size:640px; margin-inline:auto; }

.install__title{
  margin-block:0 var(--space-2); margin-inline:0;
  font-family:var(--brand-font-display); font-weight:400; font-size:32px; line-height:1.2;
  color:var(--brand-primary);
}
.install__lead{ margin-block:0 var(--space-5); margin-inline:0; font-size:18px; color:var(--brand-muted); }

/* Inside the installed app only. CSS rather than script, so it is decided before the first paint
   and never pushes the cards down after somebody has started reading. */
.install__done{
  display:none;
  margin-block:0 var(--space-4); margin-inline:0;
  padding-block:var(--space-3); padding-inline:var(--space-4);
  border:1px solid var(--brand-success); border-radius:var(--brand-radius-sm);
  background:#eaf4ea; color:var(--brand-success); font-weight:600;
}
@media (display-mode: standalone){ .install__done{ display:block; } }

.install-card{
  background:var(--brand-surface);
  border:1px solid var(--brand-border); border-radius:var(--brand-radius);
  box-shadow:var(--brand-shadow);
  padding-block:var(--space-5); padding-inline:var(--space-5);
  margin-block-end:var(--space-4);
}
/* The card for the device reading it (set by forms/install.js): colour only, same box. */
.install-card[data-this-device]{ border-color:var(--brand-primary); }
.install-card[data-this-device] .install-card__title{ color:var(--brand-primary); }

.install-card__title{
  margin-block:0 var(--space-4); margin-inline:0;
  font-size:21px; font-weight:700; line-height:1.3; color:var(--brand-ink);
}
.install-card__text{ margin:0; font-size:17px; line-height:1.5; }

/* Numbered steps. The number is a CSS counter in `decimal`, i.e. Western digits in both languages
   (app/shared/digits.py: numbers are only ever English). */
.install-steps{ margin:0; padding:0; list-style:none; counter-reset:install-step; display:grid; gap:var(--space-4); }
.install-steps > li{
  counter-increment:install-step;
  display:grid; grid-template-columns:34px minmax(0, 1fr); gap:var(--space-3); align-items:start;
  font-size:17px; line-height:1.5;
}
.install-steps > li::before{
  content:counter(install-step, decimal);
  display:flex; align-items:center; justify-content:center;
  inline-size:34px; block-size:34px; border-radius:999px;
  background:var(--brand-primary); color:#fff;
  font-weight:700; font-size:15px; font-variant-numeric:tabular-nums;
}

.install-card__now{ inline-size:100%; margin-block-start:var(--space-5); }
/* `.btn` sets display, which would beat the hidden attribute's own display:none. */
.install-card__now[hidden]{ display:none; }

.install__actions{ display:flex; flex-direction:column; margin-block-start:var(--space-2); }

@media (max-width:560px){
  .install__title{ font-size:27px; }
  .install-card{ padding-block:var(--space-4); padding-inline:var(--space-4); }
}