/* Approved UX direction: equal contexts, quiet surfaces and progressive detail. */
body.ux-r311 { background:var(--ux-bg); }
body.ux-r311 #appScreen.app { background:var(--ux-bg)!important; }
body.ux-r311 .app-header { flex-wrap:wrap; height:auto!important; gap:12px; background:var(--ux-bg)!important; }
body.ux-r311 .app-header:after,body.ux-r311 .app-header:before { display:none!important; }
.ux-context { grid-column:1/-1; flex:1 0 100%; width:100%; min-width:0; }
.ux-context[hidden] { display:none!important; }
.ux-context-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:4px; gap:4px; background:var(--ux-panel); border:1px solid var(--ux-line); border-radius:14px; }
.ux-context-options button { display:flex; justify-content:center; align-items:center; gap:8px; padding:12px 16px; min-height:48px; border:0; border-radius:10px; background:transparent; color:var(--ux-muted); font:600 14px/1.35 'DM Sans',sans-serif; cursor:pointer; }
.ux-context-options button[aria-pressed=true] { background:var(--ux-soft); color:var(--ux-accent); }
.ux-context-options svg { width:18px; height:18px; flex:none; }
.ux-context-options button:disabled { opacity:.65; cursor:wait; }
.ux-company-select { display:flex; align-items:center; gap:10px; margin-top:6px; color:var(--ux-muted); font-size:12px; }
.ux-company-select[hidden] { display:none; }
.ux-company-select select { flex:1; width:0; min-width:0; padding:9px 12px; min-height:44px; background:var(--ux-panel); color:var(--ux-text); border:1px solid var(--ux-line); border-radius:10px; font-size:14px; }
body.ux-r311 #page-home,body.ux-r311 #businessDashboard { min-width:0; }
body.ux-r311 #homeReportPanel { display:block!important; }
body.ux-r311 #appScreen > .hero-card { display:none!important; }
body.ux-r311 #page-home > .chart-card,body.ux-r311 #page-home > .insight-card,body.ux-r311 #categoryHighlights { display:none!important; }
.ux-overview { width:100%; min-width:0; color:var(--ux-text); }
.ux-overview > header { margin:0 0 16px; }
.ux-overview h2 { margin:0 0 5px; font:600 clamp(22px,3vw,28px)/1.25 'DM Sans',sans-serif; letter-spacing:-.5px; }
.ux-overview header p,.ux-muted { color:var(--ux-muted); font-size:13px; margin:0; }
.ux-summary { border:1px solid var(--ux-line); background:var(--ux-panel); border-radius:16px; padding:20px; margin-bottom:20px; }
.ux-summary > span,.ux-summary small,.ux-summary-pair span { display:block; color:var(--ux-muted); font-size:13px; }
.ux-main-value { display:block; margin:7px 0 10px; font:600 clamp(28px,4vw,36px)/1.2 'DM Sans',sans-serif; letter-spacing:-.8px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ux-summary-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-top:16px; margin-top:16px; border-top:1px solid var(--ux-line); }
.ux-summary-pair b { display:block; margin-top:5px; font:500 16px/1.4 'DM Sans',sans-serif; overflow-wrap:anywhere; }
.ux-section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:10px 0 0; }
.ux-section-head h3 { font:600 16px/1.4 'DM Sans',sans-serif; margin:0; }
.ux-section-head button { border:0; background:none; color:var(--ux-accent); padding:12px 0; min-height:48px; cursor:pointer; font:500 13px/1.4 'DM Sans',sans-serif; }
.ux-due-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; border-bottom:1px solid var(--ux-line); padding:15px 0; }
.ux-due-row b { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.ux-due-row small { display:block; margin-top:4px; color:var(--ux-muted); font-size:12px; }
.ux-due-row strong { font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.ux-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.ux-shortcuts button { width:100%; min-width:0; padding:12px 16px; min-height:48px; border:1px solid var(--ux-line); border-radius:12px; background:var(--ux-panel); color:var(--ux-text); font:500 14px/1.4 'DM Sans',sans-serif; overflow-wrap:anywhere; cursor:pointer; }
.ux-analysis-details { min-width:0; margin-top:16px; border-top:1px solid var(--ux-line); }
.ux-analysis-details > summary { padding:16px 0; min-height:48px; cursor:pointer; color:var(--ux-muted); font-size:14px; font-weight:500; }
body.ux-r311 .business-dashboard,body.ux-r311 .home-report-panel { gap:16px; }
body.ux-r311 :is(.business-hero,.business-panel,.business-management-card,.business-primary-metrics article,.wallet-kpi,.ofx-invest-panel,.ofx-invest-v2-header,.ofx-invest-summary-grid article,.ofx-invest-asset-card,.chat-wrap,.chat-card) { background:var(--ux-panel)!important; border-color:var(--ux-line)!important; box-shadow:none!important; }
body.ux-r311 :is(.business-hero,.business-management-card,.wallet-kpi,.ofx-invest-panel,.ofx-invest-v2-header)::before,
body.ux-r311 :is(.business-hero,.business-management-card,.wallet-kpi,.ofx-invest-panel,.ofx-invest-v2-header)::after { display:none!important; }
body.ux-r311 :is(.btn-primary,.nav-fab) { background:var(--primary)!important; box-shadow:none!important; }
body.ux-r311 :is(.business-tx-sheet,.sheet,.ofx-invest-detail-sheet) { background:var(--ux-bg); }
body.ux-r311 .business-tx-head { padding:18px 20px 14px; }
body.ux-r311 .business-tx-head h3 { font:600 24px/1.25 'DM Sans',sans-serif; }
body.ux-r311 .business-tx-head p { font-size:13px; }
body.ux-r311 .business-tx-scroll { gap:14px; padding:16px 20px; }
body.ux-r311 .business-tx-scroll label { font-size:13px; letter-spacing:0; text-transform:none; }
body.ux-r311 .business-tx-scroll :is(input,select,textarea) { min-height:48px; height:auto; padding:12px 14px; font:400 16px/1.4 'DM Sans',sans-serif; border-radius:12px; }
body.ux-r311 .business-tx-actions { padding:16px 20px max(16px,var(--oliver-safe-bottom,0px)); background:var(--ux-bg); }
body.ux-r311 .business-tx-actions .btn { padding:12px 16px!important; }
body.ux-r311 .ofx-invest-v2-header { padding:20px; border-radius:16px; gap:16px; }
body.ux-r311 .ofx-invest-actions { flex-wrap:wrap; gap:10px; }
body.ux-r311 .ofx-invest-actions button { min-width:0; min-height:48px; height:auto; padding:12px 16px; white-space:normal; line-height:1.4; }
body.ux-r311 .ofx-invest-v2-result > small { display:block; margin-top:8px; }
body.ux-r311 #page-investment .ofx-invest-v2-header strong { font-weight:600; font-family:'DM Sans',sans-serif; }
body.ux-r311 #page-investment .ofx-invest-actions button:last-child { background:var(--primary)!important; box-shadow:none!important; }
body.ux-r311 .ux-invest-overview { display:flex; flex-direction:column; gap:16px; }
body.ux-r311 .ux-invest-overview .ofx-invest-allocation-card { order:-1; }
body.ux-r311 .ofx-invest-donut { display:none; }
body.ux-r311 .ofx-invest-donut-layout { display:block; }
body.ux-r311 .ofx-invest-summary-grid { display:none; } /* All four values remain in the main investment header. */
body.ux-r311 .ofx-invest-allocation-row { padding-block:14px; border-bottom:1px solid var(--ux-line); }
body.ux-r311 .ofx-invest-panel { border-radius:16px; padding:18px; }
body.ux-r311 .chat-wrap { background:var(--ux-bg)!important; }
body.ux-r311 .chat-msg.bot { background:var(--ux-panel)!important; box-shadow:none!important; }
.ux-entry-review { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; margin:auto; padding:24px; border:1px solid var(--ux-line); border-radius:20px; background:var(--ux-bg); color:var(--ux-text); font-family:'DM Sans',sans-serif; }
.ux-entry-review::backdrop { background:rgba(0,0,0,.75); }
.ux-entry-review h3 { margin:0 0 8px; font-size:23px; }
.ux-entry-review p { margin:0 0 16px; color:var(--ux-muted); font-size:14px; }
.ux-entry-review dl { margin:0; }
.ux-entry-review dl > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--ux-line); font-size:14px; }
.ux-entry-review dt { color:var(--ux-muted); }
.ux-entry-review dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.ux-review-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.ux-review-actions .btn { flex:1 1 140px; }
@media(min-width:900px) {
  .ux-context { max-width:640px; }
  .ux-overview { max-width:820px; margin-inline:auto; }
  body.ux-r311 .ux-invest-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
}
@media(max-width:899px) {
  body.ux-r311 #appScreen > .app-header { padding:12px 16px!important; }
  html.cap-native body.ux-r311 #appScreen > .app-header { padding-top:calc(12px + var(--oliver-safe-top))!important; padding-left:calc(16px + var(--oliver-safe-left))!important; padding-right:calc(16px + var(--oliver-safe-right))!important; }
  body.ux-r311 #page-home { padding:16px!important; }
  body.ux-r311 .ofx-invest-v2-header { display:grid; grid-template-columns:minmax(0,1fr); }
  body.ux-r311 .ofx-invest-tabs { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px!important; overflow:visible!important; }
  body.ux-r311 .ofx-invest-tabs button { min-width:0!important; min-height:48px!important; height:auto!important; padding:12px!important; white-space:normal!important; font-size:13px!important; }
  body.ux-r311 .nav-fab { width:52px!important; height:52px!important; min-height:52px!important; border-radius:14px!important; transform:none!important; }
  body.ux-r311 .bottom-tabs { background:var(--ux-bg)!important; box-shadow:none!important; }
  body.ux-r311 .business-primary-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ux-r311 .business-primary-metrics article { min-width:0; padding:14px; }
}
@media(max-width:359px) { .ux-summary { padding:16px; } .ux-due-row { grid-template-columns:minmax(0,1fr); gap:5px; } .ux-due-row strong { text-align:right; } }