/* ─────────────────────────────────────────────────────────────────────────────
   Product shots — the Smart Snag UI rebuilt in HTML/CSS for the marketing pages.

   These are faithful recreations of the real interface, not screenshots: they
   stay sharp at any resolution, weigh nothing, carry no customer data, and are
   editable when the UI moves on. Everything uses the same tokens and colours as
   the app itself. All classes are `ps-` prefixed so they can't collide with the
   page they're dropped into.

   Markup is injected by /js/product-shots.js into any [data-shot] element.
   ───────────────────────────────────────────────────────────────────────────── */
.ps{
  --ps-bg:#0b0f17; --ps-surface:#111520; --ps-surface2:#0d1119;
  --ps-line:rgba(255,255,255,.08); --ps-line2:rgba(255,255,255,.13);
  --ps-text:#e8eaf0; --ps-muted:#8a94a6; --ps-dim:#5b6474;
  --ps-green:#2AAF78; --ps-red:#E73746; --ps-orange:#E07B2A;
  --ps-amber:#f0c040; --ps-blue:#7cb0f7;
  --ps-mono:'DM Mono',ui-monospace,monospace; --ps-serif:'Fraunces',serif;
  background:var(--ps-bg); color:var(--ps-text);
  font-family:'DM Sans',system-ui,sans-serif; font-size:13px; line-height:1.4;
  padding:16px; container-type:inline-size;
}
.ps *{box-sizing:border-box;}
.ps-row{display:flex;align-items:center;gap:8px;}
.ps-mono{font-family:var(--ps-mono);}
.ps-muted{color:var(--ps-muted);}
.ps-dim{color:var(--ps-dim);}
.ps-serif{font-family:var(--ps-serif);}

/* chips / pills */
.ps-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;
  font-size:10.5px;font-weight:700;white-space:nowrap;}
.ps-chip.green{background:rgba(42,175,120,.18);color:var(--ps-green);}
.ps-chip.red{background:rgba(231,55,70,.18);color:#f28b93;}
.ps-chip.orange{background:rgba(224,123,42,.2);color:#f2b071;}
.ps-chip.amber{background:rgba(245,192,64,.16);color:var(--ps-amber);}
.ps-chip.blue{background:rgba(59,130,246,.18);color:var(--ps-blue);}
.ps-chip.grey{background:rgba(255,255,255,.07);color:#cbd5e0;}
.ps-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
  padding:5px 11px;font-size:11px;font-weight:600;white-space:nowrap;}
.ps-btn.solid{background:var(--ps-green);color:#04140d;}
.ps-btn.ghost{border:1px solid var(--ps-line2);color:#cbd5e0;}

/* generic card */
.ps-card{background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:10px;}

/* Stand-ins for photos/stills: gradient art, never a fake photograph.
   Every fault gets its OWN art that depicts what the caption describes —
   never reuse one fault's image for another. Where one snag shows several
   stills, use the z2/z3 crop modifiers so they read as different angles
   of the SAME fault, not duplicates. */
.ps-img{background:
    linear-gradient(135deg,#2a3340 0%,#3d4654 38%,#4a5361 55%,#333c49 100%);
  border-radius:6px;position:relative;overflow:hidden;flex-shrink:0;}
.ps-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);}

/* worktop join with a non-standard cover strip (the demo's headline fault) */
.ps-img.wk-a{background:
  linear-gradient(90deg,transparent 0 45%,#87909b 45% 47%,#c2cad3 47% 50%,#9aa3ae 50% 53%,#77808b 53% 55%,transparent 55%),
  repeating-linear-gradient(100deg,#6b5844 0 7px,#7a6650 7px 13px,#5f4e3c 13px 20px);}
.ps-img.wk-b{background:
  linear-gradient(115deg,transparent 0 52%,#87909b 52% 54%,#c6cdd6 54% 57%,#87909b 57% 59%,transparent 59%),
  repeating-linear-gradient(75deg,#75604b 0 9px,#846f58 9px 16px,#665442 16px 25px);}
.ps-img.wk-c{background:
  linear-gradient(0deg,transparent 0 30%,#7d8691 30% 32%,#bcc4cd 32% 35%,#7d8691 35% 37%,transparent 37%),
  repeating-linear-gradient(96deg,#65523f 0 6px,#74604b 6px 11px,#594939 11px 18px);}
.ps-img.wk-pan{background:  /* motion-smeared: the mid-pan frame */
  linear-gradient(90deg,#6b5844 0%,#8a755c 22%,#6b5844 41%,#9aa3ae 50%,#6b5844 62%,#7a6650 83%,#5f4e3c 100%);}
.ps-img.wk-fix{background:  /* repaired: clean joint, no cover strip */
  repeating-linear-gradient(100deg,#7a6650 0 8px,#8a755c 8px 15px,#6b5844 15px 23px);}

/* damaged vinyl floor with tape over the tear */
.ps-img.vn-a{background:
  linear-gradient(118deg,transparent 0 36%,rgba(72,74,80,.92) 36% 44%,rgba(99,102,109,.92) 44% 46%,rgba(72,74,80,.92) 46% 54%,transparent 54%),
  linear-gradient(28deg,transparent 0 47%,rgba(40,34,28,.55) 47% 49%,transparent 49%),
  repeating-linear-gradient(0deg,#b3ac9e 0 9px,#c1baac 9px 10px,#aaa395 10px 19px,#b8b1a3 19px 20px);}
.ps-img.vn-b{background:
  linear-gradient(80deg,transparent 0 55%,rgba(70,72,78,.9) 55% 68%,transparent 68%),
  repeating-linear-gradient(90deg,#beb7a9 0 11px,#ccc5b7 11px 12px,#b3ac9e 12px 23px);}

/* wall paintwork: mismatched touch-up at a corner / scuff marks */
.ps-img.pt-a{background:
  radial-gradient(58% 44% at 64% 44%,rgba(255,255,255,.4),transparent 70%),
  linear-gradient(90deg,transparent 0 30%,rgba(0,0,0,.18) 30% 31.5%,transparent 31.5%),
  linear-gradient(160deg,#c9c3b8 0%,#b4ada1 60%,#a29b8f 100%);}
.ps-img.pt-b{background:
  linear-gradient(78deg,transparent 0 42%,rgba(62,56,50,.28) 42% 44%,transparent 44%),
  linear-gradient(102deg,transparent 0 58%,rgba(62,56,50,.22) 58% 59.5%,transparent 59.5%),
  linear-gradient(88deg,transparent 0 66%,rgba(62,56,50,.18) 66% 67%,transparent 67%),
  linear-gradient(165deg,#cfc9be 0%,#b9b2a6 60%,#a7a094 100%);}

/* incomplete sealant bead where the sink meets the tiles */
.ps-img.sl-a{background:
  linear-gradient(90deg,#e6ebee 0 46%,rgba(31,41,51,.4) 46% 66%,#e6ebee 66% 100%) 0 62%/100% 6px no-repeat,
  linear-gradient(0deg,#eef1f4 0 36%,transparent 36%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1.5px,transparent 1.5px 24px),
  linear-gradient(180deg,#a9bcc6 0%,#93a7b2 100%);}

/* property thumbnails: brick facade / rendered facade */
.ps-img.hs-a{background:
  linear-gradient(0deg,#3f4750 0 18%,transparent 18%),
  linear-gradient(90deg,transparent 0 64%,#dde3e8 64% 78%,transparent 78%) 0 30%/100% 34% no-repeat,
  repeating-linear-gradient(0deg,#8a5847 0 5px,#96634f 5px 6px,#7e4f40 6px 11px,#8f5c4a 11px 12px);}
.ps-img.hs-b{background:
  linear-gradient(0deg,#474f58 0 16%,transparent 16%),
  linear-gradient(90deg,transparent 0 22%,#cfd6db 22% 36%,transparent 36%) 0 32%/100% 30% no-repeat,
  linear-gradient(180deg,#d9d2c4 0%,#c6bfb1 100%);}

/* crop modifiers: a closer/shifted view of the same fault. Simple-layer art
   only — never combine with the sl or hs classes, whose individually sized
   layers a blanket background-size would break. (No "-*" glob in this comment:
   a slash-star inside it would end the comment and eat the rules below.) */
.ps-img.z2{background-size:170%;}
.ps-img.z3{background-size:260%;background-position:30% 60%;}

/* ── 1. phone recording ── */
.ps-phone{width:190px;margin:0 auto;border:7px solid #1d2430;border-radius:26px;background:#000;
  overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5);}
.ps-phone-screen{aspect-ratio:9/16;position:relative;}
.ps-rec{position:absolute;top:9px;left:9px;display:flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.5);border-radius:999px;padding:3px 8px;font-size:9.5px;font-family:var(--ps-mono);}
.ps-rec i{width:6px;height:6px;border-radius:50%;background:var(--ps-red);}
.ps-said{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(8,25,31,.82);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 9px;font-size:10px;
  line-height:1.45;color:#dbe2ea;}

/* ── 2. transcript ── */
.ps-tr-line{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--ps-line);}
.ps-tr-line:last-child{border-bottom:0;}
.ps-tr-t{font-family:var(--ps-mono);font-size:10.5px;color:var(--ps-green);flex-shrink:0;padding-top:1px;}
.ps-tr-x{font-size:11.5px;line-height:1.5;color:#cbd5e0;}
.ps-tr-line.hit .ps-tr-x{color:var(--ps-text);}
.ps-tr-line.hit{background:rgba(42,175,120,.07);border-radius:6px;padding-left:8px;padding-right:8px;}

/* ── 3. snag list ── */
.ps-snag{display:flex;gap:10px;padding:10px;border-bottom:1px solid var(--ps-line);align-items:flex-start;}
.ps-snag:last-child{border-bottom:0;}
.ps-snag-thumb{width:62px;height:42px;}
.ps-snag-b{flex:1;min-width:0;}
.ps-snag-t{font-size:12px;font-weight:600;line-height:1.35;margin-bottom:5px;}
.ps-snag-m{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:10px;color:var(--ps-muted);
  font-family:var(--ps-mono);}
.ps-stills{display:flex;gap:4px;flex-shrink:0;}
.ps-stills .ps-img{width:30px;height:26px;}

/* ── 4. frame selection ── */
.ps-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.ps-frame{position:relative;}
.ps-frame .ps-img{width:100%;aspect-ratio:4/3;}
.ps-frame.blur .ps-img{filter:blur(2.4px);opacity:.5;}
.ps-frame.dupe .ps-img{opacity:.42;}
.ps-frame.pick .ps-img{outline:2px solid var(--ps-green);outline-offset:2px;}
.ps-frame-tag{position:absolute;left:0;right:0;bottom:-17px;text-align:center;font-size:9.5px;
  font-family:var(--ps-mono);color:var(--ps-dim);}
.ps-frame.pick .ps-frame-tag{color:var(--ps-green);}

/* ── 5. dashboard ── */
.ps-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px;}
.ps-stat{background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:9px;padding:10px 11px;}
.ps-stat b{display:block;font-family:var(--ps-serif);font-size:20px;font-weight:600;line-height:1;}
.ps-stat span{display:block;font-family:var(--ps-mono);font-size:8.5px;letter-spacing:.7px;
  color:var(--ps-dim);text-transform:uppercase;margin-top:5px;}
.ps-prop{display:flex;gap:11px;padding:11px;align-items:center;}
.ps-prop .ps-img{width:74px;height:50px;}
.ps-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:7px;}
.ps-bar i{display:block;height:100%;background:var(--ps-green);}

/* ── 6. branded PDF (light) ── */
.ps-pdf{background:#fff;color:#1a1a1a;border-radius:6px;overflow:hidden;
  font-family:'DM Sans',system-ui,sans-serif;box-shadow:0 10px 26px rgba(0,0,0,.4);}
.ps-pdf-top{background:#08191F;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;}
.ps-pdf-brand{display:flex;align-items:center;gap:8px;}
.ps-pdf-dot{width:19px;height:19px;border-radius:5px;background:var(--ps-green);}
.ps-pdf-brand b{font-size:11.5px;color:#fff;}
.ps-pdf-body{padding:14px 15px;}
.ps-pdf-h{font-family:var(--ps-serif);font-size:15px;font-weight:600;margin-bottom:2px;}
.ps-pdf-sub{font-size:10px;color:#8a8070;margin-bottom:12px;}
.ps-pdf-item{display:flex;gap:11px;padding:10px 0;border-top:1px solid rgba(0,0,0,.09);}
.ps-pdf-item .ps-img{width:64px;height:48px;}
.ps-pdf-t{font-size:11px;font-weight:600;line-height:1.35;}
.ps-pdf-m{font-size:9.5px;color:#8a8070;font-family:var(--ps-mono);margin-top:4px;}

/* ── 7. snag detail ── */
.ps-det-head{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:7px 0 11px;}
.ps-video{background:#000;border-radius:8px;aspect-ratio:16/8;position:relative;overflow:hidden;}
.ps-video .ps-play{position:absolute;inset:0;margin:auto;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);display:flex;
  align-items:center;justify-content:center;font-size:13px;color:#fff;}
.ps-video .ps-time{position:absolute;left:9px;bottom:8px;font-family:var(--ps-mono);font-size:10px;
  background:rgba(0,0,0,.55);border-radius:5px;padding:2px 7px;}
.ps-lab{font-family:var(--ps-mono);font-size:9px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ps-dim);margin-bottom:6px;}
.ps-note{background:var(--ps-surface2);border:1px solid var(--ps-line);border-radius:8px;
  padding:10px 11px;font-size:11.5px;line-height:1.55;font-style:italic;color:#cbd5e0;}
.ps-crew{border-top:1px solid var(--ps-line);margin-top:12px;padding-top:11px;}

/* ── 8. crew review queue ── */
.ps-q{display:flex;gap:11px;padding:11px;align-items:center;}
.ps-q .ps-img{width:54px;height:44px;}
.ps-q-b{flex:1;min-width:0;}

/* ── 9. crew work list (the page itself, no device bezel — the shot frame is
      already the device) ── */
.ps-crewpage{max-width:560px;margin:0 auto;}
.ps-cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--ps-line);}
.ps-cp-logo{font-size:11.5px;font-weight:700;color:#fff;line-height:1.15;}
.ps-cp-ss{font-size:10px;color:var(--ps-green);letter-spacing:.5px;}
.ps-cp-card{background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:11px;
  padding:12px 13px;margin-bottom:9px;}
.ps-cp-top{display:flex;align-items:flex-start;gap:8px;}
.ps-cp-name{font-size:13px;font-weight:600;line-height:1.25;}
.ps-cp-type{font-size:10.5px;color:var(--ps-muted);margin-top:3px;}
.ps-cp-right{margin-left:auto;text-align:right;flex-shrink:0;}
.ps-cp-when{font-size:10px;color:var(--ps-dim);white-space:nowrap;}
/* two classes so it outranks the host page's `.shot img{width:100%}` */
.ps .ps-cp-done{display:block;width:30px;height:30px;margin:7px 0 0 auto;}
.ps-a2hs{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding:11px 12px;border:1px solid var(--ps-line);border-radius:11px;
  background:var(--ps-surface2);font-size:11.5px;}
.ps-lights{display:flex;gap:4px;justify-content:flex-end;margin-top:7px;}
.ps-lights span{min-width:20px;text-align:center;border-radius:999px;padding:2px 6px;
  font-size:10.5px;font-weight:700;}
.ps-lights .r{background:rgba(231,55,70,.18);color:#f28b93;}
.ps-lights .a{background:rgba(224,123,42,.2);color:#f2b071;}
.ps-lights .g{background:rgba(42,175,120,.2);color:var(--ps-green);}
.ps-lights .zero{opacity:.28;}

/* narrow containers: keep the mocks legible rather than squashing them */
@container (max-width: 460px){
  .ps-stats{grid-template-columns:repeat(2,1fr);}
  .ps-frames{grid-template-columns:repeat(2,1fr);row-gap:24px;}
  .ps-stills{display:none;}
}