/* The symbol map. Plain CSS in a file of its own for each chart form (decision 0012), so that
   changing one form never changes another form's frozen embeds (decision 0009). Uses the
   house tokens. The legend circles are sized from the stage's width (--stage) with the same
   fraction of it as in the drawing, so they match the circles on the map. */

.sy {
  --stage: min(100cqw, 22rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  font-size: 14px;
}

.sy .stage {
  width: var(--stage);
  margin: 0 auto;
}

.sy svg {
  display: block;
  width: 100%;
  height: auto;
}

.sy .land {
  fill: var(--grid);
  stroke: var(--surface);
  stroke-width: 0.5px;
  vector-effect: non-scaling-stroke;
}

.sy .dot {
  fill: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke: var(--accent);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
}

.sy .unit {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-weight: 600;
}

.sy .kh {
  margin: 0 0 6px;
  color: var(--muted);
}

.sy .keys,
.sy .ext ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy .keys {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 18px;
}

.sy .keys li {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: var(--ink-2);
}

.sy .swatch {
  display: inline-flex;
  align-items: flex-end;
  min-width: 4px;
}

.sy .ring {
  display: block;
  box-sizing: border-box;
  width: calc(var(--stage) * var(--d));
  height: calc(var(--stage) * var(--d));
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.sy .kv,
.sy .nu {
  font-variant-numeric: tabular-nums;
}

.sy .ext {
  margin-top: 18px;
}

.sy h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 1em;
  font-weight: 600;
}

.sy .ext li {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  color: var(--ink-2);
  line-height: 1.5;
}

.sy .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sy .nu {
  color: var(--ink);
  font-weight: 600;
}

/* Room for the map and the legend side by side. */
@container (min-width: 36rem) {
  .sy {
    --stage: min((100cqw - 18px) / 2, 22rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* The share card: the map on the left, the legend and the names on the right, larger. */
.sy-card {
  --stage: 470px;
  grid-template-columns: 470px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  font-size: 22px;
}

.sy-card .stage {
  margin: 0;
}

.sy-card .ext {
  margin-top: 16px;
}

.sy-card .ext li {
  line-height: 1.35;
}