/* Walkthroughs (architecture capabilities/03 W7): a bottom sheet on a phone, a
   right drawer from 768px. Tokens only; buttons keep the dashboard's sizes. */
.kk-walk {
  width: 100%; max-width: none; max-height: 85dvh; margin: auto 0 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--kk-s-5) var(--kk-s-4) calc(var(--kk-s-5) + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--kk-r-lg) var(--kk-r-lg) 0 0; background: var(--kk-card); color: var(--kk-text);
  box-shadow: 0 0 0 1px var(--kk-line), var(--kk-shadow-lg); font: 400 var(--kk-fs-body) / var(--kk-lh-body) var(--kk-font-ui);
}
.kk-walk::backdrop { background: color-mix(in srgb, var(--kk-ink) 30%, transparent); }
.kk-walk p { margin: 0 0 var(--kk-s-2); }
.kk-walk-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--kk-s-3); margin-bottom: var(--kk-s-2); }
.kk-walk-h h3 { margin: 0; color: var(--kk-ink); font: 600 var(--kk-fs-title) / var(--kk-lh-title) var(--kk-font-ui); }
.kk-walk-lead { color: var(--kk-text-soft); }

.kk-walk-steps { margin: var(--kk-s-4) 0 0; padding: 0; list-style: none; counter-reset: walk; }
.kk-walk-steps > li { position: relative; padding: 0 0 var(--kk-s-4) var(--kk-s-7); counter-increment: walk; }
.kk-walk-steps > li::before {
  content: counter(walk); position: absolute; left: 0; top: 0; width: var(--kk-s-5); height: var(--kk-s-5);
  display: grid; place-items: center; border-radius: var(--kk-r-pill); background: var(--kk-fill-soft);
  color: var(--kk-ink); font-size: var(--kk-fs-meta); font-weight: 600;
}
.kk-walk-step-h { color: var(--kk-ink); font-weight: 600; }

.kk-walk-client { border-radius: var(--kk-r-md); box-shadow: 0 0 0 1px var(--kk-line); margin: 0 0 var(--kk-s-2); padding: 0 var(--kk-s-3); }
.kk-walk-client[open] { padding-bottom: var(--kk-s-3); }
.kk-walk-client summary { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-2); padding: var(--kk-s-2) 0; cursor: pointer; color: var(--kk-ink); font-weight: 500; }
.kk-walk-tag { color: var(--kk-text-soft); font-size: var(--kk-fs-meta); font-weight: 400; text-align: right; }
.kk-walk-client-steps { margin: 0 0 var(--kk-s-2); padding-left: var(--kk-s-5); }
.kk-walk-client-steps li { margin: var(--kk-s-1) 0; }
.kk-walk code { font-family: var(--kk-font-mono); font-size: var(--kk-fs-meta); overflow-wrap: anywhere; }
.kk-walk-cmd { display: flex; align-items: flex-start; gap: var(--kk-s-2); margin: 0 0 var(--kk-s-2); }
.kk-walk-cmd pre {
  flex: 1; min-width: 0; margin: 0; padding: var(--kk-s-2) var(--kk-s-3); border-radius: var(--kk-r-sm);
  background: var(--kk-fill-soft); color: var(--kk-ink); font: 400 var(--kk-fs-meta) / 1.5 var(--kk-font-mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.kk-walk-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-3); flex-wrap: wrap; padding-top: var(--kk-s-3); border-top: 1px solid var(--kk-line); }
.kk-walk-more { color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-walk-skip { margin: 0; }

@media (min-width: 768px) {
  .kk-walk {
    width: min(26rem, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto;
    padding: var(--kk-s-5); border-radius: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .kk-walk:popover-open { animation: kk-walk-in .2s ease-out; }
}
@keyframes kk-walk-in { from { transform: translateY(var(--kk-s-5)); opacity: 0; } }