/* Dark-only page; colours validated with the dataviz palette checks
   against the #0d0d0d plane (3 categorical slots, all pairs). */
:root {
    color-scheme: dark;
    --plane: #0d0d0d;
    --surface: #1a1a19;
    --surface-glass: rgba(26, 26, 25, 0.72);
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --hairline: rgba(255, 255, 255, 0.10);
    --kruw: #3987e5;
    --gingerwallet: #d95926;
    --opencoordinator: #199e70;
    --other: #898781;
    --fresh: #ece9df;
    --live: #0ca30c;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--plane);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    overflow: hidden;
}

#sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: manipulation;
}

.panel {
    background: var(--surface-glass);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- Header: title + filters, one row above the content --- */
.top {
    position: fixed;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    pointer-events: none;
}

.top > * { pointer-events: auto; }

.brand { max-width: 560px; padding: 14px 18px; }

.back {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
}

.back:hover { color: var(--text-primary); }

h1 {
    margin: 4px 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lede {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.key-fresh, .key-remix {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 3px 1px 1px;
    vertical-align: middle;
}

.key-fresh { background: var(--fresh); box-shadow: 0 0 8px var(--fresh); }
.key-remix { background: linear-gradient(90deg, var(--kruw), var(--opencoordinator)); }

.controls {
    display: flex;
    gap: 8px;
    padding: 8px;
    align-items: center;
}

.segmented { display: flex; gap: 2px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 3px; }

.controls button, .segmented button {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
}

.controls button:hover, .segmented button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.controls button[aria-pressed="true"], .segmented button[aria-pressed="true"] { color: var(--plane); background: var(--text-primary); }
button:focus-visible, a:focus-visible, .track:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* --- Totals --- */
.stats {
    position: fixed;
    right: 16px;
    top: 76px;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
    width: 300px;
}

.stat { padding: 10px 14px; }
.stat-label { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.stat-value { font-size: 1.15rem; font-weight: 700; margin-top: 2px; }
.stat-sub { color: var(--text-muted); font-size: 0.72rem; margin-top: 1px; }

/* --- Legend (doubles as keyboard access to the stars) --- */
.legend {
    position: fixed;
    left: 16px;
    bottom: 104px;
    width: 250px;
    padding: 8px;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}

.legend h2, .ticker h2 {
    margin: 4px 8px 6px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legend ul, .ticker ul { list-style: none; margin: 0; padding: 0; }

.legend button {
    width: 100%;
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
    align-items: center;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 7px 8px;
    cursor: pointer;
}

.legend button:hover, .legend button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.07); }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend .name { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend .name small { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 400; }
.legend .value { font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.legend .offline .name { color: var(--text-muted); }

/* --- Ticker of the coinjoins as they appear --- */
.ticker {
    position: fixed;
    right: 16px;
    bottom: 104px;
    width: 300px;
    padding: 8px;
}

.ticker li a {
    display: grid;
    grid-template-columns: 3px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    animation: arrive 0.5s ease-out;
}

.ticker li a:hover { background: rgba(255, 255, 255, 0.07); }
.ticker .bar { width: 3px; height: 28px; border-radius: 2px; }
.ticker .what { font-size: 0.8rem; font-weight: 500; }
.ticker .what small { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 400; }
.ticker .amount { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker .empty { color: var(--text-muted); font-size: 0.78rem; padding: 6px 8px; }

@keyframes arrive {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* --- Timeline --- */
.timeline {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
}

#playButton {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

#playButton:hover { background: rgba(255, 255, 255, 0.12); }

.track { position: relative; height: 38px; cursor: pointer; }
#histogram { position: absolute; inset: 0; width: 100%; height: 100%; }

.clock { min-width: 190px; text-align: right; }
.clock time { display: block; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.clock span { color: var(--text-muted); font-size: 0.72rem; }

/* Grey while replaying (click to jump to the present), green and pulsing when live. */
.live-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 8px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.live-button::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.live-button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.12); }
.is-live .live-button { color: var(--text-primary); background: rgba(12, 163, 12, 0.14); border-color: rgba(12, 163, 12, 0.45); cursor: default; }
.is-live .live-button::before { background: var(--live); box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.6); animation: live 1.6s infinite; }

@keyframes live {
    0% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.6); }
    100% { box-shadow: 0 0 0 10px rgba(12, 163, 12, 0); }
}

/* --- Tooltip --- */
#tooltip {
    position: fixed;
    z-index: 40;
    min-width: 210px;
    padding: 12px 14px;
    pointer-events: none;
    font-size: 0.8rem;
    background: rgba(26, 26, 25, 0.94);
}

#tooltip .tt-value { font-size: 1.1rem; font-weight: 700; }
#tooltip .tt-title { color: var(--text-secondary); margin-bottom: 8px; }
#tooltip .tt-title i { display: inline-block; width: 12px; height: 2px; margin: 0 6px 3px 0; vertical-align: middle; }
#tooltip dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; }
#tooltip dt { color: var(--text-muted); }
#tooltip dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Table view --- */
.table-view {
    position: fixed;
    inset: 76px 16px 104px 16px;
    z-index: 15;
    overflow: auto;
    padding: 18px 20px;
    background: rgba(26, 26, 25, 0.96);
}

.table-view h2 { font-size: 0.95rem; margin: 6px 0 10px; }
.table-view table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 0.82rem; }
.table-view th { color: var(--text-muted); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.table-view td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.table-view .num { text-align: right; font-variant-numeric: tabular-nums; }

.note {
    position: fixed;
    z-index: 30;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 18px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.coverage { color: var(--text-muted); font-size: 0.72rem; }

.is-loading #sky { opacity: 0.45; transition: opacity 0.3s; }

/* --- Inside a coordinator: the map's panels fade out (they keep their
   size so the stars do not move), the coordinator view fades in. --- */
.top, .stats, .legend, .ticker, .timeline { transition: opacity 0.35s ease, visibility 0.35s; }

.view-coordinator .top,
.view-coordinator .stats,
.view-coordinator .legend,
.view-coordinator .ticker,
.view-coordinator .timeline {
    opacity: 0;
    visibility: hidden;
}

.coord-view {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.coord-view.is-open { opacity: 1; }

.coord-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.pill-button {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-glass);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pill-button:hover { color: var(--text-primary); background: rgba(48, 48, 46, 0.9); }

.coord-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.coord-title h2 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coord-status { color: var(--text-secondary); font-size: 0.8rem; }
.coord-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 14px currentColor; }
.coord-dot.small { width: 10px; height: 10px; box-shadow: none; }
.coord-head .segmented { background: var(--surface-glass); border: 1px solid var(--hairline); }

.coord-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.coord-stats .stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.coord-main {
    flex: 1;
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 12px;
}

.treemap-panel { display: flex; flex-direction: column; padding: 12px; min-width: 0; }

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 2px 10px;
}

.panel-head h3 { margin: 0; font-size: 0.9rem; font-weight: 600; }
.panel-head h3 small { color: var(--text-muted); font-size: 0.78rem; font-weight: 400; margin-left: 6px; }

.ramp { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.72rem; }
.ramp span { margin-right: 4px; }
.ramp i { font-style: normal; font-variant-numeric: tabular-nums; }
.ramp-bar { width: 96px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #184f95, #2a78d6, #5598e7, #86b6ef, #cde2fb); }
.ramp-unknown { width: 8px; height: 8px; border-radius: 2px; margin-left: 10px; background: #383835; }

.treemap-wrap { position: relative; flex: 1; min-height: 0; }
#treemap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }

.largest { display: flex; flex-direction: column; min-height: 0; padding: 8px; }

.largest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 4px 6px 8px; }

.largest h3 {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.largest ol { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; }

.largest li button {
    width: 100%;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 7px 12px 7px 4px;
    cursor: pointer;
}

.largest li button:hover, .largest li button[aria-current="true"] { background: rgba(255, 255, 255, 0.08); }
.largest .rank { color: var(--text-muted); font-size: 0.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.largest .what { font-size: 0.8rem; font-weight: 500; min-width: 0; }
.largest .what small { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 400; }
.largest .amount { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.largest .empty { color: var(--text-muted); font-size: 0.8rem; padding: 8px; }

/* --- Filters: folded behind a button, one row above what they scope --- */
.filters-toggle { display: inline-flex; align-items: center; gap: 8px; }
.filters-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.filters-toggle[aria-expanded="true"] { color: var(--text-primary); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.toggle-short { display: none; }

.filters-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--text-primary);
    color: var(--plane);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.filters:not([hidden]) { animation: filters-in 0.25s ease-out; }

@keyframes filters-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    padding: 12px 14px 10px;
}

/* A hairline between the filters, so each one reads on its own. */
.filters > .brush-box { border-left: 1px solid var(--hairline); padding-left: 24px; }

.search-box { min-width: 0; }
.search-field { position: relative; display: flex; align-items: center; }

.search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    pointer-events: none;
    transition: stroke 0.2s;
}

#coordSearch {
    width: 100%;
    height: 40px;
    padding: 0 38px 0 36px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

#coordSearch::placeholder { color: var(--text-muted); }
#coordSearch::-webkit-search-cancel-button { display: none; }
#coordSearch:focus { border-color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07); }
.search-field:focus-within .search-icon { stroke: var(--text-primary); }

.search-clear {
    position: absolute;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.search-clear:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }

.search-state { margin: 7px 2px 0; color: var(--text-muted); font-size: 0.74rem; line-height: 1.45; }
.search-state.is-found { color: var(--text-secondary); }

.search-state.is-busy::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border: 1.5px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.brush-box { min-width: 0; }
.brush-head { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 4px; }

.brush-title {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.brush-range {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.brush-clear {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.brush-clear:hover { background: rgba(255, 255, 255, 0.16); color: var(--text-primary); }

.brush { position: relative; height: 46px; border-radius: 8px; cursor: crosshair; touch-action: pan-y; outline: none; }
.brush:focus-visible { box-shadow: 0 0 0 2px var(--text-primary); }
.brush-svg { display: block; overflow: visible; }
.brush-base { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.brush-selection { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.34); stroke-width: 1; }
.brush-grip { fill: #ffffff; }

.brush-axis {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.segmented.small { padding: 2px; border-radius: 8px; }
.segmented.small button { padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; }

.filter-summary { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--text-secondary); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.link-button {
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-button:hover { text-decoration-color: currentColor; }

/* Tiles the search found */
.tile-rings { position: absolute; inset: 0; pointer-events: none; }

.tile-ring {
    position: absolute;
    border-radius: 6px;
    box-shadow: 0 0 0 2px #ffffff, 0 0 14px 3px rgba(255, 255, 255, 0.4);
    animation: ring 1.8s ease-in-out infinite;
}

@keyframes ring {
    0%, 100% { box-shadow: 0 0 0 2px #ffffff, 0 0 10px 2px rgba(255, 255, 255, 0.28); }
    50% { box-shadow: 0 0 0 2px #ffffff, 0 0 26px 8px rgba(255, 255, 255, 0.55); }
}

/* Search results in the side list */
.largest .rank .chip { width: 10px; height: 10px; }

.largest .list-heading {
    margin: 12px 8px 4px;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.largest .list-card { margin: 2px 4px 8px; padding: 10px; border: 1px solid var(--hairline); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.largest .list-card a { display: block; color: var(--text-primary); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; text-decoration: none; }
.largest .list-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.largest .list-card small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.72rem; }

/* While a period loads, the view holds its frame. */
.is-loading .coord-main, .is-loading .filters { opacity: 0.55; transition: opacity 0.2s; }

/* --- CoinJoin panel, sliding over from the right --- */
.tx-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    width: min(640px, 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #141413;
    border-left: 1px solid var(--hairline);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.tx-panel.is-open { transform: none; }

.tx-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 12px;
    background: #141413;
    border-bottom: 1px solid var(--hairline);
}

.tx-heading { min-width: 0; }
.tx-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--text-secondary); font-size: 0.8rem; }
.tx-kicker #txCoordinator { color: var(--text-primary); font-weight: 600; }
.tx-head h2 { margin: 6px 0 0; font-size: 1rem; font-weight: 500; }
.tx-head code { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.icon-button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.icon-button:hover { background: rgba(255, 255, 255, 0.12); }

.tx-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 0; }

.tx-links button, .tx-links a {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 6px 10px;
    text-decoration: none;
    cursor: pointer;
}

.tx-links button:hover, .tx-links a:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.12); }

.tx-body { padding: 14px 20px 28px; transition: opacity 0.2s; }
.tx-body.is-loading { opacity: 0.5; }

.tx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.tx-tile {
    min-width: 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: 10px;
}

.tx-tile.wide { grid-column: 1 / -1; }
.tx-tile .label { color: var(--text-muted); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tx-tile .value { margin-top: 2px; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tx-tile.wide .value { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 400; color: var(--text-secondary); }
.tx-tile .sub { color: var(--text-muted); font-size: 0.72rem; margin-top: 1px; }

.tx-section { margin-top: 24px; }

.tx-section h3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px 12px;
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tx-section h3 .sum {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.tx-section h3 + .tx-message { margin-top: -4px; font-size: 0.75rem; line-height: 1.45; }

.flow-wrap { position: relative; height: 360px; }
#flow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--text-secondary); font-size: 0.75rem; }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }

.chip { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }

.rows { list-style: none; margin: 0; padding: 0; }

.rows li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.82rem;
}

.rows li > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rows .num { text-align: right; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows .strong { color: var(--text-primary); font-weight: 600; }
.rows .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; }

.denominations li { grid-template-columns: auto minmax(60px, 1fr) auto; }
.bar-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.bar-track .bar { display: block; height: 100%; border-radius: 4px; }

.link-rows li { display: block; padding: 0; }

.link-rows button, .link-rows a {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 6px;
    text-align: left;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}

.link-rows button:hover, .link-rows a:hover { background: rgba(255, 255, 255, 0.06); }
.coin-rows .amount { font-size: 0.82rem; color: var(--text-primary); }
.link-rows .what { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.link-rows .what small { flex-basis: 100%; padding-left: 18px; color: var(--text-muted); font-size: 0.72rem; }

/* Remix neighbours: the row opens that coinjoin, the arrow unfolds its coins. */
.neighbour { display: flex; align-items: stretch; gap: 2px; }
.link-rows .neighbour-open { flex: 1; min-width: 0; }

.link-rows .coins-toggle {
    flex: 0 0 auto;
    width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text-muted);
}

.link-rows .coins-toggle:hover { color: var(--text-primary); }
.coins-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.coins-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.coins-box {
    margin: 2px 0 12px 18px;
    padding: 10px 12px 12px;
    border-left: 2px solid var(--hairline);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.02);
}

.coins-box .tx-message { margin: 0; }
.coin-map-label { color: var(--text-muted); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.coin-map { display: block; width: 100%; height: 64px; margin: 4px 0; }
.coin-map .axis { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.coin-map path { fill: none; stroke-width: 1.2; stroke-opacity: 0.55; transition: stroke-opacity 0.15s; }
.coin-map.is-focused path { stroke-opacity: 0.1; }
.coin-map.is-focused path.is-lit { stroke-opacity: 1; stroke-width: 2; }

.link-rows .coin-links { list-style: none; margin: 10px 0 0; padding: 0; }

.rows .coin-links li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 56px;
    gap: 10px;
    align-items: baseline;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 0.78rem;
}

.rows .coin-links li > span:first-child { display: block; }
.rows .coin-links li:hover { background: rgba(255, 255, 255, 0.05); }
.rows .coin-links li.head { color: var(--text-muted); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom-color: var(--hairline); }
.rows .coin-links li.head:hover { background: transparent; }
.coin-links .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.coin-links .detail { color: var(--text-muted); font-size: 0.72rem; text-align: right; white-space: nowrap; }
.coin-links li > span:last-child { text-align: right; }

.link-rows .coins-copy {
    width: auto;
    display: inline-block;
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px solid var(--hairline);
}

.tx-message { margin: 6px 0; color: var(--text-muted); font-size: 0.82rem; }

.more-button {
    margin-top: 8px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.more-button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.tx-footnote { margin: 26px 0 0; color: var(--text-muted); font-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
    .coord-view, .tx-panel, .top, .stats, .legend, .ticker, .timeline { transition: none; }
    .tile-ring, .search-state.is-busy::before, .filters:not([hidden]) { animation: none; }
}

@media (max-width: 1100px) {
    .ticker { display: none; }
    .coord-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .coord-main { grid-template-columns: minmax(0, 1fr) 280px; }
    .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; }
    .search-box { grid-column: 1 / -1; }
    .search-box + .brush-box { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
    .top { flex-direction: column; gap: 8px; top: 8px; left: 8px; right: 8px; }
    .brand { padding: 10px 12px; max-width: none; width: 100%; }
    h1 { font-size: 1.1rem; }
    .lede { display: none; }
    .controls { width: 100%; justify-content: space-between; }
    .stats { left: 8px; right: 8px; top: auto; bottom: 150px; width: auto; grid-template-columns: repeat(4, minmax(110px, 1fr)); overflow-x: auto; }
    .stat { padding: 8px 10px; }
    .stat-value { font-size: 0.95rem; }
    .legend { left: 8px; right: 8px; width: auto; bottom: 84px; max-height: none; padding: 4px; }
    .legend h2 { display: none; }
    .legend ul { display: flex; gap: 2px; overflow-x: auto; }
    .legend li { flex: 0 0 auto; }
    .legend .name { overflow: visible; }
    .legend button { grid-template-columns: 10px auto; padding: 6px 8px; }
    .legend .value, .legend .name small { display: none; }
    .timeline { left: 8px; right: 8px; bottom: 8px; gap: 10px; padding: 8px 10px; }
    .clock { min-width: 0; }
    .clock span { display: none; }
    .clock time { font-size: 0.78rem; }
    .table-view { inset: 120px 8px 84px 8px; }
    .live-button { margin-left: 6px; padding: 2px 8px 2px 6px; }
    .coord-view { padding: 10px 8px 16px; gap: 10px; }
    .coord-head { gap: 10px; }
    .coord-head .pill-button { order: 1; }
    .coord-head .segmented { order: 2; margin-left: auto; }
    .coord-title { order: 3; flex: 1 1 60%; }
    .coord-head .filters-toggle { order: 4; }
    .coord-title h2 { font-size: 1.3rem; }
    .toggle-long { display: none; }
    .toggle-short { display: inline; }
    .coord-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coord-main { display: flex; flex-direction: column; flex: none; min-height: 0; }
    .treemap-panel { height: 62vh; min-height: 320px; }
    .filters { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px; }
    .filters > .brush-box, .search-box + .brush-box { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 12px; }
    .largest.has-results { order: -1; }
    .largest ol { max-height: none; }
    .tx-head { padding: 14px 14px 10px; }
    .tx-links { padding: 10px 14px 0; }
    .tx-body { padding: 12px 14px 24px; }
    .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-wrap { height: 300px; }
    .coins-box { margin-left: 6px; padding: 8px; }
    .rows .coin-links li { grid-template-columns: 44px minmax(0, 1fr) 48px; gap: 8px; }
    .coin-links .detail { display: none; }
}