/* /demos/wallet-risk-lab page chrome (PF-S431).
 *
 * 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, --error), which css.css redeclares under both the system dark
 * preference and the explicit theme toggle — so this page follows both. The
 * one color of its own, the mixer amber, is declared with the same three-way
 * discipline crdt-lab uses.
 */

.wrl-stage,
.wrl-key {
  --wrl-mixer: #9a6700;
}

@media (prefers-color-scheme: dark) {
  .wrl-stage,
  .wrl-key {
    --wrl-mixer: #d29922;
  }
}

[data-theme="dark"] .wrl-stage,
[data-theme="dark"] .wrl-key {
  --wrl-mixer: #d29922;
}

[data-theme="light"] .wrl-stage,
[data-theme="light"] .wrl-key {
  --wrl-mixer: #9a6700;
}

.wrl-asof {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 600;
}

.wrl-method {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--surface-alt);
  color: var(--ink);
}

.wrl-method h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.wrl-method ul {
  margin: 0;
  padding-left: 1.2rem;
}

.wrl-method li {
  margin: 0 0 0.6rem;
}

.wrl-method code {
  overflow-wrap: anywhere;
}

.wrl-rules {
  margin: 0.4rem 0;
  padding-left: 1.4rem;
}

.wrl-rules li {
  margin: 0 0 0.25rem;
}

.wrl-stage {
  margin: 1.5rem 0 2.5rem;
}

.wrl-stage h2 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.5rem;
}

.wrl-stage h3 {
  font-size: 1rem;
  margin: 1.25rem 0 0.4rem;
}

.wrl-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
}

.wrl-control > label {
  flex: 0 0 100%;
  margin: 0;
  font-weight: 600;
}

.wrl-control [data-unselect2],
.wrl-control input[type="text"] {
  flex: 1 1 20rem;
  min-width: 0;
}

/* THE AUTHORED unselect2 ROWS ARE SOURCE, NOT CONTENT, as on access-audit-lab:
   the library reads them once on mount and empties the container. */
.wrl-control [data-unselect2] > [data-value] {
  display: none;
}

.wrl-control input[type="text"] {
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.wrl-control input[type="text"]:focus-visible {
  outline: 3px solid var(--focus-ring-anchor);
  outline-offset: 1px;
}

.wrl-status {
  color: var(--ink-muted);
  font-size: 0.9rem;
  min-height: 1.4em;
}

.wrl-sentence {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.wrl-doc {
  margin: 0 0 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wrl-none {
  color: var(--ink-muted);
}

.wrl-figure {
  margin: 0 0 1rem;
}

.wrl-graph-wrap {
  max-width: 520px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.wrl-graph {
  display: block;
  width: 100%;
  height: auto;
}

.wrl-edge {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
}

.wrl-arrow {
  fill: var(--ink-muted);
}

.wr-node circle {
  fill: var(--surface-alt);
  stroke: var(--ink-muted);
  stroke-width: 2;
}

.wr-node text {
  fill: var(--ink);
  font-size: 11px;
}

.wr-node--subject circle {
  stroke: var(--ink);
  stroke-width: 4;
}

.wr-node--standin circle {
  fill: var(--error);
  stroke: var(--error);
}

.wr-node--mixer circle {
  fill: var(--wrl-mixer);
  stroke: var(--wrl-mixer);
}

.wr-node--service circle {
  fill: var(--accent);
  stroke: var(--accent);
}

.wrl-figure figcaption {
  margin-top: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.wrl-key {
  display: inline-block;
  margin-right: 0.6rem;
  white-space: nowrap;
}

.wrl-key::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.3em;
  border-radius: 50%;
  vertical-align: baseline;
  border: 2px solid var(--ink-muted);
  background: var(--surface-alt);
}

.wrl-key--standin::before {
  background: var(--error);
  border-color: var(--error);
}

.wrl-key--mixer::before {
  background: var(--wrl-mixer);
  border-color: var(--wrl-mixer);
}

.wrl-key--service::before {
  background: var(--accent);
  border-color: var(--accent);
}

.wrl-log-scroll {
  overflow-x: auto;
  margin: 0 0 0.75rem;
}

.wrl-log-table,
.wrl-tier-table {
  color: var(--ink);
  font-size: 0.85rem;
}

.wrl-log-table td {
  overflow-wrap: anywhere;
}

.wrl-log-table tr[data-result="match"] td {
  color: var(--error);
  font-weight: 600;
}

.wrl-tier-table {
  max-width: 28rem;
}