.cf-palette-pair-trail { margin:12px auto; max-width:760px; border:1px solid #bdad8b; border-radius:12px; background:#fffaf0; color:#102a36; font:15px/1.5 system-ui,sans-serif; text-align:left; }
.cf-palette-pair-trail > summary { min-height:48px; box-sizing:border-box; padding:12px; cursor:pointer; font-weight:700; }
.cf-palette-pair-trail .cf-replay-body { padding:0 12px 14px; }
.cf-palette-pair-trail .cf-replay-plan-form { display:flex; align-items:end; flex-wrap:wrap; gap:8px; }
.cf-palette-pair-trail label { display:grid; gap:4px; flex:1 1 200px; min-width:0; }
.cf-palette-pair-trail button,.cf-palette-pair-trail select { min-height:48px; max-width:100%; padding:8px 12px; border:1px solid #7a684c; border-radius:6px; background:#f8f3e7; color:#102a36; font:inherit; }
.cf-palette-pair-trail :disabled { opacity:.6; }
.cf-palette-pair-trail :focus-visible { outline:3px solid #123e55; outline-offset:2px; }
.cf-palette-pair-trail .cf-replay-goal { display:block; margin-top:12px; font-weight:700; overflow-wrap:anywhere; }
.cf-palette-pair-trail .cf-replay-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; list-style:none; padding:0; }
.cf-palette-pair-trail .cf-replay-stamp { min-height:48px; display:flex; align-items:center; justify-content:center; padding:8px; border:2px dashed #bdad8b; border-radius:12px 8px 14px 7px; font-weight:700; text-align:center; overflow-wrap:anywhere; }
.cf-palette-pair-trail .cf-replay-stamp[data-confirmed="true"] { border-style:solid; border-color:#102a36; background:var(--cf-replay-paint,#bdad8b); color:#06151b; animation:cf-replay-confirm 180ms ease-out; }
.cf-palette-pair-trail[data-status="reached"] .cf-replay-pair { outline:2px solid #123e55; outline-offset:4px; border-radius:10px; }
.cf-palette-pair-trail .cf-replay-ledger { padding-left:24px; overflow-wrap:anywhere; }
.cf-palette-pair-trail .cf-replay-ledger li + li { margin-top:8px; }
.cf-palette-pair-trail .cf-replay-ledger li:last-child { animation:cf-replay-entry 160ms ease-out; }
.cf-palette-pair-trail .cf-replay-note,.cf-palette-pair-trail .cf-replay-past { color:#4d4a40; overflow-wrap:anywhere; }
@keyframes cf-replay-confirm { from { opacity:.55; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes cf-replay-entry { from { opacity:.55; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .cf-palette-pair-trail .cf-replay-stamp,.cf-palette-pair-trail .cf-replay-ledger li:last-child { animation:none; } }