/* Charts › group "site": My pipeline, Deal Health, the landowner's gap, coverage, a bid against the benchmark, bids
   side by side. Tokens only. The marks are SVG rects coloured here; every word is HTML beside them. */

/* ── The parts of a use's section ── */
.chs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.chs-fact { padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.chs-fact dt { margin-bottom: var(--space-1); }
.chs-fact dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.chs-part { margin: 0 0 var(--space-6); min-width: 0; }
.chs-part__h { margin: 0 0 var(--space-2); }
.chs-split { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.chs-split > .chs-part { flex: 1 1 320px; }
.chs-split > .chs-part--grow { flex: 2 1 560px; }
.chs-frame { margin: 0; }
.chs-narrow { max-width: 560px; }
.chs-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.chs-links a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; }
.chs-links a:hover { text-decoration: underline; }
.chs-empty { padding: 0; }
.chs-empty .ill { width: 120px; height: auto; }
.chs-empty .chs-bars { width: 100%; max-width: 320px; }

/* ── A chart card at its real size ── */
.chs-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); min-width: 0; }
.chs-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.chs-card__head > * { margin: 0; }
.chs-foot { margin: 0; }
.chs-strong { font-weight: var(--weight-semibold); color: var(--color-foreground); }
.chs-zero { color: var(--color-subtle); }
.chs-good { color: var(--color-success-text); }
.chs-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.chs-note .icon { flex: none; margin-top: 1px; }

/* ── The bar chart: rows of label · plot · value on one grid, the grid lines, zones and lines behind them ── */
.chs-bars { position: relative; display: grid; grid-template-columns: var(--chs-label) minmax(0, 1fr) var(--chs-value); column-gap: var(--space-3); row-gap: var(--space-2); }
.chs-over { position: relative; grid-column: 2; z-index: 0; pointer-events: none; }
.chs-headrow { grid-column: 1 / -1; height: var(--space-5); }
.chs-row { position: relative; z-index: 1; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: var(--space-6); border-radius: var(--radius-sm); outline: none; }
.chs-row[tabindex]:focus-visible { box-shadow: 0 0 0 2px var(--color-ring); }
.chs-row__label { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-foreground); }
.chs-row__value { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.chs-row__value .badge { font-size: var(--text-xs); }
.chs-sub { display: block; }
.chs-plot { position: relative; height: 20px; }
.chs-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chs-grid { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 1px dashed var(--color-default); }
.chs-grid--zero { border-left: 1px solid var(--color-emphasis); }
.chs-axis { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
.chs-axis__ticks { position: relative; height: var(--leading-xs); border-top: 1px solid var(--color-emphasis); }
.chs-axis__ticks span { position: absolute; top: 2px; left: var(--x); transform: translateX(-50%); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chs-axis__ticks span.is-end { transform: translateX(-100%); }
.chs-axis__unit { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); padding-top: 2px; }
.chs-zone { position: absolute; top: 0; height: var(--space-5); left: var(--x); width: var(--w); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.chs-zone--full { bottom: 0; height: auto; border-radius: 0; }
.chs-zone__l { position: absolute; top: 0; left: var(--space-1); display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.chs-zone__l .icon { width: 12px; height: 12px; }
.chs-zone--poor { background: var(--color-health-poor-tint); color: var(--color-health-poor-text); }
.chs-zone--fair { background: var(--color-health-fair-tint); color: var(--color-health-fair-text); }
.chs-zone--good { background: var(--color-health-good-tint); color: var(--color-health-good-text); }
.chs-zone--g-good { background: var(--color-grade-good-tint); }
.chs-zone--g-acc { background: var(--color-grade-acceptable-tint); }
.chs-zone--g-over { background: var(--color-grade-weak-tint); }
.chs-ref { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 2px solid var(--color-foreground); }
.chs-ref--band { border-left: 1px dashed var(--color-muted); }
.chs-ref--target { border-left: 2px solid var(--color-foreground); }
.chs-ref__l { position: absolute; top: 0; right: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); color: var(--color-foreground); white-space: nowrap; }

/* The marks */
.chs-seg { fill: var(--color-chart-actual); transform-box: fill-box; transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) { .chs-seg { animation: chs-grow var(--duration-slow) var(--ease-standard); } .chs-seg--off { animation-name: chs-fade; } .chs-seg--missing-hatch { animation: none; } }
.chs-seg--neg { transform-origin: right center; }
.chs-seg--actual, .chs-seg--j3 { fill: var(--color-chart-actual); }
.chs-seg--remain { fill: var(--color-emphasis); }
.chs-seg--track { fill: var(--color-chart-track); stroke: var(--color-default); stroke-width: 1; }
.chs-seg--off { fill: var(--color-danger-soft); stroke: var(--color-danger-text); stroke-width: 1; }
.chs-seg--health-good { fill: var(--color-health-good-text); }
.chs-seg--health-fair { fill: var(--color-health-fair-text); }
.chs-seg--health-poor { fill: var(--color-health-poor-text); }
.chs-seg--high { fill: var(--color-warning); }
.chs-seg--range { fill: var(--color-chart-forecast); }
.chs-seg--hatch, .chs-seg--out-hatch, .chs-seg--missing-hatch { stroke: var(--color-chart-actual); stroke-width: 1; }
.chs-seg--out-hatch { stroke: var(--color-subtle); }
.chs-seg--missing-hatch { stroke: var(--color-danger-text); }
.chs-seg--j1 { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 1; }
.chs-seg--j2 { fill: var(--color-primary-accent); }
.chs-seg--j4, .chs-seg--j5, .chs-seg--j6 { fill: var(--color-primary-strong); }
.chs-seg--teaser { fill: var(--color-surface); stroke: var(--color-subtle); stroke-width: 1; stroke-dasharray: 3 2; }
.chs-hatch__bg { fill: var(--color-surface); }
.chs-hatch__line { stroke: var(--color-chart-actual); stroke-width: 3; }
.chs-hatch--missing-hatch .chs-hatch__bg { fill: var(--color-danger-soft); }
.chs-hatch--missing-hatch .chs-hatch__line { stroke: var(--color-danger-text); stroke-width: 1.5; }
.chs-hatch--out-hatch .chs-hatch__bg { fill: var(--color-stage-dead-tint); }
.chs-hatch--out-hatch .chs-hatch__line { stroke: var(--color-subtle); }
.chs-mark { position: absolute; top: 50%; left: var(--x); }
.chs-mark--tick { width: 2px; height: 20px; margin: -10px 0 0 -1px; background: var(--color-foreground); border-radius: 1px; }
.chs-mark--bcis { width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); border: 2px solid var(--color-foreground); background: var(--color-surface); }
@keyframes chs-grow { from { transform: scaleX(0); } }
@keyframes chs-fade { from { opacity: 0; } }

/* The tooltip: opens on hover and on keyboard focus */
.chs-tip { position: absolute; z-index: var(--z-header); right: 0; bottom: calc(100% + var(--space-1)); display: flex; flex-direction: column; gap: 2px; min-width: 160px; max-width: 280px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-inverted); color: var(--color-inverted); font-size: var(--text-xs); line-height: var(--leading-xs); box-shadow: var(--shadow-overlay); opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-standard); pointer-events: none; }
.chs-tip .t-caption { color: inherit; opacity: 0.8; }
.chs-row:hover .chs-tip, .chs-row:focus-visible .chs-tip { opacity: 1; visibility: visible; }

/* The legend, each colour with its word */
.chs-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.chs-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chs-legend strong { color: var(--color-foreground); }
.chs-sw { flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--color-chart-actual); }
.chs-sw--j1 { background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.chs-sw--j2 { background: var(--color-primary-accent); }
.chs-sw--j4, .chs-sw--j5, .chs-sw--j6 { background: var(--color-primary-strong); }
.chs-sw--range { background: var(--color-chart-forecast); }
.chs-sw--high { background: var(--color-warning); }
.chs-sw--teaser { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-subtle); }
.chs-sw--hatch, .chs-sw--out-hatch, .chs-sw--missing-hatch { background: repeating-linear-gradient(45deg, var(--color-chart-actual) 0 2px, var(--color-surface) 2px 5px); box-shadow: inset 0 0 0 1px var(--color-chart-actual); }
.chs-sw--out-hatch { background: repeating-linear-gradient(45deg, var(--color-subtle) 0 2px, var(--color-surface) 2px 5px); box-shadow: inset 0 0 0 1px var(--color-subtle); }
.chs-sw--missing-hatch { background: repeating-linear-gradient(45deg, var(--color-danger-text) 0 1px, var(--color-danger-soft) 1px 5px); box-shadow: inset 0 0 0 1px var(--color-danger-text); }
.chs-sw--bcis { width: 9px; height: 9px; transform: rotate(45deg); background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-foreground); }
.chs-sw--target { width: 3px; height: 14px; border-radius: 0; background: var(--color-foreground); }
.chs-sw--g-good { background: var(--color-grade-good-tint); box-shadow: inset 0 0 0 1px var(--color-grade-good-text); }
.chs-sw--g-acc { background: var(--color-grade-acceptable-tint); box-shadow: inset 0 0 0 1px var(--color-grade-acceptable-text); }
.chs-sw--g-over { background: var(--color-grade-weak-tint); box-shadow: inset 0 0 0 1px var(--color-grade-weak-text); }

/* ── 1 · My pipeline ── */
.chs-homeslot { margin-bottom: var(--space-4); }
.chs-pipewrap { display: grid; grid-template-columns: minmax(0, 760px) 240px; gap: var(--space-4); align-items: start; }
.chs-tile { gap: var(--space-1); padding: var(--space-5); }
.chs-stage { font-size: var(--text-sm); }

/* ── 2 · Deal Health: the popover on the header, and the panel at real size ── */
.chs-pop { position: relative; display: inline-flex; }
.chs-pop__panel { position: absolute; z-index: var(--z-header); top: calc(100% + var(--space-2)); right: 0; width: 480px; padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-overlay); text-align: left; white-space: normal; }
.chs-popcard { max-width: 520px; padding: var(--space-4); }
.chs-dh { display: flex; flex-direction: column; gap: var(--space-2); }
.chs-dh > p { margin: 0; }
.chs-dh__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chs-prov { margin-left: auto; }
.chs-bars--tall .chs-row { min-height: 40px; }
.chs-pts { font-weight: var(--weight-semibold); color: var(--color-subtle); }
.chs-pts.is-off { color: var(--color-danger-text); }
.chs-row--total { padding-top: var(--space-2); border-top: 1px solid var(--color-default); }

/* ── 3 · The landowner's gap ── */
.chs-gapcard { max-width: 520px; }
.chs-gap { display: flex; flex-direction: column; gap: var(--space-3); }
.chs-bars--compact { row-gap: var(--space-1); }
.chs-bars--compact .chs-row { min-height: var(--space-5); }
.chs-row--gap { min-height: var(--space-2); }
.chs-rowl { font-size: var(--text-xs); line-height: var(--leading-xs); }
.chs-gaps { display: grid; gap: var(--space-2); margin: 0; }
.chs-gaps > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-default); }
.chs-gaps dd { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.chs-inlead { margin-bottom: var(--space-3); }

/* ── 4 · Coverage ── */
.chs-covgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.chs-cov__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.chs-cov__top .badge { margin-left: auto; align-self: center; }
.chs-bars--one { column-gap: 0; }
.chs-bars--one .chs-row__label, .chs-bars--one .chs-row__value { min-width: 0; }
.chs-bars--one .chs-plot { height: 24px; }
.chs-incov .chs-card { box-shadow: none; }

/* ── 5 · A bid against the benchmark ── */
.chs-bench { max-width: 920px; }
.chs-seg-ctl { align-self: flex-start; flex-wrap: wrap; }

/* ── 6 · Bids side by side ── */
.chs-ranked { max-width: 1040px; }
.chs-rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.chs-ranked .chs-row__label { flex-direction: row; align-items: center; }

@media (max-width: 960px) {
  .chs-facts, .chs-covgrid { grid-template-columns: minmax(0, 1fr); }
  .chs-pipewrap { grid-template-columns: minmax(0, 1fr); }
}