/* Quote desk: market scene layout, pitch and quote station frame. */
/* Sequential part 1-194 of the former quote-desk.css; load order in website/includes/header.php must be preserved. */

.market-scene {
    padding-block: 1.375rem 2.25rem;
    overflow: hidden;
}

.market-scene > .viewport-rail { inline-size: min(calc(100% - 1.25rem), 73.875rem); }
.market-layout {
    display: grid;
    inline-size: 100%;
    max-inline-size: 73.875rem;
    gap: 1.5rem;
    margin-inline: auto;
}

.market-pitch { min-inline-size: 0; padding-inline: 0.125rem; }
.market-pitch__copy { position: relative; z-index: 2; }
.market-pitch__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    margin-block-end: 0.8125rem;
    color: var(--sun);
    font-size: 0.9rem;
    font-weight: 750;
}

.market-pitch__tag > span {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: none;
    border-radius: 50%;
    background-color: var(--flare);
    box-shadow: 0 0 0 0.3125rem rgba(var(--flare-rgb), 0.1);
}

.market-pitch__title {
    max-inline-size: 36.875rem;
    margin: 0;
    color: var(--copy-bright);
    font-size: clamp(1.85rem, 9.9vw, 2.75rem);
    font-weight: 760;
    letter-spacing: -0.055em;
    line-height: 1.06;
    text-wrap: balance;
}

.market-pitch__lead {
    max-inline-size: 36.875rem;
    margin: 0.875rem 0 0;
    color: var(--copy-soft);
    font-size: 1.15rem;
    line-height: 1.55;
}

.market-pitch__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    margin: 1.125rem 0 0;
    padding: 0;
    list-style: none;
}

.market-pitch__title.a11y-clip ~ .market-pitch__points { margin-block-start: 0; }
.market-pitch__points li {
    display: inline-flex;
    min-block-size: 1.9375rem;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.5rem;
    color: var(--copy-soft);
    border: 0.0625rem solid var(--edge-soft);
    border-radius: 0.625rem;
    background-color: rgba(18, 20, 25, 0.72);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
}

.market-pitch__points li > span { color: var(--flare); font-weight: 800; }
.market-pitch__art { display: none; }

#desk {
    --station-panel: #181b21;
    --station-field: #101216;
    --station-edge: #2d323b;
    --station-muted: var(--copy-dim);
}

.quote-station {
    inline-size: 100%;
    max-inline-size: 48.75rem;
    margin-inline: auto;
    padding: 0.625rem;
    overflow: visible;
    color: var(--copy-bright);
    color-scheme: dark;
    border: 0.0625rem solid rgba(255, 255, 255, 0.09);
    border-radius: 1.0625rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 34%), rgba(19, 21, 26, 0.96);
    box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, 0.42), inset 0 0.0625rem rgba(255, 255, 255, 0.04);
}

.quote-station__title {
    margin: 0 0 0.875rem;
    color: var(--copy-bright);
    font-size: clamp(1.25rem, 5.4vw, 1.55rem);
    font-weight: 760;
    letter-spacing: -0.025em;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

.quote-form,
.quote-form__body {
    display: grid;
    gap: 0.75rem;
}

.route-matrix {
    display: grid;
    grid-template: auto 2.25rem auto / minmax(0, 1fr);
}

.route-pane {
    display: grid;
    min-inline-size: 0;
    align-content: start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem;
    overflow: visible;
    border: 0.0625rem solid var(--station-edge);
    border-radius: 0.875rem;
    background-color: var(--station-panel);
}

.route-pane--receive { background-color: #1a1d23; }
.route-pane__coin,
.coin-choice { min-inline-size: 0; }
.route-pane__coin { display: grid; gap: 0.4375rem; }
.route-pane__legend,
.quantity-input__label,
.rate-probe__label,
.payout-address__label {
    min-inline-size: 0;
    color: var(--station-muted);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.3;
}

.route-pane__legend {
    display: block;
    float: none;
    inline-size: 100%;
    margin: 0;
    padding: 0;
}

.route-pane__legend--target {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.route-pane__fee {
    display: inline-flex;
    min-block-size: 1.125rem;
    align-items: center;
    gap: 0.3125rem;
    margin-inline-start: auto;
    padding: 0.125rem 0.375rem;
    color: var(--copy-dim);
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.2);
    border-radius: 999rem;
    background-color: rgba(var(--flare-rgb), 0.07);
    font-size: 0.61rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.route-pane__fee strong {
    padding-inline-start: 0.3125rem;
    color: #ffa566;
    border-inline-start: 0.0625rem solid rgba(var(--flare-rgb), 0.24);
    font-size: 0.66rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Market notes: compact cards under the grid ("Guarantee deposits" and "Reputation"). */
.market-note {
    display: grid;
    inline-size: 100%;
    max-inline-size: 48.75rem;
    align-content: start;
    gap: 0.5rem;
    margin-inline: auto;
    padding: 0.8125rem 0.875rem 0.875rem;
    color: var(--copy-bright);
    border: 0.0625rem solid var(--edge-soft);
    border-radius: 1rem;
    background-color: rgba(19, 21, 26, 0.8);
}

.market-note__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.market-note__title {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--copy-bright);
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.market-note__title::before {
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
    flex: none;
    border-radius: 50%;
    content: "";
    background-color: var(--flare);
    box-shadow: 0 0 0 0.25rem rgba(var(--flare-rgb), 0.1);
}

.market-note__total {
    flex: none;
    color: #ffa566;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.market-note__lead {
    margin: 0;
    color: var(--copy-dim);
    font-size: 0.74rem;
    line-height: 1.45;
}

.market-note__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.125rem 0 0;
    padding: 0;
    list-style: none;
}

.market-note__chip {
    display: inline-flex;
    min-block-size: 1.75rem;
    max-inline-size: 100%;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.5rem;
    color: var(--copy-soft);
    border: 0.0625rem solid var(--edge-soft);
    border-radius: 0.625rem;
    background-color: rgba(18, 20, 25, 0.72);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.market-note__chip:hover,
.market-note__chip:focus-visible {
    color: var(--copy-bright);
    border-color: var(--edge-hot);
    background-color: var(--layer-high);
}

.market-note__chip-sum {
    color: #ffa566;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.market-note__chip--mark { padding-inline: 0.5625rem; }
.market-note__mark { display: block; inline-size: 0.8125rem; block-size: 0.8125rem; }
/* Raster fallback for Tor (SVG disabled): mimic the currentColor hover lift. */
.market-note__chip:hover .market-note__mark--raster { filter: brightness(1.2); }

/* Deposit chips: equal-width grid filling the card, name left and amount right. */
.market-note--pledge .market-note__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-note--pledge .market-note__chips > li { display: grid; min-inline-size: 0; }
.market-note--pledge .market-note__chip { inline-size: 100%; justify-content: space-between; }
/* An odd trailing chip stretches across the row so no gap is left on the right. */
.market-note--pledge .market-note__chips > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 45.125rem) {
    .market-note { padding: 0.9375rem 1.125rem 1rem; }
}

@media (min-width: 45.125rem) and (max-width: 63.8125rem) {
    /* Full-width card under the desk: four chips per row. */
    .market-note--pledge .market-note__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .market-note--pledge .market-note__chips > li:last-child:nth-child(odd) { grid-column: auto; }
}

@media (min-width: 63.875rem) {
    /* Two-column grid: deposits under the pitch, reputation under the desk. */
    .market-layout > .market-note { max-inline-size: none; }
    .market-layout > .market-note--pledge { grid-column: 1; grid-row: 2; }
    .market-layout > .market-note--repute { grid-column: 2; grid-row: 2; }
}