:root {
  --tb: 134px;                       /* height of the time bar: everything that sits above it moves with it */
  --bg: #1c141d;
  --panel: #2e1f2e;
  --panel-2: #382838;
  --line: #4a3a4a;
  --text: #f2f2f2;
  --dim: #b9a9b9;
  --accent: #aee7f8;
  --accent-ink: #0e0f0e;
  --danger: #ff8a80;
  --focus: #ffd166;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { display: flex; flex-direction: column; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spacer { flex: 1; }
.hint { color: var(--dim); font-size: 12px; margin: 6px 0 0; line-height: 1.35; }
a { color: var(--accent); }
kbd { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: 12px; }

button, select, input[type="text"], input[type="url"], input[type="number"], textarea {
  font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 5px 9px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.danger:hover { border-color: var(--danger); color: var(--danger); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input[type="text"], input[type="url"], input[type="number"], select, textarea { width: 100%; }
textarea { resize: vertical; min-height: 64px; }

#top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: 0.3px; }
.brand span { color: var(--accent); font-weight: 400; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand .logo { border-radius: 6px; flex: none; }
#searchForm { display: flex; gap: 6px; flex: 1 1 230px; max-width: 640px; }                /* room for the logo, Redo and the Find field on one row at 1366 px; it grows into what is left */
#searchForm input { flex: 1; font-family: Consolas, "Courier New", monospace; font-size: 13px; }

.navgroup { display: flex; gap: 3px; }
.navbtn { padding: 5px 10px; font-size: 12px; line-height: 1; min-width: 34px; }
.focus-toggle { padding: 0 2px; }
#depth { width: auto; padding: 4px 6px; }
#trail { display: flex; gap: 4px; align-items: center; padding: 5px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; font-size: 12px; }
#trail[hidden] { display: none; }
#trail .crumb { padding: 2px 9px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; flex: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
#trail .crumb.current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; cursor: default; }
#trail .crumb.ahead { opacity: 0.6; }
#trail .sep { color: var(--dim); flex: none; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 14px; position: sticky; top: 0; z-index: 3; background: var(--panel); border-bottom: 1px solid var(--line); font-weight: 700; }
.collapse-btn { padding: 2px 10px; line-height: 1.3; font-size: 15px; }
body.side-collapsed #side { display: none; }
body.insp-collapsed #inspector { display: none; }
.edge-tab { position: absolute; z-index: 15; top: 56px; padding: 9px 7px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.edge-tab.left { left: 0; border-left: 0; border-radius: 0 8px 8px 0; }
.edge-tab.right { right: 0; top: 130px; border-right: 0; border-radius: 8px 0 0 8px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edge-tab[hidden] { display: none; }
#inspCollapse { position: absolute; right: 38px; top: 6px; }

#traceBar { position: absolute; left: 12px; right: 12px; margin: 0 auto; width: max-content; max-width: calc(100% - 24px); top: 10px; z-index: 12; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            padding: 6px 10px; background: rgba(46, 31, 46, 0.96); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); font-size: 13px; }
#traceBar[hidden] { display: none; }
#traceBar button[hidden] { display: none; }
#traceBar .trace-only { display: none; }
body.trace-on #traceBar .trace-only { display: inline-block; }
#traceBar select { padding: 2px 6px; font-size: 12px; max-width: 170px; }
#traceBar label.sr-inline { color: var(--dim); font-size: 12px; }
#traceBar button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
body.axis-on #traceBar { top: 34px; }
body.box-mode #cv { cursor: crosshair; }
#traceBar .tb-title { font-weight: 700; color: var(--accent); }
#traceBar button { padding: 3px 10px; font-size: 12px; }
#traceInfo { color: var(--dim); font-size: 12px; }
body.trace-on #stepbar { display: none !important; }
.chooser { display: flex; flex-direction: column; gap: 2px; max-height: 44vh; overflow-y: auto; padding: 2px; }
.chooserrow { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.chooserrow:hover { background: var(--panel-2); }
.chooserrow .what { flex: 1; overflow-wrap: anywhere; }
.chooserrow .what small { display: block; color: var(--dim); font-size: 11px; }
.chooserrow .amt { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 12px; flex: none; }
.chooserfoot { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.chooserfoot button { padding: 4px 10px; font-size: 12px; }
#ctxMenu .chooserfoot button, #ctxMenu .chooser label { display: flex; }
#stepbar { position: absolute; left: 12px; right: 12px; margin: 0 auto; width: max-content; bottom: calc(var(--tb) + 10px); z-index: 22; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
           max-width: calc(100% - 24px); padding: 7px 10px; background: rgba(46, 31, 46, 0.96); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
#stepbar[hidden] { display: none; }
.stepbtn { padding: 8px 14px; font-weight: 700; background: var(--panel-2); display: inline-flex; align-items: center; gap: 7px; min-width: 120px; justify-content: center; }
.stepbtn:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.stepbtn .cnt { font-size: 11px; background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 0 6px; min-width: 16px; text-align: center; }
.stepbtn:disabled .cnt { background: var(--line); color: var(--dim); }
.stepbtn[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
.stepbtn[aria-expanded="true"] .cnt { background: var(--accent-ink); color: var(--accent); }
#stepHere { text-align: center; line-height: 1.35; padding: 0 6px; max-width: 300px; }
#stepHere .kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent-ink); background: var(--accent); border-radius: 3px; padding: 0 5px; }
#stepAmt { display: block; color: var(--dim); font-size: 12px; }
#stepLoad { padding: 1px 8px; font-size: 11px; margin-top: 2px; }
#stepbar .small { font-size: 12px; color: var(--dim); }
#stepMenu { position: absolute; bottom: calc(100% + 6px); min-width: 320px; max-width: min(460px, 94vw); max-height: 46vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent);
            border-radius: 10px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 3px; text-align: left; }
#stepMenu[hidden] { display: none; }
#stepMenu .menuhead { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dim); padding: 2px 6px 4px; }
.steprow { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; text-align: left; padding: 6px 9px; font-size: 13px; }
.steprow .what { overflow-wrap: anywhere; }
.steprow .what small { display: block; color: var(--dim); font-size: 11px; }
.steprow .amt { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; }
.steprow.info { border-style: dashed; color: var(--dim); cursor: default; }
.steprow.info:hover { border-color: var(--line); }
@media (max-width: 900px) { #sideCollapse, #sideTab { display: none !important; } #stepbar { bottom: calc(var(--tb) + 6px); } }
.fiat.primary { margin-left: 0; font-weight: 600; }

#ctxMenu { position: fixed; z-index: 60; min-width: 230px; max-width: 320px; max-height: 80vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; padding: 5px; box-shadow: 0 10px 28px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 1px; }
#ctxMenu[hidden] { display: none; }
#ctxMenu .ctxhead { padding: 4px 9px 5px; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); margin-bottom: 3px; }
#ctxMenu button, #ctxMenu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; background: transparent; border: 0; border-radius: 5px; padding: 6px 9px; color: var(--text); text-decoration: none; cursor: pointer; font-size: 13px; }
#ctxMenu button:hover, #ctxMenu a:hover, #ctxMenu button:focus-visible, #ctxMenu a:focus-visible { background: var(--panel-2); outline: 1px solid var(--accent); }
#ctxMenu button:disabled { opacity: 0.45; cursor: default; }
#ctxMenu .sep { height: 1px; background: var(--line); margin: 3px 0; }
#ctxMenu .hint { padding: 2px 9px 4px; margin: 0; }
#ctxMenu .sw { display: inline-block; width: 12px; text-align: center; font-size: 13px; margin-right: 6px; }
#ctxMenu .danger { color: var(--danger); }

.tagrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tagrow select { width: auto; flex: 1 1 130px; }
.tagrow input[type="color"] { width: 38px; height: 30px; padding: 1px 3px; flex: none; }
.tagrow .swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.swatch { width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 2px solid var(--line); cursor: pointer; }
.swatch:hover, .swatch[aria-pressed="true"] { border-color: var(--text); }
.tagpreview { font-size: 18px; line-height: 1; min-width: 20px; text-align: center; }
.extcard { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; background: rgba(0,0,0,0.12); }
.extcard h4 { margin: 0; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.extcard h4 small { color: var(--dim); font-weight: 400; }
.extcard dl.kv { margin: 2px 0; }
.extcard details summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.extcard pre { margin: 4px 0 0; max-height: 160px; overflow: auto; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,0.25); padding: 6px; border-radius: 5px; }
.legend .item.tagitem { cursor: pointer; border-radius: 4px; padding: 1px 3px; }
.legend .item.tagitem:hover { background: var(--panel-2); }
.legend .tagsw { width: 14px; text-align: center; flex: none; }
#arkResult.ok { color: #7bd88f; } #arkResult.bad { color: var(--danger); }
#arkResult { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.fiat { color: #9be564; margin-left: 6px; white-space: nowrap; cursor: help; }
.fiat.approx { color: #f2c94c; }
#fiatRefRow { margin-left: 22px; }
#fiatRefRow[hidden] { display: none; }
#fallbackRow[hidden] { display: none; }
.linkrows { display: flex; flex-direction: column; gap: 3px; }
.linkrow { display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 4px 8px; font-size: 12px; }
.linkrow .amt { color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }
.linkrow .when { color: var(--dim); flex: none; }
.linkrow .who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.linkrow .who small { display: block; color: var(--dim); font-size: 11px; }
.walletsec .linkrow { flex-wrap: wrap; align-items: center; row-gap: 3px; }                  /* line 1: tag, date, amount; line 2: who is on the other side and the transaction */
.walletsec .linkrow .dirtag { order: 1; align-self: center; }
.walletsec .linkrow .when { order: 2; margin-right: auto; }
.walletsec .linkrow .amt { order: 3; }
.walletsec .linkrow .who { order: 4; flex: 1 1 100%; }
.walletsec .linkrow .who small { display: inline; margin-left: 8px; }
.linkrow.self .amt { color: var(--dim); }
.walletgroup { margin: 0 0 6px; font-size: 12px; color: var(--dim); }
.groupwrap { display: flex; flex-direction: column; gap: 3px; }
.groupwrap.open { border-left: 2px solid var(--accent); padding-left: 4px; }
.groupbtn { border-style: dashed; }
.groupacts { display: flex; align-items: center; gap: 6px; padding-left: 4px; }
.groupmembers { display: flex; flex-direction: column; gap: 3px; margin-left: 10px; }
.choosergroup .groupmembers { margin-left: 18px; border-left: 2px solid var(--line); padding-left: 4px; }
.choosergroup[hidden], .groupmembers[hidden] { display: none; }
.grouphead { background: var(--panel-2); }
#ctxMenu .groupfold { flex: none; padding: 0 6px; font-size: 13px; }
.linkrow.in .amt { color: #6be675; }
.linkrow.out .amt { color: #ff9f43; }
.dirtag { flex: none; align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
.dirtag.in { color: #6be675; background: rgba(107, 230, 117, 0.14); }
.dirtag.out { color: #ff9f43; background: rgba(255, 159, 67, 0.14); }
.dirtag.self { color: var(--dim); background: rgba(255, 255, 255, 0.07); }
.walletsum { font-size: 12px; color: var(--dim); margin: 2px 0 6px; }
.walletsum .strong { color: var(--text); font-weight: 700; }
.walletbar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.walletbar .seg { flex: 1; }
.walletbar .seg button { padding: 4px 2px; font-size: 12px; }
.walletbar select { width: auto; flex: none; padding: 4px 6px; font-size: 12px; }
.showbtn { flex: none; padding: 2px 7px; font-size: 11px; border-radius: 5px; white-space: nowrap; }
.rowcopy.off .linkrow { opacity: 0.72; }
.moreRows { align-self: flex-start; font-size: 12px; padding: 4px 10px; }
#ctxMenu.choosing { width: 400px; max-width: 94vw; }
.choosertools { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 2px 6px 6px; font-size: 12px; color: var(--dim); }
.choosertools select, .choosertools input { width: auto; padding: 3px 5px; font-size: 12px; }
.choosertools label { display: flex; align-items: center; gap: 4px; }
.chooserinfo { padding: 0 9px 4px; font-size: 12px; color: var(--dim); }
.choosertools .chooserinfo { padding: 0; }
.choosertools .unspentopt[hidden] { display: none; }
.choosertools .toolrow { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; width: 100%; }
#ctxMenu .chooserfoot .primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
#ctxMenu .chooserfoot .primary:disabled { background: transparent; color: var(--dim); }
.chooserrow[hidden], #ctxMenu .chooser label[hidden] { display: none; }
.chooserfoot { flex-wrap: wrap; }
.linkrow.plain { border-style: dashed; cursor: default; color: var(--dim); }
.linkrow.plain:hover { border-color: var(--line); }
.findings { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.findings .linkrow { justify-content: flex-start; align-items: center; }
.findings .linkrow .sw { width: 10px; height: 10px; border-radius: 50%; border: 2px dashed currentColor; flex: none; }
.findings .linkrow .amt { margin-left: auto; }
.findings .lbl { margin-top: 6px; }
.flagtag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; padding: 1px 6px; border-radius: 9px; border: 1px solid currentColor; margin-right: 4px; }
#toast button { margin-left: 10px; padding: 2px 10px; font-size: 12px; }
.copybtn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; flex: none; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--dim); cursor: pointer; vertical-align: middle; }
.copybtn:hover, .copybtn:focus-visible { color: var(--accent); border-color: var(--line); background: var(--panel-2); }
.copybtn.done { color: #6be675; border-color: #6be675; }
.copybtn[hidden] { display: none; }
.idrow { display: flex; align-items: flex-start; gap: 6px; }
.idrow .mono { flex: 1; min-width: 0; }
.rowcopy { display: flex; align-items: center; gap: 4px; }
.rowcopy > :first-child { flex: 1; min-width: 0; }
.steprowwrap { display: flex; align-items: center; gap: 4px; }
.steprowwrap > .steprow { flex: 1; min-width: 0; }
.balrows { display: flex; flex-direction: column; margin-top: 4px; }
.balrow { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 2px; border-bottom: 1px solid var(--line); }
.balrow .amt { color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }
.reasons { margin: 2px 0 0; padding-left: 16px; font-size: 12px; color: var(--dim); }
.menu-group { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.menu-group input { font-size: 12px; padding: 3px 6px; }
.packlist { display: flex; flex-direction: column; gap: 4px; }
.packrow { display: flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.packrow .packname { flex: 1; overflow-wrap: anywhere; }
.packrow .packname small { display: block; color: var(--dim); }
.packrow button { padding: 1px 7px; }
.reasons li { margin: 1px 0; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 5px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--accent); }
.menu-body { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.menu-body button { text-align: left; }

.banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #3d3320; border-bottom: 1px solid #6b5a2a; }
.banner[hidden] { display: none; }

main { flex: 1; display: flex; min-height: 0; position: relative; }
#side { width: 290px; flex: none; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); }
#side details { border-bottom: 1px solid var(--line); }
#side summary { cursor: pointer; padding: 10px 14px; font-weight: 700; user-select: none; }
.sec { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.sec label:not(.check), .lbl { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; display: flex; justify-content: space-between; align-items: baseline; }
.lbl output { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 12px; }
.check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.row { display: flex; gap: 6px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row button { flex: none; padding: 3px 8px; font-size: 12px; }
#testResult { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
#testResult.ok { color: #7bd88f; } #testResult.bad { color: var(--danger); }
.help p { margin: 4px 0; line-height: 1.4; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 6px 4px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.legend { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 12px; color: var(--dim); }
.legend .item { display: flex; align-items: center; gap: 7px; }
.legend .sw { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.legend .grad { height: 10px; border-radius: 5px; margin: 2px 0; }
.legend .grad-labels { display: flex; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 12px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.chip input { margin: 0; }
.chip .sw { width: 9px; height: 9px; border-radius: 50%; }

#stage { flex: 1; position: relative; min-width: 0; background: var(--bg); }
#cv { position: absolute; inset: 0 0 var(--tb) 0; width: 100%; height: calc(100% - var(--tb)); display: block; cursor: grab; }
/* what was found: chips over the graph, above the counts; a click selects what they count */
#findStrip { position: absolute; left: 10px; bottom: calc(var(--tb) + 86px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 130px); z-index: 4; }
.findchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; border-radius: 12px; background: rgba(28, 20, 29, 0.94); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.findchip:hover, .findchip:focus-visible { border-color: var(--accent); }
.findchip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.findchip b { font-variant-numeric: tabular-nums; }
.findchip.bad { border-color: #ff4d4f; color: #ff9a9a; background: rgba(60, 20, 24, 0.94); }
.findchip.more { color: var(--accent); }
#anCount, #detCount { font-weight: 400; color: var(--dim); }
#hud { position: absolute; bottom: calc(var(--tb) + 58px); left: 10px; font-size: 12px; color: var(--dim); background: rgba(28,20,29,0.78); padding: 3px 8px; border-radius: 4px; pointer-events: none; }
#zoomBtns { position: absolute; right: 12px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
#zoomBtns button { width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; }
#empty { position: absolute; left: 50%; top: calc((100% - var(--tb)) / 2); transform: translate(-50%, -50%); text-align: center; max-width: 440px; padding: 20px; }
#empty h2 { margin: 0 0 8px; font-weight: 600; }
#scaleRow[hidden], #empty[hidden], #tooltip[hidden], #progress[hidden], #toast[hidden], #inspector[hidden] { display: none; }
#tooltip { position: fixed; z-index: 40; pointer-events: none; background: #120c13; border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px; max-width: 360px; font-size: 12px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,0.5); overflow-wrap: anywhere; }
#tooltip b { color: var(--accent); }
#progress { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 12px; display: flex; gap: 10px; align-items: center; z-index: 20; }
#toast { position: absolute; left: 50%; bottom: calc(var(--tb) + 100px); transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 8px 14px; max-width: min(640px, 90%); z-index: 20; overflow-wrap: anywhere; }
#toast.bad { border-left-color: var(--danger); }

#timebar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb); background: var(--panel); border-top: 1px solid var(--line); padding: 8px 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.tb-head { display: flex; align-items: center; gap: 8px; }
.tb-head button { padding: 2px 9px; font-size: 12px; }
.tb-date { font-variant-numeric: tabular-nums; color: var(--accent); }
.tb-dash { color: var(--dim); }
.tb-body { position: relative; flex: 1; min-height: 0; }
#hist { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 54px; display: block; cursor: crosshair; }
body.tb-collapsed { --tb: 40px; }
body.tb-collapsed .tb-body { display: none; }
body.tb-collapsed #timebar { padding-bottom: 6px; }
.dual { position: absolute; left: 0; right: 0; bottom: 4px; height: 22px; }
.dual-track { position: absolute; left: 8px; right: 8px; top: 9px; height: 4px; background: var(--line); border-radius: 2px; }
#dualFill { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }
.dual input[type="range"] { position: absolute; left: 0; width: 100%; top: 0; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual input[type="range"]::-webkit-slider-runnable-track { background: none; height: 22px; }
.dual input[type="range"]::-moz-range-track { background: none; height: 22px; }
.dual input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 22px; border-radius: 4px; background: var(--accent); border: 2px solid var(--accent-ink); cursor: ew-resize; }
.dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 18px; border-radius: 4px; background: var(--accent); border: 2px solid var(--accent-ink); cursor: ew-resize; }
.dual input[type="range"]:disabled::-webkit-slider-thumb { background: var(--line); }
.dual input[type="range"]:disabled::-moz-range-thumb { background: var(--line); }
#minAmount { width: 100%; accent-color: var(--accent); }

#inspector { width: 320px; flex: none; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 14px; position: relative; }
#inspClose { position: absolute; right: 8px; top: 6px; font-size: 20px; line-height: 1; padding: 0 8px; background: none; border: 0; }
#inspBody h3 { margin: 0 24px 2px 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
#inspBody .kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent-ink); background: var(--accent); border-radius: 3px; padding: 1px 6px; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; overflow-wrap: anywhere; }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 10px 0; }
dl.kv dt { color: var(--dim); } dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.insp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.insp-section { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tag { display: inline-block; font-size: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; margin: 1px 3px 1px 0; color: var(--dim); }
.tag.known { border-color: #f2c94c; color: #f2c94c; }

#log { background: var(--panel); border-top: 1px solid var(--line); font-size: 12px; }
#log summary { cursor: pointer; padding: 4px 12px; color: var(--dim); }
#logList { margin: 0; padding: 4px 12px 8px 28px; max-height: 120px; overflow-y: auto; color: var(--dim); }
#logList li.bad { color: var(--danger); }

.narrow-only { display: none; }
@media (max-width: 900px) {
  .narrow-only { display: inline-block; }
  #side { position: absolute; z-index: 25; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform 0.15s; width: min(300px, 88vw); }
  body.side-open #side { transform: none; }
  #inspector { position: absolute; z-index: 24; right: 0; left: 0; bottom: var(--tb); width: auto; max-height: 55%; border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { #side { transition: none; } }
#ctxMenu .groupone { flex: none; padding: 0 6px; font-size: 11px; white-space: nowrap; }
#ctxMenu .oneticked { white-space: nowrap; }
.groupmembers .linkrow.plain { border-style: solid; border-color: var(--line); color: inherit; cursor: default; }
.rowcopy.tickable > :first-child { flex: none; }
.rowcopy.tickable > :nth-child(2) { flex: 1; min-width: 0; }
.rowtick { flex: none; margin: 0 2px 0 0; }
.walletpick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; font-size: 12px; color: var(--dim); }
.walletpick label { display: flex; align-items: center; gap: 4px; margin: 0; text-transform: none; letter-spacing: 0; }
.pickacts { display: flex; flex-wrap: wrap; gap: 6px; }
.pickacts button { padding: 3px 8px; font-size: 12px; }

/* Find: a field in the top bar; the matches drop down from it */
.findwrap { position: relative; flex: 0 1 150px; min-width: 120px; }                 /* narrow enough that the top bar stays one row at 1366 px and up */
.findwrap .findicon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; font-size: 15px; line-height: 1; }
#findQ { width: 100%; padding-left: 27px; }
#findBox { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); width: min(580px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); padding: 8px; }
#findBox[hidden] { display: none; }
#findList { max-height: 52vh; overflow-y: auto; }
.findrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.findrow.on { background: var(--panel-2); outline: 1px solid var(--accent); }
.findrow .findmain { min-width: 0; overflow-wrap: anywhere; }
.findrow .findsub { font-size: 11px; color: var(--dim); overflow-wrap: anywhere; }
.findrow .findsub b { font-weight: normal; color: var(--text); opacity: 0.75; }
.findrow mark { background: rgba(242, 201, 76, 0.38); color: inherit; border-radius: 2px; }
.findrow .findstat { font-size: 11px; color: var(--dim); white-space: nowrap; }
.findrow .findstat.on { color: var(--accent); }
.findnone, .findadd { padding: 8px; font-size: 12px; color: var(--dim); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#findFoot { font-size: 11px; color: var(--dim); padding: 6px 4px 0; }

/* Detections: every pattern found, oldest first */
#detSection { border-bottom: 0; margin-top: 8px; }
#detSection > summary { padding: 6px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
#findTitle { margin: 0 24px 2px 0; font-size: 16px; }
.rptabs { display: flex; gap: 4px; margin: 0 52px 10px 0; }
.rptabs[hidden] { display: none; }
.rptabs button { padding: 3px 10px; font-size: 12.5px; border-radius: 12px; }
.rptabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; border-color: var(--accent); }
.rptabs output { font-weight: 400; }
#findPane .lbl.flash, #findPane .linkrow.flash { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
#findPane .linkrow small { color: var(--dim); font-size: 11px; margin-left: 6px; }
#anOpenFindings { margin-top: 6px; }
#detCount { color: var(--accent); font-weight: normal; margin-left: 4px; }
#detKinds { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
#detKinds button { padding: 2px 8px; font-size: 11.5px; border-radius: 12px; }
#detKinds button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
#detChain { width: 100%; font-size: 12px; margin-bottom: 6px; }
#detChain:disabled { opacity: 0.6; }
.detlist { display: flex; flex-direction: column; gap: 3px; max-height: 340px; overflow-y: auto; margin-top: 6px; }
.detlist .rowcopy { align-items: stretch; }
.detrow { display: block; width: 100%; text-align: left; padding: 4px 8px; font-size: 12px; }
.detrow.on { outline: 1px solid var(--accent); background: var(--panel-2); }
.detrow .dethead { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.detrow .dettime { color: var(--dim); font-variant-numeric: tabular-nums; }
.detrow .detwhy { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; color: var(--dim); }

/* A peel chain lit on the graph */
#detChainActs[hidden] { display: none; }
#detShowChain[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
#chainChip { position: absolute; left: 12px; top: 62px; z-index: 13; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 3px 4px 3px 10px; font-size: 12px; }
#chainChip[hidden] { display: none; }
#chainChip #chainChipName { font-weight: 700; }
#chainChip #chainChipText { color: var(--dim); }
body.axis-on #chainChip { top: 86px; }
body.trace-on #chainChip { top: 112px; }                              /* the trace bar has two rows */

/* Assistant: the evidence for a model, and a check of its answer */
#aiSection .sec > label, #aiSection details > label { margin-top: 6px; }
#aiSection #aiLocal { border-bottom: 0; margin: 6px 0; }
#aiSection #aiLocal > summary { padding: 4px 0; font-size: 12.5px; font-weight: 600; }
#aiText { min-height: 120px; font-size: 12px; line-height: 1.4; }
#aiEndpoint[aria-invalid="true"] { border-color: var(--danger); }
.hint.bad { color: var(--danger); }
.hint.ok { color: #6be675; }

/* Full screen: the graph alone (the details panel still opens when something is selected) */
body.canvas-full #top, body.canvas-full #sideTab, body.canvas-full #trail, body.canvas-full #restore, body.canvas-full #log { display: none !important; }
/* the Controls stay one button away: the left panel slides over the graph and goes back with Esc */
.full-only { display: none; }
body.canvas-full .full-only { display: inline-flex; align-items: center; justify-content: center; }
body.canvas-full #side { display: block !important; position: absolute; z-index: 26; top: 0; bottom: 0; left: 0; width: min(300px, 88vw); transform: translateX(-100%); visibility: hidden; transition: transform 0.15s, visibility 0s 0.15s; }
body.canvas-full.full-side-open #side { transform: none; visibility: visible; transition: transform 0.15s; box-shadow: 4px 0 18px rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: reduce) { body.canvas-full #side, body.canvas-full.full-side-open #side { transition: none; } }
#fullBtn .exit { display: none; }
#fullBtn[aria-pressed="true"] .enter { display: none; }
#fullBtn[aria-pressed="true"] .exit { display: inline; }
#fullBtn { display: flex; align-items: center; justify-content: center; }
#fullBtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* a wallet on a sanctions list, and every claim a wallet has */
.tag.danger { border-color: #ff4d4f; color: #ff9a9a; }
.claims .hint b { color: var(--text); }
.claims .claimnote { color: var(--dim); }

/* a key for your own server */
#customAuthRow, #customPaceRow { margin-top: 4px; }
#customAuthRow label:not(.check), #customPaceRow label { margin-top: 6px; }

/* the wallet's Transactions list: the same choices as the arrow list */
.walletfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; font-size: 12px; }
.walletfilters select { width: auto; font-size: 12px; padding: 2px 6px; }
.walletfilters .hint { margin: 0; }

/* more of a wallet's history, from the lists */
.choosermore, .moreHistory { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.choosermore button, .moreHistory button { padding: 3px 10px; font-size: 12px; }
.moreHistory .hint { margin: 0; }

/* the range the arrows reach, drawn on the time line */
.expandchip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #ffb347; color: #ffb347; border-radius: 12px; padding: 0 4px 0 9px; font-size: 12px; }
.expandchip[hidden] { display: none; }
.expandchip button { padding: 0 6px; line-height: 1.3; }

#legend .groupitem .tagsw { font-size: 14px; }

.walletgroup select { width: auto; font-size: 11.5px; padding: 1px 4px; margin-left: 4px; }
.toolrow select[aria-label="Group rows by"] { width: auto; font-size: 11.5px; padding: 1px 4px; margin-left: 4px; }