/* The extension install steps (install-steps.js), used by /welcome/ (NUX ext_install) and the standalone app's
   Settings. Black and white; the red marks live inside the screenshots, which are content. */
.inst-steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: step; }
.inst-step { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; border-top: 1px solid #000; }
.inst-step:first-child { border-top: 0; padding-top: 6px; }
.inst-step > * { grid-column: 2; }
.inst-step::before { content: counter(step); grid-column: 1; grid-row: 1 / span 12; width: 30px; height: 30px; border: 1.5px solid #000; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.inst-step h2 { margin: 3px 0 6px; font: 700 15px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0; }
.inst-step p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.inst-step p.or { font-size: 13px; }
.inst-step .tip { font-size: 12px; }
.inst-step code { font: 13px/1.2 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.inst-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 2px 0 10px; }
.inst-actions:empty { display: none; }
.inst-actions .tryon-button { min-height: 40px; }
.nux-download-button { min-height: 44px; padding: 12px 20px; font-size: 13px; }
.inst-shot { margin: 6px 0 8px; border: 1px solid #000; }
.inst-shot img { display: block; width: 100%; height: auto; }
.inst-shot.half { max-width: 520px; }
.inst-wait { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; padding: 10px 14px; border: 1px solid #000; font-size: 13px; }
.inst-wait .mark { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1.5px solid #000; border-radius: 50%; font-size: 12px;
  animation: beat 2s ease-in-out infinite; }

/* Stuck? tips under the steps */
.nux-stuck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; font-size: 13px; }
.nux-stuck-title { grid-column: 1 / -1; margin: 0 0 4px; font-weight: 700; }
.nux-stuck details { border-top: 1px solid #000; }
.nux-stuck summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; list-style-position: outside; }
.nux-stuck summary::before { content: "+"; width: 16px; flex: none; font-weight: 700; }
.nux-stuck details[open] summary::before { content: "−"; }
.nux-stuck details p { margin: 0 0 10px 16px; }

@media (max-width: 1000px) {
  .nux-stuck { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .inst-step { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 16px 0; }
  .inst-step::before { width: 26px; height: 26px; font-size: 12px; }
  .inst-actions .tryon-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .inst-wait .mark { animation: none; } }