/* Portfolio allocation: the budget field ("Split a budget") and the targets warning, in the design's look */
.wcc-bud { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 360px; }
.wcc-bud label { font-size: 14px; font-weight: 600; color: #F5F5F7; }
.wcc-bud > span { height: 56px; }
.wcc-warn { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: rgba(255, 159, 10, 0.12); }
.wcc-warn span { font-size: 14px; line-height: 1.4; color: #FF9F0A; }
.wcc-warn button { height: 36px; padding: 0 14px; border: 0; border-radius: 980px; background: #FF9F0A; color: #1D1D1F; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
html[data-theme=light] .wcc-bud label { color: #1D1D1F; }
html[data-theme=light] .wcc-warn { background: rgba(201, 52, 0, 0.08); }
html[data-theme=light] .wcc-warn span { color: #C93400; }
html[data-theme=light] .wcc-warn button { background: #C93400; color: #FFFFFF; }
main [data-wc="donut"] circle[data-wcc-seg] { pointer-events: visibleStroke; cursor: pointer; transition: opacity 0.3s ease, stroke-width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
main [data-wc="legend"] > div { transition: background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
/* phones: the design's three columns cannot hold the four parts of a row (asset, value, target, remove) and wrap them
   into a broken grid; the asset takes its own line, value / target / remove sit under it */
@media (max-width: 479px) {
  main [data-wc="rows"]:not([data-wcc-mode="bud"]) > div { grid-template-columns: minmax(0, 1fr) 84px 36px !important; }
  main [data-wc="rows"]:not([data-wcc-mode="bud"]) > div:not([data-wc="rows-head"]) > button:first-child { grid-column: 1 / -1; }
  main [data-wc="rows"]:not([data-wcc-mode="bud"]) > [data-wc="rows-head"] > span:first-child { display: none; }
  main [data-wc="rows"]:not([data-wcc-mode="bud"]) > div:not([data-wc="rows-head"]) { row-gap: 8px; padding-bottom: 6px; }
}
main [data-wc="modes"] > button { flex: 1 1 auto; } /* both labels fit (the design's equal halves clip "Rebalance holdings") */
/* legend: the figures column has one width on every row ("5.0% → 10%" and "60.0% → 50%"), so every bar track is as
   long as the others */
main [data-wc="legend"] > div { grid-template-columns: 72px minmax(0, 1fr) 104px !important; }
main [data-wc="legend"] > div > span:last-child { text-align: right; }