/* NZ Public Holiday Decision Tree (mega tool). Depends on blog.css tokens. */
.dt { display: grid; gap: 1rem; }
@media (min-width: 1100px) {
    .dt { grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "controls canvas" "controls summary"; align-items: start; }
    .dt-controls { grid-area: controls; align-self: start; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding-right: 2px; }
    .dt-viewport { grid-area: canvas; height: clamp(620px, 84vh, 1100px) !important; }
    .dt-summary { grid-area: summary; }
}
/* Full-bleed wrapper: lets the tool out of the article/tool column on wide screens. */
.tool-embed--bleed, .tool-widget--bleed { width: min(calc(100vw - 2rem), 1720px); margin-left: calc(50% - min(50vw - 1rem, 860px)); }

/* ── Controls ─────────────────────────────────────────── */
.dt-controls { display: grid; gap: 0.6rem; }
.dt-step {
    display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.75rem;
    border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; background: var(--bg-card);
}
.dt-step.is-pending { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.dt-step.is-done { background: var(--bg-soft); }
.dt-step__n { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center; font-family: var(--font-head); }
.dt-step.is-done .dt-step__n { background: var(--ok); }
.dt-step__q { font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; line-height: 1.4; }
.dt-step__fact { margin-top: 0.6rem; font-size: 0.88rem; color: var(--ink-3); }
.dt-choice { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 9px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; }
.dt-choice:hover { border-color: var(--brand); color: var(--brand); }
.dt-choice.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.dt-reset { display: flex; justify-content: flex-end; }

/* ── Canvas ───────────────────────────────────────────── */
.dt-viewport {
    position: relative; overflow: hidden; height: clamp(460px, 70vh, 860px);
    border: 1px solid var(--line-2); border-radius: 14px; background: #f8faff;
    background-image: radial-gradient(circle, #dfe6f5 1px, transparent 1px); background-size: 22px 22px;
    touch-action: none; cursor: grab; user-select: none; outline: none;
}
.dt-viewport:active { cursor: grabbing; }
.dt-viewport.is-engaged { box-shadow: 0 0 0 3px var(--brand-tint); }
.dt-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.dt-stage.is-animating { transition: transform .4s ease; }
.dt-edges { position: absolute; left: 0; top: 0; overflow: visible; }
.dt-band { position: absolute; left: 0; right: 0; pointer-events: none; }
.dt-band span { position: absolute; left: 24px; top: 12px; font-family: var(--font-head); font-weight: 800; font-size: 26px; color: rgba(16,24,40,.28); letter-spacing: .02em; }
.dt-band--1 { background: transparent; }
.dt-band--2 { border-top: 3px dashed rgba(21,93,238,.25); }
.dt-band--2 span { top: 16px; }

.dt-toolbar { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 5; }
.dt-toolbar button { font: inherit; font-weight: 700; font-size: 0.9rem; min-width: 36px; height: 36px; padding: 0 0.6rem; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow); }
.dt-toolbar button:hover { border-color: var(--brand); color: var(--brand); }
.dt-hint { position: absolute; left: 10px; bottom: 8px; font-size: 0.75rem; color: var(--ink-4); background: rgba(255,255,255,.85); padding: 0.25rem 0.55rem; border-radius: 6px; pointer-events: none; }

/* Nodes */
.dt-node {
    position: absolute; width: 300px; box-sizing: border-box;
    background: #fff; border: 2px solid var(--brand); border-radius: 12px; padding: 14px 16px 16px;
    box-shadow: 0 2px 6px rgba(16,24,40,.10); font-size: 15px; line-height: 1.35; color: var(--ink);
    transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dt-node__title { font-weight: 700; text-align: center; }
.dt-node__sub { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 4px; }
.dt-node__body { font-size: 14px; color: var(--ink-2); text-align: center; margin-top: 4px; }
.dt-node__badge { position: absolute; top: -11px; right: 12px; font-size: 11px; font-weight: 700; background: var(--ink); color: #fff; padding: 2px 7px; border-radius: 999px; display: none; }
.dt-node.is-active .dt-node__badge { display: block; }
.dt-node--end1, .dt-node--end2 { border-width: 2px; }
.dt-node--mon { background: var(--warn-bg); border-color: var(--warn); }
.dt-node--mon .dt-node--tue { background: var(--violet-bg); border-color: var(--violet); }
.dt-node--tue .dt-node--stay { background: var(--ok-bg); border-color: var(--ok); }
.dt-node--stay .dt-node--pay { background: var(--ok-bg); border-color: var(--ok); }
.dt-node--pay .dt-node--none { background: #f2f4f7; border-color: #98a2b3; }
.dt-node--none .dt-node--mid { border-style: dashed; }
.dt-node--end1 .dt-node__title, .dt-node--end2 .dt-node__title, .dt-node--mid .dt-node__title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); margin-bottom: 4px; }
.dt-node--end1 .dt-node__body, .dt-node--end2 .dt-node__body, .dt-node--mid .dt-node__body { font-weight: 600; font-size: 14px; color: var(--ink); }
.dt-node.is-dim { opacity: .38; }
.dt-node.is-active { box-shadow: 0 0 0 4px rgba(21,93,238,.18), 0 6px 18px rgba(16,24,40,.14); }
.dt-node.is-current { animation: dt-pulse 1.6s ease-in-out infinite; }
.dt-node.is-final { transform: scale(1.04); box-shadow: 0 0 0 5px rgba(18,183,106,.28), 0 8px 24px rgba(16,24,40,.18); }
@keyframes dt-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(21,93,238,.18), 0 6px 18px rgba(16,24,40,.14); } 50% { box-shadow: 0 0 0 9px rgba(21,93,238,.10), 0 6px 18px rgba(16,24,40,.14); } }

/* Terms */
.dt-term { font: inherit; font-weight: inherit; color: var(--brand-dark); background: none; border: 0; padding: 0; cursor: help; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dt-term:hover { color: var(--brand); }
.dt-pop { position: fixed; z-index: 10000; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 0.85rem 2.2rem 0.85rem 1rem; box-shadow: var(--shadow-2); font-size: 0.9rem; color: var(--ink-2); }
.dt-pop strong { display: block; color: var(--ink); margin-bottom: 0.3rem; font-family: var(--font-head); }
.dt-pop p { margin: 0 0 0.5rem; }
.dt-pop a { font-weight: 600; }
.dt-pop__close { position: absolute; top: 6px; right: 8px; font: inherit; font-size: 1.1rem; background: none; border: 0; color: var(--ink-4); cursor: pointer; }

/* Edges */
.dt-edge { transition: opacity .25s ease; }
.dt-edge.is-dim { opacity: .28; }
.dt-edge__line { fill: none; stroke-width: 3; stroke-linecap: round; }
.dt-edge--yes .dt-edge__line { stroke: #12b76a; }
.dt-edge--no .dt-edge__line { stroke: #f04438; }
.dt-edge--day .dt-edge__line { stroke: #155dee; }
.dt-edge--next .dt-edge__line { stroke: #98a2b3; stroke-dasharray: 6 8; }
.dt-edge__flow { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 18; opacity: 0; }
.dt-edge__dot { fill: #fff; stroke: #101828; stroke-width: 2; opacity: 0; }
.dt-edge.is-active .dt-edge__line { stroke-width: 5; filter: drop-shadow(0 0 4px rgba(21,93,238,.35)); }
.dt-edge.is-active .dt-edge__flow { opacity: .9; animation: dt-flow 1.1s linear infinite; }
.dt-edge.is-active .dt-edge__dot { opacity: 1; }
@keyframes dt-flow { to { stroke-dashoffset: -28; } }
.dt-edge__pill { fill: #fff; stroke: #d0d5dd; stroke-width: 1.5; }
.dt-edge--yes .dt-edge__pill { stroke: #12b76a; }
.dt-edge--no .dt-edge__pill { stroke: #f04438; }
.dt-edge--day .dt-edge__pill { stroke: #155dee; }
.dt-edge__label { font-size: 13px; font-weight: 700; fill: #344054; font-family: 'Inter', system-ui, sans-serif; }
.dt-edge--yes .dt-edge__label { fill: #027a48; }
.dt-edge--no .dt-edge__label { fill: #b42318; }
.dt-edge--day .dt-edge__label { fill: #155dee; }
.dt-edge.is-active .dt-edge__pill { stroke-width: 3; }

/* Summary */
.dt-summary { display: grid; gap: 0.6rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.dt-summary__empty { background: var(--bg-soft); border: 1px dashed var(--line-2); border-radius: 12px; padding: 1rem; color: var(--ink-3); font-size: 0.95rem; }
.dt-summary__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); font-weight: 700; margin-bottom: 0.4rem; }
.dt-summary__s1 { margin: 0; color: var(--ink-2); }
.dt-summary__final { border-radius: 12px; padding: 1rem 1.1rem; border: 1px solid var(--line); background: var(--bg-card); font-size: 1rem; color: var(--ink); }
.dt-summary__final--pay { background: var(--ok-bg); border-color: #a6f4c5; }
.dt-summary__final--none { background: #f2f4f7; border-color: #d0d5dd; }
.dt-amount { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(16,24,40,.1); }
.dt-amount h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.dt-amount .tw-seg { margin-bottom: 0.6rem; }