/* THE RESPONSIVE LAYER — the one thing inline styles cannot express.
 *
 * `ShellLayout.tsx` has said since Sprint 38 that the rail and the tab bar are "both in the
 * document at once and neither is hidden by script: which one a person sees is the
 * stylesheet's business, and a layout that decided it here would be deciding it from a width
 * nothing measured." That reasoning is right and this file is the stylesheet it was waiting
 * for — until now there wasn't one, and there were no media queries anywhere in the app.
 *
 * So BOTH drew, always. On a 1512px desktop the phone tab bar rendered as a four-column grid
 * squeezed into 143px in the far right corner: "Home Invoices Waiting More", overlapping,
 * beside the ledger. Measured, not guessed — that is exactly where it was found.
 *
 * ONE BREAKPOINT, and it is derived rather than picked: the rail is 268px and the design lays
 * content out at 48px of padding either side over a 64ch measure. Below about 900px there is
 * no room for both, which is where the phone treatment the design draws takes over.
 */

/* Wide: the rail carries navigation, and the tab bar has no business being there. */
@media (min-width: 900px) {
  [data-nav="phone"] {
    /* `!important` because the element carries an inline `display: grid`, and an inline style
     * beats any stylesheet rule without it. That is the whole reason the tab bar survived on
     * desktop even once this file existed: the media query matched and lost.
     *
     * The alternative — stripping `display` out of the component's inline style — would leave
     * the tab bar with no layout of its own and make it depend on this file to be shaped at
     * all. Better that the component stays complete and the stylesheet overrides it, which is
     * the one job a stylesheet is unambiguously entitled to do. */
    display: none !important;
  }
}

/* Narrow: the tab bar carries navigation, and the rail would eat the screen.
 *
 * `visibility` is deliberately NOT used, and neither is opacity: a rail that is merely
 * invisible is still in the tab order and still read aloud, so somebody on a phone would tab
 * through eighteen destinations they cannot see before reaching the page. `display: none`
 * takes it out of the document's flow, the tab order and the accessibility tree together. */
@media (max-width: 899px) {
  [data-nav="rail"] {
    /* Same reason as above: the rail carries an inline `display: flex`. */
    display: none !important;
  }
}