/* Deliverability: the chart of an incident beside the section's words.

   The chart is built by deliverability.js into the mount below; its own inks
   are set there, and this sheet holds its layout, its ground and how it moves. */

/* Clipped across at the band's own edges, which are the window's, so the graph
   paper can reach out past the chart without the page scrolling sideways. */
#deliverability { overflow-x: clip; }

/* An even split: the title sets in two lines, and the chart, held under 640px, still reads its
   labels at the size of the words beside it. */
@media (min-width: 1080px) {
  .deliverability-split {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
    gap: 3.5rem;
  }
}
#deliverability .section-title { text-wrap: balance; }

/* Drawn at 540 and held under 640. Dropped on a phone, where the column is
   narrower than the point at which the labels give out. */
.deliverability-chart {
  display: none;
  position: relative;
  width: 100%;
  max-width: 640px;
  justify-self: center;
}
@media (min-width: 600px) {
  .deliverability-chart { display: block; }
}
@media (min-width: 1080px) {
  .deliverability-chart { justify-self: end; }
}

/* Faint graph paper behind the chart, a stronger line every fifth square,
   reaching well out past it and thinning away the further it gets. */
.deliverability-chart::before {
  --paper-minor: rgba(148, 163, 184, 0.14);
  --paper-major: rgba(148, 163, 184, 0.26);
  content: "";
  position: absolute;
  inset: -96px -160px;
  background-image:
    linear-gradient(90deg, var(--paper-major) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-minor) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper-minor) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, rgba(0, 0, 0, 0.4) 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 20%, rgba(0, 0, 0, 0.4) 55%, transparent);
  pointer-events: none;
}

.deliverability-svg {
  position: relative;
  /* Held to the drawing's proportions before its contents arrive, so nothing below moves */
  aspect-ratio: 540 / 262;
  height: auto;
  font-family: var(--font-body);
  /* A finger dragged across reads the chart; one moving up or down still scrolls the page */
  touch-action: pan-y;
  border-radius: var(--radius-md);
}
.deliverability-svg:focus { outline: none; }
.deliverability-svg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* What the arrow keys read, for a screen reader, and not drawn. */
.deliverability-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Drawn at a constant speed once seen, each marker arriving as the line reaches it. */
.deliverability-svg[data-armed] .deliverability-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.deliverability-svg[data-armed] .deliverability-after { opacity: 0; }
.deliverability-svg[data-playing] .deliverability-line { animation: deliverability-draw var(--draw) linear forwards; }
.deliverability-svg[data-playing] .deliverability-after { animation: deliverability-appear 260ms ease var(--after) forwards; }

@keyframes deliverability-draw { to { stroke-dashoffset: 0; } }
@keyframes deliverability-appear { to { opacity: 1; } }