/* SHIELD / BAN — страница «Доступ закрыт» (/shield/banned), сообщение на форме входа, предупреждение на /shield/blocked,
 * админка /admin/shield/bans. Только переменные темы (обе темы), телефон — от 360px. Остальная вёрстка страницы — mascot.css (.nf-guard-*). */

/* ---------- таймер снятия блокировки ---------- */
.nf-sb-timer {
	display: block; margin: 0 0 18px; padding: 16px 18px;
	border: 1px solid color-mix(in oklch, var(--destructive) 35%, var(--border));
	background: color-mix(in oklch, var(--destructive) 6%, var(--card-solid, var(--card)));
	border-radius: var(--radius-lg, 14px);
}
.nf-sb-timer .lbl { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted-foreground); text-transform: uppercase; }
.nf-sb-timer .clock {
	display: block; margin: 2px 0 4px; font-size: 44px; line-height: 1.1; font-weight: 700;
	font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--foreground);
}
.nf-sb-timer .when { margin: 0; color: var(--muted-foreground); font-size: 14.5px; line-height: 1.5; }
.nf-sb-timer time { white-space: nowrap; }
.nf-sb-timer [data-nf-ban-done] b { display: block; font-size: 18px; margin: 0 0 10px; color: var(--success, var(--foreground)); }
.is-over .nf-sb-timer, .nf-sb-timer.is-over { border-color: var(--border); background: var(--card-solid, var(--card)); }

.nf-sb-reasons { list-style: none; margin: -4px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nf-sb-reasons li { margin: 0; }

.nf-sb-lead-note { margin: -6px 0 16px; color: var(--muted-foreground); line-height: 1.55; font-size: 14.5px; }
.nf-sb-page .nf-guard-rules a { font-weight: 600; }
/* «Блокировки нет» — спокойный аватар вместо рисунка со знаком «стоп» */
.nf-sb-free .nf-guard-art { max-width: 220px; align-self: center; }

/* ---------- сообщение над формой входа ---------- */
.nf-sb-alert time, .nf-sb-alert [data-nf-ban-left] { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- предупреждение «Попытка N из 3» на странице запрета ---------- */
.nf-sb-warn { border-color: color-mix(in oklch, var(--destructive) 45%, var(--border)); }
.nf-sb-warn b { color: var(--foreground); }
.nf-sb-warn a { font-weight: 600; }

/* ---------- админка ---------- */
.nf-sb-admin .nb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nf-sb-admin .nb-table { min-width: 0; }
.nf-sb-admin .nb-table th, .nf-sb-admin .nb-table td { padding: 9px 12px; vertical-align: middle; }
.nf-sb-admin .nb-table td.when, .nf-sb-admin .nb-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nf-sb-admin .nb-table td.act { white-space: nowrap; width: 1%; }
.nf-sb-admin .nb-table td small { display: block; margin-top: 2px; }
.nf-sb-admin .nb-admin-hint { margin: 0 0 12px; }
.nf-sb-dev { display: block; font-size: 12px; color: var(--muted-foreground); line-height: 1.4; }
.nf-sb-dev code { font-size: 11.5px; }
.nf-sb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-sb-admin form, .nf-sb-actions form { margin: 0; }
.nf-sb-reasons-set { display: grid; gap: 6px; margin: 4px 0 0; }
.nf-sb-num { width: 110px; }

@media (max-width: 760px) {
	.nf-sb-timer { text-align: center; }
	.nf-sb-timer .clock { font-size: 38px; }
	.nf-sb-reasons { justify-content: center; }
	.nf-sb-timer [data-nf-ban-done] .nb-btn { width: 100%; justify-content: center; }

	/* админка на телефоне: строки — карточки (кто, до, кнопка — сверху), без горизонтальной прокрутки */
	.nf-sb-admin .nb-table-wrap { overflow: visible; }
	.nf-sb-admin table.nf-sb-cards, .nf-sb-admin table.nf-sb-cards tbody { display: block; border: 0; background: transparent; }
	.nf-sb-admin table.nf-sb-cards thead { display: none; }
	.nf-sb-admin table.nf-sb-cards tr {
		display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; padding: 10px 12px;
		border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card);
	}
	/* width: auto — admin.css даёт td.num width: 1%, во flex-строке ячейка сжималась, и число наезжало на соседей */
	.nf-sb-admin table.nf-sb-cards td { display: block; padding: 0; border: 0; order: 5; min-width: 0; width: auto; max-width: 100%; text-align: left; }
	.nf-sb-admin table.nf-sb-cards td.empty { order: 0; }
	.nf-sb-admin table.nf-sb-cards td.who { order: 1; font-weight: 600; }
	.nf-sb-admin table.nf-sb-cards td.until { order: 2; }
	.nf-sb-admin table.nf-sb-cards td.act { order: 3; margin-left: auto; width: auto; }
	.nf-sb-admin table.nf-sb-cards td.dev { order: 4; flex-basis: 100%; }
	.nf-sb-admin table.nf-sb-cards td[data-label]::before {
		content: attr(data-label) ": "; color: var(--muted-foreground); font-size: 12px;
	}
	.nf-sb-admin table.nf-sb-cards td.who::before, .nf-sb-admin table.nf-sb-cards td.act::before, .nf-sb-admin table.nf-sb-cards td.dev::before { content: none; }
	.nf-sb-admin table.nf-sb-cards td small { display: inline; margin: 0 0 0 4px; }
}