/* ============================================================
   HFThot Visual Diagram Components
   Replaces ASCII box-drawing diagrams with clean CSS layouts
   ============================================================ */

/* ── Architecture Layers ── */
.arch-layers { display: flex; flex-direction: column; gap: 0; }
.arch-layer {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.15);
    padding: 1.1rem 1.4rem;
}
.arch-layer:first-child { border-radius: 10px 10px 0 0; }
.arch-layer:last-child  { border-radius: 0 0 10px 10px; }
.arch-layer-hdr {
    color: var(--primary-gold);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.6rem;
}
.arch-tiles { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.arch-tile {
    background: rgba(26,26,46,0.7);
    border: 1px solid rgba(212,175,55,0.1);
    border-radius: 7px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    color: var(--text-light, #e0e0e0);
    flex: 1;
    min-width: 110px;
    text-align: center;
}
.arch-tile strong { color: var(--accent-gold, #f4d03f); display: block; font-size: 0.78rem; margin-bottom: 0.1rem; }
.arch-tile small  { color: var(--text-gray, #a8a8a8); font-size: 0.72rem; }
.arch-conn {
    text-align: center;
    padding: 0.25rem 0;
    color: var(--primary-gold, #d4af37);
    font-size: 0.95rem;
    background: rgba(212,175,55,0.03);
    border-left: 1px solid rgba(212,175,55,0.15);
    border-right: 1px solid rgba(212,175,55,0.15);
}
.arch-conn span {
    font-size: 0.72rem;
    padding: 0.08rem 0.6rem;
    background: rgba(212,175,55,0.08);
    border-radius: 3px;
    color: var(--accent-gold, #f4d03f);
}
.arch-feats { margin-top: 0.5rem; }
.arch-feats li {
    list-style: none;
    color: var(--text-gray, #a8a8a8);
    font-size: 0.8rem;
    padding: 0.08rem 0;
}
.arch-feats li::before { content: '✦ '; color: var(--primary-gold, #d4af37); font-size: 0.7rem; }


/* ── Storage Tier Bars ── */
.tier-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.3rem 0; }
.tier-label { min-width: 170px; color: var(--text-light, #e0e0e0); font-size: 0.82rem; }
.tier-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.tier-fill { height: 100%; border-radius: 3px; }
.tier-fill.hot  { background: var(--primary-gold, #d4af37); width: 95%; }
.tier-fill.warm { background: #50e3c2; width: 70%; }
.tier-fill.cold { background: #4a90e2; width: 50%; }
.tier-speed { min-width: 55px; text-align: right; color: var(--accent-gold, #f4d03f); font-size: 0.82rem; font-weight: 600; }


/* ── Horizontal Flow ── */
.flow-h { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow-col { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 0.4rem; }
.flow-card {
    background: rgba(26,26,46,0.7);
    border: 1px solid rgba(212,175,55,0.1);
    border-radius: 7px;
    padding: 0.65rem 0.85rem;
}
.flow-card strong { color: var(--accent-gold, #f4d03f); display: block; font-size: 0.78rem; margin-bottom: 0.15rem; }
.flow-card span  { color: var(--text-gray, #a8a8a8); font-size: 0.76rem; line-height: 1.4; display: block; }
.flow-arr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    color: var(--primary-gold, #d4af37);
    font-size: 1.3rem;
    min-width: 35px;
}
@media (max-width: 768px) {
    .flow-h { flex-direction: column; align-items: center; }
    .flow-arr { transform: rotate(90deg); padding: 0.2rem 0; }
}


/* ── Vertical Stack (Lakehouse) ── */
.lake-stack { display: flex; flex-direction: column; gap: 0; }
.lake-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.15);
    padding: 0.9rem 1.2rem;
}
.lake-card:first-of-type { border-radius: 10px 10px 0 0; }
.lake-card:last-of-type  { border-radius: 0 0 10px 10px; }
.lake-card h4 { color: var(--accent-gold, #f4d03f); font-size: 0.88rem; margin: 0 0 0.3rem; }
.lake-card ul { list-style: none; padding: 0; margin: 0; }
.lake-card li { color: var(--text-gray, #a8a8a8); font-size: 0.8rem; padding: 0.08rem 0; }
.lake-card li::before { content: '› '; color: var(--primary-gold, #d4af37); }
.lake-arr {
    text-align: center;
    padding: 0.12rem 0;
    color: var(--primary-gold, #d4af37);
    font-size: 0.85rem;
    background: rgba(212,175,55,0.03);
    border-left: 1px solid rgba(212,175,55,0.15);
    border-right: 1px solid rgba(212,175,55,0.15);
}
.lake-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.lake-tbl {
    background: rgba(26,26,46,0.7);
    border: 1px solid rgba(212,175,55,0.1);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}
.lake-tbl strong { color: var(--accent-gold, #f4d03f); font-size: 0.76rem; display: block; margin-bottom: 0.1rem; }
.lake-tbl small  { color: var(--text-gray, #a8a8a8); font-size: 0.7rem; line-height: 1.35; display: block; }


/* ── Vertical Flow (Viterbi, HMM) ── */
.vflow { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 1rem 0; }
.vflow-node {
    width: 100%;
    max-width: 560px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    text-align: center;
}
.vflow-node strong { color: var(--accent-gold, #f4d03f); display: block; font-size: 0.82rem; margin-bottom: 0.15rem; }
.vflow-node span  { color: var(--text-gray, #a8a8a8); font-size: 0.78rem; }
.vflow-node.gold  { border-left: 4px solid var(--primary-gold, #d4af37); }
.vflow-node.teal  { border-left: 4px solid #50e3c2; }
.vflow-node.blue  { border-left: 4px solid #4a90e2; }
.vflow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.1rem 0;
    color: var(--primary-gold, #d4af37);
    font-size: 0.9rem;
    line-height: 1;
}


/* ── Equilibrium Cross ── */
.eq-cross { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 1rem 0; }
.eq-row { display: flex; align-items: center; gap: 0.8rem; width: 100%; max-width: 600px; justify-content: center; }
.eq-card {
    background: rgba(26,26,46,0.7);
    border: 1px solid rgba(212,175,55,0.1);
    border-radius: 7px;
    padding: 0.6rem 0.9rem;
    text-align: center;
    flex: 1;
    max-width: 180px;
}
.eq-card strong { color: var(--accent-gold, #f4d03f); font-size: 0.8rem; display: block; margin-bottom: 0.1rem; }
.eq-card span   { color: var(--text-gray, #a8a8a8); font-size: 0.75rem; }
.eq-center {
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold, #f4d03f);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}
.eq-label { color: var(--text-gray, #a8a8a8); font-size: 0.75rem; text-align: center; }
.eq-branch { display: flex; gap: 0.8rem; width: 100%; max-width: 480px; justify-content: center; margin-top: 0.3rem; }
.eq-branch .eq-card { flex: 1; }
@media (max-width: 600px) {
    .eq-row { flex-direction: column; }
    .eq-branch { flex-direction: column; align-items: center; }
}

/* ── Bar Charts ── */
.bar-chart { margin: 0.5rem 0; }
.bar-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0; }
.bar-fill {
    height: 16px;
    border-radius: 3px;
    min-width: 4px;
}
.bar-fill.gold { background: linear-gradient(90deg, #d4af37, #f4d03f); }
.bar-fill.teal { background: linear-gradient(90deg, #50e3c2, #3ac9a8); }
.bar-info { color: var(--text-gray, #a8a8a8); font-size: 0.78rem; margin-top: 0.4rem; }

/* ── Pipeline Steps ── */
.pipeline { display: flex; flex-direction: column; gap: 0; }
.pipeline-step {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 8px;
    padding: 0.75rem 1.2rem 0.75rem 3rem;
    position: relative;
}
.pipeline-num {
    position: absolute;
    left: 0.7rem;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    color: #1a1a2e;
}
.pipeline-step h4 { color: var(--accent-gold, #f4d03f); font-size: 0.82rem; margin: 0 0 0.15rem; }
.pipeline-step p  { color: var(--text-gray, #a8a8a8); font-size: 0.8rem; margin: 0; }
.pipeline-step .result { color: var(--accent-gold, #f4d03f); font-size: 0.76rem; margin-top: 0.15rem; font-style: italic; }
.pipeline-arr { text-align: center; padding: 0.12rem 0; color: var(--primary-gold, #d4af37); font-size: 0.85rem; }

/* ── Lake Metrics ── */
.lake-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding: 0.8rem;
    background: rgba(26,26,46,0.5);
    border-radius: 8px;
    border: 1px solid rgba(212,175,55,0.1);
}
.lake-metric {
    text-align: center;
}
.lake-metric strong { color: var(--accent-gold, #f4d03f); font-size: 0.78rem; display: block; }
.lake-metric span  { color: var(--text-gray, #a8a8a8); font-size: 0.72rem; }