/* Stage 4 · direction B, Mosaic Q1, screen «Анализ». Phone rules stay in analytics.css. This file only rebuilds the computer. */ @media (min-width: 1024px) { body:has(#page-analytics.active) .shell-expense { display: none; } #page-analytics .page-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; grid-auto-flow: row dense; } /* Flatten the phone stack. :not([hidden]) so a closed tab stays display:none. */ #page-analytics .page-inner :is( .r29-analytics-layout, .r29-analytics-main, aside.r29-advisor, #r29Advice, .an-r1, .an-r2, .health-factors, .health-advice, .capital-sources ) { display: contents; } #page-analytics .page-inner :is( #r29AnalyticsKpis, #anSpending, #anSpendingExtra, #anTrip, #anHealth, #anCapital ):not([hidden]) { display: contents; } #page-analytics .page-inner :is(.card, .r29-assistant, .finance-head, .health-method, .capital-note) { min-width: 0; margin: 0; } #page-analytics .page-inner .card { grid-column: span 6; order: 90; } #page-analytics .page-head { order: 1; } #page-analytics .page-head .shell-section-nav { order: 2; flex: 0 1 auto; width: auto; max-width: 100%; } #page-analytics .page-head .shell-section-nav a { flex: 0 1 auto; white-space: nowrap; } #page-analytics #anFoc { order: 3; width: auto; } #page-analytics .finance-tabs { grid-column: 1 / -1; order: 2; width: 100%; min-width: 0; margin: 0; align-self: center; } #page-analytics .finance-tabs button { min-width: 0; padding: 8px; white-space: nowrap; } #page-analytics .page-inner .r29-health-kpi { grid-column: 1 / span 5; order: 3; } #page-analytics .page-inner .r29-data-kpi { grid-column: 6 / span 4; order: 4; } #page-analytics .page-inner .r29-data-kpi[data-card-reward] { grid-column: 10 / span 3; order: 5; } #page-analytics #r29HealthDetail:not([hidden]) { grid-column: 1 / -1; order: 6; } #page-analytics #anDonutCard { grid-column: 1 / span 7; order: 10; } #page-analytics #anPurchaseCosts { grid-column: 8 / span 5; order: 11; } #page-analytics .r29-assistant { grid-column: 1 / span 5; order: 20; margin: 0; } #page-analytics #anHomeCurrency { grid-column: 6 / span 7; order: 21; } #page-analytics .an-r1 > .card:first-child { grid-column: 1 / span 6; order: 30; } #page-analytics .an-r1 > .card:last-child { grid-column: 7 / span 6; order: 31; } #page-analytics .page-inner .card:has(#anMerch) { grid-column: 1 / span 7; order: 40; } #page-analytics .page-inner .r5c-categories { grid-column: 8 / span 5; order: 41; } #page-analytics .page-inner :is(.r29-risk, .health-tip) { grid-column: span 4; order: 50; } #page-analytics .page-inner :is(.r29-trip, .r29-trip-others) { grid-column: 1 / span 4; order: 60; } #page-analytics #anSpendingExtra > .r5c-details:first-of-type { grid-column: 5 / span 4; order: 61; } #page-analytics #anSpendingExtra > .r5c-details:last-of-type { grid-column: 9 / span 4; order: 62; } /* W8 y3: without trip cards the two disclosures share the row instead of leaving columns 1-4 empty. */ #page-analytics .page-inner:not(:has(.r29-trip, .r29-trip-others)) #anSpendingExtra > .r5c-details:first-of-type { grid-column: 1 / span 6; } #page-analytics .page-inner:not(:has(.r29-trip, .r29-trip-others)) #anSpendingExtra > .r5c-details:last-of-type { grid-column: 7 / span 6; } #page-analytics .page-inner .card:has(#anOut) { grid-column: 1 / span 7; order: 70; } #page-analytics .page-inner .card:has(#anFees) { grid-column: 8 / span 5; order: 71; } /* Without card rewards, pair the existing short cards beside tall charts. Each card keeps its intrinsic height; the two disclosures remain separate. */ #page-analytics .page-inner:not(:has([data-card-reward])) .r29-data-kpi{grid-column:6/-1} #page-analytics .page-inner:not(:has([data-card-reward])) #anDonutCard{grid-column:1/span 7;order:10} #page-analytics .page-inner:not(:has([data-card-reward])) .r5c-categories{grid-column:8/span 5;grid-row:span 2;order:11} #page-analytics .page-inner:not(:has([data-card-reward])) .r29-assistant{grid-column:1/span 7;order:12} #page-analytics .page-inner:not(:has([data-card-reward])) .an-r1>.card:first-child{grid-column:1/span 6;grid-row:span 2;order:20} #page-analytics .page-inner:not(:has([data-card-reward])) .an-r1>.card:last-child{grid-column:7/span 6;order:21} #page-analytics .page-inner:not(:has([data-card-reward])) #r29Advice>.card:first-child{grid-column:7/span 6;order:22} #page-analytics .page-inner:not(:has([data-card-reward])) .card:has(#anMerch){grid-column:1/span 7;grid-row:span 5;order:30} #page-analytics .page-inner:not(:has([data-card-reward])) #r29Advice>.card:nth-child(2){grid-column:8/span 5;order:31} #page-analytics .page-inner:not(:has([data-card-reward])) #r29Advice>.card:nth-child(3){grid-column:8/span 5;order:32} #page-analytics .page-inner:not(:has([data-card-reward])) .r29-trip-others{grid-column:8/span 5;order:33} #page-analytics .page-inner:not(:has([data-card-reward])) #anSpendingExtra>.r5c-details:first-of-type{grid-column:8/span 5;order:34} #page-analytics .page-inner:not(:has([data-card-reward])) #anSpendingExtra>.r5c-details:last-of-type{grid-column:8/span 5;order:35} #page-analytics .page-inner:not(:has([data-card-reward])) .card:has(#anOut){grid-column:1/-1;order:40} #page-analytics :is(.chart, .fees-scroll, .an-donut-in, .an-donut-leg, .cal-g, .hg-cal-wd, .r31-home-body) { min-width: 0; max-width: 100%; } #page-analytics .an-donut-ring { width: min(168px, 100%); } #page-analytics .an-donut-n { white-space: nowrap; } #page-analytics #r29AskForm input { min-width: 0; } #page-analytics .ch .seg { flex: 0 1 auto; width: auto; } #page-analytics .ch .seg button { flex: 0 1 auto; } /* Screen actions stay quiet capsules. The one lime tile is Здоровье. */ #page-analytics :is(.btn-brand, .btn-dark, .btn-key, #r29AskForm .iconbtn.r29-primary) { background: var(--well); color: var(--ink); border-radius: 999px; } /* The phone tightens the nbsp before «$». On the computer that space stays readable. */ #page-analytics :is(.r29-data-value, .an-donut-v, .an-donut-c b, .r5c-money, .mr-b em, .fee-val, .capital-total, .r29-trip-sum b) { word-spacing: normal; } /* Brand plates keep the inline service color (same marks as «Скоро спишется»). */ #page-analytics .hg-service[data-service-logo] { border-radius: 12px; } #page-analytics .hg-service[data-service-logo] svg { width: 18px; height: 18px; } @media (min-width: 1280px) { #page-analytics #anDonutCard { grid-column: 1 / span 8; order: 10; } #page-analytics .r29-assistant { grid-column: 9 / span 4; order: 11; } #page-analytics .an-r1 > .card:first-child { grid-column: 1 / span 7; order: 20; } #page-analytics .an-r1 > .card:last-child { grid-column: 8 / span 5; order: 21; } #page-analytics #anHomeCurrency { grid-column: 1 / span 5; order: 30; } #page-analytics #anPurchaseCosts { grid-column: 6 / span 7; order: 31; } #page-analytics .page-inner .card:has(#anMerch) { grid-column: 1 / span 8; order: 40; } #page-analytics .page-inner .r5c-categories { grid-column: 9 / span 4; order: 41; } #page-analytics .page-inner .card:has(#anOut) { grid-column: 1 / span 8; order: 60; } #page-analytics .page-inner .card:has(#anFees) { grid-column: 9 / span 4; order: 61; } #page-analytics .page-inner :is(.r29-trip, .r29-trip-others) { order: 70; } #page-analytics #anSpendingExtra > .r5c-details:first-of-type { order: 71; } #page-analytics #anSpendingExtra > .r5c-details:last-of-type { order: 72; } } @media (min-width: 1440px) { #page-analytics .finance-tabs { grid-column: 1 / -1; } #page-analytics .page-inner .r29-health-kpi { grid-column: 1 / span 4; } #page-analytics .page-inner .r29-data-kpi { grid-column: 5 / span 5; } #page-analytics .page-inner .r29-data-kpi[data-card-reward] { grid-column: 10 / span 3; } /* Two KPIs use adjacent tracks without stretching their intrinsic heights. */ #page-analytics .page-inner:not(:has([data-card-reward])) .r29-data-kpi { grid-column: 5 / -1; } /* Row 1: Donut (wide, legend in 1 line) + Purchase costs (matching ~714px height) */ #page-analytics #anDonutCard { grid-column: 1 / span 7; order: 10; } #page-analytics #anPurchaseCosts { grid-column: 8 / span 5; order: 11; } /* Row 2: Heatmap + Day/Hour (matching ~714px height) */ #page-analytics .an-r1 > .card:first-child { grid-column: 1 / span 6; order: 20; } #page-analytics .an-r1 > .card:last-child { grid-column: 7 / span 6; order: 21; } /* Row 3: Merchants breakdown + Categories breakdown (matching ~900px height) */ #page-analytics .page-inner .card:has(#anMerch) { grid-column: 1 / span 7; order: 30; } #page-analytics .page-inner .r5c-categories { grid-column: 8 / span 5; order: 31; } /* Row 4: Home currency + Ask Assistant (both short ~320px, no 400px bottom void) */ #page-analytics #anHomeCurrency { grid-column: 1 / span 7; order: 40; } #page-analytics .r29-assistant { grid-column: 8 / span 5; order: 41; } #page-analytics .page-inner :is(.r29-risk, .health-tip) { order: 45; } #page-analytics .page-inner .card:has(#anOut) { grid-column: 1 / span 8; order: 50; } #page-analytics .page-inner .card:has(#anFees) { grid-column: 9 / span 4; order: 51; } #page-analytics .page-inner :is(.r29-trip, .r29-trip-others) { order: 60; } #page-analytics #anSpendingExtra > .r5c-details:first-of-type { order: 61; } #page-analytics #anSpendingExtra > .r5c-details:last-of-type { order: 62; } } @media (min-width: 1680px) { #page-analytics .page-inner { gap: 20px; } #page-analytics .page-inner .r29-health-kpi { grid-column: 1 / span 3; } #page-analytics .page-inner .r29-data-kpi { grid-column: 4 / span 3; } #page-analytics .page-inner .r29-data-kpi[data-card-reward] { grid-column: 7 / span 3; } #page-analytics .page-inner:not(:has([data-card-reward])) .r29-data-kpi { grid-column: 4 / -1; } #page-analytics #anDonutCard { grid-column: 1 / span 7; order: 10; } #page-analytics #anPurchaseCosts { grid-column: 8 / span 5; order: 11; } #page-analytics .an-r1 > .card:first-child { grid-column: 1 / span 6; order: 20; } #page-analytics .an-r1 > .card:last-child { grid-column: 7 / span 6; order: 21; } #page-analytics .page-inner .card:has(#anMerch) { grid-column: 1 / span 7; order: 30; } #page-analytics .page-inner .r5c-categories { grid-column: 8 / span 5; order: 31; } #page-analytics #anHomeCurrency { grid-column: 1 / span 7; order: 40; } #page-analytics .r29-assistant { grid-column: 8 / span 5; order: 41; } #page-analytics .page-inner :is(.r29-risk, .health-tip) { order: 45; } #page-analytics .page-inner .card:has(#anOut) { grid-column: 1 / span 8; order: 50; } #page-analytics .page-inner .card:has(#anFees) { grid-column: 9 / span 4; order: 51; } #page-analytics .page-inner :is(.r29-trip, .r29-trip-others) { grid-column: 1 / span 4; order: 60; } #page-analytics #anSpendingExtra > .r5c-details:first-of-type { grid-column: 5 / span 4; order: 61; } #page-analytics #anSpendingExtra > .r5c-details:last-of-type { grid-column: 9 / span 4; order: 62; } } #page-analytics:has(#anHealth:not([hidden])) .finance-head { grid-column: 1 / -1; order: 5; } #page-analytics:has(#anHealth:not([hidden])) .health-top, #page-analytics:has(#anHealth:not([hidden])) .health-empty { grid-column: 1 / span 8; order: 10; } #page-analytics:has(#anHealth:not([hidden])) .r29-assistant { grid-column: 9 / span 4; order: 11; } #page-analytics:has(#anHealth:not([hidden])) .health-factor { grid-column: span 6; order: 20; } #page-analytics:has(#anHealth:not([hidden])) :is(.r29-risk, .health-tip) { grid-column: span 4; order: 30; } #page-analytics:has(#anHealth:not([hidden])) .health-method { grid-column: 1 / -1; order: 40; } #page-analytics:has(#anCapital:not([hidden])) .finance-head { grid-column: 1 / -1; order: 5; } #page-analytics:has(#anCapital:not([hidden])) .capital-hero { grid-column: 1 / span 8; order: 10; } #page-analytics:has(#anCapital:not([hidden])) .r29-assistant { grid-column: 9 / span 4; order: 11; } #page-analytics:has(#anCapital:not([hidden])) .capital-source { grid-column: span 6; order: 20; } #page-analytics:has(#anCapital:not([hidden])) .capital-manual { grid-column: 1 / -1; order: 30; } #page-analytics:has(#anCapital:not([hidden])) .capital-note { grid-column: 1 / -1; order: 40; } } /* W8 y3: content-sized tiles occupy independent row spans. ResizeObserver in web-r7-an updates these after disclosure, filtering, fonts and resizing. */ @media (min-width: 1024px) { #page-analytics #anSpendingExtra > details.r5c-details, #page-analytics #anSpendingExtra > details.r5c-details:has(+ details.r5c-details), #page-analytics #anSpendingExtra > details.r5c-details + details.r5c-details { border-radius: 24px; padding: 20px; margin: 0; } /* gate 4 follow-up: Y3's content-height masonry (4px rows, JS row spans) scattered the advice cards and left new holes; the approved grid stays. */ } @media (min-width: 1440px) { #page-analytics .r29-ask-examples { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } /* Compare the three currency totals on one line instead of a tall list. */ #page-analytics #anPurchaseCosts .cb { grid-template-columns: repeat(3, minmax(0, 1fr)); } #page-analytics #anPurchaseCosts .cb > * { grid-column: 1 / -1; } #page-analytics #anPurchaseCosts .cb > .r30-cost-row { grid-column: auto; } #page-analytics #anPurchaseCosts .r30-cost-row { min-height: 44px; } } @media (min-width: 1440px) { /* Without the reward tile the data KPI owns the whole row; its caption moves to the far edge. */ #page-analytics .page-inner:not(:has([data-card-reward])) .r29-data-kpi { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; column-gap: 24px; } #page-analytics .page-inner:not(:has([data-card-reward])) .r29-data-kpi > span:first-child { grid-column: 1 / -1; } #page-analytics .page-inner:not(:has([data-card-reward])) .r29-data-kpi .r29-kpi-caption { justify-self: end; padding-bottom: 2px; } }