/* 皮肤共享样式：只放"结构性"规则（preloader / 切换器菜单 / 骨架屏 / 回到顶部），不含任何配色与排版风格。
   配色、字体、动效由各皮肤的 {slug}/skin.css 通过 --orz-* 变量与 .orz-* 类覆盖。
   加载顺序：旧 joe.*.min.css -> 本文件 -> {slug}/skin.css */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- 预加载（preloader） ----------
   样式已搬到 assets/skin/preloader.css + {slug}/preloader.css，由 core/skin.php 内联进 <head> 最前面：
   遮罩必须在 HTML 首字节后的第一次绘制就出现，不能等本文件（外链、阻塞渲染）下载完。这里不再保留，避免两份漂移 */

/* ---------- 右上角切换器（明暗按钮 + 皮肤菜单）---------- */
.orz-switcher { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.orz-theme-toggle, .orz-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    min-width: 34px;
    padding: 0 8px;
    border: 1px solid currentColor;
    border-radius: 17px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s, background-color .2s;
}
.orz-theme-toggle:hover, .orz-menu-trigger:hover { opacity: 1; }
/* 太阳/月亮：暗色下显示太阳（点击变亮），亮色下显示月亮（点击变暗），完全由 data-theme 决定，不依赖 JS */
.orz-ico--moon { display: none; }
html[data-theme="light"] .orz-ico--sun { display: none; }
html[data-theme="light"] .orz-ico--moon { display: block; }
.orz-menu-wrap { position: relative; }
.orz-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;
    min-width: 168px;
    padding: 6px;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: 12px;
    background: var(--orz-surface, #15151c);
    color: var(--orz-tx, #f4f1f2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility 0s linear .18s;
}
html[data-theme="light"] .orz-menu { background: var(--orz-surface, #fff); color: var(--orz-tx, #170f12); }
.orz-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.orz-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.orz-menu__item:hover { background: rgba(128, 128, 128, .16); }
.orz-menu__item.is-active { color: var(--orz-accent, #ff2d55); font-weight: 600; }
.orz-menu__en { font-size: 10px; letter-spacing: .12em; opacity: .55; }

/* ---------- 骨架屏 ----------
   默认隐藏；joe.index.js 在请求期间加 .is-active。
   [hidden] 也要生效：皮肤自己写的骨架容器可以用 hidden 属性控制，display 规则不能把它顶掉 */
.orz-skeleton { display: none; }
.orz-skeleton.is-active { display: block; }
.orz-skeleton[hidden] { display: none; }
.orz-skeleton-block {
    background: linear-gradient(90deg, var(--orz-sk1, rgba(128, 128, 128, .12)) 25%, var(--orz-sk2, rgba(128, 128, 128, .24)) 50%, var(--orz-sk1, rgba(128, 128, 128, .12)) 75%);
    background-size: 200% 100%;
    animation: orz-shimmer 1.4s linear infinite;
    border-radius: 6px;
}
@keyframes orz-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- 首屏结构 ---------- */
.orz-hero { position: relative; overflow: hidden; }
.orz-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px 20px 24px; }
.orz-hero__title { margin: 0; line-height: 1.15; }
.orz-hero__line { display: block; }
.orz-hero__modules { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.orz-hero__sticky { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 回到顶部 ----------
   旧按钮 .joe_action_item.scroll 保留（joe.global.js 控制显隐）；皮肤可用 [data-orz-top] 自建按钮 */
[data-orz-top] { cursor: pointer; }

/* 旧夜间模式按钮已从 footer 移除；万一缓存了旧 HTML，也不要让它与新切换器并存 */
.joe_action_item.mode { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .orz-menu { transition: none; }
    .orz-skeleton-block { animation: none; }
}

/* ---------- 评论验证码行（仅游客表单显示） ----------
   结构：form > .captcha > input[name=captcha] + img。
   配色全部取皮肤的 --orz-* 变量，缺失时回退到 Joe 旧变量，因此 void / ember / 未启用皮肤都能适配；
   SVG 自带浅色底，暗色模式下用滤镜翻转明度并保持色相（滤镜只作用于图片，不影响输入框）。
   输入框高度与同表单 .head 内的输入框一致（默认 40px，void 皮肤为 46px），否则整行会和昵称行错位。
   input 用 min-width:0 + flex:1、图片 flex:none 并限制 max-width，手机窄屏下不会把行撑出表单。 */
.joe_comment__respond-form .captcha { display: flex; align-items: center; gap: 12px; padding: 0 15px; border-bottom: 1px solid var(--orz-line, var(--classA)); }
.joe_comment__respond-form .captcha input { flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; padding: 0; border: none; background: transparent; outline: 0; color: var(--orz-tx, var(--routine)); font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: .12em; }
.joe_comment__respond-form .captcha input::placeholder { letter-spacing: 0; color: var(--orz-tx3, inherit); opacity: 1; }
.joe_comment__respond-form .captcha img { flex: none; display: block; width: auto; height: 38px; max-width: 45%; border-radius: 6px; cursor: pointer; user-select: none; -webkit-user-drag: none; }
html[data-skin=void] .joe_comment__respond-form .captcha input { height: 46px; font-family: var(--void-sans); }
html[data-skin=void] .joe_comment__respond-form .captcha img { height: 42px; }
html[data-theme=dark] .joe_comment__respond-form .captcha img { filter: invert(.88) hue-rotate(180deg); }
html[data-skin=ember] .joe_comment__respond-form .captcha input { font-size: 14.5px; }