
/* My Portfolio AI 3.6 — portrait phone UI. Desktop retains V3.5 layout. */
.mobile-tabbar,.mobile-list-link{display:none}.provider-details{max-width:1450px;margin:10px auto 0;padding:0 16px;border:1px solid #345272;border-radius:9px;background:#10273a;color:#b6d4f1;font-size:13px;overflow:hidden}.provider-details summary{cursor:pointer;font-weight:600;list-style:revert;padding:9px 0;min-height:40px}.provider-details>div{padding:3px 0 12px;line-height:1.7}.provider-details a{color:#93c5fd}
:where(.panel,.grid,.two,section,.flex,.formgrid,.listrow,.stat,.chart-box){min-width:0}
#allocLegend .listrow,#risk .listrow{align-items:start}#allocLegend .listrow span,#risk .listrow span{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){
 html{font-size:15px}body{width:100%;max-width:100%;overflow-x:clip;line-height:1.55}
 header{padding:13px 14px 10px;display:block}header>div:first-child{max-width:100%}header h1{font-size:20px;letter-spacing:-.3px}header>div:first-child small{display:block;line-height:1.6;margin-top:3px;font-size:11px}
 header>.flex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;width:100%}
 header>.flex>*{min-width:0;width:100%;margin:0!important;text-align:center}
 header .pill{display:flex;align-items:center;justify-content:center;line-height:1.35;min-height:34px;padding:5px 6px;white-space:normal;overflow-wrap:anywhere}
 header .flex button,header .flex a{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:10px;font-size:13px;padding:7px 9px}
 header #refreshTop{grid-column:1/-1;font-size:15px;font-weight:650;background:#2462bb;border-color:#3678d8}
 header .flex a{border:1px solid #34455e;text-decoration:none!important}
 .provider-details{margin:7px 12px 0;padding:0 12px;font-size:12px}.provider-details>div{overflow-wrap:anywhere}
 main{padding:10px 12px 32px!important;width:100%;max-width:100%}
 nav{display:none!important}
 .mobile-tabbar{display:block;position:sticky;top:0;z-index:20;background:rgba(11,18,32,.97);border:1px solid #385273;border-radius:12px;padding:10px 12px;margin-bottom:14px;box-shadow:0 8px 20px #0004}
 .mobile-tabbar label{display:block;color:#9aabc3;font-size:11px;margin-bottom:4px}
 .mobile-tabbar select{width:100%;height:44px;font-size:16px;font-weight:650;background:#1e3454;border-color:#3c6595}
 .grid,#dashboard>.grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:10px}
 .span2,.span4,#dashboard .span2,#dashboard .span4{grid-column:1/-1!important}
 .panel{border-radius:13px;padding:13px;margin-bottom:12px;min-width:0}
 h2{font-size:16px;margin-bottom:10px}small,.muted,.mutedline{overflow-wrap:anywhere}
 #dashboard>.grid>.stat{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:13px 14px;gap:10px;margin-bottom:0}
 #dashboard>.grid>.stat small{font-size:12px;line-height:1.45;flex:1;min-width:0;max-width:56%}
 #dashboard>.grid>.stat .value{font-size:clamp(18px,5.4vw,25px);font-weight:750;text-align:right;line-height:1.2;margin:0;overflow-wrap:anywhere;min-width:0;flex:1}
 #dashboard>.grid>.panel:not(.stat){margin-bottom:0}
 #dashboard #allocLegend .listrow{gap:10px;font-size:13px}#dashboard #risk .listrow{font-size:13px}#dashboard #risk strong{white-space:nowrap}
 .two{grid-template-columns:1fr!important;gap:10px}
 .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px}
 input,textarea,select{min-width:0;max-width:100%;font-size:16px}
 label{overflow-wrap:anywhere}button{touch-action:manipulation}
 .panel>.flex.space{align-items:stretch;gap:10px}
 .panel>.flex.space>div{max-width:100%;min-width:0}
 .panel>.flex.space>.flex{display:flex;flex-wrap:wrap;gap:7px}
 .panel>.flex.space>.flex>*{min-width:0}
 #analysis .panel>.flex.space>.flex,#chart .panel>.flex.space>.flex{width:100%}
 #analysisTicker,#chartTicker{width:100%!important;max-width:none!important;min-width:0!important;flex:1 0 100%}
 #fetchHistory,#chartLoad{min-height:42px;width:100%}
 #chart .panel>.flex:not(.space){gap:7px;align-items:center}
 #chart .range-btn{flex:1 1 21%;padding:9px 4px;white-space:nowrap}
 #chartIndicator{width:auto;flex:1 1 32%;min-width:100px}
 #chartReset{flex:1 0 auto}
 #chart .chartlegend{font-size:11px;gap:9px 12px}
 #chart .chartlegend .muted{flex:1 0 100%}
 #chartBox{max-width:100%;overflow:hidden}#chartBox canvas{width:100%!important;max-height:none!important;min-height:0!important;height:auto!important;touch-action:none}
 #chartMetrics .pill,#chartDecision .pill{white-space:normal;overflow-wrap:anywhere}
 #assetCanvas{width:100%;height:auto!important;min-height:0!important;max-height:none!important}
 .chart-tooltip{overflow-wrap:anywhere;font-size:12px}
 #performanceCards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #performanceCards .stat-mini{padding:10px;min-width:0}#performanceCards .stat-mini strong{font-size:clamp(15px,4.3vw,20px);overflow-wrap:anywhere}
 .note,#syncStatus,#alertSummary{font-size:13px;overflow-wrap:anywhere}
 #syncCode{font-size:14px;letter-spacing:.3px}
 #syncPanel .flex button{flex:1 1 145px;min-height:44px;white-space:normal}
 #assistant #promptType{width:100%;max-width:none!important}#assistant textarea{font-size:13px;min-height:340px!important}
 #alertList .alert-row{display:block}#alertList .alert-row>*{max-width:100%;overflow-wrap:anywhere}
 /* Mobile tables become cards: no horizontal scrolling of the entire page. */
 .scroll{max-height:none;overflow:visible!important;width:100%;min-width:0}
 .scroll table{display:block;width:100%;table-layout:auto;white-space:normal!important;font-size:13px}
 .scroll thead{display:none}
 .scroll tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%}
 .scroll tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;background:#101e31;border:1px solid #2a3e57;border-radius:12px;padding:12px;min-width:0}
 .scroll tbody td{display:flex;flex-direction:column;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere;min-width:0;min-height:0;border:0;padding:0;line-height:1.48;font-size:13px}
 .scroll tbody td::before{content:attr(data-label);display:block;color:#90a4c0;font-size:10px;line-height:1.5;font-weight:500;margin:0 0 3px}
 .scroll tbody td:first-child{grid-column:1/-1;border-bottom:1px solid #2e4059;padding-bottom:8px;margin-bottom:3px;font-size:15px}
 .scroll tbody td:first-child::before{display:none}
 .scroll tbody td:first-child strong{font-size:17px;line-height:1.15;letter-spacing:.2px}
 .scroll tbody td:first-child small{font-size:12px;line-height:1.3}
 .scroll tbody td:last-child:has(button){grid-column:1/-1;display:flex;flex-direction:row;gap:8px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid #2e4059}
 .scroll tbody td:last-child:has(button)::before{display:none}
 .scroll tbody td:last-child button{min-height:38px;flex:1 1 90px}
 #quickTable td:nth-child(2),#quickTable td:nth-child(4),#quickTable td:nth-child(9){display:none}
 #quickTable tbody tr:nth-child(n+6){display:none}
 #snapshotsTable:not(.mobile-expanded) tbody tr:nth-child(n+6){display:none}
 .mobile-list-link{display:block;width:100%;min-height:44px;margin:12px 0 0;border-color:#3a668f;color:#afd3ff;font-weight:650;background:#122943}

 #quickTable td:last-child button[data-delete]{display:none}
 #quickTable td:nth-child(7){font-weight:650}
 #holdingsTable td:nth-child(9){grid-column:1/-1;color:#93a6bf;font-size:11px}
 #signalTable td:last-child{grid-column:1/-1}
 #snapshotsTable td:first-child,#flowsTable td:first-child{font-weight:650}
 #priceAlertTable td:last-child:has(button){grid-column:auto;justify-content:end;border:0;padding:0}
 footer{font-size:12px;overflow-wrap:anywhere}
}
@media(max-width:370px){
 header h1{font-size:18px}header>.flex{gap:6px}
 #dashboard>.grid>.stat .value{font-size:19px}
 .formgrid{grid-template-columns:minmax(0,1fr)!important}
 #performanceCards{grid-template-columns:1fr!important}
 .panel{padding:11px}
 .scroll tbody tr{padding:10px;gap:5px 9px}
}
@media(min-width:701px){.provider-details{max-width:1450px}}
