/* ============================================
   BREAKLINE SECURITY — Threat Model Diagram
   Loaded by approach.html only
============================================ */

/* Chain wrapper */
.tm-wrap {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: var(--sp-8);
    margin-top: var(--sp-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tm-wrap-saas {
    background: rgba(251, 146, 60, 0.03);
    border-color: rgba(251, 146, 60, 0.24);
}

.tm-wrap-self {
    background: rgba(74, 222, 128, 0.03);
    border-color: rgba(74, 222, 128, 0.24);
}

/* Header row */
.tm-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-7);
    flex-wrap: wrap;
}

/* Badge */
.tm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.28rem var(--sp-3);
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    flex-shrink: 0;
}

.tm-badge-warn {
    background: rgba(251, 146, 60, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.4);
    color: #FDBA74;
}

.tm-badge-ok {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #86EFAC;
}

.tm-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tm-badge-warn .tm-badge-dot { background: #FB923C; }
.tm-badge-ok .tm-badge-dot   { background: #4ADE80; }

/* Stat line */
.tm-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.76rem;
    color: #F87171;
    letter-spacing: 0.03em;
}

.tm-stat i        { color: #FB923C; font-size: 0.8rem; flex-shrink: 0; }
.tm-stat-ok       { color: #86EFAC; }
.tm-stat-ok i     { color: #4ADE80; }

/* Chain row */
.tm-chain {
    display: flex;
    align-items: stretch;
    min-width: 520px;
}

/* Node */
.tm-node {
    flex-shrink: 0;
    width: 168px;
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    overflow: visible;
}

.tm-node-inner {
    padding: 1.1rem var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    box-sizing: border-box;
}

.tm-node-origin { border-color: rgba(74, 222, 128, 0.32);  background: rgba(74, 222, 128, 0.05); }
.tm-node-warn   { border-color: rgba(251, 146, 60, 0.35);  background: rgba(251, 146, 60, 0.05); }
.tm-node-danger { border-color: rgba(239, 68, 68, 0.4);    background: rgba(239, 68, 68, 0.06); }
.tm-node-ok     { border-color: rgba(74, 222, 128, 0.32);  background: rgba(74, 222, 128, 0.05); }

/* Risk indicator top-right */
.tm-node-risk {
    position: absolute;
    top: -7px;
    right: -7px;
    font-size: 0.75rem;
    line-height: 1;
    z-index: 1;
}

.tm-node-warn .tm-node-risk   { color: #FB923C; }
.tm-node-danger .tm-node-risk { color: #F87171; }

/* Icon */
.tm-icon { font-size: 1.25rem; line-height: 1; }

.tm-node-origin .tm-icon { color: var(--accent); }
.tm-node-warn   .tm-icon { color: #FB923C; }
.tm-node-danger .tm-icon { color: #F87171; }
.tm-node-ok     .tm-icon { color: #4ADE80; }

/* Name */
.tm-name {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
    line-height: 1.35;
}

/* Tags */
.tm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.tm-tag {
    max-width: 100%;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.tm-tag-neutral { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: var(--text-2); }
.tm-tag-warn    { background: rgba(251,146,60,0.12);  border: 1px solid rgba(251,146,60,0.38); color: #FDBA74; }
.tm-tag-danger  { background: rgba(239,68,68,0.12);   border: 1px solid rgba(239,68,68,0.42);  color: #FCA5A5; }
.tm-tag-ok      { background: rgba(74,222,128,0.12);  border: 1px solid rgba(74,222,128,0.38); color: #86EFAC; }

/* Hop connector */
.tm-hop {
    flex: 1;
    min-width: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0 0.2rem;
}

.tm-hop-label {
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

.tm-hop-line {
    width: 100%;
    height: 1px;
    position: relative;
}

/* Arrowhead */
.tm-hop-line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
}

/* Hop colour variants */
.tm-hop-warn   .tm-hop-label { color: rgba(253,186,116,0.85); }
.tm-hop-warn   .tm-hop-line  { background: rgba(251,146,60,0.45); }
.tm-hop-warn   .tm-hop-line::after { border-left: 5px solid rgba(251,146,60,0.75); }

.tm-hop-danger .tm-hop-label { color: rgba(252,165,165,0.85); }
.tm-hop-danger .tm-hop-line  { background: rgba(239,68,68,0.45); }
.tm-hop-danger .tm-hop-line::after { border-left: 5px solid rgba(239,68,68,0.75); }

.tm-hop-ok     .tm-hop-label { color: rgba(134,239,172,0.85); }
.tm-hop-ok     .tm-hop-line  { background: rgba(74,222,128,0.45); }
.tm-hop-ok     .tm-hop-line::after { border-left: 5px solid rgba(74,222,128,0.75); }

/* ── Deployment-topology toggle ── */
.tm-topology-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
}

.tm-topology-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
}

.tm-toggle {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
}

.tm-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.95rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.tm-toggle-btn i { font-size: 0.72rem; opacity: 0.8; }
.tm-toggle-btn:hover { color: var(--text); }

.tm-toggle-btn.is-active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}
.tm-toggle-btn.is-active i { opacity: 1; }

/* Contextual hint under the toggle */
.tm-topology-hint {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    color: var(--text-3);
    line-height: 1.4;
}

.tm-topology-hint-suffix {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.5);
}

/* The two chain diagrams sit one under the other */
.tm-wrap + .tm-wrap { margin-top: var(--sp-5); }

/* ── Swapped destination cards (driven by the toggle) ── */
.tm-topology[data-topology="one"] .tm-dest-per { display: none; }
.tm-topology[data-topology="per"] .tm-dest-one { display: none; }

.tm-topology[data-topology="one"] .tm-topo-per,
.tm-topology[data-topology="per"] .tm-topo-one { display: none; }

/* Responsive */
@media (max-width: 960px) {
    .tm-wrap { padding: var(--sp-5); }
}

@media (max-width: 768px) {
    /* Chain nodes stack vertically */
    .tm-chain {
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
    }
    .tm-chain .tm-node { width: auto; }

    /* Hop becomes a short vertical connector */
    .tm-chain .tm-hop {
        flex: none;
        height: 36px;
        width: 100%;
        padding: 0;
    }
    .tm-chain .tm-hop-label { display: none; }
    .tm-chain .tm-hop-line  { width: 1.5px; height: 100%; }

    /* Arrowhead flipped to point downward */
    .tm-chain .tm-hop-line::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1px;
        transform: translateX(-50%);
        border-left:   3.5px solid transparent;
        border-right:  3.5px solid transparent;
        border-top:    5px solid transparent;
        border-bottom: none;
    }
    .tm-chain .tm-hop-warn .tm-hop-line::after { border-top-color: rgba(251, 146, 60, 0.75); }
    .tm-chain .tm-hop-ok   .tm-hop-line::after { border-top-color: rgba(74,  222, 128, 0.75); }

    /* Toggle stretches full-width and stacks its two buttons */
    .tm-toggle { display: flex; width: 100%; }
    .tm-toggle-btn { flex: 1; justify-content: center; white-space: normal; text-align: center; }
}

/* Large screens — rem restatement of this file's px layout (see redesign.css). */
@media (min-width: 1708px) {
    .tm-chain { min-width: 32.5rem; }
    .tm-node { width: 10.5rem; }
}