/* Blackpad app — the working half of the split, same black-and-pixel language as the site.
   Words that head a screen are Jersey 10, figures that count are Doto, everything else Geist.
   One colour does work here besides the greys: red, and only for an error. */

@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:"Jersey 10";src:url("fonts/Jersey10.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Doto";src:url("fonts/Doto.woff2") format("woff2");font-weight:100 900;font-display:swap;}

:root{
  --ink:#000000; --paper:#F2F2EE; --volt:#F2F2EE; --amber:#8E8E8A; --blue:#8E8E8A;
  --navy:#2A2A28; --hot:#FFFFFF; --ok:#F2F2EE; --err:#FF5A4F; --muted:rgba(242,242,238,.5); --soft:rgba(242,242,238,.72);
  --line:rgba(242,242,238,.15); --panel:#0B0B0A; --cell:14px;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --px:"Jersey 10","Geist Mono",ui-monospace,monospace;
  --dot:"Doto","Geist Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
/* the body's ground propagates to the whole canvas only while html has none of its own */
body{margin:0; min-height:100vh; background:#000; color:var(--paper); 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(242,242,238,.03) 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(90deg,rgba(242,242,238,.03) 0 1px,transparent 1px 14px);}
::selection{background:var(--paper); color:#000;}
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:10px 24px; background:rgba(0,0,0,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand svg{width:22px; height:22px; color:var(--paper);}
.brand b{font-family:var(--px); font-weight:400; font-synthesis:none; font-size:28px; line-height:.8; letter-spacing:.03em; text-transform:uppercase;}
.tabs{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap;}
.tabs button{font-family:var(--px); font-weight:400; font-synthesis:none; font-size:22px; line-height:1; letter-spacing:.03em; text-transform:uppercase;
  padding:8px 16px 6px; 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:var(--paper);}
.tabs button.on{background:var(--paper); color:#000;}
.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);
  display:inline-flex; align-items:center; gap:7px;}
.pill::before{content:""; width:6px; height:6px; background:currentColor;}
.pill.live{color:var(--paper); border-color:rgba(242,242,238,.45);}
.pill.live::before{animation:pillBlink 1.3s steps(1) infinite;}
@keyframes pillBlink{50%{opacity:.2;}}
.pill.sandbox{color:var(--amber); border-color:rgba(142,142,138,.5);}
.pill.down{color:var(--err); border-color:rgba(255,90,79,.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:var(--dot); font-weight:900; font-synthesis:none; 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(--err); 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-family:var(--px); font-weight:400; font-synthesis:none; font-size:21px; line-height:1; letter-spacing:.03em; text-transform:uppercase;
  padding:11px 20px 9px; border:0; cursor:pointer; background:var(--paper); color:#000;
  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:#3A3A38; color:var(--paper);}
.btn.volt{background:var(--paper); color:#000;} .btn.volt:hover{background:#3A3A38; color:var(--paper);}
/* an inset box-shadow gets sliced by the pixel clip-path, so outline buttons are a solid wash */
.btn.ghost{background:rgba(242,242,238,.1); color:var(--paper); box-shadow:none;}
.btn.ghost:hover{background:var(--paper); color:#000;}
.btn.sm{font-size:17px; padding:8px 14px 6px;}
.btn.danger:hover{background:var(--err); color:#000;}
.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-family:"Geist",sans-serif; font-size:15px; color:var(--paper); background:#000; 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(--paper);}
.form select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,rgba(242,242,238,.5) 50%),linear-gradient(135deg,rgba(242,242,238,.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(242,242,238,.07); color:var(--soft); 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(242,242,238,.16); color:var(--paper);}
.chip b{display:block; font-family:var(--px); font-weight:400; font-synthesis:none; font-size:22px; line-height:1; letter-spacing:.02em; 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(242,242,238,.04);}
.chip[disabled]:hover{background:rgba(242,242,238,.04); color:var(--soft);}
.chip[aria-checked="true"]{background:var(--paper); color:#000;}
.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(--paper);} .dot.pending{background:var(--paper); animation:pillBlink 1s steps(1) infinite;} .dot.bad{background:var(--err);}

/* ---------------------------------------------------------------- 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(--paper);} .item .a.down{color:var(--muted);} .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-family:var(--px); font-size:28px; font-weight:400; line-height:1; 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:var(--dot); font-weight:900; 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(--paper);}
.ctile[data-status="closed"] .st i{background:var(--err);}
.ctile[data-status="frozen"] .st i, .ctile[data-status="processing"] .st i{background:var(--amber);}
.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:var(--paper); background:#000; border:1px solid var(--line); padding:8px 10px;}

/* --------------------------------------------------- the card object ---- */
.rcard{position:relative; aspect-ratio:1.586/1; width:100%; color:var(--paper); overflow:hidden; background:#101010; 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:radial-gradient(rgba(242,242,238,.12) .8px, transparent 1.1px); background-size:9px 9px;}
.rcard > *{position:relative; z-index:2;}
.rcard .rc-mark{position:absolute; top:7.5%; left:6%; width:11%; color:currentColor;}
.rcard .rc-mark svg{width:100%; height:auto; display:block;}
.rcard .rc-word{position:absolute; top:8.2%; left:20%; font-family:var(--px); font-weight:400; font-size:clamp(13px,4.6cqw,26px); letter-spacing:.06em; line-height:1;}
.rcard .rc-chip{position:absolute; top:31%; left:6%; width:14%; aspect-ratio:4/3; background:#8E8E8A; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr);
  clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px);}
.rcard .rc-chip i{border:.5px solid rgba(0,0,0,.45);}
.rcard .rc-wave{position:absolute; top:31%; right:6%; width:9%; aspect-ratio:1/1; opacity:.8;}
.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; text-align:center;}
.rcard .rc-foot{position:absolute; left:6%; bottom:8%; display:flex; gap:clamp(14px,5cqw,38px); font-size:clamp(7px,1.9cqw,11px); text-align:left;}
.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%; display:flex; flex-direction:column; align-items:flex-end; line-height:1;}
.rcard .rc-net--visa{font-family:"Geist",sans-serif; font-size:clamp(16px,5.2cqw,30px); font-weight:800; font-style:italic; letter-spacing:-.06em; transform:skewX(-8deg);}
.rcard .rc-net--mc{gap:2px;}
.rcard .rc-net--mc svg{display:block; width:clamp(28px,10cqw,56px); height:auto;}
.rcard .rc-net--mc i{font-family:"Geist",sans-serif; font-style:normal; font-weight:500; font-size:clamp(8px,2.3cqw,13px); letter-spacing:-.01em; opacity:.92;}
.rcard[data-tier="standard"]{background:#0F0F0E;}
.rcard[data-tier="high"]{background:linear-gradient(146deg,#0C0C0B 0 22%,#161615 22% 44%,#20201E 44% 64%,#2C2C2A 64% 84%,#393937 84%);}
.rcard[data-tier="max"]{background:#F2F2EE; color:#000;}
.rcard[data-tier="max"]::before{background-image:radial-gradient(rgba(0,0,0,.13) .8px, transparent 1.1px);}
.rcard[data-tier="max"] .rc-chip{background:#3A3A38;}
.rcard[data-tier="max"] .rc-chip i{border-color:rgba(255,255,255,.28);}
.rcard.dead{opacity:.4;}
.rcard .rc-px{position:absolute; inset:0; z-index:3; width:100%; height:100%; display:block; pointer-events:none;}

/* ---------------------------------------------------------------- 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:var(--paper); color:#000;
  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(--err); color:#000;}

dialog{background:var(--panel); color:var(--paper); border:1px solid var(--line); padding:calc(var(--cell)*2); max-width:min(460px,92vw); font-family:"Geist",sans-serif;}
dialog::backdrop{background:rgba(0,0,0,.85);}
dialog .x{position:absolute; top:10px; right:10px; background:transparent; border:0; color:var(--muted); font-size:15px; cursor:pointer;}
dialog .x:hover{color:var(--paper);}
.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; filter:grayscale(1);}
.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:1px;
       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(--paper); color:#000; 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(--paper); border-color:rgba(242,242,238,.45);}
.strow .sv.demo{color:var(--amber); border-color:rgba(142,142,138,.5);}
.strow .sv.off{color:var(--err); border-color:rgba(255,90,79,.5);}
.strow .sd{grid-column:1/-1; color:var(--muted); font-size:13px;}