/* Responsive finishing layer. Keep content readable, never mask overflow. */
html { scrollbar-gutter: stable; }
body { overflow-wrap: break-word; }
body :is(input, select, textarea, fieldset) { min-width: 0; max-width: 100%; }
body :is(.hero-copy, .watchbox, .watchinner, .watchtop > *, .row2 > *, .row3 > *,
  .plan-card, .so-alert-control, .so-alert-action, .settings-layout > *,
  .settings-form, .field, .session-card > *, .support-dialog-head > div) { min-width: 0; }
body :is(.watchtitle, .watchmeta, .resultline, .pill, .so-alert-title,
  .so-alert-spotter, .saved-listing, .search-requirements, .account-message,
  .form-message, .session-card, .page a, .support-form-status) { overflow-wrap: anywhere; }
body :is(.pill, .so-alert-spotter, .plan-speed, .verified-badge, .subscription-badge) { max-width: 100%; white-space: normal; }

/* Center the section introductions, not the forms or listing content. */
body.so-modern :is(#how, #dashboard) > .shell > :is(.kicker, .sectiontitle, .lead) {
  margin-inline: auto;
  text-align: center;
}
body.so-modern .so-page-heading { justify-content: center; text-align: center; }
body.so-modern .so-page-heading p { margin-inline: auto; }
body.so-modern .watchtop { grid-template-columns: 62px minmax(0, 1fr) auto; }
body.so-modern .watchactions { max-width: 360px; }
body.so-modern :is(.resultline, .matches) { margin-left: 77px; }
body.so-modern .toolbar { flex-wrap: wrap; }
body.so-modern .spotter-list-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); }
body.so-modern .spotter-list-controls label { min-width: 0; }
body.so-modern .so-alert-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto; }

/* Keep all dialogs within short/landscape screens and let their content scroll. */
body:has(dialog[open]) { overflow: hidden; }
body #spotterStartConfirm,
body :is(.account-dialog, .account-welcome, .billing-dialog, .saved-history-dialog, .modal) {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body #spotterStartConfirm { width: min(520px, calc(100% - 28px)); overflow-wrap: anywhere; }
body .spotter-confirm-body h2 { padding-right: 38px; }
body .modalbg { z-index: 90; }
body .so-create-dialog {
  width: min(820px, calc(100% - 32px));
  max-height: min(900px, calc(100vh - 32px));
  max-height: min(900px, calc(100dvh - 32px));
}
body .so-create-dialog-shell {
  max-height: min(898px, calc(100vh - 34px));
  max-height: min(898px, calc(100dvh - 34px));
  min-height: 0;
}
body .so-create-dialog-header { flex: 0 0 auto; }
body .so-create-dialog-header > div { min-width: 0; }
body .so-create-dialog-content { min-height: 0; flex: 1 1 auto; scroll-padding-block: 16px; }
body .support-dialog-backdrop { box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; }
body .support-dialog {
  box-sizing: border-box;
  max-height: min(760px, calc(100vh - 36px));
  max-height: min(760px, calc(100dvh - 36px));
  overscroll-behavior: contain;
}
body .support-form :is(input, select, textarea) { box-sizing: border-box; font-size: 16px; }
body .saved-history-head > div { min-width: 0; }
body .saved-history-head [data-close-history] { flex-shrink: 0; }
body .saved-history-dialog { scroll-padding-top: 90px; }

/* Every primary touch/keyboard control has a reliable hit area. */
body :is(.so-tab, .account-menu-item, .settings-tab, .button, .support-form-submit,
  .so-alert-ebay-button, .so-home-how-link) { min-height: 44px; }
body .so-home-how-link { display: inline-flex; align-items: center; }
body :is(.so-create-dialog-close, .support-dialog-close, .account-close,
  .account-welcome-close, .billing-close, .spotter-confirm-close, .close, .password-toggle) {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
body.so-modern :is(.watchactions, .toolbar, .spotter-pagination, .spotter-preview-nav) .btn { min-height: 44px; }
body[data-spotter-home] #themeToggle { display: inline-flex !important; width: 44px; min-width: 44px; min-height: 44px !important; }
body.so-modern #accountButton { min-height: 44px; }
body :is(.so-tab, .so-home-how-link):focus-visible { outline: 3px solid var(--so-emerald, #1b7752); outline-offset: 3px; }

@media (max-width: 1100px) and (min-width: 651px) {
  /* Tablet/laptop cards get a full-width action row before content gets squeezed. */
  body.so-modern .watchtop { grid-template-columns: 62px minmax(0, 1fr); }
  body.so-modern .watchactions { grid-column: 1 / -1; max-width: none; justify-content: flex-start; }
}
@media (max-width: 900px) {
  body.so-modern .navin { padding-block: 8px; }
  body.so-modern #soAppTabs { margin-bottom: 0; }
  body.so-modern .so-alert-action { min-width: 0; flex-wrap: wrap; gap: 10px; }
  body.so-modern .watchactions .btn { white-space: normal; }
  /* Avoid iOS focus zoom, including landscape phones and touch tablets. */
  body input:not([type="checkbox"]):not([type="radio"]), body select, body textarea { font-size: 16px !important; }
}
@media (pointer: coarse) {
  body input:not([type="checkbox"]):not([type="radio"]), body select, body textarea { font-size: 16px !important; }
}
@media (max-width: 1000px) {
  body .appearance-options { grid-template-columns: 1fr; }
  body .appearance-option { min-height: 0; }
  body .appearance-option[aria-pressed="true"] { padding-top: 38px; }
}
@media (max-width: 650px) {
  body.so-modern .watchtop { grid-template-columns: 54px minmax(0, 1fr) !important; }
  body.so-modern .watchactions { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.so-modern .watchactions .btn { white-space: normal; min-width: 0; padding-inline: 8px; }
  body.so-modern :is(.resultline, .matches) { margin-left: 0; }
  body.so-modern .spotter-list-controls,
  body.so-modern .so-alert-toolbar { grid-template-columns: minmax(0, 1fr); }
  body.so-modern .so-alert-count { grid-column: 1 / -1; justify-self: start; white-space: normal; }
  body.so-modern .so-alert-action { margin-left: 0; }
  body.so-modern .spotter-pagination { flex-wrap: wrap; justify-content: center; }
  body.so-modern .toolbar { align-items: stretch; }
  body.so-modern .toolbar > .btn { width: 100%; }
  body .so-create-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  body .so-create-dialog-shell { max-height: calc(100dvh - 22px); }
  body .so-create-dialog-header { padding: 16px; }
  body .so-create-dialog-header h2 { font-size: 22px; }
  body .so-create-dialog-close { flex-basis: 44px; }
  body .saved-history-dialog { width: calc(100% - 20px); }
  body .saved-listing { padding: 14px; }
  body .saved-history-head h2 { font-size: 20px; }
  body.so-modern #how { scroll-margin-top: 130px; }
  body .footerin { align-items: center; text-align: center; }
}
@media (max-width: 600px) {
  body .support-dialog { max-height: calc(100dvh - 16px); padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  /* Small phones retain theme and sign-in; the secondary link gets its own row. */
  body[data-spotter-home] .navin {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 8px;
  }
  body[data-spotter-home] .navin > .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  body[data-spotter-home] .navin > .navlinks { grid-column: 2; grid-row: 1; }
  body[data-spotter-home] .navin > :is(.so-home-how-link, #soAppTabs) { grid-column: 1 / -1; grid-row: 2; margin-inline: auto; }
  body[data-spotter-home] #accountButton { max-width: 90px; }
  body.so-modern .plan-card { padding: 22px !important; }
  body .header-inner { gap: 8px; }
  body .header-actions { gap: 5px; }
  body .header-actions .button { padding-inline: 12px; }
}
@media (max-height: 500px) {
  /* Landscape phones should not lose half their usable height to a sticky nav. */
  body :is(.nav, .site-header) { position: static; }
  body .so-create-dialog-header p { display: none; }
  body .so-create-dialog-header { padding-block: 10px; }
}
@media (hover: none) {
  body.so-modern :is(.btn, .watchcard, .plan-card, .so-tab, .so-alert-card):hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.so-tab, .btn, .watchcard, .plan-card, .so-alert-card, .appearance-option) { transition: none !important; transform: none !important; }
}