/*
 * The progress pictures (docs/progress/index.md, history.md): the colours, the toggle between the two pictures of
 * functions, the legend and the tooltip. The SVGs are generated by the docs build (coney_tools/progress_picture.py);
 * their squares carry state classes, so one drawing serves both themes. The colours are the validated palettes of
 * coney_tools/progress_grid.py (PALETTE) and progress_site.py (MISSION_PALETTE), light here and dark under the slate
 * scheme below; test_progress_grid.py fails when the two places disagree.
 */
.progress-grid {
  --cg-audited: #8250df;
  --cg-reimplemented: #2ea043;
  --cg-understood: #3b82f6;
  --cg-researched: #b8860b;
  --cg-untouched: #6e7681;
  --cg-m-not-started: #6e7681;
  --cg-m-in-progress: #b8860b;
  --cg-m-pending-approval: #3b82f6;
  --cg-m-needs-fixes: #c2185b;
  --cg-m-approved: #2ea043;

  position: relative;
  margin: 1em 0 1.5em;
}

/* The dark theme's fills: brighter, so each state keeps its contrast on the slate background. */
[data-md-color-scheme="slate"] .progress-grid {
  --cg-audited: #a371f7;
  --cg-reimplemented: #3fb950;
  --cg-understood: #58a6ff;
  --cg-researched: #d29922;
  --cg-untouched: #8b949e;
}

/* Squares, chart lines and legend keys take their colour from the same custom properties. */
.progress-grid svg .cg-s-audited { fill: var(--cg-audited); }
.progress-grid svg .cg-s-reimplemented { fill: var(--cg-reimplemented); }
.progress-grid svg .cg-s-understood { fill: var(--cg-understood); }
.progress-grid svg .cg-s-researched { fill: var(--cg-researched); }
.progress-grid svg .cg-s-untouched { fill: var(--cg-untouched); }
.progress-grid svg .cg-m-not-started { fill: var(--cg-m-not-started); }
.progress-grid svg .cg-m-in-progress { fill: var(--cg-m-in-progress); }
.progress-grid svg .cg-m-pending-approval { fill: var(--cg-m-pending-approval); }
.progress-grid svg .cg-m-needs-fixes { fill: var(--cg-m-needs-fixes); }
.progress-grid svg .cg-m-approved { fill: var(--cg-m-approved); }
.progress-grid .cg-key.cg-s-audited { background: var(--cg-audited); }
.progress-grid .cg-key.cg-s-reimplemented,
.progress-grid .cg-key.cg-line-reimplemented { background: var(--cg-reimplemented); }
.progress-grid .cg-key.cg-s-understood,
.progress-grid .cg-key.cg-line-understood { background: var(--cg-understood); }
.progress-grid .cg-key.cg-s-researched,
.progress-grid .cg-key.cg-line-researched { background: var(--cg-researched); }
.progress-grid .cg-key.cg-s-untouched { background: var(--cg-untouched); }
.progress-grid .cg-key.cg-m-not-started { background: var(--cg-m-not-started); }
.progress-grid .cg-key.cg-m-in-progress { background: var(--cg-m-in-progress); }
.progress-grid .cg-key.cg-m-pending-approval { background: var(--cg-m-pending-approval); }
.progress-grid .cg-key.cg-m-needs-fixes { background: var(--cg-m-needs-fixes); }
.progress-grid .cg-key.cg-m-approved { background: var(--cg-m-approved); }

/* The pictures scale to the column; text inside stays in the page's own ink. */
.progress-grid svg.cg,
.progress-grid svg.cg-chart {
  display: block;
  width: 100%;
  height: auto;
}

.progress-grid svg.cg-chart { max-width: 40rem; }
.progress-grid .cg-l { fill: var(--md-default-fg-color); font-family: inherit; }
.progress-grid .cg a:hover .cg-l { text-decoration: underline; }
.progress-grid .cg-grid { stroke: var(--md-default-fg-color--lightest); stroke-width: 1; }
.progress-grid .cg-tick { fill: var(--md-default-fg-color--light); font-size: 11px; font-family: inherit; }
.progress-grid polyline { fill: none; stroke-width: 2; stroke-linejoin: round; }
.progress-grid polyline.cg-line-reimplemented { stroke: var(--cg-reimplemented); }
.progress-grid polyline.cg-line-understood { stroke: var(--cg-understood); }
.progress-grid polyline.cg-line-researched { stroke: var(--cg-researched); }
.progress-grid circle.cg-line-reimplemented { fill: var(--cg-reimplemented); }
.progress-grid circle.cg-line-understood { fill: var(--cg-understood); }
.progress-grid circle.cg-line-researched { fill: var(--cg-researched); }

/* The square under the pointer (drawn by progress-grid.js). */
.progress-grid .cg-hover {
  fill: none;
  stroke: var(--md-default-fg-color);
  stroke-width: 1.4;
  pointer-events: none;
}

.progress-grid .cg-headline { margin-bottom: 0.6em; }

/* The toggle: two radio buttons and the panes they show, no script needed. */
.progress-grid .cg-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.progress-grid .cg-tab {
  display: inline-block;
  margin: 0 0.4em 0.7em 0;
  padding: 0.2em 0.9em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 2em;
  font-size: 0.8rem;
  cursor: pointer;
}

.progress-grid .cg-radio:checked + .cg-tab {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.progress-grid .cg-radio:focus-visible + .cg-tab { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }
.progress-grid #cg-view-f:checked ~ .cg-pane-s,
.progress-grid #cg-view-s:checked ~ .cg-pane-f { display: none; }

/* The legend: a swatch, the state, its count and what it means. */
.md-typeset .progress-grid .cg-legend { margin: 0.8em 0 0; padding: 0; list-style: none; font-size: 0.8rem; }
.md-typeset .progress-grid .cg-legend li { margin: 0.25em 0; }
.md-typeset .progress-grid .cg-legend-inline li { display: inline-block; margin-right: 1.2em; }
.progress-grid .cg-key {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  border-radius: 1px;
}

/* The tooltip over a square. Pinned (a click or a tap) it stays so its link can be followed. */
.progress-grid .cg-tip {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  max-width: min(22rem, 100%);
  padding: 0.5em 0.7em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
  color: var(--md-default-fg-color);
  font-size: 0.72rem;
  line-height: 1.4;
  pointer-events: none;
  overflow-wrap: anywhere;
}

.progress-grid .cg-tip[hidden] { display: none; }
.progress-grid .cg-tip[data-pinned] { pointer-events: auto; }
.progress-grid .cg-tip .cg-tip-name { font-weight: 700; }
.progress-grid .cg-tip .cg-tip-title { white-space: pre-line; }