/* =====================================================================
   DGC Finance — staged application shell
   Stepper, step panels and progress notice. Field, tip, table and button
   styles are inherited from apply.css and main.css.
   ===================================================================== */

/* The hidden attribute must win over the display rules of .btn, .alert
   and .save-note, which are inherited from the shared stylesheets. */
[hidden]{display:none !important}

/* =========================== STEPPER =========================== */
.stepper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  list-style:none;
  margin:0 0 30px;
  padding:0;
  counter-reset:none;
}
.stepper__item{
  padding:16px 18px 0 0;
  border-top:3px solid var(--border);
  transition:border-color .2s ease;
}
.stepper__item.is-active{border-top-color:var(--accent)}
.stepper__item.is-done{border-top-color:var(--brand)}
.stepper__num{
  display:block;
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}
.stepper__item.is-active .stepper__num{color:var(--accent-dark)}
.stepper__item.is-done .stepper__num{color:var(--brand)}
.stepper__label{
  display:block;
  font-family:var(--font-head);
  font-size:15px;
  font-weight:700;
  color:var(--muted);
}
.stepper__item.is-active .stepper__label,
.stepper__item.is-done .stepper__label{color:var(--brand-dark)}

/* =========================== SAVE NOTICE =========================== */
.save-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  border-left:3px solid var(--brand);
  background:var(--bg-alt);
  padding:12px 20px;
  margin:0 0 28px;
  font-size:13.5px;
  color:var(--muted);
}
.linkbutton{
  background:none;
  border:0;
  padding:0;
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand);
  cursor:pointer;
  border-bottom:1px solid transparent;
}
.linkbutton:hover{border-bottom-color:var(--accent)}

/* =========================== STEPS =========================== */
.step{display:none}
.step.is-active{display:block}
.step .form-section__head{margin-bottom:24px}

/* cost + currency sit on one line */
.field-grid--cost{
  grid-template-columns:1.6fr 1fr;
  gap:20px;
  max-width:none;
}

/* the calc block inherits from apply.css but needs a little air */
.step .calc{margin-top:10px}

/* =========================== NAVIGATION =========================== */
.step-nav{
  border-top:1px solid var(--border);
  margin-top:38px;
  padding-top:26px;
  gap:18px;
}
.step-nav #navNote{margin-left:auto;text-align:right;max-width:300px}

/* =========================== SUCCESS =========================== */
#successPanel .calc{margin-top:26px}

/* =========================== RESPONSIVE =========================== */
@media (max-width:760px){
  .stepper__item{padding-right:10px}
  .stepper__label{font-size:13.5px}
  .field-grid--cost{grid-template-columns:1fr}
  .step-nav{flex-direction:column;align-items:stretch}
  .step-nav .btn{width:100%}
  .step-nav #navNote{margin:4px 0 0;text-align:left;max-width:none}
}