/* ============================================================
 * Longlight - 长光雨滴小站 | 按钮 components/button.css
 * 来源：~README/项目架构.js → 风格.控件
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-icon-text);
  height: 42px;
  padding: var(--space-btn-x);
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font: var(--text-ui);
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease-out),
              border-color var(--duration-hover) var(--ease-out),
              transform var(--duration-active) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

/* 终端光标闪烁（风格.光标闪烁）：在文字尾部追加一条随当前文字色的细竖线光标（2px，弃用矩形方块），
   1s 周期、50% 占空比、steps 硬切（不淡入淡出、不位移）；
   光标常驻布局（空闲时 visibility: hidden），故不改变按钮盒尺寸、hover 不抖动；
   主 / 次 / 幽灵 / 危险 / 图标一律生效（图标按钮同为内联光标，与文字按钮的光标—内容间距一致）；
   负外边距抵消 .btn 的 gap，使光标紧贴文字尾部 */
.btn::after {
  content: '';
  flex: none;
  width: 2px;
  height: 1em;
  margin-left: calc(0.1em - var(--space-icon-text));
  background: currentColor;
  visibility: hidden;
}

.btn:hover:not(:disabled)::after {
  visibility: visible;
  animation: cursorBlink var(--duration-cursor) steps(1, end) infinite;
}

.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* 主按钮：深绿底，暖白字 */
.btn-primary {
  background: var(--green-900);
  color: var(--surface-emphasis);
  border-color: var(--green-900);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover {
  background: var(--green-700);
  border-color: var(--green-700);
}

/* 次按钮：透明底，深绿边框深绿字 */
.btn-secondary {
  background: transparent;
  color: var(--green-900);
  border-color: var(--green-900);
}
.btn-secondary:hover { background: var(--hover-bg); }

/* 幽灵按钮：无边框，深绿字，hover 下划线暖橙 */
.btn-ghost {
  background: transparent;
  color: var(--green-900);
  border-color: transparent;
  padding: 0;
  height: auto;
}
.btn-ghost:hover { text-decoration: underline; text-decoration-color: var(--warm-600); text-underline-offset: 4px; }

/* 危险按钮 */
.btn-danger {
  background: var(--danger);
  color: var(--surface-emphasis);
  border-color: var(--danger);
}

/* 图标按钮：36×36 */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-btn);
  border: var(--border-default);
  background: transparent;
  color: var(--text-primary);
}
.btn-icon:hover { background: var(--hover-bg-soft); }
/* 图标按钮危险态：描边与图标取危险色（媒体移除角标等细粒度删除动作用） */
.btn-icon.is-danger { color: var(--danger); border-color: var(--danger); }

/* 图标按钮实底态：底色与 hover 一律不透明（供遮罩之上使用——半透明 hover 底会让按钮在遮罩上「变透明」；
   图片查看器右上角工具栏即此形态） */
.btn-icon.is-solid { background: var(--surface-emphasis); }
.btn-icon.is-solid:hover {
  background: color-mix(in srgb, var(--surface-emphasis) 88%, var(--text-primary));
  border-color: var(--green-900);
  color: var(--green-900);
}

/* 图标按钮小号：供贴着内容的小尺寸动作使用（连带图标尺寸一并收小） */
.btn-icon.is-sm { width: 24px; height: 24px; }
.btn-icon.is-sm svg { width: 12px; height: 12px; }

/* 幽灵按钮危险态：hover 下划线取危险色（危险区动作通用） */
.btn-ghost.is-danger { color: var(--danger); }
.btn-ghost.is-danger:hover { text-decoration-color: var(--danger); }

/* ---- 投影变体：.btn-proj —— 接入页「全息长光」专用外观 ----
   来源：~README/项目架构.js → 风格.控件.（原为接入页 pages/access 的页面私有按钮，现提升为公共变体）
   视觉：线框 + 极淡渐变填充，保持背景穿透；无终端光标闪烁、无 focus 光晕，
         故不复用 .btn 基类，独立成类；颜色一律由令牌组合得到，不引用页面局部变量 */
.btn-proj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-icon-text);
  height: 42px;
  padding: var(--space-btn-x);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--green-900) 7%, transparent);
  font: var(--text-ui);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background var(--duration-hover) var(--ease-out),
              border-color var(--duration-hover) var(--ease-out),
              box-shadow var(--duration-hover) var(--ease-out),
              transform var(--duration-active) var(--ease-out);
}

.btn-proj:active { transform: translateY(1px); }

.btn-proj:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

/* 投影主按钮：整行宽，深绿字 + 低对比外发光 */
.btn-proj-primary {
  width: 100%;
  color: var(--green-900);
  box-shadow: 0 0 14px color-mix(in srgb, var(--green-900) 9%, transparent);
}
.btn-proj-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--green-900) 13%, transparent);
  border-color: var(--green-900);
}

/* 投影次按钮：次文字色 + 更淡线框 */
.btn-proj-secondary {
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.btn-proj-secondary:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--line);
  background: color-mix(in srgb, var(--green-900) 13%, transparent);
}