/* Phone screen, used standing up, in the dark, with a drink in the other hand:
   big targets and no small type. Mesma folha do anfitrião — as seções se separam por um
   fio, e a única cor de fundo é a música que está esperando confirmação. */
body {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 3rem;
}

header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.2rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
}

.identity {
  flex: 1;
  min-width: 0;
}

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin: 0;
}

/* De quem é a festa. Fica embaixo do título, do tamanho de legenda: identifica sem
   disputar com o nome da tela. */
#party-name {
  margin: 0.15rem 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main > section {
  padding: 1.1rem 1.2rem;
  border-top: 1px solid var(--hairline);
}

/* O nome de quem canta abre a tela e não tem fio em cima: é o começo da folha. */
.you {
  border-top: 0;
  padding-bottom: 0.4rem;
}

.you .field {
  margin: 0;
}

/* O "trocar" mora dentro do campo, na ponta direita, e o texto digitado abre espaço pra
   ele — senão um nome comprido passava por baixo do botão. */
.locking {
  position: relative;
  display: grid;
}

.locking input[readonly] {
  padding-right: 5.5rem;
  color: var(--text);
}

/* Trancado, o campo deixa de parecer campo: sem cursor de texto e sem o piscar do foco,
   porque não há nada pra digitar até alguém pedir pra trocar. */
.locking input[readonly]:focus {
  outline: none;
}

#swap-name {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  padding: 0.5em 0.7em;
  border: 0;
  background: none;
  color: var(--accent-2);
  font-size: 0.95rem;
}

/* Fields and the search dropdown live in base.css: both screens use them. */

/* --- what was picked, awaiting confirmation --- */
/* A mesma faixa rosa do "cantando agora" do anfitrião: é o eco visual entre as duas
   telas, e aqui é a única coisa que pede uma decisão. */
#picked {
  border-top: 0;
  background: linear-gradient(180deg, rgb(255 77 141 / 14%), transparent);
}

#picked[hidden] {
  display: none;
}

.pick-label {
  margin: 0;
}

.pick {
  margin: 0.5rem 0 1rem;
  line-height: 1.15;
}

.pick .singer {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
}

.pick .title {
  display: block;
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-top: 0.4rem;
}

#picked .buttons {
  display: grid;
  /* Confirm gets twice the width of change: they carry different weight and the thumb
     has to hit the right one without looking. */
  grid-template-columns: 2fr 1fr;
  gap: 0.7rem;
}

#picked button {
  padding: 0.9em 0.6em;
}

#picked .note {
  margin: 0.9rem 0 0;
  color: var(--text-faint);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* --- search --- */
.search-section .field {
  margin: 0.8rem 0 0;
}

/* --- queue-closed / party-over notice --- */
#closed-note {
  margin: 0;
  padding: 1rem 1.2rem;
  background: rgb(255 255 255 / 4%);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
}

#closed-note[hidden] {
  display: none;
}

#closed-note.over {
  background: linear-gradient(180deg, rgb(255 77 141 / 16%), transparent);
}

#message {
  margin: 0.6rem 0 0;
  min-height: 1.2em;
  font-size: 0.95rem;
  color: var(--text-dim);
}

#message.error {
  color: var(--danger);
}

#message.ok {
  color: var(--accent-2);
}

/* Sem recado nenhum, a linha some. O min-height existe pra frase que chega não empurrar o
   que está embaixo; guardar esse espaço a noite inteira só afasta a busca das duas saídas
   que vêm logo abaixo dela. */
#message:empty {
  min-height: 0;
  margin: 0;
}

/* --- the queue, numbered --- */
#queue {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

#queue li {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 1rem;
  background: rgb(255 255 255 / 4%);
  border-radius: 16px;
}

/* Quem canta agora não é posição nenhuma na fila: é o que está acontecendo, e por isso a
   coluna do número abre pra caber a palavra. */
#queue li.playing {
  grid-template-columns: auto 1fr;
  background: rgb(70 227 192 / 10%);
}

#queue li.playing .place {
  color: var(--accent-2);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* A sua linha é a única rosa: numa lista de dez nomes parecidos, é assim que você acha a
   sua sem ler nenhum. */
#queue li.mine {
  background: rgb(255 77 141 / 16%);
}

#queue li.mine .place {
  color: var(--accent);
  font-weight: 600;
}

#queue li.mine .title {
  color: var(--accent-soft);
}

.place {
  font-family: var(--mono);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.singer {
  font-weight: 600;
  font-size: 1rem;
}

.title {
  display: block;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

#queue li.empty {
  grid-template-columns: 1fr;
  color: var(--text-faint);
}