/* 看板卡上的「周期 / 备注 / 持续时间」（C2.171 ~ C2.177）
 *
 * 从 polish.css 拆出来（那里已经 400 行红线）。
 * 这一段全是「同一块区域」的样式：活动卡的 meta 行里那几个小标记，
 * 一起改才不会出现「改了时长、把状态标记挤歪」这种事。
 */
/* C2.173 备注：不再折叠
   原来「收成一行 + 点开展开」那套撤掉了——多一次点击换一行高度，不划算。
   备注直接完整显示（保留换行），长了就长，卡片本来就按内容高。 */
.bd-note{display:flex;align-items:baseline;gap:6px;font-size:11.5px;color:var(--txt2);
  background:var(--soft);border-radius:6px;padding:4px 8px;line-height:1.55}
.bd-note i{font-style:normal;flex:0 0 auto;font-size:10.5px;color:var(--txt3)}
.bd-note .bd-note-tx{min-width:0;white-space:pre-wrap;word-break:break-word}

/* 周期不常驻卡面（C2.173）：挂在「创建人 · 时间」上，点一下弹 toast。
   虚线底 = 「这里能点」，别做成按钮——再加一个按钮又多占一行。 */
/* C2.174 周期回到卡面：压成「剩 4 天」几个字，和「适用 N 个账号」同一行。
   窄了整体折到下一行（flex-wrap），不截断、不省略——「剩 0 天被省略号吃掉」就等于没有。 */

/* 短周期：同字号、同一套结构（三个状态长得一样，只有颜色不同）。
   虚线下划线 = 「点一下还能看完整起止」，不做按钮（按钮要多占一行）。 */
.bd-when-k{cursor:pointer;white-space:nowrap;font-weight:600;color:var(--txt2);
  border-bottom:1px dashed var(--line2)}
.bd-when-k:hover{border-bottom-color:var(--brand);color:var(--txt)}

/* C2.175 三态配色（艾老师明确要求「未开始」要能一眼分开）：
   进行中 = 中性灰（默认）；未开始 = 琥珀（还没轮到它做，别当成正在跑）；已结束 = 更淡的灰。
   形状、字号、字重全一样，只有颜色不同——统一的是样式，区分的是状态。 */
.bd-when-k.is-before{color:var(--amber);border-bottom-color:var(--line-amber)}
.bd-when-k.is-before:hover{color:var(--amber);border-bottom-color:var(--amber)}
.bd-when-k.is-ended{color:var(--txt3);font-weight:500;border-bottom-color:var(--line)}

/* C2.177 卡片上的「持续时间」：艾老师要求作为重点信息突出显示。
 * 三个手段让它在这里站得住，又不至于抢标题：
 *   ① 位置固定在这一行最前（窄卡换行也先换它后面的东西）
 *   ② 加深字色（--txt）+ 600，其余 meta 是淡灰（--txt3）——对比来自颜色深浅，不是花哨装饰
 *   ③ 加一层极浅底 + 细边，让它在深色主题下也是一块「实体」而不是飘着的字
 * 状态色仍只给「未开始」（C2.172 的规则：颜色区分类别，不区分程度）。 */
.bd-dur{display:inline-flex;align-items:baseline;gap:2px;flex:0 0 auto;
  font-size:12px;font-weight:700;line-height:1.55;color:var(--txt);
  background:var(--panel3);border:1px solid var(--line2);border-radius:5px;padding:0 8px;
  white-space:nowrap;cursor:pointer}
.bd-dur:hover{background:var(--hover);border-color:var(--line3)}
html[data-theme="dark"] .bd-dur{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#eef0e2}

/* C2.178 / 181 / 182 卡片上的完整起止区间：`北京 2026-10-28 ~ 2026-11-01（共 5 天）`
 *
 * 位置：卡片**最后一行、独占整卡宽**。原来它挂在卡片主区（.bd-meta）里，
 * 而主区在 3 列布局下只剩 99–206px —— 这句 226px 怎么压都折行，把「天）」甩到第二行。
 * 艾老师原话：「别换行，难看死了」。挪到整卡宽（约 400px）之后就一劳永逸，
 * 也不需要为了省宽度去删年份。
 *
 * 让出一整行的做法：卡片开 flex-wrap，这一行 flex-basis:100% 自己掉到下一行。
 * 上面那条极细的分隔线，把它和「账号/奖励/备注」这些经营信息分开，读作「任务时间范围」。 */
.bd-card.gx{flex-wrap:wrap;row-gap:6px}
.bd-span-row{flex:1 0 100%;min-width:0;margin-top:2px;padding-top:6px;border-top:1px solid var(--line)}
.bd-span{display:block;font-size:12px;line-height:1.5;color:var(--txt2);
  font-variant-numeric:tabular-nums;
  /* 再窄也不折行：宁可省略号收尾（悬浮里有完整信息），也不让括号被拆成两行 */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* C2.180：末尾天数加粗，承接 C2.177「持续时间要重点突出」 */
.bd-span .bd-days{font-weight:700;color:var(--txt)}