.plan { container-type: inline-size; }
.pl { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); transition: opacity .5s; }
.pl.is-fading { opacity: 0; }
.pl .i { width: 16px; height: 16px; flex: none; }
.pl-main { display: grid; gap: 14px; }
.pl-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.pl-node { --tone: var(--color-line-strong); position: relative; padding: 18px; border-radius: 16px; background: var(--color-coal); border: 1px solid var(--color-line); transition: border-color .4s, box-shadow .4s, background-color .4s; }
.pl-node[data-state="active"] { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); box-shadow: 0 0 0 4px rgb(91 139 255 / .10), 0 20px 50px -24px rgb(20 87 253 / .6); }
.pl-node[data-state="done"] { border-color: color-mix(in srgb, var(--color-ok) 35%, transparent); }
.pl-node[data-state="met"] { border-color: color-mix(in srgb, var(--color-ok) 60%, transparent); background: color-mix(in srgb, var(--color-ok) 8%, var(--color-coal)); box-shadow: 0 0 0 4px rgb(52 211 153 / .10), 0 0 50px -10px rgb(52 211 153 / .5); }
.pl-top { display: flex; align-items: center; gap: 10px; }
.pl-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent); }
.pl-goal .pl-icon { color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 12%, transparent); border-color: color-mix(in srgb, var(--color-ok) 24%, transparent); }
.pl-step { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-dim); }
.pl-badge { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #0B0B0F; background: var(--color-ok); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease-out-expo); }
.pl-badge .i { width: 13px; height: 13px; stroke-width: 3; }
.pl-node[data-state="done"] .pl-badge, .pl-node[data-state="met"] .pl-badge { opacity: 1; transform: none; }
.pl-name { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--color-paper); }
.pl-rule { margin-top: 3px; font-size: 13px; color: var(--color-ash); }
.pl-log { display: grid; gap: 6px; margin-top: 12px; }
.pl-log:empty { display: none; }
.pl-chip { --tone: var(--color-accent); justify-self: start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-out-expo), transform .4s var(--ease-out-expo); }
.pl-chip.is-on { opacity: 1; transform: none; }
.pl-chip[data-tone="miss"] { --tone: var(--color-miss); }
.pl-chip[data-tone="partial"] { --tone: var(--color-warn); }
.pl-chip[data-tone="ok"] { --tone: var(--color-ok); }
.pl-wait { display: none; margin-top: 10px; gap: 6px; }
.pl-wait.is-on { display: grid; }
.pl-wait-label { font-size: 12px; font-weight: 600; color: var(--color-sleep); }
.pl-wait-bar { height: 4px; border-radius: 99px; background: rgb(255 255 255 / .08); overflow: hidden; }
.pl-wait-fill { display: block; height: 100%; width: 0; background: var(--color-sleep); }
.pl-wait.is-on .pl-wait-fill { animation: pl-fill 1.5s linear forwards; }
@keyframes pl-fill { to { width: 100%; } }

.pl-conn { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; }
.pl-conn-line { position: relative; width: 2px; height: 100%; background: rgb(255 255 255 / .1); overflow: hidden; }
.pl-conn-fill { position: absolute; inset: 0; background: var(--grad-brand); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease-out-expo); }
.pl-conn.is-on .pl-conn-fill { transform: none; }
.pl-conn-label { position: absolute; left: calc(50% + 14px); font-size: 12px; font-weight: 600; color: var(--color-ash); opacity: 0; transition: opacity .4s .3s; white-space: nowrap; }
.pl-conn.is-on .pl-conn-label { opacity: 1; }

.pl-escalate { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--color-line-strong); background: rgb(255 255 255 / .015); transition: opacity .5s; }
.pl-escalate .pl-name { margin-top: 0; font-size: 14px; }
.pl-escalate .pl-icon { color: var(--color-ash); background: rgb(255 255 255 / .05); border-color: var(--color-line); }
.pl-esc-state { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-dim); white-space: nowrap; }
.pl-escalate[data-state="skipped"] { opacity: .6; }

.pl-legend { padding: 18px; border-radius: 16px; background: var(--color-ink); border: 1px solid var(--color-line); align-self: start; }
.pl-legend-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-dim); margin-bottom: 12px; }
.pl-legend ul { display: grid; gap: 4px; }
.pl-legend li { --tone: var(--color-accent); display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--color-ash); transition: background-color .3s, color .3s; }
.pl-legend li[data-tone="miss"] { --tone: var(--color-miss); }
.pl-legend li[data-tone="partial"] { --tone: var(--color-warn); }
.pl-legend li[data-tone="ok"] { --tone: var(--color-ok); }
.pl-legend li b { font-weight: 600; color: var(--tone); }
.pl-legend li.is-hit { color: var(--color-paper); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.pl-btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--color-ash); border: 1px solid var(--color-line); background: transparent; cursor: pointer; }
.pl-btn:hover { color: var(--color-paper); border-color: var(--color-line-strong); }

.pl.is-static .pl-btn { display: none; }
.pl.is-static *, .pl.is-static { transition: none !important; animation: none !important; }
.pl.is-static .pl-wait { display: none; }

@container (min-width: 1040px) {
  .pl { grid-template-columns: minmax(0, 1fr) 270px; }
  .pl-flow { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr) 112px minmax(0, 1fr); align-items: stretch; }
  .pl-conn { height: auto; }
  .pl-conn-line { width: 100%; height: 2px; }
  .pl-conn-fill { transform: scaleX(0); transform-origin: left; }
  .pl-conn.is-on .pl-conn-fill { transform: none; }
  .pl-conn-label { left: 50%; top: calc(50% + 12px); transform: translateX(-50%); white-space: normal; width: 104px; font-size: 11.5px; text-align: center; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) { .pl *, .pl { transition: none !important; animation: none !important; } }