/* =========================================================
   WALKTHROUGH STEPPER
   ========================================================= */
.wt {
  border: 1px solid var(--rule); background: var(--card-bg);
  border-radius: var(--radius); margin: 2.25rem auto 0; font-family: var(--f-ui); box-shadow: var(--shadow-sm); overflow: hidden;
}
.wt-rail {
  display: flex; overflow-x: auto; border-bottom: 1px solid var(--rule);
  background: var(--panel); scrollbar-width: thin;
}
.wt-chip {
  flex: 1 0 auto; min-width: 8.5rem; display: flex; align-items: baseline; gap: .5rem;
  padding: .75rem 1rem; background: transparent; border: 0; border-right: 1px solid var(--rule);
  cursor: pointer; text-align: left; color: var(--slate); font-size: 13px; font-weight: 700;
  white-space: nowrap; transition: all .15s ease;
}
.wt-chip:last-child { border-right: 0; }
.wt-chip .wn { font-family: var(--f-mono); font-size: 11px; color: var(--slate-2); }
.wt-chip:hover { color: var(--ink); background: var(--panel-2); }
.wt-chip[aria-selected="true"] { background: var(--card-bg); color: var(--kept); box-shadow: inset 0 -3px 0 var(--kept); }
.wt-chip[aria-selected="true"] .wn { color: var(--kept); font-weight: 800; }
.wt-chip.done { color: var(--ink-soft); }

.wt-stage { padding: clamp(1rem, 3vw, 1.75rem); border-bottom: 1px solid var(--rule); background: var(--paper); overflow-x: auto; }
.wt-stage svg { min-width: 680px; }
.wt-node { color: var(--rule-strong); transition: color .18s ease; }
.wt-node text { fill: var(--slate-2); transition: fill .18s ease; }
.wt-node rect { fill: none; stroke: currentColor; stroke-width: 1.2; }
.wt-node.on { color: var(--kept); }
.wt-node.on rect { fill: var(--kept-bg); stroke-width: 1.8; }
.wt-node.on text { fill: var(--kept); }
.wt-node.trust.on { color: var(--dropped); }
.wt-node.trust.on rect { fill: var(--dropped-bg); }
.wt-node.trust.on text { fill: var(--dropped); }
.wt-arrow { color: var(--rule-strong); transition: color .18s ease; }
.wt-arrow path, .wt-arrow line { stroke: currentColor; stroke-width: 1.4; fill: none; }
.wt-arrow polygon { fill: currentColor; stroke: none; }
.wt-arrow.on { color: var(--kept); }
.wt-blocked text { fill: var(--dropped); }
.wt-blocked line { stroke: var(--dropped); }

.wt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 940px) { .wt-grid { grid-template-columns: 1fr; } }
.wt-copy { padding: clamp(1.15rem, 3vw, 1.65rem); border-right: 1px solid var(--rule); }
@media (max-width: 940px) { .wt-copy { border-right: 0; border-bottom: 1px solid var(--rule); } }
.wt-copy h4 { font-size: 1.15rem; font-weight: 700; margin: .5rem 0 .65rem; }
.wt-copy p { font-family: var(--f-body); font-size: 1rem; color: var(--ink-soft); line-height: 1.6; }
.wt-cross { margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.wt-cross div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); font-size: 13px; align-items: baseline; }
.wt-cross .k { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kept); }
.wt-cross .k.no { color: var(--dropped); }
.wt-cross span:last-child { color: var(--ink-soft); }
.wt-look { margin-top: 1.15rem; font-size: 13px; color: var(--slate); }
.wt-look a { font-weight: 700; }

.wt-payload { display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
.wt-pay-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 1.15rem; border-bottom: 1px solid var(--rule); background: var(--panel-2); }
.wt-pay-head .label { color: var(--ink-soft); }
.wt-pay { font-family: var(--f-mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; margin: 0; padding: 1rem 1.15rem; height: 350px; overflow: auto; color: var(--ink-soft); }
@media (max-width: 940px) { .wt-pay { height: 280px; } }
.wt-pay .h { color: var(--kept); font-weight: 700; }
.wt-pay .d { color: var(--dropped); font-weight: 700; }
.wt-pay .c { color: var(--slate-2); }

.wt-nav { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.15rem; border-top: 1px solid var(--rule); background: var(--panel-2); }
.wt-nav .btn { width: auto; padding: .45rem 1.1rem; font-size: 13px; border-radius: var(--radius); }
.wt-nav .pos { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--slate); font-weight: 600; }

/* ---------------- Budget Widget ---------------- */
.bw { border: 1px solid var(--rule); background: var(--card-bg); border-radius: var(--radius); margin: 2rem auto; font-family: var(--f-ui); box-shadow: var(--shadow-sm); overflow: hidden; }
.bw-top { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); background: var(--panel); }
.bw-top .range-row { flex: 1 1 280px; }
.bw-read { font-family: var(--f-mono); font-size: 13px; white-space: nowrap; }
.bw-read b { font-size: 15px; color: var(--kept); }
.bw-read.over b { color: var(--dropped); }
.bw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.bw-sec { display: flex; align-items: baseline; gap: .6rem; padding: .6rem 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13px; }
.bw-sec .p { font-family: var(--f-mono); font-size: 11px; color: var(--slate-2); width: 1.3rem; flex: none; }
.bw-sec .nm { font-weight: 600; }
.bw-sec .st { margin-left: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; }
.bw-sec.kept .st { color: var(--kept); font-weight: 600; }
.bw-sec.trim { background: var(--amber-bg); }
.bw-sec.trim .st { color: var(--amber); font-weight: 600; }
.bw-sec.gone { opacity: .5; background: var(--dropped-bg); }
.bw-sec.gone .nm { text-decoration: line-through; text-decoration-color: var(--dropped); }
.bw-sec.gone .st { color: var(--dropped); font-weight: 600; }
.bw-sec.pin .nm::after { content: " (never dropped)"; font-weight: 400; font-size: 11px; color: var(--slate-2); }
.bw-foot { padding: .85rem 1.25rem; font-size: 13.5px; color: var(--ink-soft); background: var(--panel); line-height: 1.5; }