/* 详情页结构（motion-batch2 样张）：编号眉题 + 大标题 + 副标题 + 2px 分隔线 + 两栏属性表 + 编号页签
   用在 10 待确认详情、04 查看器的设备详情。只用 v1 语义 token；键名 ≥ 12px；小字深浅两套 ≥ 4.5:1 */
.dp { container-type: inline-size; container-name: dp rp; }   /* 保留 10 原有的 rp 容器名，原来的容器查询照常生效 */
.dp-hd { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding-bottom: 16px; border-bottom: 2px solid var(--jm-text-1); }
.dp-no { grid-column: 1; grid-row: 1; font: 600 12px/18px var(--jm-font-num); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--jm-text-1); white-space: nowrap; }
.dp-no .of { color: var(--jm-text-2); font-weight: 500; }
.dp .dp-hd > .sec-head, .dp .dp-hd > .dp-tx { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; position: static; margin: 0; padding: 0; }
.dp .dp-hd > .sec-head::before, .dp .dp-hd > .sec-head::after { display: none; }   /* 原标题下的短橙条和细线由 2px 分隔线代替 */
.dp .dp-hd .sec-head .ctx, .dp .dp-hd .dp-ctx { grid-column: 2; margin: 0; font-size: 12px; line-height: 18px; color: var(--jm-text-2); min-width: 0; }
.dp .dp-hd .sec-head .ttl, .dp .dp-hd .dp-ttl { grid-column: 1 / -1; margin-top: 6px; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.01em; color: var(--jm-text-1); }
.dp .dp-hd .sec-head .side, .dp .dp-hd .dp-sub { grid-column: 1 / -1; position: static; margin-top: 8px; display: flex; flex-wrap: wrap; white-space: normal; align-items: center; gap: 8px 10px; font-size: 13px; line-height: 20px; color: var(--jm-text-2); }
/* 详情栏是纵向 flex：各块按内容高度排，不被压扁 */
.dp > * { flex-shrink: 0; }
/* 两栏属性表：键 | 值；容器够宽时每行放两组 */
.dp-props { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; margin: 0; }
.dp-props > div { display: grid; grid-template-columns: minmax(88px, 8em) minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--jm-divider); min-width: 0; }
.dp-props > div.span2 { grid-column: 1 / -1; }
.dp-props .k { font-size: 13px; line-height: 20px; color: var(--jm-text-2); margin: 0; }
.dp-props .v { font-size: 14px; line-height: 20px; color: var(--jm-text-1); margin: 0; min-width: 0; overflow-wrap: anywhere; }
@container dp (min-width: 720px) { .dp-props { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container dp (max-width: 240px) { .dp-props > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } }
/* 编号页签 */
.dp-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--jm-divider); overflow-x: auto; scrollbar-width: none; }
.dp-tab { position: relative; flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--jm-text-2); cursor: pointer; }
.dp-tab .n { font: 600 12px/16px var(--jm-font-num); font-variant-numeric: tabular-nums; color: var(--jm-text-2); }
.dp-tab:hover { color: var(--jm-text-1); }
.dp-tab.on { color: var(--jm-text-1); font-weight: 600; }
.dp-tab.on .n { color: var(--jm-text-1); }
.dp-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--jm-brand); }
.dp-tab:focus-visible { outline: 2px solid var(--jm-focus-ring); outline-offset: -2px; }
.dp-panel[hidden] { display: none !important; }
.dp-panel { padding-top: 16px; }
/* 主按钮：沿用现有变量（#af541a 白字） */
.dp .btn.primary { background: var(--jm-brand-solid); color: var(--jm-brand-on); }
.dp .btn.primary:hover { background: var(--jm-brand-solid-hover); }

/* ── 10 待确认：原 #kv 换成属性表样式；处理记录 / 来源放进页签；长内容随整页（详情栏）滚动，面板内不再单独滚 ── */
.dp .act .kv { padding: 4px 20px 0; row-gap: 0; }
.dp #kv { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
@container dp (min-width: 720px) { .dp #kv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.dp #kv > div { display: grid; grid-template-columns: minmax(96px, 9em) minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--jm-divider); }
@container dp (max-width: 340px) { .dp #kv > div { grid-template-columns: minmax(0, 1fr); } }
.dp #kv .k { font-size: 13px; line-height: 20px; color: var(--jm-text-2); }
.dp .act .af .note, .dp .panel h4 span { color: var(--jm-text-2); }
.dp .grid2 { display: block; }
.dp .panel { border: 0; padding: 0; background: none; }
.dp .panel h4 { font-size: 13px; color: var(--jm-text-2); font-weight: 500; }
.dp .tl li .tm, .dp .src .mt { color: var(--jm-text-2); }

/* ── 04 查看器：右侧详情 ── */
.dp.rp04 { gap: 0; overflow-y: auto; overscroll-behavior: contain; }
.dp.rp04 .dp-props { margin-top: 4px; }
.dp.rp04 .dp-tabs { margin-top: 16px; }
.dp.rp04 .checks .x, .dp.rp04 .evd { color: var(--jm-text-2); }
.dp.rp04 .log { list-style: none; margin: 0; padding: 0; }
.dp.rp04 .log li { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--jm-divider); font-size: 13px; line-height: 20px; }
.dp.rp04 .log .tm { font-family: var(--jm-font-num); color: var(--jm-text-2); }
.dp.rp04 .acts { margin-top: 16px; position: sticky; bottom: -20px; padding: 12px 0 20px; background: var(--jm-bg-surface); border-top: 1px solid var(--jm-divider); }
@media (max-width: 1100px) { .dp.rp04 { overflow: visible; } .dp.rp04 .acts { position: static; } }
@media (max-width: 640px) { .dp .dp-hd .sec-head .ttl, .dp .dp-hd .dp-ttl { font-size: 26px; line-height: 34px; } .dp-tabs { gap: 16px; } }