/* Hochflieger: drawn-blueprint classes. Colours, weights and spacing come from tokens.css.
   SVG lines wobble through Hochflieger.sketch(); HTML boxes wobble through the CSS edge masks below. */

/* ---- SVG drawing: one class per kind of line ---- */
.hf-object, .hf-edge, .hf-dim, .hf-hidden, .hf-center, .hf-cut, .hf-hatch, .hf-grid {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hf-object { stroke: var(--draw-object); stroke-width: var(--stroke-heavy); }
.hf-edge   { stroke: var(--draw-object); stroke-width: var(--stroke-medium); }
.hf-dim    { stroke: var(--draw-dimension); stroke-width: var(--stroke-thin); }
.hf-hidden { stroke: var(--draw-object); stroke-width: var(--stroke-thin); stroke-dasharray: var(--dash-hidden); }
.hf-center { stroke: var(--draw-dimension); stroke-width: var(--stroke-thin); stroke-dasharray: var(--dash-center); }
.hf-cut    { stroke: var(--draw-dimension); stroke-width: var(--stroke-thin); stroke-dasharray: var(--dash-cut); }
.hf-hatch  { stroke: var(--draw-hatch); stroke-width: var(--stroke-thin); }
.hf-grid   { stroke: var(--grid); stroke-width: var(--stroke-medium); stroke-opacity: var(--grid-strength, 0.18); }
.hf-circle { fill: none; stroke: var(--draw-object); stroke-width: var(--stroke-medium); }

/* Lettering inside a drawing: never filtered, always capitals. */
.hf-annotation {
  font-family: var(--font-hand);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--hand-ink);
}
/* A title-block heading or legend entry: the same yellow, a size up. */
.hf-annotation.is-object { font-size: 18px; }

/* ---- HTML: wobbly borders for any element, in CSS only ----
   Each side is a seamless hand-drawn line tile used as a mask, repeated with `round` so it always fits.
   ::before draws top and bottom, ::after left and right; both are painted in --hf-edge-color, so
   the line takes its colour from the tokens. Corners cross by --overshoot.
   Tiles are generated (seamless sines at wobble-scale); regenerate them rather than editing by hand. */
:root {
  --hf-edge-top-medium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M-4.00 5.68L-1.00 5.33L2.00 4.98L5.00 4.68L8.00 4.46L11.00 4.33L14.00 4.28L17.00 4.29L20.00 4.33L23.00 4.36L26.00 4.34L29.00 4.26L32.00 4.13L35.00 3.96L38.00 3.78L41.00 3.64L44.00 3.57L47.00 3.61L50.00 3.75L53.00 3.99L56.00 4.32L59.00 4.67L62.00 5.02L65.00 5.32L68.00 5.54L71.00 5.67L74.00 5.72L77.00 5.71L80.00 5.67L83.00 5.64L86.00 5.66L89.00 5.74L92.00 5.87L95.00 6.04L98.00 6.22L101.00 6.36L104.00 6.43L107.00 6.39L110.00 6.25L113.00 6.01L116.00 5.68L119.00 5.33L122.00 4.98' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-bottom-medium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='10' viewBox='0 0 104 10' preserveAspectRatio='none'%3E%3Cpath d='M-4.00 3.87L-1.00 4.20L2.00 4.60L5.00 5.02L8.00 5.37L11.00 5.63L14.00 5.76L17.00 5.78L20.00 5.74L23.00 5.69L26.00 5.69L29.00 5.76L32.00 5.90L35.00 6.09L38.00 6.27L41.00 6.38L44.00 6.37L47.00 6.22L50.00 5.92L53.00 5.54L56.00 5.12L59.00 4.74L62.00 4.44L65.00 4.27L68.00 4.22L71.00 4.24L74.00 4.29L77.00 4.32L80.00 4.27L83.00 4.15L86.00 3.97L89.00 3.78L92.00 3.64L95.00 3.61L98.00 3.72L101.00 3.97L104.00 4.33L107.00 4.74' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-left-medium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='112' viewBox='0 0 10 112' preserveAspectRatio='none'%3E%3Cpath d='M4.01 -4.00L4.10 -1.00L4.18 2.00L4.21 5.00L4.18 8.00L4.08 11.00L3.96 14.00L3.85 17.00L3.79 20.00L3.83 23.00L3.99 26.00L4.27 29.00L4.63 32.00L5.03 35.00L5.41 38.00L5.73 41.00L5.94 44.00L6.04 47.00L6.03 50.00L5.97 53.00L5.87 56.00L5.81 59.00L5.80 62.00L5.85 65.00L5.96 68.00L6.08 71.00L6.18 74.00L6.21 77.00L6.13 80.00L5.93 83.00L5.62 86.00L5.24 89.00L4.84 92.00L4.47 95.00L4.19 98.00L4.01 101.00L3.95 104.00L3.98 107.00L4.07 110.00L4.15 113.00L4.20 116.00' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-right-medium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='88' viewBox='0 0 10 88' preserveAspectRatio='none'%3E%3Cpath d='M6.44 -4.00L6.27 -1.00L6.02 2.00L5.79 5.00L5.64 8.00L5.60 11.00L5.64 14.00L5.66 17.00L5.59 20.00L5.35 23.00L4.97 26.00L4.49 29.00L4.03 32.00L3.69 35.00L3.55 38.00L3.60 41.00L3.81 44.00L4.06 47.00L4.27 50.00L4.38 53.00L4.39 56.00L4.35 59.00L4.35 62.00L4.47 65.00L4.76 68.00L5.19 71.00L5.67 74.00L6.10 77.00L6.38 80.00L6.45 83.00L6.34 86.00L6.11 89.00L5.86 92.00' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-top-heavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M-4.00 5.68L-1.00 5.33L2.00 4.98L5.00 4.68L8.00 4.46L11.00 4.33L14.00 4.28L17.00 4.29L20.00 4.33L23.00 4.36L26.00 4.34L29.00 4.26L32.00 4.13L35.00 3.96L38.00 3.78L41.00 3.64L44.00 3.57L47.00 3.61L50.00 3.75L53.00 3.99L56.00 4.32L59.00 4.67L62.00 5.02L65.00 5.32L68.00 5.54L71.00 5.67L74.00 5.72L77.00 5.71L80.00 5.67L83.00 5.64L86.00 5.66L89.00 5.74L92.00 5.87L95.00 6.04L98.00 6.22L101.00 6.36L104.00 6.43L107.00 6.39L110.00 6.25L113.00 6.01L116.00 5.68L119.00 5.33L122.00 4.98' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-bottom-heavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='10' viewBox='0 0 104 10' preserveAspectRatio='none'%3E%3Cpath d='M-4.00 3.87L-1.00 4.20L2.00 4.60L5.00 5.02L8.00 5.37L11.00 5.63L14.00 5.76L17.00 5.78L20.00 5.74L23.00 5.69L26.00 5.69L29.00 5.76L32.00 5.90L35.00 6.09L38.00 6.27L41.00 6.38L44.00 6.37L47.00 6.22L50.00 5.92L53.00 5.54L56.00 5.12L59.00 4.74L62.00 4.44L65.00 4.27L68.00 4.22L71.00 4.24L74.00 4.29L77.00 4.32L80.00 4.27L83.00 4.15L86.00 3.97L89.00 3.78L92.00 3.64L95.00 3.61L98.00 3.72L101.00 3.97L104.00 4.33L107.00 4.74' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-left-heavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='112' viewBox='0 0 10 112' preserveAspectRatio='none'%3E%3Cpath d='M4.01 -4.00L4.10 -1.00L4.18 2.00L4.21 5.00L4.18 8.00L4.08 11.00L3.96 14.00L3.85 17.00L3.79 20.00L3.83 23.00L3.99 26.00L4.27 29.00L4.63 32.00L5.03 35.00L5.41 38.00L5.73 41.00L5.94 44.00L6.04 47.00L6.03 50.00L5.97 53.00L5.87 56.00L5.81 59.00L5.80 62.00L5.85 65.00L5.96 68.00L6.08 71.00L6.18 74.00L6.21 77.00L6.13 80.00L5.93 83.00L5.62 86.00L5.24 89.00L4.84 92.00L4.47 95.00L4.19 98.00L4.01 101.00L3.95 104.00L3.98 107.00L4.07 110.00L4.15 113.00L4.20 116.00' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-right-heavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='88' viewBox='0 0 10 88' preserveAspectRatio='none'%3E%3Cpath d='M6.44 -4.00L6.27 -1.00L6.02 2.00L5.79 5.00L5.64 8.00L5.60 11.00L5.64 14.00L5.66 17.00L5.59 20.00L5.35 23.00L4.97 26.00L4.49 29.00L4.03 32.00L3.69 35.00L3.55 38.00L3.60 41.00L3.81 44.00L4.06 47.00L4.27 50.00L4.38 53.00L4.39 56.00L4.35 59.00L4.35 62.00L4.47 65.00L4.76 68.00L5.19 71.00L5.67 74.00L6.10 77.00L6.38 80.00L6.45 83.00L6.34 86.00L6.11 89.00L5.86 92.00' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --hf-edge-top-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M-4.00 5.68L-1.00 5.33L2.00 4.98L5.00 4.68L8.00 4.46L11.00 4.33L14.00 4.28L17.00 4.29L20.00 4.33L23.00 4.36L26.00 4.34L29.00 4.26L32.00 4.13L35.00 3.96L38.00 3.78L41.00 3.64L44.00 3.57L47.00 3.61L50.00 3.75L53.00 3.99L56.00 4.32L59.00 4.67L62.00 5.02L65.00 5.32L68.00 5.54L71.00 5.67L74.00 5.72L77.00 5.71L80.00 5.67L83.00 5.64L86.00 5.66L89.00 5.74L92.00 5.87L95.00 6.04L98.00 6.22L101.00 6.36L104.00 6.43L107.00 6.39L110.00 6.25L113.00 6.01L116.00 5.68L119.00 5.33L122.00 4.98' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-dasharray=%227 5%22/%3E%3C/svg%3E");
  --hf-edge-bottom-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='10' viewBox='0 0 108 10' preserveAspectRatio='none'%3E%3Cpath d='M-4.00 3.88L-1.00 4.20L2.00 4.59L5.00 4.99L8.00 5.34L11.00 5.60L14.00 5.74L17.00 5.78L20.00 5.75L23.00 5.71L26.00 5.68L29.00 5.72L32.00 5.84L35.00 6.01L38.00 6.19L41.00 6.34L44.00 6.39L47.00 6.32L50.00 6.12L53.00 5.80L56.00 5.41L59.00 5.01L62.00 4.66L65.00 4.40L68.00 4.26L71.00 4.22L74.00 4.25L77.00 4.29L80.00 4.32L83.00 4.28L86.00 4.16L89.00 3.99L92.00 3.81L95.00 3.66L98.00 3.61L101.00 3.68L104.00 3.88L107.00 4.20L110.00 4.59' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-dasharray=%227 5%22/%3E%3C/svg%3E");
  --hf-edge-left-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='108' viewBox='0 0 10 108' preserveAspectRatio='none'%3E%3Cpath d='M4.00 -4.00L4.09 -1.00L4.18 2.00L4.21 5.00L4.17 8.00L4.07 11.00L3.94 14.00L3.83 17.00L3.79 20.00L3.87 23.00L4.07 26.00L4.39 29.00L4.79 32.00L5.20 35.00L5.57 38.00L5.85 41.00L6.01 44.00L6.05 47.00L6.00 50.00L5.91 53.00L5.82 56.00L5.79 59.00L5.83 62.00L5.93 65.00L6.06 68.00L6.17 71.00L6.21 74.00L6.13 77.00L5.93 80.00L5.61 83.00L5.21 86.00L4.80 89.00L4.43 92.00L4.15 95.00L3.99 98.00L3.95 101.00L4.00 104.00L4.09 107.00L4.18 110.00' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-dasharray=%227 5%22/%3E%3C/svg%3E");
  --hf-edge-right-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='96' viewBox='0 0 10 96' preserveAspectRatio='none'%3E%3Cpath d='M6.42 -4.00L6.27 -1.00L6.04 2.00L5.82 5.00L5.66 8.00L5.60 11.00L5.62 14.00L5.66 17.00L5.64 20.00L5.52 23.00L5.26 26.00L4.88 29.00L4.44 32.00L4.02 35.00L3.71 38.00L3.56 41.00L3.58 44.00L3.73 47.00L3.96 50.00L4.18 53.00L4.34 56.00L4.40 59.00L4.38 62.00L4.34 65.00L4.36 68.00L4.48 71.00L4.74 74.00L5.12 77.00L5.56 80.00L5.98 83.00L6.29 86.00L6.44 89.00L6.42 92.00L6.27 95.00L6.04 98.00' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-dasharray=%227 5%22/%3E%3C/svg%3E");

}

.hf-box, .hf-button {
  position: relative;
  isolation: isolate;
  border: var(--stroke-medium) solid var(--draw-object); /* fallback where masks are unsupported */
  --hf-edge-color: var(--draw-object);
  --hf-top: var(--hf-edge-top-medium);
  --hf-bottom: var(--hf-edge-bottom-medium);
  --hf-left: var(--hf-edge-left-medium);
  --hf-right: var(--hf-edge-right-medium);
  --hf-shift: 0px;
}
.hf-box.is-heavy, .hf-button.is-primary {
  --hf-top: var(--hf-edge-top-heavy);
  --hf-bottom: var(--hf-edge-bottom-heavy);
  --hf-left: var(--hf-edge-left-heavy);
  --hf-right: var(--hf-edge-right-heavy);
}
.hf-box.is-dashed, .hf-button:disabled {
  --hf-edge-color: var(--ink-muted);
  --hf-top: var(--hf-edge-top-dashed);
  --hf-bottom: var(--hf-edge-bottom-dashed);
  --hf-left: var(--hf-edge-left-dashed);
  --hf-right: var(--hf-edge-right-dashed);
}

@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .hf-box, .hf-button { border-color: transparent; border-width: 0; }
  .hf-box::before, .hf-box::after, .hf-button::before, .hf-button::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: var(--hf-edge-color);
  }
  /* top and bottom: 10px-tall strips centred on the edges, running --overshoot past each corner */
  .hf-box::before, .hf-button::before {
    inset: -5px calc(-1 * var(--overshoot, 1.5px));
    -webkit-mask-image: var(--hf-top), var(--hf-bottom);
            mask-image: var(--hf-top), var(--hf-bottom);
    -webkit-mask-position: var(--hf-shift) top, calc(var(--hf-shift) * -1) bottom;
            mask-position: var(--hf-shift) top, calc(var(--hf-shift) * -1) bottom;
    -webkit-mask-size: 120px 10px, 104px 10px;
            mask-size: 120px 10px, 104px 10px;
    -webkit-mask-repeat: round no-repeat;
            mask-repeat: round no-repeat;
  }
  /* left and right */
  .hf-box::after, .hf-button::after {
    inset: calc(-1 * var(--overshoot, 1.5px)) -5px;
    -webkit-mask-image: var(--hf-left), var(--hf-right);
            mask-image: var(--hf-left), var(--hf-right);
    -webkit-mask-position: left var(--hf-shift), right calc(var(--hf-shift) * -1);
            mask-position: left var(--hf-shift), right calc(var(--hf-shift) * -1);
    -webkit-mask-size: 10px 112px, 10px 88px;
            mask-size: 10px 112px, 10px 88px;
    -webkit-mask-repeat: no-repeat round;
            mask-repeat: no-repeat round;
  }
}

/* Inside a wobbly box, everything is hand-lettered, in the one hand-lettering yellow. */
.hf-box { padding: var(--space-2); font-family: var(--font-hand); color: var(--hand-ink); }

.hf-button {
  appearance: none;
  background: none;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  min-height: 40px;
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hand-ink);
  cursor: pointer;
}
.hf-button.is-primary { color: var(--on-accent); background: var(--accent); }
.hf-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.hf-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.hf-button:disabled { color: var(--hand-ink); opacity: 0.55; cursor: default; text-decoration: none; background: none; }