/* The real-trading page (real.html), on top of the game's styles.css (the .money block, .tabs, .seg, .chart, .pos cards
   and .tbl tables are the paper desk's own rules). Its CSP takes no inline style: every rule goes here. */

/* the band, always on top: real money in the loss colour, testnet in the game's calm blue */
.real-band { position: sticky; top: 0; z-index: 5; margin: 0; padding: 8px 16px; text-align: center; font: 400 13px var(--f-display); letter-spacing: .04em; background: var(--down); color: #2a0806; }
.real-band.test { background: var(--even); color: #04121c; }

.real-main { max-width: 520px; margin: 0 auto; padding: 10vh 16px 32px; display: flex; flex-direction: column; gap: 18px; }
.real-main.wide { max-width: 1100px; padding-top: 24px; } /* the desk is open: room for the chart */
.real-logo { font: 400 clamp(20px, 2.6vw, 23px)/1 var(--f-display); letter-spacing: .02em; }
.real-logo span { color: var(--accent); }
.real-lead { font-size: 18px; color: var(--soft); }
.real-main a { color: var(--accent); }

.real-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.real-card h1 { font-size: clamp(18px, 2.4vw, 21px); line-height: 1.25; }
.real-card h2 { font-size: 17px; line-height: 1.3; }
.real-pass { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: stretch; }
.real-pass label { grid-column: 1 / -1; font-size: 13px; color: var(--soft); }
.real-pass input { min-width: 0; background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font: 16px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.real-pass input:focus { border-color: var(--accent); outline: none; }
.real-note { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--fg); overflow-wrap: anywhere; }
.real-back { font-size: 14px; }
.real-dim { color: var(--muted); font-size: 13px; }
.real-ok { color: var(--up); font-size: 14px; }

/* the setup: one card per step, numbered by CSS (a step done elsewhere shows as done once Hyperliquid says so) */
#desk { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.real-setup { display: grid; gap: 14px; counter-reset: step; }
.real-card.step h2 { display: flex; gap: 10px; align-items: center; }
.real-card.step h2::before { counter-increment: step; content: counter(step); flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); font: 600 12px var(--f-mono); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.real-card.done h2::before { content: "\2713"; color: var(--up); border-color: var(--up); }
.real-card.done #moneyHow { color: var(--muted); font-size: 13px; }
.real-card.soon { opacity: .55; }
.real-wallets { display: flex; flex-wrap: wrap; gap: 8px; }
.real-wallet { display: inline-flex; align-items: center; gap: 8px; background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--fg); font-size: 14px; }
.real-wallet:hover { border-color: var(--accent); }
.real-wallet:disabled { opacity: .6; cursor: default; }
.real-wallet img { width: 24px; height: 24px; border-radius: 6px; }
.real-email { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.real-email .ghost:disabled { opacity: .5; cursor: default; }
.real-lines { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--soft); font-size: 14px; }
.real-tick { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.real-tick input { margin: 4px 0 0; flex: none; accent-color: var(--accent); }
.real-addr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; min-width: 0; }
.real-addr code { font: 13px var(--f-mono); background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; min-width: 0; }
.real-addr.short code { background: none; border: 0; padding: 0; color: var(--soft); }
.ghost.small { padding: 6px 10px; font-size: 12px; }

/* the board: the money block, the address and the menu in a row, then the markets, the chart, the positions, the fills */
.real-board { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.real-board h2 { font-size: 15px; margin-top: 6px; }
.real-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.real-head .money { margin-left: 0; order: 0; } /* first in the row at every width (styles.css sends the game's .money last on a wide screen) */
.real-head .money > div { flex-wrap: wrap; }
.real-head #fees { font-size: 13px; }
.real-menu { position: relative; margin-left: auto; }
.real-menu summary { cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--soft); }
.real-menu summary::-webkit-details-marker { display: none; }
.real-menu[open] summary { border-color: var(--accent); color: var(--fg); }
.real-menu .ghost { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 4; background: var(--panel); white-space: nowrap; }
.real-board .seg { flex-wrap: wrap; }
.real-board .chart { height: 380px; }
.real-nostop { color: var(--down); font-size: 13px; }
.real-outside { color: var(--muted); font-size: 13px; }
.pos-orders button:disabled { opacity: .5; cursor: default; }
.real-board .tbl .empty { color: var(--muted); padding: 12px; }

.real-foot { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.real-foot p { margin: 0; }

@media (max-width: 520px) {
  .real-card { padding: 16px; }
  .real-board .chart { height: 300px; }
  .real-head .money { width: 100%; }
}