/* Card Break Mode Styles */

/* Sport/Category Colors — CSS Custom Properties from spec A1 */
:root {
    --cb-basketball: #E86830;
    --cb-football: #4CAF50;
    --cb-baseball: #D32F2F;
    --cb-soccer: #2196F3;
    --cb-hockey: #00BCD4;
    --cb-mma: #9C27B0;
    --cb-wrestling: #FF5722;
    --cb-golf: #8BC34A;
    --cb-racing: #607D8B;
    --cb-tennis: #009688;
    --cb-boxing: #880E4F;
    --cb-multi-sport: #795548;
    --cb-olympic: #CFB53B;
    --cb-pokemon: #F9D71C;
    --cb-yugioh: #7B1FA2;
    --cb-mtg: #1A237E;
    --cb-lorcana: #00695C;
    --cb-one-piece: #F44336;
    --cb-dragon-ball: #FF9800;
    --cb-flesh-and-blood: #B71C1C;
    --cb-union-arena: #5C6BC0;
    --cb-weiss-schwarz: #F06292;
    --cb-cardfight-vanguard: #AED581;
    --cb-digimon: #4FC3F7;
    --cb-star-wars-unlimited: #37474F;
    --cb-tcg-other: #CE93D8;
    --cb-marvel-dc: #C62828;
    --cb-star-wars: #212121;
    --cb-anime: #E91E63;
    --cb-music-entertainment: #AB47BC;
    --cb-movies-tv: #8D6E63;
    --cb-gaming: #2979FF;
    --cb-historical: #827717;
    --cb-nonsport-other: #78909C;
    --cb-vintage-pre1980: #A1887F;
    --cb-junk-wax: #90A4AE;
    --cb-vintage-pack-rip: #BFA76A;
    --cb-mixed-variety: #9E9E9E;
    --cb-unknown: #BDBDBD;
}

/* Value Tier Badges (from spec A8) */
.cb-value-grail { background: #B71C1C; color: white; animation: cb-pulse 2s ease-in-out infinite; }
.cb-value-ultra-high { background: #D32F2F; color: white; }
.cb-value-high { background: #E65100; color: white; }
.cb-value-mid { background: #F9A825; color: #333; }
.cb-value-notable { background: #2E7D32; color: white; }
.cb-value-moderate { background: #78909C; color: white; }
.cb-value-base { background: #E0E0E0; color: #666; }
.cb-value-unknown { background: #9E9E9E; color: white; }

@keyframes cb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(183,28,28,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(183,28,28,0); }
}

/* Mode Toggle */
.cb-mode-select { margin: 1rem 0; }
.cb-mode-buttons { display: flex; gap: 0.5rem; }
.cb-mode-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.cb-mode-btn:hover { border-color: #90CAF9; }
.cb-mode-btn.active { border-color: #1976D2; background: #E3F2FD; }
.cb-mode-btn strong { display: block; font-size: 14px; }
.cb-mode-btn small { color: #666; font-size: 12px; }

/* Progress Panel */
.cb-progress-panel { text-align: center; padding: 2rem; }
.cb-progress-bar-wrapper {
    width: 100%;
    height: 6px;
    background: #E0E0E0;
    border-radius: 3px;
    margin: 1rem 0;
    overflow: hidden;
}
#cb-progress-bar {
    height: 100%;
    background: #1976D2;
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s ease;
}
#cb-status-text { color: #666; font-size: 14px; }

/* Timeline Bar */
.cb-timeline {
    display: flex;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #F5F5F5;
}
.cb-timeline-segment {
    cursor: pointer;
    transition: opacity 0.15s;
    min-width: 2px;
}
.cb-timeline-segment:hover { opacity: 0.8; }
.cb-timeline-intermission { opacity: 0.4; cursor: default; }

/* Summary Dashboard */
.cb-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
}
.cb-stat-card {
    background: white;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cb-stat-value { font-size: 24px; font-weight: 700; color: #1a1f36; }
.cb-stat-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* Main Layout */
.cb-main-content { display: flex; gap: 24px; }
.cb-filter-sidebar { flex: 0 0 220px; }
.cb-clips-container { flex: 1; min-width: 0; }

/* Filter Sidebar */
.cb-filter-group { margin-bottom: 1.25rem; }
.cb-filter-group h4 { font-size: 12px; text-transform: uppercase; color: #999; letter-spacing: 0.5px; margin-bottom: 0.5rem; }
.cb-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 3px 0;
    cursor: pointer;
}
.cb-filter-item input { margin: 0; }
.cb-filter-count { color: #999; font-size: 11px; margin-left: auto; }
.cb-color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Badges */
.cb-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Clip Cards */
.cb-clip-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    margin-bottom: 12px;
    overflow: hidden;
}
.cb-clip-banner { height: 4px; }
.cb-clip-body { padding: 16px; }
.cb-clip-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cb-clip-title { font-size: 16px; font-weight: 600; color: #1a1f36; }
.cb-clip-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: #666; margin-bottom: 8px; }
.cb-moment-type { font-weight: 500; text-transform: capitalize; }
.cb-clip-time { color: #999; }
.cb-flag { font-size: 14px; }

/* Reaction/Entertainment meters */
.cb-clip-reaction { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #999; margin-bottom: 10px; }
.cb-reaction-label, .cb-entertainment-label { margin-right: 2px; margin-left: 8px; }
.cb-reaction-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #E0E0E0;
    display: inline-block;
}
.cb-reaction-dot.active { background: #FF5722; }
.cb-star { color: #E0E0E0; font-size: 13px; }
.cb-star.active { color: #FFC107; }

/* Thumbnail */
.cb-clip-thumb { width: 100%; max-width: 320px; border-radius: 6px; margin-bottom: 10px; }

/* Transcript excerpt */
.cb-clip-transcript {
    font-size: 13px;
    color: #555;
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.5;
}
.cb-clip-rationale { font-size: 12px; color: #888; margin-bottom: 8px; }

/* Tags */
.cb-clip-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-tag {
    background: #F5F5F5;
    color: #666;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}
.cb-tag:hover { background: #E0E0E0; }

/* Clip actions */
.cb-clip-actions { margin-top: 12px; display: flex; gap: 0.5rem; }
.cb-clip-media { margin-bottom: 10px; }

/* Thumbnail grid (4 color grades) */
.cb-thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cb-thumb-option {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s;
    text-align: center;
}
.cb-thumb-option:hover { transform: scale(1.03); }
.cb-thumb-option.selected { border-color: #1976D2; }
.cb-thumb-option img { width: 100%; display: block; border-radius: 4px 4px 0 0; }
.cb-thumb-label { display: block; font-size: 10px; color: #999; padding: 3px 0; text-transform: uppercase; letter-spacing: 0.3px; }

/* Results actions bar */
.cb-results-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Empty state */
.cb-empty { text-align: center; padding: 2rem; color: #999; }

/* Clip count */
#cb-clip-count { font-size: 13px; color: #999; margin-bottom: 1rem; }

/* Preview player */
.cb-clip-media { position: relative; }
.cb-clip-media video { width: 100%; max-width: 480px; border-radius: 6px; background: #000; }

/* Timeline scrubber */
.cb-trimmer { margin: 8px 0; }
.cb-trimmer-track {
    position: relative;
    height: 24px;
    background: #E8EAF0;
    border-radius: 4px;
    cursor: crosshair;
    margin-bottom: 6px;
}
.cb-trimmer-range {
    position: absolute;
    top: 0; height: 100%;
    background: rgba(37, 99, 235, 0.15);
    border-left: 2px solid #2563EB;
    border-right: 2px solid #2563EB;
    pointer-events: none;
}
.cb-trimmer-handle {
    position: absolute;
    top: -2px; width: 10px; height: 28px;
    background: #2563EB;
    border-radius: 3px;
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 3;
    transition: background 0.1s;
}
.cb-trimmer-handle:hover { background: #1d4ed8; }
.cb-trimmer-ghost {
    position: absolute;
    top: 0; width: 2px; height: 100%;
    background: #999;
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}
.cb-trimmer-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.cb-trimmer-time-group { display: flex; align-items: center; gap: 3px; }
.cb-trimmer-label { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; margin-right: 2px; }
.cb-trimmer-time {
    font-family: monospace; font-size: 13px; font-weight: 600; color: #2563EB;
    min-width: 50px; text-align: center;
}
.cb-trimmer-preview-btn {
    background: #E3F2FD; border: 1px solid #90CAF9; border-radius: 4px;
    padding: 4px 12px; font-size: 12px; cursor: pointer; color: #1565C0;
}
.cb-trimmer-preview-btn:hover { background: #BBDEFB; }
.cb-trimmer.edited .cb-trimmer-track { border: 2px solid #f59e0b; }

/* Hidden utility */
.hidden { display: none !important; }