/* R2 principle-evidence drawers */
.pe-clickable { cursor:pointer; }
.pe-clickable:focus-visible { outline:2px solid currentColor; outline-offset:4px; }

.principle-dialog {
  width:min(820px, calc(100vw - 32px));
  max-height:min(86vh, 920px);
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#0b1f33;
  color:#f4f7fb;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.principle-dialog::backdrop { background:rgba(3,12,22,.72); backdrop-filter:blur(4px); }
.principle-dialog .dialog-head {
  position:sticky; top:0; z-index:2;
  display:flex; justify-content:space-between; gap:20px; align-items:flex-start;
  padding:24px 28px 18px;
  background:#0b1f33;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.principle-dialog .dialog-head h3 { margin:.25rem 0 0; color:#fff; font-size:clamp(1.45rem,3vw,2.1rem); }
.principle-dialog .card-code { color:#b5c1cf; }
.dialog-close { border:0; background:transparent; color:#f4f7fb; font-size:2rem; line-height:1; cursor:pointer; }
.principle-dialog .dialog-body { padding:0 28px 30px; overflow:auto; }
.principle-dialog .canonical {
  margin:24px 0 8px; padding:18px 20px;
  border-left:3px solid #f26a21; background:rgba(255,255,255,.045);
  font-size:1.08rem; line-height:1.55; color:#f4f7fb;
}
.pe-source { color:#b5c1cf; font-size:.78rem; margin:8px 0 22px; }
.pe-claim { padding:22px 0; border-top:1px solid rgba(255,255,255,.12); }
.pe-claim:first-child { border-top:0; }
.pe-claim h4 { margin:10px 0 14px; color:#fff; font-size:1.08rem; }
.pe-meta { display:flex; flex-wrap:wrap; gap:8px; }
.pe-pill {
  display:inline-flex; padding:5px 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); color:#d6dfea;
  font-size:.72rem; letter-spacing:.03em;
}
.pe-ref { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin:0 0 14px; color:#b5c1cf; }
.pe-ref strong { color:#f4f7fb; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.pe-ref small { width:100%; color:#b5c1cf; }
.pe-block { margin:13px 0; }
.pe-block .pe-k { color:#b5c1cf; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; margin-bottom:5px; }
.pe-block p { margin:0; color:#d6dfea; line-height:1.6; }
.pe-deep-link { display:inline-block; margin-top:8px; color:#f4f7fb; text-underline-offset:.2em; }
@media (max-width:600px) {
  .principle-dialog .dialog-head, .principle-dialog .dialog-body { padding-left:18px; padding-right:18px; }
}

.pe-link-pending {
  display:inline-block;
  margin-top:8px;
  color:#b5c1cf;
  font-size:.78rem;
  font-style:italic;
}