@layer components {
  /* Fills a phone's screen, and most of a larger one */
  .area-drawing {
    background-color: var(--color-canvas);
    block-size: min(100dvh, 56rem);
    color: var(--color-ink);
    gap: var(--block-space);
    inline-size: min(100vw, 64rem);
    max-block-size: 100dvh;
    max-inline-size: 100vw;
    padding: var(--block-space) var(--inline-space);
    text-align: start;

    &[open] {
      display: flex;
      flex-direction: column;
    }

    &::backdrop {
      background-color: oklch(0 0 0 / 50%);
    }
  }

  .area-drawing__header {
    display: grid;
    gap: var(--block-space-half);
  }

  .area-drawing__size {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-double);

    label {
      align-items: center;
      display: flex;
      gap: var(--inline-space-half);
    }

    .input {
      inline-size: 8ch;
    }
  }

  /* Scrolls once zoomed in past fitting the grid. Taps place corners and drags scroll, with double
     taps left alone so quick taps on nearby dots don't zoom the page. */
  .area-drawing__grid {
    border: var(--border);
    display: grid;
    flex: 1;
    min-block-size: 0;
    overflow: auto;
    touch-action: manipulation;
  }

  /* The dots are a background, one per foot plus a larger one every 10 feet to count by. Each tile is
     centered on a whole foot, since the drawing starts half a foot before the grid's first dot. */
  .area-drawing__svg {
    --dot: min(2px, calc(var(--area-drawing-scale) * 0.15));
    --ten-feet: calc(var(--area-drawing-scale) * 10);

    background-image:
      radial-gradient(circle, var(--color-ink-dark) calc(var(--dot) * 1.75), transparent calc(var(--dot) * 1.75 + 0.5px)),
      radial-gradient(circle, var(--color-ink-medium) var(--dot), transparent calc(var(--dot) + 0.5px));
    background-position: calc(var(--area-drawing-scale) * -4.5) calc(var(--area-drawing-scale) * -4.5), 0 0;
    background-size: var(--ten-feet) var(--ten-feet), var(--area-drawing-scale) var(--area-drawing-scale);
    cursor: crosshair;
    display: block;
    margin: auto;

    &[hidden] {
      display: none;
    }
  }

  .area-drawing__outline {
    fill: color-mix(in oklch, var(--color-link) 20%, transparent);
    stroke: var(--color-link);
    stroke-linejoin: round;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
  }

  .area-drawing__corners circle {
    fill: var(--color-link);
  }

  .area-drawing__footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space);
    justify-content: space-between;
  }
}