/* BRICS Explorer — styled to explorer/DESIGN.md (Coinbase design analysis).
 *
 * Following that spec faithfully:
 *   - white canvas, ONE accent (#0052ff) used scarcely
 *   - display weight 400, never bold — editorial calm over fintech urgency
 *   - pill geometry on interactive, 24px radius on cards, full circle on glyphs
 *   - every number in mono
 *   - green/red as TEXT ONLY, never a background fill
 *   - a single shadow tier
 *   - the dark full-bleed band is the signature component
 *
 * Fonts: Inter and JetBrains Mono are the documented substitutes for the
 * licensed Coinbase faces. Loaded from Google Fonts with a full system
 * fallback stack — if that host is unreachable (some regions block it) the
 * page still renders correctly, just in system fonts.
 */

:root{
  --primary:#0052ff; --primary-active:#003ecc;
  --ink:#0a0b0d; --body:#5b616e; --muted:#7c828a; --muted-soft:#a8acb3;
  --hairline:#dee1e6; --hairline-soft:#eef0f3;
  --canvas:#fff; --surface-soft:#f7f7f7; --surface-strong:#eef0f3;
  --surface-dark:#0a0b0d; --surface-dark-elev:#16181c;
  --on-dark:#fff; --on-dark-soft:#a8acb3;
  --up:#05b169; --down:#cf202f; --yellow:#f4b000;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:100px;
  --shadow:0 4px 12px rgba(0,0,0,.04);
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.5;font-weight:400;
     -webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- nav: dark, matching the hero band it sits on ---------- */
.nav{background:var(--surface-dark);color:var(--on-dark)}
.nav-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:20px;font-weight:400;letter-spacing:-.4px;color:var(--on-dark);
       text-decoration:none;white-space:nowrap}
.brand b{font-weight:600}
.nav a.link{font-size:14px;font-weight:500;color:var(--on-dark-soft);text-decoration:none;margin-left:24px}
.nav a.link:hover{color:var(--on-dark)}

/* ---------- signature dark hero band ---------- */
.hero{background:var(--surface-dark);color:var(--on-dark);padding:48px 0 64px}
.hero h1{font-size:52px;font-weight:400;line-height:1;letter-spacing:-1.3px;margin:0 0 12px}
.hero p{color:var(--on-dark-soft);font-size:16px;margin:0 0 32px;max-width:60ch}
.search{display:flex;gap:12px;max-width:720px}
.search input{flex:1;height:44px;padding:12px 20px;border:0;border-radius:var(--r-pill);
              background:var(--surface-dark-elev);color:var(--on-dark);
              font-family:var(--sans);font-size:16px}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:2px solid var(--primary);outline-offset:1px}
.search button{height:44px;padding:12px 24px;border:0;border-radius:var(--r-pill);
               background:var(--primary);color:#fff;font-family:var(--sans);
               font-size:16px;font-weight:600;cursor:pointer}
.search button:active{background:var(--primary-active)}

/* stat cards floating on the dark band — the layered product-UI pattern */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.stat{background:var(--surface-dark-elev);border-radius:var(--r-xl);padding:24px}
.stat .k{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
         letter-spacing:.4px;margin-bottom:8px}
.stat .v{font-family:var(--mono);font-size:24px;font-weight:500;color:var(--on-dark);line-height:1.2}
.stat .v.up{color:var(--up)} .stat .v.down{color:var(--down)}

/* ---------- testnet notice ---------- */
.testnet{background:var(--surface-strong);color:var(--ink);font-size:13px;padding:12px 0}
.testnet b{font-weight:600}

/* ---------- content ---------- */
main{padding:48px 0 96px;background:var(--canvas)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-xl);
      padding:32px;margin-bottom:24px;overflow-x:auto}
.card h2{font-size:18px;font-weight:600;line-height:1.33;margin:0 0 20px;letter-spacing:0}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);
   text-transform:uppercase;letter-spacing:.4px;padding:0 12px 12px 0;
   border-bottom:1px solid var(--hairline);white-space:nowrap}
td{padding:16px 12px 16px 0;border-bottom:1px solid var(--hairline-soft);white-space:nowrap}
tr:last-child td{border-bottom:0}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.mono,.num{font-family:var(--mono);font-size:13px;font-weight:500}
.num{font-size:14px}
.muted{color:var(--muted)}
.body{color:var(--body)}
.small{font-size:13px}
.big{font-family:var(--mono);font-size:32px;font-weight:500;letter-spacing:-.4px}

.badge{display:inline-block;background:var(--surface-strong);color:var(--ink);
       border-radius:var(--r-pill);padding:4px 12px;font-size:12px;font-weight:600}
.badge.ok{color:var(--up)} .badge.bad{color:var(--down)}
.in{color:var(--up);font-weight:600;font-size:12px}
.out{color:var(--down);font-weight:600;font-size:12px}

.glyph{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
       border-radius:9999px;background:var(--surface-strong);color:var(--ink);
       font-size:12px;font-weight:600;margin-right:12px;flex:0 0 32px}
.cell{display:flex;align-items:center}

dl{display:grid;grid-template-columns:200px 1fr;gap:16px 24px;margin:0}
dt{color:var(--muted);font-size:14px}
dd{margin:0;word-break:break-all;font-size:14px}

.more{display:inline-block;margin-top:20px;color:var(--primary);font-weight:600;font-size:14px}
.pager{display:flex;gap:24px;align-items:center;margin-top:24px;font-size:14px}
.pager a{font-weight:600}
.notice{background:var(--surface-soft);border-radius:var(--r-lg);padding:20px 24px;
        font-size:14px;color:var(--body);margin-top:24px}
.notice b{color:var(--ink);font-weight:600}

footer{background:var(--canvas);border-top:1px solid var(--hairline);padding:48px 0;
       color:var(--muted);font-size:13px}
footer .cols{display:flex;gap:48px;flex-wrap:wrap;margin-bottom:24px}
footer .cols div{font-size:13px}
footer .cols .k{color:var(--muted);margin-bottom:4px}
footer .cols .v{font-family:var(--mono);color:var(--ink);font-weight:500;font-size:14px}

@media(max-width:1024px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:44px;letter-spacing:-1px}
}
@media(max-width:768px){
  .grid2{grid-template-columns:1fr}
  .hero h1{font-size:36px;letter-spacing:-.5px}
  .hero{padding:32px 0 48px}
  .card{padding:24px}
  dl{grid-template-columns:1fr;gap:4px 0}
  dt{margin-top:12px}
  .nav a.link{margin-left:16px}
  main{padding:32px 0 48px}
}
@media(max-width:480px){
  .search{flex-direction:column}
  .search button{width:100%}
  .stat-row{grid-template-columns:1fr}
}

/* ---------- live updates ---------- */
/* A quiet pulsing dot beside the wordmark: it should be possible to tell the
 * page is live without watching a number change. Grey when polling fails. */
.livedot{display:inline-block;width:7px;height:7px;border-radius:9999px;
         background:var(--muted);margin-left:10px;vertical-align:middle;
         transition:background .3s}
.livedot.on{background:var(--up);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* New rows arrive rather than appearing fully formed, so the eye can follow
 * what changed. Numbers flash the accent briefly for the same reason. */
tbody tr.new{animation:slidein .45s ease-out}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.stat .v.flash{animation:flash .6s ease-out}
@keyframes flash{0%{color:var(--primary)}100%{color:inherit}}

@media (prefers-reduced-motion:reduce){
  .livedot.on{animation:none}
  tbody tr.new{animation:none}
  .stat .v.flash{animation:none}
}