/* The lab widget. Loaded beside styles.css by any page carrying a tool. */

.intent.toolup{margin:58px 0;padding-bottom:0;}

/* what the reader walks away with, said before they touch anything */
.toolwhat{border-left:2px solid var(--cyan);padding-left:14px;color:#b4c2cf;}
.toolwhat b{color:var(--white);}

.lab{background:#05080d;border-bottom:1px solid var(--line);padding:20px 20px 16px;}

.lab-head{margin-bottom:16px;}
.lab-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);}
.lab-ask{margin:7px 0 0;font-size:15.5px;line-height:1.55;color:#cfdae5;max-width:64ch;}
.lab-ask b{color:var(--white);font-weight:600;}
.lab.asking .lab-k{color:var(--warn);}

/* the picture: shapes in an SVG that stretches, every word in HTML on top */
.lab-body{display:flex;gap:10px;}
.lab-y{position:relative;width:46px;flex:none;}
.lab-y span{position:absolute;right:0;transform:translateY(-50%);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.06em;color:#3f4e5b;}
.lab-plot{position:relative;flex:1 1 auto;height:320px;touch-action:none;cursor:crosshair;
  border-left:1px solid #1b2733;border-bottom:1px solid #1b2733;}
.lab:not(.asking) .lab-plot{cursor:ns-resize;}
.lab-plot svg{display:block;width:100%;height:100%;overflow:visible;}

.lab-bar{fill:#123a49;transition:height .55s cubic-bezier(.2,.8,.3,1),y .55s cubic-bezier(.2,.8,.3,1),fill .25s ease;}
.lab-bar.over{fill:#4a2a19;}
.lab-bar.sel{fill:#1f6079;}
.lab-bar.over.sel{fill:#7a4124;}
.lab.dragging .lab-bar{transition:fill .15s ease;}

/* the reader's own hand */
.lab-todo{stroke:#18222c;stroke-width:1;stroke-dasharray:2 7;}
.lab-drawn{fill:none;stroke:var(--white);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.lab-dot{fill:var(--white);}
.lab:not(.asking) .lab-drawn{stroke:#7e93a3;stroke-width:1.5;stroke-dasharray:5 4;}
.lab:not(.asking) .lab-dot{fill:#7e93a3;}

.lab-tips{position:absolute;inset:0;pointer-events:none;}
.lab-tip{position:absolute;transform:translate(-50%,-135%);font-family:var(--mono);
  font-size:11px;color:#6f8b99;white-space:nowrap;transition:top .55s cubic-bezier(.2,.8,.3,1);}
.lab-tip.over{color:var(--warn);}
.lab-tip.sel{color:var(--cyan);font-size:12.5px;font-weight:600;}
.lab-tip.over.sel{color:var(--warn);}

.lab-rule{position:absolute;left:0;right:0;height:0;z-index:3;transition:top .18s ease;}
.lab-rule[hidden]{display:none;}
.lab-rule::before{content:'';position:absolute;left:0;right:0;top:0;border-top:2px solid var(--white);}
.lab-rule:focus{outline:none;}
.lab-rule:focus-visible::before{border-color:var(--cyan);}
.lab-grip{position:absolute;left:-8px;top:-8px;width:15px;height:15px;border-radius:50%;
  background:#05080d;border:2px solid var(--white);cursor:grab;
  box-shadow:0 0 0 5px rgba(244,248,251,.10);}
.lab.dragging .lab-grip{cursor:grabbing;}
.lab-rv{position:absolute;right:0;top:-11px;font-family:var(--mono);font-size:14px;
  font-weight:600;color:var(--white);background:#05080d;padding:2px 3px 2px 10px;white-space:nowrap;}
.lab-rv i{font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-dim);font-weight:400;margin-right:9px;}

.lab-mark{position:absolute;inset:0;display:none;align-items:flex-start;justify-content:center;padding-top:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#22303c;pointer-events:none;text-align:center;}
.lab.asking .lab-mark{display:flex;}

.lab-stamp{margin-top:10px;text-align:right;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#35454f;}
.lab.asking .lab-stamp{display:none;}

.lab-x{display:flex;margin:9px 0 0 56px;}
.lab-x button{background:transparent;border:none;padding:3px 0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#5d7183;cursor:pointer;
  overflow:hidden;white-space:nowrap;transition:color .2s ease;}
.lab-x button span{pointer-events:none;}
.lab-x button:hover{color:#cfdae5;}
.lab-x button.on{color:var(--cyan);font-weight:700;}
.lab.asking .lab-x button{cursor:default;color:#3f4e5b;}

.lab-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;}
.lab-foot[hidden]{display:none;}
.lab-go{background:var(--cyan);border:none;color:#03111a;font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:13px 20px;cursor:pointer;
  transition:filter .2s ease,opacity .2s ease;}
.lab-go:hover{filter:brightness(1.12);}
.lab-go:disabled{opacity:.28;cursor:default;filter:none;}
.lab-tally{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-dim);}
.lab-tally[hidden]{display:none;}
.lab-go[hidden]{display:none;}
.lab-again{background:transparent;border:1px solid var(--line-bright);color:var(--grey-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 13px;cursor:pointer;transition:color .2s ease,border-color .2s ease;}
.lab-again:hover{color:var(--white);border-color:var(--cyan);}
.lab-again[hidden]{display:none;}
.lab.asking .lab-again{margin-left:auto;}

@media(max-width:620px){
  .lab{padding:16px 14px 14px;}
  .lab-body{gap:7px;}
  .lab-y{width:34px;}
  .lab-plot{height:260px;}
  .lab-tip{font-size:10px;}
  .lab-x{margin-left:41px;}
  .lab-x button{font-size:9px;letter-spacing:0;overflow:visible;}
  .lab-x button:not(.key) span{visibility:hidden;}
  .lab-rv{font-size:12px;}
  .lab-rv i{display:none;}
  .lab-stamp{font-size:7.5px;letter-spacing:.06em;}
}