/* BILLingsly global readability layer
   Purpose: override tiny prototype-era font sizes consistently across every screen.
   Keep visual hierarchy, but do not allow important UI copy to render at 7–11px. */

:where(.phone section,.membershipDialog,.editRecordModal,.onboardingCard,.betaAuthCard,.modal,.dialog){
  font-size:14px!important;
  line-height:1.5!important;
}

/* Primary headings */
.phone section h1,
.membershipDialog h1,
.editRecordModal h1,
.onboardingCard h1{font-size:28px!important;line-height:1.12!important}
.phone section h2,
.membershipDialog h2,
.editRecordModal h2,
.onboardingCard h2{font-size:20px!important;line-height:1.2!important}
.phone section h3,
.membershipDialog h3,
.editRecordModal h3,
.onboardingCard h3{font-size:17px!important;line-height:1.25!important}

/* Normal descriptive copy */
.phone section .sub,
.phone section p,
.phone section li,
.phone section .chat,
.phone section .reply,
.membershipDialog .sub,
.membershipDialog p,
.editRecordModal .sub,
.editRecordModal p,
.onboardingCard p{
  font-size:14px!important;
  line-height:1.55!important;
}

/* Small/supporting UI text: still secondary, but readable. */
.phone section .tiny,
.phone section .note,
.phone section small,
.phone section [class*="meta" i],
.phone section [class*="note" i],
.phone section [class*="hint" i],
.phone section [class*="status" i],
.phone section [class*="caption" i],
.phone section [class*="eyebrow" i],
.phone section [class*="source" i],
.phone section [class*="disclosure" i],
.phone section [class*="helper" i],
.phone section [class*="visibility" i],
.membershipDialog small,
.membershipDialog .note,
.editRecordModal small,
.editRecordModal .note,
.onboardingCard small,
.onboardingCard .note{
  font-size:12px!important;
  line-height:1.45!important;
}

/* Labels and form controls */
.phone label,
.membershipDialog label,
.editRecordModal label,
.onboardingCard label{
  font-size:12.5px!important;
  line-height:1.35!important;
}
.phone input,
.phone select,
.phone textarea,
.membershipDialog input,
.membershipDialog select,
.membershipDialog textarea,
.editRecordModal input,
.editRecordModal select,
.editRecordModal textarea,
.onboardingCard input,
.onboardingCard select,
.onboardingCard textarea{
  font-size:16px!important;
  line-height:1.35!important;
}

/* Buttons should never look like microcopy. */
.phone button,
.membershipDialog button,
.editRecordModal button,
.onboardingCard button{
  font-size:14px!important;
  line-height:1.25!important;
}

/* Pills / badges / tags */
.phone .pill,
.phone [class*="badge" i],
.phone [class*="tag" i],
.membershipDialog .pill,
.onboardingCard .pill{
  font-size:11.5px!important;
  line-height:1.25!important;
}

/* Repeating row/list/table-like content */
.phone section [class*="row" i] span,
.phone section [class*="list" i] span,
.phone section [class*="grid" i] span,
.phone section [class*="item" i] span,
.phone section [class*="row" i] small,
.phone section [class*="list" i] small,
.phone section [class*="grid" i] small,
.phone section [class*="item" i] small{
  font-size:12.5px!important;
  line-height:1.45!important;
}
.phone section [class*="row" i] b,
.phone section [class*="list" i] b,
.phone section [class*="grid" i] b,
.phone section [class*="item" i] b{
  font-size:14px!important;
  line-height:1.35!important;
}

/* Money totals and summary lines */
.phone section .bigline span{font-size:14px!important;line-height:1.4!important}
.phone section .bigline b{font-size:16px!important;line-height:1.3!important}
.phone section .stat span,
.phone section .stat .tiny{font-size:12px!important}
.phone section .stat b{font-size:18px!important}
.phone section [class*="total" i] span{font-size:12.5px!important;line-height:1.4!important}
.phone section [class*="total" i] b{font-size:17px!important;line-height:1.3!important}

/* Navigation is compact, but must remain legible. */
#bottomNav button{font-size:11.5px!important;line-height:1.25!important}
#navRecallButton{font-size:13px!important}
.phone .budgetHubNav button,
.phone .assetSubTabs button,
.phone [class*="tabs" i] button,
.phone [class*="tab" i] button{font-size:13px!important;line-height:1.25!important}
.phone .budgetHubNav button small{font-size:11.5px!important}

/* Top controls */
.phone .top select,
.phone .top button{font-size:12px!important}

/* Desktop: use normal application typography, not enlarged mobile microcopy. */
@media (min-width:900px){
  :where(.phone section,.membershipDialog,.editRecordModal,.onboardingCard,.betaAuthCard,.modal,.dialog){
    font-size:16px!important;
    line-height:1.55!important;
  }

  .phone section h1,
  .membershipDialog h1,
  .editRecordModal h1,
  .onboardingCard h1{font-size:34px!important}
  .phone section h2,
  .membershipDialog h2,
  .editRecordModal h2,
  .onboardingCard h2{font-size:24px!important}
  .phone section h3,
  .membershipDialog h3,
  .editRecordModal h3,
  .onboardingCard h3{font-size:19px!important}

  .phone section .sub,
  .phone section p,
  .phone section li,
  .phone section .chat,
  .phone section .reply,
  .membershipDialog .sub,
  .membershipDialog p,
  .editRecordModal .sub,
  .editRecordModal p,
  .onboardingCard p{
    font-size:16px!important;
    line-height:1.6!important;
  }

  .phone section .tiny,
  .phone section .note,
  .phone section small,
  .phone section [class*="meta" i],
  .phone section [class*="note" i],
  .phone section [class*="hint" i],
  .phone section [class*="status" i],
  .phone section [class*="caption" i],
  .phone section [class*="eyebrow" i],
  .phone section [class*="source" i],
  .phone section [class*="disclosure" i],
  .phone section [class*="helper" i],
  .phone section [class*="visibility" i],
  .membershipDialog small,
  .membershipDialog .note,
  .editRecordModal small,
  .editRecordModal .note,
  .onboardingCard small,
  .onboardingCard .note{
    font-size:13px!important;
    line-height:1.5!important;
  }

  .phone label,
  .membershipDialog label,
  .editRecordModal label,
  .onboardingCard label{font-size:14px!important}

  .phone input,
  .phone select,
  .phone textarea,
  .membershipDialog input,
  .membershipDialog select,
  .membershipDialog textarea,
  .editRecordModal input,
  .editRecordModal select,
  .editRecordModal textarea,
  .onboardingCard input,
  .onboardingCard select,
  .onboardingCard textarea{font-size:16px!important}

  .phone button,
  .membershipDialog button,
  .editRecordModal button,
  .onboardingCard button{font-size:16px!important}

  .phone .pill,
  .phone [class*="badge" i],
  .phone [class*="tag" i],
  .membershipDialog .pill,
  .onboardingCard .pill{font-size:12.5px!important}

  .phone section [class*="row" i] span,
  .phone section [class*="list" i] span,
  .phone section [class*="grid" i] span,
  .phone section [class*="item" i] span,
  .phone section [class*="row" i] small,
  .phone section [class*="list" i] small,
  .phone section [class*="grid" i] small,
  .phone section [class*="item" i] small{
    font-size:14px!important;
  }

  .phone section [class*="row" i] b,
  .phone section [class*="list" i] b,
  .phone section [class*="grid" i] b,
  .phone section [class*="item" i] b{font-size:16px!important}

  .phone section .bigline span{font-size:16px!important}
  .phone section .bigline b{font-size:19px!important}
  .phone section .stat span,
  .phone section .stat .tiny{font-size:14px!important}
  .phone section .stat b{font-size:21px!important}
  .phone section [class*="total" i] span{font-size:14px!important}
  .phone section [class*="total" i] b{font-size:20px!important}

  #bottomNav button{font-size:13px!important}
  #navRecallButton{font-size:14px!important}
  .phone .budgetHubNav button,
  .phone .assetSubTabs button,
  .phone [class*="tabs" i] button,
  .phone [class*="tab" i] button{font-size:15px!important}
  .phone .budgetHubNav button small{font-size:13px!important}
  .phone .top select,
  .phone .top button{font-size:13px!important}
}