/* A版UI基础：颜色表达用途，组件统一几何规格。此文件也是规范页的样式来源。 */
:root {
  --brand-primary: #6256e8;
  --brand-primary-hover: #5146cc;
  --brand-primary-pressed: #4438b5;
  --brand-soft: #f1efff;
  --brand-line: #c8c2f3;
  --brand-accent: #94d7ed;
  --brand-accent-soft: #effafd;
  --ui-action: #80658f;
  --ui-action-hover: #6c4f7d;
  --ui-action-soft: #f5f1f8;
  --ui-action-line: #d7c9e2;
  --ui-execute: #2f7f68;
  --ui-execute-hover: #266c58;
  --ui-execute-pressed: #1f5b4a;
  --ui-danger: #a95670;
  --ui-ink: #493c58;
  --ui-body: #706579;
  --ui-muted: #94869f;
  --ui-border: #e1ddea;
  --ui-disabled-bg: #f2f1f6;
  --ui-disabled-text: #afa8bd;
  --button-height: 38px;
  --button-font: 13px;
  --button-line: 20px;
  --button-pad-y: 8px;
  --button-pad-x: 12px;
  --button-gap: 6px;
  --button-icon: 14px;
  --button-radius: 6px;
  --violet: var(--ui-action);
  --purple: var(--ui-action-hover);
}

.brand-mark {
  width: 29px;
  height: 29px;
  display: inline-block;
  flex-shrink: 0;
  background: url("brand-mark.svg") center / contain no-repeat;
}
.brand-mark::before, .brand-mark::after { content: none; }

/* 常规与紧凑两个尺寸；同尺寸下所有变体的高度、字号、圆角一致。 */
.directory-actions, .ui-size-small {
  --button-height: 30px;
  --button-font: 12px;
  --button-line: 18px;
  --button-pad-y: 5px;
  --button-pad-x: 7px;
  --button-gap: 4px;
  --button-icon: 12px;
}
:is(#app, #dialog) :is(.primary, .secondary, .job-info-button, .directory-execute, .directory-command, .directory-view, [data-act="delegation"], .delegation-cancel),
#dialog .dialog-actions > .text-button,
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: var(--button-pad-y) var(--button-pad-x);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  gap: var(--button-gap);
  font-size: var(--button-font);
  font-weight: 500;
  line-height: var(--button-line);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  box-sizing: border-box;
}
:is(#app, #dialog) :is(.primary, .secondary, .job-info-button, .directory-execute, .directory-command, .directory-view) > svg,
.ui-button > svg {
  width: var(--button-icon);
  height: var(--button-icon);
  flex: 0 0 var(--button-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 品牌主操作：上传、确认等页面中的主要办理动作。 */
:is(#app, #dialog) .primary, .ui-button--brand {
  color: #fff;
  background: var(--brand-primary);
  border-color: var(--ui-action);
}
:is(#app, #dialog) .primary:hover, .ui-button--brand:is(:hover, .ui-is-hover) {
  color: #fff;
  background: var(--brand-primary-hover);
  border-color: var(--ui-action-hover);
}
:is(#app, #dialog) .primary:active, .ui-button--brand:active {
  background: var(--brand-primary-pressed);
  border-color: var(--brand-primary-pressed);
}

/* 次要办理动作：创建面试、邀请协作、发布任务、提交结果等。 */
:is(#app, #dialog) :is(.secondary, .directory-command), .ui-button--secondary {
  color: var(--ui-action);
  background: #fff;
  border-color: var(--ui-action-line);
}
:is(#app, #dialog) :is(.secondary, .directory-command):hover,
.ui-button--secondary:is(:hover, .ui-is-hover) {
  color: var(--ui-action-hover);
  background: var(--ui-action-soft);
  border-color: #bca6ce;
}

/* 读取信息：同样的轻按钮，不以持续下划线与不同颜色另造样式。 */
:is(#app, #dialog) :is(.job-info-button, .directory-view, [data-act="delegation"]), .ui-button--quiet {
  color: var(--ui-action);
  background: transparent;
  border-color: transparent;
  text-decoration: none;
}
#dialog .dialog-actions > .text-button {
  color: var(--ui-action);
  background: transparent;
  border-color: transparent;
}
#dialog .dialog-actions > .text-button:hover { background: var(--ui-action-soft); text-decoration: none; }
:is(#app, #dialog) :is(.job-info-button, .directory-view, [data-act="delegation"]):hover,
.ui-button--quiet:is(:hover, .ui-is-hover) {
  color: var(--ui-action-hover);
  background: var(--ui-action-soft);
  border-color: transparent;
  text-decoration: none;
}

/* 绿色只用于实际开展电话／进入面试间／开始面试，不按重要程度随意扩散。 */
:is(#app, #dialog) :is(.directory-execute, [data-act="start-session"], [data-act="connect-session"]),
.ui-button--execute {
  color: #fff;
  background: var(--ui-execute);
  border-color: var(--ui-execute);
}
:is(#app, #dialog) :is(.directory-execute, [data-act="start-session"], [data-act="connect-session"]):hover,
.ui-button--execute:is(:hover, .ui-is-hover) {
  color: #fff;
  background: var(--ui-execute-hover);
  border-color: var(--ui-execute-hover);
}
:is(#app, #dialog) :is(.directory-execute, [data-act="start-session"], [data-act="connect-session"]):active,
.ui-button--execute:active {
  background: var(--ui-execute-pressed);
  border-color: var(--ui-execute-pressed);
}
:is(#app, #dialog) .delegation-cancel { color: var(--ui-danger); }
:is(#app, #dialog) .delegation-cancel:hover { background: #fbf3f6; }

:is(#app, #dialog) :is(.primary, .secondary, .job-info-button, .directory-execute, .directory-command, .directory-view):disabled,
.ui-button:disabled {
  color: var(--ui-disabled-text);
  background: var(--ui-disabled-bg);
  border-color: var(--ui-border);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}
:is(button, a, input, select, textarea):focus-visible, .ui-is-focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #94d7ed45;
}

/* 标志和主要填色保留品牌紫；文字入口、匹配度使用柔和的灰紫层级。 */
.projects-layout { --project-accent: var(--ui-action); }
.projects-layout .quick-project.selected { background: var(--ui-action-soft); border-color: #e4dbea; }
.projects-layout .quick-project.selected > a > strong { color: var(--ui-action-hover); }
.projects-layout .candidate-sort button.active { color: var(--ui-action); background: var(--ui-action-soft); }
.projects-layout .match-track { background: #f0eaf5; }
.projects-layout .match-track > i { background: #b39bc9; }
.candidate-directory .project-contextbar {
  background: linear-gradient(105deg, #f4eff8 0%, #fbf9fc 58%, #f7fcfe 100%);
}

/* 筛选控件与常规操作对齐；置顶和翻页保留紧凑的工具控件规格。 */
#app .candidate-toolbar :is(select, input, .refresh-list, .candidate-sort button) {
  min-height: 38px;
  height: 38px;
  font-size: 13px;
  line-height: 20px;
}
#app .candidate-toolbar :is(select, input, .refresh-list) { border-radius: var(--button-radius); }
#app .refresh-list { border-color: var(--ui-action-line); color: var(--ui-action); }
#app .project-pin {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 12px;
  line-height: 18px;
  border-radius: var(--button-radius);
  border-color: #ddd7f2;
  color: #8c7db8;
}
#app .project-pin.is-pinned { color: var(--ui-action); background: var(--ui-action-soft); }
#app .candidate-pagination button { min-height: 30px; border-radius: var(--button-radius); }

@media (max-width: 680px) {
  .brand-mark { width: 25px; height: 25px; }
}

/* 同一内容区域共用16px起始线，标题、筛选、匹配度表头及分数不再错位。 */
.projects-layout { --project-gutter: 16px; }
.candidate-directory .project-contextbar,
.candidate-directory .candidate-toolbar {
  padding-left: var(--project-gutter);
  padding-right: var(--project-gutter);
}
.project-contextbar .project-company-block {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}
.job-info-link {
  display: inline-flex;
  align-items: center;
  color: var(--ui-action);
  background: transparent;
  border: 0;
  border-radius: 3px;
  padding: 0;
  min-height: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: #c9b9d5;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.job-info-link:hover { color: var(--ui-action-hover); text-decoration-color: currentColor; }
.projects-layout .match-cell > div { width: 68px; }
.projects-layout .match-cell strong {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}
.projects-layout .match-value { display: block; width: 3ch; flex-shrink: 0; }
.projects-layout .match-cell strong > small {
  display: block;
  margin: 0;
  line-height: 18px;
  letter-spacing: 0;
}
.projects-layout .match-track { width: 68px; margin-top: 4px; }
.projects-layout .match-order-button { color: var(--ui-body); }
.projects-layout .match-order-button > span { color: var(--ui-action); background: var(--ui-action-soft); border-color: var(--ui-action-line); }
.projects-layout .match-order-button:hover > span { background: #eee6f3; border-color: #bca6ce; }
@media (max-width: 680px) {
  .project-contextbar .project-identity { flex-wrap: wrap; }
  .project-contextbar h1 { max-width: 100%; }
  .project-contextbar .project-identity-divider { display: none; }
  .project-contextbar .project-company-block { flex-basis: 100%; }
}