/*
 * Warna dan tipografi mengikuti tema WordPress.
 * Urutan pengambilan nilai:
 *   1. Variabel yang disuntik shortcode (atribut warna="...")
 *   2. Preset Global Styles tema blok (--wp--preset--color--*)
 *   3. Nilai cadangan netral untuk tema klasik yang tidak punya preset
 */
.tka-cn-box {
	--tka-accent: var(--tka-accent-custom, var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--vivid-cyan-blue, #1f6feb))));
	--tka-accent-text: var(--wp--preset--color--base, #fff);
	--tka-bg: var(--wp--preset--color--base, transparent);
	--tka-fg: var(--wp--preset--color--contrast, inherit);
	--tka-line: color-mix(in srgb, currentColor 15%, transparent);
	--tka-soft: color-mix(in srgb, currentColor 7%, transparent);
	--tka-muted: color-mix(in srgb, currentColor 65%, transparent);

	max-width: 620px;
	margin: 1.5rem auto;
	padding: clamp(1rem, 4vw, 1.75rem);
	background: var(--tka-bg);
	color: var(--tka-fg);
	border: 1px solid var(--tka-line);
	border-radius: var(--wp--custom--border-radius, 12px);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	box-sizing: border-box;
}

.tka-cn-box * { box-sizing: border-box; }

.tka-cn-title {
	margin: 0 0 .25rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.3;
}
.tka-cn-sub { margin: 0 0 1.25rem; color: var(--tka-muted); font-size: var(--wp--preset--font-size--small, .875rem); }

.tka-cn-form { display: grid; gap: .85rem; }

/*
 * Tanpa min-width:0, input[type=date] memaksa kolomnya melebar melebihi
 * jatah 1fr (lebar bawaan peramban untuk mm/dd/yyyy + ikon kalender),
 * sehingga kolom NISN tergencet jadi lebih sempit.
 */
.tka-cn-form > * { min-width: 0; }

.tka-cn-form label { display: flex; flex-direction: column; }
.tka-cn-form label span {
	display: block;
	font-size: var(--wp--preset--font-size--small, .8rem);
	font-weight: 600;
	color: var(--tka-muted);
	margin-bottom: .3rem;
}

/*
 * Tema blok sudah menata input lewat Global Styles; hanya isi yang belum diatur.
 * appearance:none dan tinggi eksplisit dipakai agar input tanggal tidak
 * memakai padding serta metrik font bawaan peramban, yang membuatnya
 * lebih pendek atau lebih tinggi daripada input teks di sebelahnya.
 */
.tka-cn-form input[type="text"],
.tka-cn-form input[type="date"] {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	min-width: 0;
	height: 2.9em;
	margin: 0;
	padding: 0 .75rem;
	font-family: inherit;
	font-size: inherit;
	line-height: normal;
	color: inherit;
	background: var(--tka-soft);
	border: 1px solid var(--tka-line);
	border-radius: var(--wp--custom--border-radius, 8px);
}

/* Safari iOS memberi input tanggal tinggi berbeda dan teks rata atas. */
.tka-cn-form input[type="date"] {
	-webkit-appearance: none;
	text-align: left;
}
.tka-cn-form input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.tka-cn-form input[type="date"]::-webkit-calendar-picker-indicator {
	margin-left: auto;
	cursor: pointer;
	opacity: .6;
}
.tka-cn-form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.tka-cn-form input:focus-visible {
	outline: 2px solid var(--tka-accent);
	outline-offset: 1px;
	border-color: var(--tka-accent);
}

/*
 * Tombol memakai kelas .wp-element-button, jadi tema blok menerapkan gaya
 * tombolnya sendiri. Aturan di bawah hanya berlaku bila tema diam.
 */
.tka-cn-submit {
	width: 100%;
	padding: .75rem 1.25rem;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--tka-accent-text);
	background: var(--tka-accent);
	border: 0;
	border-radius: var(--wp--custom--border-radius, 8px);
	cursor: pointer;
}
.tka-cn-submit:hover { filter: brightness(.93); }
.tka-cn-submit[disabled] { opacity: .6; cursor: progress; }

.tka-cn-msg {
	margin-top: 1rem;
	padding: .75rem .9rem;
	border-radius: var(--wp--custom--border-radius, 8px);
	font-size: var(--wp--preset--font-size--small, .9rem);
	color: var(--tka-fg);
	background: color-mix(in srgb, #d9534f 12%, transparent);
	border: 1px solid color-mix(in srgb, #d9534f 35%, transparent);
}

.tka-cn-result { margin-top: 1.5rem; }

.tka-cn-identity {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--tka-line);
}
.tka-cn-nama {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--medium, 1.15rem);
	font-weight: 700;
}
.tka-cn-meta { margin: .2rem 0 0; font-size: var(--wp--preset--font-size--small, .85rem); color: var(--tka-muted); }

.tka-cn-mapel { display: grid; gap: .85rem; }
.tka-cn-item { display: grid; gap: .35rem; }
.tka-cn-item-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}
.tka-cn-item-head b { font-variant-numeric: tabular-nums; }

.tka-cn-bar { height: 8px; border-radius: 99px; background: var(--tka-soft); overflow: hidden; }
.tka-cn-bar i { display: block; height: 100%; border-radius: 99px; background: var(--tka-accent); transition: width .5s ease; }

/*
 * Penanda rendah/sedang/tinggi ikut palet tema bila tersedia,
 * mundur ke merah/kuning/hijau standar bila tidak.
 */
.tka-cn-bar i.low { background: var(--wp--preset--color--vivid-red, #d9534f); }
.tka-cn-bar i.mid { background: var(--wp--preset--color--luminous-vivid-amber, #e0a800); }
.tka-cn-bar i.high { background: var(--wp--preset--color--vivid-green-cyan, #2f9e44); }
.tka-cn-box.tka-mono .tka-cn-bar i.low,
.tka-cn-box.tka-mono .tka-cn-bar i.mid,
.tka-cn-box.tka-mono .tka-cn-bar i.high { background: var(--tka-accent); }

.tka-cn-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tka-line);
}
.tka-cn-stat { flex: 1 1 140px; }
.tka-cn-stat span {
	display: block;
	font-size: var(--wp--preset--font-size--small, .75rem);
	color: var(--tka-muted);
}
.tka-cn-stat b { font-size: var(--wp--preset--font-size--large, 1.4rem); font-variant-numeric: tabular-nums; }

.tka-cn-note { margin-top: 1rem; font-size: var(--wp--preset--font-size--small, .8rem); color: var(--tka-muted); }

/* Peramban lama tanpa color-mix: pakai abu-abu netral agar teks tetap terbaca. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.tka-cn-box { --tka-line: rgba(128,128,128,.3); --tka-soft: rgba(128,128,128,.12); --tka-muted: rgba(128,128,128,1); }
}

@media (min-width: 540px) {
	.tka-cn-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
	.tka-cn-submit { width: auto; height: 2.9em; padding-top: 0; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tka-cn-bar i { transition: none; }
}