/* The homepage's footer on a phone, on every page that has it (the homepage, 404 and legal
   pages draw it with the homepage's script; the others carry it from
   tools/home-sections/chrome.py). Below 768px its columns stack; this keeps them on one grid
   and gathers the legal lines under a rule. */
@media (max-width:767.98px){
  :is(#root,.home-scope) footer[data-section="footer"] [data-footer-nav]{ gap:32px 24px !important; }
  /* Languages: its two columns line up under Model and Lab. */
  :is(#root,.home-scope) footer[data-section="footer"] [data-footer-nav] [style*="grid-template-columns"]{
    width:100% !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:24px !important; }
  /* Contact on one line. */
  :is(#root,.home-scope) footer[data-section="footer"] [data-footer-nav] > :last-child > div{
    flex-direction:row !important; flex-wrap:wrap !important; gap:6px 16px !important; width:100% !important; }
  :is(#root,.home-scope) footer[data-section="footer"] [data-footer-nav] > :last-child > div > *{ width:auto !important; }
  /* The legal lines: the links, then the copyright beside the social icons, under a rule and
     quieter than the links above. */
  :is(#root,.home-scope) footer[data-section="footer"] [class~="py-[24px]"]:has(.social-link){
    display:grid !important; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"links links" "copy social";
    gap:20px 24px !important; align-items:center !important; margin-top:16px; padding-top:24px !important;
    border-top:1px solid rgba(252,250,247,.12); }
  :is(#root,.home-scope) footer[data-section="footer"] [class~="py-[24px]"]:has(.social-link) > p{ grid-area:copy; white-space:normal !important; }
  :is(#root,.home-scope) footer[data-section="footer"] [class~="py-[24px]"]:has(.social-link) > div{ display:contents !important; }
  :is(#root,.home-scope) footer[data-section="footer"] [class~="py-[24px]"]:has(.social-link) > div > :first-child{ grid-area:links; }
  :is(#root,.home-scope) footer[data-section="footer"] [class~="py-[24px]"]:has(.social-link) > div > :last-child{ grid-area:social; }
  :is(#root,.home-scope) footer[data-section="footer"] [class~="py-[24px]"]:has(.social-link) [class*="flex-wrap"]{ gap:10px 18px !important; }
  :is(#root,.home-scope) footer[data-section="footer"] [class~="py-[24px]"]:has(.social-link) .footer-link{ color:rgba(252,250,247,.65); }
}