/* Stocks: balance summary, holdings table (becomes cards on phones), setup steps. */
#body { display: flex; flex-direction: column; gap: 16px }
.tab-panel { display: flex; flex-direction: column; gap: 16px }

.summary { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px }
.summary .card { padding: 16px 20px }
.total .big { font-size: 40px; line-height: 48px; margin: 4px 0 }
.kv { display: flex; align-items: center; gap: 14px }
.kv > .ms { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-container-highest); color: var(--primary) }
.kv b { display: block; font-size: 18px; line-height: 24px }
.kv small, .total small { display: block }

.holdings { padding: 4px 0 }
.h-row { display: grid; grid-template-columns: minmax(160px, 2fr) 130px 1fr 1fr 1.2fr 1.4fr 1.2fr; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--outline-variant) }
.trend { display: flex; align-items: center; justify-content: flex-end; gap: 8px }
.trend small { font-size: 12px; min-width: 44px; text-align: right } .trend .up { color: var(--primary) } .trend .down { color: var(--error) }
.spark { width: 84px; height: 28px; flex: none } .spark polyline { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke: var(--primary) } .spark.down polyline { stroke: var(--error) }
.h-head { border-top: 0; padding-top: 0; padding-bottom: 0 }
.h-row > span:not(.h-name) { text-align: right; justify-content: flex-end }
.h-head > span:first-child { text-align: left } .h-head > span:first-child .sort-btn { margin-left: -4px }
.h-name { display: flex; flex-direction: column; min-width: 0 } .h-name .sym:hover { color: var(--primary); text-decoration: underline } .h-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gain { display: flex; align-items: center; gap: 4px; flex-wrap: wrap } .gain .ms { font-size: 16px; color: var(--on-surface-variant) }
.share { display: flex; align-items: center; gap: 8px }
.share .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-container-highest); overflow: hidden }
.share .bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary) }
.share small { width: 40px; text-align: right; color: var(--on-surface-variant) }
.holdings .empty { padding: 24px 20px }
.foot { font-size: 12px }

.setup { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; max-width: 720px }
.setup .title { display: flex; align-items: center; gap: 10px } .setup .title .ms { color: var(--primary) }
.setup ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px }
.setup code { padding: 1px 6px; border-radius: 4px; background: var(--surface-container-highest) }

@media (max-width: 900px) { .summary { grid-template-columns: repeat(3, 1fr) } .summary .total { grid-column: 1 / -1 } }
@media (max-width: 700px) {
  .h-head { display: none }
  .h-row { grid-template-columns: 1fr 1fr; gap: 6px 12px }
  .h-name { grid-column: 1 / -1 }
  .h-row > span:not(.h-name) { display: flex; justify-content: space-between; text-align: left }
  .h-row > span[data-l]::before { content: attr(data-l); color: var(--on-surface-variant); font-size: 12px; margin-right: 8px }
  .share, .gain { grid-column: 1 / -1 }
  .trend { grid-column: 1 / -1; justify-content: flex-start } .trend::before { content: 'Trend'; color: var(--on-surface-variant); font-size: 12px; margin-right: auto }
  .summary .card { padding: 12px 14px } .kv > .ms { display: none }
}

/* purchase history: each holding expands into its lots */
.holding summary { list-style: none; cursor: pointer } .holding summary::-webkit-details-marker { display: none }
.holding summary:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) } /* M3 hover state layer */
.h-name { flex-direction: row; align-items: center; gap: 4px } .h-name > span:last-child { display: flex; flex-direction: column; min-width: 0 }
.chev { color: var(--on-surface-variant); transition: transform .15s; margin-left: -8px } .holding[open] .chev { transform: rotate(180deg) }
.lots { padding: 4px 20px 12px 48px; background: var(--surface-container) }
.lot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1.4fr 1.3fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--outline-variant); font-size: 13px }
.lot.label { border-top: 0; padding-top: 8px }
.lot > span:not(:first-child) { text-align: right }
.lot .up { color: var(--primary) } .lot .down { color: var(--error) }
.lots-note { padding: 8px 0 0; font-size: 12px } .holding > .lots-note { padding: 8px 20px 14px 48px; background: var(--surface-container) }
@media (max-width: 700px) {
  .lots, .holding > .lots-note { padding-left: 16px; padding-right: 16px }
  .lot.label { display: none }
  .lot { grid-template-columns: 1fr 1fr; gap: 4px 12px }
  .lot > span:first-child { grid-column: 1 / -1; font-weight: 500 }
  .lot > span:not(:first-child) { display: flex; justify-content: space-between; text-align: left }
  .lot > span[data-l]::before { content: attr(data-l); color: var(--on-surface-variant) }
}

/* cash transactions */
.cash-summary { grid-template-columns: repeat(4, 1fr) }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { height: 32px; padding: 0 16px; border: 1px solid var(--outline); border-radius: 8px; background: transparent; cursor: pointer; font-weight: 500 }
.chip.on { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent }
.tx { padding: 4px 0 }
.tx-row { display: grid; grid-template-columns: 40px 1fr 120px 190px; gap: 12px; /* fixed date and amount columns: every row is its own grid, so auto widths wouldn't line up */ align-items: center; padding: 10px 20px; border-top: 1px solid var(--outline-variant) }
.tx-row:first-child { border-top: 0 }
.tx-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-container-highest); color: var(--primary); font-size: 20px }
.tx-text { display: flex; flex-direction: column; min-width: 0 } .tx-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tx-date { font-size: 12px; white-space: nowrap; text-align: right }
.tx-amt { text-align: right; font-weight: 500; min-width: 90px } .tx-amt small { display: block; font-weight: 400 }
.tx-amt.up { color: var(--primary) } .tx-amt.down { color: var(--on-surface) }
.tx .empty { padding: 24px 20px }
/* trades: month headers between rows, buy and sell icons, gain since purchase */
.tx-month { padding: 14px 20px 6px; font-size: 12px; font-weight: 500; letter-spacing: .3px; color: var(--primary); border-top: 1px solid var(--outline-variant) } .tx-month:first-child { border-top: 0 }
.tx-month + .tx-row { border-top: 0 }
.tx-ic.sell { color: var(--tertiary) }
.tx-amt .up { color: var(--primary) } .tx-amt .down { color: var(--error) }
.lots-note .ms { font-size: 16px; vertical-align: -3px; margin-right: 2px }
@media (max-width: 900px) { .cash-summary { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 700px) {
  .tx-row { grid-template-columns: 40px 1fr auto; grid-template-areas: "ic text amt" "ic date amt"; gap: 2px 12px }
  .tx-ic { grid-area: ic } .tx-text { grid-area: text } .tx-date { grid-area: date; font-size: 11px; text-align: left } .tx-amt { grid-area: amt; align-self: center }
}

/* insights: charts */
.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.ins { padding: 16px 20px 12px } .ins.wide { grid-column: 1 / -1 }
.growth-card { margin-top: -8px }
.ins .title { margin-bottom: 10px }
.ins-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.legend { display: flex; gap: 16px; margin: 4px 0 8px; font-size: 12px; color: var(--on-surface-variant) } .legend span { display: inline-flex; align-items: center; gap: 6px }
.sw { width: 18px; height: 3px; border-radius: 2px; background: var(--primary) } .sw-in { background: none; height: 0; border-top: 2px dashed var(--tertiary) } .sw-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--tertiary) }
.growth svg { width: 100%; height: auto; display: block; font-size: 11px }
.growth .area { fill: var(--primary); opacity: .1 }
.growth .line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round }
.growth .line2 { fill: none; stroke: var(--tertiary); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round }
.growth .mark { fill: var(--tertiary); stroke: var(--surface-container-low); stroke-width: 2 }
.growth .grid { stroke: var(--outline-variant) } .growth .axis { fill: var(--on-surface-variant) }
.growth .end { fill: var(--primary); font-weight: 500; font-size: 12px } .growth .end2 { fill: var(--tertiary) }
.growth .cross { stroke: var(--on-surface); stroke-dasharray: 3 3; opacity: .6 }
.hbars { display: flex; flex-direction: column; gap: 6px }
.hbar { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; font-size: 13px }
.hb-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hb-track { height: 10px; border-radius: 5px; background: var(--surface-container-highest); overflow: hidden }
.hb-track i { display: block; height: 100%; min-width: 2px; border-radius: 5px; background: var(--primary) } .hb-track i.down { background: var(--error) }
.hb-val { white-space: nowrap; min-width: 72px; text-align: right }
.cols { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 8px }
.col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0 }
.col i { display: block; width: 100%; max-width: 28px; border-radius: 3px 3px 0 0; background: var(--primary) }
.col small { height: 16px; margin-top: 4px; font-size: 10px; color: var(--on-surface-variant); white-space: nowrap }
@media (max-width: 900px) { .insights { grid-template-columns: 1fr } }

/* growth chart: the index line and the comparison under the chart */
.growth text.end { paint-order: stroke; stroke: var(--surface-container-low); stroke-width: 4px; stroke-linejoin: round } /* lines passing behind don't cut through the numbers */
.growth .line3 { fill: none; stroke: var(--on-surface); stroke-width: 1.5; stroke-linejoin: round; opacity: .75 } .growth .end3 { fill: var(--on-surface) }
.sw-bench { background: var(--on-surface); height: 2px; opacity: .75 }
.bench-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px }
.bench-verdict { margin: 10px 0 4px; line-height: 22px } .bench-verdict:empty { display: none } .bench-verdict .up { color: var(--primary) } .bench-verdict .down { color: var(--error) } .bench-verdict small { display: block }

/* exposure */
.exposure .exp-sum { margin: 2px 0 4px }
.exposure .sec-tabs { margin: 6px -20px 12px; padding: 0 8px }
.exposure .hbar { grid-template-columns: minmax(110px, 200px) 1fr auto }
@media (max-width: 700px) { .exposure .hbar { grid-template-columns: 1fr auto; row-gap: 4px } .exposure .hb-track { grid-column: 1 / -1; grid-row: 2 } }
.exp-note { margin-top: 10px; font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .exp-note .btn { height: 32px; margin-left: auto }
.sector-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; align-items: center; padding: 6px 0 } .sector-row > span { display: flex; flex-direction: column; min-width: 0 }
.sector-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .sector-row .field { height: 40px; width: 100% } .sector-row .field:focus { padding: 0 15px }
#sector-rows { max-height: 55vh; overflow-y: auto; margin: 8px 0 }

/* rebalancing: a target tick on the exposure bars, and the list under them */
.exposure .hb-track { position: relative; overflow: visible }
.hb-target { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--on-surface) }
.exp-actions { margin-left: auto; display: flex; gap: 4px } .exp-note .exp-actions .btn { margin-left: 0 }
.rebal { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--outline-variant) }
.rebal h4, .realised h4 { margin: 0 0 4px; color: var(--on-surface-variant) }
.rebal ul, .sold-out { list-style: none; padding: 0; margin: 0 }
.rebal li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--outline-variant) } .rebal li:last-child { border-bottom: 0 }
.rebal li small { grid-column: 1 / -1 }
.rb-what { display: inline-flex; align-items: center; gap: 4px; font-weight: 500 } .rb-what .ms { font-size: 18px }
.rb-what.over { color: var(--error) } .rb-what.under { color: var(--on-surface) } .rb-what.on-target { color: var(--success) }
.rb-warn { color: var(--error); display: flex; align-items: center; gap: 6px; margin-top: 8px } .rb-warn .ms { font-size: 18px }
.target-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0 } .target-row small { display: block }
.target-in { display: flex; align-items: center; gap: 6px } .target-in .field { width: 88px; text-align: right }
#target-rows { max-height: 50vh; overflow-y: auto; margin: 12px 0 4px }

/* realised by year (Trades tab) */
.realised { padding: 16px 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px }
.ytable-wrap { overflow-x: auto }
.ytable :is(th, td) { white-space: nowrap } .ytable :is(th, td):not(:first-child) { text-align: right } /* .dt (core/base.css); every column after the year is a number */
.ytable td small { display: block; font-size: 12px }
.sold-out li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--outline-variant) }
.realised .up { color: var(--primary) } .realised .down { color: var(--error) }
.rb-note { font-size: 12px } .rb-note .ms { font-size: 16px; vertical-align: -3px; margin-right: 4px }
/* Taxes (Trades tab): three figures, the purchases turning tax-free soon, the rule */
.tax-card { padding: 16px 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px }
.tax-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px }
.tax-kv { display: flex; gap: 12px; align-items: flex-start } .tax-kv > .ms { color: var(--primary); font-size: 22px }
.tax-kv > div { display: flex; flex-direction: column; gap: 2px } .tax-kv b { font-size: 18px; font-weight: 500 } .tax-kv small { font-size: 12px }
.tax-card h4 { margin: 0; color: var(--on-surface-variant) } .tax-soon :is(th, td):nth-child(2) { text-align: left } /* .ytable right-aligns all but the first */
.tax-card .up, .fx-card .up { color: var(--primary) } .tax-card .down, .fx-card .down { color: var(--error) }
/* Risk, under the growth chart: largest fall, yearly swings, movement against the chosen index */
.risk-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 6px 0 2px; font-size: 14px } .risk-row:empty { display: none }
.risk-row .down { color: var(--error) } .risk-row > small { flex-basis: 100% }

/* "Show more" at the end of long lists */
.show-more { display: flex; width: 100%; justify-content: center; border-radius: 0; height: 48px; border-top: 1px solid var(--outline-variant) }
.show-more small { font-weight: 400 }
.ins .show-more { margin-top: 8px }