/* Knowledge Focus Connections · shared UI primitives (r73)
   Small pieces every KFC page can use, styled only from kfc-tokens.css. Behaviour lives in kfc-motion.js (window.KFC).
   .skip-link · .k-sample · .k-future · .k-status · .k-toasts/.k-toast · .k-steps · press feedback · reduced motion */

/* skip link: first focusable thing on every page */
.skip-link{position:fixed;left:var(--s-3);top:var(--s-3);z-index:var(--z-toast);padding:10px 16px;border-radius:var(--r-pill);background:var(--cream);color:var(--dark);font:700 14px var(--body);text-decoration:none;transform:translateY(-160%);transition:transform var(--d-base) var(--ease-out)}
.skip-link:focus{transform:none;outline:2px solid var(--terra-hi);outline-offset:2px}

/* "Sample" honesty badge: anything illustrative carries one */
.k-sample{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:4px 9px;border-radius:var(--r-pill);border:1px dashed var(--edge2);white-space:nowrap;line-height:1.2}
.k-sample::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terra-hi);opacity:.8}
/* "Building toward" badge: anything described here that does not exist yet. Never present a future idea as live. */
.k-future{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--green-hi);padding:4px 9px;border-radius:var(--r-pill);border:1px dashed var(--line-green);white-space:nowrap;line-height:1.2}
.k-future::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid var(--green-hi)}

/* status line: "Comparing providers…" while a demo works, then a check when it's done */
.k-status{display:flex;align-items:center;gap:10px;min-height:24px;font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.k-status .k-dots{display:inline-flex;gap:4px}
.k-status .k-dots i{width:6px;height:6px;border-radius:50%;background:var(--terra-hi);animation:k-dot 1s var(--ease-inout) infinite}
.k-status .k-dots i:nth-child(2){animation-delay:.15s}
.k-status .k-dots i:nth-child(3){animation-delay:.3s}
.k-status.done{color:var(--green-hi)}
.k-status.done .k-dots{display:none}
.k-status .k-ok{display:none;width:18px;height:18px;border-radius:50%;background:var(--green-hi);color:var(--dark);font-size:11px;font-weight:900;place-items:center}
.k-status.done .k-ok{display:inline-grid;animation:k-pop .4s var(--ease-spring) both}
.k-status .k-txt{animation:k-in .3s var(--ease-out) both}
@keyframes k-dot{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-3px);opacity:1}}
@keyframes k-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes k-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* step meter: where you are in a multi-step flow */
.k-steps{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.k-steps i{width:18px;height:4px;border-radius:var(--r-pill);background:var(--glass3);transition:background var(--d-base),width var(--d-base) var(--ease-out)}
.k-steps i.on{background:var(--terra-hi)}
.k-steps i.cur{width:30px;background:var(--cream)}

/* toasts: short confirmations ("Copied", "Sent") */
.k-toasts{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:var(--z-toast);display:grid;gap:8px;justify-items:center;transform:translateX(-50%);pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.k-toast{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:var(--r-pill);background:var(--cream);color:var(--dark);font:700 14px/1.3 var(--body);box-shadow:var(--sh-2);animation:k-toast-in .45s var(--ease-out) both}
.k-toast i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900;background:var(--green-hi);color:var(--dark);flex:none}
.k-toast.warn i{background:var(--terra-hi)}
.k-toast.out{animation:k-toast-out .3s var(--ease-exit) both}
@keyframes k-toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes k-toast-out{to{opacity:0;transform:translateY(8px) scale(.98)}}

/* press feedback: every button says "got it" the moment it's pressed */
:where(.btn,.cta,.door,.chip,.k-press):active{transform:translateY(0) scale(.97)!important;transition-duration:.08s!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}