/*
 * Chart styles. Text, gridlines and the page background come from Bootstrap's
 * CSS variables; chart colors from the custom properties below, which default
 * to the Hult Ashridge Heritage palette of the chart library designs. A site
 * with another palette overrides any of them on :root — the defaults sit in
 * :where(:root), so any :root rule wins whatever order the styles load in.
 *
 * Heritage green and red, series 1 and 2, sit close together for readers
 * with red-green color-vision deficiency. Every chart carries a legend or
 * direct labels, and a data table, so color is never the only cue — keep it
 * that way when adding charts.
 */
:where(:root) {
  /* Series, in order. 1 is also the color of single-series charts. */
  --ll-chart-1: #3a7e6b; /* heritage */
  --ll-chart-2: #e25845; /* red */
  --ll-chart-3: #7fb2a7; /* cascade */
  --ll-chart-4: #373939; /* charcoal */
  --ll-chart-5: #d6ccbf; /* sisal */

  /* Text drawn on each series color. */
  --ll-chart-1-ink: #fff;
  --ll-chart-2-ink: #191919;
  --ll-chart-3-ink: #191919;
  --ll-chart-4-ink: #fff;
  --ll-chart-5-ink: #191919;

  /* Supporting colors. */
  --ll-chart-soft: #7fb2a7; /* combo columns, increases, "before" values */
  --ll-chart-dark: #373939; /* targets, medians, final stages, notes */
  --ll-chart-dark-ink: #fff; /* text drawn on the dark color */
  --ll-chart-neutral: #d6ccbf; /* bullet chart bands */
  --ll-chart-muted: #373939; /* in-between Sankey nodes and their flows */
  --ll-chart-surface: #f7f2ea; /* empty cells and days, a key's lightest step */
  --ll-chart-rule: #d6ccbf; /* outlines of empty cells, axis lines */
  --ll-chart-tooltip: #191919; /* the tooltip beside the pointer */

  /* Buttons: Download, Try again. */
  --ll-chart-accent: #3a7e6b; /* heritage */
  --ll-chart-accent-ink: #fff; /* text on the accent, when hovered */
  --ll-chart-accent-rgb: 58, 126, 107; /* the accent, for focus rings */
}

/*
 * Type. The addon uses two faces only: EF Circular Book for all text, EF
 * Circular Bold for emphasis. Each is its own family, every component's root
 * carries .ll-chart-font, and font synthesis is off, so a page's other weights
 * (Light, Medium) or a browser-made bold never appear. Bold is whatever a
 * component marks bold: Bootstrap's weight utilities, table headers, headings,
 * chart values and SVG text with a bold weight.
 */
@font-face {
  font-family: EFCircularBook;
  font-style: normal;
  font-display: swap;
  src: url(/assets/4a0ca244846bba715893.woff) format("woff");
}

@font-face {
  font-family: EFCircularBold;
  font-style: normal;
  font-display: swap;
  src: url(/assets/a2be37f2197c29ccfb32.woff) format("woff");
}

.ll-chart-font {
  font-family: EFCircularBook, sans-serif;
  font-synthesis: none;
}

/* Form controls don't inherit the page font unless told to. */
.ll-chart-font :is(button, input, select, textarea) {
  font-family: inherit;
}

.ll-chart-font
  :is(
    b,
    strong,
    th,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .fw-medium,
    .fw-semibold,
    .fw-bold,
    .fw-bolder,
    .ll-chart-value,
    [font-weight="600"],
    [font-weight="700"],
    [font-weight="bold"]
  ),
.ll-chart-font:is(.fw-semibold, .fw-bold) {
  font-family: EFCircularBold, sans-serif;
}

/* Text set back to regular inside something bold, e.g. a row header. */
.ll-chart-font :is(.fw-normal, .fw-light, .fw-lighter) {
  font-family: EFCircularBook, sans-serif;
}

.ll-chart {
  display: block;
  overflow: visible;
  width: 100%;
  height: auto;
}

/* Drawn at its own width, centered, shrinking only to fit: the radar chart. */
.ll-chart-natural {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* Fills and strokes, by color role. */

.ll-chart-fill-1 {
  fill: var(--ll-chart-1);
}

.ll-chart-fill-2 {
  fill: var(--ll-chart-2);
}

.ll-chart-fill-3 {
  fill: var(--ll-chart-3);
}

.ll-chart-fill-4 {
  fill: var(--ll-chart-4);
}

.ll-chart-fill-5 {
  fill: var(--ll-chart-5);
}

.ll-chart-fill-soft {
  fill: var(--ll-chart-soft);
}

.ll-chart-fill-dark {
  fill: var(--ll-chart-dark);
}

.ll-chart-fill-neutral {
  fill: var(--ll-chart-neutral);
}

.ll-chart-fill-muted {
  fill: var(--ll-chart-muted);
}

.ll-chart-fill-surface {
  fill: var(--ll-chart-surface);
}

/* The page background: rings that separate overlapping marks. */
.ll-chart-fill-ring {
  fill: var(--bs-body-bg);
}

.ll-chart-stroke-1 {
  stroke: var(--ll-chart-1);
}

.ll-chart-stroke-2 {
  stroke: var(--ll-chart-2);
}

.ll-chart-stroke-3 {
  stroke: var(--ll-chart-3);
}

.ll-chart-stroke-4 {
  stroke: var(--ll-chart-4);
}

.ll-chart-stroke-5 {
  stroke: var(--ll-chart-5);
}

.ll-chart-stroke-soft {
  stroke: var(--ll-chart-soft);
}

.ll-chart-stroke-dark {
  stroke: var(--ll-chart-dark);
}

.ll-chart-stroke-muted {
  stroke: var(--ll-chart-muted);
}

.ll-chart-stroke-rule {
  stroke: var(--ll-chart-rule);
}

.ll-chart-stroke-ring {
  stroke: var(--bs-body-bg);
}

/* Text drawn on a series color: white on dark fills, near-black on light. */

.ll-chart-ink-1 {
  fill: var(--ll-chart-1-ink);
}

.ll-chart-ink-2 {
  fill: var(--ll-chart-2-ink);
}

.ll-chart-ink-3 {
  fill: var(--ll-chart-3-ink);
}

.ll-chart-ink-4 {
  fill: var(--ll-chart-4-ink);
}

.ll-chart-ink-5 {
  fill: var(--ll-chart-5-ink);
}

.ll-chart-ink-dark {
  fill: var(--ll-chart-dark-ink);
}

/* Legend swatches, in HTML beside a chart. */

.ll-chart-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.25rem;
  border-radius: 2px;
  vertical-align: -0.05em;
}

/* A line, for target and reference lines. */
.ll-chart-swatch-line {
  width: 1rem;
  height: 3px;
  vertical-align: 0.2em;
}

.ll-chart-swatch-1 {
  background-color: var(--ll-chart-1);
}

.ll-chart-swatch-2 {
  background-color: var(--ll-chart-2);
}

.ll-chart-swatch-3 {
  background-color: var(--ll-chart-3);
}

.ll-chart-swatch-4 {
  background-color: var(--ll-chart-4);
}

.ll-chart-swatch-5 {
  background-color: var(--ll-chart-5);
}

.ll-chart-swatch-soft {
  background-color: var(--ll-chart-soft);
}

.ll-chart-swatch-dark {
  background-color: var(--ll-chart-dark);
}

.ll-chart-swatch-neutral {
  background-color: var(--ll-chart-neutral);
}

.ll-chart-swatch-muted {
  background-color: var(--ll-chart-muted);
}

/* Axes, gridlines and text. */

.ll-chart-grid line {
  stroke: var(--bs-border-color-translucent);
  stroke-width: 1;
  shape-rendering: crispedges;
}

.ll-chart-axis {
  stroke: var(--bs-border-color);
  stroke-width: 1;
  shape-rendering: crispedges;
}

.ll-chart-tick {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  fill: var(--bs-secondary-color);
}

.ll-chart-value {
  font-size: 13px;
  font-weight: 600;
  fill: var(--bs-body-color);
}

.ll-chart-value-sm {
  font-size: 11px;
}

.ll-chart-label {
  font-size: 13px;
  fill: var(--bs-body-color);
}

/* A ring of page background around text drawn over lines, so it stays legible. */
.ll-chart-halo {
  stroke: var(--bs-body-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
}

/*
 * Hover. Each mark is a group with a <title> tooltip and a transparent hit
 * area larger than the mark. Hovering one fades the others, so the one under
 * the pointer stands out.
 */

.ll-chart-hit {
  fill: transparent;
}

.ll-chart-band:hover .ll-chart-hit,
.ll-chart-link:focus-visible .ll-chart-hit {
  fill: var(--bs-tertiary-bg);
}

/* A mark that links somewhere, such as a bar leading to the records it counts. */

/* Only the label underlines, not the values beside it. A host app's `a`
   styles (Bootstrap's) would underline everything in the link, so not those. */
.ll-chart-link,
.ll-chart-link:hover {
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.ll-chart-link:hover .ll-chart-label,
.ll-chart-link:focus-visible .ll-chart-label {
  text-decoration: underline;
}

.ll-chart-link:focus-visible .ll-chart-hit {
  stroke: var(--bs-focus-ring-color, var(--bs-primary));
  stroke-width: 2;
}

.ll-chart-mark {
  transition: opacity 0.15s ease;
}

.ll-chart:has(.ll-chart-mark:hover) .ll-chart-mark:not(:hover) {
  opacity: 0.28;
}

@media (prefers-reduced-motion: reduce) {
  .ll-chart-mark {
    transition: none;
  }
}

/* The original single-series line, kept for `LineChart`'s `@values`. */

.ll-chart-line {
  fill: none;
  stroke: var(--ll-chart-1);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ll-chart-marker {
  fill: var(--ll-chart-1);
  stroke: var(--bs-body-bg);
  stroke-width: 2;
}

.ll-chart-data td {
  font-variant-numeric: tabular-nums;
}

/*
 * Loading: the outline of a chart in pale tints of the first series color — a
 * legend, gridlines, columns rising in turn and then shimmering, an axis —
 * under a spinner and what's loading.
 */
.ll-chart-spinner {
  color: var(--ll-chart-1);
}

.ll-chart-skeleton :is(i, span) {
  display: block;
  background: color-mix(in srgb, var(--ll-chart-1) 9%, var(--ll-chart-surface));
}

.ll-chart-skeleton-legend i {
  width: 72px;
  height: 10px;
  border-radius: 999px;
}

.ll-chart-skeleton-legend i:nth-child(2) {
  width: 96px;
}

.ll-chart-skeleton-legend i:nth-child(3) {
  width: 58px;
}

.ll-chart-skeleton-plot {
  position: relative;
  height: 170px;
}

.ll-chart-skeleton-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ll-chart-skeleton .ll-chart-skeleton-grid i {
  height: 1px;
  background: var(--bs-border-color-translucent);
}

.ll-chart-skeleton-bars,
.ll-chart-skeleton-axis {
  display: flex;
  gap: 4%;
  padding-inline: 2%;
}

.ll-chart-skeleton-bars {
  position: absolute;
  inset: 0;
  align-items: flex-end;
}

.ll-chart-skeleton-bars span {
  flex: 1;
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ll-chart-1) 12%, var(--ll-chart-surface)) 30%,
    color-mix(in srgb, var(--ll-chart-1) 22%, var(--bs-body-bg)) 50%,
    color-mix(in srgb, var(--ll-chart-1) 12%, var(--ll-chart-surface)) 70%
  );
  background-size: 300% 100%;
  animation:
    ll-chart-rise 0.6s ease-out var(--ll-delay) both,
    ll-chart-shimmer 1.6s ease-in-out calc(var(--ll-delay) + 0.6s) infinite;
}

/* Each column's height, and when it rises. */
.ll-chart-skeleton-bars span:nth-child(1) {
  --ll-delay: 0ms;

  height: 62%;
}

.ll-chart-skeleton-bars span:nth-child(2) {
  --ll-delay: 90ms;

  height: 84%;
}

.ll-chart-skeleton-bars span:nth-child(3) {
  --ll-delay: 180ms;

  height: 48%;
}

.ll-chart-skeleton-bars span:nth-child(4) {
  --ll-delay: 270ms;

  height: 90%;
}

.ll-chart-skeleton-bars span:nth-child(5) {
  --ll-delay: 360ms;

  height: 70%;
}

.ll-chart-skeleton-bars span:nth-child(6) {
  --ll-delay: 450ms;

  height: 38%;
}

.ll-chart-skeleton-bars span:nth-child(7) {
  --ll-delay: 540ms;

  height: 76%;
}

.ll-chart-skeleton-bars span:nth-child(8) {
  --ll-delay: 630ms;

  height: 58%;
}

.ll-chart-skeleton-axis i {
  flex: 1;
  height: 8px;
  border-radius: 999px;
}

@keyframes ll-chart-rise {
  from {
    opacity: 0.4;
    transform: scaleY(0.08);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes ll-chart-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-chart-skeleton-bars span,
  .ll-chart-spinner {
    animation: none;
  }

  /* A still spinner is a full ring, not a broken one. */
  .ll-chart-spinner {
    border-right-color: currentcolor;
  }
}

/*
 * The chart card's Download menu: a Bootstrap .dropdown-menu shown as a
 * native popover. Popovers open centered by default and Bootstrap hides
 * .dropdown-menu until .show, so place it under its button (the card sets top
 * and right as it opens) and show it whenever the popover is open.
 */
/*
 * Buttons: outlined pills in the accent, filled when hovered or pressed. Set
 * through Bootstrap's own button variables, with .btn and .rounded-pill.
 *
 * Paired with Bootstrap's class to outrank it: .btn and .dropdown-menu set
 * these same variables, and an app may load its Bootstrap after this file.
 */
.btn.ll-chart-btn {
  --bs-btn-color: var(--ll-chart-accent);
  --bs-btn-border-color: var(--ll-chart-accent);
  --bs-btn-hover-color: var(--ll-chart-accent-ink);
  --bs-btn-hover-bg: var(--ll-chart-accent);
  --bs-btn-hover-border-color: var(--ll-chart-accent);
  --bs-btn-active-color: var(--ll-chart-accent-ink);
  --bs-btn-active-bg: var(--ll-chart-accent);
  --bs-btn-active-border-color: var(--ll-chart-accent);
  --bs-btn-disabled-color: var(--ll-chart-accent);
  --bs-btn-disabled-border-color: var(--ll-chart-accent);
  --bs-btn-focus-shadow-rgb: var(--ll-chart-accent-rgb);
}

.dropdown-menu.ll-chart-menu {
  --bs-dropdown-link-active-bg: var(--ll-chart-accent);
  --bs-dropdown-link-active-color: var(--ll-chart-accent-ink);
}

.ll-chart-menu[popover] {
  position: absolute;
  inset: auto;
  margin: 0;
}

.ll-chart-menu:popover-open {
  display: block;
}

@media print {
  /* Keep legend swatches, which browsers drop as "background graphics". */
  .ll-chart-swatch {
    print-color-adjust: exact;
  }
}