/* =================================================================
   ds/ds-core.css
   Auto-extracted from math.css (2026-05-11).
   Loaded via config/js-manifest.php → templates/partials/head-styles.php.
   ================================================================= */

/* ============================================================
 * Data Structures Visualizer (stl-*, ds-advanced)
 * ============================================================ */

.math-ds-panel {
    /* --ds-speed is set inline by JS (MathDsCore.applySpeed) — baseline 1.2s @ ×1.0.
       Fallback kept for first paint before JS init. */
    --ds-speed: 1.2s;
    --ds-node-size: 40px;
    --ds-level-gap: 64px;
    --ds-highlight: #f59e0b;
    --ds-visited: #10b981;
    --ds-path: #f59e0b;
    --ds-red: #ef4444;
    --ds-black: #1f2937;
}

.math-ds-placeholder {
    padding: 24px;
    text-align: center;
    color: var(--math-text-muted);
    background: var(--math-surface-alt);
    border: 1px dashed var(--math-border);
    border-radius: var(--math-radius-md);
    font-size: 14px;
    line-height: 1.6;
}

.math-ds-result { min-height: 320px; position: relative; overflow-x: auto; }
.math-ds-viz    { position: relative; min-height: 280px; padding: 12px; }
.math-ds-lastop {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    padding: 6px 10px;
    background: var(--math-surface-alt);
    border-radius: var(--math-radius-sm);
    margin-bottom: 12px;
    display: inline-block;
    color: var(--math-text-soft);
}
.math-ds-lastop .op   { color: var(--math-primary); font-weight: 600; }
.math-ds-lastop .note { color: var(--math-warning); margin-left: 8px; }

.math-ds-bigo-table {
    display: grid;
    grid-template-columns: 1fr 72px 72px 84px;
    gap: 4px 10px;
    font-size: 12px;
    padding: 10px 12px;
    background: var(--math-surface-alt);
    border: 1px solid var(--math-border-light);
    border-radius: var(--math-radius-sm);
    margin-bottom: 12px;
}
.math-ds-bigo-table .h  { font-weight: 600; color: var(--math-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.math-ds-bigo-table .op { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--math-text); }
.math-ds-bigo-table .c  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--math-text-soft); }

.math-ds-bigo-chip {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
}
.math-btn-secondary .math-ds-bigo-chip,
.math-btn-ghost .math-ds-bigo-chip { background: var(--math-primary-soft); color: var(--math-primary); }

.math-ds-actions { gap: 8px; flex-wrap: wrap; }
.math-ds-actions .math-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ─── Speed slider (continuous 0.1× … 2.0×) ─────────────── */
/* Speed control lives on its own dedicated input-row above Value/Index.
   Field spans the full row width — matches the Value-input row below it. */
.math-ds-speed-field {
    flex: 1 1 100%;
    width: 100%;
}
.math-ds-speed-control {
    --fill-pct: 47.37%; /* (1.0 - 0.1) / 1.9 = 0.4737 — default for v=1.0 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 6px;
    background: var(--math-surface-alt);
    border: 1px solid var(--math-border);
    border-radius: 10px;
    height: 54px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Stacked track: clickable ticks above the slider */
.math-ds-speed-track {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}
.math-ds-speed-ticks {
    position: relative;
    height: 14px;
    flex: 0 0 14px;
}
.math-ds-speed-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    color: var(--math-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.math-ds-speed-tick:hover { color: var(--math-primary); background: var(--math-primary-soft); }
.math-ds-speed-tick:active { transform: translateX(-50%) scale(0.94); }
.math-ds-speed-tick::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 3px;
    background: var(--math-border);
    transform: translateX(-50%);
    margin-top: 1px;
    pointer-events: none;
}
.math-ds-speed-control:hover { border-color: var(--math-primary); }
.math-ds-speed-control:focus-within {
    border-color: var(--math-primary);
    box-shadow: 0 0 0 3px var(--math-primary-soft);
    background: var(--math-surface);
}

/* Slider — gradient-filled track */
.math-ds-speed-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: linear-gradient(
        to right,
        var(--math-primary) 0%,
        var(--math-primary) var(--fill-pct),
        var(--math-border) var(--fill-pct),
        var(--math-border) 100%
    );
}
.math-ds-speed-slider::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border: none;
    border-radius: 999px;
}
.math-ds-speed-slider::-moz-range-track {
    height: 8px;
    background: transparent;
    border: none;
    border-radius: 999px;
}
.math-ds-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--math-primary);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
    cursor: grab;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.math-ds-speed-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5), 0 0 0 6px var(--math-primary-soft);
}
.math-ds-speed-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.22);
}
.math-ds-speed-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--math-primary);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
    cursor: grab;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.math-ds-speed-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5), 0 0 0 6px var(--math-primary-soft);
}

/* Editable badge — `×` prefix + number input */
.math-ds-speed-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--math-primary);
    background: var(--math-primary-soft);
    padding: 4px 8px;
    border-radius: 7px;
    user-select: none;
    flex: 0 0 auto;
    cursor: text;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    margin: 0;
    line-height: 1;
}
.math-ds-speed-value:hover { background: rgba(99, 102, 241, 0.18); }
.math-ds-speed-value:focus-within {
    background: rgba(99, 102, 241, 0.22);
    box-shadow: inset 0 0 0 1px var(--math-primary);
}
.math-ds-speed-prefix {
    opacity: 0.7;
    pointer-events: none;
    margin-right: 1px;
}
.math-ds-speed-num {
    width: 32px;
    min-width: 32px;
    box-sizing: content-box;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 0;
    margin: 0;
    outline: none;
    cursor: text;
    -moz-appearance: textfield;
    appearance: textfield;
}
.math-ds-speed-num::-webkit-outer-spin-button,
.math-ds-speed-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.math-ds-speed-num:focus { cursor: text; }

/* Speed control no longer competes with Value/Index on the same row,
   so no narrow-viewport overrides are needed — `flex: 1 1 100%` above
   naturally fills the dedicated row regardless of viewport width. */

/* Array-style rendering (vector, deque) */
.math-ds-array {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 8px 0;
}
.math-ds-array-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-width: 52px;
    height: 58px;
    border: 1px solid var(--math-border);
    border-radius: var(--math-radius-sm);
    margin-right: -1px;
    background: var(--math-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    transition: background var(--ds-speed), transform var(--ds-speed), border-color var(--ds-speed);
}
.math-ds-array-cell .idx { font-size: 10px; color: var(--math-text-muted); padding-top: 3px; }
.math-ds-array-cell .val { font-weight: 600; font-size: 14px; padding: 6px 8px; color: var(--math-text); }
.math-ds-array-cell.highlight { background: var(--ds-highlight); border-color: var(--ds-highlight); }
.math-ds-array-cell.highlight .val { color: #fff; }
.math-ds-array-cell.found     { background: var(--ds-visited); border-color: var(--ds-visited); }
.math-ds-array-cell.found .val { color: #fff; }
.math-ds-array-cell.landing   { animation: ds-cell-pop var(--ds-speed) both; }

/* Linked-list (list) */
.math-ds-linked {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 8px 0;
}
.math-ds-linked-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 40px;
    padding: 0 10px;
    background: var(--math-primary);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--math-radius-sm);
    transition: background var(--ds-speed), transform var(--ds-speed);
}
.math-ds-linked-node.highlight { background: var(--ds-highlight); }
.math-ds-linked-node.found     { background: var(--ds-visited); }
.math-ds-linked-arrow {
    font-family: ui-monospace, monospace;
    color: var(--math-text-muted);
    padding: 0 6px;
    font-size: 16px;
    user-select: none;
}

/* Hash buckets (unordered, hash-table) */
.math-ds-buckets {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.math-ds-bucket {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--math-border-light);
    transition: background var(--ds-speed);
}
.math-ds-bucket .idx {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    width: 48px;
    color: var(--math-text-muted);
    flex-shrink: 0;
}
.math-ds-bucket .chain {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}
.math-ds-bucket .chain .item {
    padding: 3px 8px;
    background: var(--math-primary-soft);
    color: var(--math-primary);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.math-ds-bucket.hit        { animation: ds-bucket-hit var(--ds-speed) both; }
.math-ds-bucket.hit .item.target { background: var(--ds-highlight); color: #fff; }

/* Stack / Queue / Priority Queue */
.math-ds-stack, .math-ds-queue {
    display: flex;
    gap: 4px;
    padding: 12px 0;
}
.math-ds-stack  { flex-direction: column-reverse; align-items: flex-start; }
.math-ds-queue  { flex-direction: row; overflow-x: auto; }
.math-ds-stack-item, .math-ds-queue-item {
    min-width: 60px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--math-primary);
    color: #fff;
    border-radius: var(--math-radius-sm);
    font-family: ui-monospace, monospace;
    font-weight: 600;
    font-size: 13px;
    transition: transform var(--ds-speed), opacity var(--ds-speed);
}
.math-ds-stack-item.top, .math-ds-queue-item.front { box-shadow: 0 0 0 3px var(--ds-highlight); }
.math-ds-stack-item.landing, .math-ds-queue-item.landing { animation: ds-cell-pop var(--ds-speed) both; }
.math-ds-queue-markers { display: flex; gap: 4px; font-size: 10px; color: var(--math-text-muted); font-family: ui-monospace, monospace; margin-top: 4px; }

/* Tree (BST, AVL, RBT, Heap, Trie, Union-Find forest) */
.math-ds-tree {
    position: relative;
    width: 100%;
    min-height: 280px;
    overflow: auto;
}
.math-ds-tree-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.math-ds-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-node-size);
    height: var(--ds-node-size);
    border-radius: 50%;
    background: var(--math-primary);
    color: #fff;
    font-family: ui-monospace, monospace;
    font-weight: 600;
    font-size: 13px;
    transform: translate(-50%, -50%);
    transition: left var(--ds-speed), top var(--ds-speed), background var(--ds-speed), box-shadow var(--ds-speed);
}
.math-ds-node.red     { background: var(--ds-red); }
.math-ds-node.black   { background: var(--ds-black); }
.math-ds-node.visited { background: var(--ds-visited); }
.math-ds-node.path    { box-shadow: 0 0 0 3px var(--ds-path); }
.math-ds-node.found   { background: var(--ds-visited); box-shadow: 0 0 0 3px var(--ds-highlight); }
.math-ds-node .subscript { font-size: 9px; opacity: 0.75; margin-left: 2px; }
.math-ds-edge        { stroke: var(--math-border); stroke-width: 2; fill: none; transition: stroke var(--ds-speed), stroke-width var(--ds-speed); }
.math-ds-edge.visited { stroke: var(--ds-visited); stroke-width: 2.5; }

/* Heap array strip under tree */
.math-ds-heap-array { display: flex; gap: 0; padding: 12px 0; margin-top: 8px; border-top: 1px dashed var(--math-border); }

/* Trie edge-label (letters) */
.math-ds-trie-label {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    fill: var(--math-text-soft);
    user-select: none;
}
.math-ds-node.word-end { box-shadow: 0 0 0 3px var(--ds-visited); }

/* RBT colors */
.math-ds-node.rbt-red   { background: var(--ds-red, #ef4444); color: #fff; border-color: #b91c1c; }
.math-ds-node.rbt-black { background: var(--ds-black, #1f2937); color: #fff; border-color: #111827; }

/* Graph */
.math-ds-graph { position: relative; width: 100%; min-height: 320px; }
.math-ds-graph-edge { stroke: var(--math-border); stroke-width: 2; fill: none; }
.math-ds-graph-edge.visited { stroke: var(--ds-visited); stroke-width: 3; }
.math-ds-graph-edge.directed { marker-end: url(#math-ds-arrowhead); }

/* Union-Find array viz */
.math-ds-uf-array { display: flex; flex-direction: column; gap: 8px; }
.math-ds-uf-row   { display: flex; align-items: center; gap: 6px; }
.math-ds-uf-row .label { font-family: ui-monospace, monospace; font-size: 11px; color: var(--math-text-muted); min-width: 56px; text-align: right; }
.math-ds-uf-cell  { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; height: 44px; border: 1px solid var(--math-border); border-radius: 6px; background: var(--math-surface-subtle); transition: background var(--ds-speed), border-color var(--ds-speed); }
.math-ds-uf-cell.highlight { border-color: var(--ds-highlight); background: rgba(245, 158, 11, 0.12); }
.math-ds-uf-cell.ghost     { opacity: 0.75; }
.math-ds-uf-cell .idx { font-size: 10px; color: var(--math-text-muted); }
.math-ds-uf-cell .val { font-size: 13px; font-family: ui-monospace, monospace; color: var(--math-text); }
.math-ds-uf-groups { margin-top: 10px; font-size: 12px; color: var(--math-text-soft); font-family: ui-monospace, monospace; }
.math-ds-uf-groups .label { color: var(--math-text-muted); margin-right: 6px; }
.math-ds-uf-groups .grp   { display: inline-block; margin-right: 8px; padding: 2px 8px; border: 1px solid var(--math-border); border-radius: 12px; background: var(--math-surface-subtle); }

/* Graph nodes */
.math-ds-graph-node circle { fill: var(--math-surface-subtle); stroke: var(--math-border); stroke-width: 2; transition: fill var(--ds-speed), stroke var(--ds-speed); }
.math-ds-graph-node text   { font-family: ui-monospace, monospace; font-size: 13px; fill: var(--math-text); }
.math-ds-graph-node.visited circle { fill: rgba(34, 197, 94, 0.25); stroke: var(--ds-visited); stroke-width: 2.5; }
.math-ds-graph-order       { font-size: 10px; fill: var(--ds-visited); font-family: ui-monospace, monospace; font-weight: 700; }
.math-ds-graph-edge.tracing { stroke: var(--ds-highlight); stroke-width: 3; }
.math-ds-graph-edge-arrow   { fill: var(--math-border); }

/* Animations */
@keyframes ds-cell-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes ds-node-land {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes ds-node-leave {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
@keyframes ds-bucket-hit {
    0%, 100% { background: transparent; }
    50%      { background: rgba(245, 158, 11, 0.18); }
}
@keyframes ds-path-trace {
    0%   { stroke-dashoffset: 40; }
    100% { stroke-dashoffset: 0; }
}

.math-ds-node.landing { animation: ds-node-land var(--ds-speed) both; }
.math-ds-node.leaving { animation: ds-node-leave var(--ds-speed) both; }
.math-ds-edge.tracing { stroke-dasharray: 6 4; animation: ds-path-trace var(--ds-speed) linear both; }

@media (max-width: 640px) {
    .math-ds-bigo-table { grid-template-columns: 1fr 56px 56px 64px; font-size: 11px; }
    .math-ds-array-cell { min-width: 44px; height: 52px; }
    .math-ds-array-cell .val { font-size: 13px; }
    .math-ds-node { width: 34px; height: 34px; font-size: 11px; }
    .math-ds-panel { --ds-node-size: 34px; --ds-level-gap: 52px; }
}

/* ─── Carrier pill — floating value badge shared across all DS panels ───
   Emitted by assets/js/ds/ds-core.js for every DS tool. Used in BST/AVL/
   RBT, sequence, hash, stack/queue/PQ to make the incoming/outgoing
   value visible during search / scan / rotation phases. */
.math-ds-carrier {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 14;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow:
        0 8px 22px rgba(67,56,202,.55),
        0 0 0 3px rgba(255,255,255,.85),
        0 0 0 5px rgba(99,102,241,.35);
    transition:
        left .55s var(--asc-ease, cubic-bezier(.4,0,.2,1)),
        top .55s var(--asc-ease, cubic-bezier(.4,0,.2,1)),
        transform .28s var(--asc-ease, cubic-bezier(.4,0,.2,1)),
        opacity .28s var(--asc-ease, cubic-bezier(.4,0,.2,1)),
        background .25s ease;
    opacity: 0;
}
.math-ds-carrier::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(255,255,255,.4);
    z-index: -1;
}
.math-ds-carrier.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.math-ds-carrier.dropping {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
}
.math-ds-carrier .carrier-label {
    opacity: .85;
    font-weight: 600;
    margin-right: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.math-ds-carrier .carrier-value {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .02em;
}
.math-ds-carrier.carrier-insert {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow:
        0 8px 22px rgba(67,56,202,.55),
        0 0 0 3px rgba(255,255,255,.85),
        0 0 0 5px rgba(99,102,241,.35);
}
.math-ds-carrier.carrier-erase {
    background: linear-gradient(135deg, #f43f5e, #be123c);
    box-shadow:
        0 8px 22px rgba(190,18,60,.55),
        0 0 0 3px rgba(255,255,255,.85),
        0 0 0 5px rgba(244,63,94,.35);
}
.math-ds-carrier.carrier-found {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow:
        0 8px 22px rgba(5,150,105,.55),
        0 0 0 3px rgba(255,255,255,.85),
        0 0 0 5px rgba(16,185,129,.35);
}
.math-ds-carrier.carrier-pulsing {
    animation: ds-carrier-pulse 1.0s ease-in-out infinite;
}
@keyframes ds-carrier-pulse {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: brightness(1.25) drop-shadow(0 0 8px rgba(99,102,241,.6));
    }
}