/* ProofRWA Explorer app — built on tokens.css. Styles the DOM that app.js
   produces (dashboard grid + asset detail). Same verification-terminal
   language as the landing. */

body { display: flex; flex-direction: column; min-height: 100vh; line-height: 1.5; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70ch 44ch at 84% -10%, oklch(0.83 0.15 168 / 0.05), transparent 70%),
    radial-gradient(60ch 40ch at 4% 112%, oklch(0.55 0.10 232 / 0.045), transparent 70%);
}
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------- topbar ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) clamp(var(--space-md), 4vw, var(--space-xl));
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: baseline; gap: 10px; font-weight: 700; letter-spacing: -0.025em; z-index: 1; }
.brand-glyph { color: var(--signal); font-size: 1.5em; filter: drop-shadow(0 0 12px var(--signal-glow)); align-self: center; }
.brand-name { font-size: 1.3rem; }
.brand-name span { color: var(--signal); }
.brand-sep { color: var(--ink-faint); }
.brand-app { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.topbar-right { display: flex; align-items: center; gap: var(--space-md); z-index: 1; }
.net { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); }
.net-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-glow); animation: pulse 2.6s var(--ease-out) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.net-epoch { color: var(--ink-faint); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 8px; }
.home-link { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); }
.home-link:hover { color: var(--signal); }

/* ---------------- layout ---------------- */
.view { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: clamp(var(--space-md), 3vw, var(--space-lg)); position: relative; z-index: 1; }
.loading { color: var(--ink-faint); padding: var(--space-3xl) 0; text-align: center; }

/* ---------------- dashboard head ---------------- */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.dash-title { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; }
.dash-sub { color: var(--ink-dim); font-size: var(--t-sm); margin-top: var(--space-3xs); max-width: 60ch; }
.dash-sub b { color: var(--signal); font-family: var(--font-mono); font-weight: 500; }
.stat-row { display: flex; gap: var(--space-lg); }
.stat { text-align: right; }
.stat-n { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.01em; }
.stat-l { color: var(--ink-faint); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* ---------------- asset grid ---------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--space-xs); }
.card {
  --band: var(--line-2);
  background: linear-gradient(180deg, var(--bg-1), color-mix(in oklch, var(--bg-1) 55%, var(--bg)));
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-sm);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform 0.16s var(--ease-out), border-color 0.16s, box-shadow 0.16s;
  animation: card-in 0.5s var(--ease-out) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 18px 40px -20px oklch(0 0 0 / 0.8); }
/* band accent as a top rule, not a side stripe */
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--band); opacity: 0.85; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-sm); }
.ticker { font-weight: 700; font-size: var(--t-lg); letter-spacing: -0.02em; }
.price { font-family: var(--font-mono); color: var(--ink-dim); font-size: var(--t-xs); margin-top: 2px; }
.band {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-weight: 600; font-size: 1.6rem; line-height: 1;
  color: oklch(0.18 0.03 168); background: var(--band);
}
.card-metrics { display: flex; gap: var(--space-md); margin-bottom: var(--space-xs); }
.metric-l { color: var(--ink-faint); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.05em; }
.metric-v { font-family: var(--font-mono); font-size: var(--t-base); font-weight: 500; margin-top: 1px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--line); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: var(--font-mono); font-size: var(--t-2xs); padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-dim); white-space: nowrap; }
.chip.fresh { color: var(--signal); border-color: var(--signal-deep); }
.chip.stale, .chip.warn { color: var(--amber); border-color: var(--amber-deep); }
.chip.pending { color: var(--ink-faint); }
.realbar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 3px; }
.realbar > i { display: block; height: 100%; background: var(--signal); }
.real-l { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-faint); }

/* ---------------- detail ---------------- */
.back { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); display: inline-flex; gap: 7px; align-items: center; margin-bottom: var(--space-md); }
.back:hover { color: var(--signal); }
.detail-head { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.detail-band { width: 84px; height: 84px; font-size: 3rem; border-radius: var(--radius-lg); flex-shrink: 0; }
.detail-id h1 { font-size: var(--t-2xl); letter-spacing: -0.03em; font-weight: 700; }
.detail-id .sub { color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--t-xs); margin-top: 6px; }
.detail-id .sub a { color: var(--signal); }
.detail-id .sub a:hover { text-decoration: underline; }

.panels { display: grid; grid-template-columns: 1.12fr 1fr; gap: var(--space-sm); align-items: start; }
.panel { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-md) var(--space-md); }
.panel h2 { font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); font-weight: 500; margin-bottom: var(--space-md); display: flex; align-items: center; justify-content: space-between; }
.panel h2 .tag { color: var(--signal); border: 1px solid var(--signal-deep); border-radius: 4px; padding: 1px 6px; font-size: var(--t-2xs); letter-spacing: 0.04em; }

.att-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-lg); }
.att-row { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.att-k { color: var(--ink-dim); font-size: var(--t-sm); }
.att-v { font-family: var(--font-mono); font-size: var(--t-base); font-weight: 500; }
.att-v.big { font-size: var(--t-lg); }
.att-v.sig { color: var(--signal); }

.verify { margin-top: var(--space-md); display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.btn { font-family: var(--font-mono); font-size: var(--t-xs); padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); color: var(--ink); display: inline-flex; align-items: center; gap: var(--space-2xs); transition: 0.15s var(--ease-out); cursor: pointer; background: var(--bg-2); }
.btn:hover { border-color: var(--signal-deep); color: var(--signal); }
.btn.primary { background: color-mix(in oklch, var(--signal) 14%, var(--bg-2)); border-color: var(--signal-deep); color: var(--signal); }
.btn.primary:hover { background: color-mix(in oklch, var(--signal) 22%, var(--bg-2)); }
.hashline { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-faint); word-break: break-all; margin-top: var(--space-2xs); }

.fgroup { margin-bottom: var(--space-md); }
.fgroup-h { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2xs); display: flex; justify-content: space-between; }
.feat { display: grid; grid-template-columns: 128px 1fr 50px; gap: var(--space-2xs); align-items: center; padding: 3px 0; }
.feat-n { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.feat-bar > i { display: block; height: 100%; border-radius: 3px; }
.feat-bar > i.real { background: var(--signal); }
.feat-bar > i.def { background: var(--line-2); }
.feat-v { font-family: var(--font-mono); font-size: var(--t-2xs); text-align: right; color: var(--ink-dim); }
.feat-v.def { color: var(--ink-faint); }

.legend { display: flex; gap: var(--space-sm); margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-faint); }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }

.pending-note { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--amber); border: 1px solid var(--amber-deep); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); margin-top: var(--space-2xs); line-height: 1.5; }

/* ---------------- footer ---------------- */
.foot { border-top: 1px solid var(--line); padding: var(--space-md) clamp(var(--space-md), 4vw, var(--space-xl)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); color: var(--ink-faint); font-size: var(--t-xs); position: relative; z-index: 1; }
.foot-links { display: flex; gap: var(--space-md); }
.foot-links a:hover { color: var(--signal); }

@media (max-width: 820px) { .panels { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .stat-row { gap: var(--space-md); } .att-grid { grid-template-columns: 1fr; } }