/* Shared controls for the trading calculators. */
.calculator-section .quick-guide, .calculator-section .calculator-guide { margin: 12px 0 0; }

.calculator-grid .panel-heading { gap: 4px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.form-actions { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.calculator-grid .form-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  min-height: 44px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-link:hover { color: var(--ink); }
.form-result { display: none; }
.example-badge {
  width: fit-content;
  display: inline-block;
  color: #e5e5eb;
  background: #353537;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 13px;
  line-height: 1.4;
}
.result-heading > div, .results-heading > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.results-heading .net-outcome { flex-basis: 100%; }
.calculator-grid .calculate-button { font-size: 15px; }
.plot-reading { font-weight: 500; }

@media (max-width: 767px) {
  .form-result {
    display: block;
    margin-bottom: 12px;
    border-radius: 12px;
    background: #202022;
    color: #f7f7f8;
  }
  .form-result-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: inherit;
    font-size: 14px;
    line-height: 1.35;
  }
  .form-result strong { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .form-result [data-outcome=profit] { color: #63e2a4; }
  .form-result [data-outcome=loss] { color: #ff9b9b; }
}

/* The shared working view keeps the form and its main result in the same frame. */
.compact-workspace .calculator-grid {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.compact-workspace .calculator-grid > :is(.position-panel, .input-panel, .results-panel) {
  min-height: 0;
  padding: 16px 24px 20px;
  border-radius: 24px;
}
.compact-workspace .panel-heading h2 { font-size: 22px; line-height: 1.2; }
.compact-workspace .panel-heading .reset-button { min-height: 44px; font-size: 14px; }
.compact-workspace .calculator-grid :is(.field-label, .field-heading label, .field > label) { font-size: 14px; }
.compact-workspace .field-label-row, .compact-workspace .field-heading { min-height: 24px; margin-bottom: 4px; }
.compact-workspace .calculator-grid .field-hint { font-size: 13px; line-height: 1.4; margin-top: 4px; }
.compact-workspace .field-tooltip { font-size: 14px; }
.compact-workspace .fields-grid { gap: 8px 12px; }
.compact-workspace .calculator-grid :is(.input-wrap, .strategy-trigger, .stepper, .money-control, .number-control, .select-control) { min-height: 44px; height: auto; border-radius: 10px; }
.compact-workspace .calculator-grid :is(.input-wrap input, .money-control input, .number-control input, .target-input-wrap input, .stepper input) { padding-block: 8px; min-height: 44px; font-size: 16px; }
.compact-workspace .calculator-grid :is(select, .strategy-trigger) { min-height: 44px; height: auto; font-size: 15px; }
.compact-workspace .calculator-grid :is(.calculate-button, .settings-trigger, .funding-trigger) { min-height: 44px; margin: 0; padding-block: 6px; }
.compact-workspace .calculator-grid .calculate-button { border-radius: 10px; }
.compact-workspace .calculator-grid :is(.settings-trigger #settings-summary, .funding-trigger small) { margin-top: 2px; font-size: 13px; }
.compact-workspace .settings-trigger > span > span:first-child { font-size: 14px; }
.compact-workspace :is(.results-heading, .result-heading) { gap: 8px; }
.compact-workspace :is(.results-heading, .result-heading) h2 { margin: 0; font-size: 15px; line-height: 1.4; }
.compact-workspace .results-heading > div > :is(.scenario-profit, .position-size, .pip-value, p) { flex-basis: 100%; }
.compact-workspace :is(.scenario-profit, .position-size strong, .pip-value, .balance) {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
}
.compact-workspace .results-panel :is(.scenario-description, .unit-result, .volume-note, .result-label, .result-context) {
  margin: 4px 0 0;
  min-height: 0;
  font-size: 14px;
  line-height: 1.4;
}
.compact-workspace :is(.metric-grid, .result-facts) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  margin-block: 12px;
}
.compact-workspace :is(.metric-grid, .result-facts) > div { display: block; }
.compact-workspace :is(.metric-grid span, .result-facts dt) { display: block; margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
.compact-workspace :is(.metric-grid strong, .result-facts dd) { display: block; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.2; }
.compact-workspace .chart-tabs { padding: 0; gap: 4px; align-self: start; border-radius: 10px; background: transparent; margin: 0; }
.compact-workspace :is(.chart-tabs, .view-tabs) button { min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.compact-workspace :is(.chart-tabs, .view-tabs) button[aria-selected=true] { background: #353537; }
.compact-workspace .results-panel :is(.share-button, .icon-button) { min-height: 44px; border-radius: 8px; font-size: 14px; }
.compact-workspace .results-panel :is(.scenario-table, .table-scroll table) { font-size: 14px; }
.compact-workspace .results-panel :is(.scenario-table, .table-scroll table) :is(th, td) { padding: 8px 6px; overflow-wrap: anywhere; }
.compact-workspace .results-panel :is(.scenario-table, .table-scroll table) th { font-size: 13px; }
.compact-workspace .results-panel :is(.chart-note, .table-note, .inspect-detail, .slider-labels, .chart-legend) { font-size: 13px; }
.compact-workspace :is(.guide-grid, .guide-steps) h3 { font-size: 16px; font-weight: 500; }
.compact-workspace :is(.guide-grid p, .guide-steps p, .guide-results) { font-size: 14px; }
.compact-workspace .calculator-grid .form-result-link:focus-visible { outline-offset: 2px; }
.compact-workspace :is(.results-panel, #calculator-guide) { scroll-margin-top: 88px; }

@media (max-width: 1023px) {
  .compact-workspace .calculator-grid { grid-template-columns: minmax(275px, 320px) minmax(0, 1fr); }
  .compact-workspace .calculator-grid > :is(.position-panel, .input-panel, .results-panel) { padding-inline: 16px; }
}
@media (max-width: 767px) {
  .compact-workspace .calculator-grid { grid-template-columns: minmax(0, 1fr); }
  .compact-workspace .calculator-grid > :is(.position-panel, .input-panel, .results-panel) { padding-block: 12px 16px; }
  .compact-workspace .panel-heading h2 { font-size: 20px; }
  .compact-workspace :is(.chart-tabs, .view-tabs) button { padding-inline: 8px; }
}
@media (pointer: coarse) {
  .compact-workspace .calculator-grid :is(.field-help-button, .help-button) { min-width: 32px; min-height: 32px; }
}