/* History above allocation; holdings remain alongside both on wide screens. */
#balance-view #balance-updated { display:none; }
#balance-view .balance-update-row:not(:has(button:not([hidden]))) { display:none; }
#balance-view { --balance-card-gap: 12px; }
#balance-view .balance-hero { margin-bottom: var(--balance-card-gap); }
#balance-view .balance-overview-grid {
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  gap: var(--balance-card-gap);
}
.portfolio-history-card { grid-column: 1; grid-row: 1; padding: 20px 16px 14px; }
#balance-view .balance-overview-grid > .allocation-card { grid-column: 1; grid-row: 2; padding-inline:16px; }
#balance-view .balance-overview-grid > .asset-table { grid-column: 2; grid-row: 1 / 3; max-height: 900px; }
.portfolio-history-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.portfolio-history-header h2 { margin:0; font-size:16px; font-weight:650; letter-spacing:-.015em; }
.portfolio-history-periods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; padding:4px; gap:3px; border-radius:10px; background:rgba(141,162,184,.08); border:1px solid rgba(141,162,184,.07); }
.portfolio-history-periods button { padding:6px 11px; min-height:30px; border:0; border-radius:7px; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:550; line-height:18px; white-space:nowrap; cursor:pointer; transition:background .15s ease,color .15s ease; }
.portfolio-history-periods button:hover { color:var(--text,#eef4fa); background:rgba(141,162,184,.07); }
.portfolio-history-periods button[aria-pressed="true"] { background:#273640; color:#eef4fa; box-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 0 0 1px rgba(141,162,184,.12); }
.portfolio-history-periods button:focus-visible { outline:2px solid #59c8ff; outline-offset:2px; }
.portfolio-history-plot svg:focus { outline:none; }
.portfolio-history-plot svg:focus-visible .portfolio-history-cursor.portfolio-history-dot { stroke:#59c8ff; stroke-width:3; }
.portfolio-history-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; min-height:40px; margin-top:18px; }
.portfolio-history-summary strong { font-size:26px; line-height:1.25; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.portfolio-history-summary span { font-size:12px; color:var(--muted); }
.portfolio-history-plot { position:relative; min-width:0; height:246px; user-select:none; -webkit-user-select:none; }
.portfolio-history-plot svg { display:block; width:100%; height:100%; touch-action:pan-y; overflow:visible; }
.portfolio-history-grid { stroke:rgba(141,162,184,.13); stroke-width:1; }
.portfolio-history-axis { fill:var(--muted); font-size:10px; font-family:inherit; font-variant-numeric:tabular-nums; }
.portfolio-history-line { stroke:#2bd3a0; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.portfolio-history-area { fill:rgba(43,211,160,.085); }
.portfolio-history-dot { fill:#2bd3a0; stroke:var(--panel); stroke-width:2; }
.portfolio-history-cursor { stroke:rgba(43,211,160,.4); stroke-dasharray:3 4; }
.portfolio-history-cursor.portfolio-history-dot { stroke:var(--panel); stroke-dasharray:none; }
.portfolio-history-empty { position:absolute; inset:0 0 30px; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--muted); font-size:13px; pointer-events:none; }
.portfolio-history-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; margin-top:2px; }
.portfolio-history-card footer[hidden] { display:none; }
.portfolio-history-card footer button { font:inherit; font-size:12px; background:transparent; border:0; color:var(--accent); cursor:pointer; }
@media(max-width:1100px) { .portfolio-history-card { padding:16px 12px 12px; } #balance-view .balance-overview-grid > .allocation-card { padding-inline:12px; } .portfolio-history-header { gap:12px; } }
@media(max-width:900px) {
  #balance-view .balance-overview-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; }
  #balance-view .balance-overview-grid > .portfolio-history-card,
  #balance-view .balance-overview-grid > .allocation-card,
  #balance-view .balance-overview-grid > .asset-table { grid-column:1; grid-row:auto; max-height:none; }
  .portfolio-history-header h2 { font-size:15px; }
  .portfolio-history-summary strong { font-size:25px; }
}
@media(max-width:420px) {
  .portfolio-history-header { display:grid; grid-template-columns:1fr; }
  .portfolio-history-periods { justify-self:stretch; justify-content:space-between; }
  .portfolio-history-periods button { flex:1; }
}

/* A desktop dashboard has one height budget, not three content-sized panels.
   Lists own their overflow; headers, chart and navigation stay in the viewport. */
@media(min-width:901px) and (min-height:620px) {
  body.app-layout .shell:has(#balance-view:not([hidden])) { padding-top:8px; }
  body.app-layout .shell:has(#balance-view:not([hidden])) > .hero { margin-bottom:6px; }
  #balance-view .balance-heading { margin-bottom:8px; }
  #balance-view .balance-heading .screen-action,
  #balance-view .balance-heading .balance-exchange-trigger { min-height:36px; padding-block:5px; }
  #balance-view .balance-hero { min-height:64px; padding:8px 12px; margin-bottom:var(--balance-card-gap); }
  #balance-view .balance-value-table { min-height:46px; }
  #balance-view .balance-value-cell { gap:5px; }
  #balance-view .balance-value-cell > strong { font-size:24px; }
  #balance-view .balance-overview-grid {
    flex:1 1 0;
    grid-template-rows:minmax(0,.48fr) minmax(0,.52fr);
    align-items:stretch;
    overflow:hidden;
  }
  #balance-view .balance-overview-grid > .portfolio-history-card {
    display:flex;
    flex-direction:column;
    contain:size;
    min-height:0;
    padding:14px 16px 10px;
    overflow:hidden;
  }
  .portfolio-history-header { gap:8px; flex:0 0 auto; }
  .portfolio-history-header h2 { font-size:15px; }
  .portfolio-history-periods button { padding:5px 8px; min-height:28px; }
  .portfolio-history-summary { flex:0 0 auto; margin-top:8px; min-height:32px; gap:8px; }
  .portfolio-history-summary strong { font-size:24px; }
  .portfolio-history-plot { flex:1 1 0; height:auto; min-height:72px; }
  .portfolio-history-card footer { flex:0 0 auto; min-height:20px; margin:0; }
  #balance-view .balance-overview-grid > .allocation-card {
    min-height:0;
    contain:size;
    overflow:hidden;
    padding:12px 16px;
  }
  #balance-view .allocation-header { flex:0 0 auto; }
  #balance-view .allocation-header h2 { font-size:15px; }
  #balance-view .allocation-header p { font-size:11px; margin-top:3px; }
  #balance-view .balance-overview-grid > .allocation-card .allocation-layout {
    flex:1 1 0;
    grid-template-columns:minmax(110px,.7fr) minmax(0,1.4fr);
    grid-template-rows:minmax(0,1fr);
    min-height:0;
    gap:14px;
    margin-top:8px;
    container-type:size;
  }
  #balance-view .allocation-ring-wrap {
    /* Square determined by BOTH available height and column width. */
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    aspect-ratio:1;
    align-self:center;
    justify-self:center;
    margin:0;
    inline-size:min(100%,310px,100cqh);
    contain:size;
    container-type:inline-size;
  }
  #balance-view .allocation-center { inset:24% 8%; gap:clamp(3px,1.8cqw,6px); }
  #balance-view .allocation-center strong { font-size:clamp(12px,9cqw,24px); white-space:nowrap; overflow-wrap:normal; }
  #balance-view .allocation-center span { font-size:clamp(9px,4.5cqw,11px); }
  #balance-view .balance-overview-grid > .allocation-card .allocation-legend {
    min-width:0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#3d5261 transparent;
    gap:2px;
    padding-right:4px;
  }
  #balance-view .balance-overview-grid > .allocation-card .allocation-row {
    min-height:30px;
    grid-template-columns:minmax(0,1fr) auto 48px;
    gap:6px;
    padding:4px 3px;
  }
  #balance-view .balance-overview-grid > .allocation-card .allocation-row > span { font-size:13px; gap:6px; }
  #balance-view .balance-overview-grid > .allocation-card .allocation-row > strong { font-size:14px; }
  #balance-view .balance-overview-grid > .allocation-card .allocation-row > small { font-size:12px; }
  #balance-view .allocation-explanation { flex:0 1 auto; min-height:0; overflow:auto; margin-top:8px; }
  #balance-view .allocation-explanation summary { padding:6px 0; }
  #balance-view .allocation-explanation[open] { max-height:32%; }
  #balance-view .balance-overview-grid > .asset-table {
    height:100%;
    max-height:none;
    min-height:0;
    contain:size;
    overflow:hidden;
    row-gap:4px;
  }
  #balance-view .asset-table-header { padding:8px 6px; }
  #balance-view .balance-overview-grid > .asset-table > .asset-list {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    flex:1 1 0;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#3d5261 transparent;
    scrollbar-gutter:stable;
    padding:0 4px 4px 0;
    row-gap:0;
  }
  #balance-view .balance-overview-grid > .asset-table > .asset-list .asset-card {
    flex:1 0 58px;
    min-height:58px;
    max-height:88px;
    padding:8px 6px;
  }
  #balance-view #balance-assets::-webkit-scrollbar,
  #balance-view #allocation-legend::-webkit-scrollbar { display:block; width:6px; }
  #balance-view #balance-assets::-webkit-scrollbar-thumb,
  #balance-view #allocation-legend::-webkit-scrollbar-thumb { background:#3d5261; border-radius:6px; }
}
@media(min-width:901px) and (max-width:1199px) and (min-height:620px) {
  #balance-view .balance-overview-grid > .portfolio-history-card { padding-inline:12px; }
  #balance-view .balance-overview-grid > .allocation-card { padding-inline:12px; }
  #balance-view .balance-overview-grid > .allocation-card .allocation-layout {
    grid-template-columns:minmax(96px,.55fr) minmax(0,1.45fr);
    gap:8px;
  }
  .portfolio-history-periods button { padding-inline:6px; }
}
@media(min-width:901px) and (min-height:620px) and (max-height:850px) {
  .portfolio-history-summary { margin-top:4px; min-height:28px; }
  .portfolio-history-summary strong { font-size:22px; }
}