/* Rono app — the dark half of the split, same pixel language as the site. */

@font-face{font-family:"Geist";src:url("fonts/GeistSans.woff2") format("woff2");font-weight:100 900;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono.woff2") format("woff2");font-weight:100 900;font-display:swap;}
@font-face{font-family:"Sneak";src:url("fonts/Sneak-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Sneak";src:url("fonts/Sneak-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}

:root{
  --ink:#0B0C0E; --paper:#FFFFFF; --volt:#FF4D19; --amber:#FF9B2F; --blue:#1B3BF0;
  --navy:#101A4D; --hot:#FFE24A; --ok:#22C55E; --muted:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.14); --panel:#131417; --cell:14px;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--ink); color:#fff; font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; letter-spacing:-.005em; -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 14px);}
a{color:inherit;}
.mono{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;}

/* ---------------------------------------------------------------- chrome */
.bar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:12px 24px; background:rgba(11,12,14,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; letter-spacing:-.01em;}
.brand svg{width:22px; height:22px; color:#fff;}
.tabs{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap;}
.tabs button{font:inherit; font-size:13px; padding:8px 15px; border:0; background:transparent; color:var(--muted); cursor:pointer;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);}
.tabs button:hover{color:#fff;}
.tabs button.on{background:#fff; color:var(--ink); font-weight:500;}
.who{display:flex; align-items:center; gap:10px;}
.who .mono{color:var(--muted);}
.pill{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; border:1px solid var(--line); color:var(--muted);}
.pill.live{color:var(--ok); border-color:rgba(34,197,94,.5);}
.pill.sandbox{color:var(--hot); border-color:rgba(255,226,74,.45);}
.pill.down{color:var(--volt); border-color:rgba(255,77,25,.5);}

.shell{max-width:1120px; margin:0 auto; padding:26px 24px 80px;}
.panel{display:none;} .panel.on{display:block;}
.grid2{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:820px){ .grid2{grid-template-columns:1fr 1fr;} }

/* ----------------------------------------------------------------- cards */
.card{background:var(--panel); border:1px solid var(--line); padding:calc(var(--cell)*1.7); margin-bottom:14px;}
.card .k{margin:0 0 var(--cell); color:var(--muted);}
.big{font-family:"Sneak",sans-serif; font-size:clamp(34px,6vw,58px); line-height:1; letter-spacing:-.03em; margin:0;}
.note{color:var(--muted); font-size:13.5px; margin:12px 0 0;}
.hint{color:var(--muted); font-size:12px; align-self:center;}
.err{color:var(--volt); font-size:13.5px; margin:12px 0 0;}
.empty{color:var(--muted); font-size:13.5px; margin:0;}
.row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}

.btn{font:inherit; font-size:14px; font-weight:500; padding:11px 20px; border:0; cursor:pointer; background:#fff; color:var(--ink);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px,8px 0);
  transition:background .15s,color .15s;}
.btn:hover{background:var(--volt); color:#fff;}
.btn.volt{background:var(--volt); color:#fff;} .btn.volt:hover{background:#fff; color:var(--ink);}
/* an inset box-shadow gets sliced by the pixel clip-path, so outline buttons are a solid wash */
.btn.ghost{background:rgba(255,255,255,.11); color:#fff; box-shadow:none;}
.btn.ghost:hover{background:#fff; color:var(--ink);}
.btn.sm{font-size:12.5px; padding:8px 14px;}
.btn.danger:hover{background:var(--volt); color:#fff;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}

/* ----------------------------------------------------------------- forms */
.form{display:flex; flex-direction:column; gap:12px;}
.form select, .form input{width:100%; min-width:0;}
.form label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.form input, .form select{font:inherit; font-size:15px; color:#fff; background:#0B0C0E; border:1px solid var(--line); padding:11px 12px; letter-spacing:normal; text-transform:none;}
.form input:focus, .form select:focus{outline:0; border-color:var(--volt);}
.form select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px;}
.form .btn{align-self:start;}

/* ------------------------------------------------------------ issue form */
/* No BIN dropdown. A person picks a limit, a network and where they will use it;
   the matching BIN is resolved from GET /bins behind the scenes. */
.issue{display:grid; grid-template-columns:1fr; gap:calc(var(--cell)*2);}
@media(min-width:860px){ .issue{grid-template-columns:1.35fr 1fr; gap:calc(var(--cell)*3);} }

.pick{border:0; margin:0; padding:0; min-width:0;}
.pick legend{padding:0 0 9px; color:var(--muted);}
.pick .chips{display:flex; flex-wrap:wrap; gap:8px;}
.pick[hidden]{display:none;}

.chip{font:inherit; font-size:13.5px; text-align:left; cursor:pointer; border:0; padding:10px 15px;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.72); transition:background .15s, color .15s;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px,8px 0);}
.chip:hover{background:rgba(255,255,255,.16); color:#fff;}
.chip b{display:block; font-weight:500; font-size:14.5px; color:inherit;}
.chip span{display:block; margin-top:3px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; opacity:.72;}
.chip[disabled]{opacity:.32; cursor:not-allowed; background:rgba(255,255,255,.04);}
.chip[disabled]:hover{background:rgba(255,255,255,.04); color:rgba(255,255,255,.72);}
.chip[aria-checked="true"]{background:#fff; color:var(--ink);}
.chip[aria-checked="true"] span{opacity:.6;}

.preview .cardwrap{container-type:inline-size; max-width:330px;}
.specs{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:var(--cell) 0 0; font-size:13.5px; max-width:330px;}
.specs dt{color:var(--muted); font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; align-self:center;}
.specs dd{margin:0; font-weight:500;}
.specs dd.soft{color:var(--muted); font-weight:400;}

/* -------------------------------------------------------------- pay box */
.paybox{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:700px){ .paybox{grid-template-columns:1fr 1.4fr;} }
.lab{margin:14px 0 3px; color:var(--muted);} .lab:first-child{margin-top:0;}
.val{margin:0; font-size:17px; font-weight:500; font-family:var(--mono); letter-spacing:.02em; word-break:break-all;}
.val.addr{font-size:14px; line-height:1.55; color:var(--hot);}
.dot{display:inline-block; width:7px; height:7px; background:var(--muted); margin-right:8px; vertical-align:1px;}
.dot.paid{background:var(--ok);} .dot.pending{background:var(--hot);} .dot.bad{background:var(--volt);}

/* ---------------------------------------------------------------- lists */
.list{display:flex; flex-direction:column;}
.item{display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:12px 0; border-top:1px solid var(--line); align-items:baseline;}
.item:first-child{border-top:0;}
.item .t{font-weight:500;}
.item .s{grid-column:1/-1; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;}
.item .a{font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.item .a.up{color:var(--ok);} .item .a.down{color:#fff;} .item .a.dead{color:var(--muted); text-decoration:line-through;}

/* ------------------------------------------------------------ card tiles */
.cards{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:900px){ .cards{grid-template-columns:1fr 1fr;} }
.ctile{background:var(--panel); border:1px solid var(--line); padding:calc(var(--cell)*1.7);}
.ctile .cardwrap{container-type:inline-size; max-width:330px;}
.ctile h3{margin:16px 0 2px; font-size:19px; font-weight:500; letter-spacing:-.01em;}
.ctile .meta{margin:0; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.ctile .bal{margin:14px 0 0; font-family:"Sneak",sans-serif; font-size:34px; line-height:1; letter-spacing:-.02em;}
.ctile .st{display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.ctile .st i{width:6px; height:6px; background:var(--ok);}
.ctile[data-status="closed"] .st i{background:var(--volt);}
.ctile[data-status="frozen"] .st i, .ctile[data-status="processing"] .st i{background:var(--hot);}
.ctile .acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.ctile .mini{display:flex; gap:8px; margin-top:12px;}
.ctile .mini input{font:inherit; font-size:14px; width:110px; color:#fff; background:#0B0C0E; border:1px solid var(--line); padding:8px 10px;}

/* --------------------------------------------------- the card object ---- */
.rcard{position:relative; aspect-ratio:1.586/1; width:100%; color:#fff; overflow:hidden; background:var(--navy); font-family:var(--mono); user-select:none;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,calc(100% - 14px) 7px,calc(100% - 7px) 7px,calc(100% - 7px) 14px,100% 14px,100% calc(100% - 14px),calc(100% - 7px) calc(100% - 14px),calc(100% - 7px) calc(100% - 7px),calc(100% - 14px) calc(100% - 7px),calc(100% - 14px) 100%,14px 100%,14px calc(100% - 7px),7px calc(100% - 7px),7px calc(100% - 14px),0 calc(100% - 14px),0 14px,7px 14px,7px 7px,14px 7px,14px 0);}
.rcard::before{content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px);}
.rcard::after{content:""; position:absolute; inset:0; background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 38%);}
.rcard > *{position:relative; z-index:2;}
.rcard .rc-mark{position:absolute; top:7.5%; left:6%; width:12.5%; color:#fff;}
.rcard .rc-mark svg{width:100%; height:auto; display:block;}
.rcard .rc-word{position:absolute; top:9.5%; left:21%; font-size:clamp(9px,2.2cqw,13px); letter-spacing:.26em; font-weight:600;}
.rcard .rc-chip{position:absolute; top:30%; left:6%; width:15%; aspect-ratio:4/3; background:linear-gradient(150deg,#F6D177,#B98A25 55%,#F6D177); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr);}
.rcard .rc-chip i{border:.5px solid rgba(0,0,0,.34);}
.rcard .rc-wave{position:absolute; top:30%; right:6%; width:9%; aspect-ratio:1/1; opacity:.85;}
.rcard .rc-pan{position:absolute; left:6%; right:6%; top:57%; font-size:clamp(11px,4.4cqw,26px); letter-spacing:.08em; font-weight:500; white-space:nowrap;}
.rcard .rc-foot{position:absolute; left:6%; bottom:8%; display:flex; gap:clamp(14px,5cqw,38px); font-size:clamp(7px,1.9cqw,11px);}
.rcard .rc-foot span{display:block; opacity:.55; letter-spacing:.14em; margin-bottom:3px;}
.rcard .rc-foot b{font-weight:500; letter-spacing:.06em; font-size:clamp(9px,2.4cqw,14px);}
.rcard .rc-net{position:absolute; right:6%; bottom:8%; font-family:"Sneak",sans-serif; font-size:clamp(12px,3.6cqw,22px); font-weight:500; font-style:italic; letter-spacing:-.02em;}
.rcard[data-tier="standard"]{background:linear-gradient(146deg,#101A4D 0%,#1B3BF0 100%);}
.rcard[data-tier="high"]{background:linear-gradient(146deg,#0B0C0E 0%,#3A1206 62%,#FF4D19 100%);}
.rcard[data-tier="max"]{background:linear-gradient(146deg,#0B0C0E 0%,#1A1C22 55%,#3B3F4A 100%);}
.rcard[data-tier="max"] .rc-net{color:var(--hot);}
.rcard.dead{filter:grayscale(1); opacity:.45;}
.rcard .rc-px{position:absolute; inset:0; z-index:3; width:100%; height:100%; display:block; pointer-events:none;}
.rcard .rc-pan{text-align:center;}
.rcard .rc-word, .rcard .rc-foot{text-align:left;}

/* ---------------------------------------------------------------- misc */
.pre{margin:0; font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--muted); white-space:pre-wrap; word-break:break-word;}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90; background:#fff; color:var(--ink);
  font-size:14px; font-weight:500; padding:12px 20px; max-width:min(560px,90vw);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);}
.toast.bad{background:var(--volt); color:#fff;}

dialog{background:var(--panel); color:#fff; border:1px solid var(--line); padding:calc(var(--cell)*2); max-width:min(460px,92vw); font-family:"Geist",sans-serif;}
dialog::backdrop{background:rgba(11,12,14,.82);}
dialog .x{position:absolute; top:10px; right:10px; background:transparent; border:0; color:var(--muted); font-size:15px; cursor:pointer;}
dialog .x:hover{color:#fff;}
.reveal-body{margin-top:6px;}
.big-num{font-size:24px; letter-spacing:.12em;}
.rvrow{display:flex; gap:36px;}

/* ---- stock rail ------------------------------------------------------- */
/* The quote panel leads with the SOL figure, because that is the number that
   actually lands. Everything under it is the arithmetic that got there. */
.card.quote .big{color:var(--hot); word-break:break-word; display:flex; align-items:center; gap:14px;}
/* the settlement asset's own mark, so the figure is never just an abbreviation */
.card.quote .big .aico{width:clamp(30px,5vw,46px); height:auto; flex:0 0 auto;}
.card.quote .specs{max-width:none; margin-top:var(--cell);}
.card.quote .specs dd{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums;}

.ticks{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:2px;
       background:var(--line); border:1px solid var(--line);}
.tik{background:var(--panel); padding:12px 13px; display:flex; flex-direction:column; gap:2px;}
.tik b{font-size:14px; font-weight:500; letter-spacing:.02em;}
.tik span{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tik i{font-style:normal; font-family:var(--mono); font-size:13px; margin-top:4px; font-variant-numeric:tabular-nums;}
.tik em{font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}

/* a deposit that landed after its quote lapsed is marked, never silently adjusted */
.item .rp{font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
          padding:2px 6px; margin-left:8px; background:var(--hot); color:var(--ink); vertical-align:2px;}

/* ---- what's working right now --------------------------------------- */
/* Three rows a person can act on, not a dump of which server answered. */
.status{display:flex; flex-direction:column;}
.strow{display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:13px 0; border-top:1px solid var(--line); align-items:baseline;}
.strow:first-child{border-top:0;}
.strow .sk{font-weight:500;}
.strow .sv{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--line); color:var(--muted); white-space:nowrap;}
.strow .sv.on{color:var(--ok); border-color:rgba(34,197,94,.5);}
.strow .sv.demo{color:var(--hot); border-color:rgba(255,226,74,.45);}
.strow .sv.off{color:var(--volt); border-color:rgba(255,77,25,.5);}
.strow .sd{grid-column:1/-1; color:var(--muted); font-size:13px;}