/* holdings-rms.css — Portfolio → Holdings, the RMS measures (Sep 28 2026). Design B's tokens (--px-*, portfolio.css)
   and nothing new: the small tags after each ticker (pay schedule, double dips, Selection Universe), the Size, PT price
   and Markers cells, "Ex in 2 days", the Summary's two yields, Income by month, each account's Last updated ·
   Refresh, and Import from your broker's Paste positions / What changed dialog. app.js draws them. */

/* ── the tags after the ticker ── */
#viewPortfolio .px-tags { display: inline-flex; align-items: center; gap: 4px; flex: none; }
#viewPortfolio .px-tag { display: inline-block; padding: 0 5px; border: 1px solid var(--px-line2); border-radius: 6px; font:500 13px/18px var(--px-font); color: var(--px-mute); white-space: nowrap; cursor: default; }
#viewPortfolio .px-tag--fq { min-width: 20px; text-align: center; }
#viewPortfolio .px-tag--dd { border-color: transparent; background: var(--px-amber-bg); color: var(--px-amber2); }
#viewPortfolio .px-tag--su { border-color: color-mix(in srgb, var(--px-c6) 40%, transparent); color: var(--px-c6); }
#viewPortfolio .px-tag--off { border-style: dashed; color: var(--px-mute); }
body[data-theme="light"] #viewPortfolio .px-tag--su { color: #0b6b62; border-color: rgba(11, 107, 98, .35); }

/* ── cells ── */
#viewPortfolio .px-exsoon { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 6px; background: var(--px-amber-bg); color: var(--px-amber2); font:500 13px/1.35 var(--px-font); white-space: nowrap; }
#viewPortfolio .pb-hold.px-tbl td b.px-atpt { color: var(--px-up); }
#viewPortfolio .px-over { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--px-amber); vertical-align: middle; }
#viewPortfolio .pb-hold.px-tbl td.pb-c-target small, #viewPortfolio .pb-hold.px-tbl td.pb-c-markers small { white-space: nowrap; }
#viewPortfolio .pb-hold.px-tbl .pb-xc .px-pt { font-size:15px; }

/* the "?" of a heading that has no glossary entry (Size, Markers): no width, shown on hover, as the glossary marks are */
#viewPortfolio .px-q { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; color: var(--px-mute); font:600 13px/1 var(--px-font); font-style: normal; cursor: help; }
#viewPortfolio .px-q:hover, #viewPortfolio .px-q:focus-visible { color: var(--px-amber2); outline: none; }
#viewPortfolio .pb-hold.px-tbl th > .px-q { position: absolute; top: -4px; right: 0; opacity: 0; transition: opacity .15s ease; }
#viewPortfolio .pb-hold.px-tbl th:hover > .px-q, #viewPortfolio .pb-hold.px-tbl th > .px-q:focus-visible { opacity: .9; }
@media (hover: none) { #viewPortfolio .pb-hold.px-tbl th > .px-q { opacity: .7; } }
#viewPortfolio .px-q--in { margin-left: 6px; vertical-align: 1px; opacity: .85; }

/* ── Summary: Dividend yield · Realized yield, side by side (Trades' figures) ── */
#viewPortfolio .px-yields { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--px-line); }
#viewPortfolio .px-yields > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 0; }
#viewPortfolio .px-yields > div + div { padding-left: 14px; border-left: 1px solid var(--px-line); }
#viewPortfolio .px-yields .px-kv__k { white-space: nowrap; }
#viewPortfolio .px-yields__rms { margin-top: -3px; font:400 13px/1.2 var(--px-font); color: var(--px-mute); }
#viewPortfolio .px-yields b { font:500 16px/1.3 var(--px-font); color: var(--px-text); font-variant-numeric: tabular-nums; }

/* ── Income by month: the fourth card, the full width under the other three ── */
#viewPortfolio .px-cards > .px-mo { grid-column: 1 / -1; order: 10; }
#viewPortfolio .px-mo__body { min-width: 0; }
#viewPortfolio .px-mo__plot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; height: 170px; margin-top: 14px; border-bottom: 1px solid var(--px-line2); }
#viewPortfolio .px-mo__c { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; height: 100%; }
#viewPortfolio .px-mo__v { font:500 13px/1.2 var(--px-font); color: var(--px-sub); white-space: nowrap; }
#viewPortfolio .px-mo__bar { display: flex; flex-direction: column; width: min(52px, 72%); border-radius: 5px 5px 0 0; overflow: hidden; }
#viewPortfolio .px-mo__bar i { display: block; flex-basis: 0; min-height: 0; }
#viewPortfolio .px-mo__ann { background: var(--px-amber); }
#viewPortfolio .px-mo__est { background: color-mix(in srgb, var(--px-amber) 38%, transparent); }
#viewPortfolio .px-mo__plot.is-wait .px-mo__ann { background: var(--px-line2); }
#viewPortfolio .px-mo__m { order: 3; margin-bottom: -26px; font:400 13px/1.3 var(--px-font); color: var(--px-mute); white-space: nowrap; }
#viewPortfolio .px-mo__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 34px; font:400 13px/1.4 var(--px-font); color: var(--px-sub); }
#viewPortfolio .px-mo__foot b { color: var(--px-text); font-weight: 600; }
#viewPortfolio .px-mo__lg { display: inline-flex; align-items: center; gap: 7px; }
#viewPortfolio .px-mo__sw { width: 10px; height: 10px; border-radius: 3px; }
#viewPortfolio .px-mo__sw--ann { background: var(--px-amber); }
#viewPortfolio .px-mo__sw--est { background: color-mix(in srgb, var(--px-amber) 38%, transparent); }
@media (max-width: 760px) {
  #viewPortfolio .px-mo__plot { gap: 4px; height: 140px; }
  #viewPortfolio .px-mo__v { display: none; }
  #viewPortfolio .px-mo__bar { width: 80%; }
  #viewPortfolio .px-mo__m { font-size: 0; }
  #viewPortfolio .px-mo__m::before { content: attr(data-s); font-size:13px; }
}

/* ── each imported account: Last updated · Refresh ── */
#viewPortfolio .pb-holdings .port-accts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#viewPortfolio .port-acct i { font-size:13px; color: var(--px-sub); }
#viewPortfolio .port-acct i.port-acct__up { display: block; margin-top: 2px; color: var(--px-mute); }
#viewPortfolio .port-acct__re { padding: 0; border: 0; background: none; color: var(--px-amber2); font:500 13px/1.2 var(--px-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#viewPortfolio .port-acct__re:hover { color: var(--px-text); }
#viewPortfolio .port-acct__re:focus-visible { outline: 2px solid var(--px-amber); outline-offset: 2px; border-radius: 3px; }

/* ── Import from your broker: the file button and its caret (Choose files · Paste positions) ── */
#viewPortfolio .px-split { position: relative; display: inline-flex; align-items: stretch; }
#viewPortfolio .px-split > label.px-btn--primary { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 14px; }
#viewPortfolio .px-split > .px-split__more { width: 34px; padding: 0; justify-content: center; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .22); }
#viewPortfolio .px-split__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 320px; padding: 6px; border: 1px solid var(--px-line2); border-radius: 12px; background: var(--px-bg); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
body[data-theme="light"] #viewPortfolio .px-split__menu { background: var(--surface, #f7f5f0); box-shadow: 0 18px 44px rgba(58, 48, 30, .16); }
#viewPortfolio .px-split__menu[hidden] { display: none; }
#viewPortfolio .px-split__item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
#viewPortfolio .px-split__item:hover, #viewPortfolio .px-split__item:focus-visible { background: color-mix(in srgb, var(--px-text) 6%, transparent); outline: none; }
#viewPortfolio .px-split__item b { font:600 14px/1.3 var(--px-font); color: var(--px-text); }
#viewPortfolio .px-split__item small { font:400 13px/1.4 var(--px-font); color: var(--px-sub); white-space: normal; }
@media (max-width: 760px) {
  #viewPortfolio .px-head__acts .px-split { order: -1; flex: 1 1 100%; }
  #viewPortfolio .px-head__acts .px-split > label.px-btn--primary { flex: 1 1 auto; justify-content: center; }
  #viewPortfolio .px-split__menu { width: min(320px, calc(100vw - 32px)); }
}

/* ── the dialog: Paste positions, then What changed / Check before adding ── */
#viewPortfolio .px-imp { width: min(720px, 100%); background: var(--px-bg); border-color: var(--px-line2); font-family: var(--px-font); }
body[data-theme="light"] #viewPortfolio .px-imp { background: var(--surface, #f7f5f0); }
#viewPortfolio .px-imp .manual-holding__header h3 { font:600 22px/1.2 var(--px-font); letter-spacing: -.015em; color: var(--px-text); }
#viewPortfolio .px-imp .manual-holding__eyebrow { font:500 13px/1.2 var(--px-font); letter-spacing: 0; text-transform: none; color: var(--px-amber2); }
#viewPortfolio .px-imp .manual-holding__intro { margin: 12px 0 16px; font:400 14px/1.55 var(--px-font); color: var(--px-sub); }
#viewPortfolio .px-imp .manual-holding__close { color: var(--px-sub); }
#viewPortfolio .px-imp__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
#viewPortfolio .px-imp__field > span:first-child { font:500 13px/1.2 var(--px-font); color: var(--px-sub); }
#viewPortfolio .px-imp__field .px-selwrap { align-self: flex-start; }
#viewPortfolio .px-imp__field .px-select { height: 36px; padding-left: 14px; font:500 14px/1 var(--px-font); }
#viewPortfolio .px-imp__field textarea { width: 100%; min-height: 190px; padding: 10px 12px; border: 1px solid var(--px-line2); border-radius: 10px; background: transparent; color: var(--px-text); font:400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
#viewPortfolio .px-imp__field textarea::placeholder { color: var(--px-mute); }
#viewPortfolio .px-imp__field textarea:focus { outline: 2px solid var(--px-amber); outline-offset: 1px; }
#viewPortfolio .px-imp__err { margin: 0 0 4px; font:500 14px/1.45 var(--px-font); color: var(--px-down); }
#viewPortfolio .px-imp__sum { margin: 12px 0 10px; font:400 14px/1.5 var(--px-font); color: var(--px-sub); }
#viewPortfolio .px-imp__sum b { color: var(--px-text); font-weight: 600; }
#viewPortfolio .px-imp__list { max-height: min(52vh, 520px); overflow: auto; border-top: 1px solid var(--px-line); }
#viewPortfolio .px-imp__acct { padding: 12px 0 6px; border-bottom: 1px solid var(--px-line); }
#viewPortfolio .px-imp__acct h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font:600 15px/1.3 var(--px-font); color: var(--px-text); }
#viewPortfolio .px-imp__acct h4 small { font:400 13px/1.3 var(--px-font); color: var(--px-mute); }
#viewPortfolio .px-imp__tbl { width: 100%; border-collapse: collapse; font:400 14px/1.3 var(--px-font); font-variant-numeric: tabular-nums; }
#viewPortfolio .px-imp__tbl th { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--px-line); font:500 13px/1.2 var(--px-font); color: var(--px-mute); text-align: left; }
#viewPortfolio .px-imp__tbl td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--px-line); color: var(--px-text); }
#viewPortfolio .px-imp__tbl :is(th, td).r { text-align: right; }
#viewPortfolio .px-imp__tbl :is(th, td):last-child { padding-right: 0; }
#viewPortfolio .px-imp__tk { font-weight: 600; }
#viewPortfolio .px-imp__tbl tr.is-gone td { color: var(--px-mute); }
#viewPortfolio .px-imp__tbl tr.is-gone .px-imp__tk { text-decoration: line-through; }
#viewPortfolio .px-imp__tbl tr.is-cash td { color: var(--px-sub); }
#viewPortfolio .px-imp__none { margin: 4px 0 8px; font:400 14px/1.4 var(--px-font); color: var(--px-sub); }
#viewPortfolio .px-chg { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--px-amber-bg); color: var(--px-amber2); font:500 13px/1.45 var(--px-font); white-space: nowrap; }
#viewPortfolio .px-chg--new { background: var(--px-up-bg); color: var(--px-up); }
#viewPortfolio .px-chg--gone { background: var(--px-down-bg); color: var(--px-down); }
#viewPortfolio .px-imp .manual-holding__actions { border-top-color: var(--px-line); }

/* the Total's yield pair under Pays a month on two lines at every width, so the new columns fit a 1512 screen */
#viewPortfolio .pb-hold.px-tbl tfoot td.pb-c-month > small { display: block; max-width: 11em; margin-left: auto; white-space: normal; }
/* two more columns in the usual set: 8px either side of a figure instead of 10 (the 761–1500px rule above keeps its 6) */
@media (min-width: 1501px) { #viewPortfolio .pb-hold.px-tbl :is(th, td) { padding-left: 8px; padding-right: 8px; } }
/* a fund with several tags: they wrap under the ticker instead of widening the Fund column */
#viewPortfolio .pb-hold.px-tbl .px-fund .pb-tkl { flex-wrap: wrap; row-gap: 3px; max-width: 250px; }
/* 761–1500px: Size and PT price join the usual set, so the sparkline and the names give a little back and
   "+3.0% to go" may break before "to go" */
@media (min-width: 761px) and (max-width: 1500px) {
  #viewPortfolio .pb-hold.px-tbl .px-spark, #viewPortfolio .pb-hold.px-tbl .px-spark__svg { width: 54px; }
  #viewPortfolio .pb-hold.px-tbl .pb-nm { max-width: 158px; }
  #viewPortfolio .pb-hold.px-tbl .px-fund .pb-tkl { max-width: 170px; }
  #viewPortfolio .pb-hold.px-tbl td.pb-c-target { min-width: 78px; }
  #viewPortfolio .pb-hold.px-tbl tfoot td.pb-c-month > small { max-width: 7.2em; }
  #viewPortfolio .pb-hold.px-tbl thead th.pb-h button { white-space: normal; text-wrap: balance; }
  #viewPortfolio .pb-hold.px-tbl td.pb-c-target small { max-width: 7em; margin-left: auto; white-space: normal; }
}
/* "Clear all holdings" at the foot of the Bring in accounts menu (moved from More, Sep 30) */
#viewPortfolio .px-split__item--clear { margin-top: 4px; border-top: 1px solid var(--px-line); border-radius: 0 0 8px 8px; }
#viewPortfolio .px-split__item--clear b { color: var(--px-down); font-weight: 500; }
#viewPortfolio .px-more[hidden] { display: none !important; }

/* Import review additions (Oct 9): a file that names no account asks which one (gold), a warning line
   (amber), accounts at that broker missing from the file (amber edge, each with Take off), and the red
   confirm used by removals. Dialogs live outside #viewPortfolio too, so these are not scoped to it. */
.px-imp__ask { padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.px-imp__ask > span:first-child { color: var(--text); font-weight: 600; }
.px-imp__warn { padding: 8px 12px; border-radius: 8px; color: var(--text);
  border-left: 3px solid var(--orange, #f0a23b); background: color-mix(in srgb, var(--orange, #f0a23b) 10%, transparent); }
.px-imp__missing { border-left: 3px solid var(--orange, #f0a23b) !important; }
.px-imp__missing h4 small { margin-left: 8px; font-weight: 500; color: var(--orange, #f0a23b); }
.px-imp__rm li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body:not(#_) .px-btn--danger, body:not(#_) .px-btn.px-btn--primary.px-btn--danger { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
body:not(#_) .px-btn--danger:hover { filter: brightness(1.08); }