/* /demos/p2p-lab page chrome (PF-S438).
 *
 * Loaded only by this page, through Tags.PageCSS; the ?v= in PageCSSHref is the
 * whole cache-busting story. Colors come from the shared sheet's custom
 * properties (--ink, --ink-muted, --hairline, --surface, --surface-alt,
 * --accent), so this page follows the system preference and the theme toggle
 * without a palette of its own. The two verdict colors are the one exception,
 * declared here with the same three-way discipline crdt-lab.css uses.
 */

.p2p-stage {
  --p2p-ok: #1a7f37;
  --p2p-bad: #b42318;
  margin: 1.5rem 0 2.5rem;
}

@media (prefers-color-scheme: dark) {
  .p2p-stage {
    --p2p-ok: #3fb950;
    --p2p-bad: #f85149;
  }
}

[data-theme="dark"] .p2p-stage {
  --p2p-ok: #3fb950;
  --p2p-bad: #f85149;
}

[data-theme="light"] .p2p-stage {
  --p2p-ok: #1a7f37;
  --p2p-bad: #b42318;
}

.p2p-status {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--surface-alt);
}

.p2p-status[data-state="ok"] {
  border-left-color: var(--p2p-ok);
}

.p2p-status[data-state="error"] {
  border-left-color: var(--p2p-bad);
}

.p2p-stage section {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.p2p-stage h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.p2p-stage code,
.p2p-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.p2p-table th {
  width: 34%;
  font-weight: 600;
  color: var(--ink-muted);
}

.p2p-panel__note {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.p2p-stage .btn {
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.p2p-file-row {
  margin: 0.75rem 0;
}

/* A file input has an intrinsic width wider than a 292px phone's column, and
   the room link is one unbroken URL: both pushed the document sideways
   (tests/responsive.spec.js, measured PF-S438). */
.p2p-file-row input[type="file"] {
  max-width: 100%;
}

.p2p-room__link,
.p2p-room__link a {
  overflow-wrap: anywhere;
}

.p2p-file-row label {
  margin-right: 0.5rem;
}

.p2p-tamper {
  display: block;
  margin-top: 0.75rem;
}

.p2p-served {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.p2p-shared-list {
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

.p2p-result {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--hairline);
  background: var(--surface-alt);
}

.p2p-result[data-verdict="accepted"] {
  border-left-color: var(--p2p-ok);
}

.p2p-result[data-verdict="rejected"],
.p2p-result[data-verdict="error"] {
  border-left-color: var(--p2p-bad);
}

.p2p-content {
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* THE PANEL STACKS ON A PHONE. Its values are 52-character peer IDs and longer
   multiaddrs, which a two-column table squeezes to a few characters a line
   (responsive.spec.js measured 145px for the value column at 380px). Below the
   house breakpoint each row becomes a label over its value, with the full
   column width. The roles in the markup keep it a table for assistive
   technology after `display` changes, as css.css's .zk-stack explains. */
@media (max-width: 767.98px) {
  .p2p-table,
  .p2p-table tbody,
  .p2p-table tr,
  .p2p-table th,
  .p2p-table td {
    display: block;
    width: auto;
  }

  .p2p-table tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }

  .p2p-table th,
  .p2p-table td {
    border: 0;
    padding: 0.1rem 0;
  }
}