/* Spotless live site: additions on top of style.css (the styles forked from the preview). */

/* connection status in the top bar */
.net{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1.2 var(--f-mono);color:var(--muted);white-space:nowrap}
.net::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.net.ok::before{background:var(--clean)}
.net.warn{color:var(--watch)} .net.warn::before{background:var(--watch)}
.net.bad{color:var(--flag)} .net.bad::before{background:var(--flag)}
@media (max-width:960px){.nav{order:3}.net{margin-left:auto}}

/* coin pictures: a lettered tile sits underneath and shows when a coin has no picture or it fails to load */
.art .emo.ltr{font:850 30px/1 var(--f-display);font-size:48cqi;font-stretch:112%;color:#fff;text-transform:uppercase;filter:drop-shadow(0 2px 3px #00000040)}
.art img{position:absolute;inset:0}
.ti .e{position:relative;border-radius:4px;overflow:hidden;font:700 10px/1 var(--f-display);color:#fff;text-transform:uppercase}
.ti .e img{position:absolute;inset:0}
.ti .ago{font:500 11px var(--f-mono);color:var(--muted)}

/* hero bench: latest launch */
.bench-foot .when{font-size:12.5px;color:var(--muted)}

/* coin page */
.ids a{font-weight:600;color:var(--ink)}
.linkrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.linkrow a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 11px;font:600 12px var(--f-body);text-decoration:none}
.linkrow a:hover{border-color:var(--ink)}
.tradebox{display:grid;gap:10px}
.tradebox p{margin:0;font-size:13.5px;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.facts li{font:500 11.5px/1.3 var(--f-mono);padding:6px 10px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.facts li b{color:var(--ink);font-weight:600}
.facts li.warn b{color:var(--watch)}
.srcnote{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.stamp.none{--c:var(--muted)}
.a-chart .feednote{margin:8px 0 0}
.bench .quiet{padding:4px 0 12px;text-align:left;font-size:13px}
/* the hidden screen-reader labels inside a wide table are absolutely placed: keep them inside the table's own scroll box,
   or the one in the last column pushes the whole page wider than a phone screen */
.tbl{position:relative}
table.t a{color:inherit;text-decoration:none}
table.t a:hover{text-decoration:underline}
table.t .who a{color:var(--muted)}
.feednote{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.quiet{padding:26px 16px;text-align:center;color:var(--muted);font-size:14px}

/* how it works */
.how .panel>ul{margin:10px 0 0;padding-left:20px;color:var(--muted);max-width:68ch}
.how .panel>ul li{margin-top:6px}
.how .panel>ul b{color:var(--ink)}
.how .panel a{color:var(--ink);font-weight:600}

/* top bar with a wallet button: on a phone the brand and the wallet share the first row, status and menu follow */
.top-in .wallet-btn{flex:none}
@media (max-width:960px){.net{order:2;margin-left:0;width:100%}.nav{order:3}}
.demo-strip[hidden]{display:none}
.demo-strip .wrap{line-height:1.5}

/* trade ticket */
.ticket{display:grid;gap:0}
.ticket .seg.wide{margin-bottom:2px}
.ticket .slip .seg button{padding:5px 9px;font-size:12px}
.ticket .btn.block{margin-top:4px}
.quote:empty{display:none}
.quote div dt{min-width:0}
.quote .lf dt{font-size:13px}
.tstat{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.tstat:empty{display:none}
.tstat.bad{color:var(--flag)} .tstat.ok{color:var(--clean)}
.tstat a{color:inherit;font-weight:600}
.linkish{display:inline-flex;align-items:center;border:1px dashed var(--line);background:transparent;border-radius:999px;padding:5px 11px;font:600 12px var(--f-body);color:var(--muted);cursor:pointer}
.linkish:hover{border-color:var(--ink);color:var(--ink)}

/* launch */
.create .field .amt{height:46px}
.create .field .amt input{font-size:16px}
.create .drop .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.create-side .coin{grid-template-columns:86px minmax(0,1fr)}
.steps li{overflow-wrap:anywhere}
.steps li span span{display:inline;font-size:inherit;color:inherit}
.fine a{color:var(--ink);font-weight:600}
dialog.dlg .wl a.btn{height:50px;justify-content:space-between;border-radius:14px}
dialog.dlg textarea.input{margin-top:2px}
dialog.dlg #lsMsg{margin:0 0 16px;color:var(--ink);font-size:14px;overflow-wrap:anywhere}
dialog.dlg #lsMsg:empty{display:none}
dialog.dlg a{color:var(--ink);font-weight:600}
dialog.dlg a.btn.primary{color:var(--accent-ink)}

/* account pages */
.sumbar .tstat{margin:0}
.hold .act{justify-self:end}
@media (max-width:760px){.hold .act{justify-self:stretch}}
.acct .sums:empty{display:none}

.facts li{max-width:100%;overflow-wrap:anywhere}

/* footer */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--muted);font-weight:600;text-decoration:none}
.foot-links a:hover{color:var(--ink);text-decoration:underline}
#footLinks{display:contents}