/* The query frame uses the public palette without changing the Native shell theme. */
html:has(body.hotwire-native .native-query-ui), body.hotwire-native:has(.native-query-ui) { background: #fff; }
body.hotwire-native .native-query-ui { display: block; }
body.hotwire-native .native-query-ui .native-check { max-width: 680px; margin-inline: auto; padding: 0 0 24px; }
body.hotwire-native .native-query-ui .connection-tool-heading { margin: 0 0 24px; padding: 8px 0 0; }
body.hotwire-native .native-query-ui .connection-tool-heading h1 { margin: 0 0 12px; font-size: 28px; }
body.hotwire-native .native-query-ui .connection-tool-heading > p:last-child { font-size: 15px; }
body.hotwire-native .native-query-ui .connection-input-card { padding: 0; background: #fff; border: 0; box-shadow: none; }
body.hotwire-native .native-query-ui .connection-input-card form > label { color: var(--public-muted); }
body.hotwire-native .native-query-ui .connection-input-row .input { background: #fff; border-color: #ccc; color: var(--public-ink); }
body.hotwire-native .native-query-ui .connection-input-row :is(.input, .btn) { width: 100%; min-height: 52px; height: 52px; font-size: 16px; }
body.hotwire-native .native-query-ui .regional-result-layout { grid-template-columns: minmax(0, 1fr); }

.tool-name-short { display: none; }
body.hotwire-native .native-query-ui .regional-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 0; margin-bottom: 24px; }
body.hotwire-native .native-query-ui .regional-tabs a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 10px 0; font-size: 14px; }
body.hotwire-native .native-query-ui .tool-name-full { display: none; }
body.hotwire-native .native-query-ui .tool-name-short { display: inline; }
@media (max-width: 600px) {
  body.public-ui:has(.connection-tool) > nav { background: #fff; }
  body.public-ui .connection-tool { padding-inline: 20px; }
  body.hotwire-native .native-query-ui .native-check { padding-inline: 4px; }
  .public-ui .connection-tool .regional-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 0; margin-bottom: 24px; }
  .public-ui .connection-tool .regional-tabs a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 10px 0; font-size: 14px; }
  .public-ui .connection-tool .tool-name-full { display: none; }
  .public-ui .connection-tool .tool-name-short { display: inline; }
  .public-ui .connection-tool .regional-node-options { display: grid; grid-template-columns: minmax(0, 1fr); }
  .public-ui .connection-tool .regional-row [data-column] { display: block; min-width: 0; overflow-wrap: anywhere; }
  .public-ui .connection-tool .regional-row [data-column]::before { display: block; }
  .public-ui .connection-tool .regional-detail :is(code, small) { overflow-wrap: anywhere; white-space: normal; }
  .public-ui .connection-tool .regional-detail small { display: block; }
  .public-ui .connection-tool .regional-website-report .regional-row { grid-template-columns: minmax(0, 1fr); }
  .public-ui .regional-website-report .regional-row > * { grid-column: auto; grid-row: auto; min-width: 0; max-width: none; text-align: left; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  body.public-ui:has(.connection-tool) > nav .homepage-brand { font-size: 20px; gap: 6px; }
  body.public-ui:has(.connection-tool) > nav .homepage-actions { gap: 6px; }
  body.public-ui:has(.connection-tool) > nav #guest-login-link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; flex-shrink: 0; }
}