/* Field forms: visit record (technician, phone first), visit list, preview overlay */
.vr { max-width: 760px; margin: 0 auto; }
.vr-hero { margin-bottom: 14px; }
.vr-hero .k { color: var(--muted); letter-spacing: .06em; }
.vr-hero h1 { font-size: 1.45rem; margin: 4px 0 2px; }
.vr-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.vr-facts a { color: var(--info); font-weight: 600; text-decoration: none; }
.vr-card { margin-bottom: 14px; }
.vr-card > header h2 { font-size: 1.05rem; }
.vr-card .pad { padding: 14px 16px; }
.vr-stack { display: grid; gap: 14px; }
.vr-hint { margin: 0 0 10px; font-size: 12.5px; }
.vr .f > span { font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
.vr .f small { font-weight: 400; color: var(--muted); }
.vr .f > input, .vr .f > select, .vr .f > textarea, .vr-ta, .vr .f > .vr-chips + input { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; min-height: 44px; font-weight: 400; }
.vr .f > .vr-chips + input { margin-top: 6px; }
.vr-ta { display: block; min-height: 96px; resize: vertical; font: inherit; }

.vr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-chip { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; font: 600 14px/1.1 var(--body); color: var(--ink-2); cursor: pointer; transition: background .1s, border-color .1s; -webkit-tap-highlight-color: transparent; }
.vr-chip:hover { border-color: #c5bfae; }
.vr-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.vr-chip.sm { min-height: 36px; padding: 0 11px; font-size: 12.5px; font-weight: 500; text-align: left; }
.vr-chip:active { transform: scale(.97); }

.vr-areas { display: grid; gap: 8px; }
.vr-area { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px 10px; background: #fff; }
.vr-area.on { border-color: #9fb0cf; background: #f3f6fc; }
.vr-aname { display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; padding: 2px 0 7px; font: inherit; cursor: pointer; text-align: left; color: var(--ink); }
.vr-aname b { font-size: 15px; }
.vr-aname span { font-size: 12px; color: var(--muted); }
.vr-area .vr-chips .vr-chip { flex: 1 1 78px; max-width: 130px; padding: 0 6px; }

.vr-chem { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: #fcfbf8; }
.vr-chem .tx { flex: 1; min-width: 0; cursor: pointer; }
.vr-chem small { display: block; color: var(--muted); }

.vr-stbar { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; }
.vr-step { display: flex; gap: 6px; }
.vr-step button { width: 48px; height: 48px; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; font: 700 22px/1 var(--body); cursor: pointer; }
.vr-step input { width: 64px; height: 48px; text-align: center; border: 1px solid var(--line); border-radius: 8px; font-size: 18px !important; font-weight: 700; }
.vr-sts { display: grid; }
.vr-st { display: grid; grid-template-columns: 30px 1fr; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.vr-st.on .no { background: var(--good); color: #fff; }
.vr-st .no { border: 0; padding: 0; cursor: pointer; color: inherit; grid-row: 1; width: 28px; height: 28px; border-radius: 50%; background: #eeebe4; display: grid; place-items: center; font: 700 12px/1 var(--mono); }
.vr-st .vr-chips { grid-column: 2; flex-wrap: nowrap; gap: 5px; }
.vr-st .vr-chips .vr-chip { flex: 1 1 0; min-width: 0; padding: 0 2px; min-height: 42px; }
.vr-st .vr-chips.b .vr-chip { font-size: 12.5px; min-height: 38px; }
.vr-st .rm, .vr-addrm { grid-column: 2; }
.vr-st .rm { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.vr-addrm { justify-self: start; background: none; border: 0; color: var(--info); font: 600 12.5px var(--body); padding: 2px 0; cursor: pointer; }

.vr-sign h3 { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.vr-sigdone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vr-sigdone[hidden], .vr-padwrap[hidden] { display: none; }
.vr-sigimg { max-height: 84px; max-width: 220px; border: 1px dashed #9aa3b2; border-radius: 8px; padding: 4px; background: #fff; }
.vr .sigpad-bar .btn { flex: 1; min-height: 44px; }
.vr-finish { width: 100%; padding: 16px; font-size: 16px; }
.vr-bar { align-items: center; }
.vr-prog { flex: 1; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.vr-bar .btn { flex: 0 0 auto; padding: 13px 16px; }

.vr-docs { list-style: none; margin: 0; padding: 0; }
.vr-docs li { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.vr-docs .tx { flex: 1; min-width: 0; }
.vr-docs small { display: block; color: var(--muted); }
.vr-docs li.off { opacity: .55; }
.vr-sum h3 { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 16px 0 8px; }
.vr-sumlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vr-sigs { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.vr-sigs figure { margin: 0; }
.vr-sigs figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }

.vr-mini { display: inline-block; margin-top: 6px; border: 1px solid var(--navy); background: #fff; color: var(--navy); border-radius: 999px; font: 600 11.5px/1 var(--body); padding: 7px 11px; cursor: pointer; text-decoration: none; }
.vr-mini.has { background: var(--good-bg); border-color: #9bd1b3; color: var(--good); }

.vr-prev { position: fixed; inset: 0; z-index: 95; background: #e5e7eb; display: flex; flex-direction: column; }
.vr-prev[hidden] { display: none; }
.vr-prev-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--line); padding-top: calc(10px + env(safe-area-inset-top)); }
.vr-prev iframe { flex: 1; width: 100%; border: 0; background: #e5e7eb; }
body.vr-prev-open { overflow: hidden; }

.vr-filters { align-items: flex-end; }
.vr-filters .f { font-size: 12px; }
.vr-filters .f input, .vr-filters .f select { min-height: 38px; }
.vr-list tbody tr.click { cursor: pointer; }

@media (max-width: 900px) {
  .vr-hero h1 { font-size: 1.3rem; }
  .vr-card .pad { padding: 12px 12px; }
  .vr-card > header { padding: 12px; }
  .vr-chip { font-size: 14px; }
  .vr-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vr-filters .f:nth-child(3) { grid-column: 1 / -1; }
  .vr-filters .f input, .vr-filters .f select { width: 100%; min-height: 44px; }
  .vr-list .t tbody tr { display: flex; flex-direction: column; padding: 13px 14px; }
  .vr-list .t td.lead { order: -3; font-size: 16px; padding-bottom: 4px; }
  .vr-list .t td.mono:first-child { order: -2; margin-bottom: 2px; }
  .vr-list .t td[data-label="When"] { order: -1; margin-bottom: 4px; }
  .vr-prev-bar { padding-left: 10px; }
  .vr .f2 { grid-template-columns: 1fr; }
  .vr .f2:has([type=date]) { grid-template-columns: 1fr 1fr; }
}

.vr-st .stloc { grid-column: 2; grid-row: 1; justify-self: start; max-width: 100%; border: 0; background: none; padding: 2px 0; min-height: 28px; font: 600 13px/1.2 var(--body); color: var(--ink-2, #555); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-st .stloc:not(.set) { font-weight: 500; color: var(--muted, #888); text-decoration: underline dotted; }
.vr-chk2 { border-top: 1px solid var(--line-2); padding-top: 12px; display: grid; gap: 10px; }
.vr-chk2 h3 { margin: 0; font-size: 14px; }