/*
 * Progress by category, as a column chart — SHARED.
 *
 * The same chart is drawn twice: on the schedule desk, where an organiser reads
 * how far through the day they are, and on the public front page, where a club
 * reads the same thing about the tournament they are waiting in. It is one
 * picture of one fact, so it is one stylesheet rather than two that drift.
 *
 * It was written for the desk and moved here whole when the front page needed
 * it. Nothing about it is admin-only: it depends on the design tokens and on a
 * `--tone` per category, and both pages have those.
 *
 * The markup it expects, built by the page:
 *
 *   .cat-chart > .cat-scale        the tick labels down the left
 *             > .cat-plot          > .cat-col > .cat-col-pct + .cat-track > .cat-fill
 *             > .cat-axis          > .cat-axis-cell > name, count, meta
 *
 * @see public/assets/js/schedule.js  renderCategories()
 * @see public/assets/js/board.js     paintTypes()
 * @see public/assets/js/bars.js      what grows the bars in
 */

/*
 * Progress by category, as a column chart.
 *
 * Three parts on one grid — the scale down the left, the plot, and the axis
 * beneath it. The plot and the axis are separate grids sharing an identical
 * column definition, which is what keeps every label under its own column no
 * matter how many categories there are.
 *
 * Columns are laid out with GRID, not flex. Flex items with `margin: 0 auto`
 * absorb all the free space before `flex-basis` is applied and collapse to
 * their content width — which is how this chart first shipped as three
 * one-pixel lines.
 */
.cat-chart {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: 200px auto;
  column-gap: 12px;
  margin-top: 18px;
}

/*
 * Tick labels.
 *
 * `space-between` puts the first against the top edge and the last against the
 * bottom, which is exactly where the outermost gridlines are — so they line up
 * with no nudging. The middle three land on the 75/50/25 lines for the same
 * reason.
 */
.cat-scale {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 10.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.cat-plot,
.cat-axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(12px, 4vw, 56px);
  padding: 0 clamp(8px, 3vw, 32px);
}

.cat-plot {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-items: end;
  border-bottom: 1px solid var(--border);
}

/* Gridlines behind the columns, faint enough to read past. */
.cat-plot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to top,
    var(--divider) 0 1px,
    transparent 1px 25%
  );
  pointer-events: none;
}

.cat-col {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

/*
 * The column body: this category's total fixtures, against the biggest one.
 *
 * It is a container, not a bar — the bar is the fill inside it. The outline is
 * what makes the empty part read as "still to play" rather than as blank page.
 * Capped at 74px so two categories do not produce two enormous slabs.
 */
.cat-track {
  position: relative;
  width: 100%;
  max-width: 74px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: var(--surface-2);
  overflow: hidden;
}

/*
 * Played fixtures, growing from the bottom.
 *
 * Absolutely positioned so its height is a share of the column it sits in,
 * not of its own content — and so the entrance animation has something fixed
 * to grow against.
 */
.cat-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tone, var(--brand)) 74%, #fff),
    var(--tone, var(--brand))
  );

  /* The entrance is timed by NTBars, which writes its own transition onto the
     element. This one covers every later change — a score saved while the page
     is open slides the bar up rather than jumping it. */
  transition: height var(--duration-slow) var(--ease-out);
}

/*
 * WITHOUT color-mix THE BAR STILL HAS A COLOUR.
 *
 * The gradient's top stop is mixed with white, so on an engine that does not
 * know `color-mix` the whole `background` declaration is invalid and dropped —
 * and nothing else sets one. The progress chart came out as a row of empty
 * outlines on iPad Safari before 16.2, with no error anywhere to say why: the
 * one screen that answers "how far through are we" showed nothing.
 *
 * The flat tone is what carried the meaning anyway; the gradient is polish.
 */
@supports not (background: color-mix(in srgb, red 50%, #fff)) {
  .cat-fill { background: var(--tone, var(--brand)); }
}

/* A finished category stops being a measurement and becomes a result. */
.cat-col.is-done .cat-fill {
  background: linear-gradient(180deg, hsl(152 60% 54%), var(--success));
}

.cat-col-pct {
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tone-ink, var(--brand));
  white-space: nowrap;
}
.cat-col.is-done .cat-col-pct { color: var(--success); }

/* --- The axis under the columns ------------------------------------------- */

.cat-axis {
  grid-column: 2;
  grid-row: 2;
  padding-top: 11px;
}

.cat-axis-cell {
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
}

/* A tick of the category's own colour, joining the label to its column. */
.cat-axis-cell::before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--tone, var(--brand));
}
.cat-axis-cell.is-done::before { background: var(--success); }

.cat-axis-name {
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-axis-count {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}

.cat-axis-meta {
  max-width: 100%;
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* Shorter plot, tighter gaps, and no team/group line: on a phone the columns
     and their names are the part worth keeping. */
  .cat-chart {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: 150px auto;
    column-gap: 8px;
  }
  .cat-plot,
  .cat-axis { gap: 10px; padding-left: 2px; padding-right: 2px; }
  .cat-axis-meta { display: none; }
  .cat-axis-name { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-fill { transition: none; }
}

.pill--done { background: var(--success-soft); color: var(--success); }


/*
 * The ink, adjusted for the page it is being read on.
 *
 * One colour is stored per category and both themes derive from it. A hue
 * chosen against white is too dark to read on near-black, and lifting it in the
 * stylesheet means an operator picks a colour once rather than once per theme.
 */
[data-tone] {
  --tone-ink: color-mix(in srgb, var(--tone) 88%, #000);
}
[data-theme="dark"] [data-tone] {
  --tone-ink: color-mix(in srgb, var(--tone) 56%, #fff);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-tone] {
    --tone-ink: color-mix(in srgb, var(--tone) 56%, #fff);
  }
}

@media print {
  /* Browsers drop backgrounds when printing; the bars are the point here, so
     they are asked to stay. The percentage above each column carries the
     figure regardless, for a printer that refuses. */
  .cat-fill,
  .cat-track {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cat-chart { break-inside: avoid; }
}