/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KYC MAP — research mind map (case-profee-verification)
   Rendered by kyc-map.js into <div id="kyc-map" class="kyc-map">.
   Deliberately quiet: supports the case, doesn't compete with the solution.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.kyc-map {
  --mm-good:   #3D9E64;
  --mm-retry:  #E0A43A;
  --mm-manual: #7B93F2;
  --mm-bad:    #E3695F;
  --mm-line:   color-mix(in srgb, var(--text-mid) 40%, transparent);

  margin-block: var(--space-10);
}
:root:not([data-theme="dark"]) .kyc-map {
  --mm-good: #1A5C38; --mm-retry: #B87A00; --mm-manual: #3656C8; --mm-bad: #B8362B;
}

.mm-caption {
  max-width: var(--max-w-content);
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-mid);
}

/* ── Tree ── */
.mm {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  column-gap: var(--space-8);
  row-gap: var(--space-5);
  align-items: center;
}
.mm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mm-edge { fill: none; stroke: var(--mm-line); stroke-width: 1.25; transition: stroke .2s, opacity .2s; }
.mm-edge--trunk { stroke-width: 1.75; }

.mm-root {
  grid-column: 1; grid-row: 1 / 4;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  /* Nodes are type, not boxes: nothing here is clickable, so nothing may look like a button.
     The background only masks the connector lines under the text */
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  background: var(--bg);
}
.mm-root-title { font-family: var(--f-serif); font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.mm-root-sub { font-size: var(--fs-xs); color: var(--text-mid); line-height: var(--lh-snug); }

.mm-branch {
  grid-column: 2;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--space-2);
  justify-self: start;
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s, opacity .2s;
}

.mm-leaves {
  grid-column: 3;
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: opacity .2s;
}
.mm-leaf {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 24px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.mm-leaf::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tone, var(--mm-line));
}
.mm-leaf[data-tone="good"]   { --tone: var(--mm-good); }
.mm-leaf[data-tone="retry"]  { --tone: var(--mm-retry); }
.mm-leaf[data-tone="manual"] { --tone: var(--mm-manual); }
.mm-leaf[data-tone="bad"]    { --tone: var(--mm-bad); }
.mm-leaf-sub { color: var(--text-mid); }

/* branch focus */
.mm[data-active] .mm-branch:not(.is-active),
.mm[data-active] .mm-leaves:not(.is-active) { opacity: .35; }
.mm[data-active] .mm-edge:not(.is-active) { opacity: .25; }
.mm-edge.is-active { stroke: var(--accent); }
.mm-branch.is-active { color: var(--accent); }

/* ── Findings: what the map revealed → what I designed ── */
.mm-findings { margin-top: var(--space-6); }
.mm-findings-head,
.mm-finding {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.mm-findings-head {
  padding-block: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-mid);
}
.mm-finding { color: var(--text-mid); }
.mm-finding:last-child { border-bottom: none; }
.mm-finding-fix { color: var(--text); }
.mm-finding-fix::before { content: '→ '; color: var(--accent); }

/* ── Mobile: indented list tree ── */
@media (max-width: 820px) {
  .mm { display: block; }
  .mm-lines { display: none; }
  .mm-root { display: inline-flex; flex-direction: row; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-4); }
  .mm-root { padding: 0; }
  .mm-branch { display: flex; width: max-content; margin: var(--space-6) 0 var(--space-2) var(--space-4); padding: 0; }
  .mm-leaves { margin-left: var(--space-8); padding-left: var(--space-4); border-left: 1px solid var(--mm-line); }
  .mm-leaf { min-height: 28px; align-items: flex-start; padding-block: var(--space-1); }
  .mm-leaf::before { margin-top: 7px; }
  .mm-findings-head { display: none; }
  .mm-finding { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .kyc-map *, .kyc-map *::before { transition: none !important; }
}

/* KYC STATES – one component, every scenario (kyc-states.js) */
.kyc-states-wrap { padding-block: 64px; border-top: 1px solid var(--text); }
.kyc-states-wrap h3 { font-size: var(--ts-lead, 20px); line-height: var(--lh-lead, 28px); font-weight: 600; }
.kyc-states-wrap > p { margin-top: 8px; color: var(--text-mid); max-width: 640px; }
.kyc-states { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px 64px; align-items: start; margin-top: 40px; }
.ks-form { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mid); margin: 24px 0 8px; }
.ks-form:first-child { margin-top: 0; }
.ks-list { list-style: none; border-top: 1px solid var(--border); }
.ks-item { position: relative; display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 12px 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; font: inherit; color: var(--text); }
.ks-item::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: transparent; }
.ks-item:hover { background: var(--bg-alt); }
.ks-item.is-on { background: var(--bg-alt); }
.ks-item.is-on::before { background: var(--accent); }
.ks-title { font-size: 16px; line-height: 24px; font-weight: 500; }
.ks-why { font-size: 14px; line-height: 20px; color: var(--text-mid); }
.ks-item--dropped .ks-title { text-decoration: line-through; text-decoration-color: var(--text-mid); }
.ks-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.is-auto .ks-item.is-on .ks-bar { animation: ksbar 2.8s linear forwards; }
@keyframes ksbar { to { transform: scaleX(1); } }
.ks-stage { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; }
.ks-phone { width: 300px; }
.ks-screens { position: relative; aspect-ratio: 360 / 780; border-radius: 40px; overflow: hidden; background: #fff; }
.ks-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.ks-screen.is-prev { opacity: 0; transform: none; transition: opacity .45s ease .1s; }
.ks-screen.is-on { opacity: 1; transform: none; z-index: 2; }
.no-anim .ks-screen { transition: none; }
.ks-caption { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--text-mid); text-align: center; max-width: 300px; min-height: 40px; }
.ks-caption b { font-weight: 600; color: var(--text); }
.ks-play { margin-top: 12px; padding: 8px 16px; font: inherit; font-size: 14px; line-height: 20px; background: none; border: 1px solid var(--text); color: var(--text); cursor: pointer; }
.ks-play:hover { background: var(--text); color: var(--bg, #fff); }
@media (max-width: 899px) {
  .kyc-states { grid-template-columns: 1fr; gap: 24px; }
  .ks-stage { position: static; order: -1; }
  .ks-phone { width: min(200px, 54vw); border-radius: 36px; }
  .ks-screens { border-radius: 30px; }
  .ks-phone .phone-island { top: 12px; width: 72px; height: 18px; }
  .ks-caption { min-height: 0; margin-top: 12px; }
  .ks-play { margin-top: 8px; }
  /* Phones: the scenarios become a swipeable strip right under the phone */
  .ks-nav { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter-sm, 16px)); padding: 0 var(--gutter-sm, 16px) 8px; scrollbar-width: none; }
  .ks-nav::-webkit-scrollbar { display: none; }
  .ks-form { display: none; }
  .ks-list { display: contents; }
  .ks-list li { flex: 0 0 216px; scroll-snap-align: start; }
  .ks-item { height: 100%; border: 1px solid var(--border); align-content: start; }
}
@media (prefers-reduced-motion: reduce) { .ks-screen { transition: none; } .ks-bar { display: none; } }