/* Express Entry draws (Phase 37): a chart made at build time and the latest draws. */
.draws-chart__eyebrow {
  margin-block: 0 0.25rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

.draws-chart__heading {
  margin-block: 0;
}

.draws-chart__intro,
.draws-chart__note,
.draws-chart__empty {
  color: var(--nnw-muted, #7e6870);
}

.draws-chart__latest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-block: 1.25rem 0;
  padding: 0.85rem 1rem;
  border-inline-start: 4px solid var(--nnw-primary, #8e2035);
  border-radius: var(--nnw-radius, 0.5rem);
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 7%, var(--nnw-surface, #fff));
}

.draws-chart__latest-label {
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.draws-chart__latest strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.draws-chart__figure {
  margin: 1.25rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--nnw-border, #e4d8d3);
  border-radius: var(--nnw-radius, 0.5rem);
  background: var(--nnw-surface, #fff);
}

.draws-chart__figure figcaption {
  margin-block-start: 0.25rem;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.85rem;
  text-align: center;
}

.draws-chart__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.draws-chart__grid {
  stroke: var(--nnw-border, #e4d8d3);
  stroke-width: 1;
}

.draws-chart__axis {
  fill: var(--nnw-muted, #7e6870);
  font-family: var(--nnw-body-font, sans-serif);
  font-size: 12px;
}

.draws-chart__line {
  fill: none;
  stroke: var(--nnw-primary, #8e2035);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.draws-chart__dot {
  fill: var(--nnw-surface, #fff);
  stroke: var(--nnw-primary, #8e2035);
  stroke-width: 2;
}

.draws-chart__table-wrap {
  margin-block-start: 1rem;
  overflow-x: auto;
}

.draws-chart__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.draws-chart__table th,
.draws-chart__table td {
  padding: 0.55rem 0.75rem;
  border-block-end: 1px solid var(--nnw-border, #e4d8d3);
  text-align: start;
  white-space: nowrap;
}

.draws-chart__table th {
  color: var(--nnw-muted, #7e6870);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Charts of several programs: one colour per program, the same in the legend. A chart of one
   program uses the theme's primary colour. */
.draws-chart__series {
  --draws-colour: var(--nnw-primary, #8e2035);
}
.draws-chart__series--general {
  --draws-colour: #64748b;
}
.draws-chart__series--cec {
  --draws-colour: #c2410c;
}
.draws-chart__series--pnp {
  --draws-colour: #2563eb;
}
.draws-chart__series--french {
  --draws-colour: #7c3aed;
}
.draws-chart__series--healthcare {
  --draws-colour: #059669;
}
.draws-chart__series--trades,
.draws-chart__series--fst {
  --draws-colour: #b45309;
}
.draws-chart__series--stem {
  --draws-colour: #0891b2;
}
.draws-chart__series--transport {
  --draws-colour: #db2777;
}
.draws-chart__series--agriculture,
.draws-chart__series--education,
.draws-chart__series--managers,
.draws-chart__series--physicians,
.draws-chart__series--military,
.draws-chart__series--other {
  --draws-colour: #6b7280;
}

.draws-chart__series .draws-chart__line,
.draws-chart__series .draws-chart__dot {
  stroke: var(--draws-colour);
}

.draws-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.85rem;
}

.draws-chart__key::before {
  content: '';
  display: inline-block;
  inline-size: 0.75rem;
  block-size: 0.2rem;
  margin-inline-end: 0.4rem;
  vertical-align: middle;
  border-radius: 1px;
  background: var(--draws-colour);
}