/* ─────────────────────────────────────────────────────────────────────────────
   Applying — «انضمّي إلى فريق التدريس» and «سجّل أطفالك» (pages/apply.mjs): a
   glass form in steps under the page's hero — the steps' marks, one step at a
   time, back and next — then the confirmation in the form's place. Phones
   first in what they need; motion only for those who have not asked for less.
   ───────────────────────────────────────────────────────────────────────────── */

@layer page {

  .apply { padding-top: 0; }
  .apply__wrap { display: grid; justify-items: center; }
  .apply-hero__art { rotate: -6deg; }
  .apply-hero__art--plane { rotate: 4deg; }

  .apply-form,
  .apply-done {
    position: relative;
    width: min(100%, 48rem);
    border-radius: var(--r-xl);
  }
  .apply-form {
    display: grid;
    gap: var(--s-6);
    padding: clamp(1.25rem, 0.8rem + 2.4vw, 2.75rem);
  }
  /* Brought into view under the floating header as a step changes. */
  .apply-form, .apply-done { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
  .apply-form[hidden] { display: none; }

  /* ── The steps' marks ───────────────────────────────────────────────────── */
  .apply-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
  .apply-steps__item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    text-align: center;
  }
  /* The line to the next step, drawn from this step's dot. */
  .apply-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.0625rem;
    inset-inline-start: calc(50% + 1.5rem);
    width: calc(100% - 3rem + var(--s-2));
    height: 2px;
    border-radius: 2px;
    background: var(--line-strong);
  }
  .apply-steps__item.is-done:not(:last-child)::after { background: var(--pink); }
  .apply-steps__dot {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    background: var(--white);
    color: var(--ink-2);
    font-weight: 600;
  }
  .apply-steps__dot svg { display: none; width: 1.05rem; height: 1.05rem; }
  .apply-steps__item[aria-current="step"] { color: var(--ink); font-weight: 600; }
  .apply-steps__item[aria-current="step"] .apply-steps__dot {
    border-color: var(--pink-strong);
    background: var(--pink-strong);
    color: var(--white);
    box-shadow: 0 0 0 5px rgb(244 63 117 / 0.14);
  }
  .apply-steps__item.is-done .apply-steps__dot { border-color: var(--pink); background: var(--pink-soft); color: var(--pink-strong); }
  .apply-steps__item.is-done .apply-steps__num { display: none; }
  .apply-steps__item.is-done .apply-steps__dot svg { display: block; }
  .apply-steps__label { line-height: 1.5; }

  /* ── A step ─────────────────────────────────────────────────────────────── */
  .apply-step { display: grid; gap: var(--s-5); }
  .apply-step[hidden] { display: none; }
  .apply-step__head { display: grid; gap: var(--s-1); }
  .apply-step__count { color: var(--pink-strong); font-size: var(--fs-caption); font-weight: 600; }
  .apply-step__title { font-size: var(--fs-h3); }
  .apply-step__title:focus { outline: none; }
  .apply-step__title:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: var(--r-xs); }
  .apply-step__lead { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; }
  .apply-step__fields { display: grid; gap: var(--s-5); }
  .apply-form .field__error:not([hidden]) { display: block; }
  .field__optional { color: var(--ink-2); font-weight: 400; }

  /* ── Subjects: chips added one by one ───────────────────────────────────── */
  .chip-input { display: grid; gap: var(--s-2); }
  .chip-input__row { display: flex; gap: var(--s-2); }
  .chip-input__field { flex: 1; min-width: 0; }
  .chip-input__add { flex: none; min-height: 3.25rem; }
  .chip-input__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .chip-input__list:empty { display: none; }
  .chip-input__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    max-width: 100%;
    min-height: 2.25rem;
    padding-inline: var(--s-4) var(--s-1);
    border-radius: var(--r-pill);
    background: var(--pink-soft);
    border: 1px solid var(--pink-border);
    color: var(--pink-strong);
    font-size: var(--fs-small);
    font-weight: 500;
  }
  .chip-input__chip > span { overflow-wrap: anywhere; }
  .chip-input__remove {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: var(--pink-strong);
  }
  .chip-input__remove:hover { background: var(--white); }
  .chip-input__remove:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
  .chip-input__remove svg { width: 0.9rem; height: 0.9rem; }

  /* ── The CV: a place to drop or choose it, then its card ────────────────── */
  .file-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-md);
    border: 1.5px dashed var(--pink-border);
    background: var(--pink-mist);
    cursor: pointer;
  }
  .file-drop[hidden] { display: none; }
  .file-drop:hover,
  .file-drop.is-over { border-color: var(--pink); background: var(--pink-soft); }
  .file-drop:focus-within { outline: 2px solid var(--pink); outline-offset: 3px; }
  .file-drop[aria-invalid="true"] { border-color: #D92D20; }
  /* The input covers its place: a click, or a file dropped anywhere on it, reaches it — and so does the keyboard. */
  .file-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .file-drop__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--pink-strong);
    box-shadow: var(--shadow-sm);
  }
  .file-drop__icon svg { width: 1.3rem; height: 1.3rem; }
  .file-drop__text { display: grid; gap: var(--s-1); }
  .file-drop__text small { color: var(--ink-2); font-size: var(--fs-caption); }

  .file-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
  .file-card[hidden] { display: none; }
  .file-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-xs); background: var(--pink-soft); color: var(--pink-strong); }
  .file-card__icon svg { width: 1.25rem; height: 1.25rem; }
  .file-card__text { display: grid; gap: var(--s-1); min-width: 0; }
  .file-card__name { overflow: hidden; font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; }
  .file-card__state { color: var(--ink-2); font-size: var(--fs-caption); }
  .file-card.is-done .file-card__state { color: var(--ok-ink); }
  .file-card.is-failed .file-card__state { color: var(--danger-ink); }
  .file-card__bar { display: block; height: 4px; border-radius: 4px; background: var(--bg-deep); overflow: hidden; }
  .file-card__bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pink); }
  .file-card.is-done .file-card__bar > span { background: var(--ok); }
  .file-card__remove { width: 2.5rem; height: 2.5rem; }

  /* ── Children ───────────────────────────────────────────────────────────── */
  .children { display: grid; gap: var(--s-4); }
  .children__list { display: grid; gap: var(--s-4); }
  .child {
    display: grid;
    gap: var(--s-4);
    padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
  .child__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .child__title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; }
  .child__title:focus { outline: none; }
  .child__title:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: var(--r-xs); }
  .child__remove { color: var(--danger-ink); }
  .child__remove[hidden] { display: none; }
  .child__fields { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: var(--s-4); }
  .child__courses { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
  .child__courses legend { margin-bottom: var(--s-3); padding: 0; }
  .children__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

  .course-picks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .course-pick { position: relative; display: inline-flex; cursor: pointer; }
  .course-pick input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .course-pick__box { display: none; }
  .course-pick__title {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--white);
    color: var(--ink);
    font-size: var(--fs-small);
  }
  .course-pick:hover .course-pick__title { border-color: var(--pink-border); }
  .course-pick input:focus-visible ~ .course-pick__title { outline: 2px solid var(--pink); outline-offset: 2px; }
  .course-pick input:checked ~ .course-pick__title { border-color: var(--pink-strong); background: var(--pink-strong); color: var(--white); }
  .course-pick input:checked ~ .course-pick__box {
    position: absolute;
    z-index: 2;
    inset-block-start: -0.35rem;
    inset-inline-end: -0.35rem;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--pink-strong);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
  }
  .course-pick__box svg { width: 0.8rem; height: 0.8rem; }
  .child__courses[aria-invalid="true"] .course-pick__title { border-color: #D92D20; }

  /* ── Review ─────────────────────────────────────────────────────────────── */
  .apply-review { display: grid; gap: var(--s-4); }
  .apply-review__group { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
  .apply-review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .apply-review__title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
  .apply-review__edit { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--pink-strong); font-size: var(--fs-small); font-weight: 500; }
  .apply-review__edit svg { width: 1rem; height: 1rem; }
  .apply-review__list { display: grid; gap: var(--s-3); }
  .apply-review__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); }
  .apply-review__row dt { color: var(--ink-2); font-size: var(--fs-small); }
  .apply-review__row dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
  .apply-review__children { display: grid; gap: var(--s-3); }
  .apply-review__children li { display: grid; gap: var(--s-1); padding-block: var(--s-2); }
  .apply-review__children li + li { border-top: 1px dashed var(--line); }
  .apply-review__children b { font-weight: 600; }
  .apply-review__children small { color: var(--ink-2); font-size: var(--fs-small); }

  /* ── The foot ───────────────────────────────────────────────────────────── */
  .apply-form__status:not([hidden]) {
    display: block;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    color: var(--danger-ink);
    font-size: var(--fs-small);
  }
  .apply-form__status.is-quiet { background: var(--pink-mist); border-color: var(--pink-border); color: var(--ink); }
  .apply-form__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .apply-form__back[hidden] { display: none; }
  .apply-form__next { margin-inline-start: auto; min-width: 11rem; }
  .apply-form__label { display: inline-flex; align-items: center; gap: var(--s-2); }
  .apply-form__label[hidden] { display: none; }
  .apply-form__note { display: flex; align-items: center; justify-content: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-caption); text-align: center; }
  .apply-form__note svg { flex: none; width: 1rem; height: 1rem; }
  .apply-form[data-busy] .apply-form__next { opacity: 0.7; pointer-events: none; }
  /* The field no person sees: out of sight and out of reach — not display:none, which a program filling fields passes over. */
  .apply-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ── The confirmation ───────────────────────────────────────────────────── */
  .apply-done {
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.75rem);
    text-align: center;
  }
  .apply-done[hidden] { display: none; }
  .apply-done:focus { outline: none; }
  .apply-done__art { position: absolute; top: -2.5rem; inset-inline-end: 1.5rem; width: 6.5rem; }
  .apply-done__badge {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    box-shadow: 0 0 0 8px rgb(21 128 61 / 0.06);
  }
  .apply-done__badge svg { width: 2.25rem; height: 2.25rem; }
  .apply-done__title { font-size: var(--fs-h2); line-height: var(--lh-tight); }
  .apply-done__text { max-width: 34rem; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.9; }

  /* ── Motion, for those who have not asked for less ──────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    .apply-step:not([hidden]) { animation: apply-step-in var(--dur-base) var(--ease-out); }
    .apply-done:not([hidden]) { animation: apply-step-in var(--dur-slow) var(--ease-out); }
    .apply-steps__dot,
    .apply-steps__item::after,
    .course-pick__title,
    .file-drop { transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, box-shadow var(--dur-base) var(--ease-out); }
    .file-card__bar > span { transition: width var(--dur-base) var(--ease-out); }
  }
  @keyframes apply-step-in {
    from { opacity: 0; translate: 0 0.75rem; }
    to   { opacity: 1; translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-hero__art.apply-hero__art { animation: none; }
  }

  /* ── Phones ─────────────────────────────────────────────────────────────── */
  @media (max-width: 640px) {
    .apply-steps__label { font-size: 0.75rem; }
    .child__fields { grid-template-columns: minmax(0, 1fr); }
    .apply-review__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
    .apply-form__nav { flex-wrap: wrap-reverse; }
    .apply-form__nav .btn { flex: 1 1 auto; }
    .apply-form__next { min-width: 0; }
    .chip-input__row { flex-wrap: wrap; }
    .chip-input__add { flex: 1 1 100%; min-height: 2.75rem; }
    .file-drop { padding: var(--s-5) var(--s-4); }
    .apply-done__art { width: 4.5rem; top: -1.75rem; }
  }
}