/* ===========================================================================
   Layout only. No colours, no fonts, no visual identity.

   Twelve of the twenty one screens were written for a desktop browser and had
   no responsive rules at all. They were readable on a phone in the way any web
   page is readable on a phone: by pinching.

   The visual direction is still being chosen, so this file deliberately does
   not touch how anything looks. It fixes the four things that actually break a
   layout on a small screen, and nothing else. When the theme is settled these
   rules move into theme.css and this file goes away.
   =========================================================================== */

/* 1. NOTHING SCROLLS SIDEWAYS.
      The single worst small-screen failure: one wide element pushes the whole
      page, so every line of text now runs off the edge and the reader has to
      scroll left and right for each one. */
/* On html only, where it applies to the window itself. Set on body as well,
   it made body a scrolling box of its own that never scrolls, and anything
   sticky (the dashboard's side menu) stopped sticking and left with the page.
   `clip` on body cuts off sideways overflow without becoming a scroll box. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: clip; }

/* Grid and flex children default to min-width:auto, meaning they refuse to
   shrink below their content. One wide child then widens its whole row. This
   is the cause of most horizontal overflow, and it is invisible on a desktop. */
[class*="grid"] > *, [class*="row"] > *, [class*="tiles"] > *,
[class*="totals"] > *, [class*="metrics"] > * { min-width: 0; }

/* A long unbroken string, an intake address being the obvious one, is wider
   than a phone all by itself. */
body { overflow-wrap: break-word; }

/* 2. TABLES SCROLL INSIDE THEMSELVES, NOT WITH THE PAGE.
      A table of figures cannot usefully reflow, so it gets its own scrollbar
      and the text around it stays put. */
.tbl-scroll, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
  /* Any table not already inside a scroller: let it scroll rather than shove
     the page. `display:block` on a table is crude, but a table half off the
     screen is worse than one that scrolls. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 620px) {
  /* 3. TWO COLUMNS BECOME ONE.
        Paired fields keep their intrinsic width otherwise and push sideways. */
  .row2, .two, .checks, .grid2, .cmp-metrics, .movers, .exp-grid { display: block; }
  .row2 > * + *, .two > * + *, .grid2 > * + * { margin-top: 10px; }

  /* Anything explicitly set to more than one column collapses. */
  .metrics-row, .totals, .tiles, .charts, .chart-grid, .sum {
    grid-template-columns: 1fr !important;
  }

  a { text-decoration-thickness: from-font; }

  /* Reclaim the margins a desktop layout can afford and a phone cannot. */
  body { padding-left: 14px; padding-right: 14px; }
  .wrap, .sheet, .card, .page { padding-left: 14px; padding-right: 14px; }
  .card { margin-left: 0; margin-right: 0; }
}

/* 4. TOUCH DEVICES STOP ZOOMING ON FOCUS.
      Safari zooms the whole page when a focused input is under 16px, and it
      does not zoom back out afterwards. The obvious place to put this is a
      narrow-width query, and that is wrong: an iPad reports 768px or 1024px
      and zooms exactly the same way. `pointer: coarse` asks the real question,
      which is whether a finger is being used, not how wide the screen is.

      It also keeps 13px inputs on a desktop, where they are fine and where
      forcing 16px would make every form look clumsy. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }

  /* Roughly the width of a fingertip. Anything smaller gets mis-tapped, and a
     mis-tap on a delete button is a bad afternoon. */
  button, .btn, .rm { min-height: 44px; min-width: 44px; }
  button, .btn { padding: 12px 18px; }
  .side a, .nav a { padding-top: 11px; padding-bottom: 11px; }
}

/* Two columns on a tablet, where one column wastes half the screen and three
   are too cramped.

   The upper bound is 1180px rather than 1024px on purpose. 1024 is the iPad
   number everybody quotes, and Android tablets do not agree with it: a Galaxy
   Tab reports 800, a Tab S landscape 1280, a Pixel Tablet 1138. Stopping at
   1024 would have left a whole class of Android tablets falling into the
   desktop layout while still being held in two hands.

   Nothing here names a device. Width decides the columns, and `pointer:
   coarse` above decides the touch sizing, so an Android tablet, an iPad and a
   touchscreen laptop are all handled by asking what is true rather than by
   guessing from a user agent string. */
@media (min-width: 621px) and (max-width: 1180px) {
  .chart-grid, .tiles { grid-template-columns: repeat(2, 1fr); }
  .metrics-row, .totals { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Installed to a home screen, the app paints the full display, so the notch and
   the home indicator have to be paid for or content sits underneath them. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top);
         padding-bottom: env(safe-area-inset-bottom);
         padding-left: max(14px, env(safe-area-inset-left));
         padding-right: max(14px, env(safe-area-inset-right)); }

  /* An installed app has no browser back button, so a link that leaves the app
     would strand somebody. Nothing here does, but the rule is worth keeping in
     mind when adding one. */
}

/* A touch device has no hover, and a hover style that sticks after a tap looks
   like a bug. */
@media (hover: none) {
  a:hover, .tile:hover, button:hover { transform: none; }
}