/* The blueprint: the sheet the drawings sit on, and how plans, the front of the
   house and the map are drawn on it. White-ish lines on cyanotype blue, in both
   light and dark mode, because that is what a blueprint looks like. */

.sheet {
  --bp: #1c4d8c;
  --bp-deep: #163f75;
  --bp-line: #eef5ff;
  --bp-soft: rgba(238, 245, 255, 0.68);
  --bp-faint: rgba(238, 245, 255, 0.34);
  --bp-grid: rgba(238, 245, 255, 0.06);
  --bp-grid-major: rgba(238, 245, 255, 0.12);
  --bp-water: rgba(160, 205, 255, 0.16);
  --bp-mark: #ffd34d;
  --bp-mark-ink: #2a1f00;
  --bp-font: 'Architects Daughter', 'Segoe Print', 'Comic Sans MS', cursive;
  position: relative;
  color: var(--bp-line);
  background-color: var(--bp);
  background-image:
    linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.16));
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, 100% 100%;
  background-position: -1px -1px;
  border-radius: 16px;
  overflow: hidden;
}

/* The drawing border, inset from the edge of the sheet. */
.sheet::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1.5px solid var(--bp-faint);
  border-radius: 6px;
  pointer-events: none;
}

.bp-plan, .bp-front, .bp-map { display: block; overflow: visible; }
.bp-plan text, .bp-front text, .bp-map text { font-family: var(--bp-font); }

.bp-wall-out, .bp-wall-in { fill: none; stroke: var(--bp-line); stroke-linejoin: miter; }
.bp-wall-in { stroke: rgba(238, 245, 255, 0.92); }
.bp-party { stroke: var(--bp-line); stroke-dasharray: 0.6 0.35; opacity: 0.7; }
.bp-cut { fill: var(--bp); }
.bp-hall { fill: rgba(238, 245, 255, 0.035); }
.bp-glass, .bp-door, .bp-fix, .bp-tread, .bp-arrow, .bp-dash, .bp-dash-line, .bp-dim path, .bp-stair, .bp-line {
  fill: none;
  stroke: var(--bp-soft);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.bp-glass { stroke: var(--bp-line); }
.bp-door { stroke: var(--bp-soft); }
.bp-fix { stroke: rgba(238, 245, 255, 0.5); }
.bp-tread { stroke: rgba(238, 245, 255, 0.45); }
.bp-stair { stroke: var(--bp-soft); }
.bp-arrow { stroke: var(--bp-line); }
.bp-dash, .bp-dash-line { stroke-dasharray: 4 3; stroke: var(--bp-faint); }
.bp-water { fill: var(--bp-water); stroke: var(--bp-soft); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.bp-dim path { stroke: var(--bp-faint); }
.bp-label { fill: var(--bp-line); letter-spacing: 0.04em; text-transform: uppercase; }
.bp-dim-text { fill: var(--bp-soft); letter-spacing: 0.02em; }

/* The front of the house. */
.fr-ground { stroke: var(--bp-line); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fr-hatch, .fr-shingle { fill: none; stroke: var(--bp-faint); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fr-shingle { stroke: rgba(238, 245, 255, 0.2); }
.fr-wall { fill: var(--bp); stroke: var(--bp-line); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fr-roof { fill: color-mix(in srgb, var(--bp) 82%, white); stroke: var(--bp-line); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fr-window { fill: rgba(238, 245, 255, 0.1); stroke: var(--bp-line); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.fr-door { fill: var(--bp); stroke: var(--bp-line); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.fr-thin, .fr-line { fill: none; stroke: var(--bp-soft); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fr-line { stroke: var(--bp-line); }
.fr-neighbor, .fr-below { fill: none; stroke: var(--bp-faint); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.fr-texture { stroke: none; opacity: 0.55; }
.fr-brick { fill: url(#bp-brick); }
.fr-siding { fill: url(#bp-siding); }

/* Trees and shrubs, in outline the way architects draw them on an elevation. */
.fr-crown, .fr-shrub { fill: color-mix(in srgb, var(--bp) 88%, white); stroke: var(--bp-soft); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fr-shrub { fill: color-mix(in srgb, var(--bp) 84%, white); }
.fr-trunk { fill: var(--bp); stroke: var(--bp-soft); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fr-twig, .fr-leaf, .fr-grass { fill: none; stroke: var(--bp-faint); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fr-leaf { stroke: rgba(238, 245, 255, 0.26); }