/* ============================================================
   主页布局与组件样式。
   取值纪律：颜色、字体、字号、间距、圆角、时长一律引用 tokens.css，
   本文件不出现任何裸色值、字号与动效时长。
   ============================================================ */

/* 全局盒模型统一为边框盒 */
* {
    box-sizing: border-box;
}

/* 页面基底：图纸深蓝底、正文纸白字、思源黑体 */
body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.75;
}

/* 背景层一：坐标纸细网格，全页铺满（横竖两组 1px 渐变线） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(color-mix(in srgb, var(--trace) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--trace) 7%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* 背景层二：英雄区辉光与四缘暗角，营造控制柜内透光的纵深 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(560px 420px at 72% 30%, color-mix(in srgb, var(--lamp) 7%, transparent), transparent 70%), radial-gradient(640px 480px at 12% 78%, color-mix(in srgb, var(--trace) 9%, transparent), transparent 72%), radial-gradient(140% 120% at 50% 50%, transparent 62%, color-mix(in srgb, #000 38%, transparent) 100%);
}

/* 背景装饰层：散布的电路符号图元，全部位于内容之下 */
.bg-ornaments {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--trace);
}

/* 单个装饰图元的公共形态：低透明度、按各自坐标散布 */
.orn {
    position: absolute;
    opacity: 0.08;
}

/* 电阻符号：左上区 */
.orn-resistor {
    width: 128px;
    left: 4%;
    top: 14%;
    transform: rotate(-8deg);
}

/* 电容符号：右上区 */
.orn-capacitor {
    width: 72px;
    right: 6%;
    top: 12%;
    transform: rotate(12deg);
}

/* 接地符号：右中区 */
.orn-ground {
    width: 56px;
    right: 13%;
    top: 56%;
    transform: rotate(-6deg);
}

/* 二极管符号：左中区 */
.orn-diode {
    width: 84px;
    left: 7%;
    top: 48%;
    transform: rotate(9deg);
}

/* 电感符号：左下区 */
.orn-inductor {
    width: 110px;
    left: 12%;
    bottom: 12%;
    transform: rotate(-5deg);
}

/* 测试点符号：右下区 */
.orn-testpoint {
    width: 40px;
    right: 8%;
    bottom: 16%;
}

/* 图纸边框：全页图幅框线与四角刻度 */
.sheet-frame {
    position: fixed;
    inset: 10px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--trace) 16%, transparent);
}

/* 边框内衬细线：双线图幅感 */
.sheet-frame::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid color-mix(in srgb, var(--trace) 9%, transparent);
}

/* 内容主层：抬升到背景装饰之上 */
.site-header,
main,
.site-footer {
    position: relative;
    z-index: 1;
}

/* SVG 绘制层默认块级显示，消除基线空隙 */
svg {
    display: block;
}

/* 跳转正文捷径：默认移出视口，获得键盘焦点时滑入 */
.skip-link {
    position: absolute;
    left: var(--space-3);
    top: 0;
    z-index: 10;
    padding: var(--space-1) var(--space-3);
    background: var(--panel);
    color: var(--paper);
    border-radius: var(--radius-1);
    transform: translateY(-200%);
    transition: transform var(--motion-lamp) var(--ease-power);
}

/* 跳转捷径获得焦点时滑入视口 */
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--lamp);
    outline-offset: 2px;
}

/* 页眉图纸栏：两端对齐的图纸元信息 */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--trace) 22%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--trace);
}

/* 页眉运行灯：常亮琥珀，示意站点在线 */
.header-lamp {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lamp);
    box-shadow: 0 0 8px color-mix(in srgb, var(--lamp) 60%, transparent);
}

/* 英雄区：左 1/3 文案、右 2/3 回路图的双栏骨架 */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-5);
    align-items: center;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

/* 人名行：主名与名章同行排布 */
.hero-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* 人名：展示层字体，鎏金渐变字面 */
.hero-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display);
    line-height: 1.1;
    background: linear-gradient(105deg, var(--paper) 25%, var(--lamp) 50%, var(--paper) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--lamp) 16%, transparent));
}

/* 印章：琥珀底、墨字、微倾的落款名章 */
.seal {
    display: grid;
    grid-template-columns: repeat(2, 1.2em);
    gap: 2px;
    padding: 7px;
    flex: 0 0 auto;
    background: linear-gradient(150deg, var(--lamp), color-mix(in srgb, var(--lamp) 72%, var(--ink)));
    color: var(--ink);
    border-radius: 4px;
    transform: rotate(-3deg);
    font-family: var(--font-serif);
    font-weight: 600;
    box-shadow: 0 0 20px color-mix(in srgb, var(--lamp) 28%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
}

/* 印章单字格 */
.seal span {
    display: grid;
    place-items: center;
    width: 1.2em;
    height: 1.2em;
    font-size: var(--text-lg);
    line-height: 1;
}

/* 定位古训：紧跟人名的第二锚点，左侧以琥珀竖线压边 */
.hero-position {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--lamp);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-title);
    line-height: 1.5;
    color: var(--paper);
}

/* 副行：经历提炼的短句，行长受控 */
.hero-sub {
    margin: var(--space-2) 0 0;
    max-width: 36em;
    font-size: var(--text-md);
    color: var(--trace);
}

/* 电源状态行：图面标注字体 + 指示灯 + 链路进度 */
.hero-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--trace);
}

/* 电源指示灯：暗灯常态，点亮后转琥珀 */
.status-lamp {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dim);
    transition: background var(--motion-lamp) var(--ease-power), box-shadow var(--motion-lamp) var(--ease-power);
}

/* 电源指示灯点亮态 */
.status-lamp.is-lit {
    background: var(--lamp);
    box-shadow: 0 0 10px color-mix(in srgb, var(--lamp) 55%, transparent);
}

/* 回路图容器：英雄区右侧的竖向铺开画布，带面板边框与四角托架 */
.circuit {
    position: relative;
    margin: 0;
    height: clamp(480px, 64vh, 680px);
    border: 1px solid color-mix(in srgb, var(--trace) 24%, transparent);
    border-radius: var(--radius-2);
    background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 36%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    box-shadow: inset 0 0 60px color-mix(in srgb, #000 26%, transparent), 0 0 40px color-mix(in srgb, var(--trace) 8%, transparent);
}

/* 回路面板四角托架：左上与右下两组 L 形亮线 */
.circuit::before,
.circuit::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* 左上托架 */
.circuit::before {
    left: -1px;
    top: -1px;
    border-left: 2px solid var(--lamp);
    border-top: 2px solid var(--lamp);
}

/* 右下托架 */
.circuit::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--lamp);
    border-bottom: 2px solid var(--lamp);
}

/* 回路 SVG 绘制层：铺满容器 */
.circuit-svg {
    position: absolute;
    inset: 0;
}

/* 主回路走线：银蓝描边，圆头线帽，带轻微辉光 */
.circuit-trace {
    fill: none;
    stroke: var(--trace);
    stroke-width: var(--stroke-trace);
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--trace) 45%, transparent));
}

/* 通电进行时：走线以描边自绘动画推进（长度由脚本写入 --path-len） */
.circuit.is-energizing .circuit-trace {
    stroke-dasharray: var(--path-len);
    stroke-dashoffset: var(--path-len);
    animation: circuit-draw var(--motion-draw) var(--ease-power) forwards;
}

/* 走线自绘关键帧：偏移归零即电流走完全程 */
@keyframes circuit-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* 通电终态：走线恢复实线 */
.circuit.is-energized .circuit-trace {
    stroke-dasharray: none;
}

/* 电流脉冲：通电后沿主回路巡行的琥珀亮痕（唯一常驻动效） */
.circuit-pulse {
    fill: none;
    stroke: var(--lamp);
    stroke-width: var(--stroke-pulse);
    stroke-linecap: round;
    opacity: 0;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lamp) 70%, transparent));
}

/* 通电终态：脉冲以固定周期自起点巡行至终点 */
.circuit.is-energized .circuit-pulse {
    opacity: 0.9;
    stroke-dasharray: 16 var(--path-len);
    animation: pulse-run var(--motion-pulse) linear infinite;
}

/* 电流脉冲关键帧：亮痕从回路上游巡行到下游 */
@keyframes pulse-run {
    from {
        stroke-dashoffset: var(--path-len);
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* 走线拐角结点：导电连接点 */
.junction {
    fill: var(--trace);
}

/* 尺寸标注组：虚线、箭头与刻度文字 */
.dimension line,
.dimension path {
    stroke: var(--dim);
    stroke-width: 1;
}

/* 尺寸标注文字：图面标注字体 */
.dimension text {
    fill: var(--dim);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
}

/* 端子焊盘：灯座下的小方块 */
.node-pad {
    fill: color-mix(in srgb, var(--panel) 55%, transparent);
    stroke: color-mix(in srgb, var(--trace) 40%, transparent);
    stroke-width: 1;
    rx: 3px;
}

/* 端子灯座外圈 */
.node-socket {
    fill: var(--panel);
    stroke: var(--trace);
    stroke-width: var(--stroke-trace);
}

/* 端子灯芯：未点亮时为暗蓝灰 */
.node-lamp-core {
    fill: var(--dim);
    transition: fill var(--motion-lamp) var(--ease-power);
}

/* 端子点亮：灯芯转琥珀 */
.node.is-lit .node-lamp-core {
    fill: var(--lamp);
}

/* 端子辉光：径向渐变光晕，点亮时浮现 */
.node-halo {
    opacity: 0;
    transition: opacity var(--motion-lamp) var(--ease-power);
}

/* 端子点亮：辉光全开（渐变自身已含透明衰减） */
.node.is-lit .node-halo {
    opacity: 1;
}

/* 待接端子的虚线环：示意「进行中、灯未亮」 */
.node-dashring {
    fill: none;
    stroke: var(--dim);
    stroke-dasharray: 4 5;
}

/* 端子标签列表：脚本定位前的文档流后备形态 */
.circuit-labels {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 端子编号：图面标注 */
.terminal-no {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--trace);
}

/* 端子名：展示层字体 */
.terminal-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: 1.2;
    color: var(--paper);
}

/* 章节标题 */
.section-title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-title);
    color: var(--paper);
}

/* 章节标题下的汇流母线：两端结点、中段走线的分隔线 */
.section-title::after {
    content: "";
    display: block;
    margin-top: var(--space-2);
    height: 2px;
    background-image: radial-gradient(circle 3px at 2px 1px, var(--trace) 100%, transparent), linear-gradient(var(--trace), var(--trace)), radial-gradient(circle 3px at calc(100% - 2px) 1px, var(--trace) 100%, transparent);
    background-repeat: no-repeat;
    background-size: 6px 2px, calc(100% - 12px) 1px, 6px 2px;
    background-position: left center, center, right center;
    opacity: 0.6;
}

/* 服务区容器 */
.services {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) 0;
}

/* 服务端子排 */
.service-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: opacity var(--motion-reveal) var(--ease-power);
}

/* 服务浮现前隐藏：仅在脚本可用时生效，浮现时机由通电动效广播 */
html.js .service-strip.is-pending {
    opacity: 0;
}

/* 服务端子卡片：接线端子排造型 */
.service-item {
    position: relative;
    margin-bottom: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--trace) 24%, transparent);
    border-radius: var(--radius-2);
    background: linear-gradient(150deg, color-mix(in srgb, var(--panel) 42%, transparent), color-mix(in srgb, var(--ink) 78%, transparent));
    transition: border-color var(--motion-lamp) var(--ease-power), box-shadow var(--motion-lamp) var(--ease-power);
}

/* 服务卡片四角托架：左上与右下两组 L 形亮线 */
.service-item::before,
.service-item::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity var(--motion-lamp) var(--ease-power);
}

/* 左上托架 */
.service-item::before {
    left: -1px;
    top: -1px;
    border-left: 2px solid var(--trace);
    border-top: 2px solid var(--trace);
}

/* 右下托架 */
.service-item::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--trace);
    border-bottom: 2px solid var(--trace);
}

/* 服务链接悬停：卡片边框与托架转琥珀并带辉光 */
.service-item:hover,
.service-item:focus-within {
    border-color: color-mix(in srgb, var(--lamp) 45%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--lamp) 12%, transparent);
}

/* 悬停时托架全亮 */
.service-item:hover::before,
.service-item:hover::after,
.service-item:focus-within::before,
.service-item:focus-within::after {
    opacity: 1;
    border-color: var(--lamp);
}

/* 服务链接：整行可点，行内为指示灯 + 编号 + 名称描述 + 主机名 */
.service-link {
    display: grid;
    grid-template-columns: 20px 56px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4) var(--space-4);
    text-decoration: none;
}

/* 服务指示灯：悬停或聚焦时随「通电」语义变琥珀，位置保持不动 */
.service-lamp {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dim);
    transition: background var(--motion-lamp) var(--ease-power), box-shadow var(--motion-lamp) var(--ease-power);
}

/* 服务链接悬停与聚焦：灯亮 */
.service-link:hover .service-lamp,
.service-link:focus-visible .service-lamp {
    background: var(--lamp);
    box-shadow: 0 0 10px color-mix(in srgb, var(--lamp) 55%, transparent);
}

/* 服务端子编号 */
.service-no {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--trace);
}

/* 服务名称与描述的纵向列 */
.service-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* 服务名称 */
.service-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-lg);
    color: var(--paper);
}

/* 服务一句话说明 */
.service-desc {
    font-size: var(--text-sm);
    color: var(--trace);
}

/* 服务主机名铭牌：mono 描边小牌 */
.service-host {
    padding: var(--space-1) var(--space-2);
    border: 1px solid color-mix(in srgb, var(--trace) 30%, transparent);
    border-radius: var(--radius-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--trace);
}

/* 文摘区容器 */
.passages {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) 0;
}

/* 文摘卡片横向排布：后续新增文章向右扩展 */
.passage-grid {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

/* 文摘卡片：双线界框的古典册页 */
.passage {
    position: relative;
    flex: 0 0 auto;
    width: fit-content;
    min-width: 300px;
    max-width: 560px;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--trace) 26%, transparent);
    border-radius: var(--radius-2);
    background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 42%, transparent), color-mix(in srgb, var(--ink) 76%, transparent));
    box-shadow: inset 0 0 40px color-mix(in srgb, #000 22%, transparent);
}

/* 文摘标题：mono 图面标注 */
.passage-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.2em;
    color: var(--dim);
}

/* 文摘正文：宋体竖排，右起左行，界格底纹 */
.passage-text {
    height: 400px;
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 2.4;
    letter-spacing: 0.14em;
    color: var(--paper);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--trace) 12%, transparent) 1px, transparent 1px);
    background-size: 2.4em 100%;
    background-position: right top;
}

/* 文摘落款名章：左下角 */
.passage-seal {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
}

/* 测试点焊盘 */
.testpoint {
    fill: var(--dim);
}

/* 测试点标注文字 */
.testpoint-label {
    fill: var(--dim);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
}

/* 丝印文字组 */
.silkscreen text {
    fill: var(--dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    opacity: 0.75;
}

/* 页脚：单行图纸索引 */
.site-footer {
    max-width: var(--page-max);
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-4) var(--space-5);
    border-top: 1px solid color-mix(in srgb, var(--trace) 22%, transparent);
}

/* 页脚单行索引 */
.footer-line {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    color: var(--dim);
}

/* 中屏适配：英雄区收为单列，回路图保持竖向全宽 */
@media (max-width: 959px) {

    /* 英雄区单列：文案置顶，回路图随后 */
    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        padding: var(--space-5) var(--space-4);
    }

    /* 回路图在中屏收窄高度 */
    .circuit {
        height: clamp(420px, 56vh, 560px);
    }
}

/* 窄屏适配：回路图转横向全宽 */
@media (max-width: 719px) {

    /* 回路图横向画布高度：容纳两行端子名 */
    .circuit {
        height: 230px;
    }

    /* 端子标签宽度收敛，避免相邻标签重叠 */
    .terminal-label {
        max-width: 76px;
    }

    /* 端子名缩小为正文字号 */
    .terminal-name {
        font-size: var(--text-md);
        line-height: 1.15;
    }

    /* 窄屏隐藏尺寸标注，避免拥挤 */
    .dimension {
        display: none;
    }

    /* 文摘竖排降低高度并收紧字号 */
    .passage-text {
        height: 300px;
        font-size: var(--text-md);
    }

    /* 服务行收为三列，主机名并入说明 */
    .service-link {
        grid-template-columns: 20px 44px minmax(0, 1fr);
    }

    /* 窄屏隐藏主机名铭牌，保留链接可读性 */
    .service-host {
        display: none;
    }

    /* 背景装饰图元缩小占位 */
    .orn {
        opacity: 0.05;
    }
}

/* 用户偏好减少动效：跳过走线自绘与电流脉冲，全部过渡即时完成 */
@media (prefers-reduced-motion: reduce) {

    /* 走线不再播放自绘动画 */
    .circuit.is-energizing .circuit-trace {
        animation: none;
    }

    /* 电流脉冲停用 */
    .circuit.is-energized .circuit-pulse {
        animation: none;
    }

    /* 全站过渡时长归零 */
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms;
    }
}

/* 键盘焦点可见性：链接统一琥珀描边 */
a:focus-visible {
    outline: 2px solid var(--lamp);
    outline-offset: 4px;
}