/* Grid Scale and the Ratio Lanes (ratio.js, ratio-ui.js): in the instrument's own black, cream and orange, its type and
   its quiet lines. Each lane is a row of master steps under a voice's steps, spaced as the step grid is spaced */
.grid-scale {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #5b5b52;
  border-radius: 2px;
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 0.09em;
  color: var(--muted);
  white-space: nowrap;
}
.grid-scale b {
  font:
    700 12px "Courier New",
    monospace;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.grid-scale i {
  font-style: normal;
}
.grid-scale i:empty {
  display: none;
}
.grid-scale.scaled {
  border-color: var(--orange);
  color: var(--orange);
  background: #ff571d0c;
}
.grid-scale.scaled b {
  color: var(--orange);
}
@media (hover: hover) {
  .grid-scale:hover b {
    color: var(--orange);
  }
}
.track.has-ratio {
  row-gap: 3px;
  padding-bottom: 7px;
}
.rl-head {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 0 0 31px;
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 0.12em;
  color: #8f8d82;
  text-align: left;
}
.rl-head .rl-live {
  display: none;
  font:
    700 10px "Courier New",
    monospace;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.rl-head.playing .rl-live {
  display: inline;
}
.rl-head.playing.off-master .rl-live {
  color: var(--orange);
}
.rl-lane {
  grid-column: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--rl-cells, 16), minmax(0, 1fr));
  gap: 6px;
  height: 17px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.rl-cell {
  grid-row: 1;
  position: relative;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #3a3a33;
  border-radius: 0;
  background: none;
  touch-action: pan-y;
}
.rl-cell.beat {
  border-bottom-color: #6f6e63;
}
.rl-cell.change::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 2px;
  bottom: -1px;
  width: 2px;
  background: var(--orange);
}
.rl-cell.picked {
  background: #ff571d26;
  box-shadow: inset 0 0 0 1px #ff571d99;
}
.rl-cell.playing {
  border-bottom: 2px solid var(--orange);
}
.rl-cell:disabled {
  opacity: 0.25;
  cursor: default;
}
.rl-cell:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  z-index: 2;
}
.rl-run {
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: calc(100% - 1px);
  padding: 0 3px;
  overflow: hidden;
  pointer-events: none;
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rl-run svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rl-run svg line {
  stroke: #edeadf;
  stroke-opacity: 0.32;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.rl-run b,
.rl-run i {
  position: relative;
  padding: 0 2px;
  background: var(--bg);
  font-style: normal;
}
.rl-run.grid b {
  font-weight: 400;
  color: #75746a;
}
.rl-run.grid i {
  color: #75746a;
}
.rl-run.set {
  background: linear-gradient(#edeadf17, #edeadf08);
  box-shadow: inset 0 1px #edeadf4d;
}
.rl-run.set svg line {
  stroke-opacity: 0.55;
}
.rl-run.set b {
  font:
    700 9px "Courier New",
    monospace;
  color: var(--cream);
}
.rl-run.set i {
  color: #a3a196;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* at 1/32 and finer the steps run without gaps, a sixteenth to each group of cells: so do the lanes, each step kept
   apart by a margin instead */
.fine-grid .rl-lane {
  gap: 0;
}
.fine-grid .rl-cell {
  margin: 0 2px;
}
.step.unreached {
  opacity: 0.4;
  border-style: dashed;
}
#stepNumbers > .playing {
  color: var(--orange);
}
@media (max-width: 1180px) {
  .rl-lane {
    gap: 4px;
  }
  .rl-head {
    padding-left: 25px;
  }
}
@media (max-width: 930px) {
  .rl-lane {
    gap: 3px;
  }
  .rl-head {
    padding-left: 22px;
  }
}
@media (max-width: 720px) {
  .rl-lane {
    gap: 5px;
    height: 21px;
  }
  .rl-head {
    padding-left: 27px;
  }
  .sequence-length-controls {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}
@media (max-width: 390px) {
  /* the heading above the steps, as it came 24 px wider than a 320 px screen: its tools go under its name when they
     do not fit beside it */
  .sequence > .section-heading {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .rl-lane {
    gap: 4px;
  }
  .rl-head {
    padding-left: 23px;
  }
}
@media (pointer: coarse) {
  .rl-lane {
    height: 24px;
  }
}
/* the picker: one list of ratios for Grid Scale and the lanes, beside what it sets (a sheet from the foot on a phone) */
.ratio-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(430px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 15px 17px 17px;
  background: #11110f;
  border: 1px solid #737363;
  border-radius: 3px;
  box-shadow: 0 18px 50px #000b;
}
.ratio-picker::backdrop {
  background: #0006;
  backdrop-filter: none;
}
.ratio-picker.sheet {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-height: 86dvh;
  border-width: 1px 0 0;
  border-radius: 4px 4px 0 0;
  padding: 15px 16px calc(17px + env(safe-area-inset-bottom));
}
.rp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.rp-head h3 {
  margin: 5px 0 0;
  font:
    21px Anton,
    "Arial Narrow",
    Arial,
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.rp-close {
  font-size: 22px;
  line-height: 1;
  padding: 0 3px;
}
.rp-note {
  min-height: 30px;
  margin: 10px 0 2px;
  font:
    10px "Courier New",
    monospace;
  line-height: 1.5;
  color: var(--muted);
}
.rp-group {
  margin-top: 10px;
}
.rp-group > .micro {
  display: block;
  margin-bottom: 6px;
  font-size: 8px;
}
.rp-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.rp-ratio {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 6px 7px 7px;
  border: 1px solid #3f3f38;
  border-radius: 2px;
  background: #151513;
  text-align: left;
}
.rp-ratio b {
  font:
    21px Anton,
    "Arial Narrow",
    Arial,
    sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.rp-ratio small {
  font:
    7px "Courier New",
    monospace;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.rp-ratio em {
  font:
    8px "Courier New",
    monospace;
  font-style: normal;
  color: #86857a;
  white-space: nowrap;
}
.rp-ratio[aria-pressed="true"] b {
  color: var(--orange);
}
@media (hover: hover) {
  .rp-ratio:hover b {
    color: var(--orange);
  }
}
.rp-ratio[aria-pressed="true"] {
  border-color: var(--orange);
  background: #ff571d14;
}
.rp-glyph {
  width: 100%;
  height: 12px;
}
.rp-glyph line {
  stroke: #8b897e;
  stroke-width: 1;
}
.rp-glyph .meet {
  stroke: var(--orange);
}
.rp-glyph .axis {
  stroke: #3a3a33;
}
.rp-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rp-extra .small-button {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 10px;
}
.rp-extra .small-button span {
  margin-left: 6px;
  font-size: 8px;
  color: var(--muted);
}
.rp-extra .small-button[aria-pressed="true"] {
  border-color: var(--orange);
  color: var(--orange);
}
.rp-extra .text-button {
  font-size: 10px;
}
@media (max-width: 390px) {
  .rp-row {
    gap: 4px;
  }
  .rp-ratio {
    padding: 5px 5px 6px;
  }
  .rp-ratio b {
    font-size: 19px;
  }
  .rp-ratio em {
    font-size: 7px;
  }
}
/* The menus' room (Cyrus, 17 Oct 2026, of SEQ LAST showing "3" and half a "2" for 32: "Yes", fix it): as sent, four
   kinds of the instrument's menus were narrower than their longest choice once the browser had drawn its own arrow
   in them, and cut it. SEQ LAST is as wide as two figures need (at 53 px Chromium left them 10); the roll's two shape
   menus as wide as ALTERNATE (they were held to 100 px); the step's own menus (PLAY EVERY, and a sample's SLICE and
   DIRECTION), four to a row, keep less of their padding, and on a phone a smaller size, for CYCLE and FORWARD. (On a
   phone the output channel's menus take a row each, in the shared page part, ui/cx-chain.css.) */
.sequence-length-controls select {
  width: 64px;
}
.roll-curve select {
  max-width: 100%;
}
.step-control select {
  padding-left: 6px;
  padding-right: 12px;
}
@media (max-width: 480px) {
  .step-control select {
    font-size: 10px;
  }
}