/* =============================================================================
 * Kiviland — connectors module styles. Owned by kl-connectors.js.
 * Base classes live in kiviland.css (the sheet, the grid, the cards, the status
 * dot, the highlighter sweep). This file adds only what the module needs:
 * the offstage frame the enter/exit transitions start from, the status row's
 * value-scoped fades, the main card's geometry and the one-shot settle ring.
 * Motion is transform/opacity only; 120/200/300ms on the site's curves.
 * ========================================================================== */

/* the frame before the slide in and after the slide out (JS toggles it) */
.kl-connectors.is-offstage { transform: translateX(100%); opacity: 0; }

/* cards: a hairline that answers the hand; the confirm state holds it */
.kl-connector { transition: border-color 120ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .kl-connector:hover { border-color: var(--hairline-strong); }
}
.kl-connector.is-confirming { border-color: var(--hairline-strong); }

/* the settle ring: one 1600ms pulse when a card becomes connected */
.kl-connector::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--accent-wash); opacity: 0; pointer-events: none; }
.kl-connector.is-settling::after { animation: kl-conn-settle var(--kl-dur-pulse) ease-out 1; }
@keyframes kl-conn-settle {
  0% { opacity: 0; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.015); }
  100% { opacity: 0; transform: scale(1.03); }
}

/* the status row: every render is a fresh row, so a 120ms fade is value-scoped */
.kl-connector__status { min-width: 0; flex-wrap: wrap; }
.kl-connector__row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; animation: kl-conn-in 120ms var(--ease) both; }
@keyframes kl-conn-in { from { opacity: 0; } to { opacity: 1; } }
.kl-connector__sep { color: var(--ink3); opacity: 0.7; }
.kl-connector__act { border-radius: var(--r-xs); }
.kl-connector__act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; text-decoration: none; }
.kl-connector__act.is-danger:hover { text-decoration-color: var(--kl-state-error); }

/* the glyph: ink only where the mask draws */
.kl-connector__glyph { transition: opacity 120ms var(--ease); }
.kl-connector[data-status='connected'] .kl-connector__glyph { opacity: 1; }
.kl-connector[data-status='pending'] .kl-connector__glyph { opacity: 0.55; }

/* ---- the main card (discovery) ---------------------------------------------
 * The card moves out of the grid into [data-kl-connectors-main]. isolation
 * gives the name's z-index:-1 sweep a stacking context to paint in (above the
 * card's own surface, below the letters); justify-self makes the sweep hug the
 * name's width rather than the column's. The "does" line yields to the reason. */
.kl-connectors__mainlist { list-style: none; margin: 0; padding: 0; }
.kl-connectors__main .kl-connector { isolation: isolate; align-items: start; animation: kl-conn-rise 300ms var(--kl-ease-soft) both; }
@keyframes kl-conn-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kl-connectors__main .kl-connector.is-flipping { animation: none; } /* a re-highlight while open travels by Flip instead */
.kl-connectors__main .kl-connector__glyph { width: 32px; height: 32px; }
.kl-connectors__main .kl-connector__name { justify-self: start; }
.kl-connectors__main .kl-connector__does { display: none; }
.kl-connectors__main .kl-connector__reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kl-connectors__main .kl-connector__status { grid-column: 2; align-self: end; }
.kl-connectors__main .kl-connector[data-status='available'] .kl-connector__status { display: none; }
.kl-connectors__main .btn { white-space: nowrap; margin-left: 16px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .kl-connectors.is-offstage { transform: translateY(100%); }
  .kl-connectors__main .kl-connector { grid-template-columns: 32px 1fr; }
  .kl-connectors__main .btn { grid-column: 2; grid-row: auto; justify-self: start; margin: 8px 0 0; }
}
@media (max-width: 560px) {
  .kl-connectors__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kl-connectors__main .kl-connector, .kl-connector__row, .kl-connector.is-settling::after { animation: none; }
  .kl-connector, .kl-connector__glyph { transition: none; }
}