/* qPokoy monthly side-card alignment override */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics.is-monthly .monthly-summary-card{align-items:center!important} #incomeAnalytics.is-monthly .monthly-summary-card .monthly-summary-card-body{ width:calc(100% - 72px)!important;max-width:calc(100% - 72px)!important; margin:0!important;padding:0!important;display:block!important;position:relative!important } #incomeAnalytics.is-monthly .monthly-summary-card .monthly-summary-card-label, #incomeAnalytics.is-monthly .monthly-summary-card .monthly-summary-card-body>span{ display:block!important;margin:0 0 4px!important; color:color-mix(in srgb,var(--text) 72%,var(--text-muted))!important; font-size:12px!important;line-height:1.25!important } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row{ display:block!important;margin:0!important;line-height:1!important } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row>strong{ display:inline-block!important;margin:0!important;font-size:20px!important; font-weight:650!important;line-height:1.1!important } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body>b{ display:block!important;margin:6px 0 0!important;font-size:22px!important; font-weight:700!important;line-height:1.05!important } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body>strong{ display:block!important;margin:5px 0 0!important;font-size:25px!important; font-weight:700!important;line-height:1.05!important } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body>small{ display:block!important;max-width:150px!important;margin:5px 0 0!important; font-size:10px!important;line-height:1.25!important } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body, #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body{ display:block!important;width:calc(100% - 86px)!important;max-width:calc(100% - 86px)!important; margin:0!important;padding:0!important } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label, #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-label{ display:block!important;max-width:none!important;margin:0 0 4px!important } #incomeAnalytics.is-monthly #monthlyGrowthNote, #incomeAnalytics.is-monthly #monthlyYearGrowthNote{ margin:5px 0 0!important;font-size:22px!important;font-weight:700!important;line-height:1.05!important } } /* Average card info control: keep the title and info button on one line. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-label{ display:inline-flex !important; align-items:center !important; gap:5px !important; width:max-content !important; max-width:100% !important; margin:0 0 4px !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-info{ display:grid !important; flex:0 0 16px !important; } } /* Best category percentage: pin to the card corner like comparison badges. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics.is-monthly .monthly-summary-best{ position:relative!important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body{ position:static!important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-share{ position:absolute!important; z-index:4!important; top:14px!important; right:16px!important; margin:0!important; } } /* Average card tooltip: restore desktop hover display after the base desktop hide rule. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-tooltip{ display:none !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-info:hover + .monthly-summary-tooltip{ display:block !important; } } /* Shared annual/month category compact mode: TOP-3 + grouped remainder. */ #incomeAnalytics .analytics-categories-toggle{ display:none; } @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics .analytics-categories-toggle:not([hidden]){ width:max-content !important; min-height:34px !important; margin:10px auto 0 !important; padding:7px 14px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:1px solid color-mix(in srgb,var(--border) 90%,var(--primary) 10%) !important; border-radius:10px !important; background:color-mix(in srgb,var(--panel) 94%,var(--primary) 6%) !important; color:color-mix(in srgb,var(--text) 78%,var(--text-muted)) !important; box-shadow:none !important; font-size:11px !important; font-weight:600 !important; line-height:1 !important; cursor:pointer !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panels.is-collapsed, #incomeAnalytics.is-monthly .monthly-category-panels.is-collapsed{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panels.is-expanded, #incomeAnalytics.is-monthly .monthly-category-panels.is-expanded{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.category-grouped{ --category:#64748b !important; --category-soft:rgba(100,116,139,.08) !important; cursor:default !important; border-color:color-mix(in srgb,#64748b 24%,var(--border)) !important; background:color-mix(in srgb,var(--panel) 97%,#64748b 3%) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.category-grouped:hover{ transform:none !important; border-color:color-mix(in srgb,#64748b 24%,var(--border)) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.category-grouped .analytics-category-panel-icon, #incomeAnalytics:not(.is-monthly) .analytics-category-panel.category-grouped .analytics-category-panel-share{ color:#94a3b8 !important; border-color:rgba(148,163,184,.16) !important; background:rgba(148,163,184,.07) !important; } #incomeAnalytics.is-monthly .monthly-category-card.category-grouped{ --monthly-category:#64748b !important; --monthly-category-soft:rgba(100,116,139,.08) !important; border-color:color-mix(in srgb,#64748b 24%,var(--border)) !important; background:color-mix(in srgb,var(--panel) 97%,#64748b 3%) !important; } #incomeAnalytics.is-monthly .monthly-category-card.category-grouped .monthly-category-icon, #incomeAnalytics.is-monthly .monthly-category-card.category-grouped .monthly-category-share{ color:#94a3b8 !important; border-color:rgba(148,163,184,.16) !important; background:rgba(148,163,184,.07) !important; } } /* Desktop category palette: restrained financial tones only. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ /* Annual categories */ #incomeAnalytics:not(.is-monthly) .analytics-category-panel.salary{ --category:#3f8f72 !important; --category-soft:rgba(63,143,114,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.advance{ --category:#4b78a8 !important; --category-soft:rgba(75,120,168,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.other{ --category:#5f7187 !important; --category-soft:rgba(95,113,135,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.pension{ --category:#667085 !important; --category-soft:rgba(102,112,133,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped){ border-color:color-mix(in srgb,var(--category) 32%,var(--border)) !important; background:color-mix(in srgb,var(--panel) 98%,var(--category) 2%) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped)::after{ background:var(--category-soft) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped) .analytics-category-panel-icon{ color:var(--category) !important; background:color-mix(in srgb,var(--category) 10%,transparent) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped) .analytics-category-panel-share{ color:var(--category) !important; background:color-mix(in srgb,var(--category) 7%,transparent) !important; border-color:color-mix(in srgb,var(--category) 20%,transparent) !important; } /* Monthly categories */ #incomeAnalytics.is-monthly .monthly-category-card.salary, #incomeAnalytics.is-monthly .monthly-category-card.teal{ --monthly-category:#3f8f72 !important; --monthly-category-soft:rgba(63,143,114,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.advance, #incomeAnalytics.is-monthly .monthly-category-card.blue{ --monthly-category:#4b78a8 !important; --monthly-category-soft:rgba(75,120,168,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.other, #incomeAnalytics.is-monthly .monthly-category-card.violet{ --monthly-category:#5f7187 !important; --monthly-category-soft:rgba(95,113,135,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.pension, #incomeAnalytics.is-monthly .monthly-category-card.amber{ --monthly-category:#667085 !important; --monthly-category-soft:rgba(102,112,133,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.cyan{ --monthly-category:#3f7f86 !important; --monthly-category-soft:rgba(63,127,134,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.slate{ --monthly-category:#607286 !important; --monthly-category-soft:rgba(96,114,134,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card:not(.category-grouped){ border-color:color-mix(in srgb,var(--monthly-category) 32%,var(--border)) !important; background:color-mix(in srgb,var(--panel) 98%,var(--monthly-category) 2%) !important; } #incomeAnalytics.is-monthly .monthly-category-card:not(.category-grouped)::after{ background:var(--monthly-category-soft) !important; } #incomeAnalytics.is-monthly .monthly-category-card:not(.category-grouped) .monthly-category-icon{ color:var(--monthly-category) !important; background:color-mix(in srgb,var(--monthly-category) 10%,transparent) !important; } #incomeAnalytics.is-monthly .monthly-category-card:not(.category-grouped) .monthly-category-share{ color:var(--monthly-category) !important; background:color-mix(in srgb,var(--monthly-category) 7%,transparent) !important; border-color:color-mix(in srgb,var(--monthly-category) 20%,transparent) !important; } } /* Category expand/collapse control: same chevron icon button as the home header. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics .analytics-categories-toggle:not([hidden]){ width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important; margin:10px auto 0 !important; padding:0 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:1px solid var(--border) !important; border-radius:9px !important; background:var(--panel-muted) !important; color:var(--text-muted) !important; box-shadow:none !important; font:inherit !important; cursor:pointer !important; } #incomeAnalytics .analytics-categories-toggle:not([hidden]):hover{ color:var(--text) !important; background:var(--active) !important; border-color:var(--border) !important; transform:none !important; } #incomeAnalytics .analytics-categories-toggle svg{ width:16px !important; height:16px !important; fill:none !important; stroke:currentColor !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; transition:transform .18s ease !important; } #incomeAnalytics .analytics-categories-toggle[aria-expanded="false"] svg{ transform:rotate(0deg) !important; } #incomeAnalytics .analytics-categories-toggle[aria-expanded="true"] svg{ transform:rotate(180deg) !important; } } /* Category card geometry: fixed four-column grid and label-aligned amounts. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics:not(.is-monthly) .analytics-category-panels, #incomeAnalytics:not(.is-monthly) .analytics-category-panels.is-collapsed, #incomeAnalytics:not(.is-monthly) .analytics-category-panels.is-expanded, #incomeAnalytics.is-monthly .monthly-category-panels, #incomeAnalytics.is-monthly .monthly-category-panels.is-collapsed, #incomeAnalytics.is-monthly .monthly-category-panels.is-expanded{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-value{ grid-column:2 / 4 !important; grid-row:2 !important; justify-self:start !important; } #incomeAnalytics.is-monthly .monthly-category-value{ grid-column:2 / 4 !important; grid-row:2 !important; justify-self:start !important; } } /* Category card content: larger icon and tighter comparison-card spacing. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ /* Annual categories */ #incomeAnalytics:not(.is-monthly) .analytics-category-panel{ grid-template-columns:44px minmax(0,1fr) auto !important; grid-template-rows:22px 24px !important; column-gap:10px !important; row-gap:2px !important; align-content:center !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon{ grid-column:1 !important; grid-row:1 / 3 !important; align-self:center !important; width:44px !important; height:44px !important; min-width:44px !important; flex:0 0 44px !important; border-radius:12px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon svg{ width:23px !important; height:23px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-name{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; margin:0 !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-value{ grid-column:2 / 4 !important; grid-row:2 !important; align-self:start !important; margin:1px 0 0 !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share{ grid-column:3 !important; grid-row:1 !important; align-self:start !important; } /* Monthly categories */ #incomeAnalytics.is-monthly .monthly-category-card{ grid-template-columns:44px minmax(0,1fr) auto !important; grid-template-rows:22px 24px !important; column-gap:10px !important; row-gap:2px !important; align-content:center !important; } #incomeAnalytics.is-monthly .monthly-category-icon{ grid-column:1 !important; grid-row:1 / 3 !important; align-self:center !important; width:44px !important; height:44px !important; min-width:44px !important; border-radius:12px !important; } #incomeAnalytics.is-monthly .monthly-category-icon svg{ width:23px !important; height:23px !important; } #incomeAnalytics.is-monthly .monthly-category-name{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; margin:0 !important; } #incomeAnalytics.is-monthly .monthly-category-value{ grid-column:2 / 4 !important; grid-row:2 !important; align-self:start !important; margin:1px 0 0 !important; } #incomeAnalytics.is-monthly .monthly-category-share{ grid-column:3 !important; grid-row:1 !important; align-self:start !important; } } /* Mobile analytics parity after PC finalization. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics{ width:100% !important; min-width:0 !important; margin:0 0 14px !important; padding:16px !important; border-radius:22px !important; overflow:visible !important; } /* Period switch: one compact touch row. */ #incomeAnalytics .analytics-mode-row{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:10px !important; margin:0 0 14px !important; } #incomeAnalytics .analytics-mode-row .analytics-mode-tabs{ width:100% !important; max-width:190px !important; margin:0 !important; padding:3px !important; } #incomeAnalytics .analytics-mode-tab{ min-height:38px !important; height:38px !important; padding:0 10px !important; font-size:13px !important; touch-action:manipulation !important; } #incomeAnalytics .analytics-mode-period{ min-width:0 !important; min-height:40px !important; justify-self:end !important; } #incomeAnalytics .analytics-mode-period #monthlyAnalyticsTitle{ max-width:108px !important; overflow:hidden !important; font-size:20px !important; line-height:1 !important; text-overflow:ellipsis !important; } #incomeAnalytics .analytics-year-switcher{ grid-template-columns:36px minmax(54px,auto) 36px !important; min-height:38px !important; height:38px !important; border-radius:11px !important; } #incomeAnalytics .analytics-year-switcher > button{ width:36px !important; height:36px !important; opacity:1 !important; border-radius:9px !important; font-size:22px !important; touch-action:manipulation !important; } #incomeAnalytics #analyticsYearControl{ padding:0 4px !important; font-size:19px !important; line-height:36px !important; font-weight:700 !important; } /* The new hero cards own the period total; remove the old duplicate totals. */ #incomeAnalytics:not(.is-monthly) > .analytics-head, #incomeAnalytics.is-monthly .monthly-analytics-head{ display:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards, #incomeAnalytics.is-monthly .monthly-summary-cards{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin:0 0 10px !important; } /* Annual total: use the current PC bar-chart content instead of the old ring. */ #incomeAnalytics:not(.is-monthly) .annual-total-card{ order:-2 !important; width:100% !important; min-width:0 !important; min-height:224px !important; height:224px !important; max-height:224px !important; padding:14px !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:8px !important; overflow:hidden !important; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border)) !important; border-radius:18px !important; background:var(--panel) !important; box-shadow:none !important; } #incomeAnalytics:not(.is-monthly) .annual-total-card::after{ display:none !important; } #incomeAnalytics:not(.is-monthly) .annual-total-ring{ display:none !important; } #incomeAnalytics:not(.is-monthly) .annual-total-desktop{ min-width:0 !important; min-height:0 !important; display:flex !important; flex:1 1 auto !important; flex-direction:column !important; } #incomeAnalytics:not(.is-monthly) .annual-total-desktop-head{ min-height:38px !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:10px !important; } #incomeAnalytics:not(.is-monthly) .annual-total-copy{ min-width:0 !important; } #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong{ display:block !important; max-width:100% !important; margin:0 !important; overflow:hidden !important; color:var(--text) !important; font-size:30px !important; font-weight:780 !important; line-height:1 !important; letter-spacing:-.04em !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .annual-total-growth{ flex:0 0 auto !important; } #incomeAnalytics:not(.is-monthly) #annualHeroGrowth{ min-width:60px !important; padding:6px 8px !important; display:block !important; border:1px solid color-mix(in srgb,var(--success) 30%,transparent) !important; border-radius:9px !important; background:color-mix(in srgb,var(--success) 16%,transparent) !important; color:var(--success) !important; font-size:12px !important; font-weight:750 !important; line-height:1 !important; text-align:center !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) #annualHeroGrowth.negative{ border-color:color-mix(in srgb,var(--danger) 30%,transparent) !important; background:color-mix(in srgb,var(--danger) 14%,transparent) !important; color:var(--danger) !important; } #incomeAnalytics:not(.is-monthly) #annualHeroGrowth.neutral{ border-color:color-mix(in srgb,var(--text-muted) 24%,transparent) !important; background:color-mix(in srgb,var(--text-muted) 7%,transparent) !important; color:var(--text-muted) !important; } #incomeAnalytics:not(.is-monthly) .annual-total-bars{ flex:1 1 auto !important; min-height:78px !important; margin-top:6px !important; padding:0 1px !important; display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)) !important; align-items:end !important; gap:3px !important; border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent) !important; } #incomeAnalytics:not(.is-monthly) .annual-total-bar{ width:100% !important; height:var(--bar-height,4%) !important; min-height:4px !important; border-radius:4px 4px 1px 1px !important; background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 72%,white),color-mix(in srgb,var(--primary) 88%,black)) !important; opacity:.82 !important; } #incomeAnalytics:not(.is-monthly) .annual-total-months{ margin-top:4px !important; display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)) !important; gap:3px !important; color:var(--text-muted) !important; font-size:6px !important; line-height:1 !important; text-align:center !important; } #incomeAnalytics:not(.is-monthly) .annual-total-meta{ width:100% !important; margin-top:2px !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; } #incomeAnalytics:not(.is-monthly) .annual-total-meta > span{ min-width:0 !important; min-height:43px !important; padding:5px 8px !important; display:grid !important; grid-template-columns:24px minmax(0,1fr) !important; grid-template-rows:auto auto !important; column-gap:7px !important; align-items:center !important; border:1px solid color-mix(in srgb,var(--border) 90%,transparent) !important; border-radius:10px !important; background:var(--panel-muted) !important; text-align:left !important; } #incomeAnalytics:not(.is-monthly) .annual-total-meta-icon{ grid-column:1 !important; grid-row:1 / 3 !important; width:19px !important; height:19px !important; display:block !important; fill:none !important; stroke:color-mix(in srgb,var(--primary) 62%,var(--text-muted)) !important; stroke-width:1.8 !important; } #incomeAnalytics:not(.is-monthly) .annual-total-meta b{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; font-size:14px !important; line-height:1 !important; } #incomeAnalytics:not(.is-monthly) .annual-total-meta small{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; margin-top:2px !important; font-size:7.5px !important; line-height:1.1 !important; white-space:nowrap !important; } /* Month total: the new day graph is now visible on phones too. */ #incomeAnalytics.is-monthly .monthly-total-card{ order:-2 !important; width:100% !important; min-width:0 !important; min-height:226px !important; height:226px !important; max-height:226px !important; padding:14px !important; display:flex !important; flex-direction:column !important; gap:7px !important; overflow:hidden !important; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border)) !important; border-radius:18px !important; background:var(--panel) !important; box-shadow:none !important; } #incomeAnalytics.is-monthly #monthlyHeroTotal{ position:absolute !important; top:0 !important; left:0 !important; max-width:calc(100% - 76px) !important; margin:0 !important; overflow:hidden !important; color:var(--text) !important; font-size:30px !important; font-weight:780 !important; line-height:1 !important; letter-spacing:-.04em !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly #monthlyHeroGrowth{ min-width:60px !important; padding:6px 8px !important; display:block !important; border:1px solid color-mix(in srgb,var(--success) 30%,transparent) !important; border-radius:9px !important; background:color-mix(in srgb,var(--success) 16%,transparent) !important; color:var(--success) !important; font-size:12px !important; font-weight:750 !important; line-height:1 !important; text-align:center !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly #monthlyHeroGrowth.negative{ border-color:color-mix(in srgb,var(--danger) 30%,transparent) !important; background:color-mix(in srgb,var(--danger) 14%,transparent) !important; color:var(--danger) !important; } #incomeAnalytics.is-monthly #monthlyHeroGrowth.neutral{ border-color:color-mix(in srgb,var(--text-muted) 24%,transparent) !important; background:color-mix(in srgb,var(--text-muted) 7%,transparent) !important; color:var(--text-muted) !important; } #incomeAnalytics.is-monthly .monthly-total-bars.monthly-income-spikes{ position:relative !important; flex:1 1 auto !important; min-height:86px !important; padding:0 3px !important; display:block !important; overflow:visible !important; border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent) !important; background: linear-gradient(to bottom, transparent 32%, color-mix(in srgb,var(--border) 32%,transparent) 32.5%, transparent 33%, transparent 64%, color-mix(in srgb,var(--border) 24%,transparent) 64.5%, transparent 65%) !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-svg{ position:absolute !important; inset:0 3px !important; width:calc(100% - 6px) !important; height:100% !important; overflow:visible !important; pointer-events:none !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-area{ fill:color-mix(in srgb,var(--primary) 10%,transparent) !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-line{ fill:none !important; stroke:color-mix(in srgb,var(--primary) 84%,white) !important; stroke-width:2 !important; vector-effect:non-scaling-stroke !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-guide{ stroke:color-mix(in srgb,var(--primary) 42%,transparent) !important; stroke-width:1 !important; stroke-dasharray:2.5 3.5 !important; vector-effect:non-scaling-stroke !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker{ position:absolute !important; left:var(--spike-x) !important; top:var(--spike-y) !important; z-index:2 !important; width:7px !important; height:7px !important; border:1px solid color-mix(in srgb,var(--primary) 66%,white) !important; border-radius:50% !important; background:var(--primary) !important; box-shadow:0 0 0 2px color-mix(in srgb,var(--panel) 86%,transparent) !important; transform:translate(-50%,-50%) !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.is-highlight{ width:8px !important; height:8px !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label{ position:absolute !important; left:50% !important; bottom:10px !important; display:grid !important; justify-items:center !important; gap:1px !important; transform:translateX(-50%) !important; white-space:nowrap !important; pointer-events:none !important; } #incomeAnalytics.is-monthly .monthly-total-days{ flex:0 0 10px !important; display:grid !important; grid-template-columns:repeat(var(--monthly-days,31),minmax(0,1fr)) !important; gap:1px !important; color:var(--text-muted) !important; font-size:5.5px !important; line-height:1 !important; text-align:center !important; } #incomeAnalytics.is-monthly .monthly-total-meta{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; } #incomeAnalytics.is-monthly .monthly-total-meta > span{ min-width:0 !important; min-height:43px !important; padding:5px 8px !important; display:grid !important; grid-template-columns:24px minmax(0,1fr) !important; grid-template-rows:auto auto !important; column-gap:7px !important; align-items:center !important; border:1px solid color-mix(in srgb,var(--border) 90%,transparent) !important; border-radius:10px !important; background:var(--panel-muted) !important; } #incomeAnalytics.is-monthly .monthly-total-meta-icon{ grid-column:1 !important; grid-row:1 / 3 !important; width:19px !important; height:19px !important; fill:none !important; stroke:color-mix(in srgb,var(--primary) 62%,var(--text-muted)) !important; stroke-width:1.8 !important; } #incomeAnalytics.is-monthly .monthly-total-meta b{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; font-size:14px !important; line-height:1 !important; } #incomeAnalytics.is-monthly .monthly-total-meta small{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; margin-top:2px !important; font-size:7.5px !important; line-height:1.1 !important; white-space:nowrap !important; } /* Metric cards: same compact hierarchy as the finalized desktop version. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card, #incomeAnalytics.is-monthly .monthly-summary-card{ width:100% !important; min-width:0 !important; min-height:108px !important; height:auto !important; padding:14px !important; display:grid !important; grid-template-columns:44px minmax(0,1fr) !important; align-items:center !important; gap:12px !important; border-radius:16px !important; box-shadow:none !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon, #incomeAnalytics.is-monthly .monthly-summary-card-icon{ width:44px !important; height:44px !important; min-width:44px !important; margin:0 !important; border-radius:12px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-body, #incomeAnalytics.is-monthly .monthly-summary-card-body{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body, #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "label amount" "detail amount" !important; column-gap:10px !important; row-gap:5px !important; align-items:center !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span, #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > span{ grid-area:label !important; margin:0 !important; font-size:12px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong, #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row{ grid-area:detail !important; margin:0 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b, #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > b{ grid-area:amount !important; align-self:center !important; justify-self:end !important; margin:0 !important; font-size:22px !important; line-height:1 !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong, #incomeAnalytics.is-monthly .monthly-best-category-row strong{ font-size:18px !important; line-height:1.1 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body, #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body, #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body, #incomeAnalytics.is-monthly .monthly-summary-growth .monthly-summary-card-body{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "label value" "note value" !important; column-gap:10px !important; row-gap:5px !important; align-items:center !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > span, #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > span, #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-label, #incomeAnalytics.is-monthly .monthly-summary-growth .monthly-summary-card-label{ grid-area:label !important; margin:0 !important; font-size:12px !important; line-height:1.2 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > small, #incomeAnalytics.is-monthly .monthly-summary-growth .monthly-summary-card-body > small{ grid-area:note !important; margin:0 !important; max-width:none !important; font-size:10px !important; line-height:1.2 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > strong, #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body > strong{ grid-area:value !important; justify-self:end !important; margin:0 !important; font-size:22px !important; line-height:1 !important; white-space:nowrap !important; } /* Percentage badges are part of the card on mobile too. */ #incomeAnalytics:not(.is-monthly) .analytics-card-best, #incomeAnalytics:not(.is-monthly) .analytics-card-worst, #incomeAnalytics.is-monthly #monthlyGrowthCard, #incomeAnalytics.is-monthly #monthlyYearGrowthCard{ position:relative !important; } #incomeAnalytics:not(.is-monthly) .annual-month-share, #incomeAnalytics.is-monthly .monthly-corner-percent{ position:absolute !important; z-index:4 !important; top:12px !important; right:12px !important; min-width:42px !important; height:27px !important; margin:0 !important; padding:0 8px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; font-size:11px !important; font-weight:650 !important; line-height:1 !important; box-sizing:border-box !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .annual-month-share[hidden], #incomeAnalytics.is-monthly .monthly-corner-percent.is-empty{ display:none !important; } #incomeAnalytics:not(.is-monthly) .annual-month-share-best, #incomeAnalytics.is-monthly #monthlyGrowthCard.positive .monthly-corner-percent, #incomeAnalytics.is-monthly #monthlyYearGrowthCard.positive .monthly-corner-percent{ border:1px solid color-mix(in srgb,var(--success) 30%,transparent) !important; background:color-mix(in srgb,var(--success) 9%,transparent) !important; color:var(--success) !important; } #incomeAnalytics:not(.is-monthly) .annual-month-share-worst, #incomeAnalytics.is-monthly #monthlyGrowthCard.negative .monthly-corner-percent, #incomeAnalytics.is-monthly #monthlyYearGrowthCard.negative .monthly-corner-percent{ border:1px solid color-mix(in srgb,var(--danger) 30%,transparent) !important; background:color-mix(in srgb,var(--danger) 9%,transparent) !important; color:var(--danger) !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard.neutral .monthly-corner-percent, #incomeAnalytics.is-monthly #monthlyYearGrowthCard.neutral .monthly-corner-percent{ border:1px solid color-mix(in srgb,var(--text-muted) 26%,transparent) !important; background:color-mix(in srgb,var(--text-muted) 8%,transparent) !important; color:var(--text-muted) !important; } /* Category cards: compact desktop-style rows on a phone. */ #incomeAnalytics:not(.is-monthly) .analytics-category-panels, #incomeAnalytics.is-monthly .monthly-category-panels{ grid-template-columns:1fr !important; gap:10px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel, #incomeAnalytics.is-monthly .monthly-category-card{ min-height:96px !important; height:96px !important; padding:13px 14px !important; display:grid !important; grid-template-columns:40px minmax(0,1fr) auto !important; grid-template-rows:22px 24px !important; column-gap:10px !important; row-gap:2px !important; align-content:center !important; align-items:center !important; border-radius:15px !important; box-shadow:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon, #incomeAnalytics.is-monthly .monthly-category-icon{ grid-column:1 !important; grid-row:1 / 3 !important; align-self:center !important; width:40px !important; height:40px !important; min-width:40px !important; margin:0 !important; border-radius:11px !important; } } @media(max-width:340px ) and (pointer:coarse){ #incomeAnalytics{ padding:14px !important; } #incomeAnalytics .analytics-mode-row{ grid-template-columns:1fr !important; } #incomeAnalytics .analytics-mode-period{ justify-self:start !important; } #incomeAnalytics .analytics-mode-row .analytics-mode-tabs{ max-width:none !important; } #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong, #incomeAnalytics.is-monthly #monthlyHeroTotal{ font-size:27px !important; } } /* Mobile analytics card correction from Samsung screenshots. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Summary cards: stable horizontal composition with room for large amounts. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card, #incomeAnalytics.is-monthly .monthly-summary-card{ min-height:94px !important; height:auto !important; padding:12px !important; grid-template-columns:40px minmax(0,1fr) !important; gap:10px !important; border-radius:16px !important; background:color-mix(in srgb,var(--panel) 95%,var(--primary) 5%) !important; box-shadow:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon, #incomeAnalytics.is-monthly .monthly-summary-card-icon{ width:40px !important; min-width:40px !important; height:40px !important; border-radius:11px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon svg, #incomeAnalytics.is-monthly .monthly-summary-card-icon svg{ width:21px !important; height:21px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body{ min-width:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "label label" "detail amount" !important; column-gap:8px !important; row-gap:5px !important; align-items:center !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > span{ grid-area:label !important; margin:0 !important; font-size:11px !important; line-height:1.15 !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row{ grid-area:detail !important; min-width:0 !important; margin:0 !important; display:flex !important; align-items:center !important; gap:6px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row strong{ min-width:0 !important; max-width:100% !important; overflow:hidden !important; font-size:16px !important; line-height:1.1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-best-share{ flex:0 0 auto !important; min-width:38px !important; height:25px !important; padding:0 7px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:8px !important; font-size:10px !important; line-height:1 !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > b{ grid-area:amount !important; justify-self:end !important; margin:0 !important; font-size:20px !important; line-height:1 !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body, #incomeAnalytics.is-monthly .monthly-summary-growth .monthly-summary-card-body, #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body, #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body{ min-width:0 !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-label, #incomeAnalytics.is-monthly .monthly-summary-growth .monthly-summary-card-label{ min-width:0 !important; font-size:11px !important; line-height:1.2 !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > strong{ font-size:20px !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-corner-percent{ top:10px !important; right:10px !important; min-width:40px !important; height:25px !important; padding:0 7px !important; font-size:10px !important; } /* Annual best/worst cards: month and amount share one line instead of fighting for width. */ #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span{ grid-area:label !important; margin:0 !important; font-size:11px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{ grid-area:period !important; min-width:0 !important; margin:0 !important; overflow:hidden !important; font-size:17px !important; line-height:1.1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b{ grid-area:amount !important; justify-self:end !important; margin:0 !important; font-size:20px !important; line-height:1 !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .annual-month-share{ top:10px !important; right:10px !important; min-width:40px !important; height:25px !important; padding:0 7px !important; font-size:10px !important; } /* Category cards: icon, name/value and percent form one clean compact row. */ #incomeAnalytics:not(.is-monthly) .analytics-category-panel, #incomeAnalytics.is-monthly .monthly-category-card{ min-height:82px !important; height:82px !important; padding:10px 11px !important; grid-template-columns:40px minmax(0,1fr) auto !important; grid-template-rows:20px 24px !important; column-gap:9px !important; row-gap:3px !important; align-content:center !important; border-radius:15px !important; background:color-mix(in srgb,var(--panel) 94%,var(--monthly-category,var(--category,var(--primary))) 6%) !important; box-shadow:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon, #incomeAnalytics.is-monthly .monthly-category-icon{ grid-column:1 !important; grid-row:1 / 3 !important; width:40px !important; min-width:40px !important; height:40px !important; align-self:center !important; border-radius:11px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon svg, #incomeAnalytics.is-monthly .monthly-category-icon svg{ width:20px !important; height:20px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-name, #incomeAnalytics.is-monthly .monthly-category-name{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; align-self:end !important; margin:0 !important; overflow:hidden !important; font-size:12px !important; line-height:1.1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-value, #incomeAnalytics.is-monthly .monthly-category-value{ grid-column:2 / 4 !important; grid-row:2 !important; align-self:start !important; justify-self:start !important; margin:0 !important; font-size:19px !important; line-height:1 !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share, #incomeAnalytics.is-monthly .monthly-category-share{ position:static !important; grid-column:3 !important; grid-row:1 !important; align-self:start !important; justify-self:end !important; min-width:39px !important; height:25px !important; padding:0 7px !important; border-radius:8px !important; font-size:10px !important; } /* Month graph labels: small readable badges; JS now avoids adjacent labels. */ #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label{ bottom:9px !important; gap:1px !important; padding:3px 4px !important; border:1px solid color-mix(in srgb,var(--border) 70%,transparent) !important; border-radius:6px !important; background:color-mix(in srgb,var(--panel) 88%,transparent) !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label b{ font-size:7.5px !important; line-height:1 !important; text-shadow:none !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label small{ font-size:5.5px !important; line-height:1 !important; text-shadow:none !important; } /* Annual chart: never mix the bars into black on a dark phone theme. */ } /* Mobile analytics layout v12: centered hero totals, larger graph area, inline settings and desktop-style comparison cards. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Compact analytics toolbar: only Month/Year and Settings. */ #incomeAnalytics{ position:relative !important; } #incomeAnalytics .analytics-mode-row{ display:grid !important; grid-template-columns:minmax(0,1fr) 44px !important; gap:10px !important; align-items:center !important; margin-bottom:12px !important; } #incomeAnalytics .analytics-mode-row .analytics-mode-tabs{ width:100% !important; max-width:none !important; margin:0 !important; } #incomeAnalytics .analytics-mode-period{ display:none !important; } #incomeAnalytics .analytics-settings-toggle{ width:44px !important; min-width:44px !important; max-width:44px !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important; padding:0 !important; display:grid !important; place-items:center !important; border:1px solid var(--border) !important; border-radius:10px !important; background:var(--panel-muted) !important; color:var(--text-muted) !important; box-shadow:none !important; transform:none !important; touch-action:manipulation !important; } #incomeAnalytics .analytics-settings-toggle svg{ width:19px !important; height:19px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } #incomeAnalytics .analytics-settings-close-icon{ display:none !important; } #incomeAnalytics .analytics-settings-toggle.is-active{ position:absolute !important; z-index:52 !important; top:12px !important; right:12px !important; color:var(--text) !important; background:var(--panel-muted) !important; } #incomeAnalytics .analytics-settings-toggle.is-active .analytics-settings-gear-icon{ display:none !important; } #incomeAnalytics .analytics-settings-toggle.is-active .analytics-settings-close-icon{ display:block !important; } #incomeAnalytics .analytics-settings-host[hidden]{ display:none !important; } #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings{ display:block !important; width:100% !important; min-width:0 !important; max-width:none !important; min-height:0 !important; margin:0 !important; padding:0 !important; } #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings .qp-settings-tabs{ margin-top:0 !important; } /* Monthly hero: center amount, lower graph, remove meta boxes. */ #incomeAnalytics.is-monthly .monthly-total-card{ min-height:238px !important; height:238px !important; max-height:238px !important; padding:14px !important; gap:4px !important; } #incomeAnalytics.is-monthly .monthly-total-head{ position:relative !important; min-height:58px !important; height:58px !important; display:block !important; } #incomeAnalytics.is-monthly #monthlyHeroTotal{ position:static !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; display:block !important; overflow:hidden !important; color:var(--text) !important; font-size:30px !important; font-weight:780 !important; line-height:1 !important; letter-spacing:-.04em !important; text-align:center !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-total-growth{ position:absolute !important; top:34px !important; right:0 !important; } #incomeAnalytics.is-monthly .monthly-total-bars.monthly-income-spikes{ flex:1 1 auto !important; min-height:126px !important; margin-top:2px !important; } #incomeAnalytics.is-monthly .monthly-total-meta{ display:none !important; } #incomeAnalytics.is-monthly .monthly-total-days{ margin-top:4px !important; } /* Annual hero: same centered amount and larger chart area. */ #incomeAnalytics:not(.is-monthly) .annual-total-card{ min-height:228px !important; height:228px !important; max-height:228px !important; padding:14px !important; gap:4px !important; } #incomeAnalytics:not(.is-monthly) .annual-total-desktop-head{ position:relative !important; min-height:58px !important; height:58px !important; display:block !important; } #incomeAnalytics:not(.is-monthly) .annual-total-copy{ width:100% !important; max-width:none !important; text-align:center !important; } #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong{ width:100% !important; max-width:none !important; margin:0 !important; display:block !important; overflow:hidden !important; font-size:30px !important; line-height:1 !important; text-align:center !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .annual-total-growth{ position:absolute !important; top:34px !important; right:0 !important; } #incomeAnalytics:not(.is-monthly) .annual-total-bars{ flex:1 1 auto !important; min-height:126px !important; margin-top:2px !important; } #incomeAnalytics:not(.is-monthly) .annual-total-meta{ display:none !important; } #incomeAnalytics:not(.is-monthly) .annual-total-months{ margin-top:4px !important; } /* Comparison cards: mobile now follows the desktop composition. Difference amount is large on the left, percent badge stays on the right. */ #incomeAnalytics.is-monthly #monthlyGrowthCard, #incomeAnalytics.is-monthly #monthlyYearGrowthCard{ min-height:104px !important; height:104px !important; padding:12px !important; grid-template-columns:40px minmax(0,1fr) !important; gap:10px !important; align-items:center !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body, #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body{ min-width:0 !important; padding-right:46px !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-areas: "label" "amount" !important; row-gap:7px !important; align-content:center !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label, #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-label{ grid-area:label !important; min-width:0 !important; max-width:none !important; margin:0 !important; display:flex !important; align-items:center !important; gap:5px !important; color:var(--text-muted) !important; font-size:11px !important; line-height:1.2 !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote, #incomeAnalytics.is-monthly #monthlyYearGrowthNote{ grid-area:amount !important; max-width:100% !important; margin:0 !important; display:flex !important; align-items:center !important; gap:7px !important; overflow:hidden !important; color:var(--text) !important; font-size:22px !important; font-weight:750 !important; line-height:1 !important; letter-spacing:-.025em !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-variant-numeric:tabular-nums !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote::before, #incomeAnalytics.is-monthly #monthlyYearGrowthNote::before{ content:none !important; display:none !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote::after, #incomeAnalytics.is-monthly #monthlyYearGrowthNote::after{ content:"" !important; width:17px !important; height:17px !important; flex:0 0 17px !important; background:var(--text-muted) !important; -webkit-mask:center/contain no-repeat !important; mask:center/contain no-repeat !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard.negative #monthlyGrowthNote::after, #incomeAnalytics.is-monthly #monthlyYearGrowthCard.negative #monthlyYearGrowthNote::after{ background:var(--danger) !important; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7l6 6 4-4 6 6M15 15h5v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7l6 6 4-4 6 6M15 15h5v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard.positive #monthlyGrowthNote::after, #incomeAnalytics.is-monthly #monthlyYearGrowthCard.positive #monthlyYearGrowthNote::after{ background:var(--success) !important; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17l6-6 4 4 6-6M15 9h5v5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17l6-6 4 4 6-6M15 9h5v5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard.neutral #monthlyGrowthNote::after, #incomeAnalytics.is-monthly #monthlyYearGrowthCard.neutral #monthlyYearGrowthNote::after{ width:15px !important; height:2px !important; flex-basis:15px !important; border-radius:999px !important; background:var(--text-muted) !important; -webkit-mask:none !important; mask:none !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-corner-percent, #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-corner-percent{ top:10px !important; right:10px !important; min-width:42px !important; height:27px !important; padding:0 8px !important; font-size:11px !important; } } @media(max-width:340px ) and (pointer:coarse){ #incomeAnalytics.is-monthly #monthlyHeroTotal, #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong{ font-size:27px !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote, #incomeAnalytics.is-monthly #monthlyYearGrowthNote{ font-size:20px !important; } } /* Mobile settings natural height and smart spike labels. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Settings should size itself to the selected settings tab, not to the full analytics dashboard. */ #incomeAnalytics.is-settings-open{ overflow:visible !important; } #incomeAnalytics.is-settings-open > .analytics-head, #incomeAnalytics.is-settings-open > .analytics-cards, #incomeAnalytics.is-settings-open > .monthly-analytics, #incomeAnalytics.is-settings-open > .analytics-category-panels, #incomeAnalytics.is-settings-open > .analytics-categories-toggle{ display:none !important; } #incomeAnalytics.is-settings-open > .analytics-mode-row{ min-height:0 !important; height:0 !important; margin:0 !important; overflow:visible !important; } #incomeAnalytics.is-settings-open > .analytics-mode-row .analytics-mode-tabs, #incomeAnalytics.is-settings-open > .analytics-mode-row .analytics-mode-period{ display:none !important; } #incomeAnalytics.is-settings-open .analytics-settings-host{ position:relative !important; z-index:50 !important; inset:auto !important; display:block !important; width:100% !important; min-width:0 !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:48px 0 0 !important; overflow:visible !important; border-radius:0 !important; background:transparent !important; box-sizing:border-box !important; } #incomeAnalytics.is-settings-open .analytics-settings-host #settings.analytics-inline-settings{ height:auto !important; min-height:0 !important; max-height:none !important; } #incomeAnalytics.is-settings-open .analytics-settings-toggle.is-active{ top:10px !important; right:10px !important; } /* Graph value labels normally sit above their point. Only very high peaks move the label below the point to protect the centered total. */ #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label{ top:auto !important; bottom:10px !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.label-below .monthly-spike-label{ top:10px !important; bottom:auto !important; } } /* Mobile inline settings order and label-above fix. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* The settings host follows the toolbar in the fixed DOM layout. */ #incomeAnalytics.is-settings-open .analytics-settings-host{ order:2 !important; position:relative !important; inset:auto !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:10px 0 0 !important; overflow:visible !important; background:transparent !important; } #incomeAnalytics.is-settings-open .analytics-mode-row{ height:auto !important; min-height:38px !important; margin:0 0 2px !important; overflow:visible !important; } #incomeAnalytics.is-settings-open .analytics-mode-row .analytics-mode-tabs{ display:grid !important; } /* Labels are always above the point: anchor at marker center and translate upward. */ #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label, #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.label-below .monthly-spike-label{ top:50% !important; bottom:auto !important; transform:translate(-50%,calc(-100% - 11px)) !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.edge-left .monthly-spike-label{ transform:translate(-12%,calc(-100% - 11px)) !important; } #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.edge-right .monthly-spike-label{ transform:translate(-88%,calc(-100% - 11px)) !important; } } /* Mobile Month/Year analytics cleanup v35. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* All analytics cards use the same base fill as "Последние доходы". */ #incomeAnalytics:not(.is-monthly) .annual-total-card, #incomeAnalytics.is-monthly .monthly-total-card, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card, #incomeAnalytics.is-monthly .monthly-summary-card, #incomeAnalytics:not(.is-monthly) .analytics-category-panel, #incomeAnalytics.is-monthly .monthly-category-card{ background:var(--panel) !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card::before, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card::after, #incomeAnalytics.is-monthly .monthly-summary-card::before, #incomeAnalytics.is-monthly .monthly-summary-card::after, #incomeAnalytics:not(.is-monthly) .analytics-category-panel::before, #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after, #incomeAnalytics.is-monthly .monthly-category-card::before, #incomeAnalytics.is-monthly .monthly-category-card::after{ background:none !important; opacity:0 !important; box-shadow:none !important; } /* Main totals: keep them centered as a block, then nudge visually 10px left. */ #incomeAnalytics.is-monthly #monthlyHeroTotal, #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong{ transform:translateX(-10px) !important; } /* Hero percent badge: top-right, vertically centered against the total amount. */ #incomeAnalytics.is-monthly .monthly-total-growth, #incomeAnalytics:not(.is-monthly) .annual-total-growth{ top:2px !important; right:0 !important; bottom:auto !important; } /* Best-category share belongs in the card corner. */ /* Comparison amount sits on the right, like "Средний доход в день". */ #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body, #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body{ padding-right:0 !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label, #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-label{ padding-right:52px !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote, #incomeAnalytics.is-monthly #monthlyYearGrowthNote{ justify-self:end !important; max-width:none !important; } /* Mobile analytics no longer shows hidden-info controls/tooltips. */ #incomeAnalytics .monthly-summary-info, #incomeAnalytics .monthly-summary-tooltip, #incomeAnalytics .annual-growth-info, #incomeAnalytics .annual-growth-tooltip{ display:none !important; } } /* Mobile Month/Year analytics corrections v36. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Best category: badge is anchored to the card corner, label keeps clear space. */ #incomeAnalytics.is-monthly .monthly-summary-best{ position:relative !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > span{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; padding-right:52px !important; } /* Comparison cards: amount only, without the trend arrow decoration. */ #incomeAnalytics.is-monthly #monthlyGrowthNote::before, #incomeAnalytics.is-monthly #monthlyGrowthNote::after, #incomeAnalytics.is-monthly #monthlyYearGrowthNote::before, #incomeAnalytics.is-monthly #monthlyYearGrowthNote::after{ content:none !important; display:none !important; width:0 !important; height:0 !important; flex:0 0 0 !important; margin:0 !important; background:none !important; -webkit-mask:none !important; mask:none !important; } /* Annual best/worst: month on the left, amount aligned to the right like other cards. */ #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body{ width:100% !important; max-width:none !important; min-width:0 !important; padding-right:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "label label" "period amount" !important; column-gap:10px !important; row-gap:5px !important; align-items:center !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span{ grid-area:label !important; box-sizing:border-box !important; width:100% !important; padding-right:50px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{ grid-area:period !important; justify-self:start !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b{ grid-area:amount !important; justify-self:end !important; align-self:center !important; margin:0 !important; text-align:right !important; white-space:nowrap !important; } /* Annual category cards: exactly the same base fill as recent-income cards. */ #incomeAnalytics:not(.is-monthly) .analytics-category-panel, #incomeAnalytics:not(.is-monthly) .analytics-category-panel:hover, #incomeAnalytics:not(.is-monthly) .analytics-category-panel:active, #incomeAnalytics:not(.is-monthly) .analytics-category-panel:focus, #incomeAnalytics:not(.is-monthly) .analytics-category-panel:focus-visible{ background:var(--panel) !important; background-color:var(--panel) !important; background-image:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel::before, #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{ content:none !important; display:none !important; background:none !important; background-image:none !important; box-shadow:none !important; opacity:0 !important; } } /* Mobile annual category surface correction v37. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics:not(.is-monthly) .analytics-category-panel{ -webkit-appearance:none !important; appearance:none !important; box-shadow:none !important; } html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel, html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:hover, html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:active, html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:focus, html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:focus-visible, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:hover, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:active, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:focus, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:focus-visible{ background:#00061c !important; background-color:#00061c !important; background-image:none !important; } html:not([data-theme="dark"]) #incomeAnalytics:not(.is-monthly) .analytics-category-panel{ background:var(--panel) !important; background-color:var(--panel) !important; background-image:none !important; } } /* Mobile month Variant 7 v42: asymmetric summary + two-column category grid. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics.is-monthly .monthly-summary-cards{ display:grid !important; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important; grid-template-areas: "hero hero" "best average" "best growth" "year year" !important; gap:8px !important; align-items:stretch !important; margin:0 0 10px !important; } /* Keep the graph exactly as the hero block, only place it in the new grid. */ #incomeAnalytics.is-monthly #monthlyTotalCard{ grid-area:hero !important; order:0 !important; } /* Large accent card, matching Variant 7. */ #incomeAnalytics.is-monthly .monthly-summary-best{ grid-area:best !important; min-width:0 !important; min-height:216px !important; height:216px !important; padding:14px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:10px !important; overflow:hidden !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body{ position:static !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 0 42px !important; display:block !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > span{ width:100% !important; margin:0 0 5px !important; padding:0 !important; color:var(--text-muted) !important; font-size:10px !important; line-height:1.15 !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row{ display:block !important; margin:0 !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row > strong{ display:block !important; max-width:100% !important; margin:0 !important; overflow:hidden !important; font-size:18px !important; font-weight:750 !important; line-height:1.08 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > b{ display:block !important; margin:8px 0 0 !important; font-size:23px !important; font-weight:780 !important; line-height:1 !important; letter-spacing:-.035em !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-share{ position:absolute !important; z-index:4 !important; top:auto !important; right:auto !important; bottom:14px !important; left:14px !important; min-width:42px !important; height:25px !important; padding:0 7px !important; margin:0 !important; font-size:10px !important; } #incomeAnalytics.is-monthly .monthly-summary-best::before{ content:"" !important; position:absolute !important; z-index:1 !important; right:15px !important; bottom:14px !important; display:block !important; width:6px !important; height:22px !important; border-radius:2px 2px 0 0 !important; background:color-mix(in srgb,var(--success) 88%,transparent) !important; box-shadow: -9px 5px 0 color-mix(in srgb,var(--success) 76%,transparent), -18px 10px 0 color-mix(in srgb,var(--success) 64%,transparent), -27px 14px 0 color-mix(in srgb,var(--success) 52%,transparent), -36px 17px 0 color-mix(in srgb,var(--success) 40%,transparent) !important; opacity:.9 !important; pointer-events:none !important; } #incomeAnalytics.is-monthly .monthly-summary-best::after{ content:none !important; display:none !important; } /* Two compact secondary cards beside the best category. */ #incomeAnalytics.is-monthly .monthly-summary-average{ grid-area:average !important; min-width:0 !important; min-height:104px !important; height:104px !important; padding:11px !important; display:grid !important; grid-template-columns:34px minmax(0,1fr) !important; grid-template-rows:34px minmax(0,1fr) !important; column-gap:7px !important; row-gap:4px !important; align-items:start !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-icon{ grid-column:1 !important; grid-row:1 !important; width:34px !important; min-width:34px !important; height:34px !important; border-radius:10px !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body{ grid-column:1 / 3 !important; grid-row:2 !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:3px !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body > strong{ margin:0 !important; overflow:hidden !important; font-size:17px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard{ grid-area:growth !important; min-width:0 !important; min-height:104px !important; height:104px !important; padding:11px !important; display:grid !important; grid-template-columns:34px minmax(0,1fr) !important; grid-template-rows:34px minmax(0,1fr) !important; column-gap:7px !important; row-gap:4px !important; align-items:start !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-icon{ grid-column:1 !important; grid-row:1 !important; width:34px !important; min-width:34px !important; height:34px !important; border-radius:10px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label{ grid-area:label !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 42px 0 0 !important; overflow:hidden !important; color:var(--text-muted) !important; font-size:9px !important; line-height:1.1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote{ grid-area:amount !important; justify-self:start !important; max-width:100% !important; margin:0 !important; overflow:hidden !important; font-size:16px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-corner-percent{ top:9px !important; right:9px !important; min-width:38px !important; height:24px !important; padding:0 6px !important; font-size:9px !important; } /* Preserve the second comparison without repeating another full-height card. */ #incomeAnalytics.is-monthly #monthlyYearGrowthCard{ grid-area:year !important; min-width:0 !important; min-height:78px !important; height:78px !important; padding:11px 12px !important; display:grid !important; grid-template-columns:36px minmax(0,1fr) !important; gap:9px !important; align-items:center !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 48px 0 0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"label amount" !important; column-gap:8px !important; align-items:center !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-label{ grid-area:label !important; min-width:0 !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; color:var(--text-muted) !important; font-size:10px !important; line-height:1.15 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthNote{ grid-area:amount !important; justify-self:end !important; max-width:none !important; margin:0 !important; overflow:visible !important; font-size:17px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-corner-percent{ top:8px !important; right:9px !important; min-width:38px !important; height:24px !important; padding:0 6px !important; font-size:9px !important; } /* Variant 7 category section: compact cards in two columns. */ #incomeAnalytics.is-monthly .monthly-category-panels{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; align-items:stretch !important; } #incomeAnalytics.is-monthly .monthly-category-panels::before{ content:"Все категории" !important; grid-column:1 / -1 !important; display:block !important; margin:3px 2px 1px !important; color:var(--text) !important; font-size:12px !important; font-weight:720 !important; line-height:1.15 !important; } #incomeAnalytics.is-monthly .monthly-category-card{ min-width:0 !important; min-height:108px !important; height:108px !important; padding:10px !important; display:grid !important; grid-template-columns:34px minmax(0,1fr) !important; grid-template-rows:34px 17px 24px !important; column-gap:7px !important; row-gap:3px !important; align-content:center !important; overflow:hidden !important; border-radius:14px !important; background:var(--panel) !important; } #incomeAnalytics.is-monthly .monthly-category-card::after{ content:none !important; display:none !important; } #incomeAnalytics.is-monthly .monthly-category-icon{ grid-column:1 !important; grid-row:1 !important; width:34px !important; min-width:34px !important; height:34px !important; border-radius:10px !important; } #incomeAnalytics.is-monthly .monthly-category-share{ position:static !important; grid-column:2 !important; grid-row:1 !important; align-self:start !important; justify-self:end !important; min-width:37px !important; height:23px !important; padding:0 6px !important; border-radius:8px !important; font-size:9px !important; } #incomeAnalytics.is-monthly .monthly-category-name{ grid-column:1 / 3 !important; grid-row:2 !important; align-self:end !important; min-width:0 !important; margin:0 !important; overflow:hidden !important; font-size:11px !important; font-weight:650 !important; line-height:1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-category-value{ grid-column:1 / 3 !important; grid-row:3 !important; align-self:start !important; justify-self:start !important; margin:0 !important; overflow:hidden !important; font-size:18px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; text-overflow:ellipsis !important; white-space:nowrap !important; } } @media(max-width:340px ) and (pointer:coarse){ #incomeAnalytics.is-monthly .monthly-summary-cards{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important; } #incomeAnalytics.is-monthly .monthly-summary-best{ min-height:208px !important; height:208px !important; padding:12px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-share{ left:12px !important; bottom:12px !important; } #incomeAnalytics.is-monthly .monthly-summary-best::before{ right:13px !important; bottom:12px !important; } #incomeAnalytics.is-monthly .monthly-category-card{ padding:9px !important; } #incomeAnalytics.is-monthly .monthly-category-value{ font-size:16px !important; } } /* Mobile month readability + 4 category limit v43. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Remove the generated section heading. */ #incomeAnalytics.is-monthly .monthly-category-panels::before{ content:none !important; display:none !important; } /* Larger typography, smaller icons: keep Variant 7 but give text the space. */ #incomeAnalytics.is-monthly .monthly-summary-best{ gap:8px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-icon{ width:34px !important; min-width:34px !important; height:34px !important; border-radius:10px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-icon svg{ width:18px !important; height:18px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > span{ margin-bottom:7px !important; font-size:13px !important; line-height:1.2 !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-category-row > strong{ font-size:20px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > b{ margin-top:9px !important; font-size:25px !important; } #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-share{ font-size:11px !important; } #incomeAnalytics.is-monthly .monthly-summary-average, #incomeAnalytics.is-monthly #monthlyGrowthCard{ grid-template-columns:28px minmax(0,1fr) !important; grid-template-rows:28px minmax(0,1fr) !important; column-gap:6px !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-icon, #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-icon{ width:28px !important; min-width:28px !important; height:28px !important; border-radius:8px !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-icon svg, #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-icon svg{ width:16px !important; height:16px !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-label, #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label{ font-size:12px !important; line-height:1.18 !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-corner-percent{ font-size:10px !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard{ grid-template-columns:30px minmax(0,1fr) !important; gap:8px !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-icon{ width:30px !important; min-width:30px !important; height:30px !important; border-radius:8px !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-icon svg{ width:17px !important; height:17px !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-label{ font-size:12px !important; line-height:1.2 !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthNote{ font-size:19px !important; } #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-corner-percent{ font-size:10px !important; } /* Category cards: four collapsed, two-column grid, long names stay on one line. */ #incomeAnalytics.is-monthly .monthly-category-panels{ margin-top:2px !important; } #incomeAnalytics.is-monthly .monthly-category-card{ min-height:106px !important; height:106px !important; padding:10px 11px !important; grid-template-columns:28px minmax(0,1fr) !important; grid-template-rows:28px 19px 25px !important; column-gap:7px !important; row-gap:4px !important; } #incomeAnalytics.is-monthly .monthly-category-share{ min-width:38px !important; height:24px !important; font-size:10px !important; } #incomeAnalytics.is-monthly .monthly-category-name{ max-width:100% !important; font-size:13px !important; line-height:1.1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics.is-monthly .monthly-category-value{ max-width:100% !important; font-size:20px !important; line-height:1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* Same simple reveal control pattern as "Последние доходы": arrow only. */ #incomeAnalytics.is-monthly .analytics-categories-toggle:not([hidden]){ width:100% !important; min-width:100% !important; height:30px !important; min-height:30px !important; margin:5px 0 0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--text-muted) !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent !important; touch-action:manipulation !important; } #incomeAnalytics.is-monthly .analytics-categories-toggle:not([hidden]):hover, #incomeAnalytics.is-monthly .analytics-categories-toggle:not([hidden]):active{ border:0 !important; background:transparent !important; box-shadow:none !important; transform:none !important; } #incomeAnalytics.is-monthly .analytics-categories-toggle svg{ width:20px !important; height:20px !important; fill:none !important; stroke:currentColor !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; transform:rotate(0deg) !important; transition:transform .18s ease !important; } #incomeAnalytics.is-monthly .analytics-categories-toggle[aria-expanded="true"] svg{ transform:rotate(180deg) !important; } } /* Mobile month card alignment v44. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Previous-month comparison: icon and percent badge share one top line. Keep the amount inside the narrow right-hand card. */ #incomeAnalytics.is-monthly #monthlyGrowthCard{ position:relative !important; grid-template-columns:1fr !important; grid-template-rows:1fr !important; padding:10px 9px 10px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-icon{ position:absolute !important; z-index:3 !important; top:9px !important; left:9px !important; width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important; margin:0 !important; border-radius:8px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-icon svg{ width:14px !important; height:14px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-corner-percent{ top:9px !important; right:9px !important; height:24px !important; min-height:24px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body{ grid-column:1 !important; grid-row:1 !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:31px 0 0 !important; align-self:stretch !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-areas: "label" "amount" !important; row-gap:5px !important; align-content:center !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote{ width:100% !important; max-width:100% !important; min-width:0 !important; justify-self:start !important; margin:0 !important; overflow:hidden !important; font-size:17px !important; line-height:1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* Best-category amount: 5px left and 5px lower. */ /* Average card: remove the icon and center the text block cleanly. */ #incomeAnalytics.is-monthly .monthly-summary-average{ display:flex !important; align-items:center !important; justify-content:center !important; padding:12px !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-icon{ display:none !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body{ width:100% !important; height:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:7px !important; text-align:center !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-label{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; color:var(--text-muted) !important; font-size:12px !important; line-height:1.2 !important; text-align:center !important; white-space:normal !important; } #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body > strong{ margin:0 !important; font-size:20px !important; line-height:1 !important; text-align:center !important; white-space:nowrap !important; } } /* Mobile month micro-alignment v45. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Best category amount: another 5px left and 5px down from v44. */ /* Previous-month comparison: hard-align icon box and percent badge to one top baseline. */ #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-icon, #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-corner-percent{ top:9px !important; height:24px !important; min-height:24px !important; box-sizing:border-box !important; transform:none !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-icon{ left:9px !important; width:24px !important; min-width:24px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-corner-percent{ right:9px !important; } /* Category title and amount: shift 5px to the right without moving the icon/badge. */ #incomeAnalytics.is-monthly .monthly-category-name, #incomeAnalytics.is-monthly .monthly-category-value{ box-sizing:border-box !important; padding-left:5px !important; } /* Category expand/collapse arrow: 5px lower. */ #incomeAnalytics.is-monthly .analytics-categories-toggle:not([hidden]){ margin-top:10px !important; } } /* Mobile previous-month topline v46: icon and percent share the exact same row. */ #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-growth-topline{ display:contents; } @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics.is-monthly #monthlyGrowthCard{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:7px !important; padding:9px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-growth-topline{ width:100% !important; height:24px !important; min-height:24px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; margin:0 !important; padding:0 !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-growth-topline .monthly-summary-card-icon, #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-growth-topline .monthly-corner-percent{ position:static !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; margin:0 !important; transform:none !important; align-self:center !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-growth-topline .monthly-summary-card-icon{ width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important; flex:0 0 24px !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-growth-topline .monthly-corner-percent{ height:24px !important; min-height:24px !important; flex:0 0 auto !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:1fr !important; grid-template-areas: "label" "amount" !important; row-gap:5px !important; align-content:start !important; } } /* Mobile category topline + summary swap v47. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Keep the mobile summary first; place the month graph directly below it. */ #incomeAnalytics.is-monthly .monthly-summary-cards{ grid-template-areas: "best growth" "best average" "hero hero" "year year" !important; } /* Category cards: make the icon behave exactly like the August-comparison icon. Icon and percentage badge use the same 24px top row and are vertically centered. */ #incomeAnalytics.is-monthly .monthly-category-card{ grid-template-columns:24px minmax(0,1fr) !important; grid-template-rows:24px 19px 25px !important; column-gap:8px !important; } #incomeAnalytics.is-monthly .monthly-category-icon, #incomeAnalytics.is-monthly .monthly-category-share{ grid-row:1 !important; align-self:center !important; box-sizing:border-box !important; transform:none !important; margin:0 !important; } #incomeAnalytics.is-monthly .monthly-category-icon{ grid-column:1 !important; width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important; border-radius:8px !important; } #incomeAnalytics.is-monthly .monthly-category-icon svg{ width:14px !important; height:14px !important; } #incomeAnalytics.is-monthly .monthly-category-share{ grid-column:2 !important; justify-self:end !important; height:24px !important; min-height:24px !important; } } /* Mobile best-category amount: align exactly like the best-month amount. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > b{ width:100% !important; max-width:100% !important; margin:9px 0 0 !important; overflow:visible !important; text-align:center !important; transform:translate(0,10px) !important; } } /* Annual worst topline is transparent to desktop layout. */ #incomeAnalytics:not(.is-monthly) .annual-worst-topline{ display:contents; } /* Mobile annual mirrors the established month design v49. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Same asymmetric card composition as Month: hero, large best card, two compact cards. */ #incomeAnalytics:not(.is-monthly) .annual-total-card{ grid-area:hero !important; order:0 !important; min-height:238px !important; height:238px !important; max-height:238px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best{ grid-area:best !important; position:relative !important; min-width:0 !important; min-height:216px !important; height:216px !important; padding:14px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:8px !important; overflow:hidden !important; border-radius:16px !important; background:var(--panel) !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-icon{ width:34px !important; min-width:34px !important; height:34px !important; border-radius:10px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-icon svg{ width:18px !important; height:18px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body{ position:static !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 0 42px !important; display:block !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span{ display:block !important; width:100% !important; margin:0 0 7px !important; padding:0 !important; color:var(--text-muted) !important; font-size:13px !important; line-height:1.2 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong{ display:block !important; max-width:100% !important; margin:0 !important; overflow:hidden !important; font-size:20px !important; font-weight:750 !important; line-height:1.08 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b{ display:block !important; margin:9px 0 0 !important; font-size:25px !important; font-weight:780 !important; line-height:1 !important; letter-spacing:-.035em !important; white-space:nowrap !important; transform:translate(-15px,10px) !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best .annual-month-share-best{ position:absolute !important; z-index:4 !important; top:auto !important; right:auto !important; bottom:14px !important; left:14px !important; min-width:42px !important; height:25px !important; padding:0 7px !important; margin:0 !important; font-size:11px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best::before{ content:"" !important; position:absolute !important; z-index:1 !important; right:15px !important; bottom:14px !important; display:block !important; width:6px !important; height:22px !important; border-radius:2px 2px 0 0 !important; background:color-mix(in srgb,var(--success) 88%,transparent) !important; box-shadow: -9px 5px 0 color-mix(in srgb,var(--success) 76%,transparent), -18px 10px 0 color-mix(in srgb,var(--success) 64%,transparent), -27px 14px 0 color-mix(in srgb,var(--success) 52%,transparent), -36px 17px 0 color-mix(in srgb,var(--success) 40%,transparent) !important; opacity:.9 !important; pointer-events:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best::after{ content:none !important; display:none !important; } /* Worst month copies the compact comparison-card topline from Month. */ #incomeAnalytics:not(.is-monthly) .analytics-card-worst{ grid-area:worst !important; min-width:0 !important; min-height:104px !important; height:104px !important; padding:9px !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:7px !important; border-radius:16px !important; background:var(--panel) !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .annual-worst-topline{ width:100% !important; height:24px !important; min-height:24px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; margin:0 !important; padding:0 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .annual-worst-topline .analytics-card-icon, #incomeAnalytics:not(.is-monthly) .analytics-card-worst .annual-worst-topline .annual-month-share{ position:static !important; inset:auto !important; margin:0 !important; transform:none !important; align-self:center !important; box-sizing:border-box !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .annual-worst-topline .analytics-card-icon{ width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important; flex:0 0 24px !important; border-radius:8px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .annual-worst-topline .analytics-card-icon svg{ width:14px !important; height:14px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .annual-worst-topline .annual-month-share{ height:24px !important; min-height:24px !important; flex:0 0 auto !important; font-size:10px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:1fr !important; grid-template-areas: "label" "period" "amount" !important; row-gap:3px !important; align-content:start !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span{ grid-area:label !important; margin:0 !important; color:var(--text-muted) !important; font-size:12px !important; line-height:1.15 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{ grid-area:period !important; min-width:0 !important; margin:0 !important; overflow:hidden !important; font-size:16px !important; line-height:1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b{ grid-area:amount !important; justify-self:start !important; margin:0 !important; overflow:hidden !important; font-size:17px !important; line-height:1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* Average month mirrors the no-icon centered average card from Month. */ #incomeAnalytics:not(.is-monthly) .analytics-card-average{ grid-area:average !important; min-width:0 !important; min-height:104px !important; height:104px !important; padding:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:16px !important; background:var(--panel) !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-icon{ display:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body{ width:100% !important; height:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:7px !important; text-align:center !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > span{ width:100% !important; margin:0 !important; color:var(--text-muted) !important; font-size:12px !important; line-height:1.2 !important; text-align:center !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > strong{ margin:0 !important; font-size:20px !important; line-height:1 !important; text-align:center !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-arrow, #incomeAnalytics:not(.is-monthly) .analytics-card-hint, #incomeAnalytics:not(.is-monthly) .analytics-mini-step{ display:none !important; } /* Keep the already-approved rule: annual dynamics card stays removed on mobile. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth{ display:none !important; } /* Annual category area now behaves and looks exactly like the Month category grid. */ #incomeAnalytics:not(.is-monthly) .analytics-grid{ display:block !important; margin:0 !important; } #incomeAnalytics:not(.is-monthly) .analytics-panel{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-panel-title{ display:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panels{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; align-items:stretch !important; margin-top:2px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel{ min-width:0 !important; min-height:106px !important; height:106px !important; padding:10px 11px !important; display:grid !important; grid-template-columns:24px minmax(0,1fr) !important; grid-template-rows:24px 19px 25px !important; column-gap:8px !important; row-gap:4px !important; align-content:center !important; overflow:hidden !important; border-radius:14px !important; background:var(--panel) !important; box-shadow:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel::before, #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{ content:none !important; display:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-body{ display:contents !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon, #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share{ grid-row:1 !important; align-self:center !important; box-sizing:border-box !important; transform:none !important; margin:0 !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon{ grid-column:1 !important; width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important; border-radius:8px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon svg{ width:14px !important; height:14px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share{ position:static !important; grid-column:2 !important; justify-self:end !important; min-width:38px !important; height:24px !important; min-height:24px !important; padding:0 6px !important; border-radius:8px !important; font-size:10px !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-name{ grid-column:1 / 3 !important; grid-row:2 !important; align-self:end !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding-left:5px !important; overflow:hidden !important; font-size:13px !important; font-weight:650 !important; line-height:1.1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel-value{ grid-column:1 / 3 !important; grid-row:3 !important; align-self:start !important; justify-self:start !important; max-width:100% !important; margin:0 !important; padding-left:5px !important; overflow:hidden !important; font-size:20px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-categories-toggle:not([hidden]){ width:100% !important; min-width:100% !important; height:30px !important; min-height:30px !important; margin:10px 0 0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--text-muted) !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent !important; touch-action:manipulation !important; } #incomeAnalytics:not(.is-monthly) .analytics-categories-toggle:not([hidden]):hover, #incomeAnalytics:not(.is-monthly) .analytics-categories-toggle:not([hidden]):active{ border:0 !important; background:transparent !important; box-shadow:none !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-categories-toggle svg{ width:20px !important; height:20px !important; fill:none !important; stroke:currentColor !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; transform:rotate(0deg) !important; transition:transform .18s ease !important; } #incomeAnalytics:not(.is-monthly) .analytics-categories-toggle[aria-expanded="true"] svg{ transform:rotate(180deg) !important; } } /* New annual comparison card is mobile-only; desktop remains unchanged. */ #incomeAnalytics:not(.is-monthly) .annual-year-compare-card{ display:none; } /* Mobile annual correction + year comparison v50. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Best month: explicitly neutralize old annual positioning so icon and text follow the same geometry as the approved Month best-category card. */ #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-body{ position:static !important; align-self:stretch !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 0 42px !important; transform:none !important; text-align:left !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-body > strong{ justify-self:auto !important; width:100% !important; margin:0 !important; padding:0 !important; text-align:left !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-body > b{ justify-self:auto !important; width:max-content !important; margin:9px 0 0 !important; padding:0 !important; text-align:left !important; transform:translate(-15px,10px) !important; } /* Worst month: clear inherited right padding/desktop alignment that caused label, month and amount to overlap. */ #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body > span, #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body > strong, #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body > b{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; justify-self:start !important; text-align:left !important; } /* Average: keep the whole amount visible inside the narrow card. */ /* Full-width annual comparison copied from the Month year-comparison card. */ #incomeAnalytics:not(.is-monthly) .annual-year-compare-card{ grid-area:compare !important; position:relative !important; min-width:0 !important; min-height:78px !important; height:78px !important; padding:11px 12px !important; display:grid !important; grid-template-columns:30px minmax(0,1fr) !important; gap:8px !important; align-items:center !important; overflow:hidden !important; border-radius:16px !important; background:var(--panel) !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-card > .analytics-card-icon{ position:static !important; inset:auto !important; width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important; margin:0 !important; border-radius:8px !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-card > .analytics-card-icon svg{ width:17px !important; height:17px !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-body{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 48px 0 0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"label amount" !important; column-gap:8px !important; align-items:center !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-body > span{ grid-area:label !important; min-width:0 !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; color:var(--text-muted) !important; font-size:12px !important; line-height:1.2 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-body > strong{ grid-area:amount !important; justify-self:end !important; max-width:none !important; margin:0 !important; overflow:visible !important; color:var(--text) !important; font-size:19px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-percent{ position:absolute !important; z-index:4 !important; top:8px !important; right:9px !important; min-width:38px !important; height:24px !important; min-height:24px !important; margin:0 !important; padding:0 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:1px solid color-mix(in srgb,var(--danger) 30%,transparent) !important; border-radius:8px !important; background:color-mix(in srgb,var(--danger) 9%,transparent) !important; color:var(--danger) !important; font-size:10px !important; font-weight:650 !important; line-height:1 !important; box-sizing:border-box !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-card.positive{ border-color:color-mix(in srgb,var(--success) 42%,var(--border)) !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-card.positive .annual-year-compare-percent{ border-color:color-mix(in srgb,var(--success) 30%,transparent) !important; background:color-mix(in srgb,var(--success) 9%,transparent) !important; color:var(--success) !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-card.neutral .annual-year-compare-percent{ border-color:color-mix(in srgb,var(--text-muted) 26%,transparent) !important; background:color-mix(in srgb,var(--text-muted) 8%,transparent) !important; color:var(--text-muted) !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-percent.is-empty{ display:none !important; } } /* Mobile annual visual parity fix v51: match the approved Month screenshot. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Best month: force icon -> text -> amount vertical flow, exactly like Month best card. */ #incomeAnalytics:not(.is-monthly) .analytics-card-best{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:8px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-icon{ order:0 !important; position:static !important; inset:auto !important; display:grid !important; place-items:center !important; width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; margin:0 !important; flex:0 0 34px !important; align-self:flex-start !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-body{ order:1 !important; position:static !important; inset:auto !important; display:block !important; align-self:stretch !important; flex:0 0 auto !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 0 42px !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-body > span{ display:block !important; width:100% !important; max-width:100% !important; margin:0 0 7px !important; padding:0 !important; color:var(--text-muted) !important; font-size:13px !important; line-height:1.2 !important; text-align:left !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-body > strong{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; color:var(--text) !important; font-size:20px !important; font-weight:750 !important; line-height:1.08 !important; text-align:left !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best > .analytics-card-body > b{ display:block !important; width:max-content !important; max-width:calc(100% + 15px) !important; margin:9px 0 0 !important; padding:0 !important; overflow:visible !important; color:var(--text) !important; font-size:25px !important; font-weight:780 !important; line-height:1 !important; letter-spacing:-.035em !important; text-align:left !important; text-overflow:clip !important; white-space:nowrap !important; transform:translate(-15px,10px) !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-best::before{ z-index:3 !important; display:block !important; opacity:.9 !important; } /* Worst month: same compact geometry as "Сравнение с августом", but keep both the month name and the full amount readable. */ #incomeAnalytics:not(.is-monthly) .analytics-card-worst{ overflow:hidden !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst .annual-worst-topline{ flex:0 0 24px !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body{ order:1 !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-areas: "label" "period" "amount" !important; row-gap:2px !important; align-content:start !important; flex:1 1 auto !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body > span{ grid-area:label !important; display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; color:var(--text-muted) !important; font-size:10.5px !important; line-height:1.05 !important; text-align:left !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body > strong{ grid-area:period !important; display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; color:var(--text) !important; font-size:15px !important; font-weight:750 !important; line-height:1.05 !important; text-align:left !important; text-overflow:clip !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-worst > .analytics-card-body > b{ grid-area:amount !important; display:block !important; width:100% !important; max-width:100% !important; margin:1px 0 0 !important; padding:0 !important; overflow:visible !important; color:var(--text) !important; font-size:15px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.04em !important; text-align:left !important; text-overflow:clip !important; white-space:nowrap !important; } /* Average month: no clipping, no broken amount. */ #incomeAnalytics:not(.is-monthly) .analytics-card-average{ overflow:hidden !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average > .analytics-card-body{ width:100% !important; max-width:100% !important; min-width:0 !important; overflow:visible !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average > .analytics-card-body > span{ font-size:12px !important; line-height:1.2 !important; } #incomeAnalytics:not(.is-monthly) .analytics-card-average > .analytics-card-body > strong{ display:block !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; font-size:15px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.055em !important; text-align:center !important; text-overflow:clip !important; white-space:nowrap !important; } /* Annual comparison: same full-width structure as Month comparison. */ #incomeAnalytics:not(.is-monthly) .annual-year-compare-card{ overflow:hidden !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-body{ width:100% !important; max-width:100% !important; min-width:0 !important; padding:0 48px 0 0 !important; grid-template-columns:minmax(0,1fr) auto !important; column-gap:8px !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-body > span{ min-width:0 !important; max-width:100% !important; overflow:visible !important; font-size:12px !important; line-height:1.15 !important; text-overflow:clip !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) .annual-year-compare-body > strong{ margin:0 !important; overflow:visible !important; font-size:19px !important; line-height:1 !important; white-space:nowrap !important; } } /* Mobile annual exact parity specificity fix v52. Use selectors stronger than legacy annual mobile rules so Year truly follows Month. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics:not(.is-monthly) > .analytics-cards{ display:grid !important; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important; grid-template-areas: "hero hero" "best worst" "best average" "compare compare" !important; gap:8px !important; align-items:stretch !important; margin:0 0 10px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .annual-total-card{ grid-area:hero !important; min-height:238px !important; height:238px !important; max-height:238px !important; margin:0 !important; } /* BEST MONTH = same physical composition as Month best-category card. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best{ grid-area:best !important; position:relative !important; width:100% !important; max-width:none !important; min-width:0 !important; min-height:216px !important; height:216px !important; padding:14px !important; display:flex !important; grid-template-columns:none !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:8px !important; overflow:hidden !important; border-radius:16px !important; background:var(--panel) !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-icon{ order:0 !important; position:static !important; inset:auto !important; display:grid !important; place-items:center !important; align-self:flex-start !important; width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; flex:0 0 34px !important; margin:0 !important; border-radius:10px !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-icon svg{ width:18px !important; height:18px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-body{ order:1 !important; position:static !important; inset:auto !important; align-self:stretch !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 0 42px !important; display:block !important; grid-template-columns:none !important; transform:none !important; text-align:left !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-body > span{ display:block !important; width:100% !important; max-width:100% !important; margin:0 0 7px !important; padding:0 !important; color:var(--text-muted) !important; font-size:13px !important; font-weight:400 !important; line-height:1.2 !important; text-align:left !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-body > strong{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; color:var(--text) !important; font-size:20px !important; font-weight:750 !important; line-height:1.08 !important; text-align:left !important; text-overflow:ellipsis !important; text-transform:none !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-body > b{ display:block !important; width:max-content !important; max-width:calc(100% + 15px) !important; margin:9px 0 0 !important; padding:0 !important; overflow:visible !important; color:var(--text) !important; font-size:25px !important; font-weight:780 !important; line-height:1 !important; letter-spacing:-.035em !important; text-align:left !important; white-space:nowrap !important; transform:translate(-15px,10px) !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .annual-month-share-best{ position:absolute !important; z-index:4 !important; top:auto !important; right:auto !important; bottom:14px !important; left:14px !important; min-width:42px !important; height:25px !important; padding:0 7px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:11px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best::before{ content:"" !important; position:absolute !important; z-index:2 !important; right:15px !important; bottom:14px !important; display:block !important; width:6px !important; height:22px !important; border-radius:2px 2px 0 0 !important; background:color-mix(in srgb,var(--success) 88%,transparent) !important; box-shadow: -9px 5px 0 color-mix(in srgb,var(--success) 76%,transparent), -18px 10px 0 color-mix(in srgb,var(--success) 64%,transparent), -27px 14px 0 color-mix(in srgb,var(--success) 52%,transparent), -36px 17px 0 color-mix(in srgb,var(--success) 40%,transparent) !important; opacity:.9 !important; transform:none !important; pointer-events:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best::after{ content:none !important; display:none !important; } /* WORST MONTH = same compact top-row rhythm as Month comparison card. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst{ grid-area:worst !important; position:relative !important; width:100% !important; max-width:none !important; min-width:0 !important; min-height:104px !important; height:104px !important; padding:9px !important; display:flex !important; grid-template-columns:none !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:7px !important; overflow:hidden !important; border-radius:16px !important; background:var(--panel) !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .annual-worst-topline{ order:0 !important; width:100% !important; height:24px !important; min-height:24px !important; flex:0 0 24px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; margin:0 !important; padding:0 !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .annual-worst-topline > .analytics-card-icon, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .annual-worst-topline > .annual-month-share{ position:static !important; inset:auto !important; align-self:center !important; margin:0 !important; transform:none !important; box-sizing:border-box !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .annual-worst-topline > .analytics-card-icon{ width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important; flex:0 0 24px !important; border-radius:8px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .annual-worst-topline > .analytics-card-icon svg{ width:14px !important; height:14px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .annual-worst-topline > .annual-month-share{ min-width:38px !important; height:24px !important; min-height:24px !important; padding:0 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:10px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body{ order:1 !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-areas: "label" "period" "amount" !important; row-gap:2px !important; align-content:start !important; overflow:visible !important; transform:none !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > span{ grid-area:label !important; display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; color:var(--text-muted) !important; font-size:10.5px !important; font-weight:400 !important; line-height:1.05 !important; text-align:left !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > strong{ grid-area:period !important; display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; color:var(--text) !important; font-size:15px !important; font-weight:750 !important; line-height:1.05 !important; text-align:left !important; text-overflow:ellipsis !important; text-transform:none !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > b{ grid-area:amount !important; display:block !important; width:100% !important; max-width:100% !important; margin:1px 0 0 !important; padding:0 !important; overflow:visible !important; color:var(--text) !important; font-size:15px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.04em !important; text-align:left !important; text-overflow:clip !important; white-space:nowrap !important; } /* AVERAGE MONTH = same iconless centered block as Month average card. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average{ grid-area:average !important; position:relative !important; width:100% !important; max-width:none !important; min-width:0 !important; min-height:104px !important; height:104px !important; padding:12px !important; display:flex !important; grid-template-columns:none !important; align-items:center !important; justify-content:center !important; gap:0 !important; overflow:hidden !important; border-radius:16px !important; background:var(--panel) !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-icon{ display:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body{ width:100% !important; max-width:100% !important; height:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; grid-template-columns:none !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:7px !important; overflow:visible !important; text-align:center !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body > span{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; color:var(--text-muted) !important; font-size:12px !important; font-weight:400 !important; line-height:1.2 !important; text-align:center !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body > strong{ display:block !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; color:var(--text) !important; font-size:15px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.055em !important; text-align:center !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average::before, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average::after, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst::before, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst::after{ content:none !important; display:none !important; } /* YEAR COMPARISON = exact full-width Month comparison geometry. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card{ grid-area:compare !important; position:relative !important; width:100% !important; max-width:none !important; min-width:0 !important; min-height:78px !important; height:78px !important; padding:11px 12px !important; display:grid !important; grid-template-columns:30px minmax(0,1fr) !important; gap:8px !important; align-items:center !important; overflow:hidden !important; border-radius:16px !important; background:var(--panel) !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .analytics-card-icon{ position:static !important; inset:auto !important; width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important; margin:0 !important; border-radius:8px !important; transform:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .analytics-card-icon svg{ width:17px !important; height:17px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 48px 0 0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"label amount" !important; column-gap:8px !important; align-items:center !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > span{ grid-area:label !important; min-width:0 !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; color:var(--text-muted) !important; font-size:12px !important; font-weight:400 !important; line-height:1.2 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > strong{ grid-area:amount !important; justify-self:end !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; color:var(--text) !important; font-size:19px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-percent{ position:absolute !important; z-index:4 !important; top:8px !important; right:9px !important; min-width:38px !important; height:24px !important; min-height:24px !important; margin:0 !important; padding:0 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:8px !important; font-size:10px !important; line-height:1 !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card.negative{ border-color:color-mix(in srgb,var(--danger) 42%,var(--border)) !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card.negative > .analytics-card-icon, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card.negative > .annual-year-compare-percent{ border-color:color-mix(in srgb,var(--danger) 30%,transparent) !important; background:color-mix(in srgb,var(--danger) 9%,transparent) !important; color:var(--danger) !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card.positive{ border-color:color-mix(in srgb,var(--success) 42%,var(--border)) !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card.positive > .analytics-card-icon, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card.positive > .annual-year-compare-percent{ border-color:color-mix(in srgb,var(--success) 30%,transparent) !important; background:color-mix(in srgb,var(--success) 9%,transparent) !important; color:var(--success) !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card::before, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card::after{ content:none !important; display:none !important; } } /* Mobile annual best amount alignment v53. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ } /* Mobile annual text and amount correction v54. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Best month amount: keep it fully inside the card and align like Month best-category amount. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-body > b{ width:100% !important; max-width:100% !important; margin:9px 0 0 !important; overflow:visible !important; text-align:center !important; transform:translate(0,10px) !important; } /* Worst month: month name uses the same typography as the "Худший месяц" label. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > strong{ color:var(--text-muted) !important; font-size:10.5px !important; font-weight:400 !important; line-height:1.05 !important; letter-spacing:0 !important; text-transform:none !important; } /* Year comparison: give the label and amount fixed non-overlapping zones. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body{ grid-template-columns:minmax(0,1fr) auto !important; column-gap:12px !important; padding-right:52px !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > span{ max-width:100% !important; overflow:hidden !important; font-size:11px !important; line-height:1.15 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > strong{ justify-self:end !important; margin:0 !important; font-size:17px !important; line-height:1 !important; letter-spacing:-.03em !important; white-space:nowrap !important; } } /* Mobile annual typography and icon correction v55. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* Match Month icon surfaces instead of the old blue annual icon boxes. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-icon{ border:0 !important; background:color-mix(in srgb,var(--success) 14%,transparent) !important; color:var(--success) !important; box-shadow:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .annual-worst-topline > .analytics-card-icon{ border:0 !important; background:color-mix(in srgb,var(--danger) 14%,transparent) !important; color:var(--danger) !important; box-shadow:none !important; } /* Restore the readable Month-sized typography in the two compact annual cards. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > span, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > strong{ color:var(--text-muted) !important; font-size:12px !important; font-weight:400 !important; line-height:1.15 !important; letter-spacing:0 !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body > span{ font-size:12px !important; line-height:1.2 !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body > strong{ font-size:20px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; } } /* Mobile comparison alignment, accent graph and restrained palette v56. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ /* "Сравнение с августом": center label and amount like "Средний доход в день". */ #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; text-align:center !important; } #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; font-size:12px !important; line-height:1.2 !important; text-align:center !important; text-overflow:clip !important; white-space:normal !important; } #incomeAnalytics.is-monthly #monthlyGrowthNote{ width:100% !important; max-width:100% !important; margin:0 !important; overflow:visible !important; font-size:20px !important; line-height:1 !important; text-align:center !important; text-overflow:clip !important; white-space:nowrap !important; } /* "Худший месяц": same centered text rhythm as the average card. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; text-align:center !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > span, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > strong{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; color:var(--text-muted) !important; font-size:12px !important; font-weight:400 !important; line-height:1.15 !important; text-align:center !important; text-overflow:clip !important; white-space:normal !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > b{ width:100% !important; max-width:100% !important; margin:2px 0 0 !important; padding:0 !important; overflow:visible !important; font-size:20px !important; font-weight:760 !important; line-height:1 !important; letter-spacing:-.025em !important; text-align:center !important; text-overflow:clip !important; white-space:nowrap !important; } /* Annual graph follows the same interface accent rules as the chart in the header. */ #incomeAnalytics:not(.is-monthly) .annual-total-bar{ opacity:1 !important; background:color-mix(in srgb,var(--primary) 72%,white) !important; box-shadow:none !important; filter:none !important; } #incomeAnalytics:not(.is-monthly) .annual-total-bar.selected{ opacity:1 !important; background:color-mix(in srgb,var(--primary) 82%,black 18%) !important; box-shadow:none !important; filter:none !important; } #incomeAnalytics:not(.is-monthly) .annual-total-bar.is-zero{ opacity:.24 !important; } /* Mobile category palette = desktop restrained financial palette. No vivid violet/pink/yellow/cyan accents. */ #incomeAnalytics:not(.is-monthly) .analytics-category-panel.salary{ --category:#3f8f72 !important; --category-soft:rgba(63,143,114,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.advance{ --category:#4b78a8 !important; --category-soft:rgba(75,120,168,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.other{ --category:#5f7187 !important; --category-soft:rgba(95,113,135,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel.pension{ --category:#667085 !important; --category-soft:rgba(102,112,133,.075) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped){ border-color:color-mix(in srgb,var(--category) 32%,var(--border)) !important; background:color-mix(in srgb,var(--panel) 98%,var(--category) 2%) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped) .analytics-category-panel-icon{ color:var(--category) !important; background:color-mix(in srgb,var(--category) 10%,transparent) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped) .analytics-category-panel-share{ color:var(--category) !important; background:color-mix(in srgb,var(--category) 7%,transparent) !important; border-color:color-mix(in srgb,var(--category) 20%,transparent) !important; } #incomeAnalytics.is-monthly .monthly-category-card.salary, #incomeAnalytics.is-monthly .monthly-category-card.teal{ --monthly-category:#3f8f72 !important; --monthly-category-soft:rgba(63,143,114,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.advance, #incomeAnalytics.is-monthly .monthly-category-card.blue{ --monthly-category:#4b78a8 !important; --monthly-category-soft:rgba(75,120,168,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.other, #incomeAnalytics.is-monthly .monthly-category-card.violet{ --monthly-category:#5f7187 !important; --monthly-category-soft:rgba(95,113,135,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.pension, #incomeAnalytics.is-monthly .monthly-category-card.amber{ --monthly-category:#667085 !important; --monthly-category-soft:rgba(102,112,133,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.cyan{ --monthly-category:#3f7f86 !important; --monthly-category-soft:rgba(63,127,134,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card.slate{ --monthly-category:#607286 !important; --monthly-category-soft:rgba(96,114,134,.075) !important; } #incomeAnalytics.is-monthly .monthly-category-card:not(.category-grouped){ border-color:color-mix(in srgb,var(--monthly-category) 32%,var(--border)) !important; background:color-mix(in srgb,var(--panel) 98%,var(--monthly-category) 2%) !important; } #incomeAnalytics.is-monthly .monthly-category-card:not(.category-grouped) .monthly-category-icon{ color:var(--monthly-category) !important; background:color-mix(in srgb,var(--monthly-category) 10%,transparent) !important; } #incomeAnalytics.is-monthly .monthly-category-card:not(.category-grouped) .monthly-category-share{ color:var(--monthly-category) !important; background:color-mix(in srgb,var(--monthly-category) 7%,transparent) !important; border-color:color-mix(in srgb,var(--monthly-category) 20%,transparent) !important; } } /* Mobile previous-month amount exact center v57. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics.is-monthly #monthlyGrowthNote{ display:block !important; width:max-content !important; max-width:100% !important; align-self:center !important; margin-left:auto !important; margin-right:auto !important; padding:0 !important; text-align:center !important; transform:none !important; } } /* Mobile annual category surface theme fix v58. Override the legacy hard-coded near-black annual category background. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped), html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):hover, html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):active, html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):focus, html[data-theme="dark"] #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):focus-visible, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped), body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):hover, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):active, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):focus, body.dark #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped):focus-visible, html:not([data-theme="dark"]) #incomeAnalytics:not(.is-monthly) .analytics-category-panel:not(.category-grouped){ background:color-mix(in srgb,var(--panel) 98%,var(--category) 2%) !important; background-color:color-mix(in srgb,var(--panel) 98%,var(--category) 2%) !important; background-image:none !important; } } /* Desktop hide annual comparison v59: keep this card mobile-only. */ @media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card{ display:none !important; } } /* Landscape phone parity v60: keep the approved mobile analytics design after rotation. */ @media (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics{ width:100% !important; } } /* Mobile breakpoint correction v61. The app desktop layout starts at 901px, so mobile redesign stays active through 900px, including Samsung Browser landscape viewports. */ /* Mobile annual graph position v63: cards first, graph below them. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics:not(.is-monthly) > .analytics-cards{ grid-template-areas: "best worst" "best average" "hero hero" "compare compare" !important; } } /* Mobile inline settings polish v11: tabs share the top row with the close button. */ @media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics.is-settings-open{ position:relative !important; } #incomeAnalytics.is-settings-open .analytics-mode-row{ position:absolute !important; z-index:60 !important; top:16px !important; right:16px !important; display:block !important; width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; margin:0 !important; padding:0 !important; } #incomeAnalytics.is-settings-open .analytics-mode-row .analytics-mode-tabs, #incomeAnalytics.is-settings-open .analytics-mode-row .analytics-mode-period{ display:none !important; } #incomeAnalytics.is-settings-open .analytics-settings-toggle.is-active{ position:static !important; width:44px !important; min-width:44px !important; max-width:44px !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important; } #incomeAnalytics.is-settings-open .analytics-settings-host{ width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; } #incomeAnalytics.is-settings-open .analytics-settings-host #settings.analytics-inline-settings{ display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; } #incomeAnalytics.is-settings-open #settings .qp-settings-tabs{ width:calc(100% - 54px) !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 54px 10px 0 !important; padding:3px !important; box-sizing:border-box !important; } #incomeAnalytics.is-settings-open #settings .qp-settings-tab{ height:36px !important; min-height:36px !important; max-height:36px !important; padding:0 4px !important; gap:3px !important; font-size:9px !important; white-space:nowrap !important; } #incomeAnalytics.is-settings-open #settings .qp-settings-tab svg{ width:14px !important; min-width:14px !important; height:14px !important; } #incomeAnalytics.is-settings-open #settings > .settings-card{ width:100% !important; min-width:0 !important; max-width:100% !important; margin:0 !important; box-sizing:border-box !important; } #incomeAnalytics.is-settings-open #settings[data-settings-tab="appearance"] > #qpBackgroundSettings, #incomeAnalytics.is-settings-open #settings[data-settings-tab="data"] > #qpDataCard{ margin-top:10px !important; } } /* DEV86: year comparison label on phones occupies its own wrapping line. Leave the desktop and the other dashboard cards unchanged. */ @media (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body{ padding:0!important; grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"label" "amount"!important; row-gap:6px!important; align-content:center!important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > #annualYearCompareLabel{ display:block!important; width:min(88px,100%)!important; max-width:100%!important; min-width:0!important; overflow:visible!important; white-space:normal!important; text-overflow:clip!important; overflow-wrap:normal!important; line-height:1.15!important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > #annualYearCompareNote{ justify-self:start!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; text-align:left!important; } } /* DEV91: allow billion-sized currency values to remain readable in touch analytics. These are the narrow, asymmetric mobile cards, not desktop CSS. */ @media (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics.is-monthly .monthly-summary-best, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best{ height:auto !important; min-height:216px !important; } /* Both tall "best" cards have an absolute badge at the bottom: maintain the existing reserved space while allowing the amount to take two lines. */ #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > #monthlyBestAmount, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-body > #analyticsBestAmount{ display:block !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:9px 0 0 !important; padding:0 !important; font-size:clamp(15px,4.4vw,20px) !important; line-height:1.15 !important; letter-spacing:-.025em !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; text-align:center !important; overflow:visible !important; transform:translateY(4px) !important; } /* "Average per active month" occupies half a phone row; the original nowrap + 20px font clipped long amounts behind overflow:hidden. */ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body > #analyticsAverageActive{ display:block !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; font-size:clamp(13px,3.8vw,17px) !important; line-height:1.15 !important; letter-spacing:-.025em !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; text-align:center !important; overflow:visible !important; } } /* DEV92: keep full billion-sized amounts visible in the two remaining narrow year cards on touch devices; no arithmetic or desktop changes. */ @media (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst{ height:auto !important; min-height:104px !important; max-height:none !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > #analyticsWorstAmount{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; font-size:clamp(12px,3.5vw,15px) !important; line-height:1.15 !important; letter-spacing:-.025em !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; text-overflow:clip !important; overflow:visible !important; text-align:center !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel{ height:auto !important; min-height:106px !important; max-height:none !important; grid-template-rows:24px 19px minmax(25px,auto) !important; } #incomeAnalytics:not(.is-monthly) .analytics-category-panel .analytics-category-panel-value{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; padding-left:5px !important; font-size:clamp(12px,3.6vw,16px) !important; line-height:1.15 !important; letter-spacing:-.025em !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; text-overflow:clip !important; overflow:visible !important; } } /* DEV93: default to the approved large touch typography; the app measures the actual text and supplies a smaller font ONLY when it cannot fit. */ @media (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){ #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > #monthlyBestAmount, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-best > .analytics-card-body > #analyticsBestAmount{ font-size:var(--qp-touch-money-size,25px) !important; } #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-worst > .analytics-card-body > #analyticsWorstAmount, #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.analytics-card-average > .analytics-card-body > #analyticsAverageActive, #incomeAnalytics:not(.is-monthly) .analytics-category-panel .analytics-category-panel-value{ font-size:var(--qp-touch-money-size,20px) !important; } }