/* ============================================================
   "Help me decide" - the signature interaction.
   Concept: the current carries options past you until one catches.
   Loaded on every page that offers the button.
   ============================================================ */

.dc{
  position:fixed; inset:0; z-index:300;
  display:none; align-items:center; justify-content:center;
  padding:clamp(.75rem,3vw,2rem);
  background:rgba(6,17,21,0.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.dc.is-open{ display:flex; }
.dc__box{
  position:relative; overflow:hidden;
  width:min(880px,100%); max-height:92svh;
  display:flex; flex-direction:column;
  background:var(--ink-2); color:var(--on-dark);
  border:1px solid var(--line-dark); border-radius:24px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.8);
}
#dcFlow{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.dc__scroll{ position:relative; z-index:2; overflow-y:auto; padding:clamp(1.6rem,4vw,3rem); }

.dc__close{
  position:absolute; top:14px; right:16px; z-index:6;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,0.4); border:1px solid var(--line-dark);
  color:var(--on-dark); cursor:pointer; font-size:1rem; line-height:1;
  transition:background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.dc__close:hover,.dc__close:focus-visible{ background:rgba(0,0,0,0.7); transform:rotate(90deg); }

/* Progress: a channel with nodes, not a generic bar */
.dc__track{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:.5rem;
  padding:1.35rem calc(clamp(1.6rem,4vw,3rem) + 2.4rem) 0 clamp(1.6rem,4vw,3rem);
}
.dc__node{
  height:3px; flex:1 1 auto; border-radius:999px;
  background:rgba(239,238,230,0.14); overflow:hidden;
}
.dc__node i{
  display:block; height:100%; width:0; border-radius:999px;
  background:var(--moss-lt);
  transition:width .55s var(--ease-out);
}
.dc__node.is-done i,.dc__node.is-active i{ width:100%; }
.dc__node.is-active i{ background:var(--moss-lt); }

.dc__step{ display:none; }
.dc__step.is-active{ display:block; animation:dcIn .5s var(--ease-out) both; }
@keyframes dcIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.dc__eyebrow{
  font-family:var(--ui); font-size:.74rem; font-weight:600;
  letter-spacing:0.04em; color:var(--moss-lt); margin:0 0 .5rem;
}
.dc__q{ font-size:var(--step-3); margin:0 0 .4rem; }
.dc__hint{ font-size:var(--step--1); color:var(--on-dark-mute); margin:0 0 1.75rem; }

/* Step 1: stones in the current */
.dc__stones{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
@media (max-width:640px){ .dc__stones{ grid-template-columns:1fr; } }
.stone{
  position:relative; overflow:hidden;
  padding:1.6rem 1.3rem 1.4rem; text-align:left; cursor:pointer;
  background:rgba(239,238,230,0.045);
  border:1px solid var(--line-dark); border-radius:18px;
  color:var(--on-dark); font-family:var(--ui);
  transition:transform .35s var(--ease-out), border-color .35s var(--ease-out),
             background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.stone b{ display:block; font-size:var(--step-1); font-weight:600; letter-spacing:-0.02em; margin-bottom:.3rem; }
.stone span{ display:block; font-family:var(--body); font-size:.86rem; color:var(--on-dark-mute); line-height:1.5; }
.stone::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--moss-lt); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.stone:hover,.stone:focus-visible{
  transform:translateY(-5px);
  background:rgba(46,115,97,0.16);
  border-color:rgba(87,167,143,0.5);
  box-shadow:0 20px 40px -20px rgba(46,115,97,0.8);
  outline:none;
}
.stone:hover::after,.stone:focus-visible::after{ transform:scaleX(1); }

/* Step 2: drifting interest chips that settle when caught */
.dc__chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.5rem; }
.chip{
  position:relative;
  padding:.62rem 1.15rem; border-radius:999px; cursor:pointer;
  background:rgba(239,238,230,0.05);
  border:1px solid var(--line-dark);
  color:var(--on-dark-mute);
  font-family:var(--ui); font-size:var(--step--1); font-weight:600;
  transition:background-color .3s var(--ease-out), color .3s var(--ease-out),
             border-color .3s var(--ease-out), transform .3s var(--ease-out);
  animation:drift 7s var(--ease-in-out) infinite;
}
.chip:hover,.chip:focus-visible{ color:var(--on-dark); border-color:var(--fog); outline:none; }
.chip[aria-pressed="true"]{
  background:var(--moss); border-color:var(--moss-lt); color:#F3FBF7;
  animation:none; transform:translateY(-2px);
}
.chip[disabled]{ opacity:.3; cursor:not-allowed; animation:none; }
@keyframes drift{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.dc__count{
  font-family:var(--ui); font-size:.76rem; color:var(--on-dark-mute);
  margin-bottom:1.5rem;
}
.dc__count b{ color:var(--moss-lt); }

/* Result */
.dc__result{
  border:1px solid var(--line-dark); border-radius:18px;
  background:rgba(239,238,230,0.045); padding:1.6rem 1.5rem;
  animation:dcIn .55s var(--ease-out) both;
}
.dc__result h4{ font-size:var(--step-2); margin:0 0 .3rem; }
.dc__meta{
  font-family:var(--ui); font-size:.76rem; color:var(--moss-lt);
  margin:0 0 .85rem; font-weight:600;
}
.dc__result p{ color:var(--on-dark-mute); font-size:var(--step--1); margin-bottom:1rem; }
.dc__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.35rem; }
.dc__tags:last-child{ margin-bottom:0; }
.dc__tags span{
  font-family:var(--ui); font-size:.7rem; font-weight:600;
  padding:.25rem .65rem; border-radius:999px;
  border:1px solid var(--line-dark); color:var(--on-dark-mute);
}
.dc__pair{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-dark);
}
.dc__pair-label{
  font-family:var(--ui); font-size:.72rem; font-weight:600;
  letter-spacing:0.03em; color:var(--fog); margin:0 0 .5rem;
}

.dc__actions{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
.dc__back{
  background:none; border:none; cursor:pointer;
  color:var(--on-dark-mute); font-size:var(--step--1); font-weight:600;
  padding:.95rem .4rem; transition:color .25s var(--ease-out);
}
.dc__back:hover,.dc__back:focus-visible{ color:var(--on-dark); }

.dc__empty{
  border:1px dashed var(--line-dark); border-radius:16px;
  padding:1.75rem 1.5rem; text-align:left;
}
.dc__empty h4{ font-size:var(--step-1); margin:0 0 .4rem; }
.dc__empty p{ color:var(--on-dark-mute); font-size:var(--step--1); margin:0; }

.dc__fine{
  font-family:var(--ui); font-size:.72rem; color:var(--on-dark-mute);
  margin:1.5rem 0 0; padding-top:1rem; border-top:1px solid var(--line-dark);
  max-width:none;
}