/* FR-164 控制項視圖重設計 — 版面：左導航｜右（上：參考資料 ／ 下：任務）三塊皆可拖曳 */
.cv-layout{display:grid;grid-template-columns:320px 6px minmax(0,1fr);height:calc(100vh - 12rem);min-height:36rem}
.cv-right{display:grid;grid-template-rows:260px 6px minmax(0,1fr);min-height:0}
.split-gutter{background:transparent;cursor:col-resize;position:relative}
.split-gutter::after{content:"";position:absolute;inset:40% 2px;border-radius:2px;background:var(--border-medium)}
.split-gutter.is-vertical{cursor:row-resize}
.split-gutter.is-vertical::after{inset:2px 45%}
.split-gutter:hover::after{background:var(--accent)}
body.is-resizing{user-select:none;cursor:col-resize}
.pane{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.pane-title{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--border-default);background:var(--bg-elevated);font-weight:600;font-size:.875rem;flex-shrink:0;min-height:2.75rem}
.pane-title .ic{color:var(--accent)}
.pane-title .sub{font-weight:400;color:var(--text-muted);font-size:.78rem}
.pane-title .spacer{flex:1}
.pane-body{flex:1;min-height:0;overflow:auto}

/* 視圖切換（同證據視圖，放左欄標題列） */
.view-switch{display:inline-flex;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
.view-switch a{padding:.25rem .7rem;font-size:.8rem;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.view-switch a.on{background:var(--accent-soft);color:var(--accent)}
.view-switch a:hover{text-decoration:none;color:var(--text-primary)}

/* ── 左欄：導航樹 ── */
.nav-head{padding:.6rem .75rem;border-bottom:1px solid var(--border-light);display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.nav-head input{width:100%}
.nav-tools{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-secondary)}
.nav-tools .spacer{flex:1}
.nav-tools a{color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.nav-tools a:hover{color:var(--accent);text-decoration:none}
.switch{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none}
.switch i{width:2rem;height:1.1rem;border-radius:999px;background:var(--bg-active);border:1px solid var(--border-medium);position:relative;transition:.15s}
.switch i::after{content:"";position:absolute;top:1px;left:1px;width:.85rem;height:.85rem;border-radius:50%;background:var(--text-muted);transition:.15s}
.switch.on i{background:var(--accent-soft);border-color:var(--accent)}
.switch.on i::after{left:calc(100% - .95rem);background:var(--accent)}
.nav-tree{padding:.5rem}
.node{display:flex;align-items:flex-start;gap:.4rem;padding:.35rem .5rem;border-radius:var(--radius-md);cursor:pointer;color:var(--text-secondary);border:1px solid transparent;margin-bottom:2px}
.node:hover{background:var(--bg-hover);color:var(--text-primary)}
.node.on{background:var(--accent-soft);color:var(--text-primary);border-color:var(--accent-border)}
.node .chev{width:1.1rem;height:1.25rem;line-height:1.25rem;text-align:center;color:var(--text-muted);font-size:.65rem;flex-shrink:0;border-radius:var(--radius-sm)}
.node .chev:hover{background:var(--bg-active);color:var(--text-primary)}
.node .chev.none{visibility:hidden}
.node .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.node .line{display:flex;align-items:center;gap:.4rem;min-width:0}
.node .nm{font-size:.85rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.node.lv1{margin-left:1.2rem}
.node.lv2{margin-left:2.4rem}
.node.lv2 .nm{font-size:.8rem;color:var(--text-secondary)}
.node.on .nm{color:var(--text-primary)}
.code-g{font-size:.72rem;font-weight:600;padding:0 .4rem;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);white-space:nowrap;flex-shrink:0}
.code-c{font-size:.72rem;padding:0 .4rem;border-radius:var(--radius-sm);border:1px solid var(--border-medium);color:var(--text-secondary);white-space:nowrap;flex-shrink:0}
.code-a{font-size:.72rem;font-weight:600;color:var(--text-muted);white-space:nowrap;flex-shrink:0;min-width:1.6rem}
.node .pct{margin-left:auto;font-size:.72rem;color:var(--text-muted);white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem}
.bar{width:2.6rem;height:4px;border-radius:2px;background:var(--bg-active);overflow:hidden;flex-shrink:0}
.bar b{display:block;height:100%;background:var(--color-green)}
.bar.p0 b{background:transparent}
.bolt{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;font-size:.6rem;color:var(--color-orange);background:var(--color-orange-soft);border:1px solid rgba(255,183,77,.4);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,183,77,.4)}50%{box-shadow:0 0 0 4px rgba(255,183,77,0)}}
.ok{color:var(--color-green);font-size:.75rem;flex-shrink:0}
.warn-ssp{color:var(--color-orange);font-size:.72rem;flex-shrink:0}
.empty-tree{padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.85rem}

/* ── 右上：參考資料 ── */
.ref-crumb{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--text-muted);min-width:0;overflow:hidden;white-space:nowrap}
.ref-crumb .sep{color:var(--text-dim)}
.ref-crumb b{color:var(--text-primary);font-weight:600}
/* 參考資料一律上下排：要求在上、現況在下，段與段之間一條 1px 分隔線；不做左右並排 */
.ref-body{padding:.85rem 1rem;display:flex;flex-direction:column;gap:0}
.ref-body > .ref-sec + .ref-sec{border-top:1px solid var(--border-light);margin-top:.85rem;padding-top:.85rem}
.ref-sec{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.ref-sec .h{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.03em;color:var(--text-muted);text-transform:uppercase}
.ref-sec .h .spacer{flex:1}
.ref-sec p{margin:0;font-size:.875rem;line-height:1.6;color:var(--text-primary);white-space:pre-line}
.ref-sec p.muted{color:var(--text-muted);font-style:italic}
.ref-sec .kv{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;margin-top:.35rem}
.ref-sec .kv .k{color:var(--text-muted)}
.ref-title{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem .25rem;flex-wrap:wrap}
.ref-title h2{margin:0;font-size:1.05rem;font-weight:600;min-width:0}
.ref-title .spacer{flex:1}
.stat{display:inline-flex;align-items:baseline;gap:.3rem;font-size:.8rem;color:var(--text-secondary)}
.stat b{font-size:1.05rem;color:var(--text-primary);font-variant-numeric:tabular-nums}
.stats{display:flex;gap:1.25rem;flex-wrap:wrap;padding:.25rem 1rem .75rem}
.doc-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;padding:.15rem .55rem;border-radius:var(--radius-sm);border:1px solid var(--border-medium);color:var(--text-secondary);cursor:pointer}
.doc-chip:hover{color:var(--accent);border-color:var(--accent-border);text-decoration:none}
.ref-collapsed{display:none}
.pane.is-collapsed .pane-body,.pane.is-collapsed .ref-title,.pane.is-collapsed .stats{display:none}

/* ── 右下：任務表 ── */
.seg{display:inline-flex;border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden}
.seg a{padding:.2rem .6rem;font-size:.76rem;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.seg a.on{background:var(--bg-active);color:var(--text-primary)}
.seg a:hover{text-decoration:none}
.task-table{width:100%;border-collapse:collapse;table-layout:fixed}
.task-table thead th{position:sticky;top:0;z-index:1;background:var(--bg-card);font-size:.72rem;color:var(--text-muted);font-weight:500;padding:.5rem .75rem;border-bottom:1px solid var(--border-default);text-align:left}
.task-table tbody td{padding:.5rem .75rem;border-bottom:1px solid var(--border-light);font-size:.85rem;vertical-align:top;overflow:hidden}
.task-table tbody tr.task td{padding-top:.6rem}
/* 選群組時：每個控制項一張較亮的卡（tbody.ctl-card），浮在較暗的底上，靠明暗對比分塊；
   卡內：控制項＝卡頭（大字、略亮底）；評估目標＝無底色次要字、縮一階；任務＝再縮一階 */
#tasks.grouped{background:var(--bg-base)}
#tasks.grouped .task-table{border-collapse:separate;border-spacing:0;padding:0 .75rem .75rem}
tbody.ctl-gap td{height:.75rem;padding:0;border:none;background:transparent}
#tasks.grouped .task-table thead th{background:var(--bg-base);border-bottom:none}
tbody.ctl-card td{background:#202020;border-bottom:1px solid var(--border-light)}
tbody.ctl-card tr:first-child td{border-top:1px solid var(--border-medium)}
tbody.ctl-card tr:last-child td{border-bottom:1px solid var(--border-medium)}
tbody.ctl-card td:first-child{border-left:1px solid var(--border-medium)}
tbody.ctl-card td:last-child{border-right:1px solid var(--border-medium)}
tbody.ctl-card tr:first-child td:first-child{border-top-left-radius:var(--radius-xl)}
tbody.ctl-card tr:first-child td:last-child{border-top-right-radius:var(--radius-xl)}
tbody.ctl-card tr:last-child td:first-child{border-bottom-left-radius:var(--radius-xl)}
tbody.ctl-card tr:last-child td:last-child{border-bottom-right-radius:var(--radius-xl)}
tbody.ctl-card tr.task:hover td{background:#262626}
tr.sg-ctrl td{background:var(--bg-card);border-bottom:1px solid var(--border-light);padding:.7rem .75rem;font-size:.95rem;font-weight:600}
tbody.ctl-card tr.sg-ctrl td{background:#262626}
tr.sg-ctrl .ttl{color:var(--text-primary)}
tr.sg-ao td{background:transparent;border-bottom:1px solid var(--border-light);padding:.4rem .75rem .4rem 1.75rem;font-size:.8rem}
tr.sg-ao .ttl.wrap{color:var(--text-secondary)}
tr.sg-ao .code-a{color:var(--text-muted)}
.sg-mini{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--text-muted);white-space:nowrap}
.sg-mini i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.sg-mini.m-sb-active{color:#818cf8}.sg-mini.m-sb-success{color:#4ade80}.sg-mini.m-sb-idle{color:var(--text-muted)}
.btn-review.icon{padding:.1rem .4rem;min-width:0}
/* 分段列與任務列共用同一組欄位：數量對「證據」欄、狀態對「狀態」欄、審閱鈕對「動作」欄，右側才會上下對齊 */
tr.sg-ctrl,tr.sg-ao{cursor:pointer}
tr.sg-ctrl .cnt,tr.sg-ao .cnt{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.sg{display:flex;align-items:center;gap:.5rem;min-width:0}
.sg .ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.sg .ttl.wrap{white-space:normal;line-height:1.4;font-weight:400;color:var(--text-primary)}
.sg .cnt{font-size:.75rem;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.sg .act{display:inline-flex;gap:.35rem;flex-shrink:0}
.sg .chev{width:1rem;color:var(--text-muted);font-size:.65rem;text-align:center;flex-shrink:0}
tr.sg-ctrl:hover td,tr.sg-ao:hover td{background:var(--bg-hover)}
#ttAll{display:inline-flex;gap:.5rem}
tr.task{cursor:pointer}
tr.task:hover td{background:var(--bg-hover)}
tr.task td:first-child{padding-left:.75rem}
tr.task.in-ctrl td:first-child{padding-left:3.25rem}
.t-name{display:flex;align-items:center;gap:.5rem;min-width:0}
.t-name .chk{font-size:.9rem;color:var(--text-dim);flex-shrink:0}
.t-name .chk.done{color:var(--color-green)}
.t-name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.t-name .nm.link{color:var(--accent)}
.av{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.62rem;font-weight:600;background:var(--bg-active);border:1px solid var(--border-medium);color:var(--text-secondary);flex-shrink:0}
.avs{display:inline-flex;align-items:center}
.avs .av+.av{margin-left:-6px}
.avs .nmtxt{margin-left:.4rem;font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-n{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--text-secondary);white-space:nowrap}
.ev-n.zero{color:var(--text-dim)}
.ai{font-size:.68rem;padding:0 .35rem;border-radius:999px;border:1px solid rgba(206,147,216,.35);color:#ce93d8}
.row-act{display:flex;justify-content:flex-end;gap:.35rem;white-space:nowrap}
.btn-exec{background:var(--color-orange);border-color:var(--color-orange);color:#1a1200;font-weight:600}
.btn-exec:hover{background:#ffc871}
.btn-ghost{border-color:var(--border-medium);color:var(--text-secondary)}
tr.task:hover .btn-ghost{color:var(--text-primary);border-color:var(--border-strong,rgba(255,255,255,.22))}
tr.task-empty td{padding:.4rem .75rem .5rem 3.25rem;color:var(--text-muted);font-size:.8rem;font-style:italic}
.tbl-empty{padding:2.5rem 1rem;text-align:center;color:var(--text-muted)}
.btn-review{border-color:var(--border-medium);color:var(--text-secondary)}
.btn-review.done{color:var(--color-green);border-color:rgba(129,199,132,.35);background:var(--color-green-soft)}
.btn-review[disabled]{opacity:.45}
.tip{position:relative}
.tip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#000;color:#fff;font-size:.72rem;padding:.3rem .55rem;border-radius:var(--radius-sm);white-space:nowrap;z-index:9;font-weight:400}

/* 假抽屜（產品內是既有 JobExecutionDrawer） */
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:50}
.drawer-mask.open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(48rem,100vw);background:var(--bg-base);border-left:1px solid var(--border-default);z-index:51;transform:translateX(100%);transition:.2s;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer .d-head{padding:1rem 1.25rem;border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:.75rem}
.drawer .d-head h3{margin:0;flex:1}
.drawer .d-body{padding:1.25rem;color:var(--text-secondary);font-size:.875rem;line-height:1.7}
.legend{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.78rem;color:var(--text-muted);padding:.4rem 1rem;border-top:1px solid var(--border-light);flex-shrink:0}
.legend span{display:inline-flex;align-items:center;gap:.35rem}

/* v3：位置欄（照證據視圖）——控制項編號小字＋評估目標編號＋名稱省略 */
/* 位置欄不截斷：這欄是做事時要看的條文，省略號等於看不到 */
.loc{display:flex;align-items:baseline;gap:.4rem;min-width:0;font-size:.8rem;line-height:1.45}
.loc-ctl{font-size:.72rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.loc-nm{color:var(--text-secondary);white-space:normal;word-break:break-word;min-width:0}
tr.sg-ctrl td,tr.sg-ao td{background:var(--bg-base);border-top:1px solid var(--border-medium);border-bottom:1px solid var(--border-medium)}
tr.sg-ao td{background:var(--bg-elevated);padding-left:.75rem}
tr.sg-ctrl,tr.sg-ao{cursor:default}
tr.sg-ctrl:hover td,tr.sg-ao:hover td{background:var(--bg-base)}
tr.sg-ao:hover td{background:var(--bg-elevated)}
tr.task-empty td{padding-left:1.75rem}
