/* AgentBridge 官网首页：普鲁士蓝晒图纸，白色线稿。说明书（/docs/）另有一套样式。 */

@font-face {
  font-family: "AB Fang";
  src: url("/assets/fonts/ab-fang.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "AB ISO";
  src: url("/assets/fonts/ab-iso.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --sheet: #0a3a8c;          /* 晒图蓝 */
  --sheet-deep: #082f73;     /* 标题栏、按下态 */
  --ink: #ffffff;            /* 成品线、正文 */
  --ink-soft: #c9d4e6;       /* 次要文字（白 78%） */
  --line-soft: rgba(255, 255, 255, .45);   /* 构造线 */
  --line-faint: rgba(255, 255, 255, .22);
  --grid: rgba(255, 255, 255, .06);
  --brand: #0d71fc;          /* 品牌蓝：只用于激活与焦点 */
  --signal: #8fbcff;         /* 品牌蓝的亮色，用于悬停描边 */
  --draw: "AB ISO", "AB Fang", "FangSong", "STFangsong", "Microsoft YaHei UI", serif;
  --text: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --gutter: clamp(16px, 3vw, 40px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  scrollbar-color: var(--line-soft) var(--sheet-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--draw);
  font-size: 17px;
  line-height: 1.8;
  caret-color: var(--ink);
  background-color: var(--sheet);
  background-image:
    url("/assets/home/grain.svg"),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 240px 240px, 24px 24px, 24px 24px;
}

::selection { background: var(--ink); color: var(--sheet); }
p, li, td, dd { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover { text-decoration-color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.iso { font-family: "AB ISO", var(--text); letter-spacing: .02em; font-variant-numeric: lining-nums; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  padding: 8px 14px; background: var(--ink); color: var(--sheet); text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- 顶栏 ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--sheet);
  border-bottom: 1px solid var(--line-soft);
}
.bar-inner { display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 var(--gutter); }
.bar-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: "AB ISO", var(--text); font-size: 20px; letter-spacing: .03em;
}
.bar-brand img { border-radius: 6px; }
.bar-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.bar-nav a {
  color: var(--ink-soft); text-decoration: none; font-family: var(--draw); font-size: 16px;
  padding: 4px 0; border-bottom: 1.5px solid transparent;
}
.bar-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.bar-nav .bar-docs { color: var(--ink); padding: 3px 12px; border: 1px solid var(--line-soft); white-space: nowrap; }
.bar-nav .bar-docs:hover { border-color: var(--ink); }
.bar-cta {
  padding: 6px 18px; background: var(--ink); color: var(--sheet);
  text-decoration: none; font-family: var(--draw); font-size: 16px; white-space: nowrap;
}
.bar-cta:hover { background: var(--signal); }
@media (max-width: 860px) {
  .bar-nav a:not(.bar-docs) { display: none; }
  .bar-nav { gap: 12px; }
  .bar-nav .bar-docs { font-size: 14px; padding: 2px 8px; }
  .bar-inner { gap: 12px; }
}

/* ---------- 图纸 ---------- */
.sheet { padding: 28px var(--gutter); }
.sheet + .sheet { padding-top: 12px; }
.frame {
  position: relative;
  max-width: 1440px; margin: 0 auto;
  padding: 44px 52px 40px;
  border: 2.5px solid var(--ink);
  outline: 1px solid var(--line-soft); outline-offset: 7px;
}

.zones { position: absolute; display: flex; font-family: "AB ISO", var(--text); font-size: 12px; color: var(--ink-soft); pointer-events: none; }
.zones-top { top: 0; left: 24px; right: 0; height: 22px; border-bottom: 1px solid var(--line-faint); }
.zones-top span { flex: 1; text-align: center; line-height: 22px; border-left: 1px solid var(--line-faint); }
.zones-side { top: 22px; bottom: 0; left: 0; width: 24px; flex-direction: column; border-right: 1px solid var(--line-faint); }
.zones-side span { flex: 1; display: grid; place-items: center; border-top: 1px solid var(--line-faint); }
.zones-side span:first-child { border-top: 0; }

/* ---------- 总图 ---------- */
.sheet-hero .frame { padding-top: 38px; padding-bottom: 28px; padding-left: 60px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px);
  grid-template-areas: "head tb" "elev tb";
  column-gap: 40px;
}
.hero-head { grid-area: head; max-width: 46em; }
h1, h2, h3 { font-family: var(--draw); font-weight: 400; font-synthesis: none; letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(34px, 3.1vw, 46px); line-height: 1.18; }
.hero-lead { margin: 12px 0 0; color: var(--ink-soft); font-size: 18px; max-width: 40em; }

.elevation { grid-area: elev; margin: 10px 0 0; min-width: 0; }
.elev-draw { position: relative; aspect-ratio: 1200 / 560; container-type: inline-size; }
.bridge { display: block; width: 100%; height: 100%; overflow: visible; }
.bridge-h { position: absolute; inset: 0; }
.bridge-v { display: none; }
.bridge path, .bridge rect, .bridge circle { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; }
.bridge text { font-family: var(--draw); fill: var(--ink); stroke: none; }
.centerline { stroke: var(--line-soft) !important; stroke-width: 1.2; stroke-dasharray: 26 6 4 6; }
.ground { stroke: var(--line-soft) !important; stroke-width: 1.5; }
.hatch-line { stroke: var(--line-soft); stroke-width: 1.5; }
.bridge rect[fill] { stroke: none; fill: url(#hatch); }
.piers rect, .piers path { stroke-width: 2.5; }
.deck path { stroke-width: 3; transition: stroke .3s var(--ease-out), stroke-width .3s var(--ease-out); }
.deck .truss { stroke-width: 2.5; }
.deck .break { stroke-width: 1.8; }
.deck-broken { display: none; }
.dims path { stroke-width: 1.2; }
.dims .arrow { fill: var(--ink); stroke: none; }
.dims text { font-size: 21px; }
.balloons circle, .v-balloon { stroke-width: 2; fill: var(--sheet) !important; }
.balloons .b-no, .bridge .b-no { font-family: "AB ISO", var(--text); font-size: 18px; }
.balloons .b-label { font-size: 20px; }
.leader { stroke-width: 1.2 !important; }
.v-dim { font-size: 15px; }

.pane { position: absolute; }
.pane-helper { left: 4.33%; top: 14.64%; width: 29.67%; height: 44.64%; }
.pane-recipient { left: 66%; top: 14.64%; width: 29.67%; }
.pane-label { display: none; }
.chat {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw;
  padding: 1.6cqw 1.8cqw;
  border: 1px solid var(--line-soft);
  position: relative;
}
.chat-tag {
  position: absolute; top: 0; right: 0; margin: 0;
  padding: .15cqw .9cqw; background: var(--ink); color: var(--sheet);
  font-family: var(--draw); font-size: max(11px, 1.1cqw);
}
.chat-line { display: flex; gap: 1.2cqw; margin: 0; font-size: max(12px, 1.45cqw); line-height: 1.6; }
.chat-who { flex: none; width: 4.4cqw; font-family: var(--draw); color: var(--ink-soft); }
.chat .iso { white-space: nowrap; }
.pane-recipient img { width: 100%; }

/* 会话状态开关 */
.states { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.states legend {
  float: left; margin: 0 16px 0 0; padding: 6px 0;
  font-family: var(--draw); font-size: 15px; color: var(--ink-soft); letter-spacing: .1em;
}
.state-opts { display: flex; flex-wrap: wrap; }
.state-opts label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-right: -1px;
  border: 1px solid var(--line-soft);
  font-family: var(--draw); font-size: 16px; cursor: pointer;
  transition: background-color .2s var(--ease-out);
}
.state-opts input {
  appearance: none; margin: 0; width: 12px; height: 12px;
  border: 1.5px solid var(--ink); border-radius: 50%;
}
.state-opts input:checked { background: var(--ink); box-shadow: 0 0 0 2px var(--sheet) inset; }
.state-opts input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.state-opts label:hover { background: rgba(255, 255, 255, .06); }
.state-opts label:has(input:checked) { background: rgba(255, 255, 255, .1); border-color: var(--ink); position: relative; z-index: 1; box-shadow: inset 0 -3px 0 var(--brand); }
.state-note { clear: both; margin: 10px 0 0; min-height: 3.5em; color: var(--ink-soft); font-size: 15px; }
.sn { display: none; }

.sheet-hero:has(input[value="wait"]:checked) .sn-wait,
.sheet-hero:has(input[value="on"]:checked) .sn-on,
.sheet-hero:has(input[value="pause"]:checked) .sn-pause,
.sheet-hero:has(input[value="end"]:checked) .sn-end { display: inline; }

.sheet-hero:has(input[value="wait"]:checked) .deck-full path {
  stroke: var(--line-soft); stroke-width: 1.4; stroke-dasharray: 10 7;
}
.sheet-hero:has(input[value="pause"]:checked) .deck-full path { stroke-dasharray: 16 11; }
.sheet-hero:has(input[value="end"]:checked) .deck-full { display: none; }
.sheet-hero:has(input[value="end"]:checked) .deck-broken { display: inline; }

.elevation figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* 首次加载时桁架从左到右描线一次 */
@media (prefers-reduced-motion: no-preference) {
  .bridge-h .deck-full path { animation: ink 1.6s var(--ease-out) .3s backwards; }
  .bridge-h .deck-full .chord { animation-delay: .55s; }
  .bridge-h .deck-full .slab { animation-delay: .15s; }
}
@keyframes ink { from { stroke-dasharray: 0 1000; } to { stroke-dasharray: 1000 0; } }

/* 标题栏 */
.titleblock {
  grid-area: tb; align-self: end;
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 -52px -28px 0;          /* 抵消图框内边距，贴到图框右下角 */
  border-top: 2.5px solid var(--ink); border-left: 2.5px solid var(--ink);
  background: var(--sheet-deep);
  padding: 0 0 18px;
}
.tb-name {
  margin: 0; padding: 14px 18px 10px;
  font-size: clamp(32px, 2.6vw, 40px); line-height: 1.1;
  border-bottom: 1px solid var(--line-soft);
}
.tb-cells { margin: -12px 0 6px; display: grid; grid-template-columns: 1fr 1fr; }
.tb-cells div { padding: 8px 18px; border-bottom: 1px solid var(--line-soft); }
.tb-cells div:nth-child(2) { border-left: 1px solid var(--line-soft); }
.tb-cells .tb-wide { grid-column: 1 / -1; }
.tb-cells dt { font-family: var(--draw); font-size: 13px; color: var(--ink-soft); letter-spacing: .1em; }
.tb-cells dd { margin: 0; font-size: 16px; }
.tb-cells dd.iso { font-size: 20px; }
.titleblock > .btn, .titleblock > .tb-row { margin: 0 18px; }
.tb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tb-code { margin: 0; font-family: var(--draw); font-size: 15px; color: var(--ink-soft); }
.tb-code b { font-weight: 400; color: var(--ink); font-size: 19px; margin-left: 4px; }
.tb-link { font-family: var(--draw); font-size: 15px; }

/* 按钮：直角，白色实底或白线框 */
.btn {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 10px;
  min-height: 50px; padding: 12px 20px; white-space: nowrap;
  font-family: var(--draw); font-size: 19px; text-decoration: none; line-height: 1.3;
  border: 1.5px solid var(--ink);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn small { font-family: var(--text); font-size: 13px; }
.btn-solid { background: var(--ink); color: var(--sheet); }
.btn-solid:hover { background: var(--signal); border-color: var(--signal); }
.btn-line { color: var(--ink); background: transparent; }
.btn-line:hover { background: rgba(255, 255, 255, .1); }
.btn-arrow { width: 30px; height: 12px; flex: none; align-self: center; }
.btn-arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.btn-arrow .fill { fill: currentColor; stroke: none; }

/* ---------- 其他图纸 ---------- */
.view-head { margin-bottom: 32px; max-width: 52em; }
.view-title {
  display: table; margin: 18px auto 0; padding: 0 18px 4px;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--draw); font-size: 20px; letter-spacing: .2em; color: var(--ink);
}
.ref-line.ref-balloon { height: 30px; }
.ref-balloon circle { stroke-width: 2; }
.ref-balloon text { font-size: 17px !important; }
h2 { margin: 0; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.25; }
.view-lead { margin: 12px 0 0; color: var(--ink-soft); max-width: 40em; }

/* 剖面 A–A */
.section-aa { display: grid; grid-template-columns: 1fr minmax(120px, 170px) 1fr; border: 2.5px solid var(--ink); }
.layer { padding: 26px 28px 22px; }
.layer h3 { margin: 0; font-size: 28px; }
.layer-who { margin: 4px 0 18px; color: var(--ink-soft); font-size: 15px; }
.layer-channel {
  border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
  background-image: repeating-linear-gradient(-45deg, var(--line-faint) 0 1px, transparent 1px 12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px 12px;
}
.channel-name {
  margin: 0; padding: 4px 10px; background: var(--sheet);
  border: 1px solid var(--ink); font-family: var(--draw); font-size: 18px; letter-spacing: .1em;
}
.channel-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.channel-marks li {
  padding: 2px 10px; background: var(--sheet);
  font-family: var(--draw); font-size: 15px; color: var(--ink-soft);
}
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-soft); color: var(--ink-soft); }
.steps b { display: block; font-family: var(--draw); font-weight: 400; font-size: 20px; color: var(--ink); }
.step-no {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink); font-size: 17px; line-height: 1;
}
.steps li:last-child .step-no { background: var(--ink); color: var(--sheet); }

/* 明细栏 */
.table-wrap { overflow-x: auto; }
.bom { width: 100%; border-collapse: collapse; border: 2.5px solid var(--ink); font-variant-numeric: tabular-nums; }
.bom th, .bom td { text-align: left; vertical-align: top; padding: 14px 18px; border: 1px solid var(--line-soft); }
.bom thead th {
  font-family: var(--draw); font-weight: 400; font-size: 15px; letter-spacing: .14em; color: var(--ink-soft);
  border-bottom: 2px solid var(--ink); padding-top: 10px; padding-bottom: 10px;
}
.bom tbody th { font-family: var(--draw); font-weight: 400; font-size: 19px; white-space: nowrap; }
.bom td:last-child { color: var(--ink-soft); }
.bom .bom-no { width: 4.5em; text-align: center; }
.bom td.bom-no { font-size: 18px; }

/* 技术要求 */
.reqs {
  margin: 0; padding: 0; list-style: none; counter-reset: req;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px;
}
.reqs li {
  counter-increment: req; position: relative;
  padding: 16px 0 16px 44px; border-top: 1px solid var(--line-soft); color: var(--ink-soft);
}
.reqs li::before {
  content: counter(req) "."; position: absolute; left: 0; top: 14px;
  font-family: "AB ISO", var(--text); font-size: 22px; color: var(--ink);
}
.reqs b { display: block; font-family: var(--draw); font-weight: 400; font-size: 20px; color: var(--ink); }
.reqs-title { margin: 0 0 6px; font-size: 22px; letter-spacing: .3em; }
.ref { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
.ref-line { width: 60px; height: 14px; flex: none; overflow: visible; }
.ref-line path, .ref-line circle { fill: none; stroke: var(--ink); stroke-width: 2; }
.ref-line .fill { fill: var(--ink); stroke: none; }
.ref-line .ref-wait { stroke: var(--line-soft); stroke-width: 1.4; stroke-dasharray: 6 4; }
.ref-line .ref-pause { stroke-dasharray: 9 6; }
.ref-line .ref-break { stroke-width: 1.4; }
.ref-line text { font-family: "AB ISO", var(--text); font-size: 11px; fill: var(--ink); stroke: none; }
.nobr { display: inline-block; }
.reqs-more { margin: 24px 0 0; color: var(--ink-soft); }

/* 下载与规格 */
.dl-grid { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: 48px; align-items: start; }
.spec { margin: 0; border: 2.5px solid var(--ink); }
.spec div { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--line-soft); }
.spec div:first-child { border-top: 0; }
.spec dt { padding: 12px 18px; border-right: 1px solid var(--line-soft); font-family: var(--draw); font-size: 16px; color: var(--ink-soft); }
.spec dd { margin: 0; padding: 12px 18px; }
.spec dd.iso { font-size: 19px; }
.get { display: flex; flex-direction: column; gap: 12px; }
.hash { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.hash summary { cursor: pointer; color: var(--ink-soft); font-size: 15px; }
.hash summary:hover { color: var(--ink); }
.hash p { margin: 10px 0 4px; color: var(--ink-soft); font-size: 13px; }
.hash code {
  display: block; margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere;
}

.docs-band {
  margin-top: 40px; padding: 26px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  border: 2.5px solid var(--ink); outline: 1px solid var(--line-soft); outline-offset: 5px;
}
.docs-band h3 { margin: 0; font-size: 26px; }
.docs-band p { margin: 6px 0 0; color: var(--ink-soft); max-width: 36em; }
.docs-band .btn { min-width: 240px; }

.foot { padding: 8px var(--gutter) 32px; }
.foot-inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  font-size: 14px; color: var(--ink-soft);
}
.foot p { margin: 0; }
.foot a { color: var(--ink-soft); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "head" "elev" "tb"; }
  .titleblock { margin: 28px -52px -28px -60px; border-left: 0; }
  .dl-grid { grid-template-columns: 1fr; gap: 28px; }
  .reqs { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sheet { padding: 16px 10px; }
  .frame, .sheet-hero .frame { padding: 28px 16px 24px; outline-offset: 4px; }
  .zones { display: none; }
  .hero-lead { font-size: 16px; }

  .elev-draw { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; }
  .bridge-h { display: none; }
  .bridge-v { display: block; order: 2; height: auto; max-width: 320px; margin: 4px auto; }
  .pane { position: static; width: auto; height: auto; }
  .pane-helper { order: 1; }
  .pane-recipient { order: 3; }
  .pane-label {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
    font-family: var(--draw); font-size: 15px;
  }
  .pane-no {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--ink); font-family: "AB ISO", var(--text); font-size: 14px;
  }
  .chat { height: auto; gap: 10px; padding: 22px 14px 14px; }
  .chat-tag { font-size: 11px; padding: 1px 8px; }
  .chat-line { font-size: 14px; gap: 10px; }
  .chat-who { width: 3.4em; }

  .state-opts { display: grid; grid-template-columns: 1fr 1fr; }
  .state-opts label { padding: 8px 10px; font-size: 15px; margin: 0 -1px -1px 0; }
  .states legend { float: none; margin-bottom: 6px; padding: 0; }

  .section-aa { grid-template-columns: 1fr; }
  .layer { padding: 20px 16px; }
  .layer-channel {
    border: 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
    flex-direction: row; flex-wrap: wrap; gap: 8px;
  }
  .channel-marks { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }

  .bom thead { display: none; }
  .bom, .bom tbody, .bom tr, .bom th, .bom td { display: block; }
  .bom tr { display: grid; grid-template-columns: 2.6em 1fr; border-bottom: 1px solid var(--line-soft); padding: 12px 14px; }
  .bom tr:last-child { border-bottom: 0; }
  .bom th, .bom td { border: 0; padding: 2px 0; }
  .bom td.bom-no { grid-row: 1 / span 3; text-align: left; width: auto; }
  .bom tbody th { white-space: normal; }
  .bom td:last-child { font-size: 14px; }

  .spec div { grid-template-columns: 6.5em 1fr; }
  .spec dt, .spec dd { padding: 10px 12px; }
  .docs-band { padding: 20px 16px; }
  .docs-band .btn { width: 100%; min-width: 0; }
  .titleblock { margin: 24px -16px -24px; }
}