/* Main bottom-nav Insights only. Warm paper, deep teal, visual hierarchy. */
#screen-trends { background: #f6f5ef; color:#243d39; }
#screen-trends .monthly-trends { min-width:0; max-width:760px; margin:auto; padding-bottom:100px; }
.monthly-trends .ins-intro { padding:20px 2px 24px; }
.monthly-trends .ins-eyebrow { font-size:10px; letter-spacing:.18em; font-weight:800; color:#51736b; }
.monthly-trends .ins-intro h1 { font-size:clamp(27px,7vw,38px); line-height:1.12; letter-spacing:-.045em; margin:12px 0; color:#193f38; }
.monthly-trends .ins-intro p { color:#65766c; font-size:14px; margin:0; }
.monthly-trends .ins-overview { margin-bottom:24px; }
.monthly-trends .ins-drawer { background:#fffdf9; border:1px solid #e3e7de; border-radius:22px; margin:14px 0; box-shadow:0 5px 18px #183f3205; overflow:hidden; min-width:0; }
.monthly-trends .ins-drawer > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; min-height:44px; cursor:pointer; }
.monthly-trends summary::-webkit-details-marker { display:none; }
.monthly-trends summary b { display:block; font-size:16px; line-height:1.35; letter-spacing:-.02em; }
.monthly-trends summary small { display:block; color:#61736b; font-size:12px; line-height:1.5; margin-top:6px; font-variant-numeric:tabular-nums; }
.monthly-trends .ins-chevron { font-size:24px; color:#557b6b; flex-shrink:0; transition:transform .15s; }
.monthly-trends details[open] > summary .ins-chevron { transform:rotate(180deg); }
.monthly-trends details[open] > summary { border-bottom:1px solid #e7ebe1; }
.monthly-trends .ins-drawer-body { padding:18px 20px; }
.monthly-trends .ins-trend-drawer .insights-card { border:0; padding:0; box-shadow:none; margin:0; background:transparent; }
.monthly-trends .ins-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.monthly-trends .ins-metric { padding:14px 10px; min-width:0; background:#f3f4ed; border-radius:13px; }
.monthly-trends .ins-metric small { display:block; color:#62746a; font-size:11px; line-height:1.4; }
.monthly-trends .ins-metric strong { display:block; color:#273d37; font-size:clamp(17px,5vw,23px); letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin-top:7px; overflow-wrap:anywhere; }
.monthly-trends .ins-positive { background:#eaf2e7; }
.monthly-trends .ins-positive strong { color:#22634e; }
.monthly-trends .ins-flow-bars { display:grid; gap:14px; margin:24px 0; }
.monthly-trends .ins-flow-bars span { font-size:11px; display:block; margin-bottom:6px; }
.monthly-trends .ins-flow-bars i { display:block; height:12px; border-radius:4px; background:#43836c; }
.monthly-trends .ins-flow-bars > div:nth-child(2) i { background:#d6a467; }
.monthly-trends .ins-ring { position:relative; height:195px; width:195px; margin:0 auto 22px; }
.monthly-trends .ins-allocation-row { padding:12px 0; }
.monthly-trends .ins-allocation-row > div:first-child, .monthly-trends .ins-simple-row { display:flex; justify-content:space-between; gap:14px; align-items:baseline; font-size:13px; }
.monthly-trends .ins-allocation-row span, .monthly-trends .ins-simple-row span { min-width:0; overflow-wrap:anywhere; }
.monthly-trends .ins-allocation-row strong, .monthly-trends .ins-simple-row strong { text-align:right; font-variant-numeric:tabular-nums; flex-shrink:0; }
.monthly-trends .ins-allocation-row small { font-size:10px; color:#64736d; }
.monthly-trends .ins-bar-track { height:7px; border-radius:4px; background:#edf0e8; margin:8px 0 3px; overflow:hidden; }
.monthly-trends .ins-bar-track i { display:block; height:100%; background:#57917e; border-radius:4px; }
.monthly-trends .ins-bar-track .ins-over { background:#bc7961; }
.monthly-trends .ins-simple-row { padding:16px 0; border-bottom:1px solid #edf0e8; }
.monthly-trends .ins-collapse { margin-top:18px; padding:11px 0; border:0; background:transparent; color:#436e5e; font:inherit; font-size:12px; cursor:pointer; min-height:44px; }
.monthly-trends .ins-empty-hint { font-size:11px; line-height:1.6; color:#65766c; }
.monthly-trends h2,.monthly-trends h3 { font-size:13px; margin:18px 0 10px; }
.monthly-trends .trend-current { display:flex; align-items:center; gap:8px; font-size:12px; padding:10px 0; }
.monthly-trends .trend-control { display:grid; gap:7px; font-size:11px; color:#5b7165; margin:14px 0; }
.monthly-trends .trend-control select,.monthly-trends .trend-control input { box-sizing:border-box; min-width:0; width:100%; max-width:100%; padding:12px; border:1px solid #d9e1d6; border-radius:12px; background:#fffdf9; color:#234b3b; font:inherit; font-size:14px; min-height:44px; }
.monthly-trends .trend-chart { position:relative; height:180px; min-width:0; width:100%; }
.monthly-trends .trend-value { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.6; }
.monthly-trends .trend-mover { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:12px 0; border-bottom:1px solid #edf0e8; font-size:12px; }
.monthly-trends .trend-mover strong { text-align:right; font-variant-numeric:tabular-nums; }
.monthly-trends .trend-mover small { display:block; font-size:10px; font-weight:400; color:#65766c; margin-top:4px; }
.monthly-trends .ai-grocery-card { margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.monthly-trends button:focus-visible,.monthly-trends summary:focus-visible,.monthly-trends select:focus-visible { outline:3px solid #a6bd7d; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .monthly-trends * { transition:none!important; scroll-behavior:auto!important; } }