/* ==========================================================================
   框架层 · 站点布局：顶栏、导航、搜索、用户区、页脚。
   全站每一页都长这样，所以放框架层而不是 page-*.css。
   颜色/间距/圆角一律用 core.css 里的 token，不写魔法数字。
   ========================================================================== */

/* ---------- 顶栏 ---------- */
.vp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 10, 12, .88);
	/* 顶栏压在海报上，毛玻璃比纯色更贴"影院"的调子 */
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--line);
}

.vp-header-in {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	height: 58px;
}

.vp-logo {
	flex: none;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--text);
	text-decoration: none;
}

.vp-logo b {
	color: var(--accent);
}

/* ---------- 主导航 ---------- */
.vp-nav {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	/* 分类多了横向滚动，但不要难看的滚动条 */
	scrollbar-width: none;
}

.vp-nav::-webkit-scrollbar {
	display: none;
}

.vp-nav-a {
	flex: none;
	padding: 6px var(--s-3);
	border-radius: var(--r-pill);
	color: var(--text-2);
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

/* 🔴 「图集」永远在最后一个。不用改 DOM 顺序 —— 分类是异步追加的，
   把 <a> 写到模板末尾只会让它在分类到达前一直贴着「首页」，闪一下再跳位置。
   order 是纯 CSS，首屏就已经在末尾了 */
.vp-nav-posts {
	order: 1;
}

.vp-nav-a:hover {
	color: var(--text);
	background: var(--bg-hover);
}

.vp-nav-a.is-on {
	color: var(--accent);
	background: var(--accent-dim);
}

/* ---------- 搜索 ---------- */
.vp-search {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

.vp-search-in {
	width: 190px;
	height: 34px;
	padding: 0 var(--s-3);
	border-radius: var(--r-pill);
}

.vp-search-btn {
	height: 34px;
	width: 34px;
}

/* ---------- 用户区 ---------- */
.vp-user {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

/* ---------- 用户名下拉菜单 ----------
   账号相关的动作（我的 / 修改密码 / 后台 / 退出）全收在这里。
   顶栏平铺按钮会越加越挤，低频动作摆在外面也突兀。 */
.vp-usermenu {
	position: relative;
}

.vp-caret {
	margin-left: 4px;
	font-size: 10px;
	opacity: .7;
}

.vp-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 132px;
	padding: var(--s-1) 0;
	border: 1px solid var(--line);
	border-radius: var(--r);
	/* --bg-elev-2 就是给「弹窗 / 下拉」用的那一层，别自己另挑颜色 */
	background: var(--bg-elev-2);
	box-shadow: var(--sh-2);
	/* 顶栏是 50、挂件 60；菜单必须压住挂件，否则右上角展开时被挂件盖住半截 */
	z-index: 70;
	display: none;
}

.vp-usermenu.is-open .vp-menu {
	display: block;
}

/* a 和 button 混排，两者的默认样式都要抹平，否则宽度、字号、对齐全对不上 */
.vp-menu-item {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 100%;
	padding: var(--s-2) var(--s-3);
	border: 0;
	background: none;
	color: var(--text);
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.vp-menu-item:hover {
	background: var(--bg-hover);
	color: var(--accent);
}

.vp-menu-sep {
	height: 1px;
	margin: var(--s-1) 0;
	background: var(--line);
}

/* 追剧有更新的小红点，挂在"我的"上 */
.vp-dot {
	display: inline-block;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-left: 4px;
	border-radius: var(--r-pill);
	background: var(--danger);
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-family: var(--font-mono);
}

/* ---------- 页面主体 ---------- */
.vp-main {
	min-height: 60vh;
	padding: var(--s-5) 0 var(--s-8);
}

/* ---------- 页脚 ---------- */
.vp-foot {
	border-top: 1px solid var(--line);
	padding: var(--s-5) 0;
	margin-top: var(--s-7);
	font-size: 13px;
}

/* ==========================================================================
   浮动挂件（fragments/layout :: widget）
   宽高走行内 style（是后台配的数字，不是设计稿定的），位置和层级归这里。
   ========================================================================== */
.vp-widget {
	position: fixed;
	/* 顶栏是 50、遮罩 8000、toast 9000 —— 挂件要压住内容，但绝不能压住弹窗，
	   否则弹出确认框时它还钉在上面挡按钮 */
	z-index: 60;
	border: 0;
	/* 🔴 这里**故意**不加 background / box-shadow / border-radius。
	   它们描的是 iframe 这个**框**，而里面的内容多半和框不一样大
	   （实测那张 gif 是 200×200，配置写的是 240×282）—— 尺寸一对不上，
	   就会看见「内容一层 + 下面一层带阴影的底」，像渲染坏了。
	   挂件应该只显示内容本身；真要圆角和阴影，做进素材里。 */
	background: transparent;
}

.vp-widget-right-bottom { right: 16px; bottom: 16px; }
.vp-widget-left-bottom  { left: 16px;  bottom: 16px; }
/* 顶部两个角要避开 sticky 顶栏，否则正压在导航和搜索框上 */
.vp-widget-right-top { right: 16px; top: calc(var(--nav-h) + 12px); }
.vp-widget-left-top  { left: 16px;  top: calc(var(--nav-h) + 12px); }

/* 窄屏等比缩小而不是隐藏 —— 挂件是有意要展示的东西，藏掉等于白配；
   但 240px 的方块在手机上能盖住小半屏内容，缩到六成刚好。
   缩放锚点跟着所在的角走，否则缩完会飘出屏幕。 */
/* 🔴 挂件是 fixed，滚到底时正压在页脚上（「videoPlay · 欢迎使用」被盖住半行）。
   给页脚垫一段底部留白，高度按挂件实际高度算 —— frame.js 会把配置里的高度
   写进 --vp-widget-h，并给 body 打上 .vp-has-widget。
   没有挂件的页面一个像素都不多留，所以留白挂在 class 上而不是全局。 */
.vp-has-widget .vp-foot {
	padding-bottom: calc(var(--vp-widget-h, 200px) + var(--s-4));
}

@media (max-width: 768px) {
	.vp-widget {
		transform: scale(.6);
	}

	/* 窄屏挂件缩到六成，留白也跟着按六成算，别白占一屏 */
	.vp-has-widget .vp-foot {
		padding-bottom: calc(var(--vp-widget-h, 200px) * .6 + var(--s-4));
	}

	.vp-widget-right-bottom { transform-origin: right bottom; }
	.vp-widget-left-bottom  { transform-origin: left bottom; }
	.vp-widget-right-top    { transform-origin: right top; }
	.vp-widget-left-top     { transform-origin: left top; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
	.vp-header-in {
		height: 52px;
		gap: var(--s-2);
	}

	.vp-logo {
		font-size: 17px;
	}

	/* 手机上 6 个分类肯定排不下（logo + 搜索 + 用户区就占掉一半），
	   .vp-nav 本来就能横滑，但硬切断的边缘看着像渲染坏了。
	   右侧渐隐一小段，把「还能往右滑」这件事说出来。
	   代价知情：滑到最右端时最后一项也会淡一点，比起看不出能滑，这个更划算。 */
	.vp-nav {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}

	/* 搜索展开时导航整个隐藏了，遮罩留着没意义，也免得影响其它 flex 计算 */
	.vp-header-in.is-search-open .vp-nav {
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* ---------- 窄屏搜索：平时只是一个放大镜，点了才展开占满一行 ----------
	   以前是把输入框压到 120 px 常驻，结果分类导航被挤得只剩「首页 短剧」
	   加半个字（.vp-nav 能横滑，但被裁断的样子看着就像坏了）。

	   🔴 收起时用 width:0 而不是 display:none —— 搜索页没有自己的输入框，
	      用的就是顶栏这一个（见 page/search.js 往 .vp-search-in 回填关键词），
	      display:none 的元素拿不到也聚焦不了。 */
	.vp-search-in {
		width: 0;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		border-width: 0;
		opacity: 0;
		transition: width var(--fast) var(--ease), opacity var(--fast) var(--ease);
	}

	.vp-header-in.is-search-open .vp-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	.vp-header-in.is-search-open .vp-search-in {
		width: 100%;
		padding-left: var(--s-3);
		padding-right: var(--s-3);
		border-width: 1px;
		opacity: 1;
	}

	/* 展开时把导航和用户区让出去，否则输入框还是只有一小条 */
	.vp-header-in.is-search-open .vp-nav,
	.vp-header-in.is-search-open .vp-user {
		display: none;
	}
}