/* ══════════════════════════════════════════════════════════════════════
   AI ROBOTICS ACADEMY — the inner marketing pages
   Loads after ui.css, scoped to `body.ui2` for the same reason it is.

   Covers what every page that is not the homepage needs: the head each one
   opens with, the form system, the three account pages built on it, and
   404. The homepage has home.css, the course detail page has course.css,
   and the dashboards have dash.css.

   NOT loaded by a dashboard, deliberately. dash.css owns .form-card and
   .form-group with different numbers — a table-dense screen and a single
   sign-in box want different padding — and two files setting the same
   component from two directions is how a design system starts to drift.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1 · PAGE HEAD
   The old one was an ink block with a dot pattern, sized to sit under a
   bar that was pinned to the top of the window. The bar floats now, so
   this is lit the way the hero is instead: the page background, two soft
   brand washes, and dark text on it.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .page-head {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  /* The floating bar overlaps the top of it, exactly as it does the hero. */
  margin-top: -68px;
  padding: clamp(116px, 12vw, 152px) 0 clamp(32px, 4.5vw, 52px);
}
/* The hero lights itself with two .blob ELEMENTS. These pages have no such
   markup, and adding a pair of empty divs to five files to carry a colour
   is markup doing a stylesheet's job — so the same two washes are painted
   here instead. */
body.ui2 .page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Both washes are centred ABOVE the top edge so they fade downward and
     have finished before the block ends. Anchored below it instead, the
     head's own bottom edge cut the sand one mid-fade — and since the
     section underneath is the same colour, that cut read as a band across
     the page rather than as light. */
  background:
    radial-gradient(58% 92% at 88% -26%, rgba(74, 155, 232, .26), transparent 70%),
    radial-gradient(42% 74% at -4% -22%, rgba(242, 196, 155, .22), transparent 72%);
  pointer-events: none;
}
html[data-theme="dark"] body.ui2 .page-head::before {
  background:
    radial-gradient(58% 92% at 88% -26%, rgba(74, 155, 232, .18), transparent 70%),
    radial-gradient(42% 74% at -4% -22%, rgba(242, 196, 155, .09), transparent 72%);
}
body.ui2 .page-head > * { position: relative; }
body.ui2 .page-head h1 {
  margin: 14px 0 0;
  color: var(--text);
  font-size: clamp(29px, 4.2vw, 48px);
  font-weight: 700;
  line-height: 1.22;
}
body.ui2 .page-head p {
  margin: 14px 0 0;
  max-width: 640px;
  color: var(--text-muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.85;
}

/* ══════════════════════════════════════════════════════════════════════
   2 · FORMS
   One box shape for every field, matching the pills and tiles around it.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .form-group { margin-bottom: 18px; }
body.ui2 .form-group label {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}
/* `input:not([type])` carries its weight here too: an <input> with no type
   attribute is a text input but does not match input[type="text"]. */
body.ui2 .form-group input:not([type]),
body.ui2 .form-group input[type="text"],
body.ui2 .form-group input[type="email"],
body.ui2 .form-group input[type="password"],
body.ui2 .form-group input[type="tel"],
body.ui2 .form-group input[type="number"],
body.ui2 .form-group input[type="date"],
body.ui2 .form-group select,
body.ui2 .form-group textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
body.ui2 .form-group textarea { min-height: 120px; resize: vertical; }
body.ui2 .form-group input:focus,
body.ui2 .form-group select:focus,
body.ui2 .form-group textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
body.ui2 .form-group input::placeholder,
body.ui2 .form-group textarea::placeholder { color: var(--text-muted); opacity: .7; }
body.ui2 .form-hint { margin-top: 7px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
body.ui2 .muted { color: var(--text-muted); }

/* A select with its own arrow, so it is the same object as the inputs
   beside it rather than whatever the operating system draws. */
body.ui2 .form-group select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2344556E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
html[dir="rtl"] body.ui2 .form-group select { background-position: left 14px center; }
html[data-theme="dark"] body.ui2 .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239FB6CE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── The password box and its eye ──────────────────────────────────── */
body.ui2 .pw-field { position: relative; }
body.ui2 .pw-field input { padding-inline-end: 50px; }
body.ui2 .pw-toggle {
  position: absolute;
  inset-inline-end: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body.ui2 .pw-toggle:hover { background: var(--surface-soft); color: var(--brand); }
}
body.ui2 .pw-toggle svg { display: block; }

/* The live password checklist. Met rules go green; the rest stay muted
   rather than red — nothing has gone wrong yet, the box is being typed in. */
body.ui2 .pw-rules {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.ui2 .pw-rules li {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 160ms var(--ease-out);
}
body.ui2 .pw-rules li.ok { color: var(--ok, #167a3e); font-weight: 600; }
html[data-theme="dark"] body.ui2 .pw-rules li.ok { color: #6fd79b; }

/* ── The result banner above a form ────────────────────────────────── */
body.ui2 .message {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: none;
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.7;
}
body.ui2 .message.success { background: #e7f9ee; color: #11693a; }
body.ui2 .message.error { background: #fdecec; color: #a8281a; }
html[data-theme="dark"] body.ui2 .message.success { background: rgba(22, 122, 62, .22); color: #8fe3b4; }
html[data-theme="dark"] body.ui2 .message.error { background: rgba(192, 57, 43, .22); color: #f3a79b; }

/* ══════════════════════════════════════════════════════════════════════
   3 · THE ACCOUNT PAGES — login, sign-up, apply
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .auth-head { text-align: center; padding-bottom: clamp(44px, 6vw, 72px); }
body.ui2 .auth-head p { margin-inline: auto; }
body.ui2 .auth-wrap { padding-bottom: clamp(56px, 7vw, 92px); }

/* Pulled up into the head above it, so the card reads as the thing the
   page is FOR rather than as the first item of a list under a banner. */
body.ui2 .auth-wrap .form-card { margin-top: clamp(-64px, -5vw, -34px); }

body.ui2 .form-card {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 38px);
  border: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
body.ui2 .form-card .btn { width: 100%; }
body.ui2 .form-card form > .btn:last-child { margin-top: 4px; }

body.ui2 .auth-alt {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  text-align: center;
  font-size: 14.5px;
}
body.ui2 .auth-alt a {
  margin-inline-start: 6px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
html[data-theme="dark"] body.ui2 .auth-alt a { color: var(--sky); }
body.ui2 .auth-alt a:hover { text-decoration: underline; }

/* «أنا لست روبوت» (Auth.turnstile): Cloudflare draws the box inside; this
   only reserves its height so the button below does not jump when it loads. */
body.ui2 .turnstile-box { min-height: 65px; margin: 4px 0 16px; }

/* ── The email code step (Auth.emailCodeStep in js/auth.js) ─────────────
   Replaces the form in the same card once the code is on its way. The code
   box is one input, spaced like the six digits it takes, and always LTR:
   a code is a number, and "123456" must not read backwards in Arabic. */
body.ui2 .otp-step { text-align: center; }
body.ui2 .otp-icon {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
html[data-theme="dark"] body.ui2 .otp-icon { color: var(--sky); }
body.ui2 .otp-step h2 { margin: 0 0 8px; font-size: 21px; color: var(--text); }
body.ui2 .otp-lead { margin: 0 0 20px; color: var(--text-muted); font-size: 15px; line-height: 1.8; }
body.ui2 .otp-lead b { color: var(--text); font-weight: 600; word-break: break-all; }
body.ui2 .otp-step .form-group { margin-bottom: 14px; }
body.ui2 .otp-step .form-group input.otp-input {
  direction: ltr;
  text-align: center;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .5em;
  padding: 14px 10px 14px calc(10px + .5em);
}
body.ui2 .otp-step .form-group input.otp-input::placeholder { letter-spacing: .5em; opacity: .35; }
body.ui2 .otp-actions {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: 16px;
}
body.ui2 .otp-link {
  padding: 4px 2px; border: none; background: none;
  color: var(--brand); font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
html[data-theme="dark"] body.ui2 .otp-link { color: var(--sky); }
body.ui2 .otp-link:disabled { color: var(--text-muted); cursor: default; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  body.ui2 .otp-link:not(:disabled):hover { text-decoration: underline; }
}
body.ui2 .otp-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
body.ui2 .otp-step .form-hint { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   4 · 404
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .notfound {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 40px 20px;
  background: var(--bg);
  text-align: center;
}
body.ui2 .notfound::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 50% at 50% 0%, rgba(74, 155, 232, .24), transparent 70%),
    radial-gradient(40% 44% at 50% 100%, rgba(242, 196, 155, .22), transparent 70%);
  pointer-events: none;
}
body.ui2 .notfound > * { position: relative; }
body.ui2 .notfound .code {
  color: var(--brand);
  font-size: clamp(76px, 15vw, 164px);
  font-weight: 700;
  line-height: 1;
}
html[data-theme="dark"] body.ui2 .notfound .code { color: var(--sky); }
body.ui2 .notfound h1 {
  margin: 10px 0 10px;
  color: var(--text);
  font-size: clamp(21px, 3vw, 31px);
  font-weight: 700;
}
body.ui2 .notfound p {
  margin: 0 auto 28px;
  max-width: 460px;
  color: var(--text-muted);
  line-height: 1.85;
}
body.ui2 .notfound .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* The brand lockup above the 404 message. .brand is a navbar component, so
   it arrives sized for a bar; here it is a centred mark with the wordmark
   under the page's own colours. */
body.ui2 .nf-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  text-decoration: none;
}
/* The mark is sized by a rule scoped to .navbar, so outside the bar it
   renders at the file's own 512px. */
body.ui2 .nf-brand .brand-mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
}
body.ui2 .nf-brand .brand-name b { color: var(--text); }
body.ui2 .nf-brand .brand-name span { color: var(--royal-500); }
html[data-theme="dark"] body.ui2 .nf-brand .brand-name span { color: var(--sky-300); }

/* The track chips above the course list (courses.js). */
body.ui2 .course-tracks { margin-bottom: clamp(20px, 3vw, 30px); }
/* The full list keeps its empty columns (auto-FILL): filtered down to one
   Baccalaureate subject, a lone card would otherwise stretch across the page.
   The homepage's row of three stays auto-fit, as ui.css explains. */
body.ui2 .courses-grid-fill { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* ══════════════════════════════════════════════════════════════════════
   5 · RESPONSIVE — last in the file, as the project requires
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  body.ui2 .courses-grid-fill { grid-template-columns: 1fr; }
  body.ui2 .page-head { padding-bottom: clamp(26px, 6vw, 36px); }
  body.ui2 .auth-wrap .form-card { margin-top: -22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LINKS — /links.html: every way to reach the academy, one column. The
   page a social bio points to, so it is built for a phone first.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2.links-page {
  min-height: 100vh;
  background:
    radial-gradient(1200px 520px at 50% -180px, var(--surface-soft), transparent 70%),
    var(--bg);
}
body.ui2 .links-wrap { width: min(520px, 100% - 32px); margin: 0 auto; padding: 22px 0 40px; }
body.ui2 .links-tools { display: flex; justify-content: flex-end; gap: 8px; }
body.ui2 .links-head { text-align: center; margin: 6px 0 26px; }
body.ui2 .links-logo {
  display: inline-grid; place-items: center; width: 104px; height: 104px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm);
}
body.ui2 .links-logo img { width: 72px; height: 72px; object-fit: contain; }
body.ui2 .links-head h1 { margin: 14px 0 6px; font-size: 22px; letter-spacing: .04em; color: var(--text); }
body.ui2 .links-head p { margin: 0 auto; max-width: 400px; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; }
body.ui2 .links-group { display: grid; gap: 10px; margin-top: 22px; }
body.ui2 .links-group h2 { margin: 0 4px 2px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
body.ui2 .link-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
body.ui2 .link-btn:hover { box-shadow: var(--shadow-md, var(--shadow-sm)); background: var(--surface-soft); }
body.ui2 .link-btn:active { transform: scale(.98); }
body.ui2 .link-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body.ui2 .link-ic {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--surface-soft); color: var(--brand);
}
body.ui2 .link-txt { display: grid; gap: 2px; min-width: 0; }
body.ui2 .link-txt b { font-size: 15.5px; font-weight: 600; }
body.ui2 .link-txt small { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* WhatsApp keeps its own green (a platform mark, like the floating button);
   the sign-up row is the brand's one filled button. */
body.ui2 .link-wa .link-ic { background: #25D366; color: #fff; }
body.ui2 .link-primary { background: var(--brand); color: var(--text-on-brand); }
body.ui2 .link-primary:hover { background: var(--brand); filter: brightness(1.06); }
body.ui2 .link-primary .link-ic { background: rgba(255, 255, 255, .16); color: var(--text-on-brand); }
body.ui2 .link-primary .link-txt small { color: var(--text-on-brand); opacity: .82; }
body.ui2 .links-foot { margin-top: 30px; text-align: center; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
body.ui2 .links-foot p { margin: 0; }
@media (prefers-reduced-motion: reduce) { body.ui2 .link-btn { transition: none; } }

/* The links page: the slogan, the accreditation badge, Qodeva AI's mark. */
body.ui2 .links-head .links-slogan { margin: 2px auto 6px; font-weight: 700; color: var(--brand); }
body.ui2 .links-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
body.ui2 .links-badge:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the mark's navy needs white under it in both themes */
body.ui2 .link-qodeva .link-ic { background: var(--w); }
/* A branch's address wraps to two lines rather than being cut — it is the
   one line on this page someone actually needs whole. */
body.ui2 .link-branch .link-txt small { white-space: normal; overflow: visible; line-height: 1.6; }