/* ====== Ściana Karteczek — style ====== */

/* ---------- Formularz ---------- */
.sk-form-card {
	max-width: 460px; margin: 0 auto; padding: 26px;
	border-radius: 18px; background: #0b1220; color: #e6edf6;
	box-shadow: 0 18px 50px rgba(8, 16, 32, .35);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sk-form-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #fff; }
.sk-form-desc { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #9fb0c5; }
.sk-text {
	width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; resize: vertical;
	color: #e6edf6; background: #131c2e; border: 1px solid #24314a; border-radius: 12px;
	font-family: inherit;
}
.sk-text:focus { outline: none; border-color: #f4b740; box-shadow: 0 0 0 3px rgba(244, 183, 64, .22); }
.sk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sk-submit {
	width: 100%; margin-top: 12px; padding: 13px 16px; font-size: 16px; font-weight: 600;
	color: #2a1e00; background: linear-gradient(180deg, #ffd874, #f4b740);
	border: none; border-radius: 12px; cursor: pointer; transition: transform .08s, filter .15s;
}
.sk-submit:hover { filter: brightness(1.05); }
.sk-submit:active { transform: translateY(1px); }
.sk-submit:disabled { opacity: .6; cursor: default; }
.sk-message { min-height: 20px; margin: 12px 0 0; font-size: 14px; }
.sk-message--error { color: #fb7185; }
.sk-message--info { color: #9fb0c5; }
.sk-message--success { color: #4ade80; }

/* ---------- Ściana ---------- */
.sk-wall-wrap { position: relative; }
.sk-wall { position: relative; width: 100%; overflow: hidden; border-radius: 16px; }
.sk-wall-wrap:not(.sk-obs) .sk-wall { background: #0e1424; box-shadow: 0 10px 40px rgba(8, 16, 32, .18); }
.sk-obs .sk-wall { background: transparent; border-radius: 0; }
.sk-obs-body { background: transparent; }

.sk-notes, .sk-headers { position: absolute; inset: 0; }
.sk-headers { pointer-events: none; z-index: 4; }

/* Karteczka (post-it) */
.sk-note {
	position: absolute; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 12px 12px 16px; border-radius: 3px;
	background: #FEF3C7; color: #3a3320;
	font-family: "Caveat", "Segoe Script", cursive; font-weight: 700;
	font-size: 18px; line-height: 1.12; letter-spacing: .2px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 -10px 18px rgba(0, 0, 0, .05);
	transition: left .85s cubic-bezier(.22, .61, .36, 1), top .85s cubic-bezier(.22, .61, .36, 1),
		transform .85s cubic-bezier(.22, .61, .36, 1), background-color .55s ease, opacity .4s ease;
	overflow: hidden;
}
.sk-note-text {
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
	max-height: 100%; word-break: break-word;
}
/* zagięty róg */
.sk-note::after {
	content: ""; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
	background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .14) 50%);
}
.sk-note--new { animation: sk-fade .5s ease both; }
.sk-note--gone { opacity: 0; }

@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }

/* Nagłówki grup */
.sk-header {
	position: absolute; transform: translateX(-50%); white-space: nowrap;
	font-family: "Caveat", system-ui, cursive; font-weight: 700; font-size: 23px;
	color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
	display: flex; align-items: center; gap: 8px;
}
.sk-header-dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }

/* Licznik */
.sk-counter {
	position: absolute; top: 14px; left: 14px; z-index: 6; padding: 7px 14px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13px; font-weight: 600; color: #fff3d6;
	background: rgba(34, 24, 4, .72); border: 1px solid rgba(244, 183, 64, .5);
	border-radius: 999px; backdrop-filter: blur(6px);
}
.sk-counter-num { color: #ffd874; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
	.sk-note { transition: background-color .4s ease, opacity .4s ease; }
	.sk-note--new { animation: none; }
}