/*
 * Pop-up 02: o escuro de sempre, com a moldura verde, a capa a esquerda e o
 * botao redondo na ponta direita da linha de baixo. Nada de imagem: a moldura
 * e a borda, e o degrade da capa e o proprio fundo.
 *
 * Medida do catalogo: 500x170.
 */

:root {
    --pp-bg: #1e2226;
    --pp-fg: #f3f5f7;
    --pp-muted: #7b848d;
    --pp-accent: #2ecc9b;
    --pp-accent-fg: #0d1114;
    --pp-line: #3a4149;
}

/*
 * A janela inteira e o cartao: a moldura fica na borda dela. O corpo vira
 * grade para a linha dos controles atravessar de ponta a ponta, embaixo da
 * capa, e nao so ao lado do texto.
 */
/* o fundo da janela e mais fundo que o cartao: assim o canto arredondado
   tem onde apoiar, em vez de mostrar a mesma cor do lado de fora */
body { background: #0e1114; }

.pp--p02 {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 2px 14px;
    height: calc(100% - 14px);
    margin: 7px;
    padding: 12px 14px;
    border: 2px solid var(--pp-accent);
    border-radius: 12px;
    background: var(--pp-bg);
}

.pp--p02 .pp__body { display: contents; }

.pp--p02 .pp__art { grid-row: 1 / 3; align-self: center; }
.pp--p02 .pp__label { grid-column: 2; color: var(--pp-accent); }
.pp--p02 .pp__song { grid-column: 2; }
.pp--p02 .pp__row { grid-column: 1 / -1; margin-top: 10px; }

.pp--p02 .pp__disc {
    width: 74px;
    height: 74px;
    border-radius: 6px;
    background: linear-gradient(150deg, #2b3138, #14181c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.pp--p02 .pp__song { font-size: 17px; }

/* o botao vai para a ponta, como no desenho antigo */
.pp--p02 .pp__play {
    order: 9;
    width: 46px;
    height: 46px;
    margin-left: auto;
}

.pp--p02 .pp__play svg { width: 20px; height: 20px; }
.pp--p02 .pp__range { max-width: 170px; }
.pp--p02 .pp__ico:hover { color: #ffffff; }