/* DoctorX Visualizer 0.5.0, "See it in your window". Phone first: the way in fills the box; once
   there is a picture, the two controls you play with sit right under it, then the materials, the
   fit and what to do next. From 980px the controls stand beside the picture instead of under it. */
.drx-viz{
  --v-ink:var(--ink,#1F1B18); --v-ink2:var(--ink-2,#3B342E); --v-soft:var(--ink-soft,#655C54);
  --v-line:var(--line,#E4DACB); --v-greige:var(--greige,#D9CFC2);
  --v-cream:var(--cream,#F7F3EC); --v-cream2:var(--cream-2,#F1EADF); --v-card:#fff; --v-dark:#27221e;
  --v-bronze:var(--bronze,#B0673C); --v-btn:var(--bronze-btn,#A6613A); --v-dk:var(--bronze-dk,#8E4F2B);
  --v-r:var(--r,16px); --v-rs:var(--r-s,10px);
  /* The picture never grows taller than the screen under the header less the two controls under it, so a
     tall photo and the controls that change it are on screen together (header 76, buttons 50, controls 190). */
  --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 (the trap
   of the checkout's password box, CLAUDE.md 8.5). */
.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 because nginx caches one page for everyone */
@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 are a zebra 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 #cbbba8;border-radius:calc(var(--v-r) - 4px);cursor:pointer;text-align:center;
  background:repeating-linear-gradient(180deg,rgba(176,103,60,.06) 0 18px,rgba(176,103,60,0) 18px 36px),var(--v-cream2);
  transition:border-color .15s,background-color .15s}
.drx-viz-go:active{background-color:#ece2d4}
.drx-viz-go-ico{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--v-btn);color:#fff;
  box-shadow:0 12px 26px -12px rgba(142,79,43,.95)}
.drx-viz-go-t{display:block;max-width:20em;font-family:var(--serif,Georgia,serif);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-bronze);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-dk)}
.drx-viz-chip:active{background:var(--v-cream)}
.drx-viz-msg{margin:0;padding:11px 14px;border:1px solid #efcfb6;border-radius:var(--v-rs);background:#fbeee4;color:#6e3a1d;
  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-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-bronze);background:rgba(247,243,236,.95);color:var(--v-dk);font-size:1.1rem}
.drx-viz-stage.is-over .drx-viz-over{display:flex}
.drx-viz-busy{display:flex;background:rgba(247,243,236,.92);color:var(--v-ink2)}
.drx-viz-spin{width:34px;height:34px;border:3px solid var(--v-greige);border-top-color:var(--v-bronze);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:#efe7dc;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-bronze);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, and the first version of
   this hint sat on top of the two top corners it was telling people to drag. */
.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-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 slider takes the whole 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-dk)}
.drx-viz-seg-row input:focus-visible+span{outline:2.5px solid var(--v-bronze);outline-offset:1px}
/* the slider in the brand's bronze, 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-bronze)}
.drx-viz-range:focus{outline:none}
.drx-viz-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--v-bronze) 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-bronze);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-bronze)}
.drx-viz-range::-moz-range-thumb{width:24px;height:24px;border:2px solid var(--v-bronze);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(176,103,60,.28),0 2px 6px rgba(31,27,24,.28)}
.drx-viz-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(176,103,60,.28)}

.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-btn);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-dk)}

/* the materials: 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 -16px;padding:6px 16px 12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 16px,#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:62px;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;overflow:hidden;border:1px solid var(--v-line);border-radius:12px;
  background:var(--v-cream2);transition:box-shadow .15s,transform .15s}
/* a material we have no photograph of: a plain striped tile, never a broken image icon */
.drx-viz-sw.is-empty{background:repeating-linear-gradient(0deg,#e8e2d8 0 6px,#f6f2ea 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:block;margin-top:5px;color:var(--v-soft);font-size:.88rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.drx-viz-mat input:checked~.drx-viz-sw{box-shadow:0 0 0 2px var(--v-card),0 0 0 4.5px var(--v-bronze)}
.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-btn);background:var(--v-btn);color:#fff;box-shadow:0 10px 24px -12px rgba(142,79,43,.9)}
.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-bronze);background-color:#efe5d8}
  .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-dk);background:var(--v-dk);color:#fff}
  .drx-viz-ondark:hover{background:#fff;color:var(--v-ink)}
}

/* the words under the tool keep a reading width on a page that is now full width */
.drx-viz~p{max-width:68ch;margin-top:28px}

/* ------------------------------------------------------------ a computer */
@media (min-width:980px){
  .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:54px}
  .drx-viz-sw{width:54px;height:54px}
  .drx-viz-mat-scroll{gap:14px}
  .drx-viz-mat-row{gap:8px}
}
@supports (height:100svh){@media (min-width:980px){.drx-viz{--v-maxh:max(360px,calc(100svh - 270px))}}}