/* ─────────────────────────────────────────────────────────────
   LanZ · 预约演示表单(/demo/)专属样式

   只被 /demo/ 与 /demo/thanks/ 引用。首页与产品页都不加载 ——
   所以这里的类名一律以 .form 开头,不碰 style.css 里的任何既有类。

   ⚠ 别把它们叫 .field —— style.css 里 .field 已经被「标签 + 值」
     那种只读元数据占了,同名会在两个页面上互相污染。

   设计系统约束(见 tokens.css 的注释,改之前先读):
     · 圆角只有两档 —— 输入框一律直角,只有按钮用 --radius-pill
     · --color-ink-3 是全站文字对比度下限,提示文字不能再浅
     · mono 只承担机器读的元数据;这里的「必填」角标算元数据,走 mono
   ───────────────────────────────────────────────────────────── */

.form{
  max-width:42em;          /* 中文行长用 em 不用 ch */
  margin-block-start:var(--space-xl);
}

/* 行距用 lg 不用 xl:字段砍到六个之后,目标是一屏装下不滚动。
   再窄就会让「标签属于哪个输入框」变模糊 —— 这是下限不是起点。 */
.form__row + .form__row,
.form__pair + .form__row,
.form__row + .form__pair{ margin-block-start:var(--space-lg); }

/* 窄屏一列、宽屏两列。用 auto-fit 而不是媒体查询断点 ——
   两个字段各自最小 11em,装不下就自己掉成一行,不必维护断点值。
   ⚠ 11em 这个数是被弹窗宽度(34em)倒逼出来的:取 14em 时两栏
     在弹窗里装不下,会静默塌成单列,弹窗因此高出一截、要滚动。
     手机上(375px)两栏仍然装不下,照常塌成一列 —— 这是想要的。 */
/* ⚠ 必须清掉 .form__row + .form__row 的上边距。
   grid 不会让相邻兄弟选择器失效 —— 并排的第二格照样吃到那条外边距,
   于是右列整体比左列低一个 --space-xl,看着像没对齐但查不出原因。 */
.form__pair .form__row + .form__row{ margin-block-start:0; }

.form__pair{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(11em, 1fr));
  gap:var(--space-lg);
  margin-block-start:var(--space-lg);
}

.form__label{
  display:block;
  margin-block-end:var(--space-2xs);
  font-size:var(--text-sm);
  font-weight:var(--weight-label);
  color:var(--color-ink-2);
}

/* 「必填」不用红星 —— 星号要靠图例才知道是什么意思,
   而图例总在表单顶上,填到第八个字段时早翻过去了。 */
.form__req{
  margin-inline-start:var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-meta);
  color:var(--color-ink-3);
}

/* 四边灰框、圆角。
   ⚠ 这里**故意偏离** CLAUDE.md 与 tokens.css 里「卡片/字段/图框一律直角」
     那条:预约表单的圆角是用户明确要求的,不是漏改。看到直角规则时
     别把这里"修"回去 —— 用的是 tokens 里既有的 --radius-md(字段档),
     没有另造数值。
   appearance:none 是为了让 <select> 在 macOS 上别自带圆角胶囊。 */
.form__control{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-rule-strong);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  font-family:inherit;
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--color-ink);
  transition:border-color var(--dur-micro) var(--ease-out);
}

.form__control:hover{ border-color:var(--color-ink-3); }

/* 聚焦:边框换成品牌紫,同时加一圈内阴影把线视觉上加粗到 2px。
   ⚠ 用 box-shadow 而不是把 border 改成 2px —— 改边框宽度会让元素
     尺寸变化,同一行的两个字段会在聚焦瞬间抖一下。
   outline 仍然保留:box-shadow 在 Windows 高对比度模式下会被丢掉,
   那时候只剩 outline 撑着可见的焦点指示。 */
.form__control:focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:2px;
  border-color:var(--color-accent);
  box-shadow:inset 0 0 0 1px var(--color-accent);
}

/* <select> 自带的三角在 appearance:none 之后没了,用背景图补一个。
   ⚠ 必须是内联 data URI —— CSP 的 img-src 只放行 'self' 和 data:,
     外部图标字体或 CDN 图标会被直接拦掉。 */
.form__control:not([type]),
select.form__control{
  padding-inline-end:2em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3.5 5 7 9 3.5' fill='none' stroke='%23555' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--space-md) center;
  background-size:0.625em;
}

/* 按钮居中,上方不再画分隔线 —— 字段砍到六个之后,
   那条线分的两边一边是六行、一边是一个按钮,分不出什么东西来。 */
.form__submit{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--space-md) var(--space-lg);
  margin-block-start:var(--space-xl);
}

/* 蜜罐。挪出视口而不是 display:none —— 部分批量脚本会跳过
   不可见字段,但照着 name 属性填满所有它能找到的输入框。
   已带 aria-hidden 与 tabindex="-1",读屏和键盘都走不到这里。 */
.form__trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}


/* ══ 预约演示弹窗 ══════════════════════════════════════════
   六个产品页与首页的「预约演示」点了在原地开这个弹窗,不跳页。

   ⚠ 无 JS 时这个 <dialog> 根本不会被创建,按钮仍是一个指向 /demo/ 的
     普通链接 —— 和站里「内容默认可用,JS 只负责增强」那条一致。

   用原生 <dialog> 而不是自己搭浮层:焦点陷阱、Esc 关闭、惰性化背景
   (inert)浏览器都做好了,自己写这三样很容易写漏其中一样。
   ══════════════════════════════════════════════════════════ */
.modal{
  width:min(34em, calc(100vw - 2 * var(--space-lg)));
  max-height:calc(100vh - 2 * var(--space-lg));
  padding:var(--space-xl);
  border:0;
  border-radius:var(--radius-lg);     /* 浮层面板档,同样是明确要求的偏离 */
  background:var(--color-paper);
  color:var(--color-ink);
  box-shadow:0 40px 90px var(--color-shadow);
}

.modal::backdrop{ background:color-mix(in oklch, var(--color-void) 62%, transparent); }

/* 标题居中。关闭按钮改成绝对定位 —— 留在流里的话它会把标题
   往左推,居中就成了「在剩下的空间里居中」,看着是歪的。 */
.modal__head{
  position:relative;
  text-align:center;
}

.modal__title{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:var(--weight-title);
}

/* 关闭按钮是图标,没有可读文字 —— aria-label 写在 HTML 里。
   点击区做到 44px,低于这个数在触屏上按不准。 */
.modal__close{
  display:grid;
  place-items:center;
  position:absolute;
  inset-block-start:50%;
  inset-inline-end:calc(-1 * var(--space-sm));
  transform:translateY(-50%);
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--color-ink-3);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
}

.modal__close:hover{ color:var(--color-ink); }
.modal__close:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }

/* 已选 Agent 的回显。渠道页的组合台把勾选项以 ?agents= 挂在链接上,
   main.js 第 9 段把它写进隐藏字段,同时在这里念出来。位置就是
   「想了解哪个产品」那个下拉原来的地方 —— 两者互斥,带组合进来时
   下拉整行藏起来,人已经在组合台选过一遍了,不必再问一次。
   ⚠ 只是回显,不是可编辑的标签 —— 所以没有删除按钮、没有 hover 态。
   ⚠ 圆角用 pill:这是状态标签,不是卡片(卡片一律直角,见 tokens.css)。 */
.modal__picked{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs);
  margin:0;
}

.modal__picked span{
  padding:var(--space-3xs) var(--space-xs);
  border-radius:var(--radius-pill);
  background:var(--color-accent-soft);
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
}

/* 弹窗里的表单顶上不用再留大间距,标题已经把位置占了 */
.modal .form{ margin-block-start:var(--space-lg); }