/* ====================================================================
   Stanchion Systems — Forex Calculators
   Split from stanchion_trading_calculators.html. All selectors scoped
   under .calc-tool, and result classes namespaced (calc-result*) so they
   never clash with resources.css (.res-card etc.) on the same page.
   ==================================================================== */

/* TABS */
.calc-tool .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;}
.calc-tool .tab{padding:9px 18px;border-radius:5px;border:1.5px solid var(--border);background:transparent;
  color:var(--grey2);font-size:13px;font-family:Calibri,sans-serif;cursor:pointer;
  transition:all .15s;white-space:nowrap;}
.calc-tool .tab.active{background:var(--charcoal);border-color:var(--charcoal);color:#FAFAF7;font-weight:600;}
.calc-tool .tab:hover:not(.active){border-color:var(--accent);color:var(--accent);}

/* PANEL */
.calc-tool .panel{display:none;}
.calc-tool .panel.active{display:block;}
.calc-tool .panel-inner{background:#fff;border:1px solid var(--border);border-radius:10px;padding:28px;}

/* FIELDS */
.calc-tool .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.calc-tool .field-grid.cols3{grid-template-columns:1fr 1fr 1fr;}
.calc-tool .field{display:flex;flex-direction:column;gap:6px;}
.calc-tool .field label{font-size:12px;font-weight:600;color:var(--charcoal);letter-spacing:.02em;}
.calc-tool .field small{font-size:11px;color:var(--grey3);margin-top:-2px;}
.calc-tool .field input,.calc-tool .field select{
  padding:9px 12px;border:1.5px solid var(--border);border-radius:5px;
  font-family:Calibri,sans-serif;font-size:14px;color:#333;background:#fff;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.calc-tool .field input:focus,.calc-tool .field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,137,123,.08);
}
.calc-tool .field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AAAAAA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}

/* RESULTS (namespaced to avoid clashing with .res-card in resources.css) */
.calc-tool .calc-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:20px;}
.calc-tool .calc-result{background:#F7F7F5;border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.calc-tool .calc-result.highlight{background:var(--accent-tint);border-color:rgba(0,137,123,.25);}
.calc-tool .calc-result-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey3);margin-bottom:5px;}
.calc-tool .calc-result-value{font-size:22px;font-weight:700;color:var(--charcoal);}
.calc-tool .calc-result-value.accent{color:var(--accent);}
.calc-tool .calc-result-value.neg{color:var(--neg);}

/* TABLE */
.calc-tool table.calc-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:20px;}
.calc-tool table.calc-table th{background:#F2F2EF;padding:9px 12px;text-align:left;font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey2);
  border-bottom:2px solid var(--border);}
.calc-tool table.calc-table td{padding:8px 12px;border-bottom:1px solid var(--border);color:#333;}
.calc-tool table.calc-table tr:last-child td{border-bottom:none;}
.calc-tool table.calc-table .acc{color:var(--accent);font-weight:600;}

/* NOTE */
.calc-tool .calc-note{font-size:12px;color:var(--grey3);line-height:1.6;margin-top:16px;padding:12px 16px;
  background:#FAFAF7;border-radius:6px;border-left:3px solid var(--border);}

@media(max-width:600px){
  .calc-tool .field-grid{grid-template-columns:1fr;}
  .calc-tool .field-grid.cols3{grid-template-columns:1fr;}
  .calc-tool .tabs{gap:4px;}
  .calc-tool .tab{font-size:12px;padding:7px 12px;}
}