/* Charts, group insights (tools/parts/charts/insights.mjs): Regional, KPIs, League tables, Pipeline and the monthly
   pack. Tokens only; every colour stands beside a word, an icon or a label. */

/* ── The parts of a section ── */
.chi-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.chi-meta > div { 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); }
.chi-meta dt { font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-subtle); }
.chi-meta dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-foreground); }
.chi-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.chi-side { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.chi-empty { margin-top: var(--space-1); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); }
.chi-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.chi-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; }
.chi-links a:hover { text-decoration: underline; }
.chi-links a .icon { flex: none; margin-top: 3px; }
.chi-stage { display: flex; justify-content: center; padding: var(--space-8) var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); overflow-x: auto; }
.chi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── The screen in the shell: a taller frame, the page grows with its content ── */
.chi-frame .device--desktop { zoom: 0.75; }
.chi-frame .device__screen { height: auto; }
.chi-frame .ap { height: auto; min-height: 600px; }
.chi-page { gap: var(--space-4); padding-top: var(--space-4); }
.chi-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-default); }
.chi-tabs a { padding: var(--space-2) var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
.chi-tabs a.is-on { border-bottom-color: var(--color-primary); color: var(--color-foreground); font-weight: var(--weight-medium); }
.chi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.chi-head h1 { margin: 0; }
.chi-head__cap { margin: var(--space-1) 0 0; color: var(--color-muted); }
.chi-head__ctl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chi-head__ctl .badge .icon, .chi-card .badge .icon { margin-right: var(--space-1); }

/* ── Cards ── */
.chi-card > header { gap: var(--space-3); flex-wrap: wrap; }
.chi-card--w600 { width: 600px; flex: none; }
.chi-card--w760 { width: 760px; flex: none; }
.chi-card--w880 { width: 880px; flex: none; }
.chi-card--inline { width: 100%; }
.chi-card > .chi-legend, .chi-card > svg, .chi-card > .chi-kp__note, .chi-card > .chi-ff__below, .chi-card > .chi-pp__named { margin-left: var(--space-4); margin-right: var(--space-4); }
.chi-card > svg { display: block; width: calc(100% - 2 * var(--space-4)); height: auto; margin-bottom: var(--space-4); }

/* ── The marks, in the product's idiom (Recharts): thin bars, round data ends, a zero baseline ── */
.chi-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chi-t { font-family: var(--font-sans); font-size: var(--text-xs); fill: var(--color-foreground); }
.chi-t--muted { fill: var(--color-muted); }
.chi-t--strong { font-weight: var(--weight-semibold); }
.chi-track { fill: var(--color-chart-track); }
.chi-bar { fill: var(--color-chart-actual); }
.chi-bar--good { fill: var(--color-health-good-text); }
.chi-bar--fair { fill: var(--color-health-fair-text); }
.chi-bar--poor { fill: var(--color-health-poor-text); }
.chi-bar--green { fill: var(--color-success); }
.chi-bar--amber { fill: var(--color-warning); }
.chi-bar--red { fill: var(--color-danger); }
.chi-base { stroke: var(--color-emphasis); stroke-width: 1; }
.chi-grid { stroke: var(--color-default); stroke-width: 1; }
.chi-guide { stroke: var(--color-emphasis); stroke-width: 1; stroke-dasharray: 3 3; }
.chi-oct { stroke: var(--color-foreground); stroke-width: 2; }
.chi-target, .chi-tgt { stroke: var(--color-foreground); stroke-width: 2; stroke-dasharray: 4 2; }
.chi-tgt { stroke-dasharray: none; }
.chi-edge { fill: var(--color-warning-soft); }
.chi-nodata { fill: none; stroke: var(--color-emphasis); stroke-dasharray: 4 3; }
.chi-seg { stroke: var(--color-surface); stroke-width: 2; }
.chi-seg--actual { fill: var(--color-chart-actual); }
.chi-seg--forecast { fill: var(--color-chart-forecast); }
.chi-seg--strong { fill: var(--color-primary-strong); }
.chi-ico--green { color: var(--color-success-text); }
.chi-ico--amber { color: var(--color-warning-text); }
.chi-ico--red { color: var(--color-danger-text); }
.chi-hit { fill: transparent; }
.chi-mark { outline: none; }
.chi-mark:focus-visible .chi-hit { stroke: var(--color-ring); stroke-width: 2; }
.chi-mark:hover .chi-hit { fill: var(--color-chart-track); fill-opacity: 0.5; }

/* The legend: a key beside each word */
.chi-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0 var(--space-4); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.chi-legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chi-key { display: inline-block; flex: none; width: 14px; height: 8px; border-radius: var(--radius-sm); background: var(--color-chart-actual); }
.chi-key--oct { width: 2px; height: 14px; border-radius: 0; background: var(--color-foreground); }
.chi-key--target { width: 14px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--color-foreground); }
.chi-key--actual { background: var(--color-chart-actual); }
.chi-key--forecast { background: var(--color-chart-forecast); }
.chi-key--strong { background: var(--color-primary-strong); }

/* RAG: always the icon and the word */
.chi-rag { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.chi-rag .icon { width: 12px; height: 12px; }
.chi-rag--green { background: var(--color-success-soft); color: var(--color-success-text); }
.chi-rag--amber { background: var(--color-warning-soft); color: var(--color-warning-text); }
.chi-rag--red { background: var(--color-danger-soft); color: var(--color-danger-text); }
.chi-rag--none { background: var(--color-surface-muted); color: var(--color-muted); }
.chi-fn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--fn); }
.chi-fn > i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--fn); }
.chi-fn--land { --fn: var(--color-fn-land); }
.chi-fn--partnerships { --fn: var(--color-fn-partnerships); }
.chi-fn--construction { --fn: var(--color-fn-construction); }
.chi-fn--backoffice { --fn: var(--color-fn-backoffice); }

/* ── 12 · Regions compared: small multiples ── */
.chi-rc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); padding: 0 var(--space-4) var(--space-2); }
.chi-rc__panel { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.chi-rc__title { display: flex; flex-direction: column; margin: 0; min-height: 56px; font-size: var(--text-sm); }
.chi-rc__title strong { font-weight: var(--weight-medium); }
.chi-card > .chi-legend { padding-top: var(--space-2); border-top: 1px solid var(--color-default); }

/* ── 13 · The performance grid ── */
.chi-pg { padding: 0 var(--space-4); }
.chi-pg__table { width: 100%; border-collapse: separate; border-spacing: var(--space-1); font-size: var(--text-sm); }
.chi-pg__table thead th { padding: var(--space-1) var(--space-2); text-align: left; font-weight: var(--weight-regular); font-size: var(--text-label); color: var(--color-subtle); }
.chi-pg__table tbody th { width: 34%; padding: var(--space-2); text-align: left; font-weight: var(--weight-regular); vertical-align: top; }
.chi-pg__kpi { display: block; font-weight: var(--weight-medium); }
.chi-pg__sub { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: 2px; }
.chi-pg__chg { margin-top: var(--space-1); }
.chi-pg__cell { position: relative; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); vertical-align: top; outline: none; }
.chi-pg__cell:focus-visible { box-shadow: 0 0 0 2px var(--color-ring); }
.chi-pg__cell--green { background: var(--color-success-soft); }
.chi-pg__cell--amber { background: var(--color-warning-soft); }
.chi-pg__cell--red { background: var(--color-danger-soft); }
.chi-pg__cell .chi-rag { background: var(--color-surface); }
.chi-pg__v { display: inline-block; min-width: 48px; margin-right: var(--space-2); font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); }
.chi-pg__mark { margin-left: 2px; font-size: var(--text-xs); color: var(--color-info-text); }
.chi-pg__tr { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: var(--space-1); }
.chi-trend { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); color: var(--color-muted); }
.chi-trend .icon { width: 12px; height: 12px; }

/* ── 14 · KPIs: bullet bars and the locked months ── */
.chi-kp { list-style: none; margin: 0; padding: 0; }
.chi-kp__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 132px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-default); }
.chi-kp__row--head { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.chi-kp__name { display: flex; flex-direction: column; gap: 2px; font-weight: var(--weight-medium); }
.chi-kp__name .t-caption { font-weight: var(--weight-regular); }
.chi-kp__now { display: flex; align-items: center; gap: var(--space-3); }
.chi-kp__now .chi-bullet { flex: 1; min-width: 0; }
.chi-kp__val { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-2); width: 156px; }
.chi-kp__val b { font-size: var(--text-sm); }
.chi-kp__closed { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1); }
.chi-kp__m { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-label); color: var(--color-subtle); }
.chi-kp__cell { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.chi-kp__cell--green { background: var(--color-success-soft); color: var(--color-success-text); }
.chi-kp__cell--amber { background: var(--color-warning-soft); color: var(--color-warning-text); }
.chi-kp__cell--red { background: var(--color-danger-soft); color: var(--color-danger-text); }
.chi-kp__cell--none { background: var(--color-surface-muted); color: var(--color-muted); }
.chi-kp__cell .icon { width: 12px; height: 12px; }
.chi-kp__who { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-1); border-top: 1px solid var(--color-emphasis); background: var(--color-surface-muted); }
.chi-kp__who .badge .icon { margin-right: var(--space-1); }
.chi-kp__note { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: 0; margin-bottom: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-default); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.chi-kp__note .icon { flex: none; width: 14px; height: 14px; }

/* ── 15 · League tables ── */
.chi-lg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.chi-lg { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.chi-lg__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 96px 156px; grid-template-areas: 'rank name bar val' '. flag flag flag'; column-gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-default); }
.chi-lg__row > :nth-child(1) { grid-area: rank; }
.chi-lg__row > :nth-child(2) { grid-area: name; }
.chi-lg__row > :nth-child(3) { grid-area: bar; }
.chi-lg__row > :nth-child(4) { grid-area: val; }
.chi-lg__row > :nth-child(5) { grid-area: flag; }
.chi-lg__row--head { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.chi-lg__rank { color: var(--color-subtle); font-size: var(--text-xs); }
.chi-lg__name { font-weight: var(--weight-medium); }
.chi-lg__val { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); text-align: right; font-size: var(--text-xs); }
.chi-lg__val b { font-size: var(--text-sm); text-align: left; }
.chi-lg__val .t-caption { text-align: right; }
.chi-lg__val > .tnum:last-child { grid-column: 1 / -1; color: var(--color-foreground); }
.chi-lg__flag:empty { display: none; }
.chi-lg__flag .badge .icon { margin-right: var(--space-1); }
.chi-num { text-align: right; }

/* ── 16 · Days since last offer ── */
.chi-card--w600 > svg { margin-top: var(--space-1); }
.chi-card--inline > svg { max-width: 600px; }
.chi-ico { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── 17 · Pipeline ── */
.chi-pp__h { margin: 0 var(--space-4) var(--space-1); font-size: var(--text-label); color: var(--color-subtle); }
.chi-card > .chi-pp__svg { margin-bottom: var(--space-3); }
.chi-pp__named { display: flex; flex-direction: column; gap: var(--space-1); margin-top: 0; margin-bottom: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-default); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }

/* ── 18 · Fee forecast ── */
.chi-ff__below { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); margin-top: 0; margin-bottom: var(--space-4); padding: var(--space-3) 0 0; border-top: 1px solid var(--color-default); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.chi-ff__below li { display: flex; align-items: center; gap: var(--space-2); }
.chi-ff__below .icon { flex: none; width: 14px; height: 14px; }
.chi-card--w880 > .chi-legend { padding-top: 0; border-top: 0; }

/* ── 19 · The monthly pack ── */
.chi-mp { display: flex; flex-direction: column; }
.chi-mp__block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--color-default); }
.chi-mp__h { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; font-weight: var(--weight-medium); }
.chi-mp__month { margin: 0; }
.chi-mp__named { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.chi-mp__named > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chi-mp__strip { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.chi-mp__strip > li { display: grid; grid-template-columns: 112px repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.chi-mp__div { padding-top: var(--space-1); }
.chi-mp__kpi { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); }
.chi-mp__cells { display: flex; gap: var(--space-1); }
.chi-mp__sq { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); outline: none; }
.chi-mp__sq:focus-visible { box-shadow: 0 0 0 2px var(--color-ring); }
.chi-mp__sq b { font-weight: var(--weight-medium); }
.chi-mp__sq .icon { width: 12px; height: 12px; }
.chi-mp__sq--green { background: var(--color-success-soft); color: var(--color-success-text); }
.chi-mp__sq--amber { background: var(--color-warning-soft); color: var(--color-warning-text); }
.chi-mp__sq--red { background: var(--color-danger-soft); color: var(--color-danger-text); }
.chi-mp .chi-legend { padding-bottom: 0; }

@media (max-width: 1100px) {
  .chi-meta, .chi-foot { grid-template-columns: 1fr; }
  .chi-stage { justify-content: flex-start; }
}

/* A page in the frame grows with its content: no card shrinks to fit the shell's height */
.chi-page > * { flex-shrink: 0; }
.chi-lg__val .t-caption { white-space: nowrap; }