/* RONS - css/bridge-history.css (23-oct). The bridge history under the bridge's form (bridge.html, js/bridge-history.js):
   "Your transfers in progress" (the two bars of js/progress.js; their own styles are css/meta.css's .op / .pbar),
   "Recent bridges" and the volume. Loaded after rons.css, bridge.css and meta.css; RONS classes only (xh-*), never the
   vendored bridge's. No inline styles (CSP). */

/* one column (a phone, a tablet): right after the tracker, then the device's transfers, then how it works */
@media (max-width:1000px){
  #mineCard{order:5}
  #xhCard{order:6}
}

.xh-mine .ops{margin-top:6px}

/* ---- the volume ---- */
.xh-at{font:400 .7rem/1.35 var(--font-mono);color:var(--ink-3)}
.xh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.xh-stats div{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:10px 12px;min-width:0}
.xh-stats dt{font:500 9.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* the figure and its unit stay on one line (bridge.css: .xb .num{white-space:nowrap}); the line under it wraps */
.xh-stats dd{margin:4px 0 0;font:500 1rem/1.3 var(--font-mono);color:var(--ink)}
.xh .xh-stats dd small{display:block;margin-top:2px;font:400 .72rem/1.35 var(--font-ui);color:var(--ink-3);white-space:normal}

/* ---- the list: two lines a transfer (what came in -> the HYPE it delivered, status; when, who, the tx) ---- */
.xh-list{list-style:none;margin:0;padding:0}
.xh-row{padding:10px 0;border-top:1px solid var(--line-soft);min-width:0}
.xh-row:first-child{border-top:0}
.xh-row.is-you{background:linear-gradient(90deg,rgba(0,0,255,.10),transparent 70%)}
.xh-row__main{display:flex;align-items:flex-start;gap:8px;min-width:0;font-size:.86rem}
.xh-row__what{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;flex:1;min-width:0}
.xh-to{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.xh-from{display:inline-flex;align-items:center;gap:6px;min-width:0}
.xh-from__a{font-family:var(--font-mono);color:var(--ink)}
.xh-from__c{color:var(--ink-3);font-size:.76rem}
.xh-from--unknown{color:var(--ink-3);font-size:.8rem}
.xh-chain{width:16px;height:16px;border-radius:50%;flex:none}
.xh-arrow{color:var(--blue-text)}
.xh-hype{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
.xh-st{flex:none;margin-top:1px;font:500 9.5px/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:var(--r-full);padding:1px 8px;color:var(--ink-2);white-space:nowrap}
.xh-st--done{border-color:rgba(34,197,94,.45);color:var(--up)}
.xh-st--pending{border-color:var(--blue-dim);color:var(--blue-text)}
.xh-st--failed{border-color:rgba(240,74,94,.5);color:var(--down)}
.xh-row__sub{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:.72rem;color:var(--ink-3);min-width:0}
.xh-row__sub .mono{font-family:var(--font-mono)}
.xh-you{font:500 9px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text)}
.xh-tx{color:var(--blue-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(140,140,255,.45)}
.xh-tx:hover{text-decoration-color:var(--blue-text)}
.xh-empty{padding:10px 0;color:var(--ink-3);font-size:.84rem}
/* a partial list (the API still reading the history) and data that stopped updating: said once, dim */
.xh-note{margin:8px 0 0;color:var(--ink-3);font-size:.76rem}
.xh-stale{color:var(--ink-3)}

/* two tiles a row up to 460 px: at 430 px (a large phone) three tiles of 115 px left "11.21 HYPE" past its tile */
@media (max-width:460px){
  .xh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xh-stats div:last-child{grid-column:1 / -1}
  .xh-row__main{font-size:.82rem}
  .xh-stats dd{font-size:.9rem}
}