/* ═══════════════════════════════════════════════════════════════════════
   EVIDENCE MATERIALS — what each piece of evidence is made of.

   The drawer used to hold everything in the same black frame with the same
   black tab, so a diagram, a festival photo and a GitHub page all read as
   one kind of thing. Now each frame carries data-material (build/materials.mjs):

     screen  a real product capture. Unchanged: device, browser or ink frame.
     paper   a diagram or document. A white sheet clipped into the folder,
             its label typed along the bottom margin.
     print   a photograph. White border, taped in at the corners.
     live    a running component. A plain ink frame and a mono label.

   Every rule is scoped to .is-snapshot .evidence, so nothing outside the
   evidence area moves. The clips and tape are drawn here, not images.
   ═══════════════════════════════════════════════════════════════════════ */

/* The steel for clips and wire, drawn once. Inline SVG keeps them crisp at
   any size and costs no request. Colours are the foundation tokens' values:
   ink #151918, steel #dce2e6, steel-dark #b7c0c6. */
.is-snapshot .evidence {
  --binder-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Cpath d='M19 25 13 5.5Q12.6 3 15 3h34q2.4 0 2 2.5L45 25' fill='none' stroke='%23151918' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M19 25 13 5.5Q12.6 3 15 3h34q2.4 0 2 2.5L45 25' fill='none' stroke='%23dce2e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M5 22.5h54l-4.5 20.5H9.5z' fill='%23151918'/%3E%3Cpath d='M10 26.5h44' stroke='%23596369' stroke-width='1.6'/%3E%3Cellipse cx='12' cy='24' rx='3.2' ry='2.4' fill='%23b7c0c6' stroke='%23151918' stroke-width='1.2'/%3E%3Cellipse cx='52' cy='24' rx='3.2' ry='2.4' fill='%23b7c0c6' stroke='%23151918' stroke-width='1.2'/%3E%3C/svg%3E");
  --paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 64'%3E%3Cpath d='M7.5 20v29a3.5 3.5 0 0 0 7 0V9a5.5 5.5 0 0 0-11 0v43a7.5 7.5 0 0 0 15 0V17' fill='none' stroke='%23151918' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M7.5 20v29a3.5 3.5 0 0 0 7 0V9a5.5 5.5 0 0 0-11 0v43a7.5 7.5 0 0 0 15 0V17' fill='none' stroke='%23dce2e6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── PAPER ──────────────────────────────────────────────────────────────
   A sheet: white stock, the site's ink outline and hard shadow, a stable
   tilt from the file name. Leads tilt least, because a rotated raster
   softens its own text. */
.is-snapshot .evidence .ev-frame[data-material="paper"] {
  padding: clamp(7px, .85vw, 12px) clamp(7px, .85vw, 12px) 0;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 9px 11px 0 rgba(38, 51, 59, .17);
  rotate: var(--tilt, 0deg);
}
.is-snapshot .evidence .ev-frame[data-material="paper"] :is(img, video) {
  border: 1px solid rgba(21, 25, 24, .14);
}
/* The label is typed on the sheet's own bottom margin, never over the
   drawing: on the AI OS chart the old tab sat on its closing sentence. */
.is-snapshot .evidence .ev-frame[data-material="paper"] figcaption,
.is-snapshot .evidence .ev-frame[data-material="print"] figcaption {
  position: static; inset: auto; translate: none;
  display: block; width: auto; max-width: none; margin: 0;
  padding: 8px 1px 9px;
  background: none; color: var(--ink);
  font-family: var(--mono); font-size: .64rem; font-weight: 400;
  letter-spacing: .045em; line-height: 1.3; white-space: normal;
}
.is-snapshot .evidence .ev-frame[data-material="paper"]:not(:has(figcaption)) {
  padding-bottom: clamp(7px, .85vw, 12px);
}

/* The lead sheet is held by a binder clip; supporting sheets by a paperclip.
   Both sit over the top edge, so they read as holding the sheet in. */
.is-snapshot .evidence .ev-frame[data-material="paper"]::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  top: -13px; left: 16px; width: 15px; height: 44px;
  background: var(--paperclip) center / contain no-repeat;
  rotate: -4deg;
}
.is-snapshot .evidence .ev-group-lead .ev-frame[data-material="paper"]::before {
  top: -24px; left: 22%; width: 60px; height: 43px;
  background-image: var(--binder-clip);
  rotate: calc(var(--tilt, 0deg) * -1);
}

/* ── PRINT ──────────────────────────────────────────────────────────────
   A photograph: a white border, two strips of tape across the top corners. */
.is-snapshot .evidence .ev-frame[data-material="print"] {
  padding: clamp(6px, .75vw, 11px) clamp(6px, .75vw, 11px) 0;
  border: 1.5px solid var(--ink);
  background: #fff;
  box-shadow: 8px 10px 0 rgba(38, 51, 59, .16);
  rotate: var(--tilt, 0deg);
}
.is-snapshot .evidence .ev-frame[data-material="print"]:not(:has(figcaption)) {
  padding-bottom: clamp(6px, .75vw, 11px);
}
.is-snapshot .evidence .ev-frame[data-material="print"] :is(img, video) { border: 0; }
.is-snapshot .evidence .ev-frame[data-material="print"]::before,
.is-snapshot .evidence .ev-frame[data-material="print"]::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  top: -7px; width: clamp(38px, 4.4vw, 62px); height: clamp(14px, 1.4vw, 19px);
  background: rgba(226, 232, 235, .72);
  border: 1px solid rgba(21, 25, 24, .14);
  /* Torn ends: tape is cut with teeth, not scissors. */
  clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 36%, 100% 54%, 97% 72%, 100% 90%, 98% 100%, 2% 100%, 0 82%, 3% 64%, 0 46%, 3% 28%, 0 10%);
}
.is-snapshot .evidence .ev-frame[data-material="print"]::before { left: -13px; rotate: -38deg; }
.is-snapshot .evidence .ev-frame[data-material="print"]::after { right: -13px; rotate: 38deg; }

/* ── LIVE ───────────────────────────────────────────────────────────────
   Reserved for running components. A plain ink frame and a mono label on
   its top edge, so a working thing never looks like a picture of one. */
.is-snapshot .evidence .ev-frame[data-material="live"]:not(.ev-live) {
  border: 2px solid var(--ink); background: #fff;
  box-shadow: 9px 11px 0 rgba(38, 51, 59, .17);
}
.is-snapshot .evidence .ev-frame[data-material="live"] :is(img, video, iframe) { border: 0; }
/* Live evidence (live-evidence.css) owns its own frame and label. */
.is-snapshot .evidence .ev-frame[data-material="live"]:not(.ev-live) figcaption {
  top: 0; bottom: auto; left: -2px; translate: 0 -100%;
  font-family: var(--mono); font-weight: 400; letter-spacing: .04em;
}

/* A group of sheets and prints drops the white box around it: paper does not
   need a frame to read as an object. The support still sits where it sat. */
.is-snapshot .evidence .is-loose {
  padding: 0; border: 0; background: none; box-shadow: none;
}
.is-snapshot .evidence-phone-fan .ev-group-support.is-loose {
  gap: clamp(18px, 2.4vw, 30px); padding: 12px 6px 0;
}
.is-snapshot .evidence-photo-story .ev-group-support.is-loose {
  gap: clamp(12px, 1.6vw, 20px); align-items: start;
}
@media (max-width: 980px) {
  /* Stacked on a phone, the prints used to tuck 13% up over the lead. A print
     carries its label on its own bottom border, so they now only overlap that
     border by a tape's width and the label stays readable. */
  .is-snapshot .evidence-photo-story .ev-group-support.is-loose { margin-top: -6px; }
}

/* ── THE LOUPE TRIGGER ──────────────────────────────────────────────────
   A real link laid over each capture (templates.mjs, zoomLink). With
   JavaScript off it opens the whole source file; with it on, the loupe. */
.is-snapshot .evidence .ev-zoom {
  position: absolute; inset: 0; z-index: 2;
  cursor: zoom-in; border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* The site's own focus ring, drawn clear of the sheet's ink edge so it can
   never be mistaken for the border. Inside a device the screen clips, so
   there it is drawn inward, with a white band that reads on dark captures. */
.is-snapshot .evidence .ev-zoom:focus-visible {
  outline: 4px solid var(--ink); outline-offset: 7px;
}
.is-snapshot .evidence :is(.phone, .desktop-monitor-screen, .ev-browser-screen) > .ev-zoom:focus-visible {
  outline-offset: -4px; box-shadow: inset 0 0 0 8px #fff;
}
.is-snapshot .evidence :is(.desktop-monitor-screen, .ev-browser-screen, .ev-golf-share-card) { position: relative; }
/* Labels are text for every reader, but a click on one still means the frame. */
.is-snapshot .evidence .ev-frame figcaption:not(.ev-live-label) { pointer-events: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .is-snapshot .evidence .ev-frame:is([data-material="paper"], [data-material="print"]) {
    transition: translate var(--t-quick) var(--ease-drawer), box-shadow var(--t-quick) var(--ease-drawer);
  }
  .is-snapshot .evidence .ev-frame:is([data-material="paper"], [data-material="print"]):hover {
    translate: 0 -4px;
    box-shadow: 12px 15px 0 rgba(38, 51, 59, .2);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ARRIVAL — a project opens: the lead lands, the support slides out from
   behind the folder edge. Both finish inside 400ms.

   CSS only, on purpose. A preview goes from display:none to shown whenever
   drawer.js picks it (drawer:changed), and that restarts its animations, so
   nothing has to be listened for. Only translate, scale and clip-path move;
   nothing starts invisible, and fill-mode is backwards, so a finished or
   stalled animation leaves the evidence exactly where the layout put it.
   Off entirely without JavaScript and under reduced motion.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes ev-land {
  0%   { translate: 0 -16px; scale: 1.018; }
  72%  { translate: 0 1.5px; scale: 1; }
  100% { translate: 0 0;     scale: 1; }
}
/* The clip travels with the sheet, so the part still "behind the folder"
   is hidden and the sheet appears to come out from a line at its own edge. */
@keyframes ev-slide {
  from {
    translate: var(--ev-from-x) var(--ev-from-y);
    clip-path: inset(var(--ev-clip-t) var(--ev-clip-r) var(--ev-clip-b) var(--ev-clip-l));
  }
  to {
    translate: 0 0;
    clip-path: inset(-80px -80px -80px -80px);
  }
}
.is-snapshot .evidence {
  /* Default: out from behind the folder's right edge. */
  --ev-from-x: 44px; --ev-from-y: 8px;
  --ev-clip-t: -80px; --ev-clip-r: 44px; --ev-clip-b: -80px; --ev-clip-l: -80px;
}
/* DeathcareSoftware's phone sits against the left edge, so it comes from there. */
.is-snapshot .evidence-desktop-phone {
  --ev-from-x: -44px; --ev-clip-r: -80px; --ev-clip-l: 44px;
}
@media (max-width: 980px) {
  /* On a phone the support is stacked below the lead; sliding it in from the
     screen edge would widen the page mid-animation. It drops from under the
     lead instead. */
  .is-snapshot .evidence {
    --ev-from-x: 0px; --ev-from-y: -22px;
    --ev-clip-t: 22px; --ev-clip-r: -80px; --ev-clip-l: -80px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-js] .is-snapshot .evidence .ev-group-lead > * {
    animation: ev-land 330ms var(--ease-drawer) backwards;
  }
  html[data-js] .is-snapshot .evidence .ev-group-support > * {
    animation: ev-slide 290ms var(--ease-drawer) 100ms backwards;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   STICKY SHORTER COLUMN (desktop). js/features/evidence-sticky.js measures
   each open snapshot and marks it:

     data-stick="media"  the evidence is shorter: it holds while the story
                         scrolls past.
     data-stick="copy"   the story is shorter: head, body and foot hold
                         together while the evidence scrolls.

   The copy column is three grid items, not one box, and wrapping them would
   change the phone reading order (story, proof, results, actions). So all
   three share one grid area spanning the rows, and the script gives each a
   margin-top equal to its offset and a margin-bottom that makes every margin
   box the full column height. Their sticky tops differ by the same offsets,
   so they move as one block and stop together. Without the script this is
   inert and the grid is exactly as before.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  .is-snapshot[data-stick="media"] > .preview-media {
    position: sticky; top: var(--stick-top, 24px); align-self: start;
  }
  .is-snapshot[data-stick="copy"] > :is(.preview-head, .preview-body, .preview-foot) {
    grid-column: head; grid-row: 1 / -1;
    position: sticky; align-self: start;
  }
  .is-snapshot[data-stick="copy"] > .preview-head {
    margin: var(--d-head, 0px) 0 var(--m-head, 0px);
    top: calc(var(--stick-top, 24px) + var(--d-head, 0px));
  }
  .is-snapshot[data-stick="copy"] > .preview-body {
    margin: var(--d-body, 0px) 0 var(--m-body, 0px);
    top: calc(var(--stick-top, 24px) + var(--d-body, 0px));
  }
  .is-snapshot[data-stick="copy"] > .preview-foot {
    margin: var(--d-foot, 0px) 0 var(--m-foot, 0px);
    top: calc(var(--stick-top, 24px) + var(--d-foot, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTCH ROOM. The phone frame reserves its status-bar band, so a capture
   starts below the notch instead of under it (DeathcareSoftware's wordmark,
   caniplay's first course). The band is bezel, not an invented status bar.
   ═══════════════════════════════════════════════════════════════════════ */
.is-snapshot .phone {
  --notch-room: clamp(15px, 1.65vw, 22px);
  padding-top: var(--notch-room);
}
.is-snapshot .phone::before {
  top: calc(var(--notch-room) / 2 - 4px);
  width: 30%; height: 9px;
  background: #2b3230;
  box-shadow: inset -9px 0 0 -6px #3f4a55;
}
.is-snapshot .phone img { border-radius: 7px 7px 20px 20px; }
@media (max-width: 980px) {
  .is-snapshot .phone { --notch-room: 12px; }
  .is-snapshot .phone::before { height: 7px; top: calc(var(--notch-room) / 2 - 3px); }
  .is-snapshot .phone img { border-radius: 5px 5px 13px 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   QUICK CRAFT FIXES from the evidence audit.
   ═══════════════════════════════════════════════════════════════════════ */

/* caniplay.golf: the 390 x 844 capture ends halfway through the "Other public
   courses" heading. The phone screen stops at the end of the results card
   instead (y = 784 of 844). This is a crop, which belongs in site.json as the
   asset's aspect; it lives here only because this pass may not edit that file. */
#preview-caniplay-golf .ev-golf-search-phone { aspect-ratio: auto; }
#preview-caniplay-golf .ev-golf-search-phone img { height: auto; aspect-ratio: 390 / 784; }

/* Website refresh: the motion window covered the end of the hero's CTA line
   ("…before you pay anything."), which ends at 38% of the capture's width
   (x = 425 of 1120, measured). At 58% the second window starts at 42%, clear
   of it at every width, because both windows scale with the column. */
@media (min-width: 981px) {
  .is-snapshot .evidence-browser-sections .ev-browser-motion { width: 58%; }
}