/* Production workspaces use the same controls on touch and desktop. */
.look-entry {
  margin: 0.7rem 0;
  padding: 0.7rem;
  background: linear-gradient(135deg, #292227, #19191c);
  border: 1px solid #45363b;
  border-radius: 9px;
}
.look-entry > small,
.director-strip > b,
.sound-list small {
  display: block;
  color: #e5cd72;
  font: 650 0.62rem/1.4 monospace;
  letter-spacing: 0.12em;
}
.look-entry > button {
  width: 100%;
  margin: 0.4rem 0;
}
.look-entry div,
.prod-grid,
.director-strip {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}
.look-entry div button {
  font-size: 0.65rem;
  flex: 1;
}
.prod-grid button,
.camera-list label,
.sound-list article,
.mix-list > div {
  border: 1px solid #38383c;
  background: #1b1b1e;
  border-radius: 0.5rem;
}
.prod-grid button,
.mix-list button,
.sound-list button,
.director-strip button {
  padding: 0.45rem 0.6rem;
}
.prod-grid {
  margin: 1rem 0;
}
.camera-list,
.mix-list,
.sound-list {
  display: grid;
  gap: 0.45rem;
  max-height: 44vh;
  overflow: auto;
  margin: 1rem 0;
}
.camera-list label,
.mix-list > div,
.sound-list article {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem;
}
.camera-list img {
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 0.2rem;
}
.mix-list strong,
.sound-list article > div {
  margin-right: auto;
}
.sound-list b {
  display: block;
}
.sound-list [hidden] {
  display: none;
}
.director-strip {
  background: #161616;
  padding: 0.35rem 0.65rem;
  border-top: 1px solid #363239;
  justify-content: center;
}
.director-strip button {
  font-size: 0.72rem;
}
.director-strip [aria-pressed='true'] {
  background: #a42329;
  color: white;
}
.director-strip select {
  width: auto;
}
.scene-pin,
.cut-tick {
  position: absolute;
  top: 0;
  color: #f5d94e;
  z-index: 2;
  border: 0;
  background: none;
  padding: 0;
}
.cut-tick {
  height: 10px;
  border-left: 2px solid #fc635f;
  pointer-events: none;
}
.trackcontent .ruler {
  position: relative;
}
.compare-note {
  color: #f5d94e;
  padding: 0.45rem;
  font-size: 0.78rem;
}
#placement {
  position: absolute;
  pointer-events: none;
  border: 1px solid #f5d94e;
  z-index: 1;
  box-sizing: border-box;
}
#placement[hidden] {
  display: none;
}
#placement button {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 15px;
  height: 15px;
  border: 2px solid #0a0a0a;
  background: #f5d94e;
  border-radius: 3px;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
  padding: 0;
}
#stage {
  position: relative;
}
.timelinebar > div {
  overflow-x: auto;
}
.timelinebar > div > * {
  flex-shrink: 0;
}
.sound-list article b {
  font-size: 0.9rem;
}
@media (max-width: 800px) {
  .director-strip {
    max-height: 5rem;
    overflow: auto;
  }
  .mix-list > div {
    flex-wrap: wrap;
  }
  .prod-grid button {
    min-height: 38px;
  }
  .director-strip select {
    max-width: 85px;
  }
}

.grade-row {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1/-1;
}
.grade-row label {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
}
.grade-row output {
  font-variant-numeric: tabular-nums;
  color: #eee;
}
.grade-row input {
  width: 100%;
  grid-column: 1/-1;
  accent-color: #d62828;
}
.grade-row .grade-reset {
  width: 32px;
  height: 32px;
  padding: 7px;
}
.grade-reset span {
  display: none;
}

#mix-view {
  width: 100%;
  max-height: 24vh;
  background: #0a0a0a;
  border-radius: 8px;
}
.mix-controls details {
  padding: 0.6rem 0;
  border-bottom: 1px solid #393939;
}
.mix-controls summary {
  cursor: pointer;
  font-weight: 650;
}
.mix-controls label {
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0.5rem 0;
}
.mix-controls label input[type='range'] {
  grid-column: 1/-1;
  width: 100%;
  accent-color: #d62828;
}
.mix-controls output {
  font-variant-numeric: tabular-nums;
}

.wheel-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
}
.wheel-line small {
  max-width: 20ch;
  color: #bdbdc3;
}
#mix-wheel {
  touch-action: none;
  position: relative;
  flex: 0 0 100px;
  height: 100px;
  border: 1px solid #555;
  border-radius: 50%;
  cursor: crosshair;
  background:
    radial-gradient(circle, #ddd 0%, #ccc6 38%, transparent 70%),
    conic-gradient(from 90deg, #fa4844, #c93ada, #4475ef, #42c7da, #5ad866, #eed645, #fa4844);
}
#mix-wheel i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0 0 0 1px #161616;
  pointer-events: none;
}

/* Use the available inspector width for fine numeric adjustments. */
#right .grade-row {
  align-items: end;
  gap: 8px;
  padding-block: 4px;
}
#right .grade-row label {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  font-size: 12px;
}
#right .grade-row label > input[type='range'] {
  grid-column: 1/-1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: 24px;
}
#right .grade-row output {
  color: #e2c76e;
  min-width: 2.5ch;
  text-align: right;
}
#right .grade-row .grade-reset {
  flex: none;
  margin-bottom: 0;
}
@media (max-width: 760px) {
  #right .grade-row .grade-reset {
    width: 36px;
    height: 34px;
  }
}