.extension-connect-page [hidden] {
  display: none !important;
}

.extension-connect-panel {
  overflow: hidden;
}

.extension-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.extension-step {
  display: grid;
  min-height: 5rem;
  padding: 1rem 1.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  border-bottom: 1px solid var(--wordy-border);
}

.extension-step__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--wordy-brand-subtle);
  color: var(--wordy-brand);
  font-size: 0.75rem;
  font-weight: 800;
}

.extension-step .step-message {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

.extension-login {
  text-align: center;
}

.extension-login .wordy-empty-state__icon {
  margin: 0 auto 1rem;
}

.extension-step[data-status="loading"] {
  background: color-mix(in srgb, var(--wordy-brand-subtle) 45%, transparent);
}

.extension-step[data-status="error"] {
  background: color-mix(in srgb, var(--wordy-danger) 8%, transparent);
}

.extension-success,
.extension-problem {
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--wordy-radius-md);
}

/* Finishing the connection is the one moment on this page that has to be
   unmistakable, so the panel stops looking like a form and becomes a single
   centred confirmation. */
.extension-success {
  padding: 2rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--wordy-success) 45%, var(--wordy-border));
  background: color-mix(in srgb, var(--wordy-success) 10%, var(--wordy-surface));
  text-align: center;
}

/* Nothing is left of the working panel once the steps and the header are gone, so
   the confirmation becomes the panel instead of sitting in an empty frame. */
.extension-connect-page[data-connection-state="connected"] .extension-connect-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.extension-connect-page[data-connection-state="connected"] .extension-success {
  margin: 0;
}

.extension-success__badge {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--wordy-success);
  box-shadow: 0 0 0 0.55rem color-mix(in srgb, var(--wordy-success) 20%, transparent);
  color: var(--wordy-surface);
  font-size: 2.25rem;
  line-height: 1;
}

.extension-success__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.extension-success__account {
  margin: 0 0 1.5rem;
}

.extension-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.extension-success__note {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
}

.extension-success__version {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: no-preference) {
  .extension-success:not([hidden]) .extension-success__badge {
    animation: extension-connected-badge 320ms ease-out both;
  }
}

@keyframes extension-connected-badge {
  from {
    opacity: 0;
    transform: scale(0.55);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.extension-problem {
  border: 1px solid color-mix(in srgb, var(--wordy-brand) 58%, var(--wordy-border));
  border-left: 0.3rem solid var(--wordy-brand);
  background: color-mix(in srgb, var(--wordy-brand-subtle) 42%, var(--wordy-surface));
}

.extension-problem__message h3 {
  margin-bottom: 0.55rem;
}

.extension-problem__message p,
#connection-account-mismatch-recovery p {
  max-width: 62ch;
}

.extension-problem__reassurance {
  color: var(--wordy-ink-secondary);
}

.extension-problem__actions,
.extension-technical-details__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.extension-problem__actions {
  margin-top: 1rem;
}

.extension-support-reference {
  margin: 1.25rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.78rem;
}

.extension-support-reference code {
  color: inherit;
}

.extension-technical-details {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--wordy-border);
}

.extension-technical-details summary {
  width: fit-content;
  color: var(--wordy-ink-secondary);
  cursor: pointer;
  font-weight: 650;
}

.extension-technical-details > p {
  margin: 0.75rem 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.85rem;
}

.extension-technical-details dl {
  display: grid;
  gap: 0.35rem;
  margin: 1rem 0;
}

.extension-technical-details dl div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.extension-technical-details dt {
  color: var(--wordy-ink-secondary);
}

.extension-technical-details dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-family: var(--font-mono);
}

.extension-technical-details [data-diagnostic="bridgeEventHistory"] {
  white-space: pre-wrap;
}

#connection-copy-status {
  color: var(--wordy-ink-secondary);
  font-size: 0.8125rem;
}

.extension-hero {
  display: grid;
  justify-items: center;
  padding: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--wordy-border);
  text-align: center;
}

.extension-hero__copy {
  max-width: 46rem;
}

.extension-hero__title {
  margin: 0.35rem 0 0;
  color: var(--wordy-ink);
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.07;
  text-wrap: balance;
}

.extension-hero__lead {
  max-width: 40rem;
  margin: 1.15rem auto 0;
  color: var(--wordy-ink-secondary);
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.62;
  text-wrap: pretty;
}

/* The one thing this page exists for, directly under the title: how to get the
   extension, and what to do while the store listings are still pending. */
.install-box {
  width: min(100%, 34rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--wordy-surface);
  border: 1px solid var(--wordy-border);
  box-shadow: var(--wordy-shadow-md);
  text-align: center;
}

.install-box__stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.install-box__stores .btn {
  width: 100%;
}

.install-box__status {
  display: flex;
  margin: 0.9rem 0 0;
  align-items: flex-start;
  justify-content: center;
  gap: 0.45rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: left;
}

.install-box__status i {
  margin-top: 0.15rem;
  color: var(--wordy-brand);
}

.install-box__divider {
  position: relative;
  margin: 1.6rem 0 1.3rem;
  border-top: 1px solid var(--wordy-border);
}

.install-box__divider span {
  position: absolute;
  top: -0.72rem;
  left: 50%;
  padding: 0 0.7rem;
  background: var(--wordy-surface);
  color: var(--wordy-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.install-box__cta {
  width: 100%;
}

.install-box__note {
  margin: 0.8rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.install-box__alt {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
}

.extension-back-link {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.extension-trust {
  max-width: 66rem;
  margin: clamp(3rem, 7vw, 5rem) auto;
}

.extension-trust__lead {
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-align: center;
}

.extension-trust__grid {
  display: grid;
  padding: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--wordy-border);
}

.extension-trust__card {
  padding: 1.5rem 1.4rem;
  background: var(--wordy-surface);
}

.extension-trust__card h3 {
  margin: 0;
  color: var(--wordy-ink);
  font-size: 1rem;
  font-weight: 600;
}

.extension-trust__card p {
  margin: 0.5rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.extension-trust__link {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  text-align: center;
}

.extension-guide {
  max-width: 66rem;
  margin: clamp(3rem, 7vw, 5rem) auto;
}

/* The product visuals (product-demo.css) carry the explanation this page used
   to attempt in prose. They are built from the theme tokens, so they follow the
   light and dark themes the way the rest of the page does. */
.extension-showcase {
  max-width: 72rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto clamp(3rem, 7vw, 5rem);
}

.extension-showcase__caption {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.62;
  text-align: center;
  text-wrap: pretty;
}

.extension-media-split {
  display: grid;
  max-width: 66rem;
  margin: clamp(3rem, 7vw, 5rem) auto;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

/* Alternating sides keeps two figure rows in a row from reading as one block. */
.extension-media-split--flip .extension-media-split__copy {
  order: 2;
}

.extension-media-split__title {
  margin: 0.35rem 0 0;
  color: var(--wordy-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

.extension-media-split__lead {
  margin: 0.9rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.extension-media-split__points {
  display: flex;
  margin: 1.35rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.extension-media-split__points li {
  padding: 0.35rem 0.7rem;
  background: var(--wordy-surface-subtle);
  border: 1px solid var(--wordy-border);
  color: var(--wordy-ink);
  font-size: 0.8125rem;
}

.extension-media-split__media {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.extension-section-heading {
  margin-bottom: 2rem;
  text-align: center;
}

.extension-steps-grid {
  display: grid;
  margin: 0;
  padding: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--wordy-border);
  list-style: none;
}

.extension-mini-step {
  display: grid;
  padding: 1.4rem 1.3rem 1.5rem;
  align-content: start;
  gap: 0.45rem;
  background: var(--wordy-surface);
}

.extension-mini-step__num {
  color: var(--wordy-brand);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.extension-mini-step h3 {
  margin: 0;
  color: var(--wordy-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

.extension-mini-step p {
  margin: 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.extension-mini-step a {
  font-size: 0.8125rem;
}

@media (max-width: 991.98px) {
  .extension-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extension-media-split {
    grid-template-columns: 1fr;
  }

  /* Stacked, the copy always comes first; the flip only exists side by side. */
  .extension-media-split--flip .extension-media-split__copy {
    order: 0;
  }
}

@media (max-width: 767.98px) {
  .extension-trust__grid,
  .extension-steps-grid,
  .install-box__stores {
    grid-template-columns: 1fr;
  }

  .extension-hero {
    padding-block: 0 2.5rem;
  }

  .extension-hero__title {
    font-size: clamp(2rem, 8.4vw, 2.75rem);
  }

  .extension-connect-panel .wordy-panel__header {
    align-items: flex-start;
  }

  .extension-step {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .extension-step .step-status {
    grid-column: 2;
  }

  .extension-technical-details dl div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}