/* Four surfaces. Reuses the site tokens in css/site.css. */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0 20px;border-bottom:1px solid var(--line)}
.tab{background:transparent;border:0;border-bottom:3px solid transparent;color:var(--muted);
  font:900 13px/1 "Nunito",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 14px;cursor:pointer;transition:color .12s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--mustard);border-bottom-color:var(--mustard)}
/* site.css gives every <section> 70px padding + a top border; surfaces are panes, not sections. */
.surface{display:none;padding:0 0 50px;border-top:0}
.surface.on{display:block}

.statewrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pill{font:900 11px/1 "Nunito",sans-serif;letter-spacing:.1em;padding:7px 11px;border-radius:999px;
  text-transform:uppercase;background:#3a2a22;color:var(--muted)}
.pill.mining{background:var(--mustard);color:#1a1008}
.pill.proof{background:var(--rift);color:#04202a}
.pill.securing{background:var(--rift);color:#04202a;animation:pulse 1.1s ease-in-out infinite}
.pill.found{background:var(--lettuce);color:#0d1a05}
.pill.lost,.pill.rejected{background:var(--ketchup);color:#fff}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.pill.securing{animation:none}}

input[type=range]{width:100%;accent-color:var(--mustard);margin:6px 0 2px}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);word-break:break-all}

.bun{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:12px;background:var(--bg2)}
.bun-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.bun-head b{font-family:"Bangers",Impact,sans-serif;font-size:20px;color:var(--mustard);letter-spacing:.04em}
.bun-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.bun-grid div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.bun-grid span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.bun-grid b{display:block;font-size:17px;margin-top:3px;font-variant-numeric:tabular-nums}
.bun-actions{display:flex;gap:8px;flex-wrap:wrap}

table.spec td{font-variant-numeric:tabular-nums}
table.spec td:last-child{text-align:right}
.ok{color:var(--lettuce)}.bad{color:var(--ketchup)}
.notice[hidden]{display:none}

footer .wrap a{display:inline;margin:0}

/* Session limit chooser. Each button states the money first, the count second, because the
   money is the commitment and the count is an estimate. */
.mine-auth-pick { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.mine-auth-actions .mine-btn span { display: block; font-size: 11px; opacity: .65; letter-spacing: normal; text-transform: none; }
.mine-auth-fine { margin-top: 10px; font-size: 11px; line-height: 1.5; opacity: .6; }