/* Charts page, group admin: activityLogging, adminImpact, reconciliation (tools/parts/charts/admin.mjs). Tokens only. */

/* ── The section around a use ── */
.cha-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); }
.cha-fact { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.cha-fact dd { margin: 0; color: var(--color-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); }
.cha-fact--q { background: var(--color-primary-soft); border-color: transparent; }
.cha-fact--q .t-body-strong { color: var(--color-primary-strong); }
.cha-below { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-5); align-items: start; }
.cha-state, .cha-appears { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cha-ecard { width: 100%; max-width: 560px; }
.cha-ecard > header { flex-wrap: wrap; gap: var(--space-2); }
.cha-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cha-links a { display: inline-flex; align-items: flex-start; gap: var(--space-2); color: var(--color-primary); font-size: var(--text-sm); line-height: var(--leading-sm); text-decoration: none; }
.cha-links a:hover { text-decoration: underline; }
.cha-links .icon { flex: none; margin-top: 2px; }
@media (max-width: 900px) {
  .cha-facts, .cha-below { grid-template-columns: 1fr; }
}

/* ── The screens, in a desktop frame at a size that keeps the chart's labels legible ── */
.cha-frame .device--desktop { zoom: 0.8; }
.cha-frame--act .ap, .cha-frame--act .device__screen { height: 800px; }
.cha-frame--set .ap, .cha-frame--set .device__screen { height: 800px; }
.cha-frame--set .si-cols--set { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.cha-frame--rec .ap, .cha-frame--rec .device__screen { height: 770px; }
.cha-page { gap: var(--space-4); }
.cha-muted { color: var(--color-muted); }
.cha-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cha-card > header { flex-wrap: wrap; gap: var(--space-2); }
.cha-card > header .badge { margin-left: auto; }
.cha-foot { margin: var(--space-2) 0 0; padding: 0 var(--space-4) var(--space-3); white-space: normal; }
.si-card .t-caption.cha-foot { white-space: normal; overflow: visible; }
.cha-tabs { margin-bottom: 0; }
.cha-band { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.cha-band > div { display: flex; flex-direction: column; }
.cha-band .t-caption { color: var(--color-primary-strong); }
.cha-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.cha-impact { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); }
.cha-skip { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); border-top: 1px solid var(--color-default); font-size: var(--text-sm); }
.cha-skip li { display: inline-flex; align-items: center; gap: var(--space-2); }
.cha-total-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-2) var(--space-4) 0; font-size: var(--text-sm); color: var(--color-muted); }
.cha-total-line strong { color: var(--color-foreground); }
.cha-qid { font-family: var(--font-mono); color: var(--color-warning-text); }

/* ── Legends: a marker beside every colour ── */
.cha-legend { list-style: none; margin: 0; padding: 0 var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.cha-impact .cha-legend { padding: 0; }
.cha-legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.cha-sw { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-sm); }
.cha-sw--call { background: var(--color-primary-strong); }
.cha-sw--email { background: var(--color-chart-actual); }
.cha-sw--meeting { background: var(--color-chart-forecast); }
.cha-sw--visit { background: var(--color-info); }
.cha-sw--note { background: var(--color-subtle); }
.cha-sw--open { background: var(--color-warning); }
.cha-sw--explained { background: var(--color-success); }
.cha-sw--crm { background: var(--color-chart-actual); }
.cha-sw--dm { background: var(--color-chart-forecast); }
.cha-mk { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-full); border: 2px solid var(--color-subtle); background: var(--color-surface); }
.cha-mk--today { background: var(--color-danger); border-color: var(--color-danger); }
.cha-mk--new { background: var(--color-warning); border-color: var(--color-warning); }
.cha-ln { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--color-danger); }
.cha-ln--next { border-top-style: dashed; border-top-color: var(--color-warning-text); }

/* ── The SVG charts ── */
.cha-svg { display: block; width: 100%; height: auto; padding: var(--space-2) var(--space-4) 0; box-sizing: border-box; overflow: visible; font-variant-numeric: tabular-nums; }
.cha-impact .cha-svg { padding: var(--space-2) 0 0; }
.cha-svg text { font-size: 12px; fill: var(--color-muted); }
.cha-grid { stroke: var(--color-default); stroke-width: 1; }
.cha-grid--zero { stroke: var(--color-emphasis); stroke-width: 1.5; }
.cha-tick { font-size: 11px; }
.cha-svg .cha-unit, .cha-svg .cha-colh { font-size: 11px; font-weight: var(--weight-medium); fill: var(--color-subtle); }
.cha-svg .cha-name { font-size: 13px; font-weight: var(--weight-medium); fill: var(--color-foreground); }
.cha-svg .cha-name--file { font-size: 12px; }
.cha-svg .cha-name--quiet { fill: var(--color-muted); font-weight: var(--weight-regular); }
.cha-svg .cha-sub { font-size: 11px; fill: var(--color-subtle); }
.cha-svg .cha-total { font-size: 12px; font-weight: var(--weight-semibold); fill: var(--color-foreground); }
.cha-svg .cha-val { font-size: 12px; fill: var(--color-foreground); }
.cha-svg .cha-val--sm { font-size: 11px; fill: var(--color-muted); }
.cha-svg .cha-val--zero { fill: var(--color-subtle); }
.cha-svg .cha-diff { font-size: 12px; font-weight: var(--weight-semibold); fill: var(--color-success-text); }

.cha-row { outline: none; }
.cha-row__hit { fill: transparent; }
.cha-row:hover .cha-row__hit, .cha-row:focus-visible .cha-row__hit { fill: var(--color-surface-muted); }
.cha-row:focus-visible .cha-row__hit { stroke: var(--color-ring); stroke-width: 2; }

/* Stacked activity bars, a gap of the card's colour between the types */
.cha-seg { stroke: var(--color-surface); stroke-width: 1; }
.cha-seg--call { fill: var(--color-primary-strong); }
.cha-seg--email { fill: var(--color-chart-actual); }
.cha-seg--meeting { fill: var(--color-chart-forecast); }
.cha-seg--visit { fill: var(--color-info); }
.cha-seg--note { fill: var(--color-subtle); }
.cha-seg--open { fill: var(--color-warning); }
.cha-seg--explained { fill: var(--color-success); }
.cha-svg .cha-seg__n { font-size: 11px; font-weight: var(--weight-semibold); fill: var(--color-surface); pointer-events: none; }
.cha-svg .cha-seg__n--meeting { fill: var(--color-foreground); }

/* The keyboard and hover tooltip of a row */
.cha-tip { opacity: 0; pointer-events: none; }
.cha-row:hover .cha-tip, .cha-row:focus-visible .cha-tip { opacity: 1; }
.cha-tip__box { fill: var(--color-surface-inverted); rx: var(--radius-sm); }
.cha-svg .cha-tip__text { font-size: 11px; fill: var(--color-inverted); }

/* The impact preview: zones past each threshold, the thresholds as lines, one dot per open Site */
.cha-zone--next { fill: var(--color-warning-soft); }
.cha-zone--now { fill: var(--color-danger-soft); }
.cha-thr { stroke-width: 2; }
.cha-thr--now { stroke: var(--color-danger); }
.cha-thr--next { stroke: var(--color-warning-text); stroke-dasharray: 5 3; }
.cha-svg .cha-thr__l { font-size: 11px; font-weight: var(--weight-semibold); }
.cha-svg .cha-thr__l--now { fill: var(--color-danger-text); }
.cha-svg .cha-thr__l--next { fill: var(--color-warning-text); }
.cha-stem { stroke: var(--color-emphasis); stroke-width: 2; }
.cha-dot { stroke-width: 2; }
.cha-dot--today { fill: var(--color-danger); stroke: var(--color-danger); }
.cha-dot--new { fill: var(--color-warning); stroke: var(--color-warning); }
.cha-dot--ok { fill: var(--color-surface); stroke: var(--color-subtle); }
.cha-svg .cha-status { font-size: 11px; font-weight: var(--weight-semibold); }
.cha-svg .cha-status--today { fill: var(--color-danger-text); }
.cha-svg .cha-status--new { fill: var(--color-warning-text); }

/* Reconciliation: the batch state chip, the paired fee bars */
.cha-chip { rx: var(--radius-full); }
.cha-chip--loaded { fill: var(--color-info-soft); }
.cha-chip--reconciled { fill: var(--color-success-soft); }
.cha-svg .cha-chip__t { font-size: 11px; font-weight: var(--weight-medium); }
.cha-svg .cha-chip__t--loaded { fill: var(--color-info-text); }
.cha-svg .cha-chip__t--reconciled { fill: var(--color-success-text); }
.cha-bar { rx: var(--radius-sm); }
.cha-bar--crm { fill: var(--color-chart-actual); }
.cha-bar--dm { fill: var(--color-chart-forecast); }

/* A chart drawn finished: nothing here animates, so reduced motion has nothing to stop */