/* ==========================================================================
   Live resolver demo (front page)
   Paired with demo/did-webplus-ts.js and demo/resolver-demo.js, enqueued by
   dwp_resolver_demo_assets() in functions.php. The post body carries only the
   mount markup, so this file and the driver are the editable source.
   ========================================================================== */
/* Full width of the column it is mounted in, so its left and right edges line up
   with the section heading and lead above it. */
.dwpr { width: 100%; margin: 0; font-family: Inter, -apple-system, 'Segoe UI', sans-serif; }
.dwpr * { box-sizing: border-box; }
.dwpr-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.dwpr-input { flex: 1 1 420px; font-family: 'JetBrains Mono', Menlo, monospace; font-size: 13px;
  padding: 13px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: #101A2E;
  color: #E7EEF8; min-width: 0; }
.dwpr-input:focus { outline: 2px solid #6991F0; border-color: #6991F0; }
.dwpr-btn { font-size: 15px; font-weight: 600; padding: 13px 26px; border-radius: 9px;
  border: 0; background: #6991F0; color: #041225; cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(105,145,240,.6); }
.dwpr-btn:hover { background: #8FA8F5; }
.dwpr-btn[disabled] { opacity: .6; cursor: wait; }
.dwpr-url { font-family: 'JetBrains Mono', Menlo, monospace; font-size: 12px; color: #6E7F99;
  margin: 12px 2px 0; word-break: break-all; min-height: 18px; }
.dwpr-msg { margin: 14px 2px 0; font-size: 14px; color: #FFB4A2; }
.dwpr-msg.ok { color: #8FA8F5; }
.dwpr-checks { margin: 14px 2px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.dwpr-check { font-family: 'JetBrains Mono', Menlo, monospace; font-size: 11.5px; letter-spacing: .02em;
  color: #9FE8C8; background: #0F2A22; border: 1px solid rgba(120,220,180,.25); border-radius: 6px;
  padding: 4px 10px; white-space: nowrap; }
.dwpr-list { margin-top: 22px; display: grid; gap: 10px; }
.dwpr-card { background: #101A2E; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; overflow: hidden; }
.dwpr-card.dwpr-latest { border-color: #6991F0; }
.dwpr-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer;
  flex-wrap: wrap; }
.dwpr-head:hover { background: #16233B; }
.dwpr-v { font-family: 'JetBrains Mono', Menlo, monospace; font-size: 13px; font-weight: 600;
  color: #041225; background: #6991F0; border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.dwpr-card.dwpr-tomb .dwpr-v { background: #3A4763; color: #C9D6EA; }
.dwpr-hash { font-family: 'JetBrains Mono', Menlo, monospace; font-size: 12px; color: #A6B6CE;
  word-break: break-all; flex: 1 1 200px; }
.dwpr-meta { font-size: 12px; color: #6E7F99; white-space: nowrap; }
.dwpr-badge { font-size: 11px; font-weight: 600; letter-spacing: .04em; border-radius: 5px;
  padding: 2px 8px; white-space: nowrap; }
.dwpr-badge.link { background: #0F2A22; color: #9FE8C8; }
.dwpr-badge.tomb { background: #3A2530; color: #FFB4A2; }
.dwpr-json { display: none; margin: 0; padding: 16px 18px; background: #0A0F1A;
  border-top: 1px solid rgba(255,255,255,.10); font-family: 'JetBrains Mono', Menlo, monospace; font-size: 12px;
  line-height: 1.55; color: #C9D6EA; overflow-x: auto; max-height: 420px; overflow-y: auto; }
.dwpr-card.open .dwpr-json { display: block; }
.dwpr-note { margin-top: 18px; font-size: 12.5px; color: #6E7F99; line-height: 1.6; }
.dwpr-note code { font-family: 'JetBrains Mono', Menlo, monospace; color: #B7C4DA; background: transparent; border: 0; padding: 0; }

/* --- per-check report ------------------------------------------------ */
/* Every row below is a computed result, so it needs a failure state as well
   as a pass state. */
.dwpr-checks { margin: 14px 2px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.dwpr-check.bad { color: #FFB4A2; background: #2A1218; border-color: rgba(255,140,120,.3); }
.dwpr-check.na { color: #8494AC; background: #141D2E; border-color: rgba(255,255,255,.10); }

.dwpr-rows { margin: 0; padding: 14px 18px 16px; border-top: 1px solid rgba(255,255,255,.10);
  display: grid; gap: 8px; background: #0C1526; }
.dwpr-row { display: grid; grid-template-columns: 18px 148px 1fr; gap: 10px; align-items: start;
  font-size: 12.5px; line-height: 1.5; }
.dwpr-row-mark { font-family: 'JetBrains Mono', Menlo, monospace; }
.dwpr-row.pass .dwpr-row-mark { color: #9FE8C8; }
.dwpr-row.fail .dwpr-row-mark { color: #FF9E88; }
.dwpr-row.na .dwpr-row-mark { color: #6E7F99; }
.dwpr-row-name { color: #C9D6EA; font-weight: 600; }
.dwpr-row.fail .dwpr-row-name { color: #FFB4A2; }
.dwpr-row-detail { color: #93A3BC; font-family: 'JetBrains Mono', Menlo, monospace; font-size: 11.5px;
  word-break: break-word; }
.dwpr-badge.bad { background: #3A2530; color: #FFB4A2; }

.dwpr-card.dwpr-bad { border-color: #C8705C; }

/* --- the tamper control ---------------------------------------------- */
.dwpr-tamper { margin: 16px 2px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dwpr-tamper-label { font-size: 12.5px; color: #6E7F99; flex: 1 1 100%; margin-bottom: 2px; }
.dwpr-tbtn { font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 7px;
  border: 1px solid rgba(255,180,162,.35); background: #23151B; color: #FFB4A2; cursor: pointer; }
.dwpr-tbtn:hover { background: #2E1A21; }
.dwpr-tbtn[disabled] { opacity: .45; cursor: default; }

@media (max-width: 600px) {
  .dwpr-row { grid-template-columns: 16px 1fr; }
  .dwpr-row-detail { grid-column: 2; }
}

/* --- the reference implementation's verdict --------------------------- */
/* Sits above the per-document report. Rendered only when the wasm package
   loaded and answered, so an empty element is the normal no-wasm state. */
.dwpr-verdict { display: none; margin: 16px 2px 0; padding: 13px 15px; border-radius: 9px;
  font-size: 13.5px; line-height: 1.55; gap: 11px; align-items: start; }
.dwpr-verdict.ok,
.dwpr-verdict.bad { display: flex; }
.dwpr-verdict.ok { background: #0F2A22; border: 1px solid rgba(120,220,180,.28); color: #CDEBDD; }
.dwpr-verdict.bad { background: #2A1218; border: 1px solid rgba(255,140,120,.3); color: #FFD4C9; }
.dwpr-verdict-mark { font-family: 'JetBrains Mono', Menlo, monospace; font-size: 15px; line-height: 1.4; }
.dwpr-verdict.ok .dwpr-verdict-mark { color: #9FE8C8; }
.dwpr-verdict.bad .dwpr-verdict-mark { color: #FF9E88; }
.dwpr-verdict strong { color: #fff; }