/* Blacklist Watcher site styles.
   Layered on top of the vendored Bootstrap: this file only defines what
   Bootstrap does not, plus the chain/event colour vocabulary the templates
   reference by class name. It is served under a URL carrying a hash of these
   bytes, so editing it is all that is needed for the change to reach people:
   the cache key follows the content by itself. */

:root {
    --bw-shell: 1400px;
    --bw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --bw-surface: #fff;
    --bw-line: rgba(0, 0, 0, .09);
    --bw-line-strong: rgba(0, 0, 0, .16);
    --bw-muted: #5c636a;
    --bw-hover: rgba(13, 110, 253, .05);
    --bw-accent: #0d6efd;
}

[data-bs-theme="dark"] {
    --bw-surface: #16181c;
    --bw-line: rgba(255, 255, 255, .11);
    --bw-line-strong: rgba(255, 255, 255, .2);
    --bw-muted: #9aa3ad;
    --bw-hover: rgba(110, 168, 254, .07);
    --bw-accent: #6ea8fe;
}

body {
    font-size: .95rem;
    -webkit-font-smoothing: antialiased;
}

.bw-shell {
    max-width: var(--bw-shell);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Focus rings: Bootstrap styles its own controls, but plain links and the
   table's anchors were left with only the browser default, which disappears
   entirely against the dark theme. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--bw-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- header / footer ---------- */

.bw-header {
    border-bottom: 1px solid var(--bw-line);
    background: var(--bw-surface);
}

.bw-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.bw-brand:hover {
    color: var(--bw-accent);
}

.bw-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, #dc3545, #6f1d24);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

.bw-search {
    max-width: 22rem;
    flex: 1 1 14rem;
}

.bw-search .form-control {
    font-family: var(--bw-mono);
    font-size: .8rem;
}

.bw-footer {
    border-top: 1px solid var(--bw-line);
    margin-top: 2rem;
    padding: 1.25rem 0 2rem;
    color: var(--bw-muted);
    font-size: .85rem;
}

.bw-footer a {
    color: inherit;
}

.bw-donate code {
    font-family: var(--bw-mono);
    font-size: .8rem;
    color: inherit;
    background: transparent;
    padding: 0;
    word-break: break-all;
}

.bw-donate-addr {
    display: inline-flex;
    align-items: baseline;
    gap: .1rem;
    padding: .1rem .4rem;
    border: 1px solid var(--bw-line-strong);
    border-radius: 6px;
    max-width: 100%;
}

.bw-crumbs {
    font-size: .85rem;
    color: var(--bw-muted);
}

.bw-crumbs a {
    color: inherit;
    text-decoration: none;
}

.bw-crumbs a:hover {
    text-decoration: underline;
}

h1.bw-title {
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem);
    font-weight: 650;
    letter-spacing: -.02em;
    margin: 0;
}

/* ---------- chain icons ---------- */

.chain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.chain-eth { background: #627eea; }
.chain-arb { background: #28a0f0; }
.chain-base { background: #0052ff; }
.chain-op { background: #ff0420; }
.chain-avax { background: #e84142; }
.chain-poly { background: #8247e5; }
.chain-zksync { background: #7d3cff; }
.chain-linea { background: #121212; box-shadow: inset 0 0 0 1px var(--bw-line-strong); }
.chain-celo { background: #fcff52; color: #000; }
.chain-uni { background: #f50db4; }
.chain-sonic { background: #fe9a4d; color: #000; }
.chain-codex { background: #1652f0; }
.chain-hyperevm { background: #97fce4; color: #000; }
.chain-ink { background: #4b2ec9; }
.chain-plasma { background: #00c48c; }
.chain-morph { background: #0aa5a5; }
.chain-world { background: #3c3c3c; }
.chain-cronos { background: #002d74; }
.chain-tron { background: #c2171f; }

/* ---------- chain filter ---------- */

.chain-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.chain-filters .chain-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border: 1px solid var(--bw-line-strong);
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    background: var(--bw-surface);
}

.chain-filters .chain-pill:hover {
    border-color: var(--bw-accent);
}

/* The active chain is tinted with its own brand colour, set inline from the
   registry, so the filter row reads as "you are on Base" and not merely as
   "some button is pressed". */
.chain-filters .chain-pill.active {
    border-color: var(--bw-chain, var(--bw-accent));
    box-shadow: inset 0 0 0 1px var(--bw-chain, var(--bw-accent));
    background: color-mix(in srgb, var(--bw-chain, var(--bw-accent)) 12%, transparent);
    font-weight: 600;
}

.chain-filters .chain-pill.all.active {
    background: color-mix(in srgb, var(--bw-accent) 12%, transparent);
}

/* Below the md breakpoint the 20 pills stacked into five rows and pushed the
   table off the screen; one scrolling row keeps the events above the fold. */
@media (max-width: 767.98px) {
    .chain-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: .35rem;
        -webkit-overflow-scrolling: touch;
    }

    .chain-filters .chain-label {
        display: none;
    }

    .chain-filters .chain-pill.all .chain-label {
        display: inline;
    }
}

/* ---------- badges ---------- */

.ev-badge,
.tok-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .45rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.ev-add { background: rgba(220, 53, 69, .13); color: #b02a37; box-shadow: inset 0 0 0 1px rgba(220, 53, 69, .25); }
.ev-remove { background: rgba(25, 135, 84, .13); color: #146c43; box-shadow: inset 0 0 0 1px rgba(25, 135, 84, .25); }
.ev-destroy { background: rgba(255, 145, 0, .15); color: #a35200; box-shadow: inset 0 0 0 1px rgba(255, 145, 0, .3); }
.ev-submit { background: rgba(108, 117, 125, .14); color: #495057; box-shadow: inset 0 0 0 1px rgba(108, 117, 125, .25); }

[data-bs-theme="dark"] .ev-add { color: #ff8b96; }
[data-bs-theme="dark"] .ev-remove { color: #6ee7a8; }
[data-bs-theme="dark"] .ev-destroy { color: #ffb257; }
[data-bs-theme="dark"] .ev-submit { color: #adb5bd; }

.tok-badge {
    font-family: var(--bw-mono);
    font-weight: 600;
    letter-spacing: -.02em;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--bw-line-strong);
    color: var(--bw-muted);
}

.tok-usdt { color: #009393; box-shadow: inset 0 0 0 1px rgba(0, 147, 147, .4); }
.tok-usdc { color: #2775ca; box-shadow: inset 0 0 0 1px rgba(39, 117, 202, .4); }

[data-bs-theme="dark"] .tok-usdt { color: #37d9d9; }
[data-bs-theme="dark"] .tok-usdc { color: #6ea8fe; }

.age-badge {
    margin-left: .4rem;
    padding: .05rem .35rem;
    border-radius: 5px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

.age-new { background: #dc3545; color: #fff; }
.age-recent { background: rgba(255, 193, 7, .25); color: #7a5b00; box-shadow: inset 0 0 0 1px rgba(255, 193, 7, .5); }

[data-bs-theme="dark"] .age-recent { color: #ffd867; }

/* ---------- event table ---------- */

.event-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    /* Fixed layout, so the columns are what this stylesheet says rather than
       what the longest cell asks for. The address is the reason: it is folded
       to fit by site.js, and under automatic layout that fold would narrow
       its own column, which would fold it further. */
    table-layout: fixed;
}

/* Sized to the widest thing each column ever holds - "31 Aug 2026 00:00" with
   a badge, "Funds destroyed", "USDT-MS" - leaving the rest to the address,
   which is the only column that can use more room than it needs. */
.event-table .col-date { width: 15rem; }
.event-table .col-chain { width: 8.5rem; }
.event-table .col-token { width: 5.5rem; }
.event-table .col-event { width: 9.5rem; }
.event-table .col-tx { width: 7rem; }

/* The chain's name is hidden below this width, so the column only has to
   hold the icon. */
@media (max-width: 1199.98px) {
    .event-table .col-chain {
        width: 3.75rem;
    }
}

.event-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bw-surface);
    border-bottom: 1px solid var(--bw-line-strong);
    padding: .55rem .6rem;
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bw-muted);
    white-space: nowrap;
}

.event-table td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--bw-line);
    vertical-align: middle;
}

.event-table tbody tr:hover td {
    background: var(--bw-hover);
}

.event-table .col-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.event-table .col-chain {
    white-space: nowrap;
}

.chain-cell {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.chain-cell .chain-name {
    font-size: .8rem;
    color: var(--bw-muted);
}

@media (max-width: 1199.98px) {
    .chain-cell .chain-name {
        display: none;
    }
}

/* Hex is unreadable in a proportional face, and a full 42-character address
   is the widest thing on the page. The whole value stays in the DOM - for
   copy, search and crawlers - and site.js decides how much of the middle to
   fold away for the width the column actually got. */
.addr {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-family: var(--bw-mono);
    font-size: .8rem;
    vertical-align: bottom;
}

/* The head is cut by the script on an exact character boundary, so the clip
   here only has to catch the moment between a resize and the next frame -
   and it must be a clip rather than an ellipsis, whose leftover slack is what
   put a gap in front of the tail. */
.addr-head {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    min-width: 0;
}

.addr-tail {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Only a folded address gets the ellipsis: one shown in full has nothing
   missing from its middle. */
.addr.is-clipped .addr-tail::before {
    content: "…";
}

/* 200 underlined hex strings per page is a lot of texture; the monospace face
   and the colour already read as links. */
.addr,
.tx-link {
    text-decoration: none;
}

.addr:hover,
.tx-link:hover {
    text-decoration: underline;
}

/* The chains an address appears on, as icons rather than a paragraph of
   nineteen names. */
.chain-set {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

.date-val,
.addr-val {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

/* The address asks for enough room to show all 42 characters and gives way
   from there when the window cannot spare it. The width is stated rather
   than left to the text, which is what keeps the script and the table from
   chasing each other: were the column sized by its content, folding an
   address would narrow the column, which would fold it further. It sits on
   this wrapper rather than the cell because a width on a table cell is
   treated as a floor - the column would refuse to shrink and push the page
   into a sideways scroll. */
.addr-val {
    width: 100%;
}

.date-val {
    gap: .1rem;
}

.tz {
    margin-left: .3em;
    font-size: .8em;
    color: var(--bw-muted);
    letter-spacing: .02em;
}

.tx-link {
    font-family: var(--bw-mono);
    font-size: .8rem;
    white-space: nowrap;
}

.tx-link::after {
    content: "↗";
    margin-left: .2rem;
    font-size: .75em;
    opacity: .55;
}

.copy-btn {
    border: 0;
    background: none;
    padding: 0 .25rem;
    color: var(--bw-muted);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}

.copy-btn:hover {
    opacity: 1;
    color: var(--bw-accent);
}

.copy-btn.copied {
    color: #198754;
    opacity: 1;
}

/* The six columns need about 800px to lay out without the page scrolling
   sideways - which is what it used to do, showing nothing but the date. Below
   that each row becomes a card instead, labelled from the header it no longer
   has. */
@media (max-width: 899.98px) {
    .event-table,
    .event-table tbody,
    .event-table tr,
    .event-table td {
        display: block;
    }

    .event-table thead {
        display: none;
    }

    .event-table tbody tr {
        border: 1px solid var(--bw-line);
        border-radius: 10px;
        padding: .35rem .15rem;
        margin-bottom: .5rem;
        background: var(--bw-surface);
    }

    .event-table tbody tr:hover td {
        background: transparent;
    }

    .event-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        border: 0;
        padding: .2rem .6rem;
        min-width: 0;
    }

    .event-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .7rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--bw-muted);
    }

    .event-table .col-date {
        border-bottom: 1px solid var(--bw-line);
        padding-bottom: .35rem;
        margin-bottom: .2rem;
    }

    .chain-cell .chain-name {
        display: inline;
    }

    .addr-val {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-end;
    }
}

/* ---------- address summary ---------- */

.bw-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem 1.5rem;
    border: 1px solid var(--bw-line);
    border-radius: 12px;
    padding: .9rem 1rem;
    background: var(--bw-surface);
}

.bw-summary dt {
    font-size: .7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bw-muted);
    margin-bottom: .15rem;
}

.bw-summary dd {
    margin: 0;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

/* The event count is the one figure worth reading from across the room, and
   the chain icons beside it leave the cell tall enough to carry it. */
.bw-summary .bw-figure {
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.bw-lede {
    color: var(--bw-muted);
    max-width: 70ch;
    /* The sentence opens with a 42-character address, which is one unbreakable
       word on a narrow phone. */
    overflow-wrap: anywhere;
}

.bw-addr-head {
    font-family: var(--bw-mono);
    font-size: clamp(.85rem, .6rem + 1.1vw, 1.15rem);
    word-break: break-all;
    letter-spacing: -.02em;
}

/* ---------- pagination ---------- */

.bw-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .85rem;
}

.bw-pager .page-state {
    color: var(--bw-muted);
    padding: 0 .5rem;
    font-variant-numeric: tabular-nums;
}