/* Partial Inspector Styles
 * Visual overlay for section/partial inspection in debug mode
 * Toggle with Ctrl+Shift+P
 */

/* Partial/section highlight outline - uses outline to not affect layout */
.inspector-highlight {
    outline: 2px solid #3eb4fb;
    outline-offset: -2px;
}

/* Section label */
.inspector-label {
    position: absolute;
    z-index: 9990;
    background: #17232a;
    color: white;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.inspector-label:hover {
    background: #2d3a44;
    transform: scale(1.02);
}

/* Label parts */
.inspector-label-name {
    color: #3eb4fb;
}

.inspector-label-figma {
    color: #9ca3af;
    font-size: 10px;
    margin-left: 6px;
}

.inspector-label-figma::before {
    content: "•";
    margin-right: 6px;
}

/* Frontmatter key label */
.inspector-label-fm {
    color: #a78bfa;
    font-size: 10px;
    margin-left: 6px;
}

.inspector-label-fm::before {
    content: "•";
    margin-right: 6px;
    color: #9ca3af;
}

/* Inspector toggle button in debug panel */
.inspector-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-gray1);
    border: 1px solid var(--color-gray3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    font-size: 12px;
    color: var(--color-gray7);
}

.inspector-toggle:hover {
    border-color: var(--color-primary-blue-brand);
    color: var(--color-primary-blue-brand);
}

.inspector-toggle.active {
    background: var(--color-primary-blue-brand);
    border-color: var(--color-primary-blue-brand);
    color: white;
}

.inspector-toggle svg {
    width: 16px;
    height: 16px;
}

/* Status indicator - shows section count */
.inspector-status {
    font-size: 10px;
    color: var(--color-gray5);
    margin-left: auto;
}

.inspector-toggle.active .inspector-status {
    color: rgba(255, 255, 255, 0.8);
}

/* Keyboard shortcut in debug panel */
.inspector-shortcut {
    font-size: 10px;
    color: var(--color-gray5);
    margin-top: 4px;
}

.inspector-shortcut kbd {
    background: var(--color-gray2);
    border: 1px solid var(--color-gray3);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 9px;
    font-family: monospace;
}