/* ══════════════════════════════════════════════════════════════════════════════════════════════
   KB-865 · Pesta project viewer — the SHARED measurement icon + photo/measurement lightbox.

   WHY THIS FILE EXISTS
   --------------------
   The ruler icon, the measurement-photo lookup and the lightbox that shows it were born inside
   public/book-pesta.html (the booking wizard's project picker). /pestabina now needs the exact
   same three things on its project gallery. Copying them would create a second copy that drifts,
   and a project's measurement drawing would then be "defined" in two places that disagree.

   So this is the ONE definition. public/pesta-bina.html uses it today.
   public/book-pesta.html still carries its own inline `.pb-ruler` / `.pb-viewer` copy and must be
   migrated onto this file — see the header of pesta-project-viewer.js for the exact swap.

   The project data itself (name, img, measureImg) is never written here. It comes from
   /api/pesta/config, which is the only place a project's measurement drawing is defined.

   SAFARI 12 (iOS 12.5.7 — the workshop's iPad mini 2) MUST RENDER THIS
   -------------------------------------------------------------------
     · every `inset:0` is preceded by top/right/bottom/left longhands (inset landed in Safari 14.1)
     · no clamp() and no aspect-ratio — plain values plus media queries instead
     · no :focus-visible (Safari 15.4) — plain :focus and :focus-within do the reveal
     · flex `gap` (Safari 14.1) is never load-bearing; row spacing is margin
     · every dvh is preceded by the same number in vh
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the ruler icon that sits on a project photo ──────────────────────────────────────────────
   Same 44px pill, same 18px glyph and the same two tints as the booking wizard's project cards.
   44px clears the 44x44 touch target the rest of the storefront uses (.btn is height:44px). */
.kbpv-frame{position:relative}

.kbpv-ruler{
  /* 3px is the booking wizard's own inset. A page with roomier cards nudges it out with a plain
     rule of its own rather than a variable, so nothing here depends on a custom property. */
  position:absolute;right:3px;bottom:3px;z-index:2;
  width:44px;height:44px;padding:0;border:0;border-radius:999px;
  background:none;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.kbpv-ruler::before{
  content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;inset:5px;
  border-radius:999px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.kbpv-ruler svg{position:relative;z-index:1;width:18px;height:18px;display:block;fill:none}
.kbpv-ruler.dark::before{background:rgba(255,255,255,.86);box-shadow:0 1px 3px rgba(0,0,0,.22)}
.kbpv-ruler.dark svg{stroke:rgba(0,0,0,.72)}
.kbpv-ruler.light::before{background:rgba(0,0,0,.42)}
.kbpv-ruler.light svg{stroke:rgba(255,255,255,.86)}
.kbpv-ruler:focus{outline:2.5px solid var(--brand-800);outline-offset:2px}

/* ── WHO CAN SEE IT ───────────────────────────────────────────────────────────────────────────
   EVERYONE, ALWAYS. There is no reveal any more.

   KB-1122 (31 Aug 2026), on Jon's ask: "make this measurement button permanently visible."

   This file already treated touch as the default and gave only mouse users a fade-in on hover,
   which meant the icon's visibility depended on the device somebody happened to be holding. A
   person on a laptop could not see that a measurement drawing existed until they moved a pointer
   over the photograph, and nobody hovers a photo to find out whether something is hidden under it.
   An affordance you have to already know about is not an affordance.

   So the hover reveal is gone rather than inverted. The icon is simply on, at full opacity, on
   every device, and the rules below are polish that cannot hide it: a small grow under a real
   pointer, and a focus ring for the keyboard.

   Legibility is not left to chance now that it sits permanently over a photograph. The glyph rides
   an 86% white plate with a blur behind it, so what it is read against is the plate rather than
   whatever the picture happens to be doing there. Measured off the rendered pixels across all
   thirteen gallery photos, the worst case is far past the 3:1 an icon needs, and past 4.5:1 too.
   scripts/kb1122-project-grid-harness.mjs is what measures it.

   The safety net underneath is unchanged: the viewer that opens from the PHOTO carries a
   "Measurements" tab, so the drawing is reachable even for somebody who ignores the icon. */
.kbpv-ruler{opacity:1}
@media (hover:hover) and (pointer:fine){
  .kbpv-ruler{transition:transform .16s ease}
  .kbpv-ruler:hover{transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){
  .kbpv-ruler{transition:none}
  .kbpv-ruler:hover{transform:none}
}

/* ── the lightbox ─────────────────────────────────────────────────────────────────────────────
   Bottom sheet on a phone, centred card from 768px up. One overlay only: the photo and the
   measurement drawing are two SEGMENTS of the same card, never two stacked popups, so there is
   nothing that can be left open underneath swallowing clicks. */
.kbpv{
  position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:9000;
  display:none;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  background:rgba(15,23,42,.62);opacity:0;transition:opacity .2s ease;
}
.kbpv.open{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}
.kbpv-card{
  position:relative;width:100%;height:90vh;height:90dvh;max-height:90vh;max-height:90dvh;
  background:var(--surface);border-radius:18px 18px 0 0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  overflow:hidden;transform:translateY(100%);transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.kbpv.open .kbpv-card{transform:translateY(0)}
.kbpv-grab{-ms-flex:none;flex:none;padding:9px 0 5px;display:grid;place-items:center;touch-action:none;cursor:grab}
.kbpv-grab::before{content:"";width:38px;height:4px;border-radius:999px;background:var(--border-strong)}
.kbpv-head{
  -ms-flex:none;flex:none;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:2px 16px 10px;
}
.kbpv-head b{font-family:var(--disp);font-size:16px;color:var(--ink);-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:1.2}
/* 44px, the size .btn is site-wide. The booking wizard's own close is 32px, which is under every
   tap-target floor the design system states (38 for an icon button, 40 responsive, 44 mobile) and
   is the one place this deliberately does not copy it. */
.kbpv-close{
  -ms-flex:none;flex:none;margin-left:10px;width:44px;height:44px;border-radius:999px;
  border:1.5px solid var(--border);background:var(--surface);font-size:16px;color:var(--muted);
  cursor:pointer;line-height:1;-webkit-appearance:none;appearance:none;
}
.kbpv-close:hover{color:var(--ink);border-color:var(--border-strong)}
.kbpv-close:focus{outline:2.5px solid var(--brand-800);outline-offset:2px}
.kbpv-seg{-ms-flex:none;flex:none;display:-webkit-box;display:-ms-flexbox;display:flex;padding:10px 16px 0}
.kbpv-seg button{
  -webkit-box-flex:1;-ms-flex:1;flex:1;border:1.5px solid var(--border);background:var(--surface);
  border-radius:var(--r-md);padding:9px;min-height:44px;font:inherit;font-weight:700;font-size:12.5px;
  color:var(--muted);cursor:pointer;font-family:var(--disp);-webkit-appearance:none;appearance:none;
}
.kbpv-seg button + button{margin-left:6px}                    /* margin, not flex gap: Safari 12 */
.kbpv-seg button.on{border-color:var(--brand-700);background:var(--brand-50);color:var(--brand-800)}
.kbpv-seg button:focus{outline:2.5px solid var(--brand-800);outline-offset:2px}
.kbpv-imgwrap{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-height:0;overflow:hidden;background:var(--surface-2);position:relative}
.kbpv-imgwrap img{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  width:100%;height:100%;object-fit:contain;display:block;
}
.kbpv-imgwrap .kbpv-none{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:grid;place-items:center}
.kbpv-none{color:var(--muted);font-size:14px;text-align:center;padding:40px 20px;line-height:1.5}
.kbpv-foot{-ms-flex:none;flex:none;padding:12px 16px;border-top:1px solid var(--border)}
.kbpv-foot .btn{width:100%}
.kbpv-dims{font-size:12px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.kbpv-foot .btn + .kbpv-dims{margin-top:8px}

@media (min-width:768px){
  .kbpv{-webkit-box-align:center;-ms-flex-align:center;align-items:center}
  /* 560px first, then the min() that shrinks it on a narrow desktop window. Safari 12 drops the
     min() line as invalid and keeps the plain one, which is the right answer at any width it can
     realistically be shown at. Same pattern on the image frame's height below. */
  .kbpv-card{width:560px;width:min(560px,92vw);height:auto;max-height:88vh;max-height:88dvh;border-radius:18px;transform:translateY(24px) scale(.98)}
  .kbpv.open .kbpv-card{transform:none}
  .kbpv-grab{display:none}                       /* no swipe-to-dismiss with a mouse */
  .kbpv-head{padding-top:14px}
  /* A DEFINITE height, then letterbox inside it. Left in flow the flex row squeezes the frame
     below the photo's natural height and overflow:hidden crops it (fixed once in book-pesta). */
  .kbpv-imgwrap{-webkit-box-flex:0;-ms-flex:none;flex:none;height:520px;height:min(58vh,520px);min-height:240px;display:grid;place-items:center}
  .kbpv-imgwrap .kbpv-none{position:static}
}
@media (prefers-reduced-motion:reduce){
  .kbpv,.kbpv-card{transition:none}
  .kbpv-card{transform:none}
}