/* On-chain layer for the Kest site. Reuses the tokens and components of
   style.css (blue, paper, rules, mono labels) and only adds what the trading
   section, the wallet dialog and the on-chain writer need. */

/* ------------------------------------------------------------ page edges */
/* The browser paints the area around the page (elastic overscroll on macOS
   trackpads, zoom, window edges) with the root background. It used to fall
   back to the paper colour, which showed as white bands beside the blue
   header. Make it blue, and stop the sideways bounce altogether. */
html{background:var(--blue);overscroll-behavior-x:none}
body{overscroll-behavior-x:none}

/* ------------------------------------------------------------ paused banner */
.paused-banner{background:var(--amber);color:var(--ink);font:12px/1.5 var(--mono)}
.paused-banner .wrap{padding:10px 0;display:flex;gap:12px;flex-wrap:wrap}
.paused-banner b{text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* ------------------------------------------------------------ proofs */
.fee-rates{margin-top:22px;font:11px/1.6 var(--mono);color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}
.fee-rates b{color:var(--blue);font-weight:500}
#control-book .muted-code{font:11px/1.5 var(--mono);color:var(--muted)}

/* ------------------------------------------------------------ header */
.wallet-button{margin-left:auto;font-variant-numeric:tabular-nums}
.header-row nav+.wallet-button{margin-left:0}
.wallet-button.connected{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.wallet-button.connected:hover{background:white}

/* ------------------------------------------------------------ buttons */
.btn.ghost{border:1px solid var(--blue);color:var(--blue);background:transparent}
.btn.ghost:hover{background:#e8ecff}
.btn.light-blue{background:#e8edff;color:var(--blue)}
.btn.light-blue:hover{background:#dfe5ff}
.btn:disabled,.row-action:disabled,.draft-button:disabled{opacity:.45;transform:none;cursor:not-allowed}
.dialog-actions{display:flex;align-items:center;gap:10px}

/* ------------------------------------------------------------ trade section */
.trade .market-tools{flex-wrap:wrap}
.trade .tabs button span{margin-left:2px}
.trade-status{margin:16px 0 0;padding:11px 14px;font:12px/1.5 var(--mono);border-left:3px solid var(--blue);background:#eef0fc;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.trade-status>button{margin-left:auto}
.trade-status a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.trade-status.error{border-color:#c24b12;background:#fff1e6;color:#7a2d06}
.trade-status.pending{border-color:var(--amber)}
.trade-status button{font:inherit;text-decoration:underline;text-underline-offset:3px;color:inherit}
.trade td .row-action+.row-action,.trade td .draft-button+.draft-button{margin-left:6px}
.trade .coin-symbol.devnet{background:#e8edff;color:var(--blue)}
.trade .coin-symbol.kest{background:var(--blue);color:var(--paper)}
.trade .empty-row td{color:var(--muted);text-align:left;padding:28px 0;font-size:14px}
.trade .empty-row td button{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.badge{display:inline-block;font:10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border:1px solid #c4c7d5;border-radius:3px;color:var(--muted)}
.badge.sold{border-color:var(--blue);color:var(--blue);background:#e8edff}
.badge.ended{border-color:var(--amber);color:#7a4a00;background:#fff4dc}
.pos-block+.pos-block{margin-top:40px}
.pos-block h3{font-size:clamp(18px,2vw,26px);letter-spacing:-.045em;font-weight:520;margin:28px 0 4px}
.transfer-row td{background:#eef0fc;padding:12px!important}
.input-row{display:flex;gap:8px;align-items:stretch}
.input-row input{flex:1;min-width:0}
.transfer-row .input-row input{padding:8px 9px;border:1px solid #bcc0cc;border-radius:3px;background:#fff;font-size:14px}

/* ------------------------------------------------------------ staking */
.stake-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:28px 0 0}
.stake-stats>div{border-top:1px solid var(--rule);padding:12px 12px 16px 0;min-width:0}
.stake-stats dt{font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.stake-stats dd{margin:8px 0 0;font-size:clamp(22px,2.4vw,36px);letter-spacing:-.06em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stake-stats dd small{font:11px var(--mono);letter-spacing:0;color:var(--muted);margin-left:4px}
.stake-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.stake-card{background:#eef0fc;padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}
.stake-card .btn{justify-content:center}
.claim-amount{display:block;font-size:30px;font-weight:450;letter-spacing:-.06em;color:var(--blue);font-variant-numeric:tabular-nums;margin:2px 0}

/* ------------------------------------------------------------ dialogs */
#chain-writer .payoff-panel{gap:8px;justify-content:flex-start}
#chain-writer .term{margin-top:0;padding:6px 0;border-bottom:1px solid #cdd5f7}
#chain-writer .result{margin-top:4px}
#cw-problem:empty{display:none}
#cw-problem{color:#a2410c;font-size:11px}
.wallet-body{padding:18px 26px 26px}
.wallet-body h2{font-size:43px;line-height:1.05;font-weight:430;letter-spacing:-.075em;margin-bottom:16px}
.wallet-body h2 em{font-size:1.09em}
.wallet-body p{font-size:14px;color:var(--muted);margin:0 0 12px}
.wallet-body p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.wallet-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.wallet-option{display:flex;align-items:center;gap:14px;width:100%;padding:14px 4px;border-bottom:1px solid var(--rule);font-size:15px;text-align:left}
.wallet-option:hover{background:#eef0fc}
.wallet-option img{width:28px;height:28px;border-radius:6px}
.wallet-option small{margin-left:auto;font:10px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.wallet-account{font:13px/1.6 var(--mono);word-break:break-all;background:#eef0fc;padding:12px 14px;margin:0 0 14px}
.wallet-account b{display:block;font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.wallet-actions{display:flex;gap:10px;flex-wrap:wrap}
#wallet-dialog{width:min(520px,calc(100% - 30px))}

/* ------------------------------------------------------------ small screens */
@media(max-width:850px){.stake-grid{grid-template-columns:1fr 1fr}.stake-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  .header-row .desk-button{display:none}
  .wallet-button{font-size:12px;padding:8px 11px}
  .trade .market-tools{padding-bottom:10px;gap:10px}
  .stake-grid{grid-template-columns:1fr}
  .dialog-actions{gap:6px}
  .dialog-actions .btn{padding:11px 12px;gap:10px}
  .wallet-body{padding:12px 15px 20px}
  .wallet-body h2{font-size:34px}
  /* Rows with actions become stacked cards, so the buttons stay visible. */
  .trade table.stack thead{display:none}
  .trade table.stack tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px 0;border-top:1px solid var(--rule)}
  .trade table.stack td{border:0;padding:0;text-align:left;white-space:normal}
  .trade table.stack td[data-label]:before{content:attr(data-label);display:block;font:9px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .trade table.stack td.actions{grid-column:1/-1;display:flex;gap:8px}
  .trade table.stack td.actions>*{flex:1;text-align:center;padding:10px}
  .trade table.stack tr.empty-row,.trade table.stack tr.transfer-row{display:block}
  .trade table.stack tbody tr:last-child td{border-bottom:0}
}