/* ============================================================
   启元.QIEAM UI V4 基础原语与量词类 (base.css)
   其他业务文件与组件只能直接消费本原语，严禁私自覆盖或重写。
   硬性约束：禁止任何裸色值与硬编码数值，一律消费设计令牌 var(--*)。
   ============================================================ */

/* 盒模型基线：独立壳（登录/认证/法务/初始化向导）不加载 Bootstrap，
   由所有壳共同加载的本层统一声明，页面域 CSS 不再各自重复。 */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ── 1. 水平与垂直精密分隔线 ── */
.qx-rule-h {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--scale-rule);
}

.qx-rule-v {
    display: inline-block;
    width: 0;
    height: 100%;
    min-height: 1em;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    border: 0;
    border-left: 1px solid var(--scale-rule);
}

/* ── 2. 竖向签名刻度轨 ── */
/* 宽 6px，次刻度 (minor) 24px，主刻度 (major) 96px，色 --scale-tick 透明度 .35 */
.qx-tick-track-v {
    position: relative;
    display: inline-block;
    width: 6px;
    height: 100%;
    min-height: 96px;
    background-color: transparent;
    background-image:
        linear-gradient(to bottom, var(--scale-tick) 1px, transparent 1px),
        linear-gradient(to bottom, var(--scale-tick) 1px, transparent 1px);
    background-repeat: repeat-y;
    background-size:
        6px 96px,  /* major 刻度：全宽 6px，周期 96px */
        3px 24px;  /* minor 刻度：半宽 3px，周期 24px */
    background-position:
        left top,
        left top;
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* ── 3. 横向签名刻度尺 ── */
/* 次刻度 (minor) 8px，主刻度 (major) 48px */
.qx-tick-track-h {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    background-color: transparent;
    background-image:
        linear-gradient(to right, var(--scale-tick) 1px, transparent 1px),
        linear-gradient(to right, var(--scale-tick) 1px, transparent 1px);
    background-repeat: repeat-x;
    background-size:
        48px 6px,  /* major 刻度：全高 6px，周期 48px */
        8px 3px;   /* minor 刻度：半高 3px，周期 8px */
    background-position:
        left top,
        left top;
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* ── 4. 阈值计量条 ── */
/* 4px 厚，底 --scale-rule，填充 --scale-steel，超限段 --scale-redline */
.qx-threshold {
    --qx-th-val: 0%;
    --qx-th-limit: 100%;
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    background-color: var(--scale-rule);
    border-radius: var(--scale-r-ctl);
}

.qx-threshold::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--qx-th-val);
    max-width: var(--qx-th-limit);
    content: "";
    background-color: var(--scale-steel);
    transition: width var(--dur-lead) var(--ease-out);
}

.qx-threshold::after {
    position: absolute;
    inset: 0 auto 0 var(--qx-th-limit);
    width: calc(var(--qx-th-val) - var(--qx-th-limit));
    content: "";
    background-color: var(--scale-redline);
    transition: width var(--dur-lead) var(--ease-out);
}

/* ── 5. 等宽计量数字 ── */
.qx-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
    white-space: nowrap;
}

/* ── 6. 舒适阅读文本行长 ── */
.qx-measure {
    max-width: 42em;
}

/* ── 7. 表面聚焦环 ── */
/* 2px 当前表面强调色 + 2px offset */
.qx-focus:focus-visible {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}