/* Harbour North 4.0F — Scenario Coach
   Presentation layer only. Scenario calculations and apply logic are untouched. */

#scenariosView{
  max-width:1180px;
  margin:0 auto;
}

#scenariosView .explore-head{
  margin:28px 0 0;
  align-items:flex-start;
  gap:28px;
}
#scenariosView .explore-head .eyebrow{
  color:#138a65;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#scenariosView .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;
}
#scenariosView .explore-head .quiet{
  max-width:760px;
  color:#526b78;
  font-size:15px;
  line-height:1.6;
}
#scenariosView .explore-head > .btn{
  margin-top:2px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#526b78;
  padding:10px 4px;
}
#scenariosView .explore-head > .btn:hover{
  color:#0f3558;
  background:transparent;
}

/* Main coaching workspace */
#scenariosView .scenario-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:18px;
  margin-top:22px;
  align-items:start;
}

#scenariosView .card{
  border:1px solid rgba(15,53,88,.11);
  border-radius:20px;
  background:#fffefa;
  box-shadow:0 7px 24px rgba(15,53,88,.035);
}

#scenariosView .control-card{
  padding:24px;
}
#scenariosView .control-card h3,
#scenariosView .scenario-layout > .card:nth-child(2) h3,
#scenariosView > section.card h3{
  margin:0;
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.015em;
}

#scenariosView #scenarioSuggestion{
  margin:9px 0 20px;
  padding:12px 14px;
  border-radius:12px;
  background:#f2f7f4;
  color:#42616b;
  font-size:12px;
  line-height:1.5;
}

/* Controls should feel calm and obvious */
#scenariosView .range-row{
  margin-top:22px;
}
#scenariosView .range-row label{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  color:#526b78;
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
#scenariosView .range-row label strong{
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.02em;
  text-transform:none;
}
#scenariosView .range-row input[type="range"]{
  width:100%;
  margin-top:13px;
  accent-color:#138a65;
}

#scenariosView #resetScenarioBtn{
  width:100%;
  margin-top:26px;
  min-height:46px;
  border-color:rgba(15,53,88,.14);
  background:#f6f8f6;
}
#scenariosView .control-card > p.quiet:last-child{
  margin:11px 0 0;
  text-align:center;
  color:#778990;
  font-size:11px;
}

/* Answer first */
#scenariosView .scenario-layout > .card:nth-child(2){
  padding:24px;
  border-color:rgba(19,138,101,.22);
  box-shadow:0 10px 30px rgba(19,138,101,.06);
}
#scenariosView .compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
#scenariosView .compare-box{
  min-height:94px;
  padding:15px 16px;
  border:1px solid rgba(15,53,88,.10);
  border-radius:14px;
  background:#fbfbf8;
}
#scenariosView .compare-box.alt{
  border-color:rgba(19,138,101,.22);
  background:#f2f8f5;
}
#scenariosView .compare-box span{
  display:block;
  color:#687b84;
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#scenariosView .compare-box strong{
  display:block;
  margin-top:8px;
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  font-weight:600;
  line-height:1;
}
#scenariosView .compare-box.alt strong{
  color:#138a65;
}

#scenariosView #scenarioDelta{
  position:relative;
  margin-top:16px;
  padding:16px 18px 16px 48px;
  border:1px solid rgba(15,53,88,.10);
  border-radius:14px;
  background:#f7f8f5;
  color:#425d69;
  font-size:13px;
  line-height:1.55;
}
#scenariosView #scenarioDelta::before{
  content:"→";
  position:absolute;
  left:17px;
  top:15px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e8f2ee;
  color:#138a65;
  font-weight:900;
}
#scenariosView #scenarioDelta[data-tone="workable"]{
  border-color:rgba(19,138,101,.25);
  background:#edf7f2;
  color:#285d4d;
}
#scenariosView #scenarioDelta[data-tone="workable"]::before{
  content:"✓";
  background:#138a65;
  color:#fff;
}
#scenariosView #scenarioDelta[data-tone="gap"]{
  border-color:rgba(209,139,18,.25);
  background:#fbf5e7;
  color:#6d5529;
}
#scenariosView #scenarioDelta[data-tone="gap"]::before{
  content:"!";
  background:#d18b12;
  color:#fff;
}

#scenariosView .scenario-layout > .card:nth-child(2) .actions{
  margin-top:16px;
}
#scenariosView #adoptScenarioBtn{
  min-height:48px;
}
#scenariosView #adoptScenarioBtn:disabled{
  opacity:.52;
  cursor:not-allowed;
}

/* Assumptions are secondary */
#scenariosView > section.card{
  max-width:none!important;
  margin:16px 0 0!important;
  padding:20px 22px;
  box-shadow:none;
}
#scenariosView > section.card > .quiet{
  margin:7px 0 16px;
  color:#6a7d85;
  font-size:12px;
}
#scenariosView .assumption-grid{
  gap:12px;
}
#scenariosView .assumption-grid .field{
  padding:0;
}
#scenariosView .assumption-grid label{
  color:#687b84;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#scenariosView .assumption-grid input,
#scenariosView .assumption-grid select{
  min-height:44px;
  margin-top:6px;
  background:#fbfbf8;
}

/* A small safety note beneath the apply action */
.hn4f-scenario-safety{
  margin:10px 0 0;
  color:#778990;
  font-size:11px;
  line-height:1.45;
}

@media(max-width:850px){
  #scenariosView .scenario-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:650px){
  #scenariosView .explore-head{
    flex-direction:column-reverse;
    gap:8px;
  }
  #scenariosView .explore-head h2{
    font-size:34px;
  }
  #scenariosView .compare-grid{
    grid-template-columns:1fr;
  }
}


/* HN_SCENARIO_ANSWER_FIRST_V1
   Result first. Controls second. Calculation logic unchanged. */

#scenariosView .scenario-layout{
  grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr);
  gap:20px;
}


/* ---------------------------------------------------------
   Primary: what happens
   --------------------------------------------------------- */

#scenariosView .scenario-layout > .card.hn4f-scenario-result{
  padding:28px;
  border-color:rgba(19,138,101,.30);
  background:linear-gradient(145deg,#fffefa,#f1f8f4);
  box-shadow:0 14px 38px rgba(15,53,88,.07);
}

#scenariosView .hn4f-scenario-result-kicker{
  margin-bottom:7px;
  color:#138a65;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#scenariosView .scenario-layout > .card.hn4f-scenario-result h3{
  max-width:650px;
  font-size:clamp(28px,3vw,36px);
  line-height:1.12;
  letter-spacing:-.025em;
}


/* The conclusion comes before the supporting figures. */

#scenariosView .hn4f-scenario-result #scenarioDelta{
  margin-top:18px;
  padding:19px 20px 19px 52px;
  font-size:15px;
  line-height:1.6;
  font-weight:650;
}

#scenariosView .hn4f-scenario-result #scenarioDelta::before{
  top:18px;
}


/* Current vs compared numbers support the answer. */

#scenariosView .hn4f-scenario-result .compare-grid{
  margin-top:16px;
}

#scenariosView .hn4f-scenario-result .compare-box{
  min-height:100px;
}

#scenariosView .hn4f-scenario-result .compare-box strong{
  font-size:28px;
}


/* Applying remains a deliberate final decision. */

#scenariosView .hn4f-scenario-result .actions{
  margin-top:20px;
}

#scenariosView .hn4f-scenario-result #adoptScenarioBtn{
  min-height:50px;
  padding-left:22px;
  padding-right:22px;
}


/* ---------------------------------------------------------
   Secondary: experimentation controls
   --------------------------------------------------------- */

/*
 Existing CSS targeted :nth-child(2), which used to be the result
 card. The result is now physically first, so explicitly restore
 the intended quieter treatment to the control card.
*/

#scenariosView .scenario-layout > .card.control-card{
  padding:24px;
  border-color:rgba(15,53,88,.11);
  background:#fffefa;
  box-shadow:0 7px 24px rgba(15,53,88,.035);
}

#scenariosView .control-card h3{
  font-size:22px;
}

#scenariosView #scenarioSuggestion{
  margin-top:10px;
  background:#f5f7f5;
}


/* Assumptions stay tertiary. */

#scenariosView > section.card{
  margin-top:18px!important;
  opacity:.96;
}


/* Mobile naturally remains result → controls because DOM
   order now matches the intended visual order. */

@media(max-width:850px){
  #scenariosView .scenario-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  #scenariosView .scenario-layout > .card.hn4f-scenario-result{
    padding:22px 18px;
  }

  #scenariosView .scenario-layout > .card.hn4f-scenario-result h3{
    font-size:29px;
  }
}


/* HN_SCENARIO_ENDING_ASSETS_NOTE_V1 */
#scenariosView .hn4f-ending-assets-note{
  display:block;
  margin-top:7px;
  color:#71838b;
  font-size:10px;
  line-height:1.4;
  font-weight:650;
}

#scenariosView .compare-box.alt .hn4f-ending-assets-note{
  color:#56776c;
}

/* HN_SCENARIO_NO_JUMP_V2
   Dynamic comparison content must not move the assumption controls.
*/
#scenariosView #scenarioDelta{
  height:174px;
  min-height:174px;
  overflow-y:auto;
  box-sizing:border-box;
}

#scenariosView #scenarioDelta[data-calculating="true"]{
  opacity:.72;
}

#scenariosView .compare-box{
  min-height:94px;
  box-sizing:border-box;
}

#scenariosView .compare-box strong{
  white-space:nowrap;
}

#scenariosView .hn4f-scenario-result .actions{
  min-height:52px;
  align-items:center;
}

@media(max-width:850px){
  #scenariosView #scenarioDelta{
    height:214px;
    min-height:214px;
  }
}

/* HN_SCENARIO_COMPARE_ALIGNMENT_V2
   True alignment for the current/scenario comparison tiles.
*/
#scenariosView .hn4f-scenario-result .compare-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:128px;
  gap:12px;
  align-items:stretch;
}

#scenariosView .hn4f-scenario-result .compare-box{
  min-height:0;
  height:100%;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

#scenariosView .hn4f-scenario-result .compare-box > span:first-child{
  min-height:30px;
  display:flex;
  align-items:flex-start;
  line-height:1.35;
}

#scenariosView .hn4f-scenario-result .compare-box > strong{
  margin-top:7px;
  line-height:1;
}

#scenariosView .hn4f-scenario-result .hn4f-ending-assets-note{
  margin-top:auto;
}

@media(max-width:650px){
  #scenariosView .hn4f-scenario-result .compare-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }

  #scenariosView .hn4f-scenario-result .compare-box{
    min-height:118px;
    height:auto;
  }
}

/* HN_SCENARIO_STRESS_TEST_V1 */
#scenariosView .hn4f-stress-card{
  margin-top:18px!important;
  padding:22px 24px;
  border-color:rgba(15,53,88,.12);
  background:linear-gradient(145deg,#fffefa,#f7f8f5);
  box-shadow:none;
  opacity:1;
}

#scenariosView .hn4f-stress-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
}

#scenariosView .hn4f-stress-head .eyebrow{
  color:#138a65;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#scenariosView .hn4f-stress-head h3{
  margin:5px 0 0;
  color:#0f3558;
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.015em;
}

#scenariosView .hn4f-stress-head p{
  max-width:360px;
  margin:0;
  color:#6a7d85;
  font-size:11px;
  line-height:1.5;
  text-align:right;
}

#scenariosView .hn4f-stress-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

#scenariosView .hn4f-stress-option{
  min-height:86px;
  padding:14px;
  border:1px solid rgba(15,53,88,.12);
  border-radius:14px;
  background:#fff;
  color:#0f3558;
  text-align:left;
  cursor:pointer;
}

#scenariosView .hn4f-stress-option strong{
  display:block;
  font-size:13px;
  line-height:1.3;
}

#scenariosView .hn4f-stress-option span{
  display:block;
  margin-top:6px;
  color:#71838b;
  font-size:11px;
  line-height:1.4;
}

#scenariosView .hn4f-stress-option:hover{
  border-color:rgba(19,138,101,.35);
  background:#f4f9f6;
}

#scenariosView .hn4f-stress-option.selected{
  border-color:#138a65;
  background:#edf7f2;
  box-shadow:0 0 0 2px rgba(19,138,101,.08);
}

#scenariosView .hn4f-stress-option.selected strong{
  color:#138a65;
}

#scenariosView .hn4f-stress-option:disabled{
  opacity:.5;
  cursor:not-allowed;
}

@media(max-width:850px){
  #scenariosView .hn4f-stress-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  #scenariosView .hn4f-stress-head{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  #scenariosView .hn4f-stress-head p{
    text-align:left;
  }

  #scenariosView .hn4f-stress-grid{
    grid-template-columns:1fr;
  }
}

/* HN_SCENARIO_ENDING_ASSETS_SPACING_V2 */
#scenariosView .hn4f-scenario-result .compare-box:has(.hn4f-ending-assets-note){
  min-height:142px;
  padding:18px 20px;
}

#scenariosView .hn4f-scenario-result .compare-box:has(.hn4f-ending-assets-note) > strong{
  margin-top:10px;
}

#scenariosView .hn4f-scenario-result .hn4f-ending-assets-note{
  margin-top:12px;
  font-size:10.5px;
  line-height:1.45;
  max-width:250px;
}