/* The outdoor pages (Task site; the design the owner approved on the canvas on 29 Oct 2026, docs/design/site/), part b:
   their frame. The font (Noto Kufi Arabic, fonts.css) on the outdoor pages and the visitors' bar only; the visitors' bar
   (<nav-bar> signed out: navy, the robot, the links as pills, «أنشئ حساباً» in yellow, a panel under 1100px); the foot
   (<site-foot>, long and short); the robot (components/site-robot.js: its coats and faces); the robot that follows
   (<site-companion>); «الصفحة غير موجودة» and the policies' pages. Part c: the visitors' home «عدّ أيامك»
   (<visitor-home>). Part d: «الدورات» (<catalog-page>) and a course's page for those not in its run (<course-visit>).
   Part e: «اختبار القدرات», «من نحن» and «للمدرّبين». Part f: «المساعدة», the account pages (components/auth-layout.js,
   the robot answering the form), a certificate's page around its sheet, and the shared report. Colours and sizes from
   tokens.css only (its --site-… ones, dark mode's in its dark block); logical properties throughout. */

/* ── The frame: the font, the column, the foot at the screen's foot ─────────────────────────────────────────────── */

app-shell.is-site {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

app-shell.is-site > .app-main {
  flex: 1 0 auto;
  inline-size: 100%;
}

.app-main.site,
nav-bar.is-visitor,
site-foot {
  font-family: var(--font-site);
}

/* the words an outdoor page leaves to the app keep the app's old colour (Task indoor: tokens.css keeps the app's old
   values inside .site) */
.app-main.site {
  color: var(--color-text);
}

.site-wrap {
  inline-size: 100%;
  max-inline-size: var(--site-wrap);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* the pages drawn anew run the screen's width, as the visitors' home does */
.app-main:has(> not-found-page),
.app-main:has(> policy-page) {
  display: flex;
  flex-direction: column;
  max-inline-size: none;
  padding: 0;
}

/* The app's messages an outdoor page shows (a form's problem, what was done): as they were before Task indoor gave the
   pages inside the kit's notes (base.css): framed in their kind's line, the page's words, no mark at their start, in
   the app's old colours (tokens.css keeps them inside .site). */
.site .notice {
  border-color: var(--color-border);
  color: inherit;
}

.site .notice[data-kind="error"] {
  border-color: var(--color-danger);
}

.site .notice[data-kind="success"] {
  border-color: var(--color-success);
}

.site .notice:has(> .notice-icon) {
  display: block;
}

.site .notice-icon {
  display: none;
}

.site .notice a {
  color: var(--color-link);
  font-weight: inherit;
}

/* the main buttons: yellow, navy words */
.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-button-height);
  padding-inline: 1.75rem;
  border-radius: var(--site-radius-button);
  background: var(--site-yellow);
  color: var(--site-on-yellow);
  font-size: var(--site-size-button);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.site-button:hover {
  box-shadow: 0 0 0 3px var(--site-yellow-shadow);
  color: var(--site-on-yellow);
}

/* ── The visitors' bar: <nav-bar> signed out ────────────────────────────────────────────────────────────────────── */

nav-bar.is-visitor {
  position: static;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

/* it scrolls away with the page: nothing stops under it */
:root:has(nav-bar.is-visitor:not([hidden])) {
  --nb-height: 0px;
}

nav-bar.is-visitor :focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

nav-bar.is-visitor .nb-inner {
  gap: var(--space-5);
  min-block-size: 0;
  max-inline-size: var(--site-wrap);
  padding: var(--space-4) var(--site-gutter);
}

nav-bar.is-visitor .nb-brand {
  gap: var(--space-3);
  min-block-size: var(--site-bar-control);
  color: var(--site-navy-title);
  font-size: var(--site-size-brand);
  font-weight: 900;
}

.nb-site-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-bar);
  aspect-ratio: 69 / 49;
}

/* the robot smiles while its link is pointed at or has the keyboard */
nav-bar.is-visitor .nb-brand:hover .bot-f-idle,
nav-bar.is-visitor .nb-brand:focus-visible .bot-f-idle {
  opacity: 0;
}

nav-bar.is-visitor .nb-brand:hover .bot-f-happy,
nav-bar.is-visitor .nb-brand:focus-visible .bot-f-happy {
  opacity: 1;
}

nav-bar.is-visitor .nb-list {
  justify-content: flex-start;
  gap: 2px;
  font-size: var(--site-size-nav);
}

nav-bar.is-visitor .nb-link {
  padding: 0.4375rem 0.8125rem;
  border-radius: var(--site-radius-pill);
  color: var(--site-navy-text);
  font-weight: 600;
}

nav-bar.is-visitor .nb-text::after {
  content: none;
}

nav-bar.is-visitor .nb-link:hover {
  background: var(--site-navy-hover);
  color: var(--site-navy-title);
}

/* the page you are on: a white pill */
nav-bar.is-visitor .nb-link[aria-current="page"] {
  background: var(--site-navy-title);
  color: var(--site-navy);
  font-weight: 800;
}

nav-bar.is-visitor .nb-end {
  gap: var(--space-4);
  margin-inline-start: auto;
}

.nb-site-signin {
  color: var(--site-navy-title);
  font-size: var(--site-size-nav);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nb-site-signin:hover {
  text-decoration: underline;
}

.nb-site-signup {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--site-bar-control);
  padding: 0.6875rem 1.25rem;
  border-radius: var(--site-radius-signup);
  background: var(--site-yellow);
  color: var(--site-on-yellow);
  font-size: var(--site-size-nav);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.nb-site-signup:hover {
  box-shadow: 0 0 0 3px var(--site-yellow-shadow);
}

nav-bar.is-visitor .nb-toggle,
.nb-site-panel-signin {
  display: none;
}

/* just over 1100px, the six links closer together, so they keep one line beside the buttons (with a scrollbar too:
   part e's review) */
@media (min-width: 68.8125rem) and (max-width: 72.5rem) {
  nav-bar.is-visitor .nb-inner {
    gap: var(--space-4);
  }

  nav-bar.is-visitor .nb-link {
    padding-inline: 0.625rem;
  }
}

/* up to 1100px: «أنشئ حساباً» and ☰ at the end of the line; the links a panel under the bar, «تسجيل الدخول» last */
@media (max-width: 68.75rem) {
  nav-bar.is-visitor {
    position: relative;
  }

  nav-bar.is-visitor .nb-inner {
    gap: var(--space-3);
    min-block-size: 0;
    padding: var(--space-3) var(--site-gutter-phone);
  }

  nav-bar.is-visitor .nb-brand {
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: var(--space-2);
    min-block-size: var(--site-bar-control-phone);
    min-inline-size: 0;
    overflow: visible;
    font-size: var(--site-size-brand-phone);
  }

  .nb-site-robot {
    inline-size: var(--site-robot-bar-phone);
  }

  /* (nav-bar.js puts the parts in this order: the name, «أنشئ حساباً», ☰, then the panel) */
  nav-bar.is-visitor .nb-end {
    flex: none;
  }

  nav-bar.is-visitor .nb-toggle {
    display: inline-grid;
    flex: none;
    place-content: center;
    inline-size: var(--site-bar-control-phone);
    block-size: var(--site-bar-control-phone);
    padding: 0;
    border-radius: 0.75rem;
    background: var(--site-navy-hover);
    color: var(--site-navy-title);
  }

  /* (in a grid the bars' margins add up: half of nav-bar.css's each, so they stand 6px apart as there, and ✕ closes on
     the middle one) */
  nav-bar.is-visitor .nb-bar {
    inline-size: 1.375rem;
    margin-block: 3px;
  }

  .nb-site-signin {
    display: none;
  }

  .nb-site-signup {
    min-block-size: var(--site-bar-control-phone);
    padding: 0.5625rem 0.875rem;
    border-radius: 0.75rem;
    font-size: var(--site-size-small);
  }

  nav-bar.is-visitor .nb-menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 5;
    block-size: auto;
    overflow: visible;
    background: var(--site-navy-card);
    box-shadow: var(--site-navy-shadow);
    visibility: visible;
    transition: none;
  }

  nav-bar.is-visitor.is-open .nb-menu {
    display: block;
    block-size: auto;
  }

  /* each link a row the panel's width, as the phone boards have them */
  nav-bar.is-visitor .nb-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-3) var(--site-gutter-phone) 1.125rem;
  }

  nav-bar.is-visitor .nb-item {
    margin: 0;
  }

  nav-bar.is-visitor .nb-link {
    display: flex;
    padding: var(--space-3) 0.875rem;
    border-radius: var(--space-3);
    color: var(--site-navy-title);
  }

  .nb-site-panel-signin {
    display: block;
    margin-block-start: 0.375rem;
  }

  .nb-site-signin-panel {
    display: block;
    padding: var(--space-3) 0.875rem;
    border: 2px solid var(--site-teal);
    border-radius: var(--space-3);
    color: var(--site-navy-title);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
  }
}

/* a phone up to 384px wide: the bar's parts a little closer, so that at 360px (most phones) the name fits */
@media (max-width: 24rem) {
  nav-bar.is-visitor .nb-inner {
    gap: var(--space-2);
  }

  .nb-site-signup {
    padding-inline: var(--space-3);
  }
}

/* narrower than 360px: the robot alone stands for the app, as in the app's own bar; its name stays for screen readers */
@media (max-width: 22.4375rem) {
  nav-bar.is-visitor .nb-site-name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── The robot (components/site-robot.js): its coats, by the part it stands on, and its faces ──────────────────── */

.site-bot {
  --bot-line: var(--site-bot-line);
  --bot-eye: var(--site-bot-eye);
  --bot-cheek: var(--site-bot-cheek);
  --bot-helmet-1: var(--site-bot-helmet-1);
  --bot-helmet-2: var(--site-bot-helmet-2);
  --bot-ear-1: var(--site-bot-ear-1);
  --bot-ear-2: var(--site-bot-ear-2);
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

/* on a white or pale part: a navy helmet and a teal face (dark mode: a teal helmet and a navy face) */
.site-bot.coat-light {
  --bot-line: var(--site-bot-light-line);
  --bot-eye: var(--site-bot-light-eye);
  --bot-cheek: var(--site-bot-light-cheek);
  --bot-helmet-1: var(--site-bot-light-helmet-1);
  --bot-helmet-2: var(--site-bot-light-helmet-2);
  --bot-ear-1: var(--site-bot-light-ear-1);
  --bot-ear-2: var(--site-bot-light-ear-2);
}

/* on the yellow band: a teal helmet (dark mode: a yellow one) */
.site-bot.coat-yellow {
  --bot-line: var(--site-bot-yellow-line);
  --bot-eye: var(--site-bot-yellow-eye);
  --bot-cheek: var(--site-bot-yellow-cheek);
  --bot-helmet-1: var(--site-bot-yellow-helmet-1);
  --bot-helmet-2: var(--site-bot-yellow-helmet-2);
  --bot-ear-1: var(--site-bot-yellow-ear-1);
  --bot-ear-2: var(--site-bot-yellow-ear-2);
}

.site-bot .bot-blue {
  fill: var(--bot-line);
}

.site-bot .bot-blue-line {
  stroke: var(--bot-line);
}

.site-bot .bot-ink {
  fill: var(--bot-eye);
}

.site-bot .bot-ink-line {
  stroke: var(--bot-eye);
}

.site-bot .bot-cheek {
  fill: var(--bot-cheek);
}

.site-bot .bot-amber {
  fill: var(--site-bot-amber);
}

.site-bot .bot-amber-line {
  stroke: var(--site-bot-amber);
}

.site-bot .bot-star {
  fill: var(--site-bot-star);
  stroke: var(--site-bot-star);
}

.site-bot .bot-drop {
  fill: var(--site-bot-drop);
  stroke: var(--bot-line);
}

.site-bot .bot-h1 {
  stop-color: var(--bot-helmet-1);
}

.site-bot .bot-h2 {
  stop-color: var(--bot-helmet-2);
}

.site-bot .bot-e1 {
  stop-color: var(--bot-ear-1);
}

.site-bot .bot-e2 {
  stop-color: var(--bot-ear-2);
}

/* one face shows: the robot's class names it */
.site-bot .bot-f {
  opacity: 0;
  transition: opacity 0.2s;
}

.site-bot.face-idle .bot-f-idle,
.site-bot.face-happy .bot-f-happy,
.site-bot.face-curious .bot-f-curious,
.site-bot.face-think .bot-f-think,
.site-bot.face-race .bot-f-race,
.site-bot.face-star .bot-f-star,
.site-bot.face-wink .bot-f-wink,
.site-bot.face-look .bot-f-look,
.site-bot.face-shy .bot-f-shy,
.site-bot.face-oops .bot-f-oops,
.site-bot.face-lost .bot-f-lost {
  opacity: 1;
}

.site-bot .bot-gaze {
  transition: transform 0.2s ease-out;
}

.site-bot .blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: site-blink 5s infinite;
}

.site-bot.is-still .blink {
  animation: none;
}

.site-bot .twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: site-twinkle 3.2s ease-in-out infinite;
}

.site-bot .look-around {
  animation: site-look 2.6s ease-in-out infinite;
}

/* the robot that follows changes its coat slowly */
.site-bot.is-follow * {
  transition: fill 0.45s ease, stroke 0.45s ease, opacity 0.2s;
}

.site-bot.is-follow stop {
  transition: stop-color 0.45s ease;
}

@keyframes site-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0.1);
  }
}

@keyframes site-twinkle {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

@keyframes site-look {
  0%,
  100% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-2.6px, -0.8px);
  }

  45% {
    transform: translate(2.6px, -0.8px);
  }

  70% {
    transform: translate(1.4px, 1.2px);
  }
}

/* ── The robot that follows (<site-companion>) ─────────────────────────────────────────────────────────────────── */

.site-follow {
  position: fixed;
  inset-block-end: 1.375rem;
  inset-inline-end: 1.375rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: none;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-follow.is-on {
  opacity: 1;
  transform: none;
}

.site-follow-say {
  position: relative;
  max-inline-size: 16.25rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 1rem;
  background: var(--site-bubble);
  box-shadow: var(--site-bubble-shadow);
  color: var(--site-bubble-text);
  font-family: var(--font-site);
  font-size: var(--site-size-follow);
  font-weight: 800;
  line-height: 1.6;
}

/* its point, toward the robot */
.site-follow-say::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -9px;
  margin-block-start: -9px;
  border: 9px solid transparent;
  border-inline-end: 0;
  border-inline-start-color: var(--site-bubble);
}

.site-follow-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-follow);
  aspect-ratio: 69 / 49;
}

/* a short spin as it changes: two names for one turn, so each change starts it again */
.site-follow-robot.is-turning-a {
  animation: site-turn-a 0.55s ease;
}

.site-follow-robot.is-turning-b {
  animation: site-turn-b 0.55s ease;
}

@keyframes site-turn-a {
  0%,
  100% {
    transform: none;
  }

  35% {
    transform: scale(0.8) rotate(-10deg);
  }

  70% {
    transform: scale(1.08) rotate(4deg);
  }
}

@keyframes site-turn-b {
  0%,
  100% {
    transform: none;
  }

  35% {
    transform: scale(0.8) rotate(-10deg);
  }

  70% {
    transform: scale(1.08) rotate(4deg);
  }
}

/* ── The foot (<site-foot>) ───────────────────────────────────────────────────────────────────────────────────── */

site-foot {
  display: block;
  background: var(--site-navy);
  color: var(--site-navy-text);
}

site-foot[hidden] {
  display: none;
}

site-foot :focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

.site-foot {
  border-block-start: 1px solid var(--site-navy-line);
}

.site-foot.is-long {
  padding-block: 3.5rem 1.75rem;
}

.site-foot.is-short {
  padding-block: 1.25rem;
}

.site-foot a {
  color: var(--site-navy-text);
}

.site-foot.is-long a {
  text-decoration: none;
}

.site-foot a:hover {
  color: var(--site-navy-title);
  text-decoration: underline;
}

.site-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.site-foot-name {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--space-3);
  color: var(--site-navy-title);
  font-size: var(--site-size-foot-brand);
  font-weight: 900;
}

.site-foot-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-foot);
  aspect-ratio: 69 / 49;
}

.site-foot-line {
  max-inline-size: 22em;
  margin: 0;
  font-size: var(--site-size-foot);
  line-height: 1.9;
}

.site-foot-title {
  margin: 0 0 var(--space-3);
  color: var(--site-yellow);
  font-size: var(--site-size-foot-title);
  font-weight: 800;
}

.site-foot-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--site-size-foot);
}

.site-foot-networks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
}

.site-foot-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-block-start: 2.5rem;
  padding-block-start: 1.125rem;
  border-block-start: 1px solid var(--site-navy-line);
  font-size: var(--site-size-small);
}

.site-foot-copy {
  margin: 0;
}

.site-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 1.125rem;
  margin-inline-start: auto;
}

.site-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--site-size-small);
}

@media (max-width: 56.25rem) {
  .site-foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 37.5rem) {
  .site-foot.is-long {
    padding-block: var(--space-6) 1.75rem;
  }

  .site-foot-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .site-foot-links {
    margin-inline-start: 0;
  }
}

/* ── «الصفحة غير موجودة» (<not-found-page>) ───────────────────────────────────────────────────────────────────── */

not-found-page,
policy-page {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.lost-page {
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.lost {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  padding-block: var(--space-6) var(--space-8);
  /* (the lost robot leans past the page's edge by a hair at some widths: no sideways scroll for it) */
  overflow-x: clip;
}

.lost :focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 3px;
  border-radius: 0.625rem;
}

.lost-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28.75rem);
  align-items: center;
  gap: 4rem;
}

.lost h1 {
  margin: 0 0 0.625rem;
  color: var(--site-navy-title);
  font-size: var(--site-size-display);
  font-weight: 900;
  line-height: 1.25;
}

.lost-lead {
  margin: 0 0 1.75rem;
  color: var(--site-navy-text);
  font-size: var(--site-size-lead);
  line-height: 1.8;
}

/* the pages to try: a white card (dark in dark mode) on a teal shadow */
.lost-try {
  max-inline-size: 35rem;
  margin-block-start: 2.125rem;
  padding: 1.375rem var(--site-gutter) var(--space-3);
  border-radius: var(--site-radius-card);
  background: var(--site-band);
  box-shadow: 0 var(--site-card-shadow) 0 var(--site-teal-shadow);
  color: var(--site-ink);
}

.lost-try :focus-visible {
  outline-color: var(--site-focus-light);
}

.lost-try h2 {
  margin: 0 0 0.375rem;
  color: var(--site-ink);
  font-size: var(--site-size-card-title);
  font-weight: 900;
}

.lost-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-3);
  border-radius: 0.875rem;
  color: var(--site-ink);
  text-decoration: none;
}

.lost-link:hover,
.lost-link:focus-visible {
  background: var(--site-hover);
  color: var(--site-ink);
}

.lost-link-words {
  min-inline-size: 0;
}

.lost-link-name {
  display: block;
  font-size: var(--site-size-card-name);
  font-weight: 800;
}

.lost-link-line {
  display: block;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-card-line);
  line-height: 1.7;
}

.lost-link-mark {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: auto;
  color: var(--site-teal-text);
}

.lost-report {
  margin: 1.625rem 0 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-foot);
  line-height: 1.8;
}

.lost-report a {
  color: var(--site-yellow);
  font-weight: 800;
}

/* the big robot, with what it says over it and its shadow under it; a tap makes it look around */
.lost-side {
  display: grid;
  justify-items: center;
  gap: 1.375rem;
  cursor: pointer;
}

.lost-say {
  position: relative;
  margin: 0;
  padding: 0.875rem 1.375rem;
  border-radius: var(--site-radius-bubble);
  background: var(--site-bubble);
  color: var(--site-bubble-text);
  font-size: var(--site-size-bubble);
  font-weight: 800;
  text-align: center;
}

.lost-say::after {
  content: "";
  position: absolute;
  inset-block-end: -10px;
  inset-inline-start: 50%;
  margin-inline-start: -10px;
  border: 10px solid transparent;
  border-block-end: 0;
  border-block-start-color: var(--site-bubble);
}

.lost-robot {
  display: block;
  inline-size: min(var(--site-robot-big), 100%);
  aspect-ratio: 69 / 49;
}

.lost-robot .site-bot {
  transform-origin: 50% 90%;
  transition: transform 0.35s ease;
}

.lost-robot .site-bot.face-lost {
  transform: rotate(-5deg);
}

.lost-shadow {
  display: block;
  inline-size: 58%;
  block-size: 1.125rem;
  margin-block-start: -0.5rem;
  border-radius: 50%;
  background: var(--site-navy-shade);
  opacity: 0.7;
}

@media (max-width: 56.25rem) {
  .lost-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  /* the robot first */
  .lost-side {
    order: -1;
  }
}

@media (max-width: 47.9375rem) {
  .site-wrap {
    padding-inline: var(--site-gutter-phone);
  }

  .lost {
    align-items: flex-start;
    padding-block: 0.625rem var(--space-5);
  }

  .lost-side {
    gap: 0.875rem;
  }

  .lost-robot {
    inline-size: var(--site-robot-big-phone);
  }

  .lost-shadow {
    inline-size: 8.125rem;
    block-size: 0.6875rem;
  }

  .lost-say {
    padding: 0.625rem var(--space-4);
    border-radius: 1rem;
  }

  .lost .site-button {
    display: flex;
    inline-size: 100%;
    min-block-size: var(--site-button-height-phone);
    border-radius: 0.9375rem;
  }

  .lost-try {
    margin-block-start: 1.125rem;
    padding: var(--space-4) 1.125rem var(--space-2);
    border-radius: 1.375rem;
    box-shadow: 0 0.5625rem 0 var(--site-teal-shadow);
  }

  .site-follow {
    inset-block-end: 0.875rem;
    inset-inline-end: 0.75rem;
    gap: var(--space-2);
  }

  .site-follow-say {
    max-inline-size: 11.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.875rem;
    font-size: var(--site-size-follow-phone);
  }

  .site-follow-robot {
    inline-size: var(--site-robot-follow-phone);
  }
}

/* ── /privacy and /terms (<policy-page>) ──────────────────────────────────────────────────────────────────────── */

.policy-band {
  padding-block: var(--space-7) var(--space-6);
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.policy-band h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--site-size-title);
  font-weight: 900;
  line-height: 1.3;
}

.policy-updated {
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-foot);
}

.policy-updated:empty {
  display: none;
}

.policy-body {
  flex: 1 0 auto;
  padding-block: var(--space-6) var(--space-7);
  background: var(--site-band);
  color: var(--site-ink);
}

.policy-body :focus-visible {
  outline: 3px solid var(--site-focus-light);
  outline-offset: 2px;
}

.policy-column {
  max-inline-size: var(--site-reading);
}

/* (the text starts where the name does: none of the help answer's room at the start, whose look it borrows) */
.policy-body .policy-text {
  padding: 0;
  font-size: var(--site-size-text);
  line-height: 2;
}

.policy-body .policy-text .policy-heading {
  margin-block: var(--space-6) var(--space-3);
  color: var(--site-ink);
  font-size: var(--site-size-heading);
  font-weight: 800;
}

.policy-body .policy-text .policy-heading:first-child {
  margin-block-start: 0;
}

.policy-body a {
  color: var(--site-link);
}

/* ── The visitors' home «عدّ أيامك» (<visitor-home>, part c; the boards D5-desktop, D5-phone and D5-desktop-dark) ── */

/* it runs the screen's width, as the pages drawn anew do */
.app-main:has(> .home-page.is-landing) {
  max-inline-size: none;
  padding: 0;
}

visitor-home {
  display: block;
}

/* the keyboard's ring: yellow on navy, navy on the light bands (yellow again where they are dark) */
.visitor-home :focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

.days-band :focus-visible,
.days-cta :focus-visible {
  outline-color: var(--site-focus-light);
}

/* the first band: on a computer the question, the days left, the plan and its buttons at the start, the robot and the
   calendar beside them; narrower, one column in the phone's order (the question, the robot, the days left, the
   calendar, the plan, the buttons), which is the keyboard's order too */
.days-hero {
  padding-block: 2.25rem 6rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.days-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--site-hero-side));
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "head robot"
    "left card"
    "lines card"
    "acts card";
  column-gap: 3rem;
}

.days-head {
  grid-area: head;
  min-inline-size: 0;
}

.days-head h1 {
  margin: 0 0 1rem;
  font-size: var(--site-size-hero);
  font-weight: 900;
  line-height: 1.2;
}

.days-lead {
  max-inline-size: 26em;
  margin: 0 0 1.875rem;
  color: var(--site-navy-text);
  font-size: var(--site-size-hero-lead);
  line-height: 1.9;
}

.days-picks {
  min-inline-size: 0;
  margin: 0 0 2.125rem;
  padding: 0;
  border: 0;
}

.days-picks legend {
  margin: 0 0 0.625rem;
  padding: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-small);
  font-weight: 700;
}

.days-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.days-pill {
  min-block-size: var(--site-pill-height);
  padding: 0 1.125rem;
  border: 2px solid var(--site-navy-edge);
  border-radius: var(--site-radius-pill);
  background: transparent;
  color: var(--site-navy-title);
  font: inherit;
  font-size: var(--site-size-pill);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.days-pill:hover {
  border-color: var(--site-teal);
}

.days-pill[aria-pressed="true"] {
  border-color: var(--site-yellow);
  background: var(--site-yellow);
  color: var(--site-on-yellow);
}

/* the robot over the calendar, its words beside it (their point toward it); on a computer it stands on the calendar */
.days-robot-row {
  position: relative;
  z-index: 1;
  grid-area: robot;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.875rem;
  margin-block-end: -1.875rem;
  padding-inline-end: 1.75rem;
}

.days-say {
  position: relative;
  max-inline-size: 18.75rem;
  margin: 0 0 3.125rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--site-radius-bubble);
  background: var(--site-bubble);
  color: var(--site-bubble-text);
  font-size: var(--site-size-say);
  font-weight: 800;
  line-height: 1.7;
}

.days-say::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -9px;
  margin-block-start: -9px;
  border: 9px solid transparent;
  border-inline-end: 0;
  border-inline-start-color: var(--site-bubble);
}

.days-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-days);
  aspect-ratio: 69 / 49;
}

/* the days left, in big yellow figures */
.days-left {
  grid-area: left;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.days-figure {
  display: inline-block;
  color: var(--site-yellow);
  font-size: var(--site-size-days);
  font-weight: 900;
  line-height: 1;
}

.days-figure.is-tomorrow {
  font-size: var(--site-size-days-tomorrow);
}

.days-figure.is-none {
  font-size: var(--site-size-days-none);
}

/* a new day picked: the figure comes up into place (two names for one move, so each change starts it again) */
.days-figure.is-swap-a {
  animation: days-swap-a 0.3s ease-out;
}

.days-figure.is-swap-b {
  animation: days-swap-b 0.3s ease-out;
}

.days-figure-words {
  font-size: var(--site-size-days-words);
  font-weight: 700;
}

/* the plan in lines, each with its icon */
.days-lines {
  grid-area: lines;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--site-size-line);
  line-height: 1.7;
}

.days-line {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.days-line strong {
  font-weight: 800;
}

.days-line-quiet {
  color: var(--site-navy-text);
}

.days-icon {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: 3px;
}

.days-icon.is-teal {
  color: var(--site-teal);
}

.days-icon.is-yellow {
  color: var(--site-yellow);
}

/* «احفظ خطتي» (yellow, on its shadow) and «تسجيل الدخول» */
.days-acts {
  grid-area: acts;
  align-self: start;
  margin-block-start: 2.125rem;
}

.days-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.days-save {
  padding-inline: 1.875rem;
  box-shadow: 0 var(--site-button-shadow) 0 var(--site-yellow-shadow);
  font-size: var(--site-size-save);
  font-weight: 900;
}

.days-save:hover {
  box-shadow: 0 var(--site-button-shadow) 0 var(--site-yellow-shadow), 0 0 0 3px var(--site-yellow-shadow);
}

.days-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-button-height);
  padding-inline: 1.5rem;
  border: 2px solid var(--site-navy-edge);
  border-radius: var(--site-radius-button);
  color: var(--site-navy-title);
  font-size: var(--site-size-line);
  font-weight: 700;
  text-decoration: none;
}

.days-signin:hover {
  border-color: var(--site-teal);
  color: var(--site-navy-title);
}

.days-free {
  margin: 1rem 0 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-small);
}

/* the calendar: a card on the navy; its days of the week down the start, the months over its weeks, and its days in
   columns of weeks, as wide as there is room for (at most --site-cal-cell) */
.days-card {
  grid-area: card;
  align-self: start;
  min-inline-size: 0;
  /* (a month's name in the last week runs on past the card's edge on a narrow phone: cut there) */
  overflow: clip;
  padding: 2.875rem 1.25rem 1.125rem;
  border-radius: 1.75rem;
  background: var(--site-navy-card);
}

.days-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1.5rem repeat(7, auto);
  grid-template-columns: var(--site-cal-side);
  grid-auto-columns: minmax(0, var(--site-cal-cell));
  align-items: center;
  gap: var(--site-cal-gap);
}

.days-weekday {
  color: var(--site-navy-text);
  font-size: var(--site-size-cal-day);
  font-weight: 700;
  line-height: 1;
}

.days-weekday-short {
  display: none;
}

/* a month's name over the week it starts in, running on over the next */
.days-month {
  align-self: start;
  color: var(--site-navy-title);
  font-size: var(--site-size-cal-month);
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}

.days-cell {
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: var(--site-day);
  color: var(--site-navy);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.days-cell[aria-disabled="true"] {
  cursor: default;
}

@media (hover: hover) {
  .days-cell:not([aria-disabled="true"]):hover {
    transform: scale(1.14);
  }
}

/* a day gone: a faint ring; the plan's days teal, its mock papers yellow, his exam white with a star; with no day
   picked the first four weeks faint (their colour only: their rings and the keyboard's stay whole); today ringed white,
   the day under the pointer or the keyboard yellow */
.days-cell.is-past {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--site-day-gone);
}

.days-cell.is-plan {
  background: var(--site-teal);
}

.days-cell.is-paper {
  background: var(--site-yellow);
}

.days-cell.is-exam {
  background: var(--site-navy-title);
  transform: scale(1.12);
}

.days-cell.is-soft.is-plan {
  background: color-mix(in srgb, var(--site-teal) 42%, var(--site-navy-card));
}

.days-cell.is-soft.is-paper {
  background: color-mix(in srgb, var(--site-yellow) 42%, var(--site-navy-card));
}

.days-cell.is-today {
  box-shadow: 0 0 0 2px var(--site-navy-card), 0 0 0 4px var(--site-navy-title);
}

.days-cell.is-pointed {
  box-shadow: 0 0 0 2px var(--site-navy-card), 0 0 0 4px var(--site-yellow);
}

/* a day picked: the plan's days fill in, week after week */
.days-cell.is-pop-a {
  animation: days-pop-a 0.34s cubic-bezier(0.3, 1.4, 0.6, 1) backwards;
}

.days-cell.is-pop-b {
  animation: days-pop-b 0.34s cubic-bezier(0.3, 1.4, 0.6, 1) backwards;
}

.days-star {
  inline-size: 1rem;
  block-size: 1rem;
}

.days-status {
  min-block-size: 1.625rem;
  margin: 1rem 0 0.75rem;
  font-size: var(--site-size-status);
  font-weight: 700;
  line-height: 1.6;
}

.days-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--site-navy-text);
  font-size: var(--site-size-cal-key);
}

.days-key li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.days-swatch {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 4px;
}

.days-swatch.is-plan {
  background: var(--site-teal);
}

.days-swatch.is-paper {
  background: var(--site-yellow);
}

.days-swatch.is-exam {
  background: var(--site-navy-title);
}

/* «كل يوم تعرف ماذا تفعل.»: the pale band, its words and the picture of «خطتي اليوم» beside them */
.days-band {
  padding-block: 6.25rem;
  background: var(--site-band-pale);
  color: var(--site-ink);
}

.days-day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--site-picture-width));
  align-items: center;
  gap: 4rem;
}

.days-day-words {
  min-inline-size: 0;
}

.days-band h2 {
  margin: 0 0 1rem;
  font-size: var(--site-size-band);
  font-weight: 900;
  line-height: 1.3;
}

.days-band-lead {
  max-inline-size: 30em;
  margin: 0 0 1.625rem;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-band-lead);
  line-height: 1.95;
}

.days-checks {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--site-size-line);
  line-height: 1.75;
}

.days-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.days-checks .days-icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: 4px;
  color: var(--site-teal-text);
}

/* the picture: the student home's card as the canvas draws it, on its drop */
.days-picture {
  min-inline-size: 0;
  padding: 1.625rem;
  border-radius: 1.75rem;
  background: var(--site-band);
  box-shadow: 0 var(--site-card-shadow) 0 var(--site-card-drop);
}

.days-card-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-block-end: 1.125rem;
}

.days-card-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-card);
  aspect-ratio: 69 / 49;
}

.days-card-title {
  min-inline-size: 0;
}

.days-card-title h3 {
  margin: 0;
  font-size: var(--site-size-picture);
  font-weight: 900;
}

.days-card-days {
  margin: 2px 0 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-small);
}

.days-card-box {
  margin-block-end: 0.875rem;
  padding: 1.125rem;
  border-radius: 1.125rem;
  background: var(--site-band-pale);
}

.days-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  margin-block-end: var(--space-2);
}

.days-card-label {
  margin: 0;
  font-size: var(--site-size-pill);
  font-weight: 800;
}

.days-card-done {
  margin: 0;
  font-size: var(--site-size-status);
  font-weight: 800;
}

.days-card-bar {
  display: block;
  block-size: 0.625rem;
  margin-block-end: 0.75rem;
  overflow: hidden;
  border-radius: 5px;
  background: var(--site-track);
}

.days-card-fill {
  display: block;
  inline-size: 0;
  block-size: 100%;
  border-radius: 5px;
  background: var(--site-teal);
  transition: inline-size 0.3s ease;
}

.days-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 0.375rem;
}

.days-card-chip {
  padding: 0.25rem 0.75rem;
  border-radius: var(--site-radius-pill);
  background: var(--site-card);
  font-size: var(--site-size-small);
  font-weight: 700;
}

.days-card-why {
  margin: 0 0 0.875rem;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-card-line);
}

.days-card-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.days-card-go {
  min-block-size: var(--site-card-button);
  padding: 0 1.5rem;
  border: 0;
  border-radius: 0.875rem;
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
  font: inherit;
  font-size: var(--site-size-pill);
  font-weight: 800;
  cursor: pointer;
}

.days-card-met {
  margin: 0;
  color: var(--site-teal-text);
  font-size: var(--site-size-status);
  font-weight: 800;
  animation: days-in 0.25s ease-out backwards;
}

.days-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-block-start: 1px solid var(--site-rule);
}

.days-card-row p {
  margin: 0;
  font-size: var(--site-size-status);
  line-height: 1.6;
}

.days-card-row strong {
  font-weight: 800;
}

.days-card-quiet {
  color: var(--site-ink-quiet);
}

/* (a picture: the link's look, not a link) */
.days-card-link {
  flex: none;
  color: var(--site-teal-link);
  font-size: var(--site-size-status);
  font-weight: 800;
  text-decoration: underline;
}

.days-card-week {
  padding-block: 0.875rem 0;
}

.days-card-week-title {
  font-weight: 800;
}

.days-card-days-list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.days-card-weekday {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-cal-day);
}

.days-card-dot {
  display: block;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border-radius: 50%;
  background: var(--site-rule);
}

.days-card-weekday.is-met .days-card-dot {
  background: var(--site-teal);
}

.days-card-weekday.is-today .days-card-dot {
  border: 2.5px solid var(--site-teal);
  background: transparent;
}

/* «وأكثر من التدريب»: three links on the navy, each with its robot, lines between them */
.days-more {
  padding-block: 5.25rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.days-more h2 {
  margin: 0 0 2.25rem;
  font-size: var(--site-size-band-more);
  font-weight: 900;
}

.days-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.days-more-link {
  display: block;
  padding-block: var(--space-2);
  padding-inline: 0 2rem;
  color: var(--site-navy-title);
  text-decoration: none;
}

.days-more-link + .days-more-link {
  padding-inline-start: 2rem;
  border-inline-start: 1px solid var(--site-navy-rule);
}

.days-more-link:hover {
  color: var(--site-navy-title);
}

.days-more-link:hover h3 {
  text-decoration: underline;
}

.days-more-robot {
  display: block;
  inline-size: var(--site-robot-more);
  aspect-ratio: 69 / 49;
  margin-block-end: 0.875rem;
}

.days-more-words {
  display: block;
  min-inline-size: 0;
}

.days-more h3 {
  margin: 0 0 var(--space-2);
  color: var(--site-yellow);
  font-size: var(--site-size-picture);
  font-weight: 900;
}

.days-more-line {
  display: block;
  color: var(--site-navy-text);
  font-size: var(--site-size-pill);
  line-height: 1.85;
}

/* the yellow band (dim in dark mode): the robot winking, the words, and «احفظ خطتي» in navy (yellow in dark mode) */
.days-cta {
  padding-block: 4.5rem;
  background: var(--site-yellow-band);
  color: var(--site-yellow-band-title);
}

.days-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.days-cta-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-cta);
  aspect-ratio: 69 / 49;
}

.days-cta-words {
  flex: 1 1 26.25rem;
  min-inline-size: 0;
}

.days-cta h2 {
  margin: 0 0 0.625rem;
  font-size: var(--site-size-band-cta);
  font-weight: 900;
  line-height: 1.35;
}

.days-cta p {
  margin: 0;
  color: var(--site-yellow-band-text);
  font-size: var(--site-size-line);
  line-height: 1.85;
}

.days-cta-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-button-height);
  padding-inline: 1.875rem;
  border-radius: var(--site-radius-button);
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
  font-size: var(--site-size-save);
  font-weight: 900;
  text-decoration: none;
}

.days-cta-save:hover {
  box-shadow: 0 0 0 3px var(--site-navy-edge);
  color: var(--site-on-ink-button);
}

@keyframes days-pop-a {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes days-pop-b {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes days-swap-a {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes days-swap-b {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes days-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* up to 1100px: the first band in one column, the robot over the days left, its words beside it */
@media (max-width: 68.75rem) {
  .days-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "robot"
      "left"
      "card"
      "lines"
      "acts";
  }

  .days-robot-row {
    align-self: auto;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-block: 0 0.875rem;
    padding: 0;
  }

  .days-say {
    flex: 0 1 26rem;
    max-inline-size: none;
    margin: 0;
  }

  .days-card {
    margin-block-end: 1.375rem;
    padding-block-start: 1.25rem;
  }

  .days-acts {
    margin-block-start: 1.625rem;
  }
}

/* up to 900px: the picture under the words, «وأكثر من التدريب»'s three one under another */
@media (max-width: 56.25rem) {
  .days-day-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .days-more-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .days-more-link,
  .days-more-link + .days-more-link {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .days-more-link + .days-more-link {
    margin-block-start: 1rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--site-navy-rule);
  }
}

/* a phone: the phone board's measures; the calendar 14 weeks of smaller days with letters for the days of the week;
   the buttons one under another, the screen's width; the picture's list of what a day has is the board's words only */
@media (max-width: 47.9375rem) {
  .days-hero {
    padding-block: 0.5rem 2.75rem;
  }

  .days-head h1 {
    margin-block-end: 0.625rem;
    line-height: 1.3;
  }

  .days-lead {
    margin-block-end: 1.375rem;
    line-height: 1.85;
  }

  .days-picks {
    margin-block-end: 1.5rem;
  }

  .days-picks legend {
    margin-block-end: var(--space-2);
  }

  .days-pill {
    padding-inline: 0.875rem;
  }

  .days-say {
    flex: 1 1 auto;
    padding: 0.625rem 0.875rem;
    border-radius: 1rem;
  }

  .days-say::after {
    inset-inline-end: -8px;
    margin-block-start: -8px;
    border-width: 8px;
    border-inline-end-width: 0;
  }

  .days-robot {
    inline-size: var(--site-robot-days-phone);
  }

  .days-left {
    gap: 0.75rem;
    margin-block-end: 1rem;
  }

  .days-card {
    padding: 1rem 0.75rem 0.875rem;
    border-radius: 1.375rem;
  }

  .days-grid {
    grid-template-rows: 1.125rem repeat(7, auto);
    grid-template-columns: var(--site-cal-side-phone);
    grid-auto-columns: minmax(0, var(--site-cal-cell-phone));
    gap: var(--site-cal-gap-phone);
  }

  .days-weekday {
    font-size: var(--site-size-cal-day-phone);
  }

  .days-weekday-long {
    display: none;
  }

  .days-weekday-short {
    display: inline;
  }

  .days-month {
    font-size: var(--site-size-cal-month-phone);
  }

  .days-cell {
    border-radius: 5px;
  }

  .days-cell.is-past {
    box-shadow: inset 0 0 0 1px var(--site-day-gone);
  }

  .days-cell.is-exam {
    transform: scale(1.15);
  }

  .days-cell.is-today {
    box-shadow: 0 0 0 1.5px var(--site-navy-card), 0 0 0 3px var(--site-navy-title);
  }

  .days-cell.is-pointed {
    box-shadow: 0 0 0 1.5px var(--site-navy-card), 0 0 0 3px var(--site-yellow);
  }

  .days-star {
    inline-size: 0.6875rem;
    block-size: 0.6875rem;
  }

  .days-status {
    min-block-size: 1.3125rem;
    margin: 0.75rem 0 var(--space-2);
  }

  .days-key {
    gap: 0.375rem 0.875rem;
    font-size: var(--site-size-cal-key-phone);
  }

  .days-key li {
    gap: 0.375rem;
  }

  .days-swatch {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: 3px;
  }

  .days-lines {
    gap: 0.625rem;
  }

  .days-line {
    gap: 0.625rem;
  }

  .days-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .days-buttons {
    display: grid;
    gap: 0.625rem;
  }

  .days-save,
  .days-signin {
    display: flex;
    min-block-size: var(--site-button-height-phone);
  }

  .days-save {
    box-shadow: 0 0.3125rem 0 var(--site-yellow-shadow);
  }

  .days-free {
    margin-block-start: 0.75rem;
  }

  .days-band {
    padding-block: 2.75rem;
  }

  .days-band h2 {
    margin-block-end: 0.75rem;
    line-height: 1.35;
  }

  .days-band-lead {
    margin-block-end: 1.375rem;
    line-height: 1.9;
  }

  /* (the phone board has the picture right under the words) */
  .days-checks {
    display: none;
  }

  .days-picture {
    padding: 1.125rem;
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 0 var(--site-card-drop);
  }

  .days-card-head {
    gap: 0.75rem;
    margin-block-end: 0.875rem;
  }

  .days-card-robot {
    inline-size: var(--site-robot-card-phone);
  }

  .days-card-box {
    margin-block-end: 0.625rem;
    padding: 0.875rem;
    border-radius: 1rem;
  }

  .days-card-bar {
    block-size: 0.5625rem;
    margin-block-end: 0.625rem;
  }

  .days-card-chips {
    gap: 0.375rem;
  }

  .days-card-chip {
    padding: 0.1875rem 0.625rem;
  }

  .days-card-go {
    min-block-size: var(--site-card-button-phone);
    padding-inline: 1.375rem;
    border-radius: 0.8125rem;
  }

  .days-card-row {
    gap: 0.625rem;
    padding-block: 0.625rem;
  }

  .days-card-week {
    padding-block: 0.75rem 0;
  }

  .days-card-days-list {
    gap: 0.375rem;
  }

  .days-card-weekday {
    gap: 3px;
    font-size: var(--site-size-cal-day-phone);
  }

  .days-more {
    padding-block: 2.75rem;
  }

  .days-more h2 {
    margin-block-end: 1.375rem;
  }

  .days-more-link {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding-block: 0;
  }

  .days-more-link + .days-more-link {
    margin-block-start: 1rem;
    padding-block-start: 1.125rem;
  }

  .days-more-robot {
    flex: none;
    inline-size: var(--site-robot-more-phone);
    margin-block: 4px 0;
  }

  .days-more h3 {
    margin-block-end: 4px;
  }

  .days-cta {
    padding-block: 2.5rem;
  }

  .days-cta-inner {
    display: block;
  }

  .days-cta-robot {
    inline-size: var(--site-robot-cta-phone);
    margin-block-end: 1rem;
  }

  .days-cta h2 {
    margin-block-end: var(--space-2);
    line-height: 1.4;
  }

  .days-cta p {
    margin-block-end: 1.25rem;
  }

  .days-cta-save {
    display: flex;
    min-block-size: var(--site-button-height-phone);
  }
}

/* narrower than 360px: the picture's week a little smaller, so «هذا الأسبوع» stays on one line */
@media (max-width: 22.4375rem) {
  .days-card-days-list {
    gap: 0.25rem;
  }

  .days-card-dot {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
}

/* ── «الدورات» (pages/catalog-page.js, part d; the boards S-courses and S-courses-phone) ───────────────────────── */

/* it runs the screen's width, as the pages drawn anew do; so does a course's page for those not in its run */
.app-main:has(> catalog-page),
.app-main:has(> run-page.is-visit) {
  max-inline-size: none;
  padding: 0;
}

catalog-page,
run-page.is-visit {
  display: block;
}

/* a long word or address breaks rather than runs past the screen's edge (part d's review) */
.site-courses,
.visit {
  overflow-wrap: anywhere;
}

/* the keyboard's ring: yellow on navy, navy on the light bands (yellow again where they are dark) */
.site-courses :focus-visible,
.visit :focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

.cat-list :focus-visible,
.cat-cta :focus-visible,
.visit-main :focus-visible,
.visit-help :focus-visible {
  outline-color: var(--site-focus-light);
}

/* the navy band: «الدورات» and its line at the start, the robot and its line beside them */
.cat-hero {
  padding-block: 1.25rem 4rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.cat-hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.cat-head {
  flex: 1 1 26rem;
  min-inline-size: 0;
}

.cat-head h1 {
  margin: 0 0 0.875rem;
  font-size: var(--site-size-page);
  font-weight: 900;
  line-height: 1.25;
}

.cat-lead {
  max-inline-size: 32em;
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-hero-lead);
  line-height: 1.9;
}

.cat-manage {
  margin: 1.25rem 0 0;
}

.cat-manage-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--site-card-button);
  padding-inline: 1.25rem;
  border: 2px solid var(--site-navy-edge);
  border-radius: var(--site-radius-button);
  color: var(--site-navy-title);
  font-size: var(--site-size-card-text);
  font-weight: 700;
  text-decoration: none;
}

.cat-manage-link:hover {
  border-color: var(--site-teal);
  color: var(--site-navy-title);
}

.cat-say-row {
  display: flex;
  flex: 0 1 27.5rem;
  align-items: center;
  gap: 1.125rem;
  min-inline-size: 0;
}

.cat-say {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding: 0.875rem 1.125rem;
  border-radius: var(--site-radius-bubble);
  background: var(--site-bubble);
  color: var(--site-bubble-text);
  font-size: var(--site-size-say);
  font-weight: 700;
  line-height: 1.8;
}

.cat-say::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -9px;
  margin-block-start: -9px;
  border: 9px solid transparent;
  border-inline-end: 0;
  border-inline-start-color: var(--site-bubble);
}

.cat-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-hero);
  aspect-ratio: 69 / 49;
}

/* «الدورات المتاحة»: the cards three to a line (two up to 1100px, one on a phone), each a picture over its words */
.cat-list {
  padding-block: 3.5rem 5.5rem;
  background: var(--site-band-pale);
  color: var(--site-ink);
}

.cat-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.cat-list h2 {
  margin: 0;
  font-size: var(--site-size-list);
  font-weight: 900;
}

.cat-order {
  margin: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-status);
}

.cat-panel > .cat-order {
  margin-block-end: 1rem;
}

.cat-empty {
  margin: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-line);
}

/* «دوراتي» and «الدورات المتاحة» as pills */
.cat-tabs.learn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: 1.5rem;
  border: 0;
}

.cat-tabs .learn-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--site-pill-height);
  margin: 0;
  padding-inline: 1.125rem;
  border: 2px solid var(--site-rule);
  border-radius: var(--site-radius-pill);
  background: var(--site-card);
  color: var(--site-ink);
  font-size: var(--site-size-pill);
  font-weight: 800;
}

.cat-tabs .learn-tab[aria-selected="true"] {
  border-color: var(--site-ink-button);
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
}

.cat-tabs .learn-tab-note {
  color: inherit;
  font-weight: 700;
}

.cat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  border: 2px solid var(--site-rule);
  border-radius: 1.5rem;
  background: var(--site-card);
  box-shadow: 0 0.5rem 0 var(--site-rule);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

@media (hover: hover) {
  .cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 0 var(--site-card-drop);
  }
}

/* a course's picture: its own image, or its robot on its colour; its status on it */
.cat-picture,
.visit-picture {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.cat-picture.is-teal,
.visit-picture.is-teal {
  background: var(--site-picture-teal);
}

.cat-picture.is-yellow,
.visit-picture.is-yellow {
  background: var(--site-picture-yellow);
}

.cat-picture.is-navy,
.visit-picture.is-navy {
  background: var(--site-picture-navy);
}

.cat-picture.is-blue,
.visit-picture.is-blue {
  background: var(--site-picture-blue);
}

.cat-picture-image,
.visit-picture-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.cat-picture-robot,
.visit-picture-robot {
  position: absolute;
  inset: 14% 26%;
}

.visit-picture-robot {
  inset: 14% 25%;
}

.cat-picture-robot .site-bot,
.visit-picture-robot .site-bot {
  inline-size: 100%;
  block-size: 100%;
}

.cat-chip,
.visit-chip {
  padding: 4px 0.75rem;
  border-radius: var(--site-radius-pill);
  font-size: var(--site-size-chip);
  font-weight: 800;
  line-height: 1.6;
}

.cat-chip {
  position: absolute;
  inset-block-start: 0.875rem;
  inset-inline-start: 0.875rem;
}

.cat-chip.is-open,
.visit-chip.is-open {
  background: var(--site-chip);
  color: var(--site-chip-text);
}

.cat-chip.is-full,
.visit-chip.is-full {
  background: var(--site-chip-full);
  color: var(--site-chip-full-text);
}

.cat-chip.is-quiet,
.visit-chip.is-quiet,
.visit-chip.is-exam {
  background: var(--site-chip-quiet);
  color: var(--site-chip-quiet-text);
}

.visit-chip.is-exam {
  font-weight: 700;
}

.cat-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  padding: 1.125rem 1.25rem 1.25rem;
}

.cat-card-body p {
  margin: 0;
}

.cat-card-exam {
  color: var(--site-teal-link);
  font-size: var(--site-size-chip);
  font-weight: 700;
}

.cat-card-title {
  margin: 0;
  font-size: var(--site-size-card-head);
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cat-card-title a {
  color: var(--site-ink);
  text-decoration: none;
}

.cat-card-title a:hover {
  color: var(--site-ink);
  text-decoration: underline;
}

.cat-card-label {
  color: var(--site-ink);
  font-size: var(--site-size-card-text);
  font-weight: 700;
}

.cat-card-line {
  color: var(--site-ink-quiet);
  font-size: var(--site-size-card-text);
  line-height: 1.8;
}

.cat-card-mine {
  padding: var(--space-2) 0.75rem;
  border-radius: 0.75rem;
  background: var(--site-band-pale);
  color: var(--site-ink);
  font-size: var(--site-size-card-text);
  font-weight: 700;
  line-height: 1.7;
}

/* a run's seats: their words over a bar, teal as they're taken, navy once full */
.cat-seats,
.visit-seats {
  margin-block-start: 4px;
}

.cat-seats-text,
.visit-seats-text {
  margin: 0 0 6px;
  color: var(--site-ink);
  font-size: var(--site-size-small);
  font-weight: 700;
}

.cat-bar,
.visit-bar {
  display: block;
  block-size: 0.5rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--site-rule);
}

.cat-bar-fill,
.visit-bar-fill {
  display: block;
  inline-size: var(--fill, 0%);
  block-size: 100%;
  border-radius: 4px;
  background: var(--site-teal);
}

.cat-bar.is-full .cat-bar-fill,
.visit-bar.is-full .visit-bar-fill {
  background: var(--site-bar-full);
}

.cat-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: auto;
  padding-block-start: 0.875rem;
}

.cat-price-big {
  font-size: var(--site-size-price);
  font-weight: 900;
}

.cat-price-note {
  color: var(--site-ink-quiet);
  font-size: var(--site-size-small);
}

/* a card's button: navy (yellow in dark mode), or outlined */
.cat-card-go,
.visit-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-card-button);
  padding-inline: 1.125rem;
  border: 2px solid var(--site-ink-button);
  border-radius: 0.875rem;
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
  font: inherit;
  font-size: var(--site-size-card-text);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cat-card-go:hover,
.visit-act:hover {
  box-shadow: 0 0 0 3px var(--site-card-drop);
  color: var(--site-on-ink-button);
}

.cat-card-go.is-outline,
.visit-act.is-outline {
  border-color: var(--site-ink);
  background: transparent;
  color: var(--site-ink);
}

.cat-card-go.is-outline:hover,
.visit-act.is-outline:hover {
  color: var(--site-ink);
}

/* «كيف تسجّل في دورة»: three steps on the navy, each its number in a yellow circle */
.cat-how {
  padding-block: 5rem;
  border-block-start: 1px solid var(--site-navy-line);
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.cat-how h2 {
  margin: 0 0 2.5rem;
  font-size: var(--site-size-how);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}

.cat-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-step {
  display: flex;
  gap: 1rem;
  min-inline-size: 0;
}

.cat-step-n {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--site-step-dot);
  block-size: var(--site-step-dot);
  border-radius: 50%;
  background: var(--site-yellow);
  color: var(--site-on-yellow);
  font-size: var(--site-size-step);
  font-weight: 900;
}

.cat-step-words {
  min-inline-size: 0;
}

.cat-step h3 {
  margin: 0 0 6px;
  font-size: var(--site-size-step);
  font-weight: 800;
}

.cat-step p {
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-pill);
  line-height: 1.8;
}

.cat-how-note {
  max-inline-size: 46em;
  margin: 2.5rem auto 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-card-text);
  line-height: 1.9;
  text-align: center;
}

/* the yellow band (dim in dark mode): the robot, the words, and the button in navy (yellow in dark mode) */
.cat-cta {
  padding-block: 3.5rem;
  background: var(--site-yellow-band);
  color: var(--site-yellow-band-title);
}

.cat-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}

.cat-cta-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-cta);
  aspect-ratio: 69 / 49;
}

.cat-cta-words {
  min-inline-size: 0;
}

.cat-cta h2 {
  margin: 0 0 6px;
  font-size: var(--site-size-band-cta);
  font-weight: 900;
  line-height: 1.4;
}

.cat-cta p {
  margin: 0;
  color: var(--site-yellow-band-text);
  font-size: var(--site-size-line);
  line-height: 1.8;
}

.cat-cta-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-button-height);
  padding-inline: 1.75rem;
  border-radius: 1.125rem;
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
  font-size: var(--site-size-save);
  font-weight: 800;
  text-decoration: none;
}

.cat-cta-go:hover {
  box-shadow: 0 0 0 3px var(--site-navy-edge);
  color: var(--site-on-ink-button);
}

/* ── A course's page for those not in its run (components/course-visit.js, part d; the boards S-course and
   S-course-phone) ────────────────────────────────────────────────────────────────────────────────────────────── */

course-visit {
  display: block;
}

/* the navy band: where the page is, then the course's words beside its picture */
.visit-hero {
  padding-block: 0.5rem 3.5rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.visit-crumbs {
  margin-block-end: 1.125rem;
  color: var(--site-navy-text);
  font-size: var(--site-size-card-text);
}

.visit-crumbs a {
  color: var(--site-navy-title);
  font-weight: 700;
}

.visit-crumbs a:hover {
  color: var(--site-navy-title);
}

.visit-crumb-mark {
  margin-inline: var(--space-2);
}

.visit-hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.visit-head {
  flex: 1 1 26rem;
  min-inline-size: 0;
}

.visit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 0.75rem;
}

.visit-head h1 {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-page);
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.visit-label,
.visit-line,
.visit-next {
  margin: 0 0 6px;
  color: var(--site-navy-text);
  font-size: var(--site-size-page-line);
  line-height: 1.8;
}

.visit-label {
  color: var(--site-navy-title);
  font-weight: 700;
}

/* its next lecture: the band's yellow */
.visit-next {
  margin-block: 0.875rem 0;
  color: var(--site-yellow);
  font-weight: 700;
}

.visit-picture-side {
  flex: 0 1 var(--site-visit-picture);
  min-inline-size: 0;
}

.visit-picture {
  border-radius: 1.625rem;
  box-shadow: 0 0.625rem 0 var(--site-teal-shadow);
}

/* the light band: «التسجيل» at the end of the line on a computer (first on a phone: first for the keyboard too), the
   course's cards beside it */
.visit-main {
  padding-block: 3.5rem 5rem;
  background: var(--site-band-pale);
  color: var(--site-ink);
}

.visit-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--site-visit-side);
  align-items: start;
  gap: 2.5rem;
}

.visit-sections {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  gap: 1.75rem;
  min-inline-size: 0;
}

.visit-card,
.visit-reg {
  padding: 1.75rem 1.875rem;
  border: 2px solid var(--site-rule);
  border-radius: 1.5rem;
  background: var(--site-card);
  color: var(--site-ink);
}

.visit-card h2,
.visit-reg h2 {
  margin: 0 0 0.875rem;
  color: inherit;
  font-size: var(--site-size-visit-title);
  font-weight: 900;
}

.visit-summary {
  margin: 0;
  font-size: var(--site-size-line);
  line-height: 2;
  white-space: pre-line;
}

.visit-goals {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  font-size: var(--site-size-line);
  line-height: 1.8;
  list-style: none;
}

.visit-goals li {
  display: flex;
  gap: 0.75rem;
}

.visit-goals li > span {
  min-inline-size: 0;
}

.visit-goal-icon {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: 4px;
  color: var(--site-teal-text);
}

.visit-empty {
  margin: 0;
  color: var(--site-ink-quiet);
}

/* «المحاضرات»: each its number in a box, its title and its day; those over quieter */
.visit-lectures {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visit-lecture {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.875rem;
  border-block-end: 1px solid var(--site-rule);
}

.visit-lecture.is-coming {
  animation: days-in 0.3s ease-out backwards;
}

.visit-lecture-n {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--site-lecture-n);
  block-size: var(--site-lecture-n);
  border-radius: 0.75rem;
  background: var(--site-number);
  color: var(--site-teal-link);
  font-size: var(--site-size-pill);
  font-weight: 900;
}

.visit-lecture-words {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 1rem;
  min-inline-size: 0;
}

.visit-lecture-title {
  min-inline-size: 0;
  font-size: var(--site-size-line);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.visit-lecture-when {
  color: var(--site-ink-quiet);
  font-size: var(--site-size-card-text);
}

.visit-lecture.is-over .visit-lecture-n {
  background: var(--site-rule);
  color: var(--site-ink-quiet);
}

.visit-lecture.is-over .visit-lecture-title {
  color: var(--site-ink-quiet);
}

.visit-toggle {
  min-block-size: var(--site-card-button);
  margin-block-start: 1rem;
  padding-inline: 1.125rem;
  border: 2px solid var(--site-ink);
  border-radius: 0.875rem;
  background: var(--site-card);
  color: var(--site-ink);
  font: inherit;
  font-size: var(--site-size-card-text);
  font-weight: 800;
  cursor: pointer;
}

.visit-toggle:hover {
  background: var(--site-hover);
}

/* «المدرّبون»: two to a line, each its photo, name and bio */
.visit-trainers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visit-trainer {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-inline-size: 0;
}

.visit-trainer-photo {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--site-trainer-photo);
  block-size: var(--site-trainer-photo);
  border-radius: 50%;
  object-fit: cover;
}

.visit-trainer-photo.is-empty {
  background: var(--site-picture-blue);
  color: var(--site-ink-quiet);
}

.visit-trainer-icon {
  inline-size: 1.875rem;
  block-size: 1.875rem;
}

.visit-trainer-words {
  min-inline-size: 0;
}

.visit-trainer h3 {
  margin: 0 0 4px;
  font-size: var(--site-size-line);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.visit-trainer p {
  margin: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-card-text);
  line-height: 1.8;
  white-space: pre-line;
}

.visit-trainer .pm-write {
  margin-block-start: var(--space-2);
}

/* «التسجيل»: its price in big figures, its seats, its registration, where he stands and what he can do; under them,
   how it works */
.visit-reg {
  grid-row: 1;
  grid-column: 2;
  padding: 1.625rem;
  box-shadow: 0 0.625rem 0 var(--site-card-drop);
}

.visit-reg h2 {
  margin-block-end: 0.625rem;
}

.visit-price {
  margin: 0 0 0.875rem;
  font-size: var(--site-size-visit-price);
  font-weight: 900;
  line-height: 1.3;
}

.visit-price-note {
  margin: -0.625rem 0 0.875rem;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-small);
}

.visit-reg .visit-seats {
  margin-block-end: 1.125rem;
}

.visit-reg .visit-bar {
  block-size: 9px;
}

.visit-phase,
.visit-line,
.visit-mine,
.visit-note {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-pill);
  line-height: 1.8;
}

.visit-reg .visit-line {
  color: var(--site-ink);
}

.visit-phase,
.visit-note {
  color: var(--site-ink-quiet);
}

.visit-mine {
  padding: 0.625rem 0.875rem;
  border-radius: 0.875rem;
  background: var(--site-band-pale);
  font-weight: 700;
}

.visit-acts {
  display: grid;
  gap: 0.625rem;
}

.visit-reg .visit-act,
.visit-reg .reg-register {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--site-button-height-phone);
  margin-block-end: 0.625rem;
  border-radius: 1rem;
  font-size: var(--site-size-line);
}

.visit-acts .visit-act {
  margin: 0;
}

.visit-reg .visit-act:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* «إلغاء…», asked again, and a held seat's transfer: the app's parts, in the card's look */
.visit-reg .button {
  min-block-size: var(--site-card-button);
  padding-inline: 1.125rem;
  border-width: 2px;
  border-radius: 0.875rem;
  font-weight: 800;
}

.visit-reg .button-primary {
  border-color: var(--site-ink-button);
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
}

.visit-reg .button-secondary {
  border-color: var(--site-ink);
  background: var(--site-card);
  color: var(--site-ink);
}

.visit-reg .crs-danger-button {
  border-color: var(--site-error);
  background: var(--site-card);
  color: var(--site-error);
}

.visit-reg .reg-cancel {
  inline-size: 100%;
}

.visit-reg .crs-confirm {
  display: grid;
  gap: 0.75rem;
}

.visit-reg .crs-confirm p {
  margin: 0;
  line-height: 1.8;
}

.visit-reg .crs-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.visit-reg .reg-transfer {
  margin-block: 0.25rem 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--site-band-pale);
}

.visit-reg .reg-transfer h3 {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-line);
  font-weight: 800;
}

.visit-reg .reg-transfer-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0 0 0.75rem;
}

.visit-reg .reg-transfer-list dt {
  color: var(--site-ink-quiet);
  font-size: var(--site-size-small);
}

.visit-reg .reg-transfer-list dd {
  margin: 0 0 6px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.visit-notes {
  display: grid;
  gap: 0.625rem;
  margin-block-start: 1.25rem;
  padding-block-start: 1.125rem;
  border-block-start: 1px solid var(--site-rule);
  color: var(--site-ink-quiet);
  font-size: var(--site-size-status);
  line-height: 1.8;
}

.visit-notes p {
  margin: 0;
}

.visit-reg .notice {
  margin-block-start: 0.75rem;
}

/* «ما تجده بعد التسجيل»: six on the navy, each its icon in yellow */
.visit-gets {
  padding-block: 5rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.visit-gets h2 {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-how);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}

.visit-gets-lead {
  max-inline-size: 34em;
  margin: 0 auto 2.75rem;
  color: var(--site-navy-text);
  font-size: var(--site-size-line);
  line-height: 1.9;
  text-align: center;
}

.visit-gets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visit-get {
  min-inline-size: 0;
  padding: 1.375rem;
  border-radius: 1.25rem;
  background: var(--site-navy-card);
}

.visit-get-icon {
  display: block;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  color: var(--site-yellow);
}

.visit-get h3 {
  margin: 0.75rem 0 6px;
  font-size: var(--site-size-picture);
  font-weight: 800;
}

.visit-get p {
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-card-text);
  line-height: 1.8;
}

/* «أسئلة عن التسجيل»: «المساعدة»'s questions as pills, and «كل أسئلة المساعدة» */
.visit-help {
  padding-block: 3.5rem;
  background: var(--site-band);
  color: var(--site-ink);
}

.visit-help-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.visit-help-words {
  min-inline-size: 0;
}

.visit-help h2 {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-visit-title);
  font-weight: 900;
}

.visit-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visit-question {
  display: inline-block;
  padding: 0.5625rem 1rem;
  border-radius: var(--site-radius-pill);
  background: var(--site-band-pale);
  color: var(--site-ink);
  font-size: var(--site-size-card-text);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}

.visit-question:hover {
  color: var(--site-ink);
  text-decoration: underline;
}

.visit-help-all {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--site-button-height-phone);
  padding-inline: 1.375rem;
  border: 2px solid var(--site-ink);
  border-radius: 1rem;
  color: var(--site-ink);
  font-size: var(--site-size-pill);
  font-weight: 800;
  text-decoration: none;
}

.visit-help-all:hover {
  background: var(--site-hover);
  color: var(--site-ink);
}

/* up to 1100px: «الدورات المتاحة» two to a line */
@media (max-width: 68.75rem) {
  .cat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* up to 900px: a course's page in one column, «التسجيل» first; «ما تجده بعد التسجيل» two to a line */
@media (max-width: 56.25rem) {
  .visit-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .visit-reg,
  .visit-sections {
    grid-row: auto;
    grid-column: auto;
  }

  .visit-gets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* a phone: the phone boards' measures; one card to a line, the steps one under another, the trainers too */
@media (max-width: 47.9375rem) {
  .cat-hero {
    padding-block: 0.375rem 1.75rem;
  }

  .cat-hero-grid {
    gap: 1rem;
  }

  .cat-head {
    flex-basis: 100%;
  }

  .cat-head h1 {
    margin-block-end: var(--space-2);
    line-height: 1.3;
  }

  .cat-lead {
    line-height: 1.8;
  }

  .cat-say-row {
    flex: 1 1 100%;
    gap: 0.875rem;
  }

  .cat-say {
    padding: 0.625rem 0.875rem;
    border-radius: 1rem;
    line-height: 1.7;
  }

  .cat-say::after {
    inset-inline-end: -8px;
    margin-block-start: -8px;
    border-width: 8px;
    border-inline-end-width: 0;
  }

  .cat-robot {
    inline-size: var(--site-robot-hero-phone);
  }

  .cat-list {
    padding-block: 1.375rem 1.875rem;
  }

  .cat-list-head {
    gap: 0.625rem;
    margin-block-end: 0.875rem;
  }

  .cat-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
  }

  .cat-card {
    border-radius: 1.375rem;
    box-shadow: 0 0.375rem 0 var(--site-rule);
  }

  .cat-chip {
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 3px 0.625rem;
  }

  .cat-card-body {
    gap: 6px;
    padding: 0.875rem 1rem 1rem;
  }

  .cat-card-foot {
    margin-block-start: 0.625rem;
    padding-block-start: 0;
  }

  .cat-card-go,
  .visit-act {
    min-block-size: var(--site-card-button-phone);
    border-radius: 0.8125rem;
  }

  .cat-how {
    padding-block: 1.875rem 2.5rem;
  }

  .cat-how h2 {
    margin-block-end: 1.25rem;
    text-align: start;
  }

  .cat-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
  }

  .cat-step {
    gap: 0.75rem;
  }

  .cat-step-n {
    inline-size: var(--site-step-dot-phone);
    block-size: var(--site-step-dot-phone);
  }

  .cat-how-note {
    margin-block-start: 1.5rem;
    text-align: start;
  }

  .cat-cta {
    padding-block: 2.5rem;
  }

  .cat-cta-inner {
    display: block;
  }

  .cat-cta-robot {
    inline-size: var(--site-robot-cta-phone);
    margin-block-end: 1rem;
  }

  .cat-cta p {
    margin-block-end: 1.25rem;
  }

  .cat-cta-go {
    display: flex;
    min-block-size: var(--site-button-height-phone);
  }

  .visit-hero {
    padding-block: 4px 1.5rem;
  }

  .visit-crumbs {
    margin-block-end: 0.625rem;
  }

  .visit-hero-grid {
    gap: 1rem;
  }

  .visit-head {
    flex-basis: 100%;
  }

  .visit-chips {
    gap: 6px;
    margin-block-end: var(--space-2);
  }

  .visit-chip {
    padding: 3px 0.625rem;
  }

  .visit-head h1 {
    margin-block-end: 6px;
    line-height: 1.3;
  }

  .visit-label,
  .visit-line {
    margin-block-end: 4px;
    line-height: 1.7;
  }

  .visit-picture-side {
    flex: 1 1 100%;
  }

  .visit-picture {
    border-radius: 1.375rem;
    box-shadow: 0 0.5rem 0 var(--site-teal-shadow);
  }

  .visit-main {
    padding-block: 1.25rem 2.5rem;
  }

  .visit-cols,
  .visit-sections {
    gap: 1rem;
  }

  .visit-card,
  .visit-reg {
    padding: 1.125rem;
    border-radius: 1.375rem;
  }

  .visit-reg {
    box-shadow: 0 0.375rem 0 var(--site-card-drop);
  }

  .visit-card h2,
  .visit-reg h2 {
    margin-block-end: var(--space-2);
  }

  /* two to a line while «تسجيل الدخول» fits on one; at 320px, one above the other (part d's review) */
  .visit-acts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-2);
  }

  .visit-reg .visit-act,
  .visit-reg .reg-register {
    min-block-size: var(--site-card-button);
    border-radius: 0.875rem;
  }

  .visit-acts .visit-act {
    padding-inline: 0.5rem;
  }

  .visit-lecture {
    gap: 0.75rem;
    padding-block: 0.6875rem;
  }

  .visit-lecture-n {
    inline-size: var(--site-lecture-n-phone);
    block-size: var(--site-lecture-n-phone);
    border-radius: 0.625rem;
  }

  .visit-lecture-words {
    display: block;
  }

  .visit-lecture-title,
  .visit-lecture-when {
    display: block;
  }

  .visit-toggle {
    inline-size: 100%;
    margin-block-start: 0.75rem;
  }

  .visit-trainers {
    grid-template-columns: minmax(0, 1fr);
  }

  .visit-gets {
    padding-block: 2.5rem;
  }

  .visit-gets h2 {
    text-align: start;
  }

  .visit-gets-lead {
    margin-block-end: 1.5rem;
    text-align: start;
  }

  .visit-gets-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
  }

  .visit-help {
    padding-block: 2.5rem;
  }

  .visit-help-all {
    display: flex;
    justify-content: center;
    inline-size: 100%;
  }
}

/* ── «اختبار القدرات», «من نحن» and «للمدرّبين» (pages/gat-page.js, about-page.js and trainers-page.js, part e; the
   boards S-gat, S-about and S-trainers and their phones) ─────────────────────────────────────────────────────── */

/* they run the screen's width, as the pages drawn anew do */
.app-main:has(> gat-page),
.app-main:has(> about-page),
.app-main:has(> trainers-page) {
  max-inline-size: none;
  padding: 0;
}

gat-page,
about-page,
trainers-page {
  display: block;
}

/* a long word breaks rather than runs past the screen's edge */
.site-gat,
.site-about,
.site-trainers {
  overflow-wrap: anywhere;
}

/* the keyboard's ring: yellow on navy, navy on the light bands (yellow again where they are dark) */
.site-gat :focus-visible,
.site-about :focus-visible,
.site-trainers :focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

.gat-facts :focus-visible,
.gat-parts :focus-visible,
.gat-score :focus-visible,
.gat-when :focus-visible,
.about-story :focus-visible,
.about-values :focus-visible,
.about-talk :focus-visible,
.trn-feats :focus-visible,
.trn-cta :focus-visible {
  outline-color: var(--site-focus-light);
}

/* the navy bands at the top: the title and its line, the robot beside them */
.gat-hero,
.about-hero,
.trn-hero {
  padding-block: 1.5rem 4.5rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

/* «للمدرّبين»: the room's picture stands half on the navy, half on the pale band under it, as both boards have it; the
   robot that follows takes the pale part as «كل ما تحتاجه دورتك»'s */
.trn-hero {
  position: relative;
  padding-block-end: 4rem;
  background: linear-gradient(var(--site-navy) calc(100% - var(--site-room-pale)), var(--site-band-pale) calc(100% - var(--site-room-pale)));
}

.trn-hero-pale {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--site-room-pale);
  pointer-events: none;
}

.gat-hero-grid,
.about-hero-grid,
.trn-hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.gat-hero-words,
.about-hero-words,
.trn-hero-words {
  flex: 1 1 35rem;
  min-inline-size: 0;
}

.gat-hero h1,
.about-hero h1,
.trn-hero h1 {
  margin: 0 0 1rem;
  font-size: var(--site-size-page);
  font-weight: 900;
  line-height: 1.3;
}

.gat-lead,
.about-lead,
.trn-lead {
  max-inline-size: 34em;
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-hero-lead);
  line-height: 1.9;
}

.gat-robot,
.about-robot {
  display: block;
  flex: 0 1 var(--site-robot-page);
  aspect-ratio: 69 / 49;
  min-inline-size: 0;
}

.about-robot {
  flex-basis: var(--site-robot-about);
}

/* the bands' titles and lines */
.gat-facts h2,
.gat-parts h2,
.gat-score h2,
.gat-when h2,
.about-story h2,
.about-values h2,
.about-inside h2,
.trn-feats h2 {
  margin: 0 0 1.75rem;
  font-size: var(--site-size-how);
  font-weight: 900;
  line-height: 1.4;
}

.gat-band-lead,
.about-inside-lead {
  max-inline-size: 40em;
  margin: -1.125rem 0 1.875rem;
  font-size: var(--site-size-line);
  line-height: 1.9;
}

.gat-band-lead {
  color: var(--site-ink-quiet);
}

/* «الاختبار بالأرقام»: four blue cards, their numbers big */
.gat-facts,
.gat-score,
.about-story {
  padding-block: 4.5rem;
  background: var(--site-band);
  color: var(--site-ink);
}

.gat-fact-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gat-fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: 1.5rem 1.375rem;
  border-radius: 1.75rem;
  background: var(--site-fact);
  box-shadow: inset 0 0 0 6px var(--site-fact-ring), 0 10px 0 var(--site-fact-drop);
  color: var(--site-navy-title);
}

.gat-fact-n {
  font-size: var(--site-size-fact);
  font-weight: 900;
  line-height: 1.2;
}

.gat-fact-line {
  color: var(--site-fact-text);
  font-size: var(--site-size-line);
  line-height: 1.7;
}

/* «ما الذي يقيسه؟»: the two parts side by side, each its kinds as pills and its sample question */
.gat-parts,
.gat-when,
.about-values,
.trn-feats {
  padding-block: 2.5rem 5rem;
  background: var(--site-band-pale);
  color: var(--site-ink);
}

.gat-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gat-part {
  min-inline-size: 0;
  padding: 1.75rem;
  border: 2px solid var(--site-rule);
  border-radius: 1.625rem;
  background: var(--site-card);
}

.gat-part h3 {
  margin: 0 0 0.875rem;
  font-size: var(--site-size-visit-title);
  font-weight: 900;
}

.gat-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 1.375rem;
  padding: 0;
  list-style: none;
}

.gat-kinds li {
  padding: 6px 0.875rem;
  border-radius: var(--site-radius-pill);
  background: var(--site-kind-verbal);
  color: var(--site-kind-verbal-text);
  font-size: var(--site-size-card-text);
  font-weight: 700;
}

.gat-part.is-quant .gat-kinds li {
  background: var(--site-kind-quant);
  color: var(--site-kind-quant-text);
}

.gat-sample {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: var(--site-sample);
}

.gat-ask {
  margin: 0 0 4px;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-small);
}

.gat-stem {
  margin: 0 0 0.875rem;
  font-size: var(--site-size-stem);
  font-weight: 900;
}

/* its four choices, two to a line: once one is pressed, the right one teal, the one picked red when wrong, each with
   its mark, the others faded */
.gat-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.gat-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: var(--site-option-height);
  padding: var(--space-2) 0.875rem;
  border: 0;
  border-radius: 0.875rem;
  background: var(--site-option);
  box-shadow: 0 4px 0 var(--site-option-drop);
  color: var(--site-option-text);
  font: inherit;
  font-size: var(--site-size-option);
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.gat-option:hover:not([aria-disabled="true"]) {
  box-shadow: 0 4px 0 var(--site-option-drop), 0 0 0 2px var(--site-option-right);
}

.gat-option[aria-disabled="true"] {
  cursor: default;
}

.gat-option.is-right {
  background: var(--site-option-right);
  box-shadow: 0 4px 0 var(--site-option-right-drop);
  color: var(--site-on-option);
}

.gat-option.is-wrong {
  background: var(--site-option-wrong);
  box-shadow: 0 4px 0 var(--site-option-wrong-drop);
  color: var(--site-on-option);
}

/* (fainter colours, not opacity, which would fade its focus ring too: the review's) */
.gat-option.is-dim {
  background: var(--site-option-dim);
  box-shadow: 0 4px 0 var(--site-option-dim-drop);
  color: var(--site-option-dim-text);
}

.gat-option-words {
  min-inline-size: 0;
}

.gat-option-mark {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.gat-why {
  margin: 0.875rem 0 0;
  font-size: var(--site-size-card-text);
  line-height: 1.8;
  animation: days-in 0.3s ease-out backwards;
}

.gat-why strong {
  color: var(--site-teal-text);
}

.gat-why.is-wrong strong {
  color: var(--site-error);
}

/* «كيف تُحسب درجتك؟»: its words beside «تقديرنا» on navy (an example: its range, its bar, its scale, its line) */
.gat-score-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
}

.gat-score-words {
  flex: 1 1 30rem;
  min-inline-size: 0;
}

.gat-score-words h2 {
  margin-block-end: 0.875rem;
}

.gat-score-words p {
  margin: 0 0 0.875rem;
  font-size: var(--site-size-line);
  line-height: 2;
}

.gat-quiet,
.about-quiet {
  color: var(--site-ink-quiet);
}

.gat-estimate {
  flex: 0 1 27.5rem;
  min-inline-size: 0;
  padding: 1.625rem;
  border-radius: 1.625rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.gat-estimate-title {
  margin: 0 0 4px;
  color: var(--site-navy-text);
  font-size: var(--site-size-card-text);
}

.gat-estimate-range {
  margin: 0 0 1.125rem;
  font-size: var(--site-size-range);
  font-weight: 900;
}

.gat-estimate-of {
  color: var(--site-navy-text);
  font-size: var(--site-size-picture);
  font-weight: 700;
}

.gat-estimate-bar {
  position: relative;
  display: block;
  block-size: 0.875rem;
  border-radius: 7px;
  background: var(--site-navy-card);
}

.gat-estimate-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 72%;
  inline-size: 8%;
  border-radius: 7px;
  background: var(--site-yellow);
}

.gat-estimate-scale {
  display: flex;
  justify-content: space-between;
  margin-block-start: 6px;
  color: var(--site-scale-text);
  font-size: var(--site-size-chip);
}

.gat-estimate-note {
  margin: 1rem 0 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-small);
  line-height: 1.8;
}

/* «من يختبره، ومتى؟»: four white boxes, each its icon */
.gat-when-item {
  display: flex;
  gap: 1rem;
  min-inline-size: 0;
  padding: 1.5rem;
  border-radius: 1.375rem;
  background: var(--site-card);
}

.gat-when-item p {
  min-inline-size: 0;
  margin: 0;
  font-size: var(--site-size-line);
  line-height: 1.9;
}

.gat-when-item a {
  color: var(--site-teal-link);
  font-weight: 800;
}

.gat-when-icon {
  flex: none;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  color: var(--site-teal-text);
}

/* «كيف تستعد مع «كودي باس»»: four steps on navy, the robot over each, then the button */
.gat-prep,
.about-inside,
.trn-steps {
  padding-block: 5rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.gat-prep h2,
.trn-steps h2 {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-how);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}

.gat-prep-lead {
  max-inline-size: 34em;
  margin: 0 auto 2.75rem;
  color: var(--site-navy-text);
  font-size: var(--site-size-line);
  line-height: 1.9;
  text-align: center;
}

.gat-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gat-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-inline-size: 0;
  text-align: center;
}

.gat-step-robot {
  display: block;
  inline-size: var(--site-robot-step);
  max-inline-size: 100%;
  aspect-ratio: 69 / 49;
  margin-block-end: 1rem;
}

.gat-step-n,
.trn-step-n {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: 0.625rem;
  border-radius: 50%;
  background: var(--site-yellow);
  color: var(--site-chip-full-text);
  font-weight: 900;
}

.gat-step h3,
.trn-step h3 {
  margin: 0 0 6px;
  font-size: var(--site-size-step);
  font-weight: 800;
}

.gat-step p,
.trn-step p {
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-card-text);
  line-height: 1.8;
}

.gat-go {
  margin: 3rem 0 0;
  text-align: center;
}

.gat-go-link,
.trn-act,
.about-talk-go,
.trn-cta-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-button-height);
  padding-inline: 1.875rem;
  border-radius: 1.125rem;
  background: var(--site-yellow);
  color: var(--site-on-yellow);
  font-size: var(--site-size-save);
  font-weight: 800;
  text-decoration: none;
}

.gat-go-link:hover,
.trn-act:hover {
  box-shadow: 0 0 0 3px var(--site-navy-edge);
  color: var(--site-on-yellow);
}

/* «من نحن»: the story in one column */
.about-story-wrap {
  max-inline-size: 53.75rem;
}

.about-story-wrap h2 {
  margin-block-end: 1rem;
}

.about-story p {
  margin: 0 0 1rem;
  font-size: var(--site-size-lead);
  line-height: 2;
}

.about-story p:last-child {
  margin: 0;
}

/* «ما نتمسّك به»: six white cards, three to a line, each its icon */
.about-value-list,
.trn-feat-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-value,
.trn-feat {
  min-inline-size: 0;
  padding: 1.625rem;
  border: 2px solid var(--site-rule);
  border-radius: 1.5rem;
  background: var(--site-card);
}

.about-value-icon,
.trn-feat-icon {
  display: block;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  color: var(--site-teal-text);
}

.about-value h3,
.trn-feat h3 {
  margin: 0.75rem 0 var(--space-2);
  font-size: var(--site-size-visit-title);
  font-weight: 900;
}

.about-value p,
.trn-feat p {
  margin: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-line);
  line-height: 1.9;
}

/* «ما تجده في «كودي باس»»: twelve on navy, four to a line */
.about-inside-lead {
  color: var(--site-navy-text);
}

.about-inside-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-inside-item {
  min-inline-size: 0;
  padding: 1.125rem;
  border-radius: 1.125rem;
  background: var(--site-navy-card);
}

.about-inside-item p {
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-small);
  line-height: 1.8;
}

.about-inside-item .about-inside-title {
  margin-block-end: 4px;
  color: var(--site-yellow);
  font-size: var(--site-size-card-title);
  font-weight: 800;
}

/* the yellow bands: «لديك سؤال أو فكرة؟» (the robot winking) and «تريد أن تدرّس في «كودي باس»؟», their navy buttons */
.about-talk,
.trn-cta {
  padding-block: 4rem;
  background: var(--site-yellow-band);
  color: var(--site-yellow-band-title);
}

.about-talk-inner,
.trn-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.about-talk-side {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  min-inline-size: 0;
}

.about-talk-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-cta);
  aspect-ratio: 69 / 49;
}

.about-talk-words,
.trn-cta-words {
  min-inline-size: 0;
}

.about-talk h2,
.trn-cta h2 {
  margin: 0 0 6px;
  font-size: var(--site-size-band-cta);
  font-weight: 900;
  line-height: 1.4;
}

.about-talk p,
.trn-cta p {
  margin: 0;
  color: var(--site-yellow-band-text);
  font-size: var(--site-size-line);
  line-height: 1.8;
}

.about-talk-go,
.trn-cta-go {
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
}

.about-talk-go:hover,
.trn-cta-go:hover {
  box-shadow: 0 0 0 3px var(--site-navy-edge);
  color: var(--site-on-ink-button);
}

/* «للمدرّبين»'s band: its buttons, the robot with its line, then the live room's picture */
.trn-hero-grid {
  margin-block-end: 2.75rem;
}

.trn-lead {
  margin-block-end: 1.625rem;
}

.trn-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.trn-act.is-outline {
  border: 2px solid var(--site-navy-edge);
  background: transparent;
  color: var(--site-navy-title);
}

.trn-act.is-outline:hover {
  border-color: var(--site-teal);
  box-shadow: none;
  color: var(--site-navy-title);
}

.trn-say-row {
  display: flex;
  flex: 0 1 26.25rem;
  align-items: center;
  gap: 1.125rem;
  min-inline-size: 0;
}

.trn-say {
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  padding: 0.875rem 1.125rem;
  border-radius: var(--site-radius-bubble);
  background: var(--site-bubble);
  color: var(--site-bubble-text);
  font-size: var(--site-size-say);
  font-weight: 700;
  line-height: 1.8;
}

.trn-say::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -9px;
  margin-block-start: -9px;
  border: 9px solid transparent;
  border-inline-end: 0;
  border-inline-start-color: var(--site-bubble);
}

.trn-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-say);
  aspect-ratio: 69 / 49;
}

/* the live room: a framed picture of the app's class, drawn with the page's words */
.trn-room {
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--site-navy);
  border-radius: 1.625rem;
  background: var(--site-board);
  box-shadow: 0 14px 0 var(--site-teal-shadow);
  color: var(--site-ink);
}

.trn-room-head,
.trn-room-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  background: var(--site-navy-card);
  color: var(--site-navy-title);
}

.trn-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0.625rem;
  border-radius: var(--site-radius-pill);
  background: var(--site-live);
  font-size: var(--site-size-chip);
  font-weight: 800;
}

.trn-live-dot {
  display: block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--site-navy-title);
  animation: trn-live 1.6s ease-in-out infinite;
}

@keyframes trn-live {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

.trn-room-lecture {
  font-size: var(--site-size-card-text);
  font-weight: 700;
}

.trn-recording {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  color: var(--site-navy-text);
  font-size: var(--site-size-chip);
}

.trn-recording-dot {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--site-recording);
}

.trn-room-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--site-room-chat);
}

.trn-board {
  min-inline-size: 0;
  padding: 1.75rem 2rem;
  border-inline-end: 2px solid var(--site-chat-edge);
}

.trn-board-ask {
  margin: 0 0 6px;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-card-text);
}

.trn-board-stem {
  margin: 0 0 1.375rem;
  font-size: var(--site-size-room-stem);
  font-weight: 900;
}

.trn-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  max-inline-size: 35rem;
}

.trn-choice {
  position: relative;
  padding: 0.625rem;
  border-radius: 0.75rem;
  background: var(--site-band-pale);
  font-size: var(--site-size-option);
  font-weight: 700;
  text-align: center;
}

/* the pen's circle round the right choice, and its wave under the question: they draw themselves in */
.trn-circle {
  position: absolute;
  inset: -0.875rem -0.625rem;
  inline-size: calc(100% + 1.25rem);
  block-size: calc(100% + 1.75rem);
  overflow: visible;
  pointer-events: none;
}

.trn-circle .trn-ink {
  stroke: var(--site-ink-circle);
  stroke-width: 3.5;
}

.trn-wave {
  display: block;
  inline-size: 18.75rem;
  max-inline-size: 100%;
  margin-block-start: 1.625rem;
}

.trn-wave .trn-ink {
  stroke: var(--site-teal);
  stroke-width: 4;
}

.trn-ink {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: trn-ink 1.4s ease-out 0.6s forwards;
}

@keyframes trn-ink {
  to {
    stroke-dashoffset: 0;
  }
}

.trn-board-why {
  margin: 6px 0 0;
  color: var(--site-teal-text);
  font-size: var(--site-size-option);
  font-weight: 700;
}

.trn-chat {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background: var(--site-chat);
}

.trn-chat-title {
  margin: 0;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--site-chat-edge);
  font-size: var(--site-size-card-text);
  font-weight: 800;
}

.trn-chat-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
}

.trn-message {
  max-inline-size: 85%;
  margin: 0;
  padding: var(--space-2) 0.75rem;
  border-radius: 0.875rem;
  background: var(--site-card);
  font-size: var(--site-size-small);
  line-height: 1.7;
}

.trn-message.is-trainer {
  background: var(--site-chat-trainer);
}

.trn-chat-write {
  margin: 0.75rem 1rem 1rem;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--site-chat-edge);
  border-radius: 0.75rem;
  background: var(--site-card);
  color: var(--site-chat-write);
  font-size: var(--site-size-small);
}

.trn-room-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0.75rem;
  border-radius: 0.75rem;
  background: var(--site-navy);
  font-size: var(--site-size-small);
  font-weight: 700;
}

.trn-room-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.trn-tools {
  display: flex;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.trn-tool {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.75rem;
  background: var(--site-navy);
}

.trn-tool.is-on {
  background: var(--site-teal);
  color: var(--site-navy);
}

.trn-tool-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* «كيف تبدأ»: four numbered steps on navy */
.trn-steps h2 {
  margin-block-end: 2.5rem;
}

.trn-step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trn-step {
  min-inline-size: 0;
}

.trn-step-n {
  inline-size: 2.875rem;
  block-size: 2.875rem;
  margin-block-end: 0.875rem;
  font-size: var(--site-size-step);
}

/* narrower screens, as the boards have them: the facts and the steps two to a line (what's in the app three); then the
   room's chat under its board and a trainer's six things two to a line; then the parts and the lines on when one above
   the other, the values and what's in the app two to a line */
@media (max-width: 68.75rem) {
  .gat-fact-list,
  .gat-steps,
  .trn-step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-inside-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 56.25rem) {
  .trn-room-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .trn-board {
    border-inline-end: 0;
    border-block-end: 2px solid var(--site-chat-edge);
  }

  .trn-feat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 50rem) {
  .gat-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-value-list,
  .about-inside-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* a phone: one column, the bands closer together, the robots smaller; the room's picture as the phone board draws it
   (its board and the chat's first and last messages; no bar of tools, no recording, no line to write) */
@media (max-width: 47.9375rem) {
  .gat-hero,
  .about-hero,
  .trn-hero {
    padding-block: 0.5rem 2rem;
  }

  .gat-hero-grid,
  .about-hero-grid,
  .trn-hero-grid {
    gap: 1rem;
  }

  .gat-hero-words,
  .about-hero-words,
  .trn-hero-words {
    flex-basis: 100%;
  }

  .gat-hero h1,
  .about-hero h1,
  .trn-hero h1 {
    margin-block-end: 0.625rem;
  }

  /* «اختبار القدرات»: its robot beside the title, the line under both; «من نحن»'s under its line (the phone boards) */
  .gat-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--site-robot-gat-phone);
    align-items: end;
    gap: 0 0.75rem;
  }

  .gat-hero-words {
    display: contents;
  }

  .gat-hero h1 {
    grid-area: 1 / 1;
    margin: 0;
    font-size: var(--site-size-gat-title-phone);
  }

  .gat-robot {
    grid-area: 1 / 2;
  }

  .gat-lead {
    grid-column: 1 / -1;
    margin-block-start: 0.75rem;
  }

  .about-robot {
    flex: none;
    inline-size: var(--site-robot-about-phone);
    margin-inline: auto;
  }

  .gat-facts,
  .gat-parts,
  .gat-score,
  .gat-when,
  .about-story,
  .about-values,
  .trn-feats {
    padding-block: 2.125rem;
  }

  .gat-prep,
  .about-inside,
  .trn-steps,
  .about-talk,
  .trn-cta {
    padding-block: 2.5rem;
  }

  .gat-facts h2,
  .gat-parts h2,
  .gat-score h2,
  .gat-when h2,
  .about-story h2,
  .about-values h2,
  .about-inside h2,
  .trn-feats h2 {
    margin-block-end: 1rem;
  }

  .gat-band-lead,
  .about-inside-lead {
    margin: -0.375rem 0 1.25rem;
  }

  .gat-fact-list {
    gap: 0.75rem;
  }

  .gat-fact {
    padding: 1rem;
    border-radius: 1.25rem;
    box-shadow: inset 0 0 0 4px var(--site-fact-ring), 0 6px 0 var(--site-fact-drop);
  }

  .gat-part {
    padding: 1.125rem;
    border-radius: 1.375rem;
  }

  .gat-sample {
    padding: 0.875rem;
  }

  /* (a choice's words on one line: its mark a badge on its corner) */
  .gat-option {
    position: relative;
    padding: 6px 0.75rem;
    font-size: var(--site-size-card-text);
  }

  .gat-option-mark {
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-end: -0.375rem;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    padding: 3px;
    border-radius: 50%;
    background: inherit;
    box-shadow: 0 0 0 2px var(--site-sample);
  }

  .gat-score-grid {
    gap: 1.5rem;
  }

  .gat-estimate {
    flex-basis: 100%;
    padding: 1.25rem;
  }

  .gat-when-item {
    padding: 1rem;
  }

  .gat-when-icon {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }

  .gat-prep h2,
  .trn-steps h2 {
    text-align: start;
  }

  .gat-prep-lead {
    margin: 0 0 1.5rem;
    text-align: start;
  }

  .gat-steps,
  .trn-step-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
  }

  .gat-step {
    display: grid;
    grid-template-columns: var(--site-robot-step-phone) minmax(0, 1fr);
    align-items: center;
    column-gap: 0.875rem;
    text-align: start;
  }

  .gat-step-robot {
    grid-row: 1 / span 2;
    inline-size: var(--site-robot-step-phone);
    margin: 0;
  }

  .gat-step-n {
    inline-size: 1.875rem;
    block-size: 1.875rem;
    margin-block-end: 4px;
  }

  .gat-go {
    margin-block-start: 1.75rem;
  }

  .gat-go-link {
    display: flex;
    min-block-size: var(--site-button-height-phone);
  }

  .about-value-list,
  .trn-feat-list,
  .about-inside-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .about-value,
  .trn-feat {
    padding: 1rem 1.125rem;
    border-radius: 1.25rem;
  }

  .about-talk-side {
    align-items: flex-start;
  }

  .about-talk-robot {
    inline-size: var(--site-robot-cta-phone);
  }

  .about-talk-go,
  .trn-cta-go {
    display: flex;
    inline-size: 100%;
    min-block-size: var(--site-button-height-phone);
  }

  .trn-hero-grid {
    margin-block-end: 1.25rem;
  }

  /* (the room's picture as far down as its shadow: the pale band takes its last part, as the phone board has it) */
  .trn-hero {
    --site-room-pale: var(--site-room-pale-phone);
    padding-block-end: 0.625rem;
  }

  .trn-feats {
    padding-block: 2.125rem 1.625rem;
  }

  .trn-acts {
    display: grid;
  }

  .trn-act {
    min-block-size: var(--site-button-height-phone);
  }

  .trn-act.is-outline,
  .trn-say-row {
    display: none;
  }

  .trn-room {
    border-radius: 1.25rem;
    box-shadow: 0 10px 0 var(--site-teal-shadow);
  }

  .trn-room-head {
    padding: 0.5rem 0.75rem;
  }

  .trn-recording,
  .trn-room-foot,
  .trn-board-ask,
  .trn-wave,
  .trn-board-why,
  .trn-chat-title,
  .trn-message.is-later,
  .trn-chat-write {
    display: none;
  }

  .trn-board {
    padding: 1rem;
  }

  .trn-board-stem {
    margin-block-end: 0.75rem;
  }

  .trn-choices {
    gap: 6px;
  }

  .trn-choice {
    padding: 6px 2px;
    font-size: var(--site-size-small);
  }

  .trn-chat-list {
    gap: 6px;
    padding: 0.75rem 0.875rem;
  }
}

/* ── «المساعدة», the account pages, a certificate and the report (part f; the boards S-help and its phone and dark,
   S-signin, S-signup and S-account-states and their phones, S-cert and S-report and their phones) ────────────── */

/* they run the screen's width: /help in its bands, the account pages on the navy, the report on the pale page */
.app-main:has(> help-page),
.app-main:has(> signin-page),
.app-main:has(> signup-page),
.app-main:has(> forgot-password-page),
.app-main:has(> reset-password-page),
.app-main:has(> verify-email-page),
.app-main:has(> report-shared-page) {
  max-inline-size: none;
  padding: 0;
}

.app-main:has(> signin-page),
.app-main:has(> signup-page),
.app-main:has(> forgot-password-page),
.app-main:has(> reset-password-page),
.app-main:has(> verify-email-page) {
  background: var(--site-navy);
}

.app-main:has(> report-shared-page) {
  background: var(--site-band-pale);
}

/* a certificate on the pale page too, on the screen only: printed, it's its sheet alone (certificate-print.css) */
@media screen {
  .app-main:has(> certificate-page) {
    max-inline-size: none;
    padding: 0;
    background: var(--site-band-pale);
  }

  .site-cert {
    gap: 1.75rem;
    max-inline-size: var(--site-wrap);
    margin-inline: auto;
    padding: 2.5rem var(--site-gutter) 4.5rem;
  }
}

help-page,
signin-page,
signup-page,
forgot-password-page,
reset-password-page,
verify-email-page {
  display: block;
}

.site-help,
.site-report {
  display: block;
}

/* a long word breaks rather than runs past the screen's edge (the certificate's sheet keeps its own fitting) */
.site-help,
.auth-layout,
.site-report,
.cert-real,
.cert-state {
  overflow-wrap: anywhere;
}

/* the keyboard's ring: yellow on navy, navy on the light parts (yellow again where they are dark) */
.site-help :focus-visible,
.auth-layout :focus-visible,
.site-cert :focus-visible,
.site-report :focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

.help-faq :focus-visible,
.help-talk :focus-visible,
.auth-layout > .auth-card :focus-visible,
.site-cert :focus-visible,
.rs-main :focus-visible {
  outline-color: var(--site-focus-light);
}

/* ── The account pages: the card, white, and beside it the robot with its line (above it, smaller, on a phone) ── */

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--site-auth-card)) minmax(0, 1fr);
  align-items: center;
  gap: 3.5rem;
  padding-block: 2rem 4rem;
}

.auth-layout > .auth-card {
  max-inline-size: none;
  margin: 0;
  padding: 2.125rem 2.25rem;
  border: 0;
  border-radius: var(--site-radius-card);
  background: var(--site-card);
  color: var(--site-ink);
  box-shadow: 0 var(--site-card-shadow) 0 var(--site-teal-shadow);
}

.auth-layout h1 {
  margin: 0 0 1.375rem;
  font-size: var(--site-size-form-title);
  font-weight: 900;
  line-height: 1.35;
}

/* a title with a line under it (a new account, a forgotten password) */
.auth-layout h1:has(+ .lead) {
  margin-block-end: 0.375rem;
}

.auth-layout .lead {
  margin: 0 0 1.25rem;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-form-label);
  line-height: 1.8;
}

.auth-layout .form {
  gap: 1rem;
  margin-block: 0;
}

.auth-layout .field-label {
  font-size: var(--site-size-form-label);
  font-weight: 800;
}

.auth-layout .field-input {
  min-block-size: var(--site-field-height);
  padding: 0 1rem;
  border: 2px solid var(--site-field-line);
  border-radius: 0.875rem;
  background: var(--site-field);
  color: var(--site-ink);
  font-size: var(--site-size-field);
}

.auth-layout .field-input:focus {
  border-color: var(--site-ink);
  outline: 3px solid var(--site-teal);
  outline-offset: 1px;
  box-shadow: none;
}

.auth-layout .field-input[aria-invalid="true"] {
  border-color: var(--site-error);
}

.auth-layout .field-hint {
  color: var(--site-ink-quiet);
  line-height: 1.7;
}

.auth-layout .field-error {
  color: var(--site-error);
  font-weight: 700;
}

.auth-layout .notice {
  border-radius: 0.75rem;
}

/* «نسيت كلمة المرور؟» on the password's line (after its box for the keyboard) */
.auth-password {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
}

.auth-password > * {
  grid-column: 1 / -1;
}

.auth-password > .field-label {
  grid-row: 1;
  grid-column: 1;
}

.auth-password > .auth-forgot {
  grid-row: 1;
  grid-column: 2;
  color: var(--site-teal-link);
  font-size: var(--site-size-small);
  font-weight: 700;
}

/* «رجل» or «امرأة»: two boxes side by side, the one chosen navy (yellow in dark mode), the keyboard's ring round it */
.auth-layout .cm-gender-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.auth-layout .cm-gender-choices[hidden] {
  display: none;
}

.auth-layout .cm-gender-choices > p {
  grid-column: 1 / -1;
}

.auth-layout .cm-gender-choices .qb-chip {
  position: relative;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: var(--site-field-height-phone);
  border: 2px solid var(--site-field-line);
  border-radius: 0.875rem;
  background: var(--site-field);
  color: var(--site-ink);
  font-size: var(--site-size-form-label);
  font-weight: 800;
}

.auth-layout .cm-gender-choices input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
}

.auth-layout .cm-gender-choices .qb-chip:has(input:checked) {
  border-color: var(--site-ink-button);
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
}

.auth-layout .cm-gender-choices .qb-chip:has(input:focus-visible) {
  outline: 3px solid var(--site-teal);
  outline-offset: 2px;
}

/* the form's button: navy (yellow in dark mode), the card's width */
.auth-layout .button-primary {
  min-block-size: var(--site-form-button);
  border: 0;
  border-radius: var(--site-radius-button);
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
  font-size: var(--site-size-form-button);
  font-weight: 800;
}

.auth-layout .button-primary:hover {
  background: var(--site-ink-button);
  box-shadow: 0 0 0 3px var(--site-teal);
}

/* «الدخول بحساب جوجل», under «أو» */
.auth-layout .auth-social {
  gap: 0.75rem;
  margin-block-start: 1rem;
}

.auth-layout .auth-or {
  color: var(--site-ink-faint);
  font-size: var(--site-size-small);
}

.auth-layout .auth-or::before,
.auth-layout .auth-or::after {
  border-color: var(--site-rule);
}

.auth-layout .button-secondary {
  display: flex;
  align-items: center;
  min-block-size: var(--site-form-button);
  border: 2px solid var(--site-field-line);
  border-radius: var(--site-radius-button);
  background: var(--site-card);
  color: var(--site-ink);
  font-size: var(--site-size-field);
  font-weight: 700;
}

.auth-layout .button-secondary:hover {
  border-color: var(--site-ink);
  background: var(--site-card);
}

/* the lines under the form: «ليس لديك حساب؟ أنشئ حساباً», then «لا تستطيع الدخول؟ المساعدة», quieter */
.auth-layout .form-links {
  margin: 1.375rem 0 0.375rem;
  font-size: var(--site-size-form-label);
}

.auth-layout .form-links + .form-links {
  margin-block-start: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-nav);
}

.auth-layout .form-links a,
.auth-agree a {
  color: var(--site-teal-link);
  font-weight: 800;
}

.auth-layout .notice .form-links {
  margin: var(--space-2) 0 0;
}

/* the policies' line under «إنشاء الحساب» */
.auth-agree {
  margin: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-small);
  line-height: 1.8;
}

.auth-agree[hidden] {
  display: none;
}

/* the account made: welcome, the email to confirm, where to go on, «أعد إرسال الرسالة» */
.auth-done h1 {
  margin-block-end: 0.625rem;
}

.auth-done h1:focus {
  outline: none;
}

.auth-confirm {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-field);
  line-height: 1.9;
}

.auth-email {
  font-weight: 800;
}

.auth-confirm-why {
  margin: 0 0 1.25rem;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-nav);
  line-height: 1.8;
}

.auth-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.auth-go,
.auth-resend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-form-button);
  border-radius: var(--site-radius-button);
  font-size: var(--site-size-field);
  font-weight: 800;
  text-decoration: none;
}

.auth-go {
  padding-inline: 1.375rem;
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
}

.auth-go:hover {
  color: var(--site-on-ink-button);
  box-shadow: 0 0 0 3px var(--site-teal);
}

.auth-resend {
  padding-inline: 1.125rem;
  border: 2px solid var(--site-ink);
  background: var(--site-card);
  color: var(--site-ink);
  font-family: inherit;
  cursor: pointer;
}

.auth-resend:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-done .notice:not([hidden]) {
  margin-block-start: 1rem;
}

/* beside the card: the robot's line in a white bubble pointing down to it, the robot, the app's line */
.auth-side {
  display: grid;
  justify-items: center;
  gap: 1.125rem;
}

.auth-say {
  position: relative;
  margin: 0;
  padding: 0.875rem 1.25rem;
  border-radius: var(--site-radius-bubble);
  background: var(--site-bubble);
  color: var(--site-bubble-text);
  font-size: var(--site-size-form-say);
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

.auth-say[hidden] {
  display: none;
}

.auth-say::after {
  content: "";
  position: absolute;
  inset-block-end: -10px;
  inset-inline-start: 50%;
  margin-inline-start: -10px;
  border: 10px solid transparent;
  border-block-end: 0;
  border-block-start-color: var(--site-bubble);
}

.auth-robot {
  display: block;
  inline-size: min(var(--site-robot-auth), 100%);
  aspect-ratio: 69 / 49;
}

/* it tilts, sorry, after a try refused; leans away, eyes closed, for the password; hops once the account is made */
.auth-bot {
  transform-origin: 50% 90%;
}

.auth-bot.face-oops {
  animation: site-tilt 0.8s ease-in-out;
}

.auth-bot.face-shy {
  animation: site-shy 0.4s ease-out both;
}

.auth-bot.face-happy {
  animation: site-hop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}

@keyframes site-tilt {
  0%,
  100% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(-6deg);
  }

  65% {
    transform: rotate(4deg);
  }
}

@keyframes site-shy {
  to {
    transform: rotate(-5deg) translateY(2%);
  }
}

@keyframes site-hop {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-7%);
  }
}

.auth-line {
  max-inline-size: 22em;
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-auth-line);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

/* the visitors' bar on them: on «تسجيل الدخول», its link a white pill; on «إنشاء حساب», «أنشئ حساباً» white */
.nb-site-signin[aria-current="page"] {
  padding: 0.5rem 0.875rem;
  border-radius: var(--site-radius-pill);
  background: var(--site-navy-title);
  color: var(--site-navy);
  font-weight: 800;
}

.nb-site-signin[aria-current="page"]:hover {
  text-decoration: none;
}

.nb-site-signup[aria-current="page"] {
  background: var(--site-navy-title);
  color: var(--site-navy);
}

.nb-site-signup[aria-current="page"]:hover {
  box-shadow: 0 0 0 3px var(--site-navy-edge);
}

@media (max-width: 68.75rem) {
  /* (on «إنشاء حساب», «تسجيل الدخول» in «أنشئ حساباً»'s place, as its phone board has it) */
  nav-bar.is-visitor .nb-end:has(> .nb-site-signup[aria-current="page"]) > .nb-site-signin {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--site-bar-control-phone);
    font-size: var(--site-size-small);
    font-weight: 800;
  }

  nav-bar.is-visitor .nb-site-signup[aria-current="page"] {
    display: none;
  }

  .nb-site-signin-panel[aria-current="page"] {
    border-color: var(--site-navy-title);
    background: var(--site-navy-title);
    color: var(--site-navy);
    font-weight: 800;
  }
}

/* up to 860px: the robot and its line in a row above the card, the line pointing to it; the app's line goes */
@media (max-width: 53.75rem) {
  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    padding-block: 0.5rem 2rem;
  }

  .auth-side {
    display: flex;
    order: -1;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
  }

  .auth-say {
    flex: 1 1 auto;
    padding: 0.625rem 0.875rem;
    border-radius: 1rem;
    text-align: start;
  }

  .auth-say::after {
    inset-block: 50% auto;
    inset-inline: auto -8px;
    margin: 0;
    margin-block-start: -8px;
    border: 8px solid transparent;
    border-inline-end: 0;
    border-inline-start-color: var(--site-bubble);
  }

  .auth-robot {
    flex: none;
    inline-size: var(--site-robot-auth-phone);
  }

  .auth-line {
    display: none;
  }

  .auth-layout > .auth-card {
    padding: 1.375rem 1.25rem;
    border-radius: 1.5rem;
    box-shadow: 0 0.625rem 0 var(--site-teal-shadow);
  }

  .auth-layout h1 {
    margin-block-end: 1rem;
  }

  .auth-layout .field-input {
    min-block-size: var(--site-field-height-phone);
    padding-inline: 0.875rem;
  }
}

/* ── «المساعدة»: the navy band with the search, the questions on the pale band beside their sections, «تواصل معنا»
   on the white band ─────────────────────────────────────────────────────────────────────────────────────────── */

.help-hero {
  padding-block: 1.25rem 3.75rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.help-hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.help-hero-words {
  flex: 1 1 22rem;
  min-inline-size: 0;
}

.help-hero h1 {
  margin: 0 0 0.625rem;
  font-size: var(--site-size-display);
  font-weight: 900;
  line-height: 1.25;
}

.help-lead {
  max-inline-size: 40em;
  margin: 0 0 1.375rem;
  color: var(--site-navy-text);
  font-size: var(--site-size-hero-lead);
  line-height: 1.9;
}

/* «إدارة المساعدة», for admins */
.help-hero .form-links {
  margin: 0 0 1rem;
}

.help-hero .form-links a {
  color: var(--site-yellow);
  font-weight: 700;
}

.help-robot {
  display: block;
  flex: 0 1 var(--site-robot-help);
  aspect-ratio: 69 / 49;
  min-inline-size: 0;
}

/* the search: a white box (in both modes) with its magnifier and a teal drop; how many it found under it */
.site-help .help-search {
  display: block;
  max-inline-size: 40rem;
}

.site-help .help-search[hidden] {
  display: none;
}

.help-search-box {
  position: relative;
}

.help-search-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 1.125rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: -0.75rem;
  color: var(--site-search-icon);
  pointer-events: none;
}

.site-help .help-search-input {
  inline-size: 100%;
  min-block-size: var(--site-search-height);
  padding-block: 0;
  padding-inline: 3.5rem 1.125rem;
  border: 0;
  border-radius: 1.25rem;
  background: var(--site-search);
  color: var(--site-search-text);
  font-size: var(--site-size-search);
  box-shadow: 0 0.5rem 0 var(--site-teal-shadow);
}

.site-help .help-search-input::placeholder {
  color: var(--site-search-hint);
}

.site-help .help-search-input:focus {
  outline: 3px solid var(--site-teal);
  outline-offset: 1px;
  box-shadow: 0 0.5rem 0 var(--site-teal-shadow);
}

/* (its room kept while it says nothing, so nothing moves as it speaks) */
.site-help .help-found,
.site-help .help-found:empty {
  display: block;
  min-block-size: 1.75rem;
  margin: 0.875rem 0 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-form-label);
  font-weight: 700;
}

.help-faq {
  padding-block: 3rem 4.5rem;
  background: var(--site-band-pale);
  color: var(--site-ink);
}

/* the sections beside the questions; while a search finds none their list goes, its column kept */
.help-cols {
  display: grid;
  grid-template-columns: var(--site-help-side) minmax(0, 1fr);
  align-items: start;
  gap: 2.25rem;
}

.help-side {
  padding: 1.125rem;
  border: 2px solid var(--site-rule);
  border-radius: 1.375rem;
  background: var(--site-card);
}

.help-side[hidden] {
  display: none;
}

.help-side-title {
  margin: 0 0 0.625rem;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-nav);
  font-weight: 800;
}

.help-side-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-side-list a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5625rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--site-ink);
  font-size: var(--site-size-nav);
  font-weight: 700;
  text-decoration: none;
}

.help-side-list a:hover {
  background: var(--site-hover);
}

.help-side-list:empty {
  display: none;
}

.help-side-count {
  flex: none;
  color: var(--site-ink-faint);
  font-weight: 600;
}

.help-main {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  gap: 1.375rem;
  min-inline-size: 0;
}

/* (the questions unread or none yet: what's said takes both columns) */
.help-cols:has(> .help-side[hidden]) > .help-main {
  grid-column: 1 / -1;
}

.help-main > .notice {
  border-radius: 1rem;
}

/* each section a white card, its questions opening and closing as the browser's own <details>, a + that turns − */
.site-help .help-sections {
  gap: 1.375rem;
}

.site-help .help-section {
  padding: 1.375rem 1.5rem;
  border: 2px solid var(--site-rule);
  border-radius: 1.375rem;
  background: var(--site-card);
  color: var(--site-ink);
}

.site-help .help-section h2 {
  margin: 0 0 0.5rem;
  font-size: var(--site-size-section);
  font-weight: 900;
  scroll-margin-block-start: calc(var(--header-height) + var(--space-3));
}

.site-help .help-item + .help-item {
  border-block-start: 0;
}

.site-help .help-item {
  border-block-end: 1px solid var(--site-rule-soft);
}

.site-help .help-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.875rem 0.5rem;
  border-radius: 0.75rem;
  color: var(--site-ink);
  font-size: var(--site-size-question);
  font-weight: 700;
  list-style: none;
}

.site-help .help-question::-webkit-details-marker {
  display: none;
}

.site-help .help-question::after {
  content: "";
  flex: none;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.site-help .help-item[open] > .help-question::after {
  background-size: 100% 2px, 2px 0;
}

.site-help .help-question:hover,
.site-help .help-item[open] .help-question {
  color: var(--site-ink);
}

.site-help .help-question:hover {
  background: var(--site-hover);
}

.site-help .help-answer {
  padding: 0 0.5rem 1rem;
  color: var(--site-ink-soft);
  font-size: var(--site-size-answer);
  line-height: 1.95;
}

.help-none {
  margin: 0;
  padding: 1.5rem;
  border-radius: 1.375rem;
  background: var(--site-card);
  color: var(--site-ink);
  font-size: var(--site-size-question);
}

/* «تواصل معنا»: the robot, its title, its line and the email and phone, beside the form on a pale panel; «رسائلي» a
   card under both */
.help-talk {
  padding-block: 5rem;
  background: var(--site-band);
  color: var(--site-ink);
}

.site-help .contact-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.help-talk-robot {
  display: block;
  inline-size: var(--site-robot-side);
  margin-block-end: 1.125rem;
  aspect-ratio: 69 / 49;
}

.site-help .contact-card h2 {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-form-title);
  font-weight: 900;
  line-height: 1.35;
}

.site-help .contact-lead {
  margin: 0 0 1.25rem;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-field);
  line-height: 1.9;
}

.help-reach {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-nav);
}

.help-reach[hidden] {
  display: none;
}

.help-reach a {
  color: var(--site-link);
  font-weight: 700;
}

.site-help .contact-form {
  gap: 1.125rem;
  max-inline-size: none;
  padding: 1.75rem;
  border-radius: 1.625rem;
  background: var(--site-band-pale);
}

.site-help .contact-form .field-label {
  font-size: var(--site-size-form-label);
  font-weight: 800;
}

.site-help .contact-form .field-input {
  min-block-size: var(--site-field-height);
  padding: 0 0.875rem;
  border: 2px solid var(--site-field-line);
  border-radius: 0.875rem;
  background: var(--site-card);
  color: var(--site-ink);
  font-size: var(--site-size-form-label);
}

.site-help .contact-form .contact-text-box {
  padding-block: 0.75rem;
  line-height: 1.8;
}

.site-help .contact-form .field-input:focus {
  border-color: var(--site-ink);
  outline: 3px solid var(--site-teal);
  outline-offset: 1px;
  box-shadow: none;
}

.site-help .contact-form .field-input[aria-invalid="true"] {
  border-color: var(--site-error);
}

.site-help .contact-form .field-hint {
  color: var(--site-ink-quiet);
}

.site-help .contact-form .field-error {
  color: var(--site-error);
  font-weight: 700;
}

.site-help .contact-form .button-primary {
  min-block-size: var(--site-form-button);
  padding-inline: 2.125rem;
  border: 0;
  border-radius: var(--site-radius-button);
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
  font-size: var(--site-size-form-button);
  font-weight: 800;
}

.site-help .contact-form .button-primary:hover {
  box-shadow: 0 0 0 3px var(--site-teal);
}

.site-help .contact-picture-pick {
  border: 2px dashed var(--site-field-line);
  border-radius: 0.875rem;
  background: var(--site-card);
  color: var(--site-ink);
  font-weight: 700;
}

.site-help .contact-form .notice {
  border-radius: 0.75rem;
}

/* brought into view by its address (#contact, #messages): the keyboard on it with no ring round the whole card, as
   help.css has it */
.site-help .contact-card:focus,
.site-help .contact-mine:focus {
  outline: none;
}

.site-help .contact-mine {
  padding: 1.5rem;
  border: 2px solid var(--site-rule);
  border-radius: 1.375rem;
  background: var(--site-card);
  color: var(--site-ink);
}

.site-help .contact-mine h2 {
  font-size: var(--site-size-section);
  font-weight: 900;
}

/* up to 900px: the questions without their sections' list, «تواصل معنا» over its form */
@media (max-width: 56.25rem) {
  .help-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-side {
    display: none;
  }

  .help-main {
    grid-column: auto;
  }

  .site-help .contact-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* a phone: the bands closer, no robot in them (the one that follows is there), the form on the white band */
@media (max-width: 47.9375rem) {
  .help-hero {
    padding-block: 0.375rem 1.625rem;
  }

  .help-robot,
  .help-talk-robot {
    display: none;
  }

  .help-hero h1 {
    margin-block-end: 0.375rem;
  }

  .help-lead {
    margin-block-end: 0.875rem;
  }

  .site-help .help-search-input {
    min-block-size: var(--site-field-height);
    padding-inline-start: 3rem;
    border-radius: 1rem;
  }

  .help-search-icon {
    inset-inline-start: 0.875rem;
  }

  .site-help .help-found,
  .site-help .help-found:empty {
    margin-block-start: 0.625rem;
    font-size: var(--site-size-small);
  }

  .help-faq {
    padding-block: 1.125rem 1.5rem;
  }

  .help-main,
  .site-help .help-sections {
    gap: 0.875rem;
  }

  .site-help .help-section {
    padding: 0.875rem 1rem;
    border: 0;
    border-radius: 1.25rem;
  }

  .site-help .help-question {
    gap: 0.625rem;
    padding: 0.625rem 0.125rem;
  }

  .site-help .help-answer {
    padding: 0 0 0.75rem;
    line-height: 1.85;
  }

  .help-none {
    padding: 1rem;
    border-radius: 1.125rem;
  }

  .help-talk {
    padding-block: 1.5rem 7.5rem;
  }

  .site-help .contact-card h2 {
    margin-block-end: 0.375rem;
  }

  .site-help .contact-lead {
    margin-block-end: 0.875rem;
    font-size: var(--site-size-small);
    line-height: 1.8;
  }

  .site-help .contact-form {
    gap: 0.875rem;
    padding: 0;
    background: none;
  }

  .site-help .contact-form .field-input {
    min-block-size: var(--site-field-height-phone);
  }

  .site-help .contact-form .button-primary {
    inline-size: 100%;
  }

  .site-help .contact-mine {
    padding: 1rem;
  }
}

/* ── A certificate: the pale page, the sheet as it was; one taken back or a code not found, a card with its robot ── */

.site-cert > h1 {
  font-size: var(--site-size-state-title);
  font-weight: 900;
}

.site-cert .cert-real {
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--site-teal-text);
  border-radius: 1.125rem;
  background: var(--site-card);
  color: var(--site-ok-text);
  font-size: var(--site-size-cert-real);
  font-weight: 800;
  line-height: 1.7;
}

.site-cert .cert-real-icon {
  flex: none;
  color: var(--site-teal-text);
}

.site-cert .cert-tools .crs-buttons {
  gap: 0.875rem;
}

.site-cert .cert-tools .button {
  min-block-size: var(--site-form-button);
  padding-inline: 1.375rem;
  border-radius: var(--site-radius-button);
  font-size: var(--site-size-question);
  font-weight: 800;
}

.site-cert .cert-tools .button-primary {
  border: 0;
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
}

.site-cert .cert-tools .button-secondary {
  border: 2px solid var(--site-ink);
  background: var(--site-card);
  color: var(--site-ink);
}

.site-cert .cert-tools > p {
  color: var(--site-ink-quiet);
  font-size: var(--site-size-small);
}

.cert-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  border-radius: 1.75rem;
  background: var(--site-card);
  color: var(--site-ink);
}

.cert-state-robot {
  display: block;
  flex: none;
  inline-size: var(--site-robot-side);
  aspect-ratio: 69 / 49;
}

.cert-state-words {
  flex: 1 1 16rem;
  min-inline-size: 0;
}

.cert-state h1 {
  margin: 0 0 0.625rem;
  font-size: var(--site-size-state-title);
  font-weight: 900;
  line-height: 1.35;
}

.cert-state p {
  margin: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-cert-real);
}

@media screen and (max-width: 47.9375rem) {
  .site-cert {
    gap: 1.125rem;
    padding: 1.125rem var(--site-gutter-phone) 1.875rem;
  }

  .site-cert .cert-tools .crs-buttons {
    display: grid;
    gap: 0.625rem;
  }

  .cert-state {
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    border-radius: 1.375rem;
  }

  .cert-state-robot {
    inline-size: var(--site-robot-side-phone);
  }
}

/* ── The shared report: the navy band with its title and the robot, the week's report as it was on the pale page,
   then «ما «كودي باس»؟» ───────────────────────────────────────────────────────────────────────────────────────── */

.rs-hero {
  padding-block: 1rem 2.75rem;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

.rs-hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.25rem;
}

.rs-hero-words {
  flex: 1 1 22rem;
  min-inline-size: 0;
}

.rs-hero h1 {
  margin: 0 0 0.75rem;
  font-size: var(--site-size-report-title);
  font-weight: 900;
  line-height: 1.3;
}

.rs-lead {
  max-inline-size: 40em;
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--site-size-hero-lead);
  line-height: 1.9;
}

.rs-lead[hidden] {
  display: none;
}

.rs-robot {
  display: block;
  flex: 0 1 var(--site-robot-side);
  aspect-ratio: 69 / 49;
  min-inline-size: 0;
}

.rs-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: 2.25rem 4rem;
}

.rs-what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-start: 1.5rem;
  padding: 1.75rem 2rem;
  border: 2px solid var(--site-rule);
  border-radius: 1.5rem;
  background: var(--site-card);
  color: var(--site-ink);
}

.rs-what-words {
  flex: 1 1 20rem;
  min-inline-size: 0;
}

.rs-what h2 {
  margin: 0 0 0.375rem;
  font-size: var(--site-size-what);
  font-weight: 900;
}

.rs-what p {
  margin: 0;
  color: var(--site-ink-quiet);
  font-size: var(--site-size-form-label);
  line-height: 1.8;
}

.rs-what-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-form-button);
  padding-inline: 1.375rem;
  border-radius: var(--site-radius-button);
  background: var(--site-ink-button);
  color: var(--site-on-ink-button);
  font-size: var(--site-size-form-label);
  font-weight: 800;
  text-decoration: none;
}

.rs-what-go:hover {
  color: var(--site-on-ink-button);
  box-shadow: 0 0 0 3px var(--site-teal);
}

@media (max-width: 47.9375rem) {
  .rs-hero {
    padding-block: 0.25rem 1.375rem;
  }

  .rs-robot {
    display: none;
  }

  .rs-hero h1 {
    margin-block-end: 0.5rem;
  }

  .rs-main {
    padding-block: 1rem 1.875rem;
  }

  .rs-what {
    gap: 1rem;
    margin-block-start: 0.5rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
  }

  .rs-what-go {
    inline-size: 100%;
  }
}

/* ── With reduced motion, nothing moves: the robots change without blinking, looking round or spinning ──────── */

@media (prefers-reduced-motion: reduce) {
  .site-bot,
  .site-bot *,
  .site-follow,
  .site-follow *,
  .visitor-home,
  .visitor-home *,
  .site-courses,
  .site-courses *,
  .visit,
  .visit *,
  .site-gat,
  .site-gat *,
  .site-about,
  .site-about *,
  .site-trainers,
  .site-trainers *,
  .site-help,
  .site-help *,
  .auth-layout,
  .auth-layout *,
  .site-cert,
  .site-cert *,
  .site-report,
  .site-report * {
    animation: none !important;
    transition: none !important;
  }

  /* the pen's strokes drawn whole */
  .trn-ink {
    stroke-dashoffset: 0;
  }
}