/* GMPPOCKET - the five screens she named, at 390px.
   Every rule here is one thing that was measured on a phone, not a
   guess about what might be tight. See phone-polish.py for what each
   one looked like before.

   WHY EVERY SELECTOR STARTS WITH html

   This is a linked stylesheet in the head. Every page here also carries
   its own <style> blocks further down the document, and at equal
  html specificity the later rule wins - so .pt-btn{min-height:44px} in here
  html lost to .pt-btn{min-height:40px} down the page, and the buttons stayed
   40px on a phone while this file looked entirely correct.

   "html .pt-btn" is one type selector heavier, so it wins the tie on
   specificity rather than on position. !important would have worked too
   and would have taken the argument away from every rule after it.

   WHY A FEW OF THEM REPEAT A CLASS

   Two rules on these pages are not ties, they are genuinely heavier:

     .jn-row .shape                             two classes
     .pt-btn, .pt-btn.sm, ... , .pt-btn.wide    two classes, on the
                                                compound that matches

   One extra type selector does not beat two classes. Writing the class
   twice - html .shape.shape - is worth one more class and does, and it
   changes nothing about what the selector matches. */

/* 1 -------------------------------------------------- the spec table
   A label left, a value hard right, and a gutter between them taking
   the width both of them needed: "Module 2" broke over two lines so
   that "module 1" could have a line to itself. It stacks instead. */
@media (max-width:560px){
  html .et-spec{margin:16px 0 20px}
  html .et-spec div{display:block;padding:13px 15px}
  html .et-spec div>span{display:block;margin:0 0 3px;
    font-size:.74rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--slate,#5B6675)}
  html .et-spec b{display:block;text-align:left;font-size:1.04rem;line-height:1.35}
}

/* 2 --------------------------------------------------- the stat chips
   Three across 390px is three chips of two lines each. Two across is
   three chips of one line each, and an odd one at the end takes the
   full width rather than sitting half-empty. */
@media (max-width:460px){
  html .shape.shape{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  html .shape.shape>span{margin:0;justify-content:center;text-align:center}
  html .shape.shape>span:last-child:nth-child(odd){grid-column:1 / -1}
}

/* 3 ------------------------------------------------ the keyboard strip
   Not "on a small screen" - on a screen with no keyboard. A small
   window on a laptop still has arrow keys and still wants this. */
@media (hover:none) and (pointer:coarse){
  html .et-keys{display:none}
}

/* 4 ------------------------------------------- the connected banner
   An operator's reassurance, five lines tall, above the sign-in form on
   a student's phone. It asks nobody to do anything. It is still there
   on a desktop, where it costs nothing. */
@media (max-width:760px){
  #ptWarn{display:none}
}

/* 5 ------------------------------------------- the disc with no icon
   The pill with a coloured icon disc is the house style and stays. An
   EMPTY disc on a full-width primary is not that: it is a grey circle
   that reads as a stuck spinner and pushes the label off centre. */
@media (max-width:560px){
  html .pt-btn.pt-btn.wide:not(:has(>svg:first-child))::before{display:none}
  html .pt-btn.pt-btn.wide{justify-content:center;padding-left:18px}
}

/* 6 ------------------------------------------------ what a thumb hits
   44px is the smallest target a thumb finds without aiming. */
@media (hover:none) and (pointer:coarse){
  html .pt-btn.pt-btn, html .pt-tab.pt-tab, html .st-tab.st-tab,
  html .hwr-v.hwr-v, html .sw-chip.sw-chip{min-height:44px}
  html .pt-btn.pt-btn.sm{min-height:38px}
  html input, html select, html textarea{font-size:16px}   /* below 16px iOS zooms in */
}

/* 8 ------------------------------------------ the Student portal link
   The one link a student opens the site for was the LAST item in a menu
   eleven items long, below Calculus, Schedule & fees and About. On a
   phone all you could see of it was a sliver of amber at the bottom
   edge of the screen. It is first now, and it stays put at the top of
   the menu while the rest of it scrolls underneath. */
@media (max-width:860px){
  html .gmpbar.is-open .gmpbar-nav{max-height:min(72vh,600px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-top:0;scroll-padding-top:56px}
  html .gmpbar-nav a.gmpbar-cta{order:-1;position:sticky;top:0;z-index:3;
    margin:0 0 10px;padding:15px 12px;font-size:16px;
    box-shadow:0 6px 16px rgba(6,25,85,.28)}
}

/* 7 ------------------------------------------------- room to breathe
   The sign-in card had 40px of padding on a 390px screen, so the form
   inside it was 310px wide. */
@media (max-width:560px){
  html .pt-panel, html .pt-card, html .si-card{padding-left:16px;padding-right:16px}
  html .pt-wrap{padding-left:12px;padding-right:12px}
  html h1{line-height:1.15}
}