/* ═══════════════════════════════════════════════════════════════════════════
   Admission wizard — form controls
   ───────────────────────────────────────────────────────────────────────────
   WHY THIS IS A SEPARATE FILE, LOADED LAST

   admission.css is the FIRST stylesheet on the wizard; bootstrap.min.css,
   select2.css, bootstrap-switch and bootstrap-fileinput all load after it.
   Their own `.form-control` / `.select2-container .select2-choice` rules carry
   the same specificity as anything we could write there, so source order hands
   every tie to the plugin — that is exactly what pushed the nav-button labels
   off-centre and what leaves Select2 showing its 2012 grey gradient.

   This file is linked after every plugin and before the deployment stylesheet
   (custom-*.css), so it wins on source order without a single !important, and
   a deployment can still override it.

   Colours come from the stepper accent (--adm-step / --adm-step-ink, declared
   in admission.css :root) so the fields, the stepper and the nav buttons can
   never drift apart. Neutrals are literals — they are not brand colours, and
   the public wizard never loads new-custom-css.css, so --pp-* is unavailable
   here (see CLAUDE.md §9).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --adm-field-h:       34px;   /* Bootstrap's own control height, kept */
  --adm-field-radius:  8px;
  --adm-field-border:  #d6dae0;
  --adm-field-bg:      #f7f8fa;   /* resting fill; clears to white on focus */
  --adm-field-ink:     #262626;
  --adm-field-muted:   #8a94a3;
  --adm-label-ink:     #5a6472;
  --adm-field-error:   #a94442;   /* Bootstrap's own .has-error red, kept so
                                     the ~14 has-error toggles in admission.js
                                     stay visually consistent */ }

/* ── Labels ──────────────────────────────────────────────────────────────
   Colour only. Size, weight and casing stay exactly where Bootstrap puts them
   — the 12px uppercase treatment was reverted on request. Nothing here is
   case- or size-sensitive any more, so the :has() split that kept the 44
   `<label><input type="checkbox"> …</label>` option labels out of the
   uppercasing is no longer needed. */
.form-group > .control-label,
.form-group > label {
  margin-bottom: 6px;
  color: var(--adm-label-ink, #5a6472); }

/* A label carrying .text-danger is a warning, not a field name. The rule above
   is (0,2,0) and Bootstrap's own .text-danger is (0,1,0), so specificity — not
   source order — would grey it out. The "Photo is required" notice in
   forms/photo.blade.php is the live case, and its inner <small class="font-red">
   cannot rescue it: .font-red is Metronic, which this page never loads. */
.form-group > .control-label.text-danger,
.form-group > label.text-danger {
  color: var(--adm-field-error, #a94442); }

/* Inline hints inside a label read as prose, not as a field name. */
.form-group > label .u-text-muted,
.form-group > .control-label .u-text-muted {
  margin-left: 6px;
  font-weight: 400; }

.form-group > label .text-danger,
.form-group > .control-label .text-danger {
  margin-left: 2px; }

/* Bootstrap recolours the label under .has-error; restate it, or the rules
   above — being later in the cascade — would win and the error would lose half
   its signal. */
.has-error > .control-label,
.has-error > label {
  color: var(--adm-field-error, #a94442); }

/* ── Fields ──────────────────────────────────────────────────────────────
   One geometry for every control: text, email, number, date, select, textarea.
   The box is Bootstrap's own — 34px tall, 6px 12px, 14px type. Only the fill,
   border, radius and focus treatment are ours. */
.form-control {
  height: var(--adm-field-h, 34px);
  padding: 6px 12px;
  border: 1px solid var(--adm-field-border, #d6dae0);
  border-radius: var(--adm-field-radius, 8px);
  background-color: var(--adm-field-bg, #f7f8fa);
  box-shadow: none;
  color: var(--adm-field-ink, #262626);
  font-size: 14px;
  line-height: 20px;
  transition: background-color .12s cubic-bezier(0.2, 0, 0, 1),
              border-color .12s cubic-bezier(0.2, 0, 0, 1),
              box-shadow .12s cubic-bezier(0.2, 0, 0, 1); }

.form-control::placeholder { color: var(--adm-field-muted, #8a94a3); }
.form-control::-webkit-input-placeholder { color: var(--adm-field-muted, #8a94a3); }

/* The fill clearing to white is the focus cue that survives at a glance; the
   ring is the one that survives a colour-blind check. Keep both. */
.form-control:focus {
  border-color: var(--adm-step, #026523);
  background-color: #fff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(2, 101, 35, .15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-step, #026523) 15%, transparent); }

.form-control[disabled],
fieldset[disabled] .form-control {
  background-color: #eef0f3;
  border-color: #e3e6ea;
  color: var(--adm-field-muted, #8a94a3);
  cursor: not-allowed;
  opacity: 1; }

/* readonly is not disabled. The value is still selectable, and on the
   sign-in-prefilled email, the computed age (eteeap/form.blade.php) and the
   sibling ages these fields are normal populated output — a "blocked" cursor
   misreads them. Hence the fill without the cursor, and hence standing aside
   where index.blade.php has already made this exact call: its
   .email-verified-locked is (0,1,0) and would lose to our (0,2,0). */
.form-control[readonly]:not(.email-verified-locked) {
  background-color: #eef0f3;
  border-color: #e3e6ea;
  opacity: 1; }

/* Bootstrap ships `input[type="date"].form-control { line-height: 34px }`
   inside a -webkit- media query to work around old iOS; that overshoots the
   content box and pushes the value off-centre. */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  line-height: 20px; }

input[type="date"].form-control::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer; }
  input[type="date"].form-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1; }

textarea.form-control {
  height: auto;
  line-height: 1.5;
  resize: vertical; }

/* ── Selects ─────────────────────────────────────────────────────────────
   The native OS arrow is the last thing on the page still drawn by the
   platform rather than by us, so it is replaced with a chevron matching the
   muted ink. appearance:none also removes Windows' inset gradient, which is
   what made the disabled selects look broken next to the flat fields. */
select.form-control {
  height: var(--adm-field-h, 34px);
  padding-right: 32px;
  line-height: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a94a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px; }

  /* Firefox otherwise keeps a dotted ring on the option text itself. */
  select.form-control:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--adm-field-ink, #262626); }

  select.form-control[disabled] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b6bdc7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); }

  /* Legacy Edge/IE: hide the native arrow appearance:none misses. */
  select.form-control::-ms-expand { display: none; }

/* ── Size modifiers ──────────────────────────────────────────────────────
   .input-sm / .input-lg are (0,1,0) — the same weight as the .form-control
   rule above — and this file loads after bootstrap.min.css, so without these
   restatements the modifier silently loses and every compact control snaps to
   the default 34px. The live case is the repeating sibling rows
   (sub/sibs.blade.php, pulled into the Family tab) and the medical review
   select, which are dense tables by design. Radii follow this file's scale
   rather than Bootstrap's 3px/6px. */
.form-control.input-sm {
  height: 30px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px; }

  select.form-control.input-sm {
    height: 30px;
    padding: 5px 26px 5px 10px;
    background-position: right 10px center; }

  textarea.form-control.input-sm {
    height: auto; }

.form-control.input-lg {
  height: 46px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 24px; }

  select.form-control.input-lg {
    height: 46px;
    padding: 10px 38px 10px 16px;
    background-position: right 16px center; }

  textarea.form-control.input-lg {
    height: auto; }

/* ── Validation ──────────────────────────────────────────────────────────
   admission.js toggles .has-error on the .form-group in ~14 places. */
.has-error .form-control {
  border-color: var(--adm-field-error, #a94442);
  background-color: #fdf7f7;
  box-shadow: none; }
  .has-error .form-control:focus {
    border-color: var(--adm-field-error, #a94442);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(169, 68, 66, .15); }

/* ── Input groups ────────────────────────────────────────────────────────
   Two on the wizard: the age addon beside Date of Birth, and the
   emergency-contact dropdown button. Both have to match the 34px field or the
   row looks broken. Bootstrap's own `.input-group .form-control:first-child`
   rules outrank our radius, so the joined corners stay square by themselves. */
.input-group-addon {
  padding: 6px 12px;
  border: 1px solid var(--adm-field-border, #d6dae0);
  border-radius: var(--adm-field-radius, 8px);
  background-color: #eef0f3;
  color: var(--adm-label-ink, #5a6472);
  font-size: 14px;
  font-weight: 600; }

.input-group-btn > .btn {
  height: var(--adm-field-h, 34px);
  padding: 6px 12px;
  border: 1px solid var(--adm-field-border, #d6dae0);
  border-radius: var(--adm-field-radius, 8px);
  background-color: #fff;
  color: var(--adm-field-ink, #262626);
  font-size: 14px;
  line-height: 20px; }
  .input-group-btn > .btn:hover,
  .input-group-btn > .btn:focus {
    border-color: var(--adm-step, #026523);
    background-color: var(--adm-field-bg, #f7f8fa);
    color: var(--adm-step-ink, #127729); }

/* ── Checkboxes ──────────────────────────────────────────────────────────
   accent-color rather than a hand-built pseudo-element box: these inputs sit
   inside label text across six tabs with no consistent wrapper, and a custom
   box would need markup changes on every one. accent-color gets the brand tick
   with zero markup risk and degrades to the native box.

   .make-switch is the single bootstrap-switch toggle on the wizard — a widget,
   not a checkbox; sizing it breaks the switch's rendering. */
input[type="checkbox"]:not(.make-switch),
input[type="radio"]:not(.make-switch) {
  accent-color: var(--adm-step, #026523);
  cursor: pointer; }

  input[type="checkbox"]:not(.make-switch):focus-visible,
  input[type="radio"]:not(.make-switch):focus-visible {
    outline: 2px solid var(--adm-step, #026523);
    outline-offset: 2px; }

  input[type="checkbox"][disabled],
  input[type="radio"][disabled] {
    cursor: not-allowed;
    opacity: .55; }

/* A label wrapping a checkbox is a click target, so give it room and a
   pointer. Weight stays normal — these are options, not field names. */
.form-group > label:has(> input[type="checkbox"]),
.form-group > label:has(> input[type="radio"]) {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer; }

/* ── File inputs ─────────────────────────────────────────────────────────
   The bare native input (indigency upload). ::file-selector-button is the only
   part of a file input that can be styled without replacing the control. */
input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 6px 0;
  color: var(--adm-label-ink, #5a6472); }

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--adm-step, #026523);
  border-radius: var(--adm-field-radius, 8px);
  background: #fff;
  color: var(--adm-step-ink, #127729);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s cubic-bezier(0.2, 0, 0, 1); }
  input[type="file"]::file-selector-button:hover {
    background: #f6faf7;
    background: color-mix(in srgb, var(--adm-step, #026523) 8%, #fff); }

/* ── Icon-only file picker (Document Requirements) ───────────────────────
   The Upload column of #tbldocs is one of five in a table that has to fit a
   phone, and the control above sizes itself: "Browse..." plus whatever
   filename the applicant picked. It was arriving clipped mid-word. So the
   input is clipped out of the flow inside its own <label> and the label
   becomes the control -- a 34px square carrying the paperclip, matching the
   field height used everywhere else on the wizard.

   .input-group.adm-upload-group is (0,2,0) on purpose: bootstrap.min.css is
   linked AFTER this file, so a bare .adm-upload-group would lose the
   display:table it has to override.

   The input is clipped, not display:none -- it stays focusable, so the picker
   is still reachable by keyboard, and :focus-within below is what draws the
   ring the input can no longer draw for itself. The <span class="sr-only">
   inside the label is its accessible name. */
.input-group.adm-upload-group {
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 6px; }

  .adm-upload-group > .input-group-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    font-size: inherit; }

    /* The upload/remove pair only appears while a file is staged, but it appears
       right beside the picker: bootstrap's btn-sm computes to 30px, a visible
       step against a 28px neighbour. */
    .adm-upload-group .btn-sm {
      height: 28px;
      padding: 0 8px;
      line-height: 26px; }

.adm-file-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 28px rather than the 34px field height: this is a table cell, not a form
     row. At field height the picker was the tallest thing in the row and set
     the row height by itself, which read as oversized next to 14px text in a
     five-column table. Same hit area as the education/sibling row actions. */
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid var(--adm-step, #026523);
  border-radius: var(--adm-field-radius, 8px);
  background: #fff;
  color: #127729;
  color: var(--adm-step-ink, #127729);
  cursor: pointer;
  transition: background-color .12s cubic-bezier(0.2, 0, 0, 1); }

  /* The page sets a global `.fa { margin-right: 8px }` for labelled buttons;
     an icon-only control is the one place that gutter is wrong. */
  .adm-file-btn > .fa {
    margin: 0;
    font-size: 13px; }

  .adm-file-btn:hover {
    background: #f6faf7;
    background: color-mix(in srgb, var(--adm-step, #026523) 8%, #fff); }

  .adm-file-btn:focus-within {
    outline: 2px solid var(--adm-step, #026523);
    outline-offset: 2px; }

  /* Clipped rather than hidden: see above. The width/height/padding resets
     also have to beat the `display:block; width:100%` the bare-input rule
     above sets, which is why they are spelled out. */
  .adm-file-btn > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; }

/* The rules above are written for a bare file input, but bootstrap-fileinput
   hides a real one inside .btn-file at 100%x100% and opacity 0, sized with
   `font-size: 23px` so the native button covers the visible "Browse Image"
   span. Our (0,1,1) selector ties that plugin rule and lands later, so the
   overlay has to be handed back: this is (0,1,2) and wins. */
.btn-file > input[type="file"] {
  display: block;
  padding: 0;
  font-size: 23px; }

  .btn-file > input[type="file"]::file-selector-button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit; }

/* bootstrap-fileinput widget (applicant photo). Its buttons are written with
   Metronic classes — `.btn.default`, `.btn.red` — and Metronic's stylesheet is
   NOT loaded on the public wizard, so "Browse Image" and "Remove" have been
   rendering as unstyled boxes. Style them from the widget's own classes rather
   than relying on the theme that never arrives. */
.fileinput .thumbnail {
  padding: 6px;
  border: 1px solid var(--adm-field-border, #d6dae0);
  border-radius: var(--adm-field-radius, 8px);
  background-color: var(--adm-field-bg, #f7f8fa); }

.fileinput .btn,
.fileinput .btn-file {
  padding: 6px 12px;
  border: 1px solid var(--adm-step, #026523);
  border-radius: var(--adm-field-radius, 8px);
  background: #fff;
  color: var(--adm-step-ink, #127729);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: background-color .12s cubic-bezier(0.2, 0, 0, 1),
              border-color .12s cubic-bezier(0.2, 0, 0, 1),
              color .12s cubic-bezier(0.2, 0, 0, 1); }
  .fileinput .btn:hover,
  .fileinput .btn:focus,
  .fileinput .btn-file:hover {
    background: #f6faf7;
    background: color-mix(in srgb, var(--adm-step, #026523) 8%, #fff);
    color: var(--adm-step-ink, #127729);
    text-decoration: none; }

  /* `.fileinput-new .btn.btn-default` is a span nested INSIDE .btn-file — one
     visual button built from two elements. Strip the inner one. */
  .fileinput .btn-file .btn,
  .fileinput .btn-file .btn-default {
    padding: 0;
    border: 0;
    background: none;
    color: inherit; }

  /* Remove is destructive, so it reads as a red ghost rather than a green one. */
  .fileinput .btn.red,
  .fileinput a.red {
    border-color: var(--adm-field-error, #a94442);
    color: var(--adm-field-error, #a94442); }
    .fileinput .btn.red:hover,
    .fileinput a.red:hover {
      background: #fdf2f2;
      color: var(--adm-field-error, #a94442); }

/* ═══ Select2 3.5.1 ═══════════════════════════════════════════════════════
   Eleven single-select widgets, Grade / Level among them. Select2 v3 draws its
   own box with a grey vertical gradient, a 4px radius and a sprite arrow — the
   loudest mismatch on the page once the native fields flatten.

   v3 copies the source element's classes onto its container, so the container
   itself picks up .form-control and would draw a SECOND field around the
   widget's own box. Neutralise the container, then style .select2-choice as
   the real field. */
.select2-container.form-control {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none; }

.select2-container {
  width: 100% !important;   /* v3 writes an inline px width on init */
  vertical-align: middle; }

.select2-container .select2-choice {
  height: var(--adm-field-h, 34px);
  padding: 0 32px 0 12px;
  border: 1px solid var(--adm-field-border, #d6dae0);
  border-radius: var(--adm-field-radius, 8px);
  background-color: var(--adm-field-bg, #f7f8fa);
  background-image: none;   /* kills the v3 gradient */
  filter: none;
  box-shadow: none;
  color: var(--adm-field-ink, #262626);
  font-size: 14px;
  line-height: 32px;        /* the 34px box less its two 1px borders */
  transition: background-color .12s cubic-bezier(0.2, 0, 0, 1),
              border-color .12s cubic-bezier(0.2, 0, 0, 1),
              box-shadow .12s cubic-bezier(0.2, 0, 0, 1); }

  .select2-container .select2-choice > .select2-chosen {
    margin-right: 0; }

  .select2-container .select2-choice > .select2-chosen.select2-default {
    color: var(--adm-field-muted, #8a94a3); }

/* Focus and open share the field's focus treatment, so the widget never looks
   like a different control mid-interaction. */
.select2-container-active .select2-choice,
.select2-dropdown-open .select2-choice {
  border-color: var(--adm-step, #026523);
  background-color: #fff;
  background-image: none;
  box-shadow: 0 0 0 3px rgba(2, 101, 35, .15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-step, #026523) 15%, transparent); }

/* v3 draws the arrow as a bordered sub-box with a sprite inside. Flatten the
   box, drop the sprite, draw the chevron the native selects use. */
.select2-container .select2-choice .select2-arrow {
  width: 32px;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  filter: none; }

  .select2-container .select2-choice .select2-arrow b {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a94a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 10px 7px !important; }

  .select2-dropdown-open .select2-choice .select2-arrow b {
    transform: rotate(180deg); }

.select2-container-disabled .select2-choice {
  border-color: #e3e6ea;
  background-color: #eef0f3;
  color: var(--adm-field-muted, #8a94a3);
  cursor: not-allowed; }

/* The clear "x". select2.css ends with a "Retina-ize icons" media query that
   re-asserts select2x2.png with !important on this element, on the arrow's b
   and on the dropdown's search input -- and it matches from 1.5dppr, which is
   any Windows machine at 150% display scaling, i.e. most of them. So on those
   screens the flat chevron above was quietly swapped back for a 12x12 crop of a
   sprite scaled to 60x40: both icons surfaced as small marks pinned to the
   top-right of the field instead of a centred x and chevron. Drawing the glyph
   here removes the density split entirely -- an SVG is already sharp at any
   ratio -- and !important is what it takes to outrank that block (equal
   specificity, but this file loads after select2.css, so it wins).
   top/margin-top rather than a fixed offset: the box is --adm-field-h, not
   necessarily 34px. */
.select2-container .select2-choice abbr {
  top: 50%;
  right: 26px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%238a94a3' stroke-width='1.6' stroke-linecap='round' d='M1.5 1.5 8.5 8.5M8.5 1.5 1.5 8.5'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 10px 10px !important; }

  /* select2.css slides the sprite to its hover half from (0,3,1), out of reach
     of the rule above -- left alone the icon simply vanishes on hover. */
  .select2-container .select2-choice abbr:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23262626' stroke-width='1.6' stroke-linecap='round' d='M1.5 1.5 8.5 8.5M8.5 1.5 1.5 8.5'/%3E%3C/svg%3E") !important;
    background-position: center center !important; }

/* has-error has to reach the widget too — admission.js puts the class on the
   .form-group, and #yearLevel-div is one of the divs it flags. */
.has-error .select2-container .select2-choice {
  border-color: var(--adm-field-error, #a94442);
  background-color: #fdf7f7; }

/* Dropdown panel. v3 anchors it to the field and squares off the joined edge;
   at an 8px radius that seam has to be redrawn or the panel looks detached. */
.select2-drop {
  border: 1px solid var(--adm-step, #026523);
  border-top: 0;
  border-radius: 0 0 var(--adm-field-radius, 8px) var(--adm-field-radius, 8px);
  background: #fff;
  box-shadow: 0 8px 10px -4px rgba(0, 0, 0, .05), 0 20px 32px -8px rgba(0, 0, 0, .1); }

  .select2-drop.select2-drop-above {
    border-top: 1px solid var(--adm-step, #026523);
    border-bottom: 0;
    border-radius: var(--adm-field-radius, 8px) var(--adm-field-radius, 8px) 0 0;
    box-shadow: 0 -8px 10px -4px rgba(0, 0, 0, .05), 0 -20px 32px -8px rgba(0, 0, 0, .1); }

  /* select2.css re-declares the top border of an open upward panel from
     `.select2-drop.select2-drop-above.select2-drop-active` (0,3,0), which
     outranks the rule immediately above — so the panel would draw a blue top
     edge against three green ones. */
  .select2-drop.select2-drop-above.select2-drop-active {
    border-top: 1px solid var(--adm-step, #026523); }

.select2-dropdown-open .select2-choice {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

/* When the panel opens upward, select2.css restyles the choice box from
   `.select2-container.select2-drop-above .select2-choice` and
   `.select2-dropdown-open.select2-drop-above .select2-choice` — both (0,3,0),
   out of reach of the (0,2,0) base and focus rules above. Left alone, the box
   snaps back to a blue border, a transparent top edge, a grey gradient and a
   4px radius while every field around it is flat green at 8px. Fields low in a
   tab (#Ethnicity, #stud-brgy, #PlaceOfBirth) open upward routinely, and on a
   phone almost every field does. */
.select2-container.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choice {
  border: 1px solid var(--adm-step, #026523);
  background-color: #fff;
  background-image: none;
  filter: none;
  border-radius: 0 0 var(--adm-field-radius, 8px) var(--adm-field-radius, 8px);
  box-shadow: 0 0 0 3px rgba(2, 101, 35, .15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-step, #026523) 15%, transparent); }

.select2-search {
  padding: 8px 8px 4px; }

  /* min-height, not height: select2.css carries `height: auto !important` on
     this input, so a height declaration here is dead on arrival. The right
     gutter is not for the magnifier — that sprite is stripped by
     `background-image: none` below — but for the .select2-active spinner,
     which select2.css pins to the right edge during an AJAX search. */
  .select2-search input {
    min-height: 34px;
    padding: 6px 26px 6px 12px;
    border: 1px solid var(--adm-field-border, #d6dae0);
    border-radius: 6px;
    background-color: #fff;
    background-image: none !important;
    font-size: 14px;
    line-height: 20px; }

    /* ...but that gutter is still the spinner's, and the same !important would
       take it with it. */
    .select2-search input.select2-active {
      background-image: url("../../global/plugins/select2/select2-spinner.gif") !important;
      background-position: 100% !important;
      background-size: auto !important; }
    .select2-search input:focus {
      border-color: var(--adm-step, #026523);
      outline: 0; }

.select2-results {
  margin: 4px 0;
  padding: 0; }

  .select2-results .select2-result-label {
    padding: 7px 12px;
    font-size: 14px;
    line-height: 20px; }

  .select2-results .select2-highlighted {
    background: #026523;
    background: var(--adm-step, #026523);
    color: #fff; }

  .select2-results .select2-no-results,
  .select2-results .select2-searching,
  .select2-results .select2-selection-limit {
    background: transparent;
    color: var(--adm-field-muted, #8a94a3);
    font-size: 13px; }

/* No small-screen font bump. Raising fields to 16px below 767px would stop
   iOS Safari zooming the viewport on focus, but that is a size change, and
   the wizard now keeps one type scale on every viewport. */