/* ═══════════════════════════════════════════════════════
   MODULE 4 — EXTRA STYLES
   Components: gossip propagation, fork diagram,
               confirmation depth, difficulty demo,
               attack steps, anatomy table
   ═══════════════════════════════════════════════════════ */

/* ── Anatomy Table (Section 2) ──────────────────────── */
.anatomy-table {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem 0;
}
.anatomy-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}
.anatomy-row:last-child { border-bottom: none; }
.anatomy-row:first-child {
    font-weight: 600;
    background: rgba(247, 147, 26, 0.06);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.anatomy-row:hover:not(:first-child) {
    background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .anatomy-row:hover:not(:first-child) {
    background: rgba(0, 0, 0, 0.02);
}
.anatomy-label {
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}
.anatomy-row:first-child .anatomy-label {
    color: var(--text-secondary);
    font-family: var(--font-body);
}
.anatomy-value {
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

@media (max-width: 640px) {
    .anatomy-row {
        grid-template-columns: 1fr;
    }
    .anatomy-label { border-right: none; border-bottom: 1px solid var(--border-color); }
    .anatomy-row:last-child .anatomy-label { border-bottom: 1px solid var(--border-color); }
    .anatomy-row:first-child { display: none; }
}


/* ── Gossip Propagation — Animated Network Graph (Section 3) ──── */
.gossip-viz {
    margin: 2rem 0;
    padding: 1.5rem 1rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
}
.gossip-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ── Edges ── */
.g-edge {
    stroke: var(--border-color);
    transition: stroke 0.4s, opacity 0.4s;
}
.gossip-viz.playing .g-edge { stroke: var(--text-tertiary); }

/* Active edge highlight per tier */
.gossip-viz.tier-0 .g-e-01,
.gossip-viz.tier-1 .g-e-01 { stroke: #f7931a; opacity: 0.7; }
.gossip-viz.tier-1 .g-e-12,
.gossip-viz.tier-2 .g-e-12 { stroke: #10b981; opacity: 0.7; }
.gossip-viz.tier-2 .g-e-2f,
.gossip-viz.tier-3 .g-e-2f { stroke: #8b5cf6; opacity: 0.7; }

/* ── Nodes — Default (dim) state ── */
.g-node-bg {
    fill: var(--bg-secondary);
    stroke: var(--border-color);
    stroke-width: 2;
    transition: fill 0.5s, stroke 0.5s, filter 0.5s;
}
.g-node-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    fill: var(--text-tertiary);
    text-anchor: middle;
    transition: fill 0.5s;
    pointer-events: none;
}
.g-node-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    fill: var(--text-tertiary);
    text-anchor: middle;
    pointer-events: none;
}

/* ── Origin node — always partially visible ── */
.g-origin .g-node-bg {
    fill: rgba(247, 147, 26, 0.08);
    stroke: #f7931a;
}
.g-origin .g-node-label { fill: #f7931a; }

/* ── Node activated states ── */
.gossip-viz.tier-0 .g-origin .g-node-bg,
.gossip-viz.tier-1 .g-origin .g-node-bg,
.gossip-viz.tier-2 .g-origin .g-node-bg,
.gossip-viz.tier-3 .g-origin .g-node-bg {
    fill: rgba(247, 147, 26, 0.22);
    stroke: #f7931a;
    filter: drop-shadow(0 0 8px rgba(247, 147, 26, 0.5));
}

.gossip-viz.tier-1 .g-hop1 .g-node-bg,
.gossip-viz.tier-2 .g-hop1 .g-node-bg,
.gossip-viz.tier-3 .g-hop1 .g-node-bg {
    fill: rgba(16, 185, 129, 0.18);
    stroke: #10b981;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}
.gossip-viz.tier-1 .g-hop1 .g-node-label,
.gossip-viz.tier-2 .g-hop1 .g-node-label,
.gossip-viz.tier-3 .g-hop1 .g-node-label { fill: #10b981; }

.gossip-viz.tier-2 .g-hop2 .g-node-bg,
.gossip-viz.tier-3 .g-hop2 .g-node-bg {
    fill: rgba(139, 92, 246, 0.15);
    stroke: #8b5cf6;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4));
}
.gossip-viz.tier-2 .g-hop2 .g-node-label,
.gossip-viz.tier-3 .g-hop2 .g-node-label { fill: #8b5cf6; }

/* ── Flood node ── */
.g-flood-bg {
    fill: var(--bg-secondary);
    stroke: var(--border-color);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    transition: fill 0.5s, stroke 0.5s, filter 0.5s;
}
.g-flood-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    fill: var(--text-tertiary);
    text-anchor: middle;
    transition: fill 0.5s;
    pointer-events: none;
}
.gossip-viz.tier-3 .g-flood-bg {
    fill: rgba(247, 147, 26, 0.12);
    stroke: #f7931a;
    filter: drop-shadow(0 0 10px rgba(247, 147, 26, 0.35));
}
.gossip-viz.tier-3 .g-flood-label { fill: #f7931a; }

/* ── Time badges ── */
.g-time-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    fill: var(--text-tertiary);
    text-anchor: middle;
    transition: opacity 0.5s;
}
.gossip-viz.tier-1 .g-tb-1 { opacity: 1 !important; }
.gossip-viz.tier-2 .g-tb-2 { opacity: 1 !important; }
.gossip-viz.tier-3 .g-tb-3 { opacity: 1 !important; }

/* ── Play / Replay button ── */
.gossip-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.55rem 1.4rem;
    border: 2px solid #f7931a;
    border-radius: 999px;
    background: rgba(247, 147, 26, 0.08);
    color: #f7931a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
}
.gossip-play-btn:hover {
    background: rgba(247, 147, 26, 0.18);
    box-shadow: 0 0 16px rgba(247, 147, 26, 0.25);
    transform: translateY(-1px);
}
.gossip-play-btn:active { transform: scale(0.97); }
.gossip-play-btn .gossip-play-icon { font-size: 0.9rem; }
.gossip-viz.playing .gossip-play-btn { pointer-events: none; opacity: 0.5; }
.gossip-viz.done .gossip-play-btn .gossip-play-icon::before { content: '↻'; }

/* ── Ripple animation on activated nodes ── */
@keyframes nodeRipple {
    0%   { r: 0; opacity: 0.6; }
    100% { r: 40; opacity: 0; }
}

@media (max-width: 640px) {
    .gossip-viz { padding: 1rem 0.5rem 0.75rem; }
    .gossip-play-btn { font-size: 0.72rem; padding: 0.45rem 1rem; }
    .g-time-badge { display: none; }
}


/* ── Confirmation Depth Visualisation (Section 4) ──── */
.confirmation-depth {
    margin: 1.5rem 0;
    padding: 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.confirm-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
}
.confirm-row + .confirm-row {
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}
.confirm-blocks {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    flex-shrink: 0;
}
.confirm-bar {
    height: 10px;
    border-radius: 5px;
    transition: width 0.6s ease;
}
.confirm-bar-0 {
    width: 5%;
    background: var(--accent-danger);
}
.confirm-bar-1 {
    width: 20%;
    background: linear-gradient(90deg, var(--accent-danger), var(--accent-primary));
}
.confirm-bar-3 {
    width: 55%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-ok));
}
.confirm-bar-6 {
    width: 100%;
    background: linear-gradient(90deg, var(--accent-ok), #059669);
}
.confirm-pct {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .confirm-row { flex-wrap: wrap; gap: 0.4rem; }
    .confirm-blocks { min-width: unset; width: 100%; }
    .confirm-bar { flex: 1; min-width: 0; }
    .confirm-pct { width: 100%; font-size: 0.75rem; }
}


/* ── Difficulty Demo Box (Section 4) ───────────────── */
.difficulty-demo {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem 0;
    background: var(--bg-card);
}
.diff-row {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}
.diff-row:last-child { border-bottom: none; }
.diff-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    min-width: 160px;
    flex-shrink: 0;
}
.diff-row code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: var(--accent-primary);
    background: none;
    padding: 0;
    border: none;
}

@media (max-width: 640px) {
    .diff-row { flex-direction: column; gap: 0.25rem; align-items: flex-start; }
    .diff-label { min-width: unset; }
}


/* ── Fork Diagram (Section 5) ──────────────────────── */
.fork-diagram {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow-x: auto;
}
.fork-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: max-content;
}
.fork-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    min-width: 100px;
    text-align: center;
    transition: all 0.3s;
}
.fork-block-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}
.fork-block-miner {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}
.fork-block-main {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.12), rgba(247, 147, 26, 0.03));
}
.fork-block-main .fork-block-label { color: var(--accent-primary); }
.fork-block-a {
    border-color: var(--accent-ok);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.02));
}
.fork-block-a .fork-block-label { color: var(--accent-ok); }
.fork-block-b {
    border-color: var(--accent-danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02));
}
.fork-block-b .fork-block-label { color: var(--accent-danger); }
.fork-block-winner {
    border-color: var(--accent-ok);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}
.fork-block-winner .fork-block-label { color: var(--accent-ok); }
.fork-block-winner .fork-block-miner { color: var(--accent-ok); font-weight: 600; }

.fork-arrow {
    font-size: 1.2rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.fork-split {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.fork-branch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.fork-orphan {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-danger);
    padding: 0.3rem 0.7rem;
    border: 1.5px dashed var(--accent-danger);
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.06);
}

@media (max-width: 640px) {
    .fork-diagram { padding: 1rem; }
    .fork-block { min-width: 75px; padding: 0.5rem 0.7rem; }
    .fork-block-label { font-size: 0.72rem; }
}


/* ── Attack Steps (Section 6) ──────────────────────── */
.attack-steps {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.attack-step {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    transition: border-color 0.3s;
}
.attack-step:hover {
    border-color: var(--accent-danger);
}
.attack-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-danger);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88rem;
    font-weight: 700;
    flex-shrink: 0;
}
.attack-step-body strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.attack-step-body p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 640px) {
    .attack-step { padding: 0.8rem 1rem; }
    .attack-step-num { min-width: 30px; height: 30px; font-size: 0.78rem; }
}


/* ── Compare Table (Section 1) ─────────────────────── */
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem 0;
    font-size: 0.88rem;
}
.compare-table thead th {
    background: rgba(247, 147, 26, 0.06);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding: 0.65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.compare-table th + th,
.compare-table td + td {
    border-left: 1px solid var(--border-color);
}
.compare-table tbody td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.5;
    color: var(--text-secondary);
}
.compare-table tbody tr:last-child td {
    border-bottom: none;
}
.compare-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .compare-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}
.compare-table tbody td:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .compare-table { font-size: 0.8rem; }
    .compare-table thead th,
    .compare-table tbody td { padding: 0.5rem 0.65rem; }
}


/* ── Install List (re-used from M2 pattern) ────────── */
.install-list {
    margin: 1rem 0;
}
.install-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 0.88rem;
}
.install-item code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--accent-primary);
    background: var(--bg-tertiary);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    border: none;
}
.install-item span {
    flex: 1;
    color: var(--text-secondary);
}
.install-item a {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.install-item a:hover { opacity: 0.8; }