/* CLAUDE 10-09: Text > Auto lyrics (app-lyrics.js) and Text > AI writer (app-writer.js). The same radio rows, greys and
   44 px targets as Tracking and Text to speech (editor.css), so a phone sheet needs nothing more. */
.ly,
.wr {
  display: grid;
  gap: 10px;
}
.ly-songs,
.ly-where,
.wr-kinds {
  display: grid;
  gap: 4px;
}
.ly-where {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ly-where legend {
  padding: 0 0 4px;
  font-size: 12px;
  color: #b0b0b3;
}
.ly-song,
.ly-where label,
.wr-kind,
.wr-how {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #3a3a3d;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.ly-song:has(input:checked),
.ly-where label:has(input:checked),
.wr-kind:has(input:checked),
.wr-how:has(input:checked) {
  border-color: #afafb2;
  background: #29292b;
}
.ly-song:has(input:focus-visible),
.ly-where label:has(input:focus-visible),
.wr-kind:has(input:focus-visible),
.wr-how:has(input:focus-visible) {
  outline: 2px solid #8ab4ff;
  outline-offset: 1px;
}
.ly label.ly-song input[type='radio'],
.ly .ly-where label input[type='radio'],
.wr label.wr-kind input[type='radio'],
.wr label.wr-how input[type='radio'] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}
.ly-song span,
.ly-where label span,
.wr-kind span {
  display: grid;
  min-width: 0;
}
.ly-song small,
.ly-where small,
.wr-kind small {
  color: #9a9a9f;
  font-size: 11px;
}
.ly-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed #3a3a3d;
  border-radius: 8px;
  color: #b0b0b3;
  font-size: 13px;
}
.ly-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: #151517;
  border: 1px solid #28282a;
  font-size: 12px;
  line-height: 1.4;
  color: #d4d4d8;
}
.ly-note[hidden] {
  display: none;
}
.ly-go,
.wr-go {
  display: flex;
  gap: 8px;
}
.ly-go .primary,
.wr-go .primary {
  flex: 1;
}
.ly-go button,
.wr-go button {
  min-height: 44px;
}
.ly progress,
.wr progress {
  width: 100%;
}
.ly-msg.error,
.wr-msg.error {
  color: #ff8a80;
}
.wr-hows {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wr-hows[hidden] {
  display: none;
}
.wr-how {
  flex: 1 1 0;
  justify-content: center;
  min-width: 84px;
}
.wr-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wr-opt {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #3a3a3d;
  border-radius: 8px;
  background: #1a1a1c;
  color: #ececf0;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.wr-opt:hover {
  border-color: #afafb2;
  background: #29292b;
}
.wr-opt:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 1px;
}
.cc-writer {
  display: grid;
  gap: 8px;
}