/* tokenio — paper trading (account chip, sheets, portfolio). Uses theme.css tokens. */
.mono { font-family: var(--mono); }
.up { color: var(--good); } .dn { color: var(--crit); }

/* account chip — fixed, top right on every view */
.pp-chip { position: fixed; top: 14px; right: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(10px); box-shadow: var(--shadow); color: var(--ink); font-size: 13px; transition: transform .2s var(--ease-out), box-shadow .2s; }
.pp-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.pp-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.pp-chip b { font-family: var(--mono); font-weight: 600; }
.pp-chip .pp-lbl { font-weight: 600; }
.pp-chip .pp-sub { color: var(--muted); }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-deep); box-shadow: 0 0 0 3px var(--sky-soft); }
.pp-dot.off { background: var(--sun-deep); box-shadow: 0 0 0 3px var(--sun-soft); }
.pp-chip[hidden] { display: none; }

/* paper buy button on the token page */
.tok-head .pp-buy { display: inline-flex; align-items: center; gap: 6px; align-self: center; }
.pp-buy svg { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* sheet (modal) */
.pp-sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.pp-sheet[hidden] { display: none; }
.pp-scrim { position: absolute; inset: 0; background: rgba(18,34,52,.42); backdrop-filter: blur(2px); animation: ppfade .2s ease; }
.pp-panel { position: relative; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--surface-1);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 26px 24px 20px; animation: pprise .28s var(--ease-out); }
.pp-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.pp-x:hover { background: var(--surface-2); }
.pp-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.pp-h { font-size: 22px; letter-spacing: -0.02em; margin: 6px 0 6px; color: var(--ink); }
.pp-p { color: var(--ink-2); margin: 0 0 16px; }
.pp-form { display: grid; gap: 12px; }
.pp-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pp-form input { font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); padding: 11px 12px; border-radius: var(--r-s); border: 1px solid var(--hair-2); background: var(--surface-3); outline: none; }
.pp-form input:focus { border-color: var(--sky-deep); box-shadow: var(--ring); }
.pp-amt { display: flex; align-items: center; border: 1px solid var(--hair-2); border-radius: var(--r-s); background: var(--surface-3); padding-left: 12px; }
.pp-amt:focus-within { border-color: var(--sky-deep); box-shadow: var(--ring); }
.pp-amt i { font-style: normal; font-family: var(--mono); font-size: 22px; color: var(--muted); }
.pp-amt input { border: 0; background: none; box-shadow: none !important; font-family: var(--mono); font-size: 26px; font-weight: 600; padding: 8px 10px; width: 100%; }
.pp-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-quick button { border: 1px solid var(--hair-2); background: var(--surface-1); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-family: var(--mono); color: var(--ink); }
.pp-quick button:hover { border-color: var(--sky-deep); color: var(--sky-ink); }
.pp-cash { font-size: 13px; color: var(--muted); } .pp-cash b { color: var(--ink); font-family: var(--mono); }
.pp-alloc { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-s); background: var(--surface-2); }
.pp-arow { display: grid; grid-template-columns: 52px 1fr 52px 76px; gap: 10px; align-items: center; font-size: 13px; }
.pp-bar { height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; } .pp-bar i { display: block; height: 100%; background: var(--sky-deep); border-radius: 3px; }
.pp-r { text-align: right; }
.pp-err { color: var(--crit); background: var(--crit-wash); padding: 8px 10px; border-radius: var(--r-xs); font-size: 13px; }
.pp-wide { width: 100%; justify-content: center; padding-top: 12px; padding-bottom: 12px; }
.pp-fine { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.pp-switch { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }
.pp-switch button, .pp-link { border: 0; background: none; color: var(--sky-ink); font: inherit; font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.pp-done { text-align: center; }
.pp-tick { width: 52px; height: 52px; margin: 4px auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--good-wash); color: var(--good); font-size: 26px; font-weight: 700; animation: pppop .4s var(--ease-bounce); }
.pp-fills { display: grid; gap: 4px; text-align: left; font-size: 13px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-s); margin-bottom: 16px; }
.pp-fills div { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; }
.pp-row2 { display: flex; gap: 8px; justify-content: center; }

/* portfolio */
#portfolio { padding: 28px 20px 80px; }
.pp-wrap { padding-top: 0; }
/* on inner pages the chip sits in the brand bar, left of the wordmark */
.brand-bar .pp-chip.pp-inbar { position: static; margin-left: auto; box-shadow: none; backdrop-filter: none; }
.brand-bar .pp-chip.pp-inbar + .wordmark, .brand-bar .pp-chip.pp-inbar ~ .wordmark { margin-left: 0; }
.pp-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin: 18px 0 18px; }
.pp-total { font-size: clamp(34px, 6vw, 48px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; margin-top: 6px; }
.pp-pnl { font-family: var(--mono); font-weight: 600; margin-top: 4px; } .pp-pnl.up { color: var(--good); } .pp-pnl.dn { color: var(--crit); }
.pp-pnl em { font-family: var(--font); font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.pp-stats { display: flex; gap: 10px; }
.pp-stats div { background: var(--surface-1); border: 1px solid var(--hair); border-radius: var(--r-s); padding: 10px 14px; min-width: 104px; }
.pp-stats span { display: block; font-size: 12px; color: var(--muted); } .pp-stats b { font-size: 16px; }
.pp-chart { width: 100%; height: 180px; display: block; }
.pp-chart .ln { fill: none; stroke: var(--sky-deep); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.pp-chart.dn .ln { stroke: var(--crit); }
.pp-chart .area { fill: var(--sky-soft); } .pp-chart.dn .area { fill: var(--crit-wash); opacity: .6; }
.pp-chart .base { stroke: var(--hair-2); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.pp-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; }
.pp-nochart, .pp-loading { color: var(--muted); padding: 24px 0; text-align: center; }
.pp-h-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.pp-h-name { font-size: 18px; letter-spacing: -0.01em; margin: 4px 0 0; }
.pp-h-val { text-align: right; display: grid; gap: 2px; } .pp-h-val b { font-size: 20px; } .pp-h-val span { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.pp-mix { display: flex; height: 8px; gap: 2px; border-radius: 4px; overflow: hidden; margin: 14px 0 10px; } .pp-mix i { display: block; }
.pp-pos { display: grid; gap: 2px; }
.pp-prow { display: grid; grid-template-columns: 10px 54px 1fr 92px 76px 92px; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.pp-prow:last-child { border-bottom: 0; }
.pp-sw { width: 10px; height: 10px; border-radius: 3px; }
.pp-nm { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.pp-sell { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 13px; color: var(--muted); }
.pp-sell span { margin-right: 4px; }
.pp-sell button { border: 1px solid var(--hair-2); background: var(--surface-1); border-radius: 999px; padding: 6px 11px; font-size: 13px; color: var(--ink); }
.pp-sell button:hover { border-color: var(--crit); color: var(--crit); }
.pp-sell button[data-armed] { background: var(--crit); border-color: var(--crit); color: #fff; }
.pp-drift { margin-top: 12px; padding: 12px; border-radius: var(--r-s); background: var(--sky-wash); display: grid; gap: 10px; font-size: 14px; }
.pp-drift-head b { font-family: var(--mono); font-size: 16px; }
.pp-legs { display: flex; flex-wrap: wrap; gap: 6px; } .pp-legs span { font-size: 12px; background: var(--surface-1); padding: 4px 8px; border-radius: 999px; font-family: var(--mono); }
.pp-legs .add { box-shadow: inset 0 0 0 1px var(--good); } .pp-legs .rem { box-shadow: inset 0 0 0 1px var(--crit); }
.pp-drift .btn { justify-self: start; }
.pp-muted { color: var(--muted); }
.pp-empty { text-align: center; padding: 32px 20px; } .pp-empty h2 { margin: 0 0 6px; } .pp-empty p { color: var(--ink-2); }
.pp-acts { display: grid; }
.pp-act { display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.pp-act:last-child { border-bottom: 0; }
.pp-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; text-align: center; }
.k-buy { background: var(--sky-wash); color: var(--sky-ink); } .k-sell { background: var(--sun-wash); color: var(--sun-ink); } .k-rebalance { background: var(--surface-2); color: var(--ink-2); }
.pp-when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pp-foot { color: var(--muted); font-size: 12px; text-align: center; padding: 12px 0 40px; display: grid; gap: 6px; }

@media (max-width: 600px) {
  #portfolio { padding: 20px 16px 64px; }
  .brand-bar .pp-chip.pp-inbar .pp-lbl { display: none; }
  .brand-bar .pp-chip.pp-inbar .wordmark-hide { display: none; }
  .pp-chip { top: 10px; right: 10px; padding: 7px 11px; } .pp-chip .pp-sub { display: none; }
  .pp-stats { width: 100%; } .pp-stats div { flex: 1; min-width: 0; }
  .pp-prow { grid-template-columns: 10px 50px 1fr 80px; } .pp-prow > :nth-child(4), .pp-prow > :nth-child(5) { display: none; }
  .pp-sell { margin-left: 0; }
  .pp-act { grid-template-columns: 70px 1fr; } .pp-when { grid-column: 2; }
  .tok-head .pp-buy { width: 100%; justify-content: center; }
}
@keyframes ppfade { from { opacity: 0; } }
@keyframes pprise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes pppop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-scrim, .pp-panel, .pp-tick { animation: none; } }