/* Phần riêng của Approval Pulse trên nền thẻ Pulse: thẻ độ thông suốt + nhận định, việc ưu tiên, ma trận nhiệt,
   sơ đồ bước, danh sách đơn, dòng thời gian bước duyệt, thẻ việc trong Kế hoạch gỡ. */
.page > * + * { margin-top: 16px; }
.grid.one { grid-template-columns: minmax(0, 1fr); }
.dots .f { fill: var(--c); }
.mono { font-family: var(--mono); font-size: 11.5px; }
.muted-2 { color: var(--ink-2); }
.hot { color: var(--orange); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k); flex: none; }
.card-title.ink { color: var(--ink); }
.plain-card .card-head { margin-bottom: 8px; }
.plain-card .tbl th { top: 0; background: var(--card); }
.plain-card .tbl td { border-bottom-color: var(--line); }
.empty-hero { max-width: 640px; }
.empty-hero p { font-size: 13.5px; margin: 0 0 8px; max-width: 62ch; }
.warn-note { color: var(--orange); margin: 0 0 12px; }
.kicker { margin: 0 0 12px; }

/* Thẻ "Độ thông suốt": điểm lớn bên trái, các câu nhận định bên phải */
.pulse-card { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.pulse-score .big b { font-size: 46px; }
.pulse-score .kicker { white-space: normal; margin: 4px 0 12px; }
.pulse-score .seg-bar { margin: 0; }
.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.insights li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.45; max-width: 92ch; }
.insights li i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); flex: none; transform: translateY(-1px); }
.insights li.is-link { cursor: pointer; border-radius: 6px; }
.insights li.is-link:hover span { color: var(--blue); }
@media (max-width: 900px) { .pulse-card { grid-template-columns: minmax(0, 1fr); } }

/* Nhãn ưu tiên P1 / P2 / P3 */
.prio { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.prio.p1 { background: var(--red); } .prio.p2 { background: var(--orange); } .prio.p3 { background: var(--gray); }
.action-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.action-mini li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; background: var(--tile); cursor: pointer; min-width: 0; }
.action-mini li:hover { background: var(--card-hover); }
.action-mini b { display: block; font-size: 12.5px; font-weight: 600; }
.action-mini small { display: block; font-size: 11.5px; color: var(--ink-2); }
@media (max-width: 760px) { .action-mini { grid-template-columns: minmax(0, 1fr); } }

/* Ma trận nhiệt luồng × tuổi chờ */
.hm { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.hm-row { display: grid; grid-template-columns: minmax(170px, 2.2fr) repeat(var(--cols), minmax(44px, 1fr)); gap: 3px; align-items: center; }
.hm-row > span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.hm-head em { font-style: normal; font-size: 10.5px; color: var(--ink-2); text-align: center; white-space: nowrap; }
.hm-cell { height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--c) var(--p), var(--tile)); color: var(--ink); }
.hm-cell.is-zero { background: var(--tile); }

/* Sơ đồ bước của một luồng */
.steps-row { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.step { flex: 0 0 auto; min-width: 140px; max-width: 200px; background: var(--tile); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.step small { font-size: 10.5px; color: var(--ink-3); }
.step b { font-size: 12.5px; font-weight: 600; }
.step-time { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.step-pending { font-size: 11px; font-weight: 600; color: var(--orange); }
.step.is-hot { box-shadow: inset 0 0 0 2px var(--red); }
.step.is-hot .step-time { color: var(--red); font-weight: 600; }
.step-arrow { flex: 0 0 22px; align-self: center; height: 2px; background: var(--d); position: relative; }
.step-arrow::after { content: ''; position: absolute; right: 0; top: -3px; border-left: 6px solid var(--d); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* Danh sách đơn gọn (trong thẻ / khung chi tiết) */
.row-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.row-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--tile); cursor: pointer; font-size: 12.5px; }
.row-list li:hover { background: var(--card-hover); }
.row-list li > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-list li b, .row-list li em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.row-list.compact li { background: var(--card); }
.row-list.compact li span b { display: block; font-size: 12.5px; }
.row-list.compact li span small { display: block; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kind-icon.ini, .kind-icon.big-ini { color: #fff; font-size: 8.5px; font-weight: 700; }
.kind-icon.big-ini { font-size: 13px; }
.inspector .big b { font-size: 30px; }
.inspector .copy-btn { margin-bottom: 4px; }
.insp-text.quote { padding: 8px 10px; background: var(--card); border-radius: 8px; margin-top: 12px; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.timeline li { display: flex; gap: 10px; align-items: flex-start; }
.timeline li i { width: 10px; height: 10px; border-radius: 50%; background: var(--k); margin-top: 4px; flex: none; }
.timeline li b { display: block; font-size: 12.5px; }
.timeline li small { display: block; font-size: 11.5px; color: var(--ink-2); }
.timeline li.is-open b { color: var(--orange); }

/* Kế hoạch gỡ */
.plan-group + .plan-group { margin-top: 20px; }
.plan-group-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
.plan-group-head b { font-size: 14px; }
.plan-group-head span { font-size: 12px; color: var(--ink-2); }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .action-grid { grid-template-columns: minmax(0, 1fr); } }
.action { background: var(--card); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.action.is-selected { box-shadow: inset 0 0 0 2px var(--sel); }
.action.is-done { opacity: 0.62; }
.action-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); }
.action-kind { font-weight: 600; color: var(--ink); }
.action-owner { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.action-owner svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.action h3 { margin: 2px 0 0; font-size: 14px; font-weight: 650; text-wrap: balance; }
.action-why, .action-todo { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 75ch; }
.action-todo { color: var(--ink); }
.action-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; }
.action-err { margin: 0; color: var(--red); font-size: 12px; }
.copy-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.copy-fallback { width: 100%; min-height: 70px; margin-top: 6px; font-size: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--win); padding: 6px 8px; }
.list-bar + .plan-group { margin-top: 4px; }