/* Durusi tutor application, 12 to 13 Sep 2026. Loaded AFTER site-2026.css and
   contact-2026.css, only by careers/apply.html and ar/careers/apply.html. Tokens from
   site-2026.css; the inputs are the contact form's (.ct-input, .ct-select). Logical
   properties throughout so the Arabic page mirrors for free. Hairlines, no shadows, no
   rounded corners. His rulings of 13 Sep: one white card, every control the same height,
   two even columns, no pill walls, errors in red not magenta. */

.ap{max-width:840px;margin-inline:auto;--ap-red:#C62828}
/* the hidden attribute must beat every display rule below (a hidden .ap-field once stayed visible) */
.ap [hidden]{display:none !important}
.ap-form{display:grid;gap:28px;align-content:start;background:var(--white);border:1px solid var(--hair);padding:clamp(20px,4vw,44px)}
@media (max-width:640px){.ap-form{padding:18px 14px}}

/* ---------- intro and progress ---------- */
.ap-intro{display:grid;gap:8px}
.ap-lead{font-weight:300;font-size:17px;line-height:1.45;color:var(--forest);max-width:60ch;margin:0}
.ap-note{font-weight:300;font-size:14px;line-height:1.5;color:var(--muted-light);margin:0}
.ap-note a,.ap-fine a,.ap-hint a{color:var(--electric-ink);text-decoration:none;font-style:italic}
.ap-prog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-block-start:1px solid var(--hair)}
.ap-prog li{padding-block:14px;padding-inline-end:12px;border-block-start:2px solid transparent;margin-block-start:-1px;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--muted-light)}
html[lang=ar] .ap-prog li{letter-spacing:0;font-size:13px}
.ap-prog li .n{display:block;color:var(--electric-ink);margin-block-end:4px}
.ap-prog li.is-now{color:var(--forest);border-block-start-color:var(--forest)}
.ap-prog li.is-done{color:var(--forest)}
.ap-prog li.is-done .n::after{content:" \2713"}

/* ---------- a step, its blocks, its grid ---------- */
.ap-step{display:grid;gap:26px;border:0;padding:0;margin:0;min-width:0}
.ap-step[hidden]{display:none}
.ap-h{font-weight:700;font-size:24px;line-height:1.15;text-transform:uppercase;margin:0}
.ap-h:focus{outline:none}
html[lang=ar] .ap-h{line-height:1.4}
.ap-block{display:grid;gap:18px;padding-block-start:22px;border-block-start:1px solid var(--hair)}
.ap-block > h4{margin:0;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--muted-light)}
html[lang=ar] .ap-block > h4{letter-spacing:0;font-size:13px}
.ap-grid{display:grid;gap:18px 24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.ap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ap-grid .span{grid-column:1 / -1}
.ap-field{display:grid;gap:8px;align-content:start;min-width:0}
.ap-field > label,.ap-field > .lbl{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--muted-light)}
html[lang=ar] .ap-field > label,html[lang=ar] .ap-field > .lbl{letter-spacing:0;font-size:13px}
.ap-opt{margin-inline-start:8px;font-size:12px;font-weight:300;letter-spacing:0;text-transform:none}
.ap-hint{font-size:13px;font-weight:300;color:var(--muted-light);line-height:1.4;margin:0}
.ap-hint--end{font-style:italic;text-align:end}
.ap-err{font-size:14px;font-weight:500;color:var(--ap-red);margin:0}
.ap-err:empty{display:none}
/* every control the same height, whatever the browser draws */
.ap .ct-input{min-height:52px;height:52px;padding-block:0;line-height:1.3}
.ap textarea.ct-input{height:auto}
.ap .ct-input:user-invalid{border-color:var(--ap-red)}
.ap .ct-input[readonly]{background:var(--frost);color:var(--muted-light)}
.ap-dob{display:grid;grid-template-columns:.9fr 1.3fr 1fr;gap:8px}
[dir=rtl] .ap-dob{direction:rtl}

/* ---------- check and radio rows (no pill walls) ---------- */
.ap-checks{display:grid;gap:8px 20px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}
@media (min-width:700px){.ap-checks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ap-checks.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ap-checks.cols-1{grid-template-columns:minmax(0,1fr)}
/* every choice group reads the same way: one row, wrapping when it must */
.ap-checks--row{display:flex;flex-wrap:wrap;gap:6px 28px}
.ap-check.is-other > span{font-style:italic}
.ap-check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;min-height:36px;font-size:15px;font-weight:400;color:var(--forest);cursor:pointer}
.ap-check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:1px solid rgba(16,39,24,.55);background:var(--white);cursor:pointer;display:grid;place-items:center}
.ap-check input[type=radio]{border-radius:50%}
.ap-check input:checked{border-color:var(--forest);background:var(--forest)}
.ap-check input[type=checkbox]:checked::after{content:"";width:10px;height:6px;border:2px solid var(--white);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.ap-check input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--white)}
.ap-check input:focus-visible{outline:2px solid var(--electric-ink);outline-offset:2px}
.ap-check input:disabled{opacity:.4;cursor:default}
/* short toggles for days and hours only */
.ap-toggles{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ap-toggles label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:40px;padding-inline:12px;border:1px solid rgba(16,39,24,.5);background:var(--white);font-size:14px;color:var(--forest);cursor:pointer;user-select:none}
.ap-toggles input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ap-toggles label:has(input:checked){background:var(--forest);color:var(--white);border-color:var(--forest)}
.ap-toggles label:has(input:focus-visible){outline:2px solid var(--electric-ink);outline-offset:2px}

/* ---------- uploads: one white row per document; the file lands inside the same row ---------- */
.ap-up{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:14px 16px;border:1px solid var(--hair);background:var(--white)}
.ap-up-text{display:grid;gap:4px;min-width:0}
.ap-up-title{font-weight:600;font-size:15px;line-height:1.3;color:var(--forest)}
.ap-up-hint{font-size:13px;font-weight:300;color:var(--muted-light);line-height:1.4}
.ap-up-file{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;padding-block-start:6px;border-block-start:1px solid var(--hair);margin-block-start:2px}
.ap-up-file .ap-thumb{width:44px;height:44px;object-fit:cover;border:1px solid var(--hair)}
.ap-up .ap-btn{grid-column:2;grid-row:1 / span 2;align-self:center}
.ap-up input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media (max-width:480px){.ap-up{grid-template-columns:minmax(0,1fr)}.ap-up .ap-btn{grid-column:1;grid-row:auto;justify-self:start}}
.ap-file-name{font-weight:600;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.ap-file-state{font-size:13px;font-weight:300;color:var(--muted-light)}
.ap-file-state.is-bad{color:var(--ap-red);font-weight:500}
.ap-up-file .x{appearance:none;border:0;background:none;padding:0;color:var(--muted-light);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.ap-spin{display:inline-block;width:12px;height:12px;margin-inline-end:6px;vertical-align:-1px;border:2px solid var(--hair);border-top-color:var(--forest);border-radius:50%;animation:ap-spin .8s linear infinite}
@keyframes ap-spin{to{transform:rotate(360deg)}}
.ap-bar{flex-basis:100%;height:2px;background:var(--hair);overflow:hidden}
.ap-bar i{display:block;height:100%;width:0;background:var(--electric-ink);transition:width .2s}
/* the required mark and the fields the passport filled */
.req{color:var(--ap-red);font-weight:500;margin-inline-start:2px;letter-spacing:0}
.ap .ct-input.is-locked{background:var(--frost);color:var(--forest);pointer-events:none}
.ap select.is-locked{background-image:none}
.ap-block--first{padding-block-start:0;border-block-start:0}
/* the review block */
.ap-sum{display:grid;border:1px solid var(--hair);background:var(--white)}
.ap-sum-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;padding:10px 14px;font-size:14px;border-block-end:1px solid var(--hair)}
.ap-sum-row:last-child{border-block-end:0}
.ap-sum-row span{color:var(--muted-light)}
.ap-sum-row b{font-weight:500;color:var(--forest)}

/* ---------- a document and its proposed rows ---------- */
.ap-docs{display:grid;gap:16px}
.ap-doc{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--hair);background:var(--white)}
.ap-doc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:start}
.ap-doc-name{font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.ap-doc-state{font-size:13px;font-weight:300;color:var(--muted-light);grid-column:1}
.ap-doc-state.is-bad{color:var(--ap-red);font-weight:500}
.ap-doc .x{grid-column:2;grid-row:1 / span 3;appearance:none;border:0;background:none;padding:6px;margin:-6px;color:var(--muted-light);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.ap-doc-board{display:grid;gap:8px;padding:12px 14px;background:var(--frost);border:1px solid var(--hair)}
.ap-doc-board > span{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--muted-light)}
html[lang=ar] .ap-doc-board > span{letter-spacing:0}
@media (min-width:700px){.ap-doc-board{grid-template-columns:auto minmax(0,320px);align-items:center;gap:6px 18px}.ap-doc-board .ap-hint{grid-column:1 / -1}}
.ap-doc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}

/* the rows: a table on a desk, a small card on a phone */
.ap-rows{display:grid;gap:8px}
.ap-rowhead{display:none}
.ap-row{display:grid;gap:10px;padding:12px;border:1px solid var(--hair);background:var(--white)}
.ap-row-grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ap-row-grid .f{display:grid;gap:4px;min-width:0}
.ap-row-grid .f.wide{grid-column:1 / -1}
.ap-row-grid .f > span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;color:var(--muted-light)}
html[lang=ar] .ap-row-grid .f > span{letter-spacing:0;font-size:12px}
.ap-row .ct-input{min-height:44px;height:44px;padding-inline:10px;font-size:15px}
.ap-row .ct-select{padding-inline-end:30px;background-position:right 10px center}
[dir=rtl] .ap-row .ct-select{padding-inline-end:10px;padding-inline-start:30px;background-position:left 10px center}
.ap-row .ct-input.is-missing{border-color:var(--ap-red)}
/* a value the reader filled: shown, never edited */
.ap-ro{display:flex;align-items:center;background:var(--frost);border-color:var(--hair);color:var(--forest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-row.is-locked{background:var(--white)}
.ap-row .f.is-missing > span{color:var(--ap-red)}
.ap-row-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ap-row-foot .ap-tag{flex:1 1 auto}
.ap-tag{font-size:12px;font-weight:400;color:var(--electric-ink)}
.ap-tag.is-warn{color:var(--ap-red);font-weight:500}
.ap-confirm{display:inline-grid;grid-template-columns:20px auto;gap:8px;align-items:center;font-size:14px;font-weight:500;color:var(--forest);cursor:pointer;white-space:nowrap}
.ap-confirm input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:1px solid rgba(16,39,24,.55);background:var(--white);display:grid;place-items:center;cursor:pointer}
.ap-confirm input:checked{background:var(--forest);border-color:var(--forest)}
.ap-confirm input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--white);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.ap-confirm input:disabled{opacity:.35;cursor:default}
.ap-confirm input:focus-visible{outline:2px solid var(--electric-ink);outline-offset:2px}
.ap-row .del{appearance:none;border:0;background:none;padding:4px;color:var(--muted-light);font-size:20px;line-height:1;cursor:pointer}
.ap-row .del:hover{color:var(--ap-red)}
@media (min-width:760px){
  .ap-rowhead{display:grid;grid-template-columns:.95fr 1.5fr 1.25fr 60px 86px 24px;gap:6px;padding:0 12px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;color:var(--muted-light)}
  html[lang=ar] .ap-rowhead{letter-spacing:0;font-size:12px}
  .ap-row{grid-template-columns:.95fr 1.5fr 1.25fr 60px 86px 24px;gap:6px;align-items:center;padding:8px 12px}
  .ap-row .ct-input{font-size:14px;padding-inline:8px}
  .ap-row .ct-select{padding-inline-end:24px;background-position:right 7px center}
  [dir=rtl] .ap-row .ct-select{padding-inline-end:8px;padding-inline-start:24px;background-position:left 7px center}
  .ap-row-grid{display:contents}
  .ap-row-grid .f > span{display:none}
  .ap-row-grid .f.wide{grid-column:auto}
  .ap-row-foot{display:contents}
  .ap-row-foot .ap-tag{display:none}
  .ap-row.has-note{grid-template-rows:auto auto}
  .ap-row .ap-rownote{grid-column:1 / -1;font-size:12px;margin-top:-2px}
}
.ap-rownote{font-size:12px;color:var(--electric-ink)}
/* the certificate behind a row typed by hand */
.ap-proof{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;padding-block-start:6px;border-block-start:1px solid var(--hair)}
.ap-proof .ap-btn{min-height:36px;padding-block:6px;padding-inline:12px;font-size:12px}
.ap-proof input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ap-proof .x{appearance:none;border:0;background:none;padding:0;color:var(--muted-light);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.ap-proof.is-missing{color:var(--ap-red)}
@media (min-width:760px){.ap-row.has-proof{grid-template-rows:auto auto}}
.ap-rownote.is-warn{color:var(--ap-red);font-weight:500}
@media (max-width:759px){.ap-rownote{display:none}}

/* ---------- small buttons ---------- */
.ap-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-block:9px;padding-inline:16px;
  border:1px solid var(--forest);background:var(--white);color:var(--forest);font:inherit;font-size:13px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
html[lang=ar] .ap-btn{letter-spacing:0;font-size:14px}
.ap-btn:hover{background:var(--forest);color:var(--white)}
.ap-btn[disabled]{opacity:.45;cursor:default;background:var(--white);color:var(--forest)}
.ap-btn.ap-btn--ghost{border-color:rgba(16,39,24,.5);text-transform:none;letter-spacing:0;font-weight:400;font-size:15px}
.ap-btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}

/* ---------- step navigation ---------- */
.ap-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding-block-start:24px;border-block-start:1px solid var(--hair)}
.ap-nav .btn-line{margin:0}
.ap-nav .back{appearance:none;border:0;background:none;padding:10px 0;color:var(--muted-light);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){.ap-nav{flex-direction:column-reverse;align-items:stretch}.ap-nav .btn-line{width:100%;justify-content:center}.ap-nav .back{text-align:center}}

/* ---------- subjects to teach: one folding row per level ---------- */
.ap-acc{border:1px solid var(--hair);background:var(--white)}
.ap-acc + .ap-acc{border-block-start:0}
.ap-acc summary{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;gap:12px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:15px;color:var(--forest)}
.ap-acc summary::-webkit-details-marker{display:none}
.ap-acc summary .cnt{font-size:13px;font-weight:400;color:var(--muted-light)}
.ap-acc summary .cnt.on{color:var(--electric-ink);font-weight:500}
.ap-acc summary .chev{width:20px;height:20px;fill:none;stroke:var(--forest);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ap-acc[open] summary .chev{transform:rotate(180deg)}
.ap-acc summary:focus-visible{outline:2px solid var(--electric-ink);outline-offset:-2px}
.ap-acc-body{display:grid;gap:14px;padding:4px 16px 18px;border-block-start:1px solid var(--hair)}
.ap-boards{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:center;padding:10px 12px;background:var(--frost);border:1px solid var(--hair);font-size:13px}
.ap-boards > span{color:var(--muted-light)}
.ap-boards .ap-toggles label{min-height:32px;min-width:0;font-size:13px;padding-inline:10px}
.ap-boards.is-warn{border-color:var(--ap-red)}

/* ---------- video rules, consent ---------- */
.ap-rules{margin:0;padding-inline-start:18px;font-weight:300;font-size:15px;line-height:1.5;color:var(--muted-light)}
.ap-consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-weight:300;font-size:15px;line-height:1.5;color:var(--forest);cursor:pointer}
.ap-consent input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:2px 0 0;border:1px solid rgba(16,39,24,.55);background:var(--white);display:grid;place-items:center;cursor:pointer}
.ap-consent input:checked{background:var(--forest);border-color:var(--forest)}
.ap-consent input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--white);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.ap-consent input:focus-visible{outline:2px solid var(--electric-ink);outline-offset:2px}
.ap-fine{font-weight:300;font-size:14px;line-height:1.5;color:var(--muted-light);margin:0}

@media (prefers-reduced-motion:reduce){.ap-bar i,.ap-btn,.ap-acc summary .chev{transition:none}.ap-spin{animation-duration:2s}}

/* ---------- the in-page video recorder ---------- */
.ap-up-btns{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:8px;align-self:center}
@media (max-width:480px){.ap-up-btns{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap}}
.ap-rec{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--hair);background:var(--white)}
.ap-rec video,.ap-rec img{display:block;width:100%;max-width:300px;aspect-ratio:9/16;background:#06171B;object-fit:cover;margin-inline:auto}
.ap-rec[data-mode=photo] video,.ap-rec[data-mode=photo] img{aspect-ratio:3/4}
/* what the applicant sees is a mirror, live and on review; the saved file is the true image */
.ap-rec .is-mirror{transform:scaleX(-1)}
.ap-rec video::-webkit-media-controls{display:none !important}
.ap-rec-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.ap-rec-timer{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted-light)}
.ap-rec-timer.is-on{color:var(--ap-red);font-weight:500}
.ap-rec-btns{display:flex;flex-wrap:wrap;gap:8px}

/* A document the reader kept but could not fully confirm: a quiet note, not an error. */
.ap .ap-file-state.is-note,.ap .ap-doc-state.is-note{color:#5B6770;font-style:italic}