/* Cache Keys section (§14: small, supplements the standard classes).
   Every custom property referenced here is defined in main.css :root — a token that is not
   defined fails SILENTLY in CSS, so these were checked against §2 rather than guessed. */

/* Pattern bar: the preset row and the free-glob input, above the results table. */
.cm-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cm-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.cm-presets-label {
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    margin-right: var(--spacing-xs);
}

/* The active preset, so it is visible which pattern the table is showing.
   Specificity is deliberate, not cargo-culted: `.btn-outline:hover:not(:disabled)` in main.css is
   (0,3,0) and repaints the button white-on-grey, so a bare `.cm-preset--active` (0,1,0) lost the
   cascade and the preset you had just clicked -- which keeps hover -- did not look selected at all.
   Verified in a headless run: the class was applied and the computed colour was still #fff.
   The hover pair keeps the active preset reading as active while the pointer is over it, which is
   the same intent as `.scope-toggle__btn:hover:not(--active)` in components.css; that shape is not
   reusable here because `.btn-outline` is shared and must not be modified for one section. */
.btn.btn-outline.cm-preset--active,
.btn.btn-outline.cm-preset--active:hover:not(:disabled) {
    border-color: var(--accent-main);
    color: var(--accent-main);
    background-color: transparent;
}

.cm-pattern-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.cm-pattern-input {
    flex: 1 1 320px;
    min-width: 220px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: var(--font-size-body-sm);
}

/* §23: the glob-vs-regex warning is a visible hint, never a placeholder. */
.cm-hint {
    color: var(--text-muted);
    font-size: var(--font-size-body-xs);
}

.cm-hint code {
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Keys are long and monospaced; let the cell wrap rather than stretch the table. */
.cm-key-cell {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: var(--font-size-body-xs);
    word-break: break-all;
}

.cm-type-cell,
.cm-tenant-cell {
    color: var(--text-secondary);
    font-size: var(--font-size-body-xs);
    white-space: nowrap;
}

/* A key the backend cannot parse a type from, and therefore will not delete (see cache-api §3). */
.cm-row--skipped .cm-key-cell {
    color: var(--text-muted);
}

.cm-skipped-note {
    color: var(--accent-caution);
    font-size: var(--font-size-body-xs);
    white-space: nowrap;
}

.cm-actions-cell {
    text-align: right;
    white-space: nowrap;
}

/* Standing warning above the results — the fan-out is not obvious from the button label. */
.cm-scope-note {
    color: var(--text-secondary);
    font-size: var(--font-size-body-xs);
    border-left: 2px solid var(--accent-caution);
    padding-left: var(--spacing-sm);
}