/* Summary (Wealth) screen layout (owner: summary). Components keep their
   foundation look; this file only places them. Phone: one column in the
   order hero → change → period → chart → month card → widget cards →
   accounts → highlights → Explore → footnote. From 744 px: hero, chart,
   widget cards, highlights, Explore and footnote on the left; month card and
   accounts on the right (stocks shot 6). */

.sum {
  display: flex; flex-direction: column;
  padding-bottom: var(--content-bottom, calc(var(--tabbar-h) + var(--sb)));
}
/* phone: the two wrappers do not exist for layout, so the order stays linear */
.sum-side, .sum-rest { display: contents; }
.sum-card { margin: var(--gap-group) var(--margin) 0; }
.sum-list { margin-top: var(--gap-group); }
.sum-hl:not(:empty) { margin-top: var(--gap-group); }
.sum-x:not(:empty) { margin-top: var(--gap-group); }
.sum-w-host:not(:empty) { margin-top: var(--gap-group); }
/* phone: the widget host is a sibling of the side column; order puts it
   between the month card and the accounts */
@media (max-width: 743.98px) {
  .sum-top-host { order: 0; }
  .sum-card { order: 1; }
  .sum-w-host { order: 2; }
  .sum-list { order: 3; }
  .sum-hl, .sum-x, .sum-foot-note { order: 4; }
}

/* ---------------------------------------------------------------- fold */
.sum-hero { padding-top: var(--radius-sm); }
.sum-hero .ui-hero-label { transition: opacity var(--dur-fade) var(--ease-linear); }
.sum-seg { margin: var(--cell-pad-x) var(--margin) var(--radius-xs); }

/* chart: the band with its own caption row; ⤢ and the hold chip sit on that row */
.sum-chart {
  --chart-halo: var(--bg);
  position: relative;
  min-height: var(--viz-band-h);
  margin-top: var(--cell-pad-y);
  padding: 0 var(--margin);
}
.sum-chart .viz-caps { padding-right: calc(var(--tap-min) - var(--radius-xs)); }
.sum-expand {
  position: absolute; right: calc(var(--margin) - var(--radius-sm)); bottom: calc((20px - var(--tap-min)) / 2);
  color: var(--label-2);
}
.sum-expand:disabled { opacity: 0.3; }
.sum-chip-slot { position: absolute; left: var(--margin); bottom: calc((20px - var(--tap-min)) / 2); display: flex; align-items: center; min-height: var(--tap-min); }
.sum-chip-slot:empty { display: none; }
.sum-chart.has-chip .viz-cap-l { visibility: hidden; }
.sum-chart.is-loading::after {
  content: ""; position: absolute; left: var(--margin); right: var(--margin); top: 60%;
  height: 1px; background: var(--fill);
  animation: sum-pulse calc(var(--dur-entry) * 3) var(--ease-linear) infinite;
}
@keyframes sum-pulse { 50% { opacity: 0.4; } }
/* one-time "Drag to see a month": fades at the first scrub, keeps its line */
.sum-hint {
  margin: var(--radius-xs) var(--margin) 0;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
  transition: opacity var(--dur-fade) var(--ease-linear);
}
.sum-hint.is-done { opacity: 0; }

/* ---------------------------------------------------------------- accounts */
.sum-accounts > .sum-group + .sum-group { margin-top: var(--gap-group); }
.sum-share { font-weight: 400; color: var(--label-2); }
.sum-group .ui-sec-trail { font-variant-numeric: tabular-nums; }
.sum-delta-when { display: none; }
/* "Other accounts": one row for the grouped accounts, a tap shows them under it */
.sum-grouped .ui-cell-label svg { width: 13px; height: 13px; vertical-align: -1px; color: var(--label-2); transition: transform var(--dur-fade) var(--ease-linear); }
.sum-grouped[aria-expanded="true"] .ui-cell-label svg { transform: rotate(180deg); }
.sum-grouped-kids > .ui-row { padding-left: calc(var(--margin) + 16px); padding-right: var(--margin); }
.sum-grouped-kids > .ui-row::before, .sum-grouped-kids > .ui-row + .ui-row::before {
  content: ""; position: absolute; top: 0; right: var(--margin); left: calc(var(--margin) + 16px); height: 1px;
  background: var(--sep); transform: scaleY(0.5); transform-origin: 0 0;
}
.sum-grouped-kids[hidden] { display: none; }
.sum-group-toggle { margin-top: var(--gap-group); }
.sum-group-toggle[hidden] { display: none; }

/* ---------------------------------------------------------------- Explore */
.sum-explore > .ui-sec-head { margin-bottom: 8px; }
.sum-x-grid { display: flex; flex-direction: column; gap: var(--radius-sm); padding: 0 var(--margin); }
.sum-x-grid > .ui-sec { margin-top: 0; }
.sum-x-grid > .ui-sec > .ui-group { margin: 0; height: 100%; }
.sum-x-card .ui-finding-text { display: block; -webkit-line-clamp: unset; }
.sum-x-card .ui-cell-label { white-space: normal; }
.sum-x-chart { padding: 0 var(--cell-pad-x) var(--cell-pad-x); cursor: pointer; }
.sum-x-chart > * { pointer-events: none; }
.sum-x-chart.is-strip { padding-top: 2px; }

/* ---------------------------------------------------------------- widget cards */
.sum-widgets > .ui-sec-head { margin-bottom: 8px; }
.sum-w-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; padding: 0 var(--margin);
}
/* an odd last card takes the whole row on the phone (after the full-width
   accounts card, when there is one, the small cards start at child 2) */
.sum-w-grid:not(.has-lead) > .sum-w:last-child:nth-child(odd),
.sum-w-grid.has-lead > .sum-w:last-child:nth-child(even), .sum-w.is-wide { grid-column: 1 / -1; }
.sum-w {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; min-height: 118px; margin: 0; padding: 12px 14px;
  border: 0; border-radius: calc(var(--radius) - 6px);
  background: var(--cell); color: var(--label); font: inherit; text-align: left;
}
.sum-w.ui-press:active { background-color: var(--cell-2); }
@media (hover: hover) { .sum-w.ui-press:hover { background-color: var(--cell-2); } }
.sum-w-title {
  font: var(--t-footnote); font-weight: 600; letter-spacing: var(--tr-footnote); color: var(--label-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sum-w-value {
  margin-top: 2px; font: var(--t-title3); letter-spacing: var(--tr-title3);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sum-w-value.is-pos, .sum-w-ctx .is-pos { color: var(--pos); }
.sum-w-value.is-neg, .sum-w-ctx .is-neg { color: var(--neg); }
.sum-w-value.is-add { color: var(--chart-added); }
/* a word instead of a figure ("New record") may wrap */
.sum-w-value.is-word { white-space: normal; }
/* masked: a coloured •••• would still tell the sign */
body.is-masked .sum-w-value:has(.ui-amt) { color: var(--label); }
.sum-w-ctx {
  margin-top: 2px; font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sum-w-pic { display: flex; align-items: flex-end; margin-top: auto; padding-top: 8px; min-height: 36px; }
.sum-w-pic > svg { display: block; width: 100%; height: 28px; overflow: visible; }

/* bars from a zero line, the last month at full strength */
.sum-w-zero { stroke: var(--chart-grid); stroke-width: var(--hairline); vector-effect: non-scaling-stroke; }
.sum-w-bar { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0.45; }
.sum-w-bar.is-down { transform-origin: 50% 0; }
.sum-w-bar.is-last { opacity: 1; }
.sum-w-bar.is-pos, .sum-w-dot.is-pos { fill: var(--pos); }
.sum-w-bar.is-neg, .sum-w-dot.is-neg { fill: var(--neg); }
.sum-w-bar.is-add, .sum-w-dot.is-add { fill: var(--chart-added); }
.sum-w-bar.is-zero { fill: var(--label-3); }
.sum-w-pic > svg.sum-w-dots { height: 12px; }
.sum-w-dot.is-off { fill: var(--fill-1); }

/* net worth line under the high */
.sum-w-spark-line { fill: none; stroke: var(--label); stroke-width: var(--viz-spark-stroke); stroke-linejoin: round; stroke-linecap: round; }
.sum-w-spark-high { stroke: var(--label-3); stroke-width: 1px; stroke-dasharray: 2 2; }

/* added and markets side by side */
.sum-w-split { display: flex; gap: 2px; width: 100%; height: 8px; }
.sum-w-seg { flex: 0 0 0; min-width: 3px; border-radius: 2px; transform-origin: 0 50%; }
.sum-w-seg.is-add { background: var(--chart-added); }
.sum-w-seg.is-pos { background: var(--pos); }
.sum-w-seg.is-neg { background: var(--neg); }

/* milestone ring in the top corner */
.sum-w.has-ring .sum-w-title, .sum-w.has-ring .sum-w-value { padding-right: 40px; }
.sum-w.has-ring .sum-w-pic { position: absolute; top: 12px; right: 12px; margin: 0; padding: 0; min-height: 0; }
.sum-w.has-ring .sum-w-pic > svg { width: 34px; height: 34px; }
.sum-w-ring-track, .sum-w-ring-val { fill: none; stroke-width: 4; }
.sum-w-ring-track { stroke: var(--fill-1); }
.sum-w-ring-val { stroke: var(--label); stroke-linecap: round; }

/* rank: a track over 0-100 % of households, you in indigo */
.sum-w-track { position: relative; width: 100%; height: 6px; border-radius: var(--radius-full); background: var(--fill-1); }
.sum-w-track-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--chart-added); box-shadow: 0 0 0 2px var(--cell);
}

/* every account: dot, name, a bar from a centre zero line, return, gain */
.sum-w-value.is-list { font: var(--t-subhead); letter-spacing: var(--tr-subhead); margin-top: 10px; white-space: normal; overflow: visible; }
.sum-w-accs {
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(48px, 1fr) auto auto;
  column-gap: 8px; row-gap: 9px; align-items: center;
}
.sum-w-acc { display: contents; }
.sum-w-acc-dot { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--dot-color, var(--label-3)); }
.sum-w-acc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-w-acc-bar { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--fill-1); }
.sum-w-acc-bar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--label-3); }
.sum-w-acc-fill { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-full); }
.sum-w-acc-fill.is-up { left: 50%; transform-origin: 0 50%; }
.sum-w-acc-fill.is-down { right: 50%; transform-origin: 100% 50%; }
.sum-w-acc-fill.is-pos { background: var(--pos); }
.sum-w-acc-fill.is-neg { background: var(--neg); }
.sum-w-acc-fill.is-zero { background: var(--label-3); }
.sum-w-acc-r { text-align: right; font-variant-numeric: tabular-nums; }
.sum-w-acc-r.is-pos { color: var(--pos); }
.sum-w-acc-r.is-neg { color: var(--neg); }
.sum-w-acc-gain { text-align: right; font: var(--t-footnote); color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- two columns */
@media (min-width: 744px) {
  .sum {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--margin);
    align-items: start;
  }
  .sum-top-host { grid-column: 1; grid-row: 1; }
  .sum-side { display: block; grid-column: 2; grid-row: 1 / span 3; }
  .sum-w-host { grid-column: 1; grid-row: 2; }
  .sum-rest { display: block; grid-column: 1; grid-row: 3; }
  /* the right column runs edge to edge of its track, the page margin outside it */
  .sum { --sum-page-m: var(--margin); }
  .sum-side { padding-right: var(--sum-page-m); --margin: 0px; }
  .sum-side .sum-card { margin-top: var(--radius-sm); }
  .sum-side .sum-list { margin-top: var(--gap-group); }
  .sum-delta-when { display: inline; }
  .sum-x-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* the widget cards: three columns once the main column is wide enough; a
   lone last card takes the whole row */
@media (min-width: 1024px) {
  .sum-w-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sum-w-grid:not(.has-lead) > .sum-w:last-child:nth-child(n),
  .sum-w-grid.has-lead > .sum-w:last-child:nth-child(n) { grid-column: auto; }
  .sum-w-grid:not(.has-lead) > .sum-w:last-child:nth-child(3n+1),
  .sum-w-grid.has-lead > .sum-w:last-child:nth-child(3n+2),
  .sum-w-grid.has-lead > .sum-w.is-wide:nth-child(n) { grid-column: 1 / -1; }
}