/* 10-section-extras.css: index.html@cd3fd3f lines 737-811 (section colour picker, swatches, custom colour input, 4K warning).
   06 T1 deleted the dead .section-color-0 ... .section-color-7 rules (no element ever used them).
   06 T4a (06 3.5): every swatch keeps its size (flex: none) and carries a faint inset ring (--color-swatch-ring), so a
   dark swatch stays visible on the card; the active swatch has the two-tone ring, a light 2 px border (16.87:1 on the
   card) plus an inset Morph Black ring (the better of the two is >= 3:1 on any fill, U5). The custom colour input
   takes the rest of the row (flex: 1, at least 28 px). The 4K warning uses the warning role tokens.
   Slice of the original <style> minus the deleted rules, rewritten to role tokens (css-slices.mjs --report-only lists
   the difference, 07 S7); link order = file number. Do not reorder rules across files. */
.section-color-picker {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.color-swatch-small {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px var(--color-swatch-ring);
    transition: all 0.2s ease;
}

.color-swatch-small:hover {
    transform: scale(1.1);
}

.color-swatch-small.active {
    border-color: var(--color-text-primary);
    box-shadow: inset 0 0 0 1px var(--color-bg-app);
}

.color-input-custom {
    flex: 1;
    min-width: 28px;
    width: 28px;
    height: 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.color-input-custom::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input-custom::-webkit-color-swatch {
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
}

.section-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 6px;
    margin-bottom: 12px;
    color: var(--color-warning);
    font-size: 11px;
}

.section-warning svg {
    flex-shrink: 0;
    stroke: var(--color-warning);
}

.warning-indicator {
    color: var(--color-warning);
    font-size: 12px;
}