/**
 * Structured Skill Picker (L2) styles — D1 "The Codex".
 * Consumes css/codex.css tokens (with fallbacks if absent).
 */
.skillPicker {
    --sp-line: var(--line-2, #d8d0bd);
    --sp-gold: var(--gold, #c4942f);
    --sp-gold-deep: var(--gold-deep, #9c7420);
    --sp-soft: var(--gold-soft, #f6ecd4);
    --sp-muted: var(--muted, #86816f);
    --sp-text: var(--ink, #1a1b20);
    --sp-card: var(--card, #fff);
    position: relative;
}

.skillPicker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skillPicker-chips:not(:empty) { margin-bottom: 8px; }

.skillPicker-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sp-soft);
    color: var(--sp-gold-deep);
    border: 1px solid var(--gold-line, #e7d3a3);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 13px; font-weight: 600; line-height: 1.3;
}

.skillPicker-chipX {
    border: none;
    background: rgba(196, 148, 47, .16);
    color: var(--sp-gold-deep);
    width: 18px; height: 18px; border-radius: 50%;
    font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    transition: background .15s;
}
.skillPicker-chipX:hover { background: rgba(196, 148, 47, .32); }

.skillPicker-inputRow { position: relative; }

.skillPicker-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px; font-family: var(--font-body, sans-serif);
    border: 1px solid var(--sp-line);
    border-radius: 8px; box-sizing: border-box;
    color: var(--sp-text); background: var(--sp-card);
}
.skillPicker-input:focus {
    outline: none;
    border-color: var(--sp-gold);
    box-shadow: 0 0 0 3px var(--sp-soft);
}

.skillPicker-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    max-height: 280px; overflow-y: auto;
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(26, 27, 32, .14);
}

.skillPicker-option {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid var(--line, #e6e0d1);
}
.skillPicker-option:last-child { border-bottom: none; }
.skillPicker-option.is-active { background: var(--sp-soft); }

.skillPicker-optName { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.skillPicker-optMeta { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--sp-muted); }

.skillPicker-empty { padding: 10px 12px; font-size: 13px; color: var(--sp-muted); }