/* ---------------------------------------------------------------------------
   The application form.

   Every rule is scoped under .form-wrapper, which wraps the three form steps
   and nothing else on the site. The markup is untouched: the AJAX row handlers,
   the validation partial and the save routes all key on names, ids and classes
   that stay exactly as they were.

   Built on the palette already in style.css -- navy #062b66, the red accent
   #c30000, grey #bec8d7 -- rather than a new one, so the form still belongs to
   the site around it.

   What this fixes, in order of how much it was hurting:

     * eight-column input rows crushed every field to about 100px, so an
       applicant typed a college name into a box showing six characters. Cells
       now have a minimum width and the table scrolls instead of squeezing.
     * no visible focus anywhere. Someone tabbing through forty fields could not
       tell where they were.
     * sections ran together with no rhythm, so the form read as one unbroken
       wall rather than as parts.
     * on a phone the tables simply overflowed the page.
   --------------------------------------------------------------------------- */

.form-wrapper {
  --nsf-navy:      #062b66;
  --nsf-navy-dark: #041d47;
  --nsf-accent:    #c30000;
  --nsf-ink:       #1f2933;
  --nsf-muted:     #667487;
  --nsf-line:      #d7e0ec;
  --nsf-line-soft: #e8eef6;
  --nsf-surface:   #ffffff;
  --nsf-radius:    8px;
}

/* ---- Sections -------------------------------------------------------------
   Each heading and the fields beneath it now read as one block on a white
   card, against the page's pale blue. Previously every section ran straight
   into the next. */

.form-wrapper .main-heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
  padding-top: 4px;
}

/* The underline was two stacked pseudo-elements 15 and 20px below the text,
   which put it closer to the first field than to its own heading. */
.form-wrapper .main-heading:after  { bottom: -10px; width: 46px; height: 3px; background: var(--nsf-accent); }
.form-wrapper .main-heading:before { bottom: -10px; }

/* ---- Fields ---------------------------------------------------------------
   Labels sit above their controls at a size that is readable without
   competing with the section heading. */

.form-wrapper .form-group { margin-bottom: 20px; }

.form-wrapper label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--nsf-ink);
  margin-bottom: 7px;
  line-height: 1.35;
}

.form-wrapper .form-control,
.form-wrapper .form-select,
.form-wrapper select,
.form-wrapper textarea,
.form-wrapper input[type="text"],
.form-wrapper input[type="email"],
.form-wrapper input[type="tel"],
.form-wrapper input[type="number"],
.form-wrapper input[type="date"],
.form-wrapper input[type="file"] {
  width: 100%;
  min-height: 46px;            /* comfortably tappable on a phone */
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--nsf-ink);
  background-color: var(--nsf-surface);
  border: 1px solid var(--nsf-line);
  border-radius: var(--nsf-radius);
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

/* style.css pins every textarea in a .contact-form to height:90px, which makes
   the rows attribute meaningless -- a four-row box and a ten-row box come out
   the same size. Height follows the rows again, with a floor so a one-row box
   is still comfortable. */
/* .form-control has to be named here as well as the element.
   ".form-wrapper .form-control" is two classes and ".form-wrapper textarea" is
   one class and an element, so the first of them wins -- and every textarea on
   this form carries class="form-control". The height set here was therefore
   never applied to a single one of them: they all took the 46px floor meant for
   single-line inputs, which is why the father's Details of Occupation box came
   out shorter than one line of its own text and scrolled. */
.form-wrapper textarea,
.form-wrapper textarea.form-control {
  height: auto;
  padding-top: 12px;
  resize: vertical;
}

/* A textarea that states its own rows is one meant to be written in -- the
   Statement of Purpose asks for up to 300 words. */
.form-wrapper textarea[rows],
.form-wrapper textarea[rows].form-control { min-height: 110px; }

/* One that does not is a field sitting in a row beside single-line inputs.
   Details of Occupation/Profession is the only one, and the same question is a
   plain input for the mother and for each sibling -- so it is given two lines:
   enough that a normal answer is not clipped, near enough the inputs beside it
   that the row still reads as a row. It can still be dragged taller. */
.form-wrapper textarea:not([rows]),
.form-wrapper textarea:not([rows]).form-control { min-height: 72px; }

.form-wrapper .form-control::placeholder,
.form-wrapper textarea::placeholder { color: #9aa7b8; }

/* A visible focus ring. There was none at all -- tabbing through the form gave
   no indication of where you were, which on a form this long is the difference
   between filling it in and losing your place. */
.form-wrapper .form-control:focus,
.form-wrapper .form-select:focus,
.form-wrapper select:focus,
.form-wrapper textarea:focus,
.form-wrapper input:focus {
  outline: none;
  border-color: var(--nsf-navy);
  box-shadow: 0 0 0 3px rgba(6, 43, 102, .13);
}

.form-wrapper select,
.form-wrapper .form-select { cursor: pointer; }

.form-wrapper input[readonly],
.form-wrapper .form-control[readonly] {
  background-color: #f4f7fb;
  color: var(--nsf-muted);
  cursor: not-allowed;
}

/* The required marker. It carries real meaning on this form, so it is given
   enough weight to be seen without shouting. */
.form-wrapper .error { color: var(--nsf-accent); font-weight: 700; }

/* A label placed straight inside a .row, with no column around it -- "List
   year wise starting from latest" is one. Bootstrap gives .row a -15px side
   margin that columns cancel with their own padding; a bare label never gets
   that padding back, so it hangs 15px to the left of the frame beneath it and
   reads as though it has escaped the section. */
.form-wrapper .row > label,
.form-wrapper .row > .nsf-section-head {
  padding-left: 15px;
  padding-right: 15px;
}

/* ---- Radios and checkboxes ------------------------------------------------ */

/* The markup is <label class="radio-inline"><input type="radio">Yes</label>,
   and Bootstrap takes that input out of the flow -- position:absolute with a
   negative left margin -- expecting the label's own left padding to leave a gap
   for it. Laying the label out as a flex row without undoing that put the
   circle on top of its own word, so "Yes" showed as "s".

   The input is returned to the flow, and the padding Bootstrap reserved for it
   is removed, before the row is laid out. */
.form-wrapper .radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 22px;
  padding-left: 0;
  font-weight: 500;
  cursor: pointer;
}
.form-wrapper .radio-inline input[type="radio"],
.form-wrapper .radio-inline input[type="checkbox"],
.form-wrapper input[type="checkbox"] {
  position: static;
  width: 17px; height: 17px; min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--nsf-navy);
  cursor: pointer;
}

/* Radios that are not wrapped in .radio-inline still need the same rescue. */
.form-wrapper input[type="radio"] {
  position: static;
  width: 17px; height: 17px; min-height: 0;
  margin: 0 6px 0 0;
  accent-color: var(--nsf-navy);
  cursor: pointer;
}

/* ---- The row tables -------------------------------------------------------
   These hold the repeating entries: education, siblings, scholarships,
   activities, projects. Eight columns of inputs inside a table that was told to
   fit the page produced fields about 100px wide -- a school name typed into a
   box showing six characters at a time.

   Cells now carry a minimum width and the table scrolls sideways instead. */

.form-wrapper .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--nsf-line);
  border-radius: var(--nsf-radius);
  background: var(--nsf-surface);
  margin-bottom: 18px;
  /* Clear of the scrollbar. The fields sat directly on top of it, so the bar
     read as part of the last row rather than as a control for the frame. */
  padding-bottom: 10px;
}

.form-wrapper .table-responsive > table { margin-bottom: 0; border: 0; }

.form-wrapper table > thead > tr > th {
  background: #f3f7fc;
  border-bottom: 1px solid var(--nsf-line);
  border-top: 0;
  color: var(--nsf-navy);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 12px 12px;
  white-space: nowrap;         /* headers wrapped three lines deep */
  vertical-align: middle;
}

.form-wrapper table > tbody > tr > td {
  padding: 12px;
  border-top: 1px solid var(--nsf-line-soft);
  vertical-align: top;
}

.form-wrapper table > tbody > tr:first-child > td { border-top: 0; }

/* Room to actually read what you are typing. */
.form-wrapper table td .form-control,
.form-wrapper table td select,
.form-wrapper table td input { min-width: 150px; }

.form-wrapper table td textarea { min-width: 240px; }

/* The saved-entries tables below each input row are for reading, not typing. */
.form-wrapper .table-bordered > tbody > tr:nth-child(even) { background: #fafcfe; }

.form-wrapper table .btn-danger {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ---- Buttons --------------------------------------------------------------
   One primary action per screen, everything else quieter. */

.form-wrapper .theme-btn.btn-one,
.form-wrapper .btn-primary {
  display: inline-block;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background-color: var(--nsf-navy);
  border: 1px solid var(--nsf-navy);
  border-radius: var(--nsf-radius);
  cursor: pointer;
  transition: background-color .12s ease;
}
.form-wrapper .theme-btn.btn-one:hover,
.form-wrapper .btn-primary:hover { background-color: var(--nsf-navy-dark); }

/* "Add" repeats a row; it is not the main action on the page, so it no longer
   looks like it. */
.form-wrapper .btn.btn-primary[value="Add"],
.form-wrapper input[type="button"][value="Add"],
.form-wrapper .add-btn {
  background: #fff;
  color: var(--nsf-navy);
  border: 1px solid var(--nsf-navy);
  padding: 9px 22px;
  font-size: 14px;
}
.form-wrapper .btn.btn-primary[value="Add"]:hover,
.form-wrapper input[type="button"][value="Add"]:hover,
.form-wrapper .add-btn:hover { background: #eef4fb; }

/* ---- Messages ------------------------------------------------------------- */

.form-wrapper .alert {
  padding: 13px 16px;
  border-radius: var(--nsf-radius);
  font-size: 14px;
  border: 1px solid transparent;
  margin-bottom: 20px;
}
.form-wrapper .alert-success { background: #eaf7ef; border-color: #bde3cb; color: #1a6e3c; }
.form-wrapper .alert-danger  { background: #fdeceb; border-color: #f5c6c2; color: #a32720; }

/* ---- Progress indicator ---------------------------------------------------
   Each step now says what it is. Three bare numbers told an applicant which of
   three screens they were on but not what any of them contained, or what was
   still to come.

   Laid out with flexbox. The old version gave each circle a 100px left margin
   and dragged its connecting line back 95px with a transform -- measurements
   that only lined up at the width they were taken at, and drifted at every
   other. */

.form-wrapper .nsf-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 0 auto 42px;
  padding: 0;
  max-width: 560px;
}

.form-wrapper .nsf-steps .step {
  /* Reset the circle geometry from style.css: this is a column now, with the
     circle on top and its name beneath. */
  all: unset;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  position: relative;
  text-align: center;
  min-width: 0;
}

/* The rule joining one step to the next, drawn behind the circles and stopping
   short of each so it never runs underneath them. */
.form-wrapper .nsf-steps .step + .step:before {
  content: '';
  position: absolute;
  top: 20px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--nsf-line);
  margin: 0 26px;
  z-index: 0;
}

.form-wrapper .nsf-step-dot {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--nsf-line);
  color: var(--nsf-muted);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.form-wrapper .nsf-step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nsf-muted);
  line-height: 1.3;
}

/* Where you are. */
.form-wrapper .nsf-steps .step.active .nsf-step-dot {
  background: var(--nsf-navy);
  border-color: var(--nsf-navy);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(6, 43, 102, .12);
}
.form-wrapper .nsf-steps .step.active .nsf-step-label { color: var(--nsf-navy); }

/* Where you have been. custom.js swaps the number for a tick. */
.form-wrapper .nsf-steps .step.done .nsf-step-dot {
  background: #e8f2ea;
  border-color: #7fb894;
  color: #2c7a4b;
}
.form-wrapper .nsf-steps .step.done + .step:before { background: #7fb894; }
.form-wrapper .nsf-steps .step.done .nsf-step-label { color: var(--nsf-ink); }

@media (max-width: 575px) {
  .form-wrapper .nsf-step-label { font-size: 11px; }
  .form-wrapper .nsf-steps { margin-bottom: 30px; }
}

/* ---- Small screens --------------------------------------------------------
   Below the tablet breakpoint the two-column rows stack. The row tables keep
   their widths and scroll -- collapsing an eight-column entry into a stack
   would lose the alignment that makes it readable as one entry. */

@media (max-width: 767px) {
  .form-wrapper { padding: 28px 0 44px; }
  .form-wrapper .main-heading { font-size: 19px; margin-bottom: 22px; }
  .form-wrapper .col-sm-4,
  .form-wrapper .col-sm-6 { width: 100%; }
  .form-wrapper .theme-btn.btn-one { width: 100%; text-align: center; }
  .form-wrapper .radio-inline { margin-right: 16px; }
}


/* ---- Section heading with its own action ----------------------------------
   "Add" belongs to the section it repeats, so it sits on the heading line at
   the right rather than under the table. It was inside the scrolling frame
   before, which meant that on a narrow screen it scrolled sideways along with
   the columns and could end up out of view entirely. */

.form-wrapper .nsf-section-head {
  display: flex;
  /* Level with the last line of the text, not floating against the middle of
     it. Where the instructions run to five bullets, centred left the button
     stranded beside the second one. */
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* The heading keeps its underline but gives up its bottom margin to the row. */
.form-wrapper .nsf-section-head .main-heading { margin-bottom: 0; }

/* The row can hold a note instead of a heading -- the education section pairs
   Add with "Scores from Std. 10 ... will not be accepted." rather than with the
   title above it. The note takes the width it needs and the button stays at the
   right; below the tablet width they stack. */
.form-wrapper .nsf-section-head p { margin: 0; flex: 1 1 320px; }

.form-wrapper .nsf-section-head .btn {
  flex: 0 0 auto;
  background: #fff;
  color: var(--nsf-navy);
  border: 1px solid var(--nsf-navy);
  border-radius: var(--nsf-radius);
  padding: 9px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.form-wrapper .nsf-section-head .btn:hover { background: #eef4fb; }

@media (max-width: 575px) {
  .form-wrapper .nsf-section-head { gap: 10px; }
  .form-wrapper .nsf-section-head .btn { width: 100%; }
}


/* ---- The dialog that replaced alert() -------------------------------------
   Deliberately outside the .form-wrapper scope used by everything above: the
   dialog is appended to <body>, so it is not inside the form. */

.nsf-alert {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .45);
  opacity: 0; transition: opacity .16s ease;
}
.nsf-alert.is-open { opacity: 1; }

.nsf-alert__box {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 14px;
  padding: 30px 28px 24px;
  text-align: center;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  transform: translateY(8px) scale(.97);
  transition: transform .16s ease;
}
.nsf-alert.is-open .nsf-alert__box { transform: none; }

.nsf-alert__icon { width: 66px; height: 66px; margin: 0 auto 16px; }
.nsf-alert__icon svg { width: 100%; height: 100%; fill: none; stroke-width: 3.2;
                       stroke-linecap: round; stroke-linejoin: round; }

.nsf-alert--success .nsf-alert__icon svg { stroke: #2c9c5f; color: #2c9c5f; }
.nsf-alert--error   .nsf-alert__icon svg { stroke: #c0392b; color: #c0392b; }
.nsf-alert--warning .nsf-alert__icon svg { stroke: #d19100; color: #d19100; }

.nsf-alert__title {
  margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #1f2933;
}
.nsf-alert__text {
  margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: #55606e;
  word-wrap: break-word;
}

.nsf-alert__ok {
  min-width: 120px; padding: 11px 26px;
  font-size: 15px; font-weight: 600; color: #fff;
  background: #062b66; border: 0; border-radius: 8px; cursor: pointer;
}
.nsf-alert__ok:hover { background: #041d47; }
.nsf-alert__ok:focus-visible { outline: 3px solid rgba(6, 43, 102, .35); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nsf-alert, .nsf-alert__box { transition: none; }
}


/* ---- Document uploads (step 3) --------------------------------------------
   Every label carried its format instruction inside the same red span as the
   required asterisk -- "SSC marksheet*(Please upload only Pdf format document)"
   -- so a page of guidance shouted in red and the asterisks that actually meant
   something were lost among it. The instruction is now secondary text under the
   name it belongs to, and only the asterisk stays red.

   The fields were also mixed three-across and two-across, which is what made
   the page look assembled from parts. They are one grid now, and each field
   fills the height of its row so the boxes line up whatever the label wraps to. */

.form-wrapper .nsf-hint {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--nsf-muted);
}

/* ---- Rows that stay in line -------------------------------------------------

   The grid here is Bootstrap 3, which floats its columns. A float only drops to
   a new line when it runs out of horizontal room, so the moment one field in a
   row becomes taller than its neighbours -- a label that wraps to two lines, a
   validation message, the confirmation line under a chosen file -- the next
   column catches on its bottom edge instead of clearing it, and the rest of the
   row staggers down the page at the wrong indent.

   This was being answered a section at a time with "start every odd column on a
   fresh line" rules. That works only where a row is uniformly two- or
   three-across; step 1 mixes col-sm-2, 3, 6 and 12 in the same row, so no
   nth-child rule could straighten it and nothing did.

   Laying the rows out with flex fixes all of them at once, and cannot stagger:
   a wrapped line begins below the tallest item of the line before it. The two
   reasons it was passed over before are dealt with here -- BS3's clearfix
   pseudo-elements are taken out of the flow so they cannot become flex items,
   and anything placed straight into a row without a column around it is given
   the full width it had as a block.

   From 768px up only. Below it the columns are already full width and stacked,
   and several of them (col-sm-2, col-sm-3) get that width from being blocks
   rather than from a rule -- as flex items with no width they would shrink to
   fit their contents. */
@media (min-width: 768px) {
  .form-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    /* Not stretch: a column is as tall as what is in it, which is what keeps
       the picture preview beside the upload box its own size. */
    align-items: flex-start;
  }

  .form-wrapper .row:before,
  .form-wrapper .row:after { display: none; }

  /* Keep the grid's own widths, and refuse to be squeezed below them. */
  .form-wrapper .row > [class*="col-"] { flex: 0 0 auto; }

  /* A heading, an error banner or a bare label dropped straight into a row:
     these were full-width blocks and have to stay that way. */
  .form-wrapper .row > label,
  .form-wrapper .row > .nsf-section-head,
  .form-wrapper .row > .alert { flex: 0 0 100%; }
}

/* Flex keeps the rows from staggering; it does not make the controls inside one
   line start at the same height, because that depends on how far each label
   wraps. The upload labels are the long ones, so they are given a floor of two
   lines' worth. :has() keeps it to those fields; where it is unsupported the
   page simply looks as it did. */
@supports selector(:has(*)) {
  .form-wrapper .form-group:has(> input[type="file"]) > label {
    min-height: 3.6em;
  }
}

/* A file input is a browser control with a button welded into it; it cannot be
   restyled far. Giving it the same frame as every other field at least stops it
   looking like something the page forgot. */
.form-wrapper input[type="file"] {
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  background: #fbfcfd;
}
.form-wrapper input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nsf-navy);
  background: #fff;
  border: 1px solid var(--nsf-line);
  border-radius: 6px;
  cursor: pointer;
}
.form-wrapper input[type="file"]::file-selector-button:hover { background: #eef4fb; }

/* The confirmation once something is chosen, and the refusal when nothing is. */
.form-wrapper .form-group span[role="alert"],
.form-wrapper .form-group .nsf-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
}


/* ---- Word count ------------------------------------------------------------
   The Statement of Purpose states a limit; this is what tells the applicant
   where they are against it while they write. */
.form-wrapper .nsf-wordcount {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nsf-muted);
}
.form-wrapper .nsf-wordcount.is-over { color: var(--nsf-accent); }

/* ---- The note before submitting -------------------------------------------- */
.form-wrapper .nsf-final-note {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nsf-accent);
}


/* ---- The declaration before submitting ------------------------------------- */
.form-wrapper .nsf-declaration {
  max-width: 640px;
  margin: 0 auto 18px;
  padding: 16px 18px;
  text-align: left;
  background: #f7fafd;
  border: 1px solid var(--nsf-line);
  border-radius: var(--nsf-radius);
}
.form-wrapper .nsf-declaration label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.form-wrapper .nsf-declaration label:last-child { margin-bottom: 0; }
.form-wrapper .nsf-declaration input[type="checkbox"] { margin-top: 2px; }




/* ---- Numbered disclaimers --------------------------------------------------
   The client's own list is numbered i) and ii), and the two points are separate
   instructions -- run together with a line break they read as one sentence that
   changed its mind. style.css resets every list to no marker, so the marker is
   set back explicitly here.

   In the body ink and carrying weight, not as a quiet grey aside: these are the
   instructions an applicant has to follow to keep their work -- "Click on add to
   save the details" is the difference between a sibling being stored and being
   lost -- and an aside is exactly what gets skipped. The address note said this
   for itself; it belongs to every one of them. */
.form-wrapper .nsf-disclaimers {
  /* Clear of the frame beneath. Standing alone under a heading, the list sat
     directly on the table's top edge and read as part of it. Inside a heading
     row the bottom margin is dropped again -- that row spaces itself. */
  margin: 4px 0 14px;
  padding-left: 26px;
  list-style: lower-roman outside;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--nsf-navy);
}
.form-wrapper .nsf-disclaimers li { margin: 0 0 2px; }
.form-wrapper .nsf-disclaimers li:last-child { margin-bottom: 0; }


/* The note and its numbered points are one block, so they stack instead of
   becoming two columns of the heading row -- the row is a flex container, and
   left to themselves the paragraph and the list sat side by side. */
.form-wrapper .nsf-section-head-text { flex: 1 1 380px; min-width: 0; }
.form-wrapper .nsf-section-head-text p { margin: 0; }


/* ---- Editing a saved row ---------------------------------------------------
   Edit sits beside Delete in the Action column. It is the safe one of the two,
   so it is the quieter colour -- Delete keeps the weight. */
.form-wrapper table .nsf-edit-row {
  padding: 6px 14px;
  /* Space on both axes: the Action column is narrow enough that the two
     buttons usually stack, and side by side they still need a gap. */
  margin: 0 8px 8px 0;
  font-size: 13px;
  border-radius: 6px;
  white-space: nowrap;
  background: #fff;
  color: var(--nsf-navy);
  border: 1px solid var(--nsf-navy);
}
.form-wrapper table .nsf-edit-row:hover { background: #eef4fb; }


/* Keeps the pair apart however they land in a narrow Action column. */
.form-wrapper table td .nsf-edit-row + .btn-danger,
.form-wrapper table td .btn-danger { margin-top: 2px; }


/* ---- The edit dialog -------------------------------------------------------
   Outside the .form-wrapper scope: the dialog is appended to <body>, so it is
   not inside the form. */

.nsf-edit-modal {
  position: fixed; inset: 0; z-index: 99997;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .45);
}
.nsf-edit-modal.is-open { display: flex; }

.nsf-edit-box {
  width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 14px;
  padding: 26px 28px 22px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.nsf-edit-title {
  margin: 0 0 20px; font-size: 19px; font-weight: 700; color: #062b66;
}

/* Two across where there is room -- these rows have up to eight fields, and one
   per line would put the buttons below the fold. */
.nsf-edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 520px) { .nsf-edit-fields { grid-template-columns: 1fr; } }

.nsf-edit-field label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: #1f2933;
}
.nsf-edit-field .form-control {
  width: 100%; min-height: 42px; padding: 9px 12px;
  font-size: 14px; color: #1f2933;
  border: 1px solid #d7e0ec; border-radius: 8px; background: #fff;
}
.nsf-edit-field .form-control:focus {
  outline: none; border-color: #062b66; box-shadow: 0 0 0 3px rgba(6, 43, 102, .13);
}

.nsf-edit-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid #e8eef6;
}
.nsf-edit-actions button {
  min-width: 116px; padding: 10px 20px;
  font-size: 14.5px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
}
.nsf-edit-cancel { background: #fff; color: #667487; border: 1px solid #d7e0ec; }
.nsf-edit-cancel:hover { background: #f4f7fb; color: #1f2933; }
.nsf-edit-save { background: #062b66; color: #fff; border: 1px solid #062b66; }
.nsf-edit-save:hover { background: #041d47; }
.nsf-edit-save:disabled { opacity: .6; cursor: default; }


/* The instruction lists sit close to the frame they introduce; the browser's
   own margin left a gap wide enough to read as a separator. */
.form-wrapper .nsf-section-head-text ul,
.form-wrapper .nsf-section-head-text ol { margin-bottom: 0; }
.form-wrapper .nsf-section-head-text > *:last-child { margin-bottom: 0; }




/* ---- An uploaded document: view it, delete it ------------------------------
   Only rendered when a file exists, so the row's presence is itself the answer
   to "did that upload work?" -- previously a sentence the eye slid past on a
   page of nine near-identical upload controls.

   Icon and word together. The icons carry the row at a glance; the words are
   what stop an applicant guessing, and a wrong guess about the bin costs them
   a document. */
.form-wrapper .nsf-file {
  display: block;          /* not flex: Bootstrap 3's float grid is underneath */
  margin: 7px 0 4px;
  line-height: 1;
}

.form-wrapper .nsf-file__state {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1a6e3c;
  letter-spacing: .01em;
}
.form-wrapper .nsf-file__tick {
  width: 13px; height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
  fill: none;
  stroke: #1a6e3c;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A button, not a link in a sentence -- these do something, and a bordered
   target says so and is easier to hit than underlined words. */
.form-wrapper .nsf-file__btn {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  padding: 5px 11px 5px 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--nsf-navy);
  background: #fff;
  border: 1px solid #d3dae4;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.form-wrapper .nsf-file__btn svg {
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-wrapper .nsf-file__btn:hover,
.form-wrapper .nsf-file__btn:focus {
  color: var(--nsf-navy);
  text-decoration: none;
  background: #eef3f9;
  border-color: #b7c4d4;
}

/* Red only on approach. Sitting red among nine upload controls it would read as
   an error on a document that is perfectly fine. */
.form-wrapper .nsf-file__btn--remove:hover,
.form-wrapper .nsf-file__btn--remove:focus {
  color: #a01414;
  background: #fdeceb;
  border-color: #f0b6b2;
}
.form-wrapper .nsf-file__btn--remove:disabled {
  opacity: .5;
  cursor: default;
  background: #fff;
  border-color: #d3dae4;
  color: var(--nsf-navy);
}

.form-wrapper .nsf-file__hint {
  display: block;
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #7a8699;
}


/* ---- Two columns that stay two columns --------------------------------------
   Bootstrap 3's grid floats, and a float only drops to a new line when it runs
   out of room -- not when the row logically ends. So the moment one column
   grows taller than its neighbour, the next column catches on that column's
   bottom edge instead of starting fresh, and the page appears to come apart.

   Which is exactly what an applicant sees on choosing a file: the confirmation
   line adds a couple of lines to that one column and the documents below it
   jump into the wrong places. A validation message does the same thing.

   Starting every odd column on a fresh line was the grid's own remedy for this,
   but it only ever worked where a row was uniformly two-up. The rows are laid
   out with flex now -- see "Rows that stay in line" above -- which holds for
   every row on all three steps whatever mixture of widths it carries, so the
   rule that stood here is gone rather than left to look load-bearing. clear has
   no effect on a flex item in any case. */


/* ---- The three actions, on one line -----------------------------------------
   Previous, Save and Submit are the three things an applicant can do here, and
   they belong on the same line: stacked into separate panels, the eye reads
   them as separate stages and hunts for the one that finishes the job.

   What separates them is not position but state. Submit stays greyed until both
   declarations are ticked; Save never does, because Save is for work in
   progress. */
.form-wrapper .nsf-actions {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: center;
}

.form-wrapper .nsf-actions .nsf-declaration { margin-bottom: 14px; }

.form-wrapper .nsf-actions__row {
  margin: 18px 0 0;
  /* Inline-block, not flex: Bootstrap 3's float grid is underneath, and the
     buttons need to wrap on a narrow screen rather than squeeze. */
  font-size: 0;
}
.form-wrapper .nsf-actions__row > * {
  margin: 0 5px 10px;
  vertical-align: middle;
}

.form-wrapper .nsf-btn-final { min-width: 150px; }

/* Locked, not broken. Grey enough to read as "not yet", with the pointer saying
   the same thing -- and the hint below naming what is missing, because a greyed
   button on its own is a puzzle. */
.form-wrapper .nsf-btn-final:disabled,
.form-wrapper .nsf-btn-final.is-locked {
  color: #8d97a5 !important;
  background: #e7ebf1 !important;
  border-color: #dbe1e9 !important;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
/* style.css slides a coloured panel in from the left on hover; on a locked
   button that reads as though the press worked. */
.form-wrapper .nsf-btn-final:disabled:before,
.form-wrapper .nsf-btn-final.is-locked:before { display: none; }
.form-wrapper .nsf-btn-final:disabled:hover,
.form-wrapper .nsf-btn-final.is-locked:hover { color: #8d97a5 !important; }

.form-wrapper .nsf-actions__hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6d7a8c;
}
.form-wrapper .nsf-actions__hint:empty { display: none; }

/* The warning under the buttons -- "After final submit you can not update the
   form" -- is gone at the client's request. The red note above them says the
   same thing once, which is how many times it needed saying. */

@media (max-width: 575px) {
  .form-wrapper .nsf-actions__row > * {
    display: block;
    width: 100%;
    margin: 0 0 10px;
  }
  .form-wrapper .nsf-btn-final { width: 100%; }
}


/* A photo on record whose file is gone. Said plainly, because the alternative
   -- a broken frame under "Your Uploaded Profile Pic" -- tells an applicant
   their photo is fine when it is not. */
.form-wrapper .nsf-photo-missing {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--nsf-accent);
}


/* ---- Why a submission was refused -------------------------------------------
   Loud on purpose. The failure it reports used to be invisible: the applicant
   pressed Submit, the page came back looking untouched, and nothing said the
   application had not gone anywhere. */
.form-wrapper .nsf-errors {
  max-width: 760px;
  margin: 0 auto 20px;
  padding: 16px 18px;
  text-align: left;
  color: #7a1414;
  background: #fdeceb;
  border: 1px solid #f0b6b2;
  border-radius: var(--nsf-radius);
}
.form-wrapper .nsf-errors__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.form-wrapper .nsf-errors ul { margin: 0; padding-left: 20px; }
.form-wrapper .nsf-errors li {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  list-style: disc;
}
.form-wrapper .nsf-errors li:last-child { margin-bottom: 0; }

.form-wrapper .nsf-declaration__error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--nsf-accent);
}


/* ---- An address in parts -----------------------------------------------------
   Permanent above, Current below, each across the full width. Side by side they
   read as two halves of one address, and an applicant fills the left column
   thinking the right continues it.

   No panel behind them. These boxes are white and so was the panel, so the
   fields disappeared into it -- every other field on this form sits straight on
   the page, and so do these now. The heading does the separating, the same way
   "Personal Information" and "Family Background" do. */
.form-wrapper .nsf-address { margin: 0 0 4px; }

/* No padding of its own. The column this sits in already carries the grid's
   15px, and adding it again pushed the heading 15px to the right of the very
   fields it names. */
.form-wrapper .nsf-address__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 6px 0 16px;
}

/* Between the section headings and the field labels: plainly a heading at a
   glance, without competing with "Personal Information" above it. At 15px it
   carried the same weight as a field label and disappeared among them. */
.form-wrapper .nsf-address__title {
  position: relative;
  margin: 0;
  padding-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--nsf-navy);
  text-transform: none;
  letter-spacing: -0.01em;
}
.form-wrapper .nsf-address__title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--nsf-accent);
}

/* Its own line, under the heading rather than beside it. Sitting alongside, it
   read as part of the heading -- and the tick that decides what goes on the
   application belongs where the applicant is already looking when they start
   filling this address in. */
.form-wrapper .nsf-address__same {
  flex: 0 0 100%;
  /* Clear of the heading's underline, which otherwise sat directly on top of
     the tick and read as though it belonged to it. */
  margin: 12px 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nsf-navy);
  cursor: pointer;
}
.form-wrapper .nsf-address__same input { margin-right: 6px; vertical-align: -1px; }

/* Copied, not hidden. An address the applicant cannot see is one they never
   check, and this one goes on their application -- so it is shown and made
   read-only rather than taken off the page. */
.form-wrapper .nsf-address .form-control.is-mirrored {
  background: #eef2f7 !important;
  color: #5b6879;
  cursor: default;
}

/* The belt-and-braces clears that stood here -- so a validation message on one
   part could not make the next one catch on its bottom edge -- are covered by
   the flex rows above, which do the same thing for every row on the form. The
   two-row split in the partial stays: it is what puts Line 1 and Line 2 on one
   line and the three below them on the next, rather than leaving five fields to
   wrap wherever they happen to fit. */

/* .nsf-address__note laid out the "Please include detailed address..." line
   across the address heading row. That line is gone at the client's request, and
   nothing else carries the class, so the rule goes with it rather than being
   left behind for the next person to work out what it was for. */