/* PackLightBaby V7 — visible decision dock / compact planner outcomes */

/* Keep the live outcome and continuation action visible while the user works in the suitcase. */
.planner-summary-dock{
  position:sticky;
  top:96px;
  z-index:34;
  margin:0 0 18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(235px,1.35fr);
  align-items:stretch;
  gap:8px;
  padding:9px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(21,94,99,.14);
  border-radius:20px;
  box-shadow:0 16px 34px rgba(18,50,74,.12);
  backdrop-filter:blur(14px);
}
.planner-dock-metric{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:10px 11px;
  border-radius:14px;
  background:#F8FAF8;
  border:1px solid rgba(18,50,74,.07);
}
.planner-dock-metric .dock-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--dock-bg,#DCEFF4);color:var(--dock-fg,#155E63)
}
.planner-dock-metric .dock-icon .icon{width:20px;height:20px}
.planner-dock-metric small{display:block;font-size:.60rem;line-height:1.1;text-transform:uppercase;letter-spacing:.08em;font-weight:850;color:#718187;margin-bottom:3px}
.planner-dock-metric strong{display:block;font-size:1.02rem;line-height:1;color:var(--atlantic,#10384A);white-space:nowrap}
.planner-dock-metric.saved{--dock-bg:#F6F0E7;--dock-fg:#6B5A42}
.planner-dock-metric.score{--dock-bg:#FBE1D9;--dock-fg:#B94F39}
.planner-dock-metric.local{--dock-bg:#E7F4F6;--dock-fg:#155E63}
.planner-dock-next{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-radius:15px;padding:10px 11px 10px 14px;
  background:linear-gradient(135deg,#10384A,#155E63);color:#fff;
  min-width:0;
}
.planner-dock-next-copy{min-width:0}
.planner-dock-next small{display:block;color:#BFE3E5;font-size:.60rem;letter-spacing:.1em;text-transform:uppercase;font-weight:900;margin-bottom:3px}
.planner-dock-next strong{display:block;color:#fff;font-size:.84rem;line-height:1.18;white-space:normal}
.planner-dock-next .btn{flex:0 0 auto;padding:10px 13px;background:#fff;color:var(--teal-dark);box-shadow:none;font-size:.73rem;white-space:nowrap}

/* The large cards duplicated the same information and forced the next action below the fold.
   Keep the detailed values available for print but use the live dock on screen. */
#page-planner .metrics{display:none}
@media print{
  .planner-summary-dock{position:static;box-shadow:none;break-inside:avoid}
  #page-planner .metrics{display:grid}
}

/* Make the long suitcase feel like a workbench rather than a page that must be completed before results appear. */
#page-planner .planner-shell{margin-top:0}
#page-planner .side-stack{position:sticky;top:188px;align-self:start}
#page-planner .planner-help{margin-bottom:8px}

/* Full next-step explanation remains as supporting detail, but no longer carries the only CTA.
   Use a light surface to guarantee readable navy text. */
#page-planner .planner-next{
  margin-top:18px;
  background:linear-gradient(135deg,#EAF5F4,#F8F3E9)!important;
  color:var(--atlantic,#10384A)!important;
  border:1px solid rgba(21,94,99,.14);
  box-shadow:0 14px 30px rgba(18,50,74,.08);
}
#page-planner .planner-next h2,
#page-planner .planner-next h3{color:var(--atlantic,#10384A)!important}
#page-planner .planner-next p{color:#536A72!important}
#page-planner .planner-next .eyebrow{color:var(--teal)!important}
#page-planner .planner-next-stats span{background:#fff;border-color:rgba(21,94,99,.12);color:var(--teal-dark)}
#page-planner .planner-next .btn-primary{background:var(--teal);color:#fff}
#page-planner .planner-next .btn-outline{background:#fff;border-color:rgba(21,94,99,.25);color:var(--teal-dark)}

@media(max-width:1120px){
  .planner-summary-dock{grid-template-columns:repeat(4,1fr);top:88px}
  .planner-dock-next{grid-column:1/-1}
  #page-planner .side-stack{top:242px}
}
@media(max-width:880px){
  .planner-summary-dock{position:relative;top:auto;grid-template-columns:1fr 1fr;margin-bottom:14px}
  .planner-dock-next{grid-column:1/-1}
  #page-planner .side-stack{position:relative;top:auto}
}
@media(max-width:620px){
  .planner-summary-dock{grid-template-columns:1fr 1fr;padding:7px;gap:6px;border-radius:16px}
  .planner-dock-metric{grid-template-columns:30px 1fr;padding:8px}
  .planner-dock-metric .dock-icon{width:30px;height:30px;border-radius:9px}
  .planner-dock-next{grid-column:1/-1;display:grid;grid-template-columns:1fr auto}
  .planner-dock-next strong{font-size:.78rem}
  .planner-dock-next .btn{font-size:.68rem;padding:9px 10px}
}