/* ==========================================================================
   Classification rules (AI-1825): master-detail inside the one settings card,
   the rules as a quiet list on the left, a hairline, the editor on the right.
   ========================================================================== */

.cr-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    align-items: start;
}

.cr-left {
    min-width: 0;
    padding-right: 20px;
    border-right: 1px solid var(--ui-divider);
}

.cr-right {
    min-width: 0;
    padding-left: 28px;
}

/* The editor's first section sits level with the list; the column border already separates. */
.cr-right > .ui-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.cr-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-list__group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 4px;
    color: var(--ui-text-3);
}

.cr-list__group:first-child {
    padding-top: 0;
}

.cr-rule {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms var(--ui-ease);
}

.cr-rule:hover {
    background: var(--ui-bg-hover);
}

.cr-rule:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.cr-rule.is-selected {
    background: var(--ui-bg-active);
}

.cr-rule__title {
    font-size: 0.875rem;
    font-weight: 500;
}

.cr-rule.is-selected .cr-rule__title {
    color: var(--ui-accent);
    font-weight: 600;
}

.cr-rule__meta {
    max-width: 100%;
    overflow: hidden;
    color: var(--ui-text-2);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 959px) {
    .cr-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-left {
        padding: 0 0 16px;
        border-right: 0;
        border-bottom: 1px solid var(--ui-divider);
    }

    .cr-right {
        padding: 20px 0 0;
    }
}