/* 界面整理：折叠、颜色、按钮。颜色变量在 styles-theme.css。 */

/* 胶囊 c-、下拉 tint-、文字 t-、色点 dot-，都由 ui.js 的 tagColor 决定用哪个 */
.c-yellow { background: var(--yellow-soft); color: var(--yellow); }
.c-indigo { background: var(--indigo-soft); color: var(--indigo); }
.c-pink { background: var(--pink-soft); color: var(--pink); }
.c-brown { background: var(--brown-soft); color: var(--brown); }
.c-graphite { background: var(--graphite-soft); color: var(--graphite); }
.tint-yellow { background-color: var(--yellow-soft) !important; color: var(--yellow) !important; }
.tint-indigo { background-color: var(--indigo-soft) !important; color: var(--indigo) !important; }
.tint-pink { background-color: var(--pink-soft) !important; color: var(--pink) !important; }
.tint-brown { background-color: var(--brown-soft) !important; color: var(--brown) !important; }
.tint-graphite { background-color: var(--graphite-soft) !important; color: var(--graphite) !important; }
.t-gray { color: var(--label-2); } .t-blue { color: var(--blue); } .t-teal { color: var(--teal); } .t-orange { color: var(--orange); }
.t-red { color: var(--red); } .t-green { color: var(--green); } .t-purple { color: var(--purple); } .t-yellow { color: var(--yellow); }
.t-indigo { color: var(--indigo); } .t-pink { color: var(--pink); } .t-brown { color: var(--brown); } .t-graphite { color: var(--graphite); }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); vertical-align: 1px; }
.dot-blue { background: var(--blue); } .dot-teal { background: var(--teal); } .dot-orange { background: var(--orange); } .dot-red { background: var(--red); }
.dot-green { background: var(--green); } .dot-purple { background: var(--purple); } .dot-yellow { background: var(--yellow); } .dot-indigo { background: var(--indigo); }
.dot-pink { background: var(--pink); } .dot-brown { background: var(--brown); } .dot-graphite { background: var(--graphite); }

/* 优先级：只有字色，P2 蓝、P3 青、P4 灰 */
.prio.p2 { color: var(--blue); } .prio.p3 { color: var(--teal); } .prio.p4 { color: var(--label-3); }
.type { font-size: 13px; font-weight: 500; }
.my-line { font-weight: 600; }

/* 表格里的优先级、类型下拉：浅色底的小标签，鼠标放上去才露出箭头 */
.select.cell.tag-select {
  width: auto; min-height: 24px; padding: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; text-overflow: ellipsis;
  background-image: none; text-align: center; text-align-last: center;
}
.select.cell.tag-select:hover:not(:disabled), .select.cell.tag-select:focus-visible { background-image: var(--chevron); background-position: right 3px center; padding-right: 16px; }
.select.cell.tag-select:disabled { cursor: default; }
.select.status.cell-status { min-height: 24px; padding: 1px 21px 1px 9px; border-radius: 999px; font-size: 13px; }
/* 下拉展开后选项不跟着标签变色 */
.select option, .select optgroup { color: var(--label); background: var(--surface-raised); font-weight: 400; }
table.matrix .select.cell.tag-select { max-width: 96px; }
.line-th .dot { margin-right: 4px; }

/* ---------- 导航：按组显示，组可以折叠；整条可以收成只留图标 ---------- */
.shell { transition: grid-template-columns .22s var(--spring); }
.shell.rail { grid-template-columns: 60px minmax(0, 1fr); }
.nav { min-height: 0; padding: 14px 10px 8px; overflow: hidden; }
.nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; margin: 0 -4px; padding: 0 4px 8px; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-group-title { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 24px; padding: 2px 6px 2px 10px; border-radius: 6px; color: var(--label-3); font-size: 12px; font-weight: 600; text-align: left; }
.nav-group-title:hover { color: var(--label-2); background: var(--fill-soft); }
.nav-group-title svg { width: 11px; height: 11px; color: var(--label-3); transform: rotate(90deg); opacity: 0; transition: transform .18s var(--spring), opacity .12s; }
.nav-group-title:hover svg, .nav-group-title:focus-visible svg, .nav-group-title[aria-expanded="false"] svg { opacity: 1; }
.nav-group-title[aria-expanded="false"] svg { transform: none; }
.nav-sep { height: 1px; margin: 2px 8px 5px; background: var(--sep); }
.nav-group:first-child .nav-sep { display: none; }
.nav-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-foot { flex: none; margin-top: 0; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-foot-row { display: flex; align-items: center; gap: 2px; }
.nav-foot-row .nav-user { flex: 1; min-width: 0; }
.nav-collapse { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--label-3); }
.nav-collapse:hover { background: var(--fill-soft); color: var(--label); }
.nav-collapse svg { width: 18px; height: 18px; }
.rail-tip {
  position: fixed; z-index: 55; left: 80px; top: 0; display: none; padding: 4px 9px; border-radius: 7px; transform: translateY(-50%);
  background: var(--surface-raised); box-shadow: var(--shadow-float); outline: 1px solid var(--sep); font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none;
}
.rail-tip[data-on] { display: block; animation: fade-in .12s ease; }

/* ---------- 侧边面板：版本树、文件夹、设置分类 ---------- */
.side-panel-head { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; margin: -8px -8px 2px; padding: 8px 8px 2px 12px; background: var(--surface); color: var(--label-3); font-size: 12px; font-weight: 600; }
.side-panel-head button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--label-3); }
.side-panel-head button:hover { background: var(--fill-soft); color: var(--label); }
.side-panel-head svg, .side-panel-strip svg { width: 16px; height: 16px; }
.settings-nav .side-panel-head { top: 0; margin-top: -4px; }

/* ---------- 可折叠的区块 ---------- */
.fold-title { align-items: center; flex-wrap: wrap; min-height: 26px; padding-left: 8px; }
.fold-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 1px 8px 1px 2px; border-radius: 7px; font-size: 13px; color: var(--label-2); }
.fold-toggle:hover { background: var(--fill-soft); color: var(--label); }
.fold-toggle.only { padding: 1px 2px; }
.fold-chevron { display: grid; place-items: center; width: 14px; height: 14px; color: var(--label-3); transition: transform .18s var(--spring); transform: rotate(90deg); }
.fold-chevron svg { width: 11px; height: 11px; }
.fold.closed .fold-chevron { transform: none; }
.fold-hint { color: var(--label-3); font-size: 13px; }
.fold.closed .fold-title { padding-bottom: 0; }
.fold-title .section-actions { align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .fold-toggle { min-height: 36px; }
}

/* ---------- “…”菜单 ---------- */
.more-btn { width: 30px; height: 30px; background: none; color: var(--label-2); }
.more-btn:hover, .more-btn[aria-expanded="true"] { background: var(--fill); color: var(--label); }
.more-btn svg { width: 18px; height: 18px; stroke-width: 2.6; }
.head-tools .more-btn, .article-actions .more-btn, .vd-actions .more-btn { width: 34px; height: 34px; background: var(--fill); }
.head-tools .more-btn:hover, .article-actions .more-btn:hover, .vd-actions .more-btn:hover { background: var(--fill-strong); }
.menu-list { display: flex; flex-direction: column; padding: 5px; }
.menu-item { display: block; width: 100%; min-height: 34px; padding: 6px 10px; border-radius: 8px; color: var(--label); font-size: 14px; text-align: left; text-decoration: none; }
.menu-item:focus { outline: none; }
.menu-item:hover, .menu-item:focus-visible { background: var(--fill); }
.menu-item.danger { color: var(--red); }
@media (max-width: 760px) {
  .menu-item { min-height: 44px; padding: 10px 12px; font-size: 16px; }
  .more-btn { width: 40px; height: 40px; }
  .head-tools .more-btn, .article-actions .more-btn, .vd-actions .more-btn { width: 40px; height: 40px; }
}

/* 按钮样式的链接不要下划线 */
a.btn { text-decoration: none; }

/* 只有鼠标放上去才出现的操作；触屏没有悬停，一直显示 */
.hover-reveal { opacity: 0; transition: opacity .12s; }
.row:hover .hover-reveal, .pitem:hover .hover-reveal, .hover-reveal:focus-visible, .row:focus-within .hover-reveal { opacity: 1; }
@media (hover: none) { .hover-reveal { opacity: 1; } }

/* ---------- 任务页：筛选行右边放视图相关的控件 ---------- */
.filterbar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.group-row .group-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; max-width: 100%; font-size: 13px; font-weight: 600; color: var(--label); }
.group-toggle .n { margin-left: 2px; font-weight: 400; color: var(--label-3); font-variant-numeric: tabular-nums; }
.group-toggle svg { width: 11px; height: 11px; color: var(--label-3); transform: rotate(90deg); transition: transform .18s var(--spring); }
.group-toggle[aria-expanded="false"] svg { transform: none; }
.group-row .group-status { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--label-3); }

/* 看板：已完成这一列默认收着 */
.col-hidden-note { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; text-align: center; font-size: 13px; color: var(--label-3); }

/* 版本详情里 “新建版本” 的提示等小字间距 */
.vd-actions { align-items: center; }
.article-actions { align-items: center; }
.platform-actions .more-btn { width: 26px; height: 26px; }
.kb-folder-title .more-btn { margin-left: auto; }
.kb-folder-title .btn { margin-left: 0; }
@media (max-width: 760px) {
  .shell.rail { grid-template-columns: minmax(0, 1fr); }
}

/* 需求文档弹层：编辑时编辑栏自己有“完成”，导航条收起来，免得出现两个“完成” */
dialog.article-sheet:has(.article-editor) > .sheet-nav { display: none; }

/* 折叠区块：标题文字和下面列表的文字对齐，箭头放在左边留白里 */
.fold-title { padding-left: 0; padding-right: 8px; }
.fold-title.plain { padding-left: 16px; padding-right: 16px; }
.fold-toggle { gap: 2px; padding-left: 0; }
.fold-chevron { width: 16px; }
.fold-title .section-actions .btn.plain { min-height: 28px; }

/* 版本详情的各端进度：不铺灰底，没有内容的格子留白 */
.line-progress { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); background: var(--surface); gap: 0; }

/* 手机：页头操作靠右，主按钮还在最右；分段控件和“新建”同一行 */
@media (max-width: 760px) {
  .head-tools { justify-content: flex-end; }
  .head-tools .btn.back { margin-right: auto; }
  .head-tools .segmented { flex: 1 1 0; min-width: 0; }
  .head-tools .segmented button { padding-inline: 6px; }
  .filterbar-tools { margin-left: 0; }
}
.line-stat { box-shadow: 1px 0 0 var(--sep), 0 1px 0 var(--sep); }

/* 筛选行可能折成两行，表格让出这段高度，底部说明不被挤出屏幕 */
.page.narrow-gap .table-wrap { max-height: calc(100dvh - 228px); }

/* 发布页：收起的版本也是一张卡片，不要字飘在背景上 */
.page > .release-version.closed .fold-title { min-height: 48px; padding: 6px 14px 6px 10px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-card); }
.page > .release-version.closed + .release-version.closed { margin-top: -14px; }

/* 手机：列表行的操作多时换行，负责人单独一行靠右，不能被挤出屏幕 */
@media (max-width: 720px) {
  .wrap-mobile > .list-side { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; max-width: 100%; }
  .wrap-mobile > .list-side > .select.qa-owner { flex: 1 0 100%; max-width: none; text-align: right; }
}

/* ---------- 详情：居中大弹层，可以放大成全屏（不从右边滑出来） ---------- */
@media (min-width: 761px) {
  .sheet {
    inset: 0; margin: auto;
    width: min(880px, calc(100vw - 64px)); height: min(88vh, 980px);
    animation: pop-in .28s var(--spring);
  }
  .sheet.full {
    width: 100vw; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; animation: none; z-index: 45;
  }
  .sheet.full .sheet-body { padding: 24px max(24px, calc((100vw - 920px) / 2)) 48px; }
}
.sheet-nav-right { display: flex; align-items: center; gap: 4px; }
.nav-icon {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  color: var(--label-2); text-decoration: none; transition: background-color .15s;
}
.nav-icon:hover { background: var(--fill); color: var(--label); }
.nav-icon svg { width: 17px; height: 17px; }
dialog.modal.full {
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0;
}
dialog.modal.full .preview-body { height: calc(100dvh - 52px); }
dialog.modal.preview.full .modal-form { height: 100%; }

/* ---------- 尺寸集中定义：弹窗 4 档，控件一个高度 ---------- */
:root {
  --modal-alert: 320px;
  --modal-form: 560px;
  --modal-detail-w: 880px; --modal-detail-h: 88vh;
  --modal-preview-w: 1180px; --modal-preview-h: 90vh;
  --control-h: 34px;
  --pop-panel: 300px; --pop-list: 380px; --pop-max-h: min(70vh, 560px);
  --read-max: 760px;
}
/* 触屏手指要 44pt */
@media (max-width: 760px), (pointer: coarse) { :root { --control-h: 44px; } }

.btn, .input, .select, .select.form, .select.pill, .pill-btn, .toggle-pill, .reset-btn, .search .input, .nav-btn { min-height: var(--control-h); }
.segmented button { min-height: calc(var(--control-h) - 4px); }
.icon-btn, .nav-icon, .more-btn, .head-tools .more-btn, .article-actions .more-btn, .vd-actions .more-btn { width: var(--control-h); height: var(--control-h); }
.btn.small { min-height: 26px; }
.btn.large { min-height: 50px; }
.select.pill.mini { min-height: 26px; }
.fold-title .section-actions .btn.plain { min-height: 28px; }
.platform-actions .more-btn { width: 26px; height: 26px; }
.nav.rail .nav-theme .icon-btn { width: 32px; height: 32px; }
@media (max-width: 760px), (pointer: coarse) {
  .fold-title .section-actions .btn.plain, .btn.small, .select.pill.mini { min-height: 36px; }
  .platform-actions .more-btn { width: var(--control-h); height: var(--control-h); }
}
/* 手机输入框不小于 16px，否则一点就放大页面 */
.search .input { font-size: 14px; }
@media (max-width: 760px) { .search .input { font-size: 16px; } }

/* 弹窗 */
dialog.modal { width: min(var(--modal-form), calc(100vw - 32px)); }
dialog.modal.alert { width: min(var(--modal-alert), calc(100vw - 48px)); }
.alert-inner { min-height: 0; }
.alert-text { min-height: 0; overflow-y: auto; }
.floating { max-height: var(--pop-max-h); overflow-y: auto; }
.panel { width: var(--pop-panel); max-height: var(--pop-max-h); }
.popover { width: var(--pop-list); max-height: var(--pop-max-h); }
@media (min-width: 761px) {
  .sheet:not(.full) { width: min(var(--modal-detail-w), calc(100vw - 64px)); height: min(var(--modal-detail-h), 980px); }
  dialog.modal.detail:not(.full) { width: min(var(--modal-detail-w), calc(100vw - 64px)); max-height: min(var(--modal-detail-h), 980px); }
  dialog.modal.preview:not(.full) { width: min(var(--modal-preview-w), calc(100vw - 64px)); height: var(--modal-preview-h); max-height: calc(100dvh - 32px); }
  dialog.modal.preview[open] { flex-direction: column; }
  dialog.modal.preview > .modal-form { flex: 1; min-height: 0; }
  dialog.modal.preview .preview-body { flex: 1; min-height: 0; height: auto; }
}
@media (max-width: 760px) {
  .floating { max-height: calc(100dvh - 90px); }
  .panel, .popover { width: auto; }
}
.nav-icon:disabled { opacity: .3; cursor: default; }
.nav-icon:disabled:hover { background: none; }
.step-nav { display: inline-flex; gap: 2px; }
.step-pos { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .step-nav + .mono { display: none; } }

/* ---------- 点一整行打开详情 ---------- */
.row-open { cursor: pointer; }
.list-row.row-open:hover { background: var(--fill-soft); }
tr.row-open:hover td { background: var(--fill-soft); }
.draggable.row-open, .row-open td.name.draggable { cursor: pointer; }
.tcard.row-open { cursor: pointer; }
table.matrix td.name.draggable .link-btn { cursor: pointer; }
@media (hover: none) { .list-row.row-open:hover, tr.row-open:hover td { background: none; } }

/* ---------- 筛选：一行放下，选了什么在下面一行列出来 ---------- */
.filter-frame { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: none; }
.filterbar .search { flex: 0 1 200px; min-width: 120px; }
.filterbar .select.pill { max-width: 150px; text-overflow: ellipsis; }
.filterbar .pill-btn { max-width: 170px; }
.filter-btn { padding-right: 12px; background-image: none; }
.filter-btn svg { flex: none; width: 14px; height: 14px; }
.filter-count { min-width: 18px; height: 18px; margin-right: -4px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 220px; min-height: 26px; padding: 1px 4px 1px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 500; }
.filter-chip button { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: inherit; font-size: 15px; line-height: 1; }
.filter-chip button:hover { background: var(--fill-strong); }
.filter-chips .reset-btn { min-height: 26px; padding-block: 1px; font-size: 13px; }
.filter-panel { padding: 8px; }
.filter-panel .row-label { white-space: nowrap; }
.member-filters { margin-bottom: 10px; }
.kb-search { margin-bottom: 0; }
@media (max-width: 760px) {
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; margin: -6px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; min-height: 32px; padding-right: 6px; font-size: 14px; }
  .filter-chip button { width: 24px; height: 24px; }
  .filter-chips .reset-btn { flex: none; min-height: 32px; }
}

/* ---------- 表格页：铺满窗口，表头、底部说明一直看得见，只有表格自己滚 ---------- */
@media (min-width: 761px) {
  .content:has(> .page.fill) { display: flex; flex-direction: column; overflow: hidden; }
  .content > .page.fill { flex: 1; min-height: 0; width: 100%; padding-bottom: 14px; }
  .page.fill > .split { flex: 1; min-height: 0; align-items: stretch; }
  .page.fill > .split > .split-main { display: flex; flex-direction: column; min-height: 0; }
  .page.fill > .split > .tree-panel { max-height: none; }
  .page.fill .group:has(> .table-wrap) { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .page.fill .table-wrap { flex: 1; min-height: 0; max-height: none; }
}

/* 看板也铺满窗口，每一列自己滚 */
@media (min-width: 761px) {
  .page.fill > .board { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); padding-bottom: 0; }
  .page.fill > .board .col { min-height: 0; max-height: none; }
  .page.fill > .board .col-body { min-height: 0; }
}
.board { grid-auto-columns: minmax(232px, 1fr); }
@media (max-width: 760px) { .board { grid-auto-columns: minmax(80vw, 1fr); } }

/* 任务表：大屏的多余宽度主要给任务名，别的列跟着舒展；小屏任务名保底，其余按内容 */
table.matrix th.name, table.matrix td.name { width: 38%; max-width: none; }
table.matrix td:not(.name), table.matrix th:not(.name) { white-space: nowrap; }
table.matrix .select.cell { max-width: 104px; }
.line-cell { width: 100%; min-width: 56px; max-width: 80px; }
.line-owner { max-width: 100%; }
/* 成员表：小窗口横向滚动时，最右边的操作一直看得见 */
table.member-table th:last-child, table.member-table td:last-child { position: sticky; right: 0; background: var(--surface); }

/* 阅读类页面有最大宽度，大屏上居中，不把字拉到几千像素宽；表格页（wide-page）铺满 */
@media (min-width: 761px) {
  .page:not(.wide-page) { width: 100%; margin-inline: auto; }
  .content:has(> .page:not(.wide-page)) > .pagehead { padding-inline: max(28px, calc((100% - 1264px) / 2)); }
  dialog.article-sheet.full .article-read { max-width: 980px; margin-inline: auto; }
}

/* 矮窗口：导航收紧一点，一屏放得下所有入口 */
@media (min-width: 761px) and (max-height: 800px) {
  .nav { padding-top: 10px; }
  .brand { padding-bottom: 8px; }
  .nav-scroll { gap: 4px; }
  .nav-link, .nav.rail .nav-link { min-height: 30px; padding-block: 3px; }
  .nav-group-title { min-height: 20px; padding-block: 0; }
  .nav-foot .nav-user { min-height: 34px; padding-block: 3px; }
  .nav-theme { padding-bottom: 4px; }
}
@media (min-width: 1100px) { .filterbar { flex-wrap: nowrap; } .filterbar > * { flex-shrink: 0; } .filterbar .search { flex: 0 1 200px; } }
.filterbar-tools > * { flex: none; }

/* 视图列表里的删除：平时藏着，红色只出现在确认框 */
.view-remove { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--label-3); font-size: 16px; line-height: 1; }
.view-remove:hover { background: var(--fill); color: var(--label); }

dialog.modal:focus { outline: none; }
.nav-btn { white-space: nowrap; }
.group.flat .select.form { font-size: 14px; }
/* 在线文档弹层：内容短的时候也是一整张白，不露出灰底 */
dialog.article-sheet .article-scroll { background: var(--surface); }
/* 手机：详情顶部放不下标题，留上一条、下一条和操作 */
@media (max-width: 760px) {
  .sheet > .sheet-nav { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sheet > .sheet-nav .center { display: none; }
  .sheet > .sheet-nav .right { grid-column: 3; }
  .sheet-nav-right { gap: 0; }
}

/* 能搜的长下拉、版本筛选的搜索框 */
.search-options { display: flex; flex-direction: column; }
.search-options-input { position: sticky; top: 0; z-index: 1; padding: 8px; background: var(--surface-raised); border-bottom: 1px solid var(--sep); }
.search-options-input .search, .picker-search { flex: none; width: 100%; min-width: 0; }
.search-options-list { display: flex; flex-direction: column; padding: 4px 5px 6px; }
.search-options .menu-item { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; }
.search-options .menu-item.active { background: var(--fill); }
.search-options .menu-item[aria-selected="true"] { color: var(--blue); font-weight: 600; }
.search-options .menu-item svg { flex: none; width: 14px; height: 14px; }
.search-options-empty { padding: 14px 10px; color: var(--label-3); font-size: 13px; text-align: center; }
.picker-search { position: sticky; top: 0; z-index: 1; margin-bottom: 6px; background: var(--surface-raised); }

/* 字段多的表单（提 Bug）宽一点，手机上还是占满 */
@media (min-width: 768px) {
  dialog.modal.form-wide { width: min(760px, calc(100vw - 64px)); }
}

/* 长下拉的双列：左边选组，右边选人。两列各自滚动，搜索框不动 */
.search-options.two-columns .search-options-body { display: grid; grid-template-columns: 136px minmax(0, 1fr); height: min(380px, 55vh); }
.search-options-groups { overflow-y: auto; padding: 4px 5px 6px; border-right: 1px solid var(--sep); }
.search-options-group { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 32px; padding: 5px 8px; border-radius: 8px; color: var(--label); font-size: 13px; text-align: left; }
.search-options-group:hover { background: var(--fill-soft); }
.search-options-group.active { background: var(--fill); font-weight: 600; }
.search-options-group .cnt { flex: none; color: var(--label-3); font-size: 12px; font-weight: 400; }
.search-options.two-columns .search-options-list { overflow-y: auto; }
.search-options .menu-item.whole { color: var(--accent-text); font-weight: 600; }

/* 表单行左边和标题里的小色块：底色浅、图标深，和侧栏一个做法。颜色由 tint- 决定 */
.row-label.with-tile { display: inline-flex; align-items: center; gap: 10px; }
.field-tile { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.field-tile svg { width: 15px; height: 15px; }
.sheet-title { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sheet-body .row:has(> .row-label.with-tile)::before { left: 50px; }

/* 枚举下拉的色块：选项列表和表单里的当前值。颜色由 c-、tint- 决定 */
.search-options .option-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.search-options .menu-item[aria-selected="true"]:has(.option-tag) { color: var(--label-2); }
.search-options-list:focus { outline: none; }
.select.form.tag-value { width: auto; min-height: 26px; padding: 2px 24px 2px 10px; border-radius: 999px; background-position: right 8px center; font-size: 13px; font-weight: 500; text-align: left; text-align-last: left; field-sizing: content; }
.search-options .menu-item.separated { position: relative; margin-top: 9px; }
.search-options .menu-item.separated::before { content: ""; position: absolute; top: -5px; left: 6px; right: 6px; height: 1px; background: var(--sep); }
/* 已阻塞和流程隔开：一条不占宽度的竖线，看板的宽度不变 */
.board .col.col-standalone { box-shadow: -5px 0 0 -4px var(--sep); }

/* 选人全站一套：头像加名字的浅底胶囊，下拉选项和表单里的当前值都用它，和任务表的负责人列一致 */
.person-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 2px 10px 2px 3px; border-radius: 999px; background: var(--fill-soft); color: var(--label); font-size: 13px; font-weight: 400; }
.person-pill .av { width: 22px; height: 22px; font-size: 11px; font-weight: 500; }
.search-options .menu-item[aria-selected="true"]:has(.person-pill) { font-weight: 400; }
.person-value { padding-right: 2px; }
.person-value .select.form { min-height: 22px; padding: 0 20px 0 0; background-position: right 3px center; color: var(--label); font-size: 13px; text-align: left; text-align-last: left; field-sizing: content; }

/* 新建任务：一起放的需求文件 */
.req-files-row .row-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.req-file { gap: 8px; }
.req-file .row-label { flex: 1; min-width: 0; }
.req-file .row-value { flex: none; }
.req-file-remove { flex: none; width: 24px; height: 24px; border-radius: 50%; color: var(--label-3); font-size: 16px; line-height: 1; }
.req-file-remove:hover { background: var(--fill-soft); color: var(--label); }
/* 人名胶囊放在各种地方：字跟着周围走，头像小一点；好几个人时能换行，名字不截断 */
.who.person-pill { gap: 5px; padding: 1px 9px 1px 2px; font-size: inherit; vertical-align: middle; white-space: nowrap; }
.who.person-pill .av { width: 20px; height: 20px; font-size: 10px; }
.who.person-pill.muted { color: var(--label-2); }
.people { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; vertical-align: middle; }
.people-line { display: inline-flex; align-items: center; gap: 3px; }
.ln em { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.ln em .av { width: 16px; height: 16px; font-size: 10px; font-weight: 500; font-style: normal; line-height: 1; }
.item-owner { width: fit-content; max-width: 100%; padding: 1px 9px 1px 2px; border-radius: 999px; background: var(--fill-soft); }
table.qa-table .qa-people { max-width: none; overflow: visible; white-space: normal; }

/* 头像的字：见 ui.js 的 Avatar */
.av[data-ch]::before { content: attr(data-ch); }
/* 句子里的人名：和文字同一行，不撑高 */
.who.person-pill.in-text { display: inline; margin: 0 2px; padding: 1px 7px 1px 2px; white-space: nowrap; }
.who.person-pill.in-text .av { display: inline-grid; width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; }
.talk-sys .who.person-pill, .notice-body .who.person-pill, .filter-chip .who.person-pill { background: none; padding: 0 2px 0 0; margin: 0 1px; }
/* 端的状态小标：颜色固定，白色的记号深浅模式都看得清。状态也写在悬停提示和读屏文字里 */
.ln .av { position: relative; }
.line-cell.done .av::after, .line-cell.doing .av::after, .line-cell.block .av::after, .line-cell.ready .av::after, .line-cell.waiting .av::after,
.lines .ln.done .av::after, .lines .ln.doing .av::after, .lines .ln.block .av::after, .lines .ln.ready .av::after, .lines .ln.waiting .av::after {
  content: ""; position: absolute; right: -4px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--surface);
  color: #fff; font-size: 7px; font-style: normal; font-weight: 700; line-height: 10px; text-align: center;
}
.line-cell.done .av::after, .lines .ln.done .av::after { content: "✓"; background: #1B8038; }
.line-cell.doing .av::after, .lines .ln.doing .av::after { background: #0A6CDB; }
.line-cell.block .av::after, .lines .ln.block .av::after { content: "!"; background: #D70015; }
.line-cell.ready .av::after, .lines .ln.ready .av::after { background: #A23BC7; }
.line-cell.waiting .av::after, .lines .ln.waiting .av::after { background: var(--surface); box-shadow: 0 0 0 1px var(--surface), inset 0 0 0 1.5px var(--label-3); }
.line-swatch.doing { background: #0A6CDB; box-shadow: none; }
.line-swatch.done { background: #1B8038; box-shadow: none; }
.line-swatch.block { background: #D70015; box-shadow: none; }
.line-swatch.ready { background: #A23BC7; box-shadow: none; }
.line-swatch.waiting { background: none; box-shadow: inset 0 0 0 1.5px var(--label-3); }
/* “我的”里各端的胶囊：也是灰底，和负责人列一套 */
.lines .ln, .lines .ln.doing, .lines .ln.done, .lines .ln.block, .lines .ln.ready, .lines .ln.waiting { background: var(--fill-soft); color: var(--label-2); font-weight: 400; box-shadow: none; }
.lines .ln em { color: var(--label); }