/* css/application.css: the application (php/application/, js/application.js). Shared theme, 23 Oct 2026.
   24 Oct 2026 (Anthony): the application is the master wizard (php/wizard/wizard.php); its card, rail, step heading,
   fields, errors, Back / Continue and messages are css/globals.css "WIZARD" (rule C2). This file keeps ONLY the layout
   the wizard does not have: the parts of a student's step, the date lists, the file picker, the rules' notices inside
   a step and the Confirm summary. Variables from css/globals.css only; no colours of its own. */

/* A student's step: its parts one under the other (age check, contact information, essay or video), each with a
   small heading (.syn-wiz-sub); the parent / guardian part inside contact information. */
.syn-wiz[data-flow="application"] .app-card,
.syn-wiz[data-flow="application"] .app-part { display: grid; gap: 12px; min-width: 0; }
.syn-wiz[data-flow="application"] .app-card { gap: 22px; }
.syn-wiz[data-flow="application"] .app-part > .syn-wiz-sub:first-child { margin-top: 0; }

/* Date of birth: three lists (day, month, year) on one line */
.syn-wiz[data-flow="application"] .app-date { display: flex; gap: 8px; min-width: 0; }
.syn-wiz[data-flow="application"] .app-date select { flex: 1 1 0; min-width: 0; }
.syn-wiz[data-flow="application"] .app-date .app-date-month { flex-grow: 1.7; }   /* month names are the longest */

/* File picker: the browser's own button can't be translated, so it is replaced (as the contact form's). The real file
   input covers the button and the file name (transparent): the click lands on it and opens the picker in every browser. */
.syn-wiz[data-flow="application"] .app-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.syn-wiz[data-flow="application"] .app-file-pick { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.syn-wiz[data-flow="application"] .app-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; font-size: 0; margin: 0; padding: 0; }
.syn-wiz[data-flow="application"] .app-file-button {
    padding: 6px 14px; border: 1px solid var(--color-primary); border-radius: 4px;
    color: var(--color-primary); background: var(--color-white); font-family: var(--font-button); font-weight: 700;
}
.syn-wiz[data-flow="application"] .app-file-pick:hover .app-file-button { color: var(--color-white); background: var(--color-primary); }
.syn-wiz[data-flow="application"] .app-file-input:focus-visible ~ .app-file-button { outline: 2px solid var(--color-highlight); outline-offset: 2px; }
.syn-wiz[data-flow="application"] .app-file-name { overflow-wrap: anywhere; color: var(--color-text-secondary); }
.syn-wiz[data-flow="application"] .app-file-clear {
    font: inherit; cursor: pointer; background: none; border: 0; padding: 4px 0;
    color: var(--color-primary); text-decoration: underline;
}

/* The rules' notices (AP4 age exception, AP12 country) under their field: the site's standard message box
   (.message-display, css/globals.css); an 'info' notice has no colour class, so it is shown here. */
.syn-wiz[data-flow="application"] .app-notice.message-display { display: block; margin-top: 2px; grid-column: 1 / -1; }   /* a row of its own under its field's row */

/* On a phone the school's country and city each take the whole row (a half-width list clips "Choose a country"). */
@media (max-width: 600px) {
    .syn-wiz[data-flow="application"] [data-field="institution.country"],
    .syn-wiz[data-flow="application"] [data-field="institution.city"] { grid-column: 1 / -1; }
}

/* Confirm: who is being applied for */
.syn-wiz[data-flow="application"] .app-summary-list { margin: 0; padding-left: 1.4em; }
.syn-wiz[data-flow="application"] .app-summary .syn-wiz-text { margin: 0; }

/* Check your email (AP19): the site's one code step (Syndesi_Acc_Step_Code::box(), css/accounts.css) fills the step. */
.syn-wiz[data-flow="application"] .app-code .subscription-container { width: 100%; max-width: none; margin: 0; }

/* Done, AP18 already applied: the three contact icons right under the message */
.syn-wiz[data-flow="application"] .app-existing-box { display: flex; justify-content: center; }
/* On Done the message (references, or AP18's reason) comes first and the step's content (the icons) under it. */
.syn-wiz[data-flow="application"][data-current="done"] .syn-wiz-messages { order: 1; }
.syn-wiz[data-flow="application"][data-current="done"] .syn-wiz-body { order: 2; }
.syn-wiz[data-flow="application"][data-current="done"] .syn-wiz-foot,
.syn-wiz[data-flow="application"][data-current="done"] .syn-wiz-note { order: 3; }   /* AP18 with other students: their button last */
.syn-wiz[data-flow="application"][data-current="done"] .syn-wiz-foot:has(> .syn-wiz-next[hidden]):has(> .syn-wiz-back[hidden]),
.syn-wiz[data-flow="application"] .app-done:empty { display: none; }   /* nothing to go back to or on with */

/* Done after a sent application (Anthony, 24 Oct 2026): each student's reference with "Withdraw this application"
   (a quiet link-like button), then "Add a student" (outlined pill, the main button stays "Start a new application"). */
.syn-wiz[data-flow="application"] .app-done { display: grid; gap: 14px; justify-items: start; }
.syn-wiz[data-flow="application"] .app-onfile { display: grid; gap: 10px; margin-bottom: 18px; }
.syn-wiz[data-flow="application"] .app-onfile[hidden] { display: none; }
.syn-wiz[data-flow="application"] .app-onfile .syn-wiz-sub { margin: 0; }
.syn-wiz[data-flow="application"] .app-done-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.syn-wiz[data-flow="application"] .app-done-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--color-border-light); border-radius: 8px; background: var(--color-surface-soft); }
.syn-wiz[data-flow="application"] .app-done-ref { font-weight: 700; color: var(--color-text-dark); overflow-wrap: anywhere; }
.syn-wiz[data-flow="application"] .app-remove-student { grid-column: 1 / -1; justify-self: start; margin-top: -4px; }
.syn-wiz[data-flow="application"] .app-withdraw, .syn-wiz[data-flow="application"] .app-remove-student { font: inherit; font-size: .92em; background: none; border: 0; padding: 0; color: var(--color-link); text-decoration: underline; cursor: pointer; }
.syn-wiz[data-flow="application"] .app-withdraw:hover, .syn-wiz[data-flow="application"] .app-withdraw:focus,
.syn-wiz[data-flow="application"] .app-remove-student:hover, .syn-wiz[data-flow="application"] .app-remove-student:focus { background: none; color: var(--color-primary-dark); }
.syn-wiz[data-flow="application"] .app-add-student {
    font-family: var(--font-button); font-weight: 700; font-size: calc(15px * var(--lang-font-scale));
    padding: 9px 22px; border-radius: 9999px; border: 2px solid var(--color-primary); background: var(--color-white); color: var(--color-primary); cursor: pointer;
}
.syn-wiz[data-flow="application"] .app-add-student:hover, .syn-wiz[data-flow="application"] .app-add-student:focus { background: var(--color-primary); color: var(--color-white); }


/* Who is applying: option buttons (Anthony, 24 Oct 2026), one row each, the whole row clickable. */
.app-choices { display: flex; flex-direction: column; gap: .5em; }
.app-choice { display: flex; align-items: center; gap: .6em; padding: .65em .9em; border: 1px solid var(--color-border-input, #ccc); border-radius: 6px; background: var(--color-white, #fff); cursor: pointer; color: var(--color-text-dark, #333); }
.app-choice:hover { border-color: var(--color-primary, #528377); }
.app-choice input[type="radio"] { margin: 0; width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.app-choice:has(input:checked) { border-color: var(--color-primary, #528377); background: var(--color-secondary-light, #E8ECE7); }
.app-choice:has(input:focus-visible) { outline: 2px solid var(--color-primary, #528377); outline-offset: 2px; }