/* 编辑看板任务弹窗（C2.178） */

.be-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:10px 0 4px}
.be-grid .be-wide{grid-column:1/-1}
@media (max-width:640px){
  .be-grid{grid-template-columns:1fr}
}

/* 有效期「日期 + 时刻」两件套（C2.180 建立，C2.183 换成 12 小时制控件）
 * 日期吃满剩余宽度（那是主要信息），时刻控件固定宽度（AM/PM 三个下拉拼的）。
 * 时刻留空 = 整日，所以它必须看起来是「可选的补充」，不能和日期等宽抢焦点。 */
.field>span.dt-pair{display:flex;gap:6px;align-items:center;
  margin:0;font-size:inherit;color:inherit;font-weight:inherit}
.dt-pair input[type="date"]{flex:1 1 0;width:auto;min-width:0}

/* C2.183 时刻控件：小时 + 分钟 + AM/PM。
 * 原生 input[type=time] 的 12/24 小时由浏览器 locale 决定（中文环境强制 24 小时），
 * 没有任何属性能让它听我们的，所以只能自建。
 *
 * C2.185 视觉改成「一个时间框」：三段共用一层边框、内部用细分隔线分开，
 * **只在最右侧留一个 ▾**——三个箭头挨在一起是这张截图里最碎的地方。
 * 读起来就是 `6:30 PM`，和左边日期框并列时是两个控件，不是四个。 */
.tf12{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;height:37px;
  border:1px solid var(--line2);border-radius:8px;background:var(--panel);
  padding:0 20px 0 2px;transition:border-color .12s, box-shadow .12s}
.tf12:hover{border-color:var(--line3)}
.tf12:focus-within{border-color:var(--line3);box-shadow:0 0 0 3px rgba(154,164,178,.16)}
/* 段内不再画原生箭头（那是浏览器给 select 的），统一由容器右侧那颗代替 */
.tf12 select{appearance:none;height:33px;border:0;border-radius:6px;background:transparent;
  font-size:13px;color:var(--txt);text-align:center;padding:0}
.tf12 select:hover{background-color:var(--hover)}
.tf12 .tf-h{width:34px;text-align:right;padding-right:2px}
.tf12 .tf-m{width:34px;text-align:left;padding-left:2px}
.tf12 .tf-ap{width:46px;font-weight:600;border-left:1px solid var(--line);border-radius:0 6px 6px 0}
.tf12 .tf-sep{font-style:normal;font-weight:600;color:var(--txt3);margin:0 -1px;font-size:12px}
/* 唯一的箭头：纯装饰，点击穿透到最近的那一段 */
.tf12::after{content:"";position:absolute;right:8px;top:50%;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--txt3);transform:translateY(-50%);pointer-events:none}

/* 有效期这一组在编辑弹窗里整行并排（C2.183）：
 * 不包这一层的话，两个字段会被 2 列网格拆到「上一行右列 + 下一行左列」，
 * 右边空一格、看着像漏填。整行独立成 2 列，左右对称，也和新建弹窗一个样。 */
.be-period{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
@media (max-width:640px){
  .be-period{grid-template-columns:1fr}
}

/* 新建弹窗的字段网格是三列；有效期这个 field 里塞「日期 + 三个下拉」后一列根本不够
 * （C2.183 前就踩过一次：控件被压到 55px，时钟图标和 --:-- 叠在一起）。
 * 所以这一组按可用宽度自适应：宽了并排两列，窄了自动落成一列，每行都宽宽松松。 */
.form-grid.dt-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}