/* ═══════════════════════════════════════════════════════════════════════════
   Depth Picker — three-tier analysis engine selector
   ════════════════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
    --dp-bg:            #0e1f35;
    --dp-border:        rgba(99,102,241,0.22);
    --dp-sel-border:    #00d4aa;
    --dp-sel-bg:        rgba(0,212,170,0.08);
    --dp-text:          #e2e8f0;
    --dp-muted:         rgba(148,163,184,0.8);
    --dp-label-size:    0.85rem;
    --dp-sla-color:     #00d4aa;
    --dp-desc-color:    #94a3b8;
    --dp-badge-bg:      rgba(245,158,11,0.15);
    --dp-badge-color:   #f59e0b;
    --dp-badge-border:  rgba(245,158,11,0.4);
    --dp-stripe:        #00d4aa;
    --dp-compact-bg:    rgba(14,31,53,0.96);
    --dp-compact-text:  #e2e8f0;
    --dp-change-color:  #94a3b8;
    --dp-locked-op:     0.55;
    --dp-focus-ring:    #00d4aa;
}

@media (prefers-color-scheme: light) {
    :root {
        --dp-bg:           #f8fafc;
        --dp-border:       rgba(99,102,241,0.2);
        --dp-sel-border:   #00a878;
        --dp-sel-bg:       rgba(0,168,120,0.07);
        --dp-text:         #1e293b;
        --dp-muted:        #475569;
        --dp-sla-color:    #007a58;
        --dp-desc-color:   #64748b;
        --dp-badge-bg:     rgba(217,119,6,0.1);
        --dp-badge-color:  #b45309;
        --dp-badge-border: rgba(217,119,6,0.3);
        --dp-stripe:       #00a878;
        --dp-compact-bg:   #ffffff;
        --dp-compact-text: #1e293b;
        --dp-change-color: #475569;
    }
}

:root[data-theme="dark"] {
    --dp-bg:            #0e1f35;
    --dp-border:        rgba(99,102,241,0.22);
    --dp-sel-border:    #00d4aa;
    --dp-sel-bg:        rgba(0,212,170,0.08);
    --dp-text:          #e2e8f0;
    --dp-muted:         rgba(148,163,184,0.8);
    --dp-sla-color:     #00d4aa;
    --dp-desc-color:    #94a3b8;
    --dp-badge-bg:      rgba(245,158,11,0.15);
    --dp-badge-color:   #f59e0b;
    --dp-badge-border:  rgba(245,158,11,0.4);
    --dp-stripe:        #00d4aa;
    --dp-compact-bg:    rgba(14,31,53,0.96);
    --dp-compact-text:  #e2e8f0;
    --dp-change-color:  #94a3b8;
}

:root[data-theme="light"] {
    --dp-bg:           #f8fafc;
    --dp-border:       rgba(99,102,241,0.2);
    --dp-sel-border:   #00a878;
    --dp-sel-bg:       rgba(0,168,120,0.07);
    --dp-text:         #1e293b;
    --dp-muted:        #475569;
    --dp-sla-color:    #007a58;
    --dp-desc-color:   #64748b;
    --dp-badge-bg:     rgba(217,119,6,0.1);
    --dp-badge-color:  #b45309;
    --dp-badge-border: rgba(217,119,6,0.3);
    --dp-stripe:       #00a878;
    --dp-compact-bg:   #ffffff;
    --dp-compact-text: #1e293b;
    --dp-change-color: #475569;
}

/* ── picker wrapper ───────────────────────────────────────────────────────── */
.dp-picker {
    width: 100%;
}

/* ── card grid ───────────────────────────────────────────────────────────── */
.dp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0 8px;
}

/* ── individual card ─────────────────────────────────────────────────────── */
.dp-card {
    background: var(--dp-bg);
    border: 1.5px solid var(--dp-border);
    border-radius: 8px;
    padding: 10px 12px 11px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
    outline: none;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.dp-card:hover:not(.dp-card--locked) {
    border-color: rgba(0,212,170,0.5);
    background: rgba(0,212,170,0.04);
}

.dp-card:focus-visible {
    box-shadow: 0 0 0 2px var(--dp-focus-ring);
}

.dp-card--sel {
    border-color: var(--dp-sel-border);
    background: var(--dp-sel-bg);
}

.dp-card--locked {
    opacity: var(--dp-locked-op);
    cursor: not-allowed;
}

/* ── card header (label + optional badge) ────────────────────────────────── */
.dp-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.dp-card__label {
    font-size: var(--dp-label-size);
    font-weight: 600;
    color: var(--dp-text);
    letter-spacing: 0.01em;
}

/* ── SLA line ─────────────────────────────────────────────────────────────── */
.dp-card__sla {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--dp-sla-color);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── description ─────────────────────────────────────────────────────────── */
.dp-card__desc {
    font-size: 0.76rem;
    color: var(--dp-desc-color);
    line-height: 1.45;
}

/* ── Bundle badge ────────────────────────────────────────────────────────── */
.dp-badge.dp-badge--bundle {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--dp-badge-bg);
    color: var(--dp-badge-color);
    border: 1px solid var(--dp-badge-border);
    white-space: nowrap;
}

/* ── shake animation for locked cards ────────────────────────────────────── */
@keyframes dp-shake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-4px); }
    35%       { transform: translateX(4px); }
    55%       { transform: translateX(-3px); }
    75%       { transform: translateX(3px); }
    90%       { transform: translateX(-1px); }
}

.dp-card--shake {
    animation: dp-shake 0.6s ease-in-out;
}

/* ── compact bar ─────────────────────────────────────────────────────────── */
.dp-picker--compact {
    padding: 4px 0;
}

.dp-compact {
    display: flex;
    align-items: center;
    height: 44px;
    background: var(--dp-compact-bg);
    border: 1.5px solid var(--dp-sel-border);
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
}

.dp-compact__stripe {
    width: 4px;
    height: 100%;
    background: var(--dp-stripe);
    flex-shrink: 0;
}

.dp-compact__info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 12px;
    min-width: 0;
    overflow: hidden;
}

.dp-compact__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dp-compact-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-compact__sla {
    font-size: 0.72rem;
    color: var(--dp-sla-color);
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dp-compact__change {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 14px;
    height: 100%;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--dp-change-color);
    cursor: pointer;
    transition: color 0.15s;
    border-left: 1px solid var(--dp-border);
}

.dp-compact__change:hover {
    color: var(--dp-sel-border);
}

/* ── mobile override — always full cards ──────────────────────────────────── */
@media (max-width: 899px) {
    .dp-cards {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 0 6px;
    }

    .dp-card {
        padding: 10px 14px 11px;
    }

    /* always show cards on mobile, even in compact state */
    .dp-picker--compact .dp-compact {
        display: none;
    }
    .dp-picker--compact::before {
        display: block;
        content: '';
    }
}

/* ── CE mid-page container ────────────────────────────────────────────────── */
.dp-picker-host-inline {
    margin: 0 0 14px;
}

/* ── save-bar mode chip ───────────────────────────────────────────────────── */
/* Small pill in the sticky save bar that mirrors the current depth selection.
   Clicking it scrolls to the depth picker cards below the questions.          */
.dp-mode-chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
}
.dp-mode-chip:hover {
    border-color: #00d4aa;
    color: #00d4aa;
}

/* ── print — hide the picker ──────────────────────────────────────────────── */
@media print {
    .dp-picker, #depth-picker-container, .dp-mode-chip { display: none !important; }
}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dp-card--shake { animation: none; }
    .dp-card { transition: none; }
}