/* Rono app — the launchpad screens. Sits on top of app.css, which owns the
   chrome, the buttons, the forms and the card art. Everything here is new
   furniture: the stepper, the tier picker, the market grid and the chart. */

/* Everything below sets display, which outranks the UA sheet's [hidden] rule.
   The app hides with el.hidden, so make that win once, here. */
[hidden]{display:none !important;}

/* ---------------------------------------------------------------- chrome */
.who .bal{display:flex; align-items:baseline; gap:8px;}
.who .bal .mono{color:var(--muted);}
.who .bal b{font-family:"Sneak",sans-serif; font-size:19px; font-weight:500; letter-spacing:-.02em;}

/* ---------------------------------------------------------------- stepper */
.steps{display:flex; flex-wrap:wrap; gap:2px; list-style:none; margin:0 0 calc(var(--cell)*2.4); padding:0;}
.steps li{display:flex; align-items:center; gap:9px; flex:1 1 200px; padding:11px 16px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:13.5px;}
.steps li .sn{font-family:var(--mono); font-size:10px; letter-spacing:.16em; opacity:.6;}
.steps li.done{color:#fff;}
.steps li.done .sn{color:var(--volt); opacity:1;}
.steps li.now{background:#fff; border-color:#fff; color:var(--ink); font-weight:500;}
.steps li.now .sn{color:var(--volt); opacity:1;}

/* ------------------------------------------------------------------ lede */
.lede{max-width:62ch; margin:0 0 calc(var(--cell)*2);}
.lede h1{font-family:"Sneak",sans-serif; font-size:clamp(30px,5vw,46px); line-height:1.02;
  letter-spacing:-.03em; font-weight:500; margin:0 0 10px;}
.lede p{margin:0; color:var(--muted); font-size:14.5px; max-width:56ch;}
.secthead{margin:calc(var(--cell)*2.4) 0 var(--cell); color:var(--muted);}

/* ------------------------------------------------------------ tier picker */
.tiers{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:760px){ .tiers{grid-template-columns:repeat(3,1fr);} }
.tier{background:var(--panel); border:1px solid var(--line); padding:var(--cell); display:flex; flex-direction:column; gap:var(--cell);
  cursor:pointer; text-align:left; font:inherit; color:inherit; transition:border-color .15s,transform .15s;}
.tier:hover{border-color:rgba(255,255,255,.4); transform:translateY(-2px);}
.tier .cardwrap{container-type:inline-size;}
.tier h3{font-family:"Sneak",sans-serif; font-size:22px; font-weight:500; letter-spacing:-.02em; margin:0;}
.tier .price{font-family:"Sneak",sans-serif; font-size:30px; font-weight:500; letter-spacing:-.03em; margin:0;}
.tier .blurb{margin:0; color:var(--muted); font-size:13.5px;}
.tier .trow{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.tier .cap{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.tier .go{margin-top:auto;}

/* -------------------------------------------------------------- your card */
.cardtop{display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px;}
@media(min-width:820px){ .cardtop{grid-template-columns:minmax(0,380px) 1fr;} }
.cardart .cardwrap{container-type:inline-size;}
.cardart .row{margin-top:12px;}

.fundform,.coinform,.tradeform{display:grid; gap:12px; align-items:end;}
@media(min-width:640px){
  .fundform{grid-template-columns:minmax(0,1fr) 160px auto;}
  .coinform{grid-template-columns:minmax(0,1fr) 140px 160px auto;}
  .tradeform{grid-template-columns:minmax(0,1fr) auto;}
}
.tradeform + .tradeform{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.sellquick{margin-top:10px;}

/* ------------------------------------------------------------------ gates */
.gate{background:var(--panel); border:1px solid var(--volt); padding:var(--cell) calc(var(--cell)*1.4);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--cell); margin-bottom:calc(var(--cell)*1.6);}
.gate.soft{border-color:var(--line);}
.gate p{margin:0; flex:1 1 240px; font-size:14px;}

/* ------------------------------------------------------------- coin tiles */
.coingrid{display:grid; grid-template-columns:1fr; gap:2px;}
@media(min-width:700px){ .coingrid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .coingrid{grid-template-columns:repeat(3,1fr);} }
.coin{background:var(--panel); border:1px solid var(--line); padding:var(--cell) calc(var(--cell)*1.2);
  display:flex; flex-direction:column; gap:9px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:border-color .15s,background .15s;}
.coin:hover{border-color:rgba(255,255,255,.42); background:#17181c;}
.coin .top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.coin .tk{font-family:"Sneak",sans-serif; font-size:21px; font-weight:500; letter-spacing:-.02em;}
.coin .nm{color:var(--muted); font-size:12.5px; margin:0;}
.coin .tcap{display:flex; align-items:baseline; gap:8px;}
.coin .tcap .cap{font-family:"Sneak",sans-serif; font-size:24px; font-weight:500; letter-spacing:-.02em;}
.coin .tcap .sub{font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);}
.coin .meta{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.coin .meta b{color:#fff; font-weight:400;}
.coin .spark{display:block; width:100%; height:38px;}
.coin .yours{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--hot); padding:3px 7px;}
.chg.up{color:#22C55E;} .chg.down{color:var(--volt);} .chg.flat{color:var(--muted);}

/* ----------------------------------------------------------- coin detail */
.backlink{font:inherit; font-size:13px; background:none; border:0; color:var(--muted); cursor:pointer;
  padding:0; margin:0 0 var(--cell);}
.backlink:hover{color:#fff;}
.coinhead{display:flex; flex-wrap:wrap; gap:var(--cell); align-items:flex-end; justify-content:space-between;
  margin-bottom:calc(var(--cell)*1.4);}
.coinhead h1{font-family:"Sneak",sans-serif; font-size:clamp(30px,5vw,44px); font-weight:500;
  letter-spacing:-.03em; margin:0; line-height:1;}
.coinhead .mono{color:var(--muted); margin:6px 0 0;}
.coinhead .quote{text-align:right;}
.coinhead .quote .big{font-size:clamp(26px,4vw,40px);}
.coinhead .cap-lab{color:var(--muted); margin:0 0 2px;}
.coinhead .chg{margin:4px 0 0;}
.coinhead .d-px{color:var(--muted); margin:3px 0 0; letter-spacing:.08em;}

/* ------------------------------------------------------------------ chart */
.chartfig{margin:0 0 14px; padding:calc(var(--cell)*1.2) calc(var(--cell)*1.2) var(--cell);}
.chartfig figcaption{display:flex; flex-wrap:wrap; gap:10px var(--cell); align-items:center;
  justify-content:space-between; margin-bottom:10px;}
.chartfig .ctitle{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.chartfig .cctl{display:flex; gap:8px 18px; flex-wrap:wrap;}
.chartfig .seg{display:inline-flex; gap:2px;}
.chartfig .seg[hidden]{display:none;}
.chartfig .seg button{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;}
.chartfig .seg button:hover{color:#fff; border-color:rgba(255,255,255,.4);}
.chartfig .seg button.on{background:#fff; border-color:#fff; color:var(--ink);}
.readout{display:flex; flex-wrap:wrap; gap:4px 18px; min-height:18px; margin:0 0 8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-variant-numeric:tabular-nums;}
.readout b{color:#fff; font-weight:500;}
.readout .sub{color:var(--muted);}
.readout .rt{color:#fff;}
.readout .rt.live{color:var(--hot);}
.readout .rt.live::before{content:""; display:inline-block; width:7px; height:7px; background:var(--hot); margin-right:8px; vertical-align:0;
  animation:ro-blink 1.4s steps(1) infinite;}
@keyframes ro-blink{50%{opacity:.15;}}
.readout .sw{display:inline-block; width:7px; height:7px; margin-right:7px; vertical-align:0;}
.readout .sw.cap{background:#fff;}
.readout .sw.res{background:#5C79F2;}
.readout .sw.buy{background:var(--ok);}
.readout .sw.sell{background:var(--volt);}
.readout .rv.buy{color:var(--ok);} .readout .rv.sell{color:var(--volt);}
.readout .rv.buy b,.readout .rv.sell b{color:inherit;}
.chartbox{position:relative; width:100%; height:320px;}
@media(min-width:900px){ .chartbox{height:380px;} }
.chartbox canvas{display:block; width:100%; height:100%; touch-action:pan-y; cursor:crosshair;}
.chartfig .note{margin-top:10px;}

/* --------------------------------------------------------------- reveal */
#reveal .big-num{letter-spacing:.16em;}

/* ------------------------------------------------------------ who / sign in */
.who .me{display:flex; align-items:center; gap:10px;}
.who .av{width:24px; height:24px; display:block; object-fit:cover; background:var(--panel);}
.signin{max-width:560px;}
.xbtn{display:inline-flex; align-items:center; gap:10px; text-decoration:none;}
.xbtn svg{width:16px; height:16px; display:block;}
.xbtn.off{opacity:.45; cursor:not-allowed;}
.devform{margin-top:calc(var(--cell)*1.4); padding-top:var(--cell); border-top:1px solid var(--line);}
@media(min-width:560px){ .devform{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;} }

/* ------------------------------------------------------------------- pay */
.paywith{display:flex; flex-wrap:wrap; gap:2px; margin:0 0 calc(var(--cell)*1.4);}
.paywith .chip{min-width:130px;}
.sendamt{display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--hot);}

/* ---------------------------------------------------------------- wallet */
.wallet .w-eth{color:var(--muted); margin:8px 0 0;}
.wallet a.btn{text-decoration:none;}
.wallet .lab{margin-top:calc(var(--cell)*1.4);}
.withdraw{margin-top:calc(var(--cell)*1.4); border-top:1px solid var(--line); padding-top:var(--cell);}
.withdraw summary{cursor:pointer; color:var(--muted); list-style:none;}
.withdraw summary::-webkit-details-marker{display:none;}
.withdraw summary::before{content:"+ ";} .withdraw[open] summary::before{content:"– ";}
.withdraw summary:hover{color:#fff;}
.wdform{margin-top:var(--cell); display:grid; gap:12px; align-items:end;}
@media(min-width:640px){ .wdform{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;} }
.cardart .specs{margin-top:calc(var(--cell)*1.4);}

/* ---------------------------------------------------------------- launch */
.launchform{display:grid; gap:12px; align-items:end;}
@media(min-width:720px){
  .launchform{grid-template-columns:minmax(0,1fr) 150px;}
  .launchform .wide{grid-column:1 / -1;}
}
.form textarea{font:inherit; font-size:15px; color:#fff; background:#0B0C0E; border:1px solid var(--line); padding:11px 12px;
  letter-spacing:normal; text-transform:none; resize:vertical; width:100%; min-width:0;}
.form textarea:focus{outline:0; border-color:var(--volt);}
.form input[type="file"]{padding:8px 10px; font-size:13px; color:var(--muted);}
.note.live{color:var(--hot);}
.note.live::before{content:""; display:inline-block; width:7px; height:7px; background:var(--hot); margin-right:9px; vertical-align:1px;
  animation:blink 1s steps(2,start) infinite;}
@keyframes blink{to{visibility:hidden;}}

/* ------------------------------------------------------------ coin extras */
.coinid{display:flex; align-items:center; gap:var(--cell);}
.clogo{width:clamp(44px,7vw,64px); height:clamp(44px,7vw,64px); object-fit:cover; display:block; background:var(--panel); border:1px solid var(--line);}
.coin .tk{display:flex; align-items:center; gap:8px;}
.coin .tlogo{width:22px; height:22px; object-fit:cover; display:block;}
.d-desc{margin:calc(var(--cell)*-0.6) 0 calc(var(--cell)*1.4); max-width:70ch;}
@media(min-width:820px){ .grid2{grid-template-columns:1fr 1fr;} }

/* ---------------------------------------------------------------- tables */
.postable{padding:var(--cell) calc(var(--cell)*1.4); overflow-x:auto;}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
.tbl th{font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:0 12px 8px 0;}
.tbl td{padding:9px 12px 9px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap;}
.tbl .soft{color:var(--muted);}
.tbl tr[data-coin]{cursor:pointer;} .tbl tr[data-coin]:hover td{color:var(--hot);}
.tbl .side{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.tbl .side.buy{color:var(--ok);} .tbl .side.sell{color:var(--volt);}
.tblwrap{overflow-x:auto;}