/* Config module (WP-K): custom fields and objects, layouts, rules, templates, packages, flags, developer tools. */


.cf-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.cf-side { display: grid; gap: 14px; min-width: 0; }
.cf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cf-card { border: 1px solid var(--line, #e3e8ef); border-radius: 10px; padding: 12px 14px; background: var(--card, #fff); display: flex; flex-direction: column; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
a.cf-card:hover { border-color: #0a6fd2; box-shadow: 0 1px 6px rgba(10, 111, 210, .12); }
.cf-card h3 { font-size: 14px; margin: 0; display: flex; gap: 8px; align-items: center; }
.cf-card h3 i { color: #0a6fd2; }
.cf-card p { margin: 0; font-size: 12.5px; color: var(--muted); }
.cf-card .foot { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.cf-card.on { border-color: #12a079; box-shadow: inset 3px 0 0 #12a079; }
.cf-group { margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cf-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: #f1f5f9; color: #334155; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.cf-rows { display: grid; gap: 6px; }
.cf-rowhead, .cf-fieldrow { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr 1.4fr 70px; gap: 6px; align-items: start; }
.cf-rowhead { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cf-fieldrow input, .cf-fieldrow select, .cf-fieldrow textarea { width: 100%; min-width: 0; }
.cf-fieldrow textarea { min-height: 34px; height: 34px; resize: vertical; }
.cf-fieldrow .ct-check { padding-top: 7px; }
.cf-fieldrow.retired { opacity: .6; }
.cf-sections { display: grid; gap: 10px; }
.cf-section { border: 1px solid var(--line, #e3e8ef); border-radius: 8px; padding: 10px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cf-chip { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: #eaf2f9; color: #2f5f88; white-space: nowrap; }
.cf-chip.add { background: #e6f6ef; color: #0f7a55; } .cf-chip.del { background: #fdeaea; color: #a3233a; } .cf-chip.chg { background: #fff4dc; color: #8a5a00; } .cf-chip.off { background: #eef1f4; color: #5b6b7f; }
.cf-diff td { vertical-align: top; }
.cf-diff .old { color: #a3233a; text-decoration: line-through; word-break: break-word; }
.cf-diff .new { color: #0f7a55; word-break: break-word; }
.cf-diff pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; max-height: 160px; overflow: auto; }
.cf-meter { height: 8px; border-radius: 4px; background: #e9eef3; overflow: hidden; min-width: 80px; }
.cf-meter > span { display: block; height: 100%; background: #0a6fd2; }
.cf-risk-low { color: #0f7a55; } .cf-risk-medium { color: #8a5a00; } .cf-risk-high { color: #a3233a; }
.cf-code { background: #0f1c2b; color: #d7e6f5; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 10px 12px; border-radius: 8px; overflow: auto; white-space: pre; margin: 0; max-width: 100%; }
.cf-copy { display: flex; gap: 6px; align-items: center; }
.cf-copy input, .cf-copy textarea { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.cf-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.cf-switches li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.cf-inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cf-inline input, .cf-inline select { width: auto; }
.cf-dl-tight .ct-dl { row-gap: 4px; }
@media (max-width: 980px) { .cf-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
    .cf-rowhead { display: none; }
    .cf-fieldrow { grid-template-columns: 1fr 1fr; border-bottom: 1px dashed var(--line, #e3e8ef); padding-bottom: 8px; }
    .cf-section { grid-template-columns: minmax(0, 1fr); }
    .cf-cards { grid-template-columns: minmax(0, 1fr); }
}
.cf-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.cf-checks .ct-check { min-width: 0; overflow-wrap: anywhere; }