/* === agent e3: site plans - Site card (map vs site plan) and the plan viewer === */

/* ---- Site card: two labeled halves, Map (location) and Site plan */
.sp { display: grid; gap: 10px; font-size: var(--fs-sm); container-type: inline-size; min-width: 0; }
.sp-site { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.sp-site a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-two { display: grid; gap: 10px; }
@container (min-width: 520px) { .sp-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.sp-sec { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px rgb(16 22 43 / .06); min-width: 0; }
.sp-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); min-height: 24px; }
.sp-h .ico { color: var(--icon); }
.sp-plan .sp-h .ico { color: #0284C7; }
.sp-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgb(2 132 199 / .12); color: #0369A1; font-size: 11px; letter-spacing: 0; }
.sp-open { height: 26px; padding: 0 12px; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.sp-addr { color: var(--ink); overflow-wrap: anywhere; }
.sp-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sp-links a { display: inline-flex; align-items: center; gap: 3px; }
.sp-note, .sp-none { margin: 0; color: var(--muted); }
.sp-none.bad { color: var(--bad); }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sp-file { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; margin: 0 -6px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit; min-width: 0; box-sizing: content-box; }
.sp-file:hover { background: rgb(2 132 199 / .07); }
.sp-file:active { transform: scale(.985); transition: transform .1s; }
.sp-file:focus-visible { outline: 2px solid #0284C7; outline-offset: 0; }
.sp-fn { display: grid; min-width: 0; }
.sp-fn b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-fn small { color: var(--muted); font-size: 11.5px; }
.sp-badge { flex: none; display: inline-grid; place-items: center; width: 34px; height: 26px; border-radius: 7px; font-size: 10px; font-weight: 700; letter-spacing: .04em; background: rgb(16 22 43 / .06); color: var(--muted); }
.sp-badge.pdf { color: #B42318; background: rgb(180 35 24 / .08); }
.sp-badge.img { color: #0369A1; background: rgb(2 132 199 / .1); }
.sp-add { justify-self: start; height: 30px; margin-top: 2px; }
.sp-addmore { justify-self: start; padding: 0; }
.c3-siteplans { display: grid; gap: 12px; margin-top: 12px; }
/* compact (customer page): two labeled lines per site */
.sp-compact { gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px rgb(16 22 43 / .06); }
.sp-compact .sp-two { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr) !important; }
.sp-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; }
.sp-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sp-plan .sp-k .ico { color: #0284C7; }
.sp-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sp-v.bad { color: var(--bad); }
.sp-act { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: var(--fs-sm); }
.sp-row .sp-add { padding: 0; }
.sp-compact .sp-open { height: 24px; padding: 0 12px; }
@container (max-width: 300px) { .sp-row { grid-template-columns: minmax(0, 1fr) auto; } .sp-row .sp-v { grid-column: 1 / -1; grid-row: 2; white-space: normal; } }

/* ---- Plan viewer: full-screen glass */
.pv-root { position: fixed; inset: 0; z-index: var(--z-modal); --mod: #0284C7; --mod-rgb: 2 132 199;
  --pin-label: var(--sg-blue, #243D90); --pin-finding: #D97706; --pin-photo: #0284C7; --pin-note: #64748B; }
.pv-shell { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); transform-origin: 50% 40%;
  background: #e8ecf5; }   /* solid: the drawing is the content, and a full-screen blur costs every frame */
.pv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); position: relative; z-index: 3;
  background: rgb(255 255 255 / .7); box-shadow: 0 1px 0 rgb(16 22 43 / .08); }
.pv-title { flex: 1 1 220px; min-width: 0; display: grid; }
.pv-title h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-eyebrow { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-eyebrow .ico { color: var(--mod); flex: none; }
.pv-break, .pv-pg-n { display: none; }
.pv-pick { font-weight: 650; font-size: 15px; border: 0; background: none; padding: 0 20px 0 0; min-height: 26px; width: auto; max-width: 100%; text-overflow: ellipsis; }
.pv-ib { width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; border: 0; padding: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px rgb(16 22 43 / .1); }
.pv-ib:hover { background: #fff; }
.pv-ib:active, .pv-tb:active, .pv-pin:active .pv-pin-h { transform: scale(.94); transition: transform .1s; }
.pv-ib:disabled { opacity: .4; cursor: default; }
.pv-ib:focus-visible, .pv-tb:focus-visible { outline: 2px solid var(--mod); outline-offset: 1px; }
.pv-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(16 22 43 / .1); }
.pv-seg .pv-ib { width: 28px; height: 28px; background: none; box-shadow: none; }
.pv-seg .pv-ib:hover, .pv-tb:hover { background: rgb(16 22 43 / .06); }
.pv-zoom { min-width: 46px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pv-tb { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.pv-pages { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pv-top .btn { border-radius: 999px; height: 32px; text-decoration: none; }
.pv-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgb(16 22 43 / .08); font-size: 11px; }
.pv-add.btn-primary { box-shadow: 0 0 0 3px rgb(var(--mod-rgb) / .22); }

.pv-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.pv-body.has-rail { grid-template-columns: auto minmax(0, 1fr); }
.pv-body.panel-open { grid-template-columns: minmax(0, 1fr) 340px; }
.pv-body.has-rail.panel-open { grid-template-columns: auto minmax(0, 1fr) 340px; }
.pv-rail { width: 128px; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; box-shadow: 1px 0 0 rgb(16 22 43 / .06); }
.pv-thumb { display: grid; gap: 4px; justify-items: center; padding: 4px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 11.5px; }
.pv-thumb canvas { width: 100%; height: auto; aspect-ratio: 11 / 8.5; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgb(16 22 43 / .18); }
.pv-thumb span { display: inline-flex; align-items: center; gap: 3px; }
.pv-thumb.on { background: rgb(var(--mod-rgb) / .12); color: var(--ink); font-weight: 600; }
.pv-thumb.on canvas { box-shadow: 0 0 0 2px var(--mod), 0 1px 3px rgb(16 22 43 / .18); }

.pv-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 90% at 50% 0%, #e9edf5, #d7dce7); }
.pv-stage:active { cursor: grabbing; }
.pv-stage.placing, .pv-stage.placing:active { cursor: crosshair; }
.pv-stage:focus-visible { box-shadow: inset 0 0 0 3px rgb(var(--mod-rgb) / .45); }
.pv-sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .14), 0 14px 44px rgb(16 22 43 / .2); }
.pv-sheet:not([data-ready]) { opacity: 0; }
.pv-sheet[data-ready] { animation: pv-fade .2s ease-out; }
.pv-base, .pv-img { display: block; width: 100%; height: 100%; pointer-events: none; }
.pv-detail { position: absolute; pointer-events: none; }
.pv-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* pins: a drop whose tip sits on the spot; they stay the same size at any zoom */
.pv-pin { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -38px 0 0 -15px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; --pin: var(--pin-note); }
.pv-pin.k-label { --pin: var(--pin-label); } .pv-pin.k-finding { --pin: var(--pin-finding); } .pv-pin.k-photo { --pin: var(--pin-photo); }
.pv-pin-h { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; isolation: isolate; transform-origin: 50% 128%; transition: transform .18s cubic-bezier(.2, .9, .3, 1.2); }
.pv-pin-h::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin);
  box-shadow: 0 3px 8px rgb(16 22 43 / .35), inset 0 0 0 2px rgb(255 255 255 / .92); }
.pv-pin-n { position: absolute; right: -9px; top: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; color: var(--ink); font-size: 10.5px; font-weight: 700; box-shadow: 0 1px 3px rgb(16 22 43 / .3); }
.pv-pin:hover .pv-pin-h, .pv-pin:focus-visible .pv-pin-h { transform: scale(1.08); }
.pv-pin.on .pv-pin-h { transform: scale(1.2); }
.pv-pin.on .pv-pin-h::before { box-shadow: 0 0 0 3px var(--sg-gold, #FCB537), 0 4px 12px rgb(16 22 43 / .4), inset 0 0 0 2px #fff; }
.pv-pin:focus-visible { outline: none; }
.pv-pin.movable { cursor: move; }
.pv-pin.dragging .pv-pin-h { transform: scale(1.28) translateY(-4px); }
.pv-pin.draft { pointer-events: none; }
.pv-pin.draft .pv-pin-h::before { box-shadow: 0 0 0 0 rgb(var(--mod-rgb) / .5), inset 0 0 0 2px #fff; animation: pv-ping 1.4s ease-out infinite; }

.pv-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; color: var(--muted); padding: 24px; }
.pv-state b { color: var(--ink); font-size: 15px; }
.pv-state.bad .ico { color: var(--bad); }
.pv-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgb(var(--mod-rgb) / .2); border-top-color: var(--mod); animation: pv-spin .8s linear infinite; }
.pv-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); width: max-content;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; background: rgb(255 255 255 / .9); box-shadow: 0 4px 18px rgb(16 22 43 / .18), inset 0 0 0 1px rgb(255 255 255 / .9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: pv-hint .22s cubic-bezier(.2, .9, .3, 1); }
.pv-hint .ico { color: var(--mod); flex: none; }
.pv-undo { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 8px 10px 8px 16px; border-radius: 999px;
  background: rgb(16 22 43 / .88); color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgb(16 22 43 / .3); animation: pv-rise .22s cubic-bezier(.2, .9, .3, 1); }
.pv-undo .link { color: var(--sg-gold, #FCB537); font-weight: 600; }

/* side panel: pins list, the selected pin, the pin form */
.pv-panel { display: none; flex-direction: column; min-height: 0; background: rgb(255 255 255 / .74); box-shadow: -1px 0 0 rgb(16 22 43 / .07); }
.panel-open .pv-panel { display: flex; }
.pv-panel-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 14px 6px; }
.pv-panel-h b { font-size: 15px; letter-spacing: -.01em; }
.pv-panel-x { display: none; }
.pv-panel-b { overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pv-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.pv-row:hover { background: rgb(16 22 43 / .05); }
.pv-row.on { background: rgb(var(--mod-rgb) / .12); }
.pv-row-t { display: grid; min-width: 0; }
.pv-row-t b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-row-t small { color: var(--muted); font-size: 11.5px; }
.pv-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: var(--pin-note); }
.pv-dot.k-label { background: var(--pin-label); } .pv-dot.k-finding { background: var(--pin-finding); } .pv-dot.k-photo { background: var(--pin-photo); }
.pv-empty { display: grid; gap: 4px; justify-items: center; text-align: center; color: var(--muted); padding: 18px 8px; font-size: 13px; }
.pv-empty b { color: var(--ink); }
.pv-other { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pv-chip { height: 24px; padding: 0 10px; border-radius: 999px; border: 0; background: rgb(16 22 43 / .06); font: inherit; font-size: 12px; cursor: pointer; }
.pv-more { justify-self: start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.pv-removed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.pv-removed li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 10px; background: rgb(16 22 43 / .04); }
.pv-removed span { display: grid; min-width: 0; } .pv-removed b { text-decoration: line-through; color: var(--muted); font-weight: 600; } .pv-removed small { color: var(--muted); }
.pv-foot { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.pv-msg.bad { color: var(--bad); font-size: 13px; }

.pv-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(16 22 43 / .06), 0 6px 20px rgb(16 22 43 / .08); animation: pv-drop .2s cubic-bezier(.2, .9, .3, 1); }
.pv-card-h { display: flex; align-items: center; gap: 8px; }
.pv-card-h .pv-ib { width: 26px; height: 26px; }
.pv-kind { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pv-card h3 { margin: 0; font-size: 16px; letter-spacing: -.012em; }
.pv-text { margin: 0; white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; }
.pv-link { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 12px; background: rgb(var(--mod-rgb) / .08); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pv-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pv-link:hover { background: rgb(var(--mod-rgb) / .14); }
.pv-link img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.pv-by { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.pv-by .ico { vertical-align: -2px; }
.pv-card-a { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-card-a .btn, .pv-form-a .btn { height: 30px; border-radius: 999px; }
.pv-hist { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 12.5px; }
.pv-hist small { display: block; color: var(--muted); }

.pv-form { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(16 22 43 / .06), 0 6px 20px rgb(16 22 43 / .08); animation: pv-drop .2s cubic-bezier(.2, .9, .3, 1); }
.pv-form-h { display: grid; }
.pv-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 12px; background: rgb(16 22 43 / .06); }
.pv-kinds button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; padding: 0 4px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted); white-space: nowrap; }
.pv-kinds button[aria-checked=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(16 22 43 / .14); }
.pv-kinds button[aria-checked=true] .ico { color: var(--pin-note); }
.pv-kinds button.k-label[aria-checked=true] .ico { color: var(--pin-label); } .pv-kinds button.k-finding[aria-checked=true] .ico { color: var(--pin-finding); } .pv-kinds button.k-photo[aria-checked=true] .ico { color: var(--pin-photo); }
.pv-f { display: grid; gap: 4px; font-size: 12.5px; }
.pv-f > span { font-weight: 600; color: var(--muted); }
.pv-f input, .pv-f textarea, .pv-f select { border-radius: 10px; }
.pv-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 160px; overflow-y: auto; }
.pv-photos button { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: rgb(16 22 43 / .06); box-shadow: inset 0 0 0 1px rgb(16 22 43 / .08); }
.pv-photos button[aria-checked=true] { box-shadow: 0 0 0 3px var(--mod); }
.pv-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-form-a { display: flex; justify-content: flex-end; gap: 6px; }

.pv-photo { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: rgb(10 14 28 / .72); animation: pv-fade .16s ease-out; }
.pv-photo figure { margin: 0; display: grid; gap: 10px; max-width: min(1100px, 100%); max-height: 100%; }
.pv-photo img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 12px; justify-self: center; background: #fff; }
.pv-photo figcaption { display: flex; gap: 8px; align-items: center; color: #fff; font-size: 13px; }
.pv-photo .btn { border-radius: 999px; height: 32px; text-decoration: none; }

@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-spin { to { transform: rotate(360deg); } }
@keyframes pv-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pv-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pv-ping { 0% { box-shadow: 0 0 0 0 rgb(var(--mod-rgb) / .55), inset 0 0 0 2px #fff; } 100% { box-shadow: 0 0 0 14px rgb(var(--mod-rgb) / 0), inset 0 0 0 2px #fff; } }
@keyframes pv-hint { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- phone: two-row bar, no rail, pins in a bottom sheet */
@media (max-width: 760px) {
  .pv-top { gap: 6px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
  .pv-close { order: 1; } .pv-title { order: 2; flex: 1 1 0; } .pv-pinsbtn { order: 3; } .pv-break { display: block; order: 4; flex-basis: 100%; height: 0; }
  .pv-top > .grow { display: none; }
  .pv-pages .pv-pg-w { display: none; } .pv-pages .pv-pg-n { display: inline; }
  .pv-top .btn span:not(.pv-n) { display: none; }
  .pv-top .btn { padding: 0 10px; }
  .pv-wide, .pv-rail { display: none !important; }
  .pv-pages { order: 5; } .pv-seg { order: 6; } .pv-add { order: 7; } .pv-orig { order: 8; margin-left: auto; }
  .pv-body, .pv-body.has-rail, .pv-body.panel-open, .pv-body.has-rail.panel-open { grid-template-columns: minmax(0, 1fr); }
  .pv-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62%; z-index: 4; border-radius: 22px 22px 0 0; background: rgb(250 251 254 / .94);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 -10px 34px rgb(16 22 43 / .2); animation: pv-sheet .26s cubic-bezier(.2, .9, .3, 1); padding-bottom: env(safe-area-inset-bottom); }
  .pv-panel-x { display: inline-grid; }
  .pv-undo { bottom: 12px; }
  .pv-photo { padding: 10px; }
}
@keyframes pv-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pv-sheet[data-ready], .pv-hint, .pv-undo, .pv-card, .pv-form, .pv-panel, .pv-photo { animation-duration: .01ms !important; }
  .pv-pin.draft .pv-pin-h::before { animation: none; }
  .pv-pin-h { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .pv-shell { background: #e8ecf5; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pv-top, .pv-panel, .pv-hint { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .pv-pin-h::before { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #fff; }
  .sp-sec { box-shadow: inset 0 0 0 1px var(--line-3); }
}

/* Site plans inside the customer Sites tab and the site record page */
.tcard > .sp, .tk-body > .sp { margin: 10px 0 14px; }