/* ═══════════════════════════════════════════════════════════════════════
   CREST — a smaller screen gets a smaller interface.

   Loaded on EVERY page: the four portals (layouts/dashboard.php) and the
   public pages (landing, about, login, sign-up, maintenance). Served through
   crest_asset() so a change reaches phones without a hard refresh.

   Every size in CREST is in rem — there is not one px font-size in the
   layout or the public pages — so the root size is the one dial: text,
   buttons, padding, boxes and the floating tools all scale together.
   Percentages, not px, so a browser's own "larger text" setting still
   applies on top.

       1200px and wider   16px   (unchanged — a desktop is never restyled)
       below 1200px       15px   small laptop, tablet
       below 768px        14px   phone
       below 400px        13px   small phone

   `screen and …`: a width query matches paper too (A4 is ~1050px wide), and
   a printout must not be scaled by the size of the sheet.
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1199.98px) { html { font-size: 93.75%; } }
@media screen and (max-width: 767.98px)  { html { font-size: 87.5%; } }
@media screen and (max-width: 399.98px)  { html { font-size: 81.25%; } }

/* iPhone only: Safari zooms the whole page in when a box whose text is under
   16px gets focus, and does not zoom back out. The boxes keep 16px there;
   everything around them is still scaled. (-webkit-touch-callout exists only
   in iOS Safari.) */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 1199.98px) {
        input.form-control, select.form-control, textarea.form-control,
        .custom-select, input[type="text"], input[type="search"], input[type="email"],
        input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"],
        input[type="time"], textarea, select { font-size: 16px !important; }
    }
}