/* Investing (/invest): real stocks, ETFs and crypto at live prices, bought with play tokens. Everything
   here uses app.css tokens, so light and dark both work; green/red only ever mean up/down. */

/* ----- header and tab bar */
.hlink.invest-link svg { stroke-width: 1.8; }
.tabbar a[data-nav="invest"] { color: #0f766e; }
.tabbar a[data-nav="invest"] svg { stroke: #0f766e; }
.tabbar a[data-nav="invest"].on { color: #2dd4bf; }
.tabbar a[data-nav="invest"].on svg { stroke: #2dd4bf; }

/* ----- the page head: title, the search box, your totals */
.iv-head { margin-bottom: 16px; align-items: center; }
.iv-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-search { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; width: 300px; max-width: 100%; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); transition: border-color var(--dur), box-shadow var(--dur); }
.iv-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.iv-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.iv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font-size: 14px; }
.iv-search input::placeholder { color: var(--text-3); }
.iv-search .search-pop { left: 0; right: 0; top: calc(100% + 6px); }
.iv-search .sp-row small { text-transform: none; }
.iv-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 14px; }
.iv-pill b { font-weight: 700; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.iv-pill .coin { width: 15px; height: 15px; }
.iv-pill .chg { font-size: 12.5px; }

/* the index strip */
.iv-idx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.iv-idx a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chg" "price chg"; align-items: center; column-gap: 10px; padding: 12px 14px; }
.iv-idx a small { grid-area: name; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.iv-idx a b { grid-area: price; font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.iv-idx a .chg { grid-area: chg; font-size: 13px; }
.iv-idx a.card:hover { border-color: var(--line-2); }

/* two columns: the lists, and your portfolio / popular / latest trades */
.iv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.iv-main { min-width: 0; display: grid; gap: 14px; }
.iv-side { display: grid; gap: 16px; min-width: 0; }
.iv-main > *, .iv-side > * { min-width: 0; }
.iv-side .card { padding: 16px 18px; }
.iv-side h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iv-side h3 a { font-size: 13px; font-weight: 500; color: var(--text-2); }
.iv-side h3 a:hover { color: var(--text); }

.iv-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.iv-tabs-row .utabs { flex: 1; min-width: 0; }
.iv-tabs-row .utabs button { font-size: 14px; }
.iv-sort { flex: none; }
.iv-sort button { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* the list: a symbol tile, the name, a day line, the price and change */
.iv-tbl td { vertical-align: middle; }
.iv-tbl .r { text-align: right; }
.iv-tbl tbody tr { cursor: pointer; }
.iv-tbl tbody tr:hover td { background: var(--bg-hover); }
.iv-tbl .btn { height: 30px; padding: 0 12px; font-size: 13px; }
.sym-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sym-cell > div { min-width: 0; }
.sym-cell b { display: block; font-weight: 600; font-size: 14px; letter-spacing: -.005em; }
.sym-cell small { display: block; color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.sym-tile { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: -.02em; color: hsl(var(--h) 45% 28%); background: linear-gradient(135deg, hsl(var(--h) 70% 92%), hsl(var(--h) 60% 84%)); border: 1px solid hsl(var(--h) 40% 80% / .6); }
:root[data-theme="dark"] .sym-tile { color: hsl(var(--h) 60% 86%); background: linear-gradient(135deg, hsl(var(--h) 30% 24%), hsl(var(--h) 30% 18%)); border-color: hsl(var(--h) 30% 32%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sym-tile { color: hsl(var(--h) 60% 86%); background: linear-gradient(135deg, hsl(var(--h) 30% 24%), hsl(var(--h) 30% 18%)); border-color: hsl(var(--h) 30% 32%); } }
.sym-tile.lg { width: 56px; height: 56px; border-radius: 14px; font-size: 15px; }
.sym-tile.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 9px; }
.spark { width: 96px; height: 30px; display: block; overflow: visible; }
.spark path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark.up path { stroke: var(--yes); }
.spark.down path { stroke: var(--no); }
.spark .base { stroke: var(--line-2); stroke-dasharray: 2 3; stroke-width: 1; }
.iv-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-chg { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.iv-chg small { display: block; font-weight: 500; color: var(--text-3); font-size: 11.5px; }
.chg.flat { color: var(--text-3); }
.iv-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.iv-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.iv-state.open i { background: var(--yes); animation: blink 1.4s infinite; }
.iv-state.ext i { background: var(--gold); }

/* your portfolio card */
.iv-pf .n { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.iv-pf .n .coin { width: 22px; height: 22px; }
.iv-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.iv-pf-grid b { display: block; color: var(--text); font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.iv-pf .btn { margin-top: 14px; }
.iv-pop { display: grid; gap: 2px; }
.iv-pop a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; transition: background var(--dur); }
.iv-pop a:hover { background: var(--bg-soft); }
.iv-pop b { font-size: 13.5px; font-weight: 600; }
.iv-pop small { display: block; color: var(--text-3); font-size: 12px; }
.iv-pop .iv-price { font-size: 13.5px; }

/* the live list */
.iv-live .live-tbl td { padding-top: 9px; padding-bottom: 9px; }
.side-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.side-tag.buy { background: var(--yes-soft); color: var(--yes-ink); }
.side-tag.sell { background: var(--no-soft); color: var(--no-ink); }
.trade-cell { display: inline-flex; align-items: center; gap: 8px; }
.trade-cell small { color: var(--text-3); font-weight: 500; }

/* ----- one stock */
.iv-stock-head { display: flex; gap: 14px; align-items: center; }
.iv-stock-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.iv-stock-head .crumb a { color: var(--text-2); }
.iv-stock-head .crumb a:hover { color: var(--text); }
.iv-stock-head .crumb .sym { color: var(--text); font-weight: 600; }
.iv-big { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.iv-big b { font-size: 34px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
.iv-big b .coin { width: 22px; height: 22px; }
.iv-big .chg { font-size: 15px; }
.iv-big .iv-state { margin-left: 6px; }
.iv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.iv-stats .card { padding: 12px 14px; }
.iv-stats small { display: block; color: var(--text-2); font-size: 12px; font-weight: 500; }
.iv-stats b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.iv-range { margin-top: 10px; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.iv-range .bar { position: relative; height: 4px; border-radius: 2px; background: var(--bg-soft); }
.iv-range .bar i { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--panel); }
.iv-range .ends { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.iv-holders { display: grid; gap: 6px; }
.iv-holders .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.iv-holders .row:first-child { border-top: 0; }
.iv-holders .row small { color: var(--text-3); font-size: 12px; }
.iv-pos { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13px; color: var(--text-2); }
.iv-pos b { display: block; color: var(--text); font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.iv-pos .wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.iv-pos .wide b { font-size: 18px; }
.tp .iv-tp-price { margin-top: 14px; display: grid; gap: 10px; }
.tp .iv-tp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.tp .iv-tp-row .iv-state { white-space: nowrap; }
.tp .iv-last { display: inline-flex; align-items: baseline; gap: 6px; }
.tp .iv-last small { color: var(--text-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.tp .iv-last b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 17px; letter-spacing: -.02em; }
.tp .iv-tp-book { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp .iv-tp-book > div { border-radius: 8px; padding: 8px 10px; display: grid; gap: 1px; min-width: 0; }
.tp .iv-tp-book .bid { background: var(--yes-soft); color: var(--yes-ink); }
.tp .iv-tp-book .ask { background: var(--no-soft); color: var(--no-ink); }
.tp .iv-tp-book small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.tp .iv-tp-book b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: inherit; white-space: nowrap; }
.tp .iv-tp-book span { font-size: 12px; opacity: .9; font-variant-numeric: tabular-nums; }
.tp-amt input.shares-in { font-size: 30px; }
.tp-chips.pct { justify-content: stretch; }
.tp-chips.pct button { flex: 1; }
.tp-sum .get { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.tp-sum .get span { color: var(--text); font-weight: 600; font-size: 15px; }
.tp-sum .get b { font-size: 20px; }
.tp-sum .get b.tok { display: inline-flex; align-items: center; gap: 5px; }
.tp-sum .get b .coin { width: 16px; height: 16px; }

/* portfolio tab */
.iv-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.iv-totals .card { padding: 14px 16px; }
.iv-totals small { display: block; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.iv-totals b { display: block; margin-top: 2px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.iv-totals b .coin { width: 16px; height: 16px; }
.iv-totals .sub { font-size: 12.5px; margin-top: 2px; }
.iv-sec-title { font-size: 16px; font-weight: 600; margin: 8px 0 -4px; letter-spacing: -.01em; }

@media (max-width: 1100px) {
  .iv-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .sym-cell small { max-width: 160px; }
  .iv-live .trade-cell small { display: none; }
}
@media (max-width: 920px) {
  .iv-layout { grid-template-columns: minmax(0, 1fr); }
  .iv-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-search { width: 100%; }
  .iv-head-right { width: 100%; }
}
@media (max-width: 560px) {
  .spark { width: 64px; }
  .sym-cell small { max-width: 120px; }
  .iv-big b { font-size: 28px; }
  .iv-tbl .btn { display: none; }
}

/* the Options tab of a stock page points at the option board */
.iv-opt-teaser { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; flex-wrap: wrap; }
.iv-opt-teaser b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.iv-opt-teaser p { color: var(--text-2); font-size: 13.5px; line-height: 1.5; max-width: 560px; }

/* ----- limit orders: the Market/Limit switch, the limit price row, the open orders under the panel */
.tp-kind { margin-top: 12px; width: 100%; }
.tp-kind button { flex: 1; }
.tp-kind.has-ind .on { background: none; }
.iv-book { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--text-2); }
.iv-book b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.iv-book small { color: var(--text-3); }
.tp-limit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tp-limit input { font-size: 24px; width: 130px; }
.tp-limit .lbl { font-size: 14px; }
.tp-sum .fills { font-size: 12.5px; color: var(--text-2); }
.tp-sum .fills.now { color: var(--yes-ink); }
.iv-orders { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.iv-orders h4 { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 0 0 4px; }
.iv-orders .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.iv-orders .row:first-of-type { border-top: 0; }
.iv-orders .row b { font-weight: 600; }
.iv-orders .row small { display: block; color: var(--text-3); font-size: 12px; }
.iv-orders .btn.sm { height: 26px; padding: 0 8px; font-size: 12px; }
.order-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--bg-soft); color: var(--text-2); }
.order-tag.open { background: var(--blue-soft); color: var(--blue); }
.order-tag.filled { background: var(--yes-soft); color: var(--yes-ink); }
.order-tag.cancelled, .order-tag.expired, .order-tag.failed { background: var(--bg-soft); color: var(--text-3); }