/* Unit plan: an indicative plan of the site with the 57 units in three
   rows, next to the three unit types. Hovering a type in the plan or in
   the list highlights it in both, with :has() and no JavaScript. The
   figures stay readable in the list, so nothing depends on the hover.

   The type colours are mixes of the theme tokens, so the untold config
   panel recolours the plan along with the rest of the page. */

.plan {
  --theme-plan-groot: var(--theme-color-primary);
  --theme-plan-middel: var(--theme-color-secondary);
  --theme-plan-klein: color-mix(
    in srgb,
    var(--theme-color-secondary) 45%,
    var(--theme-color-background)
  );
  --theme-plan-hover: var(--theme-color-highlight);

  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    'intro intro'
    'drawing table';
  gap: var(--theme-space-md) var(--theme-space-lg);
  align-items: center;
  padding: var(--theme-section-space) var(--theme-bleed);
}

.plan__intro {
  grid-area: intro;
  max-width: 40rem;
}

.plan__drawing {
  grid-area: drawing;
  display: block;
  width: 100%;
  height: auto;
}

.plan__site {
  fill: var(--theme-color-surface);
}

.plan__road {
  fill: var(--theme-color-secondary);
}

.plan__road-label {
  font-size: 13px;
  font-weight: var(--theme-font-weight-bold);
  letter-spacing: 0.24em;
  text-anchor: middle;
  text-transform: uppercase;
  fill: var(--theme-color-inverse-text);
}

.plan__unit rect {
  stroke: var(--theme-color-background);
  stroke-width: 2;
  transition: fill 0.2s var(--theme-ease-signature);
}

.plan__unit text {
  font-size: 11px;
  font-weight: var(--theme-font-weight-bold);
  text-anchor: middle;
  fill: var(--theme-color-inverse-text);
  pointer-events: none;
}

.plan__unit[data-type='groot'] rect {
  fill: var(--theme-plan-groot);
}

.plan__unit[data-type='middel'] rect {
  fill: var(--theme-plan-middel);
}

.plan__unit[data-type='klein'] rect {
  fill: var(--theme-plan-klein);
}

.plan__unit[data-type='klein'] text {
  fill: var(--theme-color-text);
}

.plan__table {
  grid-area: table;
}

.plan__types {
  list-style: none;
}

.plan__type {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: 2px 16px;
  align-items: baseline;
  padding-block: 16px;
  border-top: 1px solid var(--theme-color-rule);
  transition: background-color 0.2s var(--theme-ease-signature);
}

.plan__type:last-child {
  border-bottom: 1px solid var(--theme-color-rule);
}

.plan__swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--theme-radius-sm);
  align-self: center;
}

.plan__type[data-type='groot'] .plan__swatch {
  background: var(--theme-plan-groot);
}

.plan__type[data-type='middel'] .plan__swatch {
  background: var(--theme-plan-middel);
}

.plan__type[data-type='klein'] .plan__swatch {
  background: var(--theme-plan-klein);
}

.plan__name {
  font-weight: var(--theme-font-weight-bold);
  color: var(--theme-color-heading);
}

.plan__area {
  font-weight: var(--theme-font-weight-bold);
  color: var(--theme-color-heading);
}

.plan__split {
  grid-column: 2 / -1;
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
}

.plan__note {
  margin-top: 16px;
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
}

.plan:has([data-type='groot']:hover) .plan__unit[data-type='groot'] rect,
.plan:has([data-type='middel']:hover) .plan__unit[data-type='middel'] rect,
.plan:has([data-type='klein']:hover) .plan__unit[data-type='klein'] rect {
  fill: var(--theme-plan-hover);
}

.plan:has([data-type='groot']:hover) .plan__unit[data-type='groot'] text,
.plan:has([data-type='middel']:hover) .plan__unit[data-type='middel'] text,
.plan:has([data-type='klein']:hover) .plan__unit[data-type='klein'] text {
  fill: var(--theme-color-heading);
}

.plan:has([data-type='groot']:hover) .plan__type[data-type='groot'],
.plan:has([data-type='middel']:hover) .plan__type[data-type='middel'],
.plan:has([data-type='klein']:hover) .plan__type[data-type='klein'] {
  background: color-mix(in srgb, var(--theme-plan-hover) 45%, transparent);
}

@media (width <= 800px) {
  .plan {
    grid-template-columns: 1fr;
    grid-template-areas:
      'intro'
      'drawing'
      'table';
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan__unit rect,
  .plan__type {
    transition: none;
  }
}