/* ── war：戰情室標題列、頁頂錢的總計、整頁照樹排的卡片清單（子項目縮排）、範例資料提示 ── */
.sample-banner{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);align-items:baseline;background:var(--warn-bg);color:var(--warn-ink);border:1.5px solid var(--warn);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-6);font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
.sample-banner b{font-weight:900;flex:0 0 auto}
.sample-banner span{color:var(--ink-2)}
.demo-tag{display:inline-block;background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn);border-radius:4px;
  padding:0 var(--sp-2);font-size:var(--fs-cap);font-weight:700;line-height:var(--lh-tight);vertical-align:1px;margin-left:var(--sp-2);white-space:nowrap}

.wrhead{display:flex;align-items:center;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.wrhead h1{margin:0;font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.01em;line-height:var(--lh-tight)}
.wrhead .as{font-size:var(--fs-cap);color:var(--ink-3)}
.wr-tools{margin-left:auto;display:flex;gap:var(--sp-3)}
.wr-tools:empty{display:none}
.wrempty{padding:var(--sp-1) var(--sp-7) var(--sp-6);font-size:var(--fs-sm);color:var(--ink-3)}
.wrempty.big{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);padding:var(--sp-8) var(--sp-7);font-size:var(--fs-body);color:var(--ink-2)}
/* 整頁一條清單，照左側樹的順序；--d＝相對縮排幾層（最多畫 4 層的縮排，更深的不再往右擠） */
.wrlist{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
.vnode{min-width:0;margin-left:calc(var(--d,0) * var(--sp-5));position:relative}
.vnode:not([data-indent="0"])::before{content:"";position:absolute;left:calc(var(--sp-3) * -1);top:0;bottom:0;width:3px;border-radius:2px;background:var(--line)}
@media (min-width:760px){.vnode{margin-left:calc(var(--d,0) * var(--sp-9))}.vnode:not([data-indent="0"])::before{left:calc(var(--sp-5) * -1)}}

.mstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-5)}
@media (min-width:760px){.mstrip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mcell{background:var(--surface);padding:var(--sp-4) var(--sp-7)}
.mcell .k{display:block;margin:0 0 var(--sp-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-cap);color:var(--ink-3);font-weight:700;letter-spacing:.02em}
.mcell .v{font-size:var(--fs-xl);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:var(--lh-tight)}
.mcell .v small{font-size:var(--fs-cap);font-weight:500;color:var(--ink-3);margin-left:3px}
.mcell .v.up{color:var(--ok-ink)} .mcell .v.down{color:var(--bad-ink)}

.mcell.people{grid-column:1 / -1} /* A3：手機、平板「人」那一格自成一列；電腦五格一排（頁頂不變高） */
.mcell .v.hp{font-size:var(--fs-lg)}
@media (min-width:1200px){.mstrip{grid-template-columns:repeat(5,minmax(0,1fr))}.mcell.people{grid-column:auto}.mcell .v.hp{font-size:var(--fs-md);letter-spacing:0}}
.mcell .tbdnote{display:block;font-size:var(--fs-cap);color:var(--warn-ink);font-weight:700;line-height:var(--lh-tight);margin-top:2px}
.stage>.demo-tag:first-child,.stage>.todo-tag:first-child{margin-left:0}