/* The relay page's additions to app.css. The two share every colour token and
   every component; this file only holds what the LAN page has no use for: the
   amber transport chip, the not-end-to-end variant of it, and the self-test
   rows. Serving both stylesheets keeps one copy of the design tokens in the
   binary rather than a forked stylesheet that drifts. */

:root {
  --warn: #8a5a00;
  --warn-bg: #fff4d6;
  --warn-line: #e0b34b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --warn: #ffcf5c;
    --warn-bg: #33280d;
    --warn-line: #7a5f16;
  }
}

/* Amber, always visible, never absent: the transport must never be a silent
   downgrade (DESIGN-TRANSPORTS 1.4). */
.chip-relay {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn);
  font-weight: 600;
}

/* The red outline is the "not end-to-end" marker. It is on the row of a blob
   the relay encrypted for the Shortcut, and nowhere else. */
.tag-plain {
  border: 1px solid var(--err);
  border-radius: 999px;
  padding: 0 7px;
  margin-left: 6px;
  font-size: 12px;
  color: var(--err);
  white-space: nowrap;
}

.note {
  margin: 0 2px;
  color: var(--dim);
  font-size: 13px;
}

.test-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.list .test-row:first-child { border-top: none; }
.test-row .verdict { font-weight: 600; }
.test-row.pass .verdict { color: var(--ok); }
.test-row.fail .verdict { color: var(--err); }
.test-detail { color: var(--err); font-size: 12px; word-break: break-all; }