/* ===================== VOYAGE PROVISIONS ESTIMATOR ===================== */
.vpe-section{padding:80px 0; border-top:1px solid rgba(255,255,255,.05)}

.vpe-doc{
  position:relative;
  margin-top:36px;
  background:
    linear-gradient(180deg, rgba(0,8,20,0.65), rgba(0,8,20,0.30)),
    radial-gradient(ellipse at 50% 0%, rgba(243,213,154,.08), transparent 65%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:24px 26px 26px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.vpe-doc::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.6; pointer-events:none;
}

/* Head */
.vpe-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(255,255,255,.10);
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
}
.vpe-tag{display:flex; align-items:center; gap:8px; color:var(--gold); font-weight:600}
.vpe-sub{color:var(--silver-200); flex:1; min-width:160px}
.vpe-meta{color:var(--silver-300)}

/* Body grid */
.vpe-body{
  margin-top:22px;
  display:grid; grid-template-columns:340px 1fr;
  gap:28px;
}

/* ---- Inputs ---- */
.vpe-inputs{display:flex; flex-direction:column; gap:18px}
.vpe-field{display:flex; flex-direction:column; gap:8px}
.vpe-lbl{
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.vpe-hint{
  font-family:'Space Grotesk', sans-serif;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--silver-300); margin-top:2px;
}

.vpe-stepper{
  display:flex; align-items:stretch;
  border:1px solid rgba(243,213,154,.25);
  border-radius:12px; overflow:hidden;
  background:rgba(0,8,20,.4);
}
.vpe-stepper input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  text-align:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:22px; font-weight:700;
  color:#fff;
  padding:14px 4px;
  -moz-appearance:textfield;
}
.vpe-stepper input::-webkit-outer-spin-button,
.vpe-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.vpe-step{
  width:44px;
  background:rgba(243,213,154,.06);
  border:none; cursor:pointer;
  color:var(--gold);
  font-family:'Space Grotesk', sans-serif;
  font-size:22px; font-weight:700;
  transition:background .2s ease, color .2s ease;
}
.vpe-step:hover{background:rgba(243,213,154,.18); color:#fff}
.vpe-step:first-of-type{border-right:1px solid rgba(243,213,154,.18)}
.vpe-step:last-of-type{border-left:1px solid rgba(243,213,154,.18)}

.vpe-select{
  width:100%;
  background-color:rgba(0,8,20,.4);
  border:1px solid rgba(243,213,154,.25);
  border-radius:12px;
  color:#fff;
  font-family:'Space Grotesk', sans-serif;
  font-size:15px; font-weight:600;
  padding:14px 40px 14px 14px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23f3d59a'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:10px 6px;
  cursor:pointer;
}
.vpe-select:focus{border-color:var(--gold); outline:none}

.vpe-run{
  margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
}
.vpe-run svg{flex-shrink:0}

/* ---- Results panel ---- */
.vpe-results{
  position:relative; min-height:380px;
  border:1px dashed rgba(243,213,154,.18);
  border-radius:14px;
  padding:20px 22px;
  background:rgba(0,8,20,.25);
}
.vpe-state{display:none}
.vpe-doc[data-vpe-state="idle"]      .vpe-state-idle     {display:block}
.vpe-doc[data-vpe-state="computing"] .vpe-state-computing{display:flex}
.vpe-doc[data-vpe-state="done"]      .vpe-state-done     {display:block}

/* Idle */
.vpe-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 20px;
  color:var(--silver-200);
}
.vpe-empty svg{margin-bottom:18px; opacity:.7}
.vpe-empty p{font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.06em; max-width:340px; line-height:1.55}
.vpe-empty strong{color:var(--gold); letter-spacing:.16em}

/* Computing */
.vpe-state-computing{
  flex-direction:column; align-items:center; justify-content:center; min-height:340px;
  gap:18px; text-align:center;
}
.vpe-thinking{display:flex; flex-direction:column; align-items:center; gap:14px}
.vpe-thinking-bars{display:flex; gap:5px; align-items:flex-end; height:32px}
.vpe-thinking-bars span{
  width:5px; border-radius:3px;
  background:linear-gradient(180deg, #f3d59a, #c79a4e);
  animation:vpeBars 1.1s ease-in-out infinite;
}
.vpe-thinking-bars span:nth-child(1){animation-delay:0s}
.vpe-thinking-bars span:nth-child(2){animation-delay:.13s}
.vpe-thinking-bars span:nth-child(3){animation-delay:.26s}
.vpe-thinking-bars span:nth-child(4){animation-delay:.39s}
@keyframes vpeBars{
  0%,100%{height:8px; opacity:.6}
  50%{height:32px; opacity:1}
}
.vpe-thinking-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
  margin:6px 0 0;
}
.vpe-thinking-sub{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px; letter-spacing:.04em;
  color:var(--silver-200); margin:0;
  transition:opacity .18s ease;
  min-height:18px;
}

/* Done */
.vpe-result-head{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(255,255,255,.10);
  font-family:'Space Grotesk',sans-serif;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
}
.vpe-result-tag{color:var(--gold); font-weight:600}
.vpe-result-time{color:var(--silver-300); font-family:'JetBrains Mono',monospace; letter-spacing:.10em}

.vpe-rows{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:14px}
.vpe-row{
  animation:vpeRowIn .5s ease both;
  animation-delay:var(--d, 0ms);
}
@keyframes vpeRowIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
.vpe-row-head{
  display:flex; align-items:baseline; gap:10px;
  font-family:'Space Grotesk',sans-serif;
}
.vpe-row-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; align-self:center}
.vpe-row-label{
  flex:1; min-width:0;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:#fff; font-weight:600;
}
.vpe-row-qty{
  font-family:'Space Grotesk',sans-serif;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.vpe-row-qty strong{
  font-size:22px; font-weight:700; color:var(--gold);
  letter-spacing:.01em;
}
.vpe-row-qty em{
  font-style:normal;
  font-size:10px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--silver-300); margin-left:4px;
}
.vpe-row-bar{
  margin-top:8px;
  height:6px; border-radius:99px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.vpe-row-bar span{
  display:block; height:100%; width:0;
  border-radius:99px;
  animation:vpeBarFill .9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--d, 0ms) + 200ms);
}
@keyframes vpeBarFill{to{width:var(--w, 50%)}}
.vpe-row-hint{
  margin-top:4px;
  font-family:'Space Grotesk',sans-serif;
  font-size:10px; letter-spacing:.10em;
  color:var(--silver-300);
}

.vpe-footnotes{
  margin-top:18px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.08);
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; line-height:1.6;
  color:var(--silver-300);
}
.vpe-footnotes p{margin:0}

.vpe-cta{
  margin-top:18px;
  display:flex; gap:12px; flex-wrap:wrap;
}
.vpe-cta .btn{display:inline-flex; align-items:center; gap:10px}
.vpe-cta svg{flex-shrink:0}
.vpe-cta-short{display:none}
@media (max-width: 600px){
  .vpe-cta-full{display:none}
  .vpe-cta-short{display:inline}
}

/* ---- Mobile ---- */
@media (max-width: 900px){
  .vpe-body{grid-template-columns:1fr; gap:22px}
  .vpe-inputs{max-width:100%}
  .vpe-results{min-height:auto; padding:18px 16px}
  .vpe-select{background-position:right 14px center; padding-right:42px}
}
@media (max-width: 600px){
  .vpe-section{padding:60px 0}
  .vpe-doc{padding:18px 14px 20px}
  .vpe-head{
    flex-direction:column; align-items:flex-start; gap:6px;
    font-size:9.5px; letter-spacing:.20em;
  }
  .vpe-sub, .vpe-meta{flex:none; min-width:0}
  .vpe-body{margin-top:18px; gap:18px}
  .vpe-stepper input{font-size:18px; padding:12px 4px}
  .vpe-step{width:42px; font-size:20px}
  .vpe-select{font-size:14px; padding:13px 40px 13px 12px}
  .vpe-run{font-size:13px; padding:14px 16px}
  .vpe-run svg{width:16px; height:16px}
  .vpe-results{padding:16px 14px}
  .vpe-result-head{
    flex-direction:column; align-items:flex-start; gap:4px;
    font-size:9.5px; letter-spacing:.18em;
  }
  .vpe-result-tag{
    word-break:break-word; overflow-wrap:anywhere;
    line-height:1.5;
  }
  .vpe-rows{gap:16px}
  .vpe-row-head{flex-wrap:wrap; gap:8px}
  .vpe-row-label{flex:1 1 100%; order:2; font-size:10.5px}
  .vpe-row-dot{order:1}
  .vpe-row-qty{order:3; flex:1 1 100%; text-align:left}
  .vpe-row-qty strong{font-size:20px}
  .vpe-row-qty em{font-size:9.5px}
  .vpe-row-hint{font-size:9.5px}
  .vpe-footnotes{font-size:11px}
  .vpe-cta{flex-direction:column; gap:10px; margin-top:16px}
  .vpe-cta .btn{
    width:100%; justify-content:center;
    font-size:11.5px; padding:14px 16px;
    text-align:center;
  }
}
@media (max-width: 380px){
  .vpe-stepper input{font-size:17px}
  .vpe-row-qty strong{font-size:18px}
  .vpe-run{font-size:12px; letter-spacing:.10em}
}

@media (prefers-reduced-motion: reduce){
  .vpe-thinking-bars span, .vpe-row, .vpe-row-bar span{animation:none}
  .vpe-row-bar span{width:var(--w, 50%)}
}