/* ========================================= */
/* === Big-O chart (start page)          === */
/* ========================================= */

/* Categorical colours, one per algorithm, in a fixed order (validated: CVD and normal-vision
   separation pass on white; three sit below 3:1 contrast, so the legend and the table carry them). */
.viz-root,
.bo-legend,
.bo-tooltip {
    --surface-1: var(--card-bg);
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --grid: var(--border);
    --s-bubble: #2a78d6;
    --s-selection: #eb6834;
    --s-insertion: #1baf7a;
    --s-shell: #eda100;
    --s-merge: #e87ba4;
    --s-quick: #008300;
    --s-heap: #6250d6;
}

.bo-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.bo-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.bo-controls select {
    width: auto;
}

.bo-check input {
    width: auto;
}

.bo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 6px;
}

.bo-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.bo-legend-item:hover {
    background: var(--secondary-bg);
}

.bo-legend-item[aria-pressed="false"] {
    color: var(--text-muted);
    text-decoration: line-through;
}

.bo-legend-item[aria-pressed="false"] .bo-swatch {
    opacity: 0.25;
}

.bo-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--colour);
}

.bo-bubble_sort { --colour: var(--s-bubble); }
.bo-selection_sort { --colour: var(--s-selection); }
.bo-insertion_sort { --colour: var(--s-insertion); }
.bo-shell_sort { --colour: var(--s-shell); }
.bo-merge_sort { --colour: var(--s-merge); }
.bo-quick_sort { --colour: var(--s-quick); }
.bo-heap_sort { --colour: var(--s-heap); }

.bo-chart-wrap {
    position: relative;
}

#bigo_chart {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface-1);
}

.bo-grid {
    stroke: var(--grid);
    stroke-width: 1;
}

.bo-axis {
    stroke: #9aa5b1;
    stroke-width: 1;
}

.bo-tick {
    fill: var(--text-secondary);
    font: 11px Arial, sans-serif;
}

.bo-tick-y { text-anchor: end; }
.bo-tick-x { text-anchor: middle; }

.bo-label {
    fill: var(--text-secondary);
    font: 12px Arial, sans-serif;
    text-anchor: middle;
}

.bo-ref {
    fill: none;
    stroke: #9aa5b1;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.bo-ref-label {
    fill: var(--text-secondary);
    font: italic 11px Arial, sans-serif;
}

.bo-line {
    fill: none;
    stroke: var(--colour);
    stroke-width: 2;
    stroke-linejoin: round;
}

.bo-dot {
    fill: var(--colour);
    stroke: var(--surface-1);
    stroke-width: 2;
}

.bo-cross {
    stroke: #6c757d;
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.bo-hit {
    fill: transparent;
    cursor: crosshair;
}

.bo-tooltip {
    position: absolute;
    min-width: 150px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--text-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    font-size: 0.85rem;
    pointer-events: none;
}

.bo-tooltip div {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.bo-details {
    margin-top: 10px;
}

.bo-details summary {
    cursor: pointer;
    color: var(--accent);
}

.bo-table-wrap {
    overflow-x: auto;
    margin-top: 8px;
}