/* The rate and throttle calculator: the control strip above the chart, and the
   layout that fits both into one viewport. Everything shared with the other
   pages - chrome, chart, readout, prose - is in base.css. */

/* Eight configs plus the controller row is more vertical space than a
   viewport-filling layout has to give, so the block scrolls rather than
   squeezing the chart out of existence. Together with the readout's cap this
   leaves the chart its floor at any height this layout still applies to. */
.controls {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  max-height: 45vh;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

/* One full-width row per config so sliders get real travel. The column count
   is set per row from --param-cols (JS, by how many params this row's model
   actually has), so a two-param model like Legacy throttle splits the row in
   half instead of leaving an empty third column's width unused. Rows with the
   same param count still line up; a model with fewer params trades that
   alignment for sliders worth dragging. */
.config {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(var(--param-cols, 3), minmax(0, 1fr));
  align-items: center;
  gap: 0.25rem 1.6rem;
  padding: 0.3rem 0.55rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--slot-color);
  border-radius: 5px;
}

.config.off {
  opacity: 0.4;
}

.config .slot {
  font: 600 0.75rem var(--mono);
  color: var(--slot-color);
}

.config-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* The label column fits its own text (shrinking below that only if the row
   truly has no room) instead of reserving a fixed 7.8rem for every label
   regardless of how short it is - "Mid" doesn't need the width "Center
   Sensitivity" does, and the slider gets whatever that frees up. */
.param {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(40px, 1fr) 4.2rem;
  align-items: center;
  gap: 0.4rem;
}

.param label {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.param input[type="range"] {
  min-width: 0;
}

/* The one button here that throws something away. */
.topbar #opt-reset-yes:hover {
  color: var(--text);
  border-color: var(--series-h);
}

.param label.has-help {
  cursor: help;
  text-decoration: underline dotted var(--border);
  text-underline-offset: 3px;
}

/* The control strip clips rather than grows; see base.css on why the
   scrollbar is drawn rather than left to the platform's overlay one. */
.controls::-webkit-scrollbar {
  width: 9px;
}

.controls::-webkit-scrollbar-track {
  background: transparent;
}

.controls::-webkit-scrollbar-thumb {
  background: var(--axis);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 5px;
}

.config button,
.pad button {
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  font: 0.72rem var(--mono);
  cursor: pointer;
}

.config button:hover:enabled,
.pad button:hover:enabled {
  color: var(--text);
  border-color: var(--slot-color, var(--axis));
}

.config button:disabled,
.pad button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Stands in for the fit button while a target is being picked, so it sits
   where that button was. The letters carry their curve's chart colour, which
   is the only thing tying them to what they will fit against. */
.config .fit-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.config .fit-pick[hidden] {
  display: none;
}
.config .fit-pick > span {
  color: var(--text-dim);
}
.config button.target {
  border-color: var(--slot-color);
  /* Matching the row's own letter, which is coloured the same way. */
  color: var(--slot-color);
  padding: 0 0.4rem;
}

/* A link holds two curves fitted to each other, so each end's button carries
   the other curve's colour, the way the picker's letters do. */
.config button.link.on {
  color: var(--slot-color);
  border-color: var(--slot-color);
}

/* The trailing group sits at the far end of its row, which puts reset and
   remove in the config's top right corner whether or not the head has wrapped
   onto its own line. Whichever of the two comes first does the pushing. */
.config button.reset,
.config button.del,
.pad button.add {
  margin-left: auto;
}
.config button.reset + button.del {
  margin-left: 0;
}

.config button.reset,
.config button.del {
  padding: 0 0.4rem;
  font-size: 0.95rem;
  line-height: 1.15;
}

/* A parameter wants well over the ~14.5rem its label, slider and value strictly
   need, since the slider is the control being read. Three per row is the widest
   layout used; below 820px even that squeezes them, so they stack. */
@media (max-width: 820px) {
  .config {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One param per row here, so max-content would size each label to its own
     text - "Expo" narrow, "Center Sensitivity" wide - putting every slider at
     a different starting x and throwing off any comparison between a row's
     middle (or any shared value) and the next row's. A fixed width (fitting
     the longest label in use, "Center Sensitivity", plus some slack) keeps
     every slider starting at the same x instead. */
  .param {
    grid-template-columns: 7.5rem minmax(40px, 1fr) 4.2rem;
  }
}

/* The counterpart to base.css's break at the same widths: once the shell is an
   ordinary scrolling document, capping the control strip only clips it. */
@media (max-width: 820px), (max-height: 620px) {
  .controls {
    max-height: none;
    overflow: visible;
  }
}