/*
  Turns poster: one row per store, one cell per month.
  Months with no orders are orange; ordering months run from a pale Kuli Kuli
  green (few turns) to forest green (most turns). Months before a store's first
  order are blank.
*/
.poster {
  width: 100%;

  .store {
    display: flex;
    border-block: 1px solid transparent;
  }

  .store:hover {
    border-color: var(--kk-forest-green);
  }

  .value {
    height: 5px;
    width: 5px;
    margin-right: 1px;
  }

  .turns-blank {
    background-color: transparent;
  }

  .turns-0 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 11%, #c5e6d3);
  }

  .turns-1 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 20%, #c5e6d3);
  }

  .turns-2 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 29%, #c5e6d3);
  }

  .turns-3 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 38%, #c5e6d3);
  }

  .turns-4 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 47%, #c5e6d3);
  }

  .turns-5 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 56%, #c5e6d3);
  }

  .turns-6 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 64%, #c5e6d3);
  }

  .turns-7 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 73%, #c5e6d3);
  }

  .turns-8 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 82%, #c5e6d3);
  }

  .turns-9 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 91%, #c5e6d3);
  }

  .turns-10 {
    background-color: color-mix(in oklab, var(--kk-forest-green) 100%, #c5e6d3);
  }
}