/* Shared figure frame and illustration palette */

.calculator-diagram {
  --diagram-outline: #3c4740;
  --diagram-outline-muted: #625b50;

  margin-block: var(--space-7);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
}

.calculator-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.calculator-diagram text {
  fill: var(--color-ink);
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.calculator-diagram figcaption {
  color: var(--color-muted);
  font-size: 0.92rem;
}

/* Shared text roles */

.calculator-diagram .diagram-label--small {
  font-size: 17px;
}

.calculator-diagram .diagram-note {
  font-size: 18px;
  font-weight: 500;
  text-anchor: middle;
}

.calculator-diagram .diagram-label--center {
  text-anchor: middle;
}

.calculator-diagram .diagram-label--end {
  text-anchor: end;
}

.calculator-diagram .diagram-label--halo {
  paint-order: stroke fill;
  stroke: var(--color-surface-muted);
  stroke-linejoin: round;
  stroke-width: 10px;
}

/* Shared shape roles */

.slab-diagram__top,
.slab-diagram__front,
.slab-diagram__side,
.post-hole-diagram__concrete,
.post-hole-diagram__rim,
.paint-diagram__wall,
.paint-diagram__can,
.flooring-tile-diagram__room,
.flooring-tile-diagram__box {
  stroke: var(--diagram-outline);
  stroke-width: 3;
}

.post-hole-diagram__soil,
.paint-diagram__door,
.paint-diagram__window,
.mulch-soil-diagram__ground,
.gravel-driveway-diagram__subgrade {
  stroke: var(--diagram-outline-muted);
  stroke-width: 3;
}

.slab-diagram__measure,
.post-hole-diagram__measure,
.paint-diagram__measure,
.paint-diagram__flow,
.flooring-tile-diagram__flow,
.mulch-soil-diagram__measure,
.gravel-driveway-diagram__measure {
  stroke: var(--color-brand);
  stroke-width: 4;
}

/* Concrete slab */

.slab-diagram__top {
  fill: #d8d7d1;
}

.slab-diagram__front {
  fill: #aaa9a3;
}

.slab-diagram__side {
  fill: #bcbab4;
}

/* Post holes */

.post-hole-diagram__soil {
  fill: #e6dfd1;
}

.post-hole-diagram__concrete {
  fill: #b8b7b1;
}

.post-hole-diagram__rim {
  fill: #d1d0ca;
}

.post-hole-diagram__post,
.post-hole-diagram__post-top {
  fill: #9d7553;
  stroke: #533b2a;
  stroke-width: 3;
}

/* Paint */

.paint-diagram__wall {
  fill: #eff2eb;
}

.paint-diagram__door,
.paint-diagram__window {
  fill: var(--color-surface);
}

.paint-diagram__can {
  fill: #d8e7dc;
}

/* Flooring and tile */

.flooring-tile-diagram__room {
  fill: url("#flooring-grid") #e1ece4;
}

.flooring-tile-diagram__exclusion {
  fill: var(--color-danger-surface);
  stroke: var(--color-danger-ink);
  stroke-width: 3;
}

.flooring-tile-diagram__box {
  fill: #d8d7d1;
}

/* Mulch and soil */

.mulch-soil-diagram__bed,
.mulch-soil-diagram__material {
  stroke: #56452d;
  stroke-width: 3;
}

.mulch-soil-diagram__bed {
  fill: #b99455;
}

.mulch-soil-diagram__material {
  fill: url("#mulch-soil-texture") #b99455;
}

.mulch-soil-diagram__ground {
  fill: #ded3bc;
}

/* Gravel driveway */

.gravel-driveway-diagram__plan,
.gravel-driveway-diagram__compacted,
.gravel-driveway-diagram__loose {
  fill: url("#gravel-stones") #a9a59a;
  stroke: #4b4b46;
  stroke-width: 3;
}

.gravel-driveway-diagram__subgrade {
  fill: #d9c6a7;
}