/*
 * Stone 前端交互增强样式
 * - 顶部加载进度条
 * - 返回顶部按钮
 *
 * 遵循父主题 stoat 的设计系统：扁平化（无圆角）、hairline 分隔、
 * 复用设计令牌（--accent / --border / --meta / --dark / --bg）。
 */

/* ---------- 顶部加载进度条 ---------- */
#stone-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000; /* 同 skip-link 层级，始终可见 */
	height: 3px;
	width: 0;
	background: var(--accent, #0073aa);
	opacity: 0;
	pointer-events: none;
	transition: width 0.2s ease, opacity 0.3s ease;
}

#stone-progress.is-active {
	opacity: 1;
}

#stone-progress.is-done {
	opacity: 0;
	transition: width 0.15s ease, opacity 0.4s ease 0.2s;
}

/* ---------- 返回顶部按钮 ---------- */
#stone-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999; /* 位于离屏面板(1000)之下、内容之上 */
	width: 44px;
	height: 44px;
	padding: 0;
	/* 透明边框占位：视觉上无边框，hover 变黑时不引起布局跳动 */
	border: 1px solid transparent;
	border-radius: 0; /* 主题扁平风格，无圆角 */
	background: var(--bg, #fff);
	color: var(--dark, #111);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s, visibility 0.2s, transform 0.2s, border-color 0.2s;
}

#stone-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#stone-back-to-top:hover {
	border-color: var(--dark, #111); /* 悬停时显示主题黑色边框 */
	color: var(--dark, #111);
}

#stone-back-to-top svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}