/* CountaBill product page — mobile layout corrections.
   ====================================================

   /apps/budget-app/index.html is bundler output: ~800KB that reconstructs the
   document at runtime, with every rule as an inline `style` attribute. There is
   no source file to edit, which is why these corrections live in a separate
   stylesheet loaded alongside it rather than in the bundle. Everything here
   needs `!important` for exactly that reason — it is competing with inline
   styles, which otherwise win.

   ── Why this file exists ────────────────────────────────────────────────────

   The bundle ships a `@media (max-width: 900px)` block that collapses the three
   biggest layout blocks on the page to a single column. It has never worked.
   It selects with `[data-r="hero"]`, `[data-r="explorer"]` and
   `[data-r="split"]`, and `[attr="value"]` is an EXACT match — but the elements
   are actually marked `data-r="hero pad"`, `data-r="explorer pad"` and
   `data-r="split pad"`. Those are space-separated token lists, which need `~=`.
   Measured on the live page: `[data-r="hero"]` matches 0 elements, `[data-r~=
   "hero"]` matches 1. Same for the other two.

   So on a phone the hero, the interactive explorer and both split sections kept
   their desktop multi-column grids and squeezed themselves into ~150–230px
   columns — the "spacing errors". `[data-r="pad"]` has the same flaw: it hits 5
   of the 9 padded blocks, so those same three sections got no mobile padding
   either.

   The fix is to re-declare each rule with `~=`. They are otherwise unchanged
   from what the bundle intended, so this is repairing the author's own
   breakpoint rather than redesigning it.

   ── The other half ──────────────────────────────────────────────────────────

   The bundle also hides `[data-r="railnote"]` below 900px. That note is the
   thing that tells you how to drive the interactive demo, and the paragraph
   above it says "the notes explain what you are looking at" — so on every phone
   the instruction survived and the instructions it pointed at did not. It is
   shown again below, and reflowed to sit under the phone rather than beside it.

   ── If the page is ever rebuilt ─────────────────────────────────────────────

   Fix `=` to `~=` in the bundle's own media block and delete most of this file.
   Keep the tap-target and 1-column rules unless the rebuild covers them.
*/

/* ── Repair of the bundle's own 900px breakpoint ───────────────────────────── */

@media (max-width: 900px) {
  [data-r~="hero"],
  [data-r~="explorer"],
  [data-r~="split"] {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  [data-r~="rail"],
  [data-r~="phone"] {
    position: static !important;
    top: auto !important;
  }

  [data-r~="phone"] {
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  [data-r~="rail"] {
    align-items: flex-start !important;
    flex-flow: wrap !important;
  }

  [data-r~="railgroup"] {
    flex: 0 0 100% !important;
    flex-flow: wrap !important;
  }

  [data-r~="railgroup"] button {
    width: auto !important;
    min-height: 44px !important;
  }

  [data-r~="raillabel"] {
    flex: 0 0 100% !important;
    margin-top: 6px !important;
  }

  [data-r~="explorer"] button,
  [data-r~="explorer"] a {
    min-height: 44px !important;
  }

  [data-r~="legalrow"] {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  [data-r~="legaltag"] {
    text-align: left !important;
  }

  [data-r~="pad"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Put the explorer's how-to-use note back. It was the only guidance on the
     page for a demo whose whole point is that you tap around it. Below 900px
     the rail sits under the phone, so the note reads as a caption. */
  [data-r~="railnote"] {
    display: block !important;
    flex: 0 0 100% !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgb(221, 217, 208) !important;
  }

  /* Controls first, then the screen they drive, then the description of it.
     That is the reading order the three-column desktop layout implies, and it
     means you have chosen something before you are shown the result. The rail
     is already first in the DOM, so this just makes the intent explicit and
     stops a future reorder from separating the buttons from their screen. */
  [data-r~="explorer"] > [data-r~="rail"] { order: 1 !important; }
  [data-r~="explorer"] > [data-r~="phone"] { order: 2 !important; }
  [data-r~="explorer"] > :not([data-r]) { order: 3 !important; }

  /* Tapping a rail button changes a screen that is often below the fold, so
     mobile-explorer.js scrolls the phone into view and adds this class. The
     pulse is what says "this is the thing that just changed" -- without it the
     only feedback is the button you pressed going dark, which reads as the tap
     having done nothing. */
  [data-r~="phone"].cb-phone-changed {
    animation: cb-phone-pulse 620ms ease-out 1;
  }

  /* The eight "UNDER INSIGHTS" buttons are sub-screens of one tab, and on a
     phone they sit between you and the screen you are trying to look at. Show
     them only while that tab (or one of them) is selected.

     Driven by a class on <html> rather than by styling the elements directly:
     the bundle rebuilds the rail on every selection and would throw away
     anything written onto it. See mobile-explorer.js.

     nth-child because CSS cannot match the label by its text. The rail is
     label, group, label, group, label, group, note -- so the pair is 5 and 6.
     mobile-explorer.js checks that child 5 really is the UNDER INSIGHTS label
     before it adds `cb-rail-ready`, so if the markup is ever reordered the
     class never appears and the section simply stays visible. */
  html.cb-rail-ready.cb-insights-hidden [data-r~="rail"] > *:nth-child(5),
  html.cb-rail-ready.cb-insights-hidden [data-r~="rail"] > *:nth-child(6) {
    display: none !important;
  }
}

@keyframes cb-phone-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 122, 74, 0.55); }
  60%  { box-shadow: 0 0 0 12px rgba(29, 122, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 122, 74, 0); }
}

/* Respect the OS setting -- a pulse is decoration, and the scroll already
   carries the meaning. */
@media (prefers-reduced-motion: reduce) {
  [data-r~="phone"].cb-phone-changed {
    animation: none;
  }
}

/* ── Single column, and a header that does not eat the screen ──────────────── */

@media (max-width: 760px) {
  /* Collapse every grid on the page to one column.

     This is deliberately a blanket rule rather than a list of selectors. The
     bundle declares its grids inline, in six different shapes — `repeat(2, 1fr)`
     for the feature cards, `minmax(0px, 1fr) 320px` and `... 340px` for the
     split sections, `280px minmax(0px, 1fr)` for the support answers,
     `230px minmax(0px, 1fr) 150px` for the legal rows, and two bespoke ones for
     the hero and the explorer. Enumerating them means the next grid anyone adds
     is broken on phones again and nobody finds out.

     There is no grid on this page that should stay multi-column at 390px: the
     narrowest fixed track is 150px and the widest is 340px, so every one of
     them either overflows or squeezes body copy down to one or two words a
     line. The support answers were the worst of it — "Settings > Profile >
     Delete account & data" set one word per line down a 90px column. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* A wide column gap becomes a wide row gap the moment there is one column.
     Scoped to grids with no `data-r`, because the tagged ones (hero, explorer,
     split, legalrow) get their own gap above and should keep it — 34px between
     major sections reads as structure, 5px inside a legal row reads as one
     item. */
  [style*="grid-template-columns"]:not([data-r]) {
    gap: 18px !important;
  }

  /* The header is `position: sticky` and wraps to three rows on a phone —
     logo, four links, then the CTA — which measured ~330px, better than a
     third of the viewport, pinned there at every scroll position. Let it
     scroll away and tighten the rows. */
  div[style*="position: sticky"][style*="z-index: 50"] {
    position: static !important;
    padding: 12px 20px !important;
    gap: 10px !important;
    row-gap: 8px !important;
  }

  /* Section padding on the bundle's own blocks is 60–64px top and bottom plus
     44px sides; that is desktop rhythm and reads as dead space on a phone. */
  div[style*="padding: 64px 44px"],
  div[style*="padding: 60px 44px"],
  div[style*="padding: 72px 44px"],
  div[style*="padding: 80px 44px"] {
    padding: 40px 20px !important;
  }
}

@media (max-width: 560px) {
  [data-r~="pad"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* The hero headline is five lines of 36px serif on a 390px screen, which is
     the entire first viewport before a word of explanation. */
  [data-r~="hero"] h1 {
    font-size: clamp(28px, 8.2vw, 34px) !important;
    line-height: 1.08 !important;
  }

  /* "COUNTABILL · FREE · IPHONE · STILL BEING BUILT" wrapped mid-phrase with
     the status dot stranded on the line above. Keep the dot with the text and
     let the whole strip wrap as one unit. */
  [data-r~="hero"] h1 + *,
  [data-r~="hero"] > * > span:first-child {
    overflow-wrap: break-word !important;
  }
}

/* ── Tap targets ───────────────────────────────────────────────────────────── */

@media (pointer: coarse) {
  /* The nav links and the legal-footer links were 17–22px tall. Padding rather
     than min-height so the text position does not move. */
  nav a,
  header a,
  [data-r~="legalrow"] a,
  footer a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    display: inline-block !important;
  }
}