/* 交路站共用的设计变量与组件（交路编制、查人查车都在自己的样式之前引用本文件）。
   规范见 docs/界面规范.md；取值与新系统 static/css/tokens.css、components.css 对齐（以新系统为准，交路站的差异在规范里写明）。

   用法要点：
   - 页面样式只读变量（--ui-*），不写死颜色、字号、间距、控件高度；
   - 原生控件的基本样式写在 :where() 里（特异性为 0）：页面自己的规则一律盖得过它，没写的部分统一成这里的样子；
   - 组件一律 ui- 前缀：字段 ui-field / ui-fields / ui-field-group，卡片 ui-cards / ui-card，按钮 ui-btn，文件框 ui-file；
     查人查车用 frontend/viz/js/ui.js 的 field()、fieldGroup()、card()、cardGroup() 生成，不手写结构。
   - 不用 :has()；subgrid 只做增强（钉钉安卓内核报 Chrome/100，不支持时退回到“按钮压底”）。 */

:root {
  /* 文字与底色（新系统 tokens.css） */
  --ui-ink: #1b2330;
  --ui-ink-soft: #3a4453;
  --ui-muted: #5e6878;
  --ui-faint: #8a93a2;
  --ui-line: #e2e6ec;
  --ui-line-soft: #eef1f4;
  --ui-line-strong: #d5dae1;
  --ui-ground: #f4f5f7;
  --ui-surface: #ffffff;
  --ui-surface-alt: #f7f8fa;
  --ui-hover: #f3f6fb;

  /* 主色：交路站沿用自己的青绿（新系统是蓝色），其余语气色与新系统相同 */
  --ui-primary: #0f766e;
  --ui-primary-hover: #0c625b;
  --ui-primary-ink: #ffffff;
  --ui-primary-soft: #e6f4f2;
  --ui-primary-line: #a7d7d1;
  --ui-focus: rgba(15, 118, 110, 0.3);

  --ui-success: #1b6a40;
  --ui-success-soft: #e7f4ec;
  --ui-success-line: #b9dcc6;
  --ui-warn: #a65a00;
  --ui-warn-ink: #8a4b00;
  --ui-warn-soft: #fdf1e2;
  --ui-warn-line: #f0d2a8;
  --ui-danger: #b3261e;
  --ui-danger-soft: #fff1f0;
  --ui-danger-line: #f1c5c1;
  --ui-neutral-soft: #eef1f4;

  /* 间距 */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-gap-section: 18px;   /* 页面区块之间 */
  --ui-gap-card: 16px;      /* 卡片里区块之间；一组卡片之间 */
  --ui-gap-field: 14px;     /* 字段与字段之间（上下） */
  --ui-gap-field-x: 16px;   /* 同一行字段之间（左右） */
  --ui-gap-label: 6px;      /* 字段标题与控件（全站统一，不是“至少”） */
  --ui-gap-control: 8px;    /* 两个控件之间 */

  /* 圆角与阴影：卡片 12、面板 10、控件 8、标签 6；卡片不带阴影，弹出层才带 */
  --ui-radius-card: 12px;
  --ui-radius-panel: 10px;
  --ui-radius-control: 8px;
  --ui-radius-chip: 6px;
  --ui-shadow-pop: 0 12px 32px rgba(27, 35, 48, 0.16);
  --ui-shadow-float: 0 -6px 20px rgba(27, 35, 48, 0.12);

  /* 控件高度：管理类页面 40，紧凑的筛选 32；大屏显示页另见规范 */
  --ui-control: 40px;
  --ui-control-sm: 32px;
  --ui-control-pad: 12px;

  /* 字号与行高：正文 14、表格 13、说明 12；页面标题 24（手机 22）、卡片标题 16 */
  --ui-font-body: 14px;
  --ui-font-table: 13px;
  --ui-font-note: 12px;
  --ui-font-title: 24px;
  --ui-font-card-title: 16px;
  --ui-font-input: 14px;
  --ui-line-body: 1.6;
  --ui-line-tight: 1.4;
  --ui-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 卡片内边距与面板（一个站点一个数） */
  --ui-gutter: 20px;
  --ui-panel: 15px;

  /* 字段与卡片的最小列宽：放不下就整列换到下一行，不在列里挤字（字段 220px 与新系统二.16 相同：12px 字放得下 18 个汉字） */
  --ui-field-min: 220px;
  --ui-card-min: 15rem;
}

/* 屏宽 899px 以下输入框 16px，防 iOS 聚焦时放大（新系统 tokens.css 同一断点） */
@media (max-width: 899px) {
  :root {
    --ui-font-input: 16px;
  }
}

@media (max-width: 760px) {
  :root {
    --ui-gutter: 14px;
    --ui-font-title: 22px;
  }
}

/* 紧凑区（卡片标题行里的小筛选、表格里的行内修改）：控件 32px */
.ui-compact {
  --ui-control: var(--ui-control-sm);
  --ui-control-pad: 8px;
}

/* ---------------------------------------------------------------- 折行 */

/* 折行（新系统《界面规范》二.15，10-24 终审后改写）：
   - 正文用浏览器默认的中文折行：每行填满再折，标点不放到行首。不给成段的正文加 keep-all——加了以后每行在逗号处提前断、
     右边参差，还会把“1 小时”“10-23 07:30”拆开（10-23 试过，终审退回）。一串比一整行还长又没有断点的字，break-word 兜底照样折。
   - 正文不留孤字（pretty）；标题折成两行时上下差不多长（balance）。text-wrap 会继承；不认识它的旧内核（钉钉安卓 U4）照常折行。
   - 数字和单位、日期和时间不拆开：frontend/js/keep-numbers.js 在页面打开和插入内容时把中间的空格换成不折行空格。 */
:where(body) {
  word-wrap: break-word; /* 旧 iOS 的后备 */
  overflow-wrap: break-word;
  text-wrap: pretty;
}

:where(h1, h2, h3, h4) {
  text-wrap: balance;
}

/* 短字只在标点、空格处折：标题、按钮、徽章、表头、页签、字段标题、菜单项、弹窗标题。
   这些字短，不该从词中间断开（“删除 / 成员”）；整句比一行还长时 break-word 兜底照样能折。成段的正文不加。 */
:where(h1, h2, h3, h4, legend, th, button, .button, .btn, .ui-btn, .chip, .pill, .tagm, .ui-chip, .role-tag,
  .tabs a, .subtabs button, .nav-item, .ui-field-label, .field > span, .ui-card-title, dialog h2, dialog h3, .modal-heading h2) {
  word-break: keep-all;
}

/* 标题、按钮、标签、字段标题、表头不折行：放不下就整组换到下一行，或者把字改短 */
.ui-nowrap,
.ui-btn,
.ui-chip,
.ui-field-label,
.ui-card-title {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 原生控件（特异性 0，页面规则盖得过） */

/* 单行框（文字、数字、日期、时间、下拉）定高（新系统二.16）；多行文本见下 */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea) {
  box-sizing: border-box;
  height: var(--ui-control);
  padding: 0 var(--ui-control-pad);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
  font-size: var(--ui-font-input);
  line-height: var(--ui-line-tight);
}

:where(select) {
  padding-right: 32px; /* 给箭头 */
}

:where(textarea) {
  height: auto;
  min-height: calc(var(--ui-control) * 2.5);
  padding: 9px var(--ui-control-pad);
  line-height: var(--ui-line-body);
  resize: vertical;
}

/* 日期框里的年月日与别的输入框同一条基线 */
:where(input[type="date"], input[type="time"])::-webkit-datetime-edit {
  padding: 0;
}

:where(input, select, textarea):focus-visible {
  border-color: var(--ui-primary);
  outline: 3px solid var(--ui-focus);
  outline-offset: 0;
}

:where(input, select, textarea, button):disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 勾选框、单选：18×18、主色（新系统二.16）；外边距保留浏览器默认（它和后面文字的间距靠它；.ui-check 里用 gap 8px） */
:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--ui-primary);
}

.ui-check > input {
  flex: 0 0 auto;
  margin: 0;
}

::placeholder {
  color: var(--ui-faint);
}

/* 文件框：和别的控件一样高，“选择文件”是描边按钮，不用浏览器自带的灰按钮 */
:where(input[type="file"]) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  height: var(--ui-control);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-muted);
  font: inherit;
  font-size: 13px;
  line-height: var(--ui-control);
}

:where(input[type="file"])::file-selector-button {
  box-sizing: border-box;
  height: var(--ui-control);
  margin: 0 10px 0 0;
  padding: 0 14px;
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-primary);
  font: inherit;
  font-size: var(--ui-font-body);
  font-weight: 600;
  cursor: pointer;
}

:where(input[type="file"]:hover)::file-selector-button {
  background: var(--ui-primary-soft);
}

/* ---------------------------------------------------------------- 按钮 */

.ui-btn {
  box-sizing: border-box;
  display: inline-flex;
  min-height: var(--ui-control);
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
  font-size: var(--ui-font-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.ui-btn:hover {
  border-color: var(--ui-primary-line);
  color: var(--ui-primary);
}

.ui-btn.is-primary {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: var(--ui-primary-ink);
}

.ui-btn.is-primary:hover {
  border-color: var(--ui-primary-hover);
  background: var(--ui-primary-hover);
}

.ui-btn.is-danger {
  border-color: var(--ui-danger-line);
  color: var(--ui-danger);
}

.ui-btn.is-small {
  min-height: var(--ui-control-sm);
  padding: 0 12px;
  font-size: 13px;
}

.ui-btn:disabled {
  border-color: var(--ui-line);
  background: var(--ui-surface-alt);
  color: var(--ui-faint);
}

.ui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-gap-control);
}

/* ---------------------------------------------------------------- 字段：标题在上、控件在下 */

/* 一个字段。标题一行（不折），下面是控件，说明最多一行；说明放不下时 ui.js 把它收成标题后面的问号（is-tip）。 */
.ui-field {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--ui-gap-label);
  margin: 0;
}

.ui-field-head {
  display: flex;
  max-width: 100%;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  min-height: 20px;
}

.ui-field-label {
  overflow: hidden;
  color: var(--ui-ink-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
}

/* 控件撑满字段宽度（字段宽度由所在的行决定） */
.ui-field > input:not([type="checkbox"], [type="radio"]),
.ui-field > select,
.ui-field > textarea,
.ui-field > .ui-control {
  width: 100%;
  min-width: 0;
}

.ui-field-hint {
  overflow: hidden;
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-note);
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 问号（新系统二.14）：说明收起来时出现在标题后面 6px，16px 圆形，竖向居中在标题行里、不改变标题行高度；
   指着标题行、聚焦控件或问号（手机上点一下）时，在控件下方 6px 弹出深色小框（12px 白字，上下 8 左右 12，圆角 8，不占位置） */
.ui-tip {
  display: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-left: 2px; /* 与标题行 gap 4px 合计 6px */
  padding: 0;
  border: 1px solid var(--ui-line-strong);
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-muted);
  font: 600 11px/1 var(--ui-font-family);
  cursor: help;
}

.ui-field.is-tip .ui-tip {
  display: inline-flex;
}

.ui-field.is-tip > .ui-field-hint {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  width: max-content;
  max-width: min(20rem, calc(100vw - 32px));
  padding: 8px 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-ink);
  box-shadow: var(--ui-shadow-pop);
  color: #fff;
  font-size: var(--ui-font-note);
  line-height: 1.6;
  white-space: normal;
}

.ui-field.is-tip .ui-field-head:hover ~ .ui-field-hint,
.ui-field.is-tip:focus-within > .ui-field-hint,
.ui-field.is-tip.tip-open > .ui-field-hint {
  display: block;
}

.ui-field-error {
  margin: 0;
  color: var(--ui-danger);
  font-size: var(--ui-font-note);
  line-height: 18px;
}

/* 一行字段：网格，列宽给最小值，放不下整个字段换到下一行；同一行控件同顶（标题都是一行）。 */
.ui-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-field-min)), 1fr));
  align-items: start;
  gap: var(--ui-gap-field) var(--ui-gap-field-x);
}

.ui-fields > .ui-field.is-wide,
.ui-fields > .ui-check-row {
  grid-column: 1 / -1;
}

/* 一组字段：上方一句组说明（可以折行，只在标点处折），下面一行或几行字段 */
.ui-field-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.ui-group-hint {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-note);
  line-height: 1.6;
}

/* 勾选：勾选框在文字前面，相距 8px；这一行与控件同高（40px），文字行高 22px（新系统二.16） */
.ui-check {
  display: inline-flex;
  min-height: var(--ui-control);
  align-items: center;
  gap: 8px;
  color: var(--ui-ink);
  font-size: var(--ui-font-body);
  line-height: 22px;
  cursor: pointer;
}

.ui-check > small {
  color: var(--ui-muted);
  font-size: var(--ui-font-note);
}

/* ---------------------------------------------------------------- 卡片 */

.ui-card {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--ui-gutter);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
}

.ui-card-head {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

/* 两级类名：页面里“.section h3”一类的旧规则盖不住它 */
.ui-card .ui-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-card-title);
  font-weight: 700;
  line-height: 24px;
  text-overflow: ellipsis;
}

.ui-card .ui-card-desc {
  margin: 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.6;
}

.ui-card-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-gap-control);
}

.ui-card-extra:empty {
  display: none;
}

.ui-card-section {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.ui-card-section:empty {
  display: none;
}

/* 操作区压在卡片底部 */
.ui-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-gap-control);
  margin-top: auto;
}

/* 一组卡片：网格，最小列宽 --ui-card-min，放不下整张换行；一行放得下时卡片均分整行（auto-fit） */
.ui-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-card-min)), 1fr));
  gap: var(--ui-gap-card);
}

/* 同组卡片的同类区块对齐（头部、各区块、操作区各在同一行）：卡片占 --ui-card-rows 行，行高由 subgrid 统一。
   cardGroup() 会把每张卡片的区块补齐到相同个数并写好 --ui-card-rows。不支持 subgrid 的浏览器只保证按钮压底。 */
@supports (grid-template-rows: subgrid) {
  .ui-cards.is-aligned > .ui-card {
    display: grid;
    grid-row: span var(--ui-card-rows, 3);
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: 12px;
  }
  .ui-cards.is-aligned > .ui-card > .ui-card-section:empty,
  .ui-cards.is-aligned > .ui-card > .ui-card-extra:empty {
    display: block;
  }
  .ui-cards.is-aligned > .ui-card > .ui-card-foot {
    align-self: end;
  }
}

/* ---------------------------------------------------------------- 面板、提示条、标签 */

.ui-panel {
  padding: 12px var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-alt);
}

.ui-note {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--ui-warn-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-warn-soft);
  color: var(--ui-warn-ink);
  font-size: 13px;
  line-height: 1.6;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-chip);
  background: var(--ui-surface);
  font-size: var(--ui-font-note);
  line-height: 18px;
}

/* 只给读屏软件的文字 */
.ui-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}