/* Страница очереди тестов */

.queue { padding-block: var(--space-6) var(--space-8); }

.queue__head {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: var(--space-2) var(--space-4);
}

.queue__title {
 font-size: clamp(26px, 4vw, 38px);
 line-height: 1.12;
 letter-spacing: -.02em;
 font-weight: 700;
}

.queue__meta {
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--fg-3);
}

.queue__sub {
 margin-top: var(--space-2);
 font-size: 15px;
 color: var(--fg-2);
 max-width: 60ch;
}

.queue__hint {
 margin-top: 6px;
 font-size: 12.5px;
 color: var(--fg-3);
 max-width: 66ch;
}

/* Список ограничен по высоте: на экране около десяти строк, остальное внутри */

.queue-list {
 margin-top: var(--space-4);
 max-height: 460px;
 overflow-y: auto;
 overscroll-behavior: contain;
 border-top: 1px solid var(--line);
 padding: 0;
 list-style: none;
 counter-reset: qrow;
 scrollbar-width: thin;
}

.queue-list::-webkit-scrollbar { width: 8px; }
.queue-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.queue-row {
 counter-increment: qrow;
 display: grid;
 grid-template-columns: 38px minmax(0, 1fr) 104px 84px 146px;
 align-items: center;
 gap: var(--space-3);
 padding: 9px 4px;
 border-bottom: 1px solid var(--line);
}

.queue-row__num {
 font-family: var(--font-mono);
 font-size: 11.5px;
 color: var(--fg-3);
}

.queue-row__num::before {
 content: counter(qrow, decimal-leading-zero);
}

.queue-row__body { min-width: 0; }

.queue-row__name {
 display: block;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-align: left;
 font-size: 14px;
 font-weight: 600;
 color: var(--fg);
 cursor: pointer;
}

.queue-row__name:hover { color: var(--accent); }

.queue-row__cat {
 display: block;
 margin-top: 1px;
 font-size: 11px;
 color: var(--fg-3);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.queue-row__chats {
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--fg-3);
 white-space: nowrap;
}

.queue-row__votes {
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--fg-2);
 white-space: nowrap;
}

.queue-row__votes b { color: var(--accent); }

.queue-row__btn {
 min-height: 28px;
 padding: 0 9px;
 font-size: 11px;
}

.queue-row__btn[disabled] { opacity: .55; cursor: default; }

.queue__empty {
 margin-top: var(--space-5);
 font-size: 14px;
 color: var(--fg-3);
}

.queue__note {
 margin-top: var(--space-5);
 padding-top: var(--space-4);
 border-top: 1px solid var(--line);
 font-size: 12px;
 color: var(--fg-3);
 max-width: 66ch;
}

@media (max-width: 900px) {
 .queue-list { max-height: 520px; }
 .queue-row {
 grid-template-columns: 30px minmax(0, 1fr) 88px;
 row-gap: 4px;
 }
 .queue-row__chats { grid-column: 2; }
 .queue-row__votes { grid-column: 2; }
 .queue-row__btn { grid-column: 3; grid-row: 1 / span 3; align-self: center; width: 100%; }
}

@media (max-width: 559px) {
 .queue-row { grid-template-columns: 26px minmax(0, 1fr); }
 .queue-row__btn { grid-column: 2; grid-row: auto; margin-top: 4px; }
 .queue-row__chats, .queue-row__votes { grid-column: 2; }
}