/* 2.20: fit four watched prices without shrinking their primary numbers. */
.watch-extra-compact{display:none}
.shell[data-view=asset] .asset-total{font-size:52px;font-weight:800;line-height:1.15;letter-spacing:-.025em}
.shell[data-view=asset] .asset-quick-stats strong{font-size:28px;font-weight:800;white-space:normal;overflow-wrap:anywhere}
.shell[data-view=asset] .asset-income-summary strong{font-size:28px;font-weight:800;line-height:1.25}
.shell[data-view=asset] .holding-valuation>strong{font-size:34px;font-weight:800;max-width:100%}
.shell[data-view=asset] .holding-quotes strong{font-size:26px;font-weight:800;line-height:1.3}
.shell[data-view=asset] .holding-quotes>div:first-child strong{font-size:34px}
.shell[data-view=asset] .holding-quotes>div>small{font-size:15px;font-weight:650}
@media(max-width:960px){
 /* The title and update row stay available, with no duplicate brand row. */
 .shell[data-view=watch]>.mobile-app-brand{display:none}
 .shell[data-view=watch]>.topbar{min-height:44px;height:44px;padding:0 9px;margin-bottom:0;gap:6px}
 .shell[data-view=watch]>.topbar h1{display:flex;align-items:center;gap:7px;font-size:16px;line-height:1.2}
 .shell[data-view=watch]>.topbar h1:before{content:'';width:23px;height:23px;border-radius:50%;background:#fff url('./icon.svg') center/contain no-repeat;flex-shrink:0}
 .shell[data-view=watch]>.topbar .button.primary{min-height:44px;padding:5px 8px;border-top:0;border-bottom:0;border-radius:0;font-size:11px}
 .shell[data-view=watch]>.pwa-top-controls{min-height:44px;height:44px;margin:0 0 5px;padding:0 8px;gap:6px;border-width:0 0 1px;border-radius:0;align-items:center}
 .shell[data-view=watch] .pwa-top-summary>span{font-size:11px;white-space:nowrap}
 .shell[data-view=watch] .pwa-top-summary>p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .shell[data-view=watch] .pwa-top-actions{max-width:70%;gap:4px}
 .shell[data-view=watch] .pwa-top-actions .button{min-height:44px;max-height:44px;padding:3px 8px;font-size:11px;line-height:1.25;border-top:0;border-bottom:0;border-radius:0}
 .shell[data-view=watch]+.bottom-nav{padding-top:2px;padding-bottom:calc(2px + env(safe-area-inset-bottom))}
 .shell[data-view=watch]+.bottom-nav .nav-item{min-height:48px;padding-top:4px;padding-bottom:3px;gap:2px}
 .watch-price-first .watch-grid{gap:5px}
 .watch-price-first .watch-card{position:relative;overflow:visible}
 .watch-price-first .watch-quote-row{position:relative;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1px 8px;padding:0 9px 17px}
 .watch-price-first .watch-identity{display:flex;align-items:center;min-height:44px;padding:0 93px 0 0}
 .watch-price-first .watch-card h2{font-size:14px;line-height:1.22}
 .watch-price-first .watch-card h2 .fund-link{min-height:44px;display:flex;align-items:center}
 .watch-price-first .watch-date{position:absolute;bottom:3px;left:9px;right:9px;font-size:10px;line-height:1.2;margin:0;overflow-wrap:anywhere}
 .watch-price-first .watch-price{font-size:36px;line-height:1.08}
 .watch-price-first .watch-price-label{font-size:10px;line-height:1.25;margin-bottom:1px}
 .watch-price-first .watch-price-label small{font-size:9px}
 .watch-price-first .watch-delta{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:baseline;column-gap:5px;font-size:26px;line-height:1.1}
 .watch-price-first .watch-delta>.watch-change-label{grid-column:1/-1;font-size:10px;line-height:1.25;margin-bottom:1px}
 .watch-price-first .watch-delta>strong{font-size:inherit;line-height:1.1;white-space:nowrap}
 .watch-price-first .watch-delta>strong small{font-size:10px;margin-left:2px}
 .watch-price-first .watch-delta>span{font-size:17px;line-height:1.1;margin:0;white-space:nowrap}
 .watch-price-first .watch-more-row{padding:0 9px;border-top:0;display:block}
 .watch-price-first .watch-extra>summary{position:absolute;right:44px;top:0;width:48px;height:44px;min-height:44px;padding:3px 1px;display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:10px;line-height:1.1}
 .watch-price-first .watch-extra-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .watch-price-first .watch-extra-compact{display:block}
 .watch-price-first .watch-extra-hint{width:6px;height:6px;margin:0 0 3px}
 .watch-price-first .watch-extra[open]>summary .watch-extra-hint{margin:3px 0 0}
 .watch-price-first .watch-more-row>.star-button{position:absolute;right:0;top:0;min-width:44px;min-height:44px;width:44px;height:44px}
 .watch-price-first .watch-expanded{padding:8px 0 12px;border-top:1px solid #e1e6ee}
 .watch-price-first .watch-extra[open]{padding-top:0}
 .watch-tools{margin-top:16px}
 /* Asset figures can use the full card width instead of squeezing a number column. */
 .shell[data-view=asset] .asset-overview{padding:17px 15px}
 .shell[data-view=asset] .asset-overview-top{align-items:flex-start;gap:12px}
 .shell[data-view=asset] .asset-overview-top>div{width:100%}
 .shell[data-view=asset] .asset-overview h2{font-size:14px}
 .shell[data-view=asset] .asset-total{font-size:44px;line-height:1.12;margin-top:7px}
 .shell[data-view=asset] .asset-total>span{font-size:16px;font-weight:500}
 .shell[data-view=asset] .asset-total-edit{min-height:44px;font-size:12px}
 .shell[data-view=asset] .asset-overview-bottom{font-size:12px}
 .shell[data-view=asset] .asset-overview-bottom strong{font-size:16px;font-weight:750}
 .shell[data-view=asset] .asset-quick-stats{grid-template-columns:1fr;gap:7px}
 .shell[data-view=asset] .asset-quick-stats>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px 12px;padding:12px}
 .shell[data-view=asset] .asset-quick-stats>div>span{font-size:12px}
 .shell[data-view=asset] .asset-quick-stats strong{font-size:28px;line-height:1.2;max-width:100%}
 .shell[data-view=asset] .asset-income-summary{grid-template-columns:1fr;gap:12px}
 .shell[data-view=asset] .asset-income-summary strong{font-size:28px}
 .shell[data-view=asset] .holding-main{grid-template-columns:minmax(0,1fr);gap:10px}
 .shell[data-view=asset] .holding-identity h3{font-size:16px}
 .shell[data-view=asset] .holding-date{font-size:11px}
 .shell[data-view=asset] .holding-valuation{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:right;max-width:100%}
 .shell[data-view=asset] .holding-valuation>span{font-size:12px;flex-shrink:0}
 .shell[data-view=asset] .holding-valuation>strong{font-size:32px;max-width:100%;min-width:0;line-height:1.2}
 .shell[data-view=asset] .holding-valuation small{font-size:12px}
 .shell[data-view=asset] .holding-quotes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .shell[data-view=asset] .holding-quotes>div>span{font-size:12px}
 .shell[data-view=asset] .holding-quotes strong{font-size:26px;line-height:1.25;margin-top:4px}
 .shell[data-view=asset] .holding-quotes>div:first-child strong{font-size:32px}
 .shell[data-view=asset] .holding-quotes>div:nth-child(3){grid-column:1/-1;border-top:1px solid #edf0f5;padding-top:10px}
 .shell[data-view=asset] .holding-quotes>div>small{font-size:15px;line-height:1.4}
 .shell[data-view=asset] .holding-quotes strong small{font-size:12px}
 .shell[data-view=asset] .holding-actions .button.text,.shell[data-view=asset] .holding-actions>a{min-height:44px;font-size:12px}
 .shell[data-view=asset] .holding-public-income{font-size:12px}
 .shell[data-view=asset] .holding-public-income strong{font-size:16px}
 .shell[data-view=asset] .metrics-grid .money-large{font-size:30px!important;font-weight:800;overflow-wrap:anywhere}
}
@media(max-width:360px){
 .watch-price-first .watch-price{font-size:32px}
 .watch-price-first .watch-delta{font-size:24px;column-gap:3px}
 .watch-price-first .watch-delta>span{font-size:17px}
 .watch-price-first .watch-card h2{font-size:13px}
 .shell[data-view=asset] .asset-total{font-size:40px}
 .shell[data-view=asset] .asset-quick-stats strong{font-size:26px}
 .shell[data-view=asset] .holding-quotes strong{font-size:24px}
}
/* Small portrait displays show a 2 x 2 board, retaining 32px / 24px figures. */
@media(max-width:960px) and (max-height:740px){
 .watch-price-first .watch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .watch-price-first .watch-quote-row{grid-template-columns:minmax(0,1fr);gap:0;padding:3px 7px 16px}
 .watch-price-first .watch-identity{min-height:48px;padding:0;align-items:center}
 .watch-price-first .watch-card h2{font-size:13px;line-height:1.2}
 .watch-price-first .watch-card h2 .fund-link{min-height:44px}
 .watch-price-first .watch-price{font-size:clamp(32px,9.6vw,36px);line-height:1.05}
 .watch-price-first .watch-price-label{font-size:10px;line-height:1.2;margin-bottom:0}
 .watch-price-first .watch-delta{grid-template-columns:auto auto;justify-content:space-between;font-size:clamp(24px,6.94vw,26px);column-gap:3px;margin-top:3px}
 .watch-price-first .watch-delta>.watch-change-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .watch-price-first .watch-delta>span{font-size:17px;line-height:1.1}
 .watch-price-first .watch-delta>strong small{font-size:9px}
 .watch-price-first .watch-date{font-size:9px;bottom:3px;left:7px;right:7px;line-height:1.2}
 .watch-price-first .watch-more-row{display:flex;align-items:flex-start;gap:0;padding:0 0 0 7px;border-top:1px solid #e1e6ee}
 .watch-price-first .watch-extra{min-width:0;flex:1}
 .watch-price-first .watch-extra>summary{position:static;width:100%;height:44px;display:flex;flex-direction:row;justify-content:space-between;gap:3px;font-size:10px;padding:2px 4px 2px 0}
 .watch-price-first .watch-extra-compact{display:none}
 .watch-price-first .watch-extra-text{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal;border:0}
 .watch-price-first .watch-more-row>.star-button{position:static;flex-shrink:0}
 .watch-price-first .watch-extra[open] .watch-expanded{padding-right:7px}
 .watch-price-first .watch-card:has(.watch-extra[open]){grid-column:1/-1}
 .watch-price-first .watch-card:has(.watch-extra[open]) .watch-quote-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .watch-price-first .watch-card:has(.watch-extra[open]) .watch-identity{grid-column:1/-1}
 .watch-price-first .watch-card:has(.watch-extra[open]) .watch-delta{align-self:end}
}