:root{
  --pd-xray-ink:#142f36;
  --pd-xray-muted:#52676d;
  --pd-xray-paper:#f7faf9;
  --pd-xray-supported:#176f69;
  --pd-xray-supported-bg:#eaf7f4;
  --pd-xray-contested:#986019;
  --pd-xray-contested-bg:#fff4df;
  --pd-xray-concern:#a04a2a;
  --pd-xray-concern-bg:#fff0e8;
  --pd-xray-missing:#5e6970;
  --pd-xray-missing-bg:#f0f2f3;
}

.pd-xray{
  margin:1.35rem 0 1.5rem;
  padding:clamp(1rem,2.5vw,1.55rem);
  color:var(--pd-xray-ink);
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(240,248,246,.96));
  border:2px solid rgba(20,47,54,.22);
  border-radius:1.25rem;
  box-shadow:0 18px 48px rgba(16,40,48,.08);
}

.pd-xray__head{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(14rem,.7fr);
  gap:1rem;
  align-items:start;
}

.pd-xray__kicker{
  margin:0 0 .35rem;
  color:var(--pd-xray-supported);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pd-xray h3{
  margin:.1rem 0 .55rem;
  max-width:34ch;
  font-size:clamp(1.35rem,2.6vw,2rem);
  line-height:1.12;
}

.pd-xray__lead,
.pd-xray__boundary{
  margin:.4rem 0;
  max-width:72ch;
  font-size:1rem;
  line-height:1.6;
}

.pd-xray__machine{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:.9rem;
  background:#fff;
  border:1px solid rgba(20,47,54,.18);
  border-radius:.9rem;
}

.pd-xray__machine strong{font-size:.9rem}
.pd-xray__machine code{
  overflow-wrap:anywhere;
  color:var(--pd-xray-muted);
  font-size:.76rem;
}

.pd-xray__compare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
  margin:1rem 0;
}

.pd-xray__example{
  min-height:100%;
  padding:1rem;
  background:#fff;
  border:2px solid var(--pd-xray-supported);
  border-radius:1rem;
}

.pd-xray__example--caution{
  border-color:var(--pd-xray-contested);
  border-style:dashed;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,244,223,.82) 0,
      rgba(255,244,223,.82) 10px,
      rgba(255,255,255,.96) 10px,
      rgba(255,255,255,.96) 20px
    );
}

.pd-xray__example strong{
  display:block;
  margin-bottom:.35rem;
  font-size:1rem;
}

.pd-xray__example span{
  display:block;
  color:var(--pd-xray-muted);
  font-size:.92rem;
  line-height:1.5;
}

.pd-xray__metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
  margin:1rem 0;
}

.pd-xray__metric{
  padding:.8rem .9rem;
  background:#fff;
  border:1px solid rgba(20,47,54,.16);
  border-radius:.85rem;
}

.pd-xray__metric strong{
  display:block;
  font-size:1.35rem;
  line-height:1.1;
}

.pd-xray__metric span{
  display:block;
  margin-top:.22rem;
  color:var(--pd-xray-muted);
  font-size:.82rem;
  line-height:1.35;
}

.pd-xray__legend{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.9rem 0 .35rem;
  padding:0;
  list-style:none;
}

.pd-xray-state{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  padding:.34rem .55rem;
  color:var(--pd-xray-ink);
  background:#fff;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:.78rem;
  font-weight:750;
  line-height:1.25;
}

.pd-xray-state__mark{
  display:inline-grid;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  flex:0 0 auto;
  color:#fff;
  background:var(--pd-xray-missing);
  border-radius:50%;
  font-size:.78rem;
  font-weight:900;
}

.pd-xray-state[data-state="located-open"]{
  color:var(--pd-xray-supported);
  background:var(--pd-xray-supported-bg);
  border-style:solid;
}
.pd-xray-state[data-state="located-open"] .pd-xray-state__mark{background:var(--pd-xray-supported)}

.pd-xray-state[data-state="contested"]{
  color:var(--pd-xray-contested);
  background:
    repeating-linear-gradient(
      135deg,
      var(--pd-xray-contested-bg) 0,
      var(--pd-xray-contested-bg) 7px,
      #fff 7px,
      #fff 14px
    );
  border-style:dashed;
}
.pd-xray-state[data-state="contested"] .pd-xray-state__mark{background:var(--pd-xray-contested)}

.pd-xray-state[data-state="facial-concern"]{
  color:var(--pd-xray-concern);
  background:var(--pd-xray-concern-bg);
  border-width:2px;
}
.pd-xray-state[data-state="facial-concern"] .pd-xray-state__mark{
  background:#fff;
  color:var(--pd-xray-concern);
  border:2px solid var(--pd-xray-concern);
}

.pd-xray-state[data-state="unlocated"]{
  color:var(--pd-xray-missing);
  background:
    radial-gradient(circle at 3px 3px,rgba(94,105,112,.2) 1.5px,transparent 1.7px) 0 0/8px 8px,
    var(--pd-xray-missing-bg);
  border-style:dotted;
  border-width:2px;
}

.pd-xray-state[data-state="reference-only"],
.pd-xray-state[data-state="not-applicable"]{
  color:var(--pd-xray-missing);
  background:#fff;
  border-style:dotted;
}

.pd-xray-detail > td{
  padding:.75rem !important;
  background:var(--pd-xray-paper);
  border-top:0 !important;
}

.pd-xray-record{
  color:var(--pd-xray-ink);
  font-size:1rem;
}

.pd-xray-record__head{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.65rem;
}

.pd-xray-record__head strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;
  overflow-wrap:anywhere;
}

.pd-xray-record__head span{
  color:var(--pd-xray-muted);
  font-size:.78rem;
}

.pd-xray-record__rail{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
}

.pd-xray-record__panel{
  position:relative;
  padding:.8rem;
  background:#fff;
  border:1px solid rgba(20,47,54,.17);
  border-radius:.85rem;
}

.pd-xray-record__panel + .pd-xray-record__panel::before{
  position:absolute;
  left:-.55rem;
  top:1.15rem;
  content:"→";
  color:var(--pd-xray-muted);
  font-weight:900;
}

.pd-xray-record__panel h4{
  margin:0 0 .5rem;
  font-size:.94rem;
}

.pd-xray-gates{
  display:grid;
  gap:.42rem;
  margin:.58rem 0 0;
  padding:0;
  list-style:none;
}

.pd-xray-gate{
  display:flex;
  gap:.45rem;
  align-items:flex-start;
  color:var(--pd-xray-muted);
  font-size:.78rem;
  line-height:1.35;
}

.pd-xray-gate .pd-xray-state{
  padding:.12rem .34rem;
  flex:0 0 auto;
}

.pd-xray-gate .pd-xray-state__mark{
  width:1rem;
  height:1rem;
  font-size:.66rem;
}

.pd-xray-threshold > td{
  padding:.8rem !important;
  color:#fff;
  background:#183942 !important;
  border-top:4px double rgba(255,255,255,.5) !important;
  border-bottom:4px double rgba(255,255,255,.5) !important;
}

.pd-xray-threshold__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.8rem;
  align-items:center;
  font-size:.92rem;
  line-height:1.45;
}

.pd-xray-threshold__kind{
  padding:.3rem .5rem;
  color:#183942;
  background:#fff;
  border-radius:.45rem;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.pd-xray-threshold a{color:#fff;font-weight:800}

.pd-xray__status{
  margin:.55rem 0 0;
  color:var(--pd-xray-muted);
  font-size:.82rem;
}

.pd-xray__status[role="alert"]{
  padding:.55rem;
  color:#7c2f20;
  background:#fff0e8;
  border-left:4px solid var(--pd-xray-concern);
}

@media(max-width:820px){
  .pd-xray__head,
  .pd-xray__compare,
  .pd-xray__metrics,
  .pd-xray-record__rail,
  .pd-xray-threshold__inner{grid-template-columns:1fr}
  .pd-xray-record__panel + .pd-xray-record__panel::before{content:"↓";left:50%;top:-.64rem}
}

@media(prefers-reduced-motion:reduce){
  .pd-xray *{scroll-behavior:auto!important;transition:none!important}
}