/* SerpSoar — chart + gap calculator (Charts owner) */

/* ── Evidence chart ─────────────────────────────────────────── */
.ss-chart{
  --ss-chart-pad: clamp(14px, 2vw, 22px);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-2);
  min-width: 0;
}
.ss-chart .fig-label{
  position: absolute;
  top: 10px;
  left: var(--ss-chart-pad);
  z-index: 2;
  pointer-events: none;
}

/* Tabs — primeintellect-style dark boxes */
.ss-chart-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: calc(var(--ss-chart-pad) + 18px) var(--ss-chart-pad) 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.ss-chart-tab{
  appearance: none;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ss-chart-tab:hover{
  color: var(--fg-2);
  border-color: var(--line-2);
}
.ss-chart-tab[aria-selected="true"]{
  background: var(--bg-3);
  color: var(--fg);
  border-color: var(--line-3);
}
.ss-chart-tab:focus-visible{
  outline: 1px solid var(--signal);
  outline-offset: 2px;
}
.ss-chart-tab .tab-num{
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.ss-chart-tab[aria-selected="true"] .tab-num{
  color: var(--fg-3);
}
.ss-chart-tab .tab-name{
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: inherit;
}

/* Body: plot | divider | kv */
.ss-chart-body{
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) 1px minmax(0, 1fr);
  gap: 0;
  min-height: 320px;
  flex: 1;
  position: relative;
}
.ss-chart-divider{
  width: 1px;
  background: transparent;
  border-left: 1px dashed var(--line-2);
  align-self: stretch;
  margin: var(--ss-chart-pad) 0;
}

.ss-chart-plot-wrap{
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--ss-chart-pad);
  padding-top: calc(var(--ss-chart-pad) + 8px);
  gap: 10px;
}
.ss-chart:not(.ss-chart--tabs) .ss-chart-plot-wrap{
  padding-top: calc(var(--ss-chart-pad) + 18px);
}

.ss-chart-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 1.4em;
}
.ss-chart-metric{
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ss-chart-readout{
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 400;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ss-chart-canvas{
  position: relative;
  flex: 1;
  min-height: 240px;
  outline: none;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.ss-chart-canvas:focus-visible{
  outline: 1px solid var(--signal);
  outline-offset: 2px;
}
.ss-chart-canvas svg{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ss-chart-canvas .ss-grid line{
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ss-chart-canvas .ss-y-label,
.ss-chart-canvas .ss-x-label,
.ss-chart-canvas .ss-launch-label,
.ss-chart-canvas .ss-baseline-label{
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--fg-4);
  letter-spacing: .02em;
}
.ss-chart-canvas .ss-baseline-label{
  fill: var(--fg-3);
  paint-order: stroke;
  stroke: var(--bg-1);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.ss-chart-canvas .ss-launch-label{
  fill: var(--fg-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ss-chart-canvas .ss-line-dim{
  fill: none;
  stroke: var(--fg-4);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ss-chart-canvas .ss-line-bright-pre{
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ss-chart-canvas .ss-line-bright-post{
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ss-chart-canvas .ss-baseline{
  stroke: var(--fg-4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  opacity: .7;
}
.ss-chart-canvas .ss-launch{
  stroke: var(--fg-3);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.ss-chart-canvas .ss-playhead{
  stroke: var(--line-3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ss-chart-canvas .ss-dot{
  fill: var(--fg);
  stroke: none;
}
.ss-chart-canvas .ss-dot.is-post{
  fill: var(--signal);
}

/* KV side panel */
.ss-chart-side{
  padding: var(--ss-chart-pad);
  padding-top: calc(var(--ss-chart-pad) + 8px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
}
.ss-chart:not(.ss-chart--tabs) .ss-chart-side{
  padding-top: calc(var(--ss-chart-pad) + 18px);
}
.ss-chart .kv{
  margin: 0;
  width: 100%;
}
.ss-chart .kv-row{
  padding: 8px 0;
}
.ss-chart .kv-row.is-live dd{
  transition: color .15s var(--ease);
}
.ss-chart .kv-row.is-live dd.is-signal{
  color: var(--signal);
}
.ss-chart .kv-row.is-live dd.is-neg{
  color: var(--fg-3);
}
.ss-chart-body.is-fading .ss-chart-plot-wrap,
.ss-chart-body.is-fading .ss-chart-side{
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.ss-chart-body.is-fading-in .ss-chart-plot-wrap,
.ss-chart-body.is-fading-in .ss-chart-side{
  opacity: 1;
  transition: opacity .28s var(--ease);
}

/* Caption under body */
.ss-chart-cap{
  border-top: 1px solid var(--line);
  padding: 10px var(--ss-chart-pad);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ss-chart-cap .fig-label{
  position: static;
  top: auto;
  left: auto;
}
.ss-chart-cap-text{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: .02em;
  line-height: 1.4;
}

@media (max-width: 760px){
  .ss-chart-body{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  .ss-chart-divider{
    width: auto;
    height: 0;
    border-left: none;
    border-top: 1px dashed var(--line-2);
    margin: 0 var(--ss-chart-pad);
  }
  .ss-chart-canvas{
    min-height: 220px;
    height: 240px;
  }
  .ss-chart-side{
    padding-top: 4px;
  }
  .ss-chart-tabs{
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ss-chart-tab{
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .ss-chart-body.is-fading .ss-chart-plot-wrap,
  .ss-chart-body.is-fading .ss-chart-side,
  .ss-chart-body.is-fading-in .ss-chart-plot-wrap,
  .ss-chart-body.is-fading-in .ss-chart-side{
    transition: none;
    opacity: 1;
  }
  .ss-chart-tab{
    transition: none;
  }
}

/* ── Gap calculator ─────────────────────────────────────────── */
.ss-calc{
  --ss-calc-pad: clamp(14px, 2vw, 24px);
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: var(--ss-calc-pad);
  padding-top: calc(var(--ss-calc-pad) + 14px);
  color: var(--fg-2);
}
.ss-calc > .fig-label{
  position: absolute;
  top: 10px;
  left: var(--ss-calc-pad);
}
.ss-calc-head{
  margin: 0 0 18px;
}
.ss-calc-head h3{
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.15;
}
.ss-calc-sub{
  margin: 0;
  font-size: 15px;
  color: var(--fg-3);
  line-height: 1.45;
}

.ss-calc-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

.ss-calc-inputs{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ss-calc-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ss-calc-field label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ss-calc-field-row{
  display: flex;
  align-items: center;
  gap: 12px;
}
.ss-calc-field input[type="number"]{
  appearance: textfield;
  -moz-appearance: textfield;
  width: 100%;
  max-width: 180px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 9px 11px;
  border-radius: 0;
  outline: none;
  transition: border-color .2s var(--ease);
}
.ss-calc-field input[type="number"]::-webkit-outer-spin-button,
.ss-calc-field input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.ss-calc-field input[type="number"]:focus{
  border-color: var(--line-3);
}
.ss-calc-field input[type="number"]:focus-visible{
  outline: 1px solid var(--signal);
  outline-offset: 2px;
}
.ss-calc-range{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ss-calc-range input[type="range"]{
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--line-2);
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
.ss-calc-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--fg);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.ss-calc-range input[type="range"]::-moz-range-thumb{
  width: 14px;
  height: 14px;
  background: var(--fg);
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.ss-calc-range input[type="range"]:focus-visible::-webkit-slider-thumb{
  background: var(--signal);
}
.ss-calc-range input[type="range"]:focus-visible{
  outline: none;
}
.ss-calc-range input[type="range"]:focus-visible::-webkit-slider-runnable-track{
  outline: 1px solid var(--signal);
  outline-offset: 4px;
}
.ss-calc-rval{
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  min-width: 1.6em;
  text-align: right;
}
.ss-calc-hint{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: .02em;
  margin: -4px 0 0;
  min-height: 1.2em;
}

.ss-calc-right{
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ss-calc-bars{
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding-top: 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.ss-calc-bar{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  gap: 4px;
}
.ss-calc-bar-pct{
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.ss-calc-bar.is-current .ss-calc-bar-pct,
.ss-calc-bar.is-target .ss-calc-bar-pct{
  opacity: 1;
}
.ss-calc-bar.is-current .ss-calc-bar-pct{ color: var(--fg-2); }
.ss-calc-bar.is-target .ss-calc-bar-pct{ color: var(--signal); }
.ss-calc-bar-fill{
  width: 100%;
  max-width: 28px;
  background: var(--fg-4);
  height: 0%;
  min-height: 2px;
  transition: height .4s var(--ease), background-color .4s var(--ease);
  align-self: center;
}
.ss-calc-bar.is-current .ss-calc-bar-fill{
  background: var(--fg);
}
.ss-calc-bar.is-target .ss-calc-bar-fill{
  background: var(--signal);
}
.ss-calc-bar.is-current.is-target .ss-calc-bar-fill{
  background: var(--signal);
}
.ss-calc-bar-pos{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 6px;
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ss-calc-bar.is-current .ss-calc-bar-pos{ color: var(--fg-2); }
.ss-calc-bar.is-target .ss-calc-bar-pos{ color: var(--signal); }

.ss-calc-bars-wrap{
  padding-bottom: 22px;
}

.ss-calc-out .kv{
  margin: 0;
}
.ss-calc-out .kv-row{
  padding: 9px 0;
}
.ss-calc-out .kv-row.is-emphasis dd{
  font-size: 18px;
  color: var(--signal);
  letter-spacing: -0.01em;
}
.ss-calc-out .kv-row dd.is-signal{
  color: var(--signal);
}

.ss-calc-foot{
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-4);
}
.ss-calc-foot a{
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.ss-calc-foot a:hover{
  color: var(--fg-2);
}
.ss-calc-foot sup{
  font-size: .75em;
  line-height: 0;
}

@media (max-width: 760px){
  .ss-calc-grid{
    grid-template-columns: 1fr;
  }
  .ss-calc-bars{
    height: 120px;
    gap: 3px;
  }
  .ss-calc-bar-fill{
    max-width: 22px;
  }
  .ss-calc-bar-pct{
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce){
  .ss-calc-bar-fill,
  .ss-calc-bar-pct,
  .ss-calc-field input[type="number"],
  .ss-calc-range input[type="range"]::-webkit-slider-thumb{
    transition: none;
  }
}