/* The comparing column chart: a small bindery's sales on a black page, in the minimal style. Columns of wire, warm
   white for this year and open grey outlines for the year before, one electric blue for the dimension that measures
   the difference, and Archivo (a variable grotesque: weight 100 to 900, width 62 to 125) with tabular digits. The
   chart is drawn by the script; the colours are read from here. */
:root {
  --page: #000000;          /* the page */
  --ink: #f2f0eb;           /* this year's columns, the figure and the chosen month */
  --muted: #85847f;         /* the small texts and the month names */
  --outline: #6f6e69;       /* last year's outlines */
  --dim: #5f5e59;           /* the columns of the other months while one is pointed at */
  --rule: #1d1d1b;          /* the baseline and the guides */
  --accent: #5b8cff;        /* the dimension and the difference */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the chart stands alone in the middle of the page; in a dashboard it simply sits in its card */
.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 32px 16px;
}

.chart {
  width: min(640px, 100%);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the head */
.chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.read {
  min-width: 0;
}

.read p {
  margin: 0;
}

.read__brand {
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
  font-variation-settings: 'wdth' 100, 'wght' 420;
  letter-spacing: 0.005em;
}

/* the lines that change are stacked in one cell: the old one goes up and out, the new one comes from below */
.read__figure,
.read__note {
  display: grid;
  overflow: hidden;
  white-space: nowrap;
}

.read__figure > span,
.read__note > span {
  grid-area: 1 / 1;
  display: block;
}

.read__figure {
  margin-top: 6px !important;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' var(--wd, 104), 'wght' var(--w, 330);
}

.read__then {
  color: var(--outline);
}

.read__note {
  margin-top: 2px !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 100, 'wght' 420;
}

.read__note b {
  font-weight: inherit;
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 560;
}

.side {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 10px;
  padding-top: 2px;
}

/* the two years, with a hairline lever between them that leans towards the one chosen */
.years {
  display: flex;
  align-items: center;
}

.year {
  appearance: none;
  height: 34px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' var(--wd, 96), 'wght' var(--w, 340);
  cursor: pointer;
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.year[aria-checked='true'] {
  color: var(--ink);
  cursor: default;
}

@media (hover: hover) {
  .year[aria-checked='false']:hover {
    color: #c9c7c1;
  }
}

.year:focus {
  outline: none;
}

.year:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 0;
}

.years__lever {
  display: block;
  width: 14px;
  height: 22px;
  overflow: visible;
}

.years__lever line {
  stroke: var(--muted);
  stroke-width: 1;
}

.legend {
  display: flex;
  gap: 14px;
  margin: 0;
  padding-right: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 100, 'wght' 420;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend__item svg {
  fill: var(--ink);
}

.legend__item--then svg {
  fill: var(--outline);
}

.legend__year {
  display: grid;
  overflow: hidden;
}

.legend__year > span {
  grid-area: 1 / 1;
  display: block;
  padding: 1px 0;
}

/* ---------------------------------------------------------------- the plot */
.plot {
  position: relative;
  height: 252px;
  outline: none;
  touch-action: pan-y;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.plot:focus-visible::after {
  content: '';
  position: absolute;
  inset: -10px -8px -4px;
  border: 1px solid #4a4945;
  border-radius: 6px;
  pointer-events: none;
}

.plot__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 224px;
  overflow: visible;
}

.plot__guides line,
.plot__base {
  stroke: var(--rule);
  stroke-width: 1;
}

.plot__base {
  stroke: #3a3936;
}

.plot__guides text {
  fill: #5e5d59;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 100, 'wght' 420;
}

/* the difference, written beside its dimension */
.plot__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.quota {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  opacity: 0;
  will-change: transform;
}

/* the months under the baseline */
.months {
  position: absolute;
  left: 0;
  right: 0;
  top: 234px;
  height: 18px;
}

.month {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
  font-variation-settings: 'wdth' var(--wd, 100), 'wght' var(--w, 340);
  transition: color 0.3s ease;
}

.month.is-on {
  color: var(--ink);
}

.month.is-off {
  color: #4f4e4a;
}

@media (max-width: 560px) {
  .chart__head {
    margin-bottom: 24px;
  }

  .read__brand {
    font-size: 12px;
  }

  .read__note {
    font-size: 12px;
  }

  .year {
    font-size: 15px;
    padding: 0 4px;
  }

  .legend {
    gap: 10px;
    font-size: 11px;
    padding-right: 4px;
  }

  .plot {
    height: 232px;
  }

  .plot__svg {
    height: 204px;
  }

  .months {
    top: 214px;
  }

  .quota {
    font-size: 12px;
  }
}