/* Device tiers.

   The site was drawn for a phone, and every ported stylesheet still is: the
   phone tier is therefore the identity tier — scale 1, full-width container —
   so loading this sheet changes nothing at all below 768px (FR-059).

   The wider tiers do not redraw anything. They restate the same layout at a
   larger size, because a 24-inch screen sitting an arm's length away wants
   bigger type than a phone held at reading distance, and because a line of text
   that runs the full width of that screen is unreadable. Two knobs carry that:

     --tier-scale      multiplies the root font size, so every `rem` in every
                       ported sheet grows with the tier without one of them
                       being touched (FR-017, FR-022)
     --tier-container  how wide the readable column is allowed to get (FR-023)

   Anything that needs a different treatment per tier reads these variables
   rather than adding another breakpoint of its own. */
:root {
  --tier-scale: 1;
  --tier-container: 100%;

  /* The ported sheets set body text from `--font-size`, an absolute 15px, so
     it is the one size the root-font trick above cannot reach. Restated here
     in terms of the tier so body copy grows with everything else (FR-022). At
     the phone tier the multiplier is 1, which is the same 15px as before —
     this sheet still changes nothing below 768px (FR-059). */
  --font-size: calc(15px * var(--tier-scale));
}

/* Declared once: the value follows the tier because the variable does. */
html {
  font-size: calc(16px * var(--tier-scale));
}

/* Tablet. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --tier-scale: 1.1;
    --tier-container: 90%;
  }

  /* The bottom tab bar stays gone from 768px up, exactly as it is today: a
     tablet has room for the side menu and no need for a thumb-reach bar
     across the bottom of a screen held in two hands (FR-032). */
  .bottom-navigation {
    display: none;
  }

  /* The top bar is fixed and 80px tall at every tier — it is one of the few
     things this feature does not scale — so the page starts below it plus a
     small gap (FR-036). */
  .content {
    padding-top: 96px;
    padding-bottom: 88px;
  }

  /* With no bottom bar to sit above, the help control drops to the corner. Its
     clearance is what the padding above buys: the last card in a list must not
     end up underneath it (FR-035). */
  .mobile-shell .whatsapp-fab {
    bottom: 24px;
  }
}

/* Desktop. Fixed rather than proportional: past this width the column stops
   growing and the page centres instead, so the text keeps its line length. */
@media (min-width: 1024px) {
  :root {
    --tier-scale: 1.2;
    --tier-container: 1200px;
  }

  /* Repeated per tier rather than shared at 768px, so each tier can be read on
     its own and changed without disturbing the other (FR-030). */
  .bottom-navigation {
    display: none;
  }

  .content {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .mobile-shell .whatsapp-fab {
    bottom: 24px;
  }
}