/* Salary mosaic · additions to mosaic.css (the QuietSignal weather mosaics' stage, tip and
   "Learn more" panel, whose grounds suit Sanzo Wada No. 279): the salary table and legend. */

/* A tapped or hovered role: its figures for every year, newest first. */
.qs-mosaic__tip { min-width: 15em; }
.qs-mosaic__grid {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(3.6em, auto));
  column-gap: 0.9em;
  row-gap: 0.15em;
  margin-top: 0.25em;
  font-variant-numeric: tabular-nums;
}
.qs-mosaic__grid i {
  font-style: normal;
  font-size: 0.82em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tip-muted);
}
.qs-mosaic__grid i:not(:first-child),
.qs-mosaic__grid span { text-align: right; }
.qs-mosaic__grid b { font-weight: 500; }
.qs-mosaic__tip .qs-mosaic__grid span { display: block; margin: 0; color: var(--ink); }

/* Legend: the shading ramp, low pay to high, built from the data. */
.qs-ramp { margin-top: 0.6em; border-radius: 3px; height: 0.9em; }
.qs-ramp__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3em;
  font-size: 0.86em;
  color: var(--ht-muted);
  font-variant-numeric: tabular-nums;
}
.qs-bands { display: grid; grid-template-columns: auto 1fr; gap: 0.3em 0.6em; align-items: center; margin-top: 0.7em; }
.qs-bands svg { display: block; }

/* Gybe Consulting's logo, small, in the top right-hand corner. White on dark; on the light ground
   the same image is drawn in ink so it stays visible. Below the "Learn more" panel if they meet,
   and it rests with the pill in Display mode. */
.qs-brand {
  position: absolute;
  z-index: 4;
  top: max(10px, 2.2cqmin);
  right: max(10px, 2.2cqmin);
  width: clamp(60px, 7.5cqmin, 96px);
  opacity: 0.85;
  transition: opacity 0.3s;
}
.qs-brand:hover, .qs-brand:focus-visible { opacity: 1; }
.qs-brand img { display: block; width: 100%; height: auto; }
:root:not([data-theme='dark']) .qs-brand img { filter: brightness(0); opacity: 0.7; }
.qs-display .qs-brand { transition: opacity 0.8s ease; }
.qs-display:not(.is-awake) .qs-brand { opacity: 0; pointer-events: none; }