/* Approved prototype v3, scoped to PROFILE comparison cards only. */
#cards.profile-mode .sp-card{
  --bg:#f4f6fb;
  --card:#fbfcff;
  --panel:#ffffff;
  --ink:#0c1630;
  --muted:#66718b;
  --line:#e7ebf3;
  --pill:#f0f2f8;
  --violet:#8a36ff;
  --blue:#1687cf;
  --pink:#ff3b74;
  --green:#14a85a;
  --orange:#ff9500;
  --teal:#00a9a9;
  --shadow: 0 22px 60px rgba(28,41,73,.12);
  --panel-shadow: 0 8px 24px rgba(28,41,73,.07);
  --radius:28px;
}
#cards.profile-mode .sp-card{
  background:rgba(251,252,255,.98);
  border:1px solid rgba(255,255,255,.95);
  border-radius:36px;
  box-shadow:var(--shadow);
  padding:34px;
}
#cards.profile-mode .sp-identity{
  margin-bottom:26px;
}
#cards.profile-mode .sp-name-line{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
#cards.profile-mode .sp-name{
  font-size:clamp(38px,7vw,64px);
  line-height:.95;
  font-weight:850;
  letter-spacing:-.055em;
}
#cards.profile-mode .sp-age{
  font-size:clamp(24px,4vw,34px);
  color:var(--muted);
  font-weight:500;
}
#cards.profile-mode .sp-meta{
  margin-top:10px;
  color:var(--muted);
  font-size:clamp(18px,2.6vw,26px);
  line-height:1.25;
}
#cards.profile-mode .sp-top-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:22px;
}
#cards.profile-mode .sp-feature{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  min-width:0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
  box-shadow:var(--panel-shadow);
}
#cards.profile-mode .sp-badge{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
#cards.profile-mode .sp-badge.sp-violet{background:#f1e8ff;color:var(--violet)}
#cards.profile-mode .sp-badge.sp-blue{background:#e7f4fd;color:var(--blue)}
#cards.profile-mode .sp-badge.sp-pink{background:#ffe8ef;color:var(--pink)}
#cards.profile-mode .sp-badge svg, #cards.profile-mode .sp-row-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
#cards.profile-mode .sp-feature-label{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
#cards.profile-mode .sp-feature-primary{
  margin-top:5px;
  font-size:23px;
  font-weight:800;
  letter-spacing:-.02em;
}
#cards.profile-mode .sp-feature-secondary{
  margin-top:4px;
  color:var(--muted);
  font-size:15px;
  line-height:1.3;
}
#cards.profile-mode .sp-section{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--panel-shadow);
  padding:18px 20px 12px;
  margin-top:20px;
}
#cards.profile-mode .sp-section-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:4px;
}
#cards.profile-mode .sp-section-title{
  font-size:21px;
  font-weight:820;
  letter-spacing:-.01em;
}
#cards.profile-mode .sp-section-head .sp-badge{
  width:40px;
  height:40px;
}
#cards.profile-mode .sp-section-head .sp-badge svg{width:22px;height:22px}
#cards.profile-mode .sp-row{
  display:grid;
  grid-template-columns:34px 120px 1fr;
  gap:10px 14px;
  align-items:center;
  padding:15px 0;
}
#cards.profile-mode .sp-row + .sp-row{border-top:1px solid var(--line)}
#cards.profile-mode .sp-row-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
}
#cards.profile-mode .sp-row-icon.sp-pink{color:var(--pink)}
#cards.profile-mode .sp-row-icon.sp-green{color:var(--green)}
#cards.profile-mode .sp-row-icon.sp-orange{color:var(--orange)}
#cards.profile-mode .sp-row-icon.sp-violet{color:var(--violet)}
#cards.profile-mode .sp-row-icon.sp-teal{color:var(--teal)}
#cards.profile-mode .sp-row-label{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
#cards.profile-mode .sp-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
#cards.profile-mode .sp-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 13px;
  border-radius:999px;
  background:var(--pill);
  color:#25314a;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
}
#cards.profile-mode .sp-want-grid{
  display:grid;
  grid-template-columns:1fr .75fr 1.45fr;
  gap:0;
}
#cards.profile-mode .sp-want-item{
  padding:12px 18px 16px;
  min-width:0;
}
#cards.profile-mode .sp-want-item + .sp-want-item{border-left:1px solid var(--line)}
#cards.profile-mode .sp-goal-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
#cards.profile-mode .sp-want-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
#cards.profile-mode .sp-want-top .sp-row-label{font-size:14px}
#cards.profile-mode .sp-love-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#cards.profile-mode .sp-love-side + .sp-love-side{
  border-left:1px solid var(--line);
  padding-left:12px;
}
#cards.profile-mode .sp-mini-label{
  color:var(--muted);
  font-size:12px;
  font-weight:760;
  margin-bottom:7px;
}
#cards.profile-mode .sp-love-side .sp-pill{white-space:normal}
@media (max-width:680px){
  
  #cards.profile-mode .sp-card{padding:18px;border-radius:26px}
  #cards.profile-mode .sp-top-facts{gap:10px}
  #cards.profile-mode .sp-feature{padding:14px;grid-template-columns:42px 1fr}
  #cards.profile-mode .sp-badge{width:42px;height:42px}
  #cards.profile-mode .sp-feature-primary{font-size:18px}
  #cards.profile-mode .sp-feature-secondary{font-size:13px}
  #cards.profile-mode .sp-section{padding:14px 14px 8px}
  #cards.profile-mode .sp-section-title{font-size:17px}
  #cards.profile-mode .sp-row{grid-template-columns:28px 92px 1fr;gap:8px 10px}
  #cards.profile-mode .sp-pill{font-size:12px;padding:6px 10px;min-height:30px;white-space:normal}
  #cards.profile-mode .sp-want-grid{grid-template-columns:1fr 1fr}
  #cards.profile-mode .sp-want-item:nth-child(3){
    grid-column:1 / -1;
    border-left:0;
    border-top:1px solid var(--line);
  }
}
@media (max-width:470px){
  #cards.profile-mode .sp-top-facts{grid-template-columns:1fr}
  #cards.profile-mode .sp-row{grid-template-columns:28px 1fr}
  #cards.profile-mode .sp-row-label{grid-column:2}
  #cards.profile-mode .sp-pills{grid-column:2}
  #cards.profile-mode .sp-want-grid{grid-template-columns:1fr}
  #cards.profile-mode .sp-want-item + .sp-want-item{border-left:0;border-top:1px solid var(--line)}
  #cards.profile-mode .sp-want-item:nth-child(3){grid-column:auto}
}

/* Fit two functional choice targets; PHOTO geometry and OR's visual treatment stay intact. */
.competition-stage:has(> #cards.profile-mode){width:min(1580px,96vw)}
#cards.profile-mode{align-items:stretch}
#cards.profile-mode > .choice-card{height:auto;min-height:0;max-height:none;container-type:inline-size;container-name:profile-candidate;border-radius:36px;text-align:left}
#cards.profile-mode > .versus{align-self:center}
#cards.profile-mode .sp-card{height:100%;width:100%;box-sizing:border-box;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);text-align:left}
#cards.profile-mode .sp-card *{box-sizing:border-box}
#cards.profile-mode .sp-name,#cards.profile-mode .sp-section-title{margin:0;text-transform:none}
#cards.profile-mode .sp-feature > div,#cards.profile-mode .sp-love-side{min-width:0}
#cards.profile-mode .sp-name,#cards.profile-mode .sp-meta,#cards.profile-mode .sp-feature-primary,#cards.profile-mode .sp-feature-secondary,#cards.profile-mode .sp-row-label{overflow-wrap:anywhere}
#cards.profile-mode .sp-pill{max-width:100%;white-space:normal;overflow-wrap:anywhere}
#cards.profile-mode .sp-top-facts:has(> :only-child){grid-template-columns:1fr}
#cards.profile-mode .sp-want-grid:has(> :only-child),#cards.profile-mode .sp-love-grid:has(> :only-child){grid-template-columns:1fr}
#cards.profile-mode .sp-want-top .sp-row-icon{flex:0 0 30px}
@container profile-candidate (max-width:680px){
 #cards.profile-mode .sp-card{padding:18px;border-radius:26px}
 #cards.profile-mode .sp-feature{padding:14px;gap:10px;grid-template-columns:42px minmax(0,1fr)}
 #cards.profile-mode .sp-badge{width:42px;height:42px}
 #cards.profile-mode .sp-feature-primary{font-size:18px}
 #cards.profile-mode .sp-feature-secondary{font-size:13px}
 #cards.profile-mode .sp-section{padding:14px 14px 8px}
 #cards.profile-mode .sp-section-title{font-size:17px}
 #cards.profile-mode .sp-row{grid-template-columns:28px 92px minmax(0,1fr);gap:8px 10px}
 #cards.profile-mode .sp-pill{font-size:12px;padding:6px 10px;min-height:30px}
 #cards.profile-mode .sp-want-item{padding:12px 8px 16px}
 #cards.profile-mode .sp-want-top{gap:4px;flex-wrap:wrap}
 #cards.profile-mode .sp-want-top .sp-row-label{font-size:12px}
 #cards.profile-mode .sp-love-grid{gap:8px}
 #cards.profile-mode .sp-love-side + .sp-love-side{padding-left:8px}
}
@container profile-candidate (max-width:470px){
 #cards.profile-mode .sp-top-facts{grid-template-columns:1fr}
 #cards.profile-mode .sp-row{grid-template-columns:28px minmax(0,1fr)}
 #cards.profile-mode .sp-row-label,#cards.profile-mode .sp-pills{grid-column:2}
}
@media(max-width:600px){
 body.competition-body:has(#cards.profile-mode){height:auto;overflow-y:auto}
 .competition-page:has(#cards.profile-mode){height:auto;min-height:100dvh}
 .competition-stage:has(> #cards.profile-mode){flex:0 0 auto;width:100%}
 #cards.profile-mode{flex:none;grid-template-rows:auto 34px auto;gap:10px}
 #cards.profile-mode > .choice-card{height:auto;min-height:0;max-height:none;border-radius:26px}
 #cards.profile-mode > .versus{position:static;transform:none;grid-row:2}
}
/* Keep category words intact; adapt inside a narrow comparison column. */
#cards.profile-mode .sp-want-top{flex-wrap:wrap}
#cards.profile-mode .sp-want-top .sp-row-label{font-size:12px;overflow-wrap:normal}
@container profile-candidate (max-width:470px){
 #cards.profile-mode .sp-want-grid{grid-template-columns:1fr 1fr}
 #cards.profile-mode .sp-want-item:nth-child(3){grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
}
@container profile-candidate (max-width:350px){
 #cards.profile-mode .sp-want-grid{grid-template-columns:1fr}
 #cards.profile-mode .sp-want-item + .sp-want-item{border-left:0;border-top:1px solid var(--line)}
 #cards.profile-mode .sp-want-item:nth-child(3){grid-column:auto}
}