/* h4d35x0 beacon inspector (spec 7.1). Built by inspector.js only when a
   visitor loads a capture, so none of this applies with JavaScript off.
   Every emitter is drawn the same way. The one accent is the row the visitor
   picked, and only because they picked it. */

.h4-insp {
  /* Clears the sticky site bar when focus() scrolls here. */
  scroll-margin-top: 8rem;
  margin: 3.2rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--h4-line);
}
.h4-insp__bar { display: flex; align-items: baseline; gap: 1.2rem; }
.h4-insp__head,
.h4-insp__subhead {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--h4-dim);
}
.h4-insp__head { flex: 1 1 auto; scroll-margin-top: 8rem; }

/* The short spoken line after a pick. The detail itself is not live, so a
   screen reader is not read a whole table. */
.h4-insp__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.h4-insp__head:focus { outline: none; }
.h4-insp__head:focus-visible { outline: 1px solid var(--h4-accent); outline-offset: 4px; }
.h4-insp__subhead { margin-top: 2rem; }

.h4-insp__close,
.h4-insp__pick {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--h4-line);
  cursor: pointer;
}
.h4-insp__close {
  padding: 0.3rem 0.8rem;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--h4-dim);
}
.h4-insp__pick { padding: 0.1rem 0.4rem; letter-spacing: 0.02em; }
.h4-insp__close:hover,
.h4-insp__pick:hover { border-color: var(--h4-faint); color: var(--h4-fg); }
.h4-insp__close:focus-visible,
.h4-insp__pick:focus-visible,
.h4-insp__scroll:focus-visible { outline: 1px solid var(--h4-accent); outline-offset: 2px; }
.h4-insp__pick[aria-pressed='true'] { border-color: var(--h4-accent); color: var(--h4-accent); }

.h4-insp__note { margin: 0.8rem 0 0; max-width: 68ch; color: var(--h4-dim); }
.h4-insp__restraint { margin: 2rem 0 0; color: var(--h4-dim); }

.h4-insp__stop {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  margin-top: 2rem;
}
.h4-insp__scroll { overflow-x: auto; min-width: 0; }

/* The flat view: every beacon in one table, scrolled inside itself so the page
   stays short. The header row stays put while it scrolls. */
.h4-insp__flat { margin-top: 2rem; }
.h4-insp__scroll--tall { max-height: 44rem; overflow-y: auto; }
.h4-insp__scroll--tall thead th { position: sticky; top: 0; background: var(--h4-bg); }

.h4-insp__table {
  border-collapse: collapse;
  font-size: 1.2rem;
  white-space: nowrap;
}
.h4-insp__table caption {
  text-align: left;
  padding-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--h4-dim);
  white-space: pre;
}
.h4-insp__table th {
  text-align: left;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--h4-dim);
  border-bottom: 1px solid var(--h4-line);
}
.h4-insp__table th,
.h4-insp__table td { padding: 0.3rem 1.2rem 0.3rem 0; }

.h4-insp__tags { margin: 0.6rem 0 0; font-size: 1.2rem; }
.h4-insp__tags dt { color: var(--h4-dim); margin-top: 0.6rem; }
.h4-insp__tags dd { margin: 0.2rem 0 0 1.6rem; word-break: break-all; }

/* ---- the plot: decorative, aria-hidden, the table says the same ---- */
.h4-insp__plot { width: 14rem; height: 14rem; display: block; }
.h4-insp__plot .ring { fill: none; stroke: var(--h4-line); }
.h4-insp__plot .sweep { stroke: var(--h4-faint); }
.h4-insp__plot .dot { fill: var(--h4-dim); }
.h4-insp__plot .dot.is-picked { fill: var(--h4-accent); stroke: var(--h4-accent); stroke-width: 3; }

@media (prefers-reduced-motion: no-preference) {
  .h4-insp__plot .sweep {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: h4-insp-sweep 6s linear infinite;
  }
  @keyframes h4-insp-sweep { to { transform: rotate(360deg); } }
}

@media (max-width: 40em) {
  .h4-insp__stop { grid-template-columns: minmax(0, 1fr); }
  .h4-insp__plot { width: 12rem; height: 12rem; }
}