/* 7 Colors charts (kh-viz.js). Inherits text colour, so it suits the light portals and the dark admin. */
.khc { width: 100%; height: auto; display: block; overflow: visible; }
.khc-grid { stroke: currentColor; opacity: .1; }
.khc-ax { fill: currentColor; opacity: .6; font-size: 11px; }
.khc-big { fill: currentColor; font-size: 20px; }
.khc-empty { padding: 1.4rem .5rem; text-align: center; opacity: .6; }
.khc-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; margin-bottom: .35rem; opacity: .9; }
.khc-legend i, .khc-donut li i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.khc-donut { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.khc-donut svg { width: 128px; flex: 0 0 auto; }
.khc-donut ul { list-style: none; margin: 0; padding: 0; flex: 1 1 140px; display: grid; gap: .3rem; }
.khc-donut li { display: grid; grid-template-columns: auto 1fr auto auto; gap: .45rem; align-items: center; font-size: .92rem; }
.khc-donut li small { opacity: .6; min-width: 2.6em; text-align: right; }
.khc-funnel { display: grid; gap: .55rem; }
.khc-fl { display: flex; justify-content: space-between; font-size: .95rem; }
.khc-fb { height: 12px; border-radius: 999px; background: rgba(127,127,127,.15); overflow: hidden; margin: .2rem 0 .1rem; }
.khc-fb span { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.khc-fs small { opacity: .6; font-size: .78rem; }
.khc-hbars { display: grid; gap: .45rem; }
.khc-hb { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: .6rem; align-items: center; font-size: .92rem; }
.khc-hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khc-ht { height: 10px; border-radius: 999px; background: rgba(127,127,127,.15); overflow: hidden; } .khc-ht span { display: block; height: 100%; border-radius: 999px; }
.khc-spark { display: block; }
.khc-cohort { overflow-x: auto; } .khc-cohort table { border-collapse: separate; border-spacing: 3px; font-size: .85rem; width: 100%; }
.khc-cohort th { font-weight: 400; opacity: .65; text-align: center; padding: .2rem .3rem; white-space: nowrap; }
.khc-cohort td { text-align: center; padding: .35rem .3rem; border-radius: 6px; white-space: nowrap; } .khc-cohort td:first-child, .khc-cohort td:nth-child(2) { text-align: left; background: none; }
/* KPI tiles shared by the admin pages */
.kpi-tile { border-radius: 16px; padding: 1rem; height: 100%; display: flex; flex-direction: column; gap: .15rem; position: relative; overflow: hidden; }
.kpi-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c, #4b8b2a); }
.kpi-tile .kpi-l { font-size: .85rem; opacity: .7; display: flex; justify-content: space-between; gap: .4rem; }
.kpi-tile .kpi-l i { color: var(--c, #4b8b2a); font-size: 1.15rem; }
.kpi-tile .kpi-v { font-size: 1.7rem; line-height: 1.1; }
.kpi-tile small { opacity: .65; }
.kpi-up { color: #5bb341; } .kpi-down { color: #e0574f; }