/* Trade and Earn (Jacek, Nov 4 to 5, 2026, round 3 approved; web/proto/proto.css of the prototypes): the pieces both pages share,
   on top of site.css and only its variables, so light and dark both work. Each page adds its own layout after it. In the Arcade
   look since Nov 5, 2026 (web/proto/loud2.css, approved): outlines, hard shadows, rounded figures, buttons that press. */
main.pg { max-width: 1120px; margin: 0 auto; padding: var(--s6) 24px 0; display: flex; flex-direction: column; gap: var(--s5); }
.pg h1 { margin: 0; font-size: 30px; line-height: 1.2; text-wrap: balance; }
.lede { margin: 0; color: var(--body2); max-width: 62ch; font-size: var(--t3); line-height: 1.5; }
.box { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.lbl { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.note { margin: 0; font-size: var(--t2); color: var(--text2); text-align: center; } .note.warn { color: var(--warn); }

/* The token picker (more than one token listed): a row of chips that swipes inside its own box on a phone */
.picker { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px; padding: 2px; }
.picker::-webkit-scrollbar { display: none; }
/* figures: the rounded face, tabular so they don't jump as they change (Arcade, Nov 5, 2026) */
.stats dd, .win .wv, .wi .res b, .get b, .yr .pc b, .field input, .kv dd, .tk, .wi .wh b, .udb b, .udb small, .go, .filters button, .zl, .tkr, .claimbar b, .prow .pp, .cf .cfv { font-family: var(--num); font-variant-numeric: tabular-nums; }
.ic { flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; color: var(--on-color); font-weight: 600; line-height: 1; }
.ic img { width: 100%; height: 100%; display: block; }

/* The amount field: a grey box, the big number, the unit, quick picks, the balance */
.field { background: var(--chip); border: 2px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.field .fh { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t2); color: var(--body2); }
.field .fr { display: flex; align-items: center; gap: 10px; }
.field input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; padding: 0; font-size: 40px; font-weight: 900; line-height: 1.1; color: var(--ink); outline: none; }
.field input::placeholder { color: var(--faint); }
.field:focus-within { border-color: var(--link); }
.field .ff { display: flex; justify-content: space-between; gap: 8px; min-height: 1.4em; font-size: var(--t2); color: var(--text2); }
/* pills: the unit, quick amounts, the token picker, the filters; 44 px to the finger even when they look smaller */
.unit { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s3) 0 var(--s1); border: 2px solid var(--edge); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-weight: 800; font-size: var(--t2); }
.qk { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.qk button { position: relative; min-height: 32px; padding: 0 var(--s3); border: 2px solid var(--edge); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: 800 var(--t1)/1 var(--mono); cursor: pointer; }
.qk button::after { content: ""; position: absolute; inset: -6px -2px; } /* 44 px to the finger */
.qk button:hover { background: var(--chip); }

/* Label and value rows */
.kv { margin: 0; display: flex; flex-direction: column; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: var(--s3) 0; border-top: 1px solid var(--hair); font-size: var(--t2); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--body2); white-space: nowrap; } .kv dd { margin: 0; font-size: var(--t3); font-weight: 800; text-align: right; }
.kv dd small { display: block; margin-top: 2px; font-family: var(--sans); font-weight: 500; font-size: var(--t1); color: var(--text2); }

/* The main button: purple, or green and red for a side; an arcade button that presses down (Arcade, Nov 5, 2026) */
.go { width: 100%; min-height: 56px; border: 2px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--sh-btn); padding: 8px 16px; background: var(--grape); color: var(--on-color); font-size: var(--t4); font-weight: 900; line-height: 1.3; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.go:hover { background: var(--grape-d); }
.go:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--drop); }
.go.up { background: var(--up); color: var(--tag-ink); } .go.up:hover { background: var(--up-d); }
.go.down { background: var(--down); color: var(--tag-ink); } .go.down:hover { background: var(--down-d); }
.go:disabled, .go:disabled:hover { background: var(--hair); color: var(--text2); cursor: default; box-shadow: none; }
.go:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.status { min-height: 1.3em; margin: -6px 0 0; font-size: 13px; font-weight: 500; color: var(--text2); text-align: center; }
.status.bad { color: var(--down-d); } .status.good { color: var(--up-d); } .status:empty { display: none; }
.pending .win, .pending .kv, .pending .get, .pending .wi { opacity: .5; transition: opacity .15s; } /* the numbers wait for the quote at the amount typed */
.shut { padding: var(--s4); border-radius: var(--r-md); background: var(--chip); font-size: var(--t2); color: var(--body2); } .shut b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 800; font-family: var(--num); font-size: var(--t3); }

/* The What if: drag Friday's price, read what comes back */
.wi { display: flex; flex-direction: column; gap: var(--s3); border-radius: var(--r-md); }
.wi .wh { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; font-size: var(--t2); color: var(--body2); }
.wi .wh b { color: var(--ink); font-weight: 600; }
/* the slider: a purple fill up to a yellow thumb (--p set by options.js, as Safari has no ::range-progress) */
.wi input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.wi input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: var(--r-pill); border: 2px solid var(--edge); background: linear-gradient(90deg, var(--grape) var(--p, 50%), var(--card) var(--p, 50%)); }
.wi input[type=range]::-moz-range-track { height: 10px; border-radius: var(--r-pill); border: 2px solid var(--edge); background: linear-gradient(90deg, var(--grape) var(--p, 50%), var(--card) var(--p, 50%)); }
.wi input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border-radius: 50%; background: var(--sticker); border: 3px solid var(--sticker-ink); box-shadow: 2px 2px 0 var(--sticker-ink); cursor: grab; transition: transform .1s; }
.wi input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--sticker); border: 3px solid var(--sticker-ink); }
.wi input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12) rotate(-8deg); }
.zones { height: 10px; display: flex; gap: 2px; overflow: hidden; border-radius: var(--r-pill); }
.zones i { display: block; height: 100%; }
.zl { display: flex; justify-content: space-between; font-size: var(--t1); font-weight: 800; color: var(--text2); }
.zk { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t1); color: var(--text2); }
.zk i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* the multiple as a tilted yellow sticker ("Up to 30x", "6x the $20.00 you paid"; the words the same, only styled) */
.mx { display: inline-block; padding: 0 var(--s2); background: var(--sticker); color: var(--sticker-ink); border: 2px solid var(--sticker-ink); border-radius: 6px; font: 900 var(--t3)/1.4 var(--num); transform: rotate(-2deg); }
/* a big number that changed pops (options.js; off under reduced motion) */
.pop { animation: pop .3s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.06) rotate(-1deg); } 100% { transform: scale(1); } }
.win .wv, .wi .res b, .get b { display: inline-block; transform-origin: left center; }

/* The week's chart (Trade) */
.wk { width: 100%; min-width: 0; }
.wk svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.wk text { font: 500 10px var(--mono); fill: var(--text2); letter-spacing: .06em; }
.wk .g { stroke: var(--grid); stroke-width: 1; }
.wk .pline { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.wk .dot { fill: var(--ink); }
.wk .kline { stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 5 4; }
.wk .end { stroke: var(--faint); stroke-dasharray: 2 3; }
.wk .mk { stroke-width: 1.3; stroke-dasharray: 2 3; }
.wk .mk.be { stroke: var(--up); } .wk .mk.be.dn { stroke: var(--down); }
.wk .tag rect { fill: var(--ink); } .wk .tag text { fill: var(--card); font-size: 10.5px; letter-spacing: 0; }
.wk .tag.line rect { fill: var(--blue); } .wk .tag.line text { fill: var(--on-color); }
:root[data-theme="dark"] .wk .tag.line text { fill: var(--tag-ink); } /* dark ink on the dark blue 6.2:1 */
.wk .tag.be rect { fill: var(--up); } .wk .tag.be text { fill: var(--tag-ink); }
.wk .tag.be.dn rect { fill: var(--down); }
.wk .empty { margin: 40px 0; text-align: center; font-size: 13px; color: var(--text2); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t2); color: var(--body2); }
.legend i { display: inline-block; width: 16px; vertical-align: middle; margin-right: 6px; border-top: 2px solid var(--ink); }
.legend i.k { border-top: 2px dashed var(--blue); } .legend i.b { border-top: 2px dotted var(--up); } .legend i.b.dn { border-top-color: var(--down); }

/* The ticker (options.js renderTicker): a purple band under the menu, only while more than one token is listed */
.ticker { overflow: hidden; background: var(--grape); color: var(--on-color); border-bottom: 2px solid var(--edge); font: 800 var(--t2)/1 var(--num); white-space: nowrap; }
.ticker-in { display: inline-flex; gap: var(--s6); padding: var(--s3) 0 var(--s3) var(--s5); animation: tick 40s linear infinite; }
.tkr { display: inline-flex; gap: var(--s2); align-items: baseline; } .tkr i { font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

/* The claim bar: what ended weeks owe you, one tap */
.claimbar { padding: var(--s3) var(--s4) var(--s3) var(--s5); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.claimbar b { display: block; font-size: var(--t4); font-weight: 900; color: var(--up-d); }
.claimbar small { display: block; margin-top: 2px; font-size: 13px; color: var(--body2); }
.claimbar button { min-height: 44px; padding: 10px 18px; border: 2px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--sh-btn); background: var(--grape); color: var(--on-color); font: inherit; font-size: var(--t3); font-weight: 800; cursor: pointer; }
.claimbar button:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.claimbar button:disabled { background: var(--hair); color: var(--text2); box-shadow: none; }

/* Your positions and last week, one box each: a row a position, its total return, Sell back or Withdraw early and its confirm */
.sec h2 { margin: 0 0 var(--s3); font-family: var(--num); font-size: var(--t4); font-weight: 900; }
.pbox { padding: 0; overflow: hidden; }
.pbox > * + * { border-top: 2px solid var(--hair); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(150px, max-content); column-gap: 16px; align-items: center; padding: var(--s4) var(--s5); }
.prow .pn { display: flex; flex-direction: column; min-width: 0; } .prow .pn b { font-family: var(--num); font-size: var(--t3); font-weight: 900; line-height: 1.3; }
.prow small { font-size: 13.5px; color: var(--body2); line-height: 1.35; }
.prow .pp { min-width: max-content; text-align: right; font-size: 18px; font-weight: 900; line-height: 1.25; white-space: nowrap; } .prow .pp b { font-weight: 900; } .prow .pp small { font-size: 14px; font-weight: 500; color: inherit; }
.prow .gain { color: var(--up-d); } .prow .loss { color: var(--down-d); }
.pa { display: flex; gap: 8px; justify-content: flex-end; justify-content: safe flex-end; }
.abtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px; border: 2px solid var(--edge); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t2); font-weight: 800; cursor: pointer; text-decoration: none; white-space: nowrap; }
.abtn:hover { background: var(--chip); color: var(--ink); }
.abtn.pri { background: var(--grape); color: var(--on-color); box-shadow: var(--sh-btn); } .abtn.pri:hover { background: var(--grape-d); color: var(--on-color); }
.abtn.pri:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.abtn:disabled { color: var(--text2); cursor: default; background: var(--chip); border-color: var(--hair); box-shadow: none; }
.prow .status, .prow .pslip { grid-column: 1 / -1; margin: 8px 0 0; text-align: left; } .prow .status:empty { display: none; }
.prow .pslip { font-size: var(--t2); color: var(--body2); }
/* the confirm under a row: the exact amount, its bound, the button with the amount (Jacek, Nov 5, 2026) */
.cf { grid-column: 1 / -1; margin-top: var(--s3); padding: var(--s3) var(--s4); border: 2px solid var(--line); border-radius: var(--r-md); background: var(--chip); display: flex; flex-direction: column; gap: 4px; }
.cf .cfv { margin: 0; font-size: var(--t4); font-weight: 900; } .cf .cfv small { font-family: var(--sans); font-size: var(--t2); font-weight: 400; color: var(--text2); }
.cf .cfs { margin: 0; font-size: var(--t2); color: var(--body2); }
.cf .cfb { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .cf .cfb .abtn { min-height: 44px; }
.prow.ended { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.prow.ended .pp { min-width: 0; white-space: normal; text-align: left; font-size: var(--t4); }
.prow.ended .pp b { display: inline; } .prow.ended .pp .rw { font-size: 14.5px; font-weight: 500; color: var(--body2); }
.pbox .phead { padding: var(--s4) var(--s5); } .phead .t { margin: 0; } .phead .c { margin: 4px 0 0; font-family: var(--num); font-size: var(--t4); font-weight: 900; } .phead .s { margin: 2px 0 0; font-size: 13.5px; color: var(--body2); }
.thisweek { padding: var(--s5); display: flex; flex-direction: column; gap: 8px; }
.thisweek h2 { margin: 0; font-family: var(--num); font-size: var(--t4); font-weight: 900; } .thisweek p { margin: 0; font-size: 14px; color: var(--body2); }

@media (max-width: 640px) {
  main.pg { padding: var(--s5) 16px 0; gap: var(--s4); }
  .pg h1 { font-size: 26px; }
  .box { padding: var(--s4); gap: var(--s4); }
  .field input { font-size: 34px; }
  /* the amount field on a phone: the label, the amount and its unit, then the quick amounts in one even row, then the balance
     (beside the label they wrapped into two rows on a 320 px phone) */
  .field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); } .field .fh { display: contents; }
  .field .fh label { order: 0; } .field .fr { order: 1; } .field .qk { order: 2; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; } .field .qk.hidden { display: none; } .field .ff { order: 3; }
  .field .qk button { min-height: 36px; padding: 0; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s4); }
  .prow .pp { align-self: start; } .prow .pp small { display: block; margin: 1px 0 0; }
  .pa { grid-column: 1 / -1; margin-top: 12px; } .pa .abtn { flex: 1 1 0; min-height: 44px; font-size: 14.5px; } /* a thumb's 44 px */
  .cf .cfb .abtn { flex: 1 1 0; }
  .pbox .phead { padding: var(--s4); }
  .claimbar button { flex: 1 1 100%; min-height: 44px; }
  .ticker-in { padding-left: var(--s4); gap: var(--s5); }
}
@media (max-width: 359px) { .qk { gap: 4px; } .qk button { padding: 0 6px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) {
  .pop, .ticker-in { animation: none; } .go, .wi input[type=range]::-webkit-slider-thumb { transition: none; }
}