/* ===========================================================================
   Chart layer for the Group Chief Financial Officer's report.

   Every chart is plain markup with its geometry baked into custom properties,
   so there is no runtime layout maths and no charting library. Animation is
   pure CSS: interior.js adds .is-in when a chart scrolls into view, and each
   series transitions from a resting state with a stagger.

   Colours, bar widths and hairlines are sampled from the printed report's
   own rendered pages: light blue for totals and the first series, a pale
   blue for increases, dark slate for decreases, then crimson, tan, grey and
   teal across the remaining series. Bars are 20.2pt on a 56pt pitch, over a
   0.25pt black baseline, and the tables are built from blue fills, no rules.
   =========================================================================== */

#main {
  --c-total:  #a6c6d5;   /* totals, plain bars, series 1   */
  --c-up:     #d1e0f3;   /* increases, upper stack segment */
  --c-down:   #575c63;   /* decreases                      */
  --c-s1:     #a6c6d5;
  --c-s2:     #ce4363;
  --c-s3:     #b5a399;
  --c-s4:     #979a9c;
  --c-s5:     #56c5d0;
  --c-bar-blue: #a6c6d5; /* gearing columns                */
  --c-trend:  #414042;   /* gearing trend line             */
  --c-dot:    #c7cbd8;   /* markers and leader lines       */
  --c-axis:   #000;
  --c-hair:   transparent;
}

.ir-chart {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  background: #fff;
}
.ir-chart-title { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.ir-chart-unit { margin: 0 0 1.5rem; color: var(--ink-soft); font-size: .8125rem; }
.ir-chart figcaption,
.ir-chart-note { margin-top: 1rem; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }

/* --------------------------------------------------------------- columns --- */
/* Shared by the waterfalls, the stacked columns and the plain bar charts:
   a flex row of equal columns over a fixed-height plot area. */
.ir-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(.35rem, 1.2vw, .9rem);
  height: 15rem;
  border-bottom: 1px solid var(--c-axis);
}
.ir-col { position: relative; flex: 1 1 0; height: 100%; }
.ir-bar {
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: calc(var(--base, 0) * 1%);
  height: calc(var(--h, 0) * 1%);
  min-height: 2px;
  background: var(--fill, var(--c-total));

  transform: scaleY(0);
  transform-origin: var(--origin, bottom);
  transition: transform .5s cubic-bezier(.44, 0, .37, 1) calc(var(--i, 0) * 110ms);
}
.ir-chart.is-in .ir-bar { transform: scaleY(1); }
/* The value sits above a rising column and below a falling one. */
.ir-line-val { color: #6d6e71; }
.ir-val {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc((var(--base, 0) + var(--h, 0)) * 1%);
  margin-bottom: .35rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s ease calc(var(--i, 0) * 110ms + .3s);
}
.ir-chart.is-in .ir-val { opacity: 1; }
.ir-cat {
  margin-top: .6rem;
  text-align: center;
  font-size: .68rem;
  line-height: 1.25;
  color: var(--ink-soft);
  hyphens: auto;
}
.ir-plot-labels { display: flex; gap: clamp(.35rem, 1.2vw, .9rem); }
.ir-plot-labels > * { flex: 1 1 0; }
/* Waterfall connectors read as one continuous bridge. */
.ir-col[data-link]::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(.35rem, 1.2vw, .9rem) - 1px);
  width: calc(clamp(.35rem, 1.2vw, .9rem) + 2px);
  bottom: calc(var(--link) * 1%);
  border-top: 1px dashed var(--line-strong, #c9ced3);
  opacity: 0;
  transition: opacity .3s ease calc(var(--i, 0) * 110ms + .35s);
}
.ir-chart.is-in .ir-col[data-link]::after { opacity: 1; }

/* Stacked columns carry their segment label inside the segment. */
.ir-seg-label {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc((var(--base, 0) + var(--h, 0) / 2) * 1%);
  transform: translateY(50%);
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  transition: opacity .4s ease calc(var(--i, 0) * 110ms + .3s);
}
.ir-chart.is-in .ir-seg-label { opacity: 1; }

/* ----------------------------------------------------------------- donut --- */
.ir-donut-wrap { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.ir-donut { width: 100%; height: auto; overflow: visible; transform: rotate(-90deg); }
.ir-donut circle {
  fill: none;
  stroke-width: var(--w, 37);
  stroke-dasharray: var(--len) var(--gap);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .8s cubic-bezier(.44, 0, .37, 1) calc(var(--i, 0) * 140ms);
}
.ir-chart.is-in .ir-donut circle { stroke-dashoffset: var(--off); }
.ir-legend { max-width: 26rem; margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.ir-legend li { display: grid; grid-template-columns: .85rem 1fr auto; gap: .6rem; align-items: baseline; font-size: .8125rem; }
.ir-legend i { width: .85rem; height: .85rem; background: var(--fill); }
.ir-donut-wrap { --dot: var(--c-dot); }
.ir-legend b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ line --- */
/* Gearing trend: columns for the ratio, a line over them for net debt/EBITDA. */
.ir-line-overlay { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.ir-line-overlay polyline {
  fill: none;
  stroke: var(--c-trend);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1s cubic-bezier(.44, 0, .37, 1) .3s;
}
.ir-chart.is-in .ir-line-overlay polyline { stroke-dashoffset: 0; }
.ir-line-overlay circle { r: 1.6; fill: var(--c-trend); stroke: #fff; stroke-width: .8; opacity: 0; transition: opacity .3s ease calc(var(--i, 0) * 110ms + .7s); }
.ir-chart.is-in .ir-line-overlay circle { opacity: 1; }

/* ---------------------------------------------------------------- tables --- */
.ir-table-wrap { margin: clamp(2rem, 4vw, 3rem) 0; overflow-x: auto; }
.ir-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ir-table caption { margin-bottom: .75rem; text-align: left; font-weight: 700; color: var(--ink); }
.ir-table th, .ir-table td { padding: .45rem .6rem; text-align: right; font-variant-numeric: tabular-nums; }
.ir-table thead th { background: #a7c6d6; color: var(--ink); font-weight: 400; font-size: .75rem; vertical-align: bottom; }
.ir-table tbody th, .ir-table tbody td { background: #fdfdfd; }
.ir-table th[scope="row"] { text-align: left; font-weight: 400; }
/* Shaded rows mark the subtotals, exactly as the printed table does. */
.ir-table tr.is-total th, .ir-table tr.is-total td { background: #c8dae4; font-weight: 700; }
.ir-table tr.is-sub th[scope="row"] { padding-left: 1.5rem; }

@media (max-width: 900px) {
  .ir-plot { height: 12rem; }
  .ir-donut-wrap { grid-template-columns: minmax(0, 1fr); }
  .ir-cat, .ir-val { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ir-bar { transform: scaleY(1); }
  .ir-val, .ir-seg-label, .ir-col[data-link]::after, .ir-line-overlay circle { opacity: 1; }
  .ir-donut circle { stroke-dashoffset: var(--off); }
  .ir-line-overlay polyline { stroke-dashoffset: 0; }
}