/* Article "Best investments by year" (pipeline/pages/art_best_buys.py,
   js/art-best-investments-by-year.js), on top of style.css, articles.css and logos.css.
   Stocks are US stocks: gains in the S&P 500 blue (--spx), losses --bad. Assets keep
   their site-wide colors; silver, platinum, cash at interest and the smaller coins get
   the portfolio builder's. Classes start with .bb-. */

.bb { --bb-bills: #e58a7a; --bb-silver: #9aa5b1; --bb-platinum: #6f8196; --bb-coin: var(--ink-2); }

/* ---------- the tool ---------- */
.art > .bb-tool { margin-top: 28px; padding: 24px 26px 20px; position: relative; display: grid; gap: 14px; }
.bb-tool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bb-tool-head .label { margin-right: auto; }
.bb-tool-head .art-mode { margin: 0; }
.bb-sentence { margin: 0; }
.bb-sentence .dd { padding: 0 8px; }
.bb-sentence select { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 2px 0; margin: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.bb-sentence select:focus { outline: none; }
.bb-sentence .dd:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.bb-sentence option { font: 500 15px var(--font); }
.bb-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bb-chips .chip[hidden] { display: none; }
.bb-clamp { margin: 0; font-size: 13px; color: var(--muted); }
.bb-answer { margin: 0; max-width: 84ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.bb-answer b { color: var(--ink); font-weight: 650; }
.bb-ladder .legend { margin: 0 0 4px; }
.bb-note { margin: 0; max-width: 96ch; font-size: 13px; line-height: 1.55; color: var(--muted); }
.bb-note b { color: var(--ink-2); font-weight: 650; }
.bb-note a { color: inherit; }
.bb-tool-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bb-hind { margin: 0; flex: 1 1 320px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.bb-tool-foot .btn { margin-left: auto; }
.bb-tool .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bb-credits { margin: 0; font-size: 12px; color: var(--muted); }
.bb-tip { min-width: 250px; }

/* ---------- the ladder: $1,000 -> what it became, log scale ---------- */
.bb-lad { --cw: 250px; --cv: 172px; position: relative; }
.bb-axis, .bb-row { display: grid; grid-template-columns: 26px var(--cw) minmax(0, 1fr) var(--cv); column-gap: 12px; align-items: center; }
.bb-axis { height: 22px; }
.bb-axis > :first-child { grid-column: 1 / 3; }
.bb-ticks { position: relative; height: 100%; font: 500 11px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.bb-ticks span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.bb-log { font: 500 11px var(--font); color: var(--muted); text-align: right; }
.bb-rows { list-style: none; margin: 0; padding: 0; }
.bb-row { min-height: 48px; padding: 3px 0; border-top: 1px solid var(--border); border-radius: 10px; }
.bb-row:hover, .bb-row.on, .bb-row:focus-visible { background: var(--hover); outline: none; }
.bb-rk { font: 600 13px var(--mono); color: var(--muted); text-align: right; }
.bb-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bb-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bb-nm > a, .bb-nm > span:first-child { color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-nm > a:hover { text-decoration: underline; }
.bb-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-ico { flex: none; }
/* the bar's lane: the $1,000 line, the S&P 500 (solid) and the median (dashed) */
.bb-tr { position: relative; align-self: stretch; margin: -3px 0; min-height: 22px;
  background: linear-gradient(to right, transparent calc(var(--b0) - 0.5px), var(--axis) calc(var(--b0) - 0.5px), var(--axis) calc(var(--b0) + 0.5px), transparent calc(var(--b0) + 0.5px)); }
.bb-tr::before, .bb-tr::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; pointer-events: none; }
.bb-tr::before { left: var(--sp); margin-left: -1px; border-left: 2px solid var(--ink); opacity: 0.55; }
.bb-tr::after { left: var(--md); margin-left: -1px; border-left: 2px dashed var(--ink-2); opacity: 0.6; }
.bb-bar { position: absolute; top: 50%; height: 16px; margin-top: -8px; border-radius: 4px; background: var(--spx); z-index: 1; }
.bb-bar.down { background: var(--bad); }
.bb-assets .bb-bar.down { opacity: 0.55; }
.bb-v { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; text-align: right; }
.bb-v b { font: 600 15px var(--mono); color: var(--ink); letter-spacing: -0.02em; }
.bb-row.down .bb-v b { color: var(--bad); }
.bb-xr { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.bb-gap { display: flex; justify-content: center; align-items: center; min-height: 30px; border-top: 1px dashed var(--axis); font-size: 12px; color: var(--muted); }
.bb-rows .bb-gap + .bb-row { border-top-color: var(--axis); }

/* asset colors: bars, heat-grid cells, swatches */
.k-spx { --k: var(--spx); } .k-bond { --k: var(--bond); } .k-bills { --k: var(--bb-bills); } .k-cash { --k: var(--cash); }
.k-gold { --k: var(--gold); } .k-silver { --k: var(--bb-silver); } .k-platinum { --k: var(--bb-platinum); }
.k-home { --k: var(--home); } .k-btc { --k: var(--btc); } .k-ndq { --k: var(--ndq); } .k-coin { --k: var(--bb-coin); }
.bb-assets .bb-bar { background: var(--k); }
.sw-sq.bb-sw-k { background: var(--k); }
.bb-cell.bb-k { fill: var(--k); fill-opacity: 0.88; }

/* legend swatches of the ladder */
.ln.bb-sw-sp { stroke: var(--ink); stroke-width: 2; opacity: 0.6; }
.ln.bb-sw-md { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 3 3; opacity: 0.7; }
.ln.bb-sw-base { stroke: var(--axis); stroke-width: 2; }
.bb-sw-line, .bb-sw-dash { display: inline-block; width: 16px; height: 0; vertical-align: middle; border-top: 2px solid var(--ink); opacity: 0.6; }
.bb-sw-dash { border-top-style: dashed; border-top-color: var(--ink-2); }
.tip-row .sw-sq.art-up { background: var(--spx); }
.tip-row .sw-sq.art-down { background: var(--bad); }
.bb-tip-k { font: 600 11px var(--mono); color: var(--muted); text-align: center; }
.bb-tip-span { font-weight: 500; color: var(--muted); }
.bb-tip-hint { margin-top: 4px; font-size: 11px; color: var(--muted); }

/* ---------- tables ---------- */
.bb-fam td.bb-best, .bb-win td.text, .bb-dec td.text { text-align: left; white-space: nowrap; }
.bb-fam thead th:nth-child(2), .bb-dec thead th:nth-child(2), .bb-dec thead th:nth-child(5), .bb-win thead th:not(:first-child) { text-align: left; }
.bb-fam td.bb-best { line-height: 1.5; font-size: 14px; }
.bb-tx { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.bb-fam th a, .bb-dec th a { color: var(--ink); }
.bb-dec td .ico { vertical-align: middle; margin-right: 6px; }
.bb-win td { font-size: 13px; }

/* ---------- figures ---------- */
.bb-fig-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 2px 44px 6px 10px; }
.bb-fig-head .legend { margin: 0; padding: 0; }
.bb-heat-leg-l { color: var(--muted); }
.bb-plot-heat { min-height: 320px; }
.bb-plot-ov { min-height: 260px; }
.bb-plot-surv { min-height: 300px; }
.bb-cell { stroke: none; cursor: pointer; }
.bb-h0 { fill: var(--spx); fill-opacity: 0.12; } .bb-h1 { fill: var(--spx); fill-opacity: 0.26; } .bb-h2 { fill: var(--spx); fill-opacity: 0.42; }
.bb-h3 { fill: var(--spx); fill-opacity: 0.6; } .bb-h4 { fill: var(--spx); fill-opacity: 0.8; } .bb-h5 { fill: var(--spx); fill-opacity: 1; }
.sw-sq.bb-h0 { background: color-mix(in srgb, var(--spx) 12%, var(--surface)); } .sw-sq.bb-h1 { background: color-mix(in srgb, var(--spx) 26%, var(--surface)); }
.sw-sq.bb-h2 { background: color-mix(in srgb, var(--spx) 42%, var(--surface)); } .sw-sq.bb-h3 { background: color-mix(in srgb, var(--spx) 60%, var(--surface)); }
.sw-sq.bb-h4 { background: color-mix(in srgb, var(--spx) 80%, var(--surface)); } .sw-sq.bb-h5 { background: var(--spx); }
.bb-cell.on { stroke: var(--ink); stroke-width: 2; }
.bb-cell.cur { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
.bb-cell.on.cur { stroke-dasharray: none; }
.bb-cl { fill: var(--ink); font: 600 9px var(--mono); pointer-events: none; letter-spacing: -0.02em; }
.bb-cl.inv { fill: #fff; }
.bar.bb-young { fill: var(--s6); fill-opacity: 0.35; }
.sw-sq.bb-sw-young { background: color-mix(in srgb, var(--s6) 35%, var(--surface)); }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .bb-lad { --cw: 190px; --cv: 132px; }
  .bb-nm > a, .bb-nm > span:first-child { font-size: 14px; }
}
@media (max-width: 640px) {
  .art > .bb-tool { padding: 18px 16px 16px; }
  .bb-sentence { line-height: 2.1; }
  .bb-tool-head .label { flex-basis: 100%; }
  .bb-axis, .bb-row { grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; }
  .bb-row { grid-template-areas: "rk who v" ". tr tr"; row-gap: 3px; padding: 7px 0 6px; }
  .bb-rk { grid-area: rk; align-self: start; padding-top: 4px; }
  .bb-who { grid-area: who; }
  .bb-v { grid-area: v; }
  .bb-tr { grid-area: tr; min-height: 18px; margin: 0; }
  .bb-bar { height: 12px; margin-top: -6px; }
  .bb-axis { grid-template-areas: ". tk tk"; height: 20px; }
  .bb-axis > :first-child, .bb-log { display: none; }
  .bb-ticks { grid-area: tk; }
  .bb-v b { font-size: 14px; }
  .bb-tool-foot .btn { margin-left: 0; }
  .bb-fig-head { padding-right: 44px; }
  .bb-who .lg:not(.lgb) img { max-width: 40px; height: auto; }
  .bb-who { gap: 7px; }
  .bb-plot-heat { min-height: 250px; }
}
@media (max-width: 420px) {
  .bb-chips .chip { padding: 8px 9px; }
}