/* The web installer page (/install). Builds on /styles.css; logical properties
   throughout so Arabic (RTL) mirrors cleanly. No color-mix() or other recent
   syntax, as in styles.css. */

main [hidden] { display: none !important; }

button.btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.btn:disabled { opacity: 0.6; cursor: default; }

.install-hero { padding-bottom: 8px; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.install-layout {
  max-width: var(--page);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.install-layout-single {
  max-width: var(--page);
  margin: 16px auto 0;
}
@media (max-width: 900px) {
  .install-layout { grid-template-columns: 1fr; }
}

.install-panel {
  padding: 28px;
  border-radius: var(--radius);
}
@media (max-width: 520px) {
  .install-panel { padding: 22px 18px; }
}

/* ── Start ───────────────────────────────────────────────────────────────── */

.install-start .btn { width: 100%; max-width: 460px; }
.install-hint {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 14.5px;
}
.install-unsupported {
  font-size: 19px;
  line-height: 1.4;
}

/* ── Steps ───────────────────────────────────────────────────────────────── */

.progress {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: var(--ink-3);
  font-size: 17.5px;
  transition: color 200ms var(--ease);
}
.progress-step[data-state="active"],
.progress-step[data-state="done"],
.progress-step[data-state="warn"],
.progress-step[data-state="error"] { color: var(--ink); }
.progress-step[data-state="active"] { font-weight: 600; }
.progress-step[data-step="done"][data-state="done"] { color: #8FDCE6; font-weight: 600; }

.progress-extra {
  margin-inline-start: auto;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.progress-mark {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ink-4);
}

.progress-step[data-state="active"] .progress-mark {
  box-shadow: none;
  border: 2.5px solid rgba(var(--teal-rgb), 0.25);
  border-top-color: #3FBACB;
  animation: install-spin 900ms linear infinite;
}

.progress-step[data-state="done"] .progress-mark {
  background: linear-gradient(180deg, #3FBACB, #2A8C9B);
  box-shadow: 0 3px 10px rgba(var(--teal-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.progress-step[data-state="done"] .progress-mark::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.progress-step[data-state="warn"] .progress-mark,
.progress-step[data-state="error"] .progress-mark {
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.progress-step[data-state="warn"] .progress-mark { background: #FF9F0A; color: #1D1300; }
.progress-step[data-state="warn"] .progress-mark::after { content: "!"; }
.progress-step[data-state="error"] .progress-mark { background: #FF453A; color: #fff; }
.progress-step[data-state="error"] .progress-mark::after { content: "\00D7"; font-size: 19px; font-weight: 600; }

@keyframes install-spin { to { transform: rotate(360deg); } }

.install-allow {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  background: rgba(255, 159, 10, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.35);
  font-weight: 600;
}

/* ── Error and done ──────────────────────────────────────────────────────── */

.install-error,
.install-done {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.install-error-text {
  font-size: 18px;
  line-height: 1.4;
}
.install-error .btn { margin-top: 16px; }

.install-details { margin-top: 16px; }
.install-details summary {
  color: var(--ink-3);
  font-size: 14px;
  cursor: pointer;
}
.install-details pre {
  max-height: 280px;
  margin: 10px 0 0;
  padding: 12px 14px;
  overflow: auto;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

.install-done h3 { font-size: 22px; }
.install-done p {
  margin-top: 8px;
  color: var(--ink-2);
}
.install-done .install-warn { color: #FFD60A; }

/* ── Before you start / Not working? ─────────────────────────────────────── */

.install-list {
  margin-top: 14px;
  padding-inline-start: 1.2em;
  color: var(--ink-2);
  font-size: 15.5px;
}
.install-list li + li { margin-top: 8px; }
.install-list a { color: var(--ink); text-underline-offset: 3px; }

.install-help summary {
  cursor: pointer;
  list-style-position: inside;
}

@media (prefers-reduced-motion: reduce) {
  .progress-step[data-state="active"] .progress-mark { animation-duration: 2400ms; }
}