/* DoctorX Window Visualizer. Phone first: the way in fills the box; once there is a picture, the
   controls you play with sit right under it, then the swatches, the fit and what to do next. When the
   tool has 900px or more to itself, the controls stand beside the picture instead of under it.
   --v-accent and --v-accent-dk come from Settings -> Window visualizer -> Button colour. */
.drx-viz-wrap{container-type:inline-size;--v-accent:#2b6777;--v-accent-dk:#235461}
.drx-viz{
  --v-ink:#1d2327; --v-ink2:#2c3338; --v-soft:#50575e;
  --v-line:#dcdcde; --v-greige:#c3c4c7;
  --v-cream:#f6f7f7; --v-cream2:#f0f0f1; --v-card:#fff; --v-dark:#1d2327;
  --v-r:16px; --v-rs:10px;
  /* The picture never grows taller than the screen less the controls under it, so a tall photo and
     the controls that change it are on screen together. */
  --v-maxh:max(260px,calc(100vh - 330px));
  display:grid;gap:16px;margin:0 0 8px;color:var(--v-ink);font-size:1rem;line-height:1.5;-webkit-tap-highlight-color:transparent}
@supports (height:100svh){.drx-viz{--v-maxh:max(260px,calc(100svh - 330px))}}
.drx-viz *,.drx-viz *::before,.drx-viz *::after{box-sizing:border-box}
/* Every rule below that sets display would beat the hidden attribute without this line. */
.drx-viz [hidden]{display:none!important}
.drx-viz .ico{flex:none}
.drx-viz-vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.drx-viz-main,.drx-viz-panel{min-width:0}

/* which state is on screen: start, camera or edit (the script sets data-state) */
.drx-viz:not([data-state="start"]) .viz-start,
.drx-viz:not([data-state="edit"]) .viz-edit,
.drx-viz:not([data-state="camera"]) .viz-cam,
.drx-viz[data-state="edit"] .viz-notedit{display:none!important}
/* a phone or a computer, decided in the browser so a cached page suits both */
@media (hover:none) and (pointer:coarse){.drx-viz .only-desk{display:none!important}}
@media not all and (hover:none) and (pointer:coarse){.drx-viz .only-touch{display:none!important}}

/* ------------------------------------------------------------ the way in */
.drx-viz-stage{position:relative;border-radius:var(--v-r)}
.drx-viz-start{position:relative;display:flex;flex-direction:column;gap:14px;padding:12px 12px 16px;background:var(--v-card);
  border:1px solid var(--v-line);border-radius:var(--v-r);box-shadow:0 20px 44px -30px rgba(31,27,24,.4)}
/* The big box is a label for the file box, so a tap anywhere on it opens the camera (phone) or the
   file picker (computer). Its faint stripes suggest a striped shade's bands. */
.drx-viz-go{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:236px;margin:0;
  padding:30px 20px;border:1.5px dashed var(--v-greige);border-radius:calc(var(--v-r) - 4px);cursor:pointer;text-align:center;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.035) 0 18px,rgba(0,0,0,0) 18px 36px),var(--v-cream2);
  transition:border-color .15s,background-color .15s}
.drx-viz-go:active{background-color:var(--v-line)}
.drx-viz-go-ico{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--v-accent);color:#fff;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
.drx-viz-go-t{display:block;max-width:20em;font-family:inherit;font-size:1.42rem;font-weight:500;line-height:1.18;
  letter-spacing:-.01em;color:var(--v-ink);text-wrap:balance}
.drx-viz-go-s{display:block;max-width:24em;font-size:.93rem;line-height:1.45;color:var(--v-soft);text-wrap:balance}
/* the file boxes themselves are hidden, so their keyboard focus is drawn on the box a person sees */
.drx-viz-start:has(#viz-camera:focus-visible) .drx-viz-go.only-touch,
.drx-viz-start:has(#viz-gallery:focus-visible) .drx-viz-go.only-desk,
.drx-viz-start:has(#viz-gallery:focus-visible) .drx-viz-chip.only-touch{outline:2.5px solid var(--v-accent);outline-offset:3px}
.drx-viz-or{display:flex;align-items:center;gap:12px;margin:0;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--v-soft)}
.drx-viz-or::before,.drx-viz-or::after{content:"";flex:1;height:1px;background:var(--v-line)}
.drx-viz-alt{display:grid;gap:10px}
.drx-viz-chip{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;margin:0;padding:11px 18px;
  border:1.5px solid var(--v-greige);border-radius:100px;background:var(--v-card);color:var(--v-ink);font:inherit;font-size:.98rem;
  font-weight:600;line-height:1.2;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.drx-viz-chip .ico{color:var(--v-accent-dk)}
.drx-viz-chip:active{background:var(--v-cream)}
.drx-viz-msg{margin:0;padding:11px 14px;border:1px solid #efc6b8;border-radius:var(--v-rs);background:#fbeae5;color:#7a2e18;
  font-size:.93rem;line-height:1.45}
.drx-viz-private{margin:0;color:var(--v-soft);font-size:.86rem;line-height:1.4;text-align:center;text-wrap:balance}
.drx-viz-private .ico{display:inline-block;margin:0 3px 0 0;color:var(--v-accent-dk);vertical-align:-3px}
@media (min-width:600px){.drx-viz-alt{display:flex;flex-wrap:wrap;justify-content:center}}

/* dropping a photo, and the moment a large one takes to open */
.drx-viz-over,.drx-viz-busy{position:absolute;inset:0;z-index:4;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px;border-radius:var(--v-r);font-weight:600;text-align:center}
.drx-viz-over{display:none;border:2.5px dashed var(--v-accent);background:rgba(255,255,255,.95);color:var(--v-accent-dk);font-size:1.1rem}
.drx-viz-stage.is-over .drx-viz-over{display:flex}
.drx-viz-busy{display:flex;background:rgba(255,255,255,.92);color:var(--v-ink2)}
.drx-viz-spin{width:34px;height:34px;border:3px solid var(--v-greige);border-top-color:var(--v-accent);border-radius:50%;
  animation:drx-viz-spin .8s linear infinite}
@keyframes drx-viz-spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------ a computer's own camera */
.drx-viz-cam{position:relative;min-height:320px;overflow:hidden;border-radius:var(--v-r);background:var(--v-dark)}
.drx-viz-cam video{display:block;width:100%;height:auto;max-height:var(--v-maxh);margin:0 auto;object-fit:contain;background:var(--v-dark)}
.drx-viz-cam-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;
  color:#f0f0f1;text-align:center}
.drx-viz-cam-bar{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  padding:26px 14px 14px;background:linear-gradient(0deg,rgba(20,17,15,.75),rgba(20,17,15,0))}

/* ------------------------------------------------------------ the picture */
/* The dark ground shows either side of a tall photo, the way a camera's own viewer frames one. */
.drx-viz-pic{position:relative;overflow:hidden;border-radius:var(--v-r);background:var(--v-dark)}
.drx-viz-pic canvas{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:var(--v-maxh);
  margin:0 auto;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none}
.drx-viz-pic canvas:focus-visible{outline:3px solid var(--v-accent);outline-offset:-3px}
.drx-viz.is-dragging canvas{cursor:grabbing!important}
/* In the middle, never along the top or bottom edge: the corners start there. */
.drx-viz-hint{position:absolute;top:50%;left:50%;z-index:2;width:max-content;max-width:min(calc(100% - 40px),30em);margin:0;
  padding:8px 15px;border-radius:14px;background:rgba(24,20,17,.82);color:#fff;font-size:.86rem;font-weight:500;line-height:1.35;
  text-align:center;transform:translate(-50%,-50%);pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .2s}
.drx-viz.is-dragging .drx-viz-hint{opacity:0}
.drx-viz-badge{position:absolute;left:10px;bottom:10px;z-index:2;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.9);
  color:var(--v-ink);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.drx-viz-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;margin:6px 0 0}
.drx-viz-textbtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;padding:8px 4px;border:0;border-radius:8px;
  background:none;color:var(--v-accent-dk);font:inherit;font-size:.92rem;font-weight:600;white-space:nowrap;cursor:pointer}

/* ------------------------------------------------------------ the controls */
.drx-viz-label{display:block;margin:0 0 8px;padding:0;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-soft)}
.drx-viz fieldset{min-width:0;margin:0;padding:0;border:0}
.drx-viz legend.drx-viz-label{float:left;width:100%}
.drx-viz legend.drx-viz-label+*{clear:both}
/* auto-fit: with a roller picked the bands question goes, and the others share the row */
.drx-viz-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px 24px;align-items:end;
  margin:4px 0 0;padding:14px 16px 16px;border:1px solid var(--v-line);border-radius:var(--v-r);background:var(--v-card)}
/* two to five answers side by side, the chosen one raised */
.drx-viz-seg-row{display:flex;gap:4px;padding:4px;border:1px solid var(--v-line);border-radius:14px;background:var(--v-cream2)}
.drx-viz-seg-row label{position:relative;flex:1 1 0;min-width:0;margin:0;cursor:pointer}
.drx-viz-seg-row input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.drx-viz-seg-row label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:6px;
  border-radius:10px;color:var(--v-soft);font-size:.93rem;font-weight:600;line-height:1.15;text-align:center;
  transition:background-color .15s,color .15s,box-shadow .15s}
.drx-viz-seg-row small{display:block;margin-top:2px;font-size:.74rem;font-weight:500}
.drx-viz-seg-row input:checked+span{background:var(--v-card);color:var(--v-ink);box-shadow:0 1px 2px rgba(31,27,24,.12),0 3px 10px -3px rgba(31,27,24,.2)}
.drx-viz-seg-row input:checked+span small{color:var(--v-accent-dk)}
.drx-viz-seg-row input:focus-visible+span{outline:2.5px solid var(--v-accent);outline-offset:1px}
/* the slider in the accent colour, with a thumb a thumb can find */
.drx-viz-drop-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.drx-viz-drop-head output{font-size:.92rem;font-weight:600;color:var(--v-ink);font-variant-numeric:tabular-nums}
.drx-viz-range{--fill:100%;display:block;width:100%;height:34px;margin:0;padding:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;accent-color:var(--v-accent)}
.drx-viz-range:focus{outline:none}
.drx-viz-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--v-accent) 0 var(--fill),var(--v-greige) var(--fill) 100%)}
.drx-viz-range::-webkit-slider-thumb{width:28px;height:28px;margin-top:-11px;border:2px solid var(--v-accent);border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(31,27,24,.28);-webkit-appearance:none;appearance:none}
.drx-viz-range::-moz-range-track{height:6px;border-radius:6px;background:var(--v-greige)}
.drx-viz-range::-moz-range-progress{height:6px;border-radius:6px;background:var(--v-accent)}
.drx-viz-range::-moz-range-thumb{width:24px;height:24px;border:2px solid var(--v-accent);border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(31,27,24,.28)}
.drx-viz-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(0,0,0,.18),0 2px 6px rgba(31,27,24,.28)}
.drx-viz-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(0,0,0,.18)}

.drx-viz-panel{display:grid;gap:16px}
.drx-viz-controls{display:grid;gap:20px}
.drx-viz-how{padding:18px 18px 16px;border:1px solid var(--v-line);border-radius:var(--v-r);background:var(--v-card)}
.drx-viz h2.drx-viz-h{margin:0 0 12px;font-size:1.25rem;line-height:1.2}
.drx-viz .drx-viz-how ol{display:grid;gap:12px;margin:0 0 14px;padding:0;list-style:none}
.drx-viz .drx-viz-how li{display:flex;align-items:flex-start;gap:12px;margin:0;color:var(--v-ink2);font-size:.95rem;line-height:1.45}
.drx-viz .drx-viz-how li b{color:var(--v-ink)}
.drx-viz-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--v-accent);color:#fff;
  font-size:.84rem;font-weight:700;line-height:1}
.drx-viz-small{margin:0;color:var(--v-soft);font-size:.86rem;line-height:1.5}
.drx-viz-small a{color:var(--v-accent-dk)}

/* the swatches: one row you slide along on a phone, every one in view on anything wider */
.drx-viz-mats legend.drx-viz-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.drx-viz-mat-name{color:var(--v-ink);font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none}
.drx-viz-mat-scroll{display:flex;gap:20px;margin:0;padding:6px 2px 12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding:0 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent)}
.drx-viz-mat-group{flex:none}
.drx-viz-group{margin:0 0 6px;color:var(--v-soft);font-size:.8rem;font-weight:600;white-space:nowrap}
.drx-viz-mat-row{display:flex;gap:10px}
.drx-viz-mat{position:relative;flex:none;width:72px;margin:0;text-align:center;cursor:pointer;scroll-snap-align:start}
.drx-viz-mat input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.drx-viz-sw{display:block;width:62px;height:62px;margin:0 auto;overflow:hidden;border:1px solid var(--v-line);border-radius:12px;
  background:var(--v-cream2);transition:box-shadow .15s,transform .15s}
/* a swatch with no picture and no colour: a plain striped tile, never a broken image icon */
.drx-viz-sw.is-empty{background:repeating-linear-gradient(0deg,#e5e5e5 0 6px,#f6f6f6 6px 12px)}
.drx-viz .drx-viz-sw img{display:block;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover}
.drx-viz-num{display:-webkit-box;margin-top:5px;overflow:hidden;color:var(--v-soft);font-size:.78rem;font-weight:600;line-height:1.2;
  overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.drx-viz-mat input:checked~.drx-viz-sw{box-shadow:0 0 0 2px var(--v-card),0 0 0 4.5px var(--v-accent)}
.drx-viz-mat input:checked~.drx-viz-num{color:var(--v-ink)}
.drx-viz-mat input:focus-visible~.drx-viz-sw{outline:2.5px solid var(--v-ink);outline-offset:6px}
@media (min-width:600px){
  .drx-viz-mat-scroll{flex-wrap:wrap;gap:14px 28px;margin:0;padding:4px 0 0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .drx-viz-mat-group{flex:0 1 auto;min-width:0;max-width:100%}
  .drx-viz-mat-row{flex-wrap:wrap}
}
.drx-viz-fit{display:grid;gap:14px}

/* what to do next */
.drx-viz-actions{display:grid;gap:10px}
.drx-viz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;margin:0;padding:13px 24px;
  border:1.5px solid var(--v-ink);border-radius:100px;background:var(--v-card);color:var(--v-ink);font:inherit;font-size:1rem;
  font-weight:600;line-height:1.2;text-align:center;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.drx-viz a.drx-viz-btn,.drx-viz a.drx-viz-btn:hover{text-decoration:none}
.drx-viz-btn>span{display:inline-flex;align-items:center;gap:9px}
.drx-viz-primary{border-color:var(--v-accent);background:var(--v-accent);color:#fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.drx-viz a.drx-viz-primary{color:#fff}
.drx-viz-btn:disabled{opacity:.55;cursor:default}
.drx-viz-ondark{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12);color:#fff}
.drx-viz-saved{margin:0;padding:9px 12px;border:1px solid #cfe0c8;border-radius:var(--v-rs);background:#e9f1e6;color:#2f4a2a;font-size:.9rem}

/* hover only where there is a pointer that hovers, so a phone never shows a stuck hover state */
@media (hover:hover){
  .drx-viz-go:hover{border-color:var(--v-accent);background-color:var(--v-line)}
  .drx-viz-chip:hover{border-color:var(--v-ink)}
  .drx-viz-textbtn:hover{color:var(--v-ink)}
  .drx-viz-seg-row label:hover>span{color:var(--v-ink)}
  .drx-viz-mat:hover .drx-viz-sw{transform:translateY(-1px)}
  .drx-viz-btn:hover{background:var(--v-ink);color:var(--v-cream)}
  .drx-viz-primary:hover,.drx-viz a.drx-viz-primary:hover{border-color:var(--v-accent-dk);background:var(--v-accent-dk);color:#fff}
  .drx-viz-ondark:hover{background:#fff;color:var(--v-ink)}
}

/* ------------------------------------------- room for two columns (a computer) */
@container (min-width:900px){
  .drx-viz{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:28px;--v-maxh:max(360px,calc(100vh - 270px))}
  .drx-viz-start{min-height:460px}
  .drx-viz-go{flex:1 1 auto;min-height:300px}
  .drx-viz-go-t{font-size:1.72rem}
  .drx-viz-mat{width:62px}
  .drx-viz-sw{width:54px;height:54px}
  .drx-viz-mat-scroll{gap:14px}
  .drx-viz-mat-row{gap:8px}
}
@supports (height:100svh){@container (min-width:900px){.drx-viz{--v-maxh:max(360px,calc(100svh - 270px))}}}

/* the link a WooCommerce product page shows, when switched on */
.drx-viz-link a{font-weight:600}