/* WALKED · Sample photo tile · v1 2026-10-02
   Designed placeholder for sample reports whose photos were withdrawn. Not a photo, never zoomable.
   Drop-in: add this file after styles.css (or paste at the end of it). No fonts loaded here; inherits the
   page's "Source Sans 3". Colors: WALKED navy/orange/slate only (navy, orange and neutrals only).
   Markup:
     <div class="sample-photo-tile" data-system="plumbing" role="img" aria-label="Sample photo placeholder: Plumbing">
       <span class="spt-icon" aria-hidden="true"></span>
       <span class="spt-name">Plumbing</span>
       <span class="spt-label">Sample photo</span>
     </div>
   data-system: roof | exterior | electrical | plumbing | hvac | structure | interior | garage | attic | camera
   (basement / foundation are aliased to structure; anything unknown falls back to camera).
   Size modifiers: (default) = finding .shot slot 176x132 (4:3), 180px tall in print
                   --appendix = fills an .appendix-grid cell (width 100%, 4:3)
                   --thumb    = 64x48 icon-only (.thumbs row)
                   --cover    = hero banner (replaces .hero img.cover; 260px / 220px mobile)            */
.sample-photo-tile{
  --spt-bg:#F5F7FA; --spt-ink:#0B1F3A; --spt-muted:#5B6B7C; --spt-ring:#E3E8EF; --spt-accent:#E85D04;
  --spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.2 A2 2 0 0 1 5.6 6.2 H8 L9.6 4.2 H14.4 L16 6.2 H18.4 A2 2 0 0 1 20.4 8.2 V17.6 A2 2 0 0 1 18.4 19.6 H5.6 A2 2 0 0 1 3.6 17.6 Z'/%3E%3Ccircle cx='12' cy='12.8' r='3.6'/%3E%3C/svg%3E");
  --s:1;                                   /* scale factor: every dimension below is designed at 132px tall */
  position:relative; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:calc(132px*var(--s)); aspect-ratio:4/3; width:auto; max-width:100%;
  margin:calc(14px*var(--s)) auto 0; padding:0 calc(10px*var(--s));
  background-color:var(--spt-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V1h12' fill='none' stroke='%23C3CDD8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='rotate%280 7 7%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V1h12' fill='none' stroke='%23C3CDD8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='rotate%2890 7 7%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V1h12' fill='none' stroke='%23C3CDD8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='rotate%28270 7 7%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V1h12' fill='none' stroke='%23C3CDD8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='rotate%28180 7 7%29'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:calc(13px*var(--s)) calc(13px*var(--s));
  background-position:left calc(9px*var(--s)) top calc(9px*var(--s)), right calc(9px*var(--s)) top calc(9px*var(--s)),
                      left calc(9px*var(--s)) bottom calc(9px*var(--s)), right calc(9px*var(--s)) bottom calc(9px*var(--s));
  border:1px solid var(--spt-ring); border-radius:calc(10px*var(--s));
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1; text-align:center;
  cursor:default; user-select:none; -webkit-user-select:none;
}
.sample-photo-tile .spt-icon{
  position:relative; flex:none; width:calc(42px*var(--s)); height:calc(42px*var(--s)); border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 1px var(--spt-ring); margin-bottom:calc(11px*var(--s));
}
.sample-photo-tile .spt-icon::before{
  content:""; position:absolute; inset:calc(9px*var(--s)); background:var(--spt-ink);
  -webkit-mask:var(--spt-icon) center/contain no-repeat; mask:var(--spt-icon) center/contain no-repeat;
}
.sample-photo-tile .spt-name{
  font-size:calc(13.5px*var(--s)); font-weight:700; color:var(--spt-ink); letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.sample-photo-tile .spt-name::after{             /* small orange rule under the system name */
  content:""; display:block; width:calc(14px*var(--s)); height:calc(2px*var(--s)); border-radius:2px;
  background:var(--spt-accent); margin:calc(5px*var(--s)) auto calc(8px*var(--s));
}
.sample-photo-tile .spt-label{
  font-size:calc(8.5px*var(--s)); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--spt-muted);
  padding-left:.16em;                        /* optically re-centre tracked caps */
}
/* generic tile: no system name, label carries the weight */
.sample-photo-tile[data-system="camera"] .spt-name{display:none}
.sample-photo-tile[data-system="camera"] .spt-label{font-size:calc(10px*var(--s)); color:var(--spt-ink); letter-spacing:.14em}
.sample-photo-tile[data-system="camera"] .spt-label::after{
  content:""; display:block; width:calc(14px*var(--s)); height:calc(2px*var(--s)); border-radius:2px;
  background:var(--spt-accent); margin:calc(7px*var(--s)) auto 0;
}
.sample-photo-tile[data-system="roof"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13.5 L12 5.5 L21 13.5'/%3E%3Cpath d='M6.6 17 L12 12.2 L17.4 17'/%3E%3Cpath d='M15.6 8.7 V4.6 H18.2 V11'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="exterior"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 10.8 L12 4 L20.2 10.8'/%3E%3Cpath d='M5.6 9.4 V20 H18.4 V9.4'/%3E%3Cpath d='M10 20 V14.6 H14 V20'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="electrical"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.8 L5.6 13.4 H11.4 L10.4 21.2 L18.4 10.4 H12.6 Z'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="plumbing"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.4 H12.4 A4.6 4.6 0 0 1 17 11 V12.6'/%3E%3Cpath d='M3 10 H12.1 A1.4 1.4 0 0 1 13.5 11.4 V12.6'/%3E%3Cpath d='M12.6 12.6 H17.9'/%3E%3Cpath d='M7.4 6.4 V3.8 M5.4 3.8 H9.4'/%3E%3Cpath d='M15.25 15.4 C15.25 15.4 13 17.9 13 19.3 A2.25 2.25 0 0 0 17.5 19.3 C17.5 17.9 15.25 15.4 15.25 15.4 Z'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="hvac"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 4.6 A2 2 0 0 1 11.6 4.6 V13.9 A4 4 0 1 1 7.6 13.9 Z'/%3E%3Cpath d='M9.6 9 V16.9'/%3E%3Cpath d='M15 8 C16.2 7 17.3 9 18.5 8 S20.8 9 21.4 8.4'/%3E%3Cpath d='M15 12 C16.2 11 17.3 13 18.5 12 S20.8 13 21.4 12.4'/%3E%3Cpath d='M15 16 C16.2 15 17.3 17 18.5 16 S20.8 17 21.4 16.4'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="structure"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5 H21 V18.5 H3 Z'/%3E%3Cpath d='M3 9.85 H21 M3 14.15 H21'/%3E%3Cpath d='M9 5.5 V9.85 M15 5.5 V9.85 M6 9.85 V14.15 M12 9.85 V14.15 M18 9.85 V14.15 M9 14.15 V18.5 M15 14.15 V18.5'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="interior"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 20.5 V3.6 H17.5 V20.5'/%3E%3Cpath d='M3.8 20.5 H20.2'/%3E%3Ccircle fill='%23000' cx='14.6' cy='12.4' r='0.6'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="garage"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 10.2 L12 4.6 L21.2 10.2'/%3E%3Cpath d='M4.6 9.1 V20.4 M19.4 9.1 V20.4'/%3E%3Cpath d='M7.6 20.4 V12.6 H16.4 V20.4'/%3E%3Cpath d='M7.6 15.2 H16.4 M7.6 17.8 H16.4'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="attic"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 16 L12 6.4 L21.4 16 Z'/%3E%3Cpath d='M7 13.6 L8.8 11.6 L10.6 13.6 L12.4 11.6 L14.2 13.6 L16 11.6 L17.2 12.9'/%3E%3Cpath d='M5 19.4 H19'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="camera"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.2 A2 2 0 0 1 5.6 6.2 H8 L9.6 4.2 H14.4 L16 6.2 H18.4 A2 2 0 0 1 20.4 8.2 V17.6 A2 2 0 0 1 18.4 19.6 H5.6 A2 2 0 0 1 3.6 17.6 Z'/%3E%3Ccircle cx='12' cy='12.8' r='3.6'/%3E%3C/svg%3E")}
.sample-photo-tile[data-system="basement"],.sample-photo-tile[data-system="foundation"]{--spt-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5 H21 V18.5 H3 Z'/%3E%3Cpath d='M3 9.85 H21 M3 14.15 H21'/%3E%3Cpath d='M9 5.5 V9.85 M15 5.5 V9.85 M6 9.85 V14.15 M12 9.85 V14.15 M18 9.85 V14.15 M9 14.15 V18.5 M15 14.15 V18.5'/%3E%3C/svg%3E")}

/* --- size modifiers --- */
.sample-photo-tile--appendix{height:auto; width:100%; margin:0; border:0; border-radius:0}
.sample-photo-tile--thumb{--s:.5; width:64px; height:48px; margin:0; padding:0; border-radius:10px; flex:none; background-image:none}
.sample-photo-tile--thumb .spt-icon{width:26px; height:26px; margin:0}
.sample-photo-tile--thumb .spt-icon::before{inset:5.5px}
.sample-photo-tile--thumb .spt-name,.sample-photo-tile--thumb .spt-label{display:none}
.sample-photo-tile--cover{
  --spt-bg:#0B1F3A; --spt-ink:#fff; --spt-muted:#AEB9C7; --s:1.45;
  width:100%; height:260px; aspect-ratio:auto; max-width:none; margin:0; border:0; border-radius:0;
  background-color:#0B1F3A; background-image:linear-gradient(180deg,#0B1F3A,#0B1F3A); background-size:100% 100%; background-position:0 0;
  padding-bottom:28px;
}
.sample-photo-tile--cover .spt-icon{background:#0B1F3A; box-shadow:none}
.sample-photo-tile--cover .spt-name{font-size:20px}
@media (max-width:640px){ .sample-photo-tile--cover{height:220px; --s:1.25} }

/* --- report placement --- */
.card > .sample-photo-tile{margin-top:14px}
.thumbs .sample-photo-tile--thumb{margin:0}
@media print{
  .card > .sample-photo-tile{--s:1.3636; -webkit-print-color-adjust:exact; print-color-adjust:exact}   /* 180px, matches .card .shot print */
  .sample-photo-tile{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
body.repair-mode .repair-item > .sample-photo-tile{--s:1.3636}       /* matches repair-mode .shot 180px */
@media print{ body.repair-mode .repair-item > .sample-photo-tile{--s:1.2121} }  /* 160px */

/* Honest banner shown once above the first finding section */
.sample-photo-note{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; border-radius:14px;
  background:#F5F7FA; border:1px solid #E3E8EF; color:#0B1F3A; font-size:14px; line-height:1.4;
}
.sample-photo-note b{font-weight:700}
.sample-photo-note::before{
  content:""; flex:none; width:18px; height:18px; margin-top:1px; background:#0B1F3A;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.2 A2 2 0 0 1 5.6 6.2 H8 L9.6 4.2 H14.4 L16 6.2 H18.4 A2 2 0 0 1 20.4 8.2 V17.6 A2 2 0 0 1 18.4 19.6 H5.6 A2 2 0 0 1 3.6 17.6 Z'/%3E%3Ccircle cx='12' cy='12.8' r='3.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.2 A2 2 0 0 1 5.6 6.2 H8 L9.6 4.2 H14.4 L16 6.2 H18.4 A2 2 0 0 1 20.4 8.2 V17.6 A2 2 0 0 1 18.4 19.6 H5.6 A2 2 0 0 1 3.6 17.6 Z'/%3E%3Ccircle cx='12' cy='12.8' r='3.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 2026-10-03: real inspection photos in the finding .shot slot. Same height and spacing as the tile (132px, 180px print);
   natural aspect, never cropped; click / Enter to zoom. */
.shot.shot-real{height:132px;width:auto;max-width:100%;max-height:none;object-fit:contain;background:transparent;
  margin:14px auto 0;border-radius:10px;border:1px solid #E3E8EF;cursor:zoom-in}
.shot.shot-real:focus-visible{outline:3px solid #E85D04;outline-offset:2px}
@media print{.card .shot.shot-real{height:180px;max-height:180px}}
body.repair-mode .repair-item .shot.shot-real{height:160px}