/* ZIRFLO v0.9 — transparent signal map + interest-aware card sizing */

.profile-map[hidden]{display:none}
.profile-map{
  margin:18px 0 0;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    linear-gradient(135deg,rgba(120,214,255,.035),rgba(157,242,216,.018)),
    rgba(255,255,255,.012);
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);
  gap:28px;
  align-items:start
}
.profile-map-intro h2{
  margin:8px 0 8px;
  font-size:1.45rem;
  letter-spacing:-.035em
}
.profile-map-intro p{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.55
}
.profile-map-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.profile-group{min-width:0}
.profile-group-label{
  display:block;
  margin-bottom:9px;
  color:#71889a;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.14em
}
.profile-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.profile-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#0d141c;
  color:#91a5b5;
  font-size:.72rem
}
.profile-chip b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--soft);
  font-weight:650
}
.profile-chip span{
  color:var(--mint);
  font-variant-numeric:tabular-nums
}
.profile-empty{color:#6f8191;font-size:.76rem}

/* A strong personalized match may occupy a larger editorial field. */
.feature{
  grid-column:span 8;
  padding:0
}
.feature .story-image{min-height:235px}
.feature .story-content{padding:24px}
.feature h2{
  font-size:clamp(1.8rem,3vw,3.1rem);
  max-width:900px
}

/* Keep the visual cue subtle: size is primary, border tone is secondary. */
.story-card.interest-strong:not(.preference-more){border-color:#304e52}
.story-card.interest-likely:not(.preference-more){border-color:#293a47}
.story-card.interest-low{opacity:.88}

@media(max-width:900px){
  .profile-map{grid-template-columns:1fr}
  .profile-map-groups{grid-template-columns:1fr 1fr}
  .feature{grid-column:span 12}
}
@media(max-width:620px){
  .profile-map{padding:18px}
  .profile-map-groups{grid-template-columns:1fr}
}