/* Compact layer: tighter cards, smaller headings and less empty space across the whole app.
   Loaded last so it wins over the older stylesheets. */

/* Page intro: short heading, two lines of text at most */
.shell .intro { gap: 10px; margin-bottom: 12px; }
.shell .intro h1 { font-size: clamp(1.45rem, 6vw, 2rem) !important; line-height: 1.12; margin: 4px 0 !important; }
.shell .intro p { font-size: .9rem; line-height: 1.45; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shell .intro .eyebrow { font-size: .66rem; }

/* Panels and cards: less padding, smaller titles, tighter gaps */
.shell .panel, .shell article.panel { padding: 14px 16px !important; border-radius: 18px !important; }
.shell .panel h2 { font-size: 1.12rem !important; margin: 2px 0 6px !important; }
.shell .panel h3 { font-size: 1rem !important; margin: 0 0 6px !important; }
.shell .panel p { font-size: .88rem; line-height: 1.45; margin: 4px 0; }
.shell .panel .eyebrow, .shell .panel .chip { font-size: .64rem; }
.shell .two-col, .shell .grid, .shell .shopping-grid, .shell .wealth-grid, .shell .destination-grid { gap: 10px !important; }
.shell .section-heading { margin: 16px 0 8px !important; }
.shell .section-heading h2 { font-size: 1.15rem !important; }
.shell .space { margin-top: 10px; }
.shell .note { font-size: .78rem; line-height: 1.4; }

/* Big score numbers (like "52/100") at a calmer size */
.shell .panel .big, .shell .panel .score, .shell .panel .metric, .shell .circle-score { font-size: 2rem !important; line-height: 1; }

/* Activity cards: two tight rows instead of a tall card */
.shell .activity.act { display: grid; gap: 4px; padding: 12px 14px !important; border-radius: 16px !important; text-align: left; min-height: 0 !important; }
.shell .act-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.shell .act-title { display: grid; gap: 1px; min-width: 0; }
.shell .act .category { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin: 0; }
.shell .act h3 { font-size: .98rem !important; margin: 0 !important; line-height: 1.2; }
.shell .act-price { flex: none; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shell .act-desc { margin: 0 !important; font-size: .8rem !important; line-height: 1.35; opacity: .72; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.shell .act-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: .72rem; }
.shell .act-meta .reward-preview { margin: 0 !important; font-size: .72rem !important; }
.shell .act-meta .effects { opacity: .75; }
.shell .activity-grid, .shell .activities { gap: 8px !important; }

/* Story choices and goal rows a little tighter */
.shell .story { padding: 16px !important; }
.shell .story h2 { font-size: 1.2rem !important; }
.shell .choice { padding: 10px 12px !important; }
.shell .goal-row, .shell .budget-row { padding: 6px 0 !important; }

/* Lists and feature links */
.shell .feature-link { padding: 12px 14px !important; }
.shell .asset-card { padding: 12px 14px !important; }

/* Two-column info panels stack tightly on phones, and the circle score sits inline */
.shell .circle-score { display: inline-block; font-size: 2.1rem !important; margin: 2px 0 4px; }
@media (max-width: 760px) { .shell .two-col { grid-template-columns: 1fr !important; } }

/* Top bar balance: first name and amount on one line */
.shell .wallet-pill { display: inline-flex !important; align-items: center; white-space: nowrap; }

/* Stat tiles (cash, debt, happiness, energy): smaller and the figures never wrap */
.shell .stats { gap: 8px !important; }
.shell .stat { padding: 12px 14px !important; border-radius: 16px !important; min-height: 0 !important; gap: 4px !important; }
.shell .stat .label { font-size: .72rem !important; }
.shell .stat .value { font-size: clamp(1.15rem, 5.4vw, 1.6rem) !important; line-height: 1.15 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shell .stat small { font-size: .7rem !important; line-height: 1.3; }

/* Home quick links */
.shell .home-links a, .shell .home-links button, .shell .quick-links > * { min-height: 48px !important; padding: 10px 12px !important; }

/* Foreign-currency balances you can tap to convert */
.shell .bank-card-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.shell .bank-foot-chip { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: inherit; font: inherit; font-size: .78rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.shell .bank-foot-chip b { color: #a7f3d0; margin-left: 2px; }
.shell .acct-convert { min-height: 32px !important; padding: 0 12px !important; font-size: .78rem !important; margin-left: 8px; }

/* Home Studio explainer */
.shell .home-explain { margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; background: rgba(167,243,208,.08); border: 1px solid rgba(167,243,208,.18); font-size: .84rem; line-height: 1.45; }