/* The drawdown tool. Loaded beside styles.css by any page carrying it. */
/* choosing an account, above the boxes it fills */
.preset{background:#070c12;border-bottom:1px solid var(--line);padding:18px 20px 16px;}
.preset .pl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-dim);margin-bottom:11px;}
.preset .prow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.preset .src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey-dim);}
.preset .src a{color:#8fd4ea;}
.preset .src .stale{color:var(--warn);font-weight:600;}
.preset .warn-line{display:block;margin-top:12px;font-size:13px;line-height:1.55;color:#b4c2cf;
  border-left:2px solid var(--warn);padding-left:12px;}

/* the tool asks what kind of rule it is looking at before it answers */
.calc .copts .seg.three button{padding:10px 13px;}
.cfield[hidden]{display:none;}
.calc .sublabel{display:block;margin-top:9px;font-size:12.5px;line-height:1.5;color:#6f7f8e;}
.cout .both{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px;}
@media(min-width:620px){.cout .both{grid-template-columns:1fr 1fr;}}
.cout .both div{background:#05080d;padding:14px 16px;}
.cout .both .bk{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-dim);}
.cout .both .bv{display:block;margin-top:7px;font-family:var(--mono);font-size:22px;color:var(--cyan);}
.cout .unsure{margin-top:14px;font-size:13.5px;line-height:1.6;color:#b4c2cf;
  border-left:2px solid var(--warn);padding-left:13px;}

/* choosing in steps, so the list stays short however many profiles there are */
.preset .pl-hint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:none;color:#6f7f8e;margin-left:8px;}
.pcascade{display:grid;gap:14px;}
.prow{display:grid;gap:9px;}
@media(min-width:760px){.prow{grid-template-columns:78px 1fr;align-items:start;gap:16px;}}
.prow[hidden]{display:none;}
.prow .pk{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-dim);padding-top:11px;}
.ptiles{display:flex;gap:8px;flex-wrap:wrap;}
.ptiles button{background:#05080d;border:1px solid var(--line-bright);color:#cfdae5;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;padding:10px 14px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;}
.ptiles button:hover{border-color:rgba(79,216,255,.5);color:var(--white);}
.ptiles button.on{background:var(--cyan);border-color:var(--cyan);color:#03111a;font-weight:700;}
.ptiles button.only{cursor:default;}
.ptiles button.only:hover{border-color:var(--cyan);}

.pchosen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line);}
.pchosen[hidden]{display:none;}
.pc-what{font-family:var(--mono);font-size:12.5px;color:var(--white);}
.pc-clear{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:7px 11px;cursor:pointer;margin-left:auto;transition:color .2s,border-color .2s;}
.pc-clear:hover{color:var(--white);border-color:var(--cyan);}


/* ------------------------------------------------------------- the stage
 * The tool is the picture. Money runs up the side, the limit sits where the
 * numbers put it, and the two things a trader actually moves, the account and
 * its highest point, are handles on the picture rather than boxes below it. */
.stage{background:#05080d;border-bottom:1px solid var(--line);padding:20px 20px 16px;}
.st-plot{position:relative;height:340px;touch-action:none;cursor:ns-resize;
  border-left:1px solid #1b2733;}
.st-zone{position:absolute;left:0;right:0;bottom:0;background:
  repeating-linear-gradient(135deg,rgba(255,122,77,.045) 0 7px,transparent 7px 14px);
  border-top:0;transition:top .18s ease;}
.st-room{position:absolute;left:0;right:0;background:rgba(79,216,255,.10);
  border-left:2px solid rgba(79,216,255,.45);transition:top .18s ease,height .18s ease;}
.st-line{position:absolute;left:0;right:0;height:0;display:flex;align-items:center;gap:10px;
  transition:top .18s ease;}
.st-line::before{content:'';position:absolute;left:0;right:0;top:0;border-top:1px solid;}
.st-line i{position:relative;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;background:#05080d;padding:0 8px 0 10px;
  white-space:nowrap;}
.st-line b{position:relative;margin-left:auto;font-family:var(--mono);font-size:14px;
  background:#05080d;padding:0 2px 0 8px;}
.st-ghost::before{border-top-style:dashed;border-color:#2b3945;}
.st-ghost i{color:#5d7183;}
.st-lock::before{border-top-style:dashed;border-color:#8fd4ea;}
.st-lock i{color:#8fd4ea;}
.st-hwm::before{border-color:#44586a;}
.st-hwm i{color:#7b8e9e;}
.st-hwm b{color:#9fb1bf;}
.st-limit::before{border-top-width:2px;border-color:var(--cyan);}
.st-limit i{color:var(--cyan);}
.st-limit b{color:var(--cyan);font-size:15px;font-weight:600;}
.st-now::before{border-top-width:2px;border-color:var(--white);}
.st-now i{color:var(--white);}
.st-now b{color:var(--white);font-size:15px;font-weight:600;}
.stage.breached .st-limit::before{border-color:var(--warn);}
.stage.breached .st-limit i,.stage.breached .st-limit b{color:var(--warn);}
.stage.breached .st-room{background:rgba(255,122,77,.12);border-left-color:var(--warn);}
.st-line[hidden]{display:none;}
.grip{position:absolute;left:-8px;width:15px;height:15px;border-radius:50%;
  background:#05080d;border:2px solid currentColor;cursor:grab;z-index:3;}
.st-now .grip{color:var(--white);box-shadow:0 0 0 5px rgba(244,248,251,.10);}
.st-hwm .grip{color:#7b8e9e;}
.st-plot.dragging .grip{cursor:grabbing;}
.st-tag{position:absolute;left:14px;top:0;display:flex;flex-direction:column;gap:5px;
  z-index:2;pointer-events:none;}
.st-tag span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-dim);}
.st-tag b{font-family:var(--mono);font-size:30px;line-height:1;color:var(--cyan);}
.stage.breached .st-tag b{color:var(--warn);}
.st-hint{position:absolute;left:10px;bottom:-4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:#4d5e6c;pointer-events:none;
  transition:opacity .3s ease;}
.st-plot.touched .st-hint{opacity:0;}
@media(max-width:620px){
  .stage{padding:16px 14px 14px;}
  .st-plot{height:300px;}
  .st-line i{font-size:9px;letter-spacing:.1em;padding:0 6px 0 8px;}
  .st-line b{font-size:12.5px;}
  .st-tag b{font-size:23px;}
}

/* the rule, in one line, with the questions folded behind it */
.cstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;background:#070c12;border-bottom:1px solid var(--line);}
.cs-sum{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#b4c2cf;}
.cs-sum b{color:var(--white);font-weight:600;}
.cs-edit{margin-left:auto;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:8px 12px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease;}
.cs-edit:hover{color:var(--white);border-color:var(--cyan);}
.cs-edit.open{color:var(--cyan);border-color:var(--cyan);}
.csettings[hidden]{display:none;}
.csettings{border-bottom:1px solid var(--line);}
@media(max-width:620px){.cstrip{padding:12px 14px;}.cs-edit{margin-left:0;}}