/* ─────────────────────────────────────────
   SYSTEM OVERRIDES  (design system locked 8 Oct 2026)
   Loaded AFTER tailwind.output.css on purpose: the prebuilt Tailwind file
   would otherwise win the cascade for .text-sm / .text-xs / .container.
───────────────────────────────────────── */

/* Body text is 16px (Drew, 8 Oct: "1 yes 16"). .text-sm was 14px and is the
   app's body class in ~770 places, so it becomes the 16/24 body style.
   .text-xs becomes the 13/18 caption (Apple's footnote size, never below 13). */
.text-sm { font-size: 1rem; line-height: 1.5rem; }
.text-xs { font-size: 0.8125rem; line-height: 1.125rem; }

/* One gutter, owned by #page-content: 16px up to 389pt (SE, mini, 375-wide
   phones), 20px from 390pt (iPhone 15/16 at 393, 16 Pro at 402, Pro Max at
   440). .container used to add its own 16-20px on top, which made most pages
   32-36px from the edge while others sat at 16. */
#page-content .container { padding-left: 0; padding-right: 0; }
@media (min-width: 390px) {
  #page-content { padding-left: 20px !important; padding-right: 20px !important; }
}

/* No shouting labels (8 Oct 2026): the .uppercase utility and inline
   text-transform:uppercase are neutralised, so labels read in the case they are
   written in. Opt out per element with .keep-uppercase (a code that should
   read as a code). Exact selectors on purpose: a substring match on the class
   attribute also hit unrelated class names and, with !important, would beat any later intent. */
.uppercase:not(.keep-uppercase),
[style*="text-transform:uppercase"]:not(.keep-uppercase),
[style*="text-transform: uppercase"]:not(.keep-uppercase) { text-transform: none !important; }
.tracking-widest, .tracking-wider, .tracking-wide { letter-spacing: normal !important; }

/* Captions never below 13px (Apple's footnote size). ~100 inline labels were
   written at 9 to 11px; this lifts them without editing every style attribute.
   Elements that genuinely need less (nav labels, badges on icons) opt out with
   .keep-small. */
[style*="font-size:9px"]:not(.keep-small), [style*="font-size: 9px"]:not(.keep-small),
[style*="font-size:10px"]:not(.keep-small), [style*="font-size: 10px"]:not(.keep-small),
[style*="font-size:11px"]:not(.keep-small), [style*="font-size: 11px"]:not(.keep-small) {
  font-size: 13px !important;
}

/* No focus boxes on tap (Drew, 8 Oct 2026: the rectangle around "Visa History"
   after tapping it). Buttons, links, summaries and tab targets lose the browser
   outline app-wide. Text inputs keep their own focus style from design-system.css. */
button, a, summary, [role="button"], [tabindex],
button:focus, a:focus, summary:focus, [role="button"]:focus, [tabindex]:focus,
button:focus-visible, a:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible { outline: none; -webkit-tap-highlight-color: transparent; }

/* Centred pop-ups (Drew, 8 Oct 2026). Alpine's x-show clears the inline
   display when it shows an element, so an inline `display:flex` on the
   overlay turned into `block` and the box sat at the top of the screen.
   The flex layout lives in a class instead, which x-show never touches. */
.modal-overlay { display: flex; align-items: center; justify-content: center; }
.modal-overlay > * { max-height: calc(100dvh - 32px); overflow-y: auto; }