/*
 * klpbbs_pc 窄屏（平板 / 手机）适配，最后加载，只放 @media 里的覆盖规则。
 * 三档断点：
 *   ≤1024px 侧栏收进抽屉（左上角 ☰ 打开），顶栏补一个 Logo；
 *   ≤860px  右栏挪到主栏下面，设置区等「左菜单 + 内容」的页面改成上下排；
 *   ≤640px  手机：顶栏只留图标，搜索点开后占满整条顶栏；卡片、列表收紧内边距。
 * 和桌面版共用一套 DOM，结构和 id 一个都没改，Discuz 的脚本照常工作。
 * 只靠鼠标悬停才露出来的按钮（删除叉、预览、评论操作），在没有悬停的触屏上常显，见文件末尾。
 */

/* ---------- ≤1024px：侧栏变抽屉 ---------- */
@media (max-width: 1024px) {
	.klp-side { width: 0; border-right: 0; }
	/* 抽屉沿用 .klp-side-in 本身（position: fixed 贴左），只是平时移出屏幕。
	 * 用 visibility 而不是 display 藏：要留给 transform 做滑入动画，关着时里面的链接也不会被 Tab 到 */
	.klp-side-in {
		z-index: 220; width: min(300px, 86vw); padding-top: calc(18px + env(safe-area-inset-top));
		background: var(--bg); box-shadow: var(--shadow-pop);
		transform: translateX(-100%); visibility: hidden;
		transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
	}
	html.klp-nav-open .klp-side-in { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease); }
	html.klp-nav-open { overflow: hidden; }
	html.klp-nav-open .klp-navveil { display: block; position: fixed; inset: 0; z-index: 219; background: var(--veil); backdrop-filter: var(--veil-fx); animation: klpFade var(--dur-2) var(--ease); }
	.klp-side-bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

	.klp-top .klp-navbtn { display: grid; flex: none; margin-left: -6px; color: var(--text-2); }
	.klp-top .klp-top-brand { display: flex; flex: none; padding: 0; height: auto; }
	/* 顶栏左边位置有限：出现「返回」时 Logo 让位 */
	.klp-top .klp-back:not([hidden]) ~ .klp-top-brand { display: none; }

	.klp-main { padding: 20px 24px 40px; }
	.klp-top { padding: 0 24px; gap: 10px; }
	.klp-foot { padding: 18px 24px; }
}

/* ---------- ≤860px：单栏 ---------- */
@media (max-width: 860px) {
	/* 右栏跟在主栏后面，宽度铺满；不再吸顶（一屏放不下整列，吸着的话下半截永远看不到） */
	.klp-cols { flex-direction: column; align-items: stretch; gap: 16px; }
	.klp-rail { width: auto; position: static; }
	.klp-post-rail { position: static; }

	/* 设置、勋章、道具、任务、消息、管理面板这些「左菜单 + 内容」的页面：菜单挪到上面，排成可折行的一排 */
	.ct2_a { flex-direction: column; align-items: stretch; gap: 16px; }
	.ct2_a .appl { width: auto; position: static; }
	.ct2_a .appl ul, .ct2_a .appl .tbn ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
	.ct2_a .appl li a, .ct2_a .appl .tbn ul a { height: 32px; font-size: 13px; }
	.klp-cp > .appl { width: auto; }

	/* 版块列表的「最后发表」列表头：主题行右边的数据列在手机上收窄了，表头对不上 */
	.klp-list-h { display: none; }
	.klp-fhead-main { flex-wrap: wrap; }
	.klp-fhead-act { flex-wrap: wrap; }
}

/* ---------- ≤640px：手机 ---------- */
@media (max-width: 640px) {
	:root { --top-h: 56px; }
	.klp-main { padding: 14px 12px calc(32px + env(safe-area-inset-bottom)); }
	.klp-foot { padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); }
	.klp-top { padding: 0 12px; gap: 6px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }

	/* 顶栏：只留图标。搜索框默认收起，点放大镜后顶栏里只剩搜索框和「取消」 */
	.klp-top > .klp-search { display: none; }
	.klp-top .klp-srch-btn { display: grid; }
	.klp-top.is-search > :not(.klp-search):not(.klp-srch-x) { display: none; }
	.klp-top.is-search > .klp-search { display: flex; flex: 1 1 auto; width: auto; min-width: 0; }
	.klp-top.is-search > .klp-srch-x { display: inline-flex; flex: none; padding: 0 8px; margin-right: -6px; }
	.klp-search .kbd { display: none; }
	.klp-top .klp-back { width: 36px; padding: 0; margin-left: 0; }
	.klp-top .klp-back > span { display: none; }
	#klp-post { width: 36px; padding: 0; }
	#klp-post > span { display: none; }
	.klp-top .klp-vsep, .klp-me-t, .klp-me > .k-ic { display: none; }
	.klp-me { height: 40px; padding: 0 2px; }
	.klp-me .avt img, .klp-me .avt { width: 30px; height: 30px; }
	.klp-guest .k-btn { height: 32px; padding: 0 10px; font-size: 13px; }
	.klp-guest strong { display: none; }
	/* 顶栏的下拉（用户菜单十几项）在矮屏上会超出屏幕，限高可滚 */
	.klp-top .k-menu { max-height: calc(100vh - var(--top-h) - 24px); max-height: calc(100dvh - var(--top-h) - 24px); overflow-y: auto; }
	/* 宽度有限时，消息入口在用户菜单里已经有 */
	#pm_ntc { display: none; }

	/* iOS 上字号小于 16px 的输入框一聚焦就整页放大，放大后还不会自己缩回来 */
	.k-inp, .klp-search input, input.px, textarea.pt, select.ps, .k-step > input { font-size: 16px; }

	/* 通用组件 */
	.k-card-pad { padding: 14px 16px; }
	.k-card { border-radius: 14px; }
	.k-tabs { flex-wrap: wrap; }
	/* 下划线页签放不下就横向滑；overflow 会裁掉压在底边上的选中线，线挪回框内 */
	.k-ul-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
	.k-ul-tabs::-webkit-scrollbar { display: none; }
	.k-ul-tabs a { flex: none; white-space: nowrap; }
	.k-ul-tabs a.on::after { bottom: 0; }
	.k-pgbar, .pg { flex-wrap: wrap; }
	.k-toast { top: calc(var(--top-h) + 12px); }

	/* 首页：幻灯片在手机上 3:1 太扁，标题会盖满整张图 */
	.klp-slider { aspect-ratio: 2 / 1; }
	.klp-slide-cap { padding: 40px 16px 14px; }
	.klp-slide-title { font-size: 16px; }
	.klp-slide-ctrl { top: 12px; right: 12px; bottom: auto; }
	.klp-slide-btn { display: none; }
	.klp-ann { padding: 0 12px; }
	/* 首页切换卡一行放不下时横向滑，不折成两行 */
	.klp-home-seg { flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
	.klp-home-seg::-webkit-scrollbar { display: none; }
	.klp-home-seg .k-seg { flex: none; padding: 0 12px; }
	.klp-feed-list { gap: 12px; grid-template-columns: minmax(0, 1fr); }
	html[data-feed-layout="list"] .feed-item { column-gap: 12px; padding: 14px 16px; }
	html[data-feed-layout="list"] .feed-item .feed-title { font-size: 15.5px; }
	html[data-feed-layout="list"] .feed-item .feed-imgs { width: 96px; border-radius: var(--r-md); align-self: start; margin-top: 4px; }
	html[data-feed-layout="list"] .feed-item .feed-excerpt { display: none; }
	.klp-fl-head { padding: 16px; }
	.klp-fl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

	/* 全部版块 */
	.klp-cat { padding: 16px; }
	.klp-cat-h { flex-wrap: wrap; gap: 4px 12px; }
	.klp-cat-mods { flex-basis: 100%; text-align: left; }
	.klp-cat-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }

	/* 版块页 */
	.klp-fhead-main { padding: 16px 16px 12px; gap: 12px; }
	.klp-ficon-lg { width: 48px; height: 48px; border-radius: 12px; }
	.klp-ficon-lg img { max-width: 48px; max-height: 48px; }
	.klp-fhead-title { font-size: 20px; }
	.klp-fhead-act { width: 100%; }
	.klp-fhead-stats { flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; }
	.klp-fhead .klp-hookrow { padding: 0 16px 12px; }
	.klp-listbar { padding: 10px 12px; }
	.klp-threadlist tbody tr { gap: 10px; padding: 12px 14px; }
	.klp-threadlist td.icn, .klp-threadlist td.icn img { width: 32px; height: 32px; }
	.klp-threadlist td.num { width: 52px; font-size: 12px; }
	.klp-threadlist td.num em { display: none; }
	.klp-threadlist tr.threadpre, .klp-threadlist tr[id^="threadPreviewTR_"] { padding: 0 14px 14px; }
	.klp-trow-title .xst { font-size: 14.5px; }
	.klp-trow-meta .tdpre { display: none; }
	.klp-stick-row { padding: 10px 14px; }
	.klp-stick-row .k-meta { display: none; }
	.klp-sticks-h { padding: 10px 12px 10px 14px; }
	#f_pst { padding: 14px; }

	/* 帖子页 */
	.klp-thread { padding: 18px 16px; gap: 14px; }
	.klp-thread-title { font-size: 21px; }
	#threadstamp { right: 8px; top: -4px; transform: scale(.7); transform-origin: top right; }
	.klp-post .tindex { max-width: none; }
	/* 正文里发帖人自己排的宽表格、代码块：在正文框里横向滑，不撑破整页 */
	.klp-post .t_f, .k-prose { overflow-x: auto; }
	.klp-post-first .t_f, .k-prose { font-size: 15.5px; }
	.klp-pbg { padding: 16px; }
	.klp-floor { padding: 14px 14px 10px; border-radius: 14px; }
	.klp-floor-body { margin-left: 0; }
	.klp-floor-f { margin-left: -8px; }
	.klp-floor-name .klp-grouptitle { max-width: 96px; }
	.klp-replies-h { flex-wrap: wrap; }
	.klp-bonus-row { flex-wrap: wrap; padding: 12px 14px; }
	.klp-bonus-pool { padding-left: 0; border-left: 0; align-items: flex-start; }
	.klp-rate-list li { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 2px; }
	.klp-rate-why { grid-column: 2 / -1; }
	.klp-poll { width: auto; min-width: 0; padding: 14px; }
	.klp-art-pren { grid-template-columns: minmax(0, 1fr); }
	.klp-art-next { grid-column: auto; }

	/* 评分弹窗：四列（项目 / 分值 / 范围 / 剩余）在手机上排不开，范围、剩余换到下一行 */
	.klp-rw-head { display: none; }
	.klp-rw-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
	.klp-rw-range, .klp-rw-left { text-align: left; font-size: 12px; }
	.klp-rw-tip { grid-column: 1 / -1; }

	/* 发帖页 */
	.klp-post-title h1 { white-space: normal; }
	.klp-post-acts { flex-wrap: wrap; }
	.klp-post-rail { grid-template-columns: minmax(0, 1fr); }
	.klp-preview { padding: 16px 8px; }
	.klp-preview-in { padding: 16px 16px 28px; }
	.klp-preview .klp-thread-title { font-size: 21px; }
	.klp-draft-menu { min-width: 0; width: calc(100vw - 32px); }
	.klp-fsel { max-width: calc(100vw - 24px); }
	.klp-fsel-cols { margin: 0 12px; }
	.klp-fsel-hd { padding: 14px 12px 10px 16px; }

	/* 个人空间头部：头像不再压在左边，放到封面下面单独一行，名字、按钮依次往下排 */
	.klp-uhead { margin-bottom: 14px; }
	.klp-uhead-cover { height: 104px; }
	.klp-uhead-main, .klp-uhead-main:has(> .klp-uhead-av > .k-av-frame) { flex-wrap: wrap; gap: 12px; padding: 48px 16px 0; }
	.klp-uhead-main:has(> .klp-uhead-av > .k-av-frame) { padding-top: 64px; }
	.klp-uhead-av, .klp-uhead-main > .klp-uhead-av:has(> .k-av-frame) { left: 16px; top: -36px; width: 72px; height: 72px; }
	.klp-uhead-main > .klp-uhead-av:has(> .k-av-frame) { left: 30px; }
	.klp-uhead-av img { width: 72px; height: 72px; }
	.klp-uhead-name { font-size: 19px; }
	.klp-uhead-act { justify-content: flex-start; width: 100%; }
	.klp-uhead-sub { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px; }
	.klp-uhead-stats { margin: 0; }
	.klp-uhead-stats > a, .klp-uhead-stats > span { flex: 1; min-width: 0; padding: 0 10px; }
	.klp-uhead-stats > :first-child { padding-left: 0; border-left: 0; }
	.klp-uhead-stats b { font-size: 17px; }
	.klp-utabs { gap: 18px; padding: 0 16px; }
	.klp-tp { gap: 12px; padding: 14px 16px; }
	/* 勋章页的说明气泡平时只是透明，最右一列的照样把页面撑出横向滚动；不显示时直接拿掉 */
	.klp-mdl:not(:hover):not(:focus-visible) .klp-mdl-tip { display: none; }
	.klp-medalwall .klp-medals { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }

	/* 设置区表单：标签放到控件上面，控件铺满 */
	.ct2_a .mn table.tfm, .ct2_a .mn table.tfm > tbody, .ct2_a .mn table.tfm tr { display: block; width: 100%; }
	.ct2_a .mn .tfm th, .ct2_a .mn .tfm td { display: block; width: auto; padding: 0; }
	.ct2_a .mn .tfm th { padding-top: 10px; line-height: 1.6; }
	.ct2_a .mn .tfm td { padding-bottom: 6px; }
	.ct2_a .mn .tfm td .px, .ct2_a .mn .tfm td .ps, .ct2_a .mn .tfm td select, .ct2_a .mn .tfm td textarea.pt { max-width: 100%; }
	.klp-cp-row { grid-template-columns: minmax(0, 1fr); }
	.klp-cp-k { padding-top: 0; }
	.klp-cp-k:empty { display: none; }
	.klp-cp-filter { padding: 12px; }

	/* 内容页卡片（标签、公告、帮助、统计……）与里面的 Discuz 数据表 */
	.klp-pg-h { flex-wrap: wrap; padding: 16px 16px 0; }
	.klp-pg-tabs { padding: 0 16px; }
	.klp-pg-b { padding: 14px 16px 18px; overflow-x: auto; }
	.klp-pg-b > .klp-accs { margin: 14px -16px -18px; }
	.klp-pg-pager { padding: 12px 16px 16px; }
	.klp-acc-h { padding: 12px 16px; }
	.klp-acc-b, .klp-stat-team .klp-acc-b { padding: 0 16px 14px; }
	.klp-tagt li { padding: 12px 16px; }
	.klp-stat-row { flex-direction: column; gap: 6px; }
	.klp-stat-k { width: auto; padding-top: 0; }

	/* 登录注册：卡片是 content-box 的定宽（400 / 460 / 420），加上内边距比屏幕宽，外面那层 #main_message 又按内容撑开，
	   max-width: 100% 拦不住；手机上改成铺满可用宽度 */
	.klp-auth-page > * { width: 100%; min-width: 0; }
	.klp-auth-page .klp-auth, .klp-auth-page .klp-oauth { box-sizing: border-box; width: 100%; padding: 28px 20px 22px; border-radius: 16px; }
	.fwin .klp-auth-body { width: auto; max-width: calc(100vw - 48px); padding: 22px 20px 16px; }
	.klp-auth-top { padding-left: 12px; padding-right: 12px; }

	/* Discuz 弹窗（showWindow）：原版内容常按像素写死宽度，超出屏幕时在弹窗里横向滑 */
	table.fwin td.m_c { max-width: calc(100vw - 16px); overflow-x: auto; }
	.fwin .flb { padding: 14px 16px 6px; }
	.fwin .m_c, .m_c { padding: 6px 16px 14px; }
	.fwin .o, .m_c .o { padding: 10px 16px; }
	.klp-usercard { width: min(300px, calc(100vw - 24px)); box-sizing: border-box; }

	/* 图片查看器的工具栏在刘海屏上让开状态栏 */
	.klp-lb-bar { top: env(safe-area-inset-top); }
}

/* 很窄的手机（iPhone SE 这一档）：顶栏再省一点 */
@media (max-width: 380px) {
	.klp-top { gap: 2px; }
	.klp-top-icons { gap: 0; }
	.klp-guest .k-btn-gho { padding: 0 6px; }
}

/* ---------- 触屏：没有悬停 ----------
 * 桌面上悬停才出现的小按钮，触屏上永远等不到 :hover，直接常显 */
@media (hover: none) {
	.klp-trow-meta .klp-trow-x, .klp-cmt-h .klp-act, .klp-fav .klp-act { opacity: 1; }
	.klp-trow-meta .tdpre { opacity: 1; }
	.feed-item:hover { box-shadow: none; }
	.klp-fcard:hover { box-shadow: none; }
}