/* Two-pane: transaction details (left) + wallet analysis (right), each
     scrolling on its own. The detail card sits at a readable ~600px so it
     isn't stretched; the wallet analysis takes the remaining width. */
  body { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  .tx-layout { display:flex; flex:1; min-height:0; overflow:hidden; gap:18px; padding:18px 20px; }
  .tx-col-left  { flex:40 1 0; min-width:0; overflow-y:auto; }   /* ~40% — transaction details */
  .tx-col-right { flex:60 1 0; min-width:0; overflow-y:auto; }   /* ~60% — wallet analysis */
  .tx-col-left .wm-card { width:100%; max-width:none; max-height:none; margin:0; box-shadow:var(--shadow-1,none); animation:none; }
  /* At most 2 fields per row — clean key/value pairs, clearly grouped. */
  .tx-col-left .wm-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; }

  @media (max-width:900px) {
    /* Full-page scroll on mobile (consistent with the scanner): the whole page
       scrolls instead of only the inner columns. Sticky nav comes from style.css. */
    body { height:auto; min-height:100vh; overflow:visible; }
    .ark-nav { position:sticky; top:0; z-index:100; }
    .tx-layout { flex-direction:column; overflow:visible; padding:14px; }
    .tx-col-left, .tx-col-right { flex:none; width:100%; overflow-y:visible; }
  }
  @media (max-width:520px) { .tx-col-left .wm-grid { grid-template-columns:1fr; } }

  /* SSR fallback summary (only visible until JS mounts the full UI, and to
     crawlers / no-JS readers). Subtle card styling so it matches the rest. */
  .ssr-summary { padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
  .ssr-summary h1 { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--text-hi); }
  .ssr-summary dl { display: grid; grid-template-columns: 100px 1fr; gap: 6px 14px; margin: 0; font-size: 12px; }
  .ssr-summary dt { color: var(--text-md); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; align-self: center; }
  .ssr-summary dd { margin: 0; color: var(--text-hi); }
  .ssr-summary code { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-md); word-break: break-all; }
  .ssr-summary .ssr-lede { margin: 0 0 14px; font-size: 12px; color: var(--text-md); line-height: 1.5; }
  .ssr-summary .ssr-whale { display: inline-block; padding: 2px 6px; border-radius: 100px; background: rgba(155,114,255,0.15); color: #9b72ff; font-size: 10px; font-weight: 700; letter-spacing: .5px; vertical-align: middle; margin-right: 6px; }