/* qPokoy narrow desktop layout.
   Desktop remains desktop. Layout adapts to the actual analytics container width. */

@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics{
    container-type:inline-size;
    container-name:qp-analytics;
  }

  @container qp-analytics (max-width:900px){
    /* YEAR */
    #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      grid-template-rows:auto !important;
      gap:12px !important;
      align-items:stretch !important;
    }

    #incomeAnalytics:not(.is-monthly) .annual-total-card{
      grid-area:auto !important;
      grid-column:1 / -1 !important;
      grid-row:1 !important;
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      min-height:238px !important;
      height:auto !important;
      max-height:none !important;
      box-sizing:border-box !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card{
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      min-height:112px !important;
      height:auto !important;
      max-height:none !important;
      box-sizing:border-box !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best{
      grid-area:auto !important;
      grid-column:1 !important;
      grid-row:2 !important;
    }
    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average{
      grid-area:auto !important;
      grid-column:2 !important;
      grid-row:2 !important;
    }
    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-worst{
      grid-area:auto !important;
      grid-column:1 !important;
      grid-row:3 !important;
    }
    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth{
      grid-area:auto !important;
      grid-column:2 !important;
      grid-row:3 !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-body{
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
    }

    #incomeAnalytics:not(.is-monthly) .analytics-card-body > span{
      white-space:normal !important;
      overflow:visible !important;
      text-overflow:clip !important;
      word-break:normal !important;
    }

    /* Year categories: two useful columns instead of four squeezed columns. */
    #incomeAnalytics:not(.is-monthly) #analyticsCategories.analytics-category-panels{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:12px !important;
    }

    #incomeAnalytics:not(.is-monthly) #analyticsCategories > .analytics-category-panel{
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      box-sizing:border-box !important;
    }

    #incomeAnalytics:not(.is-monthly) #analyticsCategories .analytics-category-panel-value{
      max-width:100% !important;
      overflow:visible !important;
      text-overflow:clip !important;
      white-space:nowrap !important;
      font-size:21px !important;
    }

    /* MONTH */
    #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-cards{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      grid-template-rows:auto !important;
      gap:12px !important;
      align-items:stretch !important;
    }

    #incomeAnalytics.is-monthly #monthlyTotalCard{
      grid-area:auto !important;
      grid-column:1 / -1 !important;
      grid-row:1 !important;
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      min-height:238px !important;
      height:auto !important;
      max-height:none !important;
      box-sizing:border-box !important;
    }

    #incomeAnalytics.is-monthly .monthly-summary-card{
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      min-height:112px !important;
      height:auto !important;
      max-height:none !important;
      box-sizing:border-box !important;
    }

    #incomeAnalytics.is-monthly .monthly-summary-best{
      grid-area:auto !important;
      grid-column:1 !important;
      grid-row:2 !important;
    }
    #incomeAnalytics.is-monthly .monthly-summary-average{
      grid-area:auto !important;
      grid-column:2 !important;
      grid-row:2 !important;
    }
    #incomeAnalytics.is-monthly #monthlyGrowthCard{
      grid-area:auto !important;
      grid-column:1 !important;
      grid-row:3 !important;
    }
    #incomeAnalytics.is-monthly #monthlyYearGrowthCard{
      grid-area:auto !important;
      grid-column:2 !important;
      grid-row:3 !important;
    }

    #incomeAnalytics.is-monthly .monthly-summary-card-body,
    #incomeAnalytics.is-monthly .monthly-summary-card .monthly-summary-card-body{
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
    }

    #incomeAnalytics.is-monthly .monthly-summary-card-label,
    #incomeAnalytics.is-monthly .monthly-summary-card-body > span{
      white-space:normal !important;
      overflow:visible !important;
      text-overflow:clip !important;
      word-break:normal !important;
    }

    #incomeAnalytics.is-monthly #monthlyAnalyticsCategories.monthly-category-panels{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:12px !important;
    }

    #incomeAnalytics.is-monthly #monthlyAnalyticsCategories > .monthly-category-card{
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      box-sizing:border-box !important;
    }

    #incomeAnalytics.is-monthly #monthlyAnalyticsCategories .monthly-category-value{
      max-width:100% !important;
      overflow:visible !important;
      text-overflow:clip !important;
      white-space:nowrap !important;
      font-size:21px !important;
    }

    #incomeAnalytics:not(.is-monthly) #analyticsCategories > .analytics-category-panel,
    #incomeAnalytics.is-monthly #monthlyAnalyticsCategories > .monthly-category-card{
      grid-template-columns:44px minmax(0,min(150px,calc(100% - 108px))) 44px !important;
      justify-content:start !important;
    }
  }

  @container qp-analytics (max-width:620px){
    /* Narrow desktop stays in two columns. Compact typography instead of stacking 1x8. */
    #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards,
    #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-cards{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:10px !important;
    }

    #incomeAnalytics:not(.is-monthly) .annual-total-card,
    #incomeAnalytics.is-monthly #monthlyTotalCard{
      grid-column:1 / -1 !important;
      grid-row:1 !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best,
    #incomeAnalytics.is-monthly .monthly-summary-best{
      grid-column:1 !important;
      grid-row:2 !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average,
    #incomeAnalytics.is-monthly .monthly-summary-average{
      grid-column:2 !important;
      grid-row:2 !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-worst,
    #incomeAnalytics.is-monthly #monthlyGrowthCard{
      grid-column:1 !important;
      grid-row:3 !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth,
    #incomeAnalytics.is-monthly #monthlyYearGrowthCard{
      grid-column:2 !important;
      grid-row:3 !important;
    }

    #incomeAnalytics:not(.is-monthly) #analyticsCategories.analytics-category-panels,
    #incomeAnalytics.is-monthly #monthlyAnalyticsCategories.monthly-category-panels{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:10px !important;
    }

    #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card,
    #incomeAnalytics.is-monthly .monthly-summary-card{
      min-height:104px !important;
      padding:13px 14px !important;
    }

    #incomeAnalytics:not(.is-monthly) .analytics-card-body > span,
    #incomeAnalytics.is-monthly .monthly-summary-card-body > span,
    #incomeAnalytics.is-monthly .monthly-summary-card-label{
      font-size:12px !important;
      line-height:1.2 !important;
    }

    #incomeAnalytics:not(.is-monthly) .analytics-card-body > strong,
    #incomeAnalytics:not(.is-monthly) .analytics-card-body > b,
    #incomeAnalytics.is-monthly .monthly-summary-card-body > strong,
    #incomeAnalytics.is-monthly .monthly-summary-card-body > b{
      font-size:22px !important;
      line-height:1.05 !important;
    }

    #incomeAnalytics.is-monthly .monthly-corner-percent{
      font-size:12px !important;
      padding:6px 9px !important;
    }

    #incomeAnalytics:not(.is-monthly) .analytics-category-panel-name,
    #incomeAnalytics.is-monthly .monthly-category-name{
      font-size:13px !important;
    }

    #incomeAnalytics:not(.is-monthly) #analyticsCategories .analytics-category-panel-value,
    #incomeAnalytics.is-monthly #monthlyAnalyticsCategories .monthly-category-value{
      font-size:18px !important;
    }

    #incomeAnalytics:not(.is-monthly) #analyticsCategories > .analytics-category-panel,
    #incomeAnalytics.is-monthly #monthlyAnalyticsCategories > .monthly-category-card{
      grid-template-columns:40px minmax(0,min(132px,calc(100% - 92px))) 40px !important;
      gap:8px !important;
      padding-left:12px !important;
      padding-right:12px !important;
    }
  }
}

/* Desktop analytics Year label v20: only the Month/Year block shows plain year text. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-mode-period .analytics-year-switcher{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:0 !important;
    grid-template-columns:none !important;
    pointer-events:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-mode-period .analytics-year-switcher > button{
    display:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-mode-period #analyticsYearControl{
    display:inline !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text) !important;
    font:inherit !important;
    font-size:24px !important;
    font-weight:700 !important;
    line-height:1 !important;
    cursor:default !important;
  }
}



/* Desktop site header period controls v23: reduced 15% from v22. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income #incomeMonthSwitcher,
  #income .income-chart-year-bottom > .income-chart-year-switcher{
    grid-template-columns:33px minmax(80px,auto) 33px !important;
    min-height:37px !important;
    border-radius:11px !important;
  }

  #income #incomeMonthSwitcher > button,
  #income .income-chart-year-bottom > .income-chart-year-switcher > button{
    width:33px !important;
    height:33px !important;
    border-radius:9px !important;
    font-size:25px !important;
  }

  #income #monthSwitcherName,
  #income .income-chart-year-bottom > .income-chart-year-switcher > span{
    padding:0 4px !important;
    font-size:15px !important;
  }
}

/* DEV87: a narrow desktop window with a mouse is not a mobile touch device.
   Avoid the fixed 220px + 340px dashboard tracks overflowing 320–620px viewports. */
@media (max-width:620px) and (hover:hover) and (pointer:fine){
  #income .income-top{
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px;
  }
  #income .income-top > .income-month-block,
  #income .income-top > .income-month-chart,
  #income .income-top > #incomeRecent{
    min-width:0 !important;
    max-width:100%;
  }
  #income .income-top > #incomeRecent{
    grid-column:1/-1 !important;
  }
  #income .income-recent-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* DEV88: fine-pointer narrow-window analytics remains desktop, but must fit
   inside the real 320–620px viewport (never activate touch-only controls). */
@media (max-width:620px) and (hover:hover) and (pointer:fine){
  /* Keep the settings button fully within the analytics shell. The period
     controls move to the second row rather than squeezing the gear out. */
  #incomeAnalytics:not(.is-settings-open) > .analytics-mode-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 38px !important;
    grid-template-areas:"tabs gear" "period period" !important;
    align-items:center !important;
    column-gap:8px !important;
    row-gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    margin-bottom:14px !important;
  }
  #incomeAnalytics:not(.is-settings-open) > .analytics-mode-row > .analytics-mode-tabs{
    grid-area:tabs !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    flex:none !important;
  }
  #incomeAnalytics:not(.is-settings-open) > .analytics-mode-row > #analyticsSettingsToggle{
    grid-area:gear !important;
    justify-self:end !important;
    position:relative !important;
    inset:auto !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    margin:0 !important;
  }
  #incomeAnalytics:not(.is-settings-open) > .analytics-mode-row > .analytics-mode-period{
    grid-area:period !important;
    min-width:0 !important;
    justify-self:start !important;
    margin:0 !important;
  }

  /* Two ultra-narrow columns left the Best category with a 25px text area.
     Use full-width desktop cards, with explicit placement overriding the
     earlier fixed two-column container-query rules. */
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-cards,
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:none !important;
    grid-auto-rows:auto !important;
    min-width:0 !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-cards > .monthly-summary-card,
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-cards > #monthlyTotalCard,
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards > .analytics-card{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-width:0 !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyTotalCard{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    order:-1 !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyGrowthCard,
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyYearGrowthCard{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
  }

  /* Icon and percentage are kept at the top, the complete value now has
     the card's usable width instead of calc(100% - 72/86px). */
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-cards > .monthly-summary-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:8px !important;
    height:auto !important;
    min-height:128px !important;
    padding:12px !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-card .monthly-summary-card-icon{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    flex:0 0 36px !important;
    align-self:flex-start !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-card .monthly-summary-card-body,
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyGrowthCard .monthly-summary-card-body,
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyYearGrowthCard .monthly-summary-card-body{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-card .monthly-summary-card-label{
    display:flex !important;
    flex-wrap:wrap !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-card .monthly-summary-card-label > span:first-child{
    min-width:0 !important;
    flex:0 1 auto !important;
    white-space:normal !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-card .monthly-best-category-row{
    max-width:100% !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-card-body > b,
  #incomeAnalytics.is-monthly:not(.is-settings-open) .monthly-summary-card-body > strong,
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyBestCategory,
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyGrowthNote,
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyYearGrowthNote{
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  #incomeAnalytics.is-monthly:not(.is-settings-open) #monthlyAnalyticsCategories.monthly-category-panels,
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) #analyticsCategories.analytics-category-panels{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* DEV89: annual Average at 320px desktop: release the icon's track and
   allow the complete monetary value to wrap inside the card. */
@media (max-width:340px) and (hover:hover) and (pointer:fine){
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards > .analytics-card.analytics-card-average{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    height:auto !important;
    min-height:112px !important;
    padding:12px !important;
    gap:0 !important;
  }
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-icon,
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-mini-step{
    display:none !important;
  }
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    grid-template-columns:none !important;
  }
  #incomeAnalytics:not(.is-monthly):not(.is-settings-open) > .analytics-cards > .analytics-card.analytics-card-average #analyticsAverageActive{
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    font-size:20px !important;
    line-height:1.12 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}