/* Not found: one screen, an empty parking stall under the line. */

.view--notfound {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.nf__inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); justify-items: start; }
.nf__title { max-width: calc(17 * var(--ch-display)); } /* 11ch before r8, the same box in px (x 1.53); --ch-display in base.css */
.nf__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Stall lines painted on the floor, in perspective. Decorative. Solid Slate
   lines on the cream page (6.67:1; r7, they were navy at 22% and read as
   grey), the empty stall orange. */
.nf__lot {
  position: absolute;
  left: 50%;
  bottom: -2px;
  /* The lot's width and height; phones and wide screens change them below. */
  --lot-base: 140vw;
  --lot-h: 34vh;
  --lot-w: var(--lot-base);
  width: var(--lot-w);
  height: var(--lot-h);
  transform: translateX(-50%) perspective(420px) rotateX(58deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  /* Painted lines, 4 px: wide enough that foreshortened they still read as
     solid Slate, and still a line (not a ground) by the r6 scan's rule. */
  --stall-line: 4px;
  /* The far line's thickness before the tilt (r7 fix), so that after it,
     at the lot's far edge, it draws about 2.75 px on any screen: about as
     wide as the stall lines' far ends, and solid Slate even on 1x screens.
     The tilt squeezes a line lying across it by cos 58 times the square of
     the perspective's scale there, which falls as the lot (a share of the
     screen's height) gets taller: 0.20 at 900 px tall, 0.13 at 1440. A flat
     4 px drew 0.5 to 1 px there, a 2.2:1 grey on 1x screens (measured in
     r7, on the old cream). */
  --stall-far: calc(2.5px + 1.25vh);
}
.nf__lot span {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: var(--stall-line);
  margin-left: calc(var(--stall-line) / -2);
  background: var(--color-text-muted);
}
/* Two corrections for the tilt (r7 fix round 2), in browsers with CSS trig
   functions; others keep the plain lot.
   1. The far line runs past both edges. The perspective shrinks the lot's far
      edge to 420px / (420px + its height x sin 58) of its width, so on
      screens wide for their height (768x1024, 1024x768, 1366x768, 2560x1440,
      3440x1440) the far line stopped 40 to 140 px short of each side. The
      lot is now at least wide enough for its far edge to clear the screen
      by 2% a side.
   2. Every stall line draws as thick across as the middle one. The tilt
      slants every line but the middle one, and a slanted line draws thinner
      across (by the cosine of its slant): the outer lines on wide 1x screens
      drew about 1 px, a light grey down to 1.7:1 (measured in r7, on the
      old cream). So each line is widened by
      1 / cos of its own slant before the tilt. With this perspective the
      slant's tangent is the line's offset from the middle over
      420px / tan(58deg), the same at every height. The layout width stays
      4 px (the `scale` property does the widening). */
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
  .nf__lot { --lot-w: max(var(--lot-base), calc(104vw * (1 + sin(58deg) * tan(atan2(var(--lot-h), 420px))))); }
  .nf__lot span {
    --dx: calc((var(--at) - 0.5) * var(--lot-w));
    scale: calc(1 / cos(atan2(var(--dx), calc(420px / tan(58deg))))) 1;
  }
}
.nf__lot span:nth-child(1) { left: 22%; --at: 0.22; }
.nf__lot span:nth-child(2) { left: 34%; --at: 0.34; }
.nf__lot span:nth-child(3) { left: 46%; --at: 0.46; }
.nf__lot span:nth-child(4) { left: 58%; --at: 0.58; background: var(--color-accent); }
.nf__lot span:nth-child(5) { left: 70%; --at: 0.7; }
.nf__lot span:nth-child(6) { left: 82%; --at: 0.82; }
/* The far line, drawn as a border (a line, not a filled box), --stall-far thick. */
.nf__lot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-top: var(--stall-far) solid var(--color-text-muted);
}
@media (max-width: 700px) { .nf__lot { --lot-h: 24vh; --lot-base: 200vw; --stall-far: calc(4.5px + 0.7vh); } }
/* Wide screens: a wider lot, so its far line runs past both edges. */
@media (min-width: 1440px) { .nf__lot { --lot-base: 180vw; } }
/* Phones: both buttons full width, one over the other. */
@media (max-width: 520px) {
  .nf__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .nf__actions .btn { width: 100%; }
  .nf__inner { justify-items: stretch; }
}
/* Landscape phones: start under the header and keep the headline small
   enough that the stall lines still show under the buttons. */
@media (max-height: 520px) and (orientation: landscape) {
  .view--notfound { align-content: start; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--space-5)); padding-bottom: var(--space-6); }
  .nf__inner { gap: var(--space-4); }
  .nf__title { font-size: clamp(2.25rem, 9dvh + 0.5rem, 4rem); }
  .nf__lot { --lot-h: 22vh; }
}