/* Canvas loading (public/js/canvas-loader.js): researching a person's network, and opening a saved canvas.
   A sketch network whose dots light up as the work gets further, the title, a thin progress line and the steps so
   far (done ones ticked, the current one pulsing). Everything moves with transforms and opacity. */
.cl-box { width: min(440px, calc(100vw - 40px)); display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--console-fg, #e8eaed); font-family: Arial, Helvetica, sans-serif; }
.cl-graph { width: 220px; height: 120px; margin-bottom: 26px; overflow: visible; }
.cl-graph line { stroke: color-mix(in srgb, currentColor 16%, transparent); stroke-width: 1; stroke-dasharray: 3 4; animation: clDash 1.6s linear infinite; }
.cl-graph circle { fill: color-mix(in srgb, currentColor 10%, transparent); stroke: color-mix(in srgb, currentColor 28%, transparent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: clPulse 1.8s ease-in-out infinite; transition: fill .4s ease, stroke .4s ease; }
.cl-graph circle.is-lit { fill: color-mix(in srgb, #22c55e 70%, transparent); stroke: #22c55e; }
.cl-graph circle.is-hub { animation-duration: 1.4s; }
.cl-title { margin: 0 0 6px; font: 700 22px/1.25 Arial, Helvetica, sans-serif; letter-spacing: -.01em; color: var(--console-fg, #fff); -webkit-text-fill-color: currentColor; background: none; }
.cl-sub { margin: 0 0 18px; font-size: 13px; color: color-mix(in srgb, currentColor 55%, transparent); min-height: 1em; }
.cl-line { position: relative; width: 100%; height: 2px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.cl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--console-fg, #fff); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.cl-line::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 55%, transparent), transparent); animation: clShine 1.5s ease-in-out infinite; }
.cl-steps { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; text-align: left; font-size: 13px; line-height: 1.45; }
.cl-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; color: color-mix(in srgb, currentColor 45%, transparent); animation: clIn .3s ease both; }
.cl-steps li::before { content: '✓'; flex: none; width: 14px; text-align: center; font-size: 11px; line-height: 19px; color: color-mix(in srgb, #22c55e 80%, transparent); }
.cl-steps li.is-now { color: var(--console-fg, #fff); }
.cl-steps li.is-now::before { content: ''; width: 7px; height: 7px; margin: 6px 3px 0 4px; border-radius: 50%; background: currentColor; animation: clBlink 1s ease-in-out infinite; }
.cl-steps li.is-error { color: #f87171; }
.cl-steps li.is-error::before { content: '!'; color: #f87171; font-weight: 700; }
/* opening a saved canvas: over the page, below the tab bar */
.cl-overlay { position: fixed; inset: 44px 0 0 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: var(--console-bg, #0b0d10); transition: opacity .35s ease; }
.cl-overlay.is-leaving { opacity: 0; pointer-events: none; }
/* the research view uses the same box */
#loadingView.loading-view { background: var(--console-bg, #0b0d10); }
@keyframes clPulse { 0%, 100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes clDash { to { stroke-dashoffset: -14; } }
@keyframes clShine { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@keyframes clIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes clBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-graph line, .cl-graph circle, .cl-line::after, .cl-steps li, .cl-steps li.is-now::before { animation: none !important; } }