/* Source: src/styles/calculator-input-panel.css */
/* Match the white canvas behind the cards on the Re-Up Calendar calculator. */
body{
  background:#fff!important;
}
.fs-panel-heading-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.fs-panel-heading-row .reset{
  flex:0 0 auto;
  margin:2px 0 0!important;
  padding:0!important;
}
.primary-result,
.hero-result{
  padding-block:19px 20px!important;
  background:#033b56!important;
  color:#fff!important;
}
.primary-result .label,
.primary-result .result-label,
.primary-result .primary-value,
.primary-result .primary-number,
.primary-result>p,
.primary-result .primary-context,
.hero-result .hero-label,
.hero-result .hero-value,
.hero-result .hero-context{
  color:#fff!important;
}
.primary-result .primary-value,
.primary-result .primary-number,
.hero-result .hero-value{
  margin-top:6px!important;
}
.primary-result>p,
.hero-result .hero-context{
  margin-top:7px!important;
}
/* Match the card typography established by the route-comparison calculator. */
.chart-card .chart-heading h3,
.chart-card>h3,
.formula-card h3{
  font-size:24px!important;
  line-height:1.2!important;
}
.chart-card .chart-heading p,
.chart-card>.chart-copy,
.chart-card>.chart-description,
.formula-card .formula{
  font-size:15px!important;
  line-height:1.55!important;
}
/* Let chart explanations use the card width instead of an arbitrary text cap. */
.chart-card .chart-heading>div{
  flex:1 1 auto!important;
  min-width:0!important;
}
.chart-card .chart-heading p,
.chart-card>.chart-copy,
.chart-card>.chart-description{
  width:100%!important;
  max-width:none!important;
}
.chart-card .legend,
.chart-card .chart-tag,
.chart-card .chart-status span,
.chart-card svg text,
.summary-card p,
.summary-card span,
.metric span,
.metric small,
.metric-label,
.metric-note,
.insight span,
.architecture span,
.architecture small,
.formula-card .formula-note{
  font-size:11px!important;
}
.summary-card strong,
.metric b,
.metric-value,
.architecture b{
  font-size:24px!important;
  line-height:1.15!important;
}
.insight b{
  font-size:15px!important;
  line-height:1.35!important;
}
/* Give unprefixed values a comfortable inset without widening symbol-prefixed fields. */
.input-panel :is(.input-box,.input-wrap,.advanced-number,.advanced-input-wrap)>input:first-child,
.forecast-panel :is(.input-box,.input-wrap,.advanced-number,.advanced-input-wrap)>input:first-child{
  padding-left:14px!important;
}
/* Keep the institutional question as one editorial block, without nested boxes. */
.question-examples ul{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}
.question-examples li,
.question-examples li.primary-question,
.question-examples .primary-question{
  grid-column:auto!important;
  margin:0!important;
  padding:11px 0!important;
  border:0!important;
  background:transparent!important;
  color:#33343d!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  line-height:1.45!important;
}
.question-examples li+li{
  margin-top:2px!important;
}
@media(min-width:901px){
  .input-panel,
  .forecast-panel{
    width:390px!important;
    max-width:390px!important;
  }
  .input-panel .field-grid,
  .forecast-panel .field-grid,
  .input-panel .advanced-pair,
  .forecast-panel .advanced-pair{
    grid-template-columns:338px!important;
  }
  .input-panel .split-row,
  .forecast-panel .split-row{
    flex-direction:column!important;
  }
  .input-panel :is(.input-box,.input-wrap,.advanced-number,.advanced-input-wrap),
  .forecast-panel :is(.input-box,.input-wrap,.advanced-number,.advanced-input-wrap){
    width:338px!important;
    max-width:338px!important;
    flex:none!important;
  }
  .input-panel .slider-row .input-box,
  .forecast-panel .slider-row .input-box{
    width:86px!important;
    max-width:86px!important;
  }
}
@media(min-width:841px){
  .input-panel,
  .forecast-panel{
    padding-left:29px!important;
  }
}
/* Full-bleed tonal sections keep their existing field alignment. */
@media(min-width:841px){
  .input-panel--fee-carry>.input-group{
    margin-right:-23px!important;
    margin-left:-29px!important;
    padding-right:29px!important;
    padding-left:29px!important;
  }
  .input-panel--allocation-capacity>.input-group{
    margin-right:-25px!important;
    margin-left:-29px!important;
    padding-right:25px!important;
    padding-left:29px!important;
  }
  .input-panel--liquidity-stress>.input-group{
    margin-right:-24px!important;
    margin-left:-29px!important;
    padding-right:24px!important;
    padding-left:29px!important;
  }
}
@media(min-width:561px) and (max-width:840px){
  .input-panel--fee-carry>.input-group{
    margin-inline:-23px!important;
    padding-inline:29px!important;
  }
  .input-panel--allocation-capacity>.input-group{
    margin-inline:-25px!important;
    padding-inline:25px!important;
  }
  .input-panel--liquidity-stress>.input-group{
    margin-inline:-24px!important;
    padding-inline:24px!important;
  }
}
@media(min-width:841px){
  .input-panel--route-comparison>.input-group{
    margin-right:0!important;
    margin-left:-29px!important;
    padding-right:16px!important;
    padding-left:29px!important;
  }
}
@media(max-width:560px){
  .input-panel--fee-carry>.input-group{
    margin-inline:-17px!important;
    padding-inline:23px!important;
  }
  .input-panel--allocation-capacity>.input-group,
  .input-panel--liquidity-stress>.input-group{
    margin-inline:-17px!important;
    padding-inline:17px!important;
  }
}
.fs-resizable-input-panel{
  isolation:isolate;
  translate:var(--fs-input-panel-outer-shift,0) 0;
}
.fs-input-panel-side-grip{
  position:fixed;
  top:var(--fs-input-panel-grip-top,0);
  left:var(--fs-input-panel-grip-left,0);
  z-index:100;
  width:12px;
  height:var(--fs-input-panel-grip-height,0);
  padding:0;
  border:0;
  background:transparent;
  cursor:ew-resize;
  touch-action:none;
}
.fs-input-panel-side-grip::after{
  position:absolute;
  top:50%;
  left:2px;
  width:3px;
  height:46px;
  border-right:1px solid #b9b5ac;
  border-left:1px solid #d7d3ca;
  content:"";
  opacity:0;
  transform:translateY(-50%);
  transition:opacity .14s ease;
}
.fs-input-panel-side-grip:hover::after,
.fs-input-panel-side-grip:focus-visible::after{
  border-color:#9b783d;
  opacity:1;
}
.fs-input-panel-side-grip:focus-visible{
  outline:2px solid #9b783d;
  outline-offset:-2px;
}
.fs-resizable-input-panel.fs-input-panel-widened{
  z-index:90!important;
  width:var(--fs-input-panel-width)!important;
  max-width:calc(100vw - var(--fs-input-panel-left) - 12px)!important;
  transform:none!important;
  background:#fff!important;
  box-shadow:0 24px 65px rgba(21,22,25,.2)!important;
}
.fs-input-panel-resizing,
.fs-input-panel-resizing *{
  cursor:ew-resize!important;
  user-select:none!important;
}
@media(max-width:900px){
  .fs-input-panel-side-grip{display:none}
  .fs-resizable-input-panel.fs-input-panel-widened{
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    box-shadow:none!important;
  }
}
@media(max-width:560px){
  .primary-result,
  .hero-result{
    padding-block:17px 18px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .fs-input-panel-side-grip::after{transition:none}
}