/* Space type key: a small top-down plan for one kind of space
   (templates/components/marketing/space_type_key.html).
   Flat and neutral per the interface standard: shared roles only, no green.
   The space you book is the white shape with the strong outline in both themes. */

.space-type-key {
  --space-key-ground: var(--surface-card);
  --space-key-structure: var(--surface-card-pressed);
  --space-key-line: var(--border-control);
  --space-key-booked: var(--surface-raised);
  --space-key-booked-edge: var(--accent-primary);
  --space-key-item: var(--text-caption);

  display: block;
  flex: 0 0 auto;
  width: 4rem;
  height: 3rem;
  border-radius: var(--border-radius-md);
  background: var(--space-key-ground);
}

/* Dark: raised surfaces are dark, so the booked shape takes the text colour to
   stay white, and items move to the control grey to stay visible on it. */
html.dark .space-type-key {
  --space-key-booked: var(--text-primary);
  --space-key-booked-edge: var(--text-primary);
  --space-key-item: var(--border-control);
}

.space-type-key * {
  vector-effect: non-scaling-stroke;
}

.space-type-key__structure {
  fill: var(--space-key-structure);
  stroke: var(--space-key-line);
  stroke-width: 1;
}

.space-type-key__edge,
.space-type-key__paint,
.space-type-key__zone,
.space-type-key__fence {
  fill: none;
  stroke: var(--space-key-line);
  stroke-width: 1;
  stroke-linecap: round;
}

.space-type-key__paint--dashed {
  stroke-dasharray: 4 3;
}

.space-type-key__fence {
  stroke-dasharray: 1 3;
}

.space-type-key__booked {
  fill: var(--space-key-booked);
  stroke: var(--space-key-booked-edge);
  stroke-width: 1.5;
}

.space-type-key__door,
.space-type-key__door-booked,
.space-type-key__hitch {
  fill: none;
  stroke: var(--space-key-line);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.space-type-key__door-booked {
  stroke: var(--space-key-booked-edge);
}

.space-type-key__hitch {
  stroke: var(--space-key-item);
}

/* Open-sided cover: a dashed outline in the booked edge colour. */
.space-type-key__cover {
  fill: none;
  stroke: var(--space-key-booked-edge);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.space-type-key__item {
  fill: var(--space-key-item);
}

.space-type-key__glass,
.space-type-key__ground {
  fill: var(--space-key-ground);
}

.space-type-key__glass-booked {
  fill: var(--space-key-booked);
}

.space-type-key__post {
  fill: var(--space-key-line);
}