/* Tool-specific layout only. The table, toolbar, buttons and page shell come
   from ../assets/base.css over the vendored system. This file adds the one
   thing the tool invents: a table where every row states who else can see its
   value. */

/* Two tables side by side above the fold, stacking when there is no room for
   two readable columns of mono. */
/* Each table ends where its own last row does. Without start alignment the
   shorter one stretches to match the taller and ends in empty ruled space,
   which reads as still loading. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.grid .sheet {
  --w-sheet-min: 0;
  min-width: 0;
}
.sheet + .sheet-note {
  margin-bottom: 1.5rem;
}
.section-label.sec {
  margin: 2.25rem 0 0.85rem;
}
.result-bar.sec {
  margin-top: 2.25rem;
}
.sheet-note.foot {
  margin-top: 2.25rem;
}

/* A key/value table rather than a grid of figures: the name is the quiet
   column, the value is the read. Values are mono and tabular so an address, a
   byte count and a millisecond share a rhythm. */
.sheet td.k {
  width: 40%;
  color: var(--pp-faint);
  font-family: var(--pp-font-body);
  font-size: 0.86rem;
}
.sheet td.v {
  color: var(--pp-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.sheet td.v.none {
  color: var(--pp-faint);
}

/* Who else knows the value. A category printed as one small solid square in
   front of the word naming it, the same device the index uses. The word is
   never dropped: the square lets the column be scanned without being read. */
.who {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--w-track-label);
  color: var(--pp-muted);
}
.sheet td.w {
  width: 8.5rem;
  text-align: right;
}
.sheet td.w .who {
  justify-content: flex-end;
}
.who .sq {
  width: 7px;
  height: 7px;
}
.who--local .sq { background: var(--pp-plate-1); }
.who--isp .sq { background: var(--pp-plate-3); }
.who--site .sq { background: var(--pp-plate-2); }

/* The live traffic table holds figures, so it aligns right, except the
   resource name. It is the one table wide enough to need the sideways scroll
   base.css gives every table. */
.sheet table.traffic {
  --w-sheet-min: 720px;
  min-width: var(--w-sheet-min);
}
.traffic th,
.traffic td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.traffic th:first-child,
.traffic td:first-child {
  width: 34%;
  text-align: left;
}
.traffic td:first-child {
  color: var(--pp-muted);
  word-break: break-all;
}
.traffic td.blank {
  color: var(--pp-faint);
}
/* A request still in flight has no end timings, so its row is provisional
   until it settles. Dotted is the system's provisional, drawn on the row's
   left edge rather than as a wash. */
.traffic tr.is-live td:first-child {
  border-left: var(--pp-rule-structure) dotted var(--pp-plate-3);
  padding-left: 0.6rem;
}

.tag.readout {
  font-variant-numeric: tabular-nums;
}

.card.prompt {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--pp-muted);
}
.card.prompt.small {
  font-size: 0.9rem;
}
.card.prompt strong {
  font-family: var(--pp-font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--pp-ink);
}

/* The measured connection. Three readings printed large, because this is the
   panel most visitors came for. */
.readings {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding: 0.9rem 0.8rem;
}
.reading {
  margin: 0;
}
.reading dt {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--pp-track-label);
  text-transform: uppercase;
  color: var(--pp-faint);
}
.reading dd {
  margin: 0.3rem 0 0;
  font-family: var(--pp-font-mono);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--pp-ink);
}
.reading dd small {
  font-size: 0.8rem;
  color: var(--pp-muted);
}

/* The sweep's progress and results. A found address is an ordinary row; what
   makes it interesting is the time it took to fail, so that number is printed
   rather than hidden behind a verdict. */
.scan-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-label);
  color: var(--pp-faint);
}
.scan-track {
  flex: 1;
  height: 6px;
  border: var(--pp-rule-line) solid var(--pp-line);
}
.scan-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pp-edge);
}

/* A running action states itself in words, not a spinner. */
button.is-busy {
  color: var(--pp-faint);
}