/* ==========================================================================
   DISKUSIA

   Strohá a hustá. Komentár nie je karta — nemá rám ani pozadie, oddeľuje ho
   len odstup a pri odpovediach zvislá linka. Vďaka tomu sa dlhá diskusia dá
   prejsť očami zhora nadol bez toho, aby ju rozbíjali rámčeky.
   ========================================================================== */

.sq-disc {
	margin-top: var(--sq-space-48);
	padding-top: var(--sq-space-32);
	border-top: 1px solid var(--sq-border);
}

.sq-disc__head {
	display: flex;
	align-items: baseline;
	gap: var(--sq-space-12);
	margin-bottom: var(--sq-space-24);
}

.sq-disc__title {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-h3);
}

.sq-disc__count {
	font-size: var(--sq-fs-ui);
	color: var(--sq-text-tertiary);
}

.sq-disc__empty,
.sq-disc__login,
.sq-disc__closed {
	color: var(--sq-text-secondary);
	font-size: var(--sq-fs-ui);
}

.sq-disc__login a {
	color: var(--sq-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Formulár ----------------------------------------------------------- */

.sq-disc__form {
	margin-bottom: var(--sq-space-32);
}

.sq-disc__form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: var(--sq-space-12);
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	background: var(--sq-surface);
	color: var(--sq-text);
	font: inherit;
	resize: vertical;
}

.sq-disc__form textarea:focus-visible {
	border-color: var(--sq-accent);
	outline: none;
}

.sq-disc__submit {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--sq-space-8);
}

.sq-disc__replyto {
	display: flex;
	align-items: baseline;
	gap: var(--sq-space-8);
	margin-bottom: var(--sq-space-8);
	font-size: var(--sq-fs-ui);
	color: var(--sq-text-secondary);
}

.sq-disc__replyto-cancel {
	border: 0;
	background: none;
	color: var(--sq-accent);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

/* ---- Zoznam ------------------------------------------------------------- */

.sq-disc__list,
.sq-disc__replies {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-disc__item + .sq-disc__item {
	margin-top: var(--sq-space-24);
}

/* Odpovede sa odsadia a spája ich zvislá linka — hĺbku tak vidno bez rámov. */
.sq-disc__replies {
	margin: var(--sq-space-16) 0 0 var(--sq-space-16);
	padding-left: var(--sq-space-16);
	border-left: 1px solid var(--sq-border);
}

.sq-cmt__head {
	display: flex;
	align-items: baseline;
	gap: var(--sq-space-8);
	margin-bottom: var(--sq-space-4, 4px);
}

.sq-cmt__author {
	font-weight: 700;
	font-size: var(--sq-fs-ui);
}

.sq-cmt__time {
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
}

.sq-cmt__text {
	color: var(--sq-text);
	font-size: var(--sq-fs-body);
	line-height: 1.6;
}

.sq-cmt__text p {
	margin: 0 0 var(--sq-space-8);
}

.sq-cmt__text p:last-child {
	margin-bottom: 0;
}

.sq-cmt__actions {
	display: flex;
	align-items: center;
	gap: var(--sq-space-16);
	margin-top: var(--sq-space-8);
}

.sq-cmt__reply {
	border: 0;
	background: none;
	padding: 0;
	color: var(--sq-text-tertiary);
	font: inherit;
	font-size: var(--sq-fs-micro);
	cursor: pointer;
}

.sq-cmt__reply:hover,
.sq-cmt__reply:focus-visible {
	color: var(--sq-accent);
}

/* ---- Hlasovanie --------------------------------------------------------- */

.sq-vote {
	display: inline-flex;
	align-items: center;
	gap: var(--sq-space-8);
}

.sq-vote__btn {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: var(--sq-radius-sm, 4px);
	background: none;
	color: var(--sq-text-tertiary);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.sq-vote__btn:hover,
.sq-vote__btn:focus-visible {
	color: var(--sq-text);
	background: var(--sq-elevated);
}

.sq-vote__btn.is-on {
	color: var(--sq-accent);
}

.sq-vote__score {
	min-width: 1.5rem;
	text-align: center;
	font-size: var(--sq-fs-micro);
	font-weight: 700;
	color: var(--sq-text-secondary);
	font-variant-numeric: tabular-nums;
}