/* ============================================================
   Alpha Finance: /tools/ calculators.
   The calculator panel: inputs left, the answer right. Everything
   computes locally in the browser; live prices only prefill fields.
   Loaded after alpha.css, article.css and liqs.css (hero, panels,
   tabs and cards come from liqs.css).
   ============================================================ */

/* ---------- layout ---------- */

.calc-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
/* both panels run to the same height, so the two feet line up */
.calc-grid .lpanel { display: flex; flex-direction: column; }
.calc-grid .lpanel-body { flex: 1; }

/* ---------- form ---------- */

.cform { padding: 22px 24px 24px; }
.cfield { padding: 0 0 18px; }
.cfield:last-child { padding-bottom: 0; }
.cfield label,
.cfield .lab {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
/* the plain-English gloss beside a label that carries a term of art */
.cfield .opt { margin-left: 7px; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.cfield input[type="number"],
.cfield select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 0 13px;
  height: 42px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cfield select { cursor: pointer; }
.cfield input[type="number"]:focus,
.cfield select:focus { outline: 1px solid var(--lime); outline-offset: -1px; }
.cfield input[type="number"]::-webkit-outer-spin-button,
.cfield input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.cfield input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* two fields on one row */
.crow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* input with a unit chip on the right */
.cunit { position: relative; }
.cunit input { padding-right: 44px; }
.cunit i {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--faint);
  pointer-events: none;
}

/* side picker: two halves of one control, matching input height */
.cseg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
}
.cseg button {
  border: 0;
  border-radius: 3px;
  background: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.cseg button:hover { color: var(--text-2); }
.cseg button.on { color: #0a0b0d; background: var(--lime); font-weight: 600; }

/* leverage: one control, dragged on the track or typed in the box */
.clev { display: flex; align-items: center; gap: 14px; }
.clev input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 3px;
  accent-color: var(--lime);
  cursor: pointer;
}
.clev .clev-n { position: relative; flex: none; width: 92px; }
.clev .clev-n input { width: 100%; text-align: center; padding: 0 20px 0 10px; }
.clev .clev-n i {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  pointer-events: none;
}

/* live-price prefill line under a field */
.clive {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.clive button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--lime);
  cursor: pointer;
}
.clive button:hover { text-decoration: underline; }

/* a plain-English line under a field, so a label never has to carry the
   explanation on its own */
.chint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.chint b {
  color: var(--text-2);
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* an input with its common settings beside it */
.cwith { display: flex; align-items: center; gap: 8px; }
.cwith .cunit { flex: 1; min-width: 0; }
.cchips { display: flex; gap: 4px; }
.cchips button {
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cchips button:hover { color: var(--text); }
.cchips button.on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--lime) 50%, var(--line-2));
  background: color-mix(in srgb, var(--lime) 9%, transparent);
}
/* the presets that sit under a pair of price fields */
.cchips-row { align-items: center; gap: 6px; margin-top: -6px; }
.cchips-row button { height: 30px; padding: 0 10px; }
.cchips-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

/* ---------- results ---------- */

.lpanel-body.cres { padding: 22px 24px 24px; }
.cres .big-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cres .big-v {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 9px 0 4px;
  font-variant-numeric: tabular-nums;
}
.cres .big-v.side-long { color: var(--pos-text); }
.cres .big-v.side-short { color: var(--neg-text); }
.cres .big-s {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.cres-rows { margin-top: 22px; border-top: 1px solid var(--line); }
.cres-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.cres-row .k { font-size: 13px; color: var(--text-2); }
.cres-row .v {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cres-row .v.pos { color: var(--pos-text); }
.cres-row .v.neg { color: var(--neg-text); }
.cres-row .v.dim { color: var(--muted); }

/* the market-context line: live price and the road to liquidation */
.cctx {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.cctx b { color: var(--text); font-variant-numeric: tabular-nums; }
.cctx a { color: var(--lime); }
.cctx a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cwarn {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--neg) 45%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--neg) 7%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.cwarn:empty, .cwarn.hide { display: none; }


/* ---------- the trade on one axis: stop, entry, 2R, 3R ---------- */

.cladder { margin: 22px 0 2px; transition: opacity 0.2s; }
.cladder.is-idle { opacity: 0.3; }
.cl-track {
  position: relative;
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-2);
}
.cl-loss { flex: 1; background: color-mix(in srgb, var(--neg) 72%, transparent); }
.cl-gain { flex: 3; background: color-mix(in srgb, var(--pos) 58%, transparent); }
.cl-track u {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--panel);
}
.cl-labs { position: relative; height: 50px; margin-top: 10px; }
.cl-lab {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
}
.cl-lab.mid { transform: translateX(-50%); align-items: center; }
.cl-lab.end { right: 0; align-items: flex-end; }
.cl-lab b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cl-lab i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.cl-lab em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cl-lab em.pos { color: var(--pos-text); }
.cl-lab em.neg { color: var(--neg-text); }

/* ---------- tools hub cards ---------- */

.tool-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tool-card {
  display: block;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
  padding: 22px 24px 20px;
  transition: border-color 0.15s;
}
.tool-card:hover { border-color: color-mix(in srgb, var(--lime) 45%, var(--line-2)); }
.tool-card .tc-ic {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--lime);
  margin-bottom: 14px;
}
.tool-card .tc-ic svg { width: 100%; height: 100%; display: block; }
.tool-card h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 7px;
}
.tool-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.tool-card .tc-go {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}
.tool-card.soon { opacity: 0.55; pointer-events: none; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .calc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tool-cards { grid-template-columns: 1fr; }
  .cl-lab b { font-size: 11.5px; }
  .cl-lab em { font-size: 10px; }
}
@media (max-width: 560px) {
  /* four price labels will not fit a phone, so 2R drops and the rest shrink */
  .cl-lab.r2 { display: none; }
  .cl-track u:last-child { display: none; }
  .cl-lab b { font-size: 10.5px; }
  .cl-lab em { font-size: 9.5px; }
  .cchips-row { flex-wrap: wrap; }
}

/* ---------- tools hub as a board ---------- */
.tool-cards {
  gap: 1px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--line);
}
.tool-cards .desk-sub {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  background: var(--panel-2);
}
.tool-cards .desk-sub::after { display: none; }
.tool-card { border: 0; border-radius: 0; background: var(--bg); transition: background 0.15s; }
.tool-card:hover { background: var(--panel); }
.tool-card .tc-ic { color: var(--muted); }
.tool-card .tc-go {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.tool-card:hover .tc-go { color: var(--text); text-decoration-color: currentColor; }
.tool-card.soon { opacity: 1; }
.tool-card.soon h3 { color: var(--text-2); }
.tool-card.soon .tc-go { text-decoration: none; color: var(--muted); }

/* the hero used to end on the status line, whose margin gave the dek its
   breathing room; with the line gone the hero pads itself */
body.tools .liqshero { padding-bottom: 28px; }