/* Compliance app. Builds on ui.css tokens (--u-*). */

/* ---------- Hero: the score, the bar, the numbers ---------- */
.cw-comp__hero{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:28px;align-items:center}
.cw-comp__hero.is-flat{grid-template-columns:minmax(0,1fr)}
.cw-comp__hero-score{display:grid;justify-items:center;gap:12px;text-align:center}
.cw-comp__hero-side{display:grid;gap:18px;min-width:0}
.cw-comp__hero-note{margin:0;font-size:13px;color:var(--u-mut);line-height:1.5;max-width:34ch}

/* The ring */
.cw-comp__ring{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px}
.cw-comp__ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.cw-comp__ring circle{stroke-linecap:round}
.cw-comp__ring-bg{stroke:var(--u-soft)}
.cw-comp__ring-fg{stroke:var(--u-a);transition:stroke-dashoffset .6s cubic-bezier(.22,.61,.36,1)}
.cw-comp__ring.is-good .cw-comp__ring-fg{stroke:var(--u-g)}
.cw-comp__ring.is-mid .cw-comp__ring-fg{stroke:var(--u-am)}
.cw-comp__ring.is-bad .cw-comp__ring-fg{stroke:var(--u-red)}
.cw-comp__ring-num{position:relative;font-size:34px;font-weight:650;letter-spacing:-.02em;color:var(--u-ink);font-variant-numeric:tabular-nums}
.cw-comp__ring-cap{position:relative;margin-top:2px;font-size:12.5px;color:var(--u-mut)}

/* The bar of the monitors */
.cw-comp__bar{display:flex;height:10px;border-radius:999px;background:var(--u-soft);overflow:hidden}
.cw-comp__bar-seg{display:block;height:100%}
.cw-comp__bar-seg.is-ok{background:var(--u-g)}
.cw-comp__bar-seg.is-warn{background:var(--u-am)}
.cw-comp__bar-seg.is-bad{background:var(--u-red)}
.cw-comp__barkeys{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;color:var(--u-mut)}
.cw-comp__key{display:inline-flex;align-items:center;gap:6px}
.cw-comp__key b{color:var(--u-ink);font-variant-numeric:tabular-nums}
.cw-comp__key i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cw-comp__key i.is-ok{background:var(--u-g)}
.cw-comp__key i.is-warn{background:var(--u-am)}
.cw-comp__key i.is-bad{background:var(--u-red)}

/* The number cards */
.cw-comp__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cw-comp__card{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--u-line);border-radius:12px;background:var(--u-soft);min-width:0}
.cw-comp__card-n{font-size:24px;font-weight:650;letter-spacing:-.02em;color:var(--u-ink);font-variant-numeric:tabular-nums;line-height:1.1}
.cw-comp__card-l{font-size:12.5px;color:var(--u-mut);overflow-wrap:anywhere}

/* ---------- The list of the monitors ---------- */
.cw-comp__list{display:grid;gap:10px}
.cw-comp__row{display:flex;align-items:center;gap:18px;padding:14px 16px;border:1px solid var(--u-line);border-radius:12px;background:var(--u-card);min-width:0}
.cw-comp__row.is-warn{border-color:color-mix(in srgb,var(--u-am) 34%,var(--u-line))}
.cw-comp__row.is-bad{border-color:color-mix(in srgb,var(--u-red) 34%,var(--u-line))}
.cw-comp__row-main{flex:1;min-width:0}
.cw-comp__row-t{display:inline-block;font-size:15.5px;font-weight:600;color:var(--u-ink);text-decoration:none;overflow-wrap:anywhere}
.cw-comp__row-t:hover{color:var(--u-a);text-decoration:underline}
.cw-comp__row-d{margin:3px 0 0;font-size:13px;color:var(--u-mut);line-height:1.45;overflow-wrap:anywhere}
.cw-comp__row-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:8px 0 0;font-size:12.5px;color:var(--u-mut)}
.cw-comp__row-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
.cw-comp__count{font-size:12.5px;color:var(--u-mut);font-variant-numeric:tabular-nums}
.cw-comp__open{font-size:13px;font-weight:500;color:var(--u-a);text-decoration:none;white-space:nowrap}
.cw-comp__open:hover{text-decoration:underline}
.cw-comp__sev{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.cw-comp__sev.is-low{color:var(--u-gr);background:var(--u-gr-bg)}
.cw-comp__sev.is-medium{color:var(--u-am);background:var(--u-am-bg)}
.cw-comp__sev.is-high{color:var(--u-red);background:var(--u-red-bg)}
.cw-comp__owner{display:inline-flex;align-items:center;gap:6px}

/* ---------- The ✦ AI panel ---------- */
.cw-comp__ai{display:grid;gap:12px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--u-vi) 26%,var(--u-line));border-radius:var(--u-r);background:color-mix(in srgb,var(--u-vi) 6%,var(--u-card))}
.cw-comp__ai header{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--u-ink)}
.cw-comp__spark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--u-vi-bg);color:var(--u-vi);font-size:13px}
.cw-comp__ai-text{margin:0;font-size:14px;line-height:1.55;color:var(--u-ink)}
.cw-comp__ai-text.is-muted{color:var(--u-mut)}
.cw-comp__ai-fine{margin:0;font-size:12.5px;color:var(--u-mut)}
.cw-comp__ai-acts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.cw-comp__ai-acts li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px solid var(--u-line);border-radius:10px;background:var(--u-card)}
.cw-comp__ai-acts li.is-done{opacity:.7}
.cw-comp__ai-kind{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:var(--u-soft);color:var(--u-mut)}
.cw-comp__ai-kind.is-remind{background:var(--u-vi-bg);color:var(--u-vi)}
.cw-comp__ai-kind.is-task{background:var(--u-g-bg);color:var(--u-g)}
.cw-comp__ai-kind.is-manager{background:var(--u-am-bg);color:var(--u-am)}
.cw-comp__ai-what{flex:1;min-width:0;font-size:14px;color:var(--u-ink);overflow-wrap:anywhere}
.cw-comp__ai-done{font-size:12.5px;color:var(--u-g)}
.cw-comp__ai-go{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--u-vi);border-radius:999px;background:var(--u-vi);color:#fff;font-size:13px;font-weight:500;cursor:pointer}
.cw-comp__ai-go:hover{background:color-mix(in srgb,var(--u-vi) 86%,#000)}
.cw-comp__ai-clear{padding:0;border:0;background:none;color:var(--u-mut);font-size:12.5px;text-decoration:underline;cursor:pointer}
.cw-comp__ai form{display:inline}

/* ---------- The panel of an action (assign, exception, snooze) ---------- */
.cw-comp__panel{display:grid;gap:12px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--u-a) 26%,var(--u-line));border-radius:var(--u-r);background:color-mix(in srgb,var(--u-a) 4%,var(--u-card))}
.cw-comp__panel h3{margin:0;font-size:16px;font-weight:600;color:var(--u-ink)}
.cw-comp__panel p{margin:0;font-size:13.5px;color:var(--u-mut);line-height:1.5}
.cw-comp__form{display:grid;gap:14px}
.cw-comp__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 18px}
.cw-comp__field{display:grid;gap:6px;min-width:0}
.cw-comp__field > span{font-size:13px;font-weight:600;color:var(--u-ink)}
.cw-comp__field input,.cw-comp__field select{width:100%;box-sizing:border-box;max-width:100%;min-width:0;padding:10px 12px;border:1px solid var(--u-line);border-radius:10px;background:var(--u-card);color:var(--u-ink);font:inherit;font-size:14px}
.cw-comp__field input:focus,.cw-comp__field select:focus{outline:none;border-color:var(--u-a);box-shadow:0 0 0 3px var(--u-vi-bg)}
.cw-comp__field input[type=file]{padding:12px;border-style:dashed;color:var(--u-mut);font-size:13px}
.cw-comp__btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 18px;border:0;border-radius:999px;background:var(--u-a);color:#fff;font-size:14px;font-weight:500;cursor:pointer}
.cw-comp__btn:hover{background:color-mix(in srgb,var(--u-a) 88%,#000)}
.cw-comp__cancel{justify-self:start;font-size:13px;color:var(--u-mut);text-decoration:underline}

/* ---------- The items ---------- */
.cw-comp__who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.cw-comp__late{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--u-red);background:var(--u-red-bg)}
.cw-comp__fix{font-size:13px;font-weight:500;color:var(--u-a);text-decoration:none;white-space:nowrap}
.cw-comp__fix:hover{text-decoration:underline}
.cw-comp__act{display:inline-block;margin-right:10px;font-size:12.5px;font-weight:500;color:var(--u-a);text-decoration:none;white-space:nowrap}
.cw-comp__act:hover{text-decoration:underline}
.cw-comp__act.is-btn{padding:4px 10px;border:1px solid var(--u-line);border-radius:999px;color:var(--u-mut);cursor:pointer;background:var(--u-card);font-size:12px}
.cw-comp__act.is-btn:hover{border-color:var(--u-red);color:var(--u-red);text-decoration:none}
.cw-comp__inline{display:inline}
td .cw-comp__form,.crp-head-acts .cw-comp__form,.cw-ui-head__acts .cw-comp__form{display:inline-flex;margin:0 6px 4px 0;vertical-align:middle}
.cw-comp__fine{font-size:12.5px;color:var(--u-mut)}
.cw-comp__h4{margin:18px 0 10px;font-size:14px;font-weight:600;color:var(--u-ink)}
.cw-comp__stat{display:flex;align-items:center;justify-content:center;min-height:40px}

/* ---------- The settings of the monitors ---------- */
.cw-comp__mons{display:grid;gap:14px}
.cw-comp__mon{padding:16px;border:1px solid var(--u-line);border-radius:12px;background:var(--u-soft)}
.cw-comp__mon.is-off{opacity:.6}
.cw-comp__mon-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.cw-comp__mon-head b{font-size:15px;font-weight:600;color:var(--u-ink)}
.cw-comp__mon-head p{margin:3px 0 0;font-size:13px;color:var(--u-mut);line-height:1.45}
.cw-comp__switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto;margin-top:2px}
.cw-comp__switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cw-comp__switch span{position:absolute;inset:0;border-radius:999px;background:var(--u-gr-bg);transition:background .15s ease;pointer-events:none}
.cw-comp__switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease}
.cw-comp__switch input:checked + span{background:var(--u-a)}
.cw-comp__switch input:checked + span::after{transform:translateX(18px)}
.cw-comp__switch input:focus-visible + span{outline:2px solid var(--u-a);outline-offset:2px}

/* ---------- Small screens ---------- */
@media (max-width:760px){
	.cw-comp__hero{grid-template-columns:minmax(0,1fr);gap:20px}
	.cw-comp__hero-note{max-width:none}
	.cw-comp__row{flex-direction:column;align-items:stretch;gap:12px}
	.cw-comp__row-end{justify-content:flex-start}
	.cw-comp__ring{width:132px;height:132px}
	.cw-comp__ring-num{font-size:30px}
}
@media (max-width:420px){
	.cw-comp__cards{gap:8px}
	.cw-comp__card{padding:10px}
	.cw-comp__card-n{font-size:21px}
	.cw-comp__ai,.cw-comp__panel{padding:16px}
}
@media (prefers-reduced-motion:reduce){
	.cw-comp__ring-fg{transition:none}
	.cw-comp__switch span,.cw-comp__switch span::after{transition:none}
}