/*
 * Crezly Scout — app shell styling.
 *
 * Phone-first and phone-only: this surface is never opened on a desktop in
 * anger, and 99.4% of paid traffic to this site is a phone. Every fixed element
 * accounts for the notch via env(safe-area-inset-*), because a bottom tab bar
 * that sits under the iOS home indicator is unusable exactly where it matters.
 *
 * The palette is the site's: navy #0d1a40, blue #2b57c9. The three band colours
 * are the only new ones and they are chosen to survive daylight on a phone
 * screen held at arm's length — which is the actual viewing condition.
 */

:root {
  --czs-navy: #0d1a40;
  --czs-blue: #2b57c9;
  --czs-ink:  #111827;
  --czs-mut:  #6b7280;
  --czs-line: #e5e7eb;
  --czs-hot:  #e11d48;
  --czs-warm: #f59e0b;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  /* The app never scrolls. */
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  color: var(--czs-ink);
  background: #eef1f6;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body { background: #000; }

/* ================================================================ layout */

/*
 * !! THE VIEWFINDER IS THE SCREEN.
 *
 * Owner, 2026-09-17: *"the star of the show should be the real time focus
 * through the phone."* So the video takes everything above the map strip, and
 * the strip is deliberately small — a dashboard instrument, not the view.
 *
 * Heights are a flex column between the top of the page and the tab bar rather
 * than vh arithmetic: 100vh lies on mobile browsers whose address bar comes and
 * goes, which is how a bottom strip ends up underneath the tab bar.
 */
.czs-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Clears the fixed tab bar. */
  padding-bottom: calc(45px + env(safe-area-inset-bottom, 0px));
}


.czs-lens {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

#czs-video {
  width: 100%;
  height: 100%;
  /* cover, not contain: black bars around a viewfinder look broken, and the
     overlay maths works off the visible width either way. */
  object-fit: cover;
  display: block;
}

/* The map strip. Fixed share of the screen, never the star. */
.czs-strip {
  position: relative;
  flex: 0 0 30%;
  min-height: 150px;
  border-top: 2px solid rgba(255, 255, 255, .22);
}
.czs-map { position: absolute; inset: 0; }

/* With no camera the proportions invert: the map becomes the working surface
   and the lens area shrinks to the explanation of why. */
.czs-no-cam .czs-lens { flex: 0 0 auto; height: 200px; }
.czs-no-cam .czs-strip { flex: 1 1 auto; }
.czs-no-cam #czs-video { display: none; }

/* =============================================================== the pins */

.czs-ar { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/*
 * !! 0.8.0: A PIN PER BUILDING, AND ONE ADDRESS AT A TIME.
 *
 * Owner, 2026-09-18: *"make it so that the address pops up only when you
 * hover over the building"*. The pin is a band-coloured dot; its address
 * label is hidden until the pin is hovered (mouse), aimed at (the ring in the
 * middle of the lens) or selected.
 *
 * !! NO CSS TRANSITION ON transform. app.js projects every pin from a view it
 * has already smoothed, once per frame. A transition on top of that was
 * retargeted sixty times a second, lagged behind the video and made pins
 * slide off the buildings they belong to. Only opacity and the label animate.
 *
 * The node is a 44px tap target centred on the dot by the negative margin.
 */
.czs-pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.czs-pin.czs-live { opacity: 1; }
.czs-pin.czs-gone { opacity: 0; pointer-events: none; }

.czs-pin-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  background: #94a3b8;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease;
}
.czs-d-h .czs-pin-dot { background: var(--czs-hot); }
.czs-d-w .czs-pin-dot { background: var(--czs-warm); }
.czs-d-c .czs-pin-dot { background: #94a3b8; }
.czs-d-n .czs-pin-dot { background: #64748b; }

.czs-pin.czs-aim .czs-pin-dot,
.czs-pin.czs-hover .czs-pin-dot { transform: scale(1.3); }

/* Selected: the dot goes the same light blue as the building's glow. */
.czs-pin.czs-sel .czs-pin-dot {
  background: #38bdf8;
  transform: scale(1.35);
  box-shadow: 0 0 0 5px rgba(125, 211, 252, .35), 0 1px 8px rgba(0, 0, 0, .5);
}

/* The address. Hidden until hovered, aimed or selected. */
.czs-pin-lbl {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: max-content;
  max-width: 210px;
  padding: 8px 11px 7px;
  border-radius: 11px;
  text-align: left;
  background: rgba(15, 23, 42, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  border-left: 3px solid #94a3b8;
  opacity: 0;
  transform: translate(-50%, 6px) scale(.94);
  transform-origin: 50% 100%;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.czs-d-h .czs-pin-lbl { border-left-color: var(--czs-hot); }
.czs-d-w .czs-pin-lbl { border-left-color: var(--czs-warm); }
.czs-pin.czs-sel .czs-pin-lbl { border-left-color: #38bdf8; }

.czs-pin.czs-aim .czs-pin-lbl,
.czs-pin.czs-hover .czs-pin-lbl,
.czs-pin.czs-sel .czs-pin-lbl {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.czs-pin.czs-aim, .czs-pin.czs-hover, .czs-pin.czs-sel { z-index: 3; }

@media (hover: hover) {
  .czs-pin:hover .czs-pin-lbl { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
  .czs-pin:hover .czs-pin-dot { transform: scale(1.3); }
  .czs-pin:hover { z-index: 3; }
}

/* Near an edge the label hangs inward instead of being cut off. */
.czs-pin.czs-edge-l .czs-pin-lbl { left: 6px; transform-origin: 0 100%; }
.czs-pin.czs-edge-r .czs-pin-lbl { left: auto; right: 6px; transform-origin: 100% 100%; }
.czs-pin.czs-edge-l .czs-pin-lbl, .czs-pin.czs-edge-r .czs-pin-lbl { transform: translate(0, 6px) scale(.94); }
.czs-pin.czs-edge-l.czs-aim .czs-pin-lbl, .czs-pin.czs-edge-l.czs-hover .czs-pin-lbl, .czs-pin.czs-edge-l.czs-sel .czs-pin-lbl,
.czs-pin.czs-edge-r.czs-aim .czs-pin-lbl, .czs-pin.czs-edge-r.czs-hover .czs-pin-lbl, .czs-pin.czs-edge-r.czs-sel .czs-pin-lbl {
  transform: translate(0, 0) scale(1);
}

.czs-pin-lbl b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  /* Two lines then stop. A 60-character PLUTO address must not grow a label
     into a paragraph sitting over the picture. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.czs-pin-lbl small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, .72);
}
.czs-pin-lbl em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  color: #7dd3fc;
}
.czs-pin.czs-sel .czs-pin-lbl em { display: none; }
/* The air-rights line inside the building's own label (0.9.2: always, for the
   building in focus — there is no separate chip). */
.czs-pin-air { display: none; }
.czs-pin.czs-airin .czs-pin-air {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(125, 211, 252, .3);
  font-size: 12px;
  font-weight: 800;
  color: #e0f2fe;
  white-space: nowrap;
}
.czs-pin-lbl .czs-pin-air b { display: inline; font-size: 9px; font-weight: 800; letter-spacing: .14em; line-height: 1; color: #7dd3fc; overflow: visible; }
.czs-pin-air .czs-lock { width: 11px; height: 11px; flex: none; }
.czs-pin.czs-airx .czs-pin-lbl .czs-pin-air b { color: #fcd34d; }
.czs-pin-lbl i {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 3px;
}
.czs-pin-lbl i.czs-f { background: #0369a1; color: #fff; }
.czs-pin-lbl i.czs-t { background: #b45309; color: #fff; }

/*
 * The aiming ring. On a phone, aiming is hovering: the building under this
 * ring shows its address. It turns light blue while it has one.
 */
.czs-reticle {
  position: absolute;
  left: 50%; top: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease, border-color .2s ease, transform .2s ease;
}
.czs-reticle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
}
.czs-aiming .czs-reticle { opacity: 1; }
.czs-reticle.czs-locked-on { border-color: #7dd3fc; transform: scale(.86); }
.czs-no-cam .czs-reticle { display: none; }

/*
 * !! 0.9.0 — THE SCENE LAYER: film, hover outline, air-rights envelope.
 *
 * One SVG under the pins. app.js builds its structure once and then only
 * rewrites path data, projected every frame from the smoothed view — so
 * nothing in here may carry a transform transition (it would lag the video).
 * Only opacity fades; the scan beam sweeps twice per tap and stops.
 */
.czs-hl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.czs-film, .czs-env, .czs-hov { opacity: 0; transition: opacity .28s ease; }
.czs-film.czs-on, .czs-env.czs-on, .czs-hov.czs-on { opacity: 1; }

/* Hover (aim or mouse): the building outlined, lightly filled. */
.czs-hov {
  fill: rgba(125, 211, 252, .10);
  stroke: rgba(186, 230, 253, .9);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* Tap: the light-blue film. Gradient fill (a markup ATTRIBUTE, not CSS: a
   url(#id) in an external stylesheet resolves against the stylesheet in some
   engines and paints nothing). Fine hologram
   lines and a scan beam clipped to the building, a soft wide glow under a
   crisp edge, and corner brackets that lock on. Two strokes instead of a
   drop-shadow filter: a filter re-rasterises every frame on a phone. */
.czs-film-glow { fill: none; stroke: rgba(56, 189, 248, .30); stroke-width: 9; stroke-linejoin: round; }
.czs-film-edge { fill: none; stroke: #e0f2fe; stroke-width: 1.7; stroke-linejoin: round; }
.czs-film-brk {
  fill: none;
  stroke: #7dd3fc;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}
/* The scan sweeps up the building twice on each tap, then rests out of sight
   above it. Not infinite: like the envelope dashes, a looping SVG animation is
   a paint every frame on the main thread, under a card someone is reading. */
.czs-film-scan { transform: translateY(-40px); }
.czs-film.czs-pulse .czs-film-scan { animation: czs-scan 1.5s cubic-bezier(.45, 0, .55, 1) 2 both; }
@keyframes czs-scan {
  from { transform: translateY(110px); }
  to   { transform: translateY(-40px); }
}
.czs-film.czs-pulse .czs-film-brk { animation: czs-lock .5s cubic-bezier(.2, .9, .3, 1.2) 1; }
@keyframes czs-lock {
  from { transform: scale(1.22); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* Estimated shape (no surveyed footprint): softer, no hard edge, no frame. */
.czs-hl.czs-hl-est path { stroke: none; }
.czs-hl.czs-hl-est path.czs-film-fill { fill: rgba(125, 211, 252, .26); }
.czs-hl.czs-hl-est .czs-film-brk, .czs-hl.czs-hl-est .czs-film-glow { display: none; }

/*
 * The air-rights envelope: the building's own outline extended up into the
 * sky. A DIAGRAM — dashed edge, fading fill, a faint wireframe of corner
 * edges and floor slices — never a solid massing: it is not a surveyed
 * envelope and somebody would price a deal off one that looked like it.
 *
 * !! NO LOOPING ANIMATION ON THE ENVELOPE. 0.9.0 first had "marching ants"
 * (an animated stroke-dashoffset). That is a main-thread PAINT animation:
 * it repainted the whole scene layer every frame and starved the frame loop,
 * measured as a 48px pin jump on the first frame of a turn instead of 10px.
 * The rise when a building comes into focus is the live part; it runs once.
 */
.czs-env-edge {
  fill: none;
  stroke: rgba(125, 211, 252, .95);
  stroke-width: 1.6;
  stroke-dasharray: 7 5;
  stroke-linejoin: round;
}
.czs-env-cap {
  fill: rgba(186, 230, 253, .14);
  stroke: #e0f2fe;
  stroke-width: 1.8;
  stroke-dasharray: 7 5;
  stroke-linejoin: round;
}
.czs-env-ribs { fill: none; stroke: rgba(186, 230, 253, .42); stroke-width: 1; }
.czs-env-glow { fill: none; stroke: rgba(56, 189, 248, .28); stroke-width: 7; stroke-linejoin: round; }
.czs-env.czs-env-x .czs-env-glow { stroke: rgba(251, 191, 36, .22); }
/* Landmarked or in a historic district: amber, never the confident blue. */
.czs-env.czs-env-x .czs-env-edge { stroke: rgba(251, 191, 36, .95); }
.czs-env.czs-env-x .czs-env-cap { stroke: #fde68a; fill: rgba(253, 230, 138, .12); }
.czs-env.czs-env-x .czs-env-ribs { stroke: rgba(253, 230, 138, .4); }

/* (0.9.2: no floating air-rights chip — the building's own label carries the
   line, see .czs-pin-air, so one building has one label and one card.) */

/* With a building tapped, the other pins step back so the film reads, and the
   aiming ring stops labelling a second building over the one you chose. */
.czs-ar.czs-has-sel .czs-pin.czs-live:not(.czs-sel):not(.czs-hover) { opacity: .38; }
.czs-ar.czs-has-sel .czs-pin.czs-aim:not(.czs-sel):not(.czs-hover) .czs-pin-lbl { opacity: 0; transform: translate(-50%, 6px) scale(.94); }

.czs-ar-hint {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  width: min(300px, 80%);
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.czs-ar-hint[hidden] { display: none; }
.czs-ar-hint small { font-weight: 500; opacity: .75; font-size: 12.5px; }

.czs-nocam {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  padding: 22px;
  text-align: center;
  color: #fff;
}
.czs-nocam b { display: block; font-size: 16px; margin-bottom: 6px; }
.czs-nocam p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* ============================================================== controls */

/*
 * !! A CAMERA ICON, BECAUSE IT TAKES A PICTURE. Owner, 2026-09-17: *"the big
 * circle for camera should be camera icon so people know what its for."* The
 * old control was a filled circle glyph, which reads as a record button, a
 * bullet, or nothing at all.
 */
.czs-shutter {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  padding: 0;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, .9);
  background: rgba(13, 26, 64, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}
.czs-shutter svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.czs-shutter:active { transform: translateX(-50%) scale(.93); }

.czs-flash {
  position: absolute; inset: 0;
  background: #fff;
  z-index: 4;
  pointer-events: none;
}
.czs-flash[hidden] { display: none; }

.czs-find-open {
  position: absolute;
  left: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  font: inherit;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  background: rgba(15, 23, 42, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: left;
  z-index: 3;
  cursor: pointer;
}
.czs-find-open svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.czs-upsell {
  position: absolute;
  left: 12px; right: 12px;
  /* Top, under the search bar, where nothing else lives for this user — it
     used to sit above the shutter, over the buildings. */
  top: calc(64px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(13, 26, 64, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 8px 8px 8px 13px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .86);
  z-index: 3;
  animation: czs-rise .3s cubic-bezier(.2, .8, .2, 1) both;
  transition: opacity .25s ease;
}
.czs-upsell[hidden] { display: none; }
.czs-upsell.czs-leaving { opacity: 0; }
.czs-upsell .czs-lock { width: 15px; height: 15px; stroke: #7dd3fc; flex: none; }
.czs-upsell span { flex: 1; }
.czs-upsell button { border: 0; background: none; color: rgba(255, 255, 255, .6); font-size: 19px; line-height: 1; padding: 0 4px; cursor: pointer; }
.czs-upsell a { color: #082f49; background: #7dd3fc; border-radius: 999px; padding: 5px 10px; font-weight: 800; white-space: nowrap; text-decoration: none; }

/*
 * Recentre. Hidden while the map is following, shown the moment the user takes
 * control — which is the ONLY way following comes back on. See releaseFollow()
 * in app.js for why nothing infers it.
 */
.czs-recentre {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--czs-blue);
  box-shadow: 0 3px 12px rgba(13, 26, 64, .4);
  z-index: 500;
  cursor: pointer;
}
.czs-recentre[hidden] { display: none; }

/* ================================================================ search */

.czs-find {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 800;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 16px;
  overflow-y: auto;
}
.czs-find[hidden] { display: none; }

#czs-find-form { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
#czs-find-q {
  flex: 1;
  padding: 13px 15px;
  border: 1px solid var(--czs-line);
  border-radius: 12px;
  /* 16px stops iOS zooming the viewport when the field takes focus. */
  font: inherit; font-size: 16px;
  background: #f8fafc;
}
#czs-find-q:focus { outline: 2px solid var(--czs-blue); outline-offset: 1px; }
#czs-find-close {
  border: 0; background: none;
  font-size: 30px; line-height: 1; color: var(--czs-mut);
  padding: 0 6px;
}

/* ================================================================= start */

.czs-start {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: linear-gradient(160deg, #0d1a40 0%, #14295f 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.czs-start[hidden] { display: none; }
.czs-start-in { max-width: 380px; text-align: center; }
.czs-start h1 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 14px;
}
.czs-start p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .76);
  margin: 0 0 24px;
}
.czs-start .czs-fine { color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------------ tabs */

.czs-tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--czs-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 600;
}
.czs-tabs a {
  flex: 1;
  text-align: center;
  padding: 13px 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--czs-mut);
  text-decoration: none;
}
.czs-tabs a.on { color: var(--czs-blue); }

/* ----------------------------------------------------------------- sheet */

.czs-sheet, .czs-panel {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(45px + env(safe-area-inset-bottom, 0px));
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(13, 26, 64, .26);
  padding: 22px 18px 22px;
  z-index: 700;
  -webkit-overflow-scrolling: touch;
}
.czs-panel[hidden] { display: none; }
.czs-panel:not([hidden]) { animation: czs-rise .26s cubic-bezier(.2, .8, .2, 1) both; }

/*
 * !! SHEETS SLIDE; THEY NO LONGER BLINK. A sheet is always in the DOM and
 * .czs-open slides it up. Toggling `hidden` could only make it appear and
 * vanish between two frames, which was one of the jumps the owner felt.
 * visibility is delayed on the way out so the slide is seen before it hides.
 * The card is capped at 58% of the screen so the building lit up behind it
 * stays in view above it.
 */
.czs-sheet {
  transform: translate3d(0, calc(100% + 70px), 0);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .34s;
}
.czs-sheet.czs-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.czs-sheet.czs-dragging { transition: none; }

.czs-grab {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  touch-action: none;
}
.czs-grab span { width: 40px; height: 5px; border-radius: 999px; background: #d4d8e0; }

@keyframes czs-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes czs-fade { from { opacity: 0; } to { opacity: 1; } }

.czs-sheet-close, .czs-panel-head button {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: 0;
  font-size: 26px; line-height: 1;
  color: var(--czs-mut);
}

.czs-sheet h2, .czs-panel-head h2 {
  margin: 0 0 3px;
  font-size: 18px;
  letter-spacing: -.01em;
  padding-right: 34px;
}
.czs-sub { margin: 0 0 12px; font-size: 13px; color: var(--czs-mut); }

.czs-band {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.czs-band-h { background: var(--czs-hot); }
.czs-band-w { background: var(--czs-warm); }
.czs-band-c { background: #94a3b8; }

.czs-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0 0 14px; font-size: 14px; }
.czs-facts dt { color: var(--czs-mut); }
.czs-facts dd { margin: 0; font-weight: 600; text-align: right; }

.czs-mat {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.czs-mat b { display: block; font-size: 14px; color: #9a3412; }
/* The estimate disclaimer is not fine print to be skipped — ACRIS publishes no
   maturity dates, and a date shown without this line is a fabricated fact. */
.czs-mat span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: #9a6b3f; }

.czs-locked {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 14px;
  text-align: center;
}
.czs-locked b { display: block; margin-bottom: 5px; }
.czs-locked p { margin: 0 0 11px; font-size: 13px; line-height: 1.55; color: var(--czs-mut); }

.czs-acts { display: flex; gap: 10px; align-items: center; }
.czs-save {
  flex: 1;
  background: var(--czs-blue);
  color: #fff;
  border: 0;
  border-radius: 11px;
  padding: 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}
.czs-save:disabled { background: #16a34a; }
.czs-alt { font-size: 14px; font-weight: 600; color: var(--czs-blue); text-decoration: none; padding: 0 6px; }

.czs-cta {
  display: inline-block;
  background: var(--czs-blue);
  color: #fff !important;
  border-radius: 10px;
  padding: 12px 22px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}

.czs-load { color: var(--czs-mut); font-size: 14px; padding: 12px 0; }

/* ----------------------------------------------------------------- saved */

.czs-panel-head { position: relative; margin-bottom: 10px; }
.czs-row {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--czs-line);
  text-decoration: none;
  color: var(--czs-ink);
}
.czs-row b { display: block; font-size: 15px; }
.czs-row span { display: block; font-size: 12.5px; color: var(--czs-mut); margin-top: 2px; }

/* --------------------------------------------------------------- install */

/*
 * The install panel. There is no banner any more — the old one floated over the
 * tab bar uninvited and was the first thing the owner asked about. This only
 * appears when somebody taps the Install tab.
 *
 * Its content is written per browser by renderInstall(), because the four real
 * answers (Chromium prompt / Chrome on iOS / Safari on iOS / neither) are
 * genuinely different gestures in genuinely different places.
 */
.czs-note {
  background: #f8fafc;
  border-left: 3px solid var(--czs-blue);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 14px;
}

.czs-steps { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 9px; }
.czs-steps li { font-size: 14.5px; line-height: 1.5; }

.czs-big { width: 100%; margin: 4px 0 0; }

.czs-ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #047857;
}

.czs-fine { font-size: 12.5px !important; margin-top: 16px !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ----------------------------------------------------------------- camera */

/*
 * The photo just taken, shown at the top of the building card and of the
 * "which building?" picker.
 *
 * Its whole job is to answer the question the first build left hanging: did
 * pressing the shutter do anything? Seeing your own photograph above the
 * address is the proof, and it costs one <img> off an object URL.
 */
.czs-shot {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 14px;
  background: #e2e8f0;
}

/* The candidate picker reuses the sheet, but its rows are buttons. */
.czs-pick-one, button.czs-row {
  display: block; width: 100%;
  text-align: left;
  background: none; border: 0;
  border-bottom: 1px solid var(--czs-line);
  padding: 13px 0;
  font: inherit;
  color: var(--czs-ink);
}

.czs-panel-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0;
  font-size: 26px; line-height: 1; color: var(--czs-mut);
}

/* ------------------------------------------------------------- phase C */

.czs-owner { margin-top: 14px; }

.czs-ownerbox {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.czs-ownerbox b { font-size: 15px; }
.czs-ownerbox a { color: #047857; font-weight: 600; text-decoration: none; font-size: 15px; }
.czs-ownerbox span { font-size: 12.5px; color: var(--czs-mut); }

.czs-sessbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 0 12px; margin-bottom: 10px;
  border-bottom: 1px solid var(--czs-line);
}
.czs-sessbar button {
  background: var(--czs-navy); color: #fff;
  border: 0; border-radius: 9px; padding: 10px 14px;
  font: inherit; font-size: 13.5px; font-weight: 600;
}
.czs-keep { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--czs-mut); }
.czs-keep input { width: 17px; height: 17px; }

.czs-fine { font-size: 12px; line-height: 1.55; color: var(--czs-mut); margin: 8px 0 0; }

/* ============================================ the air-rights on/off switch */

/* (The 0.6-0.8 per-parcel ghost BOXES are gone; the envelope is in the
   scene layer near the top of this file.) */
.czs-ghosts {
  position: absolute;
  right: 12px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #082f49;
  background: rgba(125, 211, 252, .92);
  z-index: 3;
  cursor: pointer;
}
.czs-ghosts[hidden] { display: none; }
.czs-ghosts.off { background: rgba(15, 23, 42, .62); color: rgba(255, 255, 255, .75); }
.czs-ghosts svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round;
}

/* ================================================= card: the data blocks */

.czs-blk { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--czs-line); }
.czs-blk h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--czs-mut);
}
.czs-blk .czs-alt { display: inline-block; padding: 0; margin-top: 4px; }

/* The indicative figure. Deliberately NOT a big confident hero number — the
   basis sits immediately under it in the same block, at a size you cannot miss,
   because the figure is meaningless without it. */
.czs-val {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 10px;
}
.czs-val b { display: block; font-size: 21px; letter-spacing: -.02em; color: var(--czs-navy); }
.czs-val span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--czs-mut); }

.czs-comps { display: grid; gap: 1px; background: var(--czs-line); border-radius: 8px; overflow: hidden; margin: 10px 0; }
.czs-comp { background: #fff; padding: 9px 11px; }
.czs-comp b { display: block; font-size: 13px; font-weight: 600; }
.czs-comp span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--czs-mut); font-variant-numeric: tabular-nums; }

.czs-warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 9px;
  padding: 10px 12px;
  margin: 10px 0 0;
}
.czs-warn b { display: block; font-size: 13px; color: #92400e; }
.czs-warn span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: #a16207; }

.czs-facts dd small { font-weight: 400; color: var(--czs-mut); }


/* ============================================================== band key */

/*
 * What the colours mean. The map legend went with the map in 0.5.0, which left
 * a first-time user looking at red, amber and grey tags with nothing to decode
 * them by. Shown only to members who actually receive bands.
 */
.czs-key {
  position: absolute;
  left: 12px;
  /* !! NOT at the bottom. It sat at bottom:26px and ran underneath the shutter,
     which is centred on the same line — visible in the first headless
     screenshot. Under the search bar there is nothing to collide with. */
  top: calc(64px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 7px 8px 7px 13px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  z-index: 3;
}
.czs-key[hidden] { display: none; }
.czs-key span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.czs-key i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.czs-key i.h { background: var(--czs-hot); }
.czs-key i.w { background: var(--czs-warm); }
.czs-key button {
  border: 0; background: none; color: rgba(255, 255, 255, .6);
  font-size: 19px; line-height: 1; padding: 0 6px; cursor: pointer;
}

/* Honour the system setting. An AR overlay that slides is exactly the kind of
   motion a person with vestibular sensitivity turns this on to avoid. */
@media (prefers-reduced-motion: reduce) {
  .czs-pin, .czs-pin-lbl, .czs-pin-dot, .czs-ghost, .czs-hl, .czs-sheet { transition: none !important; }
  .czs-film, .czs-env, .czs-hov { transition: none !important; }
  .czs-film-scan, .czs-film.czs-pulse .czs-film-brk { animation: none !important; }
}

/* ================================================================ 0.8.0 */

/*
 * !! THE TOAST HAD NO STYLE AT ALL until 0.8.0. It is a div in the body's
 * flex column, so every message was laid out IN the column — the lens and the
 * map strip both shrank to make room for it and jumped back when it went.
 * Fixed and centred over the lens, it can no longer move anything.
 */
.czs-toast {
  position: fixed;
  left: 50%;
  top: calc(118px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  z-index: 950;
  pointer-events: none;
  animation: czs-toast-in .22s cubic-bezier(.2, .8, .2, 1) both;
}
.czs-toast[hidden] { display: none; }
@keyframes czs-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Start screen fades out rather than cutting to the lens. */
.czs-start { transition: opacity .3s ease; }
.czs-start.czs-leaving { opacity: 0; pointer-events: none; }
.czs-start a { color: #7dd3fc; font-weight: 700; }

/* Search and panels arrive instead of appearing. */
.czs-find:not([hidden]) { animation: czs-fade .18s ease both; }

/* The card: a shimmering outline while the facts are on their way. */
.czs-skel { display: grid; gap: 10px; padding: 8px 0 4px; }
.czs-skel i {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 45%, #eef1f5 90%);
  background-size: 200% 100%;
  animation: czs-shimmer 1.1s linear infinite;
}
.czs-skel i.w { width: 62%; }
@keyframes czs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.czs-fadein { animation: czs-fade .24s ease both; }

.czs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.czs-chips span {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px 10px;
}

/* The basics, free to everyone: a grid of tiles you can read at a glance. */
.czs-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}
.czs-specs div {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 10px 10px 9px;
}
.czs-specs b { display: block; font-size: 15.5px; letter-spacing: -.01em; color: var(--czs-navy); font-variant-numeric: tabular-nums; }
.czs-specs span { display: block; margin-top: 2px; font-size: 11px; color: var(--czs-mut); }

/*
 * Locked: the label in clear, the value blurred, a lock beside it. The blurred
 * text is a placeholder app.js writes — the server sends nothing behind it.
 */
.czs-lock {
  width: 14px; height: 14px;
  flex: none;
  fill: none;
  stroke: var(--czs-blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -2px;
}
.czs-blur {
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
  color: var(--czs-ink);
}
.czs-lk { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.czs-blk-lk h3 { display: flex; align-items: center; gap: 6px; }
.czs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.czs-bandlk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fee2e2;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}
.czs-bandlk .czs-blur { color: #9f1239; filter: blur(4px); }

.czs-unlock {
  margin: 18px 0 14px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(160deg, #0d1a40 0%, #1d3a86 100%);
  color: #fff;
}
.czs-unlock-ic {
  width: 38px; height: 38px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(125, 211, 252, .18);
  display: flex; align-items: center; justify-content: center;
}
.czs-unlock-ic .czs-lock { width: 19px; height: 19px; stroke: #7dd3fc; }
.czs-unlock b { display: block; font-size: 16.5px; margin-bottom: 6px; }
.czs-unlock p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.czs-unlock .czs-cta { background: #7dd3fc; color: #082f49 !important; }
.czs-unlock .czs-fine { color: rgba(255, 255, 255, .7); margin: 12px 0 0 !important; }
.czs-unlock .czs-fine a { color: #fff; font-weight: 700; }

a.czs-save { display: block; text-align: center; text-decoration: none; }
.czs-save-out { background: var(--czs-navy); }

/* While a card is up, the aiming ring steps back: the tapped building is the subject. */
.czs-carding .czs-reticle { opacity: .35; }

/*
 * !! THE NO-CAMERA LAYOUT USED TO COLLAPSE TO ZERO HEIGHT. Everything in the
 * lens is absolutely positioned, so `flex: 0 0 auto` gave it no height at all:
 * the address search and the photo button sat underneath the map, and on a
 * desktop or with the camera refused there was no way to look anything up.
 * Found by a headless desktop run in 0.8.1 (lens clientHeight = 0). It now
 * keeps a 200px band: search on top, the reason beneath, the picker to the
 * right.
 */
.czs-no-cam .czs-lens { background: linear-gradient(160deg, #0d1a40 0%, #14295f 100%); }
.czs-no-cam .czs-nocam {
  top: 72px;
  left: 16px;
  right: 96px;
  transform: none;
  padding: 0;
  text-align: left;
}
.czs-no-cam .czs-nocam b { font-size: 14.5px; margin-bottom: 3px; }
.czs-no-cam .czs-nocam p { font-size: 12.5px; }
.czs-no-cam .czs-shutter {
  left: auto;
  right: 16px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  transform: none;
}
.czs-no-cam .czs-shutter:active { transform: scale(.93); }
.czs-no-cam .czs-upsell, .czs-no-cam .czs-key, .czs-no-cam .czs-ghosts { display: none; }

/*
 * A wide screen gets the card as a side panel, so the map — where the
 * building lights up when there is no camera — stays in view beside it.
 */
@media (min-width: 760px) {
  .czs-sheet, .czs-panel {
    left: auto;
    right: 16px;
    width: 420px;
    bottom: calc(57px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100% - 150px);
    border-radius: 18px;
  }
  /* The card now lives on the right, so Recentre moves out from under it. */
  .czs-recentre { right: auto; left: 10px; }
}

/* Visitor: the signal badge is one free sign-up away. */
.czs-bandlk b { font-size: 11px; font-weight: 800; color: var(--czs-blue); }

/* ======================================= 0.9.2: air rights on the card */
.czs-airrow { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.czs-airdia { width: 56px; height: 74px; flex: none; }
.czs-airbig { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--czs-ink, #0f172a); }
.czs-airrow .czs-fine { margin-top: 2px; }
.czs-airblk .czs-warn { margin-top: 4px; }

/* ======================================== 0.10.0: the rest of Crezly on the card */

/* Underwrite at the indicative value. */
.czs-uw {
  display: block;
  margin: 10px 0 0;
  padding: 11px 14px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  text-decoration: none;
}
.czs-uw b { display: block; font-size: 14px; color: var(--czs-blue); }
.czs-uw span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--czs-mut); }

.czs-cta-sm { padding: 10px 16px; font-size: 14px; margin-top: 2px; }

/* Owner contact exists — Gold. */
.czs-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  text-decoration: none;
}
.czs-contact .czs-lock { flex: none; }
.czs-contact b { display: block; font-size: 13.5px; color: #92400e; }
.czs-contact small { display: block; margin-top: 1px; font-size: 11.5px; color: #a16207; }

/* Owners walk past their own buildings too. */
.czs-sell {
  display: block;
  margin: 16px 0 4px;
  padding: 12px 14px;
  border-top: 1px solid var(--czs-line);
  text-decoration: none;
  text-align: center;
}
.czs-sell b { display: block; font-size: 14px; color: var(--czs-navy); }
.czs-sell span { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--czs-blue); }

/* ============================================ 0.11.0: saved badge, easy close */

/* Saved count, always on screen, top left. The search pill moves over for it. */
.czs-savedbadge {
  position: absolute;
  left: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 42px;
  min-width: 58px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 26, 64, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  cursor: pointer;
}
.czs-savedbadge svg { width: 17px; height: 17px; fill: #7dd3fc; flex: none; }
.czs-savedbadge.czs-bump { animation: czs-bump .36s cubic-bezier(.2, .8, .2, 1); }
@keyframes czs-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.czs-find-open { left: 80px !important; }

/* !! THE X STAYS PUT. The card scrolls as one box, so an absolutely placed X
   scrolled away with the top of the card. Sticky keeps it in reach at any
   scroll depth; the negative bottom margin stops it pushing the title down. */
.czs-sheet .czs-sheet-close {
  position: sticky;
  top: -10px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -12px -6px -36px auto;
  border-radius: 999px;
  background: rgba(241, 245, 249, .96);
  box-shadow: 0 1px 4px rgba(13, 26, 64, .15);
  color: var(--czs-ink);
  font-size: 22px;
}
.czs-sheet h2 { padding-right: 40px; }

/* Saved list rows: open the card, or remove. */
.czs-srow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  border-bottom: 1px solid var(--czs-line);
  transition: opacity .2s, transform .2s;
}
.czs-srow.czs-going { opacity: 0; transform: translateX(30px); }
.czs-srow-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 12px 0;
  font: inherit;
  cursor: pointer;
}
.czs-srow-open b { display: block; font-size: 15px; color: var(--czs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czs-srow-open span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--czs-mut); }
.czs-srow-x {
  align-self: center;
  flex: none;
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
  border-radius: 9px;
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.czs-save.is-saved { background: #16a34a; }

/* ======================= 0.11.0: property-map data (zoning, FAR, dimensions, owner) */
.czs-pluto { margin: 12px 0 4px; }
.czs-pluto dd small { color: var(--czs-mut); font-weight: 500; }
.czs-skel-i {
  display: inline-block; width: 70px; height: 11px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, #eef1f5 0%, #e2e7ee 50%, #eef1f5 100%);
}
.czs-zonelink { color: var(--czs-blue); text-decoration: none; font-weight: 700; }
.czs-maplink {
  display: inline-block;
  margin: 2px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--czs-blue);
  text-decoration: none;
}
.czs-ownerx { margin-top: 4px; }
.czs-ownerx h4 {
  margin: 14px 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--czs-mut);
}
.czs-oxsum { background: #f8fafc; border-radius: 10px; padding: 10px 12px; }
.czs-oxsum b { display: block; font-size: 14px; color: var(--czs-navy); }
.czs-oxsum span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--czs-mut); }
button.czs-comp { display: block; width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; }
.czs-ownerbox span b { font-size: 13px; }
.czs-tel { color: #047857; font-weight: 800; text-decoration: none; }
.czs-lk-in { display: inline-flex !important; justify-content: flex-start !important; margin-top: 2px; }
.czs-ownerx .czs-contact { margin: 8px 0 0; }