/* Real visual evidence. Injected by build.mjs at the <!--EVIDENCE:x--> markers.
   Loaded by the case pages and the homepage. Renders nothing when there are no assets. */

/* It renders as a <section>, so it must neutralise base.css's generous section padding. */
.evidence{
  margin:clamp(40px,5vw,64px) 0 0;
  padding:clamp(28px,3.5vw,40px) 0 0;
  border-top:1px solid var(--rule);
}
.evidence > .evhead{
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:500;display:flex;align-items:center;gap:14px;
}
.evidence > .evhead::after{content:"";flex:1;height:1px;background:var(--rule);}
.evidence > .evnote{
  margin-top:14px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:46em;
}

.evgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.5vw,30px);margin-top:clamp(24px,3vw,34px);
}
@media(max-width:820px){ .evgrid{grid-template-columns:1fr;} }

figure.ev{min-width:0;margin:0;display:flex;flex-direction:column;}
figure.ev.full{grid-column:1 / -1;}

/* The frame. A border and a dark mat, so a light screenshot does not glare
   against the page and a dark one does not disappear into it. */
.ev .shot{
  display:block;position:relative;
  background:var(--well);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  line-height:0;
  transition:border-color .18s ease, transform .18s ease;
}
.ev .shot:hover{border-color:rgba(232,181,71,.55);transform:translateY(-2px);}
.ev .shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.ev .shot img{
  width:100%;height:auto;display:block;
  background:#0a2a30;
}

/* "Open full size" affordance, visible on hover and always on touch. */
.ev .shot::after{
  content:"Open full size";
  position:absolute;right:10px;bottom:10px;
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);background:rgba(11,47,54,.82);
  border:1px solid var(--rule);border-radius:999px;
  padding:6px 11px;line-height:1;
  opacity:0;transition:opacity .18s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ev .shot:hover::after,.ev .shot:focus-visible::after{opacity:1;}
@media(hover:none){ .ev .shot::after{opacity:1;} }

.ev figcaption{
  margin-top:14px;font-size:15px;line-height:1.6;color:var(--muted);
}
.ev figcaption b{
  display:block;color:var(--cream);font-weight:600;font-size:15.5px;margin-bottom:5px;
}

/* A quiet mark on anything that has been redacted, so nobody wonders. */
.ev .redacted{
  margin-top:9px;
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:7px;
}
.ev .redacted::before{
  content:"";width:16px;height:2px;background:var(--muted);flex:none;border-radius:2px;
}

@media(prefers-reduced-motion:reduce){
  .ev .shot{transition:none;}
  .ev .shot:hover{transform:none;}
}

@media print{
  .evidence{border-top:1px solid #ccc;}
  .ev .shot{border:1px solid #ccc;background:none;}
  .ev .shot::after{display:none;}
  .ev figcaption,.ev .redacted{color:#333;}
  .ev figcaption b{color:#111;}
}