/* ================================
   Application UI
================================ */

.app-shell { padding-top: 1rem; }
.app-head { margin-bottom: 1rem; }
.app-lead { max-width: 80ch; color: rgba(0,0,0,.75); margin-top: .35rem; }

.app-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
  align-items: start;
}

.app-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .9rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 1rem;
}

.app-card.side h3{ margin-top: 0; }

.stepper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}

.step{
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  padding: .55rem .5rem;
  border-radius: .7rem;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-weight: 700;
  background: #fafafa;
}
.step span{
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
  font-size: .9rem;
}
.step.active{
  background: rgba(167,199,231,.18);
  border-color: rgba(167,199,231,.6);
}
.step.active span{
  background: #283b59;
  color: #fff;
}

.app-form legend{
  font-weight: 800;
  margin-bottom: .75rem;
  color: #111827;
}

.panel{ display:none; }
.panel.active{ display:block; }

.field{ margin-bottom: .9rem; }
.field label{ font-weight: 700; display:block; margin-bottom: .35rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field select{
  width: 100%;
  padding: .6rem .7rem;
  border-radius: .6rem;
  border: 1px solid #d1d5db;
  outline: none;
}
.field input[type="file"]{
  width: 100%;
  padding: .55rem;
  border-radius: .6rem;
  border: 1px dashed #cbd5e1;
  background: #fbfdff;
}
.field small{ display:block; margin-top:.35rem; color:#6b7280; line-height:1.35; }
.req{ color:#b91c1c; }

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

.radio-card{
  display:flex;
  gap:.75rem;
  padding: .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fcfcfc;
  cursor: pointer;
  margin-bottom: .6rem;
}
.radio-card input{ margin-top: .2rem; }
.radio-card p{ margin: .25rem 0 0; color: #6b7280; }

.panel-actions{
  display:flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .6rem .9rem;
  border-radius: .65rem;
  border: 1px solid #d1d5db;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  color:#111827;
}
.btn:hover{ filter: brightness(1.02); }

.btn.primary{
  background: #283b59;
  color:#fff;
  border-color: rgba(255,255,255,.15);
}
.btn.cta{
  background: rgba(167,199,231,.25);
  border-color: rgba(167,199,231,.65);
  color:#111827;
}
.btn.cta:hover{ filter: brightness(1.03); }

.notice{
  border: 1px solid #e5e7eb;
  background: #fafafa;
  padding: .75rem;
  border-radius: .75rem;
}
.notice p{ margin:.35rem 0 0; color:#6b7280; }

.divider{
  height: 1px;
  background: #e5e7eb;
  margin: 1rem 0;
}

.status-box summary{ font-weight: 800; cursor: pointer; }
.status-form{
  display:flex;
  gap:.6rem;
  margin-top:.75rem;
}
.status-form input{
  flex:1;
  padding:.6rem .7rem;
  border-radius: .6rem;
  border: 1px solid #d1d5db;
}

.help-list{ padding-left: 1.1rem; color:#374151; }
.tiles{ display:grid; gap:.6rem; margin-top:.9rem; }
.tile{
  display:block;
  padding:.7rem .75rem;
  border-radius:.75rem;
  border:1px solid #e5e7eb;
  background:#fff;
  text-decoration:none;
  font-weight:800;
  color:#283b59;
}
.tile:hover{ background:#f9fafb; }

.faq{ margin-top: 1rem; }
.faq summary{ font-weight: 800; cursor:pointer; }
.faq p{ color:#6b7280; margin:.5rem 0 0; }

@media (max-width: 900px){
  .app-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .two-col{ grid-template-columns: 1fr; }
  .status-form{ flex-direction: column; }
}