/*
 * The transaction page (tx.js): /tx/<txid> shows one pane, a header, a
 * banner (pending, gone, being indexed) and cards (the sat page's
 * .sat-card, sat.css): what happened, the rare-sat flow, the inputs and
 * outputs; the details in a side column on a wide screen. Built on
 * app.css's tokens, light, dark and auto; on a phone every table is a stack
 * of labelled cards, so the page never scrolls sideways.
 */

/* The transaction pane alone, whatever the width (as the UTXO pane). */
.panes.is-tx {
    display: flex;
}

.panes.is-tx > .pane:not(.pane--tx),
.panes:not(.is-tx) > .pane--tx {
    display: none;
}

.pane--tx {
    overflow-y: auto;
    overscroll-behavior: contain;
}

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

.tx-head {
    display: grid;
    gap: 6px;
    align-items: start;
    padding: 12px 20px 14px;
    border-bottom: 1px solid var(--grid);
}

.tx-title-line {
    flex-wrap: nowrap;
}

.pane--tx .tx-txid {
    min-width: 0;
    font-size: 16px;
    font-weight: 650;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.tx-lede {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    color: var(--ink-2);
    font-size: 13px;
}

.tx-lede .sep {
    color: var(--muted);
}

.tx-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tx-ext-line {
    margin: 0;
    font-size: 12px;
}

.tx-ext {
    color: var(--ink-2);
}

.tx-banner {
    margin: 14px 20px 0;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.tx-banner--gone {
    border-color: color-mix(in srgb, var(--critical) 50%, transparent);
    background: color-mix(in srgb, var(--critical) 10%, var(--surface));
}

.tx-banner[hidden] {
    display: none;
}

/* ------------------------------------------------------------- body */

.tx-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    align-items: start;
    gap: 16px;
    padding: 16px 20px 24px;
}

.tx-main,
.tx-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.tx-side {
    position: sticky;
    top: 0;
}

.tx-subhead {
    margin: 14px 0 8px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 650;
}

.tx-card > .sat-card-head + .tx-subhead,
.tx-card > .sat-card-head + .sat-note + .tx-subhead {
    margin-top: 4px;
}

.tx-raresats strong {
    color: var(--ink);
}

.tx-sales {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tx-sale {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--grid);
    border-radius: var(--radius);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.tx-sale-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
}

.tx-sale .sale-parties {
    flex-wrap: wrap;
}

.tx-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 8px 0 0;
    font-size: 12.5px;
}

.tx-howto {
    margin-top: 10px;
    font-size: 12px;
}

/* ------------------------------------------------------------- the flow */

.tx-flow .sat-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
}

.tx-flow td.left .sat-cell {
    justify-content: flex-start;
}

.tx-flow tr.is-fee td {
    background: color-mix(in srgb, var(--warning) 6%, var(--surface));
}

.tx-arrow {
    color: var(--muted);
}

.tx-index {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

a.tx-index {
    text-decoration: none;
}

a.tx-index:hover,
a.tx-index:focus-visible {
    text-decoration: underline;
}

.tx-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--chip);
    color: var(--ink-2);
    font-size: 11.5px;
    white-space: nowrap;
}

.tx-flag--good {
    border-color: color-mix(in srgb, var(--good) 40%, transparent);
    background: color-mix(in srgb, var(--good) 10%, var(--surface));
}

.tx-flag--bad {
    border-color: color-mix(in srgb, var(--critical) 50%, transparent);
    background: color-mix(in srgb, var(--critical) 10%, var(--surface));
}

/* ------------------------------------------------------------- inputs, outputs */

.tx-io-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.tx-io-col {
    min-width: 0;
}

.tx-io-col > .tx-subhead {
    margin-top: 0;
}

.tx-io-arrow {
    padding-top: 28px;
    color: var(--muted);
    font-size: 18px;
}

.tx-io-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tx-io {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--grid);
    border-radius: var(--radius);
    font-size: 12.5px;
}

.tx-io.is-tracked {
    border-color: color-mix(in srgb, var(--good) 45%, var(--grid));
    background: color-mix(in srgb, var(--good) 5%, var(--surface));
}

.tx-io.is-marked {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.tx-io-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
}

.tx-io-who {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tx-io-value {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tx-io-sub {
    color: var(--ink-2);
    font-size: 12px;
}

.tx-io-sats {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.tx-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tx-utxo {
    font-size: 12px;
}

.tx-id-small {
    margin-right: 4px;
}

@media (max-width: 1099.98px) {
    .tx-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .tx-side {
        position: static;
    }
}

@media (max-width: 719.98px) {
    .tx-head {
        padding: 10px 12px 12px;
    }

    /* app.css hides a pane's h2 on a phone; this one is the page's subject. */
    .pane--tx .tx-head h2 {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        font-size: 13.5px;
    }

    .tx-banner {
        margin: 10px 10px 0;
    }

    .tx-body {
        gap: 12px;
        padding: 12px 10px 18px;
    }

    .tx-main,
    .tx-side {
        gap: 12px;
    }

    .tx-io-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tx-io-arrow {
        padding: 0;
        text-align: center;
        transform: rotate(90deg);
    }

    /* The flow as a stack of cards: each cell labelled. */
    .tx-flow-x {
        overflow: visible;
    }

    .tx-flow,
    .tx-flow tbody,
    .tx-flow tr,
    .tx-flow td {
        display: block;
        width: 100%;
    }

    .tx-flow thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .tx-flow tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--grid);
    }

    .tx-flow td {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
        padding: 2px 8px;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .tx-flow .sat-cell {
        justify-content: flex-start;
    }

    .tx-flow td::before {
        content: attr(data-label);
        color: var(--ink-2);
        font-size: 11.5px;
    }
}

/* Elsewhere: an outpoint's "tx" link to its transaction page (sat.js). */
.sat-tx {
    font-size: 12px;
}

.tx-only-line {
    margin: -2px 0 10px;
}

.tx-only-note {
    margin: -4px 0 6px;
}

.tx-to,
.tx-from {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
}

/* The flow's badges sit beside the sat on a phone (the Type column hides). */
.tx-sat-badges {
    display: none;
}

@media (max-width: 719.98px) {
    .tx-flow td.tx-cell-type {
        display: none;
    }

    .tx-sat-badges {
        display: inline-flex;
    }
}