/* The marker. One definition, used by the published audit, by the editor's
 * canvas and by the findings list.
 *
 * It lived in three places before and drifted in all three: the site had a dark
 * disc with a coloured numeral, the editor had a solid fill, and the findings
 * list had a severity bar and a small purple numeral. Three visual languages for
 * one object, so reading a number off a capture and finding it in a list meant
 * translating between them. This file is the only place the design exists.
 *
 * SEVERITY COLOURS, and why they are these ones.
 *
 * The numeral is white on all three, so the fill has to carry white at a
 * readable contrast. That constraint set the colours:
 *
 *   high      #E11D48   white 4.70:1   AA for normal text
 *   moderate  #D97706   white 3.19:1   below AA, see the note
 *   minor     #059669   white 3.77:1   below AA, see the note
 *
 * Amber and green cannot reach 4.5:1 with white and still read as amber and
 * green; the nearest passing pair is #C2410C and #047857, which look like burnt
 * orange and forest. Hue legibility was chosen over the numeral threshold,
 * because a marker whose severity is misread is worse than one whose numeral is
 * slightly soft. If that judgement is ever revisited, those two hexes are the
 * strict alternative.
 *
 * NO DARK RIM. The old design carried a 1.5px black ring and a drop shadow,
 * because a pale fill disappeared against a white screenshot. Against pure
 * white the current fills measure 4.70, 3.19 and 3.77:1, all clear of the 3:1
 * that WCAG 1.4.11 asks of a graphical object, so the rim stopped being load
 * bearing the moment the colours were darkened for the white numerals. It is
 * gone, and the marker is flat colour.
 */

:root{
  --marker-high:#E11D48;
  --marker-moderate:#D97706;
  --marker-minor:#059669;
  --marker-ink:#fff;
  --marker-size:28px;
}

/* The disc itself. Positioning is left to whoever places it, because the site
   puts markers on an absolutely positioned overlay and the findings list puts
   them in a grid cell. */
.marker{
  width:var(--marker-size);height:var(--marker-size);
  border-radius:50%;padding:0;border:0;
  display:grid;place-items:center;
  font-family:var(--font-mono,var(--mono,ui-monospace,monospace));
  font-size:12px;font-weight:600;
  background:var(--acc);color:var(--marker-ink);
  /* Fallback for a marker with no severity yet. */
  --marker-pulse:var(--acc);
}
/* Each severity also names its own pulse colour, so the halo can never be a
   different hue from the disc it belongs to. */
.marker.sev-high{background:var(--marker-high);--marker-pulse:var(--marker-high);}
.marker.sev-moderate{background:var(--marker-moderate);--marker-pulse:var(--marker-moderate);}
.marker.sev-minor{background:var(--marker-minor);--marker-pulse:var(--marker-minor);}

/* The pulse is an expanding ring drawn with box-shadow on the marker itself.
 *
 * It was a scaled pseudo element with z-index:-1 first, and it was invisible:
 * a negative z-index on a child with no stacking context above it paints behind
 * the ancestors' backgrounds, and .shot-media is opaque, so the halo animated
 * away underneath the screenshot for its entire life. box-shadow has no such
 * problem - it always paints outside the border box, over whatever is there,
 * and it costs no layout because it is not part of the box model. */
.marker.is-pulsing{animation:marker-pulse 2.4s ease-out infinite;}

@keyframes marker-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--marker-pulse) 55%, transparent);}
  70%{box-shadow:0 0 0 13px color-mix(in srgb, var(--marker-pulse) 0%, transparent);}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--marker-pulse) 0%, transparent);}
}

/* Once you are interacting with it the movement is noise, and stopping the
   animation also hands the box-shadow back to the host, which is what draws the
   selected ring. An animation would otherwise win over that rule. */
.marker:hover,
.marker:focus-visible,
.marker.is-active,
.marker.is-selected{animation:none;}

@media (prefers-reduced-motion:reduce){
  .marker.is-pulsing{animation:none;}
}