/* Harbour North 4.0F — Next Steps
   Presentation layer only. Recommendation ranking/calculations are untouched. */

#explore{
  background:#fbfaf6;
}
#explore .explore-shell{
  display:block;
  min-height:100vh;
}
#explore .explore-nav{
  display:none!important;
}
#explore .explore-main{
  width:100%;
  max-width:1460px;
  margin:0 auto;
  padding:18px 32px 70px;
}

/* Compact persistent plan context */
.hn4f-plan-strip{
  max-width:1432px;
  width:calc(100% - 28px);
  margin:14px auto 0;
  min-height:92px;
  display:grid;
  grid-template-columns:1.15fr repeat(3,1fr);
  align-items:stretch;
  background:#fffefa;
  border:1px solid rgba(15,53,88,.12);
  border-radius:18px;
  box-shadow:0 6px 22px rgba(15,53,88,.035);
  overflow:hidden;
}
.hn4f-plan-strip-item{
  min-width:0;
  padding:18px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid rgba(15,53,88,.10);
}
.hn4f-plan-strip-item:first-child{
  border-left:0;
}
.hn4f-plan-strip-label{
  color:#61747e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.hn4f-plan-strip-value{
  margin-top:7px;
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  line-height:1;
  white-space:nowrap;
}
.hn4f-plan-strip-item.status .hn4f-plan-strip-value{
  color:#138a65;
}
.hn4f-plan-strip-draft{
  grid-column:1/-1;
  padding:8px 20px;
  border-top:1px solid rgba(15,53,88,.08);
  background:#faecd0;
  color:#78581d;
  font-size:12px;
  font-weight:800;
}

/* Page heading */
#recommendationsView .explore-head{
  margin:28px auto 0;
  max-width:1180px;
  align-items:flex-start;
  gap:28px;
}
#recommendationsView .explore-head .eyebrow{
  color:#138a65;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#recommendationsView .explore-head h2{
  margin:7px 0 8px;
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.025em;
}
#recommendationsView .next-steps-intro{
  max-width:720px;
  margin:0;
  color:#526b78;
  font-size:15px;
  line-height:1.6;
}
#recommendationsView .explore-head > .btn{
  margin-top:2px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#526b78;
  padding:10px 4px;
}
#recommendationsView .explore-head > .btn:hover{
  color:#0f3558;
  background:transparent;
}

/* Calm summary rather than another dashboard */
#recommendationsView .opportunity-summary{
  max-width:1180px;
  margin:22px auto 0;
  padding:24px 28px;
  border:1px solid rgba(15,53,88,.12);
  border-radius:20px;
  background:linear-gradient(135deg,#fffefa,#f3f8f5);
  box-shadow:none;
}
#recommendationsView .opportunity-summary-status{
  margin-bottom:14px;
}
#recommendationsView .opportunity-summary-grid{
  display:block;
}
#recommendationsView .opportunity-summary h3{
  max-width:820px;
  margin:5px 0 8px;
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  line-height:1.18;
  letter-spacing:-.02em;
}
#recommendationsView .opportunity-summary p{
  max-width:860px;
  color:#526b78;
  font-size:14px;
  line-height:1.65;
}
#recommendationsView .opportunity-summary-metrics{
  display:none!important;
}

/* Recommendation hierarchy */
#recommendationsView .next-steps-list{
  max-width:1180px;
  margin:18px auto 0;
  gap:12px;
}
#recommendationsView .next-step-card{
  border:1px solid rgba(15,53,88,.11);
  border-radius:18px;
  background:#fffefa;
  box-shadow:0 7px 24px rgba(15,53,88,.035);
}
#recommendationsView .next-step-card:first-child{
  border-color:rgba(19,138,101,.32);
  box-shadow:0 10px 30px rgba(19,138,101,.07);
}
#recommendationsView .next-step-card:first-child::before{
  content:"START HERE";
  display:block;
  padding:10px 22px 0 78px;
  color:#138a65;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
}
#recommendationsView .next-step-toggle{
  min-height:104px;
  padding:18px 22px;
  grid-template-columns:42px minmax(0,1fr) auto 22px;
}
#recommendationsView .next-step-number{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#e8f2ee;
  color:#138a65;
}
#recommendationsView .next-step-heading small{
  color:#61747e;
  font-size:9px;
}
#recommendationsView .next-step-heading strong{
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
  font-weight:600;
  line-height:1.2;
}
#recommendationsView .next-step-heading span{
  max-width:760px;
  margin-top:7px;
  color:#526b78;
  font-size:13px;
  line-height:1.5;
}
#recommendationsView .next-step-badge{
  padding:7px 11px;
  font-size:10px;
}
#recommendationsView .next-step-comparison{
  margin:0;
  padding:0 22px 16px 78px;
  display:flex;
  align-items:center;
  gap:14px;
  border:0;
  background:transparent;
}
#recommendationsView .next-step-comparison .quiet{
  display:none;
}
#recommendationsView .next-step-compare-btn{
  margin:0;
  min-height:42px;
  background:#f5f8f6;
}
#recommendationsView .next-step-comparison > .btn.text{
  color:#61747e;
}

/* Expanded detail remains available, but visually secondary */
#recommendationsView .next-step-details{
  padding:0 22px 24px 78px;
  border-top:1px solid rgba(15,53,88,.08);
}
#recommendationsView .next-step-detail-grid{
  padding-top:22px;
}
#recommendationsView .next-step-ranking,
#recommendationsView .next-step-impact,
#recommendationsView .next-step-plan-change,
#recommendationsView .next-step-comparison.review-note{
  box-shadow:none;
}
#recommendationsView .next-step-plan-change{
  background:#fbf6e9;
}
#recommendationsView .next-step-meta div{
  background:#fffefa;
  box-shadow:none;
}

/* Why block becomes a quiet disclosure-style footer */
#recommendationsView > section.card{
  max-width:1180px!important;
  margin:16px auto 0!important;
  padding:18px 22px!important;
  border-radius:16px!important;
  background:transparent!important;
  box-shadow:none!important;
}
#recommendationsView > section.card h3{
  margin:0 0 6px;
  font-size:14px;
  color:#0f3558;
}
#recommendationsView > section.card p{
  margin:0;
  font-size:12px;
  line-height:1.55;
}

/* Active state should be unmistakable */
#explore .hn4f-nav button:hover{
  background:rgba(19,138,101,.045);
}
#explore .hn4f-nav button[aria-current="page"]{
  background:#e8f2ee;
  color:#0f3558;
}

/* Draft state stays visible without replacing verified numbers */
.hn4f-plan-strip-draft.hidden{
  display:none!important;
}

@media(max-width:900px){
  #explore .explore-main{
    padding:16px 18px 60px;
  }
  .hn4f-plan-strip{
    grid-template-columns:1fr 1fr;
  }
  .hn4f-plan-strip-item:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(15,53,88,.10);
  }
  .hn4f-plan-strip-item:nth-child(4){
    border-top:1px solid rgba(15,53,88,.10);
  }
  #recommendationsView .explore-head{
    flex-direction:column-reverse;
    gap:8px;
  }
}
@media(max-width:650px){
  .hn4f-plan-strip{
    grid-template-columns:1fr;
  }
  .hn4f-plan-strip-item{
    border-left:0;
    border-top:1px solid rgba(15,53,88,.10);
  }
  .hn4f-plan-strip-item:first-child{
    border-top:0;
  }
  #recommendationsView .explore-head h2{
    font-size:34px;
  }
  #recommendationsView .next-step-toggle{
    grid-template-columns:38px minmax(0,1fr) 20px;
  }
  #recommendationsView .next-step-comparison,
  #recommendationsView .next-step-details{
    padding-left:18px;
  }
  #recommendationsView .next-step-card:first-child::before{
    padding-left:18px;
  }
}


/* 4.0F Next Steps focus pass
   Put the first actionable recommendation above the fold. */

#recommendationsView .explore-head{
  margin-top:22px;
}
#recommendationsView .explore-head h2{
  margin-bottom:5px;
}
#recommendationsView .next-steps-intro{
  line-height:1.45;
}

/* The plan strip already carries the numbers.
   Keep this as a compact status sentence instead of a second hero card. */
#recommendationsView .opportunity-summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin-top:16px;
  padding:13px 18px;
  border-radius:16px;
}
#recommendationsView .opportunity-summary-status{
  margin:0;
  white-space:nowrap;
}
#recommendationsView .opportunity-summary-grid{
  min-width:0;
}
#recommendationsView .opportunity-summary .eyebrow,
#recommendationsView .opportunity-summary h3{
  display:none!important;
}
#recommendationsView .opportunity-summary p{
  max-width:none;
  margin:0;
  font-size:13px;
  line-height:1.45;
}

/* Bring recommendation #1 into the first viewport. */
#recommendationsView .next-steps-list{
  margin-top:14px;
}
#recommendationsView .next-step-card:first-child::before{
  padding-top:8px;
}
#recommendationsView .next-step-toggle{
  min-height:94px;
  padding-top:14px;
  padding-bottom:14px;
}

@media(max-width:760px){
  #recommendationsView .opportunity-summary{
    grid-template-columns:1fr;
    gap:8px;
  }
}


/* Semantic plan-status colours */
.hn4f-plan-strip-item.status[data-status-tone="success"] .hn4f-plan-strip-value{color:#138a65}
.hn4f-plan-strip-item.status[data-status-tone="close"] .hn4f-plan-strip-value{color:#a77820}
.hn4f-plan-strip-item.status[data-status-tone="attention"] .hn4f-plan-strip-value{color:#d18b12}
.hn4f-plan-strip-item.status[data-status-tone="risk"] .hn4f-plan-strip-value{color:#d94b3d}


/* HN NEXT STEPS PRIMARY HIERARCHY V1
   Presentation only — ranking and recommendation logic unchanged. */

/* Give the first recommendation breathing room from the rest. */
#recommendationsView .next-step-primary{
  margin-bottom:20px;
  overflow:hidden;
  border:1px solid rgba(19,138,101,.34);
  border-radius:24px;
  background:linear-gradient(145deg,#fffefa,#f1f8f4);
  box-shadow:0 16px 42px rgba(15,53,88,.08);
}

/* Replace the old START HERE treatment with a clearer decision label. */
#recommendationsView .next-step-card:first-child::before{
  content:"YOUR BEST NEXT MOVE";
  padding:18px 28px 0 98px;
  color:#138a65;
  font-size:11px;
  font-weight:950;
  letter-spacing:.13em;
}

/* Recommendation #1 gets the visual weight. */
#recommendationsView .next-step-primary .next-step-toggle{
  min-height:142px;
  padding:18px 28px 22px;
  grid-template-columns:52px minmax(0,1fr) auto 24px;
  gap:18px;
}

#recommendationsView .next-step-primary .next-step-number{
  width:48px;
  height:48px;
  font-size:18px;
  background:#138a65;
  color:#fff;
  box-shadow:0 7px 18px rgba(19,138,101,.18);
}

#recommendationsView .next-step-primary .next-step-heading small{
  color:#138a65;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#recommendationsView .next-step-primary .next-step-heading strong{
  max-width:760px;
  margin-top:4px;
  font-size:clamp(28px,3.2vw,38px);
  line-height:1.12;
  letter-spacing:-.025em;
}

#recommendationsView .next-step-primary .next-step-heading span{
  max-width:760px;
  margin-top:9px;
  color:#526b78;
  font-size:15px;
  line-height:1.55;
}

#recommendationsView .next-step-primary > .next-step-comparison{
  padding:0 28px 24px 98px;
}

#recommendationsView .next-step-primary .next-step-compare-btn{
  min-height:46px;
  border-color:#0f3558;
  background:#0f3558;
  color:#fff;
  font-weight:850;
}

#recommendationsView .next-step-primary .next-step-details{
  padding-left:98px;
  padding-right:28px;
}


/* Recommendations #2 and #3 remain available but clearly secondary. */
#recommendationsView .next-step-secondary{
  border-radius:16px;
  background:rgba(255,254,250,.82);
  box-shadow:none;
}

#recommendationsView .next-step-secondary .next-step-toggle{
  min-height:84px;
  padding:14px 18px;
  grid-template-columns:34px minmax(0,1fr) auto 20px;
  gap:13px;
}

#recommendationsView .next-step-secondary .next-step-number{
  width:32px;
  height:32px;
  font-size:12px;
  background:#eef3f0;
  color:#61747e;
}

#recommendationsView .next-step-secondary .next-step-heading small{
  color:#7a898f;
  font-size:9px;
}

#recommendationsView .next-step-secondary .next-step-heading strong{
  font-size:19px;
  line-height:1.25;
}

#recommendationsView .next-step-secondary .next-step-heading span{
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
}

#recommendationsView .next-step-secondary .next-step-badge{
  opacity:.78;
}

#recommendationsView .next-step-secondary > .next-step-comparison{
  padding:0 18px 14px 65px;
}

#recommendationsView .next-step-secondary .next-step-details{
  padding-left:65px;
  padding-right:18px;
}


/* Keep the plan-state summary useful without letting it compete with #1. */
#recommendationsView .opportunity-summary{
  padding:18px 22px;
}

#recommendationsView .opportunity-summary h3{
  font-size:22px;
  line-height:1.2;
}

#recommendationsView .opportunity-summary p{
  margin-bottom:0;
}


/* Mobile hierarchy */
@media(max-width:650px){
  #recommendationsView .next-step-card:first-child::before{
    padding:16px 18px 0;
  }

  #recommendationsView .next-step-primary .next-step-toggle{
    grid-template-columns:42px minmax(0,1fr) 20px;
    padding:16px 18px 20px;
  }

  #recommendationsView .next-step-primary .next-step-number{
    width:40px;
    height:40px;
  }

  #recommendationsView .next-step-primary .next-step-heading strong{
    font-size:28px;
  }

  #recommendationsView .next-step-primary .next-step-badge{
    grid-column:2;
    justify-self:start;
  }

  #recommendationsView .next-step-primary > .next-step-comparison,
  #recommendationsView .next-step-primary .next-step-details,
  #recommendationsView .next-step-secondary > .next-step-comparison,
  #recommendationsView .next-step-secondary .next-step-details{
    padding-left:18px;
    padding-right:18px;
  }
}

/* HN NEXT STEPS POLISH V1 */
#recommendationsView .next-step-badge.is-empty{
  width:0;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:transparent;
  overflow:hidden;
}