/* ==================================================================
   Dropdowns, dates, tick boxes and file boxes, on every page (owner,
   11 October 2026; designs/2026-10-11-owner-review, point 5). Loaded
   after each page's own stylesheet; controls.js draws the open list, the
   calendar and the drop box. The colours are each page's own (navy, line,
   paper, ink), so the office pages keep theirs.
   ================================================================== */
:root{
  --vc-navy:var(--navy,#00447E);
  --vc-line:var(--line,#CBDCED);
  --vc-line-2:var(--line-2,#E2EDF8);
  --vc-paper:var(--paper,#FFFFFF);
  --vc-ink:var(--ink,#0A2440);
  --vc-mid:var(--mid,#4B5F77);
  --vc-soft:var(--soft,#8296AC);
  --vc-ground:var(--ground,#E9F1FA);
  --vc-gold:var(--gold,#D69A2C);
  --vc-hot:var(--hot,var(--red,var(--bad,#C0392B)));
  --vc-wash:rgba(0,68,126,.08);
  --vc-ring:0 0 0 3px rgba(26,95,160,.16);
  --vc-pop:0 18px 40px rgba(10,36,64,.16),0 2px 6px rgba(10,36,64,.06);
}

/* ---- every dropdown, also where the phone's own list is used ---- */
select:not([multiple]):not([size]){
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300447E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;
  padding-right:38px!important;cursor:pointer;text-overflow:ellipsis}
select:disabled{cursor:not-allowed;opacity:.65}

/* ---- the box drawn in place of a dropdown or a date (controls.js) ---- */
.sk{position:relative;display:block;width:100%;min-width:0}
.sk[hidden]{display:none!important}
.sk>select,.sk>input{position:absolute!important;inset:0;width:100%!important;height:100%!important;
  opacity:0!important;pointer-events:none!important;margin:0!important}
.sk-btn{text-transform:none;letter-spacing:normal;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;
  margin:0;padding:0 12px 0 14px;font:inherit;font-size:15px;color:var(--vc-ink);text-align:left;cursor:pointer;
  background:var(--vc-paper);border:1px solid var(--vc-line);border-radius:10px;
  transition:border-color .15s,box-shadow .15s}
.sk-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-empty .sk-v{color:var(--vc-soft)}
.sk-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--vc-navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.sk-date .sk-chev{width:18px;height:18px;stroke-width:1.8}
@media (hover:hover) and (pointer:fine){.sk-btn:hover{border-color:var(--vc-soft)}}
.sk-btn:focus-visible,.sk-on .sk-btn{outline:none;border-color:var(--vc-navy);box-shadow:var(--vc-ring)}
.sk-select.sk-on .sk-chev{transform:rotate(180deg)}
.sk-btn:disabled{cursor:not-allowed;opacity:.6;background:var(--vc-ground)}
.sk-bad .sk-btn{border-color:var(--vc-hot)}
.sk-bare .sk-btn{border-color:transparent;background:transparent;box-shadow:none;padding-left:0;padding-right:0}
.sk-bare.sk-on .sk-btn,.sk-bare .sk-btn:focus-visible{box-shadow:none;border-color:transparent}

/* ---- the map on a form (owner, 18 October 2026): our own pin, buttons
   in the site's style, and no hairline gaps between tiles on a zoomed
   screen such as 125%. Leaflet adds overlapping tiles together
   (plus-lighter), which drew white lines there; normal, half a pixel over ---- */
.v-pin{background:none;border:0}
.v-pin svg{width:38px;height:48px;overflow:visible;filter:drop-shadow(0 4px 4px rgba(10,36,64,.28))}
.v-pin .v-pin-shadow{fill:rgba(10,36,64,.25)}
.leaflet-dragging .v-pin svg{transform:translateY(-4px)}
.leaflet-container img.leaflet-tile{mix-blend-mode:normal!important;width:256.5px!important;height:256.5px!important}
.leaflet-container .leaflet-control-zoom{border:1px solid var(--vc-line);border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(10,36,64,.12)}
.leaflet-container .leaflet-control-zoom a{width:34px;height:34px;line-height:32px;color:var(--vc-navy);font-size:18px;border-color:var(--vc-line-2)}
.leaflet-container .leaflet-control-attribution{border-top-left-radius:6px}

/* ---- the open list and the calendar, laid over the page ---- */
.sk-pop{position:fixed;z-index:1000;background:var(--vc-paper);color:var(--vc-ink);border:1px solid var(--vc-line);
  border-radius:12px;box-shadow:var(--vc-pop);font-family:inherit;animation:sk-in .12s ease-out}
.sk-pop.sk-up{animation-name:sk-up}
@keyframes sk-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes sk-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sk-pop{animation:none}}
.sk-list ul{list-style:none;margin:0;padding:6px;max-height:300px;overflow:auto;outline:none}
.sk-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:14.5px;line-height:1.35;cursor:pointer}
.sk-list li.sk-act{background:var(--vc-wash)}
.sk-list li[aria-selected="true"]{color:var(--vc-navy);font-weight:600}
.sk-list li[aria-selected="true"]::after{content:"";width:14px;height:14px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B58121' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat}
.sk-list li[aria-disabled="true"]{color:var(--vc-soft);cursor:not-allowed}
.sk-list li[hidden]{display:none}
/* a long list opens with a box to find in, and Other sits apart at the
   foot (owner, 18 October 2026) */
.sk-find{display:block;width:calc(100% - 12px);margin:6px 6px 0;height:38px;padding:0 11px;font:inherit;font-size:14.5px;
  color:var(--vc-ink);background:var(--vc-ground);border:1px solid var(--vc-line-2);border-radius:8px;outline:none}
.sk-find:focus{border-color:var(--vc-navy);background:var(--vc-paper);box-shadow:var(--vc-ring)}
.sk-list li.sk-other{color:var(--vc-gold-ink,#8A6614);border-top:1px solid var(--vc-line-2);border-radius:0 0 8px 8px;margin-top:4px}
.sk-list li.sk-group{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--vc-soft);
  font-weight:600;cursor:default;padding:10px 12px 4px}
.sk-cal{padding:14px}
.sk-cal-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px}
.sk-cal-h button{width:34px;height:34px;border-radius:9px;border:1px solid var(--vc-line);background:var(--vc-paper);
  display:grid;place-items:center;cursor:pointer;padding:0}
.sk-cal-h button .sk-chev{transform:rotate(90deg)}
.sk-cal-h button[data-mv="1"] .sk-chev{transform:rotate(-90deg)}
.sk-cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-top:10px;text-align:center}
.sk-cal-g small{font-size:11px;color:var(--vc-soft);padding:4px 0;font-weight:600}
.sk-cal-g button{height:36px;border:0;border-radius:9px;background:none;font:inherit;font-size:14px;color:var(--vc-ink);cursor:pointer;padding:0}
@media (hover:hover){.sk-cal-g button:hover:not(:disabled){background:var(--vc-wash)}}
.sk-cal-g button:focus-visible{outline:2px solid var(--vc-gold);outline-offset:0}
.sk-cal-g button.sk-today{box-shadow:inset 0 0 0 1.5px var(--vc-gold)}
.sk-cal-g button.sk-pick{background:var(--vc-navy);color:var(--vc-paper);font-weight:600}
.sk-cal-g button:disabled{color:var(--vc-line);cursor:default}
.sk-cal-f{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--vc-line-2)}
.sk-cal-f button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--vc-navy);cursor:pointer;padding:6px 8px;border-radius:7px}
.sk-cal-f button:disabled{color:var(--vc-soft);cursor:default}
@media (hover:hover){.sk-cal-f button:hover:not(:disabled){background:var(--vc-wash)}}

/* ---- dates and times on a phone: the phone's own picker, our look ---- */
input[type=date],input[type=time]{min-height:44px}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{
  opacity:.75;cursor:pointer;filter:invert(17%) sepia(73%) saturate(1800%) hue-rotate(195deg)}

/* ---- tick boxes and round choices ---- */
input[type=checkbox]:not(.switch-in),input[type=radio]{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;flex:none;cursor:pointer;
  border:1.5px solid var(--vc-soft);background:var(--vc-paper) center/12px 12px no-repeat;
  display:inline-grid;vertical-align:-3px;transition:background-color .12s,border-color .12s}
input[type=checkbox]:not(.switch-in){border-radius:5px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:not(.switch-in):checked{background-color:var(--vc-navy);border-color:var(--vc-navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E")}
input[type=radio]:checked{border-color:var(--vc-navy);background-color:var(--vc-paper);box-shadow:inset 0 0 0 4px var(--vc-paper);background-image:none;
  background:radial-gradient(circle,var(--vc-navy) 0 4.5px,var(--vc-paper) 5px)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:var(--vc-ring)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}

/* ---- file boxes (controls.js) ---- */
.fz-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden;pointer-events:none}
.fz{position:relative;display:grid!important;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;
  margin:0;padding:14px 16px;border:1.5px dashed var(--vc-line);border-radius:12px;background:var(--vc-ground);
  cursor:pointer;transition:border-color .15s,background-color .15s;text-transform:none!important;letter-spacing:0!important;
  font-family:inherit!important;color:var(--vc-ink)!important;font-weight:400!important}
@media (hover:hover){.fz:hover{border-color:var(--vc-navy)}}
.fz.fz-over{border-color:var(--vc-navy);background:var(--vc-wash);border-style:solid}
.fz:focus-within{border-color:var(--vc-navy);box-shadow:var(--vc-ring)}
.fz-ic{width:44px;height:44px;border-radius:11px;background:var(--vc-paper);border:1px solid var(--vc-line);display:grid;place-items:center;color:var(--vc-navy)}
.fz-ic svg,.fz-compact svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fz-t{display:grid;gap:1px;min-width:0}
.fz-t b{font-size:14.5px;font-weight:600;font-family:inherit}
.fz-t small{font-size:12.8px;color:var(--vc-mid);font-family:inherit}
.fz-pick{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--vc-line);
  background:var(--vc-paper);color:var(--vc-navy);font-weight:600;font-size:13.5px;white-space:nowrap}
.fz-compact{display:inline-flex!important;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:9px;
  border:1px solid var(--vc-line);background:var(--vc-paper);color:var(--vc-navy)!important;font-weight:600!important;
  font-size:13.5px!important;cursor:pointer;position:relative;white-space:nowrap;text-transform:none!important;letter-spacing:0!important}
.fz-compact svg{width:17px;height:17px}
@media (hover:hover){.fz-compact:hover{border-color:var(--vc-navy);background:var(--vc-wash)}}
.fz-compact:focus-within{box-shadow:var(--vc-ring);border-color:var(--vc-navy)}
.fz-chips{display:flex;flex-wrap:wrap;gap:8px}
.fz-chips:not(:empty){margin:10px 0 4px}
.fz-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 6px 5px 6px;border:1px solid var(--vc-line);
  border-radius:10px;background:var(--vc-paper);font-size:13px;color:var(--vc-ink)}
.fz-chip img{width:30px;height:30px;border-radius:6px;object-fit:cover;flex:none}
.fz-chip .fz-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:220px;padding-left:4px}
.fz-chip small{color:var(--vc-soft);font-size:11.5px;white-space:nowrap}
.fz-x{width:24px;height:24px;border-radius:7px;border:0;background:var(--vc-ground);color:var(--vc-mid);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.fz-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media (hover:hover){.fz-x:hover{background:var(--vc-wash);color:var(--vc-hot)}}
@media (max-width:520px){.fz{grid-template-columns:40px minmax(0,1fr)}.fz-pick{grid-column:1/-1;justify-content:center}}