/**
 * swap.css — "Swap Legacy Coins Before Quantum End Game"
 * Builds on quantum-fusion.css variables. Dark, urgent, high-stakes.
 */

.swap-body {
    position: relative;
    overflow-x: hidden;
}

/* ===================================================================
   FALLING RUNE FIELD (background layer)

   Replaced the flashing quote field, which put full sentences at up to
   1.7rem fixed in the CENTRE of the viewport and pulsed them in and out
   behind the form. Legible text at the point of gaze, restated every few
   seconds, reads as new information to peripheral vision and pulls the
   eye off the page — the definition of a background that strains.

   The canvas carries no styling of its own beyond position: everything
   visible is painted in js/rune-field.js, which also handles density,
   reduced-motion and the hidden-tab pause.
   =================================================================== */
.rune-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* Never a scroll source, and never a target for assistive tech. */
    user-select: none;
}
/* Belt and braces: if scripting is off the canvas is simply an empty
   transparent box, and if motion is unwanted the script paints one static
   frame rather than looping. Nothing here animates in CSS at all. */
@media (max-width: 767px) {
    .rune-field { display: none; }
}

/* ===================================================================
   LAYOUT
   =================================================================== */
.swap-wrap {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

/* ===================================================================
   HERO + DECAYING "LEGACY COINS"
   =================================================================== */
.swap-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}
.phase-tag {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--quantum-cyan);
    border: 1px solid rgba(0, 204, 255, 0.35);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    margin-bottom: 1.4rem;
    background: rgba(0, 204, 255, 0.05);
    animation: phase-pulse 2.6s ease-in-out infinite;
}
@keyframes phase-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 204, 255, 0); }
    50%      { box-shadow: 0 0 22px rgba(0, 204, 255, 0.35); }
}
.swap-headline {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0 auto;
    max-width: 14ch;
    text-shadow: 0 0 30px rgba(255, 0, 51, 0.18);
}
.endgame {
    background: linear-gradient(90deg, var(--quantum-crimson), var(--quantum-purple), var(--quantum-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: quantum-text-shift 8s linear infinite;
}

/* The decaying legacy-coins link */
.legacy-decay {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #b9b9c8;
    cursor: pointer;
    isolation: isolate;
}
.legacy-decay .decay-text {
    display: inline-block;
    background: linear-gradient(180deg, #d7d7e2 0%, #8a8a9c 55%, #4a4a58 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* SVG turbulence displacement = crumbling */
    filter: url(#decay-crumble);
    animation: decay-flicker 7s ease-in-out infinite;
}
.legacy-decay .decay-underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.04em;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--quantum-crimson) 0,
        var(--quantum-crimson) 6px,
        transparent 6px,
        transparent 11px
    );
    /* erodes left-to-right */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.25) 75%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.25) 75%, transparent 100%);
    opacity: 0.85;
    animation: underline-erode 5s ease-in-out infinite;
}
@keyframes decay-flicker {
    0%, 100% { opacity: 1; }
    42%      { opacity: 0.82; }
    55%      { opacity: 0.62; letter-spacing: 0.5px; }
    70%      { opacity: 0.88; }
}
@keyframes underline-erode {
    0%, 100% { transform: scaleX(1);   opacity: 0.85; }
    50%      { transform: scaleX(0.92); opacity: 0.4; }
}
.legacy-decay:hover .decay-text { filter: url(#decay-crumble) brightness(1.25); }
.legacy-decay:hover .decay-underline { opacity: 1; }

.swap-sub {
    max-width: 60ch;
    margin: 1.4rem auto 0;
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: 1.7;
}
.legacy-hint {
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.legacy-hint strong { color: var(--quantum-crimson); }

/* ===================================================================
   COUNTDOWN
   =================================================================== */
.countdown-block {
    text-align: center;
    margin: 0 auto 3rem;
    padding: 1.8rem 1rem;
    border: 1px solid rgba(255, 0, 51, 0.22);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 0, 51, 0.06), rgba(5, 5, 8, 0.4));
    max-width: 760px;
    box-shadow: 0 0 40px rgba(255, 0, 51, 0.08), inset 0 0 60px rgba(0, 0, 0, 0.4);
}
.countdown-label {
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--quantum-crimson);
    margin-bottom: 1.1rem;
}
.countdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.6rem;
}
.cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
}
.cd-num {
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-shadow: 0 0 18px rgba(0, 204, 255, 0.4);
    line-height: 1;
}
.cd-tag {
    margin-top: 0.45rem;
    font-size: 0.66rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cd-sep {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 700;
    color: var(--quantum-crimson);
    line-height: 1;
    margin-top: 0.1rem;
    opacity: 0.7;
}
.countdown-note {
    margin-top: 1.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

/* ===================================================================
   SWAP GRID (card + sidebar)
   =================================================================== */
.swap-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 820px) {
    .swap-grid { grid-template-columns: 1fr; }
}

.swap-card, .limit-card, .alloc-card, .panel-card {
    background: linear-gradient(180deg, rgba(16, 16, 24, 0.92), rgba(8, 8, 12, 0.92));
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.6rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.card-head h2, .limit-card h3, .alloc-card h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: 1px;
}
.price-pill {
    font-size: 0.85rem;
    color: var(--quantum-cyan);
    border: 1px solid rgba(0, 204, 255, 0.3);
    background: rgba(0, 204, 255, 0.06);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 700;
}

.field-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.8rem 0 0.45rem;
}
.field-row, .receive-row {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}
.amount-input, .coin-select, .panel-input {
    background: var(--bg-void, #020204);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    padding: 0.85rem 0.9rem;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.amount-input { flex: 1; }
.coin-select { flex: 0 0 120px; cursor: pointer; }
.amount-input:focus, .coin-select:focus, .panel-input:focus {
    outline: none;
    border-color: var(--quantum-cyan);
    box-shadow: 0 0 16px rgba(0, 204, 255, 0.25);
}
.usd-line {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.convert-arrow {
    text-align: center;
    font-size: 1.5rem;
    color: var(--quantum-crimson);
    margin: 1rem 0 0.2rem;
    opacity: 0.8;
}
.receive-row {
    align-items: baseline;
    background: linear-gradient(90deg, rgba(255, 0, 51, 0.08), rgba(0, 102, 255, 0.06));
    border: 1px solid rgba(255, 0, 51, 0.18);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}
.synx-out {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(0, 204, 255, 0.35);
    word-break: break-all;
}
.synx-tag {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: var(--quantum-cyan);
}
.example-line {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.example-line strong { color: var(--text-primary); }

.bridge-btn {
    width: 100%;
    margin-top: 1.4rem;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--quantum-crimson), var(--quantum-purple) 55%, var(--quantum-blue));
    background-size: 200% 100%;
    box-shadow: 0 0 28px rgba(255, 0, 51, 0.35);
    transition: transform 0.15s, box-shadow 0.25s, background-position 0.4s;
}
.bridge-btn:hover {
    transform: translateY(-2px);
    background-position: 100% 0;
    box-shadow: 0 0 40px rgba(0, 102, 255, 0.45);
}
.bridge-btn:active { transform: translateY(0); }
.finalize-note {
    margin-top: 0.7rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
}

/* ===================================================================
   SIDEBAR: limits + allocation FOMO
   =================================================================== */
.swap-side { display: grid; gap: 1.5rem; }

.limit-meter, .alloc-meter {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin: 0.9rem 0 0.6rem;
}
.limit-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--quantum-cyan), var(--quantum-blue));
    box-shadow: 0 0 12px rgba(0, 204, 255, 0.5);
}
.alloc-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--quantum-crimson), var(--quantum-magenta));
    box-shadow: 0 0 12px rgba(255, 0, 51, 0.5);
    transition: width 0.6s ease;
}
.limit-stats, .alloc-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.limit-stats strong, .alloc-stats .hot { color: var(--quantum-crimson); }
.alloc-stats .hot { font-weight: 700; }
.muted { color: var(--text-muted); }
.limit-note {
    margin-top: 0.8rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.fomo-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.fomo-list li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.4rem 0;
    border-top: 1px solid var(--border-subtle);
    line-height: 1.5;
}
.fomo-list li:first-child { border-top: none; }

/* ===================================================================
   TRUST STRIP
   =================================================================== */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}
@media (max-width: 700px) {
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
}
.trust-item {
    text-align: center;
    padding: 1.1rem 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(8, 8, 12, 0.6);
}
.t-num {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 1px;
}
.t-tag {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* ===================================================================
   FLASH MESSAGES
   =================================================================== */
.swap-flash {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.5;
    border: 1px solid;
}
.flash-ok {
    color: #b6ffe0;
    border-color: rgba(0, 204, 255, 0.4);
    background: rgba(0, 204, 255, 0.08);
}
.flash-err {
    color: #ffc2cf;
    border-color: rgba(255, 0, 51, 0.4);
    background: rgba(255, 0, 51, 0.08);
}

/* ===================================================================
   PANEL (panel.php)
   =================================================================== */
.panel-wrap {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    display: grid;
    gap: 1.5rem;
}
.panel-card h1 { font-size: 1.3rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.panel-h2 {
    font-size: 1rem;
    color: var(--quantum-cyan);
    letter-spacing: 1px;
    margin: 1.6rem 0 0.6rem;
}
.panel-sub { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1.2rem; }
.panel-sub a { color: var(--quantum-cyan); }
.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ref-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
    .panel-grid, .ref-grid { grid-template-columns: 1fr 1fr; }
}
.panel-login { max-width: 460px; margin: 2rem auto; text-align: center; }
.panel-login .bridge-btn { margin-top: 1.2rem; }
.panel-hint {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.panel-hint code, .swap-flash code {
    color: var(--quantum-cyan);
    background: rgba(0, 204, 255, 0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* ===================================================================
   A/B ANALYTICS TABLE (panel.php)
   =================================================================== */
.ab-table { overflow-x: auto; margin-top: 1rem; }
.ab-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.ab-grid th, .ab-grid td {
    padding: 0.7rem 0.8rem;
    text-align: right;
    border-bottom: 1px solid var(--border-subtle);
}
.ab-grid th {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
}
.ab-grid th:first-child, .ab-metric { text-align: left; }
.ab-metric { color: var(--text-secondary); }
.ab-grid td { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ab-win { font-weight: 800; }
.ab-win-a { color: var(--quantum-cyan); }
.ab-win-b { color: var(--quantum-crimson); }

/* VARIANT B — cold briefing tone: the quote-field half of this variant went
   with the quote field itself. Nothing ever set .cold on that element, so no
   behaviour is lost here; the .brief-* rules below are the live half. */

.brief-meta {
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #6a7a92;
    border: 1px solid rgba(120, 140, 170, 0.25);
    border-radius: 4px;
    padding: 0.4rem 1rem;
    margin-bottom: 1.6rem;
}
.cold-hero .swap-headline {
    text-shadow: 0 0 24px rgba(120, 140, 170, 0.12);
}
.brief-body {
    max-width: 64ch;
    margin: 1.6rem auto 0;
    text-align: left;
}
.brief-body p {
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.brief-body em { color: var(--text-primary); font-style: italic; }
.brief-thesis {
    border-left: 2px solid var(--quantum-crimson);
    padding-left: 1rem;
    color: var(--text-primary) !important;
}
.cold-count {
    border-color: rgba(120, 140, 170, 0.22);
    background: linear-gradient(180deg, rgba(60, 80, 110, 0.06), rgba(5, 5, 8, 0.4));
    box-shadow: 0 0 40px rgba(60, 80, 110, 0.06), inset 0 0 60px rgba(0, 0, 0, 0.4);
}
.cold-count .countdown-label { color: #8a9ab2; letter-spacing: 3px; }
.cold-count .cd-num { text-shadow: 0 0 16px rgba(120, 140, 170, 0.3); }
.cold-count .cd-sep { color: #5a6a82; }

.cold-list li {
    color: var(--text-secondary);
    border-top-color: rgba(120, 140, 170, 0.12);
}
.cold-limit .limit-fill {
    background: linear-gradient(90deg, #5a6a82, #8a9ab2);
    box-shadow: 0 0 12px rgba(120, 140, 170, 0.4);
}
.cold-limit .limit-note strong { color: var(--quantum-crimson); }
.variant-b .legacy-decay .decay-text {
    background: linear-gradient(180deg, #c4c4d0 0%, #6f7686 55%, #3a3f4a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===================================================================
   POOL MODAL — "coming soon", and the thing you can use today
   ═══════════════════════════════════════════════════════════════════
   A "not yet" message is a moment of disappointment, so it is built to
   spend that moment well: the refusal is one quiet line, and the weight
   of the panel goes to the DEX that already ships. The screenshot is
   the hero because a claim about a product is worth a fraction of a
   picture of it working.

   Everything is real markup styled here rather than assembled in JS —
   no innerHTML, nothing to inject, and the browser can style it before
   a single line of script runs.
   =================================================================== */
.pool-modal[hidden] { display: none !important; }
.pool-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
}
.pool-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 7, 12, .78);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity .22s ease;
}
.pool-modal.is-open .pool-modal__backdrop { opacity: 1; }

.pool-modal__dialog {
    position: relative;
    /* Sized for the screenshot, which is the whole argument this dialog makes.
       At 720px a 1600x900 capture rendered ~660px wide and the offer table was
       illegible — which is the opposite of the intended reaction. */
    /* Everything above and below the picture, measured. The figure subtracts it
       from the viewport to work out how large the screenshot may be, so trimming
       a margin here literally makes the wallet look bigger. */
    --pm-chrome: 265px;
    /* Capped near the capture's native 1600px: past that the browser is
       upscaling and the text goes soft, which defeats the point. */
    width: min(1440px, 96vw);
    max-height: 94vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, #0a1724 0%, #060e16 62%, #050b12 100%);
    border: 1px solid rgba(78, 205, 196, .26);
    border-radius: 16px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .68), 0 0 0 1px rgba(0, 0, 0, .5),
                0 0 70px -28px rgba(34, 211, 238, .55);
    padding: 1.35rem 1.6rem 1.2rem;
    color: #e8f6f5;
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity .24s ease, transform .24s cubic-bezier(.22, .9, .32, 1);
}
.pool-modal.is-open .pool-modal__dialog { opacity: 1; transform: none; }

/* Thin light running along the top edge — the one moving thing here. */
.pool-modal__beam {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, transparent, #22d3ee 22%, #4ecdc4 50%, #7c5cff 78%, transparent);
    background-size: 220% 100%;
    animation: pool-beam 5.5s linear infinite;
}
@keyframes pool-beam { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.pool-modal__x {
    position: absolute;
    top: .8rem; right: .8rem;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #8aa3ad;
    font-size: .85rem;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
}
.pool-modal__x:hover { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .09); }

.pool-modal__pill {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em;
    color: #ffb36b;
    background: rgba(255, 157, 60, .1);
    border: 1px solid rgba(255, 157, 60, .34);
    border-radius: 100px;
    padding: .3rem .7rem;
}
.pool-modal__pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #ffb36b; box-shadow: 0 0 8px #ffb36b;
}
.pool-modal__title {
    margin: .65rem 0 .35rem;
    font-size: clamp(1.15rem, 2.4vw, 1.42rem);
    line-height: 1.28;
    letter-spacing: -.01em;
    color: #f2fbfa;
}
.pool-modal__lede {
    margin: 0 0 .85rem;
    font-size: .9rem;
    line-height: 1.58;
    color: #9fb6be;
}
.pool-modal__lede strong { color: #cfe8e6; font-weight: 600; }

.pool-modal__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pool-modal__chips li {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .715rem; letter-spacing: .02em;
    color: #b9d5d2;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 6px;
    padding: .28rem .55rem;
    white-space: nowrap;
}
.pool-modal__chips li.is-hot {
    color: #00ff88;
    border-color: rgba(0, 255, 136, .42);
    background: rgba(0, 255, 136, .09);
}

/* The proof, and the reason for every other measurement on this panel. */
.pool-modal__shot {
    margin: 1rem auto 0;
    /* Sized by the VIEWPORT HEIGHT, not left to overflow. Cap the figure at the
       widest 16:9 box that still fits once the surrounding chrome is paid for,
       and the picture grows to fill whatever screen it lands on without ever
       forcing the dialog to scroll. On a tall display the 1320px dialog wins;
       on a short one this does. */
    max-width: max(420px, calc((94vh - var(--pm-chrome)) * 16 / 9));
}
.pool-modal__shot a {
    display: block;
    cursor: zoom-in;
    border-radius: 11px;
    transition: transform .25s cubic-bezier(.22, .9, .32, 1), box-shadow .25s ease;
}
.pool-modal__shot a:hover { transform: translateY(-2px); }
.pool-modal__shot a:hover img {
    border-color: rgba(78, 205, 196, .55);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .62), 0 0 42px -14px rgba(34, 211, 238, .55);
}
.pool-modal__shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;              /* space reserved before it loads */
    background: #061019;
    border: 1px solid rgba(78, 205, 196, .22);
    border-radius: 11px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.pool-modal__shot figcaption {
    margin-top: .5rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .7rem; letter-spacing: .04em;
    color: #6f8a94;
    text-align: center;
}

/* The reassurance, deliberately AFTER the proof: it is the quiet closing note,
   not the headline. Nobody opens this hoping to read it. */
.pool-modal__foot {
    margin: .8rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .82rem;
    line-height: 1.6;
    color: #8aa3ad;
    text-align: center;
}
.pool-modal__foot strong { color: #cfe8e6; font-weight: 600; }

.pool-modal__actions { display: flex; gap: .6rem; margin-top: .9rem; }
.pool-modal__cta {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #12313a, #143f47);
    color: #4ecdc4;
    border: 1px solid #4ecdc4;
    border-radius: 9px;
    padding: .6rem 1rem;
    font-size: .9rem; font-weight: 650;
    text-decoration: none;
    transition: background .2s, box-shadow .2s, color .2s;
}
.pool-modal__cta:hover {
    background: linear-gradient(135deg, #16404b, #1a5560);
    color: #7ff3ea;
    box-shadow: 0 0 26px -6px rgba(78, 205, 196, .6);
}
.pool-modal__ghost {
    flex: 0 0 auto;
    background: transparent;
    color: #8aa3ad;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    padding: .68rem 1.1rem;
    font-size: .9rem;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.pool-modal__ghost:hover { color: #e8f6f5; border-color: rgba(255, 255, 255, .3); }

.pool-modal :focus-visible { outline: 2px solid #4ecdc4; outline-offset: 2px; }

/* Below the point where a 16:9 capture stops being readable at any size, stop
   pretending: the surrounding copy carries the message and the picture becomes
   a thumbnail people can tap to open full size. */
@media (max-width: 700px) {
    .pool-modal { padding: .6rem; }
    .pool-modal__dialog { padding: 1.2rem 1rem 1.1rem; max-height: 92vh; }
    .pool-modal__shot { max-width: 100%; }
    .pool-modal__actions { flex-direction: column; }
}
/* Laptop-height screens. The chips and the closing note are the least load-
   bearing things in the panel, so they go first and the screenshot keeps the
   pixels — on a 768px display that is the difference between reading the offer
   table and squinting at it. */
@media (max-height: 860px) {
    .pool-modal__dialog { --pm-chrome: 205px; padding: 1.05rem 1.2rem 1rem; }
    .pool-modal__chips  { display: none; }
    .pool-modal__foot   { margin-top: .6rem; padding-top: .55rem; font-size: .78rem; }
    .pool-modal__title  { font-size: 1.1rem; margin: .5rem 0 .3rem; }
    .pool-modal__lede   { font-size: .84rem; margin-bottom: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pool-modal__shot a, .pool-modal__shot img { transition: none; }
    .pool-modal__shot a:hover { transform: none; }
}

/* Motion is decoration here; the panel must arrive either way. */
@media (prefers-reduced-motion: reduce) {
    .pool-modal__backdrop,
    .pool-modal__dialog { transition: none; }
    .pool-modal__beam { animation: none; }
}

/* ===================================================================
   ABOVE THE FOLD — argument left, calculator right
   ═══════════════════════════════════════════════════════════════════
   The page used to open with a full-width headline, a paragraph, a
   three-card stakes band and a large countdown — roughly two screens of
   centred prose — before the Bridge Calculator appeared at all. Someone
   who arrived ready to buy had to scroll past the persuasion to reach
   the thing they came for, and a visitor still deciding had nothing to
   act on while the argument was being made.

   So the two run side by side: the case on the left, the instrument on
   the right, both in the first screen. The reader can start at either
   one, and the calculator is doing the persuading a paragraph cannot —
   type an amount, see the SYNX.

   The markup is untouched. .swap-grid becomes display:contents so its
   two children join the parent grid, which lets the card sit beside the
   hero without moving a single element in the document — the mobile
   stack below 1000px is exactly what it always was.
   =================================================================== */
.stakes-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem;
    margin: 1.4rem 0 0;
}

@media (min-width: 1000px) {
    .swap-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
        column-gap: 2.2rem;
        align-items: start;
        max-width: 1240px;
    }

    /* Left column: the case. */
    .swap-hero {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
        margin-bottom: 1.4rem;
    }
    .swap-headline { margin: 0; max-width: 15ch; font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
    .swap-sub      { margin: 1.1rem 0 0; max-width: 46ch; font-size: 1rem; }
    .swap-sub strong { color: #e8f6f5; }
    .legacy-hint   { margin-top: .75rem; }
    .phase-tag     { margin-bottom: 1.1rem; }

    /* One column of three, so each number keeps its weight in a narrow
       measure instead of being squeezed into unreadable thirds. */
    .stakes-band { grid-template-columns: 1fr; gap: .5rem; margin-top: 1.3rem; }

    /* The countdown stops being a monument and becomes a line of data. */
    .countdown-block {
        grid-column: 1;
        grid-row: 2;
        max-width: none;
        margin: 0;
        padding: 1rem 1.1rem;
        text-align: left;
    }
    .countdown-label { margin-bottom: .7rem; font-size: .7rem; letter-spacing: 3px; }
    .countdown       { justify-content: flex-start; gap: .45rem; }
    .cd-unit         { min-width: 58px; }
    .cd-num          { font-size: 1.75rem; }
    .cd-sep          { font-size: 1.5rem; }
    .countdown-note  { margin-top: .8rem; font-size: .74rem; }

    /* Right column: the instrument. Lifted out of .swap-grid so it can sit
       beside the hero. */
    .swap-grid { display: contents; }
    .swap-card {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    /* The proof module spans BOTH columns — left edge to the calculator's
       right edge (Michael 2026-08-22: "goes all the way across to the
       bridge calculator box in width"). It has to be a direct child of
       .swap-wrap to do that: while it sat inside .swap-hero it was a
       child of a grid ITEM, so it could only ever be as wide as the
       left-hand column, which is what made it look shrunken. */
    .shipped-band {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 2.4rem 0 0;
    }

    /* Part two of the case, below the module. It is full width now rather
       than a left-hand column, so the three article cards go back to
       running across instead of stacking — a single column was only ever
       a concession to the narrow measure they no longer sit in. */
    .swap-hero.swap-hero--rest {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 2.2rem 0 0;
    }
    .swap-hero--rest .stakes-band {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: .7rem;
    }

    /* The allocation cards were a sidebar competing with the calculator for
       the same glance. Below the fold they become a full-width strip, which
       is where supporting numbers belong. */
    .swap-side {
        grid-column: 1 / -1;
        grid-row: 4;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        gap: 1.5rem;
        align-items: start;
        margin-top: 2.2rem;
    }
    .trust-strip { grid-column: 1 / -1; grid-row: 5; }
}

/* A wide desktop can afford the calculator a little more room. */
@media (min-width: 1400px) {
    .swap-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); column-gap: 2.6rem; }
}

/* ===================================================================
   PENDING PAYMENT — the minutes between signing and confirmation
   ═══════════════════════════════════════════════════════════════════
   Previously this was one line of text that changed every fifteen
   seconds. A buyer who has just signed away real money and sees a
   static sentence assumes the page has died, and the honest reading
   of "did it work?" is a refresh — which loses the tab holding their
   claim code. So the wait is given a face: something visibly alive,
   a real count of confirmations coming back from the chain, and a
   link to the block explorer so they can verify us independently.

   The ring is CSS-only. A spinner is the last thing that should pull
   in a library, and this one has to keep animating while the page is
   doing network work.
   =================================================================== */
.pay-pending {
    display: none;
    margin: .9rem 0 0;
    padding: 1.1rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(78, 205, 196, .06), rgba(5, 8, 12, .5));
    border: 1px solid rgba(78, 205, 196, .3);
    border-radius: 12px;
    text-align: center;
}
.pay-pending.is-on { display: block; }

/* Nucleus + two orbits. Deliberately not a generic spinner: the shape
   is the project's own vocabulary, and it reads as "computing", not
   "loading a page". */
.pay-orbit {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 0 auto .8rem;
}
.pay-orbit__core {
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #7ff3ea, #22d3ee 55%, #12707a);
    box-shadow: 0 0 18px rgba(34, 211, 238, .75);
    animation: pay-pulse 1.9s ease-in-out infinite;
}
.pay-orbit__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(78, 205, 196, .22);
    border-top-color: #22d3ee;
    border-right-color: rgba(124, 92, 255, .8);
    animation: pay-spin 1.5s linear infinite;
}
.pay-orbit__ring--slow {
    inset: 13px;
    border-top-color: rgba(124, 92, 255, .9);
    border-right-color: transparent;
    border-left-color: rgba(255, 68, 102, .55);
    animation: pay-spin 2.6s linear infinite reverse;
}
@keyframes pay-spin  { to { transform: rotate(360deg); } }
@keyframes pay-pulse { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(.86); opacity: .7; } }

.pay-pending__head {
    color: #e8f6f5;
    font-size: .98rem;
    font-weight: 650;
    letter-spacing: .01em;
}
.pay-pending__sub {
    margin-top: .35rem;
    color: #9fb6be;
    font-size: .84rem;
    line-height: 1.55;
}

/* Confirmations, drawn from the numbers the verifier returns. */
.pay-confs { display: flex; justify-content: center; gap: .35rem; margin: .8rem 0 .2rem; }
.pay-confs span {
    width: 26px; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .1);
    transition: background .45s ease, box-shadow .45s ease;
}
.pay-confs span.on {
    background: linear-gradient(90deg, #22d3ee, #4ecdc4);
    box-shadow: 0 0 10px rgba(34, 211, 238, .6);
}
.pay-pending__meta {
    margin-top: .55rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .72rem;
    color: #6f8a94;
    letter-spacing: .03em;
}
.pay-pending__meta a { color: #4ecdc4; text-decoration: none; border-bottom: 1px solid rgba(78,205,196,.35); }

/* Confirmed. The state change has to be unmistakable — this is the moment
   the buyer has been waiting on. */
.pay-pending.is-done { border-color: rgba(0, 255, 136, .45); background: linear-gradient(180deg, rgba(0,255,136,.07), rgba(5,8,12,.5)); }
.pay-pending.is-done .pay-orbit__ring,
.pay-pending.is-done .pay-orbit__ring--slow { animation: none; border-color: rgba(0,255,136,.5); }
.pay-pending.is-done .pay-orbit__core { animation: none; background: radial-gradient(circle at 50% 40%, #b6ffd8, #00ff88 60%, #049c55); box-shadow: 0 0 22px rgba(0,255,136,.7); }
.pay-pending.is-done .pay-pending__head { color: #00ff88; }

@media (prefers-reduced-motion: reduce) {
    .pay-orbit__ring, .pay-orbit__ring--slow, .pay-orbit__core { animation: none; }
}


/* ===================================================================
   SHIPPED, NOT ROADMAPPED — the proof module
   ═══════════════════════════════════════════════════════════════════
   Full width of the column, wide and flat, exactly as it was when it sat
   below the swap card (Michael 2026-08-22: "spread it out underneath
   like a rectangle box like it was before ... just wanted it moved up").
   The ONLY thing that changed is where it sits: it now leads, above the
   2029 countdown, so the page answers "what am I getting" before it
   argues why it matters.

   Styling lives here rather than inline because the chrome tile has to
   override tile colour, and an inline style beats any class selector —
   the gradient was previously surviving on a technicality.
   =================================================================== */
.shipped-band {
    text-align: left;
    margin: 0 0 2.2rem;
    padding: 1.6rem 1.5rem;
    background: linear-gradient(180deg, rgba(78, 205, 196, .06), rgba(5, 8, 12, .45));
    border: 1px solid rgba(78, 205, 196, .3);
    border-radius: 14px;
}
.shipped-band__kicker {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: #4ecdc4; margin-bottom: .55rem;
}
.shipped-band__h {
    margin: 0 0 .6rem;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    color: #f2fbfa; line-height: 1.32;
}
.shipped-band__lede {
    margin: 0 0 1.2rem;
    font-size: .92rem; line-height: 1.7; color: #9fb3b8; max-width: 72ch;
}
.ship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: .75rem;
}
.ship-tile {
    padding: .8rem .9rem;
    background: rgba(0, 0, 0, .3);
    border: 1px solid #22323d;
    border-radius: 9px;
}
.ship-tile__t {
    font-size: .92rem; color: #e8f6f5; font-weight: 600; margin-bottom: .25rem;
}
.ship-tile__i { margin-right: .35rem; }
.ship-tile__d { font-size: .8rem; line-height: 1.55; color: #8aa3ad; }
.shipped-band__foot {
    margin: 1.2rem 0 0; padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .88rem; line-height: 1.75; color: #9fb3b8;
}
.shipped-band__foot strong { color: #cfe8e6; }

/* ── THE CHROME TILE — "Zero fees · sub-second" ──────────────────────
   Struck metal rather than a coloured glow, borrowing the treatment the
   emission projector already uses for its one LIVE figure: on this site
   chrome means measured and real, so reusing it ties the pages together
   instead of inventing a second language for emphasis. The gradient
   drifts on a long cycle — a highlight crossing metal, not a pulse
   competing with the CTA. The eleven flat tiles are what make it read
   as lit, so it stays the only one. */
.ship-tile.is-chrome {
    border-color: rgba(210, 225, 240, .38);
    background: linear-gradient(180deg, rgba(226, 236, 248, .10), rgba(0, 0, 0, .34));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .05),
        0 0 26px -10px rgba(198, 219, 240, .75),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ship-tile.is-chrome .ship-tile__t {
    color: transparent;
    background: linear-gradient(180deg,
        #ffffff 0%, #e6edf6 20%, #a9bccf 42%,
        #7b8ea3 51%, #d4dfec 66%, #ffffff 84%, #bccbdb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 240%;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .30))
            drop-shadow(0 0 16px rgba(190, 214, 240, .55));
    animation: ship-chrome 7.5s ease-in-out infinite;
}
/* The bolt is an emoji — background-clip cannot paint it, so it gets its
   own halo rather than being silently left flat. */
.ship-tile.is-chrome .ship-tile__i {
    -webkit-text-fill-color: initial;
    filter: drop-shadow(0 0 7px rgba(214, 232, 252, .95));
}
@keyframes ship-chrome {
    0%, 100% { background-position: 0 0; }
    50%      { background-position: 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ship-tile.is-chrome .ship-tile__t { animation: none; }
}
@media (max-width: 640px) {
    .ship-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   CONNECTED WALLET — status, not decoration
   ═══════════════════════════════════════════════════════════════════
   The page previously gave no sign a wallet was connected: the button
   still read "Connect Wallet & Pay BTC" and clicking it just paid. That
   is the worst version of this interaction — the user cannot tell which
   account is about to spend, or whether they are connected at all, and
   the only way to find out is to commit money.

   This strip answers that in one line and then gets out of the way. It
   is deliberately quiet: a small live dot, the wallet's name, a
   truncated address, the balance. Green because connected is a healthy
   state, low-contrast because it is reference material, not a call to
   action. It does not exist until there is something true to say.
   =================================================================== */
.wallet-chip {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin: 0 0 .7rem;
    padding: .5rem .7rem;
    background: rgba(0, 255, 136, .05);
    border: 1px solid rgba(0, 255, 136, .28);
    border-radius: 9px;
    font-size: .78rem;
    line-height: 1.3;
}
.wallet-chip[hidden] { display: none; }
.wallet-chip__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #00ff88; flex: 0 0 auto;
    box-shadow: 0 0 7px rgba(0, 255, 136, .85);
    animation: wallet-pulse 2.4s ease-in-out infinite;
}
@keyframes wallet-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .wallet-chip__dot { animation: none } }
.wallet-chip__name { color: #cfe8e6; font-weight: 700; }
.wallet-chip__addr {
    font-family: 'JetBrains Mono', Consolas, monospace;
    color: #8aa3ad; letter-spacing: .01em;
}
/* The balance is the number they came to check — it gets the emphasis. */
.wallet-chip__bal { margin-left: auto; color: #00ff88; font-weight: 700; }
.wallet-chip__x {
    background: transparent; border: 1px solid rgba(255,255,255,.16);
    color: #8aa3ad; border-radius: 6px; padding: .18rem .5rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; cursor: pointer;
    transition: color .15s, border-color .15s;
}
/* Destructive-ish, so it warms on hover instead of shouting by default —
   present for whoever wants it, invisible to whoever does not. */
.wallet-chip__x:hover { color: #ff8fa3; border-color: rgba(255,143,163,.55); }

/* MAX — inside the amount row, sized to not compete with the input. */
.max-btn {
    flex: 0 0 auto;
    background: rgba(78, 205, 196, .1);
    border: 1px solid rgba(78, 205, 196, .45);
    color: #4ecdc4;
    border-radius: 7px;
    padding: 0 .6rem;
    align-self: stretch;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.max-btn[hidden] { display: none; }
.max-btn:hover { background: rgba(78, 205, 196, .22); color: #eafffd; }
.max-btn:active { transform: translateY(1px); }
@media (max-width: 420px) { .wallet-chip__bal { margin-left: 0; } }