/* BILLingsly readability v2
   Strong ID-aware overrides for legacy component rules that use tiny !important sizes. */

@media (min-width:900px){
  /* Every major application screen uses normal desktop-sized text. */
  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) :is(div,p,span,small,label,li,a,td,th){
    font-size:14px!important;
    line-height:1.5!important;
  }

  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) :is(b,strong){
    font-size:16px!important;
    line-height:1.4!important;
  }

  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) button{
    font-size:16px!important;
    line-height:1.3!important;
    min-height:44px;
  }

  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) :is(input,select,textarea){
    font-size:16px!important;
    line-height:1.4!important;
  }

  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) h1{
    font-size:34px!important;
    line-height:1.12!important;
  }

  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) h2{
    font-size:24px!important;
    line-height:1.2!important;
  }

  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) h3{
    font-size:20px!important;
    line-height:1.25!important;
  }

  /* Secondary copy may be smaller, but never microscopic. */
  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) :is(.tiny,.note,.sub,small,[class*="meta" i],[class*="note" i],[class*="hint" i],[class*="status" i],[class*="caption" i],[class*="eyebrow" i],[class*="source" i],[class*="disclosure" i],[class*="helper" i],[class*="visibility" i]){
    font-size:13px!important;
    line-height:1.5!important;
  }

  /* Labels should read like labels, not legal fine print. */
  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) label{
    font-size:14px!important;
    line-height:1.4!important;
  }

  /* Pills, badges and tags remain compact but legible. */
  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) :is(.pill,[class*="badge" i],[class*="tag" i]){
    font-size:12.5px!important;
    line-height:1.3!important;
  }

  /* Money and summary values need stronger hierarchy. */
  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) :is([class*="total" i],[class*="amount" i],[class*="balance" i],[class*="value" i]) b,
  html body .phone :is(
    #home,#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,
    #allAssetsPage,#allBillsPage,#more,#plans,#loans,#personalDetails,#premiumDetails,
    #legalCenter,#promoCodes,#settingsPanel
  ) .bigline b{
    font-size:20px!important;
  }

  /* The screenshot failure: these old rules were explicitly forcing 8px. */
  html body .phone #aichat .conciergeRealLifePrompts button{
    font-size:16px!important;
    line-height:1.35!important;
    min-height:48px!important;
    padding:11px 12px!important;
    font-weight:650!important;
  }
  html body .phone #aichat .conciergeTierNote,
  html body .phone #aichat .conciergeIntro{
    font-size:14px!important;
    line-height:1.5!important;
  }
  html body .phone #aichat .conciergeChatCard label{
    font-size:14px!important;
  }
  html body .phone #aichat .conciergeChatCard textarea{
    font-size:16px!important;
  }

  /* Other known legacy micro-components. */
  html body .phone #budget .assetSubTabs button,
  html body .phone #legalCenter .legalTabs button,
  html body .phone #plans .planPolicyButtons button,
  html body .phone #duedates .dueReminderButtons button,
  html body .phone #allBillsPage .allBillRow button{
    font-size:15px!important;
    line-height:1.3!important;
  }

  html body .phone #budget :is(.savedAssetName,.savedAssetNumbers,.savedAssetVisibility,.savedSpendingName,.savedSpendingAmount) :is(span,b),
  html body .phone #allAssetsPage :is(.allAssetTotals,.allAssetGroup) :is(span,b),
  html body .phone #allBillsPage .allBillRow :is(span,b),
  html body .phone #duedates :is(.dueBillName,.dueBillDate,.dueBillAmount,.dueReminderStatus){
    font-size:14px!important;
    line-height:1.4!important;
  }

  html body .phone #budget :is(.savedAssetNumbers,.allAssetTotals) b,
  html body .phone #allAssetsPage .allAssetTotals b,
  html body .phone #allBillsPage .allBillRow b{
    font-size:17px!important;
  }

  /* Submit/add actions should be as readable as other buttons. */
  html body .phone :is(#budget,#household,#whatif,#forecasting,#subscriptions,#credit,#loans) :is(.submitAssetBtn,.submitSpendingBtn,.savedDeleteBtn,.deleteAction,.budgetAddToggle,.billingslyAddAction){
    font-size:16px!important;
    line-height:1.3!important;
  }

  /* Bottom navigation stays compact, but not tiny. */
  html body .phone #bottomNav button{
    font-size:13px!important;
    line-height:1.25!important;
  }
}

/* Mobile also gets a hard floor so the same legacy 7–9px rules do not return. */
@media (max-width:899px){
  html body .phone #aichat .conciergeRealLifePrompts button{font-size:14px!important;min-height:46px!important}
  html body .phone :is(#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,#more,#plans,#loans,#legalCenter) :is(.tiny,.note,small,[class*="meta" i],[class*="status" i]){font-size:12px!important}
  html body .phone :is(#budget,#aichat,#forecasting,#subscriptions,#credit,#household,#whatif,#duedates,#more,#plans,#loans,#legalCenter) button{font-size:14px!important}
}