@import url("./palette.css?v=20261017-live-rounds1");

.live-room-config {
  display: grid;
  gap: 1.25rem;
  text-align: left;
}
.live-room-config label,
.live-room-config__timings label {
  display: grid;
  gap: 0.45rem;
  color: color-mix(in srgb, var(--clr-primary-400) 35%, var(--clr-text));
  font-size: 0.88rem;
  font-weight: 600;
}
.live-room-config input,
.live-room-config select,
.live-room-config__timings input,
.live-room-config__timings select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid
    color-mix(in srgb, var(--clr-primary-400) 10%, var(--clr-border));
  border-radius: 12px;
  background: var(--clr-surface);
  color: color-mix(in srgb, var(--clr-primary-400) 35%, var(--clr-text));
  padding: 0.65rem 0.8rem;
  font: inherit;
}
.live-room-config input:focus-visible,
.live-room-config select:focus-visible,
.live-room-config__timings input:focus-visible,
.live-room-config__timings select:focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--clr-text-subtle) 35%, var(--clr-border));
  outline-offset: 2px;
}
.live-room-config__single,
.live-room-config__durations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.live-room-config__durations {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.live-room-config__timings {
  display: grid;
  gap: 0.85rem;
}
.live-room-config__summary {
  margin: 0;
  padding: 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--clr-border) 20%, var(--clr-bg));
  color: color-mix(in srgb, var(--clr-primary-400) 35%, var(--clr-text));
  font-size: 0.9rem;
  line-height: 1.6;
}
.live-room-config__hint {
  margin: 0;
  color: color-mix(in srgb, var(--clr-text) 50%, var(--clr-text-subtle));
  font-size: 0.8rem;
}
.live-room-config__submit {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0.8rem 1.15rem;
  background: color-mix(in srgb, var(--clr-primary-400) 35%, var(--clr-text));
  color: var(--clr-surface);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.live-room-config__submit:disabled {
  opacity: 0.65;
  cursor: wait;
}
.live-room-config__error {
  margin: 0;
  color: color-mix(in srgb, var(--clr-text) 50%, var(--clr-focus));
  font-size: 0.9rem;
}
.live-room-config [hidden],
.live-room-config__timings[hidden],
.live-room-config__timings [hidden] {
  display: none !important;
}
@media (max-width: 540px) {
  .live-room-config__durations {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}