/* Phone fixes for forms, products and tools (owner, 2026-10-19). Loaded last. */

/* iPhones zoom into any field whose text is under 16px and the page then jumps while typing. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  /* A long option text never makes a dropdown wider than the screen. */
  select {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
}

/* Touch screens: small icon buttons get a 44px tap area without changing how they look. */
@media (pointer: coarse) {
  .pu-info > button,
  .tool-favorite,
  .cc-icon,
  .gp-icon,
  .em-icon,
  .is-icon,
  .formatter-icon,
  .art-button,
  .motion-toggle {
    position: relative;
  }
  .pu-info > button::after,
  .tool-favorite::after,
  .cc-icon::after,
  .gp-icon::after,
  .em-icon::after,
  .is-icon::after,
  .formatter-icon::after,
  .art-button::after,
  .motion-toggle::after,
  .brand-motion-control::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  /* Exam Prep profile switcher in the header. */
  html .ep-switcher select {
    min-height: 40px;
  }
}

@media (max-width: 600px) {
  /* The motion button no longer covers links and form buttons: icon only, out of the way. */
  .page-motion-control {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    right: 10px;
    bottom: 10px;
    opacity: 0.85;
  }
  .page-motion-control span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Footer heading and the round "Let's talk" button fit side by side without overlapping. */
  html .footer-invitation h2 {
    font-size: clamp(24px, 7.4vw, 32px);
  }
  .footer-invitation > div {
    min-width: 0;
  }
  /* Leave room so the last form button or footer link is never under it. */
  .site-footer {
    padding-bottom: 64px;
  }

  /* Tools list: compact cards, about half the height, so 37 tools are quick to scan. */
  html .tool-grid {
    gap: 12px;
  }
  html .tool-card {
    padding: 16px 16px 14px;
    border-radius: 18px;
  }
  html .tool-card-top {
    margin-bottom: 8px;
    align-items: center;
  }
  html .tool-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  html .tool-icon svg {
    width: 20px;
    height: 20px;
  }
  html .tool-card h2 {
    font-size: 1.08rem;
    margin: 4px 0 6px;
  }
  html .tool-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  html .tool-card-meta {
    padding-top: 10px;
  }
  html .tool-favorite {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }
}

/* Analytics consent (2026-10-19) */
.cookie-consent{position:fixed;left:16px;bottom:16px;z-index:60;max-width:420px;display:grid;gap:12px;padding:16px 18px;border:1px solid #c8dfbd;border-radius:18px;background:#fbfff8;box-shadow:0 12px 32px #1a3a2226;font-size:14px;line-height:1.5}.cookie-consent p{margin:0}.cookie-consent div{display:flex;gap:10px;flex-wrap:wrap}.cookie-consent .button{min-height:40px;padding:8px 16px}
.footer-link-button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}.footer-link-button:hover{text-decoration:underline}
@media(max-width:600px){.cookie-consent{left:10px;right:64px;bottom:10px;max-width:none}}
@media (pointer: coarse){.footer-link-button{position:relative}.footer-link-button::after{content:"";position:absolute;inset:-12px -6px}}