/* ════════════════════════════════════════════════════════════════════════
   AH-CSS-imagery-plate · v1.0.0 · S086 (Imagery program)
   ────────────────────────────────────────────────────────────────────────
   The "evidence plate": a reserved-imagery placeholder that reads PREMIUM
   whether empty (launch) or filled (real capture drops in post-launch — D8).
   Built on the S039 console-hero browser-chrome grammar (.cb-frame), themed
   onto the Atlas dark surfaces and the live <image-slot> custom element via
   ::part(). Glow discipline per the S039 hero (one soft shield-blue wash, no
   gradient slop). Requires: atlas/tokens/brand.css + assets/image-slot.js.

   Usage (chrome variant — product captures: compare report, on-chain plate):
     <div class="ev-wrap">
       <figure class="ev-plate ev-plate--chrome">
         <div class="ev-bar" aria-hidden="true"><i></i><i></i><i></i>
           <b>app.audithunt.com / report</b></div>
         <image-slot id="ev-compare-report" class="ev-slot"
           style="aspect-ratio:16/10" shape="rect"
           placeholder="Findings report — side-by-side capture"></image-slot>
       </figure>
       <figcaption class="ev-cap">Reserved — real capture drops in post-launch.</figcaption>
     </div>

   Usage (plain plate — workspace / empty-state plate, no browser bar):
     <figure class="ev-plate">
       <image-slot id="ev-about-team" class="ev-slot" style="aspect-ratio:16/9"
         shape="rect" placeholder="Team / workspace plate"></image-slot>
     </figure>
   ════════════════════════════════════════════════════════════════════════ */

/* ── glow wrapper (optional) ─────────────────────────────────────────────── */
.ev-wrap{ position:relative; }
.ev-wrap::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-10% -6% -2%;
  background:radial-gradient(ellipse 58% 64% at 50% 22%,
    color-mix(in oklab, var(--shield-hi,#4A7FC1) 16%, transparent) 0%, transparent 72%);
}
.ev-wrap > .ev-plate{ position:relative; z-index:1; }

/* ── the frame ───────────────────────────────────────────────────────────── */
.ev-plate{
  position:relative; margin:0;
  border:1px solid var(--line-strong, rgba(234,238,245,.14));
  border-radius:14px; overflow:hidden;
  background:var(--steel, #0D0D10);
  box-shadow: inset 0 1px 0 rgba(234,238,245,.05), 0 30px 80px rgba(0,0,0,.5);
}

/* ── browser-chrome bar (matches index.html .cb-bar) ─────────────────────── */
.ev-bar{
  height:38px; display:flex; align-items:center; gap:7px; padding:0 16px;
  border-bottom:1px solid var(--line, rgba(234,238,245,.07));
  background:var(--night, #060608);
}
.ev-bar i{ width:9px; height:9px; border-radius:50%; background:var(--faint, #2A2E38); }
.ev-bar b{
  margin-left:12px; font-family:var(--f-mono, monospace);
  font-size:calc(11px*var(--type-scale,1)); font-weight:500;
  color:var(--mute, #606878); letter-spacing:.06em;
}

/* ── the slot itself ─────────────────────────────────────────────────────── */
.ev-slot{
  display:block; width:100%; height:auto; vertical-align:top;
  /* drives the empty-state icon + caption colour (icon uses currentColor) */
  color:var(--mute, #606878);
  font-family:var(--f-mono, monospace);
}

/* Empty-state surface: faint diagonal hairline weave over absolute ink — a
   measured "reserved evidence slot" texture, not a loud placeholder. */
.ev-slot::part(frame){
  background:
    repeating-linear-gradient(135deg,
      rgba(234,238,245,.020) 0 1px, transparent 1px 11px),
    radial-gradient(ellipse 70% 90% at 50% 40%,
      rgba(74,127,193,.05) 0%, transparent 70%),
    var(--ink, #000000);
}
/* dashed "reserved" ring → Atlas hairline (default ring is near-black/invisible) */
.ev-slot::part(ring){ border:1px dashed var(--line-strong, rgba(234,238,245,.14)); }

/* Empty-state caption: render as a calm mono spec label, not body text. */
.ev-slot::part(empty){ letter-spacing:.04em; }

/* ── reserved figcaption (mono, beneath the plate) ───────────────────────── */
.ev-cap{
  display:flex; align-items:center; gap:9px;
  margin-top:14px; font-family:var(--f-mono, monospace);
  font-size:calc(11px*var(--type-scale,1)); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute, #606878);
}
.ev-cap::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--shield-hi,#4A7FC1);
  box-shadow:0 0 7px color-mix(in oklab, var(--shield-hi,#4A7FC1) 70%, transparent);
}

/* tighter glow + caption on small screens */
@media (max-width:760px){
  .ev-wrap::before{ inset:-6% -2% 0; }
}