@layer page {
  .dash {
    padding-block: var(--s8) var(--s16);
    --gap: var(--s8);
    --site-pad: 2px; /* the box border: plots fill the box inside it */
  }

  .dash__empty {
    min-block-size: 60dvh;
    display: grid;
    place-items: center;
    font-size: var(--text-sm);
    & .on-touch { display: none; }
    @media (hover: none) { & .on-touch { display: inline; } & .on-pointer { display: none; } }
    & .dash__mouse { display: block; block-size: 2.5em; inline-size: auto; }
  }

  /* One site per box: the plot fills it, the host sits over its top-left corner. Every box has
     the same inset, so every plot spans the same width and one x is one time. Boxes stack flush,
     sharing their edges. */
  .site {
    position: relative;
    padding: var(--site-pad);
    outline: var(--site-pad) solid var(--fg);
    outline-offset: calc(var(--site-pad) * -1);

    &.is-down { outline-color: var(--down); }
  }

  .site__head {
    position: absolute;
    inset: var(--s1) auto auto var(--s1);
    z-index: 1;
    padding-inline: var(--s1);
    background: var(--bg);
    font-size: var(--text-sm);
  }

  .site__host { color: var(--fg); &:hover { text-decoration: underline; } }
  .site.is-down .site__host { color: var(--down); }

  .sites { --gap: 0; }
  .site + .site { margin-block-start: -2px; }
  .site.is-down { z-index: 1; }

  .plot {
    position: relative;
    block-size: var(--s12);

    & svg { position: absolute; inset: 0; overflow: visible; }
  }

  .plot__dot { fill: var(--fg); }
  .plot__down-dot { fill: var(--down); }
  .plot__focus { fill: var(--bg); stroke: var(--fg); stroke-width: 1; }
  .plot__focus.is-down { stroke: var(--down); }

  .tip {
    position: absolute;
    translate: -50% -100%;
    padding: 2px var(--s1);
    background: var(--fg);
    color: var(--bg);
    font-size: var(--text-xs);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;

    &.is-down { background: var(--down); color: var(--fg); }
    &[hidden] { display: none; }
  }

  /* The ruler: an empty strip under the plots that draws the clock around the cursor's time.
     Sticky, so it stays in view at the bottom of a long list. */
  .ruler {
    position: sticky;
    inset-block-end: 0;
    margin-inline: var(--site-pad);
    block-size: var(--s8);
    font-size: var(--text-xs);
    color: var(--fg-2);
    pointer-events: none;
    z-index: 3;
  }

  .ruler__span {
    position: absolute;
    inset-block-start: 0;
    block-size: 1px;
    background: var(--fg-3);
  }

  .ruler__tick {
    position: absolute;
    inset-block-start: 0;
    inline-size: 1px;
    block-size: var(--s1);
    background: var(--fg-3);

    &.is-major { block-size: var(--s2); background: var(--fg-2); }

    & span {
      position: absolute;
      inset-block-start: calc(100% + 2px);
      translate: -50% 0;
      white-space: nowrap;
    }
    &:not(.is-major) span { color: var(--fg-3); }
  }

  .ruler__cursor {
    position: absolute;
    inset-block-start: 0;
    inline-size: 1px;
    block-size: var(--s6);
    background: var(--fg);

    & span {
      position: absolute;
      inset-block-start: 100%;
      translate: -50% 0;
      padding: 0 var(--s1);
      background: var(--fg);
      color: var(--bg);
      white-space: nowrap;
    }
    & span b { font-weight: inherit; }
    & span i { font-style: normal; opacity: 0.55; }
  }

  /* The cursor's vertical line across the whole page, drawn when x is over the plots. */
  .crosshair {
    position: fixed;
    inset-block: 0;
    inline-size: 1px;
    background: var(--line);
    pointer-events: none;
    z-index: 1;
    &[hidden] { display: none; }
  }
}