/* ---------------------------------------------------------------
   Admission form styles.
   No framework, no web fonts, no build step: one 6 KB file that is
   cached forever. On a rural 3G connection that difference is felt.
   --------------------------------------------------------------- */

:root {
  --ink:      #16202c;
  --ink-soft: #5a6472;
  --line:     #d7dde5;
  --bg:       #f4f6f9;
  --card:     #ffffff;
  --brand:    #123a6b;
  --brand-2:  #1c5fa8;
  --ok:       #17694a;
  --ok-bg:    #e6f4ec;
  --bad:      #a3231f;
  --bad-bg:   #fdeceb;
  --radius:   8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.topbar {
  background: var(--brand);
  color: #fff;
  padding: 18px 0;
}
.topbar h1 { margin: 0; font-size: 21px; letter-spacing: .2px; }
.topbar .sub { margin: 2px 0 0; opacity: .85; font-size: 14px; }

/* --- Banners --------------------------------------------------- */
.banner {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid;
}
.banner-ok  { background: var(--ok-bg);  border-color: #9ed3ba; color: var(--ok); }
.banner-bad { background: var(--bad-bg); border-color: #eeb0ad; color: var(--bad); }
.banner ul  { margin: 8px 0 0; padding-left: 20px; }
.banner a   { color: inherit; }
.banner code {
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 15px;
}

/* --- Step navigation ------------------------------------------- */
.steps { margin: 20px 0 8px; }
.steps ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.steps li span {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--line);
  color: #46505e;
  font-size: 12px;
  font-weight: 600;
}
.steps li.on      { border-color: var(--brand-2); color: var(--brand); font-weight: 600; }
.steps li.on span { background: var(--brand-2); color: #fff; }
.steps li.done span { background: var(--ok); color: #fff; }

/* --- Sections & grid ------------------------------------------- */
.step {
  display: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}
.step.on { display: block; }
.step h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--brand);
}
.step h2:not(:first-child) { margin-top: 28px; }

.grid {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 14px;
}
.grid-files { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.subgrid {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.f-wide { grid-column: 1 / -1; }

.fs {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 16px 18px;
  margin: 14px 0 0;
}
.fs legend {
  padding: 0 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
}

/* --- Fields ----------------------------------------------------- */
.f label, .f .lbl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #35404f;
}
.req { color: var(--bad); text-decoration: none; }

.f input[type=text],
.f input[type=email],
.f input[type=tel],
.f input[type=date],
.f input[type=number],
.f input[type=file],
.f select,
.f textarea {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.f select { appearance: none; background-image: none; padding-right: 10px; }
.f textarea { resize: vertical; }

.f input:focus, .f select:focus, .f textarea:focus {
  outline: 2px solid var(--brand-2);
  outline-offset: 1px;
  border-color: var(--brand-2);
}
.f input:disabled, .f select:disabled { background: #eef1f5; color: #8b95a3; }

.f-bad input, .f-bad select, .f-bad textarea { border-color: var(--bad); background: #fffafa; }

.hint { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft); }
.err  { margin: 4px 0 0; font-size: 12.5px; color: var(--bad); font-weight: 500; }
.ok   { margin: 4px 0 0; font-size: 12.5px; color: var(--ok); }
.note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }

.radios { display: flex; gap: 18px; padding-top: 3px; }
.radio  { font-weight: 400 !important; font-size: 15px !important; display: inline-flex; gap: 6px; align-items: center; }

.f-check .check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
}
.f-check input { margin-top: 3px; flex: none; width: 17px; height: 17px; }

/* --- Photo ------------------------------------------------------ */
.photo-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.photo-row .f-file { flex: 1 1 260px; }
.photo-prev img {
  width: 110px; height: 138px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef1f5;
}

/* --- Declaration ------------------------------------------------ */
.decl {
  background: #fafbfd;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 12px;
  max-height: 260px;
  overflow-y: auto;
  font-size: 14px;
}
.decl h3 { margin: 0 0 8px; font-size: 14.5px; color: var(--brand); }
.decl ol { margin: 0; padding-left: 20px; }
.decl li { margin-bottom: 8px; }

/* --- Actions ---------------------------------------------------- */
.actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 18px;
  background: linear-gradient(to bottom, rgba(244,246,249,0), var(--bg) 30%);
}
.btn {
  padding: 11px 22px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid var(--brand-2);
  background: var(--brand-2);
  color: #fff;
  cursor: pointer;
}
.btn:hover  { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-ghost   { background: #fff; color: var(--brand); }
.btn-primary { background: var(--ok); border-color: var(--ok); }
.save-state  { margin-left: auto; font-size: 13px; color: var(--ink-soft); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) {
  .step { padding: 16px; }
  .actions { flex-wrap: wrap; }
  .save-state { order: 3; width: 100%; margin: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .step.on { animation: fade .18s ease-out; }
  @keyframes fade { from { opacity: 0; transform: translateY(4px); } }
}

/* --- "Other (please specify)" text box ---------------------------
   Sits directly under its dropdown so the pair reads as one control. */
.other-box { margin-top: 8px; }
.other-box input {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--brand-2);
  border-radius: 6px;
  background: #fbfdff;
}
.other-box input:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.sr-lite {
  display: block;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  margin-bottom: 3px !important;
}

/* --- Submission success panel ------------------------------------ */
.success-panel h2 { margin: 0 0 12px; font-size: 18px; color: var(--ok); }
.token-callout {
  display: inline-block; padding: 12px 22px; margin-bottom: 12px;
  background: #fff; border: 2px dashed var(--ok); border-radius: 8px;
}
.token-callout span {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase; color: #4a6a5c;
}
.token-callout strong {
  font-size: 30px; letter-spacing: 2px; color: var(--ok);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.success-panel .warn-note {
  font-size: 13.5px; color: #5c4405;
  background: #fdf2dc; border: 1px solid #e8cd8f;
  border-radius: 6px; padding: 10px 13px; margin: 10px 0 0;
}
.success-actions { margin: 16px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.success-actions .btn { text-decoration: none; }
.footlink { font-size: 13.5px; color: var(--ink-soft); padding: 4px 16px 40px; }