/* The connect flow's own styles, shared by the two places it appears: connect.html, and the gate
   on the board that an unconnected visitor lands in. Everything is scoped under .cflow and the
   keyframes are prefixed, because the board's stylesheet already has a .bar, a .chip, a .go and a
   `pulse`, and a flow that only looks right on one of the two pages is worse than no sharing. */

.cflow .step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hair); text-align: left; }
.cflow .step .no { width: 26px; height: 26px; border: 1px solid var(--div); color: var(--muted); font: 700 12px var(--hud); display: grid; place-items: center; margin-top: 1px; }
.cflow .step.on .no { border-color: var(--green); color: var(--green); }
.cflow .step.done .no { background: var(--green); border-color: var(--green); color: var(--on-green); }
.cflow .step.off { opacity: .38; }
.cflow .step h2 { font: 600 16px var(--body); margin: 2px 0 4px; letter-spacing: 0; text-transform: none; color: var(--text); }
.cflow .step p { margin: 0 0 4px; color: var(--text-2); max-width: 560px; font-size: 14px; }
.cflow .step .hint { font-size: 12px; color: var(--muted); }
.cflow .step .acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }

.cflow .go { border: 0; display: inline-block; background: var(--green); color: var(--on-green); font: 700 11px var(--hud); letter-spacing: 1.2px; text-transform: uppercase; padding: 9px 14px; margin: 0; cursor: pointer; text-decoration: none; }
.cflow a.go:hover, .cflow button.go:hover { color: var(--on-green); background: #6ff0b8; }
.cflow .go:disabled { opacity: .5; cursor: default; }
.cflow .link { border: 0; background: none; padding: 0; color: var(--green); font: 600 12px var(--hud); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; }

/* the draggable bookmark chip */
.cflow .bar { margin-top: 16px; border: 1px solid var(--hair); background: var(--panel); max-width: 560px; }
.cflow .bar .chrome { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px dashed var(--div); }
.cflow .bar .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--div); }
.cflow .bar .chrome span { font: 600 10px var(--hud); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.cflow .bar .shelf { padding: 12px 12px 16px; display: flex; align-items: center; gap: 10px; }
.cflow .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: var(--on-green); font: 700 12px var(--hud); letter-spacing: .8px; padding: 8px 13px; cursor: grab; animation: cnudge 2.6s ease-in-out infinite; }
.cflow .chip:hover { color: var(--on-green); }
.cflow .chip .mk { font-size: 10px; line-height: 1; flex: none; }
.cflow .bar .arrow { font-size: 12px; color: var(--muted); }

.cflow .box { border-left: 3px solid var(--div); padding: 10px 12px; background: var(--hair-2); font-size: 13px; color: var(--text-2); margin-top: 14px; text-align: left; }
.cflow .box.bad { border-color: var(--red); color: #f3cfcd; background: #1b1416; }
.cflow .box.warn { border-color: var(--amber); color: #efe2c2; background: #191c17; }
.cflow .box b { color: var(--text); }
.cflow .box code { font-family: 'Share Tech Mono', ui-monospace, monospace; color: var(--text); }

.cflow .result { padding: 26px 0 8px; text-align: left; }
.cflow .state { display: flex; align-items: center; gap: 10px; font: 600 13px var(--hud); letter-spacing: 1.4px; text-transform: uppercase; }
.cflow .state i { width: 9px; height: 9px; background: currentColor; flex: none; }
.cflow .state i.live { animation: cpulse 2s infinite; }
.cflow .who { font: 700 40px/1.1 var(--hud); margin: 12px 0 2px; }
.cflow .facts { display: grid; gap: 5px; font-size: 13px; color: var(--text-2); margin-top: 10px; }
.cflow .facts b { font-family: var(--hud); color: var(--text); }
.cflow .waiting { display: flex; align-items: center; gap: 10px; font: 600 12px var(--hud); letter-spacing: 1.2px; text-transform: uppercase; color: var(--amber); }
.cflow .waiting i { width: 9px; height: 9px; background: currentColor; animation: cpulse 1.4s infinite; }
/* the Connected beat: confirms, then hands over by itself — to the board, or to closing the tab */
.cflow .hand { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 600 12px var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--green); text-decoration: none; }
.cflow .hand:hover { color: var(--text); }
.cflow .dots { display: inline-flex; gap: 3px; }
.cflow .dots i { width: 3px; height: 3px; background: currentColor; opacity: .3; animation: cdot 1.1s infinite; }
.cflow .dots i:nth-child(2) { animation-delay: .18s; }
.cflow .dots i:nth-child(3) { animation-delay: .36s; }
.cflow .bead { margin-top: 14px; height: 2px; background: var(--hair); max-width: 260px; }
.cflow .bead span { display: block; height: 100%; width: 0; background: var(--green); animation: cbead 3.2s linear forwards; }

@keyframes cpulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes cnudge { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes cdot { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }
@keyframes cbead { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .cflow .chip, .cflow .dots i, .cflow .bead span, .cflow .waiting i, .cflow .state i.live { animation: none; }
  .cflow .bead span { width: 100%; }
}