/* gplanr: phones. Every @media rule for phones lives here; it is loaded after main_tablet.css and refines it. */

/* Phones: up to 640px wide */
@media (max-width: 640px) {
    .divbody { gap: 1.1rem; padding: 1rem; padding-bottom: 1rem; }
    .page-landing .divbody { padding: 0; }

    .brand { width: min(300px, 70vw); }
    .page-title { font-size: 1.4rem; }
    .org-image { max-width: min(300px, 70vw); }
    .card { padding: 1.1rem; }

    /* Inputs of 16px or more keep iOS from zooming the page when a field gets focus. */
    .card input, .signup input[type=email] { font-size: 16px; }

    /* Landing page: form full width, one field per line. */
    .signup { margin: 1rem .8rem 0; }
    .signup input[type=email], .signup button { flex: 1 1 100%; }
    .status { margin: .8rem .8rem .4rem; }
    .privacy, .privacy2 { margin-left: .8rem; margin-right: .8rem; }

    /* The footer joins the page flow instead of floating over the content. */
    .footer { position: static; align-self: center; margin: .5rem 0 1rem; }
    .page-landing .footer { margin-top: 0; }

    #ct_about { width: calc(100vw - 20px); }
    #gotoGiTaC { padding-left: 12px; }
}

/* Phones turned sideways: little height, so tighten the vertical spacing. */
@media (max-width: 900px) and (max-height: 520px) {
    .divbody { gap: .6rem; padding-top: .8rem; padding-bottom: .8rem; justify-content: flex-start; }
    .brand, .brand-small { width: 160px; }
    .org-image { display: none; }
    .card { padding: 1rem; }
    .card label { margin-top: .5rem; }
    .btn { margin-top: .8rem; }
}