/* ============================================================
   志睿源官网 · base.css
   设计变量 / 重置 / 排版 / 通用容器
   ============================================================ */

:root {
    /* ── 主色（取自官方标识：深红 + 橙，斜条纹） ──
       #B11A1A 红 ／ #D37006 橙                             */
    --brand: #B11A1A;
    --brand-2: #D37006;
    --brand-grad: linear-gradient(135deg, #B11A1A 0%, #D37006 100%);
    --brand-dark: #8A1212;
    --brand-hover: #961515;
    --brand-soft: #FDF1EA;
    --brand-tint: #FBE6D8;
    --brand-rgb: 177, 26, 26;

    /* 暗色区（页脚 / CTA / 代码块）——暖黑，承接红色体系 */
    --ink-bg: #241B18;
    --ink-bg-2: #2F2421;

    /* 文字 */
    --ink: #1E1917;
    --ink-2: #3A3230;
    --ink-3: #55504E;
    --muted: #7A6F6B;
    --muted-2: #A79A95;

    /* 背景与描边 */
    --bg: #FFFFFF;
    --surface: #FBF7F5;
    --surface-2: #F4EDEA;
    --line: #ECE3DF;
    --line-2: #F6F0ED;

    /* 状态色 */
    --ok-bg: #E3F3EC;
    --ok-fg: #0E6B54;
    /* 「已经完成」主色（与 --ok-fg 同色系，用于 tab 选中态等实心场景） */
    --done: #0E6B54;
    --doing-bg: #FCEEDD;
    --doing-fg: #8A4C08;
    --plan-bg: #F4EDEA;
    --plan-fg: #7A6F6B;
    --hot: #A85A05;

    /* 尺寸 */
    --maxw: 1120px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --header-h: 64px;

    --shadow-sm: 0 1px 2px rgba(66, 32, 22, .05);
    --shadow: 0 1px 2px rgba(66, 32, 22, .05), 0 10px 30px -18px rgba(66, 32, 22, .20);
    --shadow-lg: 0 2px 4px rgba(66, 32, 22, .05), 0 22px 48px -24px rgba(66, 32, 22, .30);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ===========================================================================
   共享渲染包的换皮映射（2026-09-18）
   ---------------------------------------------------------------------------
   图形块 / 角标 / 放大查看器的样式骨架在 /shared/md/md-enhance.css ——
   那份文件与 md 分享服务共用同一份，这里只把配色接到官网品牌色上。
   ⚠️ 要改图形外观请改这里的变量，不要另写一份 .md-body .graph-* 规则。
   =========================================================================== */
:root {
    --mdg-border: var(--line);
    --mdg-border-hover: var(--muted-2);
    --mdg-bg: #FFFFFF;
    --mdg-radius: var(--radius);
    --mdg-warn-bg: var(--doing-bg);
    --mdg-warn-fg: var(--doing-fg);
    --mdg-err-fg: var(--brand);
    --mdg-hint-bg: rgba(36, 27, 24, .55);
    --mdg-hint-fg: #FFFFFF;
    --mdg-ph-bg: var(--surface);
    --mdg-ph-fg: var(--muted);

    --gv-bar-bg: var(--brand);
    --gv-bar-fg: #FFFFFF;
    --gv-scale-fg: #FFF1EC;
    --gv-btn-bg: rgba(255, 255, 255, .18);
    --gv-btn-bg-hover: rgba(255, 255, 255, .34);
    --gv-stage-bg: #FFFFFF;
    --gv-grid: #F6F1EE;
    --gv-z: 9999;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    color: var(--ink);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
}

h1 {
    font-size: 45px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

h2 {
    font-size: 31.5px;
}

h3 {
    font-size: 21.5px;
}

h4 {
    font-size: 18px;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: var(--brand-hover);
}

img {
    max-width: 100%;
    display: block;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

code {
    font-family: var(--mono);
    font-size: .875em;
    background: var(--surface-2);
    padding: .15em .4em;
    border-radius: 5px;
    color: var(--ink);
}

pre {
    margin: 0 0 1.25em;
    padding: 18px 20px;
    background: #0F172A;
    border-radius: var(--radius);
    overflow-x: auto;
    line-height: 1.65;
}

pre code {
    background: none;
    padding: 0;
    color: #E2E8F0;
    font-size: 15px;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 32px 0;
}

::selection {
    background: #DBEAFE;
    color: var(--ink);
}

/* ── 布局容器 ─────────────────────────────────────────── */
.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.page {
    padding: 56px 0 88px;
}

.page--tight {
    padding: 40px 0 64px;
}

.section {
    padding: 72px 0;
}

.section--alt {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* 「正在做的事 · 进展日志」区块：暖粉晕染背景图（同一套标识色系）。
   上面压一层暖粉罩，既保留纸张质感，又保证正文对比度。 */
.section--nowbg {
    background:
        linear-gradient(180deg,
            rgba(253, 246, 241, .86) 0%,
            rgba(253, 240, 233, .72) 40%,
            rgba(252, 233, 221, .84) 100%),
        url('/zry/assets/now-bg.jpg?v=2e2077fe') center center / cover no-repeat,
        var(--surface);
}

/* 该区块副标题较长，字号放大后会掉一个孤字，这里放宽一行 */
.section--nowbg .section-head .lead {
    max-width: 860px;
}

.section--tight {
    padding: 52px 0;
}

/* ── 通用小组件 ───────────────────────────────────────── */
.eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 12px;
}

.lead {
    font-size: 19.5px;
    line-height: 1.8;
    color: var(--ink-3);
    max-width: 720px;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: 15px;
}

.center {
    text-align: center;
}

.center .lead {
    margin-left: auto;
    margin-right: auto;
}

.section-head {
    margin-bottom: 36px;
}

.section-head--center {
    text-align: center;
}

.section-head--center .lead {
    margin-left: auto;
    margin-right: auto;
}

.section-head h2 {
    margin-bottom: 10px;
}

.grid {
    display: grid;
    gap: 20px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.row--between {
    justify-content: space-between;
}

.row--wrap {
    flex-wrap: wrap;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top .2s;
}

.skip-link:focus {
    top: 0;
    color: #fff;
}

/* ── 占位与加载 ───────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, #F0E4DD 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: sk 1.3s ease infinite;
    border-radius: var(--radius-sm);
}

@keyframes sk {
    0% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

.empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

.empty__title {
    color: var(--ink-2);
    font-weight: 600;
    margin-bottom: 6px;
}

/* ── 横向溢出统一防护（2026-09-17）─────────────────────────
   症状：窄屏下整页可以左右滑动，「内容滑出屏幕」。

   根因不是哪个元素写错了宽度，而是 CSS 的这条默认规则：
       网格 / 弹性子项的 min-width 初始值是 auto
       → 该子项**不允许被压到比它的内容更窄**
       → 于是「不可折行的内容」把整列顶宽，列再顶破 .wrap

   实测踩到两处：
     · 产品详情页左栏：markdown 表格 .md-body table{min-width:420px}
       把 1fr 列撑到 422px（390px 视口下整页溢出 50px）
     · 关于页右侧卡：统一社会信用代码这类长串把 aside 撑到 347px
       （360px 视口下整页溢出 6px）

   修法必须两层同时上，缺一层都不成立：
     ① 结构层 —— 让子项允许收缩（min-width:0）。只加这层，宽内容照样溢出。
     ② 内容层 —— 让长串能断行（overflow-wrap:anywhere）。
        只加这层，表格这类「带显式 min-width 的盒子」照样把列顶宽。
   再靠 ③ 容器层 —— 宽内容在自己的盒子里横向滚动
     （.md-table-wrap / pre 本来就有 overflow-x:auto），内容才不被裁掉。

   ⚠️ 不要用 overflow:hidden 去「捂住」溢出：它虽然同样能解除 min-width:auto，
      但会把宽内容（表格最右几列）直接裁掉且无法滚动查看，等于丢信息。

   ⚠️ 本段是「兜底层」。若之后在 layout.css / components.css / pages.css 里
      对同一元素写了同优先级声明，会覆盖本段。新增「可能装长内容」的组件后，
      务必跑一次 `node _probe_width.js 390 360` 复量。 */

.grid > *,
.stack > *,
.about-intro > *,
.contact-layout > *,
.pd-head > *,
.track-hero > *,
.tl-item > *,
.price-grid > *,
.footer-grid > * {
    min-width: 0;
}

/* overflow-wrap 是**继承属性**，写在容器上即可覆盖其全部后代 */
.md-body,
.card__desc,
.tl-card__body,
.svc-card,
.related-item,
.pd-repo,
.pd-side {
    overflow-wrap: anywhere;
}

/* ── 响应式 ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    body {
        font-size: 17.5px;
    }

    .wrap {
        padding: 0 18px;
    }

    h1 {
        font-size: 32.5px;
    }

    h2 {
        font-size: 26px;
    }

    .page {
        padding: 32px 0 64px;
    }

    .section {
        padding: 48px 0;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}