/* Valure Connect: what My Valure's styles (my/my.css) don't have */

/* A heading with a link on the right */
.cn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cn-head .my-subtitle { margin-bottom: 12px; }

/* Analytics on Home */
.cn-analytics { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.cn-panel { padding: 24px; border-radius: 20px; background: #f5f5f7; }
.cn-panel__label { margin: 0; font-size: 0.8125rem; color: #6e6e73; }
.cn-panel__value { margin: 6px 0 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cn-panel__empty { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.5; color: #6e6e73; }
.cn-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 18px; }
.cn-bar { flex: 1; min-height: 4px; border-radius: 6px 6px 3px 3px; background: var(--brand); opacity: 0.85; transform-origin: bottom; animation: cn-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cn-bar:nth-child(odd) { animation-delay: 0.04s; }
.cn-bar[style*="height: 4%"] { background: #dfe2e8; opacity: 1; }
@keyframes cn-grow { from { transform: scaleY(0); } to { transform: none; } }
.cn-best { list-style: none; margin: 12px 0 0; padding: 0; }
.cn-best li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid #e6e8ee; font-size: 0.9375rem; color: var(--ink); }
.cn-best li:first-child { border-top: 0; }
.cn-best li span:last-child { color: #6e6e73; }

@media (max-width: 800px) { .cn-analytics { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cn-bar { animation: none; } }

/* The red number on "Needs a decision": how many are waiting */
.cn-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
  border-radius: 999px; background: #ff3b30; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) { .cn-badge { margin-left: 8px; } }

/* The list of things to decide */
.my-lead + .cn-requests { margin-top: 28px; }
.cn-requests { list-style: none; margin: 0; padding: 0 18px; border-radius: 16px; border: 1px solid #e6e8ee; }
.cn-request { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.cn-request + .cn-request { border-top: 1px solid #e6e8ee; }
.cn-request__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cn-request__text strong { font-weight: 600; color: var(--ink); }
.cn-request__text span { font-size: 0.8125rem; color: #6e6e73; }
.cn-chip { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.cn-chip--blue { background: #e8ebff; color: var(--brand); }
.cn-chip--amber { background: #fdf3e1; color: #8a5a00; }
.cn-chip--red { background: #fdecea; color: #b42318; }
.cn-chip--grey { background: #eef0f3; color: #646a78; }

/* Team */
.my-lead + .cn-people { margin-top: 28px; }
.cn-people { list-style: none; margin: 0; padding: 0 18px; border-radius: 16px; border: 1px solid #e6e8ee; }
.cn-person { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 0; }
.cn-person + .cn-person { border-top: 1px solid #e6e8ee; }
.cn-person__pic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e8ebff; color: var(--brand); font-weight: 600; object-fit: cover; }
.cn-person__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cn-person__text strong { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cn-person__text span { font-size: 0.8125rem; color: #6e6e73; }
.cn-person__role { font-size: 0.9375rem; color: #6e6e73; }
.cn-role, .cn-input {
  height: 40px; padding: 0 14px; border: 1px solid #e3e3e8; border-radius: 12px; background: #fff;
  color: var(--ink); font: inherit; font-size: 0.9375rem;
}
.cn-role { padding-right: 32px; }
.cn-role:focus-visible, .cn-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cn-remove {
  flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  color: #b42318; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.cn-remove:hover { background: #fdecea; }
.cn-remove.is-sure { background: #d92d20; color: #fff; }
.cn-remove:disabled { opacity: 0.6; cursor: default; }

.cn-add__row { display: flex; flex-wrap: wrap; gap: 10px; }
.cn-input { flex: 1 1 220px; }
.cn-input--role { flex: 0 0 auto; }
.cn-add__button {
  height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--brand); color: #fff;
  font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.cn-add__button:hover { background: #0005d1; }
.cn-add__button:disabled { opacity: 0.6; cursor: default; }
.cn-status { min-height: 1.4em; margin: 10px 0 0; font-size: 0.875rem; color: #6e6e73; }
.cn-status[data-kind="good"] { color: #14702f; }
.cn-status[data-kind="bad"] { color: #b42318; }