/* Page-specific tweaks for the test bench layout. Keeps the test list
   readable on phones/tablets and gives long URLs a chance to wrap
   without exploding the line length on narrow screens. */
.map-embed-sample {
  width: 100%;
  min-height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  margin-top: 8px;
}

.test-list {
  padding-left: 0;
}
.test-list li {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.test-list li:last-child {
  border-bottom: 0;
}

.test-list li > strong {
  display: block;
  margin-bottom: 4px;
}

.test-list a {
  display: inline-block;
  margin-top: 2px;
  padding: 4px 0;
}
.test-list a code {
  word-break: break-all;
  overflow-wrap: anywhere;
}

.test-list .result {
  display: inline;
  margin-left: 6px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.9em;
  opacity: 0.85;
}

.test-list iframe {
  min-height: 240px;
  width: 100%;
}

/* iPad-and-down: tighten typography, stack result line under link. */
@media (max-width: 1024px) {
  h2 {
    margin-top: 1.5rem;
  }
  .test-list li {
    padding: 12px 0;
  }
  .test-list .result {
    display: block;
    margin: 4px 0 0;
  }
}

/* iPhone-and-down: smaller code, full-width check button. */
@media (max-width: 640px) {
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.1rem;
  }

  .test-list li > strong {
    font-size: 0.95rem;
  }
  .test-list code {
    font-size: 10.5px;
    line-height: 1.4;
  }
  .test-list iframe {
    min-height: 200px;
  }

  p,
  .hint,
  ol {
    font-size: 0.93rem;
    line-height: 1.5;
  }

  #run-check {
    width: 100%;
    padding: 12px;
  }
  #check-summary {
    display: block;
    margin-top: 8px;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 1.35rem;
  }
  .test-list code {
    font-size: 10px;
  }
}