/* ========================================================================
   REQUEST A VIEWING — VISUAL HARMONY & RESPONSIVE PASS (2026-09-15)
   ---------------------------------------------------------------------
   Purpose of this layer: the form had accumulated several successive
   "compact" passes (see css/104-visit-type-selector.css), each tightening
   a different part of it. The result was technically dense but visually
   inconsistent — three different neutral families (cool grey #f5f6f8,
   warm beige #faf9f6, plain #fff), type sizes ranging from 9px to 13px
   with no shared scale, field heights of 34/38/44px in the same column,
   a hard 600px modal cap that clipped the Send button, and inputs under
   16px that make iOS zoom on focus.

   This file does NOT change markup semantics, ids, JS hooks or behavior.
   It re-states the same components on ONE scale:

     · one warm neutral family, navy ink, single sand/gold accent
     · one fluid type scale        (--vr-fs-*)
     · one fluid spacing scale     (--vr-pad / --vr-gap)
     · one control height          (--vr-control) for every input,
       select, date, time and the phone group
     · header / scrollable body / pinned action bar, so the primary
       action is reachable at any viewport height instead of being
       clipped by a fixed max-height
     · touch targets >= 40px and 16px input text below 600px (no iOS
       auto-zoom), 2-column desktop -> 1-column phone field flow

   Loaded last in css-order.txt and last in index.html, so it wins the
   cascade over the earlier layers at equal specificity.
   ======================================================================== */

/* ---------- 1. Local token scale ---------------------------------- */
#viewingModal{
  /* ink */
  --vr-ink:#162D4C;
  --vr-ink-2:#3C4C63;
  --vr-muted:#6F7A88;
  --vr-placeholder:#9AA3AE;
  /* warm neutrals — one family, no cool/warm mixing */
  --vr-line:#E2E0D9;
  --vr-line-soft:#EEECE6;
  --vr-surface:#FAF9F6;
  --vr-surface-2:#F4F2ED;
  /* accent */
  --vr-accent:#B98542;
  --vr-accent-soft:#FBF6EE;
  --vr-accent-ring:rgba(185,133,66,.20);
  --vr-danger:#C0392B;
  /* geometry */
  --vr-radius:12px;
  --vr-radius-sm:10px;
  --vr-pad:clamp(14px,3.2vw,24px);
  --vr-gap:clamp(10px,1.6vw,14px);
  --vr-control:clamp(42px,5.2vw,46px);
  /* type */
  --vr-fs-title:clamp(17px,4vw,21px);
  --vr-fs-label:clamp(9.5px,2.4vw,10.5px);
  --vr-fs-input:14px;
  --vr-fs-body:clamp(11px,2.7vw,12.5px);
  --vr-fs-micro:clamp(9.5px,2.3vw,10.5px);

  padding:clamp(8px,2vw,20px)!important;
  align-items:center!important;
  background:rgba(12,28,47,.50)!important;
}

/* ---------- 2. Dialog shell: head / scroll body / pinned actions --- */
#viewingModal .vr-modal{
  width:min(100%,640px)!important;
  max-width:640px!important;
  max-height:min(94dvh,820px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid var(--vr-line)!important;
  border-radius:clamp(14px,2.2vw,20px)!important;
  background:#fff!important;
  box-shadow:0 26px 70px rgba(12,28,47,.22),0 3px 12px rgba(12,28,47,.06)!important;
}

#viewingModal .vr-modal-head{
  flex:0 0 auto;
  position:relative;
  padding:calc(var(--vr-pad) * .8) var(--vr-pad) calc(var(--vr-pad) * .58)!important;
  background:#fff!important;
  border-bottom:0!important;
}
#viewingModal .vr-modal-head:after{
  left:var(--vr-pad);right:var(--vr-pad);
  background:var(--vr-line-soft);
}
#viewingModal .vr-modal-head h3{
  display:flex;align-items:center;
  margin:0!important;
  font-size:var(--vr-fs-title)!important;
  line-height:1.2;
  letter-spacing:-.2px;
  color:var(--vr-ink)!important;
}
#viewingModal .vr-modal-head h3:before{
  flex:0 0 auto;
  width:3px!important;
  height:1.05em!important;
  margin-right:10px!important;
  vertical-align:0!important;
  border-radius:3px!important;
  background:var(--vr-accent)!important;
}
#viewingModal .modal-close{
  position:absolute;
  top:50%!important;
  right:var(--vr-pad)!important;
  transform:translateY(-50%);
  width:34px!important;height:34px!important;
  margin-top:calc(var(--vr-pad) * -.11);
  border:1px solid var(--vr-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--vr-muted)!important;
  font-size:13px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
#viewingModal .modal-close:hover{
  background:var(--vr-surface)!important;
  border-color:var(--vr-accent)!important;
  color:var(--vr-ink)!important;
}

#viewingModal .vr-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--vr-gap) var(--vr-pad) 2px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(22,45,76,.20) transparent;
}

/* Pinned action bar (markup: .vr-actions wrapper in index.html). The
   primary action never scrolls out of reach, on any viewport height. */
#viewingModal .vr-actions{
  flex:0 0 auto;
  padding:clamp(10px,1.6vw,13px) var(--vr-pad) calc(var(--vr-pad) * .75);
  background:#fff;
  border-top:1px solid var(--vr-line-soft);
  /* soft lift so it reads as a pinned bar and hints that the body above
     it continues to scroll on short viewports */
  box-shadow:0 -12px 18px -14px rgba(20,38,60,.30);
}

/* ---------- 3. Unit summary (kept on phones too — it is the context
   for everything below it; previously display:none under 470px) ------ */
#viewingModal .vr-unit-summary{
  display:block!important;
  margin:0 0 var(--vr-gap)!important;
  padding:10px 12px!important;
  border:1px solid var(--vr-line-soft)!important;
  border-left:3px solid var(--vr-accent)!important;
  border-radius:var(--vr-radius-sm)!important;
  background:var(--vr-surface)!important;
  box-shadow:none!important;
}
#viewingModal .vr-unit-summary .u-id{
  font-size:var(--vr-fs-body)!important;
  font-weight:800!important;
  color:var(--vr-ink)!important;
  line-height:1.3!important;
}
#viewingModal .vr-unit-summary .u-loc{
  margin-top:2px!important;
  font-size:var(--vr-fs-micro)!important;
  line-height:1.35!important;
  color:var(--vr-muted)!important;
}

/* ---------- 4. Section labels ------------------------------------- */
#viewingModal .vr-section-label{
  display:flex;align-items:center;gap:8px;
  margin:0 0 calc(var(--vr-gap) * .55)!important;
  font-size:var(--vr-fs-label)!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
  text-transform:uppercase;
  color:var(--vr-ink)!important;
}
#viewingModal .vr-section-label .vr-step{
  width:22px;height:20px;
  flex:0 0 22px;
  border-radius:6px;
  background:var(--vr-surface-2);
  color:var(--vr-ink);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.02em;
}

/* ---------- 5. Visit purpose: two equal, calm cards ---------------- */
#viewingModal .vr-visit-type-row{
  margin:0 0 var(--vr-gap)!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#viewingModal .vr-visit-type-options{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
}
#viewingModal .vr-visit-type-option{
  position:relative;
  display:block;
  min-width:0;
  border:0!important;
}
#viewingModal .vr-visit-type-option + .vr-visit-type-option{
  border-left:0!important;
  border-top:0!important;
}
#viewingModal .vr-visit-type-btn,
#viewingModal .vr-visit-type-btn.active{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  width:100%!important;
  min-height:var(--vr-control)!important;
  height:100%!important;
  padding:8px 34px 8px 11px!important;
  border:1px solid var(--vr-line)!important;
  border-radius:var(--vr-radius-sm)!important;
  background:#fff!important;
  color:var(--vr-ink)!important;
  font-size:var(--vr-fs-body)!important;
  font-weight:700!important;
  line-height:1.25!important;
  white-space:normal!important;
  text-wrap:balance;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease!important;
}
#viewingModal .vr-visit-type-btn:hover{
  border-color:#CFC7B8!important;
  background:var(--vr-surface)!important;
}
/* an earlier layer drew a decorative radio circle here; the real control
   is the .vr-checkbox-mark span, so the extra ring is dropped to avoid two
   selection marks sitting side by side */
#viewingModal .vr-visit-type-btn:before{content:none!important;display:none!important;}
#viewingModal .vr-visit-type-btn span{flex:1 1 auto;text-align:left;}
#viewingModal .vr-visit-type-btn.active,
#viewingModal .vr-visit-type-btn.active:hover{
  border-color:var(--vr-accent)!important;
  background:var(--vr-accent-soft)!important;
  box-shadow:none!important;
}
#viewingModal .vr-visit-type-btn i,
#viewingModal .vr-visit-type-btn.active i{
  flex:0 0 auto;
  width:15px;
  text-align:center;
  font-size:13px!important;
  color:var(--vr-muted)!important;
}
#viewingModal .vr-visit-type-btn.active i{color:var(--vr-accent)!important;}
#viewingModal .vr-visit-type-btn .vr-checkbox-mark,
#viewingModal .vr-checkbox-mark{
  width:17px!important;height:17px!important;flex:0 0 17px!important;
  border:1.6px solid #C3C0B6!important;
  border-radius:5px!important;
  background:#fff!important;
  box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease!important;
}
#viewingModal .vr-visit-type-btn.active .vr-checkbox-mark{
  background:var(--vr-accent)!important;
  border-color:var(--vr-accent)!important;
}
#viewingModal .vr-visit-type-btn.active .vr-checkbox-mark:after{
  content:'\2713'!important;
  color:#fff!important;
  font-size:10.5px!important;
  font-weight:900!important;
  line-height:1!important;
}
#viewingModal .vr-visit-type-btn:focus-within{
  outline:none!important;
  border-color:var(--vr-accent)!important;
  box-shadow:0 0 0 3px var(--vr-accent-ring)!important;
}
#viewingModal .vr-visit-type-row.vr-vt-error .vr-visit-type-btn{
  border-color:var(--vr-danger)!important;
  box-shadow:none!important;
}

/* info affordance — bigger hit area, quieter resting state */
#viewingModal .vr-info-btn{
  position:absolute;
  top:50%;right:6px!important;
  transform:translateY(-50%);
  width:26px!important;height:26px!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#A9A296!important;
  font-size:12px;
  cursor:pointer;
  transition:color .16s ease,background .16s ease!important;
}
#viewingModal .vr-info-btn:hover,
#viewingModal .vr-info-btn:focus-visible{
  color:var(--vr-accent)!important;
  background:rgba(185,133,66,.10)!important;
  outline:none;
}
#viewingModal .vr-visit-type-info{
  left:0!important;right:0!important;
  top:calc(100% + 6px)!important;
  padding:9px 11px!important;
  border:1px solid var(--vr-line)!important;
  border-radius:var(--vr-radius-sm)!important;
  background:#fff!important;
  color:var(--vr-ink-2)!important;
  font-size:var(--vr-fs-micro)!important;
  line-height:1.4!important;
  box-shadow:0 14px 30px rgba(20,38,60,.14)!important;
}

/* ---------- 6. Fields --------------------------------------------- */
#viewingModal .vr-form-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 var(--vr-gap)!important;
}
#viewingModal .vr-field{
  margin-bottom:calc(var(--vr-gap) * .8)!important;
  min-width:0;
}
#viewingModal .vr-field label,
#viewingModal .vr-notes-row label{
  display:flex!important;
  align-items:center;
  gap:5px;
  margin-bottom:5px!important;
  font-size:var(--vr-fs-label)!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
  color:var(--vr-ink-2)!important;
}
#viewingModal .vr-field label b{
  color:var(--vr-accent)!important;
  font-weight:800;
}
#viewingModal .vr-field input,
#viewingModal .vr-field .phone-field-group,
#viewingModal .vr-notes-row textarea{
  width:100%;
  border:1px solid var(--vr-line)!important;
  border-radius:var(--vr-radius-sm)!important;
  background:#fff!important;
  color:var(--vr-ink)!important;
  font-family:inherit!important;
  font-size:var(--vr-fs-input)!important;
  box-shadow:none!important;
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
#viewingModal .vr-field input,
#viewingModal .vr-field .phone-field-group{
  min-height:var(--vr-control)!important;
  height:var(--vr-control)!important;
  padding:0 12px!important;
}
#viewingModal .vr-field input::placeholder,
#viewingModal .vr-notes-row textarea::placeholder{
  color:var(--vr-placeholder)!important;
}
#viewingModal .vr-field input:focus,
#viewingModal .vr-notes-row textarea:focus,
#viewingModal .vr-field .phone-field-group:focus-within{
  border-color:var(--vr-accent)!important;
  box-shadow:0 0 0 3px var(--vr-accent-ring)!important;
  outline:none!important;
}
/* date/time: same box as every other control, brand-colored picker icon */
#viewingModal .vr-field input[type="date"],
#viewingModal .vr-field input[type="time"]{
  padding-right:10px!important;
  font-variant-numeric:tabular-nums;
}
#viewingModal .vr-field input[type="date"]::-webkit-calendar-picker-indicator,
#viewingModal .vr-field input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.55;
  cursor:pointer;
  filter:grayscale(1);
}
#viewingModal .vr-field input[type="date"]::-webkit-calendar-picker-indicator:hover,
#viewingModal .vr-field input[type="time"]::-webkit-calendar-picker-indicator:hover{
  opacity:1;
  filter:none;
}

/* Chrome/Safari autofill painted these fields pale blue, which broke the
   navy + sand palette (visible in the reported screenshot). Repaint with
   an inset shadow — the only reliable way to override the UA style. */
#viewingModal .vr-field input:-webkit-autofill,
#viewingModal .vr-field input:-webkit-autofill:hover,
#viewingModal .vr-field input:-webkit-autofill:focus,
#viewingModal .vr-field input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--vr-ink)!important;
  -webkit-box-shadow:0 0 0 60px #fff inset!important;
  box-shadow:0 0 0 60px #fff inset!important;
  caret-color:var(--vr-ink);
  transition:background-color 9999s ease-out 0s;
}
#viewingModal .vr-field .phone-field-group:has(input:-webkit-autofill){
  background:#fff!important;
}

/* phone prefix — warm neutral, aligned to the same control height */
#viewingModal .phone-field-group{
  display:flex;
  align-items:stretch;
  overflow:hidden;
  padding:0!important;
}
#viewingModal .phone-field-prefix{
  display:flex;align-items:center;justify-content:center;
  min-width:58px;
  padding:0 10px!important;
  border-right:1px solid var(--vr-line)!important;
  background:var(--vr-surface-2)!important;
  color:var(--vr-ink)!important;
  font-size:13px!important;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
#viewingModal .phone-field-group input{
  height:100%!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  letter-spacing:.3px;
}
#viewingModal .phone-field-group input:focus{
  box-shadow:none!important;
}

/* inline validation */
#viewingModal .vr-field-hint{
  margin-top:4px!important;
  font-size:var(--vr-fs-micro)!important;
  line-height:1.35!important;
  color:var(--vr-danger)!important;
}
#viewingModal .vr-field input.vr-field-invalid,
#viewingModal .vr-field .phone-field-group.vr-field-invalid{
  border-color:var(--vr-danger)!important;
  background:#FEF8F7!important;
}
#viewingModal .vr-field input.vr-field-invalid:focus,
#viewingModal .vr-field .phone-field-group.vr-field-invalid:focus-within{
  box-shadow:0 0 0 3px rgba(192,57,43,.14)!important;
}
#viewingModal .vr-conflict-warning{
  margin:0 0 var(--vr-gap)!important;
  padding:9px 11px!important;
  border:1px solid #F0D8D4!important;
  border-radius:var(--vr-radius-sm)!important;
  background:#FDF4F2!important;
  font-size:var(--vr-fs-micro)!important;
  line-height:1.4!important;
}

/* ---------- 7. Remember me — a preference, not a field ------------- */
#viewingModal .vr-save-data{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 var(--vr-gap)!important;
  padding:0 0 var(--vr-gap)!important;
  border:0!important;
  border-bottom:1px solid var(--vr-line-soft)!important;
  border-radius:0!important;
  background:transparent!important;
  cursor:pointer;
}
#viewingModal .vr-save-check{
  width:17px!important;height:17px!important;flex:0 0 17px!important;
  border:1.6px solid #C3C0B6!important;
  border-radius:5px!important;
  background:#fff!important;
  transition:background .16s ease,border-color .16s ease;
}
#viewingModal .vr-save-data input:checked + .vr-save-check{
  background:var(--vr-accent)!important;
  border-color:var(--vr-accent)!important;
}
#viewingModal .vr-save-data input:checked + .vr-save-check:after{
  font-size:10.5px!important;
}
#viewingModal .vr-save-data input:focus-visible + .vr-save-check{
  outline:none;
  box-shadow:0 0 0 3px var(--vr-accent-ring);
}
#viewingModal .vr-save-data strong{
  font-size:var(--vr-fs-body)!important;
  font-weight:700!important;
  color:var(--vr-ink-2)!important;
  letter-spacing:0;
}

/* ---------- 8. Notes ---------------------------------------------- */
#viewingModal .vr-notes-row{
  margin:0 0 var(--vr-gap)!important;
  padding:0!important;
}
#viewingModal .vr-notes-row label .form-hint{
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--vr-muted)!important;
}
#viewingModal .vr-notes-counter{
  margin-left:auto!important;
  font-size:var(--vr-fs-micro)!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--vr-muted)!important;
  font-variant-numeric:tabular-nums;
}
#viewingModal .vr-notes-row textarea{
  min-height:56px!important;
  height:56px!important;
  padding:10px 12px!important;
  line-height:1.45!important;
  resize:vertical;
}

/* ---------- 9. Primary action ------------------------------------- */
#viewingModal .vr-submit-btn{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:48px!important;
  margin:0!important;
  border:1px solid #B98542!important;
  border-radius:var(--vr-radius)!important;
  background:#CEA577!important;
  color:var(--vr-ink)!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(145,94,28,.18)!important;
  transition:background .16s ease,box-shadow .16s ease,transform .12s ease!important;
}
#viewingModal .vr-submit-btn i{margin:0!important;font-size:15px;}
#viewingModal .vr-submit-btn:hover:not(:disabled){
  background:#C59A67!important;
  box-shadow:0 8px 20px rgba(145,94,28,.24)!important;
}
#viewingModal .vr-submit-btn:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:0 3px 10px rgba(145,94,28,.20)!important;
}
#viewingModal .vr-submit-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--vr-accent-ring),0 6px 16px rgba(145,94,28,.18)!important;
}
#viewingModal .vr-submit-btn:disabled{
  background:var(--vr-surface-2)!important;
  border-color:var(--vr-line)!important;
  color:#9AA0A8!important;
  box-shadow:none!important;
  opacity:1!important;
  cursor:not-allowed!important;
}
#viewingModal .vr-remaining{
  margin:9px 0 0!important;
  font-size:var(--vr-fs-micro)!important;
  font-weight:700!important;
  color:var(--vr-muted)!important;
}
#viewingModal .vr-remaining.vr-remaining-done{
  color:#1E8E5A!important;
  font-weight:800!important;
}

/* ---------- 10. Responsive flow ------------------------------------ */

/* Phones: single column so long values (company, email) stop truncating,
   16px input text so iOS never auto-zooms on focus, and the sheet uses
   the full height it is given. Date + time stay side by side — they are
   short and belong together. */
@media (max-width:600px){
  #viewingModal{
    padding:0!important;
    align-items:flex-end!important;
  }
  #viewingModal .vr-modal{
    width:100%!important;
    max-width:none!important;
    max-height:96dvh!important;
    border-radius:18px 18px 0 0!important;
  }
  #viewingModal .vr-form-grid{grid-template-columns:1fr!important;}
  #viewingModal .vr-schedule-grid{grid-template-columns:1fr 1fr!important;gap:0 10px!important;}
  #viewingModal .vr-field input,
  #viewingModal .phone-field-group input,
  #viewingModal .vr-notes-row textarea{font-size:16px!important;}
  #viewingModal .vr-visit-type-btn,
  #viewingModal .vr-visit-type-btn.active{min-height:46px!important;padding-right:30px!important;}
}

/* Very narrow (<=360px): stack the two purpose cards as well. */
@media (max-width:360px){
  #viewingModal .vr-visit-type-options{grid-template-columns:1fr!important;}
  #viewingModal .phone-field-prefix{min-width:52px;font-size:12.5px!important;}
}

/* Short viewports (laptops in split-screen, phones in landscape): trim
   vertical rhythm only — control heights and tap targets stay legal, the
   body scrolls, and the pinned action bar keeps Send Request visible. */
@media (max-height:680px){
  #viewingModal{
    --vr-gap:9px;
    --vr-control:40px;
  }
  #viewingModal .vr-modal-head{padding-top:12px!important;padding-bottom:10px!important;}
  #viewingModal .vr-notes-row textarea{min-height:46px!important;height:46px!important;}
  #viewingModal .vr-submit-btn{min-height:44px!important;}
  #viewingModal .vr-remaining{margin-top:7px!important;}
}
@media (max-height:520px){
  #viewingModal .vr-unit-summary{display:none!important;}
}

/* Large desktops: a touch more air, same proportions. */
@media (min-width:1280px) and (min-height:900px){
  #viewingModal .vr-modal{max-width:660px!important;}
}

/* ---------- 11. Accessibility & motion ----------------------------- */
@media (prefers-reduced-motion:reduce){
  #viewingModal *,
  #viewingModal *:before,
  #viewingModal *:after{
    transition:none!important;
    animation:none!important;
  }
}
@media (forced-colors:active){
  #viewingModal .vr-visit-type-btn.active{border:2px solid CanvasText!important;}
  #viewingModal .vr-submit-btn{border:1px solid ButtonText!important;}
}