/* KNN Markdown 写作器 —— 前台组件样式
 * 配色跟随博客主色 #ff5a36，并适配 knn-theme 的 body.dark-mode */

.knn-md-task {
	display: inline-flex;
	vertical-align: -2px;
	margin-right: 4px;
}

.knn-md-task input {
	width: 15px;
	height: 15px;
	accent-color: #ff5a36;
	cursor: default;
}

/* 标题 */
.knn-md-title {
	position: relative;
	padding-left: 13px;
}

.knn-md-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	bottom: .35em;
	width: 4px;
	border-radius: 2px;
	background: currentColor;
	opacity: .85;
}

.knn-md-center-title {
	text-align: center;
	font-size: 22px;
	margin: 1.6em 0 1em;
}

.knn-md-center-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	border-radius: 2px;
	background: #ff5a36;
	margin: 10px auto 0;
}

/* 标注 */
.knn-md-callout {
	margin: 1.1em 0;
	padding: 12px 16px;
	border-left: 4px solid var(--knn-md-c, #ff5a36);
	background: #fffaf7;
	border-radius: 0 8px 8px 0;
	color: #3f3f46;
}

body.dark-mode .knn-md-callout {
	background: #241f1c;
	color: #d8d4cf;
}

/* 消息提示 */
.knn-md-msg {
	margin: 1.1em 0;
	padding: 11px 15px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 15px;
	line-height: 1.7;
}

.knn-md-msg.is-success {
	background: #eefaf1;
	border-color: #c6ecd2;
	color: #1a7f37;
}

.knn-md-msg.is-info {
	background: #eef6fd;
	border-color: #cbe3f7;
	color: #1668c4;
}

.knn-md-msg.is-warning {
	background: #fff8e6;
	border-color: #ffe3a3;
	color: #9a6700;
}

.knn-md-msg.is-error {
	background: #fdeeee;
	border-color: #f7cfcf;
	color: #b32d2e;
}

body.dark-mode .knn-md-msg.is-success {
	background: #17261c;
	border-color: #2c4a35;
	color: #6fcf8f;
}

body.dark-mode .knn-md-msg.is-info {
	background: #16212c;
	border-color: #274155;
	color: #6cb0f5;
}

body.dark-mode .knn-md-msg.is-warning {
	background: #2a2318;
	border-color: #4d4029;
	color: #f0c05a;
}

body.dark-mode .knn-md-msg.is-error {
	background: #2a1a1a;
	border-color: #4d2b2b;
	color: #f08a8a;
}

/* 提醒框 */
.knn-md-alert {
	margin: 1.1em 0;
	padding: 12px 16px;
	border-radius: 8px;
	color: #fff;
	background: var(--knn-md-c, #ff5a36);
	box-shadow: 0 2px 8px rgba(255, 90, 54, .18);
}

.knn-md-alert a {
	color: #fff;
	text-decoration: underline;
}

/* 关闭：checkbox + label，配合 :has() 把整块藏掉（不用 JS） */
.knn-md-alert {
	position: relative;
}

.knn-md-alert-cb {
	display: none;
}

.knn-md-alert-x {
	display: none;
	position: absolute;
	right: 10px;
	top: 6px;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	user-select: none;
	opacity: .75;
}

.knn-md-alert.is-dismissible .knn-md-alert-x {
	display: block;
}

.knn-md-alert.is-dismissible {
	padding-right: 40px;
}

.knn-md-alert-x:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .22);
}

.knn-md-alert:has(.knn-md-alert-cb:checked) {
	display: none;
}

/* 面板卡片 */
.knn-md-panel {
	margin: 1.2em 0;
	border: 1px solid #eaedf0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.knn-md-panel-hd {
	padding: 10px 15px;
	background: linear-gradient(135deg, #fff5ef, #ffe9e0);
	border-bottom: 1px solid #ffe0cc;
	font-weight: 600;
	color: #c2410c;
}

.knn-md-panel-bd {
	padding: 14px 16px;
	line-height: 1.8;
}

body.dark-mode .knn-md-panel {
	border-color: #3a332e;
	background: #211d1a;
}

body.dark-mode .knn-md-panel-hd {
	background: linear-gradient(135deg, #2a2320, #34241c);
	border-bottom-color: #4d3b2f;
	color: #fdba74;
}

/* 折叠框（原生 details，无 JS） */
.knn-md-fold {
	margin: 1.1em 0;
	border: 1px solid #eaedf0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.knn-md-fold>summary {
	cursor: pointer;
	padding: 11px 15px;
	font-weight: 600;
	list-style: none;
	background: #fffaf7;
	color: #c2410c;
	display: flex;
	align-items: center;
	gap: 8px;
}

.knn-md-fold>summary::-webkit-details-marker {
	display: none;
}

.knn-md-fold>summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 6px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transition: transform .2s;
}

.knn-md-fold[open]>summary::before {
	transform: rotate(90deg);
}

.knn-md-fold-bd {
	padding: 13px 16px;
	line-height: 1.8;
	border-top: 1px solid #f2f4f6;
}

body.dark-mode .knn-md-fold {
	border-color: #3a332e;
	background: #211d1a;
}

body.dark-mode .knn-md-fold>summary {
	background: #2a2320;
	color: #fdba74;
}

body.dark-mode .knn-md-fold-bd {
	border-top-color: #3a332e;
}

/* 按钮 */
.knn-md-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 17px;
	border-radius: 6px;
	background: #ff5a36;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.5;
	transition: filter .15s, transform .15s;
}

.knn-md-btn:hover {
	filter: brightness(1.06);
	color: #fff;
	transform: translateY(-1px);
}

.knn-md-btn.is-round {
	border-radius: 999px;
}

.knn-md-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 1.1em 0;
}

/* 进度条 */
/* 进度条：轨道 + 右侧百分比（百分比放外面，任何进度都看得见） */
.knn-md-prog-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 1.1em 0;
}

.knn-md-prog {
	flex: 1;
	min-width: 0;
	height: 16px;
	border-radius: 999px;
	background: #f1f3f5;
	overflow: hidden;
}

.knn-md-prog i {
	display: block;
	height: 100%;
	border-radius: 999px;
	transition: width .4s;
}

.knn-md-prog-wrap>b {
	flex: none;
	min-width: 40px;
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	color: #57606a;
	font-variant-numeric: tabular-nums;
}

body.dark-mode .knn-md-prog {
	background: #2f2a26;
}

body.dark-mode .knn-md-prog-wrap>b {
	color: #9a918a;
}

/* 卡片列表 */
.knn-md-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 1.2em 0;
}

.knn-md-card {
	border: 1px solid #eaedf0;
	border-radius: 10px;
	padding: 14px 16px;
	background: #fff;
	transition: box-shadow .18s, transform .18s;
}

.knn-md-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
	transform: translateY(-2px);
}

body.dark-mode .knn-md-card {
	border-color: #3a332e;
	background: #211d1a;
}

/* 时间轴 */
.knn-md-timeline {
	margin: 1.3em 0;
	padding-left: 6px;
	border-left: 2px solid #f0d9d0;
}

.knn-md-tl-item {
	position: relative;
	padding: 0 0 1.1em 20px;
	line-height: 1.7;
}

.knn-md-tl-item::before {
	content: "";
	position: absolute;
	left: -9px;
	top: .55em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--knn-md-c, #ff5a36);
	box-shadow: 0 0 0 3px rgba(255, 90, 54, .16);
}

body.dark-mode .knn-md-timeline {
	border-left-color: #4d3b2f;
}

/* 宫格 */
.knn-md-grid {
	display: grid;
	grid-template-columns: repeat(var(--knn-md-col, 3), 1fr);
	gap: var(--knn-md-gap, 15px);
	margin: 1.2em 0;
}

.knn-md-grid-item {
	border: 1px solid #eaedf0;
	border-radius: 8px;
	padding: 12px 14px;
	background: #fff;
	font-size: 14px;
	line-height: 1.7;
}

body.dark-mode .knn-md-grid-item {
	border-color: #3a332e;
	background: #211d1a;
}

@media (max-width: 640px) {
	.knn-md-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 标签页：纯 CSS（radio + 兄弟选择器），不依赖 JS */
.knn-md-tabs {
	margin: 1.3em 0;
	border: 1px solid #eaedf0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	/* 标签得先排成一行、面板再换行占满；
	   原来容器是 block，面板一出现就把后面的标签挤到下一行去了。
	   flex 的 order 只改视觉顺序，DOM 顺序不变，兄弟选择器照样生效 */
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.knn-md-tabs input[type="radio"] {
	display: none;
}

.knn-md-tabs label {
	order: 1;
	display: block;
	padding: 10px 16px;
	cursor: pointer;
	font-size: 14px;
	color: #57606a;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.knn-md-tabs label:hover {
	color: #ff5a36;
}

.knn-md-tabpane {
	display: none;
	padding: 14px 16px;
	border-top: 1px solid #f2f4f6;
	line-height: 1.8;
	/* order 必须比 label 大，否则面板会排到标签前面；
	   width:100% 让面板自己占一行，标签才能挤在同一行 */
	order: 2;
	width: 100%;
	flex: 0 0 100%;
	box-sizing: border-box;
}

.knn-md-tabs input:nth-of-type(1):checked~label:nth-of-type(1),
.knn-md-tabs input:nth-of-type(2):checked~label:nth-of-type(2),
.knn-md-tabs input:nth-of-type(3):checked~label:nth-of-type(3),
.knn-md-tabs input:nth-of-type(4):checked~label:nth-of-type(4),
.knn-md-tabs input:nth-of-type(5):checked~label:nth-of-type(5),
.knn-md-tabs input:nth-of-type(6):checked~label:nth-of-type(6),
.knn-md-tabs input:nth-of-type(7):checked~label:nth-of-type(7),
.knn-md-tabs input:nth-of-type(8):checked~label:nth-of-type(8) {
	color: #ff5a36;
	font-weight: 600;
	border-bottom-color: #ff5a36;
}

.knn-md-tabs input:nth-of-type(1):checked~.knn-md-tabpane:nth-of-type(1),
.knn-md-tabs input:nth-of-type(2):checked~.knn-md-tabpane:nth-of-type(2),
.knn-md-tabs input:nth-of-type(3):checked~.knn-md-tabpane:nth-of-type(3),
.knn-md-tabs input:nth-of-type(4):checked~.knn-md-tabpane:nth-of-type(4),
.knn-md-tabs input:nth-of-type(5):checked~.knn-md-tabpane:nth-of-type(5),
.knn-md-tabs input:nth-of-type(6):checked~.knn-md-tabpane:nth-of-type(6),
.knn-md-tabs input:nth-of-type(7):checked~.knn-md-tabpane:nth-of-type(7),
.knn-md-tabs input:nth-of-type(8):checked~.knn-md-tabpane:nth-of-type(8) {
	display: block;
}

body.dark-mode .knn-md-tabs {
	border-color: #3a332e;
	background: #211d1a;
}

body.dark-mode .knn-md-tabs label {
	color: #9a918a;
}

body.dark-mode .knn-md-tabpane {
	border-top-color: #3a332e;
}

/* 彩色虚线 */
.knn-md-dashed {
	height: 4px;
	margin: 1.6em 0;
	border-radius: 2px;
	background: repeating-linear-gradient(90deg,
			var(--knn-md-d1, #ff5a36) 0 12px, transparent 12px 20px,
			var(--knn-md-d2, #ffb340) 20px 32px, transparent 32px 40px);
}

/* 内嵌 iframe */
.knn-md-iframe {
	margin: 1.2em 0;
	border: 1px solid #eaedf0;
	border-radius: 8px;
	overflow: hidden;
}

.knn-md-iframe iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* B站视频：16:9 自适应，整块居中 */
.knn-md-video {
	margin: 1.3em 0;
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	border: 1px solid #eaedf0;
}

/* 不支持 aspect-ratio 的老浏览器兜底 */
@supports not (aspect-ratio: 16 / 9) {
	.knn-md-video {
		height: 0;
		padding-bottom: 56.25%;
	}
}

.knn-md-video iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

body.dark-mode .knn-md-video {
	background: #000;
	border-color: #333;
}

/* 隐藏内容 */
.knn-md-hide.is-locked {
	margin: 1.2em 0;
	padding: 14px 16px;
	border: 1px dashed #ffc9b8;
	border-radius: 8px;
	background: #fffaf7;
	color: #c2410c;
	font-size: 14px;
	text-align: center;
}

.knn-md-hide.is-open {
	margin: 1.2em 0;
	padding: 12px 16px;
	border-left: 3px solid #ff5a36;
	background: #fffaf7;
	border-radius: 0 8px 8px 0;
}

body.dark-mode .knn-md-hide.is-locked,
body.dark-mode .knn-md-hide.is-open {
	background: #241f1c;
	border-color: #4d3b2f;
	color: #fdba74;
}

.knn-md-empty {
	color: #8b949e;
	font-size: 13px;
}