/* Small explanations and choice feedback, never simulated account activity. */
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-map {
  max-width:540px; margin:20px 0; padding:16px 20px 13px;
  border:1px solid var(--hair); border-radius:16px; background:var(--soft);
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-track {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(42px,.65fr) minmax(0,1fr);
  align-items:center; gap:12px;
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-node {
  display:flex; align-items:center; gap:9px; font-size:12px; font-weight:650;
  line-height:1.4; color:var(--ink);
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-node svg {
  width:34px; height:34px; padding:5px; flex-shrink:0; stroke:var(--duck-deep);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  border-radius:10px; background:var(--paper);
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-route {
  position:relative; height:24px; border-top:1px dashed #91ac9f; margin-top:22px;
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-route::after {
  content:""; position:absolute; right:0; top:-4px; width:6px; height:6px;
  border-top:1px solid #91ac9f; border-right:1px solid #91ac9f; transform:rotate(45deg);
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-route i {
  position:absolute; left:0; top:-4px; width:6px; height:6px; background:var(--duck-deep);
  box-shadow:0 0 0 4px #d7efb9; border-radius:50%; opacity:0; pointer-events:none;
  animation:member-order-link 2.6s .2s ease-in-out;
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-route small {
  display:block; text-align:center; padding-top:5px; font-size:10px; color:var(--dim);
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-map figcaption {
  color:var(--dim); font-size:11px; line-height:1.6; margin-top:12px;
}

/* A picked name receives a little check stamp. This follows the selection's
   actual state and does not wait for, or claim, a successful network save. */
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .tile[aria-pressed="true"] .check {
  animation:member-choice-stamp .32s cubic-bezier(.2,.9,.3,1);
}
:is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .schip[aria-pressed="true"] {
  box-shadow:inset 0 -2px 0 #07835f; transition:background .16s ease, box-shadow .16s ease;
}
body[data-member-page="welcome"] #wiz-step2:not([hidden]) .envelope:not(.sealing):not(.sent) .env-row .bar {
  transform-origin:left; animation:member-research-line 1.2s ease-out;
}
body[data-member-page="welcome"] #wiz-step2:not([hidden]) .envelope:not(.sealing):not(.sent) .env-row:nth-child(3) .bar {
  animation-delay:.15s;
}

/* The strategy picture reacts only to an intentional choice, not each time
   account balances refresh. Its caption and complete path always remain. */
#pageroot[data-page="portfolio"] .kindcard[aria-pressed="true"] .mech {
  animation:member-mechanic-focus .55s ease-out;
}
#pageroot[data-page="portfolio"] .kindcard[aria-pressed="true"] .mech circle {
  transform-box:fill-box; transform-origin:center; animation:member-choice-stamp .5s ease-out;
}
#pageroot[data-page="portfolio"] .kindcard[aria-pressed="true"] .mech circle:nth-child(2n) {
  animation-delay:.13s;
}
#pageroot[data-page="portfolio"] .comp .pie { transition:filter .2s ease; }
#pageroot[data-page="portfolio"] .comp:hover .pie { filter:drop-shadow(0 3px 6px #12282118); }
body:has(#pageroot[data-page="portfolio"]) .seglets button.on:not(:disabled) {
  animation:member-config-choice .28s ease-out;
}
body:has(#pageroot[data-page="portfolio"]) .tune-knob:focus-within {
  border-color:#84b8a0; box-shadow:0 0 0 2px #e5f2ea;
}

@keyframes member-order-link {
  0%,8% { left:0; opacity:0; }
  18% { opacity:1; }
  68% { left:calc(100% - 6px); opacity:1; }
  82%,100% { left:calc(100% - 6px); opacity:0; }
}
@keyframes member-choice-stamp {
  0% { transform:scale(.65); }
  65% { transform:scale(1.15); }
  100% { transform:scale(1); }
}
@keyframes member-research-line { from { transform:scaleX(.35); } to { transform:scaleX(1); } }
@keyframes member-mechanic-focus { from { filter:brightness(1.16); } to { filter:brightness(1); } }
@keyframes member-config-choice {
  from { box-shadow:0 0 0 3px #c7e68d; }
  to { box-shadow:0 0 0 0 transparent; }
}
@media (max-width:520px) {
  :is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-map { padding:14px 12px; }
  :is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-track { gap:9px; }
  :is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) .member-link-node { flex-direction:column; text-align:center; font-size:11px; gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
  :is(#pageroot[data-page="settings"], body[data-member-page="welcome"]) *,
  #pageroot[data-page="portfolio"] *,
  body:has(#pageroot[data-page="portfolio"]) dialog * { animation:none !important; transition:none !important; }
}