/* Shared mobile tool switcher + form hardening for AffixIO demos */

.tool-switcher {
  display: none;
  margin: 0 0 var(--space-3, 24px);
  padding: 16px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e2dc);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--shadow-soft, rgba(26, 26, 26, 0.06));
}

.tool-switcher label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}

.tool-switcher select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border, #e5e2dc);
  border-radius: 10px;
  background: var(--color-bg, #f7f6f3);
  color: var(--color-text, #1a1a1a);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%231F4B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.tool-switcher select:focus {
  outline: 2px solid rgba(31, 75, 122, 0.4);
  outline-offset: 2px;
  border-color: var(--color-accent, #1f4b7a);
}

.tool-switcher.is-sticky {
  position: sticky;
  top: calc(var(--header-h, 56px) + 8px);
  z-index: 30;
}

[data-tool-switcher-root] > .tool-switcher {
  grid-column: 1 / -1;
}

@media (max-width: 899px) {
  .tool-switcher {
    display: block;
  }

  /* Hide inactive service panels on mobile only. Do not force display values
     on desktop; page CSS and the hidden attribute remain authoritative. */
  [data-tool-switcher-root][data-mode="panels"] [data-tool-panel]:not(.is-active) {
    display: none !important;
  }

  .tool-switcher-hide-nav {
    display: none !important;
  }
}

@media (min-width: 900px) {
  .tool-switcher {
    display: none !important;
  }
}

/* Mobile form hardening for all tool pages */
@media (max-width: 899px) {
  .tool-page,
  .page-plate,
  .page-shelf,
  .page-alevel,
  .page-demo-strait,
  .page-tools {
    overflow-x: clip;
  }

  .tool-form input,
  .tool-form select,
  .tool-form textarea,
  .pp-form input,
  .pp-form select,
  .pp-form textarea,
  .sp-form input,
  .sp-form select,
  .sp-form textarea,
  .al-form input[type="text"],
  .al-form input[type="number"],
  .al-form input[type="search"],
  .al-form input[type="email"],
  .al-form select,
  .al-form textarea,
  .ds-fuel-form input,
  .ds-fuel-form select,
  .ds-controls input,
  .ds-controls select,
  .tools-field input,
  .tools-field select {
    font-size: 16px !important;
    max-width: 100%;
  }

  .tool-form .btn,
  .pp-form .btn,
  .sp-form .btn,
  .al-form .btn,
  .ds-fuel-form .btn,
  .tool-actions .btn,
  .ds-actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .ds-actions {
    display: grid !important;
    gap: 8px;
  }

  .al-workspace > .tool-switcher {
    margin-bottom: 16px;
    grid-column: 1 / -1;
  }

  .al-grade-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tools-keyword-rail {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .tools-keyword-rail button {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .pp-lookup-row {
    display: grid !important;
    gap: 12px;
  }

  .pp-lookup-row .btn {
    width: 100%;
  }

  .pp-plate-input,
  .tool-form input[type="text"] {
    min-height: 48px;
  }

  .tools-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .tools-chip {
    flex: 0 0 auto;
  }

  .tools-compare-bar {
    bottom: 8px;
    margin-left: 0;
    margin-right: 0;
  }

  .tools-steps {
    grid-template-columns: 1fr !important;
  }

  .tool-links {
    display: grid;
    gap: 8px;
  }

  .tool-links .btn {
    width: 100%;
  }

  .source-grid,
  .pp-gov-strip,
  .pp-compare {
    grid-template-columns: 1fr !important;
  }
}