/* Cone-metric control row + per-row bar column for the RE-topology tree.
   Colors/segment treatment mirror the global LPP report; the split bar
   is sized down to the tree row (two ~10px family rows). */

.cone-controls-inner {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--fg);
}

.cone-control-group,
.cone-fam-group {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.cone-controls-label,
.cone-fam-caption {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cone-mode-group,
.cone-fam-group {
    display: inline-flex;
    align-items: center;
}

.cone-mode-group,
.cone-fam-group .cone-fam-btn:first-of-type {
    margin-left: 0;
}

.cone-mode-btn, .cone-fam-btn {
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--fg);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    min-height: 26px;
    padding: 4px 9px;
}

.cone-mode-btn:first-child,
.cone-fam-btn:first-of-type {
    border-radius: 5px 0 0 5px;
}

.cone-mode-btn:last-child,
.cone-fam-btn:last-child {
    border-radius: 0 5px 5px 0;
}

.cone-mode-btn + .cone-mode-btn,
.cone-fam-btn + .cone-fam-btn {
    margin-left: -1px;
}

.cone-mode-btn:hover,
.cone-fam-btn:hover {
    background: var(--accent-soft);
}

.cone-mode-btn.active, .cone-fam-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.cone-mode-btn:focus-visible,
.cone-fam-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cone-worst-toggle {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    min-height: 28px;
    padding: 4px 9px;
}

.cone-worst-toggle input {
    margin: 0;
}

.cone-legend {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    flex: 1 1 100%;
    gap: 5px 10px;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    margin-top: 1px;
    padding-top: 8px;
}

.cone-legend-title {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cone-legend-metric {
    color: var(--fg);
    font-size: 12px;
    font-weight: 700;
}

.cone-legend-items {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    min-width: 0;
}

.cone-legend-item {
    align-items: center;
    color: var(--fg);
    display: inline-flex;
    font-size: 11px;
    gap: 5px;
    line-height: 1.2;
    white-space: nowrap;
}

.cone-legend-swatch {
    border: 1px solid rgba(71, 85, 105, 0.18);
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    height: 10px;
    width: 20px;
}

.cone-legend-swatch.re { background: #b9dfb4; }
.cone-legend-swatch.neutral { background: #d7dee8; }
.cone-legend-swatch.comm {
    background: #e9a7b7;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.34) 4px,
        rgba(255, 255, 255, 0.34) 7px
    );
}
.cone-legend-swatch.path {
    background: #e8bf86;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.36) 4px,
        rgba(255, 255, 255, 0.36) 7px
    );
}

.cone-legend-note {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
    text-align: right;
}

/* The bar column. Fixed width so it lines up with the column header
   across all nesting depths, matching the .col convention. Bar
   dimensions match the global LPP report (42px tall, 20px family rows,
   full-size segment labels) so the two reads identically. */
/* Bar column gets a generous, flex-growing width so the segments are as
   long/readable as the global LPP report (whose bar column is up to
   26em). It shares the row's free space with the AS-name column. */
.col-cone {
    cursor: pointer;
    flex: 1 1 24em;
    min-width: 18em;
    padding-left: 14px;
}
.tree-header .col-cone { color: var(--muted); cursor: default; text-align: left; }

.col-cone .bar-wrap { display: block; }
.col-cone .bar {
    background: #eef2f7;
    border: 1px solid #dfe5ed;
    border-radius: 5px;
    display: flex;
    height: 42px;
    overflow: hidden;
}
.col-cone .bar.split {
    background: transparent;
    border: 0;
    flex-direction: column;
    gap: 3px;
    overflow: visible;
}
/* Reserve a left gutter for the absolutely-positioned v4/v6 family label
   so the leftmost segment's centred percentage never collides with it
   (otherwise "v4" + "32.4%" read as "v432.4%"). */
.col-cone .bar.split .bar-row {
    background: #eef2f7;
    border: 1px solid #dfe5ed;
    border-radius: 999px;
    display: flex;
    flex: 0 0 19px;
    height: 19px;
    overflow: hidden;
    padding-left: 27px;
    position: relative;
}
.col-cone .bar-seg {
    align-items: center;
    color: #1c2633;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}
.col-cone .bar.split .bar-row .bar-seg { font-size: 11px; }
.col-cone .bar-fam-label {
    align-items: center;
    bottom: 0;
    color: #667386;
    display: flex;
    font-size: 10px;
    font-weight: 700;
    justify-content: center;
    left: 5px;
    letter-spacing: 0.02em;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 17px;
}
.col-cone .bar.split .bar-row.empty::after {
    align-items: center;
    color: #7a8797;
    content: attr(data-label);
    display: flex;
    font-size: 10px;
    font-weight: 600;
    inset: 0 0 0 27px;
    justify-content: center;
    position: absolute;
}
/* Low-confidence rows (LPP / Uses-Default with < 5 probes): mute the
   segments so a 1-probe "100%" doesn't read as authoritative, and pin
   an explicit probe-count chip to the right edge of the row. */
.col-cone .bar-row.low-n .bar-seg {
    opacity: 0.5;
}
.col-cone .bar-n-label {
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #dfe5ed;
    border-radius: 999px;
    bottom: 2px;
    color: #667386;
    display: flex;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 5px;
    pointer-events: none;
    position: absolute;
    right: 3px;
    top: 2px;
}

.col-cone .bar-wrap.is-loading {
    cursor: progress;
}
.col-cone .bar-wrap.is-loading .bar,
.col-cone .bar-wrap.is-loading .bar-row {
    background: #f1f5f9;
}
.col-cone .bar-row.loading {
    align-items: stretch;
}
.col-cone .bar-loading-fill {
    animation: cone-bar-loading 1.2s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        rgba(215, 222, 232, 0.28),
        rgba(185, 213, 244, 0.7),
        rgba(215, 222, 232, 0.28)
    );
    display: block;
    flex: 1 1 auto;
    min-width: 36%;
}
.col-cone .bar:not(.split) .bar-loading-fill {
    min-width: 100%;
}
.col-cone .bar-seg.re { background: #b9dfb4; }
.col-cone .bar-seg.neutral {
    background: #d7dee8;
    color: #475569;
}
.col-cone .bar-seg.comm {
    background: #e9a7b7;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.32) 5px, rgba(255,255,255,.32) 8px);
}
.col-cone .bar-seg.path {
    background: #e8bf86;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,.34) 5px, rgba(255,255,255,.34) 8px);
}

@keyframes cone-bar-loading {
    0% { opacity: 0.45; transform: translateX(-18%); }
    50% { opacity: 0.9; }
    100% { opacity: 0.45; transform: translateX(18%); }
}

@media (prefers-reduced-motion: reduce) {
    .col-cone .bar-loading-fill {
        animation: none;
        opacity: 0.65;
    }
}

/* ---- Cone detail modal (the per-AS report card) ---- */
/* Rendered inside the shared .about-modal dialog; one section per metric
   with a wide bar + a counts/percentage table. Mirrors the global LPP
   report's bar-detail layout. */
#cone-detail-content .cone-detail-title { margin: 0 0 6px; font-size: 1.2em; }
#cone-detail-content .cd-h3 {
    margin: 1.2em 0 0.3em; font-size: 1.05em; color: #cdd6f4;
    border-top: 1px solid #45475a; padding-top: 0.8em;
}
#cone-detail-content .cd-fam {
    margin: 0.8em 0 0.3em; font-size: 0.95em; color: #89b4fa; font-weight: 600;
}
#cone-detail-content .cd-note { color: #a6adc8; font-size: 0.85em; margin: 0.3em 0; }
#cone-detail-content .cd-empty { color: #6c7086; font-size: 0.85em; margin: 0.3em 0; }

#cone-detail-content .cone-detail-bar {
    display: flex; height: 34px; border-radius: 3px; overflow: hidden;
    background: #313244; margin: 0.3em 0;
}
#cone-detail-content .cone-detail-bar .bar-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold; color: #1e1e2e;
    overflow: hidden; white-space: nowrap;
}
#cone-detail-content .cone-detail-bar .bar-seg.re { background: #a6e3a1; }
#cone-detail-content .cone-detail-bar .bar-seg.gray { background: #585b70; color: #cdd6f4; }
#cone-detail-content .cone-detail-bar .bar-seg.comm {
    background: #f38ba8;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,.15) 3px, rgba(0,0,0,.15) 6px);
}
#cone-detail-content .cone-detail-bar .bar-seg.path {
    background: #fab387;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0,0,0,.15) 3px, rgba(0,0,0,.15) 6px);
}

#cone-detail-content .cone-detail-tbl {
    width: 100%; border-collapse: collapse; margin: 0.4em 0; font-size: 0.9em;
}
#cone-detail-content .cone-detail-tbl td { padding: 3px 8px; }
#cone-detail-content .cone-detail-tbl td.cd-num { text-align: right; font-weight: bold; }
#cone-detail-content .cone-detail-tbl td.cd-pct { text-align: right; color: #a6adc8; }
#cone-detail-content .cone-detail-tbl tr.cd-total { border-top: 1px solid #45475a; }
#cone-detail-content .cone-detail-tbl tr.cd-total td { color: #a6adc8; }
#cone-detail-content .cd-swatch {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px;
}

@media (max-width: 980px) {
    .col-cone {
        flex-basis: 18em;
        min-width: 14em;
    }
}

@media (max-width: 720px) {
    .cone-controls-inner {
        align-items: stretch;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .cone-control-group,
    .cone-fam-group {
        align-items: stretch;
        display: grid;
        gap: 5px;
        grid-template-columns: 1fr;
    }

    .cone-mode-group,
    .cone-fam-group {
        display: flex;
        flex-wrap: wrap;
    }

    .cone-mode-btn,
    .cone-fam-btn {
        border-radius: 5px;
        margin-left: 0;
    }

    .cone-mode-btn:first-child,
    .cone-mode-btn:last-child,
    .cone-fam-btn:first-of-type,
    .cone-fam-btn:last-child {
        border-radius: 5px;
    }

    .cone-mode-btn + .cone-mode-btn,
    .cone-fam-btn + .cone-fam-btn {
        margin-left: 0;
    }

    .cone-worst-toggle {
        justify-content: flex-start;
    }

    .cone-legend {
        align-items: start;
        grid-template-columns: auto 1fr;
    }

    .cone-legend-items,
    .cone-legend-note {
        grid-column: 1 / -1;
    }

    .cone-legend-note {
        text-align: left;
    }

    .col-cone {
        flex: 1 1 100%;
        min-width: 0;
        padding-left: 0;
        text-align: left;
    }

    .col-cone .bar-wrap {
        max-width: 100%;
    }

    .col-cone .bar.split .bar-row {
        padding-left: 27px;
    }

    .col-cone .bar-fam-label {
        font-size: 10px;
    }

    .col-cone .bar-seg,
    .col-cone .bar.split .bar-row .bar-seg {
        font-size: 11px;
    }
}