@layer components {

  /* A floor's plan in the house's documentation (plan/drawing.js): plan millimetres, so walls are
     as thick as they are; pipes and outlines keep their width on screen and paper. Elements in the
     designer's colours; printed, on white (document.css). */
  .drawing {
    display: block;
    width: 100%;
    height: auto;
    max-height: 230mm;
  }

  .drawing__wall {
    stroke: var(--color-wall);
    stroke-linecap: square;
  }

  /* Windows and doors: the wall cut open (in the paper's colour), then the window's two lines or the
     door's leaf and swing. */
  .drawing__opening-cut {
    stroke: var(--color-surface);
  }

  .drawing__window,
  .drawing__door {
    fill: none;
    stroke: var(--color-opening);
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;
  }

  .drawing__door {
    stroke-width: 1px;
  }

  .drawing__area {
    --c: var(--color-floor-heating);
    fill: color-mix(in oklch, var(--c) 14%, transparent);
    stroke: color-mix(in oklch, var(--c) 60%, transparent);
    stroke-width: 1px;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
  }

  .drawing__area--stairs {
    --c: var(--color-stairs);
    fill: none;
  }

  /* Labels (placed last, plan/drawing.js labelPlacer) haloed in the page's colour: they read over the
     pipes and hatching under them. */
  .drawing__room,
  .drawing__room-area,
  .drawing__code {
    fill: var(--color-ink);
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--color-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  /* From an element to its code, where the code had to go further out to find room. */
  .drawing__leader {
    stroke: var(--color-ink-muted);
    stroke-width: 0.8px;
    vector-effect: non-scaling-stroke;
  }

  .drawing__room {
    font-weight: 600;
  }

  .drawing__room-area {
    fill: var(--color-ink-muted);
  }

  .drawing__code {
    font-weight: 700;
  }

  .drawing__pipe {
    fill: none;
    stroke-width: 1.6px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .drawing__pipe--supply {
    stroke: var(--color-pipe-supply);
  }

  .drawing__pipe--return {
    stroke: var(--color-pipe-return);
  }

  .drawing__pipe--cold {
    stroke: var(--color-water-cold);
  }

  .drawing__pipe--hot {
    stroke: var(--color-water-hot);
  }

  /* Floor-heating coils: thin, supply and return; every other loop of a split zone in the other pair. */
  .drawing__pipe:is(.drawing__pipe--coil-supply, .drawing__pipe--coil-return, .drawing__pipe--coil-supply-alt, .drawing__pipe--coil-return-alt) {
    stroke-width: 0.8px;
  }

  .drawing__pipe--coil-supply {
    stroke: var(--color-pipe-supply);
  }

  .drawing__pipe--coil-return {
    stroke: var(--color-pipe-return);
  }

  .drawing__pipe--coil-supply-alt {
    stroke: var(--color-pipe-supply-alt);
  }

  .drawing__pipe--coil-return-alt {
    stroke: var(--color-pipe-return-alt);
  }

  /* A split zone's loop number (П2.1), haloed like a pipe size. */
  .drawing__loop {
    fill: var(--color-ink);
    font-weight: 700;
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--color-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .drawing__pipe--drain {
    stroke: var(--color-sewer);
    stroke-width: 2.4px;
  }

  /* A climate project's routes: the copper pair, the condensate beside it, ducts red in and blue out. */
  .drawing__pipe--liquid,
  .drawing__pipe--gas {
    stroke: var(--color-refrigerant);
  }

  .drawing__pipe--condensate {
    stroke: var(--color-condensate);
    stroke-dasharray: 4 2;
  }

  .drawing__pipe--duct-supply {
    stroke: color-mix(in oklch, var(--color-air-supply) 75%, transparent);
  }

  .drawing__pipe--duct-extract {
    stroke: color-mix(in oklch, var(--color-air-extract) 75%, transparent);
  }

  /* A pipe's size on it (Ø16), haloed in the page's colour so it reads over the lines it crosses. */
  .drawing__size {
    fill: var(--color-ink);
    font-weight: 600;
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--color-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .drawing__hole {
    fill: none;
    stroke: var(--color-warning);
    stroke-width: 1.4px;
    vector-effect: non-scaling-stroke;
  }

  .drawing__riser {
    fill: none;
    stroke: var(--color-pipe-supply);
    stroke-width: 1.4px;
    vector-effect: non-scaling-stroke;
  }

  .drawing__device {
    --c: var(--color-ink);
    fill: color-mix(in oklch, var(--c) 35%, transparent);
    stroke: var(--c);
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;
  }

  .drawing__device--radiator {
    --c: var(--color-radiator);
  }

  .drawing__device--towel-rail {
    --c: var(--color-towel-rail);
  }

  .drawing__device--gas-heater {
    --c: var(--color-gas-heater);
  }

  .drawing__device--electric-heater {
    --c: var(--color-electric-heater);
  }

  .drawing__device--boiler {
    --c: var(--color-boiler);
  }

  .drawing__device--manifold {
    --c: var(--color-manifold);
  }

  .drawing__device--water-source {
    --c: var(--color-water-cold);
  }

  .drawing__device--sewer-outlet {
    --c: var(--color-sewer);
  }

  .drawing__device--bath,
  .drawing__device--shower,
  .drawing__device--faucet,
  .drawing__device--toilet,
  .drawing__device--bidet {
    --c: var(--color-plumbing);
  }

  .drawing__device--steam-oven,
  .drawing__device--coffee-machine,
  .drawing__device--ice-maker,
  .drawing__device--dishwasher,
  .drawing__device--washing-machine {
    --c: var(--color-appliance);
  }

  .drawing__device--wall-unit,
  .drawing__device--cassette,
  .drawing__device--ducted-unit,
  .drawing__device--outdoor-unit {
    --c: var(--color-air-conditioner);
  }

  .drawing__device--recuperator,
  .drawing__device--duct-fan,
  .drawing__device--facade-grille,
  .drawing__device--room-recuperator {
    --c: var(--color-ventilation);
  }

  .drawing__device--supply-vent {
    --c: var(--color-air-supply);
  }

  .drawing__device--extract-vent {
    --c: var(--color-air-extract);
  }

  /* Under a drawing: what its lines and marks mean. */
  .drawing-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 6px 0 0;
    padding: 0;
    font-size: 11px;
    color: var(--color-ink-muted);
    list-style: none;

    & li {
      display: flex;
      align-items: center;
      gap: 6px;
    }
  }

  .drawing-legend__swatch {
    width: 18px;
    height: 0;
    border-top: 2px solid var(--c, currentColor);
  }

  .drawing-legend__swatch--supply {
    --c: var(--color-pipe-supply);
  }

  .drawing-legend__swatch--return {
    --c: var(--color-pipe-return);
  }

  /* A coil's two halves: supply then return, thin. */
  .drawing-legend__swatch:is(.drawing-legend__swatch--coils, .drawing-legend__swatch--coils-alt) {
    height: 1px;
    border: 0;
    background: linear-gradient(to right, var(--a) 50%, var(--b) 50%);
  }

  .drawing-legend__swatch--coils {
    --a: var(--color-pipe-supply);
    --b: var(--color-pipe-return);
  }

  .drawing-legend__swatch--coils-alt {
    --a: var(--color-pipe-supply-alt);
    --b: var(--color-pipe-return-alt);
  }

  .drawing-legend__swatch--cold {
    --c: var(--color-water-cold);
  }

  .drawing-legend__swatch--hot {
    --c: var(--color-water-hot);
  }

  .drawing-legend__swatch--drain {
    --c: var(--color-sewer);
    border-top-width: 3px;
  }

  .drawing-legend__swatch--refrigerant {
    --c: var(--color-refrigerant);
  }

  .drawing-legend__swatch--condensate {
    --c: var(--color-condensate);
    border-top-style: dashed;
  }

  .drawing-legend__swatch--duct-supply {
    --c: var(--color-air-supply);
    border-top-width: 4px;
  }

  .drawing-legend__swatch--duct-extract {
    --c: var(--color-air-extract);
    border-top-width: 4px;
  }

  /* A pipe size's line: as wide as it's drawn (--w, set per entry), in the ink. */
  .drawing-legend__swatch--size {
    --c: var(--color-ink);
    border-top-width: var(--w, 2px);
  }

  .drawing-legend__size {
    font-variant-numeric: tabular-nums;
  }

  .drawing-legend__swatch--hole,
  .drawing-legend__swatch--riser {
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--c);
  }

  .drawing-legend__swatch--hole {
    --c: var(--color-warning);
  }

  .drawing-legend__swatch--riser {
    --c: var(--color-pipe-supply);
    border-radius: 50%;
  }

  /* Printed on white: dark walls and text, light devices outlined in black (hardcoded colours are fine
     in print). */
  @media print {
    .drawing__wall {
      stroke: #444;
    }

    .drawing__opening-cut {
      stroke: #fff;
    }

    .drawing__window,
    .drawing__door {
      stroke: #000;
    }

    .drawing__room,
    .drawing__code,
    .drawing__loop,
    .drawing__size {
      fill: #000;
    }

    .drawing__room,
    .drawing__room-area,
    .drawing__code,
    .drawing__loop,
    .drawing__size {
      stroke: #fff;
    }

    .drawing__room-area,
    .drawing-legend {
      fill: #444;
      color: #444;
    }

    .drawing__device {
      stroke: #000;
    }
  }
}