/* 整体布局和任务看板。规范在 .omc/plans/layout-spec.md：全局的放侧边栏，当前页的放页面头；一张卡最多一个彩色胶囊。 */
:root {
  /* 1440 宽要放下 6 列（已阻塞有卡片时）加 2 条竖条：(1440 - 208 - 48 - 44×2 - 8×7) / 6 ≈ 173；已阻塞空着时是 199 */
  --board-col-min: 172px;
}

/* ---------- 侧边栏（208 宽）：全局的放这里 ---------- */
@media (min-width: 761px) { .shell { grid-template-columns: 208px minmax(0, 1fr); } }
.nav { gap: 0; padding: 10px 8px 8px; }
.brand { flex: none; gap: 8px; height: 32px; margin-bottom: 8px; padding: 0 2px 0 8px; font-size: 16px; font-weight: 600; }
.brand img { width: 22px; height: 22px; }
.brand-tools { display: flex; align-items: center; gap: 0; margin-left: auto; }
.brand-tools .icon-btn, .brand-tools .nav-collapse { width: 28px; height: 28px; border-radius: 7px; background: none; color: var(--label-2); }
.brand-tools .icon-btn:hover, .brand-tools .nav-collapse:hover { background: var(--fill); color: var(--label); }
.brand-tools svg { width: 17px; height: 17px; }
.bell-btn .badge { top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; font-weight: 600; line-height: 16px; box-shadow: 0 0 0 1.5px var(--sidebar); }
.side-actions { flex: none; display: flex; gap: 4px; margin-bottom: 12px; }
.side-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--fill); color: var(--label-2); font-size: 13px; text-align: left; }
.side-search:hover { background: var(--fill-strong); }
.side-search svg { flex: none; width: 14px; height: 14px; }
.side-search kbd, .search-panel-input kbd { margin-left: auto; font: inherit; font-size: 11px; color: var(--label-3); }
.side-add { flex: none; display: flex; border-radius: 8px; background: var(--fill); }
.side-add button { display: grid; place-items: center; height: 30px; color: var(--label-2); }
.side-add button:hover { color: var(--label); background: var(--fill); }
.side-add-main { width: 26px; border-radius: 8px 0 0 8px; }
.side-add-main:only-child { width: 30px; border-radius: 8px; }
.side-add-main svg { width: 15px; height: 15px; }
.side-add-more { width: 15px; border-radius: 0 8px 8px 0; }
.side-add-more svg { width: 10px; height: 10px; }
.nav-scroll { gap: 12px; }
.nav-group { gap: 1px; }
.nav-group-title { min-height: 24px; padding: 2px 4px 2px 10px; font-size: 12px; font-weight: 600; }
.nav-link { gap: 10px; min-height: 34px; padding: 4px 10px; border-radius: 8px; font-size: 14px; }
.nav-link svg { width: 18px; height: 18px; }
.nav-link[aria-current="page"] { background: var(--fill-strong); font-weight: 500; }
.nav-foot { gap: 4px; }
.nav-foot .theme-switch { margin: 4px 0; }
.nav-foot-row .nav-user { gap: 10px; min-height: 34px; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 400; }
.nav-foot-row .nav-user .av { width: 24px; height: 24px; font-size: 12px; }

/* 收起时的样子都在 styles-nav.css */
.kb-upload-hint { margin: 4px 0 0; padding: 8px 12px 6px; border-top: 1px solid var(--sep); color: var(--label-3); font-size: 12px; line-height: 17px; }

/* 通知弹层 */
.bell-pop .popover-head { position: sticky; top: 0; z-index: 1; padding: 8px 12px; background: var(--surface-raised); font-size: 15px; }

/* ---------- 页面头（56）、筛选行（36）、内容区（左右 24），只滚内容 ---------- */
@media (min-width: 761px) {
  .pagehead { flex-wrap: nowrap; gap: 8px; min-height: 56px; padding: 10px 24px; }
  .pagehead h1 { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: 0; white-space: nowrap; }
  .pagehead .sub { align-self: center; padding: 4px 0 0; font-size: 14px; white-space: nowrap; }
  .head-tools { min-width: 0; flex-shrink: 0; }
  .page { padding: 8px 24px 32px; gap: 24px; }
  .page.narrow-gap { gap: 12px; }
  .content > .page.fill { padding-bottom: 16px; }
  .content:has(> .page:not(.wide-page)) > .pagehead { padding-inline: max(24px, calc((100% - 1272px) / 2)); }

  /* 筛选行：左边搜索和常用筛选，右边视图和显示，已选条件接在左边后面 */
  .filter-frame { position: sticky; top: 56px; z-index: 15; flex-direction: row; align-items: center; gap: 8px; min-height: 36px; background: var(--bg); }
  .filter-frame > .filterbar { display: contents; }
  .filter-chips { order: 1; flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; max-width: 160px; min-height: 26px; font-size: 13px; font-weight: 400; }
  .filter-chips .reset-btn { flex: none; min-height: 26px; font-size: 13px; }
  .filterbar-tools { order: 2; flex: none; margin-left: auto; }
  .filterbar .search { flex: 0 1 200px; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .pagehead { flex-wrap: wrap; }
  .filter-frame { flex-wrap: wrap; }
}
/* 成员表：字小了一号，名字这列让出来，1440 宽“绑定”不再被右边固定的列挡住 */
@media (min-width: 761px) { td.member-name { min-width: 208px; } }
/* 不是铺满窗口的页面只有一个滚动区：表格跟着页面滚，不再自己滚一层 */
.page:not(.fill) .table-wrap, .page.narrow-gap:not(.fill) .table-wrap { max-height: none; }

/* ---------- 全局搜索 ---------- */
dialog.modal.search-panel { width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 560px); margin: 12vh auto auto; background: var(--surface-raised); }
.search-panel-box { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.search-panel-input { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; box-shadow: inset 0 -1px 0 var(--sep); }
.search-panel-input svg { flex: none; width: 17px; height: 17px; color: var(--label-3); }
.search-panel-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; appearance: none; -webkit-appearance: none; }
.search-panel-input input::-webkit-search-cancel-button { display: none; }
.search-panel-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 8px; }
.search-group-label { padding: 10px 8px 4px; color: var(--label-3); font-size: 12px; font-weight: 600; }
.search-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 8px; border-radius: 8px; font-size: 14px; text-align: left; }
.search-row[data-active="true"] { background: var(--accent-soft); }
.search-row-icon { flex: none; display: grid; place-items: center; width: 18px; color: var(--label-3); }
.search-row-icon svg { width: 15px; height: 15px; }
.search-row-title { flex: 0 1 auto; }
.search-row-sub { flex: 1 1 0; color: var(--label-3); font-size: 13px; }
.search-row .capsule { flex: none; margin-left: auto; padding: 1px 8px; }
@media (max-width: 760px) {
  dialog.modal.search-panel { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.modal.search-panel[open] { animation: none; }
  .search-panel-input { height: 52px; padding-top: env(safe-area-inset-top); box-sizing: content-box; }
  .search-panel-input input { font-size: 16px; }
  .search-row { min-height: 44px; font-size: 15px; }
  .search-row-sub { font-size: 12px; }
}

/* ---------- 字号统一：页面标题 24，分组标题 16，正文 14，次要 13，标注 12。数据密集的表格用 13。字重只用 400、500、600 ---------- */
b, strong { font-weight: 600; }
@media (min-width: 761px) {
  body { font-size: 14px; line-height: 1.5; }
  /* 通用控件和正文 */
  .btn, .input, .textarea, .select, .select.pill, .pill-btn, .toggle-pill, .reset-btn, .segmented button, .search .input, .toggle,
  .row-label, .group.flat .row, .group.flat .row-label, .group.flat .select.form, .input.inline-date, .input.inline-number,
  .menu-item, .pitem, .nav-btn, .list-title, .who, .form-error, .empty,
  .tree-label, .settings-link, .setup-card, .viz-row, .drag-pill, .toast, .notice-body, .tl-item, .banner, .sub-name,
  .sub-reason .input, .alert-body, .alert-input .textarea, .keep-login, .copy-box .password-box, .new-group .input, .new-role .input, .bulk-bar,
  .revision-item, .conflict-bar, .doc-context.strong, .bug-from, .form-ok, .bug-next-text, .bug-next-note, .case-new-folder, .case-row .list-title,
  .case-import-stats, .todo-bar, .role-card p, .retro-row, .retro-closed-conclusion, .retro-stage,
  .guide-title, .guide-steps, .guide-extra, .preview-loading, .pv-info-how, .uq-head, .feed-line, .feed-change, .feed-note, .diff-body, .revision-title-change,
  .remind-pending, .setup-status, .setup-result, .alert-record, .usage-row, .talk-empty, .talk-bubble, .talk-act, .talk-textarea, .talk-mention-item,
  .platform-head strong { font-size: 14px; }
  /* 数据密集的表格和次要文字 */
  .select.cell, table, table.matrix, table.bug-table, table.member-table, .perm-table, .stats-table, .tv-name, .cg-cell, .cg-editor, .cg-float, .audit-line, .md-table table,
  .small, .mono, .section-foot, .prio, .type, .pitem .cnt, thead th, .list-meta, .list-desc, .reason, .btn.small, .due, .tree-empty, .pick, .tl-detail,
  .tl-meta, .notice-time, .line-stat, .release-platform, .release-add, .data-table, .chart-tip, .viz-num, .viz-flag, .cal-day, .cal-task, .tv-name-head, .select.pill.mini,
  .channel-add, .group-chip, .save-state, .fold-hint, .fold-summary, .filter-count, .cg-th, .case-import-chip, .retro-sub,
  .feed-meta, .diff-skip, .tl-diff summary, .strong-alert-meta, .talk-sys, .talk-quote, .talk-replying, .talk-mention-pos, .col-hidden-note, .matrix-foot, .legend, .stat-label { font-size: 13px; }
  /* 标注：胶囊和分组标签 */
  .capsule, .select.status, .select.status.bug-severity, .pgroup, .tree-track, .cg-gutter, .perm-mark, .remind-count, .retro-stage-flag .capsule, .mark-small { font-size: 12px; }
  /* 分组标题 */
  .section-title strong, .fold-toggle strong, .vcard-name, .sheet-nav .center, .popover-head, .alert-title, .cal-title, .release-name, .case-folder-head, .case-folder-head .input,
  .bug-title-input, .group-head .input, .kb-folder-title .input, .retro-conclusion, .drop-hint-card, .line-stat b, .markdown h3 { font-size: 16px; }
  /* 大标题：详情和文档的标题跟页面标题一样大 */
  .title-input, .vd-head h2, .article-head h2, .article-title-input, .rp-guide h3, .pv-info h3, .pv-scroll .markdown h1, .big, .kpi-value { font-size: 24px; }
  .strong-alert-title { font-size: 20px; }
  .avatar-big { font-size: 16px; }
  /* 字重只用 400、500、600 */
  .brand, .pagehead h1, .auth-card h1, .prio.p0, .prio.p1, .prio-select.p0, .prio-select.p1, .stat-num, .title-input, .pick[aria-pressed="true"], .vd-head h2, .big,
  .doc-badge, .release-name, .case-rate b, .strong-alert-title { font-weight: 600; }
  .btn { font-weight: 500; }
  .btn.primary { font-weight: 600; }
  .section-title { padding-bottom: 8px; }
  .section-title .n, .fold-toggle .n { font-size: 14px; color: var(--label-3); font-weight: 400; }
  .av { font-size: 12px; font-weight: 500; }
  .list-row { min-height: 52px; padding: 12px 16px; }
  .row { min-height: 44px; }
  .sheet-nav { min-height: 48px; padding: 8px 12px; }
  .capsule { font-weight: 500; }
  .notice { padding-block: 10px; }
}

/* ---------- 看板 ---------- */
.board-wrap { position: relative; display: flex; min-width: 0; }
.page.fill > .board-wrap { flex: 1; min-height: 0; }
.board-wrap[data-more]::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg));
}
.board, .page.fill > .board-wrap > .board {
  display: flex; flex: 1; min-width: 0; min-height: 0; gap: 8px; overflow-x: auto; padding-bottom: 0; align-items: stretch;
}
.board .col { flex: 1 1 0; min-width: var(--board-col-min); min-height: 0; max-height: none; border-radius: 12px; background: var(--fill-soft); }
/* 列的背景贴着内容，空列只剩表头。拖动时拉满：下面的空白也接得住，不能放的列也能说明原因 */
.board .col { align-self: flex-start; }
.board .col.drop-ok, .board .col.drop-over, .board .col.drop-no { align-self: stretch; }
@media (min-width: 761px) { .board .col { max-height: 100%; } }
.col-head { position: relative; flex: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 12px; }
.col-name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.col-head .n { margin-left: 0; font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.col-tools { display: flex; margin-left: auto; opacity: 0; transition: opacity .12s; }
.col-head:hover .col-tools, .col-tools:focus-within { opacity: 1; }
.col-tool { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--label-3); }
.col-tool:hover { background: var(--fill); color: var(--label); }
.col-tool svg { width: 14px; height: 14px; }
.board .col-body { flex: 1; min-height: 0; gap: 8px; padding: 0 6px 8px; overflow-y: auto; scrollbar-width: thin; }
.col-add .input { min-height: 34px; font-size: 14px; background: var(--surface); box-shadow: var(--card-edge); border-radius: 10px; }
.col-empty { padding: 20px 8px; border-radius: 10px; color: var(--label-3); font-size: 13px; box-shadow: inset 0 0 0 1px var(--sep); }
.col-more { flex: none; align-self: center; font-size: 13px; font-weight: 500; }

/* 收起成竖条：竖排状态名和数量，还能接收拖放 */
.board .col.collapsed { flex: 0 0 44px; min-width: 44px; }
.col-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; height: 100%; padding: 13px 0 10px; border-radius: inherit; color: var(--label-2); }
.col-rail:hover { background: var(--fill-soft); color: var(--label); }
.col-rail-name { writing-mode: vertical-rl; font-size: 14px; font-weight: 600; letter-spacing: 2px; }
.col-rail .n { font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.col.collapsed.drop-over { background: var(--accent-soft); }

/* 我的看板什么都没有 */
.board-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; min-height: 240px; color: var(--label-2); font-size: 16px; }

/* ---------- 任务卡片 ---------- */
.tcard { container-type: inline-size; flex: none; gap: 8px; padding: 12px; border-radius: 10px; box-shadow: var(--card-edge); transition: box-shadow .15s; }
.tcard:hover { transform: none; box-shadow: var(--card-edge-hover); }
.tcard:active { transform: none; }
.tcard-title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--label);
}
.tcard > .reason { font-size: 12px; line-height: 18px; }
/* 端的标签不截断：放不下时评论数这些和头像一起换到下一行，靠右 */
.tcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; }
.tcard-foot-side { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.clines { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.tcard-foot .clines { flex: 1 1 auto; }
.clines .ln { flex: none; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 12px; font-weight: 500; line-height: 20px; }
.cards .clines { flex-wrap: wrap; }
.ln-more { flex: none; color: var(--label-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ldots { display: inline-flex; align-items: center; gap: 3px; margin-left: 3px; }
.ldot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); opacity: .55; }
.ldot.doing { background: var(--blue); opacity: 1; }
.ldot.done { background: var(--green); opacity: 1; }
.ldot.block { background: var(--red); opacity: 1; }
.ldot.ready { background: var(--purple); opacity: 1; }
.ldot.waiting { background: none; box-shadow: inset 0 0 0 1px var(--label-3); opacity: 1; }
.tcard-foot .mark { flex: none; gap: 1px; margin-left: 0; }
.tcard-foot .mark svg { width: 11px; height: 11px; }
.owner-av { flex: none; display: inline-flex; }
.tcard-foot .av { flex: none; width: 22px; height: 22px; font-size: 11px; font-weight: 500; }

/* 一行灰字：优先级 · 类型 · 版本 · 截止。只有紧急和异常有颜色 */
.tmeta { display: flex; align-items: center; min-width: 0; overflow: hidden; font-size: 12px; line-height: 18px; color: var(--label-2); white-space: nowrap; }
.tmeta > * { flex: none; font-size: 12px; font-weight: 400; }
.tmeta > * + *::before { content: "·"; margin: 0 4px; color: var(--label-3); font-weight: 400; }
/* 放不下时版本先让，让完了类型才缩，优先级和日期不能被裁掉 */
.tmeta > .tmeta-ver { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tmeta > .type { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
.tmeta > .capsule { margin-right: 6px; }
.tmeta > .capsule + *::before { content: none; }
.prio, .prio.p4 { color: var(--label-2); font-weight: 400; }
.prio.p0 { color: var(--red); font-weight: 600; }
.prio.p1 { color: var(--orange); font-weight: 600; }
.type.type { font-size: 12px; font-weight: 400; }
.due { font-size: 12px; color: var(--label-2); }
.due.soon { color: var(--orange); }
.due.overdue { color: var(--red); font-weight: 500; }
.mark-changed { margin-left: 0; padding: 0; background: none; color: var(--orange); font-size: 12px; font-weight: 400; }
.mark { font-size: 12px; }
.mark svg { width: 12px; height: 12px; }

/* ---------- 任务表：行高 44，只有状态是胶囊 ---------- */
table.matrix { table-layout: fixed; font-size: 13px; }
table.matrix thead th { height: 36px; padding: 0 4px; font-size: 12px; font-weight: 500; }
table.matrix tbody td { height: 44px; padding: 0 4px; }
table.matrix th.name, table.matrix td.name { width: auto; min-width: 0; max-width: none; padding-left: 14px; font-weight: 400; box-shadow: inset 0 -1px 0 var(--sep); }
/* 横向滚起来才需要分隔线，提示任务名是固定的 */
.table-wrap[data-scrolled-x] table.matrix .name { box-shadow: inset 0 -1px 0 var(--sep), 1px 0 0 var(--sep); }
table.matrix thead th.inset { padding-left: 8px; }
table.matrix tbody tr:last-child td.name { box-shadow: none; }
.table-wrap[data-scrolled-x] table.matrix tbody tr:last-child td.name { box-shadow: 1px 0 0 var(--sep); }
/* 分组标题横向滚动时也留在左边 */
.group-row .group-toggle { position: sticky; left: 14px; }
table.matrix td:not(.name), table.matrix th:not(.name) { overflow: hidden; }
table.matrix .group-row td { height: 38px; padding: 0 14px !important; }
.group-row .group-toggle { font-size: 14px; }
.name-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.name-cell .link-btn {
  display: -webkit-box; flex: 0 1 auto; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 14px; font-weight: 500; line-height: 19px;
}
.name-cell .mark, .name-cell .mark-changed { flex: none; margin-left: 0; white-space: nowrap; }

/* 平时是文字，鼠标放上去才像下拉 */
table.matrix .select.cell { width: 100%; max-width: 100%; min-height: 28px; padding: 0 4px; border-radius: 6px; font-size: 13px; }
table.matrix .select.cell:hover:not(:disabled), table.matrix .select.cell:focus-visible { padding-right: 16px; background-position: right 3px center; }
table.matrix .select.prio-select { font-size: 12px; font-weight: 400; color: var(--label-2); font-variant-numeric: tabular-nums; }
table.matrix .select.prio-select:hover:not(:disabled), table.matrix .select.prio-select:focus-visible { padding-right: 4px; background-image: none; }
table.matrix .select.prio-select.p0 { color: var(--red); font-weight: 600; }
table.matrix .select.prio-select.p1 { color: var(--orange); font-weight: 600; }
table.matrix .select.type-select { font-size: 12px; }
/* 类型列要放下“技术优化”的胶囊，留给任务名的宽度不能再少，所以边距收窄，悬停也不露箭头 */
table.matrix .select.type-select, table.matrix .select.type-select:hover:not(:disabled), table.matrix .select.type-select:focus-visible { padding: 0 7px; background-image: none; }
.select.status.cell-status { width: auto; max-width: 100%; min-height: 24px; padding: 0 9px; background-image: none; font-size: 12px; font-weight: 500; }
.select.status.cell-status:hover, .select.status.cell-status:focus-visible { padding-right: 18px; background-image: var(--chevron); background-position: right 5px center; }
table.matrix .capsule { padding: 2px 9px; font-size: 12px; font-weight: 500; }
.cell-owner { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cell-owner .av { width: 22px; height: 22px; font-size: 11px; font-weight: 500; }
.cell-owner .select.cell { flex: 1; min-width: 0; }
.cell-owner { width: fit-content; max-width: 100%; padding-right: 2px; border-radius: 999px; background: var(--fill-soft); }
table.matrix .cell-date { display: block; min-width: 0; padding: 3px 4px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.cell-date.soon { color: var(--orange); }
.cell-date.overdue { font-weight: 500; }

/* 端：一行写负责人，颜色和图标表示状态 */
table.matrix td.line-td { padding: 0 2px; }
table.matrix th.line-th { padding: 0 2px; font-weight: 500; white-space: nowrap; }
/* 最后一列和左边的任务名留一样的边，不贴着卡片。page-tasks.js 的 EDGE_EXTRA 给这一列补了宽度，胶囊不会变窄 */
table.matrix tr > :is(th, td):last-child:not([colspan]) { padding-right: 14px; }
.group-row .group-set-current { min-height: 24px; margin-left: 8px; padding: 0 8px; font-size: 13px; vertical-align: middle; opacity: 0; transition: opacity .12s; }
.group-row:hover .group-set-current, .group-row .group-set-current:focus-visible { opacity: 1; }
@media (hover: none) { .group-row .group-set-current { opacity: 1; } }
.line-th .dot { margin-right: 3px; }
.line-cell {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; min-width: 0; max-width: none; height: 26px; min-height: 0; margin: 0; padding: 0 9px 0 2px; overflow: visible;
  border-radius: 999px; background: var(--fill-soft); line-height: 26px; text-align: left; white-space: nowrap; text-overflow: ellipsis;
}
/* 端的格子和负责人列一套：灰底胶囊、一样大的头像和字。状态不靠底色，看头像右下角的小标 */
.line-cell.doing, .line-cell.done, .line-cell.block, .line-cell.ready, .line-cell.waiting { background: var(--fill-soft); color: var(--label); box-shadow: none; }
.line-cell.overdue { box-shadow: none; }
.line-cell.overdue .line-owner { color: var(--red); }
.line-cell .av { position: relative; width: 22px; height: 22px; font-size: 11px; font-weight: 500; line-height: 1; }
.line-owner { display: inline; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; color: var(--label); font-size: 13px; font-weight: 400; }
.line-cell.unassigned .line-owner { color: var(--label-2); }
.line-cell.add { height: 26px; min-height: 0; justify-content: center; padding: 0; font-size: 15px; line-height: 26px; }
.line-swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--fill); box-shadow: inset 0 0 0 1px var(--fill-strong); }
.matrix-foot { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.legend { gap: 12px; font-size: 13px; }

/* Bug 表也按同一条规则：严重程度、优先级、状态都是彩色胶囊，颜色走 tint-xxx */
.select.cell.tag-select { min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.select.cell.tag-select.tint-red, .select.cell.tag-select.tint-orange { font-weight: 600; }
.select.status.bug-severity { min-height: 24px; padding: 0 9px; background-image: none; font-size: 12px; font-weight: 500; }
.select.status.bug-severity:hover:not(:disabled), .select.status.bug-severity:focus-visible { padding-right: 18px; background-image: var(--chevron); background-position: right 5px center; }
.select.status.bug-severity.tint-red, .select.status.bug-severity.tint-orange { font-weight: 600; }

@media (max-width: 760px) {
  .select.cell.tag-select, .select.status.bug-severity, .select.status.cell-status { min-height: 36px; }
}

/* 成员表：姓名和下面的账号左边对齐，输入框的内边距不算 */
.member-id .inline-edit { margin-left: -6px; width: calc(100% + 6px); }

/* 测试和 Bug 表的标题和任务表一样用正文字号，别的列保持 13 */
table.qa-table .qa-title .link-btn, table.bug-table .bug-title-col .link-btn { font-size: 14px; }

/* 任务页左边的版本窄条：筛选行也是固定的，要贴在它下面；拖动时有反馈，停在上面会弹出版本树 */
.split > .side-panel-strip { top: 100px; }
/* 设置页没有筛选行，窄条要和右边的内容对齐 */
.split:has(> .settings-content) > .side-panel-strip { top: 64px; }
.side-panel-strip.drag-ready { box-shadow: inset 0 0 0 1.5px var(--accent-soft), var(--shadow-card); }
.side-panel-strip.drag-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }

/* “显示”弹层 */
.display-btn { padding-right: 25px; }
.display-panel { display: flex; flex-direction: column; gap: 2px; }
.display-head { padding: 10px 4px 4px; color: var(--label-3); font-size: 12px; font-weight: 600; }
.col-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.col-check { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 4px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.col-check:hover { background: var(--fill-soft); }
.col-check input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.display-export { margin-top: 8px; min-height: 32px; padding: 4px; font-size: 14px; color: var(--accent-text); box-shadow: 0 -1px 0 var(--sep); border-radius: 0; }
.filterbar-tools .panel { left: auto; right: 0; }

/* 卡片窄时放不下：版本先不写（筛了版本本来也不写），需求变更比类型要紧。日期已经是红的，“逾期”两个字让给类型，“技术优化”才不会被截断 */
@container (max-width: 150px) {
  .tmeta > .tmeta-ver { display: none; }
  .tmeta:has(.mark-changed) > .type { display: none; }
  .tmeta > .due > .due-word { display: none; }
}

/* 标题后面跟一句长说明：放不下时说明换到下一行，不把标题挤成两行 */
.section-title.hint-wraps { flex-wrap: wrap; }

/* ---------- 我的：一行紧凑的摘要 ---------- */
.stats { display: flex; gap: 0; min-height: 56px; overflow: hidden; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-card); }
.stat { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: none; border-radius: 0; box-shadow: none; text-align: left; }
button.stat:hover:not(:disabled) { background: var(--fill-soft); }
button.stat:disabled { opacity: .55; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--sep); }
.stat-icon { flex: none; width: 28px; height: 28px; }
.stat-icon svg { width: 16px; height: 16px; }
.stat-num { flex: none; justify-self: auto; font-size: 20px; font-weight: 600; line-height: 1; }
.stat-label { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--label-2); font-size: 13px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.section[data-section] { scroll-margin-top: 64px; }
.my-line.my-line { font-weight: 500; }
.list-meta .tmeta { flex-wrap: wrap; }
.list-meta { gap: 2px 8px; }
.list-meta .tmeta, .list-meta .tmeta > *, .list-meta .type.type, .list-meta .due { font-size: 13px; line-height: 20px; }
.list-lines .ln { font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 999px; }
/* 发布页：发布内容和发布渠道同一个格式，一条一行：时间、内容、平台，渠道后面多一个状态 */
.release-contents { margin-bottom: 12px; }
.release-content-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 14px; font-size: 14px; text-align: left; }
.release-content-row + .release-content-row, .platform-head + .release-content-row { box-shadow: inset 0 1px 0 var(--sep); }
.release-content-item:hover { background: var(--fill-soft); }
.release-content-when { flex: none; width: 84px; color: var(--label-2); font-size: 13px; }
.release-content-row .tag-pill { flex: none; }
.release-content-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.release-channel-name { text-align: left; font-weight: 500; }
.release-channel-name:hover { color: var(--accent-text); }
.release-channel-name .reason { display: block; font-weight: 400; }
.release-channel-sub { margin-left: 8px; color: var(--label-2); font-size: 13px; font-weight: 400; }
.release-channel-row .select.status { flex: none; }
.release-channel-menu { flex: none; display: flex; justify-content: center; width: 26px; }
.release-channel-menu .more-btn { width: 26px; height: 26px; }
.release-content-more { display: block; width: 100%; min-height: 36px; box-shadow: inset 0 1px 0 var(--sep); color: var(--accent-text); font-size: 13px; }
.release-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 14px; box-shadow: inset 0 1px 0 var(--sep); }
.release-add-row .tag-pill { margin-right: 4px; }
@media (max-width: 760px) {
  /* 手机放不下一行：内容占第一行，时间、平台、状态在第二行 */
  .release-content-row { flex-wrap: wrap; gap: 4px 8px; }
  .release-content-text { order: -1; flex-basis: 100%; }
  .release-content-when { width: auto; }
  .release-content-when:empty { display: none; }
  .release-channel-row .select.status { margin-left: auto; }
}
.ln { border-radius: 999px; }
/* 分类标签（优先级、类型、版本、端）：参考钉钉表格，浅底配同色深字的圆角胶囊。颜色走 ui.js 的 tagColor，这里只管形状。 */
.tag-pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 20px; white-space: nowrap; }
.list-meta .tmeta > .tag-pill.tag-pill { font-size: 12px; line-height: 20px; }
/* 胶囊自己就分得开，前后不用分隔点 */
.tmeta > .tag-pill::before, .tmeta > .tag-pill + *::before { content: none; }
.tmeta > .tag-pill { margin-right: 4px; }
.tmeta > :not(.tag-pill) + .tag-pill { margin-left: 4px; }
/* “我的”的任务行：左边固定两行，右边是各端的人和状态。放不下时，端落到下一行。 */
.task-summary .tmeta { gap: 4px 6px; }
.task-summary .tmeta > * + *::before { content: none; }
.task-summary .tmeta > .tag-pill { margin: 0; }
.task-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.task-summary-text { flex: 1 1 320px; min-width: 0; }
.task-summary-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.task-summary-head .list-title.link { flex: 0 1 auto; width: auto; min-width: 0; }
.task-summary-head .list-desc { display: block; flex: 1 1 0; min-width: 0; margin-top: 0; }
.task-summary .list-lines { flex: 0 1 auto; min-width: 0; margin-top: 0; }
.task-summary .lines { justify-content: flex-end; }
@media (max-width: 760px) {
  .task-summary-head { display: block; }
  .task-summary-head .list-desc { margin-top: 2px; }
  .task-summary .lines { justify-content: flex-start; }
  .stats { grid-template-columns: none; }
  .stat { justify-content: center; gap: 4px; padding: 0 4px; }
  .stat-icon { display: none; }
}

@media (hover: none) { .col-tools { opacity: 1; } }
@media (max-width: 760px) {
  .board { margin: 0 -16px; padding: 0 16px 12px; align-items: flex-start; scroll-snap-type: x proximity; scroll-padding-left: 16px; }
  .board .col { flex: 0 0 80vw; }
  .board .col.collapsed { flex: 0 0 44px; align-self: stretch; }
  .col-rail { min-height: 220px; }
  .col-tool { width: 36px; height: 36px; }
  .col-tool svg { width: 17px; height: 17px; }
  .col-head { min-height: 44px; }
  .board .col-body { overflow-y: visible; }
  .board-wrap[data-more]::after { display: none; }
  .col-add .input { min-height: 44px; font-size: 16px; }
  .clines .ln { height: 22px; line-height: 22px; font-size: 12px; }
}