/* Guide uses the site's typography, FAQ accordion and button tokens. */
.setup-guide { color: var(--color-gray); font-family: var(--font-family); min-width: 0; }
.setup-guide [hidden] { display: none !important; }
.setup-guide p, .setup-guide h3 { margin: 0; }
.setup-guide__header { display: grid; gap: 12px; }
.setup-guide__eyebrow { font-size: var(--font-small-size); font-weight: 700; line-height: var(--font-small-line-height); letter-spacing: .08em; color: var(--color-green); }
.setup-guide__steps { list-style: none; counter-reset: setup-step; padding: 0; margin: 28px 0 0; }
.setup-guide__step { counter-increment: setup-step; display: grid; gap: 16px; padding: 36px 0; border-top: 1px solid var(--color-tint); min-width: 0; }
.setup-guide__step > h3 { display: flex; align-items: center; gap: 8px; }
.setup-guide__step > h3::before { content: counter(setup-step); display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-gray-4); color: var(--color-green); font-size: var(--font-body-size); font-weight: var(--font-body-weight); line-height: 1; letter-spacing: 0; }
.setup-guide :is(.primary-button, .secondary-button) { width: fit-content; max-width: 100%; min-height: 48px; text-align: center; text-decoration: none; white-space: normal; }
.setup-guide a:not(.primary-button):not(.secondary-button) { color: var(--color-green); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.setup-guide [aria-disabled="true"], .setup-guide button:disabled { opacity: .45; cursor: default; }
.setup-guide__details, .setup-guide__import-content { display: grid; gap: 16px; }
.setup-guide .accordion { max-width: none; padding-block: 16px; }
.setup-guide .setup-guide__accordion--no-divider { border-bottom: 0; padding-bottom: 0; }
.setup-guide .accordion__trigger { gap: 16px; }
.setup-guide .accordion__panel-inner p + p { margin-top: 0; }
.setup-guide__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 16px; border: 1px solid var(--color-tint); border-radius: 16px; background: var(--color-gray-4); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.setup-guide__copy [data-setup-link-label] { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.setup-guide__copy-label { font-weight: 600; color: var(--color-green); }
.setup-guide textarea { display: block; margin-top: 8px; width: 100%; box-sizing: border-box; font: inherit; resize: vertical; overflow-wrap: anywhere; padding: 12px; border: 1px solid var(--color-tint); border-radius: 12px; }
.setup-guide__state-card { display: grid; gap: 8px; padding: 20px; background: var(--color-gray-4); border-radius: 20px; }
.setup-guide__help { display: grid; gap: 8px; border-top: 1px solid var(--color-tint); padding-top: 36px; }
.setup-guide :is(a,button,textarea):focus-visible { outline: 2px solid var(--color-green-1); outline-offset: 4px; }
.setup-guide [data-setup-qr] { max-width: 100%; height: auto; }
@media (max-width: 420px) { .setup-guide :is(.primary-button, .secondary-button) { width: 100%; } }

.setup-guide__select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 16px; border: 1px solid var(--color-tint); border-radius: 16px; background: var(--color-gray-4); color: var(--color-gray); font-family: var(--font-family); font-size: var(--font-body-size); line-height: var(--font-body-line-height); }
.setup-guide__tv { display: grid; gap: 24px; min-width: 0; }
.setup-guide__tv [hidden] { display: none !important; }
.setup-guide__select:focus-visible { outline: 2px solid var(--color-green-1); outline-offset: 4px; }

/* A step divider already follows these final accordions. */
.setup-guide[data-setup-guide] .setup-guide__step > .accordion:last-child,
.setup-guide[data-setup-guide] .setup-guide__import-content > .accordion:last-child { border-bottom: 0; padding-bottom: 0; }

/* Smart TV has separate picker/content cards, not a white wrapper around both. */
.instructions-card--content:has([data-instructions-panel="smarttv"]:not([hidden])) { padding: 0; background: transparent; border-radius: 0; }

.setup-guide__tv > .instructions-card--picker { gap: var(--new-user-card-info-gap); padding-block: var(--new-user-card-padding); }
.setup-guide__tv > .instructions-card--picker h2 { margin: 0; }
@media (min-width: 1280px) { .setup-guide__tv { gap: 32px; } }

.setup-guide__state-card [data-setup-purchase] { margin-top: 12px; }

/* Android has a dedicated guide root; hide only the last visible accordion edge. */
.setup-guide[data-android-guide] .setup-guide__step > .accordion:not([hidden]):not(:has(~ .accordion:not([hidden]))),
.setup-guide[data-android-guide] .setup-guide__import-content > .accordion:not([hidden]):not(:has(~ .accordion:not([hidden]))) {
  border-bottom: 0;
  padding-bottom: 0;
}